select {
-webkit-appearance: none;
appearance: none;
 padding: 0 5px 0 4px; 
height:36px; 
border:2px solid #ccc;
background-color:#fff;
}

 @media screen and (-webkit-min-device-pixel-ratio:0) {  /*  safari */
 select {
	background-image: url(../images/icons/selectDD.png);
	background-position :right 50%;
	background-repeat:no-repeat;
	-webkit-appearance:none;
 height:40px; border:1px solid #ccc;  
		padding-right:20px;  padding-left:2px; text-indent:0; background-size:  auto 32px;	
  }  }
  
  
.divTableRow p{
display: block;
float:left;
margin:2px auto; padding:0;
height:40px;
line-height:40px;
font-size: 1em;
text-align:left
}/* col */


.divTableRow p.TAR{ text-align:right; padding-right:8px}


.divTableRow p.noHeight{ height:auto}

a.ellipsis,
p.ellipsis,
.divTableRow p.ellipsis ,
.divTableRow p a.ellipsis {
display:block; padding-right:15px;  
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; max-height:40px; 
}
/*
.divTableRow em, .divTableRow strong, .divTableRow span{ line-height:40px;}*/


.divTableRow label{
color:#757575;
text-transform:uppercase;
font-size:0.7em;
font-weight:bold;
}/* for forms with fields etc*/

.divTableRow p.endColumn{ float:right }
/* eo  div tables */

.divTableRow hr{  clear:both;  height:0px;}/*empty     div row clear */




form hr{ clear:both; border:0px; height:0px; background:none; }

.w50{ width:50px}
.w75{ width:75px;} 
.w100{ width:100px;}
.w125{ width:125px;}
.w150{ width:150px;} 
.w175{ width:175px;} 
.w200{ width:200px;} 
.w250{ width:250px;} 
.w300{ width:300px;} 
.w350{ width:350px;} 
.w400{ width:400px;} 
.w425{ width:425px;} 
.w450{ width:450px;} 
.w500{ width:500px;} 
.w600{ width:600px;} 
.w50Percent{ width: 50%;} 
.w100Percent{ width: 100%;} 

.mobile .w50,
.mobile .w75,
.mobile .w125,
.mobile .w150,
.mobile .w175,
.mobile .w200,
.mobile .w250,
.mobile .w300,
.mobile .w350,
.mobile .w400,
.mobile .w450,
.mobile .w500,
.mobile .w600 { width:100%; max-width:500px} 


