/* general */

body {
  padding: 0px;
  font-size: 12px; 
  color: #000000; 
  font-family: verdana, arial, helvetica, sans-serif; 
  margin: 0px;
}
p, li {  
  color: #000000;
  line-height: 1.6em;  
}
td, th {
  font-size: 12px;
  color: #000000; 
}
a {
  color: #336699; text-decoration: none;
}
a:hover {
  color: #000000; text-decoration: underline
}
h1 {
  margin-top: 9px; 
  margin-bottom: 2px; 
  font-size: medium;
  color: #333;
}
h2 {
  margin-top: 6px; 
  margin-bottom: 2px; 
  font-size: medium
}
h3 {
  margin-top: 4px; 
  margin-bottom: 0px; 
  font-size: small
}
h4 {
  margin-top: 9px; 
  margin-bottom: 2px; 
  font-size: medium;
  color: #333; 
}
h5 {
  margin: 3px 0px; 
  font-weight: bold; 
  font-size: 14px; 
  color: #ff9933
}
code {
  font-size: 12px
}
pre {
  font-size: 12px
}
b, strong, .content { color: #333 }
#content {
  width: 100%; background-color: white;
}
#main-content {
  width: 770px; 
  border-left: 8px solid #ffcc00; 
  background-color: white; 
  padding-bottom: 10px
}
#main-content p a {
  color: black;
  text-decoration: underline;
}
#content-column-left {
  width: 140px; 
  float: left; 
  padding-bottom: 10px
}
#content-column-right {
  width: 600px; 
  float: right; 
  background-color: white
}
.bg-nav { 
  background-color: #cccccc
}
.tdheader-empty { 
  background-color: #ffffff;
  border-top: 1px solid #000000;
  padding-top: 6px;
  padding-bottom: 6px
}
.header { 
  background-color: #666 
}
tr.ruled {
  background: #ffffdd;
}
.content { 
  background-color: #eeeee0; 
  text-align: left;   
}
div.action-links {
  padding: 5px; 
  border: 0; 
  width: 90%;
  text-align: right; 
}
div.action-links a {
  line-height: 1.3em;
  font-size: xx-small;  
  text-decoration: none;
  display: block;
  margin: 7px 0 7px 0;  
}
a.standard {
  color: #336699 !important;
  text-decoration: underline;
}
a.standard:hover {
  color: black !important;
} 
.lighttext {
  color: gray;
}
.smalltext {
  line-height: 1.3em;
  font-size: xx-small;  
  text-decoration: none
}
.midtext {
  line-height: 1.6em;  
}
.midtext a {
  color: black;
  text-decoration: underline;	
}
.midtext a:hover {
  color: black;
}
.treetext {  
  line-height: 1.6em;   
  font-weight: bold;
  color: #333
}
.textsmall {
  font-size: xx-small
}
.title {
  margin-top: 2px;  
  margin-bottom: 0px;
  padding-bottom: 0px;
  padding-top: 2px;
  font-size: small               
}
.heading {  
  font-size: 12px;
  font-weight: bold;
  color: white
}
a.heading:hover {
  color: #ffffff; text-decoration: underline
}
.label { 
  font-size: 12px;
  color: #000000;
  line-height: 1.6em;
  text-decoration: none
}
.error { 
  display: inline; 
  border: 1px solid red; 
  color: red; 
  padding: 3px
}
.ul-message { 
  list-style: none; margin-left: 5px
}
.li-message {
  margin-bottom: 15px;
}
.span-message { 
  border: 1px solid red; 
  background-color: white; 
  padding: 5px
}
.sub-title {
  font-weight: bold; 
  font-size: 14px; 
  margin: 3px 0px; 
  color: #444
}
.sub-heading {
  font-weight: bold; 
  font-size: 13px; 
  margin: 14px 0px; 
  color: #444
}
.sub-title-link {
  font-weight: bold;
  font-size: 14px;
  margin: 3px 0px;
  color: #444;
  text-decoration: underline
}
.clear {
  clear: both
}
.instructions-content {
  width: 90%
}
hr.horizontal-line { 
	background-color: white; 
	border: 0;
	border-top: 1px solid #FF9933; 
	width: 100%; 
	margin-top: 10px;
	height: 1px;
}
#progress {
	float: right; 	
	padding-right: 20px;
	margin-top: -15px;
}
div#progress span.steps { 	
	padding: 5px; 
	color: #444; 
	font-size: 12px; 	
}
.arrow {
  float: left; 
  width: 20px; 
  background: url(../images/arrows_white.gif) no-repeat -2px -88px; 
  cursor: pointer; 
}
div.action-link { 
	display: inline;
	color: #336699 !important;
}
div.action-link:hover {
  color: black !important; 
  cursor: pointer; 
}
div.printview {	
	float: right; 
	margin-bottom: 7px;  
	width: 60px;
	margin-top: -15px;
	text-align: right;
	vertical-align: middle;
	background: url(../images/print.gif) no-repeat 0 0px; 
	font-size: 10px;
	height: 20px;	
}
div.printview a { color: #333; }	

/* message styles */

.tip-message {
  clear: both;
  padding: 8px 12px 8px 12px;
  margin-top: 16px;
  margin-bottom: 16px;
  border: 1px solid #ff9933;
  background-color: #ffffff;
  font-size: 11px;
  width: 90%;
}
.error-message {
  clear: both;
  padding: 8px 12px 8px 12px;
  margin-top: 16px;
  margin-bottom: 16px;
  border: 1px solid #dd3610;
  background-color: #ffebe8;
  font-size: 11px;
  width: 80%;
}  
.success-message {
  clear: both;
  padding: 8px 12px 8px 12px;
  margin-top: 16px;
  margin-bottom: 16px;
  border: 1px solid #e2c822;
  background-color: #fff9d7;
  font-size: 11px;
  width: 80%;
}
.info-message {
  clear: both;
  padding: 8px 12px 8px 12px;
  margin-top: 16px;
  margin-bottom: 16px;
  border: 1px solid #bdc7d8;
  background-color: white;
  font-size: 11px;
  width: 80%;
} 
.validation-message {
	font-size: 11px;
} 

/* main tables and form layout styles */
/* some of the table widths are in pixels because of problems with JavaScript */
table.table-main {
	border-collapse: collapse; 
	margin-bottom: 20px;
	width: 90%;
	border: 1px solid #666;  
    background-color: #ffffff 
}
table.table-main tr td, table.table-main tr th {
	padding: 15px 7px 12px 7px;
	border-spacing: 0; 
}
table.table-main tr .heading {
	padding: 7px;
	text-align: left;	
}
table.table-main tr td {
	text-align: left;
	vertical-align: bottom;
}
table.table-main tr td.label, table.table-main tr th.label {
	text-align: right;
	vertical-align: middle;
	white-space: nowrap;	
	width: 270px;	
}
table.table-main tr.header th span {
	float: left;	
}
table.table-main tr.header th div.help {
	float: right; width: auto; clear: right;
}
table.table-main tr.header th div.help a {
	color: white;
}

div.form-buttons {
	text-align: right;
	margin-bottom: 20px;
	width: 90%;	
}

div.form-buttons-only {
	text-align: left;
	margin-top: 25px;
	margin-bottom: 25px;
	width: 80%;	
}

/* main table and form and related layout overrides */
/* some of the table widths are in pixels because of problems with JavaScript */
table#custom-field-results tr td.actions,
table#custom-field-results tr td.action,
table#assess-table tr th#assess-table-actions, 
table#questionedit tr.header th.action, 
table#custom-fields tr.header td.action,
table#resources tr.header td.action,
table#filteredit tr.header td.action,
table#questionedit tr.content td.smalltext, 
table#custom-fields tr.content td.smalltext { 	
	text-align: center !important; 
} 

