/* CSS file for chrome, firefox, safari etc (not Internet Explorer/Edge) */

/* ------------------------------------------------------- */

/* external fonts required for survey */
@font-face {font-family: 'OpenSans Regular' ; src: url('/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'), url('/fonts/Open_Sans/OpenSans-Regular.eot'), url('/fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype');} 
@font-face {font-family: 'OpenSans Light' ; src: url('/fonts/Open_Sans/OpenSans-Light.ttf') format('truetype'), url('/fonts/Open_Sans/OpenSans-Light.eot'), url('/fonts/Open_Sans/OpenSans-Light.eot?#iefix') format('embedded-opentype');} 

body {background-color: #f0f0f0;color:#181818;margin: 0; padding: 5px 0 0 0;
    }

.CGlobalTab {min-height:600px;margin: 0 auto;border-spacing: 0;} 
td.CGlobalTD {width:980px;max-width:100%;padding:15px;background-color:#fff;}

body, div, td, th {font-family:'OpenSans Light','Arial';font-size: 19px;}
select, option {font-family:'OpenSans Light','Arial';}

/* QandATable is a table surrounding each question and it's answers  */
.QandATable {border-spacing: 0;border-style:none;}
.QandATable td {padding:0;}
/* QTable is a table surrounding each question and it's answers  */
.QTable {border-spacing: 0;border-style:none;}
.QTable td {padding:0;}

/* input[text],textarea controls the display of typed out text by the respondent  */
/* 16px is important as it matches 1 em - used by accis in sizing boxes.  May look like too much padding on right but is because numbers not as wide as max width letter (W) */
input[type=text],input[type=number] {font-size: 16px !important; padding:4px 1px 4px 1px; }
textarea,input[type=text],input[type=number] {font-family: 'OpenSans Regular';color:#000; }
textarea {font-size:14px; padding: 4px;}

/* AnswerTable contains all answer radios/checkboxes/inputs  */
.AnswerTable { border-spacing: 0; }

.AnswerTable td {   padding:3px; }
.AnswerTable td, .AnswerTable label, .AnswerTable td label { color:#181818;font-size: 16px;font-family: 'OpenSans Light','Arial'; }

/* ERRORCLASS controls formatting of error messages at the top of the scree, TargetErrorClass controls targeted error atthe question, INSTRUCTCLASS controls instruction formatting */
.ErrorClass {color:#FF9900;font-size:13px;font-family: 'OpenSans Light','Arial'; }
.TargetErrorClass {background-color: #FFFF00;color:#FF9900;font-size:13px;font-family: 'OpenSans Light','Arial'; }
.InstructClass {color:#FF9900;font-size: 16px;font-family: 'OpenSans Light','Arial'; }
.POSTEXAMPLE {color:#D3D3D3;font-size: 12px;font-family: 'OpenSans Light','Arial'; }

/* HEADERBAR controls formatting of section header text (if present) */
.HEADERBAR span {font-size:24px;font-family: 'OpenSans Regular','Arial'; color:#FFF; }
.HEADERBAR td {background-color:#00769E; padding:7px;vertical-align:middle;}
.HEADERBAR {width:100%;border-spacing:0px;border-style: none; }

/* gridtbl controls formatting of grid tables */
/* background colours are still controlled by GRC1 and GRC2 commands as they can alternate */
.gridtbl {border-collapse: separate;border-spacing: 0px 4px;}
.gridtbl td {padding:4px;font-size: 16px;font-family: 'OpenSans Light','Arial'; color:#181818; }
.gridtbl th {padding:4px;font-size: 16px;font-family: 'OpenSans Regular','Arial'; color:#181818;font-weight:normal; }

/* PROGRESSCONT container for progress bar */
.PROGRESSCONT {position:relative;height:20px;vertical-align:middle;white-space: nowrap; }
/* PROGRESSBAR progress bar background and border */
.PROGRESSBAR {width:100%;height:20px;position:absolute;left:0px;top:0px;background-color:#C0C0C0;border-radius:12px 12px 12px 12px;vertical-align:middle;  border:2px solid #00769E;  }
/* PROGRESSTEXT progress bar text within bar */
.PROGRESSTEXT {width:100%;height:20px;position:absolute;left:0px;top:1px;text-align:center;font-size:14px;font-family: 'OpenSans Regular'; color:white;vertical-align:middle; }
/* PROGRESSINNER progress bar current progress indicator */
.PROGRESSINNER {position:absolute;height:20px;left:0px;top:0px;text-align:left;background-color:#00769E;vertical-align:middle; }
/* progtime progress time left (if displayed) */
.progtime {white-space: nowrap;text-align:center;font-size:12px;font-family: 'OpenSans Regular'; color:white;vertical-align:middle;}
/* progtable houses progress bar, no real function */
.progtable td {padding:0px;}
.progtable {width:100%;border-spacing:0px;border-style: none; }

/* progtable houses progress bar, no real function */
.headnotitle,.headnotitle table td {background-color:transparent !important;}

/* progtextonly control progress text (when no progress bar displayed, only text) */
.progtextonly {font-size:16px;font-family: 'OpenSans Regular';}

/* buttontab contains the next and previous buttons (images used for these buttons can only be controlled by BTNN, BTNP commands - if you need different colours ask)  */
.buttontab {margin-bottom:10px;width:100%;text-align:center;border-spacing:0;}
.buttontab td {padding:0;}

/* ctsymbols controls time and currency symbol formatting  */
.ctsymbols {font-size:13px;}

div.rotatehcd {font-size: 16px;
font-family: 'OpenSans Regular'; color:#181818;font-weight:normal;
white-space:nowrap;
display:table-cell;
  vertical-align: top;
  text-align:left;
  /* FF3.5+ */
  -moz-transform: rotate(-90.0deg);
  /* Opera 10.5 */
  -o-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
  -webkit-transform: rotate(-90.0deg);
  /* IE6,IE7 */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  /* Standard */
  transform: rotate(-90.0deg);
}

th.rotatehc {font-size: 16px;
font-family: 'OpenSans Regular'; color:#181818;font-weight:normal;
vertical-align: bottom;
width:1em !important;
overflow:hidden;
/* if any  in label make this 2em - need a new class for it */
max-width:1em;
min-width:1em;
  padding-right: 10px;padding-left: 10px; /* mobilereplace */
  padding-top: 5px;
  padding-bottom: 5px;
}
/* -------------------------------------------  */

/* The following CSS controls the styled radios and checkboxes  */
/* If you just wish to change colours you can just search/replace the colours from a text editor.  For anything else, there are annotations below but ask for help if you are not familiar with CSS */
/* (To identify the colours below against what is on screen you can paste into google and it wil show the colour) */
/* If you are changing check/radio sizes then font sizes may need to be changed as well for it to appear corrently */

.control {
 font-size: 16px;
 position: relative;
 display: block;
 padding-left: 30px;
 cursor: pointer;
}

.control label {
 font-size: 16px;
 cursor: pointer;
}

.control input[type="radio"],.control input[type="checkbox"] {
 position: absolute;
 z-index: -1;
 opacity: 0;
}

.nwdisplay {
 position: absolute;
 top: 0px;
 left: 0;
 width: 16px;
 height: 16px;
        border: 2px solid #808080; 
 background: #fff;
}

.cradio .nwdisplay {
 border-radius: 50%;

}
/* Hover and focus states ,.control input:focus ~ .nwdisplay */
.control:hover input ~ .nwdisplay {
 background: #F5F5F5 ; 
 border: 2px solid #00769E;   
}

.control:hover,
.control label:hover {
 color: #181818; 
        font-weight:bold;
}


/* Checked state */
.control input:checked ~ .nwdisplay {
 background: #00769E ;
 border: 2px solid #00769E;   
}

/* Checked state */
input:checked + label {
 color: #00769E ; 
        font-weight:bold; 
}



/* Hover state whilst checked */
.control:hover input:not([disabled]):checked ~ .nwdisplay,
.control input:checked:focus ~ .nwdisplay
 {
 border: 2px solid #00769E; 
}

/* Checked state */
.control:hover input:checked + label {
 color: #000; 
        font-weight:bold; 
}


/* Disabled state - not really used as if locked not disabling */
.control input:disabled ~ .nwdisplay {
 pointer-events: none;
 opacity: .6;
 background: #e6e6e6;
}

/* Check mark */
.nwdisplay:after {
 position: absolute;
 display: none;
 content: '';
}

/* Show check mark */
.control input:checked ~ .nwdisplay:after {
 display: block;
}


/* Checkbox tick */
 .ccheck .nwdisplay:after {
 top: -1px;
 left: 5px;
 width: 3px;
 height: 12px;
 transform: rotate(45deg);
 border: solid #fff;
 border-width: 0 4px 4px 0;
} 



/* Disabled tick colour - not using */
/*.ccheck input:disabled ~ .nwdisplay:after {
 border-color: #7b7b7b;
} */

/*  radio tick */
.cradio .nwdisplay:after {
 top: 0px;
 left: 5px;
 width: 3px;
 height: 11px;
 transform: rotate(45deg);
 border: solid #fff;
 border-width: 0 4px 4px 0;
}
/* Radio button inner circle */
 /* .cradio .nwdisplay:after {
top: ;
left: ;
width: ;
height: ;
border-radius: 50%;
background: ;
} */ 

/* Disabled circle colour - not really using */
/*.cradio input:disabled ~ .nwdisplay:after {
 background: #7b7b7b;
} */