/* ---------------------------------------------------- Wilhelm Roofing default.css version 1.10.13 author Eric Winterstine ---------------------------------------------------- */ body { background-image: url('../images/body_bg.png'); background-repeat: repeat-x; background-position: left top; } #wrapper { border-top: 5px solid #316b32; margin: 0px auto; width: 950px; p-webkit-box-shadow: 0px 0px 30px rgba(50, 50, 50, 0.85); -moz-box-shadow: 0px 0px 30px rgba(50, 50, 50, 0.85); box-shadow: 0px 0px 30px rgba(50, 50, 50, 0.85); *border: 1px solid #cccccc; *border-top: 5px solid #316b32; } #site_top { padding: 12px; width: 926px; height: 121px; background-image: url('../images/top_bg.png'); background-repeat: no-repeat; position: relative; } #site_top h1 { text-indent: -9999px; display: block; float: left; width: 324px; height: 62px; background-image: url('../images/logo.png'); } #site_top h2 { font-family: 'Times New Roman', serif; font-size: 22px; color: #ffffff; font-style: italic; text-align: right; margin-top: 20px; margin-right: 20px; } #site_top img.solar { position: absolute; border: 0px; left: 637px; top: 81px; } #menu { position: absolute; left: 13px; top: 107px; } #menu ul { list-style: none; } #menu ul li { float: left; } #menu ul li a { border: 0; display: block; width: 104px; height: 38px; background-image: url('../images/menu_bg.png'); background-position: left bottom; margin-right: 2px; color: #cccccc; font-family: Arial, sans-serif; font-size: 12px; line-height: 38px; text-align: center; text-decoration: none; } #menu ul li a.on { background-position: left top; color: #ffffff; } #menu ul li a:hover { background-position: left top; color: #ffffff; } #mid { position: relative; width: 916px; height: 183px; padding: 17px; background-image: url('../images/mid_bg.png'); font-family: Arial, sans-serif; color: #ffffff; } #mid h3 { font-size: 18px; letter-spacing: 1px; text-transform: uppercase; margin-top: 8px; } #mid p { font-size: 15px; line-height: 19px; margin-right: 400px; margin-top: 12px; } #mid ul { list-style: disc; margin-left: 25px; font-size: 15px; margin-top: 5px; line-height: 23px; } #mid img { position: absolute; left: 520px; top: 18px; } #mid a { color: #b8d3a9; } #main { width: 916px; padding: 20px 17px 50px 17px; background-color: #ffffff; font-family: Arial, sans-serif; color: #404040; } #main ul.services { list-style: none; width: 100%; margin-left: 15px; min-height: 325px; padding-top: 22px; border-top: 1px solid #dadada; clear: both; } #main ul.services li { display: block; float: left; margin-right: 18px; width: 280px; margin-bottom: 15px; } #main h4 { font-size: 18px; line-height: 24px; } #main ul.services li img { padding: 5px; border: 1px solid #cccccc; } #main ul.services li p { margin-top: 10px; font-size: 12px; line-height: 14px; } #main ul.services li a { text-decoration: none; color: #316b32; } #main a.allServices { font-size: 14px; color: #316b32; padding: 15px; } #main p.bottom { margin: 16px 50px 0 12px; font-size: 14px; line-height: 18px; } #main p.bottom a { color: #316b32; } #clients { width: 916px; min-height: 290px; } #clients img { margin: 2px; padding: 4px; border: 1px solid #dddddd; float: left; } #service { width: 916px; } #service h4 { text-align: center; font-size: 14px; clear: left; font-weight: bold; } #service ul { list-style: none; margin-left: 10px; height: 260px; } #service ul li { float: left; font-size: 12px; line-height: 18px; width: 209px; margin: 3px; padding: 4px; border: 1px solid #eeeeee; height: 230px; background-color: #ffffff; } #service ul li a { text-decoration: none; color: #316b32; line-height: 28px; } ul.manufacturers { list-style: disc; margin-left: 25px; font-size: 14px; margin-top: 5px; line-height: 18px; } ul.manufacturers a { color: #316b32; text-decoration: none; } ul.manufacturers a:hover { text-decoration: underline; } #manufacturers { float: right; display: block; height: 120px; width: 573px; } #manufacturers a { margin-right: 2px; float: left; display: block; overflow: hidden; background-image: url('../images/manufacturers.jpg'); background-repeat: no-repeat; text-indent: -9999px; } #manufacturers a:hover { margin-top: -5px; } #manufacturers .gaf { width: 98px; height: 120px; background-position: left top; } #manufacturers .firestone{ width: 104px; height: 120px; background-position: -98px top; } #manufacturers .john { width: 121px; height: 120px; background-position: -202px top; } #manufacturers .garland { width: 102px; height: 120px; background-position: -323px top; } #manufacturers .fibertite{ width: 133px; height: 67px; background-position: -425px top; } #manufacturers .fibertite:hover { margin-bottom: 5px; } #manufacturers .tremco { width: 133px; height: 53px; background-position: -425px -67px; } #manufacturers .tremco:hover { } p.nrca { margin-bottom: 14px; } p.nrca a span { color: #003667; font-weight: 600; font-size: 21px; line-height: 25px; } p.nrca a { color: #003667; text-decoration: none; } #footer1 { width: 916px; padding: 17px; border-top: 5px solid #173117; background-color: #316b32; font-family: Arial, sans-serif; color: #ffffff; font-size: 14px; line-height: 16px; min-height: 80px; } #footer1 h5 { font-size: 18px; margin-bottom: 8px; } #footer1 a { text-decoration: underline; color: #ffffff; font-size: 14px; } #footer2 { width: 916px; padding: 10px 17px; background-color: #173117; text-align: center; font-family: Arial, sans-serif; color: #ffffff; font-size: 12px; min-height: 42px; line-height: 13px; } #footer2 p { float: right; margin-right: 100px; margin-top: 10px; } #footer2 img { margin-left: 85px; float: left; } #onlineform { position: absolute; padding: 40px 40px 10px 40px; font-family: Arial, serf; font-size: 14px; color: #404040; width: 270px; left: 30px; top: 25px; background-image: url('../images/form_bg.png'); background-repeat: repeat-x; background-position: left top; border: 1px solid #dddddd; p-webkit-box-shadow: 0px 0px 7px rgba(50, 50, 50, 0.85); -moz-box-shadow: 0px 0px 7px rgba(50, 50, 50, 0.85); box-shadow: 0px 0px 7px rgba(50, 50, 50, 0.85); } #onlineform input.txt { width: 250px; height: 24px; margin: 2px 0px 12px 0px; } #onlineform ul { list-style: none; margin: 8px 0 0 0; padding: 0;} #onlineform ul li { display: block; float: left; width: 135px; height: 25px; font-family: Arial, serif; font-size: 12px; } #onlineform .button { border: none; width: 153px; height: 33px; background-image: url('../images/freequote.png'); background-position: left top; background-repeat: no-repeat; text-indent: -9999px; margin-left: 60px; } #onlineform .button:hover { background-position: left bottom; cursor: pointer; } #onlineform textarea { width: 255px; height: 75px; margin-top: 8px; margin-bottom: 10px; } #onlineform p.form-bottom { font-family: Arial, serif; color: #316b32; text-align: center; padding-top: 8px; margin:0; font-size: 10px; line-height: 13px; } .star { color: #d32d30;} #photoGallery { margin: 12px; } #photoGallery img { max-height: 85px; margin: 3px; } /* News & Featured */ #featured { margin-left: 15px; width: 45%; padding-right: 15px; margin-bottom: 30px; border-right: 1px solid #dadada; float: left; } #news { float: right; margin-left: 15px; padding-right: 15px; width: 425px; margin-bottom: 30px; } .heading h3 { font: 400 18px/19px Arial, sans-serif !important; color: #6b8b6c; margin-left: 41px; } .heading h3 span { font-weight: normal !important; color: #404040; font-size: 16px !important; } .dateBox { display: block; float: left; width: 35px; height: 32px; background-color: #316c32; font-family: Arial, sans-serif; color: #ffffff; text-align: center; font-size: 14px; font-weight: bold; line-height: 14px; padding-top: 2px; } .dateBox span { font-size: 10px !important; font-weight: normal !important; } #featured p { margin: 15px; font: 400 15px/18px Arial, sans-serif; } #news p { margin: 15px 15px 0px 0px; font: 400 15px/18px Arial, sans-serif; } #featured a, #news a { text-decoration: underline !important; color: #316b32; } #featured img { max-width: 92px; max-height: 63px; padding: 4px; border: 1px solid #6b8b6c; margin-left: 25px; } #news img { max-width: 150px; max-height: 150px; padding: 4px; border: 1px solid #6b8b6c; margin-right: 12px; margin-top: 15px; float: left; } #news-article { clear: both; padding-top: 20px; margin-bottom: 10px; padding-bottom: 30px; border-bottom: 1px solid #dadada; } #news-article h2 { font: 400 22px/35px Arial, sans-serif !important; color: #316c32; margin-left: 45px; } #news-article img { max-width: 250px; max-height: 250px; padding: 4px; border: 1px solid #6b8b6c; margin-right: 12px; margin-bottom: 12px; margin-top: 15px; float: left; } #news-article p { margin: 15px 15px 0px 0px; font: 400 15px/18px Arial, sans-serif; } #all-features { clear: both; padding-top: 20px; margin-bottom: 10px; padding-bottom: 30px; border-bottom: 1px solid #dadada; } #all-features h2 { font: 400 22px/35px Arial, sans-serif !important; color: #316c32; margin-left: 45px; } #all-features p { margin: 15px 15px 0px 0px; font: 400 15px/18px Arial, sans-serif; } #all-features img { max-width: 150px; max-height: 150px; padding: 4px; border: 1px solid #6b8b6c; margin-right: 12px; margin-bottom: 12px; margin-top: 15px; } .divider { clear: both; margin: 20px 0px; border-top: 1px solid #dadada; } /* Upload Form */ .uploadStep { margin: 25px 12px; display: block; width: 275px; height: 260px; border: 1px solid #dadada; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: relative; float: left; } .uploadStep #loading { margin-top: 40px; text-align: center; font-size: 14px; color: #404040; display:block; background-color: #dadada; padding: 8px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .uploadStep h4 { display: block; background-color: #fff; padding: 4px; position: absolute; left: 14px; top: -17px; color: #404040; font-size: 20px !important; font-weight: 800 !important; } .uploadStep p { margin: 16px 18px; } .uploadStep p.note { width: 250px; display: block; position: absolute; left: 0px; top: 190px; font-size: 12px !important; text-align: center; } .uploadStep input[type=text], .uploadStep input[type=file] { margin-left: 16px; margin-bottom: 8px; font-size: 14px; padding: 9px; width: 218px; } .uploadStep .uploadButton { border: none; width: 200px; height: 45px; margin-left: 35px; margin-top: 35px; display: block; border: 2px solid #666; text-align: center; font-family: Arial, serif; font-weight: 700; font-size: 20px; color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} .uploadStep .uploadButton:hover { cursor: pointer; } .uploadStep .uploadButton { background-image: linear-gradient(bottom, rgb(49,107,50) 3%, rgb(94,168,95) 49%, rgb(111,189,112) 51%); background-image: -o-linear-gradient(bottom, rgb(49,107,50) 3%, rgb(94,168,95) 49%, rgb(111,189,112) 51%); background-image: -moz-linear-gradient(bottom, rgb(49,107,50) 3%, rgb(94,168,95) 49%, rgb(111,189,112) 51%); background-image: -webkit-linear-gradient(bottom, rgb(49,107,50) 3%, rgb(94,168,95) 49%, rgb(111,189,112) 51%); background-image: -ms-linear-gradient(bottom, rgb(49,107,50) 3%, rgb(94,168,95) 49%, rgb(111,189,112) 51%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.03, rgb(49,107,50)), color-stop(0.49, rgb(94,168,95)), color-stop(0.51, rgb(111,189,112)) ); } .uploadStep .uploadButton:hover { background-image: linear-gradient(bottom, rgb(103,161,104) 3%, rgb(98,173,98) 49%, rgb(117,199,117) 51%); background-image: -o-linear-gradient(bottom, rgb(103,161,104) 3%, rgb(98,173,98) 49%, rgb(117,199,117) 51%); background-image: -moz-linear-gradient(bottom, rgb(103,161,104) 3%, rgb(98,173,98) 49%, rgb(117,199,117) 51%); background-image: -webkit-linear-gradient(bottom, rgb(103,161,104) 3%, rgb(98,173,98) 49%, rgb(117,199,117) 51%); background-image: -ms-linear-gradient(bottom, rgb(103,161,104) 3%, rgb(98,173,98) 49%, rgb(117,199,117) 51%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.03, rgb(103,161,104)), color-stop(0.49, rgb(98,173,98)), color-stop(0.51, rgb(117,199,117)) ); }