HSBC Form Style Sheet

Last Updated: Ralph Harvey
August 25th 2009
- - - - - - - - - - - - - - - - - - - - - */

.hsbc{
	font-family:"Lucida Grande", Tahoma, Arial, sans-serif;
}
.hsbc li{
	width:95%;
}
form ul{
	margin:0;
	padding:0;
	list-style-type:none;
	width:100%;
}
form li{
	display:block;
	margin:0;
	padding:6px 5px 9px 9px;
	clear:both;
}
form li:after, form li div:after{
	content:"."; 
	display:block;
	height:0; 
	clear:both; 
	visibility:hidden;
}
* html form li{height: 1%;}
* html form li div{display:inline-block;}
*+html form li div{display:inline-block;}

form li div, form li span{
	margin:0 .3em 0 0;
	padding:0;
	color:#444;
	font-size: 85%;
}

form infoSpacer {
	
	margin:0 .3em 0 0;
	padding: 1em;
	color:#444;
	font-size: 100%;
}
form li span{
	float: left;
}

.floatleft {
		float: left;
}

.center, 
form li span.center input.text, form li span.center label,
form li.name input.text, form li.name span label,
form li.date input.text, form li.date span label, 
form li.phone input.text, form li.phone span label,
form li.time input.text, form li.time span label{
	text-align:center;
}
form li.time select.select{
	margin-left:5px;
}

form li div.col span{
	display:block;
	width:100%;
	left;
	padding:0;
}
li.twoColumns div.col span{
	width:48%;
	margin:0 5px 0 0;
}
li.threeColumns div.col span{
	width:30%;
	margin:0 5px 0 0;
}
li.notStacked div.col span{
	width:auto;
	margin:0 7px 0 0;
}


form li.complex{
	padding-bottom:0;
}
form li div span.left, form li div span.right{
	margin:0;
	width:47%;
}
form li div span.full input, 
form li div span.full select, 
form li div span.left input, 
form li div span.right input,
form li div span.left select,
form li div span.right select{
	width:100%;
}

.left{
	left;
}
.right{
	right;
}
.clear{
	clear:both !important;
}

/* ----- INFO ----- */

.info{
	display:inline-block; 
	clear:both;
	border-bottom:1px dotted #ccc;
	margin:0 0 5px 0;
}
.info[class]{
	display:block;
}
.info h2{
	font-weight:normal;
	font-size:160%;
	margin:0 0 .2em 0;
	clear:left;
}
.info div{
	font-size:95%;
	line-height:135%;
	margin:0 0 1.1em 0;
	color:#555;
}

/* ----- SECTIONS ----- */

form li.section{
	clear:both;
	border-top:1px dotted #ccc;
	padding-top:.9em;
	padding-bottom:0px;
	padding-left:9px;
	width:97% !important;
	position:static;
}
form ul li.first{
	border-top:none !important;
	margin-top:0px !important;
}
form .section h3{
	font-weight:normal;
	font-size:110%;
	line-height:135%;
	margin:0 0 .2em 0;
}
form .section div{
	display:block;
	font-size:85%;
	margin:0 0 1.2em 0;
	padding:0;
}

/* ----- LIKERT SCALE ----- */

.likert table{
	margin:0 0 .9em 0;
	background:#fff;
	width:100%;
	border:1px solid #dedede;
	border-bottom:none;
}
.likert caption{
	text-align:left;
	color:#222;
	font-size:95%;
	line-height:135%;
	padding:5px 0 .5em 0;
}
.likert input{
	padding:0;
	margin:2px 0;
}
.likert tbody td label{
	font-size:100%;
	display:block;
	color:#565656;
}

/* ----- Top Row ----- */

.likert thead td, .likert thead th{
	background-color:#e6e6e6;
}

/* ----- Right Side ----- */

.likert td{
	border-left:1px solid #ccc;
	text-align:center;
	padding:4px 6px;
}
.likert thead td{
	font-size:85%;
	padding:10px 6px;
}

/* ----- Body ----- */

.likert th, .likert td{
	border-bottom:1px solid #dedede;
}
.likert tbody th{
	padding:8px 8px;
	text-align:left;
}
.likert tbody th label{
	color:#222;
	font-size:95%;
	font-weight:bold;
}

.likert tbody tr.alt td, .likert tbody tr.alt th{
	background-color:#f5f5f5;
}
.likert tbody tr:hover td, .likert tbody tr:hover th{
	background-color:#FFFFCF;
}

/* ----- Likert Classes ----- */

.col1 td{width:30%;} 
.col2 td{width:25%;}
.col3 td{width:18%;}
.col4 td{width:14.5%;}
.col5 td{width:12%;}
.col6 td, .col7 td{width:10%;}
.col8 td, .col9 td, .col10 td{width:6.5%;}
.col11{width:6%;}

.hideNumbers tbody td label{
	display:none;
}

/* ----- LABELS ----- */

form li div label, form li span label{
	margin:0;
	padding-top:6px;
	clear:both;
	font-size:115%;
	line-height:110%;
	color:#444;
	display:block;
}
form li div span label{
	padding-bottom:10px;
}
label.desc{
	font-size:195%;
	font-weight:bold;
	color: #ac0000;
	line-height:150%;
	margin:0;
	padding:0 0 3px 0;
	border:none;
	display:block;
}
label.choice{
	display:block;
	font-size:100%;
	line-height:150%;
	margin:-17px 0 0 23px;
	padding:0 0 5px 0;
	color:#222;
	width:100%;
}
.safari label.choice{
	margin-top:-16px;
}
form.rightLabel div.col{
	margin-top:-3px;
}

span.symbol{
	font-size:120%;
	line-height:135%;
}
form li .datepicker{
	left;
	margin:.19em 5px 0 0;
	padding:0;
	width: 16px;
	height: 16px;
	cursor:pointer !important;
}

.info {

color: #0055BB;

border-top: 3px solid #629de3;

border-bottom: 3px solid #629de3;

background: #D8E5F8 url(status-info.png) 10px 50% no-repeat;

}

/* ----- MIN/MAX COUNT ----- */

form li div label var{
	font-weight:bold;
	font-style:normal;
}
form li div label .currently{
	display:none;
}

/* ----- FIELDS ----- */

input.text, input.search, input.file, textarea.textarea, select.select{
	font-family:"Lucida Grande", Tahoma, Arial, sans-serif;
	font-size:120%;
	color:#333;
	margin:0;
	padding:2px 0;
}
input.text, input.search, textarea.textarea{
	border-top:1px solid #7c7c7c;
	border-left:1px solid #c3c3c3;
	border-right:1px solid #c3c3c3;
	border-bottom:1px solid #ddd;
	background:#fff url(gradient.png) repeat-x top;
}

.inputbox

{
	border-top:1px solid #7c7c7c;
	border-left:1px solid #c3c3c3;
	border-right:1px solid #c3c3c3;
	border-bottom:1px solid #ddd;
	background:#fff url(gradient.png) repeat-x top;
	
	}
