.hide {display: none;}
.show {display: block;}
.center {text-align: center;}
.red{color:red;}

.mainContent div{
position:relative;
}

#spacer{
margin-top:5px;
}
html {
overflow-y: scroll;
overflow-x: auto;
}

#html, body {
width:1000px;
height: 100%;
padding:0px;
margin:auto;
}

body{
  margin: 10px auto 0px auto;
  background-color: #666666;
}

div.container{
position:absolute;
width: 970px;
margin: 0px auto;
}

div {
padding: 0px;
margin: 0px;
}

h1, h2, h3, h4, h5 {
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
}

h1 {
font-size: 14pt;
color: white;
text-align:center;
}

h2 {
margin:0px;
}

a {color:black;
text-decoration:none;}

a:hover {color:red;}
a:active {color:red;}
a:visited img{
border: 2px solid black;
}

a:active {
  outline: none;
}

p, li, a, dt, dd{

font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
}

div hr {
display: block;
clear: left;
margin: 0px;
visibility: hidden;
}

ul{
margin: 0px;
list-style:none;
padding: 0px;
}

li{
text-align: center;
padding: 0px;
list-style:none;
}

span.firstLetter{
}

span.bold {
font-weight: bold;
}

#navigation {
float:left;
width:305px;
}

#header{
width:275px;
height:106px;
background: url(../images/filmBratz_bannerLogo.jpg) no-repeat;
}

#links{
border-top: 2px solid red;
margin-left: 37px;
}

#nav-menu {
float: left;
height: 440px;
width: 110px;
}


ul.menu li a{
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 14pt;
padding-top: 3px;
height: 30px;
display: block;
color: white;
border-bottom: 2px solid red;
text-decoration: none;
}

#nav-menu li a:hover,
#directors a:hover,
#our-work #corporate-reels a:hover,
#our-work #corporate-reels a:hover img,
#navigation #directorMenu li a:hover{
color: red;
}

#nav-menu li a.login {
border:none;
}

#home #nav-menu a.home,
#about #nav-menu  a.about,
#mission #nav-menu  a.mission,
#news #nav-menu  a.news,
#contact #nav-menu  a.contact,
#our-work #nav-menu  a.our-work,
#login #nav-menu  a.login ,
#directorpage a.directors {
color: red;
}

#directors ul.menu li {
margin-bottom: 0px;
}

#directors ul.menu li a {
border: none;
margin-bottom:0px;
}

#navigation #our-work-menu,
#navigation #directors {
float: left;
margin-left: 12px;
width: 144px;
}

#navigation #corporate-reels,
#navigation #directorMenu {
background-color: white;
border: 2px solid red;
margin-top: 33px;
padding: 0px;
height:480px;
display:none;
position: relative;
left: 6px;
}

#directors {
height: 0px;
}

#our-work #corporate-reels,
#directorpage #directorMenu {
display: block;
}

#navigation #directorMenu li{
margin: 8px;
}

#corporate-reels a{
font-weight: bold;
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 10pt;
}

#our-work #corporate-reels .thumbnail{
margin: 30px 0px 0px 0px;
}

#our-work #corporate-reels .thumbnail  a{
margin-top:0px;
}

#our-work #corporate-reels .thumbnail img{
width: 87px;
height: 65px;
margin-bottom:0px;
}

#navigation #directorMenu li a{
height: 30px;
color: black;
text-decoration: none;
font-weight: bold;
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 10pt;
}



div.mainContent {
height: 660px;
width: 650px;
position: relative;
left: 20px;
float:left;
}

div.subcontent {
left: -160px;
width:590px;
}

#our-work div.subcontent,
#directorpage div.subcontent{
width: 430px;
left: 0px;
}

div.rightsubcontent {
position: relative;
top: -484px;
left: 450px;
padding: 0px;
width:200px;
height:480px;
}

div.rightsubcontent div{
margin-bottom: 23px;
}

div.rightsubcontent img{
top: 0px;
left: 0px;
width: 184px;
height: 230px;
margin: 0px 0px 0px 0px;
border: 2px solid red;
}

#slideshow-one,
#slideshow-two {
height:227px;
}

.rightsubcontent {
}

.slideshow {
position:relative;
}
.slideshow img {
position:absolute;
top:1px;
left:1px;
z-index:8;
opacity:0.0;
}
.slideshow img.active {
z-index:10;
opacity:1.0;
}
.slideshow img.last-active {
z-index:9;
}

div#fb-watermark-one{
background: white url(../images/fb_watermark01.jpg) no-repeat center;
}

