/* VSURVEY STYLESHEET - vsurvey.css */
/* To be used in conjunction with apesma.css, located in website root directory */

/* Created by Jen Eggleston, 27 October 2006 */
/* ____________________________________________________________________________ */


/***********************************************************/
/*	HTML STYLES */
/***********************************************************/
p{
}
.input_tiny { width:70px; }
.input_small, .input_other { width:130px; }
.input_medium { width:200px; }
.input_large { width:400px; }
html, body { 
 background-color: #ffffff;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color:#3F729E;

}

h2 { font-size: 17px; font-style:normal; text-transform:uppercase; }
h3 { 
	font-size: 13px; font-style:normal;
	margin-bottom:0px;
	padding:0px;
}

h5 {
text-align:center;
}

textarea
  { font-family: Arial, Helvetica, sans-serif; font-size: 13px }


/***********************************************************/
/*	CLASSES */
/***********************************************************/

.surveytitle
  { color: #294A84 }
  /* use with h4 tag */
  
.surveysubheading
  { color: #294A84; padding-top: 10px }
  /* use with h3 tag */

.surveyinstruction
  { font-size: 11pt; color: #FF0000; text-align: center }
  /* use with h2 or h1 tag */
  
.submitbutton
  { font-size: 8pt; font-weight: bold; text-align: center }  

.questionbox
  { margin: 5px 0px 5px 0px; background-color: #E4EDF2; border: 1px solid #000; padding: 5px; font-family: Arial, Helvetica, sans-serif;  font-size: 10pt }
* html .questionbox { width: 100% }
  /*{ width: 100%; background-color: #E4EDF2; border: 1px solid #000000; padding: 15px; margin: 15px 0px 15px 0px }*/
  /* use with div tag - light blue with black border box */
p.questionbox { margin-top: 0 }

.questionboxsubheading
  { color: #294A84 }
  /* use with h1 tag */
  
.textfieldsingle
  { vertical-align: bottom; font-family: Arial, sans-serif; font-size: 10pt; padding-left: 2px }
  /* used to absmiddle text field next to label. ONLY to be used when appearing with radio button or checkbox */
  
.textfieldmulti
  { width: 525px; font-family: Arial, sans-serif; font-size: 10pt; padding-left: 4px }  
  /* used to set fonts etc in text area */


/* Assorted answer table structures - used in div tag (eg: <div class="answertable"> so individual td tag classes
   do not have to be assigned. div tag sits on outside of table tags */

.answertable td
  { width: 50%; height: 25px; vertical-align: top }
  /* used for standard two column design of multiple checkbox or radio button options */
  
.yesnotable td
  { width: 25%; height: 25px; vertical-align: top }
  /* used for single row of min 2, max 3 multiple checkbox or radio button options (eg: Yes | No | Don't know) */
  
.singleratingtable td
  { font-size: 10pt; width: 15%; text-align: center }
  /* used for a single row of ratings (eg: Most effective | Effective | Neutral | Less effective | Not effective | N/A) 
     where the question is single-part (eg: How effective do you think this survey will be?) */
  
.ratingtable th
  { border: 1px solid #FFFFFF; background-color: #86BEF2; font-size: 13px; padding: 6px; font-weight: bold }
.ratingtable td
  { border: 1px solid #FFFFFF; width: 10%; text-align: center }
div .ratingtable .options
  { text-align: left; padding-left: 5px; padding-top:8px; padding-bottom:8px; }
  /* used for multiple-part question, set up as ratings matrix table (eg: How effective do you think each of the following 
     formats are? Option A..., Option B..., etc). th tag is used in first row to highlight rating titles with a mid-blue 
     background and white borders. td tag is center-aligned (as most cells in matrix table are single ratio buttons), so 
     .options allows list of question-parts (usually left column) to be left-aligned. td set to 10% width (to accommodate
     radio buttons plus rating titles, so remaining % space in left column needs to be set in table itself */

.qandatable th
  { width: 30%; vertical-align: top; padding-bottom: 10px; text-align: left }
.qandatable td
  { width: 70%; vertical-align: top; padding: 5px 0px 10px 0px; font-weight: bold }
.qandatable .note
  { font-weight: normal; font-style: italic }   
.multiCell {

	padding-right:10px;
}

.multiCell td {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
}

  /* used for salary info, etc where the question and answer (qandatable) appear on the same line/table row
     (eg: 1. $_________ pa | Annual base salary excluding allowances and performance pay). Usually appear in groups of 3-5,
     each in their own row, within the one questionbox. th tag contains text field and associated labels, td tag contains
     question, which appears in bold as per standard (.note allows for unbold, italicised note with question).*/


.qBox
	{ margin: 5px 0px 5px 0px; background-color: #E4EDF2; border: 1px solid #86BEF2; padding: 5px; font-family: Arial, Helvetica, sans-serif;  font-size: 10pt; color:#3F729E }
* html .qBox 
  { width: 95%; background-color: #E4EDF2; border: 1px solid #86BEF2; padding: 15px; margin: 15px 0px 15px 0px }
  /* { IE hack to stop the horizontal scrolling bar from appearing */
p.qBox { margin-top: 0 }

.qBox table {
margin-left:10px;
margin-bottom:5px;
margin-top:8px;
}

.qBox h3 {
padding-bottom:12px;
}
.blue { color: #284C88 }
.red { color:#FF0000 }
.darkred { color: #9D0023 }
.grey { color: #808080 }
.white { color: #FFFFFF }
.greyBg { background-color: #F0F0F0 }
.alignCenter { text-align:center }
.comment, .smalltext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
}


.redButton {
	font-family: Arial; font-size: 8pt;
	font-weight: bold;
	background-color: #9D0023;
	color: #FFFFFF
}


.disp_block {display: block;}
.disp_none {display: none;}