select.select{
	padding:1px 5px 0 0;
}
input.search{
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	padding-left:6px;
}
input.checkbox, input.radio{
	display:block;
	margin:4px 0 0 0;
	padding:0;
	width:13px;
	height:13px;
}
input.other{
	margin:0 0 8px 25px;
}

.safari select.select{
	font-size:120% !important;
	margin:0 0 1px 0;
}
* html select.select{
	margin:1px 0;
}
*+html select.select{
	margin:1px 0;
	border:1px solid red;
}

/* ----- FILES ----- */

li.file a{
	color:#222;text-decoration:none;
}
li.file span{
	display:inline;none;
}
li.file img{
	display:block;left;margin:0 0 0 -10px;padding:5px 5px 7px 5px;
}
li.file .file-size, li.file .file-type{
	color:#666;font-size:85%;text-transform: uppercase;
}
li.file .file-name{
	display:block;
	padding:14px 0 0 0;
	color:blue;
	text-decoration:underline;
}
li.file .file-delete{
	color:red !important;font-size:85%;text-decoration:underline;
}
li.file a:hover .file-name{
	color:green !important;
}
li.file a:hover .file-name{
	color:green !important;
}

/* ----- BUTTONS ----- */

input.btTxt{
	padding:0 7px;
	width:auto;
	overflow:visible;
}
form li.buttons{
	clear:both;
	padding-top:10px;
}
form li.buttons input{
	font-size:100%;
	margin-right: 5px;
}

/* ----- TEXT DIRECTION ----- */

.rtl .info h2, .rtl .info div, .rtl label.desc, .rtl label.choice, 
.rtl div label, .rtl span label, .rtl input.text, 
.rtl textarea.textarea, .rtl select.select, .rtl p.instruct, 
.rtl .section h3, .rtl .section div, .rtl input.btTxt{
	direction:rtl;
}

/* ----- SIZES ----- */

.third{
	width:32% !important;
}
.half{
	width:48% !important;
}
.full{
	width:100% !important;
}

input.small, select.small{
	width:25%;
}
input.medium, select.medium{
	width:50%;
}
input.large, select.large, textarea.textarea{
	width:100%;
}

textarea.small{
	height:5.5em;
}
textarea.medium{
	height:10em;
}
textarea.large{
	height:20em;
}

/* ----- ERRORS ----- */

#errorLi{
	width:99%;
	margin:0 auto;
	background:#fff !important;
	border:1px solid red;
	margin-bottom:1em;
	text-align:center;
	padding:1em 0 1em 0;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
}
#errorMsgLbl{
	margin:0 0 5px 0;
	padding:0;
	font-size:125%;
	color:#DF0000 !important;
}
#errorMsg{
	margin:0 0 2px 0;
	color:#000 !important;
	font-size:100%;
}
#errorMsg strong{
	padding:2px 3px;
	background-color: #FFDFDF !important;
	color:red !important;
}
form li.error{
	display:block !important;
	background-color: #FFDFDF !important;
	margin-bottom:3px !important;
}
form li.error label, form li.error span.symbol{
	color:#DF0000 !important;
}
form p.error{
	display:none;
	margin:0 !important;
	padding:7px 0 0 0 !important;
	color:#DF0000 !important;
	font-weight:bold;
	font-size:10px;
	line-height:10px !important;
	clear:both;
}
form li.complex p.error{
	padding:0 0 9px 0 !important;
}
form li.error p.error{
	display:block;
}
.leftLabel p.error, .rightLabel p.error{
	margin-left:30%;
	padding-left:15px;
}
.noI .leftLabel p.error, .noI .rightLabel p.error{
	margin-left:35%;
	padding-left:15px;
}

/* ----- REQUIRED ----- */

form span.req{
	display:inline;
	none;
	color:red !important;
	font-weight:bold;
	margin:0;
	padding:0;
}

/* ----- INSTRUCTIONS ----- */

form li.focused{
	background-color:#fff7c0;
}
form li.focused, form li:hover{
	position:relative; /* Makes Instructs z-index stay on top in IE. */
}
form .instruct{
	position:absolute;
	top:0;
	left:0;
	z-index:1000;
	width:42%;
	margin:0 0 0 8px;
	padding:8px 10px 10px 10px;
	border:1px solid #e6e6e6;
	background:#f5f5f5;
	visibility:hidden;
	font-size:105%;
}
form .instruct small{
	line-height:120%;
	font-size:80%;
	color:#444;
}
form li.focused .instruct, form li:hover .instruct{
	left:100%; /* Prevent scrollbars for IE Instruct fix */
	visibility:visible;
}

/* ----- ADVANCED CLASSNAMES ----- */

.hideSeconds .seconds, .hideAMPM .ampm{
	display:none;
}

/* ----- ALT INSTRUCTIONS ----- */

.altInstruct .instruct, li.leftHalf .instruct, li.rightHalf .instruct{
	visibility:visible;
	position:static;
	margin:0;
	padding:6px 0 0 0;
	width:100%;
	clear:left;
	background:none;
	border:none;
}
li.altInstruct p.complex , li.leftHalf p.complex, li.rightHalf p.complex{
	padding:0 0 9px 0;
}

/* ----- LABEL LAYOUT ----- */

.leftLabel li, .rightLabel li{
	width:74% !important;
	padding-top:9px;
}


.leftLabel label.desc, .rightLabel label.desc{
	left;
	width:29%;
	margin:0px 15px 0 0;
}
.rightLabel label.desc{
	text-align:right;
}
.leftLabel li div.col, .rightLabel li div.col,
.leftLabel li.complex div, .rightLabel li.complex div{
	left;
}


.leftLabel .small, .rightLabel .small{
	width:17%;
}
.leftLabel .medium, .rightLabel .medium{
	width:35%;
}
.leftLabel .large, .leftLabel textarea.textarea,
.rightLabel .large, .rightLabel textarea.textarea,
.leftLabel li div.col, .rightLabel li div.col,
.leftLabel li.complex div, .rightLabel li.complex div{
	width:64%;
}


* html .leftLabel .small, * html .rightLabel .small{
	width:23%;
}
* html .leftLabel .medium, * html .rightLabel .medium{
	width:55%;
}
* html .leftLabel .large, * html .leftLabel textarea.textarea,
* html .rightLabel .large, * html .rightLabel textarea.textarea{
	width:97%;
}


.leftLabel p.instruct, .rightLabel p.instruct{
	width:27%;
	margin-left:5px;
}
.leftLabel .altInstruct .instruct, .rightLabel .altInstruct .instruct{
	margin-left:29% !important;
	padding-left:15px;
	width:65%;
}


.leftLabel .buttons, .rightLabel .buttons{
	margin-left:15px;
}
* html .leftLabel .buttons, * html .rightLabel .buttons{
	margin-left:4px;
}
*+html .leftLabel .buttons, *+html .rightLabel .buttons{
	margin-left:7px;
}
.leftLabel .buttons .submit, .rightLabel .buttons .submit{
	margin-left:29%;
}
* html .leftLabel .buttons .submit, * html .rightLabel .buttons .submit{
	margin-left:22%;
}

