/*----------------------------------------------------------------------------- Screen Style Sheet Author: Dinkum Web Solutions Email: info@dinkumweb.com.au Project: Science People http://www.sciencepeople.com.au Version: 2.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 */ body { margin: 0; padding: 0; background: #ffffed; } img { border: 0; } /* Remove border around linked images throughout entire document */ ul, li { list-style: none; } /* Removes styling from all list items */ .clear { clear: both; } /* Class for clearing floats both left and right */ hr { width: 490px; height: 1px; margin: 0 0 0 6px; border: none 0; border-top: 1px dashed #cccccc; text-align: left; } hr.headlineHR { width: 450px; height: 1px; margin: 0 0 0 6px; border: none 0; border-top: 1px dashed #cccccc; text-align: left; clear: both; } .indent { padding: 10px 20px 5px 40px; } .center { text-align: center; } .floatRight { float: right; } .floatLeft { float: left; } /* =Typography (Global) ------------------------------------------------------ -----------------------------------------------------------------------------*/ body { font: 62.5%/1.6 Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; } p { font: 1.3em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; margin: 0; padding: 10px 15px 5px 15px; } #wrapper_leftColumn ul li { font: 1.3em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; margin: 0 0 0 40px; padding: 2px 40px 5px 10px; list-style: disc; } #wrapper_leftColumn ol li { font: 1.3em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; margin: 0 0 0 40px; padding: 2px 40px 5px 10px; list-style: decimal; } #rightColumn_Bits ol li { font: 1.3em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; margin: 0 0 0 40px; padding: 2px 2px 5px 2px; list-style: decimal; } .peopleContent p { font: 1.2em/1.2em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; margin: 0; padding: 5px 0 5px 10px; } .announcement p { font: bold 1.3em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #ffffff; margin: 0; padding: 10px 15px 5px 15px; } p.xmas { font: bold 1.8em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #ff0000; margin: 0; padding: 0; text-align: center; } .contact p { font: 1.3em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; margin: 0; padding: 5px 15px 0 15px; } .quoteLeft { font: 1.3em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; margin: 0 0 0 10px; padding: 10px 40px 5px 40px; background: url(../images/image-quoteLeft.gif) top left no-repeat; } .quoteRight { font: 1.3em/1.3em Verdana, Arial, Helvetica, sans-serif; text-align: right; color: #002f5c; margin: 0 10px 0 10px; padding: 10px 60px 5px 10px; background: url(../images/image-quoteright.gif) top right no-repeat; } .headline p, .more p { font: 1.3em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; margin: 0; padding: 0; } #copyright_menu p, #wrapper_copyright p { font: 1.1em/2.0em Verdana, Arial, Helvetica, sans-serif; color: #000000; margin: 0; } .italic { font-style: italic; } .bold { font-weight: bold; } .red { color: #ff0000; } h1 { font: bold 1.6em/1.6em Verdana, Arial, Helvetica, sans-serif; color: #000000; margin: 0; padding: 15px 0 10px 0; text-align: center; } h2 { font: bold 1.6em/1.7em Verdana, Arial, Helvetica, sans-serif; color: #ffffff; margin: 0 0 0 12px; padding: 0; text-align: left; } h3 { font: bold 1.5em/1.5em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; margin: 0 10px 0 10px; padding: 10px 0 0 0; } #rightColumn_Bits h3 { font: bold 1.5em/1.5em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; margin: 0 10px 0 10px; padding: 0; text-align: center; } /* =Layout (Global) ---------------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_container { position: relative; width: 798px; margin: 0 auto; padding: 0; text-align: left; background: url(../images/image-bgContainer.gif) repeat-y; } #wrapper_leftColumn { position: relative; width: 505px; margin: 8px 0 4px 33px; padding: 0; text-align: left; float: left; display: inline; } #leftColumn_header { position: relative; width: 505px; height: 208px; margin: 0; padding: 0; text-align: left; } #header_words { position: relative; width: 345px; height: 208px; margin: 0; padding: 0; text-align: left; background: url(../images/image-bgHeader.gif) no-repeat; float: left; } #header_flash { position: relative; width: 160px; height: 208px; margin: 0; padding: 0; text-align: left; float: left; } #leftColumn_content { position: relative; width: 505px; margin: 0; padding: 0; text-align: left; background: #e4edf6; clear: left; } #leftColumn_content img { position: relative; margin: 0 0 -4px 0; padding: 0; } .subheader { position: relative; width: 505px; height: 33px; margin: 4px 0 0 0; padding: 0; text-align: left; background: url(../images/image-bgH2.gif) repeat-x; } .submenu { position: relative; width: 505px; height: 33px; margin: 0; padding: 0; text-align: left; background: #ffffff url(../images/image-bgSubMenu.gif) repeat-x; } .peopleContainer { position: relative; width: 485px; margin: 10px 10px 10px 10px; padding: 0; text-align: left; background: #e4edf6; } .peoplePicture { position: relative; width: 100px; margin: 0; padding: 0; text-align: left; float: left; } .peoplePicture img { position: relative; width: 94px; margin: 0; padding: 2px; text-align: left; background: #ffffff; border: 1px #002f5c solid; } img.ratXmas { position: relative; float: right; } .peopleContent { position: relative; width: 385px; margin: 0; padding: 0; text-align: left; float: left; } .announcement { position: relative; margin: 0 15px 10px 15px; padding: 0; text-align: left; background: #ff4040; } #splitPanel1, #splitPanel2 { position: relative; width: 470px; margin: 10px 10px 0 15px; padding: 0; text-align: left; border: 1px #002f5c dashed; } .headline { position: relative; width: 350px; margin: 0 0 0 5px; padding: 2px; float: left; } .more { position: relative; width: 100px; margin: 0; padding: 2px; float: left; text-align: center; } #wrapper_spacerColumn { position: relative; width: 5px; height: 100px; margin: 8px 0 0 0; padding: 0; text-align: left; float: left; } #wrapper_rightColumn { position: relative; width: 222px; min-height: 600px; margin: 8px 0 0 0; padding: 0; text-align: left; float: left; } #rightColumn_Bits { position: relative; width: 220px; margin: 20px 0 0 0; padding: 0; text-align: left; } #rightColumn_Bits img.icon { margin: -10px 0 0 10px; padding: 0; } #wrapper_footer { position: relative; width: 732px; height: 28px; margin: 8px 0 0 33px; padding: 0; text-align: left; clear: both; background: url(../images/image-bgH2.gif) repeat-x; } #footer_logo { position: absolute; width: 200px; height: 120px; margin: -130px 0 0 522px; padding: 0; background: url(../images/image-bgLogo.gif) top left no-repeat; } /* =Hidden (Global) ---------------------------------------------------------- -----------------------------------------------------------------------------*/ #header_words span { display: none; } /* =Main Navigation (Global) ------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_menu { position: relative; width: 220px; height: 240px; margin: 0; padding: 0; list-style: none; font-size: 80%; text-align: left; background: #ffffff; } #wrapper_menu ul#menu { position: relative; width: 220px; margin: 0; padding: 0; list-style: none; } #wrapper_menu ul#menu li { position: relative; height: 30px; top: 0; padding: 0; } ul#wrapper_menu li, ul#menu a { /*\*/overflow: hidden;/**/ height: 30px; display: block; } #wrapper_menu ul#menu li a { text-indent: -9999px; text-decoration: none; } #menuHome a {left: 0px; top: 0px; width: 220px; background: url(../images/menu/menu-home.gif) top left no-repeat;} #menuAboutUs a {left: 0px; top: 30px; width: 220px; background: url(../images/menu/menu-aboutus.gif) top left no-repeat;} #menuCurrentJobs a {left: 0px; top: 60px; width: 220px; background: url(../images/menu/menu-current.gif) top left no-repeat;} #menuRegister a {left: 0px; top: 90px; width: 220px; background: url(../images/menu/menu-register.gif) top left no-repeat;} #menuJobSeekers a {left: 0px; top: 120px; width: 220px; background: url(../images/menu/menu-seekers.gif) top left no-repeat;} #menuEmployers a {left: 0px; top: 150px; width: 220px; background: url(../images/menu/menu-employers.gif) top left no-repeat;} #menuPrivacy a {left: 0px; top: 180px; width: 220px; background: url(../images/menu/menu-privacy.gif) top left no-repeat;} #menuContactUs a {left: 0px; top: 210px; width: 220px; background: url(../images/menu/menu-contact.gif) top left no-repeat;} #menuHome a:hover {background: url(../images/menu/menu-home.gif) 0 -30px no-repeat;} #menuAboutUs a:hover {background: url(../images/menu/menu-aboutus.gif) 0 -30px no-repeat;} #menuCurrentJobs a:hover {background: url(../images/menu/menu-current.gif) 0 -30px no-repeat;} #menuRegister a:hover {background: url(../images/menu/menu-register.gif) 0 -30px no-repeat;} #menuJobSeekers a:hover {background: url(../images/menu/menu-seekers.gif) 0 -30px no-repeat;} #menuEmployers a:hover {background: url(../images/menu/menu-employers.gif) 0 -30px no-repeat;} #menuPrivacy a:hover {background: url(../images/menu/menu-privacy.gif) 0 -30px no-repeat;} #menuContactUs a:hover {background: url(../images/menu/menu-contact.gif) 0 -30px no-repeat;} /* =Sub Navigation ----------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Breadcrumbs -------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Anchors & =Links --------------------------------------------------------- -----------------------------------------------------------------------------*/ #leftColumn_content a:link, #rightColumn_Bits a:link { color: #ff0000; padding: text-decoration: underline; } #leftColumn_content a:active, #rightColumn_Bits a:active { color: #ff0000; text-decoration: underline; } #leftColumn_content a:visited, #rightColumn_Bits a:visited { color: #858585; text-decoration: underline; } #leftColumn_content a:hover, #rightColumn_Bits a:hover { color: #ffffff; text-decoration: none; background: #ff0000; } #leftColumn_content a.linkExternal:link, #rightColumn_Bits a.linkExternal:link { color: #ff0000; padding: 2px 0 2px 0; text-decoration: underline; background: url(../images/image-linkExternal.gif) no-repeat right center; padding-right: 12px; } #leftColumn_content a.linkExternal:active, #rightColumn_Bits a.linkExternal:active { color: #ff0000; text-decoration: underline; } #leftColumn_content a.linkExternal:visited, #rightColumn_Bits a.linkExternal:visited { color: #858585; text-decoration: underline; } #leftColumn_content a.linkExternal:hover, #rightColumn_Bits a.linkExternal:hover { color: #ffffff; text-decoration: none; background: #ff0000; } #wrapper_copyright a:link { color: #ff0000; text-decoration: underline; } #wrapper_copyright a:visited { color: #ff0000; text-decoration: underline; } #wrapper_copyright a:hover { color: #ff0000; text-decoration: underline; } #wrapper_copyright a:active { color: #ff0000; text-decoration: underline; } /* =Footer (Global) ---------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Search ------------------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Forms -------------------------------------------------------------------- -----------------------------------------------------------------------------*/ fieldset { width: 90%; margin: 10px 15px 5px 15px; padding: 2px; font: 80%/1.2em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; border: 1px dashed #002f5c; } legend { margin: 0 0 0 10px; padding: 0 5px 0 5px; font: bold 1.2em/1.2em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; background: #e4edf6; } input, textarea { width: 90%; margin: 0; font: bold 1.1em/1.1em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; } input.radio { width: 30px; margin: 2px 0 0 0; font: bold 1.2em/1.2em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; } input.smallInput { width: 18%; margin: 0; font: bold 1.1em/1.1em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; } span.form { width: 100px; font: 1.2em/1.2em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; } label.labelContact { width: 100px; padding: 11px 10px 0 0; font: bold 1.3em/1.1em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; text-align: right; float: left; } /* =Tables ------------------------------------------------------------------- -----------------------------------------------------------------------------*/ td.labelShort { width: 130px; padding: 0 5px 0 0; font: bold 1.3em/1.1em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; text-align: right; } td.labelLong { width: 205px; padding: 0 5px 0 0; font: bold 1.3em/1.1em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; text-align: right; } td.labelFull { width: 100%; padding: 0 5px 0 0; font: bold 1.3em/1.1em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; text-align: center; } td.labelSmall { width: 205px; padding: 0 5px 0 0; font: bold 1.3em/1.1em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; text-align: right; } td.labelThird { width: 33%; padding: 0 5px 0 0; font: 1.2em/1.2em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; text-align: left; } td.labelContact { width: 130px; padding: 0 5px 0 0; font: bold 1.3em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; text-align: right; } td { font: 1.3em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #002f5c; } /* =Homepage Specfic --------------------------------------------------------- -----------------------------------------------------------------------------*/ /* =Copyright ---------------------------------------------------------------- -----------------------------------------------------------------------------*/ #wrapper_copyright { position: relative; width: 798px; height: 50px; margin: 0 auto 0 auto; padding: 0; background: #ffffed url(../images/image-bgContainerBase.gif) top left no-repeat; clear: both; } #copyright_menu { position: relative; width: 763px; height: 30px; margin: 0; padding: 5px 0 0 35px; } #copyright_left { position: relative; width: 405px; height: 16px; margin: 0; padding: 0 0 0 35px; float: left; } #copyright_right { position: relative; width: 350px; height: 16px; margin: 0; padding: 0; float: left; text-align: right; } .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 */