/**********************************************************************************************

    Archer Communications
    Title    : Uncle Wally's Muffins
    Author   : Ryan Fortin
    Date    : October 2009

***********************************************************************************************

    1. BASE
            1.1 Reset
            1.2 Accessibility Navigation & Hide
            1.3 Clearfix
            1.4 Default Styles

    2. LAYOUT
            2.1 Structure
            2.2 Header
            2.3 Content
            2.4 Footer
            2.5 Cufon Font Weights

***********************************************************************************************/


/*     1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/


  /*     1.1 Reset
  ---------------------------------------------------------------------------------------------*/

    html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
    q { quotes: none; }
    q:before, q:after { content: ""; content: none; }
    a, ins, del { text-decoration: none; }
    table { border-collapse: collapse; border-spacing: 0; }
    th, td { vertical-align: top; }
    th { text-align: left; }


  /*     1.2 Accessibility Navigation & Hide
  ---------------------------------------------------------------------------------------------*/

    ol#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }


  /*     1.3 Clearfix
  ---------------------------------------------------------------------------------------------*/

    .clearfix:after,
    #content:after,
    #intro:after,
    #content .label-partners:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


  /*     1.4 Default Styles
  ---------------------------------------------------------------------------------------------*/

    body { font: 62.5%/1.3 "Helvetica", "Arial", sans-serif; text-align: center; color: #7a7a7c; background: #fcecca url(_ui/images/bg-body.png) repeat-x; }
    hr { display: none; }
    strong { font-weight: bold; }
    em { font-style: italic; }
    del { text-decoration: line-through; }
    th { font-weight: normal; }
    address, cite, dfn { font-style: normal; }
    li { list-style: none; }
    abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
    input, textarea, select { font-family: "Helvetica", "Arial", sans-serif; }
    #content a { color: #392ba4; text-decoration: none; cursor: pointer; }
    #content a:hover, #content a:active { color: #fbb030; }
    
    #content h1 {  }
    #content h2 {  }
    #content h3 { padding: 0 0 0 0px; font-size: 2em; text-transform: uppercase; color: #0053a0; font-weight: normal; }
    #content p {  }


/*     2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/


  /*     2.1 Structure
  ---------------------------------------------------------------------------------------------*/

    .container { width: 1024px; margin: 0 auto; text-align: left; background: #fff; overflow: hidden; }
    #header { height: 287px; background: url(_ui/images/bg-header.jpg) no-repeat; position: relative; z-index: 100; }


  /*     2.2 Header
  ---------------------------------------------------------------------------------------------*/
  
    /* Logo */
  
    #header h1,
    #header h1 span { width: 360px; height: 236px; display: block; position: absolute; left: 0; top: 0; overflow: hidden; }
    #header h1 span { background: url(_ui/images/logo.jpg) no-repeat; z-index: 10; }
    #header h1 a span { cursor: pointer; }
    
    /* Tag Line */
    
    #header .tagline,
    #header .tagline span { width: 470px; height: 100px; position: absolute; display: block; left: 501px; top: 57px; overflow: hidden; }
    #header .tagline span { background: url(_ui/images/txt-tagline.jpg) no-repeat; left: 0; top: 0; z-index: 10; }
    
    /* Search Form */
    
    #header .search { position: absolute; left: 611px; top: 20px; height: 37px; width: 370px; padding: 0 0 0 18px; background: url(_ui/images/ico-search.png) no-repeat 0 2px; }
    #header .search label { display: none; }
    #header .search fieldset { float: left; }
    #header .search .textbox { float: left; }
    #header .search .textbox input { background-color: #ececed; border: none; width: 158px; height: 17px; padding: 0 7px; color: #a8a8a9; font-size: 1.2em; }
    #header .search .button { float: left; }
    #header .search .button input { color: #a8a8a9; background-color: transparent; border: none; font-size: 1.2em; text-transform: uppercase; height: 17px; line-height: 17px; padding: 0 2px; cursor: pointer; }
    #header .search .button input.hover,
    #header .search .button input:hover { color: #fbb030; }
    
    #header .login-link { float: left; background: url(_ui/images/bg-search-divider.png) no-repeat 10px 5px; padding: 2px 0 0 28px; text-transform: uppercase; font-size: 1.2em; }
    #header .login-link a { color: #a8a8a9; }
    #header .login-link a:hover { color: #392ba4; }
    
    /* Breadcrumbs */
    
    #header .breadcrumbs { position: absolute; top: 220px; right: 53px; height: 16px; padding-right: 12px; line-height: 16px; font-size: 1.1em; }
    #header .breadcrumbs li { float: left; padding-left: 12px; background: url(_ui/images/bg-breadcrumbs-divider.png) no-repeat 5px 50%; }
    #header .breadcrumbs li.first-child,
    #header .breadcrumbs li:first-child { background: none; }
    #header .breadcrumbs li a { display: block; float: left; color: #c6c7c8; }
    #header .breadcrumbs li a:hover { color: #392ba4; }
    
    /* Navigation */
    
    #navigation { position: relative; top: 236px; left: 0; padding: 18px 0 18px 30px; width: 100%; text-transform: uppercase; font-size: 1.3em; }
    #navigation li { float: left; position: relative; z-index: 100; }
    #navigation li a { display: block; float: left; color: #0053a0; padding: 0 25px; }
    #navigation li:hover a,
    #navigation li a:hover { color: #fbb030; }
    #navigation li ul { position: absolute; left: -999em; width: 119px; z-index: 100; background: url(_ui/images/bg-dropdown.png); padding: 8px; font-size: .9em; clear: both; }
    #navigation li:hover ul,
    #navigation li.hover ul { left: 16px; top: 16px; }
    #navigation li ul li { float: none; text-transform: none; }
    #navigation li ul li a { float: none; padding: 0; line-height: 1.9; color: #0b51af; }
    #navigation li:hover ul li a { color: #0b51af; }
    #navigation li ul li a:hover { color: #fbb030; }
  
    
  /*     2.3 Content
  ---------------------------------------------------------------------------------------------*/
  
    #content { padding: 0 63px 0 53px; z-index: 1; }
    #content .highlights { width: 586px; float: right; padding-top: 4px; }
    
    /* Intro */
    
    #intro { background: #eed9ab url(_ui/images/bg-intro.png) repeat-x; position: relative; }
    
    #intro .image { float: left; width: 311px; }
    #intro .content { float: left; width: 370px; padding-top: 28px; }
    #intro .products { float: left; width: 202px; background: #f5ead0 url(_ui/images/bg-products.png) repeat-x; }
  
    #intro .image img { display: block; }
    
    #intro .content h2,
    #intro .content h2 span { display: block; width: 265px; height: 45px; overflow: hidden; position: relative; }
    #intro .content h2 span { position: absolute; left: 0; top: 0; background: url(_ui/images/txt-fresh-baked-flavour.jpg) no-repeat; z-index: 10; }
    #intro .content h3 { padding: 0 0 0 45px; font-size: 2em; text-transform: uppercase; color: #0053a0; font-weight: normal; }
    #intro .content p { padding: 20px 45px; font-size: 1.4em; line-height: 2.4; color: #392ba4; }
    
    #intro .products h3 { color: #41378f; font-size: 1.8em; text-transform: uppercase; text-align: center; padding: 20px 0; font-weight: normal; }
    #intro .products ul { padding: 0 20px; font-size: 1.4em; line-height: 2.7; }
    #intro .products ul li { background: url(_ui/images/bg-product-item.png) no-repeat 0 50%; }
    #intro .products ul li a { display: block; color: #b18b53; padding-left: 25px; }
    #intro .products ul li a:hover { color: #392ba4; }
    
    /* News */
    
    #content .news { float: left; width: 300px; padding: 18px 0 0 5px; }
    #content .news h3 { font-size: 2em; color: #41378f; margin-bottom: 1px; text-transform: uppercase; font-weight: normal; }
    #content .news ul li { padding: 10px 0 15px; }
    #content .news ul li h4 { color: #0053a0; font-size: 1.2em; font-weight: normal; margin-bottom: 2px; }
    #content .news ul li h5 { color: #b88325; font-size: 1.2em; font-weight: normal; text-transform: uppercase; margin-bottom: 3px; }
    #content .news ul li p { font-size: 1.2em; line-height: 1.5; }
    
    /* Where To Buy */
    
    #content .where-to-buy { margin-bottom: 12px; }
    #content .where-to-buy a { display: block; height: 112px; background: url(_ui/images/bg-where-to-buy.jpg) no-repeat; line-height: 1; }
    #content .where-to-buy a:hover { background-position: 0 -112px; }
    #content .where-to-buy a em { display: block; padding: 55px 0 0 7px; color: #0053a0; font-style: normal; font-weight: bold; font-size: 2.8em; text-transform: uppercase; letter-spacing: 2px; }
    #content .where-to-buy a strong { color: #947444; font-size: 1.6em; font-weight: normal; display: block; padding-left: 7px; }
    
    /* Private Baking */
    
    #content .private-baking { float: left; width: 260px; height: 266px; padding: 7px 12px 0; background: #f2c870 url(_ui/images/bg-private-baking.jpg) no-repeat; }
    #content .private-baking h3 { text-transform: uppercase; font-size: 1.5em; font-weight: bold; color: #392ba4; letter-spacing: 1px; margin-bottom: 7px; }
    #content .private-baking p { font-size: 1.2em; line-height: 2.2; padding-right: 10px; }
    
    /* Watch Videos */
    
    #content .watch-videos { width: 259px; height: 149px; padding: 7px 12px 0; background: #f9e3b7 url(_ui/images/bg-watch-videos.jpg) no-repeat; float: right; margin-bottom: 20px; }
    #content .watch-videos h3 { text-transform: uppercase; font-size: 1.5em; font-weight: bold; color: #0053a0; letter-spacing: 1px; margin-bottom: 7px; }
    #content .watch-videos p { font-size: 1.2em; line-height: 2.2; text-align: right; }
    
    /* Label Partners */
    
    #content .label-partners { background-color: #d5d5d6; width: 259px; height: 82px; padding: 7px 12px; float: right; }
    #content .label-partners h3 { text-transform: uppercase; font-size: 1.2em; font-weight: bold; color: #7a7a7c; letter-spacing: 1px; margin-bottom: 2px; }
    #content .label-partners ul li.fiber-one,
    #content .label-partners ul li.betty-crocker { float: left; }
    #content .label-partners ul li.fiber-one { margin-right: 17px; }
    
    #content .label-partners ul li a,
    #content .label-partners ul li a span { display: block; width: 121px; height: 64px; position: relative; overflow: hidden; }
    #content .label-partners ul li a span { background: url(_ui/images/logo-fiber-one.png) no-repeat; z-index: 10; position: absolute; left: 0; top: 0; }
    #content .label-partners ul li a:hover span { background-position: 0 -64px; }
    #content .label-partners ul li.betty-crocker a span { background-image: url(_ui/images/logo-betty-crocker.png); }
    
    /* Bottom Content */
    
    #content .bottom { clear: both; padding-top: 17px; }
    #content .bottom h2 { background-color: #f5ead0; color: #392ba4; font-size: 2em; text-transform: uppercase; padding: 5px 7px 2px; line-height: 1; margin-bottom: 15px; }
    #content .bottom .image { width: 195px; float: left; position: relative; left: -5px; }
    #content .bottom .image img { display: block; }
    #content .bottom .column { float: left; width: 340px; }
    #content .bottom .column-right { float: right; }
    
    #content .bottom h3 { font-size: 1.6em; color: #00509e; font-weight: normal; }
    #content .bottom p { font-size: 1.2em; line-height: 1.6; margin-bottom: 25px; }
    #content .bottom p strong { font-weight: bold; color: #0053a0; }
    
    /* flavor menu */
    table#flavors {
         margin-top:10px;
    }
    table#flavors td {
        width:130px;
        height:20px;
    }
  
  /*     2.4 Footer
  ---------------------------------------------------------------------------------------------*/

    #address { clear: both; color: #0053a0; background: url(_ui/images/bg-address.png) repeat-x 0 100%; text-align: center; font-size: 1.2em; padding: 11px 0; }
    #address a,
    #address strong { color: #3a2da0; }
    #address a:hover,
    #address a:hover strong { color: #fbb030; }
    #address li { display: inline; background: url(_ui/images/bg-address-divider.png) no-repeat 0 50%; padding: 0 11px 0 13px; }
    #address li:first-child,
    #address li.first-child { background: none; }

    #footer { width: 1024px; margin: 0 auto; text-align: left; padding: 8px 0 45px; font-size: 1.1em; line-height: 21px; }
    #footer .design { float: left; padding-left: 64px; }
    #footer .copyright { float: right; padding-right: 64px; color: #a8a8a9; }
    #footer .design a.logo { color: #a8a8a9; display: inline-block; background: url(_ui/images/logo-footer.png) no-repeat; height: 21px; line-height: 21px; padding-left: 25px; margin-left: 2px; }
    #footer .design a.logo:hover { background-position: 0 -21px; color: #d91331; }

    
  /*     2.5 Cufon Font Weights
  ---------------------------------------------------------------------------------------------*/
  
    .cufon #intro .content h3,
    .cufon #intro .products h3,
    .cufon #content .where-to-buy a em,
    .cufon #content .news h3,
    .cufon #content .bottom h2,
    .cufon #content .bottom h3 { font-weight: 300; }
    
    .cufon #content .private-baking h3,
    .cufon #content .watch-videos h3,
    .cufon #content .label-partners h3 { font-weight: 400; }