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

 Sample Stylesheet for changing appearance of survey in SensorPro    

 The following elements on the page may have styles applied to them: 

 body                - Apply a style to the entire page (bg image, bg color etc.     
 #M_PageHead         - The header panel at the top of the survey.             
 #M_Details          - The Details section (where questions and buttons go)   
 #M_DetailsLine1Col1 - The first line in the detail section           
 #M_DetailsLine2Col1 - The second line in the detail section          
 #M_DetailsLine3Col1 - The third line in the detail section           
 #M_DetailsLine4Col1 - The fourth line in the detail section  (etc.)  
 #M_Footer           - The footer panel of the survey                                                                                      

 Common Styles:

   background-image: url(http://site.com/imagename.jpg);
     - Apply a background image to element. Tiled by default. Full URL must be specified.
 
   background-repeat: no-repeat;
     - Specify whether a background repeats, doesn't repeat, or tiles vertically/horizontally
     - valid options: repeat, no-repeat, repeat-x (tile horizontally), repeat-y (tile vertically)
  
   background-position: top right;
   background-position: 400px 100px;
     - Can be relative (top left, bottom right, center center, center right etc.)
     - Can be absolute (600px 120px means 600 pixels across, 120 pixels down)

   border / border-top / border-bottom / border-left / border-right
     - Apply a border to the selected element.

   background-color: red;
     - Apply a background color to the selected element.

   padding: 30px;
     - Apply padding within a selected element.
     - can also use padding-left, padding-top, padding-bottom, padding-right

 Note about Header and Footer:
   
   If using a background image for your header and footer, you must specify a height for each 
   (otherwise your image may be cropped).


 Additional resources:

   Background Image:    http://www.w3schools.com/css/pr_background-image.asp
   Background Repeat:   http://www.w3schools.com/css/pr_background-repeat.asp
   Background Position: http://www.w3schools.com/css/pr_background-position.asp
   Border:              http://www.w3schools.com/css/css_reference.asp#border
   Full CSS Reference:  http://www.w3schools.com/css/css_reference.asp
  
-------------------------------------------------------------------------------------------------- */



/* Body and HTML settings - Font Tags set generic font for whole page */

html { overflow:scroll }
body { font-family:Verdana, Arial, Helvetica, sans-serif; 
       font-size:11px; text-align:center;
       background-color:#ffffff;
       }

.clsWrapper {text-align:center;}


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

/* Note 1 - Margins are used to center the table on screen - do not remove */
/* Note 2 - Width and Height match the image size */



#M_PageHead {margin-left:auto;margin-right:auto;text-align:center;}
#M_PageHeadTable 
{
  height:60px;
  width:600px;
  margin-left:auto;margin-right:auto;
  padding-top:5px;
  text-align:center;
}
#HeaderDiv {text-align:center; width:100%;}

/* Heading Styles - Use with Spans */
.heading01 {font-family:helvetica;font-size:22px;font-weight:bold;}
.heading02 {font-family:helvetica;font-size:14px;font-weight:bold;}
/* ------------- End Header Section -------- */

/* ----------------------------------------- */
/* ------------- Footer Section ------------ */
/* ----------------------------------------- */
/* Note 1 - Margins are used to center the table on screen - do not remove */
/* Note 2 - Width and Height match the image size */
/* Validation Summary - This is where error messages appear */

   #M_PageFoot 
   {
    width:600px;
    font-family:verdana;font-size:10px;font-color:#444444;font-weight:bold;
   }

   #M_PageFootTable { 
       margin-left:auto;
       margin-right:auto;
       width:600px;
       text-align:center;}

   #FooterDiv {text-align:center; width:600px;}

   #validationsummary2 {
    width:550px;
    padding:10px;
    text-align:left;
   }

   .poweredby {width:600px;text-alignment:left;}

/* ------------- End Footer Section -------- */


/* ----------------------------------------- */
/* ------------- Detail Section ------------ */
/* ----------------------------------------- */


/* Note 1 - Main Survey Content              */

   #detailsDiv 
   {
    text-align:center;
    width:100%;
   }

   #M_Details
   {
    font-family:verdana;
    width:600px;
    font-color:black;
    background-color:white;
    text-alignment:left;
    /* for IE */
    /* filter:alpha(opacity=80); */
    /* CSS3 standard */
    /* opacity:0.8; */
    margin-left:auto;
    margin-right:auto;
   }

/* --------- End Detail Section ------------ */




/* ----------------------------------------- */
/* -------- Survey Features Section -------- */
/* ----------------------------------------- */

