html,body{
height: 100%;
}
body{
background:url('/images/completesolution/page_bg.jpg');
margin:0;
}
.boxclear{
font-size:1px;
clear:both;
}
a{
color:#fff;
text-decoration:none;
}
a:hover{
text-decoration:none;
}
img{
border:none;
}
ul,li{
margin:0;
padding:0;
list-style-type:none;
}
#completesolution, #completesolution_footer{
color:#fff;
font-family: 'Titillium Web', sans-serif;
font-size: 16px;
line-height: 18px;
}
#completesolution{
min-height: 100%;
height: auto !important;
margin-bottom:-60px;;
}
#completesolution h1,
#completesolution h2,
#completesolution h3,
#completesolution h4,
#completesolution h5,
#completesolution h6{
margin:0;
padding:0;
}
#completesolution #completesolution-wrapper{
width:1300px;
margin:0 auto;
position: relative;
}
.yellow_lines{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
width:1300px;
height:100%;
margin:0 auto;
overflow:hidden;
border-left:1px solid #febd17;
border-right:1px solid #febd17;
}
.yellow{
color:#febd17;
}

/* --- STEP 1 BG --- */
#completesolution .headerimg{
width:1300px;
height:735px;
position:absolute;
z-index:0;
left:50%;
top:85px;
margin-left:-650px;
}

/* --- STEP 2 BG --- */
#completesolution.step2_1{
background:url('/images/completesolution/step2_1.jpg') center 85px no-repeat;
}
#completesolution.step2_2{
background:url('/images/completesolution/step2_2.jpg') center 85px no-repeat;
}
#completesolution.step2_3{
background:url('/images/completesolution/step2_3.jpg') center 85px no-repeat;
}
#completesolution.step2_4{
background:url('/images/completesolution/step2_4.jpg') center 85px no-repeat;
}
#completesolution.step2_5{
background:url('/images/completesolution/step2_5.jpg') center 85px no-repeat;
}
#completesolution.step2_6{
background:url('/images/completesolution/step2_6.jpg') center 85px no-repeat;
}
#completesolution.step2_7{
background:url('/images/completesolution/step2_7.jpg') center 85px no-repeat;
}
#completesolution.step2_8{
background:url('/images/completesolution/step2_8.jpg') center 85px no-repeat;
}
#completesolution.step2_9{
background:url('/images/completesolution/step2_9.jpg') center 85px no-repeat;
}

/* --- STEP 3 BG --- */
#completesolution.step3_1{
background:url('/images/completesolution/step3_1.jpg') center 85px no-repeat;
}
#completesolution.step3_2{
background:url('/images/completesolution/step3_2.jpg') center 85px no-repeat;
}
#completesolution.step3_3{
background:url('/images/completesolution/step3_3.jpg') center 85px no-repeat;
}
#completesolution.step3_4{
background:url('/images/completesolution/step3_4.jpg') center 85px no-repeat;
}
#completesolution.step3_5{
background:url('/images/completesolution/step3_5.jpg') center 85px no-repeat;
}
#completesolution.step3_6{
background:url('/images/completesolution/step3_6.jpg') center 85px no-repeat;
}
#completesolution.step3_7{
background:url('/images/completesolution/step3_7.jpg') center 85px no-repeat;
}
#completesolution.step3_8{
background:url('/images/completesolution/step3_8.jpg') center 85px no-repeat;
}
#completesolution.step3_9{
background:url('/images/completesolution/step3_9.jpg') center 85px no-repeat;
}

