/*===========================================================
'  GESTIONE AMBULATORIO MEDICO
'
'  NAME:    Form.css
'  VERSION: 1.0
'  DATE:    20/09/2014
'  AUTHOR:  Luca Maroglio
'  COPY:    Zenity Sas (c) 2014
'===========================================================*/


/* PERSONALIZZAZIONE CHECKBOX E RADIO BUTTON */


.spanButton {
   position: relative;
   font-size: 10pt;
   font-weight: bold;
   padding:4px;
   color: #ebebeb;
   background-color: #b41719;
   border:1px solid #808080;
   cursor:pointer; cursor:hand;
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}   

.spanButton:hover {
   color: #FFFFFF;
   background-color: #ce1b23;
   border:1px solid #B0B0B0;
}

.spanTextInput {
   border:1px solid #B0B0B0;
   height:24px;
   font:14px Arial;
   padding-left: 3px;
   padding-right: 3px;
   resize: none;
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}
.spanTextInput:hover {
   background-color: #faf9f0;
}
.spanTextInput:focus {
   background-color: #fffae7;
   border:1px solid #000000;
}




.ElemTimeOrizzontal {
   position:relative;
   display:inline-block;
   top:18px;
   height:46px;
   width:35px;
   text-align:center;
}
.ElemTimeVertical {
   position:relative;
   display:inline-block;
   top:18px;
   height:46px;
   width:35px;
   text-align:center;
}
.ElemTimeSmartphone {
   position:relative;
   display:inline-block;
   top:0px;
   height:46px;
   width:35px;
   text-align:center;
}
.ElemTimeTextOrizzontal{
   position:relative;
   display:inline-block;
   top:-3px;   
}
.ElemTimeTextVertical{
   position:relative;
   display:inline-block;
   top:-3px;   
}
.ElemTimeTextSmartphone{
   position:relative;
   display:inline-block;
   top:-20px;   
}

.ElemTimeVal {
   border:1px solid #B0B0B0;
   font:14px Arial;
   width:35px;
   height:22px;
   text-align:center;

   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}
.ElemTimeVal:disabled {
   background-color: #FFFFFF;
   color: #000000;
}
.ElemTimeArrow {
   width:13px;
   height:12px;
   padding:1px 10px 1px 10px;
   border:1px solid #FFFFFF;
   cursor: hand;
   cursor: pointer;
}
.ElemTimeArrow:hover {
   border:1px solid #e4e29c;
   background-color: #fffddc
}



/* Nascondo i checkbox e radio button originali */
span:not(#foo) > input[type='checkbox'],
span:not(#foo) > input[type='radio'] {
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);
}

/* Personalizzazione etichiette associate ai controlli */
span:not(#foo) > input[type='checkbox'] + label,
span:not(#foo) > input[type='radio'] + label {
   position: relative;
   cursor: pointer;
   padding: 0 0 0 15px;
   margin: 0 0 0 5px;

   font-family: 'Arial';
   font-size: 11pt;
}

/* Disegno area dei CheckBox */
span:not(#foo) > input[type='checkbox'] + label:before {
   position: absolute;
   cursor: pointer;
   content: ""; 
   top: -1px;
   left: -5px;
   width: 16px; 
   height: 16px;
   border:1px solid #B0B0B0;
   background-color: #FFF8DE;
   border-radius: 2px;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
}

/* Disegno spunta dei CheckBox */
span:not(#foo) > input[type='checkbox']:checked + label:after {
   display: block;
   position: absolute;
   content: "\2714";
   top: -16px;
   left: -3px;
   font-size: 32px;
   margin: 0 auto;
   color: #9c4141;
}

/* Disegno area dei RadioButton */
span:not(#foo) > input[type='radio'] + label:before {
   position: absolute;
   cursor: pointer;
   content: "";
   top: -1px;
   left: -5px;
   width: 15px; 
   height: 15px; 
   border: 1px solid #B0B0B0;
   background-color: #FFF8DE;
   border-radius: 7.5px;
   -moz-border-radius: 7.5px;
   -webkit-border-radius: 7.5px;
}

/* Disegno spunta dei RadioButton */
span:not(#foo) > input[type='radio']:checked + label:after {
   display: block;
   position: absolute;
   content: "";
   top: 2px;
   left: -2px;
   width: 11px;
   height: 11px;
   border-radius: 4px; 
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px; 
   margin: 0 auto;
}

span:not(#foo) > input:checked + label:after {
   background-color: #535353;
}



.tabButton {
   position: relative;
   top:-2px;
   font-size: 9pt;
   font-weight: bold;
   padding:2px 4px;
   margin: 0 3px;
   color: #303030;
   background-color: #cccccc;
   border:1px solid #797979;
   cursor:pointer; cursor:hand;
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}   

.tabButton:hover {
   color: #000000;
   background-color: #f1f1f1;
   border:1px solid #3b3b3b;
}