/* ----- NO INSTRUCTIONS ----- */

.noI form li, .noI form li.buttons, .altInstruct form li, .altInstruct form li.buttons{
	width:97% !important;
}
.noI form li.section, .altInstruct form li.section{
	padding-left:9px !important;
}

/* ----- NO INSTRUCTIONS LABEL LAYOUT ----- */

.noI .leftLabel label.desc, .noI .rightLabel label.desc{
	width:34%;
}
.noI .leftLabel .large, .noI .leftLabel textarea.textarea,
.noI .rightLabel .large, .noI .rightLabel textarea.textarea,
.noI .leftLabel li div.col, .noI .rightLabel li div.col,
.noI .leftLabel li.complex div, .noI .rightLabel li.complex div{
	width:60%;
}

.noI .leftLabel .buttons input, .noI .rightLabel .buttons input{
	margin-left:34%;
}

/* ----- FIELD FLOATING ----- */

form li.leftHalf, form li.rightHalf{
	width:46% !important;
}
li.leftHalf{
	clear:left !important;
	left;
}
li.rightHalf{
	clear:none !important;
	right;
}
form li.likert{
	width:97% !important;
	clear:both !important;
	none;
}
li.leftHalf .medium, li.rightHalf .medium,
li.leftHalf .small, li.rightHalf .small{
	width:100%;
}

/* ----- CAPTCHA ----- */

form li.captcha {
	clear:both;
	border-top:1px dotted #ccc;
	margin-top:5px;
	padding-top:.9em;
	padding-bottom:9px;
	padding-left:9px;
	width:97% !important;
	position:static;
}
form li.captcha label.desc{
	text-align:left;
	margin-bottom:4px;
	float:none;
	width:auto !important;
}
#recaptcha_widget_div table{
	background:#fff;
}
form li.captcha .noscript iframe{
	border:none;
	overflow:hidden;
	margin:0;
	padding:0;
}
form li.captcha .noscript label.desc{
	display:block !important;
}
form li.captcha .noscript textarea{
	margin-left:12px;
}

/* ----- PAGINATION ----- */

#paging-context{
	clear:both;
	border-bottom:1px dotted #ccc;
	margin-top:5px;
	margin-bottom:7px;
	padding-top:.9em;
	padding-bottom:16px;
	padding-left:9px;
	width:97% !important;
	position:static;
}

#paging-context table{
	width:100%;
}

.pg1 td{
	text-align:center;
}
.pg1 var{
	background:none;
	border:1px solid #dedede;
	display:block;
	width:25px;
	height:25px;
	line-height:25px;
	margin:0 auto 0 auto;
	-webkit-border-radius:12px;
	font-size:90%;
	font-style:normal;
}
.pg1 .done var{
	background:#dedede;
}
.pg1 .selected var{
	background:#222;
	color:#fff;
	border:1px solid #222;
	font-weight:bold;
}
.pg1 b{
	display:block;
	padding-top:5px;
	font-size:85%;
	font-weight:normal;
}
.pg1 .selected b{
	font-weight:bold;
}
.nopagelabel b{
	display:none;
}

.pg2 td{
	border:1px solid #dedede;
	position:relative;
}
.pg2 var{
	display:block;
	padding:3px 7px;
	background:#dedede;
	font-style:normal;
	text-align:right;
}
.pg2 span{
	display:none;
	padding:3px 0;
	text-align:center;
	width:200px;
	margin:0 0 0 -100px;
	position:absolute;
	left:50%;
}
.nopercent var{
	color:#dedede;
}
.nopercent span{
	display:block;
}

#paging-nav {
	clear:both;
	border-top:1px dotted #ccc;
	margin-top:7px;
	padding-top:10px;
	padding-bottom:9px;
	padding-left:9px;
	width:97% !important;
	position:static;
}
#paging-nav .prev{
	width:33%;
	float:left;
}
#paging-nav .next{
	width:32%;
	float:right;
	text-align:right;
}
#paging-nav .marker{
	width:33%;
	float:left;
	text-align:center;
	line-height:190%;
}
#paging-nav .marker span{
	display:block;
	width:100%;
	margin:0 auto;
}
#paging-nav input{
	font-size:120%;
}

@charset "utf-8";

/* CSS Document for SoftPraise © Copyright 2010, All rights reserved */

/*------ Default HTML Styles ------*/

* {

margin:0;

padding:0;

}

html {

font-size:100%;

height:100%;

margin:0 0 1px 0;

}

body {

font: 16px/1.6em Arial, Helvetica, sans-serif;

}

h1, h2, h3, h4, h5, h6, p, blockquote, label, ul, ol, dl, fieldset, address, .contentheading, .componentheading, .contentdescription {

margin:0.5em 0;

}

ul, ol {

margin:0 0 0 2em;

}

fieldset {

border:none;

}

legend {

font-weight:bold;

}

table{

border-collapse:collapse;

}

img {

border:none;

}

a {

text-decoration:none;

outline:none;

}

a:hover {

text-decoration:underline;

}

.contentheading, .componentheading, .contentdescription, h1, h2, h3, h4, h5, h6 {

font-weight:bold;

}

h1, .componentheading {

font-size:22px;

}

h2, .contentheading {

font-size:20px;

}

h3, .contentdescription {

font-size:20px;

}

h4 {

font-size:18px;

}

h5 {

font-size:16px;

}

h6 {

font-size:14px;

font-weight:bold;

}

hr {

border:0;

}

.small, .createdate, .modifydate {

font-size:11px;

font-family:Arial, Helvetica, sans-serif;

text-transform:uppercase;

}

/*------ Layout Styles ------*/

.inside{

padding:10px;

}

.clr{

clear:both;

}

.width{

width:960px;

margin:0 auto;

}

/*--- Header ---*/

#logo{

display:block;

width:220px;

height:40px;

float:left;

text-indent:-9999px;

outline:none;

margin:10px 10px 0 0;

}

#mainmenu{

float:right;

margin:8px 0;

}

#mainmenu ul, #mainmenu li{

margin:0;

padding:0;

list-style:none;

}

#mainmenu li{

display:inline;

}

#mainmenu li a{

display:block;

float:left;

margin:0 0 0 5px;

font-size:14px;

font-weight:bold;

text-transform:uppercase;

}

#mainmenu li a span{

margin:0 0 0 10px;

padding:3px 10px 3px 0;

display:block;

}

#mainmenu li a:hover, #mainmenu li.active a{

text-decoration:none;

}

/*--- Inset ---*/

#inset{

text-align:right;

}

#inset ul#mainlevel-nav, #inset ul#mainlevel-nav li{

margin:0;

padding:0;

list-style:none;

}

#inset ul#mainlevel-nav li{

display:inline;

}

#inset ul#mainlevel-nav li a{

margin:0 0 0 15px;

font-size:12px;

}

/*--- Ribbon ---*/