table#question-summary-results,
table#test-question-summary-results, 
table#respondent-summary-results,
table#delete-by-answer,
table#custom-field-results,
form#filterchoose,
table#respondent-detail-questions,
table#text-question-results,
div#advanced-html-buttons { 
	width: 100% 
} 

table#group-advanced tr td.label, 
table#assessment tr td.label, 
table#delete-dates tr td.label, 
table#download-results tr td.label, 
table#forgot-password tr td.label,
table#question-summary-results tr th.score,
table#test-question-summary-results tr th.score,
table#text-question-advanced tr td.label {
	width: 40%;
}  

table#delete-dates tr td.midtext, 
table#download-results tr td.content,
table#forgot-password tr td.field,  
table#group-advanced tr td.field, 
table#assessment tr td.field,
table#text-question-advanced tr td.field { 
  width: 60%; 
}

table#questionedit, table#custom-fields,
div#questionedit-links, div#custom-fields-links,
div#custom-fields, div#fields-action-links,
table#filteredit, div#filteredit,
div#filter-action-links { 
	width: 95% 
}

table#account-registration tr td.label,
table#contact-details tr td.label,
table#credit-card tr td.label,
table#group-general tr.header td.label { 
	width: 33% 
}

table#account-registration tr td.field,
table#contact-details tr td.field,
table#credit-card tr td.field, 
table#group-general tr td.field { 
	width: 66% 
}

