/* LAYOUT */
* {
	margin: 0;
	padding: 0;
	*zoom: 1;
}

body {
    width: 85%;
    max-width: 65em;
	margin: 1em auto;
	font: 400 0.9em 'trebuchet ms',arial,sans-serif;
	color: #444;
}

#nav,
#head,
#content,
#footer {
    margin-bottom: 1em;
}

#nav {
	margin-bottom: 2em;
	position: relative;
	z-index:2;
}
	
#nav ul {
    display: block;
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: right;
}
	
#nav li {
	display: inline;
}
	
#nav li a,
#footer .links a {
	padding: .5em 1em;
	text-decoration: none;
	font: 400 1.1em 'trebuchet ms',arial,sans-serif;
	color: #999;
	letter-spacing: -1px;
	text-transform: uppercase;
}
#footer .links a {
    color: #ccc;
}
#footer .links a:hover {
    color: #999;
}
#nav li a:hover {
	color: #aaa;
}
#footer .links {
    margin-left: -1em;
}

#nav li a:hover,
#footer .links a:hover {
	background: #FFF url('/content/arrow.gif') no-repeat top center;
}
	
#head {
	line-height: 0.8em;
	margin-top: -3.5em;
}

#head h1 {
    display: block;
	font: 400 5.5em Helvetica, 'trebuchet ms',arial,sans-serif;
	margin-bottom: 0px;
	padding-bottom: 0px;
	letter-spacing: -0.1em;
	text-transform: uppercase;
	line-height: 100%;
	}
	
#head span.separator {display: none;}

#head p.title {
    display: block;
	font: 400 1.25em 'Helvetica LT Std Light', 'trebuchet ms',arial,sans-serif;
	margin: 0;
	margin-top: -2.25em;
	padding: 0;
	letter-spacing: normal;
	text-transform: uppercase;
	margin-left: 1em;
}

#head h1 {
	color: rgba(68,68,68,.9);
	font-size: 2em;
	line-height: 100%;
	text-transform: uppercase;
	margin-bottom: 1em;
	margin-left: -1.75em;
}
#head h1 .prefix {
	display: inline-block;
	
	-moz-transform: rotate(90deg); 
	-moz-transform-origin: 85% 50%;
	-webkit-transform: rotate(90deg); 
	-webkit-transform-origin: 85% 50%;

	letter-spacing: -.05em;
}

#head h1 .name {
	color: #33a;
	color: rgba(51,51,170,1);
	*color: #33a;
	font-size: 2.75em;
	line-height: 100%;
	text-transform: lowercase;
	/*
	top: .25em;
	left: -.25em;
	*/
}

#head p.title {
	color: #444;
	}


#welcome,
#resume,
#links,
#portfolio {
    margin-bottom: 1em;
    clear: both;
}

#welcome div.main,
#welcome div.sidebar,
#resume div.main,
#links div.main,
#portfolio div.main {
	border-top: 5px solid #ECECEC;
	padding-top: .5em;
	margin-bottom: 1em;
}

#welcome div.sidebar {
	width: 30%;
	float: right;
	text-align: right;
	margin-right:2px;
	}


#welcome div.main {
	width: 64%;
	float: left;
	}
	
#welcome p img {
    display: block;
	float: right;
	padding: 4px;
	border: 1px solid #D6D6D6;
	margin: 10px 0 10px 10px;
	margin-top: -4em;
	background-color: #D7E4EA;
}
	
h1 {
	font: 400 1.4em Calibri, helvetica, 'trebuchet ms',arial,sans-serif;
	color: #444;
	letter-spacing: -0.1em;
	margin-bottom: 0;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
	}

h2, .tagline {
	font: 400 1.2em Calibri, helvetica, 'trebuchet ms',arial,sans-serif;
	margin-top: -0.4em;
	padding-top: 0px;
	letter-spacing: -1px;
	text-transform: uppercase;
	}
	
h3 {
	font: 400 1.2em Calibri, helvetica, 'trebuchet ms',arial,sans-serif;
	color: #444;
	letter-spacing: -0.05em;
	margin-bottom: 10px;
	text-transform: uppercase;
	}
	
p {
	line-height: 1.8em;
	margin: 0 0 1em 0;
	color: #666;
	}
p.tagline { margin-bottom: 2em; }

.vcard abbr,
.vevent abbr {
    border-bottom: none;
}
abbr,
.gallery .description abbr { border-bottom: 1px dotted #aaa; cursor: help; }
#content a, #content2 a, #copyright a {
	text-decoration: none;
	}

#content a:hover, #content2 a:hover, #copyright a:hover {
	border-bottom: none;
	}

img.content, a img.content {
	float: right;
	padding: 4px;
	border: 1px solid #D6D6D6;
	margin: 10px 0 10px 10px;
	}
	
a:hover img.content {
	border: 1px solid #BBB;
	}
	
