@import "../font-awesome/font-awesome.css";

/* Main Body */
body{position:relative;max-width: 100%;padding:12px 0 0;font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif;color:#333;background:#ffffff;}
 
 
/* ------------------ Basic HTML ---------------------------------------------------------- */
.format ul{margin-left:20px;}
ol{list-style:decimal;margin-left:20px;}
ol li{margin-bottom:10px;}
ul{list-style:disc;}
a.link{text-decoration:underline;color:#1C68B4;}
h1{font-size:22px;font-weight:400;}
h2{font-size:20px;font-weight:700;}
h3{font-size:18px;font-weight:700;}
h4{font-size:16px;font-weight:700;}
h5{font-size:14px;font-weight:700;}
h6{font-size:12px;font-weight:700;}
p{margin-bottom:20px;word-wrap:break-word;-moz-hyphens:auto;-webkit-hyphens:auto;-o-hyphens:auto;hyphens:auto;}

 
 
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* Clear Floated Elements End
----------------------------------------------------------------------------------------------------*/
 
 

 
  #band1{
 	top: 23px;
 	left: 255px;
 	width: 15px;
 	height: 39px;
 }
 
  #band2{
 	top: 23px;
 	left: 280px;
 	width: 15px;
 	height: 39px;
 }
  #band3{
 	top: 23px;
 	left: 305px;
 	width: 15px;
 	height: 39px;
 }
 

#band4{
 	top: 20px;
 	left: 360px;
 	width: 15px;
 	height: 45px;
 }

  .resistor_band{
	position:absolute;
  z-index:2;
  height:20px;
  width:20px;
  background-color:red;
	border-style:solid;
	border-width:1px;
	border-color:black;
 }
 
  .toolImageThumb{
    margin-left:10px;
    margin-right:23px;
  }
  
  .color_thumb_black,
  .color_thumb_brown,
  .color_thumb_red,
  .color_thumb_orange,
  .color_thumb_yellow,
  .color_thumb_green,
  .color_thumb_blue,
  .color_thumb_violet,
  .color_thumb_grey,
  .color_thumb_white,
  .color_thumb_gold,
  .color_thumb_silver  {
    /* max-width: 75px; */
    width: 100px;
    height: 20px;
    margin-left:5px;
    color: white;
    text-align:center;
    line-height: 200%;
    border-style:solid;
    border-width:1px;
    border-color:black;
  }
	
	.color_thumb_black{

    background-color:black;
 
  }
	
	.color_thumb_brown{

    background-color:#a05a2c;

  }
	.color_thumb_red{

    background-color:#da0000;

  } 
	.color_thumb_orange{

    background-color:#ff6600;
 
  } 
	.color_thumb_yellow{

background-color:#ffcc00;

color: #111;

} 
	.color_thumb_green{

    background-color:#008000;

  } 
	.color_thumb_blue{

    background-color:#000080;

  }
	.color_thumb_violet{

    background-color:#800080;

  }
	.color_thumb_grey{

    background-color:#666666;

  }
	.color_thumb_white{

    background-color:#ffffff;
	color: #111;

  }
	.color_thumb_gold{

    background-color:#d4a017;
	color: #111;
  }
	.color_thumb_silver{

    background-color:#b3b3b3;
    color: #111;
  }
	
	.color_thumb_blank{
    /* max-width: 75px; */
    width: 100px;
    height:20px;
    background-color:#ffffff;
    margin-left:5px;
    color: black;
    text-align:center;
    line-height:200%;
    border-style:solid;
    border-width:1px;
    border-color:#ffffff;
  }
	.thumb_label{
    width: 100px;
    margin-left: 5px;
    color: black;
    text-align:center;
    font-weight:bold;
    line-height:200%;
    /* background-color: #f2f2f2; */
    font-size: 14px;
    margin-bottom: 10px;
    /* border: 1px solid #949494; */
  }
 
 .toolSideBarCell{cursor:pointer;}