table#questionedit tr td.number, 
table#custom-fields tr td.number,  
table#filteredit tr td.number,
table#custom-field-results tr td.number,
table#respondent-detail-login tr td.number,
table#respondent-detail-questions tr td.number { 
	vertical-align: top;
	width: 5%;	
}

table#question-summary-results tr td.midtext,
table#test-question-summary-results tr td.midtext,
table#question-summary-results tr td.smalltext,
table#test-question-summary-results tr td.smalltext,
table#question-summary-results tr td.content,
table#test-question-summary-results tr td.content,
table#question-answers tr td.question-option, 
table#field-answers tr td.field-option { 
	border-top: 1px solid #666; 
	border-left: 1px solid #666; 
}

table#questionedit .smalltext,  
table#assess-table .smalltext {
	white-space: nowrap;
}

table#settings-timing tr td div#timeAssessment div,
table#settings-timing tr td div#timeQuestion div,
table#settings-timing tr td div#excludeSurveysTiming div {  
    width: 200px; 
    float: left; 
    text-align: left; 
    margin-left: 10px;      
}
table#settings-timing tr td div#timeAssessment div.label,
table#settings-timing tr td div#timeQuestion div.label,
table#settings-timing tr td div#excludeSurveysTiming div.label {
    width: 190px;
    text-align: right;
    margin-right: 7px; 
}
table#settings-timing tr td div#excludeSurveysTiming div {
	margin-top: 15px;
	width: 100px; 
}
table#settings-timing tr td div#excludeSurveysTiming div.label {
	margin-top: 15px;
	width: 250px;
}

table#settings-section tr th.group-info, table#settings-section tr td.group-info {	
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	width: 90%;
}
table#settings-section tr th.action, table#settings-section tr td.actions {	
	border-bottom: 1px solid #666; 
	text-align: center;
}

table#settings-timing tr td.label {	width: 200px; }
table#assess-comments tr td.label {	width: 230px; }
table#assess-labels tr td.label { width: 230px; }
table#finish-link tr td.label { width: 150px; }

table#active-assess { width: 450px; } 
table#active-assess tr th.label { width: 31%; }
table#active-assess tr td.active-assess-space { width: 5%; }
table#active-assess tr td.active-assess-id { width: 64%; }

table#assess-table { width: 590px; } 
table#assess-table tr th { text-align: left }
table#assess-table tr th#assess-table-id { width: 26% }
table#assess-table tr th#assess-table-resp { width: 10% }

form#groupname { width: 90% }

table#delete-results tr td.label { width: 70%; }
table#delete-results tr td.midtext { width: 30%; }

