/**************************************************************
   AUTHOR:  Pat Heard (fullahead.org)
   DATE:    2007.08.21
   PURPOSE: Controls the layout of the site elements
 **************************************************************/


/**************************************************************
   .width: global site width and content centering in viewport
 **************************************************************/
.width {
  width: 930px;
  padding: 0 21px;
  margin: 0 auto;
  text-align: left;
}


/**************************************************************
   #header: holds logo and main menu
 **************************************************************/

#header {
  position: relative;
  margin-top: 30px;
  height: 201px;
}

/* Logo and link around it */
#header h1 {  
  position: relative;
  top: 0;

  width: 264px;
  height: 180px;
  
  margin: 0;
  padding: 0;  
  
  text-indent: -1000em;
  background: url(../images/bg/logo.jpg) no-repeat top left;
}

#header a.home {
  position: absolute;
  top: 0;
  left: 30px;
  width: 264px;
  height: 180px;
}


/* Main header menu */
#header ul.menu {
  position: absolute;
  top: 0;
  right: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

#header ul.menu li {
  float: left;
}

#header ul.menu li a,
#header ul.menu li#here {
  float: left;
  height: 141px;
  width: 5.1em;  
  
  padding: 30px 59px;
  font: bold 1.35em arial, sans-serif;
  white-space: nowrap;
  
  color: #B5B5B5;
}

#header ul.menu li a {
  padding-top: 40px;
  text-decoration: none;
}


#header ul.menu li ul {
  display: none;
}



#header ul.menu li a:hover {
  color: #000;
}

/* Submenu declaration */
#header ul.menu li#here {
  position: relative;
  z-index: 1;
  top: 10px;
  color: #000;
  background: url(../images/bg/menu.gif) repeat-x top left;
}


/* Need to hide the rounded edges from Netscape 6 because it is unable to absolutely position
   an element within a floated parent.  This is also the reason for using an id selector (#here)
   instead of a class - the hack requires it */
#header ul.menu li/* Netscape hide */#here span.left,
#header ul.menu li/* Netscape hide */#here span.right {
  position: absolute;
  top: -6px;  
  width: 27px;
  height: 212px;
}

#header ul.menu li#here span.left {
  left: 0;
  background: url(../images/bg/menu_left.gif) no-repeat bottom left;
}

#header ul.menu li#here span.right {
  /* deal with IE being unable to properly use "right" attribute */
  right: -1px; 
  background: url(../images/bg/menu_right.gif) no-repeat bottom left;
}


#header ul.menu li#here ul {
  display: block;
  padding: 35px 0;
  margin: 0;
  list-style: none;
}

#header ul.menu li#here ul li {
  float: none;
  display: inline;
}

#header ul.menu li#here ul li a {
  float: none;  
  height: auto;
  width: auto;
  display: block;
  padding: 3px 0;
  
  font: 0.75em arial, sans-serif;
}

#header ul.menu li#here ul li a:hover {
  text-decoration: underline;
}

#header ul.menu li#here ul li.here a {
  font-weight: bold;
  color: #000;
}



/**************************************************************
   Content
 **************************************************************/
 
#content {   
  width: 100%;
  min-width: 940px;

  padding-top: 35px;
  
  background: #E1E1E1 url(../images/bg/content_top.gif) repeat-x top left;
}


/* Film nav */
#content #nav {
  float: left;
  width: 95px;
}

#content #nav ul {
  margin: 0;
  padding: 10px 0;
  list-style: none;
}

#content #nav ul li {
  margin: 0;
  padding: 0;
  display: inline;
}

#content #nav ul li a {
  margin: 0;
  padding: 3px 0;
  display: block;
}

#content #nav ul li.here a {
  font-weight: bold;
}


/* Film description */
#content #desc {
  float: left;
  width: 180px;
  padding-left: 30px;
  background: url(../images/bg/vertical_line.gif) no-repeat top left;  
}

#content #desc_home {
  float: left;
  width: 230px;
  padding-left: 10px;
}

/* Film image */
#content #film {
  float: right;
  position: relative;
  z-index: 2;
  text-align: center;
  width: 608px;
}

#content #film a img {
  border: 4px solid #333;
}

#content #film a:hover img {
  border: 4px solid #000;
}

/* Creates bottom shadow */
#content .bottom {
  clear: both;
  height: 35px;
  width: 100%;
  background: url(../images/bg/content_bottom.gif) repeat-x bottom left;  
}

#content .reel_thumbs {
  margin-bottom: 5px;
  vertical-align: middle;
}

#content .reel_thumbs_text {
  padding: 0 0 0 10px;
  font-style: italic;
}

#content .lgtype {
  font-size: 1.2em;
  font-weight: bold;
}

/**************************************************************
   Footer
 **************************************************************/

#footer {
  color: #9C9C9C;
}

#footer a {
  color: #4A4A4A;
}

#footer a:hover {
  color: #000;
}




/**************************************************************
   Generic styles
 **************************************************************/

.gray {
  color: #A2A1A1;
}