/* Project: Simmzy's - Public Red: #d1242a Black: #000 Brown: #d8cfb2 */ * { margin: 0; padding: 0; } html { height: auto; } body { font: 12px/20px 'Comic Sans MS', Georgia, Arial; text-align: center; width: 100%; height: 100%; display: block; background: #000 url(/images/body-bg.gif) repeat-y top center; } h1 {} h2 {} h3 { font-weight: bold; margin: 0; padding: 0; font-size: 18px; } a { text-decoration: none; } ul { margin-left: 40px; } a:hover { } img { border: none; } .bold { font-weight: bold; } .italic { font-style: italic; } #wrapper { position: relative; width: 955px; margin: 0 auto; text-align: left; min-height: 1px; background: #fff; margin-bottom: 70px; } /* HEADER */ #header { position: relative; background: url(/images/header-bg.jpg); } #flash { position: absolute; top: 0; left: 470px; } /* NAVIGATION */ #navigation { position: relative; list-style-type: none; background: url(/images/menu-bg.png); width: 955px; height: 148px; margin: 0; } #navigation li { float: left; } #navigation a { display: block; width: 107px; height: 148px; text-indent: -9999px; } #navMenu { background: url(/images/nav/menu.png) no-repeat; margin-left: 50px; } #navBeer { background: url(/images/nav/beer.png) no-repeat; } #navWine { background: url(/images/nav/wine.png) no-repeat; } #navEvents { background: url(/images/nav/events.png) no-repeat; } #navGallery { width: 108px; background: url(/images/nav/gallery.png) no-repeat; } #navLocation { background: url(/images/nav/location.png) no-repeat; } #navContact { width: 108px; background: url(/images/nav/contact.png) no-repeat; } #navAbout { background: url(/images/nav/about.png) no-repeat; } #navMenu:hover, #navBeer:hover, #navWine:hover, #navEvents:hover, #navGallery:hover, #navLocation:hover, #navContact:hover, #navAbout:hover, #food #navMenu, #beer #navBeer, #wine #navWine, #events #navEvents, #gallery #navGallery, #location #navLocation, #contact #navContact, #about #navAbout { background-position: 0px -148px; } /* CONTENT */ #main, #main2 { position: relative; margin-top: 25px; } #main2 { padding: 0 15px; } #content { position: relative; margin-left: 305px; padding-top: 55px; } #content2 { padding: 0 15px; } #sidebar { float: left; width: 295px; } #sidebar ul { list-style-type: none; width: 245px; margin: 0; } #sidebar li { margin-bottom: 5px; } #sidebar li a { color: #fff; font-weight: bold; background: #fff url(/images/sidebar-nav-bg.gif) right center; display: block; padding: 5px; text-transform: uppercase; } #sidebar li a:hover { color: #d0232a; background: url(/images/sidebar-nav-bg-on.gif) no-repeat right center; } /* SIDE BAR HOVERS */ #clear { position: relative; clear: both; height: 110px; } /* HOMEPAGE */ #homepage { position: relative; background: #d8ceb2; margin: 0 29px; width: 896px; height: 496px; } #homepage span { float: left; width: 427px; height: 230px; margin: 12px 0 0 14px; } #menuHP { display: block; background: url(/images/hp/menu.jpg) no-repeat; width: 427px; height: 230px;} #menuHP:hover { background: url(/images/hp/menu-on.jpg); } #locHP { display: block; background: url(/images/hp/location.jpg) no-repeat; width: 427px; height: 230px;} #locHP:hover { background: url(/images/hp/location-on.jpg); } #eventsHP { display: block; background: url(/images/hp/events.jpg) no-repeat; width: 427px; height: 230px;} #eventsHP:hover { background: url(/images/hp/events-on.jpg); } #events2 { position: relative; clear: both; height: 60px; } /* MENU */ .menuItem { font-size: 14px; background: #d8ceb2; padding: 2px 8px; margin-bottom: 8px; } .menutitle { background: #d8ceb2; padding: 2px 8px; margin-bottom: 8px; font-size: 18px; display: inline; font-weight: bold; } #menu2 { position: relative; clear: both; height: 155px; } /* GALLERY */ #photoGallery { } #photoGallery dd { float: left; margin: 8px; width: 130px; height: 120px; } #photoGallery dd div { position: relative; } /*.gallery span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .gallery:hover span {display: block; background: url(/images/red-bg.png); } */ #gallery2 { position: relative; clear: both; height: 150px; } /* LOCATION */ #locationBox { position: relative; } #map { position: relative; width: 624px; height: 505px; border: 6px solid #d8cfae; } #locationInfo { position: absolute; top: 0px; left: 650px; width: 250px; background: #000; color: #fff; padding: 5px; } #locationLinks { position: relative; clear: both; height: 50px; width: 100%; } #footer { position: absolute; height: 138px; z-index: 10; left: 0px; bottom: 0px; text-align: center; width: 100%; } #footer span { display: block; background: url(/images/footer.png) no-repeat left bottom; width: 955px; height: 100%; margin: 0 auto; } #footer p { position: absolute; top: 95px; left: 0; width: 100%; font-size: 8px; color: #000; font-weight: bold; text-align: center; } #footer p a, #footer p strong { color: #fff; font-size: 8px; } /* FORM */ .form_row { position: relative; margin-bottom: 10px; } .form_row label { float: left; text-align: right; margin-right: .5em; width: 150px; } #flash { font-weight: bold; color: #D0232A; font-size: 14px; } @media screen{ body>div#footer{ position:fixed; } } * html div#wrapper { height: 100%; overflow: auto;} #socialmedia {position:fixed; left:0; top:25%;} #socialmedia #facebook a {display:block; height:134px; width:30px; background:transparent url(../images/social_sprite.png) -1px -1px no-repeat; text-indent:-9999px; margin-bottom:10px;} #socialmedia #twitter a {display:block; height:134px; width:30px; background:transparent url(../images/social_sprite.png) -1px -139px no-repeat; text-indent:-9999px; margin-bottom:10px;} #socialmedia #newsletter a {display:block; height:134px; width:30px; background:transparent url(../images/social_sprite.png) -1px -278px no-repeat; text-indent:-9999px;} #socialmedia #facebook a:hover {height:134px; width:80px; background-position:-1px -417px;} #socialmedia #twitter a:hover {height:134px; width:80px; background-position:-1px -555px;} #socialmedia #newsletter a:hover {height:134px; width:80px; background-position:-1px -693px;}