@charset "UTF-8";
/* CSS Document */

html {
background-image:url(images/curtain_shadows.png);
background-color:#b5371a;
color:#ffffff;
}

/************************************************************************************/

/* CONTAINER
   -curtain is centered with the margin auto.  container is absolutely positioned center within curtain.  
   -Positioned relative to make it an anchor point.  All div
   -tags within the container are absolutely positioned 
*/

body {
/*background: #fff url(images/curtain_swoop.png) 50% 50%;*/

} 
html, body {
margin: 0;
padding: 0;
color:#ffffff;
}
/*\*/
html, body, .swc0 {
height: 100%;
width:100%;
}
.swc0 {
margin: 0 auto;
display: table;
}
.swc1 {
display: table-cell;
vertical-align: middle;
}
/**/
.swc1 {
height: 100%;
white-space: nowrap;
} 
/*.swc2 {
background-color: #eee;
border: 1px solid #333;
padding: .3em .5em;
}*/
* html .swc1 {
text-align: center;
}
* html .swc2, * html .swc3 {
display: inline-block;
vertical-align: middle;
text-align: left;
}
* html .swc3 {
height: 100%;
}
/*\*/
* html .swc2 {
display: inline;
height: 0;
}
/*/
.swc2, .swc3 {
width: 1px;
}
/**/ 

body{
background-image:url(images/curtain_swoop.png);
background-repeat:repeat-x;
font-size:12px;
letter-spacing:1px;
font-family: Arial, Verdana, sans-serif;
text-shadow:#000000 .2em .2em .2em;
-x-system-font:none;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:18px;
}

/* The Outermost Container
- not really necesssary anymore
  but it's a pain to get rid of it */
#vertalign { 
position:relative;
width:960px;
height:568px;
padding:0;
margin:50px auto 0 auto;
overflow:hidden;
}


/* Inner Container */
#container { 
position:absolute;
top:0px;
left:0px;
width:960px;
height:568px;
background-color:#000000;
padding:0;
margin:0;
overflow:hidden;
white-space:normal;
}



/* ANIMATED CURTAINS */
#curtain_openleft{
background-image:url(images/curtain_openleft.png);
width:535px;
height:575px;
position:absolute;
left:0px;
top:0px;
z-index:9;
}

#curtain_openright{
background-image:url(images/curtain_openright.png);
width:535px;
height:575px;
position:absolute;
left:435px;
top:0px;
z-index:9;
}
/* ----------------- */




/* WELCOME BOX CSS */
/* Div holds welcome txt and covers player initially */
#welcome_box{
background-color:#000000;
width:520px;
height:475px;
/* z-index:7; */
position:absolute;
left: 30px;
top:41px;
font-size:1.05em;
font-weight:normal;
}

#welcome_box h3{
width:510px;
text-align:center;
margin:0;
padding: 20px 0px 0px 0px;
font-size:14px;
}

#welcome_box p{
width:510px;
text-align:center;
margin:0;
padding: 20px 0 0px 0px;
font-size:14px;
}

#welcome_box #first{
padding-top:140px;
}
/* ----------------- */




/* GENERAL LINKS CSS */
a:link{
color:#FFFFFF;
cursor:pointer;
}

a:visited{
color:#FFFFFF;
cursor:pointer;
}

a:hover{
color:#FFFF00;
cursor:pointer;
}

a:active{
color:#FFFFFF;
cursor:pointer;
}
/* ----------------- */



/* X BOXES THAT CLOSE WINDOWS CSS */
.x_close{
position:absolute;
width: 16px; 
height: 16px;
background-image:url(images/ui_icons_out.png);
background-position: -32px -192px;
z-index:7;
left:350px;
top:10px;
cursor:pointer;
}

.receiver .x_close{
left:300px;
top:10px;
}

.download_film .x_close{
left:335px;
top:10px;
}

.x_close:hover{
position:absolute;
width: 16px; 
height: 16px;
background-image:url(images/ui_icons_hover.png);
background-position: -32px -192px;
}
/* ----------------- */




/* HEADERS AND FRONT PAGE LOGOS */

/* top banner */
#header {
width:956px;
height:40px;
background-image:url(images/header.png);
background-repeat:no-repeat;
background-color:#585858;
position:absolute;
left:2px;
top:2px;
padding:0px 0px;
margin: 0 0;
text-indent:-9000px;
}

#header h2{
position:absolute;
top:7px;
left:310px;
font-weight:normal;
font-size:20px;
padding:0px 0px;
margin: 0 0;
}

/* shaded gray footer */
#footer{
width:956px;
height:40px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
position:absolute;
left:2px;
top:527px;
}

/* film and television archive logo */
#ftv_logo{
background-image:url(images/ftv_logo.png);
background-repeat:no-repeat;
width:162px;
height:73px;
position: absolute;
top:0;
left:0;
z-index:8;
text-indent:-9999px; /*image replacement technique */
}