/* --- STEP 4 BG --- */
#completesolution.step4_1{
background:url('/images/completesolution/step4_1.jpg') center 85px no-repeat;
}
#completesolution.step4_2{
background:url('/images/completesolution/step4_2.jpg') center 85px no-repeat;
}
#completesolution.step4_3{
background:url('/images/completesolution/step4_3.jpg') center 85px no-repeat;
}
#completesolution.step4_4{
background:url('/images/completesolution/step4_4.jpg') center 85px no-repeat;
}
#completesolution.step4_5{
background:url('/images/completesolution/step4_5.jpg') center 85px no-repeat;
}
#completesolution.step4_6{
background:url('/images/completesolution/step4_6.jpg') center 85px no-repeat;
}
#completesolution.step4_7{
background:url('/images/completesolution/step4_7.jpg') center 85px no-repeat;
}
#completesolution.step4_8{
background:url('/images/completesolution/step4_8.jpg') center 85px no-repeat;
}
#completesolution.step4_9{
background:url('/images/completesolution/step4_9.jpg') center 85px no-repeat;
}

/* --- BRAND --- */
#completesolution #brand{
height:85px;
width:100%;
background:#febd17;
position:relative;
z-index:9999;
}
#completesolution #brand .brand-content{
width:1300px;
background:#febd17;
margin:0 auto;
}
#completesolution #brand .brand-content .logo{
float:left;
width:200px;
padding:20px 0 0 100px;
}
#completesolution #brand .brand-content .guaranteed_tough{
float:right;
background:#282828;
width:1000px!important;
height:65px;
margin-top:20px;
}
#completesolution #brand .brand-content .guaranteed_tough img{
width:286px!important;
}
#completesolution #brand .brand-grey{
background:#282828;
width:30%;
height:65px;
top:20px;
right:0;
position:absolute;
z-index:0;
}

/* --- HEADER --- */
#completesolution #breadcrumb{
height:15px;
padding:5px 10px;
width:1280px;
background:#0a0a0a;
background:rgba(10,10,10,0.8);
color:#a0a0a0;
font-size:11px;
text-transform:uppercase;
}
#completesolution #breadcrumb .yourselection{
color:#febd17;
font-weight:normal;
padding-right:5px;
padding-left:30px;
text-align:left;
float:left;
}
#completesolution #breadcrumb .breadcrumb_inactive{
color:#a0a0a0;
}
#completesolution #breadcrumb .breadcrumb_active{
color:#fff;
text-decoration:underline;
}
#completesolution #content{
height:785px;
position:relative;
margin:0 auto;
}
#completesolution.step4 #content{
height:735px;
}
#completesolution #content .header-box{
width:240px;
height:735px;
background:#0a0a0a;
background:rgba(10,10,10,0.8);
padding:30px;
float:left;
}
#completesolution #content .header-box h1{
font-size:48px;
line-height:50px;
font-weight:600;
text-transform:uppercase;
color:#fff;
}
#completesolution #content .header-box h2{
font-size:30px;
line-height:30px;
font-weight:600;
text-transform:uppercase;
color:#fff;
padding:20px 0 0 0;
}
#completesolution #content .header-box h1.yellow{
color:#febd17;
}
#completesolution #content .header-box p{
margin:20px 0 0 0;
font-size:18px;
line-height:22px;
font-weight:300;
}
#completesolution #content .header-step2-completesolutions .yellow{
color:#febd17;
}