/* input fields */
.inputHL{background-color:#e6e6e6;text-align:left;margin:20px;margin-top:0px;margin-bottom:15px;padding-left:20px;color:#666;font-size:15px;}
.inputRow div{float:left;padding-bottom: 28px;}
.inputRow {text-align:left;}
.fieldName{font-size:100%;font-weight:bold;line-height:23px;text-align:left;margin-left: 25px;padding-left: 7px;white-space:nowrap;width: 110px;/* border: 1px solid #7f7f7f; */margin-bottom: 5px;/* line-height: 300%; *//* background-color: #f2f2f2; */}
.inputRow{position:relative;}
.outputVals  {float:left;white-space:nowrap;font-size: 16px;font-weight: bold;color: red;}
.outputLabels {float:left;font-size: 14px;white-space:nowrap;text-align:left;margin-left:30px;text-align:right;font-size: 14px;font-weight: bold;}
 
 

 .toolMainImage{
  margin-bottom: 20px;
  margin-top: 20px;
  width: 245px;
 }
  .toolBody{
 
background-color:#ffffff;
 
float:left;
 
width: 600px;
 
text-align:center;
 }
 .toolWrap{
 border:1px solid #ccc;
 position:relative;
 text-align:right;
 margin:0 auto;
 background-color:#ffffff;
 max-width: 600px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 width: 600px;
 }
.thumb_label_320 {
	display: none;
}
.itogo {
	
margin-bottom: 20px;
	
background-color: #dcdcdc;
	
padding-left: 105px;
	
padding-bottom: 5px;
	
padding-top: 5px;
}

/***********/
/* 768*/
@media (min-width: 415px) and (max-width: 600px) {
.thumb_label_320 {
 
display: block;
 
width: 55px;
 
height: 23px;
 
margin-left: 5px;
 
color: black;
 
text-align: center;
 
font-weight: bold;
 
line-height: 200%;
 
/* background-color: #f2f2f2; */
 
font-size: 14px;
 
margin-bottom: 10px;
 
/* border: 1px solid #949494; */
}	
.itogo {
   
    padding-left: 0px;
  
}

.thumb_label {display: none; }
.color_thumb_black, .color_thumb_brown, .color_thumb_red, .color_thumb_orange, .color_thumb_yellow, .color_thumb_green, .color_thumb_blue, .color_thumb_violet, .color_thumb_grey, .color_thumb_white, .color_thumb_gold, .color_thumb_silver {
    width: 55px;
    /* margin-top: 5px; */
}

	 .color_thumb_blank {
     
width: 55px;
}
 #band1{
 	top: 23px;
 	left: 160px;
  
 }
 
  #band2{
 	top: 23px;
 	left: 185px;

 }
  #band3{
 	top: 23px;
 	left: 210px;

 }
 

#band4{
 	top: 20px;
 	left: 265px;

 }
 .toolBody, .toolWrap {
    
width: 413px;
}

}

/***********/
/* 480*/
@media screen and (max-width: 414px) {
	.outputLabels {
 
    display: none;
}
.itogo {
  
padding-left: 45px;
}
.outputVals {
 
    padding-left: 15px;
}
.thumb_label_320 {
 /* background-color: #f2f2f2; */
 display: block;
 width: 56px;
 height: 20px;
 margin-left: 7px;
 color: black;
 text-align: center;
 font-weight: bold;
 line-height: 200%;
 font-size: 14px;
 margin-bottom: 5px;
}	
.fieldName, .thumb_label { display: none;}
.color_thumb_black, .color_thumb_brown, .color_thumb_red, .color_thumb_orange, .color_thumb_yellow, .color_thumb_green, .color_thumb_blue, .color_thumb_violet, .color_thumb_grey, .color_thumb_white, .color_thumb_gold, .color_thumb_silver {
    width: 56px;
    margin-top: 5px;
    height: 18px;
}
.thumb_label {
    width: 75px;
    max-width: 53px;
    } 
	 .color_thumb_blank {
     
width: 56px;
}
 #band1{
 	top: 23px;
 	left: 80px;

 }
 
  #band2{
 	top: 23px;
 	left: 105px;

 }
  #band3{
 	top: 23px;
 	left: 130px;

 }
 

#band4{
 	top: 20px;
 	left: 188px;

 }
  .toolBody, .toolWrap {
    
width: 257px;
}

}