/* undo some default styling of common (X)HTML browsers
 * ------------------------------------------------------------------------- */
 
/* No list-markers by default - must redefine bullets w/ bg graphics */
ul,ol { list-style:none; }
 
/* Avoid browser default inconsistent heading font-sizes and pre/code */
h1,h2,h3,h4,h5,h6,pre,code,td { font-size:1em; }
 
/* Remove inconsistent (among browsers) default padding or margin */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,label,div,dd,dt,dl,table,tr,td { margin:0; padding:0; }
 
/* prevent blue linked image borders */
a img,:link img,:visited img,fieldset { border:none; }




body {font-family:Arial, Helvetica, sans-serif; /*background-color:#dcdcdc;*/ background:url("../webfiles/stripes3.png") repeat; margin:0 0; padding:0 0;}
#topWrapper {height:110px; /*background-color:#000000; background-repeat:repeat-x;*/  background:url("../webfiles/stripes1.png") repeat; border-bottom:2px solid #ccc;}
#midWrapper {/*background-color:#ffffff; background-repeat:repeat;*/ background:url("../webfiles/stripes2.png") repeat;}
#midBottom {background:url("../webfiles/bottom-slice.jpg"); background-repeat:repeat-x; height:8px; margin:0 0 20px 0;}


/*-------------MAIN CONTENT-----------------------*/

#container {width: 850px; margin:0 auto;}

#contact {width:1000px; height:20px; margin: 0 auto; padding:70px 0 0 0;}
#contact ul {font-size:12px; text-align:right; font-weight:500; padding:0 0 0 0;}
#contact li {list-style:none; display:inline; margin:0 20px 0 0;}
#contact a {color:#ffffff; text-decoration:none;}
#contact a:hover {color:#ff0000; text-decoration:none;}
	
#nav {width:339px; height:384px; margin:35px 0 50px 0; float:left;}

#nav-top {width:850px; background-repeat:no-repeat; margin:0 auto;}
#nav-top p {color:#FFF; font-size:14px; font-weight:100; line-height:1.4em; margin:0 auto; padding:0 0 0 0; text-align:center;}
#nav-top a {color:#FFF; padding:9px; text-decoration:none;}
#nav-top a:hover {color:#FFF; background-color:#111; padding:9px; text-decoration:none; border-bottom:#1589d0 solid 5px;}

body#home #nav-top a.current, body#web3 #nav-top a.current, body#renderings2 #nav-top a.current, body#branding #nav-top a.current, body#drawings #nav-top a.current, body#contactForm #nav-top a.current {color:#FFF; background-color:#111; padding:9px; text-decoration:none; border-bottom:#1589d0 solid 5px;}
	
#logoBox {width:118px; height:116px; background-repeat:no-repeat; float:left; margin:30px 0 0 0;}
#logoBoxLarge {width:160px; height:250px; background-repeat:no-repeat; float:left; margin:75px 0 0 70px;}

#hdrBanner {width:850px; height:200px; margin:30px 0 0 0; float:left;}

#bioPic {width:160px; height:234px; background-image:url("../webfiles/bio-pic.jpg"); float:right; margin:15px 45px 10px 10px; border:#CCCCCC thin solid;}

#quote {width:542px; height:116px; background-image:url("../webfiles/quote.jpg"); background-repeat:no-repeat; float:left; margin:30px 0 0 0;}
	
#content {width:850px; float:left; margin:30px 0 50px 0;}
#content p {color:#333333; font-size:15px; font-weight:lighter; line-height:1.4em; margin:20px 30px 10px 30px; text-align:left;}
#content h1 {color:#1589d0; font-size:22px; font-weight:bold; padding:25px 30px 10px 30px; text-align:left; background:url("../webfiles/jm-border.gif") repeat-x;}
#content a {color:#000000; text-decoration:none;}
#content a:hover {color:#ff0000; text-decoration:none;}


/*--------------------HOME PAGE--------------------*/