.ribbon{

width:100%;

border-collapse:collapse;

}

.ribbon1{

padding:0 10px 0 0;

font-size:12px;

line-height:1.4em;

width:620px;

}

.ribbon1 h3{

font-size:14px;

font-weight:bold;

margin:0;

padding:0;

}

.ribbon1 p{

margin:0;

padding:0;

}

.ribbon2{

padding:0 0 0 10px;

}

.blue-button{

display:block;

float:left;

margin:0 0 0 5px;

font-size:14px;

font-weight:bold;

text-transform:uppercase;

cursor:pointer;

}

.blue-button span{

margin:0 0 0 10px;

padding:8px 10px 8px 0;

display:block;

}

.blue-button:hover{

text-decoration:none;

}

/*--- Container ---*/

#container .inside{

padding:20px 25px;

}

#container-cap{

height:15px;

}

#container-botcap{

height:15px;

margin:0 0 20px 0;

}

#container .contentheading, #container h2{

padding:0 0 10px 0;

}

#mainbody{

width:660px;

float:left;

}

#content{

width:400px;

float:left;

}

#sidebar{

width:220px;

float:right;

}

#sidebar2{

width:220px;

float:right;

}

/*--- Elements ---*/

.green-button{

display:block;

float:left;

margin:0 0 0 5px;

font-size:14px;

font-weight:bold;

text-transform:uppercase;

cursor:pointer;

}

.green-button span{

margin:0 0 0 10px;

padding:8px 10px 8px 0;

display:block;

}

.green-button:hover{

text-decoration:none;

}

.elements{

width:100%;

border-collapse:collapse;

}

.elements td{

width:33%;

text-align:left;

vertical-align:top;

}

.elements1{

padding:0 10px 0 0;

}

.elements2{

padding:0 10px;

}

.elements3{

padding:0 0 0 10px;

}

/*--- Footer ---*/

#footer {

font-size:12px;

}

#copy{

float:left;

font-family:Arial, Helvetica, sans-serif;

line-height:1.5em;

}

#link{

float:right;

font-family:Arial, Helvetica, sans-serif;

text-align:right;

}

#link ul, #link li{

margin:0;

padding:0;

list-style:none;

}

#link li{

display:inline;

}

#link li a{

margin:0 0 0 10px;

}

#link li a:hover, #link li.active a{

text-decoration:underline;

}

/*------ Content Styles ------*/

.readon, .readmore{

display:block;

float:left;

padding:4px 30px;

margin:5px 0;

font-size:13px;

text-transform:uppercase;

font-weight:bold;

}

.inputbox, .validate-email{

padding:3px;

}

.adminform{

width:auto;

margin:10px 0;

}

.adminform td{

padding:5px;

}

.adminform .inputbox{

width:400px;

}

.button, .validate, .adminform button, button{

padding:3px 5px;

cursor:pointer;

}

.article_column{

padding:0 10px 0 0;

}

.column_separator{

padding:0 0 0 10px;

}

.article_separator{

display:block;

margin:0 0 20px 0;

}

.contentpaneopen{

width:100%;

}

.blog{

width:100%;

}

.blog_more{

padding:20px;

margin:0 0 20px 0;

}

.blog_more strong{

font-weight:bold;

}

.blog_more ul, .blog_more li{

margin:0;

padding:0;

list-style:none;

}

.blog_more li{

display:inline;

}

.blog_more li a{

display:block;

}

.blog_more strong{

display:block;

padding:0 0 5px 0;

font-size:1.4em;

}

.pagination ul, .pagination li{

margin:0;

padding:0;

list-style:none;

}

.pagination li{

display:inline;

}

.pagination span, .pagination a{

display:inline;

padding:5px;

font-weight:normal;

}

.contentpane ul, .contentpane li{

margin:0;

padding:0;

list-style:none;

}

.contentpane li{

padding:5px 0;

margin:0 0 5px 0;

}

.contentdescription{

padding:10px 0;

}

td.sectiontableheader{

padding:5px;

text-align:left !important;

font-weight:normal;

}

tr.sectiontableentry1 td{

padding:5px;

text-align:left !important;

}

tr.sectiontableentry2 td{

padding:5px;

text-align:left !important;

}

tr.sectiontableentry0 td{

padding:5px;

text-align:left !important;

}

.contenttoc{

width:220px;

float:right;

margin:0 0 20px 20px;

}

.contenttoc th{

padding:5px 10px;

text-align:left;

font-weight:normal;

}

.contenttoc td a{

display:block;

padding:5px 10px;

}

.contenttoc td a:hover{

padding:5px 5px 5px 10px;

text-decoration:none;

}

.pagenavbar{

text-align:right;

}

#search_searchword{

padding:4px;

}

#searchphraseall{

margin:20px 0;

}

#ordering{

margin:0 0 20px 0;

}

.searchintro{

width:100%;

padding:10px;

margin:10px 0;

}

.searchintro br{

display:none;

}

.searchintro b{

font-size:1.4em;

}

.highlight{

font-weight:bold;

}

.contentpaneopen fieldset{

padding:0 0 10px 0;

}

#com-form-login #username, #com-form-login #passwd{

width:70%;

}

#com-form-login ul, #com-form-login li{

margin:0;

padding:0;

list-style:none;

}

#com-form-login a{

padding:5px 5px 5px 5px;

display:block;

width:70%;

}

#com-form-login a:hover{

padding:5px 5px 5px 10px;

text-decoration:none;

}

#name, #email{

margin:0 0 10px 0;

}

/*--- Text Module ---*/

.banneritem_text{

display:block;

padding:5px 0;

}

.bannerheader{

font-weight:normal;

}

/*--- Polls Module ---*/

.poll, .pollstableborder{

width:100%;

}

.poll td{

text-align:left !important;

vertical-align:middle !important;

padding:5px 2px;

}

.poll thead td{

font-weight:normal !important;

}

/*------ Tooltips ------*/

.tool-tip {

float: left;

border: 1px solid #D4D5AA;

padding: 5px;

background: #FFFFCC;

max-width: 200px;

}

.tool-title {

padding: 0;

margin: 0;

margin-top: -15px;

padding-top: 15px;

padding-bottom: 5px;

background: url(../../system/images/selector-arrow.png) no-repeat;

font-size: 100%;

font-weight: bold;

}

.tool-text {

margin: 0;

font-size: 100%;

}

/*------ System Messages ------*/

#system-message    {

margin-bottom: 0px;

padding: 0;

}

#system-message dt { 

font-weight: bold; 

}

#system-message dd { 

margin: 0; font-weight: bold; text-indent: 30px; 

}

#system-message dd ul {

list-style: none;

margin: 0px;

padding: 10px;

color: #0055BB;

background: #D8E5F8 url(../images/status-info.png) no-repeat 10px 50%;

border-top: 3px solid #629DE3;

border-bottom: 3px solid #629DE3;

}

#system-message dt.message { 

display: none; 

}

#system-message dd.message {}

#system-message dt.error { 

display: none; 

}

#system-message dd.error ul {