img.color, a img.color {
	float: left;
	padding: 1px;
	border: 1px solid #CCC;
	margin: 0 8px 0 0;
	}
	
a:hover img.color {
	border: 1px solid #999;
	}

.right2 {
	float: right;
	width: 160px;
	margin-left: 15px;
	padding-top: 40px;
	border-top: 5px solid #ECECEC;
	text-align: right;
	font-size: 0.9em;
	}
	
.right2 h3 {
	letter-spacing: -1px;
	}
	
#content2 {
	margin-right: 365px;
	border-top: 5px solid #ECECEC;
	padding-top: 40px;
	}
	
ol {
	color: #AAA;
	font: 600 1.0em 'trebuchet ms',arial,sans-serif;
	padding: 10px;
	}
 
ol span {
	font: 400 1.0em 'trebuchet ms',arial,sans-serif;
	color: #555;
	font-style: normal;
	}

ol li {
	margin-left: 25px;
	padding: 4px 0
	}

ul,
ul li { margin: 0; padding: 0; list-style-type: none; }

#content ul.text, #content2 ul.text {
	list-style-type: none;
	padding: 0 0;
	color: #555;
	margin-bottom: 1em;
	margin-left: 15px;
	}
	
#content ul.text li, #content2 ul.text li {
	padding-left: 15px;
	background: url('/content/bullet2.gif') no-repeat left 0.4em;
	margin-left: 0;
	margin-bottom: .5em;
	}
#content ul.text li li, #content2 ul.text li li {
	padding-left: 0;
	background: none;
	margin-left: 0;
}

table {
  width: 100%;
  margin-bottom: 20px;  
  font-size: 1em;
  border-collapse: collapse;
}

table caption {
  margin-top: 20px;
  padding: 0 0 0.5em 3px;
  font: 400 1.2em arial,sans-serif;
  text-align: left;  
  letter-spacing: -1px;
}

table th,
table td {
  text-align: left;
  vertical-align: top;
  padding: 4px 7px !important;
  padding: 6px 10px;
}


thead th {
  border-top: 2px solid #CCC;
  border-bottom: 1px solid #CCC;
}


tbody td {
  border-bottom: 1px solid #ECECEC;
}

tbody tr:hover {
  background-color: #F0F0F0;
}

.blockquote {
	display: block;
	width: 100%;
	border-top: 1px solid #E0E0E0;
	border-bottom: 1px solid #E0E0E0;
	background-color: #F0F0F0;
	margin: 10px 0 20px 10px;
	padding: 5px;
	font-style: italic;
	}

form label{
	display:block;
	}

form input.text, form textarea{
	width:100%;
	border:1px #E0E0E0 solid;
	color:#444;
	padding:4px 5px;
	font:12px Arial,san-serif;
	background-color: #F3F3F3;
	}

form input.text:hover, form textarea:hover{
	border:1px #E0E0E0 solid;
	}

form input.text:focus, form textarea:focus{
	border:1px #CCC solid;
	color:#444;
	}

form input.button{
	margin-right:8px;
	padding:3px 5px;
	font:12px Arial,san-serif;
	}

* html form input.text,

* html form textarea{
	border-color: #CCC;
	color:#333;
	}

/*
#footer {
	width: 100%;
	border-top: 3px solid #ECECEC;
	padding: 40px 0 40px 0;
	margin-top: 40px;
	}
*/

#resume h3.fn {display: none;}
#resume h3 { font-weight: bold; font-size: 200%; color: #ddd; margin-bottom: 0; }


#welcome,
#resume,
#links,
#portfolio {
    width: 100%;
    float:left;
}



/* COLOR */
#nav li a:hover {
	color: #338;
	}

#right li a:hover, .right2 li a:hover {
	color: #338;
	}
	
h3, .tagline {
	color: #338;
	}
	
	
#content a, 
#content2 a, 
#copyright a {
	color: #338;
	border-bottom: 1px dotted #338;
	}
#welcome p span.name {
	color: #000;
	white-space: nowrap;
}
	
img.content, a img.content {
	background-color: #D7E4EA;
	}
	
thead th {
  color: #338;
}

#copyright {clear: both; margin: 0;}
#footer {clear: both; margin: 0;}
#footer .links {
    margin-top: .5em;
}
#footer .links ul,
#footer .links ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#footer .links li {
    display: inline;
}


#resume .myinfo {display: none;}


#activity ul {
    text-align: left;
}
#activity ul li {
    margin-bottom: .5em;
}

#activity dt,
#activity dd {
    display: inline;
}

#activity dt.title,
#activity dt.published {
    display: none;
}

#activity dt.source {
    text-transform: lowercase;
}

#activity dd.source .name {display: none;}

#activity dd.published,
#activity dt.source,
#activity dd.source {
    color: #aaa;
    text-transform: lowercase;
    font-size: .7em;
}

