/* 
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto', sans-serif;
*/
@condensed:'Roboto Condensed', sans-serif;
@normal:'Roboto', sans-serif;
@arial:Arial, Helvetica, sans-serif;
@white: white; 
@green: #61BB47;
@darkgreen: #1b7601;
@brown: #544b42;
@beige:#f0f0f0;
@black60:rgba(0, 0, 0, 0.6);
@black70: rgba(0, 0, 0, 0.7); 
@white20:rgba(255, 255, 255, 0.2);
@white10:rgba(255, 255, 255, 0.1);
@disableselected:top, #bbb7b4 0%, #bbb7b4 0%, #86807c 3%, #837c75 50%, #6f6962 100%;
@disablelin:to bottom, #bbb7b4 0%,#bbb7b4 0%,#86807c 3%,#837c75 50%,#6f6962 100%;
@footh3:top, #86888d 0%,#65666d 100%;
@footh3lin:linear, left top, left bottom, color-stop(0%,#86888d), color-stop(100%,#65666d);
@footh3mx:~"startColorstr='#86888d', endColorstr='#65666d',GradientType=0";
@disablemx:~"startColorstr='#bbb7b4', endColorstr='#6f6962',GradientType=0";
@submitgrad:top, #bbb7b4 0%, #bbb7b4 0%, #807a73 3%, #7d766f 50%, #665f59 51%, #68615a 83%, #68615a 100%;
@easin04:all .4s ease-in;
@scale13:scale(1.5);
 
 .calculator{margin-top:20px;}
 .error, .calculator .blue .error{ border-color:red;}
 label.error{display:none !important;}
 
h1{color:@green;margin-top:20px; font-family:@condensed;}
h2{color:@darkgreen; font-size:2.2em; text-transform:uppercase;margin-bottom:-15px;margin-top:10px; font-family:@condensed;}


#calculator #calculator_panel {
	position: relative !important;
	display: block !important;
	
	
}

#calculator #calculator_panel h1{font-family:@condensed; font-weight:700;font-size:4.8em;margin-top:20px;}
#calculator #calculator_panel h2{font-size:2.2em; font-family:@condensed;}
#calculator #calculator_panel div#stats {
	position: relative !important;
	display: block !important;
	width: 100%;
	text-align: center !important;
	vertical-align: middle !important;
	clear: both;
	border-top:1px dashed #999;
	border-bottom:1px dashed #999;
	padding-top:20px;
	padding-bottom:10px;
	float:left;
}
#calculator #calculator_panel div#stats div.sheet-label {

}



#calculator #calculator_panel div#stats div.sheet-label div.sheet-label-container {
	display: block;
	width: 100% !important;
}
#calculator #calculator_panel div#stats div.sheet-label h3 {
	text-align:left; width:50%; float:left; margin:0 0 0 15px; clear:both;
	font-family: 'Roboto Condensed', sans-serif; color:#60bb46; font-size:5.6em; font-weight:300; text-transform:uppercase;
}
#calculator #calculator_panel div#stats div.sheet-label .sheet-label-content {
	font-size: 5em;
	line-height:1.3em;
	text-align:left;
	float:left;
	font-weight: 600;
	font-family: 'Roboto Condensed', sans-serif;
}
#calculator #calculator_panel div#stats div.sheet-label .sheet-label-content sup.sml {
	font-size: 0.5em;
}
#calculator #calculator_panel #controls {
	position: relative;
	display: block;
	width: 100%;
	height: 252px;
	padding: 0px;
	vertical-align: top;
	
}
#calculator #calculator_panel .control {
	position: relative;
	display: inline-block;
	width: 204px;
	top: 0px;
	margin: 0px;
	padding-top: 0px;
	text-align: center;
	float: left;
}
#calculator #calculator_panel .control label {
	position: relative;
	display: none;
	color: #666666;
	font-size: 9pt;
}
#calculator #calculator_panel .control .stepper-wrap {
	margin: 0 !important;
}
#calculator #calculator_panel .control #kilo_cost {
	display: none;
}
.control #kilo_cost_show {
	position: relative;
	display: block;
	margin-top: 25px;
	cursor: default;
	text-align: right;
	height: 65px;
	width: 124px;
	font-size: 35px;
	font-weight: 100;
	color: #666;
	left: 22px;
	padding: 2px;
}


