/* style sheet for Facing Fear site*/

body {  font-family: verdana, sans-serif; 
	font-size: small;
	margin: 0;
	padding: 0;
	background: #000;}
	

	
h1 {font-size: 180%;;text-decoration:none}
h2 { font-size: 50%; color: #000;text-decoration:none}
h3 { font-size: 100%; color:#F90;text-decoration:none}


h1, h2, h3, h4, h5, h6, p {
	text-decoration: none;
	margin-top: 0;/* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 0px;
	padding-top: 0px;
	padding-left: 0px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
	}

a:link    {color: #000;text-decoration:none}
a:visited {color: #000;text-decoration:none}
a:hover   {color: #06F;text-decoration:none}
a:active  {color: #06F;text-decoration:none} 	
	
p a:link    {color: #000;text-decoration:none}
p a:visited {color: #000;text-decoration:none}
p a:hover   {color: #06F;text-decoration:none}
p a:active  {color: #06F;text-decoration:none} 

li a:link    {color: #FFF;text-decoration:none}
li a:visited {color: #FFF;text-decoration:none}
li a:hover   {color: #000;text-decoration:none}
li a:active  {color: #06F;text-decoration:none} 

.style30 a:link    {color: #393;text-decoration:none}
.style30 a:visited {color: #393;text-decoration:none}
.style30 a:hover   {color: #960;text-decoration:none}
.style30 a:active  {color: #393;text-decoration:none} 

.style31a a:link    {color: #960;text-decoration:none}
.style31a a:visited {color: #960;text-decoration:none}
.style31a a:hover   {color: #393;text-decoration:none}
.style31a a:active  {color: #960;text-decoration:none} 

.style32 a:link    {color: #F39;text-decoration:none}
.style32 a:visited {color: #F39;text-decoration:none}
.style32 a:hover   {color: #393;text-decoration:none}
.style32 a:active  {color: #F39;text-decoration:none} 

.style25 a:link    {color: #369;text-decoration:none}
.style25 a:visited {color: #369;text-decoration:none}
.style25 a:hover   {color: #393;text-decoration:none}
.style25 a:active  {color: #369;text-decoration:none} 

.style26 a:link    {color: #000;text-decoration:none}
.style26 a:visited {color: #000;text-decoration:none}
.style26 a:hover   {color: #06F;text-decoration:none}
.style26 a:active  {color: #FFF;text-decoration:none} 

#copyright p a:link		{color: #666;text-decoration:none}
#copyright p a:visited	{color: #666;text-decoration:none}
#copyright p a:hover		{color: #06F;text-decoration:none}
#copyright p a:active	{color: #666;text-decoration:none} 
	
	
#backdroptop {
	position: relative;
	background: #000;
	height: auto;
	background-image:url(images/dark-alley2.jpg); background-repeat:no-repeat;	}
	


#container {/* to fit ipad 1024x768*/
	width: 768px; height: 1024px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	}
	
	
#mainbox1	 {/* subcontainer*/
	position: relative;
	width: 768px;
	height: 770px;/* 710px */
	background: #FFF;
	text-align: left;
	border-radius:0 0 9px 9px;
		 }	
	
#mainbox-bio {/* subcontainer*/
	position: relative;
	width: 708px;
	height: 770px;/* 710px */
	background: #FFF;
	padding: 50px 30px 0 30px;
	text-align: left;
	border-radius:0 0 9px 9px;
		 }
#mainbox-production-credits {/* subcontainer*/
	position: relative;
	width: 708px;
	height: 910px;/* 710px */
	background: #FFF;
	padding: 50px 30px 0 30px;
	text-align: left;
	border-radius:0 0 9px 9px;
		 }
		 
		 
#mainbox-short {/* subcontainer*/
	position: relative;
	width: 708px;
	height: 650px;
	background: #FFF;
	padding: 50px 30px 0 30px;
	text-align: left;
	border-radius:0 0 9px 9px;
		 }
#mainbox-credits {/* subcontainer*/
	position: relative;
	width: 733px;/* different than #mainbox-bio (width: 708px;) */
	height: 650px;/* different than #mainbox-bio (height: 720px;) */
	background: #FFF;
	padding: 50px 5px 0 30px;
	text-align: left;
	border-radius:0 0 9px 9px;}

