Skip to content

Instantly share code, notes, and snippets.

@jessnorwood
Last active August 29, 2015 13:56
Show Gist options
  • Save jessnorwood/8976055 to your computer and use it in GitHub Desktop.
Save jessnorwood/8976055 to your computer and use it in GitHub Desktop.
Wufoo
html {
background: none repeat scroll 0 0 #EEEEEE;
}
body {
font-family: "Lucida Grande",Tahoma,Arial,Verdana,sans-serif;
font-size: small;
margin: 17px 0 15px;er
padding: 0;
text-align: center;
}
article, aside, figure, figure img, figcaption, hgroup, footer, header, nav, section, video, object, output {
display: block;
}
#container {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
text-align: left;
}
#container {
margin: 0 auto 10px;
width: 640px;
}
form.wufoo {
margin: 20px 14px 0;
padding: 0 0 20px;
position: relative;
}
#logo {
background-color: #DEDEDE;
margin: 0;
min-height: 0;
padding: 0;
text-decoration: none;
text-indent: -9000px;
}
#logo a {
background: url("/images/wflogo.png") no-repeat scroll left top rgba(0, 0, 0, 0);
display: block;
height: 40px;
min-height: 40px;
overflow: hidden;
}
* html #logo a {
}
img, a img {
border: medium none;
}
.hide, .cloak div, .cloak span, .likert.cloak tbody, .likert.cloak thead {
display: none !important;
}
.likert.cloak table {
border: medium none;
}
@font-face {
font-family: "Pictos";
font-style: normal;
font-weight: normal;
src: local("Pictos"), url("/fonts/pictos.woff") format("woff"), url("/fonts/pictos.ttf") format("truetype"), url("/fonts/pictos.svg#webfontIyfZbseF") format("svg");
}
.pictos {
font-family: "Pictos";
}
.p-a:before {
content: "a ";
font-family: "Pictos";
}
.p-b:before {
content: "b ";
font-family: "Pictos";
}
.p-c:before {
content: "c ";
font-family: "Pictos";
}
.p-d:before {
content: "d ";
font-family: "Pictos";
}
.p-e:before {
content: "e ";
font-family: "Pictos";
}
.p-f:before {
content: "f ";
font-family: "Pictos";
}
.p-g:before {
content: "g ";
font-family: "Pictos";
}
.p-h:before {
content: "h ";
font-family: "Pictos";
}
.p-i:before {
content: "i ";
font-family: "Pictos";
}
.p-j:before {
content: "j ";
font-family: "Pictos";
}
.p-k:before {
content: "k ";
font-family: "Pictos";
}
.p-l:before {
content: "l ";
font-family: "Pictos";
}
.p-m:before {
content: "m ";
font-family: "Pictos";
}
.p-n:before {
content: "n ";
font-family: "Pictos";
}
.p-o:before {
content: "o ";
font-family: "Pictos";
}
.p-p:before {
content: "p ";
font-family: "Pictos";
}
.p-q:before {
content: "q ";
font-family: "Pictos";
}
.p-r:before {
content: "r ";
font-family: "Pictos";
}
.p-s:before {
content: "s ";
font-family: "Pictos";
}
.p-t:before {
content: "t ";
font-family: "Pictos";
}
.p-u:before {
content: "u ";
font-family: "Pictos";
}
.p-v:before {
content: "v ";
font-family: "Pictos";
}
.p-w:before {
content: "w ";
font-family: "Pictos";
}
.p-x:before {
content: "x ";
font-family: "Pictos";
}
.p-y:before {
content: "y ";
font-family: "Pictos";
}
.p-z:before {
content: "z ";
font-family: "Pictos";
}
.p-A:before {
content: "A ";
font-family: "Pictos";
}
.p-B:before {
content: "B ";
font-family: "Pictos";
}
.p-C:before {
content: "C ";
font-family: "Pictos";
}
.p-D:before {
content: "D ";
font-family: "Pictos";
}
.p-E:before {
content: "E ";
font-family: "Pictos";
}
.p-F:before {
content: "F ";
font-family: "Pictos";
}
.p-G:before {
content: "G ";
font-family: "Pictos";
}
.p-H:before {
content: "H ";
font-family: "Pictos";
}
.p-I:before {
content: "I ";
font-family: "Pictos";
}
.p-J:before {
content: "J ";
font-family: "Pictos";
}
.p-K:before {
content: "K ";
font-family: "Pictos";
}
.p-L:before {
content: "L ";
font-family: "Pictos";
}
.p-M:before {
content: "M ";
font-family: "Pictos";
}
.p-N:before {
content: "N ";
font-family: "Pictos";
}
.p-O:before {
content: "O ";
font-family: "Pictos";
}
.p-P:before {
content: "P ";
font-family: "Pictos";
}
.p-Q:before {
content: "Q ";
font-family: "Pictos";
}
.p-R:before {
content: "R ";
font-family: "Pictos";
}
.p-S:before, .rating span:before, .rating:hover span:hover ~ span:before {
content: "S ";
font-family: "Pictos";
}
.p-T:before {
content: "T ";
font-family: "Pictos";
}
.p-U:before {
content: "U ";
font-family: "Pictos";
}
.p-V:before {
content: "V ";
font-family: "Pictos";
}
.p-W:before {
content: "W ";
font-family: "Pictos";
}
.p-X:before {
content: "X ";
font-family: "Pictos";
}
.p-Y:before {
content: "Y ";
font-family: "Pictos";
}
.p-Z:before {
content: "Z ";
font-family: "Pictos";
}
.p-\`:before {
content: "` ";
font-family: "Pictos";
}
.p-1:before {
content: "1 ";
font-family: "Pictos";
}
.p-2:before {
content: "2 ";
font-family: "Pictos";
}
.p-3:before {
content: "3 ";
font-family: "Pictos";
}
.p-4:before {
content: "4 ";
font-family: "Pictos";
}
.p-5:before {
content: "5 ";
font-family: "Pictos";
}
.p-6:before {
content: "6 ";
font-family: "Pictos";
}
.p-7:before {
content: "7 ";
font-family: "Pictos";
}
.p-8:before {
content: "8 ";
font-family: "Pictos";
}
.p-9:before {
content: "9 ";
font-family: "Pictos";
}
.p-0:before {
content: "0 ";
font-family: "Pictos";
}
.p--:before {
content: "- ";
font-family: "Pictos";
}
.p-\=:before {
content: "= ";
font-family: "Pictos";
}
.p-\[:before {
content: "[ ";
font-family: "Pictos";
}
.p-\]:before {
content: "] ";
font-family: "Pictos";
}
.p-\\:before {
content: " ";
font-family: "Pictos";
}
.p-\;:before {
content: ";
font-family: "Pictos";
}
.p-\':before {
content: "\' ";
font-family: "Pictos";
}
.p-\,:before {
content: ", ";
font-family: "Pictos";
}
.p-\.:before {
content: ". ";
font-family: "Pictos";
}
.p-\/:before {
content: "/ ";
font-family: "Pictos";
}
.p-\~:before {
content: "~ ";
font-family: "Pictos";
}
.p-\!:before {
content: "! ";
font-family: "Pictos";
}
.p-\@:before {
content: "@ ";
font-family: "Pictos";
}
.p-\#:before {
content: "# ";
font-family: "Pictos";
}
.p-\$:before {
content: "$ ";
font-family: "Pictos";
}
.p-\%:before {
content: "% ";
font-family: "Pictos";
}
.p-\^:before {
content: "^ ";
font-family: "Pictos";
}
.p-\&:before {
content: "& ";
font-family: "Pictos";
}
.p-\*:before {
content: "* ";
font-family: "Pictos";
}
.p-\(:before {
content: ";
font-family: "Pictos";
}
.p-\):before {
content: ") ";
font-family: "Pictos";
}
.p-_:before {
content: "_ ";
font-family: "Pictos";
}
.p-\+:before {
content: "+ ";
font-family: "Pictos";
}
.p-\{:before {
content: "{ ";
font-family: "Pictos";
}
.p-\}:before {
content: "} ";
font-family: "Pictos";
}
.p-\|:before {
content: "| ";
font-family: "Pictos";
}
.p-\::before {
content: ": ";
font-family: "Pictos";
}
.p-\":before {
content: "\" ";
font-family: "Pictos";
}
.p-\<:before {
content: "< ";
font-family: "Pictos";
}
.p-\>:before {
content: "> ";
font-family: "Pictos";
}
.p-\?:before {
content: "? ";
font-family: "Pictos";
}
.wufoo {
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,sans-serif;
letter-spacing: 0.01em;
}
.wufoo li {
width: 64%;
}
.info {
border-bottom: 1px dotted #CCCCCC;
clear: both;
display: inline-block;
margin: 0 0 5px;
padding: 0 1% 1.1em;
}
.info[class] {
display: block;
}
.hideHeader .info, #payment.hideHeader li.first {
display: none;
}
.info h2 {
clear: left;
font-size: 160%;
font-weight: normal;
margin: 0 0 5px;
}
.info div {
color: #555555;
font-size: 95%;
line-height: 135%;
}
form ul {
list-style-type: none;
margin: 0;
padding: 0;
}
* html form ul {
width: 99%;
}
form li {
background-color: rgba(0, 0, 0, 0);
clear: both;
margin: 0;
padding: 6px 1% 9px;
position: relative;
transition: background-color 350ms ease-out 0s;
}
form ul:after, form li:after, form li div:after {
clear: both;
content: ".";
display: block;
height: 0;
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 {
color: #444444;
margin: 0;
padding: 0;
}
form li span {
color: #444444;
float: left;
margin: 0 0.3em 0 0;
padding: 0;
}
form li div span {
display: block;
float: left;
margin: 0;
width: 100%;
}
li.twoColumns div span {
margin: 0 5px 0 0;
width: 48%;
}
li.threeColumns div span {
margin: 0 5px 0 0;
width: 30%;
}
li.notStacked div span {
margin: 0 7px 0 0;
width: auto;
}
form li.complex {
padding-bottom: 0;
}
form li.complex div span {
margin: 0 0.3em 0 0;
padding-bottom: 12px;
width: auto;
}
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%;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both !important;
}
label span, .section span, p span, .likert span {
display: inline !important;
float: none !important;
}
form li div label, form li span label {
clear: both;
color: #444444;
display: block;
font-size: 85%;
line-height: 160%;
margin: 0;
padding-top: 3px;
}
fieldset {
border: medium none;
display: block;
margin: 0;
padding: 0;
}
label.desc, legend.desc {
border: medium none;
color: #222222;
display: block;
font-size: 95%;
font-weight: bold;
line-height: 150%;
margin: 0;
padding: 0 0 3px;
white-space: normal;
width: 100%;
}
label.choice {
color: #222222;
cursor: pointer;
display: block;
font-size: 100%;
line-height: 150%;
margin: -17px 0 0 23px;
padding: 0 0 5px;
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 {
cursor: pointer !important;
float: left;
height: 16px;
margin: 0.19em 5px 0 0;
padding: 0;
width: 16px;
}
form span.req {
color: #FF0000 !important;
display: inline;
float: none;
font-weight: bold;
margin: 0;
padding: 0;
}
form li div label var {
font-style: normal;
font-weight: bold;
}
form li div label .currently {
display: none;
}
input.text, input.search, input.file, textarea.textarea, select.select {
color: #333333;
font-family: "Lucida Grande",Tahoma,Arial,sans-serif;
font-size: 100%;
margin: 0;
padding: 2px 0;
}
input.text, input.search, textarea.textarea {
background: url("/images/fieldbg.gif") repeat-x scroll center top #FFFFFF;
border-color: #7C7C7C #C3C3C3 #DDDDDD;
border-style: solid;
border-width: 1px;
}
select.select {
padding: 1px 0 0;
}
input.search {
border-radius: 10px;
padding-left: 6px;
}
input.checkbox, input.radio {
display: block;
height: 13px;
margin: 4px 0 0;
padding: 0;
width: 13px;
}
input.other {
margin: 0 0 8px 25px;
}
.safari select.select {
font-size: 120% !important;
margin: 0 0 1px;
}
* 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;
}
.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%;
}
.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 {
max-width: 100%;
min-width: 100%;
width: 293px;
}
textarea.small {
height: 5.5em;
}
textarea.medium {
height: 10em;
}
textarea.large {
height: 20em;
}
li.file a {
color: #222222;
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;
}
li.file .file-size, li.file .file-type {
color: #666666;
font-size: 85%;
text-transform: uppercase;
}
li.file .file-name {
color: #0000FF;
display: block;
padding: 14px 0 0;
text-decoration: underline;
}
li.file .file-delete {
color: #FF0000 !important;
font-size: 85%;
text-decoration: underline;
}
li.file a:hover .file-name {
color: #008000 !important;
}
li.file a:hover .file-name {
color: #008000 !important;
}
form li.likert {
clear: both !important;
float: none !important;
margin: 0;
padding: 6px 1% 5px;
width: auto !important;
}
.likert table {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: #DEDEDE #DEDEDE -moz-use-text-color;
border-image: none;
border-style: solid solid none;
border-width: 1px 1px medium;
margin: 0 0 0.9em;
width: 100%;
}
.likert caption {
color: #222222;
font-size: 95%;
line-height: 135%;
padding: 5px 0 0.5em;
text-align: left;
}
.likert input {
margin: 2px 0;
padding: 0;
}
.likert tbody td label {
color: #565656;
display: block;
font-size: 85%;
}
.likert thead td, .likert thead th {
background-color: #E6E6E6;
}
.likert td {
border-left: 1px solid #CCCCCC;
padding: 4px 6px;
text-align: center;
}
.likert thead td {
font-size: 85%;
padding: 10px 6px;
}
.likert th, .likert td {
border-bottom: 1px solid #DEDEDE;
}
.likert tbody th {
padding: 8px;
text-align: left;
}
.likert tbody th label {
color: #222222;
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;
}
.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;
}
form li.buttons {
clear: both;
padding: 10px 1%;
position: relative;
width: auto !important;
}
form li.buttons input {
font-size: 100%;
margin-right: 5px;
}
input.btTxt {
overflow: visible;
padding: 0 7px;
width: auto;
}
.safari input.btTxt {
font-size: 120%;
}
.buttons .marker {
color: #000000;
padding: 15px 10px 0 0;
position: absolute;
right: 0;
top: 0;
width: auto;
}
button.link {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: medium none;
color: #0000FF;
cursor: pointer;
display: inline-block;
font-size: 100%;
padding: 0;
text-decoration: underline;
}
button.link:hover {
color: #008000;
}
.leftLabel li, .rightLabel li {
padding-top: 9px;
width: 74% !important;
}
.leftLabel .desc, .rightLabel .desc {
float: left;
margin: 0 15px 0 0;
width: 31%;
}
.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 {
margin-left: 5px;
width: 28%;
}
.leftLabel .altInstruct .instruct, .rightLabel .altInstruct .instruct {
margin-left: 31% !important;
padding-left: 15px;
width: 65%;
}
.noI form li, .altInstruct form li {
width: auto !important;
}
.noI .leftLabel .buttons, .noI .rightLabel .buttons {
padding-left: 31%;
}
.noI .leftLabel .buttons div, .noI .rightLabel .buttons div {
margin: 0 0 0 17px;
}
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;
}
form li.leftFifth, form li.middleFifth, form li.rightFifth {
width: 18% !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;
}
form li.focused {
background-color: #FFF7C0;
}
form .instruct {
background: none repeat scroll 0 0 #F5F5F5;
border: 1px solid #E6E6E6;
font-size: 105%;
left: 0;
margin: 0 0 0 8px;
opacity: 0;
padding: 8px 10px 10px;
position: absolute;
top: 0;
transition: opacity 350ms ease-out 0s;
visibility: hidden;
width: 45%;
z-index: 1000;
}
form .instruct small {
color: #444444;
font-size: 80%;
line-height: 120%;
}
form li.focused .instruct, form li:hover .instruct {
left: 100%;
opacity: 1;
visibility: visible;
}
.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 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
border: medium none !important;
clear: left;
font-style: italic;
margin: 0;
opacity: 1;
padding: 6px 0 0;
position: static;
visibility: visible;
width: 100%;
}
.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;
}
.hideSeconds .seconds, .hideAMPM .ampm, .hideAddr2 .addr2, .hideSecondary #previousPageButton, .hideCents .radix, .hideCents .cents, .hideState .state {
display: none;
}
form li.section {
clear: both;
margin: 0;
padding: 7px 0 0;
position: static;
width: auto !important;
}
form li.section h3 {
border-top: 1px dotted #CCCCCC;
font-size: 110%;
font-weight: normal;
line-height: 135%;
margin: 0 0 3px;
padding: 12px 1% 0;
width: auto;
}
form li.first {
padding: 0;
}
form li.first h3 {
border-top: medium none !important;
padding: 8px 1% 0;
}
form li.section div {
display: block;
float: none;
font-size: 85%;
line-height: 160%;
margin: 0 0 1em;
padding: 0 1%;
width: auto;
}
form li.section.scrollText {
border: 1px solid #DEDEDE;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
height: 150px;
margin-bottom: 10px;
overflow: auto;
padding: 10px;
}
form li.section.scrollText h3 {
border: medium none;
padding-top: 8px;
}
form li.captcha {
border-top: 1px dotted #CCCCCC;
clear: both;
margin-top: 5px;
padding: 1.1em 1% 9px;
position: static;
width: auto !important;
}
form li.captcha label.desc {
float: none;
margin-bottom: 4px;
width: auto !important;
}
* + html #recaptcha_area, * + html #recaptcha_table {
min-width: 450px !important;
}
* html #recaptcha_area, * html #recaptcha_table {
width: 450px !important;
}
#recaptcha_widget_div table {
background: none repeat scroll 0 0 #FFFFFF;
}
form li.captcha .noscript iframe {
border: medium none;
margin: 0;
overflow: hidden;
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;
}
form li.paging-context {
border-bottom: 1px dotted #CCCCCC;
clear: both;
margin: 0 0 7px;
padding: 5px 1% 10px;
position: static;
width: auto !important;
}
.paging-context table {
width: 100%;
}
.pgStyle1 td {
text-align: left;
vertical-align: middle;
}
.pgStyle1 td.c {
width: 22px;
}
.pgStyle1 td.t {
padding: 0 1%;
}
.pgStyle1 var {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #CCCCCC;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
color: #000000;
display: block;
float: left;
font-size: 85%;
font-style: normal;
height: 20px;
line-height: 19px;
text-align: center;
width: 20px;
}
.pgStyle1 .done var {
background: none repeat scroll 0 0 #CCCCCC;
}
.pgStyle1 .selected var {
background: none repeat scroll 0 0 #FFF7C0;
border: 1px solid #E6DEAD;
color: #000000;
font-weight: bold;
}
.pgStyle1 b {
color: #000000;
font-size: 85%;
font-weight: normal;
}
.pgStyle1 .selected b {
font-weight: bold;
}
.circle6 td, .circle7 td {
text-align: center;
vertical-align: top;
}
.nopagelabel td.t {
display: none;
}
.nopagelabel .pgStyle1 var, .circle6 var, .circle7 var {
border-radius: 12px;
float: none;
font-size: 90%;
height: 24px;
line-height: 24px;
margin: 0 auto 7px;
width: 24px;
}
.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 {
border: 1px solid #CCCCCC;
border-radius: 14px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
height: 25px;
padding: 2px;
position: relative;
vertical-align: middle;
}
.pgStyle2 var {
background: none repeat scroll 0 0 #FFF7C0;
border-radius: 12px;
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.15);
color: #000000;
display: block;
float: left;
font-style: normal;
height: 26px;
text-align: right;
}
.pgStyle2 var b {
display: block;
float: right;
font-size: 100%;
line-height: 19px;
padding: 3px 10px 3px 3px;
}
.pgStyle2 em {
display: inline-block;
font-size: 85%;
font-style: normal;
line-height: 18px;
margin: 0 0 0 9px;
padding: 4px 0;
}
.pgStyle2 var em {
padding: 4px 5px 3px 0;
}
.page1 .pgStyle2 var {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
box-shadow: none;
padding-left: 7px;
text-align: left;
}
.page1 .pgStyle2 b {
float: none;
padding-right: 0;
}
.hideMarkers .marker, .nopagelabel .pgStyle1 b, .nopagelabel .pgStyle2 em {
display: none !important;
}
#errorLi {
background: none repeat scroll 0 0 #FFFFFF !important;
border: 1px solid #FF0000;
border-radius: 20px;
margin: 0px auto;
padding: 5px 0;
text-align: center;
width: 99%;
}
#errorMsgLbl {
color: #DF0000 !important;
font-size: 125%;
margin: 0 0 5px;
padding: 0;
}
#errorMsg {
color: #000000 !important;
font-size: 100%;
margin: 0 0 2px;
}
#errorMsg b {
background-color: #FFDFDF !important;
border-radius: 10px;
color: #FF0000 !important;
padding: 2px 8px;
}
form li.error {
background-color: #FFDFDF !important;
display: block !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: none repeat scroll 0 0 #FFFFFF !important;
border: 2px solid #DF0000 !important;
}
form li.error label, form li.error span.symbol {
color: #000000 !important;
}
form li.error .desc {
color: #DF0000 !important;
}
form p.error {
clear: both;
color: #DF0000 !important;
display: none;
font-size: 11px;
font-weight: bold;
line-height: 10px !important;
margin: 0 !important;
padding: 7px 0 0 !important;
}
form li.error p.error {
display: block;
}
form li.complex p.error {
padding: 0 0 9px !important;
}
.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 {
border-left: medium none;
border-right: 1px solid #CCCCCC;
text-align: center;
}
.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 {
left: 0;
padding: 15px 0 0 10px;
right: auto;
}
.rtl #errorLi * {
text-align: center;
}
.rating span:focus {
outline: 0 none;
}
.rating span, .rating:hover span:hover ~ span {
color: #C7C7C7;
font-size: 20px;
height: 1em;
line-height: 1em;
padding-right: 0.1em;
text-shadow: 0 0 1px #444444;
width: 0.9em;
}
.rating .clicked {
color: #FFD954;
}
.rating > span:hover, .rating .clicked:hover, .rating:hover span {
color: #FFE487;
cursor: pointer;
text-shadow: 0 0 1px #FF0000;
}
.rating:hover span {
}
.msie6 .rating span, .msie7 .rating span {
color: #C7C7C7;
display: inline-block;
font-family: "Pictos";
font-size: 20px;
height: 30px;
width: 30px;
}
.msie6 .rating span:hover, .msie6 .rating span.clicked, .msie7 .rating span:hover, .msie7 .rating span.clicked {
color: #FFE487;
}
@media print {
.rating span {
color: #C7C7C7;
}
}
div.calendar {
background-clip: padding-box;
border-radius: 11px;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
position: relative;
z-index: 15000;
}
.calendar table {
background: none repeat scroll 0 0 padding-box #FFFFFF;
border-radius: 11px;
color: #000000;
cursor: pointer;
font-family: "Lucida Grande",Tahoma,Arial,Verdana,sans-serif;
font-size: 11px;
}
.calendar .button {
padding: 3px 0;
text-align: center;
}
.calendar .question {
border-top-left-radius: 11px;
}
.calendar .close {
border-top-right-radius: 11px;
}
.calendar thead .title {
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
font-size: 12px;
font-weight: bold;
padding: 5px 0;
text-align: center;
}
.calendar thead .headrow {
background: none repeat scroll 0 0 #DEDEDE;
color: #333333;
font-weight: bold;
}
.calendar thead .daynames {
background: none repeat scroll 0 0 #F5F5F5;
color: #333333;
}
.calendar thead .name {
border-bottom: 1px solid #DEDEDE;
color: #000000;
padding: 3px 2px;
text-align: center;
}
.calendar thead .weekend {
background: none repeat scroll 0 0 #DEDEDE;
color: #666666;
}
.calendar thead .hilite {
background-color: #444444;
color: #FFFFFF;
padding: 1px;
}
.calendar thead .active {
background-color: #D12F19;
color: #FFFFFF;
}
.calendar tbody .day {
border: 1px solid #FFFFFF;
color: #222222;
padding: 3px 2px;
text-align: right;
width: 2em;
}
.calendar tbody .day.othermonth {
color: #BBBBBB;
font-size: 80%;
}
.calendar tbody .day.othermonth.oweekend {
color: #FFBBBB;
}
.calendar table .wn {
background: none repeat scroll 0 0 #666666;
border-right: 1px solid #000000;
padding: 2px;
}
.calendar tbody .rowhilite td, .calendar tbody .rowhilite td.wn {
background: none repeat scroll 0 0 #DDDDDD;
}
.calendar tbody td.hilite {
background: none repeat scroll 0 0 #444444 !important;
color: #FFFFFF !important;
}
.calendar tbody td.active {
background: none repeat scroll 0 0 #529214 !important;
color: #529214;
}
.calendar tbody td.selected {
background: none repeat scroll 0 0 #F5F5F5 !important;
border: 1px solid #888888;
color: #222222 !important;
font-weight: bold;
padding: 1px;
}
.calendar tbody td.weekend {
color: #666666;
}
.calendar tbody td.today {
background: none repeat scroll 0 0 #D9EFC2;
color: #529214;
font-weight: bold;
}
.calendar tbody .disabled {
color: #999999;
}
.calendar tbody .emptycell {
visibility: hidden;
}
.calendar tbody .emptyrow {
display: none;
}
.calendar tfoot .footrow {
color: #FFFFFF;
padding: 6px 0;
text-align: center;
}
.calendar tfoot .ttip {
background: none repeat scroll 0 0 #555566;
border-bottom-left-radius: 11px;
border-bottom-right-radius: 11px;
border-top: 1px solid #DEDEDE;
color: #FFFFFF;
font-size: 10px;
padding: 4px 0;
width: 192px;
}
.calendar tfoot .hilite {
background: none repeat scroll 0 0 #AAAAFF;
border: 1px solid #0044FF;
color: #000000;
padding: 1px;
}
.calendar tfoot .active {
background: none repeat scroll 0 0 #7777CC;
padding: 2px 0 0 2px;
}
.calendar .combo {
background: none repeat scroll 0 0 #F5F5F5;
border: 1px solid #CCCCCC;
color: #222222;
display: none;
font-size: 90%;
left: 0;
position: absolute;
top: 0;
width: 4em;
z-index: 100;
}
.calendar .combo .label, .calendar .combo .label-IEfix {
padding: 1px;
text-align: center;
}
.calendar .combo .label-IEfix {
width: 4em;
}
.calendar .combo .hilite {
background: none repeat scroll 0 0 #444444;
color: #FFFFFF;
}
.calendar .combo .active {
background: none repeat scroll 0 0 #DEDEDE;
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
font-weight: bold;
}
.confirm .wufoo {
text-align: center;
}
.confirm h2 {
color: #222222;
font-size: 160%;
font-weight: normal;
line-height: 135%;
margin: 0 1em;
padding: 70px 0 80px;
}
.embed .confirm h2 {
padding-bottom: 50px;
}
.confirm .wufoo div {
text-align: justify;
}
.confirm .wufoo div p {
font-size: 120%;
line-height: 160%;
margin: 0 10px 1.5em;
}
ul.protected {
list-style: none outside none;
margin: 50px 0 30px;
}
.protected li {
padding: 10px 0;
text-align: center;
width: 100% !important;
}
.protected h2 {
color: #DF0000;
font-weight: bold;
margin: 0 auto 10px;
}
.protected label {
display: block;
font-size: 120% !important;
padding-top: 10px;
}
.protected input.text {
font-size: 170% !important;
text-align: center;
width: 380px;
}
.protected .buttons {
margin: 0 auto;
padding: 0;
}
.protected #saveForm {
font-size: 120% !important;
}
.rtl .protected li, .rtl .protected input.text {
text-align: right;
}
.rtl .protected .buttons {
margin: 0;
}
#merchant {
text-align: center;
}
#merchant li {
width: 97%;
}
#merchant .info {
border-bottom: medium none !important;
}
#merchantMessage {
padding: 60px 20px 40px;
}
form li.invoice {
clear: both;
margin: 0;
padding: 0;
position: static;
width: auto !important;
}
.invoice table {
font-size: 90%;
margin: 0 0 15px;
width: 100%;
}
.invoice thead th, .invoice tbody th, .invoice tbody td, .invoice tfoot th {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #CCCCCC -moz-use-text-color -moz-use-text-color #CCCCCC;
border-image: none;
border-style: solid none none solid;
border-width: 1px medium medium 1px;
padding: 7px;
}
.invoice thead th {
background: none repeat scroll 0 0 #EEEEEE;
font-weight: normal;
}
.invoice tbody th em {
display: block;
font-size: 85%;
font-weight: normal;
}
.invoice tbody th i {
font-style: normal;
font-weight: normal;
}
.invoice .description {
width: 75%;
}
.invoice .total {
border-right: 1px solid #CCCCCC;
padding-right: 10px;
text-align: right;
}
.invoice tfoot .last th, .invoice tfoot .last td, .invoice tbody .last td {
border-bottom: 1px solid #CCCCCC;
}
.invoice tfoot th, .invoice tfoot td {
border-top: 1px solid #CCCCCC;
}
.invoice .price, .invoice .quantity {
text-align: center;
}
.invoice tfoot th {
text-align: right;
}
#payment {
margin-top: 12px;
}
#payment .paging-context {
border-top: 1px dotted #CCCCCC;
margin-bottom: 17px;
padding-top: 10px !important;
}
#payment .section h3 {
font-size: 140%;
}
#payment .section div {
font-size: 90%;
}
#payment .desc {
font-size: 120%;
line-height: 140%;
padding: 0;
}
#payment .desc strong {
color: #888888;
display: block;
font-size: 10px;
font-weight: normal;
line-height: 150%;
}
#payment .desc img {
margin-bottom: -1px;
}
#payment .error .desc strong {
color: #DF0000;
font-size: 11px;
}
#shipSection input.checkbox {
width: 13px !important;
}
.ship {
display: block;
}
.same .ship {
display: none;
}
#shippingSame {
margin-top: -3px !important;
padding-bottom: 5px;
}
#shipSection .desc {
margin-top: -5px !important;
}
#ppSection, #ccSection {
border-bottom: 1px dotted #CCCCCC;
}
#ppSection .choice {
margin: -25px 0 0 23px;
padding: 0;
width: auto;
}
* html #ppSection .choice {
margin: -20px 0 0 23px;
}
#ppSection span.last {
margin: 0;
}
#ppSection span.first {
margin: 0 12px 0 0;
}
#ppSection img {
cursor: pointer;
}
.ppexpress #ccSection, .ppexpress #billSection, .ppexpress #shipSection, .ppexpress #invoiceSection, .ppexpress #submitFormButton {
display: none !important;
}
#paypalSubmit {
display: none;
}
.ppexpress #paypalSubmit {
display: inline;
}
.ppexpress #ppSection {
border: medium none;
}
.echeck #ccSection, .echeck #billSection, .echeck #shippingSame {
display: none !important;
}
.noecheck #ecSection {
display: none !important;
}
#ccSection, #billSection, #ecSection {
padding-bottom: 8px;
padding-top: 20px;
}
#shipSection {
border-top: 1px dotted #CCCCCC;
padding-top: 20px;
}
#shipSection div {
padding-bottom: 8px;
}
#invoiceSection {
border-top: 1px dotted #CCCCCC;
padding-bottom: 0;
padding-top: 15px;
}
#expMonth {
width: 94px;
}
#expYear {
width: 64px;
}
.checkNumbers {
border: 1px solid #B3C8D6;
margin-bottom: 10px;
width: 100%;
}
.routingNumber, .accountNumber {
background: none repeat scroll 0 0 #000000;
border-radius: 7px;
color: #FFFFFF;
display: block;
float: left;
font-size: 8px;
height: 14px;
line-height: 14px;
margin: 2px 4px -2px 0;
text-align: center;
width: 14px;
}
.routingNumber {
background: none repeat scroll 0 0 #CA2B0B;
}
.accountNumber {
background: none repeat scroll 0 0 #1751BC;
}
.checkNotice {
background: none repeat scroll 0 0 #EEEEEE;
border-radius: 14px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
margin: 7px 0 16px !important;
padding: 0 !important;
}
.checkNotice label {
margin: 6px 14px 10px;
}
#ccSection {
position: relative;
}
#ccSection img {
cursor: pointer;
}
* html #ccSection img, * html #ppSection img {
}
#cvc {
background: url("/images/ttclose.png") no-repeat scroll 95% 9px #222222;
border: 1px solid #000000;
border-radius: 15px;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
color: #FFFFFF;
cursor: pointer;
display: none;
float: none;
font-size: 80%;
line-height: 150%;
margin: -10px 0 0;
min-width: 0 !important;
padding: 12px 15px 12px 12px;
position: absolute;
right: -15px;
text-align: justify;
top: 100%;
width: 170px !important;
z-index: 1000;
}
.showCVC #cvc {
display: block;
}
* html .showCVC #country {
visibility: hidden;
}
#cvc h5 {
color: #F2EF8C;
font-size: 120%;
margin: 0;
padding: 0 0 4px;
}
#stripe {
color: #777777;
display: inline;
float: right;
font-size: 14px;
position: relative;
top: -22px;
width: auto;
}
#stripe a {
background: url("/images/payment/stripe.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border-bottom: 1px solid rgba(0, 0, 0, 0);
display: inline-block;
height: 20px;
margin: 0 7px -2px 2px;
position: relative;
text-decoration: none;
text-indent: -9000px;
top: -2px;
width: 49px;
}
#stripe a:hover {
border-bottom: 1px dotted #777777;
}
.hasCoupon table {
margin-bottom: 3px;
}
#couponSection li {
float: none;
text-align: right;
}
#couponSection label.desc {
font-size: 100% !important;
font-weight: normal;
margin: 1px 0 0;
text-align: right;
width: 75%;
}
#couponSection div {
display: inline-block;
float: right;
margin: 0;
width: 24%;
}
#coupon {
border-radius: 14px;
font-weight: bold;
margin-bottom: 10px;
padding-left: 5px;
width: 95%;
}
.error #coupon {
margin-bottom: 0 !important;
}
.error label.desc {
font-weight: bold !important;
}
#couponSection label.error {
color: #DF0000 !important;
font-size: 75%;
font-weight: normal !important;
margin-bottom: 6px;
}
.running li.section.first {
width: 68% !important;
}
li.total {
height: 0;
margin: 0;
padding: 0;
position: relative;
width: 100% !important;
}
#lola {
background: none repeat scroll 0 0 #E6E6E6;
border-radius: 7px;
display: block !important;
margin: 7px 0 0;
padding: 10px 12px 14px;
position: absolute;
right: 0;
top: 0;
width: 29%;
z-index: 100;
}
.embed #lola {
transition: margin 500ms ease 0s;
}
#lola table {
width: 100%;
}
#lola td {
text-align: right;
}
#lola tbody b {
float: left;
padding: 2px 0 0;
}
#lola tbody span {
float: right;
font-size: 135%;
font-weight: bold;
width: 72%;
}
#lola tbody td {
border-bottom: 1px solid #CCCCCC;
padding: 0 0 7px;
}
#lola tfoot th, #lola tfoot td {
font-size: 85%;
padding: 8px 0 0;
}
#lola tfoot td {
white-space: nowrap;
}
#lola tfoot th {
color: #696969;
text-align: left;
}
#lola tfoot tr.negAmount {
color: #FF0000;
}
.leftLabel li.total, .rightLabel li.total {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
.leftLabel #lola, .rightLabel #lola {
right: -3px;
width: 20% !important;
}
.leftLabel #lola tbody b, .rightLabel #lola tbody b {
font-size: 85%;
padding: 3px 0 0;
}
.leftLabel #lola tbody span, .rightLabel #lola tbody span {
font-size: 125%;
width: 65%;
}
.leftLabel #lola tfoot th, .leftLabel #lola tfoot td, .rightLabel #lola tfoot th, .rightLabel #lola tfoot td {
font-size: 75%;
}
.rtl #lola {
left: 0;
right: auto;
}
.rtl #lola tbody b, .rtl #lola tfoot th {
float: right;
}
.rtl #lola tbody span {
float: left;
text-align: left;
}
.rtl .invoice thead th, .rtl .invoice tbody th, .rtl .invoice tbody td, .rtl .invoice tfoot th {
border-right: 1px solid #CCCCCC;
}
.rtl .invoice .total {
border-left: 1px solid #CCCCCC;
border-right: medium none;
}
.rtl #payment .desc strong {
text-align: left;
width: auto;
}
.rtl #payment .desc strong img {
float: left;
margin: 1px 3px 0 0;
}
.rtl #ppSection .choice {
margin: -25px 23px 0 0;
}
* html .rtl #ppSection .choice {
margin: -20px 23px 0 0;
}
.rtl #ppSection span.first {
margin: 0 0 0 12px;
}
.rtl #cvc {
background-position: 5% 9px;
left: -15px;
right: auto;
}
.rtl .routingNumber, .rtl .accountNumber {
float: right;
margin: 2px 0 -2px 4px;
text-align: center !important;
}
@media print {
#public, h2 {
margin: 0;
}
#container {
border: medium none !important;
width: 100%;
}
#logo, form .buttons, #printPage, .icon {
display: none !important;
}
form.wufoo {
margin: 0;
padding: 0;
page-break-inside: auto;
}
form.wufoo .instruct {
display: block;
}
}
@media only screen and (max-width: 480px) {
html {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 0;
}
body {
margin: 0 0 15px !important;
}
#container, form li.focused {
border: medium none !important;
box-shadow: none !important;
}
#container, #footer {
margin: 0 auto !important;
width: 100%;
}
#stripe {
top: 7px;
}
}
.embed {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
overflow: hidden;
padding: 0 !important;
}
.embed #container {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: medium none !important;
box-shadow: none !important;
width: 100% !important;
}
.embed #logo {
display: none !important;
}
.embed form, .embed body {
margin: 0 !important;
}
.scroll {
overflow-y: auto !important;
}
.scroll {
overflow-x: hidden !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment