CSS Samples

@import 'form.css';

html, body
{
margin: 0;
padding: 0;
height: 100%;
font: normal 12px verdana;
color: #4d4d4e;
}
div, p, ul, h1, h2, h3, h4, h5, h6, form, span, input, ol, li, fieldset
{
font: normal 15px;
margin: 0;
padding: 0;
}
span
{
padding-right:5px;font-family:inherit;font-size:100%;
font-style:inherit;font-size:1.1em; font-weight:bold; padding-left:15px;
}


input
{
border-right: #a9a9a9 1px solid;
padding-right: 4px;
border-top: #a9a9a9 1px solid;
padding-left: 4px;
padding-bottom: 4px;
border-left: #a9a9a9 1px solid;
padding-top: 4px;
border-bottom: #a9a9a9 1px solid;
}

input[type="text"]
{
border-right: #a9a9a9 1px solid;
padding-right: 4px;
border-top: #a9a9a9 1px solid;
padding-left: 4px;
padding-bottom: 4px;
border-left: #a9a9a9 1px solid;
padding-top: 4px;
border-bottom: #a9a9a9 1px solid;
}

input[type="button"]
{
border-right: #a9a9a9 2px solid;
padding-right: 2px;
border-top: #a9a9a9 2px solid;
padding-left: 2px;
padding-bottom: 2px;
border-left: #a9a9a9 2px solid;
padding-top: 2px;
border-bottom: #a9a9a9 2px solid;
}

input[type="submit"]
{
border-right: #a9a9a9 2px solid;
padding-right: 2px;
border-top: #a9a9a9 2px solid;
padding-left: 2px;
padding-bottom: 2px;
border-left: #a9a9a9 2px solid;
padding-top: 2px;
border-bottom: #a9a9a9 2px solid;
}



.formLayout
{
background-color: #f3f3f3;
border: solid 1px #a1a1a1;
padding: 10px;
width: 300px;
}

.formLayout label, .formLayout input
{
display: block;
width: 120px;
float: left;
margin-bottom: 10px;
}

.formLayout label
{
text-align: right;
padding-right: 20px;
}

br
{
clear: left;
}
----------------------FORM.CSS-----------------------

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12
{
float: left;
padding-top: 10px;
}
.grid-1
{
width: 8.25%;
}
.grid-2
{
width: 16.5%;
}
.grid-3
{
width: 24.75%;
}
.grid-4
{
width: 33%;
}
.grid-5
{
width: 41.25%;
}
.grid-6
{
width: 49.5%;
}
.grid-7
{
width: 57.75%;
}
.grid-8
{
width: 66%;
}
.grid-9
{
width: 74.25%;
}
.grid-10
{
width: 82.5%;
}
.grid-11
{
width: 90.75%;
}
.grid-12
{
width: 99%;
}

br
{
clear: left;
}
.formLabel
{
padding-right: 5px;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-size: 1.1em;
font-weight: bold;
line-height: 25px;
padding-left: 15px;
}
/* Form starts */
.formWidthSmall
{
width: 600px;
border-style: solid;
border-color: #2c4467;
}
.formWidthMedium
{
width: 800px;
border-style: solid;
border-color: #2c4467;
}
.formWidthLarge
{
width: 100%;
}

.HeadingTitle
{
float: left;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
background: url(../images/menu-bg.gif) repeat-x;
color: White;
}


.formRowUnit
{
float: left;
width: 100%;
padding: 7px 0;
}
.formRowUnit .formLabel
{
padding-right: 5px;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-size: 1.1em;
font-weight: bold;
line-height: 25px;
padding-left: 15px;
}
.formRowUnit .formInputControls
{
font-family: inherit;
font-size: 100%;
font-style: inherit;
line-height: 25px;
padding-left: 0px;
}
.formRowUnit .formLine
{
width: 100%;
padding: 7px 0;
background: url(/Images/dot.gif) repeat-x left bottom;
}


.entireWidth
{
width: 100%;
}
.formSheet
{
width: 99%;
float: left;
padding: 3px;
}
.formUnitNormal
{
float: left;
width: 100%;
padding: 7px 0;
}
.formUnit
{
float: left;
width: 100%;
padding: 7px 0;
background: url(/Images/dot.gif) repeat-x left bottom;
}
.formUnit .formLabel
{
float: left;
padding-right: 5px;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-size: 1.1em;
font-weight: bold;
line-height: 25px;
padding-left: 15px;
}
.formUnit .formTextbox
{
float: left;
padding-right: 5px;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-size: 1.1em;
font-weight: bold;
line-height: 25px;
padding-left: 15px;
}
.hide
{
display: none;
}
.noVisibility
{
visibility: hidden;
}
.floatLeft
{
float: left;
}
.floatRight
{
float: right;
}
.textLeft
{
text-align: left;
}
.textRight
{
text-align: right;
}
.textCentre
{
text-align: center;
}
.marginTop
{
margin-top: 12px;
}
.marginRight
{
margin-right: 12px;
}
.marginBottom
{
margin-bottom: 12px;
}
.marginLeft
{
margin-left: 12px;
}
.paddingTop
{
padding-top: 12px;
}
.paddingRight
{
padding-right: 12px;
}
.paddingBottom
{
padding-bottom: 12px;
}
.paddingLeft
{
padding-left: 12px;
}
.noWrap
{
white-space: nowrap;
}
.noMargin
{
margin: 0 !important;
}