#calculator #calculator_panel .control .detail {
	top: 20px;
	font-size: 10pt;
	font-weight: 100;
	position: relative;
	display: block;
	color: #b1b1b1;
}

#calculator #calculator_panel .control .calcvalue, #calculator #calculator_panel .control #charge_mode, #calculator #calculator_panel .control #charger_config, #calculator #calculator_panel .control #charge_mpkw {
	position: absolute;
	display: none;
	visibility: hidden;
	height: 0px;
	top: 0px;
	float: left;
	margin: none;
}
#calculator #calculator_panel .control .chooser-div {
	position: relative;
	display: block;
	width: 175px !important;
	height: 185px !important;
	overflow: hidden;
	text-align: center;
	top: 22px;
	border: none;
	border-left:1px solid @green;
	border-right:1px solid @green;
}
#calculator #calculator_panel .control .chooser-div div.shadow {
	position: relative;
	display: block;
	-moz-box-shadow: 1px 1px 2px #888;
	-webkit-box-shadow: 1px 1px 2px #888;
	box-shadow: 1px 1px 2px #888;
}
#calculator #calculator_panel .control .chooser-div div.onBottom div.shadow {
	position: relative;
	display: block;
	-moz-box-shadow: -1px -1px 2px #888888;
	-webkit-box-shadow: -1px -1px 2px #888888;
	box-shadow: -1px -1px 2px #888888;
}

#calculator #calculator_panel .control .chooser-div div.tabOverlay {
	position: absolute;
	display: block;
	background: #F7F7F7 !important;
	width: 100%;
	height: 30px;
	top: 0px;
}




#calculator #calculator_panel .control .scrlBttn.onTop {
	position: absolute;
	top: 21px;

	display: block;
	cursor: pointer;
}
#calculator #calculator_panel .control .scrlBttn.onBottom {
	position: absolute;
	top: 180px;

	display: block;
	cursor: pointer;
}
#calculator #calculator_panel .control .radius_slide  {
	height: 158px;
	position: relative;
	display: block; 
	width: 158px;
	top: 25px;
	left: 22px;
}
#calculator #calculator_panel .control .radius_slide .viewport {
	visibility: hidden;
	height: 158px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	width: 158px;
}
#calculator #calculator_panel .control .radius_slide .overlay {
	background: url(../images/sheetcalculator/ui/bg_circle_scrollbar.png) no-repeat 0 0;
	position: absolute;
	left: 0;
	top: 0;
	height: 158px;
	width: 158px;
	padding: 0px;
}
#calculator #calculator_panel .control .radius_slide .thumb {
	background: url(../images/sheetcalculator/ui/btn_circle_scroll.png) no-repeat 50% 50%;
	position: absolute;
	top: 0px;
	cursor: pointer;
	left: 0px;
	width: 50px;
	z-index: 200;
	height: 50px;
}
#calculator .radius_display {
	position: absolute;
	display: block;
	top: 60px;
	text-align: center;
}


#calculator .radius_display input{
 text-align:center;line-height:1.5em;width:40px;border-radius:5px; border:1px solid #ccc;
 font-size:1.5em; font-weight:bold; padding:5px; font-family:@condensed;
}

#calculator .radius-output{width:82px; margin:auto;}
#calculator .radius-output .radius_display{width:82px;}
#calculator .radius-output .radius_display .num{font-size:1em; text-transform:uppercase; }

