@charset "utf-8";
/* CSS Document */
body{
	background:#004358;
	background-image:url(../images/background.gif);
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0.20, rgb(189,204,120)),
		color-stop(0.20, rgb(178,196,101)),
		color-stop(0.50, rgb(178,196,101)),
		color-stop(0.50, rgb(0,67,88))
	);
	background-image: -moz-linear-gradient(
		center top,
		rgb(189,204,120) 0.20,
		rgb(178,196,101) 0.20,
		rgb(178,196,101) 0.50,
		rgb(0,67,88) 0.50
	);
	background-repeat: no-repeat;
	background-position:top left;
}

ul.text li {
	margin-bottom: .5em;
	margin-left: 12px;
	background: url(../images/bullet.gif) 0 .5em no-repeat;
}

#page {
	margin: 0 auto;
	max-width: 902px;
	width:expression(	//IE max-width hack
    	document.body.clientWidth > 902 ?
        	"902px":
        	"auto" );

	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
}

#header {
	float:left;
	padding-bottom:22px;
}

#header h1{
	text-indent:-333em; /* throws the header out of site, but is still visible to screen readers and google*/
}

/* NAVIGATION */
#navigation{
	padding-top:38px;
	float:right;
}

#navigation h2{
	text-indent:-333em;
}

#navigation li{
	display: block;
	margin-left:2em;
	float:left;
}

#navigation li a{
	display:block;
	height: 0 !important;
	line-height: 0 !important;
	padding-top: 50px;
	overflow:hidden;
	text-indent: -500px;
}

#navigation li:hover a.home{
	background:url(../images/home_hover.gif) no-repeat left;
}


#navigation li.active a.home{
	background:url(../images/home_active.gif) no-repeat left;
	cursor:default;
}


#navigation a.home{
	width:42px;
	background:url(../images/home.gif) no-repeat left;
}


#navigation li:hover a.portfolio{
	background:url(../images/portfolio_hover.gif) no-repeat;
}

#navigation li.active a.portfolio{
	background:url(../images/portfolio_active.gif) no-repeat;
	cursor: default;
}

#navigation a.portfolio{
	width: 63px;
	background:url(../images/portfolio.gif) no-repeat;
}

#navigation li:hover a.cv{
	background:url(../images/cv_hover.gif) no-repeat left;
}

#navigation li.active a.cv{
	background:url(../images/cv_active.gif) no-repeat left;
}

#navigation a.cv{
	width:23px;
	background:url(../images/cv.gif) no-repeat left;
}

#navigation li:hover a.links{
	background:url(../images/links_hover.gif) no-repeat left;
}

#navigation li.active a.links{
	background:url(../images/links_active.gif) no-repeat left;
}

#navigation a.links{
	width:33px;
	background:url(../images/links.gif) no-repeat left;
}

/* END NAVIGATION */

#content{
	clear:both;
}

#intro{
	clear:both;
	float:left;
	width: 63.5%; *width:63.4%;
	background-color:#FFF;
	padding-bottom:20px;
	border: 1px solid #9eb17c;	
}
#intro p.photo {
	float:right;
	padding-left:1em;
}
#intro p{
	line-height:180%;
	padding-right:1.6em;
	padding-left:1.2em;
	padding-bottom: 1em;
	color:#666;	

}

#intro p span.name,
#intro p span.keyword { color: #000; }
#intro h2{
	padding-top: .7em;
	padding-left: .7em;
	padding-bottom:.4em;
	font-size:1.5em;
	color:#e6700c;
}

#updates{
	float:right;
	width: 35%; *width:34.9%;
	background-color:#FFF;
	border: 1px solid #9eb17c;
	padding-bottom:20px;
	color: #666;
	font-size: 85%;
}

#updates li { clear: both; }

#updates li a {
	text-decoration: none;
	border-bottom: 1px solid #eee;
	color: #666;
	 -webkit-transition-property:border-color, color;  
	 -webkit-transition-duration: .1s, .1s;  
	 -webkit-transition-timing-function: linear, linear;
	 
	clear: both;
}
#updates li p.photo a {
	border-bottom: none;
}
#updates li:hover a {
	border-bottom-color: #00e;
	color: #00e;
}
#updates li.hover a {
	border-bottom-color: #00e;
	color: #00e;
}

#updates p{
	line-height:180%;
	padding-right:1.1em;
	padding-left:1.2em;
	overflow: hidden;
	word-wrap: break-word;
}

#updates p.photo {
	float: right;
	padding-left: 0;
}

#updates p span.source,
#updates p span.when {
	font-size: 85%;
	opacity: .5;
	-webkit-transition: opacity .1s linear;
}
#updates li:hover span.source,
#updates li:focus span.source,
#updates li:hover span.when,
#updates li:focus span.when {
	opacity: 1;
}
#updates li.hover span.source,
#updates li.hover span.when { opacity: 1; }

#updates h2{
	padding-top: .7em;
	padding-left: .7em;
	padding-bottom:.4em;
	font-size:1.5em;
	color:#e6700c;
}

#updates h3{
	padding-left:1.3em;
	font-style:italic;
}

#updates h4{
	color:#606060;
}

/* PORTFOLIO PAGE*/

#portfolio{
	width:100%;
	clear:both;
	background-color:#FFF;
	border: 1px solid #9eb17c;
	padding-bottom:20px;
}

