/* calculator */
.cal-contentPart
{
	position:relative;
	padding-bottom:120px;
}
.container
{
	position:relative;
}
.container
{
	position:relative;
}
h1, h2, h3, h4, h5, h6, p
{

color: #1b292c;
}
.cal-contentPart h2
{
	font-family: 'LabGrotesqueBold', Arial, sans-serif;
	color: #3baa49;
	font-size: 30px;
	line-height: 1.25;
}
.cal-contentPart p
{
	font-family: 'LabGrotesqueRegular', Arial, sans-serif;
	color: #1b292c;
	font-size: 14px;
	line-height: 1.3;
	text-align:center;
}
input[type="text"], input[type="email"], input[type="tel"], textarea, input[type="file"], input[type="number"], select, #quarter {
    font-family: 'LabGrotesqueRegular', Arial, sans-serif;
    color: #31494e;
    font-size: 16px;
    background: #fff;
    outline: none;
    border: 1px solid #cfd1c9;
    padding: 13px 0;
    line-height: 1.3;
    margin-bottom: 18px;
    width: 94% !important;
    border-radius: 0;
    text-indent: 14px;
}
select
{
	width: 98% !important;
}
#gen{
    font-family: 'LabGrotesqueBold', Arial, sans-serif;
    font-size: 16px;
    background: #3baa49;
    color: #fff;
    border: 0;
    outline: none;
    box-shadow: none;
    padding: 17px;
    display: block;
    line-height: 1;
    width: 100%;
    text-align: center;
    margin: 0;
    border-radius: 30px;
    vertical-align: middle;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
}
#gen:hover {
    background: #31494e;
    color: #fff;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
}
#size_slider, #ratio_slider
{
width: 120px;
margin-top: 20px;
float: left;
}
#size, #ratio
{
margin-left: 20px;
margin-top: 20px;
float: left;
}
#result
{
font-weight: bold;
}
.message
{
	float: left;
	margin-top: 40px;
	color: #1b292c;
	width: 50%;
	font-family: 'LabGrotesqueBold', Arial, sans-serif;
	font-size: 16px;
	line-height: 1;
}

.output
{
	float: left;
	margin-top: 20px;
	color: #1b292c;
	font-weight: bold;
	width: 50%;
	padding-left: 0;
}

.output span
{ 
color: #009c00; 
font-size: 18px; 
font-weight: bold;   
} 

.clear
{
clear: both;
}

.banner_button
{
	float: none;
	margin: 0px;
	display: block;
	padding: 30px 0;
} 

.button
{ 
float:left; 
margin:0px; 
padding:4px 16px;
color: #fff;

font-size: 18px;
font-weight: bold;
text-shadow:0px -1px 0px #666666;
border: 1px solid #3371a0;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #8ed0fa 1%, #4991c7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(1%,#8ed0fa), color-stop(100%,#4991c7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#8ed0fa 1%,#4991c7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#8ed0fa 1%,#4991c7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#8ed0fa 1%,#4991c7 100%); /* IE10+ */
background: linear-gradient(top,  #ffffff 0%,#8ed0fa 1%,#4991c7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#4991c7',GradientType=0 ); /* IE6-9 */
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
cursor: pointer;
}

.button:hover
{
text-decoration: none;
background-image: -webkit-gradient(linear, center top, center bottom, from(#5e96ee), to(#1e5dbf), color-stop(50%, #417fe7), color-stop(51%, #4c88e9));
background-image: -webkit-linear-gradient(top, #5e96ee, #417fe7 50%, #4c88e9 51%, #1e5dbf);
background-image: -moz-linear-gradient(top, #5e96ee, #417fe7 50%, #4c88e9 51%, #1e5dbf);
background-image: -o-linear-gradient(top, #5e96ee, #417fe7 50%, #4c88e9 51%, #1e5dbf);
background-image: -ms-linear-gradient(top, #5e96ee, #417fe7 50%, #4c88e9 51%, #1e5dbf);
background-image: linear-gradient(top, #5e96ee, #417fe7 50%, #4c88e9 51%, #1e5dbf);
}

#gen

{

}

.box
{
margin: 12px;
width: auto;
border: 0;
border-radius:10px;
padding: 30px 30px 60px;
background: #f8f8f2; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f8f8f2 75%, #f8f8f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(75%,#f8f8f2), color-stop(100%,#f8f8f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f8f8f2 75%,#f8f8f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f8f8f2 75%,#f8f8f2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f8f8f2 75%,#f8f8f2 100%); /* IE10+ */
background: linear-gradient(top,  #ffffff 0%,#f8f8f2 75%,#f8f8f2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f2',GradientType=0 ); /* IE6-9 */
}


#lhs
{
display: none;
width: 80%;
margin:0 auto;
}

#rhs
{
	width: 80%;
	background: #3baa49;
	color: #f8f8f2;
	margin: 0 auto;
}

#rhs h2, #rhs span{color: #fff;text-decoration: none !important;font-weight: normal !important;}
#rhs .output
{
	margin-top:38px;
}
#rhs.box
{
	padding:60px 30px;
}

#loading {  
position:absolute;  
width:300px;  
top:240px;  
left:240px;  
margin-left:-150px;  
text-align:center;  
padding:7px 0 0 0;  

}  

#backgroundPopup{  
display:none;  
position:fixed;  
_position:absolute; /* hack for internet explorer 6*/  
height:100%;  
width:100%;  
top:0;  
left:0;  
background:#000000;  
border:1px solid #cecece;  
z-index:1;  
}  
#popupContent{  
display:none;  
position:fixed;  
_position:absolute; /* hack for internet explorer 6*/  
height:384px;  
width:408px;  
z-index:2;   
font-size:13px;  
}  
#popupContent h1{  
text-align:left;  
color:#6FA5FD;  
font-size:22px;  
font-weight:700;  
border-bottom:1px dotted #D3D3D3;  
padding-bottom:2px;  
margin-bottom:20px;  
}  
#popupContentClose{  
font-size:14px;  
line-height:14px;  
right:6px;  
top:4px;  
position:absolute;  
color:#6fa5fd;  
font-weight:700;  
display:block;  
}  

#info
{ 
background-image:url('images/Info.png'); 
text-align:center;    
width: 48px;
height: 48px;
float: right;
background-position: 0px 0px;
cursor: hover;
position: relative;
top: 232px;
left: 12px;
}  

#info:hover
{
background-position: 0px -48px;
cursor: hover;
}
.mid{	
	width: 100%;
	margin: 0 auto;
	max-width: 500px;	
}
@media screen and (max-width:480px){
.mid{width:auto; margin:0 auto;}
.output{padding-left:0; margin-top:5px;}
}
input#gen{color:#fff; font-weight:normal;}