/*Styled radi buttons*/
input[type=checkbox]:not(old), 
  input[type=radio]:not(old)
   {
      width     : 2em;
      margin    : 0;
      padding   : 0;
      font-size : 1em;
      opacity   : 0;
   }
 
 input[type=checkbox]:not(old) + label, 
 input[type=radio   ]:not(old) + label
  {
   display      : inline-block;
   margin-left  : -2em;
   line-height  : 1.5em;
  } 
  
 input[type=checkbox]:not(old) + label > span,
 input[type=radio   ]:not(old) + label > span
  {
    display          : inline-block;
    width            : 0.875em;
    height           : 0.875em;
    margin           : 0.25em 0.5em 0.25em 0.25em;
    border           : 0.0625em solid rgb(192,192,192);
    border-radius    : 0.25em;
    background       : rgb(224,224,224);
    background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
    background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
    background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
    background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
    background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
    vertical-align   : bottom;
  }
   
input[type=checkbox]:not(old):checked + label > span,
input[type=radio   ]:not(old):checked + label > span
 {
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
 } 
 
input[type=checkbox]:not(old):checked + label > span:before
{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : rgb(153,204,102);
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
} 

input[type=radio]:not(old):checked + label > span > span{
  display          : block;
  width            : 0.5em;
  height           : 0.5em;
  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}

/*Styled selects*/
/*select should be 18px wider then the wrapping div and the width has to be set programatically*/
.styled-select select 
 {
   /*background-image: url("buttonback.png");*/
   background: transparent;
   /*padding: 5px;*/
   padding: 2px;
   font-size: 1em;
   border: 0;
   border-radius: 0px;
   -webkit-appearance: none;
   display: block;
   width: 100%;
   }

.styled-select 
 {
   overflow: hidden;
   position: relative;
   background: url(down_arrow_select.png) no-repeat right #e6ddbd;
   border: solid 1px  #D7C996;
   border-radius: 2px;
 }