body {padding: 0; margin: 0; background: #fff; position: relative;} .clearfix {clear: both;} .center {margin: 0 auto;} .right {float: right; margin: 0 0 15px 15px;} .floatright {float: right;} .left {float: left; margin: 0 15px 15px 0;} .floatleft {float: left;} .inline {display: inline;} .separator {clear:both; display: block; height: 60px;} .bottommargin15 {margin-bottom: 15px;} .nobottomborder {margin-bottom: 0.5em;} .borderright {border-right: solid 1px #eee;} .borderleft {border-left: solid 1px #eee;} .borderbottom {border-bottom: solid 1px #eee; margin-bottom: 0.5em;} .graylineseperate {display: block; clear: both; width: 100%; height: 25px; border-top: solid 1px #c7c7c7;} .dashedlinefixed {display: block; clear: both; width: 616px; height: 25px; border-bottom: dashed 1px #c7c7c7; margin: 0 auto;} .dashedline {display: block; clear: both; width: 100%; height: 45px; border-bottom: dashed 1px #c7c7c7;} /*--- TOP ---*/ #top {clear: both; width: 100%; height: 103px; background: url(../images/topnav_background.png) repeat-x;} #topcontent {width: 960px; height: 100%; margin: 0 auto;} #logo {float: left; position: relative; top: 19px;} #logo a, #logo a:hover {display: block; width: 195px; height: 63px; background: url(../images/topnav_logo.png) no-repeat; text-indent: -9999px; border-bottom: 0px;} #affiliatelogo {float: left; position: relative; top: 19px;} #affiliatelogo a, #affiliatelogo a:hover {display: block; width: 324px; height: 63px; background: url(../images/topnav_affiliatelogo.png) no-repeat; text-indent: -9999px; border-bottom: 0px;} #topnavcontainer {float: right; width: 600px; height: 17px; display: block; position: relative; top: 58px; overflow: hidden;} #topnav {float: left; display: inline; margin: 0; background:url(../images/topnav_navsprite.gif) no-repeat; height: 17px;} #topnav span {display: none; text-indent: -9999px;} #topnav li, #topnav a, #topnav a:visited {height: 17px; display:block; border-bottom: 0px; white-space: nowrap;} #topnav li {float: left; display:inline;} .navlearnmore {width: 88px; height: 17px;} .navlearnmore a:hover {background:url(../images/topnav_navsprite.gif) 0px -17px no-repeat;} .navlearnmoreactive {width: 88px; background:url(../images/topnav_navsprite.gif) 0px -17px no-repeat;} .navproducts {width: 160px; height: 17px;} .navproducts a:hover {background:url(../images/topnav_navsprite.gif) -88px -17px no-repeat;} .navproductsactive {width: 160px; background:url(../images/topnav_navsprite.gif) -88px -17px no-repeat;} .navportfolio {width: 78px; height: 17px;} .navportfolio a:hover {background:url(../images/topnav_navsprite.gif) -248px -17px no-repeat;} .navportfolioactive {width: 78px; background:url(../images/topnav_navsprite.gif) -248px -17px no-repeat;} .navtemplates {width: 90px; height: 17px;} .navtemplates a:hover {background:url(../images/topnav_navsprite.gif) -326px -17px no-repeat;} .navtemplatesactive {width: 90px; background:url(../images/topnav_navsprite.gif)-326px -17px no-repeat;} .navorder {width: 97px; height: 17px;} .navorder a:hover {background:url(../images/topnav_navsprite.gif) -416px -17px no-repeat;} .navorderactive {width: 97px; background:url(../images/topnav_navsprite.gif) -416px -17px no-repeat;} .navcontact {width: 87px; height: 17px;} .navcontact a:hover {background:url(../images/topnav_navsprite.gif) -513px -17px no-repeat;} .navcontactactive {width: 87px; background:url(../images/topnav_navsprite.gif) -513px -17px no-repeat;} #logintab {float: left; position: relative; left: 649px;} #logintab a {display: block; height: 33px; width: 49px; background: url(../images/topnav_login.png) no-repeat; text-indent: -9999px;} #logintab a:hover {background-position: 0 -34px; border-bottom: 0px;} #signuptab {float: left; position: relative; left: 650px;} #signuptab a {display: block; height: 33px; width: 65px; background: url(../images/topnav_signup.png) no-repeat; text-indent: -9999px;} #signuptab a:hover {background-position: 0 -34px; border-bottom: 0px;} #logouttab {float: left; position: relative; left: 615px;} #logouttab a {display: block; height: 33px; width: 63px; background: url(../images/topnav_logout.png) no-repeat; text-indent: -9999px;} #logouttab a:hover {background-position: 0 -34px; border-bottom: 0px;} #dashboardtab {float: left; position: relative; left: 616px;} #dashboardtab a {display: block; height: 33px; width: 86px; background: url(../images/topnav_dashboard.png) no-repeat; text-indent: -9999px;} #dashboardtab a:hover {background-position: 0 -34px; border-bottom: 0px;} /*-- AFFILIATES LOGIN --*/ #logintab_green {float: left; position: relative; left: 515px; top: -17px;} #logintab_green a {display: block; height: 33px; width: 49px; background: url(../images/topnav_login_green.png) no-repeat; text-indent: -9999px;} #logintab_green a:hover {background-position: 0 -34px; border-bottom: 0px;} #signuptab_green {float: left; position: relative; left: 516px; top: -17px;} #signuptab_green a {display: block; height: 33px; width: 65px; background: url(../images/topnav_signup_green.png) no-repeat; text-indent: -9999px;} #signuptab_green a:hover {background-position: 0 -34px; border-bottom: 0px;} #logouttab_green {float: left; position: relative; left: 481px; top: -17px;} #logouttab_green a {display: block; height: 33px; width: 63px; background: url(../images/topnav_logout_green.png) no-repeat; text-indent: -9999px;} #logouttab_green a:hover {background-position: 0 -34px; border-bottom: 0px;} #dashboardtab_green {float: left; position: relative; left: 482px; top: -17px;} #dashboardtab_green a {display: block; height: 33px; width: 86px; background: url(../images/topnav_dashboard_green.png) no-repeat; text-indent: -9999px;} #dashboardtab_green a:hover {background-position: 0 -34px; border-bottom: 0px;} /*-- GREEN AREA --*/ #green {clear: both; width: 100%; height: 354px; background: url(../images/greenlarge_bkgrd.jpg) repeat-x;} /*-- GREEN AREA INTERIOR --*/ #greenint {clear: both: width: 100%; height: 180px; background: url(../images/greensmall_bkgrd.png) repeat-x;} #greenintcontent {width: 960px; height: 180px; margin: 0 auto; background: url(../images/greensmall_contentbkgrd.png) no-repeat; padding: 1px 0 0;} #greenintcontent #text {float: left; width: 655px;} #greenintcontent #buttons {float: right; width: 303px; height: 42px; margin: 103px 0 0;} /*-- BLUE AREA INTERIOR --*/ #blueint {clear: both: width: 100%; height: 180px; background: url(../images/bluesmall_bkgrd.png) repeat-x;} #blueintcontent {width: 960px; height: 180px; margin: 0 auto; background: url(../images/bluesmall_contentbkgrd.png) no-repeat; padding: 1px 0 0;} #blueintcontent #text {float: left; width: 655px;} #blueintcontent #buttons {float: right; width: 303px; height: 42px; margin: 103px 0 0;} /*--GREEN AREA INTERIOR WITH TABS --*/ #greenintsmall {clear: both: width: 100%; height: 150px; background: url(../images/greensmall_bkgrd.png) repeat-x;} #greenintcontentsmall {width: 960px; height: 149px; margin: 0 auto; background: url(../images/greensmall_contentbkgrd.png) no-repeat; padding: 1px 0 0;} #greenintcontentsmall #text {float: left; width: 655px;} #greenintcontentsmall #buttons {float: right; width: 303px; height: 42px; margin: 65px 0 0;} /*-- SUB NAV --*/ #subnav {clear: both; width: 100%; height: 60px; background: url(../images/midnav_bkgrd.png) repeat-x;} #subnavcontent {width: 960px; margin: 0 auto; font-size: 1.03em;} a.tabactive {background: url(../images/midnav_tab_right.jpg) no-repeat scroll top right; color: #444; display: block; float: left; color: #fff; text-transform: uppercase; height: 60px; margin: 0 0 0 0; padding-right: 16px; /* sliding doors padding */ text-decoration: none;} a.tabactive span {background: url(../images/midnav_tab_left.jpg) no-repeat; display: block; line-height: 46px; padding: 1px 2px 11px 16px; text-shadow: #076288 0px -1px 1px; color: #fff;} a.tabactive img {float: left; margin-right: 9px;} a:hover.tabactive {border: none;} a.tabfirst {display: block; float: left; color: #666; text-transform: uppercase; height: 60px; margin: 0 0 0 0; padding-right: 15px; /* sliding doors padding */ text-decoration: none;} a.tabfirst span {background: transparent url(../images/midnav_tab_spacer.png) no-repeat; display: block; line-height: 46px; padding: 2px 2px 12px 15px; text-shadow: #fff 0px 1px 1px; color: #666} a.tabfirst img {float: left; margin-right: 9px;} a:hover.tabfirst {border: none; color: #333;} a.tabmiddle {background: transparent url(../images/midnav_tab_spacer.png) no-repeat scroll top right; display: block; float: left; color: #666; text-transform: uppercase; height: 60px; margin: 0 0 0 0; padding-right: 15px; /* sliding doors padding */ text-decoration: none;} a.tabmiddle span {background: transparent url(../images/midnav_tab_spacer.png) no-repeat; display: block; line-height: 46px; padding: 2px 2px 12px 15px; text-shadow: #fff 0px 1px 1px; color: #666} a.tabmiddle img {float: left; margin-right: 9px;} a:hover.tabmiddle {border: none; color: #333;} a.tablast {background: transparent url(../images/midnav_tab_spacer.png) no-repeat scroll top right; display: block; float: left; color: #666; text-transform: uppercase; height: 60px; margin: 0 0 0 0; padding-right: 15px; /* sliding doors padding */ text-decoration: none;} a.tablast span {display: block; line-height: 46px; padding: 2px 2px 12px 15px; text-shadow: #fff 0px 1px 1px; color: #666} a.tablast img {float: left; margin-right: 9px;} a:hover.tablast {border: none; color: #333;} /*--BLUE AREA INTERIOR WITH TABS --*/ #blueintsmall {clear: both: width: 100%; height: 150px; background: url(../images/bluesmall_bkgrd.png) repeat-x;} #blueintcontentsmall {width: 960px; height: 149px; margin: 0 auto; background: url(../images/bluesmall_contentbkgrd.png) no-repeat; padding: 1px 0 0;} #blueintcontentsmall #text {float: left; width: 655px;} #blueintcontentsmall #buttons {float: right; width: 303px; height: 42px; margin: 65px 0 0;} /*-- BLUE SUB NAV --*/ #subnav_white {clear: both; width: 100%; height: 60px; background: url(../images/midnav_bkgrd.png) repeat-x;} #subnavcontent_white {width: 960px; margin: 0 auto; font-size: 1.03em;} a.tabactive_white {background: url(../images/midnav_tab_right_white.png) no-repeat scroll top right; display: block; float: left;text-transform: uppercase; height: 60px; margin: 0 0 0 0; padding-right: 16px; /* sliding doors padding */ text-decoration: none;} a.tabactive_white span {background: url(../images/midnav_tab_left_white.png) no-repeat; display: block; line-height: 46px; padding: 1px 2px 11px 16px; color: #222;} a.tabactive_white img {float: left; margin-right: 9px;} a:hover.tabactive_white {border: none;} a.tabfirst_white {display: block; float: left; color: #666; text-transform: uppercase; height: 60px; margin: 0 0 0 0; padding-right: 15px; /* sliding doors padding */ text-decoration: none;} a.tabfirst_white span {background: transparent url(../images/midnav_tab_spacer.png) no-repeat; display: block; line-height: 46px; padding: 2px 2px 12px 15px; text-shadow: #fff 0px 1px 1px; color: #666} a.tabfirst_white img {float: left; margin-right: 9px;} a:hover.tabfirst_white {border: none; color: #333;} a.tabmiddle_white {background: transparent url(../images/midnav_tab_spacer.png) no-repeat scroll top right; display: block; float: left; color: #666; text-transform: uppercase; height: 60px; margin: 0 0 0 0; padding-right: 15px; /* sliding doors padding */ text-decoration: none;} a.tabmiddle_white span {background: transparent url(../images/midnav_tab_spacer.png) no-repeat; display: block; line-height: 46px; padding: 2px 2px 12px 15px; text-shadow: #fff 0px 1px 1px; color: #666} a.tabmiddle_white img {float: left; margin-right: 9px;} a:hover.tabmiddle_white {border: none; color: #333;} a.tablast_white {background: transparent url(../images/midnav_tab_spacer.png) no-repeat scroll top right; display: block; float: left; color: #666; text-transform: uppercase; height: 60px; margin: 0 0 0 0; padding-right: 15px; /* sliding doors padding */ text-decoration: none;} a.tablast_white span {display: block; line-height: 46px; padding: 2px 2px 12px 15px; text-shadow: #fff 0px 1px 1px; color: #666} a.tablast_white img {float: left; margin-right: 9px;} a:hover.tablast_white {border: none; color: #333;} /*-- MAIN CONTENT --*/ #main {clear: both; position: relative; width: 100%; height: auto; margin-bottom: 63px;} #main.graybkgrd {background: url('../images/main_bkgrd.png') repeat-x #fff; padding: 35px 0 1px 0;} #main.graybkgrd2 {background: url('../images/main_bkgrd2.png') repeat-x #fff; padding: 35px 0 1px 0;} #main.nobkgrd {background: #fff; padding: 20px 0 1px 0;} #mainalt {clear: both; position: relative; width: 100%; height: auto; margin-bottom: 73px; padding: 1px 0;} #maincontent {width: 960px; margin: 0 auto; padding: 30px 0 0;} #maincontentint {position: relative; width: 960px; margin: 0 auto; padding: 15px 0 0;} #maincontentalt {width: 960px; margin: 0 auto;} /*-- ONE COLUMN --*/ #main1column1 {float: left; width: 960px; height: auto;} /*-- TWO COLUMN : WIDE LEFT, SKINNY RIGHT --*/ #main2column1 {float: left; width: 624px; height: auto; padding: 0 10px 0 0;} #main2column2 {float: right; width: 290px; height: auto; padding: 0 0 0 10px;} /*-- TWO COLUMN : SKINNY LEFT, WIDE RIGHT --*/ #main2Bcolumn1 {float: left; width: 290px; height: auto; padding: 0 22px 0 0;} #main2Bcolumn2 {float: right; width: 623px; height: auto; padding: 0 0 0 22px;} /*-- TWO COLUMN : SUPER SKINNY LEFT, WIDE RIGHT --*/ #main2Acolumn1 {float: left; width: 265px; height: auto; padding: 45px 25px 0 0; background: url('../images/main_sidebar_bkgrd.png') no-repeat right;} #main2Acolumn2 {float: right; width: 623px; height: auto; padding: 45px 0 0 22px;} /*-- TWO COLUMN : EQUAL WIDTH --*/ #equalcolumn1 {float: left; width: 458px; height: auto; padding: 0 22px 0 0;} #equalcolumn2 {float: right; width: 458px; height: auto; padding: 0 0 0 22px;} /*-- THREE COLUMN --*/ #main3column1 {float: left; width: 290px; height: auto; padding: 0 22px 0 0;} #main3column2 {float: left; width: 290px; height: auto; padding: 0 22px;} #main3column3 {float: right; width: 290px; height: auto; padding: 0 0 0 22px;} /*-- FOUR COLUMN --*/ #main4column1 {float: left; width: 207px; height: auto; padding: 0 22px 0 0;} #main4column2 {float: left; width: 207px; height: auto; padding: 0 22px;} #main4column3 {float: left; width: 207px; height: auto; padding: 0 22px;} #main4column4 {float: left; width: 207px; height: auto; padding: 0 0 0 22px;} #entry {clear: both; width: 100%; height: auto; padding-bottom: 1.0em; margin-bottom: 1.0em;} #bigbox {float: left; width: 590px; height: auto; border: solid 1px #ccc; background: #fff; padding: 15px;} #smallbox {width: 270px; height: auto; border: solid 1px #ccc; background: eee; padding: 10px;} #testimonial {width: 228px; height: 201px; padding: 50px 31px 0 31px; background: url(../images/decoration_wordbubble.png) no-repeat;} /*-- PORTFOLIO --*/ #boxgridcontainer {float: left; display: block; width: 301px; height: 273px; background: url(../images/portfolio_bkgrd.png) no-repeat; margin: 0 27px 32px 0; padding: 0;} #boxgridcontainerlast {float: left; display: block; width: 301px; height: 273px; background: url(../images/portfolio_bkgrd.png) no-repeat; margin: 0 0 32px 0;} .boxgrid h6, h6 a, h6 a:visited, h6 a:active { margin:5px 7px 0 7px; color:#FFF; } .boxgrid { float:left; display: inline; width:285px; height:245px; overflow:hidden; position:relative; margin: 7px 0 0 8px;} .boxgrid img {} .boxgrid img:hover { } .boxgrid p { padding:0 10px; color:#afafaf; } .boxcaption {position:absolute; background:#000; height:35px; width: auto; opacity:.8; filter:alpha(opacity=80); } .slideleft .boxcaption {top:10px;} .captionfull .boxcaption { top:260px; left:0; } .caption .boxcaption { top:180px; left:0; } #portfolio-pager {position: relative; float:left; width:auto; font-size: 12px;} #portfolio-pager li { display:inline;} #portfolio-pager li a {color: #0b6d96; text-decoration: none; border: 1px solid #F1F3F2; padding: 10px; margin-right: 10px;} #portfolio-pager li a:hover {color: #000; border: solid 1px #000; padding: 10px;} #portfolio-pager li span {color: #000; border: solid 1px #000; padding: 10px; margin-right: 10px;} /*-- PRODUCTS --*/ /*-- IMAGE ROTATOR --*/ #imagecontainer {padding: 8px 9px; width: 604px; height: 420px; background: url(../images/product_bkgrd.png) no-repeat;} .imagerotate { width: 604px; height: 393px; float: left; background: #333; position: relative; overflow: hidden; color: #fff;} .imagerotate p {font-size: 13px; padding: 10px 10px 15px 10px; margin: 0px; height: auto; width: auto; line-height: 16px;} .imagerotate .desc{position: absolute; bottom: 0; left: 0; width: 100%;display: none;} .imagerotate .block{width: 100%;background: #000;border-top: 1px solid #000; margin: 0; padding: 0;} .imagerotate a.collapse {background: url(../images/decoration_showhide.png) no-repeat left top; height: 24px; width: 83px; text-indent: -99999px; position: absolute; top: -24px; right: 20px;} .imagerotate a.show {background-position: left bottom;} .controlheader {float: left; display: block; font-size: 12px; color: #555; text-transform: uppercase; margin-top: 10px; line-height: 18px; font-weight: 500;} #controlwrapper {float: left; width: 250px; line-height: 18px; margin: 10px 0 0 3px;} #controlsuperwrapper {float: left; width: 100%; margin: 0 0 20px 5px; padding-bottom: 20px; border-bottom: solid 1px #c7c7c7;} .imagecontrols a {text-decoration: none; font-size: 12px; color: #777; text-decoration: none; line-height: 18px;} .imagecontrols a:hover {color: #222;} .imagecontrols ul {margin: 0; padding: 0; list-style: none; } .imagecontrols ul li{float: left; display: inline; padding: 0 4px;} .imagecontrols ul li.active a {cursor: default; color: #222; border-bottom: solid 2px #ffaa00;} .imagecontrols ul li .block {float: left; margin-left: 0; padding: 0;} .imagecontrols ul li p {display: none;} /* TABS */ ul.tabs {margin: 0;padding: 0;list-style: none;height: 27px; /*--Set height of tabs--*/width: auto;background: url(../images/decoration_price_tab_bkgrd.png) no-repeat; background-position: bottom;} ul.tabs li {float: left;margin: 0 6px;padding: 0 0px;height: 27px;line-height: 34px; /*--Vertically aligns the text within the tab--*/margin-bottom: -2px; /*--Pull the list item down 1px--*/ overflow: hidden;position: relative;font-size: 13px; text-shadow: 0 1px 1px #fff;} ul.tabs li a {text-decoration: none;color: #888;display: block;padding: 0;outline: none;} ul.tabs li a span {color: #518E02;} ul.tabs li.active a span {color: #eee;} ul.tabs li a:hover {text-indent: 0px;background-image: none;text-decoration: none;color: #333;border: none;} html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/border: none; color: #eee; background: url(../images/decoration_price_tab.png) no-repeat #fff; width: 87px; text-align: center; text-shadow: none;} ul.tabs li.active a{color: #eee; font-size: 1px; border: none; text-transform: uppercase; font-weight: 500; background: url(../../images/pricetab-2.png) no-repeat; text-align: center;} #tab_container {clear: both;float: left; width: 290px; height: auto; background: url(../images/decoration_tabcontent_bottom.png) no-repeat #eee; background-position: bottom;} .tab_content {clear: both; padding: 15px 10px 0 10px;} .tab_contentheader {font-size: 12px; color: #222; font-style: italic; margin: 5px 0 15px; line-height: 19px; background: url(../images/decoration_grayline2.png) repeat-x; background-position: bottom; padding: 0 0 15px;} .bannerabsolute {position: relative; left: -15px;} /* PRICING AREA */ .pricetable {margin-top: 0;margin-bottom: 20px;border: 1px #ccc solid;border-bottom: none; width: 100%;} .pricetable thead th {background: #e2e2e2 none repeat scroll 0 0;border-top: 1px #fff solid;} .pricetable thead th {border-bottom:1px #bbb solid;} .pricetable th {border-bottom: 3px #bbb solid;padding: 7px 15px;} .pricetable td {background: #f1f1f1;border-top: 1px #fff solid; border-bottom:1px #ccc solid;color: #777;padding: 7px 15px; vertical-align: middle;} .pricetable tr.even td {background: #f8f8f8; border-top: 1px #fff solid; border-bottom:1px #ccc solid;} .specstable {clear: both; border-collapse: collapse; margin: 0 0 25px 0; padding: 5px 0; background: url(../images/decoration_grayline2.png) repeat-x; background-position: top;} .specstable td {padding: 15px 10px; text-align: left; font-size: 11px; color: #222; line-height: 19px; vertical-align: top;} .specstable a {color:#0b6d96; text-decoration:none; outline:none;} /*-- FOOTER --*/ #footer {clear: both; width: 100%; height: 280px; background: url(../images/footer_bkgrd.png) repeat-x #222;} #footercontent {width: 960px; height: 280px; margin: 0 auto; background: url(../images/footer_contentbkgrd.png) no-repeat;} #footercolumn1 {float: left; width: 290px; height: 200px; margin-right: 44px; position: relative; top: 35px;} #footercolumn2 {float: left; width: 290px; height: 200px; margin-right: 44px; position: relative; top: 35px;} #footercolumn3 {float: right; width: 290px; height: 200px; margin: 0; position: relative; top: 35px;} #footercolumn4 {float: left; width: 580px; height: 200px; margin: 0; position: relative; top: 35px;} .navlist {list-style: none; margin: 0; float: left; width: 290px;} .navlist li {float: left; width: 145px;} /*-- COPYRIGHT --*/ #copyright {clear: both; width: 100%; height: 55px; background: url(../images/footer_bkgrd.png) repeat-x #222; background-position:bottom; margin-bottom: 0px; padding-bottom: 0px;} #copyrightcontent {width: 960px; height: 55px; margin: 0 auto; background: url(../images/footer_contentbkgrd.png) repeat-x #222; background-position:bottom; margin-bottom: 0px; padding-bottom: 0px;} .sharelist {list-style: none; margin: 6px 0 0 0;} .sharelist li {float: left; display: block;} #copybottom {clear: both; height: 24px; background: #ccc; border-top: solid 1px #fff;} /* TESTING DOWN HERE */