#mainbox-contact {/* subcontainer*/
	position: relative;
	width: 733px;
	height: 300px;
	background: #FFF;
	padding: 50px 5px 0 30px;
	text-align: left;
	border-radius:0 0 9px 9px;}
	
		 		 
#banner {/* banner area*/
	postion: relative;
	width: 768px;
	height: 200px;
	background-image:url(images/banner-03.jpg); background-repeat:no-repeat;	
		 }
	#banner1 {/* trailer page*/
	position: relative;
	width: 768px;
	height: 200px;	
	background-image:url(images/banner-03.jpg); background-repeat:no-repeat;
		 }
	#banner2 {/* banner area*/
	postion: relative;
	width: 768px;
	height: 200px;
	background-color: #FFF;	
		 }
	#banner3 {/* PRESS page*/
	position: relative;
	width: 768px;
	height: 200px;	
	background-image:url(images/banner-02.jpg); background-repeat:no-repeat;
		 }

	#banner4 {/* PRESS page*/
	postion: relative;
	width: 768px;
	height: 200px;	
	background-color: #FFF; }


#facingfearlogobox {/* logo box for upper right page*/
	position: absolute;
	top: 0;
	left:0;
	width: 470px;
	height: 148px;
	padding: 50px 0 0 30px;
	text-align: left;
	background: ;
	}
#facingfearlogobox2 {/* logo box for upper right page*/
	position: absolute;
	top: 0;
	left:0;
	width: 620px;
	height: 148px;
	padding: 50px 0 0 30px;
	text-align: left;
	background: ;
	}
	
	#oscar-box {/* Banner box for oscar text*/
	position: absolute;
	top: 135px;
	left:31px;
	width: 597px;
	height: 90px;
	color: #000;
	font-weight:normal;
	font-size: 14px;
	line-height: 17px;
	background: tranparent;
	}
	

#facebook-like-box{/* Box for recommend/like*/
	position: absolute;
	top: 657px;
	left:610px;
	width: 150px;
	height: 31px;
	padding: 0 0 0 0;
	background: tranparent;
	z-index: 80;
	}
		
	#tweeter-share-box{/* Box for recommend/like*/
	position: relative;
	top: 657px;
	left: 475px;
	width: 230px;
	height: 31px;
	background: tranparent;
	z-index: 70;
	}
	
#facebook-like-box2{/* Box for BIO page*/
	position: absolute;
	top: 730px;
	left:610px;
	width: 150px;
	height: 31px;
	padding: 0 0 0 0;
	background: tranparent;
	z-index: 80;
	}
		
	#tweeter-share-box2{/* Box for recommend/like*/
	position: absolute;
	top: 730px;
	left: 475px;
	width: 230px;
	height: 31px;
	background: tranparent;
	z-index: 70;
	}
	
#facebook-like-box3{/* Box for recommend/like*/
	position: absolute;
	top: 624px;
	left:620px;
	width: 151px;
	height: 50px;
	padding: 0 0 0 0;
	background: tranparent;
	z-index: 80;
		}
		
	#tweeter-share-box3{/* Box for recommend/like*/
	position: absolute;
	top: 674px;
	left:620px;
	width: 148px;
	height: 55px;
	background: tranparent;
	z-index: 80;
		}
	
.tagline {/* tagline-#369*/
	color: #666;
	font-weight: bold;
	font-size: 20px; line-height: 26px;
	}
	


#banner-photo {/* Banner box for photo page*/
	position: absolute;
	top: 0;
	left:0;
	width: 630px;
	height: 138px;
	padding: 50px 108px 0 30px;
	text-align: left;
	background: ;
	}
	
.stylelogo-1 {/* title*/
	color: #000;
	font-weight: bold;
	font-size: 34px;line-height: 10px;}
	
	.stylelogo-2 {/* subtitle*/
	color: #369;
	font-weight: bold;
	font-size: 12px; line-height: 10px;}
	.stylelogo-3 {/* subtitle*/
	color: #666;
	font-weight: bold;
	font-size: 12px;line-height: 5px;}
	
	
