/*
Designed by VReplay (2009)
http://vreplay.com/
*/

/* global */
body {
	background: #fff;	
}

body,select,input,textarea,button{
	font: 12px/1.7 Arial, Helvetica, 'Sans-Serif';
	color: #6a6a6a;
}	

a,#location h3 a:hover,#foot-nav a:hover,#foot-nav li.on a{
	color: #FF6000;
	text-decoration: none;
}

a:hover {
	color: #333;
}

input,select,button{
	vertical-align:middle;
}

img,object,embed{
	vertical-align: top;
}

small {
	font-size: 11px;
}

.color-white{
	color:#fff;
}

.weight{
	font-weight: bold;
}

.bigger{
	font-size: 14px;
}

/* header */
#header-wrapper{
	background: url(images/header-wrapper.gif) #222 repeat-x;
}
#header{
	height: 190px;
	margin: 0 auto;
	position: relative;
	width: 960px;
}
#logo{
	float: left;
	padding: 0 0 0 10px;
}

#top-nav{
	float: right;
}
#top-nav ul{
	float: left;
}
#top-nav li{
	background: url(images/top-nav-line.gif) right top repeat-y;
	padding-right: 2px;
}
#top-nav li.last{
	background: none;
	margin: 0;
	padding: 0;
}
#top-nav li,#top-nav li span,#main-nav li,#top-nav a,#client-login a,#client-login a span{
	float: left;
}
#top-nav a{
	background: url(images/top-nav.gif) repeat-x;
	cursor:pointer;
}
a#nav-ask{
	background: url(images/top-nav.gif) 0 -60px no-repeat;
}
a#nav-live-chat{
	background: url(images/top-nav.gif) 100% -120px no-repeat;
}
#top-nav span{
	background: url(images/icon-top-nav.gif) 10px 10px no-repeat;
	padding:0 12px 0 33px;
}
#nav-order span{
	background-position:  10px -20px;
}
#nav-live-chat span{
	background-position: 10px -50px;
}
#top-nav a:hover,#top-nav li.on a{
	background-position:0 -30px;	
}
#top-nav #nav-ask:hover,#top-nav li.on a{
	background-position: 0 -90px;	
}
#top-nav #nav-live-chat:hover,#top-nav li.on a#nav-live-chat{
	color: #fff;
	background-position: 100% -150px;
}
#top-nav a:hover,#top-nav li.on a,#top-nav #nav-live-chat strong,#top-nav li.on a strong{
	color:#FF7E00;
}

#client-login{
	float: right;
	margin-left: 10px;
}
#client-login a{
	background: url(images/client-login.gif) no-repeat;	
	padding-left: 25px;
}
#client-login a span{
	background: url(images/client-login.gif) 100% -30px no-repeat;
	cursor:pointer;
	height: 30px;
	padding-right: 14px;
}
#client-login a:hover,#client-login .on{
	background-position: 0 -60px;
}
#client-login a:hover span,#client-login .on span{
	background-position: 100% -90px;
}
#top-nav span,#client-login a span{
	font-size: 10px;
	height: 22px;
	padding-top:8px;
}
#top-nav a,#client-login a{
	color: #fff;
}
#client-login a:hover,#client-login li.on a,#client-login .on span{
	color: #FF6000;
}

/* main navigation */
#main-nav{
	bottom:100px;
	position: absolute;
	padding: 30px 0 0;
	right: 0;
}
#main-nav ul,#main-nav li,#main-nav a,#main-nav span{
	float: left;
}
#main-nav a{	
	color: #fff;
	font-size: 14px;
	padding-left: 5px;
}
#main-nav span{
	cursor: pointer;
	height: 26px;
	padding: 3px 11px 0 6px
}
#main-nav a:hover{
	color:#FF6000;
}
#main-nav li.on a{
	background: url(images/main-nav-left.gif) no-repeat;	
}
#main-nav li.on a span{
	background: url(images/main-nav-right.gif) right top no-repeat;
	color: #fff;
}

