/* reset - dont change this */ .fm_formmasterForm *, .fm_formmasterForm *:after, .fm_formmasterForm *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } /*article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*/ /* Main Layout style for the Form*/ .content#formsMaster { margin: 0 auto; overflow: hidden; *overflow: hidden; } .description p { text-overflow: ellipsis; overflow: visible; max-width: 95%; -ms-word-break: keep-all; word-break: keep-all } .content#formsMaster #formsMaster { overflow: visible } /* adding in formsmaster into the CMS */ .content #formsMaster, #formsMaster.content { font-size: 1.125rem; } /* - see media query below for reset with PX values! .content #formsMaster, #formsMaster.content, #formsMaster.content p, #formsMaster .FormFieldLabel .formLabel, #formsMaster .FormInformText table td, #formsMaster .FormInformText table th */ .fm_formmasterForm { /*The width can be changed to suit page layout*/ margin: 0 0 0 0; padding: 0 0 0 0; } #formsMaster ol.formFields { /* reset default ol styles */ margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; /* customise this */ width: 100%; margin: 0 auto 1em auto; } #formsMaster ol.formFields li { /* customise this */ } /* form layouts with 2 columns */ #formsMaster .form2col ol.formFields li .left-col { display: inline-block; /* customise this */ text-align: left; /* min height a good idea once youve set the padding */ min-height: 21px; width: 32%; margin: 5px 0 0 0; padding: 5px 10px 5px 0px; } #formsMaster .form2col ol.formFields li .right-col { display: inline-block; /* customise this */ width: 66.6%; margin: 5px 0 0 0; padding: 5px 0 5px 10px; /* min height a good idea once youve set the padding */ min-height: 21px; } /* for tables that have spread sheet type layouts so need a full column */ #formsMaster .form2col ol.formFields li .full-col { display: block; /* customise this */ width: auto; margin: 5px 0 0 0; padding: 5px 0 5px 0; /* min height a good idea once youve set the padding */ min-height: 21px; } .full-col table { margin-bottom: 2em; border: none } .full-col table th { /* customise this */ text-align: left !important; font-weight: normal } .full-col table thead th { /* customise this */ padding-bottom: 10px; white-space: normal } .full-col table thead, .full-col table tfoot, .full-col table tr, .full-col table tr.even, .full-col table tr.alt, .full-col table tr:nth-of-type(even) { background: none; } /* form layouts with 1 column */ #formsMaster .form1col ol.formFields li { clear: both } #formsMaster .form1col ol.formFields li .left-col { display: block; width: 100%; /* customise this */ text-align: left; padding: 5px 0 5px 0px; } #formsMaster .form1col ol.formFields li .right-col, #formsMaster .form1col ol.formFields li .full-col { display: block; width: 100%; /* customise this */ padding: 5px 0 5px 0px; } .font-size2 #formsMaster input[type="text"], .font-size2 #formsMaster input[type="password"], .font-size2 #formsMaster input[type="date"], .font-size2 #formsMaster input[type="datetime"], .font-size2 #formsMaster input[type="datetime-local"], .font-size2 #formsMaster input[type="month"], .font-size2 #formsMaster input[type="week"], .font-size2 #formsMaster input[type="email"], .font-size2 #formsMaster input[type="number"], .font-size2 #formsMaster input[type="search"], .font-size2 #formsMaster input[type="tel"], .font-size2 #formsMaster input[type="time"], .font-size2 #formsMaster input[type="url"], .font-size2 #formsMaster input[type="file"], .font-size2 #formsMaster select, .font-size2 #formsMaster textarea, .font-size2 #formsMaster .FormFieldLabel .formLabel, .font-size2 #formsMaster .right-col .errorMessage, .font-size2 #formsMaster .FormInformText table tr th, .font-size2 #formsMaster .FormInformText table tr td, .font-size2 #formsMaster .form2col ol.formFields li .right-col, .font-size2 #formsMaster .bookTable th, .font-size2 #formsMaster .bookTable td { font-size: 24px !important; } .font-size2 #formsMaster .FormInformText table tr th, .font-size2 #formsMaster .FormInformText table tr td { white-space: normal !important } .font-size2 #formsMaster legend.FormQuestion, .font-size2 #formsMaster .FormInformText label, .font-size2 #formsMaster span.specialCharacter, .font-size2 #formsMaster .FormButton, .font-size2 #formsMaster span.formLabel, .font-size2 #formsMaster label, .font-size2 #formsMaster .formMap ul a, .font-size2 #formsMaster .ErrorText, .font-size2 #formsMaster .fieldHelp p, .font-size2 #formsMaster .fieldHelp, .font-size2 #formsMaster .description { font-size: 24px !important; } .font-size2 #formsMaster select, .font-size2 #formsMaster [type="text"], .font-size2 #formsMaster [type="password"], .font-size2 #formsMaster [type="date"], .font-size2 #formsMaster [type="datetime"], .font-size2 #formsMaster [type="datetime-local"], .font-size2 #formsMaster [type="month"], .font-size2 #formsMaster [type="week"], .font-size2 #formsMaster [type="email"], .font-size2 #formsMaster [type="number"], .font-size2 #formsMaster [type="search"], .font-size2 #formsMaster [type="tel"], .font-size2 #formsMaster [type="time"], .font-size2 #formsMaster [type="url"], .font-size2 #formsMaster [type="color"], .font-size2 #formsMaster textarea { height: 3.4375rem; } .font-size2 #formsMaster .description h1, .font-size2 #formsMaster .description h2, .font-size2 #formsMaster legend.FormQuestion { font-size: 36px !important; } .font-size2 #formsMaster .formMap .status { font-size: 18px !important; } /* Main form elements styles */ #formsMaster input[type="text"], #formsMaster input[type="password"], #formsMaster input[type="date"], #formsMaster input[type="datetime"], #formsMaster input[type="datetime-local"], #formsMaster input[type="month"], #formsMaster input[type="week"], #formsMaster input[type="email"], #formsMaster input[type="number"], #formsMaster input[type="search"], #formsMaster input[type="tel"], #formsMaster input[type="time"], #formsMaster input[type="url"], #formsMaster input[type="file"], #formsMaster select, #formsMaster textarea { /* customise this */ -webkit-appearance: none; -moz-appearance: none; padding: 6px 5px; border: 1px solid #ccc; min-height: 16px; width: auto; display: inline; /*font-size:14px;*/ border-radius: 0px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; transition-property: border-color, box-shadow; transition-duration: 0.15s, 0.15s; transition-timing-function: ease-in-out, ease-in-out; transition-delay: 0s, 0s; } /* FORMSMASTER form fields are set to a default width in the admin like size="30" by default so if it is less than size="30" then the system adds in another subclass autoWidth */ /* FOR DESIGNS THAT FIX THE WIDTH OF FORM FIELDS - you will have to make this work responsively if you use this too */ /* so the way to use this is - work out what the default size is on a text field and see what width that comes out as */ #formsMaster input[type="text"], #formsMaster input[type="email"], #formsMaster input[type="password"] { /* change width:270px; */ width: 400px; } #formsMaster select, #formsMaster textarea { /* change width:270px; */ width: 400px; } #formsMaster select[multiple] { } /* new */ #formsMaster .full-col input[type="text"], #formsMaster .full-col input[type="text"], #formsMaster .full-col select { width: 90% !important; } #formsMaster .form2col ol.formFields li .right-col input, #formsMaster .form1col ol.formFields li .right-col input { /*width:auto !important*/ } #formsMaster .form2col ol.formFields li .right-col input[type="checkbox"], #formsMaster .form1col ol.formFields li .right-col input[type="radio"] { width: auto !important } #formsMaster .autoWidth { width: auto !important; } /* reset foundation so down arrows dont flow over text */ #formsMaster select.autoWidth { display: inline; padding-right: 25px; } /* ENDS */ /* reset foundation size attribute on selects is a min of 135 height */ #formsMaster select[size] { height: auto !important } /* ENDS */ #formsMaster input[type="checkbox"], #formsMaster input[type="radio"] { margin-top: 5px; margin-right: 5px; width: auto !important; } /* optional but recommended focus styles */ #formsMaster input[type="text"]:focus, #formsMaster input[type="password"]:focus, #formsMaster input[type="date"]:focus, #formsMaster input[type="datetime"]:focus, #formsMaster input[type="datetime-local"]:focus, #formsMaster input[type="month"]:focus, #formsMaster input[type="week"]:focus, #formsMaster input[type="email"]:focus, #formsMaster input[type="number"]:focus, #formsMaster input[type="search"]:focus, #formsMaster input[type="tel"]:focus, #formsMaster input[type="time"]:focus, #formsMaster input[type="url"]:focus, #formsMaster select:focus, #formsMaster textarea:focus, #formsMaster input[type="checkbox"]:focus, #formsMaster input[type="radio"]:focus, #formsMaster .bookTable input[type=radio]:focus + label, #formsMaster .bookTable input[type=checkbox]:focus + label { /* customise this */ /*border-color: #66afe9; outline-width: 0px; outline-style: none; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);*/ } /* #formsMaster select option:focus {background-color: #225A8D !important; color: white;} */ /* overide defaults */ #formsMaster textarea { /* useful settings */ /* resize:none; resize:vertical */ } #formsMaster .FormButton, #formsMaster button, #formsMaster .button, .fileUpload, .fileUpload span, .formMapTrigger { width: auto; margin-bottom: 1em; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; white-space: nowrap; /* customise this */ padding: 6px 12px; font-size: 14px; line-height: 1.42857; /*color: #000;*/ } .fileUpload span { display: inline-block; margin-left: 0; } /*#formsMaster .FormButton:focus, #formsMaster button:focus { color: #ffffff; background-color: #286090; border-color: #122b40; } #formsMaster .FormButton:hover, #formsMaster button:hover { color: #ffffff; background-color: #286090; border-color: #204d74; } #formsMaster .FormButton[disabled], #formsMaster button[disabled] { color: #ffffff; background-color: #337ab7; border-color: #2e6da4; } */ /* pseudo classes for new wrapper arounf file upload */ /* apply .fileUpload to #formsMaster .FormButton above */ .fileUpload { position: relative; overflow: hidden; display: inline-block; margin-left: 0; padding-left: 0; float: left } .fileUpload input.FormField { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .psuedoFileName { display: block; position: relative; padding: 7px 0 7px 30px !important; font-size: 14px; line-height: 1.42857; border: none !important; background-color: transparent !important; box-shadow: none !important; margin-bottom: 1em; width: auto; overflow: visible; opacity: } .psuedoFileName.attached { background-image: url(../graphics/formsmaster/attached_32.png); background-repeat: no-repeat; background-position: 5px; background-size: 24px; padding: 7px 0 7px 30px; max-width: none; clear: left; float: left } .lt-ie9 .psuedoFileName.attached { background-image: url(../graphics/formsmaster/attached.gif); background-repeat: no-repeat; background-position: left; padding-left: 20px; } #formsMaster .floatLeft { float: left; clear: left } #formsMaster .clear { margin-bottom: 20px; } /* additional buttons tyles if you need them */ input[type="button"], input[type="reset"], input[type="submit"] { } /* additional specific button ids generated by the system - aslo in .button.success in default.css */ #fm_next { /* border-color:#4a831c; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(74, 131, 28, 0.1);*/ } #fm_next:hover { /*box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(74, 131, 28, 0.3);*/ } #fm_back { } #fm_reset { } #fm_printpreviewbutton { } #fm_save { } #formsMaster #fm_upload { } #formsMaster #fm_upload:hover { } /* tabular elements inside the right hand column */ #formsMaster .FormInformText table thead, #formsMaster .FormInformText table tbody, #formsMaster .FormInformText table tfoot { border: 0px; background-color: transparent } #formsMaster .FormInformText table { width: 100%; border-collapse: collapse; border-spacing: 0px; table-layout: fixed; border: 0px } #formsMaster .FormInformText table td, #formsMaster .FormInformText table th { padding-bottom: 2.5rem; background-color: transparent !important; background: none !important; font-size: inherit !important; } #formsMaster .FormInformText table td input { width: auto !important; margin-bottom: 0; } #formsMaster .FormInformText table td > *, #formsMaster .FormInformText table th > * { vertical-align: text-top } /* field sets int eh right hand column */ #formsMaster .FormInformText fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em } #formsMaster .FormInformText legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px } /* formsmaster WYSIWYG */ #formsMaster .description { margin-bottom: 20px; } /* customise this */ #formsMaster .description h1, #formsMaster h1 { /* customise this */ /*font-size: 30px; margin-top: 25px; margin-bottom: 30px; line-height: 33px;*/ } /* reste to get the button inline from the global clear on the first

