/* ---------------------------------------- CATERING WORKS - MAIN WEBSITE AUTHOR: Starlab Design / Tommie Cranker VERSION: 1.0 UPDATED: 01.26.09 ---------------------------------------- COLORS ---------------------------------------- #bfa306 - green #dfe3bd - light tan #bf4706 - red ----------------------------------------*/ /* ---------------------------------------- GLOBAL RESET ----------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, 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; outline: 0; font-size: 100% } :focus { outline: 0 } /* ---------------------------------------- BODY STYLES ----------------------------------------*/ body { background: url(../imgs/body_bg.gif) repeat-x top #74a49d; font-family: Arial, Helvetica, sans-serif } body#cater-events #sub-wrap { background: none; margin: 10px 45px 0px 45px; padding: 0px 0px 10px 0px; width: 230px } body#cater-events #sidebar { background: url(../imgs/event-sidebar.gif) repeat-y #5a8982; padding: 0px } /* ---------------------------------------- GLOBAL LINK STYLES ----------------------------------------*/ a { text-decoration: none } a:link, a:visited { color: #f0a71b } a:hover { color: #5b8b84 } a.menu-dl { display: block; margin-left: 5px; padding-left: 20px } a.menu-dl:link, a.menu-dl:visited { background: url(../imgs/nav_arrow.gif) no-repeat left; color: #f0a71b; font-weight: bold; } a.menu-dl:hover { color: #5b8b84 } /* ---------------------------------------- GLOBAL TYPOGRAPHY STYLES ----------------------------------------*/ h1, h2, h3, h4 { font-weight: normal; line-height: normal } h1 { font-size: 24px } h2 { font-size: 18px } h3 { font-size: 16px } h4 { color: #5B7F96; font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; font-style: italic; font-weight: bold } #sidebar h1 { color: #fff; font-size: 16px; padding: 5px 10px } #intro h1 { color: #304a46; font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; font-weight: bold; margin-bottom: 10px; padding-top: 5px } #intro p { padding: 5px 0px; font-size: 12px; color: #454545; line-height: 1.6; text-align: justify } #stories h1 { color: #304a46; font-size: 16px; font-weight: bold; padding-bottom: 10px } #stories p { padding: 5px 0px; font-size: 12px; color: #454545; line-height: 1.6; text-align: justify } #special h2 { color: #304a46; font-size: 14px; font-weight: bold; padding-top: 5px } #special p { padding: 10px 0px; font-size: 12px; color: #454545; line-height: 1.6 } #contact_form p { color: #fff; font-size: 14px; font-weight: bold } #test-content p { color: #666; font-size: 11px; font-style: italic; line-height: 1.6; padding-top: 5px } p.line { border-bottom: 1px solid #304a46 } /* ---------------------------------------- LAYOUT CONTAINERS ----------------------------------------*/ #page-container { margin: 0px auto; width: 960px } #header { float: left; height: 180px; width: 960px } #page-wrap { background: url(../imgs/page-wrap-bg.gif) no-repeat bottom #fff; float: left; width: 960px } #sidebar { background: url(../imgs/sidebar_bg.gif) repeat-y #5a8982; float: left; margin-bottom: 20px; padding: 20px 0px 0px 0px; width: 320px } #content { float: right; padding-right: 20px; width: 620px } /* ---------------------------------------- NAVIGATION ----------------------------------------*/ #nav { background: transparent; float: left; height: 30px; margin-top: 50px; width: 640px } #navlist { float: left; font-size: 14px; font-weight: bold; text-transform: uppercase } #navlist li { display: inline; float: left; list-style: none } #navlist li a { float: left; height: 23px; margin-right: 1px; padding: 7px 15px 0px 15px } #navlist li a:link, #navlist li a:visited { background: url(../imgs/navbg_off.gif) repeat-x bottom; color: #d3e0de } #navlist li a:hover { background: url(../imgs/navbg_on.gif) repeat-x bottom; color: #fff } #navlist li a#active { color: #f0a71b; background: #fff } #sub-wrap { background: #fff; float: left; margin: 25px 45px 0px 45px; padding: 10px; width: 210px } #subnav { font-size: 12px; font-weight: bold; list-style: none } #subnav li { display: block; list-style: none } #subnav li a { display: block; padding: 7px 0px 7px 20px } #subnav li a:link, #subnav li a:visited { background: url(../imgs/nav_arrow.gif) no-repeat left; color: #f0a71b } #subnav li a:hover { color: #5b8b84 } #subnav li a#active { color: #5b8b84 } /* ---------------------------------------- CONTENT CONTAINERS ----------------------------------------*/ #logo { background: url(../imgs/logo.png) no-repeat bottom; float: left; height: 180px; width: 320px } #cafe #logo { background: url(../imgs/swlogo.png) no-repeat bottom } #cafe #sidebar { background: url(../imgs/sworks-sidebar.gif) repeat-y #5a8982; padding: 13px 0px 0px 0px; } #cafe #sub-wrap p { color: #304a46; font-size: 12px; line-height: 1.5; text-align: center } .big { font-size: 14px; font-weight: bold } #sworks { float: left; height: 100px; padding-right: 20px; width: 620px } #sworks-rt { float: right; height: 100px; width: 125px } #sworks-lt { float: left; height: 100px; width: 420px } #sworks-lt p { color: #fff; font-size: 12px; padding-top: 11px } #intro { padding-top: 25px; width: 620px; float: left } #menu-contain { background: #d4e7e5; margin: 10px 0px 20px 0px; width: 620px; float: left } #menu-contain-new { background: #fff; margin: 10px 0px 20px 0px; width: 620px; float: left } #menu-list-box { float: left; list-style-type: none; width: 620px } #menu-list-box li { display: inline; float: left; list-style-type: none } #menu-list-box li a { float: left; padding: 10px; width: 135px } #stories { padding-top: 20px; width: 620px; float: left } #special { float: left; padding-top: 10px; width: 310px } #sand-works { float: left; width: 310px } #testimonial { float: left; width: 310px } #test { background: #5b8b84; bottom: 0; height: 235px; position: absolute; width: 100%; z-index: -1 } #inner-test { background: url(../imgs/test_bg.gif) no-repeat top right; float: left; height: 215px; margin: 0 auto; padding: 20px 20px 0px 0px; width: 290px } #test-content { float: right; height: 110px; width: 250px } ul#menu-list { font-size: 14px; list-style: none; padding: 10px 0px 0px 10px } ul#menu-list li { display: block; list-style: none; padding: 5px 0px } ul#menu-list li a { font-weight: bold } ul#menu-list li a:link, ul#menu-list li a:visited { background: url(../imgs/nav_arrow.gif) no-repeat left; color: #f0a71b; display: block; padding-left: 20px } ul#menu-list li a:hover { color: #5b8b84 } #menu-frame { border: 1px solid #6198A0; margin: 10px 0px 20px 0px; padding: 5px; width: 608px; float: left } #menu-wrap { background: #F6F8F9; float: left; padding: 15px; width: 578px } .cost-table { background: #E7ECEF; float: left; margin-bottom: 20px; padding: 10px; width: 558px } .cost-table table td { padding: 5px } span.table-head { color: #fff; font-size: 12px; font-weight: bold } span.price { color: #000; font-size: 12px } #menu-frame p { color: #454545; font-size: 12px; line-height: 1.5; padding: 0px 0px 10px 5px } #picnics #menu-frame p, #picnics #menu-frame h3 { text-align: center } #picnics #menu-frame p { line-height: 1.4 } #lunch #menu-frame-lt p { padding: 0px 0px 5px 5px } #lunch #menu-frame-rt p { padding: 0px 0px 5px 0px; } #lunch #menu-frame-lt { padding-bottom: 10px; width: 200px } #lunch #menu-frame-rt { width: 200px } #menu-frame h3 { background: #5B7F96; color: #fff; font-size: 14px; font-weight: bold; margin-bottom: 5px; padding: 7px 5px } #menu-frame p span.item { color: #5B7F96; font-size: 13px; font-weight: bold } #menu-frame-lt { width: 279px; float: left; padding-right: 10px } #menu-frame-rt { width: 279px; float: left; padding-left: 10px } .menu-frame-full { width: 578px; float: left; } #menu-frame .menu-frame-full h3 { background: none; color: #5B7F96; font-size: 14px; font-weight: bold; margin-bottom: 0px; padding: 7px 5px } #side-info { background: #E7ECEF; padding: 10px; width: 259px; float: left } span.blue { color: #5B7F96 } #event-list { float: left; padding: 20px 0px; width: 620px } #event-list p { color: #454545; font-size: 12px; line-height: 1.6; padding: 0px 0px 15px 0px } #menu-frame dl { border-bottom: 1px solid #ccc; color: #454545; float: left; font-size: 12px; padding: 5px 5px; width: 269px; vertical-align: bottom } #menu-frame dt { float: left; padding: 2px 0px; width: 210px } #menu-frame dd { float: right; padding: 2px 0px; text-align: right; width: 50px } #cmenu #menu-frame h3, #cmenu #menu-frame p { float: left; width: 269px } p.menu-item { float: left; width: 279px } p.menu-item span { float: right } /* ---------------------------------------- FOOTER ----------------------------------------*/ #footer { background: url(../imgs/footer-bg.gif) no-repeat; clear: both; height: 40px; width: 960px } #footer p { color: #d3e0de; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif } #footer-content-lt { float: left; padding: 8px 0px 0px 45px; width: 265px } #footer-content-rt { float: right; padding: 8px 40px 0px 0px; text-align: right; width: 580px } #footer-content-rt a { font-size: 11px } /* ---------------------------------------- FORMS ----------------------------------------*/ #contact_form { background: url(../imgs/side-bottom.gif) no-repeat bottom; float: left; padding: 10px 45px 20px 45px; width: 230px } #contact_form form { background: #476C66; float: left; padding: 10px 0px 10px 10px; width: 220px } #contact_form form fieldset { float: left; font-size: 12px; width: 220px } #contact_form ol { float: left; list-style: none; width: 220px } #contact_form ol li { float: left; display: block; width: 220px } #contact_form label { font-size: 11px; float: left; width: 220px; color: #fff; padding: 5px 0px 2px 0px } #contact_form label.error { height: 9px; width: 20px; background: url(../imgs/cancel.gif) no-repeat left } #contact_form input.text-input { background: url(../imgs/input_bg.gif) no-repeat; border: none; float: left; padding: 4px; color: #000; width: 160px } #contact_form input.button { padding: 3px; border: none; float: left; font-size: 9px; margin-top: 8px; color: #000 } #contact_form input.button:hover { cursor: pointer } #message { float: left; width: 230px; margin-top: 10px; text-align: center } #message h2 { font-size: 14px; font-weight: bold; color: #fff } #message p { color: #fff; font-size: 12px; margin: 6px 0px; padding-bottom: 10px } #checkmark { } #contact-wrap { background: #F6F8F9; border: 1px solid #6198A0; float: left; margin: 20px 0px; height: 270px; width: 580px } #form-right { border-left: 1px solid #6198A0; float: left; margin-top: 20px; padding: 10px 0px 0px 30px; height: 220px; width: 180px } #form-right p { font-size: 12px; color: #304a46; line-height: 1.6 } #form-right a img { padding-top: 10px } #contact_main { float: left; padding: 20px 0px; width: 330px } #contact_main form { float: left; width: 320px } #contact_main form fieldset { float: left; font-size: 12px; width: 320px } #contact_main ol { float: left; list-style: none; width: 320px } #contact_main ol li { float: left; width: 320px } #contact_main label { font-size: 12px; float: left; width: 88px; text-align: right; color: #5B7F96; font-weight: bold; padding: 8px 2px 8px 0px } #contact_main label.error { margin-top: 6px; width: 20px; background: transparent url(../imgs/cancel.gif) no-repeat left } #contact_main input.text-input, textarea { border: 1px solid #6198A0; float: left; margin: 4px; padding: 4px; color: #000; width: 190px } #contact_main input.button { padding: 3px 6px; background: #5B7F96; border: 1px solid #5B7F96; float: left; margin: 8px 0px 0px 94px; color: #fff } #contact_main input.button:hover { cursor: pointer } #main-message { float: left; width: 320px; margin-top: 40px; text-align: center } #main-message h2 { font-size: 16px; color: #5B7F96 } #main-message p { color: #5B7F96; font-size: 14px; font-weight: bold; margin: 6px 0px; padding-bottom: 10px } #checkmark { }