input[type=text] , select {   border:2px solid #e1e1e1; height:36px; font-size:0.9em; color:#555; } 
input[type=text] { padding-left:6px}
select  option{ border-bottom:0px solid #e1e1e1; padding:0px 4px; margin: 0 0px; }
select .optGroupLabel, .optGroupLabel{ font-style:normal; font-weight:bold; color:#006699; font-size:1.2em; padding: 8px 4px;}


input[type=text].inputsErr ,
select.inputsErr ,
ul.optionsList.inputsErr,
.optionsList .inputsErr { border-color:#FF0000}

/* checkbox radios */
ul.optionsList , 
.optionsList {
list-style:none;
margin:8px 0 0  0px;
padding: 4px 0 0px 0px;
height:auto;
display:block;
border:0px solid #e1e1e1;
overflow:hidden;
overflow-y:auto;
background:#fff;
width: 100%;
}

.optionsListClosed{
max-height:160px;
overflow: scroll;
}

.mobile .optionsListClosed{ max-height:none; height:auto; overflow:hidden}

.optionsList li {  list-style:none; margin:0px auto; padding:0; clear:both; position:relative; }
.optionsList li.listTitle {
line-height:1em;
font-size:0.85em;
font-weight:bold;
margin:0px 2px 6px 2px;
padding:8px 0 8px 8px;
text-shadow:1px 1px #fff;
background-color:#F1F1F1;
border:1px solid #e1e1e1;
border-radius:2px;
color: #005C8A;  
background-image: linear-gradient( to bottom, #F1F1F1, #e1e1e1 );
}

.optionsList li.listTitle:hover{ cursor:pointer; background:#e1e1e1;
background: linear-gradient( to bottom, #e1e1e1, #e1e1e1	 ); 
}

.optionsList li.listTitle.inputsErr{ color: #FF0000}

/* overrides in surveys csss*/

.listTitle img{ 
height:8px; margin: 2px 8px 0 0px; float:right;
-webkit-transition: all 200ms ease-in-out 0s;
-moz-transition: all 200ms ease-in-out 0s;
-o-transition: all 200ms ease-in-out 0s;
transition: all 200ms ease-in-out 0s;} 

.optionsList.optionsListClosed .listTitle img{ 
transform: rotate(180deg); 
} 

.mobile .optionsList li.listTitle, 
.mobile .optionsList li.listTitle:hover { color:#555; margin-bottom:10px; background:#fff; border:1px solid #fff;}
.mobile .optionsList li.listTitle.inputsErr{ color: #FF0000;border:1px solid #FF0000;}
.mobile .optionsList li.listTitle img{ display: none}


.optionsList input[type=radio],
.optionsList  input[type=checkbox]{ position:absolute; left:-99999px; top:0}

.optionsList  input[type=radio]  + label,
.optionsList  input[type=checkbox]  + label {
min-height:22px;
font-size:0.85em;
cursor:pointer; 
position:relative;
}



/* inline/block  list options for matrix style */ 
.optionsList.inlineList, ul.inlineList { min-height:80px; width:100%; 
border:0px solid; }

.optionsList.inlineList li {
list-style:none;
margin:5px 0px 0 0;
padding:0 6px 0 0; /*width by php padding right allows for wrap */
clear:none;
display:block;
float:left;
white-space:normal 
}

.optionsList.inlineList  input[type=radio]  + label,
.optionsList.inlineList  input[type=checkbox]  + label {
display:inline-block ; 
clear:none;
}
.blockList li {
display:block;
clear:both;
margin:6px auto
}
.optionsList.blockList  input[type=radio]  + label,
.optionsList.blockList  input[type=checkbox]  + label {
display:block;
clear:both;
}
/* inline/block  list options */ 


.optionsList  input[type=radio]  + label:hover, 
.optionsList  input[type=checkbox]  + label:hover{  text-decoration: none; }

/*spans = checkbox/radio select || Strong = label wording */

.optionsList  input[type=radio]  + label span,
.optionsList  input[type=checkbox]  + label span{
position:absolute;
left:0px; top:0px;
border:1px solid #999;
width:20px;
height:20px;
margin: 0 10px 0 5px;
background-position:50% 50%;
background-image:none;
background-color:#fff;
background-repeat:no-repeat;
transition:all 0.1s ease-in-out;
}

.optionsList  input[type=radio]  + label span{ border-radius:12px;}

.optionsList  input[type=radio]:checked  + label span ,
.optionsList  input[type=checkbox]:checked  + label span{
background-image: url(../images/checked.png);
border-color:#333;
}


.optionsList  input[type=radio]:disabled  + label span ,
.optionsList  input[type=checkbox]:disabled  + label span{ 
border-color:#ccc;
}


.optionsList  input[type=radio]:hover  + label span ,
.optionsList  input[type=checkbox]:hover  + label span{ 
border-color:#555;
}



.optionsList  input[type=radio]  + label strong,
.optionsList  input[type=checkbox]  + label strong{ 
display:block;
padding:5px 0 0 32px; line-height:1em;
font-weight:normal;
color:#696969;
font-size:12px; /*fixed font size */
}

.optionsList  input[type=radio]:checked + label strong,
.optionsList  input[type=checkbox]:checked + label strong{ 
font-weight: normal;
color:#333333
}


.optionsList  input[type=radio]:disabled + label strong,
.optionsList  input[type=checkbox]:disabled + label strong{ 
font-weight: normal;
color:#ccc
}


.optionsList  input[type=radio] + label strong.panelLocation,
.optionsList  input[type=checkbox] + label strong.panelLocation{
font-weight: bold;
color: #639;
display:block;
}

/* "other" fields */
.optionsList  .others strong{ color:#888; font-size:0.75em; padding:10px 0 0 6px; display:block;} 
.optionsList.inlineList li.others , .optionsList.blockList li.others {width:100%; display:block; clear:both }
.optionsList.inlineList li.others input, .optionsList.blockList li.others input{
height:28px;
width:94%;
border:1px solid #999;
margin:0 0 5px 6px;
max-width:400px;
display:block;
clear:both;
border:1px solid #999;
} 



/* ////// RADIO MATRIX  ///// */

.matrixList, table.matrixList{ display:block; position: relative; border:0px solid #e1e1e1; width:100%; padding:0px; margin:10px auto }

.mobile .matrixList{ overflow:hidden; overflow-x:auto;}

.matrixList  tr {  padding:0px;  }
.matrixList  tr:hover {background-color:#f1f1f1;    }
.matrixList  tr:nth-child(2n + 1){ /*background-color:#f1f1f1;  */ }

.matrixList  td{  border:0px solid #e1e1e1; padding:6px 0px; text-align:center;margin:0;  } 

.matrixList  .headerRow td { border-bottom:2px solid #e1e1e1; vertical-align: bottom; padding:10px;font-size:0.86em; background:#fff }

.matrixList  .labelColumn { font-weight:bold; text-align:left; padding-left:8px; font-size:0.86em}
.matrixList td span{ display:block; width:100%; text-align:center}

.matrixList  input[type=radio],
.matrixList  input[type=checkbox]{ position:absolute; left:-2000px; top:0px}

.matrixList  input[type=radio]  + label span ,
.matrixList  input[type=checkbox] + label span{
width:22px; height:22px; display:block; 
background-color:#fff; 
border:2px solid #a1a1a1; margin:0 auto; cursor:pointer;
}

.matrixList  input[type=radio]  + label span:hover  ,
.matrixList  input[type=checkbox] + label span:hover { border-color:#777;  }

.matrixList  input[type=radio]  + label span{ 
border-radius:15px;
 -webkit-border-radius: 15px;
-moz-border-radius: 15px;}

.matrixList  input[type=radio]:checked  + label  span,
.matrixList  input[type=checkbox]:checked  + label span{
background-image: url(../images/checked.png);
background-position:50% 50%;
background-repeat:no-repeat;
border-color:#729700;
}


/*.radioMatrix{ display:block; position: relative; border:2px solid #e1e1e1; width:100%; padding:10px; }
.radioMatrix .tableRow {width:auto; clear:both;min-height:30px;  }
.radioMatrix   p{ display:block; float:left; min-height:20px;padding:0px; text-align:center; font-size:13px;} 
.radioMatrix p.labelColumn { text-align:left; font-weight:bold;}
.radioMatrix span{ display:block; width:100%; text-align:center}
.radioMatrix hr{border-bottom:1px solid #ccc; clear:both; height:2px;}*/
/* ////// RADIO MATRIX  ///// */




/*// FULL SLIDERS*/ 
.sliders  { width:92%; margin:30px auto 0 auto; clear:both;} 


.itemLabel{ font-size:0.8em; color:#333; font-weight: bold; clear:both } /*  labels for product names */
.sliders .itemLabel{margin-left: 0px; font-size:12px; } /* sliders inset to match init for slider 	 */


.sliders div.tracks{ /*track*/
margin:20px  0px 0px  0px ;
width:100%; height:16px; display:block; position:relative;
background: linear-gradient( to bottom, #f1f1f1, #e8e8e8 ); 
border:1px solid #ccc;
border-radius:4px;
cursor:pointer;
}

.sliders div.tracks div.ui-slider-range-min{
position:absolute;
top:0px;
background-color: #c1c1c1; 
height:14px;
border-radius:3px 0 0 3px;

} /* left selected area */


.sliders  .ui-slider-handle  {  /*handle*/
width:26px; 
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
 outline: none; border:1px solid #fff;

cursor:pointer;
text-align:center; 
height:26px;
position: absolute;
z-index: 2;
padding: 0;
top: -5px;
margin-left: -13px;
background-color:#ccc;
background: linear-gradient( to bottom, #e1e1e1, #d1d1d1 );
} 

.sliders .beenClicked  .ui-slider-handle { background-color:#888; background: linear-gradient( to bottom, #c1c1c1, #a1a1a1 ); }

.sliders span em{ /* number inside 
 border:1px solid #ccc;
border-radius:16px;
position:absolute;
left: -9px;
top:9px;
width:22px;
height:22px; line-height:20px;
font-size:0.75em;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
color:#333;
font-style: normal;
text-align: center; z-index:100; background-color:#fff; 
 */
display: none;
} 


ul.markers {text-align: justify; margin:6px auto ;  clear:both; padding:0; position:relative;height:24px; border:0px solid;}
ul.markers::after {
width: 100%; display: inline-block; content: "."; visibility: hidden
}
ul.markers li {
display: inline-block; 
margin:0;
width:1px;
height:1px;
height:auto;
padding:10px 0px  0 0px;
font-weight:bold;
border-left:1px solid #e1e1e1;
text-align:left ;
cursor:pointer; position:relative;   
font-family: Arial, Helvetica, sans-serif;   } 
  
ul.markers li p { 
padding:4px 0;
position:absolute;
clear:both;color:#9F9F9F;
text-align: center;  
border:0px solid #ccc; margin:0;
text-shadow:2px 2px #fff ;
min-height:30px; 
white-space: normal;
word-wrap: break-word;
padding:0 5px 0 5px; /* for spacing against next */
font-size:12px; /*fixed font size */
width:100px; margin-left:-50px; 
}
ul.markers li:hover p{color:#444; text-decoration:none}
ul.markers li.activeMarker {border-left:1px solid #333;}
ul.markers li.activeMarker p{ color: #6D9300; font-weight:bold; }

ul.markers li input[type=radio]{ position:absolute; left:-20000px;}
/* eo sliders */ 


.sliderSeparator { height:40px; width:100%; display:block; clear:both;}
.mobile .sliderSeparator { height:60px; width:100%; display:block; clear:both;} /*clear in case of expanded options */



.dropDown{ font-size:1.1em}
.dropDown.YOB{ width:140px;}

.dropDownList{ border:0px solid #e1e1e1;}
.dropDownList p{ clear:both; margin:6px auto; text-align:left;  border-bottom:1px dotted #e1e1e1; padding:6px 0 ;}
.dropDownList p strong{ display: block; float:left; width:45%; margin-right:10%; font-size:0.9em; } /*label name */
.dropDownList p span { display:block; float:left; width:45%;} /* dd container*/
.dropDownList  br { clear:both; margin:0}
.dropDownList  select { max-width:90%}


.countySelect{ width:100%; max-width:500px; }


/* PSEUDO SELECT extra classes for YOB  */
.ulSelectWrap{ width:100%; border:0px solid #e1e1e1; padding:5px 0; position:relative}
.ulSelectWrap .ddRow{ clear:both;}
 
.ulSelectWrap .labelColumn{
display:block;
/*float:left;width:40%; min-height:36px; margin-right:5%;*/
padding:4px 0; 
color: #333;
font-size:1em;
font-weight: normal;
 /* not used on YOB*/
} 

.mobile .ulSelectWrap .labelColumn{ float:none; width:100%; padding:20px 0 0 0; min-height:1px; margin-right:0px}

.ulSelection{ max-width:600px; /*  float:left; width:55%;*/  }
.mobile .ulSelection{ float:none; width:100%; max-width:500px; padding:0px; margin:5px 0}

.ulSelection.YOB{ width:200px}

.ulSelection li{ display:block; margin:0 auto; padding:0; width:100%;position:relative; z-index: 1}

.ulSelection li p.selectOpener{
height:36px;
line-height:32px;
cursor:pointer;
padding:0 5% 0 10px;
border:2px solid #e1e1e1;
overflow:hidden;
text-overflow:ellipsis;
font-size:0.9em;
white-space:nowrap;
display:block; color:#888;
background-image:url(../images/icons/arrowDgray.png);
background-repeat: no-repeat;
background-position: 98% 48%;
}

.screen .ulSelection li p.selectOpener:hover{ text-decoration:none; color:#333333}

.ulSelection li p.selectOpener.openerActive{
border-bottom:0px;
background-position:98% 46%;
background-image:url(../images/icons/arrowUgray.png);
background-repeat: no-repeat; color:#333333;  
} 

.ulSelection li p.selectOpener.valueSelected{
color:#006699;
font-weight:bold
}

/* options container */
.ulSelection li ul{
display:none; float:none; position:relative;
margin:0 auto;
padding:0 0 15px 0;
width: 100%;
margin:0px 0 0 0px;
border:2px solid #e1e1e1;
border-top:none;
z-index:1001;
background-color:#FFFFFF;
max-height:300px; overflow:hidden; overflow-y:auto
} 

.ulSelection li ul li { clear:both; margin:0px auto 2px auto; text-align:left}

.ulSelection li ul li label{
margin:0px auto;
display:block;
padding:3px 12px;
color:#555;
}

.ulSelection li ul li label:hover{ cursor:pointer; text-decoration:underline}

/* actual clickables */
.ulSelection input{ position:absolute; left:-20000px;}
.ulSelection  input[type=radio]:checked  + label  ,
.ulSelection  input[type=checkbox]:checked  + label {
font-weight:bold; color:#003366
}

#survey .ulSelectWrap hr, 
.ulSelectWrap hr{ clear:both;   height:5px; background-color:#fff;}

/* EO PSEUDO SELECT */




/*switch */ 
.switches  { clear:both; margin:10px auto;  }
.switches p { display: inline-block; width:auto; padding-right:5px; }
.contentFull ul.switches  ul ,  .switches  ul {
position:relative;  position: relative;  list-style:none; margin:10px 0; padding:0; display:inline-block  }

.contentFull ul.switches  ul  li , .switches  ul  li { 
background: linear-gradient( to bottom, #f9f9f9, #e8e8e8 ); width:80px ;  
border:1px solid #ccc; list-style:none; margin:0; padding:0; display: inline-block; height:30px;  border-radius:6px;}

.switches  input[type=radio],  .switches   input[type=checkbox]{  position:absolute; left:-99999px; top:0; } 
.switches   input[type=radio]  + label , .switches   input[type=checkbox]  + label { display:block; width:100%; height:100%; cursor: pointer}
.switches   input[type=radio]  + label span,  .switches   input[type=checkbox]  + label span {
display:block; 
border-radius:4px; 
width:50%; height:28px; text-align:center;
padding:0px 0 0 0px;  
font-size:0.7em;
background-image:url(../images/gradientBG.png); background-position:left bottom; background-repeat:repeat-x;
background-color:#e1e1e1; 
margin:0; 
color:#fff;
-webkit-transition:all 0.1s ease-in-out; 
-moz-transition:all 0.1s ease-in-out; 
-o-transition:all 0.1s ease-in-out; 
transition:all 0.1s ease-in-out;
cursor:pointer
} 

.switches   input[type=radio]:checked  + label span ,
.switches   input[type=checkbox]:checked  + label span{
margin-left:50%;
background-color:#888
}

.switches   input[type=checkbox]  + label span  em,
.switches   input[type=radio]  + label span  em{
text-align:center;
font-size:1em;
font-weight:bold;
width:100%;
height:28px;
line-height:28px;
color:#fff;
font-style:normal
} /* on/off label*/

.switches   input[type=radio]  + label span em:first-child ,  .switches   input[type=checkbox]  + label span  em:first-child{ display:block; }
.switches   input[type=radio]  + label span em:last-child ,  .switches   input[type=checkbox]  + label span  em:last-child{ display:none;}
.switches   input[type=radio]:checked   + label span em:first-child ,  .switches   input[type=checkbox]:checked   + label span  em:first-child{ display:none;}
.switches   input[type=radio]:checked   + label span em:last-child ,  .switches   input[type=checkbox]:checked   + label span  em:last-child{ display:block; }
/*switch */ 



.singleline{ border:2px solid #e1e1e1; margin:10px auto;font-size:1em;     width:100%;}
.postcode{ border:2px solid #e1e1e1; margin:10px auto;font-size:1em;     width:200px;}
.positiveNegatives{ border:2px solid #e1e1e1; margin:2px auto 16px auto; font-size:1em;     width:100%;}
.freeText{ border:2px solid #e1e1e1; margin:10px auto;font-size:1em; padding: 5px 10px; height:100px; width:100%;}


.addTextField{ font-weight:bold; padding-left:0px}


.sortingList{ display:block; list-style:none; margin:10px auto; overflow:hidden; position:relative; }
.sortingList li { display:block; clear:both; margin:10px 0; padding: 0 0; min-height:30px;  cursor:pointer ;width:100%;   }
.mobile .sortingList li { margin:20px auto; padding-left: 5px;}

.sortingList  .drag{
cursor:pointer;
display:block; float:left;
width:30px;
height:30px;
line-height:26px;
text-align:center;
border:2px solid;
border-color:#bbb;
float:left;
border-radius:2px;
cursor:pointer;
background-color:#fff;
font-size:1.0em;
font-weight:bold;
color:#7EAB00;
/*-webkit-transition:border-color 0.2s ease-in-out;
-moz-transition:border-color  0.2s ease-in-out;
-o-transition:border-color  0.2s ease-in-out;
transition:border-color  0.2s ease-in-out;*/
margin-right: 8px;
}

.screen .sortingList li:hover .drag {
background-color:#f9f9f9;
background-image:url(../images/icons/dragArrows.png);
background-position:50% 50%;
background-repeat:no-repeat;
text-indent:-2000px;
border-color:#555;
}

.sortingList  strong{ margin-left:36px; padding-top:5px; display:block;}

/* highlight in custom fns*/
.sortingList li.highlight .drag , 
.sortingList li.highlight:hover .drag{
border-color:#333;
background-color:#fff;
color:#333333
}

.sortingList li.highlight strong{ color:#81AC00 }
/* eo highlight in custom fns*/


p#buttonRow{clear:both; margin:10px auto 0px auto; padding:10px 0 0 0; height:auto; border-top:0px solid #e1e1e1;}

#saveButton{ width:100%; height:44px; clear:both; margin:10px auto 10px auto;
background: linear-gradient( to bottom, #888, #777 ); text-align:center; cursor:pointer; color:#FFFFFF; font-weight: bold; font-size:0.9em; border-radius:4px;}
#saveButton:hover{ background:#333}