div.sheetcalculator {
	width: 175px !important; 
	height: 175px !important;
	overflow: hidden;
	text-align: center;
	margin-top: 0px; 
}
div.sheetcalculator > div.sheetcalculator-container {
	display: block;
	position: relative; 
	top: auto;
	bottom: auto;
	height: auto;
	border: none; 
	width: 175px;
	height: inherit;
	overflow-y: hidden;
	overflow-x: hidden;
	margin: 0px;
	text-align: center;
}
div.sheetcalculator > div.sheetcalculator-container > ol.sheetcalculator-list, div.sheetcalculator > div.sheetcalculator-container > ul.sheetcalculator-list {
	display: block;
	position: relative;
	top: -55px;
	right: auto;
	bottom: auto;
	height: auto;
	border: none;
	margin: 0px auto;
	padding: 0;
	list-style-type: none;
	background: #fff;
}
div.sheetcalculator > div.sheetcalculator-container > ol.sheetcalculator-list > li, div.sheetcalculator > div.sheetcalculator-container > ul.sheetcalculator-list > li {
	display: block;
	position: relative;
	top: 0px;
	left: auto;
	right: auto;
	bottom: auto;
	height: 190px;
	width: 175px;
	margin: 0px;
	padding: 0px;
	background-position: 0 0;
	background-repeat: no-repeat;
}


.dials{float:left;}

.dropdowns{ float:left;margin:0 30px;}
.dropdowns label{display:none;}
.dropdowns select{clear:both;margin-bottom:23px;float:left; border:2px solid #61bb47; background:url(../images/down-arrow.gif) top right no-repeat #fff; width:225px; font-size:1.6em; border-radius:0;-webkit-appearance: none;  -webkit-border-radius: 0px; padding:3px; }

.dropdowns select:disabled{opacity:0.4;
filter:alpha(opacity=40);}

.dropdown{padding-top:0px;margin:0 auto;clear:both; float:none; width:225px;}

#b_flute {
	background: url(../images/sheetcalculator/b-flute.gif) 50% 0;
}
#c-flute {
	background: url(../images/sheetcalculator/c-flute.gif) 50% 0;
}
#bc-flute {
	background: url(../images/sheetcalculator/bc-flute.gif) 50% 0;
}
#e-flute {
	background: url(../images/sheetcalculator/e-flute.gif) 50% 0;
}
#eb-flute {
	background: url(../images/sheetcalculator/eb-flute.gif) 50% 0;
}
#m-flute {
	background: url(../images/sheetcalculator/m-flute.gif) 50% 0;
}