table#questionedit tr.header th.heading, 
table#custom-fields tr.header td.heading { 
	text-align: left 
}

table#questionedit tr td, 
table#custom-fields tr td,
table#filteredit tr td,
table#custom-field-results tr td { 
	border-bottom: 1px solid #666 
}

table#questionedit tr td.question, 
table#custom-fields tr td.question { 
	width: 62%; 
	border-right: 1px solid #666; 
	vertical-align: top
}
table#questionedit tr td.actions, 
table#custom-fields tr td.actions { 
	width: 32%; 
	text-align: center; 
	vertical-align: top 
}

table#questionedit tr td.section {
	vertical-align: middle;
}

table#filteredit tr td.filter { 
	width: 70%; 
	border-right: 
	1px solid #666 
}
table#filteredit tr td.actions { 
	width: 27%; 
	text-align: center 
} 

table#group-general, table#group-advanced,
div#group-buttons, 
form#filtername, form#filters { 
	width: 80% 
}

table#group-advanced tr td div#points div.label {
  width: 38%; 
  float: left; 
  text-align: right;  
}
table#group-advanced tr td div#points div.field {
  width: 59%; 
  float: right;
  padding-left: 10px;
}

table#question-general tr td.label { width: 25% }

table#question-general tr td.field, 
table#resources tr td.resource { width: 75% }

table#field-question tr td.label, 
table#resource-add tr td.label { 
	width: 32% 
}

table#field-question tr td.field, 
table#resource-add tr td.field { 
	width: 68% 
}

table#field-question tr td.field textarea {
  float: left; margin-right: 3px
}

table#resources, div#resources-action-links { width: 93% }

table#resources tr td.actions { 
	width: 25%; 
	text-align: center 
}

table#preset-fields tr td#preset-field { width: 35% }
table#preset-fields tr td#preset-label { width: 45% }
table#preset-fields tr td#preset-displayed { width: 10% }
table#preset-fields tr td#preset-validated { width: 10% }

table#notify-emails tr td.address,
table#custom-field-results tr td.field { 
	width: 85% 
}

table#notify-emails tr td.actions,
table#custom-field-results tr td.action { 
	width: 15% 
}

table#notify-emails tr#email-input { background-color: #eeeeee; } 

table#account-registration tr td#terms { 
	text-align: center; 
	padding-bottom: 20px 
}
table#account-registration tr td#terms a { 
	text-decoration: underline 
}

table#postal-address tr td.label,
table#account-password tr td.label,
table#account-other tr td.label { width: 35% }

table#postal-address tr td.field,
table#account-password tr td.field
table#account-other tr td.label { width: 65% }

table#credit-card tr#card-type { background-color: #f3f3f3 }

table#assessment-fonts tr td.label { 
	width: 15%; 
	border-right: 1px solid #666; 
	border-bottom: 1px solid #666;
	white-space: nowrap;
}
table#assessment-fonts tr td.field { 
	width: 85%; 
	text-align: left;
	border-bottom: 1px solid #666;
	white-space: nowrap;	
}
table#assessment-fonts, div#assess-fonts-buttons { width: 105% }

table#text-question tr td.label { width: 25%; }
table#text-question tr td.field { width: 75%; }

div#filter-in { width: 38%; float: left }
div#filter-out { width: 38%; float: right }
div#filter-buttons { 
	width: 20%; 
	margin-left: 5px; 
	float: left 
}
div#filter-buttons input#add-button { 
	margin: 20px 0 20px 3px 
}

table#standard-fields .label { 
	text-align: right; 
	white-space: nowrap;
	margin-right: 10px;
}
table#standard-fields .box { 
	width: 20%; 
	text-align: center;	
	margin-right: 40px; 
}
table#standard-fields tr td.rule { 
	background-color: #ffffdd 
}

table#begin-comments { 
    margin-top: 15px; 
	width: 70%; 
	border-collapse: collapse; 
	border: 0;
}
table#begin-comments tr td { padding: 5px }