/* --- CONTENT - SELECT BOXES (STEP 1+2) --- */
#completesolution #content .content-right{
float:right;
}
#completesolution #content .select-boxes-headline{
width:360px;
padding:30px;
}
#completesolution #content .select-boxes-headline h1{
font-size:32px;
line-height:36px;
font-weight:600;
text-transform:uppercase;
color:#fff;
}
#completesolution #content .select-boxes-headline h1.yellow{
color:#febd17;
}
#completesolution #content .select-boxes-headline h2{
font-size:20px;
line-height:20px;
font-weight:600;
text-transform:uppercase;
color:#fff;
margin:0;
padding:10px 0 0 0;
}
#completesolution #content .select-boxes{
padding:35px;
height:500px;
width:360px;
position:relative;
}
#completesolution #content .select-boxes li{
width:350px;
height:90px;
position:relative;
float:left;
margin:0 0 10px 0;
background:#0a0a0a;
border:1px solid #626262;
}
#completesolution #content .select-boxes li.last-select-box{
height:100px;
background:none;
border:none;
}
#completesolution #content .select-boxes li img{
display:block;
position:absolute;
visibility:visible;
opacity:0.35;
transition:opacity 0.3s ease-out;
}
#completesolution #content .select-boxes li.active img,
#completesolution #content .select-boxes li:hover img{
visibility:visible;
opacity:1;
transition:opacity 0.3s ease-out;
}
#completesolution #content .select-boxes li h2{
position:absolute;
font-size:18px;
line-height:20px;
text-transform:uppercase;
font-weight:500;
color:#fff;
width:330px;
padding:0 10px;
margin:0;
bottom:7px;
}
#completesolution #content .select-boxes li.active h2,
#completesolution #content .select-boxes li:hover h2{
font-size:18px;
line-height:20px;
color:#febd17;
background:#000;
background:rgba(0,0,0,0.8);
text-align:center;
font-weight:600;
padding:5px 10px;
width:330px;
bottom:3px;
}
#completesolution #content #carousel_prev{
position:absolute;
top:0;
left:180px;
width:55px;
height:28px;
background:url('/images/completesolution/arrow_up.png') no-repeat;
z-index:3;
}
#completesolution #content #carousel_next{
position:absolute;
bottom:0;
left:180px;
width:55px;
height:28px;
background:url('/images/completesolution/arrow_down.png') no-repeat;
z-index:3;
}
#completesolution #content #carousel_prev.disabled{
background:url('/images/completesolution/arrow_up_disabled.png') no-repeat;
}
#completesolution #content #carousel_next.disabled{
background:url('/images/completesolution/arrow_down_disabled.png') no-repeat;
}


/* --- CONTENT - FIXING BOXES (STEP 3) --- */
#completesolution #content .fixing-boxes{
padding:35px;
height:500px;
width:360px;
position:relative;
}
#completesolution #content .fixing-boxes li{
width:350px;
height:90px;
position:relative;
float:left;
margin:0 0 10px 0;
background:#0a0a0a;
border:1px solid #626262;
-webkit-transition : border 0.5s ease-out;
-moz-transition : border 0.5s ease-out;
-o-transition : border 0.5s ease-out;
transition : border 0.5s ease-out;
}
#completesolution #content .fixing-boxes li.selected,
#completesolution #content .fixing-boxes li:hover{
border:1px solid #fff;
width:350px;
}
#completesolution #content .fixing-boxes li img{
display:block;
padding:0;
float:left;
width:90px;
opacity:1;
}
#completesolution #content .fixing-boxes li h2{
font-size:18px;
line-height:20px;
text-transform:uppercase;
font-weight:500;
color:#fff;
display:table-cell;
vertical-align:middle;
width:240px;
height:100px;
padding:0 0 0 10px;
}
#completesolution #content .fixing-boxes li p{
padding:15px;
margin:0;
border-top:2px solid #fff;
}