margin: 0px;

list-style: none;

color: #c00;

background: #FFD6D6 url(../images/status-alert.png) no-repeat 10px 50%;

border-top: 3px solid #DE7A7B;

border-bottom: 3px solid #DE7A7B;

}

#system-message dt.notice { 

display: none; 

}

#system-message dd.notice ul {

margin: 0px;

list-style: none;

color: #DCA33C;

background: #FEF6D8 url(../images/status-note.png) no-repeat 10px 50%;

border-top: 3px solid #F0DC7E;

border-bottom: 3px solid #F0DC7E;

}

/*------ Typography ------*/

blockquote{

padding:20px;

margin:10px 0;

font-style:italic;

}

.alert, .info, .download, .note {

display: block;

padding: 10px 10px 10px 50px;

margin: 15px 0;

}

ul.bullet1, ul.bullet2, ul.bullet3, ul.bullet4, ul.bullet5, ul.bullet6, ul.bullet7,

ul.male, ul.female,ul.accept,ul.clock,ul.color,ul.cup,ul.date,ul.drink,ul.smile,ul.exclamation,

ul.heart,ul.music,ul.rainbow,ul.golf,ul.tennis,ul.star,ul.tick {

padding-left: 10px;

margin-left: 0;

}

ul.bullet1 li, ul.bullet2 li, ul.bullet3 li, ul.bullet4 li, ul.bullet5 li, ul.bullet6 li, ul.bullet7 li,

ul.male li, ul.female li,ul.accept li,ul.clock li,ul.color li,ul.cup li,ul.date li,ul.drink li,ul.smile li,ul.exclamation li,

ul.heart li,ul.music li,ul.rainbow li,ul.golf li,ul.tennis li,ul.star li,ul.tick li {

list-style: none;

margin-left: 0;

padding:0 0 0 40px;

margin-bottom: 5px;

}

fieldset.highlight{

padding:10px;

font-weight:normal;

}

fieldset.highlight legend{

font-size:1.2em;

}

blockquote{

background:#FFFFFF url(../images/gradient.png) repeat-x 0 0;

border:1px solid #CCCCCC;

color:#000000;

}

.alert {

color: #c00;

border-top: 3px solid #fe7b7a;

border-bottom: 3px solid #fe7b7a;

background: #FFD6D6 url(../images/status-alert.png) 10px 50% no-repeat;

}

.info {

color: #0055BB;

border-top: 3px solid #629de3;

border-bottom: 3px solid #629de3;

background: #D8E5F8 url(../images/status-info.png) 10px 50% no-repeat;

}

.note {

color: #B79000;

border-top: 3px solid #fde179;

border-bottom: 3px solid #fde179;

background: #FEF6D8 url(../images/status-note.png) 10px 50% no-repeat;

}

.download {

color: #57861A;

border-top: 3px solid #c2df88;

border-bottom: 3px solid #c2df88;

background: #EEF7DD url(../images/status-download.png) 10px 50% no-repeat;

}

ul.bullet1 li {

background: url(../images/bullet1.png) 4px 4px no-repeat;

}

ul.bullet2 li {

background: url(../images/bullet2.png) 4px 4px no-repeat;

}

ul.bullet3 li {

background: url(../images/bullet3.png) 4px 4px no-repeat;

}

ul.bullet4 li {

background: url(../images/bullet4.png) 4px 4px no-repeat;

}

ul.bullet5 li {

background: url(../images/bullet_green.png) 4px 4px no-repeat;

}

ul.bullet6 li {

background: url(../images/bullet_pink.png) 4px 4px no-repeat;

}

ul.bullet7 li {

background: url(../images/bullet_red.png) 4px 4px no-repeat;

}

ul.male li {

background: url(../images/user_suit.png) 4px 4px no-repeat;

}

ul.female li {

background: url(../images/user_female.png) 4px 4px no-repeat;

}

ul.accept li {

background: url(../images/accept.png) 4px 4px no-repeat;

}

ul.clock li {

background: url(../images/clock.png) 4px 4px no-repeat;

}

ul.color li {

background: url(../images/color_swatch.png) 4px 4px no-repeat;

}

ul.cup li {

background: url(../images/cup.png) 4px 4px no-repeat;

}

ul.date li {

background: url(../images/date.png) 4px 4px no-repeat;

}

ul.drink li {

background: url(../images/drink.png) 4px 4px no-repeat;

}

ul.smile li {

background: url(../images/emoticon_smile.png) 4px 4px no-repeat;

}

ul.exclamation li {

background: url(../images/exclamation.png) 4px 4px no-repeat;

}

ul.heart li {

background: url(../images/heart.png) 4px 4px no-repeat;

}

ul.music li {

background: url(../images/music.png) 4px 4px no-repeat;

}

ul.rainbow li {

background: url(../images/rainbow.png) 4px 4px no-repeat;

}

ul.golf li {

background: url(../images/sport_golf.png) 4px 4px no-repeat;

}

ul.tennis li {

background: url(../images/sport_tennis.png) 4px 4px no-repeat;

}

ul.star li {

background: url(../images/star.png) 4px 4px no-repeat;

}

ul.tick li {

background: url(../images/tick.png) 4px 4px no-repeat;

}

/*------ Default Modules ------*/

/*--- Moduletable ---*/

.moduletable, .moduletable_menu, .moduletable_text{

margin:0 0 20px 0;

}

#ribbon .moduletable, #ribbon .moduletable_menu, #ribbon .moduletable_text{

margin:0;

}





.paypalbuy {

width: 150px;

height: 70px;

background: url(https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif) no-repeat; 





}



.paypaldonate {

width: 150px;

height: 70px;

background: url(https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif) no-repeat; 





}





