Commits

ajish committed 808f490

initial

  • Participants

Comments (0)

Files changed (456)

+Docs go here

File css/form.css

+/* - - - - - - - - - - - - - - - - - - - - -
+
+Title : Wufoo Form Framework
+URL : http://wufoo.com
+
+Last Updated : March 2, 2010
+
+- - - - - - - - - - - - - - - - - - - - - */
+
+.wufoo{
+	font-family:"Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;
+	letter-spacing:.01em;
+}
+.wufoo li{
+	width:64%;
+}
+
+/* ----- INFO ----- */
+
+.info{
+	display:inline-block; 
+	clear:both;
+	margin:0 0 5px 0;
+	padding:0 1% 1.1em 1%;
+	border-bottom:1px dotted #ccc;
+}
+.info[class]{
+	display:block;
+}
+.hideHeader .info, #payment.hideHeader li.first{
+	display:none;
+}
+.info h2{
+	font-weight:normal;
+	font-size:160%;
+	margin:0 0 5px 0;
+	clear:left;
+}
+.info div{
+	font-size:95%;
+	line-height:135%;
+	color:#555;
+}
+
+/* ----- Field Structure ----- */
+
+form ul{
+	margin:0;
+	padding:0;
+	list-style-type:none;
+}
+* html form ul{ /* IE6 Margin Percent Bug for Halves/Thirds */
+	width:99%;
+	zoom:1;
+}
+form li{
+	margin:0;
+	padding:6px 1% 9px 1%;
+	clear:both;
+	background-color:transparent;
+	position:relative; /* Makes Instructs z-index stay on top in IE. */
+	-webkit-transition: background-color 350ms ease-out;
+	   -moz-transition: background-color 350ms ease-out;
+	     -o-transition: background-color 350ms ease-out;
+	        transition: background-color 350ms ease-out;
+}
+form ul:after,form li:after, form li div:after{
+	content:"."; 
+	display:block;
+	height:0; 
+	clear:both; 
+	visibility:hidden;
+}
+* html form li{height: 1%;margin-bottom:-3px;}
+*+html form li{height: 1%;margin-bottom:-3px;}
+* html form li div{display:inline-block;}
+*+html form ul, *+html form li div{display:inline-block;}
+
+form li div{
+	margin:0;
+	padding:0;
+	color:#444;
+}
+form li span{
+	margin:0 .3em 0 0;
+	padding:0;
+	float:left;
+	color:#444;
+}
+
+/* ----- Choices Field Structures ----- */
+
+form li div span{
+	margin:0;
+	display:block;
+	width:100%;
+	float:left;
+}
+li.twoColumns div span{
+	width:48%;
+	margin:0 5px 0 0;
+}
+li.threeColumns div span{
+	width:30%;
+	margin:0 5px 0 0;
+}
+li.notStacked div span{
+	width:auto;
+	margin:0 7px 0 0;
+}
+
+/* ----- Location Field Structures ----- */
+
+form li.complex{
+	padding-bottom:0;
+}
+form li.complex div span{
+	width:auto;
+	margin:0 .3em 0 0;
+	padding-bottom:12px;
+}
+form li.complex div span.full{
+	margin:0;
+}
+form li.complex div span.left, 
+form li.complex div span.right{
+	margin:0;
+	width:48%;
+}
+form li.complex div span.full input, 
+form li.complex div span.full select, 
+form li.complex div span.left input, 
+form li.complex div span.right input,
+form li.complex div span.left select,
+form li.complex div span.right select{
+	width:100%;
+}
+
+/* ----- FLOATS ----- */
+
+.left{
+	float:left;
+}
+.right{
+	float:right;
+}
+.clear{
+	clear:both !important;
+}
+
+label span, .section span, p span, .likert span{
+	display:inline !important;
+	float:none !important;
+}
+
+/* ----- LABELS ----- */
+
+form li div label, form li span label{
+	margin:0;
+	padding-top:3px;
+	clear:both;
+	font-size:85%;
+	line-height:160%;
+	color:#444;
+	display:block;
+}
+fieldset{
+	display:block;
+	border:none;
+	margin:0;
+	padding:0;
+}
+
+label.desc, legend.desc{
+	font-size:95%;
+	font-weight:bold;
+	color:#222;
+	line-height:150%;
+	margin:0;
+	padding:0 0 3px 0;
+	border:none;
+	display:block;
+	white-space: normal;
+	width:100%;
+}
+
+label.choice{
+	display:block;
+	font-size:100%;
+	line-height:150%;
+	margin:-17px 0 0 23px;
+	padding:0 0 5px 0;
+	color:#222;
+	width:88%;
+}
+.safari label.choice{
+	margin-top:-16px;
+}
+form.rightLabel .desc{
+	padding-top:2px;
+}
+
+span.symbol{
+	font-size:120%;
+	line-height:135%;
+}
+form li .datepicker{
+	float:left;
+	margin:.19em 5px 0 0;
+	padding:0;
+	width: 16px;
+	height: 16px;
+	cursor:pointer !important;
+}
+
+/* ----- REQUIRED ----- */
+
+form span.req{
+	display:inline;
+	float:none;
+	color:red !important;
+	font-weight:bold;
+	margin:0;
+	padding:0;
+}
+
+/* ----- 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;
+}
+
+input.nospin::-webkit-inner-spin-button,
+input.nospin::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+select.select{
+	padding:1px 0 0 0;
+}
+input.search{
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	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;
+}
+
+.center, 
+form li span.center input.text, form li span.center label,
+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.price .right{
+	text-align:right;
+}
+
+/* ----- 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{
+	width:100%;
+}
+
+
+/*.msie6 select.ieSelectFix{
+	width:100%;
+}*/
+.msie[class] select.ieSelectFix{
+	width:auto;
+}
+.msie[class] select.ieSelectFix.small{
+	min-width:25%;
+}
+.msie[class] select.ieSelectFix.medium{
+	min-width:50%;
+}
+.msie[class] select.ieSelectFix.large{
+	width:100%;
+}
+
+textarea.textarea{
+	width:293px;
+	min-width:100%; /* IE8 Textarea Scroll Bug */
+	max-width:100%;
+}
+textarea.small{
+	height:5.5em;
+}
+textarea.medium{
+	height:10em;
+}
+textarea.large{
+	height:20em;
+}
+
+/* ----- FILES ----- */
+
+li.file a{
+	color:#222;text-decoration:none;
+}
+li.file span{
+	display:inline;float:none;
+}
+li.file img{
+	display:block;float: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;
+}
+
+/* ----- LIKERT SCALE ----- */
+
+form li.likert{
+	margin:0;
+	padding:6px 1% 5px 1%;
+	width:auto !important;
+	clear:both !important;
+	float:none !important;
+}
+.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;
+}
+
+/* ----- BUTTONS ----- */
+
+form li.buttons{
+	width:auto !important;
+	position:relative;
+	clear:both;
+	padding:10px 1% 10px 1%;
+}
+form li.buttons input{
+	font-size:100%;
+	margin-right:5px;
+}
+input.btTxt{
+	padding:0 7px;
+	width:auto;
+	overflow:visible;
+}
+.safari input.btTxt{
+	font-size:120%;
+}
+.buttons .marker{
+	position:absolute;
+	top:0;
+	right:0;
+	padding:15px 10px 0 0;
+	color:#000;
+	width:auto;
+}
+button.link{
+	display:inline-block;
+	border:none;
+	background:none;
+	color:blue;
+	text-decoration:underline;
+	cursor:pointer;
+	padding:0;
+	font-size:100%;
+}
+button.link:hover{
+	color:green;
+}
+
+/* ----- LABEL LAYOUT ----- */
+
+.leftLabel li, .rightLabel li{
+	width:74% !important;
+	padding-top:9px;
+}
+.leftLabel .desc, .rightLabel .desc{
+	float:left;
+	width:31%;
+	margin:0 15px 0 0;
+}
+.rightLabel .desc{
+	text-align:right;
+}
+.leftLabel li div, .rightLabel li div{
+	float:left;
+	width:65%;
+}
+
+* html .leftLabel li fieldset div, 
+* html .rightLabel li fieldset div{
+	float:right;
+}
+*+html .leftLabel li fieldset div, 
+*+html .rightLabel li fieldset div{
+	float:right;
+}
+
+.leftLabel .buttons, .rightLabel .buttons{
+	padding-left:23%;
+}
+.leftLabel .buttons div, .rightLabel .buttons div{
+	float:none;
+	margin:0 0 0 20px;
+}
+
+.leftLabel p.instruct, .rightLabel p.instruct{
+	width:28%;
+	margin-left:5px;
+}
+.leftLabel .altInstruct .instruct, .rightLabel .altInstruct .instruct{
+	margin-left:31% !important;
+	padding-left:15px;
+	width:65%;
+}
+
+/* ----- NO INSTRUCTIONS ----- */
+
+.noI form li, .altInstruct form li{
+	width:auto !important;
+}
+
+/* ----- NO INSTRUCTIONS LABEL LAYOUT ----- */
+
+.noI .leftLabel .buttons, .noI .rightLabel .buttons{
+	padding-left:31%;
+}
+.noI .leftLabel .buttons div, .noI .rightLabel .buttons div{
+	margin:0 0 0 17px;
+}
+
+/* ----- HALVES AND THIRDS ----- */
+
+form li.leftHalf, form li.rightHalf{
+	width:47% !important;
+}
+form li.leftThird, form li.middleThird, form li.rightThird{
+	width:30% !important;
+}
+form li.leftFourth, form li.middleFourth, form li.rightFourth{
+	width: 23% !important;
+	_width: 22% !important;
+}
+form li.leftFifth, form li.middleFifth, form li.rightFifth{
+	width: 18% !important;
+	_width: 17% !important;
+}
+form li.middleThird{
+	clear:none !important;
+	float:left;
+	margin-left:2% !important;
+}
+form li.leftFourth, form li.middleFourth,
+form li.leftFifth, form li.middleFifth {
+	clear:none !important;
+	float:left;
+}
+form li.rightHalf, form li.rightThird, form li.rightFourth, form li.rightFifth{
+	clear:none !important;
+	float:right;
+}
+li.leftHalf .small, li.rightHalf .small,
+li.leftHalf .medium, li.rightHalf .medium,
+li.leftThird .small, li.middleThird .small, li.rightThird .small,
+li.leftThird .medium, li.middleThird .medium, li.rightThird .medium,
+li.leftFourth .medium, li.middleFourth .medium, li.rightFourth .medium,
+li.leftFourth .small, li.middleFourth .small, li.rightFourth .small,
+li.leftFifth .medium, li.middleFifth .medium, li.rightFifth .medium,
+li.leftFifth .small, li.middleFifth .small, li.rightFifth .small{
+	width:100% !important;
+}
+form li.leftHalf, form li.leftThird, form li.leftFourth, form li.leftFifth{
+	clear:left !important;
+	float:left;
+}
+
+* html form li.middleFourth {
+	margin-left: 1% !important;
+}
+* html form li.middleFifth {
+	margin-left: 1% !important;
+}
+
+/* ----- INSTRUCTIONS ----- */
+
+form li.focused{
+	background-color:#fff7c0;
+}
+form .instruct{
+	position:absolute;
+	top:0;
+	left:0;
+	z-index:1000;
+	width:45%;
+	margin:0 0 0 8px;
+	padding:8px 10px 10px 10px;
+	border:1px solid #e6e6e6;
+	background:#f5f5f5;
+	visibility:hidden;
+	opacity:0;
+	font-size:105%;
+	-webkit-transition: opacity 350ms ease-out;
+	   -moz-transition: opacity 350ms ease-out;
+	     -o-transition: opacity 350ms ease-out;
+	        transition: opacity 350ms ease-out;
+}
+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;
+	opacity:1;
+}
+
+/* ----- ALT INSTRUCTIONS ----- */
+
+.altInstruct .instruct, li.leftHalf .instruct, li.rightHalf .instruct,
+li.leftThird .instruct, li.middleThird .instruct, li.rightThird .instruct,
+li.leftFourth .instruct, li.middleFourth .instruct, li.rightFourth .instruct,
+li.leftFifth .instruct, li.middleFifth .instruct, li.rightFifth .instruct,
+.iphone .instruct{
+	visibility:visible;
+	position:static;
+	margin:0;
+	padding:6px 0 0 0;
+	width:100%;
+	clear:left;
+	background:none !important;
+	border:none !important;
+	font-style:italic;
+	opacity:1;
+}
+.altInstruct p.complex , li.leftHalf p.complex, li.rightHalf p.complex,
+li.leftThird p.complex, li.middleThird p.complex, li.rightThird p.complex,
+.iphone p.complex{
+	padding:0 0 9px 0;
+}
+
+/* ----- CSS KEYWORDS ----- */
+
+.hideSeconds .seconds, .hideAMPM .ampm, .hideAddr2 .addr2, .hideSecondary #previousPageButton, 
+.hideCents .radix, .hideCents .cents, .hideState .state{
+	display:none;
+}
+
+/* ----- SECTIONS ----- */
+
+form li.section{
+	clear:both;
+	margin:0;
+	padding:7px 0 0 0;
+	width:auto !important;
+	position:static;
+}
+form li.section h3{
+	font-weight:normal;
+	font-size:110%;
+	line-height:135%;
+	margin:0 0 3px 0;
+	width:auto;
+	padding:12px 1% 0 1%;
+	border-top:1px dotted #ccc;
+}
+form li.first{
+	padding:0;
+}
+form li.first h3{
+	padding:8px 1% 0 1%;
+	border-top:none !important;
+}
+form li.section div{
+	display:block;
+	width:auto;
+	float:none;
+	font-size:85%;
+	line-height:160%;
+	margin:0 0 1em 0;
+	padding:0 1% 0 1%;
+}
+form li.section.scrollText{
+	border:1px solid #dedede;
+	height:150px;
+	overflow:auto;
+	margin-bottom:10px;
+	padding:10px;
+	-webkit-box-shadow:rgba(0,0,0,.15) 0 0 3px;
+	-moz-box-shadow:rgba(0,0,0,.15) 0 0 3px;
+	-o-box-shadow:rgba(0,0,0,.15) 0 0 3px;
+	box-shadow:rgba(0,0,0,.15) 0 0 3px;
+}
+form li.section.scrollText h3{
+	border:none;
+	padding-top:8px;
+}
+
+/* ----- CAPTCHA ----- */
+
+form li.captcha {
+	width:auto !important;
+	clear:both;
+	border-top:1px dotted #ccc;
+	margin-top:5px;
+	padding:1.1em 1% 9px 1%;
+	width:auto !important;
+	position:static;
+}
+form li.captcha label.desc{
+	width:auto !important;
+	margin-bottom:4px;
+	float:none;
+}
+*+html #recaptcha_area, *+html #recaptcha_table{
+	min-width:450px !important;
+}
+* html #recaptcha_area, * html #recaptcha_table{
+	width:450px !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;
+}
+iframe[src="about:blank"] {
+	display: none;
+}
+
+/* ----- PAGINATION ----- */
+
+form li.paging-context{
+	clear:both;
+	border-bottom:1px dotted #ccc;
+	margin:0 0 7px 0;
+	padding:5px 1% 10px 1%;
+	width:auto !important;
+	position:static;
+}
+.paging-context table{
+	width:100%;
+}
+
+.pgStyle1 td{ /* Steps */
+	text-align:left;
+	vertical-align:middle;
+}
+.pgStyle1 td.c{
+	width:22px;
+}
+.pgStyle1 td.t{
+	padding:0 1%;
+}
+.pgStyle1 var{
+	display:block;
+	float:left;
+	background:none;
+	border:1px solid #CCC;
+	color:#000;
+	width:20px;
+	height:20px;
+	line-height:19px;
+	text-align:center;
+	font-size:85%;
+	font-style:normal;
+	
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	border-radius:10px;
+	
+	-webkit-box-shadow:rgba(0,0,0,.15) 0 1px 2px;
+	-moz-box-shadow:rgba(0,0,0,.15) 0 1px 2px;
+	-o-box-shadow:rgba(0,0,0,.15) 0 1px 2px;
+	box-shadow:rgba(0,0,0,.15) 0 1px 2px;
+}
+.pgStyle1 .done var{
+	background:#ccc;
+}
+.pgStyle1 .selected var{
+	background:#FFF7C0;
+	color:#000;
+	border:1px solid #e6dead;
+	font-weight:bold;
+}
+.pgStyle1 b{
+	font-size:85%;
+	font-weight:normal;
+	color:#000;
+}
+.pgStyle1 .selected b{
+	font-weight:bold;
+}
+
+.circle6 td, .circle7 td{
+	vertical-align:top;
+	text-align:center;
+}
+.nopagelabel td.t{
+	display:none;
+}
+.nopagelabel .pgStyle1 var, .circle6 var, .circle7 var{
+	width:24px;
+	height:24px;
+	line-height:24px;
+	font-size:90%;
+	margin:0 auto 7px auto;
+	float:none;
+	-webkit-border-radius:12px;
+	-moz-border-radius:12px;
+	border-radius:12px;
+}
+.nopagelabel .pgStyle1 var{
+	margin-bottom:0;
+}
+.circle6 b, .circle7 b{
+	padding:0;
+}
+
+.circle2 td{width:50%;}
+.circle3 td{width:33%;}
+.circle4 td{width:25%;}
+.circle5 td{width:20%;}
+.circle6 td{width:16.6%;}
+.circle7 td{width:14.2%;}
+
+.pgStyle2 td{ /* Percentage */
+	vertical-align:middle;
+	height:25px;
+	padding:2px;
+	border:1px solid #CCC;
+	position:relative;
+	-webkit-border-radius:14px;
+	-moz-border-radius:14px;
+	border-radius:14px;
+	-webkit-box-shadow:rgba(0,0,0,.10) 1px 1px 1px;
+	-moz-box-shadow:rgba(0,0,0,.10) 1px 1px 1px;
+	-o-box-shadow:rgba(0,0,0,.10) 1px 1px 1px;
+	box-shadow:rgba(0,0,0,.10) 1px 1px 1px;
+}
+.pgStyle2 var{ /* Percentage Bar */
+	display:block;
+	height:26px;
+	float:left;
+	background:#FFF7C0;
+	color:#000;
+	font-style:normal;
+	text-align:right;
+	-webkit-border-radius:12px;
+	-moz-border-radius:12px;
+	border-radius:12px;
+	-webkit-box-shadow:rgba(0,0,0,.15) 1px 0 0;
+	-moz-box-shadow:rgba(0,0,0,.15) 1px 0 0;
+	-o-box-shadow:rgba(0,0,0,.15) 1px 0 0;
+	box-shadow:rgba(0,0,0,.15) 1px 0 0;
+}
+.pgStyle2 var b{/* Percentage # */
+	display:block;
+	float:right;
+	font-size:100%;
+	padding:3px 10px 3px 3px;
+	line-height:19px;
+}
+.pgStyle2 em{/* Page Title */
+	font-size:85%;
+	font-style:normal;
+	display:inline-block;
+	margin:0 0 0 9px;
+	padding:4px 0;
+	line-height:18px;
+}
+.pgStyle2 var em{
+	padding:4px 5px 3px 0;
+}
+.page1 .pgStyle2 var{
+	padding-left:7px;
+	text-align:left;
+	background:none;
+	-webkit-box-shadow:none;
+	-moz-box-shadow:none;
+	-o-box-shadow:none;
+	box-shadow:none;
+}
+.page1 .pgStyle2 b{
+	float:none;
+	padding-right:0;
+}
+
+.hideMarkers .marker, .nopagelabel .pgStyle1 b, .nopagelabel .pgStyle2 em{
+	display:none !important;
+}
+
+
+/* ----- ERRORS ----- */
+
+#errorLi{
+	width:99%;
+	margin:15px auto 15px auto;
+	background:#fff !important;
+	border:1px solid red;
+	text-align:center;
+	padding:1em 0 1em 0;
+	-webkit-border-radius:20px;
+	-moz-border-radius:20px;
+	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 b{
+	padding:2px 8px;
+	background-color: #FFDFDF !important;
+	color:red !important;
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	border-radius:10px;
+}
+form li.error{
+	display:block !important;
+	background-color: #FFDFDF !important;
+	margin-bottom:3px !important;
+}
+form li label.error, form li input.error{
+	color:#DF0000 !important;
+	font-weight:bold !important;
+}
+form li input.error{
+	background:#fff !important;
+	border:2px solid #DF0000 !important;
+}
+
+
+form li.error label, form li.error span.symbol{
+	color:#000 !important;
+}
+form li.error .desc{
+	color:#DF0000 !important;
+}
+form p.error{
+	display:none;
+	margin:0 !important;
+	padding:7px 0 0 0 !important;
+	line-height:10px !important;
+	font-weight:bold;
+	font-size:11px;
+	color:#DF0000 !important;
+	clear:both;
+}
+form li.error p.error{
+	display:block;
+}
+form li.complex p.error{
+	padding:0 0 9px 0 !important;
+}
+
+
+/* ----- TEXT DIRECTION ----- */
+
+.rtl h1, .rtl form *{
+	direction:rtl;
+	text-align:right;
+}
+.rtl li span{
+	float:right;
+}
+.rtl .right{
+	float:left;
+}
+
+.rtl #logo a{
+	background-position:right top;
+}
+.rtl label.choice{
+	margin:-17px 23px 0 0;
+}
+
+.rtl .leftLabel .desc, .rtl .rightLabel .desc{
+	float:right;
+	margin:0 0 0 15px;
+}
+.rtl .leftLabel li div, .rtl .rightLabel li div{
+	float:right;
+}
+.rtl .leftLabel .desc{
+	text-align:left;
+}
+.rtl li.focused .instruct, .rtl li:hover .instruct{
+	left:auto;
+	right:100%;
+}
+.rtl .leftLabel p.instruct, .rtl .rightLabel p.instruct{
+	margin-right:5px;
+}
+.rtl .leftLabel .altInstruct .instruct, .rtl .rightLabel .altInstruct .instruct{
+	margin-right:31% !important;
+	padding-right:15px;
+}
+
+.rtl .leftLabel .buttons, .rtl .rightLabel .buttons{
+	padding-right:23%;
+}
+.rtl .leftLabel .buttons div, .rtl .rightLabel .buttons div{
+	float:none;
+	margin:0 20px 0 0;
+}
+
+.noI .rtl .leftLabel .buttons, .noI .rtl .rightLabel .buttons{
+	padding-right:31%;
+}
+.noI .rtl .leftLabel .buttons div, .noI .rtl .rightLabel .buttons div{
+	margin:0 17px 0 0;
+}
+
+.rtl .likert td label{
+	text-align:center;
+}
+.rtl .likert caption, .rtl .likert tbody th{
+	text-align:right;
+}
+.rtl .likert td{
+	text-align:center;
+	border-left:none;
+	border-right:1px solid #ccc;
+}
+
+.rtl .pgStyle1 var{
+	text-align:center;
+}
+.rtl .pgStyle1 td{
+	text-align:right;
+}
+.rtl .pgStyle2 var{
+	float:right;
+}
+.rtl .pgStyle2 var b{
+	float:left;
+	padding:3px 3px 3px 10px;
+}
+.rtl .pgStyle2 em{
+	margin:0 9px 0 0;
+}
+.rtl .pgStyle2 var em{
+	padding:4px 0 3px 5px;
+}
+.rtl .page1 .pgStyle2 var{
+	padding-right:7px;
+}
+.rtl .page1 .pgStyle2 b{
+	padding-left:0;
+}
+.rtl .buttons .marker{
+	right:auto;
+	left:0;
+	padding:15px 0 0 10px;
+}
+.rtl #errorLi *{
+	text-align:center;
+}

