/**********************
*                     *
* Foundation Section  *
*                     *
***********************/

/* Wrappers for whole survey */
.clsWrapper {text-align:center;}
#bodyDiv {width:100%}
#detailsDiv {text-align:center;width:100%;}

/* Optional - sets background image for entire browser window - desktop/tablets only 
Comment this section out if you do not want to use a background image 

Background image should be a photograph - note that it will be stretched to fit the display.

*/

body {
	background-color:#D7E4F2;
}


/**********************
*                     *
*  Header Section     *
*                     *
***********************/

#HeaderDiv {text-align:center;width: 100%;}
#M_PageHead {margin-left:auto;margin-right:auto;text-align:center;width: 100%;}
#M_PageHeadTable {width: 100%;text-align:center;	margin-left:auto;margin-right:auto;
	
	/* Optional: Set background image in the header
	section by updating the following lines and 
	uncommenting this section
	
	background-image:url(http://link/image.jpg);
	background-repeat:no-repeat;
	background-position: center top; */
}


/**********************
*                     *
*  Details Section    *
*                     *
***********************/

#M_Details {
	width: 100%;text-align:left;margin-left:auto;margin-right:auto;
	font-family: Helvetica, Arial, sans-serif;
}

/* Adds padding around each survey line (helps to add space between questions) */
.spDetailLineCol1 {padding: 10px 10px 10px 10px;}


/**********************
*                     *
*  Footer Section     *
*                     *
***********************/

#M_PageFoot {width: 100%;}
#M_PageFootTable {margin-left:auto;margin-right:auto;width: 100%;text-align:center;}
#FooterDiv {text-align:center;width: 100%;}


/**********************
*                     *
*  Error Section      *
*                     *
***********************/

/* Errors at bottom of survey (old style) */
#validationsummary2 {width: 100%;padding:10px;text-align:left;}

/* Errors that are inline (above questions) */
.errInline
{
	width:80%;
	display:block;
	color:red;
	padding:10px;
	display:none;
	background-color:transparent;
	-webkit-border-radius: 21px;
	-moz-border-radius: 21px;
	border-radius: 21px;
}


/****************************************
*                                       *
*  Questions and Answers Style Section  *
*                                       * 
*****************************************/

/* Question Text Style */
.spQRow {
	font-family:Helvetica, Arial, sans-serif;
	color: #444444;
	font-size:18px;
	font-weight:bold;
	padding-left:0px;
	text-align:left;
}

/* Header Styles (If using column headings for questions) */
.spHRow {
	font-family:Helvetica, Arial, sans-serif;
	color: #222222;
	font-weight:bold;
	font-size:14px;
	padding-left:10px;
}

/* Styles for Likert Questions */
.lCtlTable {}
.qLColHeading {
	font-family:Helvetica, Arial, sans-serif;
	color: grey;
	font-weight:bold;
	font-size:14px;
	vertical-align:bottom;
	width:60px;
}

/* Styles for Likert Matrix Questions */
.lmCtlTable {}
.qLMColHeading {
	font-family:Helvetica, Arial, sans-serif;
	color: grey;
	font-weight:bold;
	font-size:14px;
	vertical-align:bottom;
   	width:60px;
}

/* Styles for Likert Text Questions */
.ltCtlTable {width:80%;}
.qLTColHeading {
	font-family:Helvetica, Arial, sans-serif;
	color: grey;
	font-weight:bold;
	font-size:.9em;
	vertical-align:bottom;
	width:50px;}

.qLTHeadSpace {
	max-width:80px;
}
	
.qLTColEven {white-space: nowrap;}
.qLTColOdd   {white-space: nowrap;}

/* Style for Responsive Free Text Questions */
.spFT {width:80%;height:100px;}

/* Styles for Input Matrix Questions */
.imCtlTable {}
.imCtlTable .clsFormInput {width:55px;}

.qIMEven {white-space:nowrap;}
.qIMOdd {white-space:nowrap;}

.qIMColHeading {
	font-family:Helvetica, Arial, sans-serif;
	color: grey;
	font-weight:bold;
	font-size:14px;
	vertical-align:bottom;
   	width:60px;
}

/* Styles for Rating question (left and right sides) */
.sprRCell {vertical-align:middle;}
.sprLCell {vertical-align:middle;}
.rtACell {word-wrap:normal;white-space:nowrap;}

/* Styles for Slider Question */
.spSliderFirstRow {width:85%;}
.spSliderRow {width:85%;}

/* Styles for Rank Sort Question */
.spRankn {}
.rankSortTwoCol {}
.spACellSortHead {}


/* ????? */
.spGroup {
	font-family:Helvetica, Arial, sans-serif;
	font-size:16px;
	font-weight:bold;
	padding-top:15px;
}

