/* @override http://localhost:8888/boutique/v2_dev/css/screen.css http://boutique-leeds.co.uk.s37556.gridserver.com/v2_dev/static/css/screen.css http://localhost:8888/boutique/trunk/v2_dev/css/screen.css */ /* @group GLOBAL STYLES -----------------------------------------------------------------------------*/ /* The Malarkey Method: MIR Image replacement Technique*/ .mir { letter-spacing : -1000em; } /* Be nice to Opera, but hide from MacIE.*/ /*\*/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;} /* end hack */ html { text-align: center; } body { position: relative; width: 960px; margin: 0 auto; text-align: left; font: 14px/22px Helvetica, Arial, Geneva, sans-serif; color: #959595; background-color: #000; } em { font-style: italic; } strong .strong { font-weight: bold; } .highlight { color: #ffffff; } .emphasis { font-style: italic; } a:link { color: #fff; text-decoration: none; } a:visited { color: #fff; text-decoration: none; } a:hover { color: #a2cce4; text-decoration: underline; } a:active { outline: none; } a:active, a:focus { outline: none; } #masthead { background: url(../images/masthead.gif) no-repeat center center; height: 110px; margin: 5px 0 0 0; } #content_container { position: relative; padding: 0; border-right: 1px solid #4b4b4b; border-left: 1px solid #4b4b4b; } #main_content,#sub_content { position: absolute; top: 0; left: 0; } /* NOTE- If a height is applied to the sub_content div the footer_clear javascript does not work! but if the height is taken off, the background image does not extend the whole way to the bottom if the main content is longer than the sub content */ #sub_content { left: 654px; width: 261px; padding: 0 21px 0 21px; border-left: 1px solid #262626; color: #bfbfbf; background: url(../images/sub_content_tile.gif) repeat-y; } /* If padding is applied to the top and bottom of the div#sub_content, the background extends past the footer, so another containing DIV had been added (div#sub_featured_items) and the top and bottom padding has been applied to that instead */ #sub_featured_items { padding: 21px 0; } /* The news sub_featured_items block needs more padding applied to the top to align the header with the news item headlines */ body#news #sub_featured_items { padding-top: 31px; } #shadow_vert { position: relative; top: 271px; height: 28px; background: url(../images/shadow_vert-trans.png) no-repeat left -37px; z-index: 10; } /* @end */ /* @group MAIN CONTENT DIV STYLES */ -----------------------------------------------------------------------------*/ /* NOTE - 'main_content' has global style for positioning set above in GLOBAL STYLES */ body#home #main_content { width: 654px; } body#events #main_content { width: 958px; } /* @end */ /* @group NAV -----------------------------------------------------------------------------*/ /* GLOBALHEADER */ #nav_container { width: 960px; height: 38px; } #nav_container .globalnav li { display: inline; } #nav_container .globalnav li a { float: left; width: 120px; height: 0; padding-top: 38px; overflow: hidden; } #nav_container .globalnav li a { background: url(../images/nav.jpg) no-repeat; } /* BUTTONS */ #nav_container .globalnav li.nav_home a { background-position: 0 0; } #nav_container .globalnav li.nav_drinks a { background-position: -120px 0; } #nav_container .globalnav li.nav_events a { background-position: -240px 0; } #nav_container .globalnav li.nav_staff a { background-position: -360px 0; } #nav_container .globalnav li.nav_news a { background-position: -480px 0; } #nav_container .globalnav li.nav_gallery a { background-position: -600px 0; } #nav_container .globalnav li.nav_contact a { background-position: -720px 0; } #nav_container .globalnav li.nav_quench a { background-position: -840px 0; } /* OVER STATES */ #nav_container .globalnav li.nav_home a:hover { background-position: 0 -38px; } #nav_container .globalnav li.nav_drinks a:hover { background-position: -120px -38px; } #nav_container .globalnav li.nav_events a:hover { background-position: -240px -38px; } #nav_container .globalnav li.nav_staff a:hover { background-position: -360px -38px; } #nav_container .globalnav li.nav_news a:hover { background-position: -480px -38px; } #nav_container .globalnav li.nav_gallery a:hover { background-position: -600px -38px; } #nav_container .globalnav li.nav_contact a:hover { background-position: -720px -38px; } #nav_container .globalnav li.nav_quench a:hover { background-position: -840px -38px; } /* ON STATES */ #nav_container.home .globalnav li.nav_home a { background-position: 0 -76px; cursor: default; !important; } #nav_container.drinks .globalnav li.nav_drinks a { background-position: -120px -76px; cursor: default; !important; } #nav_container.events .globalnav li.nav_events a { background-position: -240px -76px; cursor: default; !important; } #nav_container.staff .globalnav li.nav_staff a { background-position: -360px -76px; cursor: default; !important; } #nav_container.news .globalnav li.nav_news a { background-position: -480px -76px; cursor: default; !important; } #nav_container.gallery .globalnav li.nav_gallery a { background-position: -600px -76px; cursor: default; !important; } #nav_container.contact .globalnav li.nav_contact a { background-position: -720px -76px; cursor: default; !important; } #nav_container.quench .globalnav li.nav_quench a { background-position: -840px -76px; cursor: default; !important; } /* @end */ /* @group FOOTERS -----------------------------------------------------------------------------*/ #footer { position: relative; height: 77px; text-align: right; font-size: 90%;} body#home #footer { background: url(../images/footer_index.jpg) no-repeat left top; } body#drinks #footer { background: url(../images/footer_drinks.jpg) no-repeat left top; } body#events #footer { background: url(../images/footer_events.jpg) no-repeat left top; } body#staff #footer { background: url(../images/footer_staff.jpg) no-repeat left top; } body#news #footer { background: url(../images/footer_news.jpg) no-repeat left top; } body#gallery #footer { background: url(../images/footer_gallery.jpg) no-repeat left top; } body#contact #footer { background: url(../images/footer_contact.jpg) no-repeat left top; } body#quench #footer { background: url(../images/footer_quench.jpg) no-repeat left top; } body#news #footer { background: url(../images/footer_news.jpg) no-repeat left top; } #footer a:link { color: #bdbcbc; } #footer a:visited { color: #bdbcbc; } #footer a:hover { color: #fff; } #footer ul { padding: 43px 21px 0 0; } #footer ul li { display: inline; padding: 0 0 0 10px; } #footer li.rss_link { background: url(../images/rss_icon.png) no-repeat 0 50%; padding: 0 0 0 19px; margin: 0 0 0 12px; } /* @end */ /* @group BUTTONS -----------------------------------------------------------------------------*/ .button { position: relative; display: block; height: 27px; } .button_contact { background: url(../images/button_contact-trans.png) no-repeat 0 0; width: 95px; left: -2px; margin: 11px 0 0 0; } .button_contact:hover { background: url(../images/button_contact-trans.png) no-repeat 0 -27px; } .button_moreinfo { background: url(../images/button_more_info-trans.png) no-repeat 0 0; width: 136px; left: -2px; margin: 9px 0 0 0; } .button_moreinfo:hover { background: url(../images/button_more_info-trans.png) no-repeat 0 -27px; } .button_visitquench { position: relative; left: -2px; display: block; background: url(../images/button_quench-trans.png) no-repeat 0 0; width: 187px; height: 27px; margin: 9px 0 0 0; } .button_visitquench:hover { background: url(../images/button_quench-trans.png) no-repeat 0 -27px; } .button_map { position: relative; left: -2px; display: block; background: url(../images/button_map-trans.png) no-repeat 0 0; width: 141px; height: 27px; margin: 11px 0 0 0; } .button_map:hover { background: url(../images/button_map-trans.png) no-repeat 0 -27px; } .button_email { position: relative; left: -2px; display: block; background: url(../images/button_email-trans.png) no-repeat 0 0; width: 141px; height: 27px; margin: 11px 0 0 0; } .button_email:hover { background: url(../images/button_email-trans.png) no-repeat 0 -27px; } .button_print { position: relative; left: -2px; display: block; background: url(../images/button_print-trans.png) no-repeat 0 0; width: 121px; height: 27px; margin: 11px 0 0 0; } .button_print:hover { background: url(../images/button_print-trans.png) no-repeat 0 -27px; } /* @end */ /* @group INTRO PARAGRAPH STYLES -----------------------------------------------------------------------------*/ #intro_block { width: 462px; padding: 20px 160px 15px 42px; background: url(../images/intro_block_background.gif) repeat-x 0 bottom; } /* Styles for full width intro paragraphs (ie. no sub-content) */ body#events .full_width, body#quench .full_width { width: 916px; overflow: hidden; padding: 20px 21px 17px 21px; background-image: url(../images/intro_block_background.gif); } /* Global style for intro paragraph images */ #intro_img { position: absolute; z-index: 10; } /* Intro paragraph drinks images */ body#home #intro_img { background: url(../images/cocktail1-trans.png) no-repeat; width: 96px; height: 271px; top: -40px; left: 525px; } body#drinks #intro_img { background: url(../images/cocktail_sangria.png) no-repeat; width: 158px; height: 242px; top: 15px; left: 520px; } body#quench #intro_img { background: url(../images/cocktail1-trans.png) no-repeat; width: 96px; height: 271px; top: -40px; left: 525px; } body#contact #intro_img { background: url(../images/cocktail2-trans.png) no-repeat; width: 109px; height: 310px; top: -50px; left: 505px; } body#staff #intro_img { background: url(../images/cocktail3-trans.png) no-repeat; width: 112px; height: 255px; top: -55px; left: 510px; } #main_content .headline, #sub_content .headline { padding: 0; color: #fff; font-size: 23px; font-weight: bold; letter-spacing: -1px; } /* STAFF PAGE - Make staff names a little smaller than the main headlines */ body#staff #main_content .staff_text .headline { font-size: 22px; } /* DRINKS PAGE - Close the gap between the sIFR headlines and ther body copy in the intro paragraph*/ body#drinks div#intro_block p { margin: -6px 0 8px 0; } /* EVENTS/QUENCH PAGE - Styles for the blocks of text in the full width intro paragraph */ div.intro_block_item { float: left; width: 264px; margin: 0 20px 0 21px; } /* QUENCH PAGE - Styles for the first intro paragraph text that covers two columns */ div.intro_block_item_2column { float: left; width: 470px; margin: 0 120px 0 21px; } /* DRINKS PAGE - Styles for the 50% Off roundal */ .roundal { position: absolute; background-image: url(../images/roundal_10.png); width: 60px; height: 60px; left: 500px; top: 110px; z-index: 100; } /* @end */ /* @group MAIN BANNERS -----------------------------------------------------------------------------*/ #main_banner { height: 271px; width: 958px; border-right: 1px solid #4b4b4b; border-left: 1px solid #4b4b4b; } /* different width and border rules are needed for for the index page and quench page banners to sort out the page border strokes aligning correctly with the nav bar at each end */ body#home div#main_banner { background: url(../images/main_banner_welcome.jpg) no-repeat 0 top; width: 960px; border: 0; } body#drinks div#main_banner { background: url(../images/main_banner_drinks_newmenu.jpg) no-repeat left top; } body#events div#main_banner { background: url(../images/main_banner_events_privatehire.jpg) no-repeat left top; } body#quench div#main_banner { background: url(../images/main_banner_quench.jpg) no-repeat left top; width: 960px; border: 0; } body#contact div#main_banner { background: url(../images/main_banner_contact.jpg) no-repeat left top; width: 960px; border: 0; } body#gallery div#main_banner { background: url(../images/main_banner_gallery.jpg) no-repeat left top; width: 960px; border: 0; } body#news div#main_banner { background: url(../images/main_banner_news.jpg) no-repeat left top; width: 960px; border: 0; } body#staff div#main_banner { background: url(../images/main_banner_staff.jpg) no-repeat left top; width: 960px; border: 0; } /* @end */ /* @group MAIN CONTENT -----------------------------------------------------------------------------*/ /* GLOBAL -----------------------------------------------------------------------------*/ #content_block { padding: 10px 0 40px 42px; overflow: hidden; clear: both; } /* Width for pages with a sub_content bar */ body#home #content_block, body#drinks #content_block, body#contact #content_block, body#staff #content_block, body#news #content_block { width: 611px; } #content_block h3.mir, #content_block h4.mir { display: none; } /* Global rule the columns in the main content */ #content_block .column { float: left; position: relative; width: 264px; margin: 21px 41px 5px 0; } /* HOME/DRINKS Indents text under featured item graphics to align with text */ #content_block p.indent { margin: 0 10px 0 10px; } /* NEWS/STAFF Float images left, add spacing */ body#news #content_block .column img, body#staff #content_block .column img { float: left; margin: 0 15px 0 0; } /* NEWS/STAFF Float headers, apply width so lines wrap */ body#news #content_block .column h3, body#staff #content_block .column h3 { float: left; width: 150px; } /* DRINKS SPECIFIC -----------------------------------------------------------------------------*/ /* Styling for cocktail of the month type when sIFR is not doing the work */ .cotm { color: #fbe580; font-size: 150%; font-weight: normal; /* specifies LIGHT rockwell weight in cufon font file */ padding: 0 0 5px 0; } body#drinks #content_block p { padding: 0 0px 0 80px; } body#drinks #content_block h3 { position: relative; width: 170px; left: 80px; padding: 0; } /* REMEMBER TO ADD THE IMAGE NAME YOU WANT TO SHOW ON THE DRINKS PAGE TO THE CODE BELOW!!************************************************************* */ body#drinks div.drinks_image1,body#drinks div.drinks_image2,body#drinks div.drinks_image3,body#drinks div.drinks_image4,body#drinks div.drinks_ingredients { float: none; position: absolute; width: 100px; height: 413px; margin: 0; } div.drinks_image1 { left: -20px; top: -40px; background: url(../images/drinks_cocktail1-trans.png) no-repeat 0; } div.drinks_image2 { left: -10px; top: -35px; background: url(../images/drinks_tsingtao.png) no-repeat 0; } div.drinks_image3 { left: -30px; top: -85px; background: url(../images/drinks_cocktail3-trans.png) no-repeat 0; } div.drinks_image4 { left: -30px; top: -95px; background: url(../images/drinks_cocktail2-trans.png) no-repeat 0; } body#drinks div.drinks_ingredients { left: -15px; top: -75px; background: url(../images/drinks_lambs.png) no-repeat 0; width: 74px; height: 350px; } /* REMEMBER TO ADD THE IMAGE TO THE CODE AT TOP**************************** */ /* EVENTS SPECIFIC -----------------------------------------------------------------------------*/ body#events #content_block h3.headline { padding: 10px 0 0 0; } body#events #content_block h5 { margin: 0 10px 0 10px; } body#events #content_block h5 { color: #f7bd05; padding: 5px 0 0 0; } body#events .date_time { color: #fff; padding: 0 0 3px 0; } /* STAFF SPECIFIC -----------------------------------------------------------------------------*/ .staff_questions dt { color: #fff; text-transform: uppercase; } .staff_text { margin: 0 0 0 110px; } /* NEWS SPECIFIC -----------------------------------------------------------------------------*/ body#news #content_block .column img { border: 1px solid #3b3b3b; } body#news .news_date { color: #8accc6; } body#news #content_block .column.left { width: 264px; float: left; clear: both; } body#news #content_block .column.right { float: right; width: 264px; clear: right; } /* QUENCH SPECIFIC -----------------------------------------------------------------------------*/ body#quench div#content_block img { border: 1px solid #4b4b4b; } body#quench div#content_block .headline { padding: 3px 0 0 0; } /* GALLERY SPECIFIC -----------------------------------------------------------------------------*/ #gallery_container { width: 611px; padding: 21px 42px; } ul.gallery li { float: left; margin: 0 13px 13px 0; height: 68px; width: 68px; border: 1px solid #434343; } #gallery_container .headline { margin: 0 0 10px 0; } /* @end */ /* @group SUB-CONTENT -----------------------------------------------------------------------------*/ /* Add space below sub_content headers */ div#sub_content h3 { margin: 0 0 10px 0; } /* date calender */ .date { position: relative; top: 3px; float: left; background: url(../images/calender-trans.png) no-repeat left top; width: 29px; height: 32px; text-align: center; } /* date calender month styling */ .date span.month { position: relative; top: -2px; display: block; text-transform: uppercase; color: #a2999d; font-size: 11px; } /* date calender day styling */ .date span.day { position: relative; top: -11px; display: block; color: #ed36a1; font-weight: bold; font-size: 14px; } /* Change position of calender background image to align with text tops */ #sub_events .date,#sub_recently .date { top: 5px; } /* Indent text to create space for calender */ #sub_content dl dd { margin: 0 0 0 44px; } /* Add space below each text block */ #sub_content dl { margin: 0 0 10px 0; } /* Add space below each div block - NOTE if 'sub_featured_items' is changed for 'sub_content' in the rule below, firefox doesn't extend the sub_content background all the way to the bottom (the 25px shows at bottom) */ #sub_featured_items div { margin: 0 0 25px 0; } /* Remove space applied by rule above for shadow container div */ #sub_content #shadow_horiz { margin: 0; } /* 'overflow' rule to get the gallery div to contain the floated contents */ #sub_gallery { overflow: hidden; } /* Float image blocks right to create grid and apply spacing between them */ #sub_gallery img { float: right; margin: 2px; border: 1px solid #2d2d2d;} /* Remove all #sub_content margin rules for gallery
's */ #sub_gallery dl dd { margin: 0; } /* sub_content link styling */ #sub_content a:link { display: inline; color: #a2cce4; text-decoration: none; } #sub_content a:hover { color: #a2cce4; text-decoration: underline; } #sub_content a:visited { color: #a2cce4; text-decoration: none; } /* Text alignment under featured item graphics */ div#sub_content div p { margin: 0 8px 20px 10px; } /* Cause the hidden text not to take up any vertical space */ div#sub_content .mir { position: absolute; } /* Text alignment for Opening Hours on Contact page */ div#sub_content #opening_hours p { margin: -5px 0 10px 44px; } /* clock icon styling on contact page - IE6/7 needs float and position as shown */ #clock_icon { background: url(../images/clock.png) no-repeat left top; height: 32px; width: 32px; position: relative; float: left; } /* @end */ /* @group POPUPS -----------------------------------------------------------------------------*/ body#privatehire, body#masterclass, body#maps { background: #000 url(../images/popup_background.gif) repeat-x; position: relative; width: 744px; margin: 0 auto; } div#popup_container { padding: 0 42px 10px 42px; } div#popup_container h1 { float: right; width: 196px; height: 23px; margin: 30px -3px 0 0; background: url(../images/boutique_logo_small.png) no-repeat 0 0; } div#popup_container h2 { padding: 25px 0 10px 0; overflow: hidden; color: #fff; font: bold 140% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; } div.popup_column1 { float: left; } div.popup_column1 p { /* DIV has had to be added (div.popup_column1) to the HTML to allow for individual styling of any