File css/structure.css

+/* - - - - - - - - - - - - - - - - - - - - -
+
+Title : Wufoo Form Structure
+URL : http://wufoo.com
+
+- - - - - - - - - - - - - - - - - - - - - */
+
+html{
+	background:#eee;
+}
+body{
+	margin:17px 0 15px 0;
+	padding:0;
+	text-align:center;
+	font-size:small;
+	font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
+}
+
+article, aside, figure, figure img, figcaption, hgroup,
+footer, header, nav, section, video, object, output {
+	display: block;
+}
+
+#container{
+	text-align:left;
+	background:#fff;
+	border:1px solid #ccc;
+	-webkit-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;
+	-moz-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;
+	-o-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;
+	box-shadow:rgba(0,0,0,.2) 0px 0px 5px;
+}
+#container, #bottom{
+	margin:0 auto;
+	width:640px;
+}
+#bottom{
+	width:650px;
+	height:10px !important;
+	margin-bottom:10px;
+	display:block !important;
+}
+
+form.wufoo{
+	margin:20px 14px 0 14px;
+	padding:0 0 20px 0;
+	position:relative;
+}
+
+/* ----- LOGO ----- */
+
+#logo{
+	margin:0;
+	padding:0;
+	min-height:0;
+	background-color:#dedede;
+	text-indent:-9000px;
+	text-decoration:none;
+}
+#logo a{
+	min-height:40px;
+	height:40px;
+	display:block;
+	background:url(../images/wflogo.png) no-repeat left top;
+	overflow:hidden;
+}
+* html #logo a{
+	_background-image: none;
+	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/wflogo.png", sizingMethod="crop");
+}
+img, a img{
+	border:none;
+	-ms-interpolation-mode: bicubic;
+}
+* html #bottom{ 
+	_behavior: url(../images/iepngfix.htc);
+}
+.hide, .cloak div, .cloak span, .likert.cloak tbody, .likert.cloak thead{
+	display:none !important;
+}
+.likert.cloak table{
+	border:none;
+}