/* digital collections logo */
#dlcs_logo {
background-image:url(images/dlcs_logo.png);
position:absolute;
top:545px;
left:757px;
width:200px;
height:22px;
z-index:6;
text-indent:-9999px;
}
/* ----------------- */



/* div for swf player */
#player{
background-color:#000000;
width:510px;
height:380px;
z-index:6;
position: absolute;
left:30px;
top:40px;
padding: 50px 0 50px 0;
}



/* PRESERVATIONIST AND HISTORICAL NOTES */

/* note fnotes is the class for both historical and preservationist notes buttons
   hnotes and pnotes are classes for historical notes button and preservationist notes button, respectively.
   and an R at the end signifies that it is the actual window for that button. */ 
.fnotes{
position:absolute;
text-shadow:none;
height:26px;
top:490px;
z-index:6;
cursor:pointer;
padding:0;
text-decoration:underline;
text-indent:-9999px;
}

.fnotes:hover{
color:#FFFF00;
border:none;
}	
	
.pnotes2{
background-image:url(images/preservationistButton.png);
background-repeat:no-repeat;
left:30px;
width:180px;
cursor:pointer;
}

.hnotes{
background-image:url(images/historianButton.png);
background-repeat:no-repeat;
left:178px;
width:162px;
curser:pointer;
}
/*---*/


.hnotesR, .pnotesR{
display: none;
background-image:url(images/notes_box.png);
background-repeat:no-repeat;
position:absolute;
width:405px;
height:435px;
top:80px;
left:100px;
z-index:5;
padding: 0px 0px;
margin:0px 0px;
white-space:normal;
overflow:hidden;
}

.hnotesR p, .pnotesR p{
padding: 0px 25px 0px 30px;
margin:0px;
width:350px;
height:320px;
overflow:auto;
}

.pnotesR h3, .hnotesR h3{
margin:0px 0px 0px 30px;
padding:40px 30px 3px 0px;
border-bottom:solid #999999 2px;
font-size:18px;
font-weight:normal;
width:275px;
}

.pnotesR h4, .hnotesR h4{
margin:0;
padding:4px 30px 10px 30px;
font-size:13px;
font-weight:normal;
}

.pnotesR h4 span, .hnotesR h4 span{
font-size:13px;
font-weight:bold;
}


/*pdf logos for notes*/
.hnotesR .pdf_small, .pnotesR .pdf_small{
position:absolute;
top:40px;
left:350px;
width:20px;
height:20px;
border:none;
padding:0;
}

.pdf_small img{
border:none;
}

.hnotesR .x_close, .pnotesR .x_close{
left:380px;
}

/* --- */


#info_tab{
width:380px;
height:516px;
position:absolute;
top:51px;
left:568px;
z-index:2;
}

/* "Share This" Feature */
#shareThis{
width:80px;
height:20px;
position:absolute;
left:2px;
top:547px;
}

/* Films Button */
#info_tab #films_button{
background-image:url(images/films_button.png);
position:absolute;
height:26px;
top:0px;
left:10px;
}

/* Bottom Nav Bar */
#info_tab .button{
postion:absolute;
width:117px;
height:36px;
z-index:3;
cursor:pointer;
}

#info_tab .button:hover{
position:absolute;
border:solid #000000 1px;
}

#aboutproject_button{
background-image:url(images/aboutproject_button.png);
position:absolute;
top:477px;
left:-309px;
height:31px;
}

#historical_button{
background-image:url(images/historical_button.png);
position:absolute;
top:477px;
left:-71px;
}

#aboutmusic_button{
background-image:url(images/aboutmusic_button.png);
position:absolute;
top:477px;
left:-190px;
}

#studyguide_button{
background-image:url(images/studyguide_button.png);
position:absolute;
top:477px;
left:48px;
}
/* --- */


.window{
position:absolute;
width:370px;
height:433px;
top:30px;
left:5px;
overflow:auto;
}


.film_container{
position:absolute;
width: 340px;
height: 100px;
border-top: solid #333333 2px;
border-bottom:#333333 solid 4px;
left:10px;
top:0px;
padding:0;
margin:0;
background-color:#000000;
white-space:normal;
}

 
#enchanted_drawing{
top:0px;
}

#how_jones{
top:100px;
}

#bobs_electric{
top:200px;
}

#indoor_sports{
top:300px;
}

#joy_glooms{
top:400px;
}

#pool_plunge{
top:500px;
}

#animated_hair{
top:600px;
}

#lost_promo{
top:700px;
}

#lost_trailer{
top:800px;
}

#wandering_toy{
top:900px;
}

#theatre_hula{
top:1000px;
}



.film_container h4{
font-size:14px;
font-weight:normal;
padding: 10px 40px 0px 90px;
margin:0 0;
}