#bottom-band-index { /*index page*/
	width: 738px;
	height: 55px;/*70px*/
	padding: 15px 0 0 30px;
	font-family:Verdana, Geneva, sans-serif;
	background-color: #000;
	border-radius:0 0 9px 9px;
	z-index: 0;
	}
	
#bottom-band { /*photo.html page*/
	position: absolute;
	top: 400px; /*main page is 496px*/
	left: 0;
	width: 768px;
	height: 100px;
	padding: 0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:80%;
	background-color:#FFF;
	border-radius:0 0 9px 9px;
	z-index: 0;
	}
	
#bottom-text-box {/* news box under banner*/
	padding: 25px 30px 0 30px;
	text-align: left;
	width: 708px;
		 }	
	
	
#bottom-text-box {/* news box under banner*/
	padding: 25px 10px 0 30px;
	text-align: left;
	width: 728px;
		 }		
	
		 
		 	
#laurel-box {/* Banner box for festival laurels*/
	position: absolute;
	top: 58px;
	left:337px;
	width: 428px;
	height: 110px;
	padding: 0 0 0 0;
	background: tranparent;
	}
	
#laurel-box2 {/* Banner box for festival laurels*/
	position: absolute;
	top: 70px;
	left:570px;
	width: 150px;
	height: 100px;
	padding: 0 0 0 0;
	background: tranparent;
	}	
	
#laurel-box3 {/* Banner box for festival laurels*/
	float: left;
	width: 160px;
	height: 500px;
	padding: 0 0 0 0;
	background: tranparent;
	}
	

		
	
#dropbox {/* box for download folder*/
	position: absolute;
	top: -97px;
	left:577px;
	width: 180px;
	background-image:url(images/folder_download-sm.png);
	background-repeat:no-repeat;
	z-index: 10;
		 }
		 
#dropbox p {/* box for download folder*/
	padding: 8px 0 0 40px;
	color: #369;
	font-size: 9px; line-height: 11px;}
	
	 	
#imagebox {/* production stills box*/
	position: relative;
	padding: 30px 30px 0 30px;
	text-align: left;
	width: 768px;
	height: 600px;/* 583px- original box size*/
	background: #FFF;
	border-radius:0 0 9px 9px;
		 }	
		 
#slidebox {/* video/production stills box*/
	position: relative;
	text-align: left;
	width: 768px;
	height: 600px;/* 583px- original box size*/	
	border-radius:0 0 9px 9px;
		 }
		 
#video-container {
	position: relative;
	width: 768px;
	height: 432px;
	 }	
			  
#bio-copy {/* menupadding: 16px 0 0 52em;*/
	padding: 50px 0px 0 30px;
	text-align: left;
	width: 738px;
	}

#bio-crew {/* menupadding: 16px 0 0 52em;*/
	postion: relative;
	padding: 50px 30px 0 30px;
	text-align: left;
	width: 708px;
	}
	
.style22a {/* name bios*/
	color: #000;
	font-weight: bold;
	font-size: 16px;line-height: 24px;
	}
	

.style23a {/* SUBTITLE*/
	color: #333;
	font-weight:normal;
	font-size: 14px;line-height: 24px;
	}
	
.style24a {/* BODY COPY*/
	color: #CCC;
	font-size: 60%;	
	}
	
.style25 {/* BIO BODY COPY*/
	color: #000;
	font-size: 12px; line-height: 16px;
	}
	
.style25a {/* BODY COPY- same as style 25 except line-height*/
	color: #000;
	font-size: 12px; line-height: 30px;
	}
	
.style25b {/* BIO NAME*/
	color: #000;
	font-weight: bold;
	font-size: 14px; line-height: 16px;
	}
	
.style25c {/* Trailer copy*/
	color: #000;
	font-size: 11.5px; line-height: 13px;
	}
	
.style26 {/* BIO BODY COPY*/
	color: #000;
	font-size: 12px; line-height: 16px;
	}
	
.style30 {/* name bios*/
	color: #000;
	font-weight: bold;
	letter-spacing: 1px;
	font-size: 24px;line-height: 30px;
	}
	
	.style30a {/* name bios*/
	color: #000;
	font-weight: bold;
	letter-spacing: 1px;
	font-size: 24px;line-height: 30px;
	}
	