#portfolio h2{
	color:#e6700c;
	font-size:1.5em;
	padding-top: .8em;
	padding-left: .7em;
	padding-bottom:.5em;
	float: left;
}

#portfolio h3{
	color:#004358;
	font-size:1.2em;
	font-style:normal;
	padding-top: .9em;
	margin-bottom: .5em;
}
#portfolio h3 a { color: #004358; text-decoration: none; border-bottom: 1px dotted #004358; }

#portfolio img.arrow{
	float:left;
}

#portfolio p{
	clear:both;
}

#portfolio p.qrcode,
#portfolio div.description { display: none; }

#portfolio div.slidestrip-pager p.prev,
#portfolio div.slidestrip-pager p.next { display: none; }

/* END PORTFOLIO */
/* CV Page specific code */

#cv{
	width:100%;
	clear:both;
	background-color:#FFF;
	border: 1px solid #9eb17c;
	padding-bottom:20px;
}

#cv h2{
	color:#e6700c;
	font-size:1.5em;
	font-style: italic;
	padding-top: .8em;
	padding-left: .7em;
}

#cv h3{
	color:#004358;
	font-size:1.2em;
	font-style:normal;
	padding-left:.8em;
	padding-top:.9em;
	padding-bottom:.2em;
}

#cv h4{
	color:#555;
}

#cv p.tagline {
	float:right;
	padding-top:2em;
	font-size:1.4em;
	padding-right:4.2em;
	font-style:italic;
	color:#54b3d1;
}

#cv p {
}


#cv ul{
	list-style-image:url(../images/bullet.gif);
	list-style-position:outside;
	padding-left:4em;
}

#cv li{
	color:#2d2d2d;
	width:60%;
	padding-bottom:.4em;
	padding-top:.4em;
}

/* END CV*/
/* LINKS Page specific code */

#links{
	width:100%;
	clear:both;
	background-color:#FFF;
	border: 1px solid #9eb17c;
	padding-bottom:20px;
}

#links h2{
	color:#e6700c;
	font-size:1.5em;
	font-style: italic;
	padding-top: .8em;
	padding-left: .7em;
	padding-bottom:.5em;
}

#links h3{
	color:#004358;
	font-size:1.2em;
	font-style:normal;
	padding-left:.8em;
	padding-top:.9em;
	padding-bottom:.2em;
}

#links h4{
	color:#555;
}

#links p.tagline {
	float:right;
	padding-top:2em;
	font-size:1.4em;
	padding-right:4.2em;
	font-style:italic;
	color:#54b3d1;
}

#links p {
}


#links ul{
	list-style-image:url(../images/bullet.gif);
	list-style-position:outside;
	padding-left:4em;
}

#links li{
	color:#2d2d2d;
	width:60%;
	padding-bottom:.4em;
	padding-top:.4em;
}

#links li a{
	color:#333;
	border-bottom:#333 thin dotted;
	text-decoration:none;
}

#links li a:hover{
	color:#999;
	border-bottom:#999 thin dotted;
	text-decoration:none;
}

#links li a:visited{
	color:#777;
	text-decoration:none;
}

/* END LINKS*/



#footer{
	clear:both;
	padding:1em 0;
	font-size:.8em;
	font-family:Arial, Helvetica, sans-serif;
	color:#578391;
}



/* gallery items */
#content { position: relative; }

.gallery li  
{
    background: none;
    padding: 0;
    margin: 0;
    width: 770px;
    position: relative;
}
.gallery li h3 { margin-left: 10px; }
.gallery li p { height: 0px; overflow: hidden; }
.gallery li p.screenshot { height: auto; overflow: visible; }
.gallery li p.screenshot a { border: none; }
.gallery li p.screenshot a img { border: none; }


/* strip */
div.strip 
{
	width: 100%;
    overflow-x: scroll;
}
div.strip ul
{
    width: 32000px;
}

.strip li
{
    margin-right: 3em;
    float: left;
}

div.strip.ready {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    
    padding-top: 1em /* so animation can slide up */
}

div.strip.ready ul {
	background: #fff;
}

div.strip.ready li {
	padding-left: 0;
	background: #fff;
	margin-left: 0;
}
div.slidestrip-pager { clear: both; height: 0px !important; overflow: hidden; visibility: hidden; margin-bottom: .5em; font-family: Georgia, "Times New Roman", Times, serif; font-size:120%; padding: 0 .9em; }
div.slidestrip-pager.before { height: auto !important; overflow: visible; visibility: visible; }

div.slidestrip-pager ul li { display: inline-block; *display: inline; padding-left: .5em; }
div.slidestrip-pager ul li.first { margin-left: 0; }
 
div.slidestrip-pager ul li a { display: inline-block; *display: inline; line-height: 1.4em; text-decoration: none; border-bottom: 1px dotted #888;  color: #aaa;
	-webkit-transition-property: color, border-color;
	-webkit-transition-duration: .2s, .2s;
	-webkit-transition-timing-function: ease-out, ease-out;
}
div.slidestrip-pager ul li a:hover { border-color: #444; color: #444; }
div.slidestrip-pager ul li a:active,
div.slidestrip-pager ul li a.active { border-color: #444; color: #000; }



div.slidestrip-pager ul.seekers li.prev { float: left; }
div.slidestrip-pager ul.seekers li.next { float: right; }
div.slidestrip-pager ul.pages { text-align: center; margin-top: -1em; }