.paypalsubscribe{

width: 150px;

height: 70px;

background: url(https://www.paypal.com/en_US/i/btn/btn_subscribe_LG.gif) no-repeat; 





}



.elements .moduletable, .elements .moduletable_menu, .elements .moduletable_text{

font-size:12px;

line-height:1.4em;

}

.elements .moduletable h3, .elements .moduletable_menu h3, .elements .moduletable_text h3{

font-size:20px;

text-transform:uppercase;

font-weight:bold;

padding:0 0 10px 0;

}

.moduletable ul.mostread, .moduletable ul.mostread li, .moduletable ul.latestnews, .moduletable ul.latestnews li{

margin:0;

padding:0;

list-style:none;

}

.moduletable ul.mostread a, .moduletable ul.latestnews a{

display:block;

padding:5px 0;

}

/*--- Module ---*/

.module, .module_menu, .module_text{

margin:0 0 20px 0;

font-size:13px;

}

.module ul, .module_menu ul, .module_text ul, .module-ms1 ul, .module-ms2 ul, .module-ms3 ul, .module-ms4 ul, 

.module li, .module_menu li, .module_text li, .module-ms1 li, .module-ms2 li, .module-ms3 li, .module-ms4 li{

margin:0;

padding:0;

list-style:none;

}

.module li, .module_menu li, .module_text li, .module-ms1 li, .module-ms2 li, .module-ms3 li, .module-ms4 li{

display:inline;

}

.module li a, .module_menu li a, .module_text li a, .module-ms1 li a, .module-ms2 li a, .module-ms3 li a, .module-ms4 li a{

display:block;

padding:3px 0;

}

.module li li a, .module_menu li li a, .module_text li li a, .module-ms1 li li a, .module-ms2 li li a, .module-ms3 li li a, .module-ms4 li li a{

padding:3px 3px 3px 18px;

}

.module h3, .module_menu h3, .module_text h3{

font-size:20px;

font-weight:bold;

padding:0 0 10px 0;

}



/*------ Custom Module Styles ------*/

.module-ms1, .module-ms2, .module-ms3{

margin:0 0 20px 0;

font-size:13px;

line-height:1.4em;

height:1%;

}

.module-ms1 div div div, .module-ms2 div div div, .module-ms3 div div div{

padding:10px 10px 15px 10px;

}

.module-ms1 div div div div, .module-ms2 div div div div, .module-ms3 div div div div{

padding:0;

margin:0;

background:none;

}

.module-ms1 h3, .module-ms2 h3, .module-ms3 h3{

margin:0;

padding:10px 0;

}

.module-ms1 .readmore, .module-ms2 .readmore, .module-ms3 .readmore{

padding:8px 40px;

}

/*------ Pricing Table Styles ------*/

.pricing_table{

border:none;

width:100%;

border-collapse:collapse;

margin:10px 0;

}

.pricing_table td{

text-align:left;

vertical-align:top;

width:25%;

padding:10px;

}

.pricing_table .small{

font-size:10px;

text-transform:lowercase;

margin:0;

line-height:1.3em;

}

.pricing_table .tick{

font-size:10px;

line-height:1.3em;

margin:20px 0;

}

.pricing_table .tick li{

padding:0 0 0 30px;

}

/*------ PraiseSlides 1 Styles ------*/

#banner h1,#banner h2,#banner h3,#banner h4{text-shadow:0px 1px 1px #FFF;}

#banner .mod_praiseslides_container_top, 

#banner .mod_praiseslides_container_bottom,

#banner #mod_praiseslides_containerTagId {background-color:transparent;border:0;}

#banner .mod_praiseslides_sidebar_top, 

#banner .mod_praiseslides_sidebar_bottom {height:auto !important;border:1px solid #CCC;}

#banner #active_title_bottom a {border-bottom:0;border-top:0;}

#banner #active_title_bottom a {position:relative;top:0;}

#banner .mod_praiseslides_container_bottom {height:400px !important;}

#banner .mod_praiseslides_bottom{height:350px !important;}





/* Form Styles */



/*

HSBC Form Style Sheet



Last Updated: Ralph Harvey

August 25th 2009

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



.hsbc{

	font-family:"Lucida Grande", Tahoma, Arial, sans-serif;

}

.hsbc li{

	width:95%;

}

form ul{

	margin:0;

	padding:0;

	list-style-type:none;

	width:100%;

}

form li{

	display:block;

	margin:0;

	padding:6px 5px 9px 9px;

	clear:both;

}

form li:after, form li div:after{

	content:"."; 

	display:block;

	height:0; 

	clear:both; 

	visibility:hidden;

}

* html form li{height: 1%;}

* html form li div{display:inline-block;}

*+html form li div{display:inline-block;}



form li div, form li span{

	margin:0 .3em 0 0;

	padding:0;

	color:#444;

	font-size: 85%;

}



form infoSpacer {

	

	margin:0 .3em 0 0;

	padding: 1em;

	color:#444;

	font-size: 100%;

}

form li span{

	float: left;

}



.floatleft {

		float: left;

}



.center, 

form li span.center input.text, form li span.center label,

form li.name input.text, form li.name span label,

form li.date input.text, form li.date span label, 

form li.phone input.text, form li.phone span label,

form li.time input.text, form li.time span label{

	text-align:center;

}

form li.time select.select{

	margin-left:5px;

}



form li div.col span{

	display:block;

	width:100%;

	left;

	padding:0;

}

li.twoColumns div.col span{

	width:48%;

	margin:0 5px 0 0;

}

li.threeColumns div.col span{

	width:30%;

	margin:0 5px 0 0;

}

li.notStacked div.col span{

	width:auto;

	margin:0 7px 0 0;

}





form li.complex{

	padding-bottom:0;

}

form li div span.left, form li div span.right{

	margin:0;

	width:47%;

}

form li div span.full input, 

form li div span.full select, 

form li div span.left input, 

form li div span.right input,

form li div span.left select,

form li div span.right select{

	width:100%;

}



.left{

	left;

}

.right{

	right;

}

.clear{

	clear:both !important;

}



/* ----- INFO ----- */



.info{

	display:inline-block; 

	clear:both;

	border-bottom:1px dotted #ccc;

	margin:0 0 5px 0;

}

.info[class]{

	display:block;

}

.info h2{

	font-weight:normal;

	font-size:160%;

	margin:0 0 .2em 0;

	clear:left;

}

.info div{

	font-size:95%;

	line-height:135%;

	margin:0 0 1.1em 0;

	color:#555;

}



/* ----- SECTIONS ----- */



form li.section{

	clear:both;

	border-top:1px dotted #ccc;

	padding-top:.9em;

	padding-bottom:0px;

	padding-left:9px;

	width:97% !important;

	position:static;

}

form ul li.first{

	border-top:none !important;

	margin-top:0px !important;

}

form .section h3{

	font-weight:normal;

	font-size:110%;

	line-height:135%;

	margin:0 0 .2em 0;

}

form .section div{

	display:block;

	font-size:85%;

	margin:0 0 1.2em 0;

	padding:0;

}



/* ----- LIKERT SCALE ----- */



.likert table{

	margin:0 0 .9em 0;

	background:#fff;

	width:100%;

	border:1px solid #dedede;

	border-bottom:none;

}

.likert caption{

	text-align:left;

	color:#222;

	font-size:95%;

	line-height:135%;

	padding:5px 0 .5em 0;

}

.likert input{

	padding:0;

	margin:2px 0;

}

.likert tbody td label{

	font-size:85%;

	display:block;

	color:#565656;

}



/* ----- Top Row ----- */



.likert thead td, .likert thead th{

	background-color:#e6e6e6;

}



/* ----- Right Side ----- */



.likert td{

	border-left:1px solid #ccc;

	text-align:center;

	padding:4px 6px;

}

.likert thead td{

	font-size:85%;

	padding:10px 6px;

}



/* ----- Body ----- */



.likert th, .likert td{

	border-bottom:1px solid #dedede;

}

.likert tbody th{

	padding:8px 8px;

	text-align:left;

}

.likert tbody th label{

	color:#222;

	font-size:95%;

	font-weight:bold;

}



.likert tbody tr.alt td, .likert tbody tr.alt th{

	background-color:#f5f5f5;

}

.likert tbody tr:hover td, .likert tbody tr:hover th{

	background-color:#FFFFCF;

}



/* ----- Likert Classes ----- */



.col1 td{width:30%;} 

.col2 td{width:25%;}

.col3 td{width:18%;}

.col4 td{width:14.5%;}

.col5 td{width:12%;}

.col6 td, .col7 td{width:10%;}

.col8 td, .col9 td, .col10 td{width:6.5%;}

.col11{width:6%;}



.hideNumbers tbody td label{

	display:none;

}



/* ----- LABELS ----- */



form li div label, form li span label{

	margin:0;
	margin-top: -5px;

	padding-top:6px;

	clear:both;

	font-size:95%;

	line-height:100%;

	color:#444;

	display:block;

}

form li div span label{

	padding-bottom:10px;

}

label.desc{

	font-size:95%;

	font-weight:bold;

	color: #ac0000;

	line-height:150%;

	margin:0;

	padding:0 0 3px 0;

	border:none;

	display:block;

}

label.choice{

	display:block;

	font-size:100%;

	line-height:150%;

	margin:-17px 0 0 23px;

	padding:0 0 5px 0;

	color:#222;

	width:100%;

}

.safari label.choice{

	margin-top:-16px;

}

form.rightLabel div.col{

	margin-top:-3px;

}



span.symbol{

	font-size:120%;

	line-height:135%;

}

form li .datepicker{

	left;

	margin:.19em 5px 0 0;

	padding:0;

	width: 16px;

	height: 16px;

	cursor:pointer !important;

}



/* ----- MIN/MAX COUNT ----- */



form li div label var{

	font-weight:bold;

	font-style:normal;

}

form li div label .currently{

	display:none;

}



/* ----- FIELDS ----- */



input.text, input.search, input.file, textarea.textarea, select.select{

	font-family:"Lucida Grande", Tahoma, Arial, sans-serif;

	font-size:100%;

	color:#333;

	margin:0;

	padding:2px 0;

}

input.text, input.search, textarea.textarea{

	border-top:1px solid #7c7c7c;

	border-left:1px solid #c3c3c3;

	border-right:1px solid #c3c3c3;

	border-bottom:1px solid #ddd;

	background:#fff url(../images/fieldbg.gif) repeat-x top;

}

select.select{

	padding:1px 5px 0 0;

}

input.search{

	-webkit-border-radius:10px;

	-moz-border-radius:10px;

	padding-left:6px;

}

input.checkbox, input.radio{

	display:block;

	margin:4px 0 0 0;

	padding:0;

	width:13px;

	height:13px;

}

input.other{

	margin:0 0 8px 25px;

}



.safari select.select{

	font-size:120% !important;

	margin:0 0 1px 0;

}

* html select.select{

	margin:1px 0;

}

*+html select.select{

	margin:1px 0;

	border:1px solid red;

}



/* ----- FILES ----- */



li.file a{

	color:#222;text-decoration:none;

}

li.file span{

	display:inline;none;

}

li.file img{

	display:block;left;margin:0 0 0 -10px;padding:5px 5px 7px 5px;

}

li.file .file-size, li.file .file-type{

	color:#666;font-size:85%;text-transform: uppercase;

}

li.file .file-name{

	display:block;

	padding:14px 0 0 0;

	color:blue;

	text-decoration:underline;

}

li.file .file-delete{

	color:red !important;font-size:85%;text-decoration:underline;

}

li.file a:hover .file-name{

	color:green !important;

}

li.file a:hover .file-name{

	color:green !important;

}



/* ----- BUTTONS ----- */



input.btTxt{

	padding:0 7px;

	width:auto;

	overflow:visible;

}

form li.buttons{

	clear:both;

	padding-top:10px;

}

form li.buttons input{

	font-size:100%;

	margin-right: 5px;

}



/* ----- TEXT DIRECTION ----- */



.rtl .info h2, .rtl .info div, .rtl label.desc, .rtl label.choice, 

.rtl div label, .rtl span label, .rtl input.text, 

.rtl textarea.textarea, .rtl select.select, .rtl p.instruct, 

.rtl .section h3, .rtl .section div, .rtl input.btTxt{

	direction:rtl;

}



/* ----- SIZES ----- */



.third{

	width:32% !important;

}

.half{

	width:48% !important;

}

.full{

	width:100% !important;

}



input.small, select.small{

	width:25%;

}

input.medium, select.medium{

	width:50%;

}

input.large, select.large, textarea.textarea{

	width:100%;

}



textarea.small{

	height:5.5em;

}

textarea.medium{

	height:10em;

}

textarea.large{

	height:20em;

}



/* ----- ERRORS ----- */



#errorLi{

	width:99%;

	margin:0 auto;

	background:#fff !important;

	border:1px solid red;

	margin-bottom:1em;

	text-align:center;

	padding:1em 0 1em 0;

	-webkit-border-radius:20px;

	-moz-border-radius:20px;

}