/* banner */
#banner-wrapper{
	background: url(images/banner-wrapper.gif) repeat-x;
	padding:10px 0;
}
#banner-wrapper .inner{
	background: url(images/inner.jpg) center top no-repeat;
	height: 230px;
}
#banner{
	background: url(images/banner.jpg) no-repeat;
	height: 330px;
	margin: 0 auto -150px;
	position: relative;
	padding: 10px 10px 0;
	top: -60px;
	width: 940px;
	overflow: hidden;
}

#slide{
	position: relative;
	height: 290px;
	overflow: hidden;
}
#banner dt{	
	clear: right;
	float: right;
	width: 200px;
}
#banner dt span,#slide-order a{
	background: url(images/slide-bg.gif) no-repeat;
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 18px;
	height: 52px;
	padding: 20px 0 0 54px;
}
#banner dt.on span{
	background-position: -200px 0;
	color: #FF6000;
}
#banner dd{
	color: #FFE4B6;	
	height: 265px;
	left: 0;
	position: absolute;
	padding: 25px 0 0 20px;
	top: 290px;
	width: 720px;
}
#slide dd.on{
	z-index: 2;
}
#banner dd.slide-bg-1{
	background: url(images/banners/1/bg.jpg) no-repeat;
}
#banner dd.slide-bg-2{
	background: url(images/banners/2/bg.jpg) no-repeat;
}
#banner dd.slide-bg-3{
	background: url(images/banners/3/bg.jpg) no-repeat;
}
#banner #slide-control{
	background-position: 0 -72px;
}
#banner dt.on span#slide-control{
	background-position: -200px -72px;
}
#banner #slide-promise{
	background-position: 0 -144px;
}
#banner dt.on span#slide-promise{
	background-position: -200px -144px;
}
#banner #slide-order{
	background-position: 0 -216px;
}
#slide h3{
	color: #fff;
	font-size:30px;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 15px;
}
#slide h3 span{
	color: #000;
}
#slide dd p{
	margin-bottom: 20px;
}
#slide .more a{
	color: #fff;
	font-size:14px;
	font-weight: bold;
}
#slide .more a:hover{
	color: #000;
}
#slide-order{	
	float: right;
	margin-top:-74px;
	position: relative;	
	width:200px;
}
#slide-order a{ 
	background-position: 0 -216px;
}
#slide-order a:hover{ 
	background-position: -200px -216px;
}

/* user price list */
#price{
	background: url(images/price.gif) no-repeat;
	height: 140px;
	line-height: 1.1;
	margin: 40px auto 30px;
	width: 940px;
}
#price ul{
	padding:16px 0 0 6px;
}
#price li{
	color: #808080;
	font-size:10px;
	float: left;
	margin-right: 2px;
	text-align: center;
	text-transform: uppercase;
	width: 148px;
}
#price h4{
	color: #fff;
	font-size: 24px;
	font-weight: bold;
}
#price p em{
	color: #FF6000;
	display: block;
	font-style: normal;
	font-size: 24px;
	font-weight: bold;
}
#price p a,#price li.more a{
	background: url(images/btn-price.gif) no-repeat;
	color: #fff;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	margin: 0 auto;
	width:94px;
}
#price p a{
	margin-top:3px;
}
#price p a:hover,#price li.more a:hover{
	background-position: 0 -30px;
	color: #FF6000;
}
#price li.more{
	margin: 0;
	padding: 35px 0 0 20px;	
}
#price li.more a{
	background-position: 0 -60px;
	font-size: 24px;
	height: 48px;
	line-height: 48px;
	width: 128px;
}
#price li.more a:hover{
	background-position: 0 -108px;
}

/* Worldwide Locations and What's Included */
#distributing{
	background: url(images/distributing.gif) repeat-x;
	height: 378px;
	margin-bottom: 20px;
}
#distributing .inner{
	margin: 0 auto;
	padding: 20px 0 0;
	width:940px;
}

