/* DIN Calculator Styles */

.din-margin {
  margin: 1% 0px;
}
.din-calculator {
  display: block;
	background-color: rgba(128,128,128,0.1);
  border: 1px solid #9999AA;
	border-radius: 16px;
	padding: 0px 2% 5px 2%;
}
.din-option-area {
  display: block;
	background-color: #DCDCD8;
	border-radius: 16px;
	padding: 0px 2%;
	float: left;
	box-shadow: 1px 1px 2px #404040;
	width: 100%;
	margin: 1% auto;
}
.options {
  display: block;
  float: left;
  padding: 0px;
  margin: 0px;
  width: 100%;
}
.options li {
  font-size: 16px;
}
.options li img{
  max-width: 98%;
  width: auto;
  height: auto;
}
.age-selection, .type-selection {
  display: block;
  float: left;
  text-align: center;
  width: 100%;
}
.age-selection li, .type-selection li {
	padding: 3px;
	display: inline;
  border-radius: 5px;
  text-align: center; 
  display: block;
  list-style: none;
  float: left; 
  line-height: 20px;
  overflow: hidden;
}
.age-selection li {
  margin: 10px 1.5% 10px 1.5%;
  width: 30%;
}
.type-selection li {
	margin: 0px 1%;
}
#type0, #type4 {
  width: 12%;
}
#type1, #type2, #type3 {
  width: 22%;
}
.option-normal {
	background-color: #D3D3CF; //rgba(128,128,128,0.1);
  border: 1px solid #9999AA;
}
.option-normal:hover {
	background-color: #CACAC7; //rgba(128,128,128,0.2);
}
.option-highlighted {
	background-color: #B7B7B5; //rgba(128,128,128,0.4);
	box-shadow: 1px 1px 2px #404040;
	border: 1px solid #2087A8;
}
.din-selection li input, .type-selection li input, .age-selection li input {
  display: none;
}
.h3no-padding {
  padding: 0px;
  float: left;
  font-size: 16px;
  margin: 12px;
}
.h3din-calc {
  width: 125px;
}
#typeinfo,
#type0info,
#type1info,
#type2info,
#type3info,
#type4info {
  display: none;  
  clear: both;
  text-align: center;
  float: left;
  width: 100%;
}
#typeinfo {
  display: block;
}
#typeinfo p,
#type0info p,
#type1info p,
#type2info p,
#type3info p,
#type4info p {
  margin: 10px;
  text-align: center;
}

.drop-down, .drop-down-highlighted {
  text-align: center;
}
.drop-down select, .drop-down-highlighted select {
  width: 50%;
  padding: 1%;
  margin: 2% 0px;
	font-family: Trebuchet MS, Tahoma, Lucida Sans Unicode, Verdana;
	font-size: 16px;
	color: #333333;
  height: 40px;
  border-radius: 5px;
  text-align: center;
}
.drop-down select {
	background-color: #D3D3CF; //#CACAC7;
  border: 1px solid #9999AA;
}
.drop-down select:hover {
	background-color: #CACAC7;
  border: 1px solid #9999AA;
}
.drop-down-highlighted select {
	background-color: #B7B7B5;
	box-shadow: 1px 1px 2px #404040;
	border: 1px solid #2087A8;
}
.calculate-area {
  display: block;
  text-align: center;
}
.calculate {
  text-align: center;
	font-family: Trebuchet MS, Tahoma, Lucida Sans Unicode, Verdana;
	font-size: 16px;
  border: 2px solid #9999AA;
	padding: 1%;
	width: 30%;
  color: #333333;
	border-radius: 10px;
	box-shadow: 4px 4px 8px #404040;
	margin: 2% 2%;
	width: 40%;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DDDDDD));
	background: -moz-linear-gradient(top,  #FFFFFF,  #DDDDDD);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD');
	background: -o-linear-gradient(top,  #FFFFFF,  #DDDDDD);
	cursor: pointer;
}
.calculate:hover, .calculate:active {
  border: 2px solid #9999AA;
	box-shadow: 3px 3px 6px #404040;
	background: -webkit-gradient(linear, left top, left bottom, from(#DDDDDD), to(#FFFFFF));
	background: -moz-linear-gradient(top,  #DDDDDD,  #FFFFFF);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDDDDD', endColorstr='#FFFFFF');
	background: -o-linear-gradient(top,  #DDDDDD,  #FFFFFF);
	cursor: pointer;
}
.result {
	text-align: center;
	padding: 1%;
	margin: 2% 2%;
	font-family: Trebuchet MS, Tahoma, Lucida Sans Unicode, Verdana;
	font-size: 20px;
	color: #333333;
	border: 1px solid #9999AA;
	height: 38px;
	border-radius: 5px;
	width: 30%;
}
.result-calculated {
  text-align: center;
	padding: 1%;
	margin: 2% 2%;
	font-family: Trebuchet MS, Tahoma, Lucida Sans Unicode, Verdana;
	font-size: 20px;
	color: #333333;
  border: 2px solid #2087A8;
  height: 38px;
  border-radius: 5px;
	width: 30%;
}



@media screen and (max-width: 540px)
{

#type0, #type4 {
  width: 70%;
}
#type1, #type2, #type3 {
  width: 70%;
}
.drop-down select, .drop-down-highlighted select {
  width: 60%;
  max-width: 60%;
}
.age-selection {
  margin: 10px auto;
  width: 60%;
}
.age-selection li {
  margin: 10px auto;
  width: 100%;
}
.options li {
	width: 100%;
	margin: 5% 15%;
}
.calculate {
	width: 80%;
	margin: 5% 10% 0;
}
.result, .result-calculated {
	width: 70%;
	margin: 3% 15%;
}

}
/* Styles for Mobile Displays 

@media screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5), screen and (max-width: 1000px)
{

.options li {
  font-size: 24px;
}
.age-selection li, .type-selection li {
  line-height: 28px;
}
.h3no-padding {
  font-size: 24px;
}
.drop-down select, .drop-down-highlighted select {
	font-size: 24px;
  height: 45px;
}
.calculate {
	font-size: 24px;
	width: 300px;
}
.result-calculated {
	font-size: 24px;
}

}*/