/************* layout *************/ /**********************************/ body { line-height: 1.4em; font-size: 12px; font-family: arial, helvetica, san-serif; color: #666; background: #d5d5d5 } #wrap {float: left; width: 100%; background: url(images/container_wrap_bg.png) repeat-x; background: #fff } #container_wrap { margin: auto; width: 980px; } #container { float: left; width: 100%; padding-bottom: 50px } #content { float: left; width: 100%; margin: 0; } #content_left { margin: 5px 0 25px 0; float:left; width:430px;} #content_left ul {list-style-position:inside; list-style-type:disc; margin-left:20px;} #content_right { float: right; width: 200px; margin-left: 50px } /************* header *************/ /**********************************/ #header_wrap { float: left; width: 100%; height: 350px; background: url('images/header_bg.jpg') repeat-x } #header { position: relative; margin: auto; width: 980px; } #header .inside { float: left; width: 100%; height: 277px; } #logo { float: left; width: 240px; height: 277px; background: url(images/hss_logo.jpg) no-repeat } /************* banner *************/ /**********************************/ #banner { float: right; width: 665px; height: 350px; margin-right:7px; overflow:hidden; position:relative;} /****** banner - update 20130517 ***/ /**********************************/ #banner-slider {height:350px;} #item1, #item2, #item3, #item4, #item5 {height:335px; position:relative;} #item1 {background:url(../images/banner/residential/bg.jpg) no-repeat top left;} #item2 {background:url(../images/banner/strata/bg.jpg) no-repeat top left;} #item3 {background:url(../images/banner/corporate/bg.jpg) no-repeat top left;} #item4 {background:url(../images/banner/warehouse/bg.jpg) no-repeat top left;} #item5 {background:url(../images/banner/retail/bg.jpg) no-repeat top left;} .item .bubble-info { display:none; width:160px; height:auto; border:4px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:url(../images/banner/bubble-info.png) repeat top left; padding:8px 20px; position:absolute; z-index:9; transition:height 2s; -moz-transition:height 2s; -webkit-transition:height 2s; -o-transition:height 2s; } .item .bubble-info p {color:#fff; font-size:12px; margin-bottom:0px;} .item .bubble-info p.title {font-weight:bold;} .item .bubble-info a {color:#fff; text-decoration:underline;} .item .bubble-btn {position:absolute; text-indent:-999em; z-index:99} .item .bubble-btn a{display:block; width:75px; height:75px; } /*Residentail*/ #item1 .btn-01 {background:url(../images/banner/residential/1.png) no-repeat top left; top:5px; left:20px;} #item1 .btn-02 {background:url(../images/banner/residential/2.png) no-repeat top left; top:190px; left:199px;} #item1 .btn-03 {background:url(../images/banner/residential/3.png) no-repeat top left; top:123px; left:254px;} #item1 .btn-04 {background:url(../images/banner/residential/4.png) no-repeat top left; top:190px; left:295px;} #item1 .btn-05 {background:url(../images/banner/residential/5.png) no-repeat top left; top:25px; left:335px;} #item1 .btn-06 {background:url(../images/banner/residential/6.png) no-repeat top left; top:140px; left:515px;} #item1 .info-01 {top:40px; left:70px;} #item1 .info-02 {top:215px; left:20px;} #item1 .info-03 {top:90px; left:308px;} #item1 .info-04 {top:220px; left:345px;} #item1 .info-05 {top:10px; left:155px;} #item1 .info-06 {top:110px; right:120px;} /*Strata*/ #item2 .btn-01 {background:url(../images/banner/strata/1.png) no-repeat top left; top:20px; left:150px;} #item2 .btn-02 {background:url(../images/banner/strata/2.png) no-repeat top left; top:244px; left:225px;} #item2 .btn-03 {background:url(../images/banner/strata/3.png) no-repeat top left; top:85px; left:320px;} #item2 .info-01 {top:5px; left:200px;} #item2 .info-02 {top:200px; left:280px;} #item2 .info-03 {top:100px; left:370px;} /*Corporate*/ #item3 .btn-01 {background:url(../images/banner/corporate/1.png) no-repeat top left; top:222px; left:186px;} #item3 .btn-02 {background:url(../images/banner/corporate/2.png) no-repeat top left; top:95px; left:303px;} #item3 .btn-03 {background:url(../images/banner/corporate/3.png) no-repeat top left; top:186px; left:442px;} #item3 .btn-04 {background:url(../images/banner/corporate/4.png) no-repeat top left; top:24px; left:560px;} #item3 .info-01 {top:200px; left:0px;} #item3 .info-02 {top:70px; left:120px;} #item3 .info-03 {top:170px; left:255px;} #item3 .info-04 {top:15px; left:375px;} /*Warehouse*/ #item4 .btn-01, #item4 .btn-01-01, #item4 .btn-01-02, #item4 .btn-01-03 {background:url(../images/banner/warehouse/1.png) no-repeat top left; top:89px;} #item4 .btn-01 {left:41px;} #item4 .btn-01-01 {left:201px;} #item4 .btn-01-02 {left:371px;} #item4 .btn-01-03 {left:532px;} #item4 .btn-02 {background:url(../images/banner/warehouse/2.png) no-repeat top left; top:213px; left:213px;} #item4 .btn-03 {background:url(../images/banner/warehouse/3.png) no-repeat top left; top:246px; left:317px;} #item4 .btn-04 {background:url(../images/banner/warehouse/4.png) no-repeat top left; top:246px; left:587px;} #item4 .info-01 {left: 60px; padding: 8px 20px 25px; text-align: center; top: 39px; width: 480px;} #item4 .info-01-01 {top:147px; left:135px;} #item4 .info-01-02 {top:147px; left:300px;} #item4 .info-01-03 {top:147px; left:450px;} #item4 .info-02 {top:205px; left:25px;} #item4 .info-03 {top:225px; left:370px;} #item4 .info-04 {top:225px; left:400px;} /*Retail*/ #item5 .btn-01 {background:url(../images/banner/retail/1.png) no-repeat top left; top:37px; left:202px;} #item5 .btn-02 {background:url(../images/banner/retail/2.png) no-repeat top left; top:245px; left:349px;} #item5 .btn-03 {background:url(../images/banner/retail/3.png) no-repeat top left; top:0px; left:441px;} #item5 .btn-04 {background:url(../images/banner/retail/4.png) no-repeat top left; top:245px; left:586px;} #item5 .info-01 {top:10px; left:20px;} #item5 .info-02 {top:215px; left:170px;} #item5 .info-03 {top:55px; left:370px;} #item5 .info-04 {top:205px; left:420px;} /*Navigation*/ .iosSliderButtons {display:none; position:absolute; bottom:25px; left:10px; } .iosSliderButtons .button { background:#fff; width:8px; height:8px; float:left; margin-right:5px; border:1px solid #003; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius:5px; opacity:0.8; } .iosSliderButtons .selected, .iosSliderButtons .button:hover {opacity:1;} /*Navigation - Next, Pre button*/ #banner .next, #banner .prev {position:absolute; top:50%; z-index:999; width:40px; height:40px; margin-top:-20px;} #banner .next {background:url(../images/nav.png) no-repeat top right; right:5px;} #banner .prev {background:url(../images/nav.png) no-repeat top left; left:5px;} #banner div.next:hover {background-position:bottom right;} #banner div.prev:hover {background-position:bottom left;} /********* bottom ***********/ /**********************************/ #bottom_wrap { float: left; width: 100%; height: 73px; background: #d5d5d5 } #bottom { margin: auto; width: 980px; height: 100%; background: url(images/footer_bg.jpg) 95% 0 no-repeat; } #bottom .inside { float: right; padding-top: 10px; width: 670px; color: #333 } /************* typography *************/ /***************************************/ p { margin-bottom: 15px; color:#000000; } h1, h2, h4 { display: block; font-size: 2.2em; line-height: 1.2em; font-weight: bold; margin-bottom: 8px; color: #004960 } h2 { color:#0A4E5B; font-size:14px; } h3 { display: block; font-size: 1.4em; line-height: 1.2em; color: #1cacce; margin: 15px 0 5px 0; color: #467c98 } ul {} a { text-decoration: none; cursor: pointer } a:visited { color: #666 } a:hover { color: #004960 } /************* forms **************/ /**********************************/ input, textarea { color: #777; font-size: 0.95em } #contactForm td { padding-bottom:5px; color:#000; } .sideImage { margin:5px 0 10px 10px}