#location{
	float: left;
	position: relative;
	width: 640px;
	z-index:2;
}
#location h3,#included h3{
	background: url(images/location-title.gif) no-repeat;
	font-size: 18px;
	font-weight: bold;
	height: 40px;
	line-height: 40px;
	margin: 0 0 -1px 2px;
	position: relative;
	text-transform: uppercase;
	text-align: center;
	text-shadow:1px 1px 1px #000;
	width: 268px;
	z-index: 2;
}
#location h3 a{
	color: #fff;
}
#location-map{
	background: url(images/location-map.jpg) no-repeat;
	margin-bottom: 10px;
	position: relative;
	height:234px;
	width: 100%;
}
#location dt{
	cursor: pointer;
	height: 19px;
	overflow: hidden;
	position: absolute;
	text-indent:-2000px;
	width: 13px;
	z-index:4;
}
#location dd{
	background: url(images/pop-bottom.gif) left bottom no-repeat;
	display:none;
	font-size: 12px;
	padding-bottom: 14px;
	position: absolute;
	line-height: 1.2;
	width: 145px;
}
#location .pop{
	background: url(images/pop-top.gif) no-repeat;
	padding: 10px 10px 3px;
}
#location dd a:hover{
	color:#fff;
}
.pop h4{
	color: #fff;
	font-size: 14px;
	font-weight: bold;
}
#area1{
	left: 119px;
	top: 165px;
}
#area1-content{
	bottom:72px;
	left: 119px;
}
#area2{
	left: 132px;
	top: 177px;
}
#area2-content{
	bottom:60px;
	left: 132px;
}
#area3{
	left: 198px;
	top: 178px;
}
#area3-content{
	bottom:60px;
	left: 198px;
}
#area4{
	left: 227px;
	top: 144px;
}
#area4-content{
	bottom:96px;
	left: 227px;
}
#area5{
	left: 253px;
	top: 136px;
}
#area5-content{
	bottom:102px;
	left: 253px;
}
#area6{
	left: 269px;
	top: 152px;
}
#area6-content{
	bottom:85px;
	left: 269px;
}
#area7{
	left: 252px;
	top: 175px;
}
#area7-content{
	bottom:63px;
	left: 252px;
}
#area8{
	left: 506px;
	top: 104px;
}
#area8-content{
	bottom:135px;
	left: 506px;
}
#area9{
	left: 528px;
	top: 100px;
}
#area9-content{
	bottom:138px;
	left: 528px;
}

#included{
	background: url(images/included.gif) no-repeat;
	float: right;
	height: 300px;
	padding: 0 20px;
	position: relative;
	width:240px;
}
#included h3{
	background: none;
	color: #FF6000;
	margin: 0 0 10px;
	text-align: left;	
	text-shadow:1px 1px 1px #fff;
	width:200px;
}
#included li,#side-included li{
	background: url(images/icon-right.gif) 0 6px no-repeat;
	color: #6D533E;
	padding-left: 22px;
	width: 160px;
}
#included li strong{
	color: #261D14;
}
#included .more,#side-included .more{
	position:absolute;
	right: 0;
	top: 90px;
}
#included .more a,#side-included .more a{
	background: url(images/included-more.gif) no-repeat;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: 90px;
	line-height: 1.2;
	padding: 60px 0 0;
	text-align: center;
	width: 70px;
}
#included .more a:hover{
	background-position: -70px 0;
	color: #7B3104;
}

/* center bottom area */
#section{
	margin: 0 auto 60px;
	width: 940px;
}

.company{
	float: left;
	margin-right: 40px;
	width: 270px;
}
.company h3,.testimonial h3,.login h3{
	background: url(images/company-h3.gif) 0 3px no-repeat;
	color: #333;
	font-size: 18px;
	font-weight: bold;
	padding-left: 35px;
}
.company li a{
	float: left;
}
.company li img{
	bottom: -4px;
	float: left;
	margin: 0 0 0 5px;
	position: relative;
}