div#fb-watermark-two{
background: white url(../images/fb_watermark02.jpg) no-repeat center;
}

div#fb-watermark-three{
background: white url(../images/fb_watermark03.jpg) no-repeat;
}

div#fb-watermark-four{
background: white url(../images/fb_watermark04.jpg) no-repeat center;
}

div#fb-watermark-five{
background: white url(../images/fb_watermark05.jpg) no-repeat center;
}

div.whiteBox{
width:100%;
padding: 0px;
background-color: white;
border: 2px solid red;
height: 480px;
overflow-y: scroll;
overflow-x: hidden;
}

div.whiteBox a,
div.whiteBox p {
margin: 10px;
}

div.whiteBox img{
float:left;
margin: 0px 1% 10px 1%;
width: 47%;
}

div.whiteBox img.slurpee{
float:left;
margin: 0px 1% 10px 1%;
width: 565px;
}

div.whiteBox img.filmBratzLogo {
width: 300px;
margin: 10px 0px 0px 40px;
}

div.whiteBox a img{
border: 2px solid black;
}

div.whiteBox a:hover img,
div.whiteBox a:visited:hover img{
border: 2px solid red;
}

div.whiteBox h4{
margin: 20px 0px 10px 15px;
border-bottom: 2px solid black;

}

div.whiteBox h5{
margin: 10px 0px 0px 25px ;
}

div.whiteBox a{
color: red;
}

div.whiteBox a:hover,
div.directorName a:hover{
border-bottom: 1px solid red;
}

div.directorName {
height: 29px;
}

div.directorName a{
color:white;
}


div.directorName h2{
font-size: 14pt;
display:inline;
margin-right: 5px;
color:red;
}

div#thumbnailBarContainer {
	width: 654px;
	overflow: hidden;
}

#thumbnailBarContainer .thumbnailBar {
	width: 2000px;
}

div.thumbnailBar {
height: 88px;
position: relative;
z-index: 10;
width: 1000px;
}

#our-work #double-thumbnail-row,
#directorpage #double-thumbnail-row {
height: 180px;
width: 750px;
}

div.thumbnailBar a{
margin-right:0px;
z-index: 1;
}

div.thumbnailBar .thumbnail {
display:inline;
width:100px;
height: 75px;
}

div.thumbnailBar img{
width:100px;
height: 75px;
border: 2px solid black;
z-index: 1;
}

div.thumbnailBar a:hover img{
border: 2px solid red;
}

.video-caption{
display: none;
position: relative;
z-index: 3;
}

a:hover .video-caption,
a:visited:hover .video-caption ,
a:link:hover .video-caption {
display: block;
text-align: center;
position: absolute;
padding: 5px 1px;
top: -50px;
left: 4px;
background: black;
border: 2px solid red;
color:white;
white-space: nowrap;
font-size: 10pt;
z-index: 3;
cursor: pointer;
}



#corporate-reels .thumbnail {
text-align: center;
margin-top: 18px;
}
#corporate-reels .thumbnail img{
width: 100px;
margin: 0px 10px;
}



div#movieBox {
border: 2px solid red;
width: 640px;
height: 480px;
margin: 0px 0px 10px 0px;
padding: 0px;
background-color: white;
}

div#movieBox a {
margin: 20px 10px;
padding: 5px;
font-size: 13pt;
border: 2px solid red;
}

.mainContent h3 {
color:white;
margin: 0px 0px 6px 0px;
font-size: 14pt;
font-weight: 100;
text-align:center;
}

div.video-thumbnail {
float: left;
width: 480px;
margin: 0px 0px 0px 10px;
position: relative;
z-index: 1;
}

div.video-thumbnail img{
width: 174px;
height: 130px;
}


.contentContainer{
width:640px;
}

div#video-title{
height: 29px;
}

#video-title h3{
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 14pt;
color: white;
text-align: center;
display: none;
font-weight: 100;
}

#disclaimer{
float:right;
margin: 10px 5px;
font-size: 8pt;
}

#footer {
float: left;
width:100%;
height: 30px;
text-align:center;
background: #ffcc66;
margin: 0px 0px 15px 0px;
}

#footer p{
margin: .3em;
}

#footer a{
background: #ffcc66;
text-decoration: none;
color:black;
}

#error-page h2{
color:red;
text-align:center;
margin: 10px;
font-size: 14pt;
}

#error-page .whiteBox a{
margin: 0;
}

#error-page .whiteBox ul{
margin: 0px 0px 0px 50px;
}

#error-page .whiteBox li{
list-style-type: square;
text-align:left;
}