form#deleteresultschoose { padding-top: 10px }
form#deleteresultschoose div { margin-bottom: 20px;  }
form#deleteresultschoose div div.label { 
	text-align:left; 
	white-space: nowrap; 
	width: 350px; 
	float: left;
	margin-top: -2px
}
form#deleteresultschoose div input {
	vertical-align: bottom;
}
div#delete-buttons {
 	clear: both;
 	text-align: left; 
}

table#question-summary-results tr td.midtext,
table#question-summary-results tr td.smalltext,
table#test-question-summary-results tr td.midtext,
table#test-question-summary-results tr td.smalltext {
	vertical-align: top;	
}
table#question-summary-results tr th.question,
table#test-question-summary-results tr th.question {
	width: 53%;
}

table#question-summary-results tr th.action,
table#test-question-summary-results tr th.action {
	width: 7%;
}
table#question-summary-results tr td.number,
table#test-question-summary-results tr th.number {
	width: 5%;	
}
table#question-summary-results tr td.question,
table#test-question-summary-results tr th.question {
	width: 48%;
}

table#respondent-summary-results tr td.score,
table#respondent-summary-results tr td.action,
table#delete-by-answer tr td.score,
table#delete-by-answer tr td.action {
	width: 12%;
}
div#respondents-per-page {
	width: 49%; 
	float:left; 
	vertical-align: top; 
	margin-top: -8px
}
div#page-count {
	width: 49%; 
	float:left; 
	text-align: right
}
form div.keyword-search {
	width: 59%; 
	float:left; 
	text-align: left; 
	margin-bottom: 12px;	
}
form div.keyword-search .search-button-image {
	margin: 0 40px 0 5px; 
	border: 0; 
	vertical-align: bottom; 
	margin-bottom: 2px
}
form div.apply-filter {
	width: 39%; 
	float:left; 
	text-align: right; 
	margin-bottom: 12px
}

table#custom-field-results tr td.actions {
	border-left: 1px solid #666;
}

table#respondent-detail-questions tr td {
	border: 1px solid #666;
}
table#respondent-detail-questions tr td.midtext {
	vertical-align: top;
}
table#respondent-detail-questions tr td.correct {
	text-align: center;
}

table#question-points tr td.label { width: 20% }
table#delete-dates tr td#assess-name { font-weight: bold; }
 
/* additional table layout styles */

table#resource-space {	
	border-collapse: collapse; 
	border: 0;	
	width: 40%;
}
table#resource-space th {
	width: 40%;
	text-align: left;
	line-height: 1.3em;
    font-size: xx-small;      
}
table#resource-space td {
	width: 60%;
	text-align: right;
	line-height: 1.3em;
    font-size: xx-small;      
}

table#assess-template, table#assess-complete {
	border-collapse: collapse;
	border: 1px solid #003366;
	width: 90% 
}
table#assess-template tr td, table#assess-complete tr td { 
	padding: 5px;	
	border-bottom: 1px solid #666; 
}
table#assess-template tr td {
	border-right: 1px solid #666; 
}
table#assess-template tr td.midtext { width: 70% }
table#assess-complete tr td { padding: 12px }
 
table#stats {
	border-collapse: collapse; 
	border: 0;
}
table#stats tr td { padding:5px }
table#stats tr td.smalltext { width: 200px }
table#stats tr td.midtext { width: 150px }

table#respondent-top {
  border-collapse: collapse;
  border-color: #eeeeee;
  width: 100%;
  vertical-align: top;
  margin-bottom: 20px;
}
table#respondent-table-top tr td {
 padding: 2px;
}
table#respondent-top tr td div.treetext {  
  color: #000000; 
  font-size: 12px;  
  font-weight: bold;
  float: left;
  width: 49%;
}
table#respondent-top tr td div.midtext {  
  color: #000000; 
  font-size: 12px;  
  float: right;
  width: 50%;
}
table#respondent-top tr td#fullname div.treetext {
	width: 15%;
}
table#respondent-top tr td#fullname div.midtext {
	width: 84%
}