.film_container p{
margin:0 0;
padding:7px 35px 0px 90px;
}


#bobs_electric h4 + p, #bobs_electric h4, #wandering_toy h4 + p, #wandering_toy h4{

}


.arrow{
background:url(images/arrow.png) no-repeat;
width:35px;
height:56px;
position:absolute;
left:57px;
top:53px;
z-index:3;
}



li{
list-style-type:none;
margin: 0 0px;
padding: 0px 0 0 12px;
background-repeat: no-repeat;
}

/*******************************
	all the icons
********************************/

.play_button{
background-image:url(images/play_button.png);
position:absolute;
left:300px;
top:13px;
width:36px;
height:36px;
cursor:pointer;
}

.play_button:hover{
left:297px;
}

.download_button{
background-image:url(images/download_button.png);
background-repeat:no-repeat;
width:36px;
height:36px;
position:absolute;
left:300px;
top:52px;
cursor:pointer;
}

.download_button:hover{
left:297px;
}

/*film title*/
.download_film h2{
padding:50px 10px 0px 110px;
margin:0;
font-size:18px;
}

#pool_plunge_downloadwin h2, #joy_glooms_downloadwin h2, #indoor_sports_downloadwin h2, #wandering_toy_downloadwin h2, #theatre_hula_downloadwin h2{
padding:68px 10px 0px 110px;
}


/*downloadable versions*/
.download_film h3{
margin:0;
padding:15px 10px 28px 185px;
font-weight:normal;
font-size:14px;
}

.download_film .versions, .download_film .mpeg_links{
width:278px;
height:155px;
position:absolute;

}

.download_film .versions{
top:150px;
left:0px;
}

.download_film .mpeg_links{
top:158px;
left:248px;
}

.download_film ul{
margin:0;
padding:0;
}


.download_film li{
margin:0;
padding: 0px 0px 10px 0px;
font-size:15px;
}

.download_film a{
font-size:15px;
}


.click{
position:absolute;
width:75px;
height:75px;
top:13px;
left:0px;
}

.iconmed{
position:absolute;
width:75px;
height:75px;
top:15px;
left:20px;
}

#animated_hair_icon, #animated_hair_iconmed{
background-image:url(images/animated_hair_out.png);
}

#pool_plunge_icon, #pool_plunge_iconmed{
background-image:url(images/pool_plunge_out.png);
}

#bobs_electric_icon, #bobs_electric_iconmed{
background-image:url(images/bobs_electric_out.png);
}

#joy_glooms_icon, #joy_glooms_iconmed{
background-image:url(images/joy_glooms_out.png);
}

#how_jones_icon, #how_jones_iconmed{
background-image:url(images/how_jones_out.png);
}

#lost_promo_icon, #lost_promo_iconmed{
background-image:url(images/lost_promo_out.png);
}

#enchanted_drawing_icon, #enchanted_drawing_iconmed{
background-image:url(images/enchanted_drawing_out.png);
}

#indoor_sports_icon, #indoor_sports_iconmed{
background-image:url(images/indoor_sports_out.png);
}

#theatre_hula_icon, #theatre_hula_iconmed{
background-image:url(images/theatre_hula_out.png);
}

#wandering_toy_icon, #wandering_toy_iconmed{
background-image:url(images/wandering_toy_out.png);
}

#lost_trailer_icon, #lost_trailer_iconmed{
background-image:url(images/lost_trailer_out.png);
}
/* --- */


/* Download Window */	

.download_film{
display: none;
position:absolute;
top:81px;
left:580px;
width:380px;
height:433px;
z-index:8;
background-color:#000000;
}

.download_film .copyright{
text-decoration:none;
padding:0 0 0 6px;
margin:0;
font-size:16px;
}