#activity dd.source a {
    color: #aaa;
    text-transform: lowercase;
    text-decoration: none;
    border-bottom-color: #aaa;
}


/* gallery items */

#content .gallery > ul > li  
{
    background: none;
    padding: 0;
    margin: 0;
    width: 750px;

    position: relative;
}
#content .gallery > ul > li:after {
	display: block;
	content: ".";
	clear: both;
	height: 0;
	line-height: 0;
	overflow: hidden;
}

#content .gallery li h3 {  }
#content .gallery li p  
{
	height: 0;
	overflow: hidden;
	
}
#content .gallery li .body { height: 450px; overflow: visible; }
#content .gallery li p.screenshot { width: 64%; outline: 1px solid #ccc; height: 450px; float: left; margin-right: 1%; margin-bottom: 0; overflow: hidden; }
#content .gallery li p.screenshot:hover { outline-color: #77a; }
#content .gallery li p.screenshot:focus { outline-color: #77a; }
#content .gallery li p.screenshot a { border: none; }
#content .gallery li p.screenshot a img { border: none; display: block; }
#content .gallery li p.qrcode { 
	height: auto; 
	margin-bottom: 0;
	position: absolute; 
	background-color: #fff;
	bottom: 1em; 
	left: 1em;
    -moz-box-shadow: 0 0 .75em rgba(0,0,0,.7);                            
}
#content .gallery li p.qrcode img { display: block;  }
#content .gallery li p.qrcode a {
	border: none;
	display: block; 
}
#content .gallery li p.qrcode a img { border: 1px solid #ccc; }
#content .gallery li p.qrcode a:hover img { border-color: #77a; }
#content .gallery li p.qrcode a:focus img { border-color: #77a; }

#content .gallery li div.description {
	height: 450px;
	width: 33%;
	overflow: visible;
	float: left;
}
#content .gallery li div.description p { height: auto; }
#content .gallery li div.description .ui-accordion-header {
	margin: 0;
	line-height: 133%;
	border: 1px solid #ccc;
	border-width: 1px 0;
	color: #aaa;
	padding-left: 15px;
	background: url(/content/accordion-arrow-right.gif) 3px .4em no-repeat;
	cursor: pointer;
	margin-top: -1px;
}
#content .gallery li div.description .ui-accordion-header.ui-state-active,
#content .gallery li div.description .ui-accordion-header.ui-state-hover { 
	color: #338;
}
#content .gallery li div.description .ui-accordion-header.ui-state-active {
	border-color: #338;
	background-image: url(/content/accordion-arrow-down.gif); 
	cursor: default;
}

#content .gallery li .ui-accordion .ui-accordion-content {
	
}

/* strip */
#content div.strip 
{
	width: 100%;
    overflow-x: scroll;
}
#content div.strip > ul
{
    width: 32000px;
}

#content .strip > ul > li
{
    margin-right: 3em;
    float: left;
}

#content div.strip.ready {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    
    padding-top: 1em; /* so animation can slide up */
	clear: both;
}

#content div.strip.ready > ul {
	background: #fff;
}

#content div.strip.ready > ul > li {
	padding-left: 0;
	background: #fff;
	margin-left: 0;
}
#content div.slidestrip-pager { clear: both; height: 0px !important; overflow: hidden; visibility: hidden; margin-bottom: 1em; }
#content div.slidestrip-pager.before { height: auto !important; overflow: visible; visibility: visible; margin-bottom: 0; }

#content div.slidestrip-pager > ul > li { display: inline-block; *display: inline; margin-left: .25em; }
#content div.slidestrip-pager > ul > li.first { margin-left: 0; }
 
#content div.slidestrip-pager a { display: inline-block; *display: inline; padding: 0 .4em; line-height: 1.4em; text-decoration: none; border: 1px solid #33a; border-color: #33a #118 #118 #33a; color: #33a; }
#content div.slidestrip-pager a:hover { background-color: #33a; color: #fff; }
#content div.slidestrip-pager a:active,
#content div.slidestrip-pager a.active { background-color: #118; border-color: #118 #33a #33a #118; color: #fff; }

#content div.slidestrip-pager p.prev { width: 10%; float: left; margin-bottom: 0; }
#content div.slidestrip-pager p.next { width: 10%; float: right; margin-bottom: 0; }
#content div.slidestrip-pager ul.pages { width: 80%; float: left; text-align: center; margin-bottom: 0; }
#content div.slidestrip-pager:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	line-height: 0;
	overflow: hidden;
}


/* notes */
div.msg {margin-bottom:1em;padding:1em;padding-bottom:20px;background:#ffe url(/content/form-note-bg.gif) bottom left no-repeat;border:1px solid #e8e8e8;border-bottom-width:0;border-right-color:#ddd;color:#333}
div.msg *:last-child { margin-bottom: 0; }