/*----------------------------------------------------------------------------- Screen Style Sheet Author: Dinkum Web Solutions Email: info@dinkumweb.com.au Project: Dinkum Web Solutions http://www.dinkumweb.com.au Version: 5.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. ---------------------------------------------------------------------------*/ /* =General (usage throughout the entire site) ------------------------------- -----------------------------------------------------------------------------*/ * { margin: 0; padding: 0; } /* Remove padding and margin for entire document */ .clear { clear: both; } /* Class for clearing floats both left and right */ img { border: 0; } /* Remove border around linked images throughout entire document */ ul, li { list-style: none; } /* Removes styling from all list items */ body { margin: 0; padding: 0; background: #ffc54b url(../images/image-bgBody.jpg) top left no-repeat; } .floatLeft { float: left; } .hidden { visibility: hidden; } /* =Typography (Global) ------------------------------------------------------ -----------------------------------------------------------------------------*/ body { font: 62.5%/1.6 Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; } #rightColumn_Content p { font: 1.35em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #000000; margin: 0 10px 0 10px; padding: 10px 0 0 0; } #rightColumn_Content p.small { font: italic 1.2em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #000000; margin: 0 40px 0 35px; padding: 10px 0 0 0; } #clientSay_Text p { width: 135px; font: italic 1.3em/1.2em Verdana, Arial, Helvetica, sans-serif; color: #000000; margin: 5px 20px 0 25px; padding: 0; text-align: center; } #clientSay_Text p.clientName { width: 135px; font: bold 1.2em/1.2em Verdana, Arial, Helvetica, sans-serif; color: #000000; margin: 10px 20px 0 25px; padding: 0; text-align: right; } #wrapper_copyright p { font: 1.1em/1.2em Verdana, Arial, Helvetica, sans-serif; color: #000000; margin: 5px 0 0 0; padding: 0; } h1 { font: bold 1.6em/1.6em Verdana, Arial, Helvetica, sans-serif; color: #0821aa; margin: 0; padding: 15px 0 10px 0; text-align: left; } h2 { width: 365px; height: 32px; margin: 10px 0 0 0; padding: 0; text-align: left; } h2 span { display: none; } h2.headingWelcome { background: url(../images/headings/image-headingWelcome.gif) no-repeat; } h2.headingSpotlight { background: url(../images/headings/image-headingSpotlight.gif) no-repeat; } h2.headingAbout { background: url(../images/headings/image-headingAbout.gif) no-repeat; } h2.headingWhat { background: url(../images/headings/image-headingWhat.gif) no-repeat; } h2.headingWork { background: url(../images/headings/image-headingWork.gif) no-repeat; } h2.headingTalk { background: url(../images/headings/image-headingTalk.gif) no-repeat; } h2.headingAccess { background: url(../images/headings/image-headingAccess.gif) no-repeat; } h2.headingSitemap { background: url(../images/headings/image-headingSitemap.gif) no-repeat; } h2.headingStandards { background: url(../images/headings/image-headingStandards.gif) no-repeat; } h2.headingEnquiry { background: url(../images/headings/image-headingEnquiry.gif) no-repeat; } h2.headingFestive { background: url(../images/headings/image-headingFestive.gif) no-repeat; } h3 { width: 365px; height: 22px; margin: 5px 0 0 0; padding: 0; text-align: left; } h3 span { display: none; } h3.headingOther { background: url(../images/headings/image-headingOther.gif) no-repeat; } h4 { font: bold 1.5em/1.5em Verdana, Arial, Helvetica, sans-serif; color: #e66f3c; margin: 0 10px 0 5px; padding: 10px 0 0 0; } #listBullet li { font: 1.1em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #000000; margin: 5px 50px 0 50px; padding: 0; list-style: disc; } #listNumber li { font: 1.2em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #000000; margin: 15px 50px 0 50px; padding: 0; list-style: decimal; } /* =Layout (Global) ---------------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_container { position: relative; width: 1020px; margin: 0; padding: 0; text-align: left; } #wrapper_leftColumn { position: relative; width: 370px; margin: 0; padding: 0; text-align: left; float: left; } #leftColumn_logo { position: relative; width: 296px; height: 290px; margin: 15px 0 0 46px; padding: 0; text-align: left; float: left; display: inline; background: url(../images/image-logo.gif) top left no-repeat; } #wrapper_clientSay { position: relative; width: 239px; margin: 0; padding: 0; text-align: left; float: left; } #clientSay_Top { position: relative; width: 239px; height: 69px; margin: 0; padding: 0; text-align: left; float: right; background: url(../images/image-topClientSay.gif) no-repeat top right; } #clientSay_Text { position: relative; width: 180px; margin: 0; padding: 0; text-align: left; float: right; background: url(../images/image-bgClientSay.gif) no-repeat top right; } #clientSay_Text .quoteBoxOpen { width: 135px; height: 18px; margin: 5px 20px 0 25px; padding: 0; background: url(../images/image-quoteOpen.gif) no-repeat top left; } #clientSay_Text .quoteBoxClose { width: 135px; height: 18px; margin: 5px 20px 0 25px; padding: 0; background: url(../images/image-quoteClose.gif) no-repeat top right; } #clientSay_Base { position: relative; width: 180px; height: 36px; margin: 0; padding: 0; text-align: left; float: right; background: url(../images/image-baseClientSay.gif) no-repeat top right; } #wrapper_rightColumn { position: relative; margin: 0; padding: 0; text-align: left; float: left; } #rightColumn_Top { position: relative; width: 625px; height: 86px; margin: 0; padding: 0; text-align: left; background: url(../images/image-topContent.gif) no-repeat; } #rightColumn_Content { position: relative; width: 625px; margin: 0; padding: 0; text-align: left; background: url(../images/image-bgContent.gif) repeat-y; } #contentText { margin: 20px 0 0 0; padding: 10px 30px 10px 30px; } .list-Services { position: relative; width: 470px; margin: 0 40px 0 35px; padding: 0; list-style-type: none; } .list-Services li { font: 1.2em/1.25em Verdana, Arial, Helvetica, sans-serif; color: #000000; margin: 3px 0; padding: 3px 0; } .list-Services li span { font-size: 150%; display: block; color: #e66f3c; margin: 0 0 5px -2px; padding: 0 20px 0 0; } .list-ItemBordered { border-bottom: 1px solid #e2e2e2; } .spotlightImage, .portfolioImage { margin: 10px 0 0 7px; padding: 3px; border: 1px solid #afa9aa; } #rightColumn_Content div.hr { width: 100%; height: 10px; margin: 10px auto 0 auto; border-top: 1px dashed #caced1; clear: both; } #rightColumn_Content div.hr hr { display: none; } #portfolio_Project { margin: 5px 0 0 0; } .list-PortfolioLarge { width: 210px; margin: 5px 0 0 0; float: left; } .list-PortfolioSmall { width: 140px; margin: 5px 0 0 0; float: left; } .list-PortfolioLarge li, .list-PortfolioSmall li { font: 1.1em/1.2em Verdana, Arial, Helvetica, sans-serif; color: #000000; margin: 2px 0 0 10px; padding: 0; list-style-type: none; } #rightColumn_Base { position: relative; width: 625px; height: 55px; margin: 0; padding: 0; text-align: left; background: url(../images/image-baseContent.gif) repeat-y; } /* =Hidden (Global) ---------------------------------------------------------- -----------------------------------------------------------------------------*/ #leftColumn_logo span, #rightColumn_Header span { display: none; } /* =Main Navigation (Global) ------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_menu { position: relative; width: 600px; height: 41px; margin: 0; padding: 0; list-style: none; font-size: 80%; text-align: left; background: url(../images/image-bgMenu.gif); } #wrapper_menu ul#menu { position: relative; width: 600px; margin: 0; padding: 0; list-style: none; } #wrapper_menu ul#menu li { position: relative; height: 41px; top: 0; padding: 0; float: left; } ul#wrapper_menu li, ul#menu a { /*\*/overflow: hidden;/**/ height: 41px; display: block; } #wrapper_menu ul#menu li a { text-indent: -9999px; text-decoration: none; } #menuFront { left: 0; top: 0; width: 24px; } .menuDot { width: 29px; background: url(../images/menu/menu-dot.gif) top left no-repeat; } #menuHome a { left: 24px; top: 0; width: 69px; background: url(../images/menu/menu-home.gif) top left no-repeat; } #menuAbout a { left: 117px; top: 0; width: 69px; background: url(../images/menu/menu-about.gif) top left no-repeat; } #menuServices a { left: 210px; top: 0; width: 103px; background: url(../images/menu/menu-services.gif) top left no-repeat; } #menuPortfolio a { left: 337px; top: 0; width: 104px; background: url(../images/menu/menu-portfolio.gif) top left no-repeat; } #menuContact a { left: 465px; top: 0; width: 95px; background: url(../images/menu/menu-contact.gif) top left no-repeat; } #menuHome a:hover { background: url(../images/menu/menu-home.gif) 0 -41px no-repeat; } #menuAbout a:hover { background: url(../images/menu/menu-about.gif) 0 -41px no-repeat; } #menuServices a:hover { background: url(../images/menu/menu-services.gif) 0 -41px no-repeat; } #menuPortfolio a:hover { background: url(../images/menu/menu-portfolio.gif) 0 -41px no-repeat; } #menuContact a:hover { background: url(../images/menu/menu-contact.gif) 0 -41px no-repeat; } /* =Sub Navigation ----------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Breadcrumbs -------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Anchors & =Links --------------------------------------------------------- -----------------------------------------------------------------------------*/ #contentText a:link { color: #e66f3c; text-decoration: underline; } #contentText a:visited { color: #9c9c9c; } #contentText a:visited:after { content: "\00A0\221A"; font-size: 100%; } #contentText a:hover { background: #e66f3c; color: #ffffff; text-decoration: none; } #contentText a:active { color: #e66f3c; text-decoration: underline; } #contentText a.linkExternal:link { color: #e66f3c; text-decoration: underline; background: url(../images/image-linkExternal.gif) no-repeat right center; padding-right: 12px; } #contentText a.linkExternal:visited { color: #9c9c9c; } #contentText a.linkExternal:visited:after { content: "\00A0\221A"; font-size: 100%; } #contentText a.linkExternal:hover { background: #e66f3c url(../images/image-linkExternalOn.gif) no-repeat right center; padding-right: 12px; color: #ffffff; text-decoration: none; } #contentText a.linkExternal:active { color: #e66f3c; text-decoration: underline; } #portfolio_OtherProjects li a:link { color: #e66f3c; text-decoration: underline; } #portfolio_OtherProjects li a:visited { color: #9c9c9c; } #portfolio_OtherProjects a:visited:after { content: ""; font-size: 100%; } #portfolio_OtherProjects li a:hover { background: #e66f3c; color: #ffffff; text-decoration: none; } #portfolio_OtherProjects li a:active { color: #e66f3c; text-decoration: underline; } #wrapper_copyright a:link { color: #b90b07; text-decoration: underline; } #wrapper_copyright a:visited { color: #b90b07; text-decoration: underline; } #wrapper_copyright a:hover { color: #b90b07; text-decoration: underline; } #wrapper_copyright a:active { color: #b90b07; text-decoration: underline; } #rightColumn_Content a.nolink:link { color: #ffffff; padding: 0; text-decoration: none; background: none;} #rightColumn_Content a.nolink:visited { color: #ffffff; padding: 0; text-decoration: none; background: none; } #rightColumn_Content a.nolink:hover { color: #ffffff; padding: 0; text-decoration: none; background: none; } #rightColumn_Content a.nolink:active { color: #ffffff; padding: 0; text-decoration: none; background: none;} /* =Footer (Global) ---------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Search ------------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Forms -------------------------------------------------------------------- -----------------------------------------------------------------------------*/ label { width: 70px; margin: 0 20px 0 40px; font: bold 1.2em/1.1em Verdana, Arial, Helvetica, sans-serif; text-align: right; color: #000; float: left; } label.portfolio { width: 50px; height: 3em; margin: 10px 20px 0 10px; font: bold 1.4em/1.4 Verdana, Arial, Helvetica, sans-serif; text-align: left; color: #000; float: left; } form { font: 1.3em/1.6em Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 20px 0 0 0; } form div { width:295px; border: 1px solid #990000; background: #d70000; color:#fff; padding: 4px; padding-left: 6px; } .imageForm { margin: 0 20px 0 0; } #contactForm label { width:95%; margin: 0 20px 0 20px; font-weight: bold; text-align: left; } textarea { width: 80%; margin: 5px 20px 0 40px; padding: 10px 5px 2px 5px; font: bold 110%/1.1em Verdana, Arial, Helvetica, sans-serif; } input { width: 80%; height: 1.3em; margin: 5px 20px 0 40px; padding: 5px 5px 2px 5px; font: bold 110%/1.1em Verdana, Arial, Helvetica, sans-serif; } input.small { width: 15%; height: 1.3em; margin: 5px 20px 0 40px; padding: 5px 5px 2px 5px; font: bold 110%/1.1em Verdana, Arial, Helvetica, sans-serif; } input.button { width: 213px; height: 50px; margin: 20px 20px 20px 35px; font: bold 110%/1.1em Verdana, Arial, Helvetica, sans-serif; } /* =Tables ------------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Homepage Specfic --------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Copyright ---------------------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_copyright { position: relative; width: 625px; height: 100px; margin: 0 0 0 0; padding: 0 0 0 20px; } #copyright_left { position: relative; width: 485px; margin: 0; padding: 20px 0 0 0; } #copyright_right { position: relative; width: 140px; height: 16px; margin: 0; padding: 20px 0 0 0; } .validXHTML {width: 40px; height: 16px; margin: 0 0 0 0; background: url(../images/image-iconXHTML.gif) top left no-repeat; float: left; display: inline; } .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; } .siteRSS {width: 40px; height: 16px; background: url(../images/image-iconRSS.gif) top left no-repeat; float: left; display: block; } .siteRSS:hover {background-position: 0 -16px;} .siteRSS span { display: none; } /* end of css */