*/ #formsMaster.content h1:first-of-type { clear: none } #formsMaster .description h2 { } #formsMaster .description h3 { } #formsMaster .description h4 { } #formsMaster .description ul, #formsMaster .description ol { margin: 1.25rem; } /* validation */ #formsMaster .ErrorText { /* customise this */ font-weight: normal; padding: 4px; } #formsMaster .ErrorText ul { padding-left: 0; } #formsMaster .ErrorText ul li { /* customise this */ color: #a94442; background: #f2dede; border: 1px solid #ebccd1; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 15px; margin-top: 10px; margin-bottom: 10px; list-style-type: none; } #formsMaster .ErrorText ul li a { background-image: url(../graphics/formsmaster/downArrow-dbaeae.png); background-repeat: no-repeat; background-size: 20px 20px; background-position: center left; padding-left: 30px; color: #a94442; text-decoration: none; display: block; } #formsMaster .ErrorText ul li a:hover { background-image: url(../graphics/formsmaster/downArrow-a94442.png); } #formsMaster .ErrorText ul li a:focus { background-image: url(../graphics/formsmaster/downArrow.png); } .lt-ie9 #formsMaster .ErrorText ul li a { background-image: url(../graphics/formsmaster/downArrow-a94442-legacy.png); } #formsMaster input.ErrorFormField, #formsMaster select.ErrorFormField { /* customise this */ border: 1px solid #ebccd1; /* changed this so that the placeholder becomes the repeated error */ /*color: #a94442;*/ } #formsMaster select.ErrorFormField { color: #a94442; } #formsMaster input.ErrorFormField::-webkit-input-placeholder { color: #a94442; font-weight: normal !important } #formsMaster input.ErrorFormField:-moz-placeholder { /* Firefox 18- */ color: #a94442; font-weight: normal !important } #formsMaster input.ErrorFormField::-moz-placeholder { /* Firefox 19+ */ color: #a94442; font-weight: normal !important } #formsMaster input.ErrorFormField:-ms-input-placeholder { color: #a94442; font-weight: normal !important; } #formsMaster .ErrorText p { color: #a94442; font-weight: bold; margin-top: 2rem; } #formsMaster .ErrorText ul { color: #000000; } #formsMaster .MandatoryFormField { /* customise this */ } /* images used as ticks or crosses */ #formsMaster .FormInformText img { vertical-align: top; } /*Error message text that appears in case of errors in the fields*/ #formsMaster .right-col .errorMessage, /* added in for mySouthwark */ .myCouncilForm .errorMessage { font-size: 14px; display: block; overflow: visible; /* change max-width: 270px; */ max-width: 400px; /*change this*/ color: #a94442; background: #f2dede; border: 1px solid #ebccd1; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; /*padding:5px 2%;*/ padding: 15px; margin-bottom: 20px; } .myCouncilForm .errorMessage { max-width: 100%; } /*Tooltip block styles--some of these defaults can be changed by the designer. This is indicated accordingly*/ #formsMaster .fieldHelp { /*change this*/ /* change max-width: 270px; */ max-width: 400px; padding: 5px 2% 10px 2%; margin-top: 0px; margin-bottom: 20px; background: #333333; color: #FFFFFF; position: relative; display: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #formsMaster .fieldHelp:after { bottom: 100%; left: 20px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(51, 51, 51, 0); border-bottom-color: #333333; border-width: 10px; margin-left: -10px; } #formsMaster.no-js .fieldHelp { display: block } #formsMaster li .fieldHelp h1, #formsMaster li .fieldHelp h2, #formsMaster li .fieldHelp p, #formsMaster li .fieldHelp a { padding: 5px 0; color: #FFFFFF; } /*Change these to suit*/ #formsMaster li .fieldHelp h1 { font-size: 24px; margin-top: 0; } #formsMaster li .fieldHelp h2 { font-size: 20px; } #formsMaster li .fieldHelp p, #formsMaster li .fieldHelp a { font-size: 0.875rem; font-weight: normal; line-height: 1.3; } #formsMaster li .fieldHelp span { text-decoration: none; font-weight: bold; } #formsMaster li .fieldHelp a { text-decoration: underline; /*change this*/ color: #fff; } #formsMaster li .fieldHelp ul li { list-style: none; background: none; } #formsMaster .formHelpIcon:active, #formsMaster .formHelpIcon:focus { /*Change this*/ border: 1px solid #102f69; } /*End the tooltip and error message warnings styling*/ /* Clearfix */ #formsMaster .formFields:after, #formsMaster .form-progress:after { content: ""; display: table; clear: both; } .clear { clear: both; } /* form questions are by default inside fieldsets */ #formsMaster fieldset.fieldGroup { /* reset the border */ border: none; /* customise this */ } #formsMaster legend.FormQuestion { display: block; width: 100%; /* customise this */ font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif; letter-spacing: normal; padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; color: #333; background-color: #F5F5F5; border: 1px solid #ccc } #formsMaster fieldset:first-of-type legend.FormQuestion { margin-top: 0 !important } #formsMaster .FormQuestion { font-weight: normal; } #formsMaster .FormQuestion p { font-weight: normal; } #formsMaster .FormFieldLabel, #formsMaster .full-col .FormInformText { vertical-align: top; } /* field labels and psuedo labels in the left column */ #formsMaster .FormFieldLabel .formLabel { display: inline-block; /* customise this */ font-weight: normal; /* best give this the same padding as any text inputs so it lines up*/ padding: 6px 12px 6px 0; /*font-size:14px;*/ white-space: normal !important; font-size: inherit } #formsMaster label { /* customise this */ font-weight: normal; } #formsMaster .form1col .FormFieldLabel .formLabel { /* customise this */ padding-left: 0; } .FormInformText label { font-weight: normal; } /* for when fields are replaced with strings */ .formString { display: inline-block; /* customise this */ padding:; color: #000 } /* 15/08/2016 issue when really long label string is applied */ .FormInformText input[type="checkbox"] + label, .FormInformText input[type="radio"] + label { max-width: 85%; vertical-align: text-top; } .formLabel.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; padding: 0 0 0 0 !important; } .formLabel.visuallyhidden.focusable:active, .formLabel.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } #formsMaster span.MandatorySign { /* customise this */ color: #ff0000; margin-left: 5px; font-weight: normal } #formsMaster span.specialCharacter { /* customise this */ font-weight: normal; font-size: 14px; vertical-align: middle !important; margin-right: 2px; margin-left: 2px; } /* added for table with spreadsheet and dynamic sum */ .full-col.FormInformText span.specialCharacter { margin: 8px 2px 0 0 !important; display: inline-block } #formsMaster .buttonGroup { /* customise this */ margin: 1em 0; } #formsMaster .buttonGroup input, #formsMaster .buttonGroup button { margin-right: 1em; } #formsMaster .buttonGroup .alignLeft { float: left; } #formsMaster .buttonGroup .alignRight { float: right; margin-left: 1em; margin-right: 0; } #formsMaster .buttonGroup .clear { display: block; clear: both; height: 0px; } /* custom style for client align maiden button left inside a 'buttonGroup' - overrides the default inline overrides like '.alignRight' */ #formsMaster .buttonGroup .FormButton:only-of-type { float: left !important; margin-left: 0 !important } /* #fm_next */ /* customise these */ /*#formsMaster .formErrorIcon, #formsMaster .formHelpIcon, #formsMaster .formSuccessIcon*/ .formErrorIcon, .formHelpIcon, .formSuccessIcon { display: inline-block; width: 36px; height: 36px; vertical-align: top; background-repeat: no-repeat; background-position: center center; background-size: 80%; } .font-size2 .formErrorIcon, .font-size2 .formHelpIcon, .font-size2 .formSuccessIcon { vertical-align: middle; } /*#formsMaster .formErrorIcon,*/ .formErrorIcon { background-image: url(../graphics/formsmaster/cross-a94442.png) } /*#formsMaster .formHelpIcon,*/ .formHelpIcon { background-image: url(../graphics/formsmaster/i_help_small.png); cursor: pointer; } #formsMaster .formHelpIcon span.formHelpIconString { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } /*#formsMaster .formSuccessIcon,*/ .formSuccessIcon { background-image: url(../graphics/formsmaster/tick-5CB85C.png) } /*.lt-ie9 #formsMaster .formErrorIcon,*/ .lt-ie9 .formErrorIcon { background-image: url(../graphics/formsmaster/cross-a94442.gif) } /*.lt-ie9 #formsMaster .formHelpIcon,*/ .lt-ie9 .formHelpIcon { background-image: url(../graphics/formsmaster/i_help_small.gif) } /*.lt-ie9 #formsMaster .formSuccessIcon*/ .lt-ie9 .formSuccessIcon { background-image: url(../graphics/formsmaster/tick-5CB85C.gif) } /* images inside label column */ #formsMaster .form2col ol.formFields li .left-col figure { width: 100%; line-height: normal !important } #formsMaster .form2col ol.formFields li .left-col img { width: inherit !important; } #formsMaster .form2col ol.formFields li .left-col figure .formLabel { display: block !important; } #formsMaster .form1col ol.formFields li .left-col figure { width: auto; line-height: normal !important } #formsMaster .form1col ol.formFields li .left-col img { width: auto; display: inline-block; } #formsMaster .form1col ol.formFields li .left-col figure .formLabel { display: block !important; } /* customise this */ #formsMaster ol.formFields li .left-col figure { border: solid 4px #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 10px 10px 0 10px; } #formsMaster ol.formFields li .left-col figure figcaption { padding: 0 0px 10px 0px; } #formsMaster ol.formFields li .left-col img { border-radius: 5px; } #formsMaster .form2col ol.formFields li .left-col img { margin: 0 0 10px 0 } #formsMaster .form1col ol.formFields li .left-col img { margin: 0 10px 10px 0 } #formsMaster ol.formFields li .left-col figure .formLabel { display: block !important; padding-top: 0; } /* book table */ #formsMaster .bookTable { width: 100%; } #formsMaster .bookTable th, #formsMaster .bookTable td { text-align: left; padding: 10px; width: 33%; } #formsMaster .bookTable input[type=radio], #formsMaster .bookTable input[type=checkbox] { opacity: 0; visibility: 0; zoom: 1; filter: alpha(opacity=0); position: absolute; text-indent: -9999px; } .lt-ie9 #formsMaster .bookTable input[type=radio]:focus, .lt-ie9 #formsMaster .bookTable input[type=checkbox]:focus { outline: none } #formsMaster .bookTable input[type=radio] + label, #formsMaster .bookTable input[type=checkbox] + label { display: inline-block; margin: -2px !important; padding: 4px 12px !important; background-color: #a94442; color: #FFF; cursor: pointer; display: block; text-align: center; border-radius: 5px; } #formsMaster .bookTable input[type=radio] + label:hover, #formsMaster .bookTable input[type=checkbox] + label:hover { background-color: #5cb85c; } #formsMaster .bookTable input[type=radio] + label .positive, #formsMaster .bookTable input[type=checkbox] + label .positive { display: none; } #formsMaster .bookTable input[type=radio]:checked + label, #formsMaster .bookTable input[type=checkbox]:checked + label { background-image: none; background-color: #339933; box-shadow: none !important } #formsMaster .bookTable input[type=radio]:checked + label:hover, #formsMaster .bookTable input[type=checkbox]:checked + label:hover { background-color: #449d44; } #formsMaster .bookTable input[type=radio]:checked + label .negative, #formsMaster .bookTable input[type=checkbox]:checked + label .negative { display: none; } #formsMaster .bookTable input[type=radio]:checked + label .positive, #formsMaster .bookTable input[type=checkbox]:checked + label .positive { display: block; } #formsMaster .showNext { display: block; padding: 0px; line-height: 33px; font-size: 18px; } #formsMaster .showNext .icon { display: inline-block; width: 33px; height: 33px; margin-right: 10px; background-image: url(../graphics/formsmaster/downArrow.png); background-size: cover; vertical-align: middle; } .lt-ie9 #formsMaster .showNext .icon { background-image: url(../graphics/formsmaster/downArrow-legacy.png); } #formsMaster .datePanel { padding: 0; } #formsMaster .datePanel ol { list-style-type: none } #formsMaster .datePanel a { padding: 10px; display: block; text-decoration: none !important; } #formsMaster .datePanel a span { display: inline-block; width: 50%; text-decoration: inherit !important; vertical-align: middle } #formsMaster .extraDates li a { box-sizing: border-box; padding-left: 50px; background-image: url(../graphics/formsmaster/blue-arrow-right.png); background-repeat: no-repeat; background-position: 10px center; background-size: 20px 20px; } .lt-ie9 #formsMaster .extraDates li a { background-image: url(../graphics/formsmaster/blue-arrow-right.gif); background-repeat: no-repeat; } #formsMaster .extraDates li a:hover { background-position: 12px center; } /* theme */ #formsMaster .bookTable { border: 1px solid #EDEDED } #formsMaster .bookTable th { background-color: #EDEDED; } #formsMaster .bookTable td { border-bottom: 1px dotted #EDEDED; } #formsMaster .showNext { padding: 0 0 0 0; color: #74736E; text-decoration: none; background-color: #EDEDED } .datePanel { border: 1px solid #EDEDED; border-top: 0px; margin-bottom: 20px; } /* PROGRESS BAR STYLING */ #formsMaster .form-progress { margin: 1em 0; } #formsMaster .form-progress p { font-family: 'Roboto',tahoma,verdana,helvetica,arial,sans-serif; margin-bottom: 1em; font-size: 1em; color: #555555; font-weight: 700; font-weight: strong; } #formsMaster .fade { opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } #formsMaster .fade.in { opacity: 1; } @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-moz-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-o-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } #formsMaster .progress { height: 24px; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 5px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } /* visually hidden integer */ #formsMaster .progress .hideThis { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } #formsMaster .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; color: #ffffff; text-align: center; background-color: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-transition: width 0.6s ease; transition: width 0.6s ease; } #formsMaster .progress-striped .progress-bar { background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; } #formsMaster .progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } #formsMaster .progress-bar-approve { background-color: #6ABA6D; border-radius: 5px; } #formsMaster .progress-striped .progress-bar-approve { background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } #formsMaster .progress-bar-info { background-color: #5bc0de; } #formsMaster .progress-striped .progress-bar-info { background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } #formsMaster .progress-bar-warning { background-color: #f0ad4e; } #formsMaster .progress-striped .progress-bar-warning { background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } #formsMaster .progress-bar-danger { background-color: #d9534f; } #formsMaster .progress-striped .progress-bar-danger { background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } /* END PROGRESS BAR STYLES */ /* progress widths */ #formsMaster [class*='col-'] { float: left; padding: 0.3em; } /* Floats last ".col-" to the right */ #formsMaster [class*='col-']:last-of-type { float: right } #formsMaster .col-4 { width: 25% } #formsMaster .col-5 { width: 20% } #formsMaster .col-10 { width: 10% } /*Progress bar last child needs to be right aligned*/ /* .col-5 {text-align: right;} */ /* .col-5:first-child{text-align: left} */ #fm_progressbarpercent .col-5 .segment25, #fm_progressbarpercent .col-5 .segment50, #fm_progressbarpercent .col-5 .segment75 { text-align: right } #fm_progressbarpercent .col-5:first-child { text-align: left } #fm_progressbarpercent .col-10 { text-align: right } /* Form Map */ .formMapTrigger { font-size: 18px; display: inline-block; padding: 10px 15px 10px 15px; float: right; margin-top: 30px; margin-right: 15px; text-decoration: none !important; /**/ position: relative; z-index: 1; border-color: #dddcd9 !important; color: #666 !important /* */ } .formMapTrigger .visuallyhidden, .formMapTrigger.active .visuallyhidden { display: inline-block; vertical-align: text-bottom; position: relative; width: 26px; height: 26px; left: 0; top: 0; background-size: cover !important; background: url(../graphics/formsmaster/compass-active.png) no-repeat; overflow: visible; clip: inherit; margin: 0 5px 0 0 !important } .lt-ie9 .formMapTrigger .visuallyhidden, .lt-ie9 .formMapTrigger.active .visuallyhidden { background: url(../graphics/formsmaster/compass-active.gif) no-repeat; } .formMapTrigger.active { border-radius: 0 0 5px 5px; border-top: 1px solid #fff !important; margin-top: -42px; color: #666; background: #fff; } .formMapTrigger.active:hover { background: #F1F0ED; } .formMapTrigger.active .visuallyhidden { background: url(../graphics/formsmaster/compass.png) no-repeat; } .lt-ie9 .formMapTrigger.active .visuallyhidden { background: url(../graphics/formsmaster/compass.gif) no-repeat; } .formMap { outline: none; border-bottom: 1px solid #dddcd9; margin-bottom: 40px; position: relative; z-index: 1; } .formMap ul { list-style: none; margin: 0; padding: 0; } .formMap ul a { display: block; padding: 20px 50px 20px 50px; border-right: 1px solid #dddcd9; border-bottom: 1px solid #dddcd9; border-left: 1px solid #dddcd9; font-size: 18px; text-decoration: none; } .formMap ul a.last { border-bottom: 0; } .formMap ul a.current { position: relative; border-right: 0px; border-left: 0px; } .formMap ul a.current:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 35px 0 35px 25px; border-color: transparent transparent transparent #fff; display: block; position: absolute; left: 0; top: 0; } .formMap ul a.current:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 35px 25px 35px 0; border-color: transparent #fff transparent transparent; display: block; position: absolute; right: 0; top: 0; } .formMap ul a:hover { background: #f1f0ed; } .formMap .status { color: #737373; width: 100px; margin-left: 15px; font-size: 14px; display: inline-block; } .formMap .current .status, .formMap .current, .formMap ul a.current:hover { color: #333; background: #E9ECEE; } .formMap h1, .formMap p { padding: 20px 0; border-bottom: 1px solid #dddcd9; font-weight: normal; } .formMap h1 { font-size: 28px; } .formMap p { margin: 0 0 0 0; } .formMap p small { font-size: 1em } .formMap .statusStarted, .formMap .statusCompleted, .formMap .statusNotRequired, .formMap .statusIncomplete { display: inline-block; width: 22px; height: 22px; border-radius: 1000px; margin-right: 10px; margin-bottom: -5px; } .formMap .statusStarted { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5dd58+0,ffc704+100 */ background: rgb(245,221,88); /* Old browsers */ background: -moz-linear-gradient(top, rgba(245,221,88,1) 0%, rgba(255,199,4,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,221,88,1)), color-stop(100%,rgba(255,199,4,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(245,221,88,1) 0%,rgba(255,199,4,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(245,221,88,1) 0%,rgba(255,199,4,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(245,221,88,1) 0%,rgba(255,199,4,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(245,221,88,1) 0%,rgba(255,199,4,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5dd58', endColorstr='#ffc704',GradientType=0 ); /* IE6-9 */ border: 1px solid #bb9b5c; } .formMap .statusCompleted { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8ad950+0,61a739+100 */ background: rgb(138,217,80); /* Old browsers */ background: -moz-linear-gradient(top, rgba(138,217,80,1) 0%, rgba(97,167,57,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(138,217,80,1)), color-stop(100%,rgba(97,167,57,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(138,217,80,1) 0%,rgba(97,167,57,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(138,217,80,1) 0%,rgba(97,167,57,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(138,217,80,1) 0%,rgba(97,167,57,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(138,217,80,1) 0%,rgba(97,167,57,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ad950', endColorstr='#61a739',GradientType=0 ); /* IE6-9 */ border: 1px solid #60a235; } .formMap .statusIncomplete { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#da2a2c+0,be2024+100 */ background: rgb(218,42,44); /* Old browsers */ background: -moz-linear-gradient(top, rgba(218,42,44,1) 0%, rgba(190,32,36,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(218,42,44,1)), color-stop(100%,rgba(190,32,36,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(218,42,44,1) 0%,rgba(190,32,36,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(218,42,44,1) 0%,rgba(190,32,36,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(218,42,44,1) 0%,rgba(190,32,36,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(218,42,44,1) 0%,rgba(190,32,36,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da2a2c', endColorstr='#be2024',GradientType=0 ); /* IE6-9 */ border: 1px solid #943343; } .formMap .statusNotRequired { background: #fff; border: 1px solid #ccc; } /* Landscape mobile & down */ @media only screen and (max-width: 320px) { /* form layouts with 2 columns */ #formsMaster .form2col ol.formFields li .left-col { display: block; width: 100%; /* customise this */ text-align: left; padding: 5px 0 5px 0px; } #formsMaster .form2col ol.formFields li .right-col { display: block; width: 100%; /* customise this */ padding: 5px 10px 5px 0px; } /* FOR DESIGNS THAT FIX THE WIDTH OF FORM FIELDS - you will have to make this work responsively if you use this too */ /* so the way to use this is - work out what the default size is on a text field and see aht width that comes out as */ #formsMaster input[type="text"], #formsMaster input[type="email"], #formsMaster input[type="password"], #formsMaster select, #formsMaster textarea { max-width: auto; } #formsMaster select[multiple] { } /* new */ #formsMaster .full-col input[type="text"], #formsMaster .full-col select { width: 90% !important; } #formsMaster .form2col ol.formFields li .right-col input, #formsMaster .form1col ol.formFields li .right-col input, #formsMaster .form2col ol.formFields li .right-col select, #formsMaster .form1col ol.formFields li .right-col select, #formsMaster .form2col ol.formFields li .right-col textarea, #formsMaster .form1col ol.formFields li .right-col textarea { width: 85%; } .full-col table { font-size: 12px } .full-col table td, .full-col table th { padding-bottom: 20px } .full-col table thead th { white-space: normal } #formsMaster select, #formsMaster textarea, #formsMaster input.autoWidth { max-width: auto !important; } #formsMaster .fieldHelp, #formsMaster .errorMessage { max-width: auto !important; } /* images inside label column */ #formsMaster .form1col ol.formFields li .left-col figure { width: 100%; line-height: normal !important } #formsMaster .form1col ol.formFields li .left-col img { width: inherit !important; } #formsMaster .form1col ol.formFields li .left-col img { margin: 0 0 10px 0 !important; } /* ENDS */ .col-4, .col-5, .col-10 { width: 20%; } .left-col { text-align: left; } .col-5 { width: 20%; } .col-10 { text-align: right } .progress-extended { display: none; } /* bookTable */ #formsMaster .bookTable, #formsMaster .datePanel { font-size: 14px; } #formsMaster .datePanel a span { display: block; width: 100%; } .formMap ul a.current:before, .formMap ul a.current:after { border: none; } #fm_next, #fm_back, #fm_reset, #fm_printpreviewbutton, #fm_save { width: 100% !important; } } /*@media only screen and (max-width: 600px) { #formsMaster input[type="text"], #formsMaster input[type="email"], #formsMaster input[type="password"] { max-width:auto;} #formsMaster .form2col ol.formFields li .right-col input , #formsMaster .form1col ol.formFields li .right-col input { width:85%; } #formsMaster select, #formsMaster textarea, #formsMaster input.autoWidth { max-width:auto !important; } #formsMaster .fieldHelp, #formsMaster .errorMessage {max-width: auto !important;} }*/ @media only screen and (min-width: 321px) and (max-width: 600px) { /* southwark only */ .content #formsMaster, #formsMaster.content, #formsMaster.content p, #formsMaster .FormFieldLabel .formLabel, #formsMaster .FormInformText table td, #formsMaster .FormInformText table th { font-size: 16px !important; } /* form layouts with 2 columns */ #formsMaster .form2col ol.formFields li .left-col { display: block; width: 100%; /* customise this */ text-align: left; padding: 5px 0 5px 0px; } #formsMaster .form2col ol.formFields li .right-col { display: block; width: 100%; /* customise this */ padding: 5px 0 5px 0px; } /* FOR DESIGNS THAT FIX THE WIDTH OF FORM FIELDS - you will have to make this work responsively if you use this too */ /* so the way to use this is - work out what the default size is on a text field and see aht width that comes out as */ #formsMaster input[type="text"], #formsMaster input[type="email"], #formsMaster input[type="password"], #formsMaster select, #formsMaster textarea { max-width: auto; } #formsMaster select[multiple] { } /* new */ #formsMaster .full-col input[type="text"], #formsMaster .full-col select { width: 90% !important; } #formsMaster .form2col ol.formFields li .right-col input, #formsMaster .form1col ol.formFields li .right-col input { width: 85%; } #formsMaster select, #formsMaster textarea { width: 85% !important; max-width: auto !important; } #formsMaster input.autoWidth { width: auto !important } #formsMaster .fieldHelp, #formsMaster .errorMessage { max-width: inherit !important; width: 85% !important; } /* images inside label column */ #formsMaster .form1col ol.formFields li .left-col figure { width: 100%; line-height: normal !important } #formsMaster .form1col ol.formFields li .left-col img { width: inherit !important; } #formsMaster .form1col ol.formFields li .left-col img { margin: 0 0 10px 0 !important; } /* ENDS */ .col-4, .col-5, .col-10 { width: 20%; } .left-col { text-align: left; } .col-10 { text-align: right } .progress-extended { display: none; } .formMapTrigger { width: 100%; margin-right: 0; border-top-color: #dddcd9 !important } .formMap .statusWrapper { width: 100%; display: block } .formMap ul a.current:before, .formMap ul a.current:after { border: none; } } @media only screen and (min-width: 601px) { #formsMaster .form2col ol.formFields li .left-col { padding: 5px 0 5px 10px; } #formsMaster .form2col ol.formFields li .right-col { padding: 5px 0 5px 10px; } } @media only all and (min-width: 768px) and (max-width: 959px) { /* form layouts with 2 columns */ #formsMaster .form2col ol.formFields li .left-col { /*display: block; width:100%;*/ /* customise this */ text-align: left; padding: 5px 0 5px 0px; } #formsMaster .form2col ol.formFields li .right-col { /*display: block; width:100%;*/ /* customise this */ padding: 5px 0 5px 10px; } #formsMaster input[type="text"], #formsMaster input[type="email"], #formsMaster input[type="password"], #formsMaster select, #formsMaster textarea { /* change width:270px; */ width: 400px; } #formsMaster select[multiple] { } #formsMaster .right-col .errorMessage, #formsMaster .fieldHelp { /* change max-width: 270px; */ max-width: 400px; } #formsMaster .form2col ol.formFields li .right-col input, #formsMaster .form1col ol.formFields li .right-col input { /*width:auto !important*/ } #formsMaster .form2col ol.formFields li .right-col input[type="checkbox"], #formsMaster .form1col ol.formFields li .right-col input[type="radio"] { width: auto !important } #formsMaster .autoWidth { width: auto !important; } /* ENDS */ .col-4, .col-5, .col-10 { width: 20% } .left-col, { text-align: right; } .col-10 { text-align: right } } @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) { /* form layouts with 2 columns */ #formsMaster .form2col ol.formFields li .left-col { display: block; width: 100%; /* customise this */ text-align: left; padding: 5px 0 5px 10px; } #formsMaster .form2col ol.formFields li .right-col { display: block; width: 100%; /* customise this */ padding: 5px 0 5px 10px; } /* FOR DESIGNS THAT FIX THE WIDTH OF FORM FIELDS - you will have to make this work responsively if you use this too */ /* so the way to use this is - work out what the default size is on a text field and see aht width that comes out as */ #formsMaster input[type="text"], #formsMaster input[type="email"], #formsMaster input[type="password"], #formsMaster select, #formsMaster textarea { width: auto; } #formsMaster select[multiple] { } /* new */ #formsMaster .full-col input[type="text"], #formsMaster .full-col select { width: 90% !important; } #formsMaster .form2col ol.formFields li .right-col input, #formsMaster .form1col ol.formFields li .right-col input { width: auto !important; } #formsMaster input.autoWidth { width: auto; } /* ENDS */ .col-4, .col-5, .col-10 { width: 20% } .left-col { text-align: right; } .col-10 { text-align: right } } @media only screen and (min-width: 960px) and (max-width: 1024px) { /* form layouts with 2 columns */ #formsMaster .form2col ol.formFields li .left-col { /* customise this */ text-align: left; padding: 5px 0 5px 10px; } #formsMaster .form2col ol.formFields li .right-col { /* customise this */ padding: 5px 0 5px 10px; } /* FOR DESIGNS THAT FIX THE WIDTH OF FORM FIELDS - you will have to make this work responsively if you use this too */ /* so the way to use this is - work out what the default size is on a text field and see aht width that comes out as */ #formsMaster input[type="text"], #formsMaster input[type="email"], #formsMaster input[type="password"], #formsMaster select, #formsMaster textarea { width: 270px; } #formsMaster select[multiple] { } /* new */ #formsMaster .full-col input[type="text"], #formsMaster .full-col select { width: 90% !important; } #formsMaster .form2col ol.formFields li .right-col input, #formsMaster .form1col ol.formFields li .right-col input { /*width:auto !important*/ } #formsMaster .form2col ol.formFields li .right-col input[type="checkbox"], #formsMaster .form1col ol.formFields li .right-col input[type="radio"] { width: auto !important } #formsMaster .autoWidth { width: auto !important; } /* ENDS */ .col-4, .col-5, .col-10 { width: 20% } } .weblabs { float: left; clear: both; margin-top: 10px; font-size: 12px; } .weblabs a { color: #485367 !important; } /* contrast and large font size */ body.contrastView .formErrorIcon { background-image: url(../graphics/formsmaster/cross-contrast.png) } body.contrastView .formHelpIcon { background-image: url(../graphics/formsmaster/i_help_small-contrast.png); cursor: pointer; } body.contrastView .formSuccessIcon { background-image: url(../graphics/formsmaster/tick-contrast.png) } .lt-ie9 body.contrastView .formErrorIcon { background-image: url(../graphics/formsmaster/cross-contrast.gif) } .lt-ie9 body.contrastView .formHelpIcon { background-image: url(../graphics/formsmaster/i_help_small-contrast.gif) } .lt-ie9 body.contrastView .formSuccessIcon { background-image: url(../graphics/formsmaster/tick-contrast.gif) } body.contrastView #formsMaster .right-col .errorMessage { background-color: #FFFF00; color: #000 !important; border-color: transparent; } body.contrastView #formsMaster .ErrorText p, body.contrastView #formsMaster .form-progress p, body.contrastView #formsMaster li .fieldHelp h1, body.contrastView #formsMaster li .fieldHelp h2, body.contrastView #formsMaster li .fieldHelp p { color: #FFFF00; } body.contrastView #formsMaster span.MandatorySign { color: #00FFFF; } body.contrastView #formsMaster .FormInformText fieldset, body.contrastView .formMap h1, body.contrastView .formMap p, body.contrastView #formsMaster legend.FormQuestion, body.contrastView #formsMaster .datePanel, body.contrastView .formMap, body.contrastView .formMap ul a { border-color: #555555; } body.contrastView #formsMaster legend.FormQuestion, body.contrastView #formsMaster .bookTable th { background-color: #1B1B1B; color: #ffff00; } body.contrastView #formsMaster .bookTable input[type="radio"] + label, body.contrastView #formsMaster .bookTable input[type="checkbox"] + label, body.contrastView #formsMaster .datePanel a.showNext, body.contrastView .formMap ul a { background-color: #00FFFF !important; color: #000 !important } body.contrastView #formsMaster .bookTable input[type="radio"] + label:hover, body.contrastView #formsMaster .bookTable input[type="checkbox"] + label:hover, body.contrastView #formsMaster .bookTable input[type=radio]:checked + label, body.contrastView #formsMaster .bookTable input[type=checkbox]:checked + label, body.contrastView #formsMaster .datePanel a.showNext:hover, body.contrastView .formMap ul a:hover, body.contrastView .formMap ul a.current { background-color: #0CCBCE !important; } body.contrastView .formMap a .status { background-color: transparent; color: #000 !important } body.contrastView #formsMaster .ErrorText ul li { background-color: #ffff00 !important; color: #000 !important; border-color: transparent !important } body.contrastView #formsMaster .ErrorText ul li a { color: #000 !important; background-color: transparent !important } body.font-size2 .formMap ul a.current:before { border-width: 40px 0 40px 35px; } body.font-size2 .formMap ul a.current:after { border-width: 40px 35px 40px 0; } body.contrastView .formMap ul a.current:after { border-color: transparent #000 transparent transparent; } body.contrastView .formMap ul a.current:before { border-color: transparent transparent transparent #000; } body.contrastView .formMap ul a.current:after { border-color: transparent #000 transparent transparent; }