/* Reset CSS - scope limited to .wForm - based on YUI reset * -------------------------------------------------------- */ .wForm dl, .wForm dt, .wForm dd, .wForm ul, .wForm ol, .wForm li, .wForm div, .wForm th, .wForm h1, .wForm h2, .wForm h3, .wForm h4, .wForm h5, .wForm h6, .wForm pre, .wForm td, .wForm form, .wForm fieldset, .wForm input, .wForm textarea, .wForm p, .wForm blockquote { margin:0; padding:0; } .wForm table { border-collapse:collapse; border-spacing:0; } .wForm fieldset, .wForm img { border:0; } .wForm address, .wForm caption, .wForm cite, .wForm code, .wForm dfn,.wForm em, .wForm strong, .wForm th, .wForm var { font-style:normal; font-weight:normal; } .wForm ol, .wForm ul { list-style:none; } .wForm caption, .wForm th { text-align:left; } .wForm h1, .wForm h2, .wForm h3, .wForm h4, .wForm h5, .wForm h6 { font-size:100%; font-weight:normal; } .wForm q:before, .wForm q:after { content:''; } .wForm abbr, .wForm acronym { border:0; } /* Base based on YUI's CSS Foundation - scope limited to .wForm * ------------------------------------------------------------- */ .wForm h1 { /*18px via YUI Fonts CSS foundation*/ font-size:138.5%; } .wForm h2 { /*16px via YUI Fonts CSS foundation*/ font-size:123.1%; } .wForm h3 { /*14px via YUI Fonts CSS foundation*/ font-size:108%; } .wForm h1, .wForm h2, .wForm h3 { /* top & bottom margin based on font size */ margin:1em 0; } .wForm h1, .wForm h2, .wForm h3, .wForm h4, .wForm h5, .wForm h6, .wForm strong { /*bringing boldness back to headers and the strong element*/ font-weight:bold; } .wForm abbr, .wForm acronym { /*indicating to users that more info is available */ border-bottom:1px dotted #000; cursor:help; } .wForm em { /*bringing italics back to the em element*/ font-style:italic; } .wForm blockquote, .wForm ul, .wForm ol, .wForm dl { /*giving blockquotes and lists room to breath*/ margin:1em; } .wForm ol, .wForm ul, .wForm dl { /*bringing lists on to the page with breathing room */ margin-left:2em; } .wForm ol li { /*giving OL's LIs generated numbers*/ list-style: decimal outside; } .wForm ul li { /*giving UL's LIs generated disc markers*/ list-style: disc outside; } .wForm dl dd { /*giving UL's LIs generated numbers*/ margin-left:1em; } .wForm th, .wForm td { border: none; padding: 0; } .wForm th { /*distinguishing table headers from data cells*/ font-weight:bold; text-align:center; } .wForm caption { /*coordinated marking to match cell's padding*/ margin-bottom:.5em; /*centered so it doesn't blend in to other content*/ text-align:center; } .wForm p, .wForm fieldset, .wForm table { /*so things don't run into each other*/ margin-bottom:1em; } /* Now for the actual layout formatting. * ------------------------------------- */ .wForm { padding: 10px 15px; } /* default padding between form border and content */ /* Set an invisible border around the various form elements so we can highlight them without changing any dimensions. For instance to highlight a field that failed the input validation. */ .wForm h3, .wForm h4 { border: 2px solid transparent; padding: 2px; } .wForm .oneField { border: 2px solid transparent; padding: 2px 6px; } .wForm .oneFieldWrapper { display: inline-block; } .wForm .section { } /* Set a visible border on fieldset and a decent default padding. */ .wForm fieldset { border-width: 2px; border-style: solid; padding: 8px;} /* Vertical spacing */ .wForm fieldset, .wForm .htmlSection { margin-bottom: 1em; } .wForm .oneField {} .wForm table.columnLayout { margin-bottom: 0; /* override default table margin */ } /* LABELS------------------------------------------------------------------ */ .label { display: -moz-inline-box; /* For Firefox 2.x */ display: inline-block; } /* for Form Builder preview only. Firefox has difficulties making inline elements (label, span) contentEditable. So we use a
instead, and have it behave like a label. */ .wForm .preField { display: -moz-inline-box; /* For Firefox 2.x */ display: inline-block; } /* Label positionning, using the labelsAbove|labelsBelow|labelsLeftAligned|labelsRightAligned classes */ .wForm .labelsLeftAligned .preField { text-align: left; } .wForm .labelsRightAligned .preField { text-align: right; } .wForm .labelsAbove .preField { padding-bottom: 4px; } /* add 4px to match spacing of inline section's label with below field (which has a 2px border+2px padding) */ .wForm .labelsBelow .preField { padding-bottom: 4px; } /* add 4px to match spacing of inline section's label with below field (which has a 2px border+2px padding) */ .wForm .labelsHidden > .label, .wForm .labelsHidden > .oneFieldWrapper > .label { visibility: hidden;} /* div.oneFieldWrapper is only present in the form-builder for now */ .wForm .labelsRemoved > .label, .wForm .labelsRemoved > .oneFieldWrapper > .label { display: none; } /* div.oneFieldWrapper is only present in the form-builder for now */ /* Make sure our labels align correctly with the input when left/right aligned (input may occupy several vertical lines) */ .wForm label, .wForm .label { vertical-align: top; } .wForm label *, .wForm .label * { vertical-align: top; } /* bold, italic and underline content */ /* Label size. */ .wForm .preField { min-width: 200px; padding-right: 5px; /* allow 4px of extra right padding, so other section label can still align correctly when accounting for oneField extra padding+border */ } .wForm fieldset .preField { min-width: 190px; /* account for 10px of border+padding, maintains alignment with inputs outside of fieldset */ } .wForm fieldset fieldset .preField { min-width: 180px; /* account for 2x10px of border+padding */ } /* Label size when inside an inline section */ .wForm .inline .oneField .preField { min-width: 0; } /* Label spacing for radio & checkboxes */ .wForm form .choices { /* empty */ } .wForm .postField { margin-left: 4px; margin-right: 4px; } /* Wrapper around a radio or checkbox and its label. Display each choice on same line by default. */ .wForm form .oneChoice { display: inline-block; } /* Override choice alignment if oneChoicePerLine option is set (as a class on a parent element) */ .wForm form .vertical > .oneChoice { display: block; } /* Make sure radio/checkbox and its label stay together when a line wrap occurs. */ .wForm form .oneChoice { white-space: nowrap; } /* Allow radio/checkbox label to wrap if needed (see ticket #242) */ .wForm form .oneChoice label, .wForm form .oneChoice .label { white-space: normal; display: inline-block; } /* vertical-align: text-top; */ /* INPUT ------------------------------------------------------------------ */ /* Wrapper around the input and related content (hint, validation error message). Allows display of input on same line as label (for left/right aligned labels), while keeping related content flush against the input. */ .wForm .inputWrapper { display: -moz-inline-box; /* For Firefox 2.x */ display: inline-block; vertical-align: top; position: relative; } .wForm .inputWrapper .delimiter { display: inline; } .wForm .inputWrapper .delimiterBefore { padding-right: 4px; } .wForm .inputWrapper .delimiterAfter { padding-left: 4px; } .wForm input[type=text], .wForm input[type=time], .wForm input[type=number], .wForm input[type=url], .wForm input[type=email], .wForm textarea { border-top: 1px #acaeb4 solid; border-left: 1px #dde1e7 solid; border-right: 1px #dde1e7 solid; border-bottom: 1px #e3e9ef solid; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding: 2px; border-width: 1px; } .wForm select { margin-top:0 !important; border-top: 1px #acaeb4 solid; border-left: 1px #dde1e7 solid; border-right: 1px #dde1e7 solid; border-bottom: 1px #e3e9ef solid; border-radius: 2px; padding: 1px; border-width: 1px; } .wForm input[type=text]:hover, .wForm input[type=time], .wForm input[type=number]:hover, .wForm input[type=url]:hover, .wForm input[type=email]:hover, .wForm select:hover, .wForm textarea:hover, .wForm input[type=text]:focus, .wForm input[type=time], .wForm input[type=number]:focus, .wForm input[type=url]:focus, .wForm input[type=email]:focus, .wForm select:focus, .wForm textarea:focus { border-top: 1px #5794bf solid; border-left: 1px #c5daed solid; border-right: 1px #b7d5ea solid; border-bottom: 1px #c7e2f1 solid; } .wForm textarea { vertical-align: top; } /* SECTION ---------------------------------------------------------------- */ /* Multi-column section */ .wForm .columnLayout td { vertical-align: top; } /* Grid section */ .wForm .gridLayout { width: 100%; } .wForm .gridLayout td { vertical-align: top; } .wForm .gridLayout th { vertical-align: top; font-weight: normal; } .wForm .gridLayout .headerRow th { vertical-align: bottom; text-align: left; padding: 0 0 0 8px } /* Align section title like other labels */ .wForm .gridLayout .headerCol { text-align: left; } .wForm .gridLayout .headerCol > div { padding: 5px 2px 0 8px; } .wForm .labelsLeftAligned .gridLayout .headerCol { text-align: left; } .wForm .labelsRightAligned .gridLayout .headerCol { text-align: right; } /* Fields of inline sections are displayed on the same line. */ .wForm .inline div.oneField { display: inline-block; vertical-align: top; } /* Align title of inline section with other fields (min-width accounts for 2px border + 2px padding on following .oneField class, to match other label's 200px */ .wForm div.section > .preField { padding: 0 2px 0 8px; } .wForm .labelsRightAligned .inline .preField { padding-top:4px } /* align label vertically by accounting for following .oneField class adding 4px (border+padding) to line height. */ .wForm .labelsLeftAligned .inline .preField { padding-top:4px } /* align label vertically by accounting for following .oneField class adding 4px (border+padding) to line height. */ /* Matrix layout */ .wForm .matrixLayout { width: 100%; } /* Center checkbox/radio button in a matrix cell. */ .wForm .matrixLayout td { text-align: center; } /* Add padding on column headers (choice label) */ .wForm .matrixLayout tr.headerRow th { padding-left:8px; padding-right:8px; font-weight: normal; } /* Override font-weight and cell alignment for the first cell in a matrix row (contains question label). */ .wForm .matrixLayout th.headerCol { text-align: left; font-weight: normal; } /* Align question label like other fields using the .oneField class*/ .wForm .matrixLayout .label { padding: 2px 2px 2px 8px; } .wForm .labelsLeftAligned .matrixLayout .headerCol { text-align: left; } .wForm .labelsRightAligned .matrixLayout .headerCol { text-align: right; } /* Alternate table row in grid and matrix layouts */ .wForm .alternate-0 { background-color: rgba(0,0,0,.040); } .wForm .alternate-1 { background-color: rgba(0,0,0,.025); } /* HTML Section (aka Text/Image section) --------------------------------- */ .wForm .htmlSection { overflow:auto; border:2px solid transparent; padding: 2px 6px; } /* BUTTONS --------------------------------------------------------------- */ /* Align buttons with field labels (accounts for 2px left-border + 2px left-padding on .oneField class */ /* float: left ensures fix aligment issue with pagination buttons because of the way margins are collapsed between preceding form elements (e.g fieldset) */ .wForm .actions { border: 2px solid transparent; margin: 8px 0; padding: 10px 2px;/* float: left; */} /* Make submit/cancel buttons fairly large, set mouse pointer appropriately */ .wForm .primaryAction, .wForm .secondaryAction { padding: 4px 15px; cursor: pointer; } /* Spacing between buttons */ .wForm .secondaryAction { margin-right: 15px; } /* Paging behavior buttons */ .wForm form .wfPagingButtons { display: inline-block; border: 2px solid transparent; margin: 8px 15px 8px 0; padding: 10px 2px; float: left; width: auto; } .wForm .wfPagePreviousButton, .wForm .wfPageNextButton { padding: 4px 15px; cursor: pointer; } .wForm .wfPagePreviousButton { margin-right: 15px; } /* wFORMS REPEATABLE SECTION ---------------------------------------------- */ /* Repeated section (when not on a fieldset) */ .wForm div.repeat { } /* Removeable section (when not on a fieldset) */ .wForm div.removeable { } /* 'Repeat' Link (generated by the Repeat Behavior) */ .wForm .duplicateSpan { float: right; } .wForm .duplicateLink {} /* 'Remove' link (generated by the Repeat Behavior) */ .wForm .removeSpan { float: right; } .wForm .removeLink {} /* Repeat/Remove link when used in a table row */ .wForm td .duplicateSpan, .wForm td .removeSpan { line-height: 100%; display: inline; } /* FIELD HINTS ------------------------------------------------------------ */ /* default styling */ .wForm .field-hint .hint { opacity: 1; } .wForm .field-hint-inactive .hint { opacity: .5; } /* Displayed on the side (with or without focus) */ .wForm .hintsSide .field-hint, .wForm .hintsSide .field-hint-inactive { display: inline-block; vertical-align:top; white-space: normal !important; padding: 0 4px; } .wForm .hintsSide .field-hint .hint, .wForm .hintsSide .field-hint-inactive .hint { display: inline; } /* Displayed as a popup (with focus) */ .wForm .hintsTooltip .field-hint { display: block; position: absolute; z-index: 50; width: 180px; margin: 2px 0 0 10px; padding: 4px; background-color: #FFC; } .wForm .hintsTooltip .field-hint .hint { display: block; } /* Displayed as a popup (without focus = hidden) */ .wForm .hintsTooltip .field-hint-inactive { display: none; } /* Displayed under the input */ .wForm .hintsBelow .field-hint, .wForm .hintsBelow .field-hint-inactive { display: block; } /* Local override */ .wForm .oneField.hintsTooltip .field-hint { position: absolute; z-index: 50; display: block; width: 180px; margin: 2px 0 0 10px; padding: 4px; } .wForm .oneField.hintsTooltip .field-hint .hint { display: block; } .wForm .oneField.hintsTooltip .field-hint-inactive { display: none; } .wForm .oneField.hintsSide .field-hint, .wForm .oneField.hintsSide .field-hint-inactive { display: inline-block; vertical-align:top; white-space: normal !important; } .wForm .oneField.hintsBelow .field-hint, .wForm .oneField.hintsBelow .field-hint-inactive { display: block; } /* MISC. ------------------------------------------------------------------ */ /* Asterisk on required fields - provide sensible default color and size */ .wForm .required > .label:after { content: " *"; color: #F00; font-size: 90%; } .wForm .required > .oneFieldWrapper > .label:after { content: " *"; color: #F00; font-size: 90%; } /* div.oneFieldWrapper is only present in the form-builder for now */ .wFormContainer .errMsg { color: #CC3333; margin-top:2px; } .wFormContainer .errFld { border-color: rgba(255,0,0,0.04); } /* align form title with .oneField element */ .wFormContainer .wFormTitle { border: 2px solid transparent; padding: 2px 6px; } /* align support info with .oneField element */ .wFormContainer .supportInfo { font-size: 12px; border: 2px solid transparent; padding: 2px 17px; clear: left; } /* Make readonly calculated fields look like plain text */ .wForm .readonly { background-color: transparent !important; border: none !important; background-image: none !important; } /* JS ONLY CSS - Normally present is separate wforms-jsonly.css ------------- */ /* Handle conditional section visibility */ .wForm form .onstate-a, .wForm form .onstate-b, .wForm form .onstate-c, .wForm form .onstate-d, .wForm form .onstate-e, .wForm form .onstate-f, .wForm form .onstate-g, .wForm form .onstate-h, .wForm form .onstate-i, .wForm form .onstate-j, .wForm form .onstate-k, .wForm form .onstate-l, .wForm form .onstate-m, .wForm form .onstate-n, .wForm form .onstate-o, .wForm form .onstate-p, .wForm form .onstate-q, .wForm form .onstate-r, .wForm form .onstate-s, .wForm form .onstate-t, .wForm form .onstate-u, .wForm form .onstate-v, .wForm form .onstate-w, .wForm form .onstate-x, .wForm form .onstate-y, .wForm form .onstate-z, .wForm form .onstate-aa, .wForm form .onstate-ab, .wForm form .onstate-ac, .wForm form .onstate-ad,.wForm form .onstate-ae, .wForm form .onstate-af, .wForm form .onstate-ag, .wForm form .onstate-ah,.wForm form .onstate-ai, .wForm form .onstate-aj, .wForm form .onstate-ak, .wForm form .onstate-al,.wForm form .onstate-am, .wForm form .onstate-an, .wForm form .onstate-ao, .wForm form .onstate-ap,.wForm form .onstate-aq, .wForm form .onstate-ar, .wForm form .onstate-as, .wForm form .onstate-at,.wForm form .onstate-au, .wForm form .onstate-av, .wForm form .onstate-aw, .wForm form .onstate-ax,.wForm form .onstate-ay, .wForm form .onstate-az, .wForm form .onstate-ba, .wForm form .onstate-bb,.wForm form .onstate-bc, .wForm form .onstate-bd, .wForm form .onstate-be, .wForm form .onstate-bf,.wForm form .onstate-bg, .wForm form .onstate-bh, .wForm form .onstate-bi, .wForm form .onstate-bj,.wForm form .onstate-bk, .wForm form .onstate-bl { display: block !important; } /* offstate classes for the Switch Behavior are in wforms-jsonly.css */ /* Handle page visibility */ html .wForm form .wfPage, html .wForm form .wfHideSubmit { display: none !important; } html .wForm form .wfCurrentPage { display: block !important; } /* Auto Format related*/ .wForm .autoformatprompt .label{ color: #dc143c; } .wForm .autoformatprompt .delete{ color: #b0c4de; } .wForm .autoformatprompt .noinput{ color: #b0c4de; } .wForm .autoformatprompt .input{ font-weight: bold; } .wForm .autoformatprompt{ position: absolute; z-index: 126; padding: 3px 0px 0px 2px; white-space: nowrap; } .wForm .autoformatprompt-control{ background-color: transparent; position: relative; z-index: 127; } .wForm .autoformatprompt-hook{ z-index: 125; } /* "Response Submitted" confirmation page */ .wForm .wFormThankYou { } /* "Response Saved" confirmation page */ .wForm .wFormsCustomMessage { font-size: 22px; } .wForm .wFormsResumeInstructions li { font-size:16px; line-height:150%; } /* Responsive Design Elements, structure taken from http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ /* Smartphones in portrait and landscape ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Scales all text */ html { -webkit-text-size-adjust:110% } body { margin:0px !important } .wForm { width: 95% !important; margin:0px auto !important; padding:0px !important; } .wFormContainer { width: 95% !important; margin:0px auto !important; padding:0px !important; } .wForm .oneField { padding: 2px 0px !important; } .wForm input { font-size: 110%; } .wForm input[type="checkbox"] { width: 30px; height: 30px; } .wForm input[type="radio"] { width: 30px; height: 30px; } .wForm select { font-size: 100%; padding: 0 0 0 10px; } .wForm .labelsLeftAligned .preField, .wForm .labelsRightAligned .preField { text-align:left !important; display:block; } } /* Smartphones in portrait */ @media only screen and (max-width: 320px) { .wForm input, .wForm textarea { max-width: 260px !important ; } } /* Smartphones in landscape */ @media only screen and (max-width: 481px) { .wForm input, .wForm textarea { max-width: 440px !important; } } /* Tablets in portrait and landscape ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Scales all of the fonts on the page */ html {-webkit-text-size-adjust:110%} .wForm .oneField { padding: 2px 0px; } /* Ajusts the fontsize to increase the hit area for each input field */ .wForm input { font-size: 110%; } .wForm input[type="checkbox"] { width: 30px; height: 30px; } .wForm input[type="radio"] { width: 30px; height: 30px; } .wForm select { font-size: 100%; padding: 0 0 0 10px; } h3{ text-shadow: 0px 1px 1px #fff; } fieldset { -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; } .wForm form .actions .primaryAction { margin-top: 20px; } .wForm .yui-calendar{ font-size: 2em; } .wForm .yui-calendar .calheader{ line-height: 40px; } .wForm .yui-calendar .calnavleft { height: 30px; width: 40px; } .wForm .yui-calendar .calnavright { height: 30px; width: 40px; } .wForm .yui-calcontainer .close-icon { height: 30px; width: 40px; } } /* Tablets in landscape ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .wForm { margin:0px auto; padding:0px; } .wFormContainer { width: 770px; margin:0px auto; padding:20px; } .wForm .oneField { padding: 2px 0px; } } /* Tablets in portrait ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { .wForm { margin:0px auto; padding:0px; } .wFormContainer { width: 600px; margin:0px auto; padding:20px; } .wForm .oneField { padding: 2px 0px; } }