/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
/** END RESET **/

/** Global **/
html {
  background-color: #000;
  color: #fff;
  font: 75% Arial, Helvetica, sans-serif;
}

body {
  margin-top: 20px;
}

a {
  color: #ff6600;
  text-decoration: none;
}

a:hover {
  color: #21708B;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.center {
  text-align: center;
}

/** Layout **/
#page_wrap {
  margin: 0 auto;
  width: 918px;
}

/** Header **/
h1#logo a {
  background: url(../images/logo.gif) no-repeat;
  float: left;
  height: 34px;
  margin-bottom: 7px;
  outline: none;
  text-indent: -9999px;
  width: 181px;
}

ul#nav {
  background: url(../images/menu.gif) no-repeat;
  float: right;
  margin-top: 14px;
  width: 534px;
}

  ul#nav li {
    float: left;
  }
  
    ul#nav li a {
      display: block;
      height: 27px;
      margin-right: 9px;
      outline: none;
      text-indent: -9999px;
    }
    
    ul#nav li a.last {
      margin-right: 0;
    }
    
    ul#nav li a#about { width: 79px; }
    ul#nav li a#artists { width: 88px; }
    ul#nav li a#recent { width: 111px; }
    ul#nav li a#associates { width: 128px; }
    ul#nav li a#contact { width: 92px; }
    
      ul#nav li a:hover { background: url(../images/menu.gif) no-repeat; }
      ul#nav li a#about:hover { background-position: 0 -27px; }
      ul#nav li a#artists:hover { background-position: -88px -27px; }
      ul#nav li a#recent:hover { background-position: -185px -27px; }
      ul#nav li a#associates:hover { background-position: -305px -27px; }
      ul#nav li a#contact:hover { background-position: -442px -27px; }

/** Footer **/
#footer-links {
  font-size: 117%;
  margin: 5px 0;
  text-align: right;
}

  #footer-links li {
    display: inline;
    margin: 0 .5em;
  }

  #footer-links a {
    color: #ff6600;
  }

#footer {
  color: #8699a3;
  margin-top: 22px;
  text-align: center;
}

  #footer a {
    color: #8699a3;
  }
  
    #footer a:hover {
      color: #ff6600;
    }

/** Content **/
#content {
  background: url(../images/content_bg.jpg) no-repeat;
  clear: both;
  height: 515px;
  padding-left: 182px;
  position: relative;
}

/** Titles **/
h2.title-big {
  background-repeat: no-repeat;
  bottom: 0;
  position: absolute;
  right: 0;
  text-indent: -9999px;
}

  #about-big {
    background: url(../images/titles/about_big.png);
    height: 92px; width: 497px;
  }
  
  #contact-big {
    background: url(../images/titles/contact_big.png);
    height: 96px; width: 638px;
  }
  
  #categories-big {
    background: url(../images/titles/categories_big.png);
    height: 112px; width: 507px;
  }
  
  #directors-big {
    background: url(../images/titles/directors_big.png);
    height: 86px; width: 423px;
  }
  
  #cinematographers-big {
    background: url(../images/titles/cinematographers_big.png);
    height: 91px; width: 727px;
  }
  
  #photographers-big {
    background: url(../images/titles/photographers_big.png);
    height: 110px; width: 703px;
  }
  
  #recent-works-big {
    background: url(../images/titles/recent_works_big.png);
    height: 93px; width: 707px;
  }
  
  #artists-big {
    background: url(../images/titles/artists_big.png);
    height: 85px; width: 302px;
  }

h3.title-small {
  background-repeat: no-repeat;
  bottom: 3px;
  position: absolute;
  right: 736px;
  text-indent: -9999px;
}

  #about-small {
    background: url(../images/titles/about_small.png);
    height: 164px; width: 29px;
  }
  
  #contact-small {
    background: url(../images/titles/contact_small.png);
    height: 212px; width: 31px;
  }
  
  #categories-small {
    background: url(../images/titles/categories_small.png);
    height: 190px; width: 39px;
  }
  
  #directors-small {
    background: url(../images/titles/directors_small.png);
    height: 156px; width: 30px;
  }
  
  #cinematographers-small {
    background: url(../images/titles/cinematographers_small.png);
    height: 323px; width: 39px;
  }
  
  #photographers-small {
    background: url(../images/titles/photographers_small.png);
    height: 256px; width: 38px;
  }
  
  #recent-works-small {
    background: url(../images/titles/recent_works_small.png);
    height: 245px; width: 29px;
  }
  
  #artists-small {
    background: url(../images/titles/artists_small.png);
    height: 112px; width: 30px;
  }

