html {
height:100%;
width:100%;
}

body {  
  color: #000100;
  background: #fff; 
  margin: 0 auto;
  padding: 0; 
  text-align: left;
  font-family: 'Droid Serif', arial, serif;
}  

*, * focus {outline: none;}

.clear {clear: both}

.clear-right {clear: right}

img {border: 0px;}

#wrapper 
{
  width: 900px;
  height:620px;
  margin: 0px auto;
  position:relative
}

#logo {width:212px; height:100px; position:absolute}

/* NAV */

#navcontainer {padding: 38px 0 0 250px; position:absolute; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li {display:inline;}

#navcontainer a
{
background-color: transparent;
/*width: 9em;*/
padding: 0 .25em;
color:#231F20; 
font-weight:bold; 
text-decoration:none; 
font-size:11px;
margin: 0 .4em;
}

#navcontainer a:hover {background-color: #535F35; color: #FFF;}

#navcontainer li .pipes {color:#535E35; font-size:.71em;}

/* HOME */

#john-innovation {width:650px; height:544px; position:absolute; margin: 68px 0 0 195px;}

/* SLIDESHOW */

.slideshow1 img  { display: none }
.slideshow1 img.first { display: block }

.slideshow2 img  { display: none }
.slideshow2 img.first { display: block }

.slideshow1 { height: 421px; width: 468px; position:absolute; margin: 56px 0 0 425px;}
.slideshow1 img {   
    width:  468px; 
    height: 421px; 
}

.slideshow2 {width: 54px; position:absolute; margin: 558px 0 0 433px;}
.slideshow2 img {   
    width:  441px; 
    height: 54px; 
}

#padding { padding-top:130px;}

.ital {font-style:italic;}

/* CHOREOGRAPHY */

#choreography .left {float:left; width:197px;}
#choreography .right {float:left; width:655px;}
#choreography .right .row {border-bottom: 1px solid #CCC; margin: 0 0 7px 12px; padding: 0 0 7px 0; overflow:hidden;}
#choreography .right .last {border-bottom: none;}
#choreography .right .row .one {float:left; width:172px; font-size:.75em; font-weight:bold; margin:0; padding:0}
#choreography .right .row .one img {margin-top:2px;}
#choreography .right .row .one p {margin:0 0 0 24px; padding:0;}
#choreography .right .row .one p a {color:#000100; text-decoration:none}
#choreography .right .row .one p a:hover {color:#535F35;}
#choreography .right .row .one .small {font-size:.6em;}
#choreography .right .row .big-image {float:left; width: 582px; margin:0 0 0 24px; padding:0}
#choreography .right .row .two, #choreography .right .row .three {float:left; width:227px; font-size:.6em; line-height: 1.5em; margin:0; padding:0; letter-spacing:-.025em;}
#choreography .right .row .two {margin:0 7px 0 10px; padding:0;}

#choreography a.camera {
	height: 13px;
	display: block;
	cursor: pointer !important;
	background-position: 0px 0px;
	position: absolute;
	background: url(images/camera-icon-on.jpg) no-repeat;
	width: 16px;
}

#choreography a:hover.camera {
	background-position: 0px -13px !important;
}

/* VIDEO */

#video .left {float:left; width:256px;}
#video .left .row {border-bottom: 1px solid #CCC; margin: 0 0 6px 12px; padding: 0 0 6px 0; overflow:hidden; width:256px !important; font-size:.75em; font-weight:bold; background-image:url('../images/camera-icon-off.jpg'); background-repeat:no-repeat; background-position:28px 0px;}
#video .left .row:hover {
	background-position:28px -34px;
	}