/* --- CONTENT - SOLUTION (STEP 4) --- */
#completesolution #headline-completesolution{
padding:15px 40px;
background:rgba(0,0,0,0.7);
}
#completesolution #headline-completesolution h1{
font-size:26px;
line-height:26px;
padding:3px 10px 0 0;
margin:0;
text-transform:uppercase;
font-weight:600;
color:#fff;
float:left;
}
#completesolution #headline-completesolution h1 .yellow{
color:#febd17;
}
#completesolution #headline-completesolution h2{
font-size:32px;
line-height:32px;
padding:0;
margin:0;
text-transform:uppercase;
font-weight:600;
color:#fff;
float:left;
}
#completesolution #product-wrapper{
width:650px;
position:relative;
padding:0;
margin:0;
float:left;
}
#completesolution #product-wrapper ul{
padding:10px 0 20px 40px;
}
#completesolution #product-wrapper ul li{
background:#151515;
border:1px solid #434343;
padding:2px;
margin:0 0 7px 0;
}
#completesolution #product-wrapper ul li .product_image{
float:left;
width:130px;
}
#completesolution #product-wrapper ul li .product_image img{
display:block;
height: 115px;
width: 115px;
}
#completesolution #product-wrapper ul li .product_short_description {
float:right;
width:470px;
}
#completesolution #product-wrapper ul li .product_long_description {
float:right;
width:455px;
opacity:1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
padding:0 15px 15px 0;
display:none;
}
#completesolution #product-wrapper ul li .product_long_description p {
font-size:13px;
line-height:15px;
margin:10px 0;
}
#completesolution #product-wrapper ul li h2{
text-transform:uppercase;
font-weight:600;
color:#febd17;
font-size:20px;
line-height:20px;
margin:0;
padding:10px 0 3px 0;
}
#completesolution #product-wrapper ul li h3{
text-transform:uppercase;
font-weight:600;
color:#fff;
font-size:16px;
line-height:16px;
margin:0;
padding:0;
height:55px;
}
#completesolution #product-wrapper ul li .active h3{
text-transform:uppercase;
font-weight:600;
color:#fff;
font-size:16px;
line-height:16px;
margin:0;
padding:0 0 15px 0;
height:auto;
}
#completesolution #product-wrapper ul li p{
font-size:14px;
}
#completesolution #product-wrapper ul li p:first-child{
margin-top:0;
}
#completesolution #product-wrapper ul li .product_short_description .show_details{
color:#febd17;
font-size:11px;
line-height:11px;
text-transform:uppercase;
font-weight:600;
padding:0 15px 0 0;
margin:0;
cursor:pointer;
width:75px;
background:url('/images/completesolution/show_details.png') right center no-repeat;
}
#completesolution #product-wrapper ul li .product_long_description .hide_details{
color:#febd17;
font-size:11px;
line-height:11px;
text-transform:uppercase;
font-weight:600;
width:70px;
margin:10px 0 0 0;
padding:0 15px 0 0;
cursor:pointer;
background:url('/images/completesolution/hide_details.png') right center no-repeat;
}
#completesolution #product-wrapper ul li .product_long_description  table{
font-size:12px;
text-align:center;
vertical-align:center;
line-height:12px;
border-collapse:collapse;
margin-top:15px;
margin-bottom:25px;
}
#completesolution #product-wrapper ul li .product_long_description  table .table_headline td{
font-weight:600;
padding: 5px 5px 7px 5px;
border-bottom:1px solid #434343;
vertical-align:middle;
font-size:11px;
}
#completesolution #product-wrapper ul li .product_long_description  table td{
border-right:1px solid #434343;
padding: 5px;
}
#completesolution #product-wrapper ul li .product_long_description  table td:last-child{
border-right:none;
}
#completesolution .quote{
float:right;
width:450px;
padding:20px 40px;
background:rgba(10,10,10,0.5);
text-align:right;
margin-top:500px;
}
#completesolution .quote p{
margin:0;
font-size:20px;
line-height:22px;
}
#completesolution .quote p.name{
text-transform:uppercase;
margin-top:20px;
font-weight:700;
font-size:22px;
}
#completesolution .quote p.name .yellow{
color:#febd17;
}
#completesolution .reevoo_badge_quote{
margin:30px 30px 0 0;
float:right;
}
#completesolution .asterisk{
font-size:14px;
text-align:center;
padding:60px 0 20px 0;
}
#completesolution .also_bought{
border-top:1px solid #febd17;
padding:40px 100px;
position:relative;
margin-top:15px;
}
#completesolution .also_bought h1{
font-size:25px;
font-weight:600;
text-transform:uppercase;
padding:0 0 30px 0;
color:#febd17;
text-align:center;
}
#completesolution .also_bought li{
float:left;
width:200px;
margin-right:20px;
}
#completesolution .also_bought li img{
width:200px;
height:200px;
display:block;
}
#completesolution .also_bought .product_text{
background:#252525;
color:#fff;
width:180px;
min-height:50px;
font-size:14px;
padding:10px;
}
#completesolution .also_bought .product_text h3{
margin-bottom:5px;
font-weight:600;
font-size:16px;
}
#completesolution .also_bought .product_text p{
margin:0;
font-size:13px;
line-height:14px;
}
#completesolution #also_bought_prev,
#completesolution #also_bought_next{
height:40px;
width:15px!important;
position:absolute;
top:170px;
border:none!important;
}
#completesolution #also_bought_prev{
background:url('/images/completesolution/navigation_arrows.png') no-repeat top left;
left:60px;
}
#completesolution #also_bought_next{
background:url('/images/completesolution/navigation_arrows.png') no-repeat top right;
right:80px;
}