/** Homepage **/
body.homepage #content {
  background: url(../images/homepage_bg.jpg) no-repeat;
}

/** Pages **/
body.pages #content {
  font-size: 133%;
  height: 485px;
  line-height: 2em;
  padding: 30px 45px 0 208px;
}

  body.pages #content p a {
    font-weight: bold;
  }
  
  body.pages #content #roles {
    float: right;
    margin-top: 20px;
  }
  
    body.pages #content #roles li {
      float: left;
    }

/** Artists **/
body.categories #content {
  padding: 0 86px 0 292px;
}

#artists-subnav {
  float: right;
  margin: 7px 0 30px;
}

  #artists-subnav li {
    float: left;
  }

  #artists-subnav li a {
    background: url(../images/buttons.png) no-repeat 0 1px;
    color: #fff;
    display: block;
    float: left;
    font-size: 125%;
    height: 31px;
    padding-top: 4px;
    text-align: center;
    width: 151px;
  }
  
    #artists-subnav li a:hover, #artists-subnav li a.active {
      background-position: 0 -34px;
    }

#director-search {
  border: 1px solid #fff;
  border-radius: 5px 5px;
  -moz-border-radius: 5px 5px;
  -webkit-border-radius: 5px 5px;
  clear: right;
  float: right;
  padding: 2px 5px;
  position: relative;
  white-space: nowrap;
  z-index: 10;
}

  #director-search label {
    font-size: 104%;
    margin-right: 45px;
    text-transform: uppercase;
  }

#category-list {
  clear: right;
  font-size: 133%;
  position: relative;
  top: -27px;
}

  #category-list h4 {
    font-size: 125%;
    letter-spacing: 1px;
    margin-bottom: 20px;
  }
  
  #category-list ul {
    float: left;
    width: 25%;
  }
  
    #category-list ul li {
      line-height: 27px;
    }
      
      #category-list ul li a {
        color: #fff;
      }
      
        #category-list ul li a:hover {
          color: #ff6600;
        }

/* Category Page */
body.category #content {
  height: 495px;
  padding-top: 20px;
}

body.category h3 {
  font-size: 167%;
  margin: 0 0 10px 15px;
}

  body.category h3 span {
    color: #ff6600;
  }

#artists {
  max-height: 375px;
  overflow-y: auto;
}

  #artists dl {
    padding: 13px 0;
  }
  
  #artists dl.alt {
    background: url(../images/bg_light.png) repeat;
  }
  
    #artists dl dt {
      float: left;
      padding: 15px 0 0 15px;
      width: 220px;
    }
    
      #artists dl dt a {
        color: #000;
        font-size: 83%;
      }
      
        #artists dl dt a:hover {
          color: #fff;
        }
      
      #artists dl dt strong {
        display: block;
        margin-bottom: 6px;
      }
      
        #artists dl dt strong a {
          color: #fff;
          font-size: 160%;
        }
      
          #artists dl dt strong a:hover {
            color: #21708b;
          }
    
    #artists dl dd {
	  width: 100px;
      float: left;
      margin: 0 6px;
      text-align: center;
    }
    
      #artists dl dd img {
        display: block;
        margin-bottom: 8px;
      }
      
      #artists dl dd a {
        font-size: 83%;
      }

