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

 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

 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;}

.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:1px;
  width:720px;
  margin-left:auto;margin-right:auto;
  padding-top:5px;
  text-align:center;
  background-color:white;border-bottom:2px solid black;
}
#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 
   {
    height:45px;
    width:100%;
    font-family:verdana;font-size:10px;color:#444444;font-weight:bold;
    padding-top:4px;background-color:white;
   }

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


   #FooterDiv {text-align:center;width:100%;height:40px;}

   #validationsummary2 {
    width:640px;
    padding:10px;
   }

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




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


/* Note 1 - Main Survey Content              */

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

   #M_Details
   {
    margin-left: auto; 
    margin-right: auto;    
    width:720px;
    text-align:center;
   }

/* --------- 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 - white-space:nowrap stops answers from wrapping! */


.spACell {
 font-family:tahoma;
 color: black;
 font-size:11px;
 padding-left:15px;
 font-weight:bold;
 /* white-space:nowrap; */
}

.spQRow {
 font-family:tahoma;
 color: #455E7C;
 font-size:11px;
 font-weight:bold;
 padding-left:10px;
}

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

.qLColHeading {
	font-family:tahoma;
 color: black;
 font-size:11px;
   	width:60px;
	vertical-align:bottom;
}
.qLMColHeading {
	font-family:tahoma;
 color: black;
 font-size:11px;
   	width:60px;
	vertical-align:bottom;
}
.qLTColHeading {
	font-family:tahoma;
 color: black;
 font-size:11px;
   	width:60px;
	vertical-align:bottom;
}


/* Note 9 - Padding for Lines - values are top,right,bottom,left */


#M_DetailsLine1Col1 {padding:20px 20px 0px 50px;}
#M_DetailsLine2Col1 {padding:20px 20px 0px 50px;}
#M_DetailsLine3Col1 {padding:20px 20px 0px 50px;}
#M_DetailsLine4Col1 {padding:20px 20px 0px 50px;}
#M_DetailsLine5Col1 {padding:20px 20px 0px 50px;}
#M_DetailsLine6Col1 {padding:20px 20px 0px 50px;}
#M_DetailsLine7Col1 {padding:20px 20px 0px 50px;}
#M_DetailsLine8Col1 {padding:20px 20px 0px 50px;}
#M_DetailsLine9Col1 {padding:20px 20px 0px 50px;}
#M_DetailsLine10Col1 {padding:20px 20px 0px 50px;}
#M_DetailsLine11Col1 {padding:20px 20px 0px 50px;}
#M_DetailsLine12Col1 {padding:20px 20px 0px 50px;}
#M_DetailsLine13Col1 {padding:20px 20px 0px 50px;}
#M_DetailsLine14Col1 {padding:20px 20px 0px 50px;}


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


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



.navbutton {
 margin-left:30px;
 width:75px;
 padding-top:8px;
 padding-bottom:8px;
 font-family:verdana;
 font-size:11px;
 font-weight:bold;
 background-color:white;
 border-left:1px solid #265AA7;
 border-top:1px solid #265AA7;
 border-right:1px solid #265AA7;
 border-bottom:1px solid #265AA7;
}


.navbuttonon {
 margin-left:30px;
 width:75px;
 padding-top:8px;
 padding-bottom:8px;
 font-family:verdana;
 font-size:11px;
 font-weight:bold;
 background-color:white;
 border-left:1px solid #265AA7;
 border-top:1px solid #265AA7;
 border-right:1px solid #265AA7;
 border-bottom:1px solid #265AA7;
}


.clsFormInput {
 width: 75px;

}

.dataentry input {
 width: 250px;
 font: 9px Verdana, 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;
}