/* calculators
------------------------------------ */

.calculator{
  position: relative;
  display: block;
  width: 100%;
  color:#ccc;
  clear: both;
  margin-bottom: 10px;
}
.calculator:before, .calculator:after {
    content: "";
    display: table;
    clear: both;
}
.input-area{
  background: #5a5562;
  float: left;
  width: 100%;
  border:1px solid #6a6773;
  border-top:1px solid #7a787f;
  border-bottom:1px solid #35323a;
  padding: 15px 20px 5px 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
}
.result-area{
  background:#423f4a;
  position: relative;
  float: left;
  width: 100%;
  padding: 20px 20px 15px 20px;
  border:1px solid #53515a;
  border-top:1px solid #5e5a64;
  border-bottom:1px solid #302e35;
  -moz-border-radius: 0;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
}
.calculator .advanced{
  position: absolute;
  display: inline-block;
  top:16px;
  right: 15px;
  z-index: 10;
  cursor: pointer;
  color:#ffbb26;
}
.showhide, span.hide-adv { display: none; }
.calculator h3{
  background: #4c4855;
  position: relative;
  display: block;
  width: 100%;
  height: 47px;
  padding: 0 120px 0 20px !important;
  margin: 0 !important;
  color:#fff;
  font: 22px/47px 'OrenburgCRegular';
  -moz-border-radius: 3px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -webkit-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0px;
  border:1px solid #53515a;
  border-top:1px solid #7a787f;
  border-bottom:1px solid #302e35;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
}
.calculator p{
  position: relative;
  display: block;
  float: left;
  clear: both;
  width: 100%;
  line-height: 30px !important;
  margin: 0 0 8px 0 !important;
}
.calculator label{
  position: relative;
  display: block;
  float: left;
  width: 165px;
  margin: 0 12px 0 0;
  color:#fff;
  font-size: 14px;
}
.calculator input { z-index: 11; }
.calculator input[type="text"]{
  background: #484550;
  position: relative;
  float: left;
  width: 100px;
  height: 30px;
  margin: 0 10px 0 0;
  padding: 0 10px 0 10px;
  color: #eee;
  font-size: 14px;
  line-height: 30px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border:1px solid #3f3b45;
  border-top:1px solid #1a191d;
  border-bottom:1px solid #716f78;
  behavior: url(https://cdn.cambridgeincolour.com/PIE.htc);
}
.calculator input[type="button"]{
  background: #ffba26;
  position: relative;
  display: inline-block;
  float: left;
  height: 30px;
  margin: 0 10px 0 0;
  padding: 0 10px;
  color: #000;
  font: bold 18px/30px verdana;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid #ffd373;
  border-top: 1px solid #ffe3a6;
  border-bottom: 1px solid #805d13;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  behavior: url(https://cdn.cambridgeincolour.com/PIE.htc);
}
.calculator .result{
  display: inline-block;
  float: right;
  font-size: 14px;
}
.calculator .result label{
  width: auto !important;
  font: 14px/30px verdana !important;
}
.calculator .result input[type="text"]{
  width: 120px;
  color: #21a5d9 !important;
  background: #423f4a !important;
  border: 0 !important;
  font-weight: bold !important;
  font-size: 18px !important;
  padding: 0 8px;
}
.mySelect, .unitSelect {
  background: #484550;
  position: relative;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  margin: 0;
  padding: 0 0 0 10px;
  color: #eee;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border-left:1px solid #3f3b45;
  border-top:1px solid #1a191d;
  border-bottom:1px solid #716f78;
  border-right: none;
}
.mySelect {
  width: 100%;
}
.unitSelect { width: 100px; }
/* dynamically created div, wrapped around the select */
div.selectcontainer { position: relative; display: inline; }
/* dynamically created span, placed below the select */
span.mySelect, span.unitSelect {
  text-overflow: ellipsis;
  overflow: hidden;
    background: #484550 url(https://cdn.cambridgeincolour.com/cms/wp-content/themes/cic/stylesheets/images/dropdown.png) right center no-repeat;
    position: absolute;
    top: -9px;
    left: 0;
	padding: 0;
    text-indent: 10px;
    cursor:default;
    z-index:1;
  padding-right: 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
}
/*hack for firefox*/
@-moz-document url-prefix() {
  span.mySelect, span.unitSelect {
     top: -7px;
  }
}


@media (max-width: 767px) {

.calculator label {
    position: relative;
    display: block;
    float: none;
    width: auto;
}
}

@media (max-width: 567px) {
  .calculator input[type="text"]{
    width: 60px;
  }
.calculator .result {
    display: inline-block;
    float: none;
}
.calculator input[type="button"]{
  float: none;
  margin-bottom: 10px;
}
.calculator .result input[type="text"] {
    width: 100%;
    display: block;
    padding: 0;
}
.calculator h3 {
  padding: 10px 120px 10px 20px !important;
  height: auto;
    font-size: 16px !important;
    line-height: 120% !important;
}
.calculator .advanced {
    top: 13px;
}


}