.testimonial{
	float: left;
	width: 284px;
}
.testimonial h3{
	background-image: url(images/testimonial-h3.gif);
}
.testimonial h3 a{
	color: #333;
}
.testimonial blockquote{
	background: url(images/quotation_first.gif) no-repeat;
	line-height: 1.5;
	margin-bottom: 25px;
	text-indent: 20px;
}
.testimonial blockquote span.last{
	background: url(images/quotation_last.gif) no-repeat;
	display:inline-block;	
	height:10px;
	margin:5px 0 0 5px;
	width: 12px;
}
.testimonial cite,#remark-wrapper cite{
	font-style: normal;
}

.login{
	float: right;
	width: 300px;
}
.login ul{
	margin-bottom: 20px;
}
.login h3{
	background-image: url(images/login-h3.gif);
}
.login li{
	margin-bottom: 8px;
}
.login input{
	background: #EEEEEE;
	border: 0;
	margin-left: 5px;
	padding: 6px 5px;
	width: 170px;
}
.login button {
	background: url(images/btn-login.gif) no-repeat;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	text-align: center;
	width: 102px;
}
.login input.checkbox,.entry .login .checkbox input.button{
	background: none;
	border: 0;
	padding: 0;
	width:auto;
}

/* footer */
#footer-wrapper{
	background: #434343;
}
#footer{
	background: url(images/footer.jpg) no-repeat;
	margin: 0 auto;
	padding: 22px 0 20px;
	width: 940px;
}

#foot-nav{
	float: left;
	margin-right: 30px;
	width: 157px;
}
#foot-nav h3{
	color: #fff;
	font-weight: bold;
	font-size: 14px;
}
#foot-nav a{
	color: #999;
}

.copartner{
	float:left;
	margin-right: 60px;
	width: 220px;
}
.copartner li{
	margin-bottom: 12px;
}

.us-nav{
	float: left;
	width: 190px;
}
.us-nav ul{
	margin-top: -10px;
}
.us-nav li{
	background: url(images/us-nav-line.gif) center bottom no-repeat;
	font-size: 0;
	padding: 20px 0 20px 10px;
}
.us-nav li a{
	background: url(images/follow-us.gif) no-repeat;
	color: #999;
	cursor:pointer;
	display:block;
	font-size: 11px;
	line-height: 1;
	padding-bottom: 8px;
	padding-left: 53px;
}
.us-nav li strong{
	display: block;
	font-size: 14px;
}
.us-nav li a:hover{
	color: #fff;
}
.us-nav .join-us{
	background: none;
}
.us-nav .join-us a{
	background-image: url(images/join-us.gif);
}

#copyright{
	float: right;
	font-size: 10px;
	text-align: right;
	padding: 10px 30px 0 0;
	width: 210px;
}
#copyright img{
	margin-left: 10px;
}

/* internal page */
#title-wrapper{
	background: url(images/title-wrapper.gif) repeat-x;
	height: 22px;
	position: relative;
	width: 100%;
}
#title{
	background: url(images/title.jpg) no-repeat;
	height: 45px;
	margin:0 0 0 -480px;;
	position: absolute;
	padding: 20px 30px 0;
	top: -50px;
	left: 50%;
	width: 900px;
}
#title h2{
	color: #fff;
	float: left;
	font-size: 24px;
	font-weight: bold;
}
#crumb{
	color: #333;
	float: right;
	font-size: 12px;
	font-weight: bold;
	padding: 8px 0 0;
}
#crumb li{
	float: left;
	padding-left: 5px;
}
#crumb a{
	color: #fff;
}
#crumb a:hover{
	color: #333;
}

