/* CSS Document */

/*_________________________________________________________ CSS Reset*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	-webkit-background-size:4500px 2000px;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*_________________________________________________________ end reset*/

body { 
	background-color:#999999;
		}

header	{
	width:960px;
	height:143px;
	margin: 0 auto;
	position:absolute;
	}
header > figure   {
	width:205px;
	height:93px;
	margin:50px 0 0 125px;
	position:absolute;
	}
	
header > p	{
	font-size:12px;
	color:#FFFFFF;
	margin:100px 0 0 165px;
	position:absolute;
	}
	
p		{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666666;
	padding:10px 0 0 0;
	text-align:justify;
	width:540px;
	}
	
	
a			{text-decoration:none}
a:link	 	{color:#666666}
a:visited	{color:#666666}/*grey*/
a:focus		{color:#99FF66}
a:hover		{color:#99FF66}
a:active	{color:#99FF66}/*green*/

footer		{
	width:960px;
	height:12px;
	margin:558px 0 0 165px;
	position:absolute;
	}
	
footer > p		{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#666666;
	}
	
ul		{
	font-family:Arial, Helvetica, sans-serif;
	list-style-type:none;
	}
	
ol li		{
	margin: -25px 0 0 -21px;
	padding:0;
	list-style-type:none;
	}

h1		{
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:lighter;
	color:#FFFFFF;
	margin:3px 0 0 0;
	}
			
h2		{
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:lighter;
	color:#FFFFFF;
	height:32px;
	}
h3		{
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	color:#99FF66;
	}
h4		{
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	color:#99FF66;
	}	
	
	
	
/*_________________________________________________________ infinite slider*/	
section		{
	margin: 143px 0 0 auto;
	position:absolute;
		}
	
.introPage,
.content,	
.content-inner		{
	width:6100px;
	height: 420px;
	float:left;
	overflow: hidden;
	
  -moz-transition:    opacity 0.5s ease-out; 
       -o-transition: opacity 0.5s ease-out; 
  -webkit-transition: opacity 0.5s ease-out; 
      -ms-transition: opacity 0.5s ease-out;

	-webkit-animation: moveSlideshow 60s linear infinite;
    -moz-animation:    moveSlideshow 60s linear infinite;
	-o-animation:	   moveSlideshow 60s linear infinite;
	-ms-animation:     moveSlideshow 60s linear infinite;
	}
	
.content-inner:hover,
.introPage:hover		{
	-webkit-animation-play-state:paused; 
		-o-animation-play-state:paused;
	-moz-animation-play-state:paused; 
	   -ms-animation-play-state:paused;
	}
	
.introPage,		
#content-inner-00:target .content-inner,
#content-inner-1:target .content-inner,
#content-inner-2:target .content-inner,
#content-inner-3:target .content-inner, 
#content-inner-4:target .content-inner, 
#content-inner-5:target .content-inner, 
#content-inner-6:target .content-inner, 
#content-inner-7:target .content-inner, 
#content-inner-8:target .content-inner, 
#content-inner-9:target .content-inner, 
#content-inner-10:target .content-inner,
#content-inner-11:target .content-inner, 
#content-inner-12:target .content-inner
 	{
	/*width: 4500px;
	height: 420px;*/
    position: absolute;
    top: 0;
    left: 0;
	}
.introPage		{
	background:url(images/introPage.jpg);	
	}
#content-inner-00:target .content-inner	{
	background:url(images/televisionAcademy.jpg);
	}	
#content-inner-1:target .content-inner	{
	background:url(images/Olino-CalOaks.jpg);
	}
#content-inner-2:target .content-inner 	{
	background:url(images/dreamworksPDI.jpg)
	}
#content-inner-3:target .content-inner {
	background:url(images/Mosaic-CarmelMtn.jpg);
	}
#content-inner-4:target .content-inner	{
	background:url(images/mainstreamTheaters.jpg);
	}
#content-inner-5:target .content-inner	{
	background:url(images/Angelika.jpg);	
	}
#content-inner-6:target .content-inner	{
	background:url(images/screeningRooms.jpg);
	}
#content-inner-7:target .content-inner	{
	background:url(images/interiors.jpg);
	}
#content-inner-8:target .content-inner	{
	background:url(images/LAresidence.jpg);
	}
#content-inner-9:target .content-inner	{
	background:url(images/productDesign.jpg);
	}
#content-inner-10:target .content-inner	{
	background:url(images/collaborations.jpg);
	}
#content-inner-11:target .content-inner	{
	background:url(images/visualization.jpg);
	}
	
@-webkit-keyframes moveSlideshow {
    0% { left: 0; }
	100% { left: -4500px;}
	}

@-moz-keyframes moveSlideshow {
    0% { left: 0; }
	100% { left: -4500px;}
	}


@-ms-keyframes moveSlideshow {
    0% { left: 0; }
	100% { left: -4500px;}
	}
	
/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}

/*@media screen and (-webkit-min-device-pixel-ratio: 2) {... }
@media only screen and (max-device-width: 768px)
	and (device-height:1024px)
	and (-webkit-min-device-pixel-ratio:2){
	}
}*/
	
/*_________________________________________________________ navigation*/		

navigation > ul	{
	font-family: arial, helvetica, sans-serif;  
	font-size:100%;  
	width:150px;
	color:#666666;
	margin:600px 0 0 0;
	padding:0 0 0 165px;
	position:absolute;
	clear:both;
	float:left;
	}
	
	

/*______________________________________________secondary navigation*/


.slides	{		/*secondary navigation*/	
	width:120px;
	height:550px;
	margin:575px 0 0 315px;
	position:absolute;
	}

#slideshow {  		
	margin:10px 0 0 0;
	position:absolute;
	}
	
#slideshow ul {  
padding: 0;  
list-style-type: none;  
height: 1%; /*IE fix*/  
} 
  
#slideshow ul:after {  
content: ".";  
clear: both;  
display: block;  
height: 0;  
visibility: hidden;
	}          
  

#slideshow .slides {  
overflow: hidden;  
width: 960px;
	}
  
#slideshow .slides ul {  
/* total width of all slides - 
960px multiplied by 3 in this case */  
width: 5760px;
	} 
  
#slideshow .slides li {  
width: 920px;  
float: left;  
padding: 20px;
	}  
	
/*______________________________________________narrative*/

#narrative		{
	position:relative;
	clear:both;
	}	

#narrative a		{
	text-decoration:none;
	}

#narrative a:hover		{
	color:#99FF33;
	cursor:crosshair;
	}
	
#narrative ul li		{		/*project narrative*/
	position:absolute;
	clear:both;
	margin:-33px 0 0 180px;
	background:#999999;
	left:9999px;
	z-index:5;
	-webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	}

#narrative li:hover ul li {
	left:0;
	}