Style Sheet developed for realestate.com.au - Template 2 - Fixed /**************************** generic styles ***********************************/ * { margin: 0; padding: 0; } body { background: #000; font: normal 0.7em/1.4em Arial, Verdana, san-serif; color: #625C52; } a:link, a:visited { color: #cb2817; text-decoration: none; } a:hover { color: #afaca6; text-decoration: none; } img { border: none; } hr.dot { width: 100%; height: 1px; border-top-width: 1px; border-top-style: dashed; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #CCCCCC; border-right-color: #CCCCCC; border-bottom-color: #CCCCCC; border-left-color: #CCCCCC; margin: 1em 0; noshade; } hr.solid { width: 100%; height: 1px; border-top-width: 1px; border-top-style: solid; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #CCCCCC; border-right-color: #CCCCCC; border-bottom-color: #CCCCCC; border-left-color: #CCCCCC; margin: 1em 0; noshade; } #no-class { border: none; text-align: left; } .break { clear: both; } p { margin-bottom: 10px; } /**************************** layout styles ***********************************/ #container { margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; !important; width: 780px; !important; border: 1px solid #999999; padding: 0px; background: #000 url(../img/nav_bak.gif) repeat-y} * html #container { width: 780px;} #masthead { width: 100%; height: 137px; background: #000 url("../img/banner_bg.jpg") no-repeat right; border-bottom: 1px solid #FFFFFF; } #mastheadBuying { width: 100%; height: 137px; background: #FFFFFF url(../img/banner_logo.jpg) no-repeat right; } #mastheadSelling { width: 100%; height: 137px; background: #FFFFFF url(../img/banner_residential.jpg) no-repeat right; } #mastheadCommercial { width: 100%; height: 137px; background: #FFFFFF url(../img/banner_commercial.jpg) no-repeat right; } #mastheadFinance { width: 100%; height: 137px; background: #FFFFFF url(../img/banner.gif) no-repeat right; } #mastheadAboutus { width: 100%; height: 137px; background: #FFFFFF url(../img/banner_logo.jpg) no-repeat right; } #mastheadRenting { width: 100%; height: 137px; background: #FFFFFF url(../img/banner_logo.jpg) no-repeat right; } #nav { float: left; width: 139px; !important; height: 100%; background-color: #afaca6; vertical-align: top; padding: 0px; border-right: 1px solid #999; } #content { float: right; width: 620px; min-height: 300px; over-flow:auto; text-align: left; padding: 10px; background-color: #000; vertical-align: top; color: #fff;} #content2 { float: right; width: 640px; min-height: 300px; overflow:auto; text-align: left; background-color: white; vertical-align: top; } #content3 { float: right; width: 620px; min-height: 300px; over-flow:auto; text-align: left; padding: 10px; background-color: #fff; vertical-align: top; color: #000;} * html #container #content #content3 { width: 620px; min-height: 300px; over-flow: auto; } #footer { clear: both; width: 775px; padding-left: 5px; padding-top: 4px; height: 17px; background-color: #4D4841; } #content .lefthandside { float: left; width: 48%; !important; height: auto; } #content .righthandside { float: right; width: 48%; !important; height: auto; } #content3 .lefthandside { float: left; width: 48%; !important; height: auto; } #content3 .righthandside { float: right; width: 48%; !important; height: auto; } #content3 dl { width: 350px; padding-bottom: 20px; } #content3 dl#headOffice { float: left; } #content3 dl#secondaryOffice { float: right; } #content3 dl dt { float: left; width: 70px; padding-bottom: 5px; padding-top: 5px; font-weight: bold; color: #625C52; } #content3 dl dd { width: 200px; padding-bottom: 5px; padding-top: 5px; } dl#headOffice { float: left; } #customForm dl { width: 350px; padding-bottom: 20px; } #customForm dl#headOffice { float: left; } #customForm dl#secondaryOffice { float: right; } #customForm dl dt { float: left; width: 70px; padding-bottom: 5px; padding-top: 5px; font-weight: bold; color: #625C52; } #customForm dl dd { width: 200px; padding-bottom: 5px; padding-top: 5px; } dl#headOffice { float: left; } /**************************** menu styles ***********************************/ #nav .menu { margin : 0; padding : 0; list-style : none; width : 100%; background-color : #afaca6; } #nav .menu ul { list-style : none; margin: 0; padding: 0px; background-color: #afaca6; color: #000; font: normal 9px/14px Verdana, Arial, san-serif; } #nav .menu li { display : inline; font: normal 9px/14px Verdana, Arial, san-serif; } #nav .menu ul li ul li { list-style : none; margin : 0; padding: 5px; border-bottom: 1px solid #999; } #nav .menu a { display : block; text-decoration : none; text-transform: uppercase; border-bottom: 1px solid #999; color: #000; padding-top: 5px; padding-bottom: 5px; padding-right: 2px; padding-left: 18px; font: normal 9px/14px Verdana, Arial, san-serif; } #nav .menu a:hover { background-color: #fff; text-decoration : none; font: normal 9px/14px Verdana, Arial, san-serif; } #nav .menu ul li a { text-transform: none;} #nav .menu ul li a:hover { background-color: #fff; text-decoration : none; text-transform: none; font: normal 9px/14px Verdana, Arial, san-serif; } #nav .menu .open { background-image : url('../img/open.gif'); background-repeat : no-repeat; background-position : 3px 8px; } #nav .menu .closed { background-image : url('../img/closed.gif'); background-repeat : no-repeat; background-position : 3px 8px; } /******************************** text styles ********************************************/ #content h1, h2, h3, h4, h5, h6 { font: Verdana, Arial, san-serif; } h1 { font-size: 1.2em; padding: 5px 0 4px 10px; display: block; margin: 0; color: #cb2817; background-color: #000; } #content h2 { font-size: 1.2em; line-height: 1.2em; margin-bottom: 5px; display: block; color: #cb2817; } #content h3 { font-size: 1.1em; line-height: 1em; margin-bottom: 15px; margin-top: 10px; display: block; color:#FFFFFF} #content h4 { font-size: 1em; line-height: 1em; margin-bottom: 10px; margin-top: -2px; display: block; color: #fff } #content .required { color: red; font-weight: bold; } /* lists */ #content ul { padding-left: 10px; display: block; list-style: none; margin: 0; padding: 0; } #content li { padding-left: 15px; background-image: url('../img/list_arrow.gif'); background-repeat: no-repeat; background-position: 0 2px; } #content ul.space { margin-top: 20px; } #content3 h1, h2, h3, h4, h5, h6 { font: Verdana, Arial, san-serif; } h1 { font-size: 1.2em; padding: 5px 0 4px 10px; display: block; margin: 0; color: #cb2817; background-color: #000; } #content3 h2 { font-size: 1.2em; line-height: 1.2em; margin-bottom: 5px; margin-top:25px; display: block; color: #cb2817; } #content3 h3 { font-size: 1.1em; line-height: 1em; margin-bottom: 5px; margin-top: 10px; display: block; color:#000} #content3 h4 { font-size: 1em; line-height: 1em; margin-bottom: 10px; margin-top: -2px; display: block; color: #000; margin-top:25px; } #content3 h5 { font-size: .8em; line-height: 1em; margin-bottom: 10px; margin-top: -2px; display: block; color: #000; font-style:italic } #content3 .required { color: red; font-weight: bold; } /* lists */ #content3 ul { padding-left: 10px; display: block; list-style: none; margin: 0; padding: 0; } #content3 li { padding-left: 15px; background-image: url('../img/list_arrow.gif'); background-repeat: no-repeat; background-position: 0 2px; } #content3 ul.space { margin-top: 20px; } #contentContainer li.order { padding-left: 0px; background-image: url(); } /* footer */ #footer ul { display: inline; list-style: none; font-size: 9px; color: #999; } #footer ul li { display: inline;margin-right: 8px; } #footer a:link, #footer a:visited { color: #999; text-decoration: none; } #footer a:hover { color: #CCC; text-decoration: underline; } /******************************** form styles ********************************************/ .formContainer { margin-top:20px; width:560px; } .formContainer fieldset { padding: 5px 5px 15px 5px; border: 1px solid #E6E6E6; } .formContainer fieldset legend { color: #506EAA; font-size: 120%; text-transform: lowercase; font-weight: bold;} .formContainer input, .formContainer textarea, .formContainer select { color:#000; } .formContainer input, .formContainer textarea { width: 250px; } .formContainer input.small { width: 100px; } .formContainer div.row { clear: both; padding-top: 5px; } .formContainer div.row span.label { float: left; width: 180px; text-align: right; line-height: 150%; padding-top: 2px; color:#333; } .formContainer div.row span.field { float: right; width: 350px; text-align: left; } .formContainer .required { color: #5988B5; font-style: normal; } .formContainer .buttonRow { text-align: right; padding: 5px;clear: both; } .formContainer input, .formContainer textarea, .formContainer select { border: 1px solid #C6C7DB; } .formContainer .buttonRow input { width: auto; background-color: #2A477F; color: white; text-transform: lowercase; font-weight: bold;font-size: 110%; } /******************************** graphic styles ********************************************/ /* images */ #masthead img { float: left; } #content img.property { padding: 4px; border: 1px solid #A5C8E8; float: right; margin-left: 10px; margin-bottom: 10px; width: 200px; height: 150px; } #content img.consult { padding: 4px; border: 1px solid #A5C8E8; float: right; margin-left: 10px; margin-bottom: 10px; width: 200px; height: 150px; } #content img.contact { padding: 4px; border: 1px solid #A5C8E8; float: left; margin-right: 10px; margin-bottom: 10px; width: 150px; height: 200px; } /* pdf buttons */ .buttonPdf a:link { width:160px; height:32px; display:block; background-image:url(../img/ico_pdf.gif); background-repeat:no-repeat; padding-left:40px; } .buttonDownload a:link { width:220px; height:51px; display:block; background-image:url(../img/ico_acrobat.gif); background-repeat:no-repeat; background-position:0 10px; padding-left:98px; padding-top:12px; font-size:9px; line-height:12px; border-top:1px solid #999; color:#333333; text-decoration:none; } .buttonDownload a:hover { color:#999999;} /* features buttons - on home page */ #features {float: right; width: 245px;} #features SPAN {font-size: 12px; font-weight: bold; padding-bottom: 0; display: block;} #features a:link, #features a:visited {display: block; margin-bottom: 8px; padding: 5px 0 0 55px; width: 190px; height: 50px; background-color: #000; border-bottom: 1px solid #fff; background-repeat: no-repeat; font-size: 11px; text-decoration: none; color: #fff;} #features .appr {background-image:url(../img/ico_appr.gif);} #features .wish {background-image:url(../img/ico_wish.gif);} #features .calc {background-image:url(../img/ico_calc.gif);} /************************** property of the week styles ************************************/ #powBox { float: right; width: 150px; margin-left: 10px; margin-bottom: 10px; padding: 10px; color: #667EAF; background-color: #D3DDF0; border: 1px solid #A0B4DB; } * html #container #powBox { width: 150px; } #powBox img.pow { width: 150px; height: 100px; margin-bottom: 10px; float: none; margin-left: auto; margin-right: auto; } #powBox h4 { font: bold 1em/1.4em Verdana, Arial, sans-serif; color: #1C3872; } #powBox .suburb { text-transform: uppercase; color: #A0B4DB; } #powBox a:link, a:visited { text-decoration: underline; color:#667EAF; } #powBox a:hover { text-decoration: none; color: black; } /*===FORMS===*/ #customForm form { overflow: auto; font-size:11px; margin: 0; padding: 0; padding-top: 25px; /*ie hack*/_padding-top: 15px; } /*containers*/ #customForm form .centeringContainer { margin-left: auto; margin-right: auto; width: 430px; } /*fieldsets*/ #customForm form fieldset { border: 1px solid #CCC; clear: both; margin: 0 0 10px 0; padding: 10px; } /*legends*/ #customForm form legend { font-size: 12px; font-weight: bold; margin: 0 0 0 0; padding: 0 10px 0 10px; color: #cb2817; /*ie hack*/ _margin: 0 0 10px 0; } /*labels*/ #customForm form label { float: left; width: 200px; } #customForm form label.small { float: left; height: 25px; padding-top: 3px; width: 80px; } #customForm form label.xsmall { float: left; height: 25px; padding-top: 3px; width: 50px; } /*inputs, selects, text areas*/ #customForm form input, #customForm form select, #customForm form textarea { float: left; font-size: 11px; margin: 2px 5px 2px 0; width: 200px; } #customForm form input.small { width: 94px; } #customForm form input.xsmall { width: 24px; } #customForm form input.button { float: right; width: auto; } /*text*/ #customForm form em { color: #666; font-weight:bold; float: left; } #customForm form em.description { color: #666; float: left; font-style:normal; width: 120px; }