/* Parscale Media Style Sheet ----------------------------------------------------------------------------- Prototype Version: 2.22 Developer: Parscale Media Email Address: info@parscale.com Developer Website: http://www.parscale.com/ Client Website: http://www.glibeer.com Last Modifier: Brad Parscale - Parscale Media Last Modified: Sat 3.11.2010 @ 12:00pm */ /* Table of Contents ----------------------------------------------------------------------------- 1. Clean Base 2. Base Typography 3. Images 4. Links 5. Forms 6. Tables 7. Framework */ /* 1. Create a Clean Base ------------------------------------------------------------------------------*/ html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox{background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline;} blockquote, q{ quotes: none; } br{ height: 0; } ul, ol, dl{ list-style: none; } /* Class for clearing floats */ .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;} /* 2. Define Base Typography ------------------------------------------------------------------------------*/ /* Create the Default Headers */ h1, h2, h3, h4, h5, h6 {color: #610514; font-family: "georgia","verdana","helvetica","arial",serif; font-weight: normal;} /* Create the Default Paragraphs */ p {color:#494540; line-height:20px;} /* Specific Header Settings */ h1 {font-size: 22px;} h2 {font-size: 19px;} h3 {font-size: 17px;} h4 {font-size: 15px;} h5 {font-size: 14px;} h6 {font-size: 12px;} /* Other Typo */ strong{font-weight: bold;} hr{border:0 #000 solid; border-top-width: 1px; clear: both; height: 0;} ol{list-style: decimal;} ul{list-style: square;} .right {margin-right: 0 !important;} /* 3. Images ------------------------------------------------------------------------------*/ /* Remove border around linked images */ img {border: 0; border-style: none;} /* Create default inline image class */ img.inline{ display: inline; vertical-align: middle; } /* 4. Links ------------------------------------------------------------------------------*/ /* Default Link Types */ a{color:#bb4c0f; text-decoration: none;} a:hover{color:#411e10; text-decoration: underline;} a:active{outline: none;} a:focus{outline: 1px dotted invert;} /* 5. Forms ------------------------------------------------------------------------------*/ /* Removes fieldset borders. even on Opea 7 */ fieldset {border: 1px solid transparent;} /* 6. Tables ------------------------------------------------------------------------------*/ /* Table Fixes */ table {border-spacing: 0; border-collapse: collapse;} td {text-align: left; font-weight: normal;} /* Removes fieldset borders. even on Opera 7 */ fieldset {border: 1px solid transparent;} /* 7. Framework ------------------------------------------------------------------------------*/ /* Page Layout */ body {background: url(/images/site/bkrnd_square.jpg); font: 13px "lucida grande","helvetica",sans-serif, monospace;} /* Wrapper */ #wrapper{width: 960px; margin: 0 auto;} /* Home Header */ #home_header {width: 960px; height: 495px; background: url(/images/site/bnr_bkrnd.png) bottom no-repeat; position: relative;} #logo {width: 240px; height: 150px; position: absolute; top: 0; left: 50px;} #header_message {width: 415px; height: 22px; position: absolute; top: 5px; right: 10px;} /* Internal Header */ #internal_header {width: 960px; height: 274px; background: url(/images/site/bkrnd_header.jpg) bottom no-repeat; position: relative;} #internal_banner {position: absolute; bottom: 15px; left: 10px; z-index: 1000;} /* Navigation */ #navigation {width: 630px; height: 15px; position: absolute; top: 65px; left: 280px;} #navigation ul {list-style: none;} #navigation ul li {display: inline;} #navigation ul li a {display: block; float: left; width: 100px; height: 15px; overflow: hidden; text-indent: -9999px;} #navigation ul li a.home {background: url(/images/site/hdr_nav1.png);} #navigation ul li a.about {background: url(/images/site/hdr_nav2.png);} #navigation ul li a.our_beer {background: url(/images/site/hdr_nav3.png);} #navigation ul li a.events {background: url(/images/site/hdr_nav4.png);} #navigation ul li a.careers {background: url(/images/site/hdr_nav5.png); width: 130px;} #navigation ul li a.contact {background: url(/images/site/hdr_nav6.png);} #navigation ul li a:hover {background-position: 0 -15px !important;} /* Banner */ #banner {width: 960px; position: absolute; height: 300px; top: 150px;} #banner_message {width: 550px; height: 170px; padding: 15px; position: absolute; top: 10px; left: 50px; background: url(/images/site/home_bnr_trans_box.png);} #banner_message p {margin-bottom: 10px;} #banner .message {display: none;} #banner_message .bm_image {width: 220px; float: left; margin-right: 20px;} #banner_navigation {position: absolute; top: 210px; height: 100px; left: 50px;} #home_header #banner_navigation ul {list-style-type: none;} #banner_navigation ul li {width: 75px; float: left; padding-top: 40px; text-align: center; display: inline;} #banner_navigation ul li img {border: 3px solid #3a2408; opacity:0.6; filter:alpha(opacity=60);} #banner_navigation ul li.ui-state-active {background: url(/images/site/home_bnr_trans_arrow.png) top center no-repeat;} #banner_navigation ul li.ui-state-active img {opacity:1.0;filter:alpha(opacity=100);} .ui-tabs-hide {display:none} /* Content */ #content {width: 960px; position: relative; background: url(/images/site/bkrnd_y.png); padding-bottom: 30px;} #content p {margin-bottom: 10px;} /* Home Content */ #home_our_beer {width: 450px; float: left; padding-left: 60px; margin-right: 30px; margin-top: 40px;} #home_events {width: 340px; margin-right: 60px; float: right; margin-top: 40px; background: #f9f6f4;} #home_events p.date {font-weight: bold;} #home_events img {border: 3px solid #e9e1d9;} #he_title {height: 26px; width: 320px; padding: 4px 0 0 20px; background: url(/images/site/home_events_title.png) no-repeat; overflow: hidden;} .hob_product {width: 120px; float: left; margin-right: 30px; margin-bottom: 20px; text-align: center;} .hob_product img {border: 3px solid #e9e1d9;} .home_event {width: 320px; margin-bottom: 20px;} .home_event_image {width: 100px; float: left;} .home_event_text {width: 220px; float: right;} /* Secondary Content */ #secondary_content {width: 180px; padding-left: 70px; float: left; margin-right: 45px; margin-top: 20px;} #secondary_content #sc_title {padding: 4px 0 0 20px; width: 160px; height: 26px; background: url(/images/site/side_nav_bar.png) no-repeat;} #secondary_content #sc_nav {width: 160px; padding-left: 20px; margin-top: 10px; border-right: 1px solid #e9e1d9; min-height: 150px;} #secondary_content #sc_nav ul {list-style: none;} #secondary_content #sc_nav ul li {font-size: 15px;margin-bottom: 3px;} #secondary_content #sc_nav ul li ul {margin: 3px 5px; display: none;} #secondary_content #sc_nav ul li ul li {font-size: 13px;} #secondary_content a.active {color: #411E10;} /* Main Content */ #main_content {width: 580px; margin-right: 75px; float: right; margin-top: 20px;} #main_content img {border: 3px solid #e9e1d9;} #main_content h1, #main_content h2, #main_content h3 {margin-bottom: 10px;} #main_content h1.line { margin-bottom: 0;} /* Our Beers (Products) */ #main_content .beer {width: 120px; float: left; margin-right: 30px; margin-bottom: 20px; text-align: center; height: 150px;} #main_content .beer_image {border: 3px solid #e9e1d9; width: 118px; height: 90px; overflow: hidden;} #main_content .beer_image img {border: none;} #main_content .product_pagination {height: 20px; margin-bottom: 20px; border-top: 1px solid #e9e1d9;} #main_content .product_pagination .product_sort label {width: 60px; display: block; float: left;} #main_content .product_pagination .product_sort a.sort_list {margin-right: 5px; display: block; width: 22px; height: 15px; overflow: hidden; background: url(/images/site/sort_by_1.jpg) no-repeat; float: left;} #main_content .product_pagination .product_sort a.sort_thumbs {display: block; width: 22px; height: 15px; overflow: hidden; background: url(/images/site/sort_by_2.jpg) no-repeat; float: left;} #main_content .product_pagination .product_sort a.active {background-position: 0 -15px;} #main_content .product_pagination .product_sort {height: 20px; padding-top: 5px; border-right: 1px solid #e9e1d9; width: 120px; float: left; margin-right: 10px;} #main_content .product_pagination .product_sort img {border: none;} #main_content .product_pagination .product_pages {text-align: center; height: 20px; padding-top: 5px; border-right: 1px solid #e9e1d9; width: 200px; float: left; margin-right: 10px;} #main_content .product_pagination .product_share {height: 20px; padding-top: 5px;float: left;} #main_content .product_pagination .product_share a {margin-right: 20px;} #main_content .beer_list {width: 250px; float: left; margin-right: 40px;border-bottom: 1px solid #e9e1d9; margin-bottom: 10px;} #main_content .beer_list img {width: 25px; height: 25px; border: none;} #main_content .beer_list .bl_image {width: 30px; float: left; margin-right: 10px;} #main_content .beer_list .bl_text {width: 210px; float: right;} #beer_detail {width: 580px;} #beer_detail #beer_image {width: 390px; height: 390px; float: left; margin-bottom: 10px;} #beer_detail #beer_image img {border: none;} #beer_detail #beer_text {width: 190px; float: right;} #beer_text ul {list-style: none; margin-bottom: 10px;} #beer_text ul li {color: #411e10; margin-bottom: 3px;} #share {border-top: 1px solid #e9e1d9; border-bottom: 1px solid #e9e1d9; padding: 5px 0; margin-bottom: 10px;} #share p {margin-bottom: 0; font-size: 14px;} #share a {margin-right: 10px;} /* Events */ #main_content .event {margin-bottom: 10px; padding: 20px;} #main_content .event:hover {background: #f9f6f4;} #main_content .event_pagination {height: 20px; margin-bottom: 10px; border-top: 1px solid #e9e1d9;} #main_content .event_pagination .event_pages {text-align: center; height: 20px; padding-top: 5px; border-right: 1px solid #e9e1d9; width: 200px; float: left; margin-right: 10px;} #main_content .event_pagination .event_share {height: 20px; padding-top: 5px;float: left;} #main_content .event_pagination .event_share a {margin-right: 20px;} /* Email A Friend */ #email_friend {padding: 20px; background: #fffcf9;} #email_friend h1 {margin-bottom: 10px;} #email_friend input.submit {width: 75px; border: none; cursor: pointer; background: #e9e1d9; border: 1px outset #1e1711;} #email_friend p {margin-bottom: 10px;} #email_friend label {width: 150px; display: block; float: left;} #email_friend input {background: #fff; padding: 5px; width: 250px; color: #1e1711; border: 2px solid #e9e1d9;} #email_friend textarea {background: #fff; padding: 5px; width: 350px; color: #1e1711; height: 100px; border: 2px solid #e9e1d9;} /* Career Form */ #career_form input {background: #fff; border: 1px solid #d0c7c2; padding: 5px; width: 400px;} #career_form input:focus {background: #f1f0ea;} #career_form input#city {width: 160px; margin-right: 8px;} #career_form input#state {width: 100px; margin-right: 8px;} #career_form input#zip {width: 100px;} #career_form input.submit {width: 80px; background: #e9e1d9; color: #610514; text-align: center; font-size: 16px; cursor: pointer;} /* Footer */ #footer {width: 960px; height: 160px; background: url(/images/site/ftr_nav.png) top no-repeat; position: relative;} #footer_navigation {position: absolute; top: 46px; left: 50px; width: 600px;} #footer_navigation ul {list-style: none;} #footer_navigation ul li {display: inline; margin-right: 10px; color: #f49638;} #footer_navigation ul li a {color: #f49638;} #footer_navigation ul li a:hover {color: #fff; text-decoration: none;} #copyright {position: absolute; top: 80px; left: 50px;} #copyright p {color: #000000; font-size: 11px;} #copyright a {color: #898685;} #avante_logo {position: absolute; top: 80px; right: 50px;} #need_wine {width: 170px; height: 75px; position: absolute; top: 7px; right: 40px;} /* ColorBox Core Style The following rules are the styles that are consistant between themes. Avoid changing this area to maintain compatability with future versions of ColorBox. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* ColorBox example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, so that the structure easier to understand. */ #cboxOverlay{background:#000;} #colorbox{} #cboxTopLeft{width:14px; height:14px; background:url(/images/colorbox/controls.png) 0 0 no-repeat;} #cboxTopCenter{height:14px; background:url(/images/colorbox/border.png) top left repeat-x;} #cboxTopRight{width:14px; height:14px; background:url(/images/colorbox/controls.png) -36px 0 no-repeat;} #cboxBottomLeft{width:14px; height:43px; background:url(/images/colorbox/controls.png) 0 -32px no-repeat;} #cboxBottomCenter{height:43px; background:url(/images/colorbox/border.png) bottom left repeat-x;} #cboxBottomRight{width:14px; height:43px; background:url(/images/colorbox/controls.png) -36px -32px no-repeat;} #cboxMiddleLeft{width:14px; background:url(/images/colorbox/controls.png) -175px 0 repeat-y;} #cboxMiddleRight{width:14px; background:url(/images/colorbox/controls.png) -211px 0 repeat-y;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(/images/colorbox/loading_background.png) center center no-repeat;} #cboxLoadingGraphic{background:url(/images/colorbox/loading.gif) center center no-repeat;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(/images/colorbox/controls.png) 0px 0px no-repeat; width:23px; height:23px; text-indent:-9999px;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious.hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext.hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose.hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;} /* Form Validation */ .formError{position:absolute;top:300px;left:300px;padding-bottom:13px;display:block;z-index:5000;cursor:pointer;} #debugMode{background:#000;position:fixed;width:100%;height:200px;top:0;left:0;overflow:scroll;opacity:0.8px;display:block;color:#fff;font-size:14px;z-index:100000;padding:10px;} .ajaxSubmit{background:#55ea55;border:1px solid #999;display:none;padding:20px;} .formError .formErrorContent{background:#512d20;color:#fff;width:150px;font-family:tahoma;font-size:11px;border:2px solid #ddd;box-shadow:0 0 6px #000;-moz-box-shadow:0 0 6px #000;-webkit-box-shadow:0 0 6px #000;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;padding:4px 10px;} .formError .formErrorArrow{position:absolute;bottom:0;left:20px;width:15px;height:15px;z-index:5001;} .formError .formErrorArrowBottom{top:0;margin:-6px;} .formError .formErrorArrow div{border-left:2px solid #ddd;border-right:2px solid #ddd;box-shadow:0 2px 3px #444;-moz-box-shadow:0 2px 3px #444;-webkit-box-shadow:0 2px 3px #444;height:1px;background:#512d20;line-height:0;font-size:0;display:block;margin:0 auto;} .formError .formErrorArrowBottom div{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;} .formError .formErrorArrow .line10{width:15px;border:none;} .formError .formErrorArrow .line9{width:13px;border:none;} .formError .formErrorArrow .line8{width:11px;} .formError .formErrorArrow .line7{width:9px;} .formError .formErrorArrow .line6{width:7px;} .formError .formErrorArrow .line5{width:5px;} .formError .formErrorArrow .line4{width:3px;} .formError .formErrorArrow .line3{width:1px;border-left:2px solid #ddd;border-right:2px solid #ddd;border-bottom:0 solid #ddd;} .formError .formErrorArrow .line2{width:3px;border:none;background:#ddd;} .formError .formErrorArrow .line1{width:1px;border:none;background:#ddd;} .greenPopup .formErrorContent,.greenPopup .formErrorArrow div{background:#33be40;}