/* Artist page */
body.artist #content {
  height: 495px;
  padding: 20px 364px 0 207px;
}

  body.artist #content h3 {
    font-size: 167%;
    margin-bottom: 10px;
    text-decoration: underline;
  }
  
  #categories li {
    display: inline;
    line-height: 175%;
  }
  
    #categories li a {
      color: #fff;
      margin: 0 3px;
    }
    
      #categories li a.hover, #categories li a.active {
        color: #ff6600;
        cursor: pointer;
      }
  
  #artist-works {
    margin-top: 10px;
    max-height: 330px;
    overflow-y: auto;
  }
  
    #artist-works li {
      float: left;
      margin: 7px 8px 0 4px;
      text-align: center;
      width: 100px;
    }
    
    #artist-works li.first {
      clear: left;
    }
    
    #artist-works li.last {
      margin-right: 0;
    }
    
      #artist-works li a:hover {
        cursor: pointer;
      }
    
      #artist-works li img {
        display: block;
        margin-bottom: 8px;
      }
  
  body.artist #video-player {
    color: #000;
    display: none;
    font-size: 116%;
    height: 485px;
    padding: 15px;
    position: absolute;
    top: 0; right: 0;
    text-align: center;
  }
  
  body.artist #video-player.loading {
    background: url(../images/ajax-loader.gif) no-repeat 50% 50%;
    width: 334px;
  }
  
    body.artist #video-player embed {
      display: block;
    }

/* Recent Works page */
#recent-works-list {
  height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
  z-index: 1;
  width: 736px;
}

  #recent-works-list div {
    height: 100%;
    width: 5000px; /* unrealistically large to account for any number of items */
  }

    #recent-works-list dl {
      float: left;
      height: 100%;
      padding: 140px 9px 0;
      position: relative;
      width: 160px;
    }

    #recent-works-list dl.alt {
      background: url(../images/bg_dark.png) repeat;
    }
  
      #recent-works-list dl dt, #recent-works-list dl dd {
        margin-left: 9px;
      }
      
      #recent-works-list dl dt {
        color: #ff6600;
        margin-top: 12px;
      }
    
      #recent-works-list dl dd.img {
        margin-left: 0;
        position: absolute;
        top: 21px;
      }
      
        #recent-works-list dl dd.img a:hover {
          cursor: pointer;
        }

body.recent-works #video-player {
  height: 494px;
  padding-top: 10px;
  position: absolute;
  top: 11px; right: 0;
  text-align: center;
}

body.recent-works #video-player.loading {
  background: url(../images/ajax-loader.gif) no-repeat 50% 50%;
}
  
  body.recent-works #video-player #close {
    background: url(../images/close.png) no-repeat;
    height: 35px;
    position: absolute;
    bottom: 15px; right: 15px;
    text-indent: -9999px;
    width: 82px;
  }
  
    body.recent-works #video-player #close:hover {
      cursor: pointer;
    }

/* Associates page */
#associates-list {
  /*
  max-height: 615px;
  overflow-y: auto;
  */
}

  #associates-list dl {
    padding: 5px;
  }

  #associates-list dl.alt {
    background: url(../images/bg_light.png) repeat;
  }

    #associates-list dl dt {
      float: right;
      margin-top: 23px;
      width: 550px;
    }

      #associates-list dl dt a {
        font-size: 142%;
        font-weight: bold;
        text-transform: uppercase;
      }

    #associates-list dl dd.img {
      float: left;
      margin-right: 15px;
    }

/** Login form **/
body.login #content {
  height: 477px;
  padding-top: 38px;
}

  #login-form {
    background: url(../images/form_bg.png) no-repeat;
    height: 138px;
    margin: 0 auto;
    padding: 19px 25px 30px 30px;
    width: 266px;
  }

    #login-form h4 {
      font-size: 150%;
      margin-bottom: 12px;
    }
  
    #login-form p {
      margin: 5px 0;
    }
    
    #login-form p.error {
      color: #C81E1E;
      margin: -26px 0 12px;
      text-align: right;
    }
  
      #login-form label {
        color: #000;
        float: left;
        width: 67px;
      }
  
      #login-form label.inline {
        float: none;
        font-size: 92%;
      }
  
      #login-form .input-text {
        width: 76px;
      }
    
      #login-form #remember_me {
        margin: 0 5px 0 16px;
      }
    
      #login-form .input-submit {
        margin-left: 67px;
      }
  
    #login-form .hr {
      border-top: 1px solid #fff;
      margin-top: 8px;
    }
  
    #login-form a {
      color: #316086;
      text-decoration: underline;
    }