#video .left .current {background-position:28px -34px;}	
#video .left .current .hovertext {color:#535F35;}	
#video .left .current .currentclip {color:#535F35;}
#video .left .last {border-bottom: none;}
#video .left .row p {margin:0 0 0 54px; padding:0;}
/* #video .left .row:hover p span.hovertext {color:#535F35} */
#video .left p a {color:#000100; text-decoration:none;}
#video .left p a:hover {color:#535F35; }
#video .left .row .small {font-size:.8em; font-weight:normal}
#video .left .row .pipe {font-size:.8em; margin: 0 2px;}
#video .right {float:left; width:480px; margin:0 0 0 66px; padding:0px;}
#video .right .one {float:left; width:480px; margin:0; padding:0;}
#video .right .two {float:left; width:480px; margin:0; padding:0; border-bottom: 1px solid #CCC; margin: 0 0 0 0; padding: 0 0 0 0;}
#video .right .two p {font-size:.65em; margin:21px 0 10px 0; padding:0;}
#video .three {float:left; width:815px;}
#video .three img {margin-top: 50px;}

/* ART SPACE */

#art-space .left {float:left; width:275px;}
#art-space .mid {float:left; width:1px; margin: 0 16px;}
#art-space .right {float:left; width:457px;}
#art-space .right p {margin: 0; padding:0;}


/* BIOGRAPHY */

#biography .left {float:left; width:400px;}
#biography .left .one {float:left; width:400px;}
#biography .left .two {float:left; width:400px; color:#535F35; font-size:.95em; margin-top:11px;}
#biography .left .two p {margin:1px 0 0 30px;}
#biography .right {float:left; margin:0; padding:0;}
#biography #bio-pdf {position:relative; top:428px}

/* BIOGRAPHY QUOTES */

#biography .left .three {float:left; width:400px; font-size:.55em;}
#biography .left .three p {margin:10px 7px 0 16px; padding:0; line-height:1.3em; text-align:justify}
#biography .left .three .name {margin-top:4px;}
#biography .left .three .quote-left {margin:7px 0 0 6px;}
#biography .left .three p .quote-right {margin-bottom: 1px;}

.quotes {background: #fff; width: 400px; height: 140px; border-top: 1px solid #999; border-bottom: 1px solid #999; padding: 0 0 0 0;}

/* GALLERY STUFF */
#gallery_container {
width: 100%;
float: left;
position: relative;
height: 472px;
}

#gallery_prev, #gallery_next {
width:60px;
height: 25px;
position: absolute;
z-index: 10;
top:316px;
background-repeat: no-repeat;
}

#gallery_prev {
left: 20px;
background-image:url('../images/gallery_prev.jpg');
}

#gallery_next {
right: 34px;
background-image:url('../images/gallery_next.jpg');
}

#gallery_feature {
width:740px;
height: 405px;
position: absolute;
top:0px;
left:80px;
overflow: hidden;
}

#gallery_feature .gallery_slide {
position: absolute;
top:0px;
left: 0px;
text-align: center;
display: none;
}

#gallery_feature .gallery_slide img {
max-width: 740px;
max-height: 405px;
margin-right: auto;
margin-left: auto;
}

#gallery_feature .gallery_slide:first-child {
display: block;
}

#gallery_bottom {
width:740px;
height: 48px;
position: absolute;
bottom: 0px;
left: 80px;
}

#gallery_bottom a img { padding-right:1px;}


/* CONTACT */

#contact .left {float:left; width:469px;}
#contact .right {float:left; width:366px; background-color:#231F20; height:368px; position:relative;left:-1px;}
#contact .right .content { margin:100px 0 0 50px;}
#contact .right .content p {margin: 0 0 0 0; padding:0; color:#FFF; font-size: .8em; line-height:1.3em}
#contact .right .content p a {color:#BFBFBF; text-decoration:none}
#contact .right .content p a:hover {text-decoration:underline}
#contact .big {font-size: 2em!important; letter-spacing:2px;}
#contact p .small {font-size: .75em!important; font-style:italic;}
#contact .footer {float:left; width: 865px; color:#231F20; font-size:.55em; font-style:italic; margin-top:5px;}
#contact .footer .left {float:left; width:720px}
#contact .footer .copilot {float:right; width:125px; margin-right:18px}
#contact .footer .copilot {text-align:right color:#808080}
#contact .footer .copilot a {color:#808080; text-decoration:none; font-style:normal}
#contact .footer .copilot a:hover {text-decoration:underline}