or tags, 5. wdt assumes the user has an understanding of basic css selectors and their use (for example, some rules can only be used to style block level (not inline) elements. Below is a brief explanation of all formBUILDER rules followed by the actual rules. ============================================================================================*/ /*======================== L A Y O U T R U L E S ====================================== body - sets style properties for and decendent elements #formshell - sets form width and centers it on the screen h6 - redefines

for use as section heading w/ full bottom border fieldset - sets left and right padding for regular
s fieldset.break - adds automatic print page break before current
.fbrow - container for each row in the form .submitrow - container for submit / reset buttons tt - redefines element - used for field labels tt.leftXXX - increase left padding for field label containers tt.widthXXX - sets width for field label containers tt.widthXXXright - sets width and alignment (right) for field label containers tt.cl - forces field label to start on a new row div.column - creates column "buckets" for headings and stacked fields div.collabel - sets style properties for column row labels div.colhead - sets style properties for column headings input.cols - sets style properties for stacked fields in columns input.collabel - alternative layout for column labels using read only element input.main - sets style properties for text inside elements not in columns div.fb - container for formBUILDER logo/link div.xhtml - container for xhtml logo/link ==============================================================================================/ /======================== T Y P O G R A P H Y / C O L O R R U L E S ===================== h1, h2 - redefines and elements - used as centered form titles legend - sets style properties for elements (inside ) p - redefines styles properties for elements - used as form text input - sets style properties for checkbox & radio button elements input.send - sets spacing between submit and reset buttons input.focus - sets background color in Netscape upon field focus .nobgafter - sets style properties for left label checkboxes/radio buttons .nobgbefore - sets style properties for right label checkboxes/radio buttons select - sets style properties for field elements textarea.fsizeXXX - sets font size and height for 1 to 6 row <textarea>s .border - adds 4 sided border to any element .noT,.noB,.noL,.noR - adds 3 border sides to any element .noTB,.noTR,.noTL,.noTL - adds 2 border sides to any element .T, .L, .R, .B - adds 1 border side to any element .right, .center, .left - set alignment for any block level rule .justify - set text to justify for any block level rule .bold, .italics, .oblique - adds style for any text .red, .crimson, .firebrick - add color to any element .blue, .navy, .green, lime - add color to any element .yellow, .gold, .silver - add color to any element .lightgrey, .black, .white - add color to any element .fsize8 - 36 - set font size for any text / /============================================================================================ ========================== L A Y O U T R U L E S ====================================/ body { padding: 5px 5px 5px 5px; border: 0px solid #000000; margin: 5px 0px 0px 5px; font: bold 12px/100% Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; color: #000080; background: #FFF; width: auto; } #formshell { padding: 5px 5px 5px 5px; border: 1px solid black; margin: 10px auto 10px auto; width: 730px; text-align: left; color: #000080; background-color: #BEE6B0;} #formshell fieldset { padding: 0px .5em .5em .5em; border: 2px solid #dc143c; margin : 0px 0px 0px 0px; clear: left;} #formshell fieldset.break {page-break-before: always; } .fbrow { clear: left; padding: 0px; border: 0px none black; margin: .1em 0em .1em 0em; width: 100%; line-height: 1.5em; text-align: left; color: #000080; background-color: auto; } .submitrow { padding: 0px 0px 0px 0px; border: 0px none black; margin: 1em auto 0px auto; width: 100%; text-align: center;} tt { padding: 4px 0px 0px 10px; border: 1px none #000000; margin: 0px; display: block; float: left; width: auto; font: bold 12px/175% Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000080;} tt.left2 {padding-left: 2px;} tt.left3 {padding-left: 3px;} tt.left4 {padding-left: 4px;} tt.left5 {padding-left: 5px;} tt.left6 {padding-left: 6px;} tt.left7 {padding-left: 7px;} tt.left8 {padding-left: 8px;} tt.left9 {padding-left: 9px;} tt.left10 {padding-left: 10px;} tt.left15 {padding-left: 15px;} tt.left20 {padding-left: 20px;} tt.left25 {padding-left: 25px;} tt.left30 {padding-left: 30px;} tt.left40 {padding-left: 40px;} tt.left50 {padding-left: 50px;} tt.left75 {padding-left: 75px;} tt.left100 {padding-left: 100px;} tt.left125 {padding-left: 125px;} tt.left150 {padding-left: 150px;} tt.left175 {padding-left: 175px;} tt.left200 {padding-left: 200px;} tt.left250 {padding-left: 250px;} tt.left300 {padding-left: 300px;} tt.left350 {padding-left: 350px;} tt.left400 {padding-left: 400px;} tt.left500 {padding-left: 500px;} tt.width50 {width: 50px;} tt.width75 {width: 75px;} tt.width100 {width: 100px;} tt.width125 {width: 125px;} tt.width150 {width: 150px;} tt.width175 {width: 175px;} tt.width200 {width: 200px;} tt.width225 {width: 225px;} tt.width250 {width: 250px;} tt.width275 {width: 275px;} tt.width300 {width: 300px;} tt.width350 {width: 350px;} tt.width400 {width: 400px;} tt.width450 {width: 450px;} tt.width500 {width: 500px;} tt.width550 {width: 550px;} tt.width600 {width: 600px;} tt.width650 {width: 650px;} tt.width25pct {width: 20%;} tt.width50pct {width: 50%;} tt.width55pct {width: 55%;} tt.width60pct {width: 60%;} tt.width65pct {width: 65%;} tt.width70pct {width: 70%;} tt.width75pct {width: 75%;} tt.width80pct {width: 80%;} tt.width85pct {width: 85%;} tt.width90pct {width: 90%;} tt.width50right {width: 50px; text-align:right;} tt.width75right {width: 75px; text-align:right;} tt.width100right {width: 100px; text-align:right;} tt.width125right {width: 125px; text-align:right;} tt.width150right {width: 150px; text-align:right;} tt.width175right {width: 175px; text-align:right;} tt.width200right {width: 200px; text-align:right;} tt.width250right {width: 250px; text-align:right;} tt.width300right {width: 300px; text-align:right;} tt.width350right {width: 350px; text-align:right;} tt.width400right {width: 400px; text-align:right;} tt.width500right {width: 500px; text-align:right;} tt.width600right {width: 600px; text-align:right;} tt.width800right {width: 790px; text-align:right;} tt.widthright50 {width: 50%; text-align:right;} tt.widthright75 {width: 75%; text-align:right;} tt.widthright90 {width: 90%; text-align:right;} tt.widthright100 {width: 99%; text-align:right;} tt.cl {clear: left;} tt.indent {padding-left: 30px;} tt.morketing {width: 130px; text-align:right;} div.column { padding: 0px 0px 0px 0px; border: 1px none #000000; margin: 0px 0px 0px 0px; float: left; width: auto;} div.collabel { padding: 18px 2px 0px 0px; border: 1px none #000000; margin: 0px 0px 0px 0px; float: left; width: auto; font: bold 1em/1.9em "Courier New", Courier, monospace; text-align: right; color: #0000ff; background-color: transparent;} .colhead { padding: 0px 0px 0px 1px; margin: 0px 0px 0px 8px; font-size: 0.8em; float: left; width: auto; text-transform: uppercase; color: #dc143c; background-color: transparent;} input.cols { padding: .25em 0px 0px .2em; border: 0px none #000000; margin: 0px .2em .15em .1em; font: bold 1em/1em "Courier New", Courier, monospace; color: #000080; background-color: #dcdcdc;} input.collabel { padding: .25em 0px 0px 0.2em; border: 0px none #000000; margin: 0px .2em .25em .1em; font: bold 1em/1em "Courier New", Courier, monospace; text-align: right; color: blue; background-color: transparent;} div.fb { margin: .3em 0px 0px .1em; float: left; width: 125px; height: 32px; clear: left; text-align: bottom; background-image: url(../images/fb.gif);} div.xhtml { margin: .3em .1em 0px 0px; float: right; width: 82px; height: 32px; background-image: url(../images/xhtml.gif);} /============================================================================================ ========================== T Y P O G R A P H Y / C O L O R R U L E S =================/ #formshell h1 { padding: 0px 5px 0px 5px; border : none; margin: 0px 0px 0px 0px; font-size: 2em; line-height: 1.5em; text-align: center; align: center; color: #ffffff; background-color: #000080; clear: both;} #formshell h2 { padding: 0px 5px 0px 5px; border : none; margin: 0px 0px 0px 0px; font-size: 2em; line-height: 1.5em; text-align: center; color: #000080; background-color: transparent; clear: left;} #formshell h6 { padding: 0px 0px .2em 0px; border-bottom: 2px solid #dc143c; margin: 0px 0px 0px .3em; width: 99%; font: bold 0.9em/1em Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: left; text-transform: uppercase; color: #dc143c; background-color: transparent;} legend { font: bold 1em Verdana, Geneva, Arial, Helvetica, sans-serif; color: #dc143c; width: auto; background-color: transparent; text-align: left; padding: 0px 7px 0px 7px;} p { padding: 0px 0px 0px 10px; border : none; margin: 0px 0px 0px 0px; font-size: 1em; line-height: 1.2em; clear: left; text-align: justify;} #break {page-break-after: always; } input,textarea { padding: -0.01em 0px 0px -0.01px; border: 0px none #000000; margin: 0.3em 0em 0em 0.3em; font: bold 1.1em/1em "Courier New", Courier, monospace; color: black; background-color: #dcdcdc; } input.main { padding: 0.2em 6px 0em 3px; display: block; float: left; width: auto; border-bottom: 3px solid #000000; } input.send {margin-right: 25px;} input[type=text], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; border: 1px solid #DDDDDD; border-bottom: 1px solid #000000; } input[type=text]:focus, textarea:focus { box-shadow: 0 0 0px rgba(81, 203, 238, 1); padding: 3px 0px 0px 3px; margin: 3px 3px 0px 7px; border: 1px solid rgba(81, 203, 238, 1); } input.reqd {border-left: 5px double red; margin: 4px 0px 0px 3px; padding: 0.2em 3px 0em 3px; display: block; float: left; width: auto; border-bottom: 1px solid #000000; } input.rtalign {text-align: right;} input.cl {clear: left;} input.rdo {margin: 8px -4px 0.1em 20px; background-color: transparent;} input.black {color: black;} input.red {color: red;} input.navy {color: navy;} input.blue {color: blue;} input.yellow {color: yellow;} input.green {color: green;} input.colsrdo {margin: 0em 0px .25em 0em;} input.blank {background-color: transparent; padding: 0.1em 0.1em 0em 0.3em; font: bold 1.2em/1em "Courier New", Courier, monospace; color: black;} input.blank2 {-webkit-appearance: none; display: block; float: left; background-color: #red; border: transparent; border-bottom: 1px solid #dc143c; font: bold 1.1em/1em "Courier New", Courier, monospace; color: #000; margin: 5px 7px 0px 5px;} input.blank3 {background-color: #E1E1E1; color: #4A4A4A;} input.filestyle { border-left:1pt solid white; border-bottom:1.5pt solid gray; border-top:1pt solid white; border-right:1.5pt solid gray; } input.uline {border-bottom: 1px solid #000;} select { margin: 0.15em 0em 0em -0.65em; font: 1.2em/1em Verdana, Tahoma, Courier, monospace; float: left;} textarea { margin: 0em 0em 0em -.3em; scrollbar-arrow-color: #dcdcdc; scrollbar-face-color: #dcdcdc; scrollbar-highlight-color: #dcdcdc; scrollbar-shadow-color: #dcdcdc; scrollbar-track-color: #dcdcdc; scrollbar-darkshadow-color: #dcdcdc; scrollbar-base-color: #dcdcdc; scrollbar-3dlight-color: #dcdcdc; border: solid 1px black;} .nobgafter { margin: .15em 9px 0px 3px; display: block; float: left; width: auto; height: auto; vertical-align: top; background-color: transparent;} .nobgbefore { margin: .15em -5px 0px 15px; display: block; float: left; width: auto; height: auto; vertical-align: top; background-color: transparent;} textarea.fsize121 {height: 1.50em;} textarea.fsize122 {height: 2.40em;} textarea.fsize123 {height: 3.30em;} textarea.fsize124 {height: 4.20em;} textarea.fsize125 {height: 5.10em;} textarea.fsize126 {height: 6.10em;} .border, .noT, .noB, .noL, .noR, .noTB, .noTR, .noTL, .noBL, .noBr{ border: 1px solid black;} .noT {border-top-style: none;} .noB {border-bottom-style: none;} .noL {border-left-style: none;} .noR {border-right-style: none;} .noTB {border-top-style: none; border-bottom-style: none;} .noTR {border-top-style: none; border-right-style: none;} .noTL {border-top-style: none; border-left-style: none;} .noBL {border-left-style: none; border-bottom-style: none;} .noBR {border-right-style: none; border-bottom-style: none;} .T {border-top: 1px solid #000000;} .L {border-left: 1px solid #000000;} .R {border-right: 1px solid #000000;} .B {border-bottom:1px solid #000000;} .checkbox { margin: 0.5em 0.2em 0em 0.5em; display: block; float: left; border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid gray; border-bottom:2px solid gray; background-color: #ffffff; } .button { display: block; float: left; border-top: 3px solid #C0C0C0; border-left: 3px solid #C0C0C0; border-right: 4px solid #575757; border-bottom:4px solid #575757; background-color: #D8D8D8; color: #000; text-align: center; height: 30px; font: 1.1em/1em arial, monospace; } .right {text-align: right;} .center {text-align: center;} .left {text-align: left;} .justify {text-align: justify;} .bold {font-weight: bold;} .italics {font-style: italic;} .oblique {font-style: oblique;} .red,.crimson,.firebrick,.blue,.navy,.green,.yellow,.gold,.silver,.lightgrey,.lime,.black,.white{ background-color: transparent;} .red {color: #ff0000;} .crimson {color: #dc143c;} .firebrick {color: #b22222;} .blue {color: #0000ff;} .navy {color: #000080;} .green {color: #005e00;} .yellow {color: #ffff00;} .gold {color: #ffd700;} .silver {color: #c0c0c0;} .lightgrey {color: #d3d3d3;} .lime {color: #00ff00;} .black {color: #000000;} .white {color: #ffffff;} .fsize8 {font-size: 8px;} .fsize9 {font-size: 9px;} .fsize10 {font-size: 10px;} .fsize11 {font-size: 11px;} .fsize12 {font-size: 12px;} .fsize14 {font-size: 14px;} .fsize16 {font-size: 16px;} .fsize18 {font-size: 18px;} .fsize20 {font-size: 20px;} .fsize22 {font-size: 22px;} .fsize24 {font-size: 24px;} .fsize30 {font-size: 30px;} .fsize36 {font-size: 36px;} / ==== START Side tabs buttons by Peterkao.com ==== / #fbtab{ background: url(../images/icon-fbtab.png) no-repeat; / Path to Image / right:1px; / change this to left: 1px; to put it on the left of the screen / top:275px;height:45px;width:32px;margin:0;padding:0;position:fixed;z-index:5000;} #fbtab a{display:block;width:100%;height:100%;} #twtab{ background: url(../images/tabs//Follow.png) no-repeat; / Path to Image / right:1px; / change this to left: 1px; to put it on the left of the screen / top:328px;height:45px;width:32px;margin:0;padding:0;position:fixed;z-index:5000;} #twtab a{display:block;width:100%;height:100%;} #rsstab{ background: url(../images/tabs//RSS.png) no-repeat; / Path to Image / right:1px; / change this to left: 1px; to put it on the left of the screen / top:381px;height:45px;width:32px;margin:0;padding:0;position:fixed;z-index:5000;} #rsstab a{display:block;width:100%;height:100%;} / ==== END Side tabs buttons by Peterkao.com ==== / .dc-contact-slick .tab { background: url(../images/tab_image.png) no-repeat 0 0; width: 40px; height: 150px; padding: 0!important; } @media print{ .submitrow {display: none;} .topbar {display: none;} .midbar {display: none;} .sidebar1 {display: none;} .bottombar2 {display: none;} .sidebar2 {display: none;} .bottombar4 {display: none;} .sidebar2a {display: none;} .sidebar4 {display: none;} .sidebar5 {display: none;} .rndcorner {display: none;} .address {display: none;} input {font-size: 1em;} .unprint {display: none;} } /========================================================================================== ========================== B A S I C I N H E R I T A N C E R U L E S ================= PROPERTY INHERITED IF Percentage ALLOWED, THEY REFER TO padding no width of containing block border no n/a margin no width of containing block background-color no n/a background-position no size of box itself clear no n/a float no n/a color yes n/a font size yes parent element's font size font family yes n/a font weight yes n/a font family yes n/a line height yes font size of element itself (NOT PARENT) text align yes (can only apply to block level elements) text transform yes n/a vertical align no element's line height width no width of containing block*/