/*----------------------------------------------------------------------------- Screen Style Sheet Author: Dinkum Web Solutions Email: info@dinkumweb.com.au Project: Coffs Harbour Chamber of Commerce http://www.coffschamber.com.au Version: 1.0 -----------------------------------------------------------------------------*/ /* ---IMPORTANT -------------------------------------------------------------- This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere. ---------------------------------------------------------------------------*/ /* =CSS reset ------------------------------- -----------------------------------------------------------------------------*/ * { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin: 0; } li, dd { margin-left: 0; } fieldset { padding: .5em; } select option { padding: 0 5px; } ul, li { list-style: none; } .hide { display: none; } .left { float: left; } .right { float: right; } .clear { clear: both; width: 0; height: 0; font-size: 0; overflow: hidden; } a img, img { border: none; } .center { text-align: center; } /* =General (usage throughout the entire site) ------------------------------- -----------------------------------------------------------------------------*/ body { background: #fff url(../images/image-bgBody.jpg) repeat-x; } /* =Typography (Global) ------------------------------------------------------ -----------------------------------------------------------------------------*/ body { font: 62.5%/1.6em Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; } p { font: 1.3em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #0b4c84; margin: 0; padding: 10px 10px 0 10px; } p.textSunny { font: 1.3em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #0b4c84; margin: 0; padding: 10px 10px 0 10px; text-align: center; } p.small { font: 1.1em/1.2em Verdana, Arial, Helvetica, sans-serif; color: #0b4c84; margin: 0; padding: 10px 10px 0 10px; } #panel_Sponsor p { font: bold 1.2em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #fff; margin: 0; } #footer_menu p { font: 1.1em/1.5em Verdana, Arial, Helvetica, sans-serif; color: #fff; margin: 0; padding: 6px 0 0 0; text-align: center; } #copyright_left p { font: 1.1em/1.5em Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0; padding: 0 0 0 20px; } p.listMembers { font: 1.2em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #0b4c84; margin: 0; padding: 5px 0 0 10px; } ul.plainList li { font: 1.3em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #0b4c84; margin: 10px 50px 0 50px; padding: 0; list-style: disc; } h1 { font: bold 1.6em/1.6em Verdana, Arial, Helvetica, sans-serif; color: #0b4c84; margin: 0; padding: 20px 10px 0 10px; text-align: left; } #leftColumn_panel h2 { font: bold 1.6em/1.5em Verdana, Arial, Helvetica, sans-serif; color: #fff; margin: 0; padding: 5px 8px 2px 0; text-align: right; } #rightColumn_PageTitle h2, #rightColumn_PageTitle2 h2 { font: bold 1.6em/1.5em Verdana, Arial, Helvetica, sans-serif; color: #fff; margin: 0; padding: 3px 8px 2px 0; text-align: right; } h3 { font: bold 1.5em/1.5em Verdana, Arial, Helvetica, sans-serif; color: #0b4c84; margin: 0; padding: 10px 10px 0 10px; } h4 { font: bold 1.4em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #0b4c84; margin: 0; padding: 10px 10px 0 10px; } h5 { font: bold 1.3em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #ffffff; margin: 0; padding: 0; } .listAccessibility li { font: 1.1em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #0b4c84; margin: 5px 50px 0 50px; padding: 0; list-style: disc; } .listNumber li { font: 1.3em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #0b4c84; margin: 0 50px 0 50px; padding: 15px 0 0 0; list-style: decimal; } /* =Layout (Global) ---------------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_container { position: relative; width: 721px; margin: 10px auto; padding: 0; text-align: left; background: url(../images/image-bgContainer.jpg) repeat-y; } #wrapper_leftColumn { position: relative; width: 200px; margin: 0; padding: 0; text-align: left; float: left; background: url(../images/image-bgLeft.gif) top left no-repeat; } #leftColumn_logo { position: relative; width: 197px; height: 143px; margin: 2px 0 0 2px; padding: 0; text-align: left; background: url(../images/image-bgLogo.gif) top left no-repeat; } #leftColumn_logoHomeLink { position: relative; width: 197px; height: 143px; margin: 0; padding: 0; text-align: left; display: block; } #leftColumn_panel { position: relative; width: 197px; margin: 1px 0 0 2px; padding: 0; text-align: left; background: #ffbe47 url(../images/image-bgPanel.jpg) top left no-repeat; } #leftColumn_panel div.hr { height: 1px; background: #ffd05c; } #leftColumn_panel div.hr hr { display: none; } #panel_Sponsor { text-align: center; } #panel_Sponsor img { margin: 20px auto 10px auto; } img.imageLogoSunny { position: relative; margin: 5px auto 10px 25px; } #wrapper_rightColumn { position: relative; width: 521px; margin: 0; padding: 0; text-align: left; float: left; } #rightColumn_LargeImage { position: relative; width: 519px; height: 267px; margin: 2px 2px 0 0; padding: 0; text-align: left; } #rightColumn_SmallImage { position: relative; width: 519px; height: 143px; margin: 2px 2px 0 0; padding: 0; text-align: left; } #rightColumn_PageTitle { position: relative; width: 519px; height: 3em; margin: 1px 2px 0 0; padding: 0; text-align: left; background: #008db1; } #rightColumn_PageTitle2 { position: relative; width: 519px; height: 3em; margin: 2px 2px 0 0; padding: 0; text-align: left; background: #008db1; } #rightColumn_Content { position: relative; width: 519px; margin: 1px 2px 0 0; padding: 0; text-align: left; } #rightColumn_Content div.hr { width: 95%; height: 1px; margin: 10px auto 0 auto; background: #0b4c84; } #rightColumn_Content div.hr hr { display: none; } .sunnysAward { width: 490px; height: 150px; margin: 0 0 0 10px; text-align: center; border-bottom: 1px dashed #0b4c84; } .sunnysAward img { float: left; margin: 0 10px 0 0; } img.sunnysPhoto { padding: 2px; border: 1px solid #0b4c84; } .rightColumn_PanelMembersLeft { position: relative; width: 275px; height: 400px; margin: 0 0 0 2px; padding: 0; text-align: left; float: left; } .rightColumn_PanelMembersRight { position: relative; width: 235px; height: 400px; margin: 0 0 0 0; padding: 0; text-align: left; float: left; } .rightColumn_PanelMembersLeft img, .rightColumn_PanelMembersRight img { margin: 0 5px 0 0; padding: 4px 0 0 0; float: left; } .rightColumn_PanelNewMembers { position: relative; width: 240px; height: 75px; margin: 20px 0 5px 10px; padding: 0; text-align: center; float: left; } .imgPanel { position: relative; width: 150px; margin: 20px 20px 20px 20px; padding: 0; text-align: center; float: right; } .rightColumn_PanelNewMembers img, .imgPanel img { position: relative; padding: 2px; border: 1px #0b4c84 solid; } #wrapper_footer { position: relative; width: 719px; height: 51px; margin: 1px 0 0 2px; padding: 0; text-align: left; background: #0b4c84; border-top: 1px solid #fff; } #footer_menu { position: relative; width: 719px; height: 51px; margin: 0; padding: 0; text-align: left; } /* =Hidden (Global) ---------------------------------------------------------- -----------------------------------------------------------------------------*/ #leftColumn_logo h1 { display: none; } /* =Main Navigation (Global) ------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_menu { position: relative; width: 197px; margin: 1px 0 0 2px; padding: 0; list-style: none; font-size: 80%; text-align: left; background: #000; } #wrapper_menu ul#menu { position: relative; width: 197px; margin: 0; padding: 0; list-style: none; } #wrapper_menu ul#menu li { position: relative; height: 29px; padding: 0; } ul#wrapper_menu li, ul#menu a { /*\*/overflow: hidden;/**/ height: 29px; display: block; } #wrapper_menu ul#menu li a { text-indent: -9999px; text-decoration: none; } #menuAboutUs a { left: 0; top: 0; width: 196px; background: url(../images/menu/menu-aboutus.gif) top left no-repeat; } #menuSunnys a { left: 0; top: 29px; width: 196px; background: url(../images/menu/menu-sunnys.gif) top left no-repeat; } #menuMembers a { left: 0; top: 58px; width: 196px; background: url(../images/menu/menu-members.gif) top left no-repeat; } #menuYourSay a { left: 0; top: 87px; width: 196px; background: url(../images/menu/menu-yoursay.gif) top left no-repeat; } #menuEvents a { left: 0; top: 116px; width: 196px; background: url(../images/menu/menu-events.gif) top left no-repeat; } #menuNewsletter a { left: 0; top: 145px; width: 196px; background: url(../images/menu/menu-newsletter.gif) top left no-repeat; } #menuJoin a { left: 0; top: 174px; width: 196px; background: url(../images/menu/menu-join.gif) top left no-repeat; } #menuLinks a { left: 0; top: 203px; width: 196px; background: url(../images/menu/menu-links.gif) top left no-repeat; } #menuContact a { left: 0; top: 232px; width: 196px; background: url(../images/menu/menu-contact.gif) top left no-repeat; } #menuHome a { left: 0; top: 261px; width: 196px; background: url(../images/menu/menu-home.gif) top left no-repeat; } #menuAboutUs a:hover { background: url(../images/menu/menu-aboutus.gif) 0 -29px no-repeat; } #menuSunnys a:hover { background: url(../images/menu/menu-sunnys.gif) 0 -29px no-repeat; } #menuMembers a:hover { background: url(../images/menu/menu-members.gif) 0 -29px no-repeat; } #menuYourSay a:hover { background: url(../images/menu/menu-yoursay.gif) 0 -29px no-repeat; } #menuEvents a:hover { background: url(../images/menu/menu-events.gif) 0 -29px no-repeat; } #menuNewsletter a:hover { background: url(../images/menu/menu-newsletter.gif) 0 -29px no-repeat; } #menuJoin a:hover { background: url(../images/menu/menu-join.gif) 0 -29px no-repeat; } #menuLinks a:hover { background: url(../images/menu/menu-links.gif) 0 -29px no-repeat; } #menuContact a:hover { background: url(../images/menu/menu-contact.gif) 0 -29px no-repeat; } #menuHome a:hover { background: url(../images/menu/menu-home.gif) 0 -29px no-repeat; } /* =Sub Navigation ----------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Breadcrumbs -------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Anchors & =Links --------------------------------------------------------- -----------------------------------------------------------------------------*/ a.noLink:link { text-decoration: none; } a.noLink:visited { text-decoration: none; } a.noLink:hover { background: #0b4c84; text-decoration: none; } a.noLink:active { text-decoration: none; } #leftColumn_panel a:link { color: #0b4c84; text-decoration: underline; } #leftColumn_panel a:visited { color: #0b4c84; text-decoration: underline; } #leftColumn_panel a:hover { background: #ff0000; color: #ffffff; text-decoration: none; } #leftColumn_panel a:active { color: #0b4c84; text-decoration: underline; } #rightColumn_Content a:link { color: #008cb5; text-decoration: underline; } #rightColumn_Content a:visited { color: #858585; text-decoration: underline; } #rightColumn_Content a:hover { background: #ff0000; color: #ffffff; text-decoration: none; } #rightColumn_Content a:active { color: #008cb5; text-decoration: underline; } #rightColumn_Content a.linkExternal:link { color: #008cb5; text-decoration: underline; background: url(../images/image-linkExternal.gif) no-repeat right center; padding-right: 12px; } #rightColumn_Content a.linkExternal:visited { color: #858585; text-decoration: underline; background: url(../images/image-linkExternal.gif) no-repeat right center; padding-right: 12px; } #rightColumn_Content a.linkExternal:hover { color: #ffffff; text-decoration: none; background: #ff0000 url(../images/image-linkExternalOn.gif) no-repeat right center; } #rightColumn_Content a.linkExternal:active { color: #008cb5; text-decoration: underline; } #footer_menu a:link { color: #ffffff; text-decoration: underline; } #footer_menu a:visited { color: #ffffff; text-decoration: underline; } #footer_menu a:hover { color: #ff0000; text-decoration: underline; } #footer_menu a:active { color: #ffffff; text-decoration: underline; } #copyright_left a:link { color: #008cb5; text-decoration: underline; } #copyright_left a:visited { color: #008cb5; text-decoration: underline; } #copyright_left a:hover { color: #ff0000; text-decoration: underline; } #copyright_left a:active { color: #008cb5; text-decoration: underline; } /* =Footer (Global) ---------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Search ------------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Forms -------------------------------------------------------------------- -----------------------------------------------------------------------------*/ label { width: 90px; height: 1.3em; margin: 10px 20px 0 40px; font: bold 1.3em/1.4em Verdana, Arial, Helvetica, sans-serif; text-align: right; color: #0b4c84; float: left; } label.committee { width: 180px; height: 1.3em; margin: 10px 20px 0 20px; font: bold 1.3em/1.4em Verdana, Arial, Helvetica, sans-serif; text-align: right; color: #0b4c84; float: left; } form { font: 1.3em/1.6em Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 20px 0 0 0; } form div { width: 295px; margin: 0 auto 0 auto; border: 1px solid #990000; background: #d70000; color: #fff; padding: 4px; padding-left: 6px; } .imageForm { margin: 0 20px 0 0; } form.contactForm label { width: 95%; margin: 10px 10px 0 10px; font-size: 105%; text-align: left; } textarea { width: 90%; margin: 5px 10px 0 15px; padding: 10px 5px 2px 5px; font: bold 105%/1.1em Verdana, Arial, Helvetica, sans-serif; border: 1px solid #0b4c84; } input { width: 90%; height: 1.3em; margin: 5px 10px 0 15px; padding: 5px 5px 2px 5px; font: bold 105%/1.1em Verdana, Arial, Helvetica, sans-serif; border: 1px solid #0b4c84; } input.small { width: 15%; height: 1.3em; margin: 5px 20px 0 40px; padding: 5px 5px 2px 5px; font: bold 105%/1.1em Verdana, Arial, Helvetica, sans-serif; } input.button { width: 213px; height: 50px; margin: 20px 20px 20px 280px; font: bold 105%/1.1em Verdana, Arial, Helvetica, sans-serif; border: none; } /* =Tables ------------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Homepage Specfic --------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Copyright ---------------------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_copyright { position: relative; width: 721px; height: 100px; margin: 0; padding: 0; background: #fff; } #copyright_left { position: relative; width: 541px; height: 50px; margin: 0; padding: 20px 0 0 0; float: left; } #copyright_right { position: relative; width: 180px; height: 16px; margin: 0; padding: 20px 0 0 0; float: left; } .validXHTML { width: 40px; height: 16px; background: url(../images/image-iconXHTML.gif) top left no-repeat; float: left; display: block; } .validXHTML:hover { background-position: 0 -16px; } .validXHTML span { display: none; } .validCSS2 { width: 40px; height: 16px; background: url(../images/image-iconCSS2.gif) top left no-repeat; float: left; display: block; } .validCSS2:hover { background-position: 0 -16px; } .validCSS2 span { display: none; } .validWAI { width: 40px; height: 16px; background: url(../images/image-iconWAI.gif) top left no-repeat; float: left; display: block; } .validWAI:hover { background-position: 0 -16px; } .validWAI span { display: none; } .siteDWS { width: 40px; height: 16px; background: url(../images/image-iconDWS.gif) top left no-repeat; float: left; display: block; } .siteDWS:hover { background-position: 0 -16px; } .siteDWS span { display: none; } /* end of css */