/* Styles for Tile Questions (Single Select and Multi-Select) */
.clsRadioTileLbl {
	height: 30px;
	width: 350px;
	padding: 15px 5px 15px 5px;
	display:block;
	text-align:center;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    cursor:pointer;
    cursor:hand;
    }
	
/* Styles for Blue Buttons (if enabled) */
.iradio_floatleft {float:left;margin-right:10px;}
.icheckbox_square-blue, .iradio_square-blue {
	background(http://newsletter.ie/s/script/iCheck/skins/square/aero.png) no-repeat;
}


/* Styles for Answers Styles */
.spACell {
 font-family:Helvetica, Arial, sans-serif;
 color: #444444;
 font-size:16px;
 padding:5px;
 text-align:left;
 /* white-space:nowrap; */
 /* min-width:200px; */
 /*	max-width:250px; */
}




/* Text Boxes */
.clsFormInput, textarea, .clsAlloc, select {
    border-radius: 6px;
    -moz-border-radius: 6px;   
    -webkit-border-radius: 6px;
	font-size:16px;
}

.clsShortTxt { width: 100px; }
.clsLongTxt { width: 300px; }

.dataentrytxt {width:55px;border-radius: 6px;
    -moz-border-radius: 6px;   
    -webkit-border-radius: 6px;}
	
.spForm  input {-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-size:18px;}

	

/* Button Styles */
.navbutton
{
    border: 2px solid #999;
    font-size: 15px;
    font-family:Helvetica,Helvetica, Arial, sans-serif;
    font-weight:bold;
    line-height: 16px !important;
    color: #000;
    padding: 0px 22px 1px 22px;
    border-radius: 3px;
    -moz-border-radius: 3x;   
    -webkit-border-radius: 3px;
    box-shadow: 0px 0px 4px #aaa;   
    -moz-box-shadow: 0px 0px 4px #aaa;  
    -webkit-box-shadow: 0px 0px 4px #aaa;   
    height: 50px;
	width: 120px;	
    margin: 0px;
    cursor: pointer;
    background: repeat-x scroll left top #F2F2F2;
}

.navbuttonon {
    border: 2px solid #9dc91a;
    font-size: 15px;
    font-family:Helvetica,Helvetica, Arial, sans-serif;
    font-weight:bold;
    line-height: 16px !important;
    color: #000;
    padding: 0px 22px 1px 22px;
    border-radius: 3px;
    -moz-border-radius: 3px;   
    -webkit-border-radius: 3px;
    box-shadow: 0px 0px 4px #aaa;   
    -moz-box-shadow: 0px 0px 4px #aaa;  
    -webkit-box-shadow: 0px 0px 4px #aaa;   
    height: 50px;
	width: 120px;
    margin: 0px;
    cursor: pointer;
    background: repeat-x scroll left top #F2F2F2;
}


/* Progress Bar Classes */

.clsProgOn { 
	background-color:#4455AA; 
	height:16px; 
	width:5px; 
	}
.clsProgOff {
	background-color:LightGrey; 
	height:16px; 
	width:5px; 
	}
.clsProgTable { 
	border-width:0px; 
	width:60px; 
	border-collapse:collapse;
	font-family:Helvetica, Arial, sans-serif;
	font-size:10px;
	}
.clsProgText { 
	font-family:Arial,Helvetica, Arial, sans-serif; 
	font-size: 10px; 
	}
.clsProgTextBold { 
	font-family:Arial,Helvetica, Arial, sans-serif;
	font-size:10px;
	font-weight:bold; 
	}


/************************************************************
*                                                           *
*  JQuery Override Style Section (Used by Tile Questions)   *
*                                                           * 
*************************************************************/

/* Default Font/Font Size for Buttons */
	
.ui-widget
{
  font-family: Trebuchet MS, Helvetica, Arial, sans-serif,Arial,sans-serif;
  font-size: 1.1em;
}

/* Resting Style for Buttons */

.ui-state-default, .ui-widget-content .ui-state-default
{
  border-top-width: 1px;                      /* Border style, color etc. (+ next 16 lines) */
  border-right-width-value: 1px;
  border-bottom-width: 1px;
  border-left-width-value: 1px;
  border-top-style: solid;
  border-right-style-value: solid;
  border-bottom-style: solid;
  border-left-style-value: solid;
  border-top-color: #cccccc;
  border-right-color-value: #cccccc;
  border-bottom-color: #cccccc;
  border-left-color-value: #cccccc;
  border-image-source: none;
  border-image-slice: 100% 100% 100% 100%;
  border-image-width: 1 1 1 1;
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
  background-color: #38A9E1;                   /* Background Color */
  background-image: url("");                   /* Background Image (if you want to use one */
  background-repeat: repeat-x;
  background-attachment: scroll;
  background-position: 50% 50%;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  font-weight: bold;                           /* Style Font - Emphasis */
  color: #ffffff;                              /* Style Font - Color */
  outline-width: medium;
  outline-style: none;
}


/* Hover Style for Buttons */

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus
{
  border-top-width: 1px;                      /* Hover Border style, color etc. (+ next 16 lines) */
  border-right-width-value: 1px;
  border-bottom-width: 1px;
  border-left-width-value: 1px;
  border-top-style: solid;
  border-right-style-value: solid;
  border-bottom-style: solid;
  border-left-style-value: solid;
  border-top-color: #fbcb09;
  border-right-color-value: #fbcb09;
  border-bottom-color: #fbcb09;
  border-left-color-value: #fbcb09;
  border-image-source: none;
  border-image-slice: 100% 100% 100% 100%;
  border-image-width: 1 1 1 1;
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
  background-color: #fdf5ce;                   /* Hover Background Color */
  background-image: url("");                   /* Hover Background Image (if you want to use one */  
  background-repeat: repeat-x;
  background-attachment: scroll;
  background-position: 50% 50%;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  font-weight: bold;                           /* Style Font - Emphasis */
  color: #c77405;                              /* Style Font - Color */
  outline-width: medium;
  outline-style: none;
}


/* Active (Clicked) Style for Buttons */

.ui-state-active, .ui-widget-content .ui-state-active
{
  border-top-width: 2px;                      /* Hover Border style, color etc. (+ next 16 lines) */
  border-right-width-value: 2px;
  border-bottom-width: 2px;
  border-left-width-value: 2px;
  border-top-style: solid;
  border-right-style-value: solid;
  border-bottom-style: solid;
  border-left-style-value: solid;
  border-color: transparent;
  border-image-source: none;
  border-image-slice: 100% 100% 100% 100%;
  border-image-width: 1 1 1 1;
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
  background-color: orange;                   /* Hover Background Color */
  background-image: url("");                   /* Hover Background Image (if you want to use one */  
  background-repeat: repeat-x;
  background-attachment: scroll;
  background-position: 50% 50%;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  font-weight: bold;                           /* Style Font - Emphasis */
  color: white;                              /* Style Font - Color */
  outline-width: medium;
  outline-style: none;
}



.ui-corner-left
{
}	
	

/****************************************
*                                       *
*  Media Query Section                  *
*  Used for Responsive Surveys          *
*                                       * 
*****************************************/

/* Defaults */

#sContainer {width:800px;
			margin-left:auto;margin-right:auto;
			background-color:#ffffff;
			-moz-border-radius:20px;
			border-radius:20px; 
			border:1px solid #7d8a90;
			opacity: 1;
			filter:alpha(opacity=100);}