table#respondent-detail-login {
	border-collapse: collapse;
	border: 1px solid #eee;
	width: 100%;
}
table#respondent-detail-login tr td {
	padding: 4px;
	border-left: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
table#respondent-detail-login tr td.midtext {
	vertical-align: top;	
}
table#text-question-results {
	margin-bottom: 5px;
}

div#advanced-html {
	padding: 5px 0 15px 10px;
	margin-bottom: 20px;
}

div#delete-by-answer-buttons {
	width: 100%;
	margin-top: 10px;
}

/* menu */

#menu-container {
  float: left
}
.menu {
  font-weight: bold;
  font-size: x-small;    
  color: #336699;
  white-space: nowrap;
  text-decoration: none;
  height: 20px;
  padding-top: 0.7em; 
  padding-bottom: 0.1em
}
.menu-divider {
  border-top: 1px solid #c0c0c0; width: 120px
}
.submenu-text div {
  height: 25px
}
.submenu {
  font-size: xx-small; text-decoration: none
}
.submenu-highlight {
  font-size: xx-small; 
  color: black; 
  text-decoration: none
}
a.menu:hover {
  color: #000000; text-decoration: underline
}
a.submenu:hover {
  color: #000000; text-decoration: underline
}

/* header */

#header-main {
  background-color: #879db3;
}
#logo {
  float: left;
  width: 225px;
  background-color: #879db3;  
  padding-top: 5px;
  margin-bottom: 5px;
  text-align: center;  
}
#header-container { 
  background-color: #f3f3f3;
  border-bottom: 1px solid #666;
  border-top: 1px solid #666;
  padding-top: 6px;
  padding-bottom: 10px;
  height: 3em
}
#header-content {
  width: 760px; 
}
.header-left {
  float: left; width: 70%	
}
.header-right {
  float: right; 
  text-align: right; 
  vertical-align: top; 
  width: 25%
}
.header-left div, .header-right div {
  padding: 2px
}
#print-header {
  height: 60px; width: 100%; background-color: #879DB3
}
#logo img { border: 0 }

/* footer */

div#footer-main {
  border-top: 1px solid #666; 
  margin-bottom: 10px; 
  clear: both
}
div#footer-content {
  padding: 7px 5px 10px 5px; 
  width: 760px; 
  float: left; 
  text-align: left
}
div#copyright { float: left }
div#version { float: right }

div#copyright-print { 
	float: left;
	margin: 10px 0 10px 5px; 
}

/* overview pages */

.main-container {
  padding: 10px;
}

/* other page specific styles */

h4#begin-header {
	width: 75%;
}
div#payments img, div#payments form {
	float: left;
	padding-left: 7px;		
}
img#worldpay {
	padding-top: 5px;
	border: 0;
}
img#paypal {
	padding-bottom: 10px;
	border: 0;
}
div.summary-key-container {
	float: left; width: 100%;	
}
div.summary-key-container div {		
	width: 49%;	
}
div.summary-key {
	font-size: 10px;
	float: left;
	margin-bottom: 7px;	
}
div.apply-filter {
	font-size: 10px;
	float: right;	
}
form.add-assess-info {
	background-color: #f3f3f3; 
	padding: 5px 15px 5px 15px;
	border: 1px solid #666;
}
#question-results-graph p {
	padding-left: 40px;
}
#question-results-graph p#question-results-graph2-text,
#custom-fields-graph {
	padding-left: 70px; padding-top: 10px
}

form.add-assess-info input { margin: 15px 0 15px 0 }

div#results-overall-top { width: 100%; float: left; }
p#results-overall-text { float: left }

form#filter-overall { 
  float: right;
  margin-top: 1em;
  text-align: right; 
}

form#assesslogo select {
  width: 40%;  
}

table#active-assess .label, table#assess-table tr.content .label { 
	color: #333
}

form#template p { margin: 15px 0 25px 0 }

form#template p label { width: 320px; display: block; float: left; }