/* --- OVERLAY --- */
#completesolution .open_lightbox{
cursor:pointer;
text-decoration:underline;
font-weight:700;
}
#completesolution #overlaybg {
position: fixed;
bottom: 0;
right: 0;
top: 0;
left: 0;
z-index: 99999;
width: 100%;
height: 100%;
background: #323232;
opacity: .5;
filter:alpha(opacity = 90);
cursor: not-allowed;
}
#completesolution #overlay {
position: fixed;
z-index: 99999;
background: transparent;
}
#completesolution #overlay .closeoverlay {
position: absolute;
top: 6px;
right: 17px;
cursor: pointer;
color:#000;
font-size:18px;
}
#completesolution #corded_cordless{
width:900px;
margin:0 auto;
background:#000;
color:#fff;
font-size:18px;
line-height:22px;
border:3px solid #febd17;
-moz-box-shadow: 0 0 35px #000;
-webkit-box-shadow: 0 0 35px #000;
box-shadow: 0 0 35px #000;
}
#completesolution #corded_cordless h1{
color:#000;
background:#febd17;
font-size:32px;
line-height:32px;
margin:0;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
text-align:center;
padding:15px;
}
#completesolution #corded_cordless .corded_cordless_content{
padding:20px;
}
#completesolution #corded_cordless .corded_cordless_content a{
text-align:center;
display:block;
float:left;
width:50%;
}
#completesolution #corded_cordless .corded_cordless_content a h2{
color:#febd17;
font-weight:600;
text-transform:uppercase;
font-size:38px;
padding:40px 0 20px 0;
}

/* --- FOOTER --- */
.push{
height:60px;
}
#completesolution_footer{
height:60px;
width:1300px;
margin:0 auto;
border-left:1px solid #febd17;
border-right:1px solid #febd17;
}
#completesolution_footer .footer-menu{
width:1300px;
margin:0 auto;
padding:0;
font-size:14px;
text-transform:uppercase;
position:relative;
}
#completesolution_footer .footer-menu p{
text-align:center;
}
#completesolution_footer .footer-menu .logo-gt{
float:right;
position:absolute;
right:10px;
top:0;
}

/* --- BUTTONS --- */
#completesolution .button_print{
border:1px solid #febd17;
color:#fff;
text-transform:uppercase;
padding:30px 20px;
text-align:center;
float:left;
width:255px;
margin-left:40px;
cursor:pointer;
display:block;
background:url('/images/completesolution/icon_print.png') no-repeat 20px 50%;
}
#completesolution .button_dealer{
border:1px solid #febd17;
color:#fff;
text-transform:uppercase;
padding:30px 20px;
text-align:center;
float:left;
width:255px;
margin-left:15px;
display:block;
background:url('/images/completesolution/map.png') no-repeat 20px 50%;
}
#completesolution .button_print h1,
#completesolution .button_dealer h1{
font-size:20px;
line-height:20px;
margin:0;
padding:0 0 7px 0;
font-weight:normal;
}

#completesolution .button_print h2
{
font-size:18px;
line-height:24px;
padding-left:60px;
}
#completesolution .button_dealer h2{
font-size:18px;
line-height:24px;
padding-left:45px;
}
#completesolution .button_print span,
#completesolution .button_dealer span{
color:#febd17;
}


.imgcontainer{height:90px;
background:#fff;    
display: block;
    float: left;
    opacity: 1;
    padding: 0;
	cursor:pointer;
    width: 90px;}


#ctl00_displaycontent,#ctl00_DWEmptyMaster_content{height:100%}