/* center of page */
#container-wrapper{
	background: url(images/container-wrapper.gif) #F5F5F5 repeat-x;
	padding-bottom: 50px;
}
#container{
	background: url(images/container.jpg) center top no-repeat;	
}
#main-wrapper{
	background: url(images/main-wrapper.jpg) #fff no-repeat;	
	margin: 0 auto;
	position: relative;
	top: -7px;
	width: 940px;
}
#main{
	background: url(images/main.gif) left bottom no-repeat;
	padding: 40px 20px 20px;
}

/* right area */
#main-bar{
	float: left;
	width: 590px;
}

/* price list */
.quotation{
	margin-bottom: 40px;
	width: 100%;
}
.quotation-prompt{
	color: #333;
	font-size:10px;
	line-height: 1.5;
	padding-top: 8px;
	padding-right: 24px;
	text-align: right;
}
.quotation-prompt strong{
	display: block;
	font-size:14px;
	font-weight: bold;
}
.quotation ul{
	color: #555;
	float: left;
	overflow: hidden;
	width: 115px;
}
.quotation .last{
	height: 30px;
}
.quotation .time{
	background: url(images/time-top.gif) #3A3A3A no-repeat;
	width: 116px;
}
.quotation .time li{	
	background: url(images/quotation-line.gif) center bottom no-repeat;	
	border-right: 1px solid #fff;	
	float: left;
	width:115px;
	font-size:14px;
}
.quotation .time li.bg-border{
	border-color: #FFD6A9;
}
.quotation .time li.last{
	background: url(images/time-bottom.gif) left bottom no-repeat;
	overflow:hidden;
}
.quotation .quantity-right{
	width: 20px;
}
.quotation li{
	height: 36px;
	line-height: 36px;
	margin-right: 1px;
	text-align: center;
	width:115px;
}
.quotation li.first{
	color: #ff6000;
	font-size: 12px;
	font-weight: bold;
	height: 75px;
	line-height: 1.2;
}
.quotation .quantity{
	width: 105px;
}
.quotation .quantity li{
	font-size: 14px;
	padding-left: 10px;
	text-align: left;
}
.quotation .quantity li.bg{
	background: url(images/bg-left.gif) #FFD6A9 no-repeat;
}
.quotation .quantity-right li{
	width: auto;
}
.quotation .quantity-right .bg{
	background: url(images/bg-right.gif) #FFD6A9 right top no-repeat;
}
.quotation li a{
	color: #ccc;
	display: block;
	width: 100%;
	height: 36px;
}
.quotation li a:hover{
	color: #fff;
}
.quotation ul h3{
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	padding: 10px 0 0;
}
.quotation ul.bg{
	background: url(images/bg-right.gif) #FFD6A9 right top no-repeat;
}
.quotation ul.bg li.first{
	background: url(images/bg-left.gif) no-repeat;
}
.quotation ul.tail li{
	background: url(images/quotation-tail.gif) #1C1C1C left bottom no-repeat;
}
.quotation ul.tail li.first{
	background: none;
}

/* Control Panel Access */
.entry{
	background: url(images/entry.jpg) no-repeat;
	height: 230px;
	margin: 0 auto 50px;
	padding: 40px 0 0;
	width: 570px;
}
.entry-explain{
	float: left;
	line-height: 1.2;
	padding: 169px 0 0;
	text-align: center;
	width: 284px;
}
.entry-explain h4{
	color: #FF6000;
	font-size: 14px;
	font-weight: bold;
}
.entry-explain p{
	color: #333;
	font-size: 10px;
}
.entry .login{
	width: 260px;
}
.entry .login input{
	background: #fff;
	border:1px solid #D1D1D1;
	width: 150px;
}

/* BENEFITS */
.benelux h3{
	background: url(images/dot-x.gif) left bottom repeat-x;
	color: #333;
	font-size:24px;
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 15px;
}
.item{
	margin-bottom: 34px;
	width: 100%;
}
.item-left{
	float: left;
	text-align: right;
	width: 40px;
}
.item-rightpricing{
	float: right;
	line-height: 1.5;
	padding: 0 0 10 10;
	width: 520px;
	border: 1px solid #FFFFFF;
}
.item-rightpricing h4{
	color: #333;
	font-size:14px;
	font-weight: bold;
}
.item-right{
	float: right;
	line-height: 1.5;
	padding: 10px;
	width: 520px;
	border: 1px solid #FFFFFF;
}
.item-right h4{
	color: #333;
	font-size:14px;
	font-weight: bold;
}
.item-right input{
	float: right;
	padding: 3px;
	border: 2px solid #CCC;
	background-color: #fff;
	margin: 5px;
	width: 200px;
}

