@import "reset.css"; /* set default styling across browsers */

/* -------------------------------------------------------------- 
   layout -- box sizes, position, backgrounds
-------------------------------------------------------------- */
html, body {
    height: 100%;
}   
body {
    background: #E8EEF1 url('../images/design/page-bg.jpg') repeat-x scroll top left;
    text-align: center;
}
#page {
    width: 1010px;
    background: #FFF;
    text-align: left;
    margin: 0 auto;
    min-height: 100%;
}
#footer, #clear-footer {
    height: 113px;
    clear: both;
    overflow: hidden;
}
#footer {
    margin: -113px auto 0;
    background: url('../images/design/footer-bg.gif') repeat-x scroll top left;
}
#footer p {
    font-size: 12px;
    line-height: 160%;
    text-align: center;
    width: 1010px;
    margin: 0 auto;
    padding-top: 35px;
}
#footer p a,
#footer p {
    color: #FFF;
}
#content {
    padding: 5px 0 30px 0;
    overflow: hidden;
    text-align: left;
    clear: both;
}
#sidebar {
    margin: 0 60px 0 40px;
    padding-left: 5px;
}
#sidebar p {
    font-size: 12px !important;
    padding-left: 9px;
    margin: 1em 0 0 0 !important;
}
#sidebar a {
    color: #000;
    text-decoration: none;
}
.video-container {
    overflow: auto; 
    width: 100%; 
    background: #F2CC91; 
    padding: 2em 0 1em; 
    border-top: 2px solid #333; 
    border-bottom: 2px solid #333;
    text-align: center;
}
.video-player {
    margin-bottom: 40px;
}
.video-player p {
    margin: 5px 0 0 0 !important;
    text-align: center !important;
}
.navskip {
    position: absolute;
    top: -1000px;
    left: -1000px;
}
.hidden {
    display: none;
}
.float-right {
    float: right;
    display: inline; /* fix IE double-margin bug */
}
.float-left {
    float: left;
    display: inline; /* fix IE double-margin bug */
}
.clear-both {
    clear: both;
}
#content .column {
    width: 400px;
    margin: 0 0 0 70px;
}


/* -------------------------------------------------------------- 
   navigation -- menu bar links
-------------------------------------------------------------- */

#navigation {
    width: 1010px;
    height: 38px;
    background: #FFF url('../images/design/nav-bg.gif') repeat-x scroll top left;
    margin: 0 0 5px 0;
}
#navigation ul li {
    line-height: 38px;
    float: left;
    display: inline; /* fix IE double-margin bug */
    margin: 0 0 0 79px;
}
#navigation ul li a {
    font-family: Helvetica;
    color: #FFF;    
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-decoration: none;
}

#sub-navigation {
    height: 27px;
    background: #D1D1D1;
}
#sub-navigation ul li {
    float: left;
    display: inline; /* fix IE double-margin bug */
    margin: 0 0 0 74px;
    line-height: 27px;
}
#sub-navigation ul li a {
    color: #000;
    font-size: 14px;
    text-decoration: none;
}

#navigation a:hover,
.home-page #home-link, 
.clients-page #clients-link,
.showcase-page #showcase-link,
.services-page #services-link,
.staff-page #staff-link,
.contact-page #contact-link {
    color: #F2CC91;
}

#sub-navigation a:hover,
.television-production-page #television-production-link,
.post-production-page #post-production-link,
.audio-production-page #audio-production-link,
.showcase-video-page #showcase-video-link,
.showcase-audio-page #showcase-audio-link {
    color: #EF5120;
}


/* -------------------------------------------------------------- 
   typography -- fonts, sizes, and text spacings
   using the following font-scale:
   PX:   8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 51
-------------------------------------------------------------- */