@viewport {zoom:1.0; width: device-width;}
@-ms-viewport {width: device-width; zoom:1.0;}


/* Different Styles for various screen sizes

Note that ALL of these run in sequence until it finds a match - bear that in mind if you are cascading styles */


@media only screen and (max-width: 1024px), only screen and (max-device-width:1024px) {
#sContainer {width:800px;margin-left:auto;margin-right:auto;}
.clsRadioTileLbl {height: 30px; width: 350px;}	
textarea {width:300px;}
}

@media only screen and (max-width: 768px), only screen and (max-device-width:768px)  {
#sContainer {width:718px;margin-left:auto;margin-right:auto;}
.clsRadioTileLbl {height: 30px; width: 300px;}	
}

@media only screen and (max-width: 740px), only screen and (max-device-width:740px)  {
body {background-color:white;background-image:url()}
#sContainer {width:690px;margin-left:auto;margin-right:auto;border:none;}
.clsRadioTileLbl {height: 30px; width: 250px;}
}

@media only screen and (max-width: 640px), only screen and (max-device-width:640px)  {
body {background-color:white;background-image:url()}
#sContainer {width:590px;margin-left:auto;margin-right:auto;border:none;}
.clsRadioTileLbl {height: 30px; width: 220px;font-size:16px;}	
}

@media only screen and (max-width: 568px), only screen and (max-device-width:568px)  {
body {background-color:white;background-image:url()}
#sContainer {width:518px;margin-left:auto;margin-right:auto;border:none;}
.clsRadioTileLbl {height: 50px; width: 200px;font-size:16px;}
}

@media only screen and (max-width: 480px), only screen and (max-device-width:480px)  {
body {background-color:white;background-image:url()}
#sContainer {width:100%;margin-left:auto;margin-right:auto;border:none;}
.clsRadioTileLbl {height: 50px; width: 140px;font-size:15px;}
}

@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
body {background-color:white;background-image:url()}
#sContainer {width:100%;margin-left:auto;margin-right:auto;border:none;}
.clsRadioTileLbl {height: 50px; width: 120px;font-size:14px;}
}