#bottom {width:900px; /*height:200px;*/ margin:0 auto;}
.bottomBio {width:135px; float:left; text-align:left; margin:0 40px 30px 60px; border-right:#666666 1px solid;}
.bottomBio ol {color:#000000; font-size:13px; font-weight:200;}
.bottomBio li {color:#000000; font-size:13px; font-weight:200;}
.bottomBio h1 {color:#000000; font-size:20px; font-weight:200; text-shadow:#777 2px 1px 2px;}
.bottomBio p {color:#1589d0; font-size:11px; text-align:right; margin:0 20px 0 0;}
.bottomBio a {color:#1589d0; font-size:11px; text-decoration:none;}
.bottomBio a:hover {color:#000; font-size:11px; text-decoration:none;}

.bottomExperience {width:215px; float:left; text-align:left; margin:0 40px 30px 0; border-right:#666666 1px solid;}
.bottomExperience ol {color:#000000; font-size:13px; font-weight:200;}
.bottomExperience li {color:#000000; font-size:13px; font-weight:200;}
.bottomExperience h1 {color:#000000; font-size:20px; font-weight:200; text-shadow:#777 2px 1px 2px;}
.bottomExperience p {color:#1589d0; font-size:11px; text-align:right; margin:0 20px 0 0;}
.bottomExperience a {color:#1589d0; font-size:11px; text-decoration:none;}
.bottomExperience a:hover {color:#000; font-size:11px; text-decoration:none;}

.bottomContact {width:205px; float:left; text-align:left; margin:0 40px 30px 0; border-right:#666666 1px solid;}
.bottomContact ol {color:#000000; font-size:13px; font-weight:200;}
.bottomContact li {color:#000000; font-size:13px; font-weight:200;}
.bottomContact h1 {color:#000000; font-size:20px; font-weight:200;}
.bottomContact p {color:#333333; font-size:11px; text-align:right; margin:0 20px 0 0;}
.bottomContact a {color:#333333; font-size:11px; text-decoration:none;}
.bottomContact a:hover {color:#FF0000; font-size:11px; text-decoration:none;}

.bottomFollow {width:155px; float:left; text-align:left; margin:0 0 30px 0;}
.bottomFollow ol {color:#000000; font-size:13px; font-weight:200;}
.bottomFollow li {color:#000000; font-size:13px; font-weight:200;}
.bottomFollow h1 {color:#000000; font-size:20px; font-weight:200;}

.follow {width:44px; height:44px; margin:0 20px 0 0; display:inline;}

/*-----------------FOOTER---------------------------*/

#footer {width:1000px; text-align:center; margin:0 auto;}
#footer p {color:#999999; font-size:12px; margin:50px auto;}

/*-----------------PORTFOLIO--------------------------*/

.portfolio {width:1000px; margin:0 auto;}
.portfolio h2 {font-size:20px; color:#1589d0; padding:5px; font-weight:100; margin:15px 0 20px 10px; letter-spacing:.125em; text-align:left; border-bottom:#AAA solid 1px;}

.webLinks {width:150px; height:110px; float:left; margin:20px 40px 20px 10px; display:inline;}
.webLinks ul {font-size:10px; text-align:center; font-weight:100; }
.webLinks li {list-style:none; display:inline; }
.webLinks a {color:#333333; text-decoration:none; }
.webLinks a:hover {color:#FF0000; text-decoration:none;}

.logosContainer {width:550px; float:left; margin:30px 0 0 150px;}
.logos {width:150px; height:90px; float:left; margin:10px 10px 10px 10px; display:inline;}
.logos ul {font-size:10px; text-align:center; font-weight:100; }
.logos li {list-style:none; display:inline; }

.renderings {width:75px; height:75px; float:left; margin:10px 20px 10px 10px; display:inline;}
.renderings ul {font-size:10px; text-align:center; font-weight:100; }
.renderings li {list-style:none; display:inline; }

.drawingsContainer {width:550px; float:left; margin:30px 0 0 150px;}
.drawings {width:120px; float:left; margin:5px 14px 0 0; display:inline;}
.drawingsVert {width:100px; float:left; margin:10px 5px 0 0; display:inline;}


/*-------------IMAGE FLOW-----------------*/

.imageflow {overflow:hidden; position:relative; text-align:left; visibility:hidden; width:100%;}
.imageflow img {border:none; position:absolute; top:0px; visibility:hidden; -ms-interpolation-mode:bicubic; /* Enables bicubic image resampling for the IE7 */}
.imageflow p {margin:0 auto; text-align:center;}
.imageflow .loading {border:1px solid white; height:15px; left:50%; margin-left:-106px; padding:5px; position:relative visibility:visible; width:200px;}
.imageflow .loading_bar {background:#fff; height:15px; visibility:visible; width:1%;}
.imageflow .navigation{z-index:10000;}
.imageflow .caption {font-weight:bold; position:relative; text-align:center; z-index:10001;}
.imageflow .scrollbar {border-bottom:1px solid #b3b3b3; position:relative; visibility:hidden; z-index:10002; height:1px; margin:57px 0 0 0;}
.imageflow .slider {background:url("../webfiles/3D/slider_dark.png") no-repeat; height:14px; margin:-6px 0 0 -7px; position:absolute; width:14px; z-index:10003;}
.imageflow .slideshow {cursor:pointer; height:14px; margin:20px 0 0 20px; position:absolute; width:14px; z-index:10003;}
.imageflow .slideshow.pause {background:url("../webfiles/3D/button_pause_gray.png") no-repeat;}
.imageflow .slideshow.play {background:url("../webfiles/3D/button_play_gray.png") no-repeat;}
.imageflow .images {overflow:hidden; white-space:nowrap; }
.imageflow .button {cursor:pointer; height:7px; position:relative; width:17px; }
.imageflow .previous {background: url("../webfiles/3D/button_left_gray.png") top left no-repeat; float:left; margin: -7px 0 0 -30px;}
.imageflow .next {background: url("../webfiles/3D/button_right_gray.png") top left no-repeat; float:right; margin:-7px -30px 0 30px;}


/*------------------CONTACT FORM------------------------*/

#form {width:400px; float:left; margin:70px 0 0 150px;}
#form2 {width:400px; float:left; margin:0 0 20px 0;}
#form p {color:#333333; font-size:10px; font-weight:lighter; margin:0 10px 10px 30px;}
#form h2 {font-size:28px; color:#CCCCCC; font-weight:100; margin:5px 0 10px 10px; text-align:left;}

/*------------------CLASSES---------------------------*/
	
div.clear {clear:both; height:.01em; overflow:hidden;}
.bold { font-weight:bold;}
.small {font-size:12px; color:#000;}

/*----------------IMAGE SLIDER-------------------*/

#sliderContainer {width:850px; margin:40px 0 30px 0; float:left;}

#slideshow {margin:0 auto; width:498px; height:402px; background:transparent url("../webfiles/mac.png") no-repeat 0 0; position:relative;}
#slideshow #slidesContainer {
  margin:0 auto;
  width:454px;
  height:478px;
  overflow:hidden; /* allow scrollbar */}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:498px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:280px;}

/** 
 * Slideshow controls style rules.
 */
.control {display:block; width:39px; height:260px; text-indent:-10000px; position:absolute; cursor: pointer;}
#leftControl {top:0; left:-90px; background:transparent url("../webfiles/left-arrow.png") no-repeat 0 0;}
#rightControl {top:0; right:-90px; background:transparent url("../webfiles/right-arrow.png") no-repeat 0 0;}

.slide img {float:left; width:455px; height:257px; margin:21px 0 0 0;}

.slideText {width:455px; float:left; margin:150px 0 30px 0;}
.slideText h2 {font-size:14px; text-align:center; color:#888;}
.slideText a {font-size:14px; color:#888; text-decoration:none;}
.slideText a:hover {font-size:14px; color:#333; text-decoration:none;}

	
/*------------------LIGHTBOX-----------------------------*/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url("../webfiles/prevlabel.gif") left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url("../webfiles/nextlabel.gif") right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


/*--------------ROTATOR-----------------*/

/* rotator in-page placement */
.rotator {position:relative; height:200px; display: none;}
/* rotator css */
.rotator ul li {float:left; position:absolute; list-style: none;}
/* rotator image style */	
.rotator ul li img {/*border:1px solid #ccc; padding: 4px;*/ background: #FFF;}
.rotator ul li.show {z-index:500}