#errorMsgLbl{

	margin:0 0 5px 0;

	padding:0;

	font-size:125%;

	color:#DF0000 !important;

}

#errorMsg{

	margin:0 0 2px 0;

	color:#000 !important;

	font-size:100%;

}

#errorMsg strong{

	padding:2px 3px;

	background-color: #FFDFDF !important;

	color:red !important;

}

form li.error{

	display:block !important;

	background-color: #FFDFDF !important;

	margin-bottom:3px !important;

}

form li.error label, form li.error span.symbol{

	color:#DF0000 !important;

}

form p.error{

	display:none;

	margin:0 !important;

	padding:7px 0 0 0 !important;

	color:#DF0000 !important;

	font-weight:bold;

	font-size:10px;

	line-height:10px !important;

	clear:both;

}

form li.complex p.error{

	padding:0 0 9px 0 !important;

}

form li.error p.error{

	display:block;

}

.leftLabel p.error, .rightLabel p.error{

	margin-left:30%;

	padding-left:15px;

}

.noI .leftLabel p.error, .noI .rightLabel p.error{

	margin-left:35%;

	padding-left:15px;

}



/* ----- REQUIRED ----- */



form span.req{

	display:inline;

	none;

	color:red !important;

	font-weight:bold;

	margin:0;

	padding:0;

}



/* ----- INSTRUCTIONS ----- */



form li.focused{

	background-color:#fff7c0;

}

form li.focused, form li:hover{

	position:relative; /* Makes Instructs z-index stay on top in IE. */

}

form .instruct{

	position:absolute;

	top:0;

	left:0;

	z-index:1000;

	width:42%;

	margin:0 0 0 8px;

	padding:8px 10px 10px 10px;

	border:1px solid #e6e6e6;

	background:#f5f5f5;

	visibility:hidden;

	font-size:105%;

}

form .instruct small{

	line-height:120%;

	font-size:80%;

	color:#444;

}

form li.focused .instruct, form li:hover .instruct{

	left:100%; /* Prevent scrollbars for IE Instruct fix */

	visibility:visible;

}



/* ----- ADVANCED CLASSNAMES ----- */