html, body {
    font-family: "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
    color: #000;
}
#content a {
    color: #A52A2A;
    font-weight: bold;
    text-decoration: none;
}
#content p,
#content h2,
#content h3,
#content ul {
    margin: 20px 70px 0;
    font-size: 16px;
    line-height: 166%;
    color: #333;
    text-align: justify;
}
#content ul {
    text-align: left;
    list-style-type: circle;
    margin: 20px 0 20px 20px;
}
#content .column p,
#content .column h2,
#content .column h3,
#content .column ul {
    margin: 20px 0px;
}
.amp { 
    font-family: ‘Hoefler Text’, ‘Palatino Linotype’, ‘Baskerville’, serif;
    font-style: italic; 
}
.centered {
    text-align: center !important;
}


/* -------------------------------------------------------------- 
   banners -- image replacement for page banners
-------------------------------------------------------------- */

#clear-banner {
    height: 38px;
}
#banner {
    width: 1010px;
    background: black;
    padding: 5px 0px;
}
#banner h1 a {
    display: block;
    width: 1010px;
    height: 150px;
    background: #FFF url('../images/banners/home.jpg') no-repeat scroll 0px 2px;
    margin: 0px;
}
.clients-page #banner h1 a {
    background-image: url("../images/banners/clients.jpg");
}
.contact-page #banner h1 a {
    background-image: url("../images/banners/contact.jpg");
}
.food-styling-page #banner h1 a {
    background-image: url("../images/banners/food-styling.jpg") !important;
}
.audio-production-page #banner h1 a {
    background-image: url("../images/banners/audio-production.jpg") !important;
}
.post-production-page #banner h1 a {
    background-image: url("../images/banners/post-production.jpg") !important;
}
.staff-page #banner h1 a {
    background-image: url("../images/banners/staff.jpg");
}
.services-page #banner h1 a {
    background-image: url("../images/banners/services.jpg");
}
.showcase-page #banner h1 a {
    background-image: url("../images/banners/showcase.jpg");
}
.showcase-video-page #banner h1 a {
    background-image: url("../images/banners/showcase-video.jpg") !important;
}
.showcase-audio-page #banner h1 a {
    background-image: url("../images/banners/showcase-audio.jpg") !important;
}
.television-production-page #banner h1 a {
    background-image: url("../images/banners/television-production.jpg") !important;
}


/* -------------------------------------------------------------- 
   headers -- image replacement for page headers
-------------------------------------------------------------- */

h2.page-title {
    width: 800px;
    height: 64px; /* image is 44px high, we're adding 20px bottom margin */
    text-indent: -9999px;
    margin-right: 0px !important;
    margin-top: 0px !important;
}
.clients-page h2.page-title {
    background: url("../images/headers/clients.jpg") no-repeat;
}
.contact-page h2.page-title {
    background: url("../images/headers/contact.jpg") no-repeat;
}
.food-styling-page h2.page-title {
    background: url("../images/headers/food-styling.jpg") no-repeat !important;
    width: 420px !important;
}
.audio-production-page h2.page-title {
    background: url("../images/headers/audio-production.jpg") no-repeat !important;
}
.post-production-page h2.page-title {
    background: url("../images/headers/post-production.jpg") no-repeat !important;
}
.staff-page h2.page-title {
    background: url("../images/headers/staff.jpg") no-repeat;
}
.services-page h2.page-title {
    background: url("../images/headers/services.jpg") no-repeat;
}
.showcase-page h2.page-title {
    background: url("../images/headers/showcase.jpg") no-repeat;
}
.showcase-video-page h2.page-title {
    background: url("../images/headers/video-showcase.jpg") no-repeat;
}
.showcase-audio-page h2.page-title {
    background: url("../images/headers/audio-showcase.jpg") no-repeat;
}
.television-production-page h2.page-title {
    background: url("../images/headers/television-production.jpg") no-repeat !important;
}


/* -------------------------------------------------------------- 
   misc -- custom per-page css
-------------------------------------------------------------- */

.contact-page #content {
    background: white url("../images/design/logo-293x323.jpg") no-repeat scroll 687px 21px;
    min-height: 300px;
}
#audio-production-slideshow,
#food-styling-slideshow {
    width: 380px;
    height: 253px;
    margin-top: 20px;
}
.clients-page .client-logo {
    width: 250px;
    height: 200px;
    text-align: center;
    float: left;
    display: inline; /* fix IE double-margin bug */
}