.calculator .quote{
	/* Firefox */
    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
	
	float:left; clear:both;
	width:100%;
	h3{font-size:3.2em; font-weight:300; text-align:center; margin-bottom:20px; margin-top:10px;
	a{ padding-right:33px; display:block; color:#333; }
	a img{margin-top:10px;}
	}
	label{font-size:2em; line-height:1.2em;margin-bottom:10px;}
	 input, textarea{background:#4c4d55;margin-bottom:20px;}
	textarea{height:155px;}
	.submit{ border-radius:5px;background:@green; border:none; width:auto; float:right; color:#fff; font-size:2.2em; font-weight:300; text-transform:uppercase; line-height:1em;
	background: #3b7234; /* Old browsers */
background: -moz-linear-gradient(-45deg, #3b7234 0%, #527a4d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3b7234), color-stop(100%,#527a4d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #3b7234 0%,#527a4d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #3b7234 0%,#527a4d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #3b7234 0%,#527a4d 100%); /* IE10+ */
background: linear-gradient(135deg, #3b7234 0%,#527a4d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b7234', endColorstr='#527a4d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-moz-box-shadow: -1px -1px 1px  #7bb376;
        -webkit-box-shadow: -1px 1px 1px #7bb376;
        box-shadow: -1px -1px 1px #7bb376;}
	}
	
	#quotedrop{display:none;}
	.blue{background:#20232d;}
	
	.calculator .blue{
	h3{font-size:3.2em; font-weight:300; text-align:center; 
	a{ padding-right:33px; display:block; color:#fff; }
	}
	label{color:@green;}
	input, textarea{background:#4c4d55; border-color:#4c4d55; color:#fff;}
	}
	
	#calculator #calculator_panel .dials .control label{ display:block;margin-bottom:-123px; text-transform:lowercase;} 
	#calculator #calculator_panel .dials .control{top:123px; height:204px;}
	
	.knob{border:1px solid #ccc !important; border-radius:5px; font-family:@condensed !important; font-size:26px !important; font-weight:700 !important;}
	
	
/* Cases */ 
 
#fef200 {
	background: url(../images/fefco/0200.gif) 50% 0;
}
#fef201 {
	background: url(../images/fefco/0201.gif) 50% 0;
}
#fef202 {
	background: url(../images/fefco/0202.gif) 50% 0;
}
#fef203 {
	background: url(../images/fefco/0203.gif) 50% 0;
}
#fef205 {
	background: url(../images/fefco/0205.gif) 50% 0;
}
#fef209 {
	background: url(../images/fefco/0209.gif) 50% 0;
}
#fef214 {
	background: url(../images/fefco/0214.gif) 50% 0;
}
#fef216 {
	background: url(../images/fefco/0216.gif) 50% 0;
}






	
	.scrollslide{float:left; margin-right:20px;}
	.scrollslide h2{width:auto;} 
	
	div.error{float:left; width:100%; background:#f7f7f7;
	.no, .green{ font-size:2em; font-family:@condensed; color:@black70; text-align:left; line-height:2.7em; clear:both; float:left; width:100%;
	img{text-align:left; float:left;margin:20px 5px 20px 20px;}
	.message{float:left;}
	
	}
	.requestmessage{padding-left:20px; color:#fff; background:@green; width:100%;}
	#requestdrop{color:#fff;}
	}
	
	#fefco_mode{display:none;}
	
	.casemaker #calculator #calculator_panel div#stats div.sheet-label h3{ font-size:4em; width:70%; line-height:1.3em}
	.casemaker #calculator #calculator_panel div#stats div.sheet-label .sheet-label-content {font-size:4em;}
	
	@media (max-width: 1200px){
		.dropdowns{margin:32px 20px 0px 20px;
		select{font-size:1.3em; width:180px; margin-bottom:18px;}
		}
		#calculator #calculator_panel .control{width:170px;}
		
		.casedials{margin-left:0px;}

	}
	
	@media (max-width: 992px){
		
		.casedials{margin-top:20px;}
	
	}
	
	@media (max-width: 760px){
	.casemaker #calculator #calculator_panel div#stats div.sheet-label h3{font-size:2em;}
	.casemaker #calculator #calculator_panel div#stats div.sheet-label .sheet-label-content{font-size:2.5em;}
	#calculator #calculator_panel div#stats div.sheet-label h3{font-size:3em;}
	#calculator #calculator_panel div#stats div.sheet-label .sheet-label-content{font-size:3em;}
	}
	
	@media (max-width: 570px){
		#calculator #calculator_panel .quantity{float:none;margin:-40px auto;}
		.dropdown{margin-left:5px;}
		div.error .no .message{width:70%;font-size:0.8em;line-height:1.1em;padding-right:10px;padding-top:18px; padding-bottom:8px; position:relative; z-index:99;}
		div.error .requestmessage{line-height:1.1em;padding-right:10px;padding-top:8px; padding-bottom:8px; position:relative; z-index:99;}
		#calculator #calculator_panel div#stats div.sheet-label h3{font-size:2.5em;}
	#calculator #calculator_panel div#stats div.sheet-label .sheet-label-content{font-size:2.5em;}
	}
	@media (max-width: 450px){
	.dropdowns{margin-left:10px;}
	}
	
	@media (max-width: 440px){
		.scrollslide{margin-right:0;}
		.dropdowns{margin-left:8px;}
	}
	
	@media (max-width: 435px){
		.dropdowns{margin-left:0; width:100%;}
		.dropdowns select{width:100%;}
	}