.hideSeconds .seconds, .hideAMPM .ampm{

	display:none;

}



/* ----- ALT INSTRUCTIONS ----- */



.altInstruct .instruct, li.leftHalf .instruct, li.rightHalf .instruct{

	visibility:visible;

	position:static;

	margin:0;

	padding:6px 0 0 0;

	width:100%;

	clear:left;

	background:none;

	border:none;

}

li.altInstruct p.complex , li.leftHalf p.complex, li.rightHalf p.complex{

	padding:0 0 9px 0;

}



/* ----- LABEL LAYOUT ----- */



.leftLabel li, .rightLabel li{

	width:74% !important;

	padding-top:9px;

}





.leftLabel label.desc, .rightLabel label.desc{

	left;

	width:29%;

	margin:0px 15px 0 0;

}

.rightLabel label.desc{

	text-align:right;

}

.leftLabel li div.col, .rightLabel li div.col,

.leftLabel li.complex div, .rightLabel li.complex div{

	left;

}





.leftLabel .small, .rightLabel .small{

	width:17%;

}

.leftLabel .medium, .rightLabel .medium{

	width:35%;

}

.leftLabel .large, .leftLabel textarea.textarea,

.rightLabel .large, .rightLabel textarea.textarea,

.leftLabel li div.col, .rightLabel li div.col,

.leftLabel li.complex div, .rightLabel li.complex div{

	width:64%;

}





* html .leftLabel .small, * html .rightLabel .small{

	width:23%;

}

* html .leftLabel .medium, * html .rightLabel .medium{

	width:55%;

}

* html .leftLabel .large, * html .leftLabel textarea.textarea,

* html .rightLabel .large, * html .rightLabel textarea.textarea{

	width:97%;

}





.leftLabel p.instruct, .rightLabel p.instruct{

	width:27%;

	margin-left:5px;

}

.leftLabel .altInstruct .instruct, .rightLabel .altInstruct .instruct{

	margin-left:29% !important;

	padding-left:15px;

	width:65%;

}





.leftLabel .buttons, .rightLabel .buttons{

	margin-left:15px;

}

* html .leftLabel .buttons, * html .rightLabel .buttons{

	margin-left:4px;

}

*+html .leftLabel .buttons, *+html .rightLabel .buttons{

	margin-left:7px;

}

.leftLabel .buttons .submit, .rightLabel .buttons .submit{

	margin-left:29%;

}

* html .leftLabel .buttons .submit, * html .rightLabel .buttons .submit{

	margin-left:22%;

}



/* ----- NO INSTRUCTIONS ----- */



.noI form li, .noI form li.buttons, .altInstruct form li, .altInstruct form li.buttons{

	width:97% !important;

}

.noI form li.section, .altInstruct form li.section{

	padding-left:9px !important;

}



/* ----- NO INSTRUCTIONS LABEL LAYOUT ----- */



.noI .leftLabel label.desc, .noI .rightLabel label.desc{

	width:34%;

}

.noI .leftLabel .large, .noI .leftLabel textarea.textarea,

.noI .rightLabel .large, .noI .rightLabel textarea.textarea,

.noI .leftLabel li div.col, .noI .rightLabel li div.col,

.noI .leftLabel li.complex div, .noI .rightLabel li.complex div{

	width:60%;

}



.noI .leftLabel .buttons input, .noI .rightLabel .buttons input{

	margin-left:34%;

}



/* ----- FIELD FLOATING ----- */



form li.leftHalf, form li.rightHalf{

	width:46% !important;

}

li.leftHalf{

	clear:left !important;

	left;

}

li.rightHalf{

	clear:none !important;

	right;

}

form li.likert{

	width:97% !important;

	clear:both !important;

	none;

}

li.leftHalf .medium, li.rightHalf .medium,

li.leftHalf .small, li.rightHalf .small{

	width:100%;

}



/* ----- CAPTCHA ----- */



form li.captcha {

	clear:both;

	border-top:1px dotted #ccc;

	margin-top:5px;

	padding-top:.9em;

	padding-bottom:9px;

	padding-left:9px;

	width:97% !important;

	position:static;

}

form li.captcha label.desc{

	text-align:left;

	margin-bottom:4px;

	float:none;

	width:auto !important;

}

#recaptcha_widget_div table{

	background:#fff;

}

form li.captcha .noscript iframe{

	border:none;

	overflow:hidden;

	margin:0;

	padding:0;

}

form li.captcha .noscript label.desc{

	display:block !important;

}

form li.captcha .noscript textarea{

	margin-left:12px;

}



/* ----- PAGINATION ----- */



#paging-context{

	clear:both;

	border-bottom:1px dotted #ccc;

	margin-top:5px;

	margin-bottom:7px;

	padding-top:.9em;

	padding-bottom:16px;

	padding-left:9px;

	width:97% !important;

	position:static;

}



#paging-context table{

	width:100%;

}



.pg1 td{

	text-align:center;

}

.pg1 var{

	background:none;

	border:1px solid #dedede;

	display:block;

	width:25px;

	height:25px;

	line-height:25px;

	margin:0 auto 0 auto;

	-webkit-border-radius:12px;

	font-size:90%;

	font-style:normal;

}

.pg1 .done var{

	background:#dedede;

}

.pg1 .selected var{

	background:#222;

	color:#fff;

	border:1px solid #222;

	font-weight:bold;

}

.pg1 b{

	display:block;

	padding-top:5px;

	font-size:85%;

	font-weight:normal;

}

.pg1 .selected b{

	font-weight:bold;

}

.nopagelabel b{

	display:none;

}



.pg2 td{

	border:1px solid #dedede;

	position:relative;

}

.pg2 var{

	display:block;

	padding:3px 7px;

	background:#dedede;

	font-style:normal;

	text-align:right;

}

.pg2 span{

	display:none;

	padding:3px 0;

	text-align:center;

	width:200px;

	margin:0 0 0 -100px;

	position:absolute;

	left:50%;

}

.nopercent var{

	color:#dedede;

}

.nopercent span{

	display:block;

}



#paging-nav {

	clear:both;

	border-top:1px dotted #ccc;

	margin-top:7px;

	padding-top:10px;

	padding-bottom:9px;

	padding-left:9px;

	width:97% !important;

	position:static;

}

#paging-nav .prev{

	width:33%;

	float:left;

}

#paging-nav .next{

	width:32%;

	float:right;

	text-align:right;

}

#paging-nav .marker{

	width:33%;

	float:left;

	text-align:center;

	line-height:190%;

}

#paging-nav .marker span{

	display:block;

	width:100%;

	margin:0 auto;

}

#paging-nav input{

	font-size:120%;

}

input.error { border: 1px solid red; }
	label.error {
	
	/*
	
		background: url('images/unchecked.gif') no-repeat;
		padding-left: 16px;
		margin-left: .3em;
		font-color: red;*/
		
		}
	label.valid {
	/*
		background: url('images/checked.gif') no-repeat;
		display: block;
		width: 16px;
		height: 16px;*/
	}