@charset "utf-8"; /* CSS Document */ /* Created for: Mac's Brewbar & Restaurant, Taranaki St Wharf, Wellington | www.thebrewerybar.co.nz Written by: Kelly Knights | www.orangejam.ca Agency: Shine Ltd. Date: December 2008 Adapted by James Langdon 2010 COLOUR GUIDE ---------------------- Light Brown: #efe1c8 Medium Brown: #c2a687 Dark Brown: #765544 Dark Rust: #a65534 */ /* MINIMAL RESET ---------------------------------------------------------------------------------------------------------------------------------------------------------*/ * {vertical-align: baseline; border: 0 none; outline: 0; padding: 0; margin: 0; list-style:none; text-decoration:none; border: 0;} /* STRUCTURE ---------------------------------------------------------------------------------------------------------------------------------------------------------*/ body {background:url(../images/tile_texture_reg.png); font-family:Arial, Helvetica, sans-serif; font-size:62.5%; color:#765544;} #wrapper {width: 950px; margin: 25px auto; display:block; position: relative;} #header {width: 942px; float: left; margin: 0} /*CONTENT LEFT*/ #contentLeft {width: 350px; float: left; margin: 20px 15px 30px 15px;} #index #contentLeft {width: 473px; float: left; margin-top: 40px; margin-right: 15px; margin-bottom: 30px; margin-left: 15px;} #diningMenus #contentLeft {width: 300px; float: left; margin: 20px 35px 30px 15px;} #thebrewery #contentLeft {width: 475px; float: left; margin: 20px 0px 30px 15px;} #contentLeft p {margin-bottom: 14px; font-size:1.4em; line-height:125%;} #contentLeft a {font-weight: bold; color:#765544;} #contentLeft a:hover {color:#a65534; border-bottom: 1px solid #a65534;} #contactUs #contentLeft a:hover {color:#a65534; border-bottom: 0px solid #a65534;} #contactUs #contentLeft {width: 420px; float: left; margin: 20px 15px 30px 15px;} #contentLeft ul {margin: 5px 0 10px 0;} #contentLeft li {font-size:1.3em; margin-bottom: 10px;margin-top: 0px;} #functiontwentyfirsts #contentLeft li {font-size:1.3em; margin-bottom: 4px;margin-top: 0px;} /*CONTENT RIGHT*/ #contentRight {width: 500px; float: left; margin: 20px 0 20px 20px;} #contentRight p {margin: 0 0 14px 0; font-size:1.4em; line-height:125%;} #contentRight p a {font-weight: bold; color:#765544;} #contentRight p a:hover {color:#a65534; border-bottom: 1px solid #a65534;} #index #contentRight {width: 400px; float: right; margin: 20px 20px 20px 15px;} #function #contentRight {width: 380px; float: left; margin: 20px 0 0 35px;} #function #contentRight img {float: top left; margin: 10px 0px 10px 0;} #function #contentRight p {font-size: 1.4em; line-height: normal; text-align: justify; margin: 0px 0px 25px 0px;} #contactUs #contentRight {width: 348px; height: 326px; float: right; margin: 20px 70px 10px 20px; background:url(../images/macs.png) no-repeat;} #whatsOnImages {width: 125px; float: right; margin: 0 0 5px 15px;} /*SITE HEADER AREA AND NAVIGATION ---------------------------------------------------------------------------------------------------------------------------------------------------------*/ #header ul {width: 800px; height: 40px; margin: -36px 0 0 0px; clear: both; float: left; background:url(../images/rule.png) no-repeat bottom left;} #header li {float: left; height: 21px; overflow:hidden;} #header li a {display: block; line-height: 21px; text-indent: -5000px; overflow:hidden; background-position: center top;} #function #header ul {background:url(../images/tile_texture_reg.png);} #functionParties #header ul {background:url(../images/tile_texture_reg.png);} #functionCorporate #header ul {background:url(../images/tile_texture_reg.png);} #functiontwentyfirsts #header ul {background:url(../images/tile_texture_reg.png);} #functionPhotos #header ul {background:url(../images/tile_texture_reg.png);} #home {background:url(../images/nav_01.png) no-repeat; width: 93px; height: 21px; margin-left: 15px;} #home a:hover {background:url(../images/nav_01.png) 33% -21px;} #beer {background:url(../images/nav_02.png) no-repeat; width: 178px;} #beer a:hover {background:url(../images/nav_02.png) 33% -21px;} #dining {background:url(../images/nav_03.png) no-repeat; width: 132px;} #dining a:hover {background:url(../images/nav_03.png) 33% -21px;} #functions {background:url(../images/nav_04.png) no-repeat; width: 177px;} #functions a:hover {background:url(../images/nav_04.png) 33% -21px;} #contact {background:url(../images/nav_05.png) no-repeat; width: 169px;} #contact a:hover {background:url(../images/nav_05.png) 33% -21px;} #index #home, #ourBeers #beer, #diningMenus #dining, #function #functions, #functionCorporate #functions, #functionParties #functions, #functiontwentyfirsts #functions, #functionPhotos #functions, #contactUs #contact {background-position: 50% -42px;} /*HEADERS ---------------------------------------------------------------------------------------------------------------------------------------------------------*/ h1 {background:url(../images/h1_header.png) no-repeat; width: 796px; height: 85px; text-indent: -5000px; float: left; margin-top: 5px;} h2 a {background:url(../images/headerBadge.png) right top; width: 141px; height: 142px; text-indent: -5000px; float: left; margin-left : 5px;} h2 a:hover {background-position: 50% -142px;} #index h3 {background:url(../images/h3_index.png) no-repeat top left; width: 162px; height: 30px; text-indent: -5000px; float: left; margin: 0 15px 0 0;} #ourBeers h3 {background:url(../images/h3_beers.png) no-repeat top left; width: 327px; height: 71px; text-indent: -5000px; margin: 0 0 15px 0;} #ourBeers h4 {background:url(../images/h4_beers.png) no-repeat; width: 465px; height: 80px; text-indent: -5000px; overflow: hidden;} #diningMenus h3 {background:url(../images/h3_dining.png) no-repeat top left; width: 264px; height: 58px; text-indent: -5000px; margin: 0 0 15px 0;} #diningMenus h4 {background:url(../images/h4_dining.jpg) no-repeat; width: 530px; height: 186px; text-indent: -5000px; overflow: hidden;} #function h3 {background:url(../images/h3_functions.png) no-repeat; width: 386px; height: 53px; text-indent: -5000px; overflow:hidden; margin: 0 0 15px 0;} #functionCorporate h4 {background:url(../images/h4_function.png) no-repeat; width: 180px; height: 17px; text-indent: -5000px; overflow:hidden; margin: 0 0 5px 0;} #functionCorporate h5 {background:url(../images/h5_training.png) no-repeat; width: 180px; height: 17px; text-indent: -5000px; overflow:hidden; margin: 0 0 5px 0;} #function h4 {background:url(../images/h4_function.png) no-repeat; width: 180px; height: 17px; text-indent: -5000px; overflow:hidden; margin: 0 0 0 0;} #function h5 {background:url(../images/h5_training.png) no-repeat; width: 180px; height: 17px; text-indent: -5000px; overflow:hidden; margin: 0 0 0 0;} #contactUs h3 {background:url(../images/h3_contact.png) no-repeat; width: 403px; height: 49px; text-indent: -5000px; overflow:hidden; margin: 0 0 20px 0;} h6 {background:url(../images/h6_testimonials.png) no-repeat; width: 128px; height: 15px; text-indent: -5000px; overflow:hidden; margin: 0 0 5px 0;} /*FOOTER ---------------------------------------------------------------------------------------------------------------------------------------------------------*/ #footer {width: 910px; background:url(../images/rule.png) no-repeat top right; padding: 15px 0 0 0; clear: both;} #footer p {font-size: 1.2em;} #contactFooter {float: right; width: 262px; height: 27px; display: block } #contactFooter a {background:url(../images/contact.png) no-repeat; width: 262px; height: 27px; display: block} #contactFooter a:hover {background:url(../images/contact.png) 50% -27px;} /*PAGE SPECIFIC STYLES ---------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*HOME */ #whatsOn {width:350px; background:url(../images/tile_texture_light.png); padding: 14px 14px 14px 14px;} #whatsOn h4 {background:url(../images/whatsOn2.png) no-repeat; width: 200px; height: 97px; text-indent:-5000px; overflow:hidden; float: top-left; margin: 0 0 0 0;} #whatsOn p {font-size: 1.4em; line-height: normal; text-align: justify;} #whatsOn a {color:#765544;} #whatsOn a:hover{border-bottom: 1px solid #765544;} #topPhoto {margin: 0 0 10px 0;} #placeholder {width: 475px; height: 250px; float: left; background-color:#c2a687; color:#fff; text-align: center; padding-top: 200px;} /*OUR BEERS*/ dl {background:url(../images/tile_texture_light.png); width: 463px; margin-bottom: 2px; padding-bottom: 5px;} dt {width: 60px; height: 39px; padding: 5px 0 0px 0; float: left;} dt a:hover {border: 0; text-decoration: none;} dt#gold a {background:url(../images/beerGold.png) no-repeat top; height: 36px; width: 36px; display:block; margin: 0 auto 2px;} dt#gold a:hover {background:url(../images/beerGold.png) 50% -36px; display:block;} dt#black a {background:url(../images/beerBlack.png) no-repeat top; height: 36px; width: 36px; display:block; margin: 0 auto;} dt#black a:hover{background:url(../images/beerBlack.png) 50% -36px; display:block;} dt#hop a {background:url(../images/beerHop.png) no-repeat top; height: 39px; width: 36px; display:block; margin: -2px auto 5px auto; } dt#hop a:hover {background:url(../images/beerHop.png) 50% -39px; display:block;} dt#white a {background:url(../images/beerWhite.png) no-repeat top; height: 39px; width: 36px; display:block; margin: 0 auto;} dt#white a:hover{background:url(../images/beerWhite.png) 50% -39px; display:block;} dt#red a {background:url(../images/beerRed.png) no-repeat top; height: 36px; width: 36px; display:block; margin: 0 auto;} dt#red a:hover {background:url(../images/beerRed.png) 50% -36px; display:block;} dt#spring a {background:url(../images/beerSpring.png) no-repeat top; height: 36px; width: 36px; display:block; margin: 0 auto;} dt#spring a:hover{background:url(../images/beerSpring.png) 50% -36px; display:block;} dt#sundance a {background:url(../images/beerSun.png) no-repeat top; height: 36px; width: 36px; display:block; margin: 0 auto;} dt#sundance a:hover{background:url(../images/beerSun.png) 50% -36px; display:block;} dt#ginger a {background:url(../images/beerGinger.png) no-repeat top; height: 32px; width: 32px; display:block; margin: 0 auto;} dt#ginger a:hover{background:url(../images/beerGinger.png) 50% -32px; display:block;} dt#greenApple a {background:url(../images/beerGreen.png) no-repeat top; height: 32px; width: 32px; display:block; margin: 0 auto;} dt#greenApple a:hover{background:url(../images/beerGreen.png) 50% -32px; display:block;} dd {padding: 5px; font-size: 1.2em;} dd a {font-weight:bold;color:#765544;} dd a:hover {border-bottom: 1px solid #a65534; color:#a65534;} /*DINING*/ #menus {width: 530px; height: 100%; background:url(../images/tile_texture_light.png); margin-top: 2px;padding: 10px 0;} #menus ul {width: 523px; margin: 0px 10px } /*FIRST ROW OF MENU GRAPHICS*/ #menus li {float: left; height: 169px; overflow:hidden;} #menus li a {line-height: 169px; text-indent: -5000px; overflow:hidden; background-position: center top;} #menuTitle {margin-left: -5px;} #brunch a {background:url(../images/menu_brunch.png) no-repeat; width: 85px; display:block; } #brunch a:hover {background:url(../images/menu_brunch.png) 50% -169px; display:block;} #lunch a {background:url(../images/menu_lunch.png) no-repeat; width: 85px; display:block; } #lunch a:hover {background:url(../images/menu_lunch.png) 50% -169px; display:block;} #dinner a {background:url(../images/menu_dinner.png) no-repeat; width: 86px; display:block; } #dinner a:hover {background:url(../images/menu_dinner.png) 50% -169px; display:block;} #bar a {background:url(../images/menu_bar.png) no-repeat; width: 85px; display:block; } #bar a:hover {background:url(../images/menu_bar.png) 50% -169px; display:block;} #finger a {background:url(../images/menu_finger.png) no-repeat; width: 91px; display:block; } #finger a:hover {background:url(../images/menu_finger.png) 50% -169px; display:block;} /*SECOND ROW OF MENU GRAPHICS*/ #menus2 { width:523px;} #menus2 li {float: left; height: 159px; overflow:hidden;} #menus2 li a {line-height: 159px; text-indent: -5000px; overflow:hidden; background-position: center top;} #set a {background:url(../images/menu_set.png) no-repeat; width: 91px; display:block; margin-left:-5px;} #set a:hover {background:url(../images/menu_set.png) 50% -159px; display:block;} #buffet a {background:url(../images/menu_buffet.png) no-repeat; width: 85px; display:block; } #buffet a:hover {background:url(../images/menu_buffet.png) 50% -159px; display:block;} #xmas a {background:url(../images/menu_xmas.png) no-repeat; width: 85px; display:block; } #xmas a:hover {background:url(../images/menu_xmas.png) 50% -159px; display:block;} #xmasbuffet a {background:url(../images/menu_xmasbuffet.png) no-repeat; width: 86px; display:block; } #xmasbuffet a:hover {background:url(../images/menu_xmasbuffet.png) 50% -159px; display:block;} #beers a {background:url(../images/menu_beer.png) no-repeat; width: 85px; display:block; } #beers a:hover {background:url(../images/menu_beer.png) 50% -159px; display:block;} #wine a {background:url(../images/menu_wine.png) no-repeat; width: 91px; display:block; } #wine a:hover {background:url(../images/menu_wine.png) 50% -159px; display:block;} /*FUNCTIONS*/ #optionsLeft { width: 170px; height: 180px; float: left; background:url(../images/tile_texture_light.png); margin: 0 2px 10px 0; padding-top: 10px; padding-right: 0; padding-bottom: 10px; padding-left: 0; } #optionsLeft img {display: block; margin: 0 auto;} #optionsRight { width: 218px; height: 180px; background:url(../images/tile_texture_light.png); float: left; padding: 10px; margin: 0 0 10px 0; } #optionsRight ul {margin: 10px 0;} #optionsRight li {font-size:1.3em; margin-bottom: 10px;} #function #contentLeft {width: 500px; float: left; margin: 20px 0px 30px 15px;} #functionOther #contentLeft {width: 420px; float: left; margin: 20px 0px 30px 15px;} #functionCorporate #contentLeft {width: 410px; float: left; margin: 20px 0px 30px 15px;} #functionCorporate #contentRight {width: 385px; float: left; margin: 20px 0 20px 45px;} #functionCorporate #contentRight img {float: left; margin: 5px 0px 15px 0px;} #header2 ul {width: 900px; height: 39px; margin: -36px 0 0 0px; clear: both; float: top-left; background:url(../images/tile_texture_reg.png) no-repeat bottom left;} #header2 li {float: left; height: 39px; margin-top: 0px; overflow:hidden;} #header2 li a {display: block; line-height: 39px; text-indent: -5000px; overflow:hidden; background-position: center top;} #info {background:url(../images/nav_101.png) no-repeat; width: 144px; height: 39px; margin-left: 0px;} #info a:hover {background:url(../images/nav_101.png) 33% -39px;} #parties {background:url(../images/nav_102.png) no-repeat; width: 174px;} #parties a:hover {background:url(../images/nav_102.png) 33% -39px;} #corporate {background:url(../images/nav_103.png) no-repeat; width: 212px;} #corporate a:hover {background:url(../images/nav_103.png) 33% -39px;} #twentyfirsts {background:url(../images/nav_104.png) no-repeat; width: 162px;} #twentyfirsts a:hover {background:url(../images/nav_104.png) 33% -39px;} #photos {background:url(../images/nav_105.png) no-repeat; width: 104px;} #photos a:hover {background:url(../images/nav_105.png) 33% -39px;} #function #info, #functionCorporate #corporate, #functiontwentyfirsts #twentyfirsts, #functionParties #parties, #functionPhotos #photos {background-position: 50% -78px;} #functionParties #contentLeft {width: 360px; float: left; margin: 20px 0px 30px 15px;} #functionParties #contentRight {width: 380px; float: left; margin: 20px 0 20px 45px;} #functionParties #contentRight img {float: left; margin: 5px 0px 15px 0px;} #functionParties h4 {background:url(../images/h4_function.png) no-repeat; width: 180px; height: 17px; text-indent: -5000px; overflow:hidden; margin: 0 0 5px 0;} #functiontwentyfirsts #contentLeft {width: 370px; float: left; margin: 20px 0px 30px 15px;} #functiontwentyfirsts #contentRight {width: 385px; float: left; margin: 20px 0 20px 45px;} #functiontwentyfirsts #contentRight img {float: left; margin: 5px 0px 15px 0px;} #functiontwentyfirsts h4 {background:url(../images/h4_function.png) no-repeat; width: 180px; height: 17px; text-indent: -5000px; overflow:hidden; margin: 0 0 5px 0;} #functiontwentyfirsts #contentLeft ul {width: 350px; background:url(../images/tile_texture_light.png); float: left; padding: 10px; margin: 0;} #functionPhotos #contentLeft {width: 380px; float: left; margin: 20px 0 20px 15px;} #functionPhotos #contentLeft img {float: left; margin: 5px 0px 15px 0px;} #functionPhotos #contentRight {width: 385px; float: left; margin: 20px 0 20px 15px;} #functionPhotos #contentRight img {float: left; margin: 5px 0px 15px 0px;} /*CONTACT US*/ address {background:url(../images/contactInfo.png) no-repeat; width: 381px; height: 190px; text-indent: -5000px; margin: 0 0 10px 0;} #email {width: 379px; height: 20px; display: block } #email a {background:url(../images/email.png) no-repeat; width: 379px; height: 20px;display: block} #email a:hover {background:url(../images/email.png) 50% -20px;} #testi {width: 915px; float: left; margin: 0 15px 30px 15px;} #testi ul {width: 895px; background:url(../images/tile_texture_light.png); float: left; padding: 10px; margin: 0;} #testi li {font-size:1.3em; margin-bottom: 10px;margin-top: 0px;}