File css/tagcanvas.css

+.javascript  {font-family:monospace;}
+.javascript .imp {font-weight: bold; color: red;}
+.javascript .kw1 {color: #000066; font-weight: bold;}
+.javascript .kw2 {color: #003366; font-weight: bold;}
+.javascript .kw3 {color: #000066;}
+.javascript .co1 {color: #006600; font-style: italic;}
+.javascript .co2 {color: #009966; font-style: italic;}
+.javascript .coMULTI {color: #006600; font-style: italic;}
+.javascript .es0 {color: #000099; font-weight: bold;}
+.javascript .br0 {color: #009900;}
+.javascript .sy0 {color: #339933;}
+.javascript .st0 {color: #3366CC;}
+.javascript .nu0 {color: #CC0000;}
+.javascript .me1 {color: #660066;}
+.javascript span.xtra { display:block; }
+ 
+p.weighty {
+ width: 310px;
+ padding: 1em 20px;
+ float: left;
+ background-color: #fff;
+ border: 4px solid #aaa;
+ border-radius: 20px;
+ -moz-border-radius: 20px;
+}
+ul.weighted {
+ float: left;
+ display: block;
+ width: 280px;
+ overflow: auto;
+ padding: 20px;
+ margin: 0 10px 20px 0;
+ background-color: #fff;
+ border: 4px solid #aaa;
+ border-radius: 20px;
+ -moz-border-radius: 20px;
+}
+ul.weighted li {
+ display: inline;
+}
+ul.weighted li a {
+ margin: 2px;
+}
+canvas#gradient {
+ float: right;
+ border:1px solid #000;
+ margin: 2px 20px
+}

File css/theme.css

+.highlight { background-color: yellow }
+
+/* ----- Logo ----- */
+
+#logo a {
+	background-image:url('../images/wflogo.png'); 
+	min-height:0;
+	height:px;
+}
+* html #logo a {/* IE6 png Support */
+	background-image: none;
+	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/wflogo.png", sizingMethod="crop");
+}
+
+/* ----- Backgrounds ----- */
+html{
+	background-image:none;	background-color:#FFFFFF;
+}
+#logo{
+	background-image:none;	background-color:#DEDEDE;
+}
+#container, html.embed{
+	background-color:#FFFFFF;
+}
+.safari .wufoo input.file{
+	background:none;
+	border:none;
+}
+
+.wufoo li.focused{
+	background-color:#FFF7C0;
+}
+.wufoo .instruct{
+	background-color:#F5F5F5;
+}
+
+/* ----- Borders ----- */
+#container{
+	border:1px solid #CCCCCC;
+}
+.wufoo .info, .wufoo .paging-context{
+	border-bottom:1px dotted #CCCCCC;
+}
+.wufoo .section h3, .wufoo .captcha, #payment .paging-context{
+	border-top:1px dotted #CCCCCC;
+}
+.wufoo input.text, .wufoo textarea.textarea{
+	border:;
+}
+.wufoo .instruct{
+	border:1px solid #E6E6E6;
+}
+.fixed .info{
+	border-bottom:none;
+}
+.wufoo li.section.scrollText{
+	border-color:#dedede;
+}
+
+/* ----- Typography ----- */
+.wufoo .info h2{
+	font-size:160%;
+	font-family:inherit;
+	font-style:normal;
+	font-weight:normal;
+	color:#000000;
+}
+.wufoo .info div{
+	font-size:95%;
+	font-family:inherit;
+	font-style:normal;
+	font-weight:normal;
+	color:#444444;
+}
+.wufoo .section h3{
+	font-size:110%;
+	font-family:inherit;
+	font-style:normal;
+	font-weight:normal;
+	color:#000000;
+}
+.wufoo .section div{
+	font-size:85%;
+	font-family:inherit;
+	font-style:normal;
+	font-weight:normal;
+	color:#444444;
+}
+
+.wufoo label.desc, .wufoo legend.desc{
+	font-size:95%;
+	font-family:inherit;
+	font-style:normal;
+	font-weight:bold;
+	color:#444444;
+}
+
+.wufoo label.choice{
+	font-size:100%;
+	font-family:inherit;
+	font-style:normal;
+	font-weight:normal;
+	color:#444444;
+}
+.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file, .wufoo select.select{
+	font-style:normal;
+	font-weight:normal;
+	color:#333333;
+	font-size:100%;
+}
+{* Custom Fonts Break Dropdown Selection in IE *}
+.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file{ 
+	font-family:inherit;
+}
+
+
+.wufoo li div, .wufoo li span, .wufoo li div label, .wufoo li span label{
+	font-family:inherit;
+	color:#444444;
+}
+.safari .wufoo input.file{ /* Webkit */
+	font-size:100%;
+	font-family:inherit;
+	color:#444444;
+}
+.wufoo .instruct small{
+	font-size:80%;
+	font-family:inherit;
+	font-style:normal;
+	font-weight:normal;
+	color:#444444;
+}
+
+.altInstruct small, li.leftHalf small, li.rightHalf small,
+li.leftThird small, li.middleThird small, li.rightThird small,
+.iphone small{
+	color:#444444 !important;
+}
+
+/* ----- Button Styles ----- */
+
+.wufoo input.btTxt{
+	font-size:;
+	font-family:;
+	font-weight:;
+	font-style:;
+	color:;
+}
+
+/* ----- Highlight Styles ----- */
+
+.wufoo li.focused label.desc, .wufoo li.focused legend.desc,
+.wufoo li.focused div, .wufoo li.focused span, .wufoo li.focused div label, .wufoo li.focused span label,
+.safari .wufoo li.focused input.file{ 
+	color:#000000;
+}
+
+/* ----- Confirmation ----- */
+
+.confirm h2{
+	font-family:inherit;
+	color:#444444;
+}
+a.powertiny b, a.powertiny em{
+color:#1a1a1a !important;
+}
+.embed a.powertiny b, .embed a.powertiny em{
+color:#1a1a1a !important;
+}
+
+/* ----- Pagination ----- */
+
+.pgStyle1 var, .pgStyle2 var, .pgStyle2 em, .page1 .pgStyle2 var, .pgStyle1 b, .wufoo .buttons .marker{
+	font-family:inherit;
+	color:#444444;
+}
+.pgStyle1 var, .pgStyle2 td{
+	border:1px solid #cccccc;
+}
+.pgStyle1 .done var{
+	background:#cccccc;
+}
+
+.pgStyle1 .selected var, .pgStyle2 var, .pgStyle2 var em{
+	background:#FFF7C0;
+	color:#000000;
+}
+.pgStyle1 .selected var{
+	border:1px solid #e6dead;
+}
+
+
+/* Likert Backgrounds */
+
+.likert table{
+	background-color:#FFFFFF;
+}
+.likert thead td, .likert thead th{
+	background-color:#e6e6e6;
+}
+.likert tbody tr.alt td, .likert tbody tr.alt th{
+	background-color:#f5f5f5;
+}
+
+/* Likert Borders */
+
+.likert table, .likert th, .likert td{
+	border-color:#dedede;
+}
+.likert td{
+	border-left:1px solid #cccccc;
+}
+
+/* Likert Typography */
+
+.likert caption, .likert thead td, .likert tbody th label{
+	color:#444444;
+	font-family:inherit;
+}
+.likert tbody td label{
+	color:#575757;
+	font-family:inherit;
+}
+.likert caption, .likert tbody th label{
+	font-size:95%;
+}
+
+/* Likert Hover */
+
+.likert tbody tr:hover td, .likert tbody tr:hover th, .likert tbody tr:hover label{
+	background-color:#FFF7C0;
+	color:#000000;
+}
+.likert tbody tr:hover td{
+	border-left:1px solid #ccc69a;
+}
+
+/* ----- Running Total ----- */
+
+.wufoo #lola{
+	background:#e6e6e6;
+}
+.wufoo #lola tbody td{
+	border-bottom:1px solid #cccccc;
+}
+.wufoo #lola{
+	font-family:inherit;
+	color:#444444;
+}
+.wufoo #lola tfoot th{
+	color:#696969;
+}
+
+/* ----- Report Styles ----- */
+
+.wufoo .wfo_graph h3{
+	font-size:95%;
+	font-family:inherit;
+	color:#444444;
+}
+.wfo_txt, .wfo_graph h4{
+	color:#444444;
+}
+.wufoo .footer h4{
+	color:#000000;
+}
+.wufoo .footer span{
+	color:#444444;
+}
+
+/* ----- Number Widget ----- */
+
+.wfo_number{
+	background-color:#f5f5f5;
+	border-color:#dedede;
+}
+.wfo_number strong, .wfo_number em{
+	color:#000000;
+}
+
+/* ----- Chart Widget Border and Background Colors ----- */
+
+#widget, #widget body{
+	background:#FFFFFF;
+}
+.fcNav a.show{
+	background-color:#FFFFFF;
+	border-color:#cccccc;
+}
+.fc table{
+	border-left:1px solid #dedede;	
+}
+.fc thead th, .fc .more th{
+	background-color:#dedede !important;
+	border-right:1px solid #cccccc !important;
+}
+.fc tbody td, .fc tbody th, .fc tfoot th, .fc tfoot td{
+	background-color:#FFFFFF;
+	border-right:1px solid #cccccc;
+	border-bottom:1px solid #dedede;
+}
+.fc tbody tr.alt td, .fc tbody tr.alt th, .fc tbody td.alt{
+	background-color:#f5f5f5;
+}
+
+/* ----- Chart Widget Typography Colors ----- */
+
+.fc caption, .fcNav, .fcNav a{
+	color:#444444;
+}
+.fc tfoot, 
+.fc thead th,