/* Note 1 - Navbutton is for navigation buttons (next, previous) */
/* Note 2 - clsFinishButton is for the Finish Button */
/* Note 3 - spARow (answer row formatting */
/* Note 4 - spQRow (question row formatting */
/* Note 5 - spHRow (answer heading row formatting */
/* Note 6 - qLColHeading (Likert Answer Heading formatting */
/* Note 7 - qLMColHeading (Likert Matrix Heading formatting */
/* Note 8 - qLTColHeading (Likert Text Heading formatting */
/* Note 9 - qIMColHeading (Input Matrix Heading formatting */
/* Note 10 - white-space:nowrap stops answers from wrapping! */


.spACell {
 font-family:tahoma;
 color: black;
 font-size:12px;
 padding-left:5px;
 /* white-space:nowrap; */
}

.spQRow {
 font-family:tahoma;
 color: black;
 font-size:14px;
 font-weight:bold;
 padding-left:0px;
}

.spHRow {
 font-family:tahoma;
 color: black;
 font-weight:bold;
 font-size:11px;
 padding-left:10px;
}

.qLColHeading {
	font-family:verdana;
	color: grey;
	font-weight:bold;
	font-size:11px;
	vertical-align:bottom;
   	width:60px;
}
.qLMColHeading {
	font-family:verdana;
	color: grey;
	font-weight:bold;
	font-size:11px;
	vertical-align:bottom;
   	width:60px;
}
.qLTColHeading {
	font-family:verdana;
	color: grey;
	font-weight:bold;
	font-size:11px;
	vertical-align:bottom;
   	width:60px;
}
.qIMColHeading {
	font-family:verdana;
	color: grey;
	font-weight:bold;
	font-size:11px;
	vertical-align:bottom;
   	width:60px;
}


/* Note 9 - Padding for Lines - values are top,right,bottom,left */
.spDetailLine {padding:20px 10px 0px 10px;}
.spDetailLineCol1 {padding:20px 10px 0px 10px;}
.spDetailLineCol2 {padding:20px 10px 0px 10px;}
/* --------- End Detail Section ---------- */


/* ----------------------------------------- */
/* -------- Form Elements Section ---------- */
/* ----------------------------------------- */



/* -------- Buttons ---------- */

.navbutton
{
    border: 2px solid #999;
    font-size: 15px;
    font-family:Helvetica,Verdana;
    font-weight:bold;
    line-height: 16px !important;
    color: #000;
    padding: 0px 12px 1px 12px;
    border-radius: 18px;
    -moz-border-radius: 18px;   
    -webkit-border-radius: 18px;
    box-shadow: 0px 0px 4px #aaa;   
    -moz-box-shadow: 0px 0px 4px #aaa;  
    -webkit-box-shadow: 0px 0px 4px #aaa;   
    height: 36px;
    margin: 0px;
    cursor: pointer;
    background: url("../image/button/roundyb.png") repeat-x scroll left top #F2F2F2;
}

.navbuttonon {
    border: 2px solid #9dc91a;
    font-size: 15px;
    font-family:Helvetica,Verdana;
    font-weight:bold;
    line-height: 16px !important;
    color: #000;
    padding: 0px 12px 1px 12px;
    border-radius: 18px;
    -moz-border-radius: 18px;   
    -webkit-border-radius: 18px;
    box-shadow: 0px 0px 4px #aaa;   
    -moz-box-shadow: 0px 0px 4px #aaa;  
    -webkit-box-shadow: 0px 0px 4px #aaa;   
    height: 36px;
    margin: 0px;
    cursor: pointer;
    background: url("../image/button/roundyb.png") repeat-x scroll left top #F2F2F2;
}

/* -------- End Buttons ---------- */



.clsFormInput {
 width: 75px;

}
.clsLongTxt {
 width: 300px;
}

.dataentry input {
 width: 50px;
 font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
 background-color: #D7E5F2;
 color: #102132;
 border: 1px solid #284279;
}
.dataentry TD {
 font-size:10px;
 font-weight:bold;
 color:black;
 font-family:verdana;
}

.dataentrynum {}

/* Used by Input Matrix */
.dataentrytxt {width:100px;}

.spButtonRow
{
    margin-left:auto;
    margin-right:auto;
}

.clsProgTable
{
    margin-left:200px;
   
}
.watermarkOn {
        color: #CCCCCC;
        font-style: italic;
}
/* Classes for resume survey link */
.clsResumeLink
{
    color:#0085CF;
    font-weight:bold;
    cursor:hand;
    cursor:pointer;
    text-decoration:underline;
}
.clsResumeLink:hover
{
    color:#0085CF;
    font-weight:bold;
    cursor:hand;
    cursor:pointer;
    text-decoration:underline;
}