.item-right input.button{
	
}

.item-normal{
	line-height: 1.5;
	padding-left: 10px;
	padding-right: 10px;
}
.item-normal h4{
	color: #333;
	font-size:14px;
	font-weight: bold;
}
.item-right-border{
	float: right;
	line-height: 1.5;
	border: 1px solid #ff6000;
	background-color: #ffeadd;
	padding: 10px;
	width: 520px;
}
.item-right-border h4{
	color: #333;
	font-size:14px;
	font-weight: bold;
}

/* right area */
#side-bar{
	float: right;
	width: 280px;
}
.mode{
	background: url(images/mode-top.gif) no-repeat;
	margin-bottom: 30px;
	padding-top: 4px;
}
.mode-inner{
	background: url(images/mode-bg.gif) #D8D8D8 repeat-x;
}
.mode-main{
	background: url(images/mode-bottom.gif) left bottom no-repeat;
	padding: 0 20px 20px;
	position: relative;
	width: 240px;
}
.mode h3{
	background: url(images/mode-line.gif) left bottom repeat-x;
	color: #555;
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 10px;
	text-transform: uppercase;
	padding: 7px 20px 1px;
	text-shadow:1px 1px 1px #fff;
}

.darkmode{
	background: url(images/darkmode-top.gif) no-repeat;
	margin-bottom: 30px;
	padding-top: 4px;
}
.darkmode-inner{
	background: url(images/darkmode-bg.gif) #333 repeat-x;
}
.darkmode-main{
	background: url(images/darkmode-bottom.gif) left bottom no-repeat;
	padding: 0 20px 20px;
	position: relative;
	width: 240px;
}
.darkmode h3{
	background: url(images/darkmode-line.gif) left bottom repeat-x;
	color: #FFF;
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 10px;
	padding: 7px 20px 1px;
	text-shadow:1px 1px 1px #000;
}

#side-included li{
	background-image: url(images/icon-right.gif);	
	color: #777;
}
#side-included li strong{
	color: #333;
}
#side-order li{
	color: #CCC;
}
#side-order li strong{
	color: #FFF;
}
#side-included .more{
	top:35px;
}
#side-included .more a{	
	background-position: -140px 0;
}
#side-included .more a:hover{	
	background-position: -210px 0;
	color: #fff;
}
.sort{
	padding: 13px 0 24px;
}
.sort .img{
	float: right;
}
.sort ul{
	margin-top: -5px;
	width: 170px;
}
.sort ul li{
	background: url(images/sort-line.gif) left bottom repeat-x;
}
.sort a{
	color: #777;
	display: block;
	width: 100%;
	padding: 4px 0 6px;
}
.sort a:hover{
	color: #333;
}
.sort-sep{
	background: url(images/sort-first.gif) left bottom repeat-x;
	padding-left:20px;
	padding-right:20px;
	margin: 0 -20px;
}
.sort-first{
	background: url(images/sort-first.gif) left bottom repeat-x;
	padding-left:20px;
	padding-right:20px;
	margin: 0 -20px;
}
#side-location h3{
	margin:0;
}
#side-location .sort ul{
	text-transform: uppercase;
}

/*  client remark */
#remark{
	background: url(images/remark-top.gif) #D4D4D4 no-repeat;
}
#remark blockquote{
	background: url(images/remark-bottom.gif) left bottom no-repeat;
	padding: 10px 15px 40px;
}
.remark-author{
	padding:10px 15px 0;
}