.style31 {/* name bios*/
	color: #FFF;
	font-weight: bold;
	letter-spacing: 1px;
	font-size: 35px;line-height: 60px;
	}
.style31a {/* SUBTITLE*/
	color: #000;
	font-weight: bold;
	font-size: 14px;line-height: 28px;
	}
	
.style32 {/* festival name*/
	color: #F39;
	font-weight: bold;
	font-size: 35px;line-height: 35px;
	}
	
.style33 {/* SUBTITLE*/
	color: #FFF;
	font-weight: bold;
	font-size: 30px; 
	}
	
.style33a {/* SUBTITLE*/
	color: #FFF;
	font-weight: bold;
	font-size: 20px; 
	}
	
	
#bottom-container {
	position: relative;
	width: 768px;
	height: 433px;
	padding-top: 0px;
	text-align: center;
	background: #FFF;
	 }
	
	
#left-column {
	position: relative;
	width: 768px;
	color: #FFF;
	font-size: 110%;
	margin-top: 0px;
	padding: 145px 0px 0 0px;
	z-index: 10;
	text-align: center;
	 }
	 
#creditline {
	position: relative;
	width: 768px;
	margin-top: 0;
	padding: 0 0 0 0;
	text-align: center;
	z-index: 0;
	 }
	
#creditline2 {/* CREDIT LINE for stills page*/
	position: relative;
	width: 768px;
	margin-top: 0px;
	padding: 48px 0 0 0;
	text-align: center;
	z-index: 0;
	 }


.style21 {/* CREDIT LINE*/
	font-size: 12px;
	color: #666;
	font-weight: bold;
	text-align: left;
	line-height: 1.5em;
	}
	
.style21a {/* CREDIT LINE*/
	font-size: 14px;
	color: #CCC;
	text-align: center;
	line-height: 20px;
	font-weight: normal;
	}
	

.title {
	color: #FFF;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 70px;
	font-weight: bold; line-height: 90px;
	}


.subtitle {
	color:#666;
	font-size: 20px;
	font-weight: bold;
	}
	
#copyright {
	position: relative;
	font-size: xx-small;
	padding: 0 0 0 10px;
	color: #666;
	width: 500px;
	}
	
	
#bioimage { /*logo*/
	float: left;
	width: 150px;
	height: 185px;
	margin: 4px 20px 0px 0px;
	left: 0;
	z-index: 0;
	}
#bioimage p { /*photo caption*/
	font-size: 8px;
	line-height: 1.3em;
	padding: 1px 0 0 0;
	}
		
#bioimage2 { /*logo*/
	float: right;
	width: 300px;
	height: 500px;
	margin-top: 5px;
	margin-left: 20px;
	margin-right: 0;
	left: 0;
	z-index: 0;
	}
#bioimage2 p { /*photo caption*/
	font-size: 10px;
	line-height: 1.3em;
	padding: 2px 12px 0 0;
	}

#box-fixed {/* media logosr*/
	position: absolute;
	top: 32px;
	right: 0px;
	width: 40px;
	z-index: 50;
		 }
		 	
#bioimage3 { /*logo*/
	position: absolute;
	top: 226px;
	right: 0px;
	left: 340px;
	width: 400px;
	height: 340px;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	z-index: 0;
	}
#bioimage3 p { /*photo caption*/
	font-size: 10px;
	line-height: 1.3em;
	padding: 2px 12px 0 0;
	}
		

/* below is the dropdown menu CSS for coding*/	

#menubox {/* menu box for stills page*/
	position: absolute;
	top: 0;
	right:0;
	width: 470px;
	height: 32px;
	background: #369;
	padding: 0 0 0 18px;
	border-radius:0 0 0 9px;
	z-index: 10;
	}
	
ul {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
	z-index: 50;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #000;   
    padding: 12px 8px 6px 8px;
    background: #369; /* box color*/	
    margin-left: 0px;
    white-space: nowrap;
	}
ul li a:hover {
	background: #06F;
	}
li:hover ul {/* add a width to set dropdown box for visual control*/
    display: block;
    position: absolute;
	
	}
li:hover li {
    float: none;
    font-size: 10px;
	}
li:hover a { background: #3b3b3b; /* : #06Fbox color*/	
	}

li:hover li a:hover {
    background: #06F;
	}

/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}