.download_film .copyright:hover{
color:#ffffff;
}

	/* Other Download Options */
	
	.download_other{
	width:380px;
	height:150px;
	position:absolute;
	left:0px;
	top:270px;
	/*border:#333333 solid 3px;*/
	}
	
	.download_other h4{
	font-weight:normal;
	padding: 17px 10px 1px 0px;
	margin:0;
	font-style:italic;
	font-size:14px;
	width:380px;
	border-bottom:#333333 solid 2px;
	}
	
	.download_other span{
	font-size:11px;
	margin:0;
	padding:0;
	}
	
	.sicon{
	width:45px;
	height:45px;
	position:absolute;
	cursor:pointer;
	}


	.sicon:hover{
	border:1px solid white;
	cursor:pointer;
	}
			
			
		/* Small Other Download Options Film Icons */
		
		#pool_plunge_sicon{
		background-image:url(images/pool_plunge_sicon.png);
		left:0px;
		top:48px;
		}
		
		#animated_hair_sicon{
		background-image:url(images/animated_hair_sicon.png);
		left:55px;
		top:48px;
		}
		
		#bobs_electric_sicon{
		background-image:url(images/bobs_electric_sicon.png);
		left:110px;
		top:48px;
		}
		
		#how_jones_sicon{
		background-image:url(images/how_jones_sicon.png);
		left:165px;
		top:48px;
		}
		
		#joy_glooms_sicon{
		background-image:url(images/joy_glooms_sicon.png);
		left:220px;
		top:48px;
		}
		
		#indoor_sports_sicon{
		background-image:url(images/indoor_sports_sicon.png);
		left:275px;
		top:48px;
		}
		
		#enchanted_drawing_sicon{
		background-image:url(images/enchanted_drawing_sicon.png);
		left:0px;
		top:103px;
		}
		
		#lost_promo_sicon{
		background-image:url(images/lost_promo_sicon.png);
		left:55px;
		top:103px;
		}
		
		#lost_trailer_sicon{
		background-image:url(images/lost_trailer_sicon.png);
		left:110px;
		top:103px;
		}
		
		#wandering_toy_sicon{
		background-image:url(images/wandering_toy_sicon.png);
		left:165px;
		top:103px;
		}
		
		#theatre_hula_sicon{
		background-image:url(images/theatre_hula_sicon.png);
		left:220px;
		top:103px;
		}
		
		#download_all_sicon{
		/*background-image:url(images/download_all.png);*/
		left:275px;
		top:103px;
		}
				
		/* --- */
	/* --- */
/* ---End Download Window */ 



/* Select a Version Window */

.receiver{
display:none;
background-color:#000000;
position:absolute;
top:81px;
left:580px;
width:370px;
height:433px;
font-weight:normal;
z-index:4;
margin:0px;
padding:0px;
}

.receiver p{
margin:0;
padding:0;
cursor:pointer;
}

/* film title */
.receiver h3{
font-size: 16px;
font-weight:normal;
font-style:italic;
margin:0px 0px 0px 0px;
width:320px;
padding:20px 0px 3px 10px;
text-align:left;
border-bottom: 2px solid #333333;
}

#lost_promo_receiver h4{
padding-top:20px;
}

/* says "select a version:" */
.receiver h4{
font-size:17px;
font-weight:normal;
margin: 0px 0px 0px 0px;
padding: 30px 0px 10px 10px;
}


.download_film .cc_logo_pd, .download_film .cc_logo_pd img{
width:20px;
height:20px;
border:none;
margin:0px;
padding: 2px 0 0 4px;
}

.receiver ul{
margin:0;
padding:0px 0px 0px 65px;
}

.receiver li{
padding:0 0 0px 0;
margin: 7px 0 0 0px;
font-size:17px;
text-align:left;
list-style-image:url(images/greyBullet.png);
list-style-position:outside;
}

.receiver li a{
display:block;
text-decoration:none;
padding:0;
margin:0;
}

/* Small Download Image */
.receiver .small_download_button{
background-image:url(images/download_button_small.png);
position:absolute;
width:25px;
height:25px;
left:20px;
top:400px;
}
.receiver .download_this{
position:absolute;
left:50px;
top:405px;
width:70px;
height:25px;
}

div.receiver .x_icon, div.download_film .x_icon{
background-image:url(images/x_button.png);
width:20px;
height:21px;
position:absolute;
top:20px;
left:305px;
border:none;
cursor:pointer;
font-size:18px;
}

	/* Large Icons at Bottom */
	
	.receiver div img{
	position:absolute;
	left:95px;
	top:240px;
	width:150px;
	height:150px;
	}
	
	#animated_hair_lgicon{
	background-image:url(images/animated_hair_lgicon.png) ;
	}
	
	#pool_plunge_lgicon{
	background-image:url(images/pool_plunge_lgicon.png);
	}
	
	#bobs_electric_lgicon{
	background-image:url(images/bobs_electric_lgicon.png);
	}
	
	
	#how_jones_lgicon{
	background-image:url(images/how_jones_lgicon.png);
	}
	
	#lost_promo_lgicon{
	background-image:url(images/lost_promo_lgicon.png);
	}
	
	#enchanted_drawing_lgicon{
	background-image:url(images/enchanted_drawing_lgicon.png);
	}
	
	#indoor_sports_lgicon{
	background-image:url(images/indoor_sports_lgicon.png);
	}
	
	#theatre_hula_lgicon{
	background-image:url(images/theatre_hula_lgicon.png);
	}
	
	#wandering_toy_lgicon{
	background-image:url(images/wandering_toy_lgicon.png);
	}
	
	#lost_trailer_lgicon{
	background-image:url(images/lost_trailer_lgicon.png);
	}
	/* --- */
/* ---End Select a Version Window */

.notes-film-title {
	font-style: italic;
}