Building your own CSS form styles

The default CSS style sheet is availble for download and modification here: webforms.css. This file can be hosted on your own web server or embedded into <style></style> tags on your web page.

All of the WORKetc form css classes begin with a root container class named "WebForm". The main structure of the WORKetc form looks like below:

There are two types of field layouts. One is single form element which looks like this:

The other is a grouped form element, which looks like this:

There's also a more complex form of grouped element - Address Editor, which looks like this:

The float loading layer is named "loading":

The loading status glyph displayed after the submit button is clicked, is named "inline_loading":

The form error message feedback is named "CallBackError":

The message displayed after the form submitted successfully is named "info"

The date picker used is based on the jquery datepicker plugin. You may wish to use the existing css styles for the datepicker, included below:

.ui-datepicker { width: 17em; padding: .2em .2em 0; line-height: 1.5em;
    font-family: Tahoma, Verdana, arial, sans-serif;
    font-size: 9.25pt;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;}
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { text-align: center; font-weight: bold; border: 0; width: 20px; color:#555555; }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; text-align: center; text-decoration: none; color: #555555; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: 0 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { background: white url("https://auth.worketc.com/v2.0/images/gradshadeup.png") repeat-x scroll 0 0; float: right; margin: 0 0 4px 0; cursor: pointer; font-size:10px; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; }

/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */

.ui-datepicker-cover {
    display: none; /*sorry for IE5*/
    display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}
.CalendarBox /*.hasDatepicker, <-- dont style inlines?*/
{
        font-family: Tahoma,Verdana,arial,sans-serif;
	font-size: 9.25pt;
	background: white url(https://auth.worketc.com/v2.0/images/drop-calendar.gif) no-repeat right center;
	border: 1px solid #7F9DB9;
	padding: 3px 18px 3px 3px !important;
	width: 80px;
	cursor: pointer;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.hasDatepicker:hover, .hasDatepicker:active
{
    background-image:url(https://auth.worketc.com/v2.0/images/drop-calendar-hover.gif);   
}
.ui-datepicker
{
    background: #EEF3FA;
    -moz-border-radius: 3px;    
    -webkit-border-radius: 3px;    
    border-radius: 3px;    
    border: 1px solid #7F9DB9;
    -moz-box-shadow: 0 2px 2px #66CCFF;
    -webkit-box-shadow: 0 2px 2px #66CCFF;
    box-shadow: 0 2px 2px #66CCFF;
}
.ui-icon-circle-triangle-w
{
    background: url(https://auth.worketc.com/v2.0/images/glyph_left_white.gif) no-repeat 50% 50%;
     overflow:hidden;
    text-indent:-99999px;
    width: 16px;
    height: 16px;
}
.ui-icon-circle-triangle-e
{
    background: url(https://auth.worketc.com/v2.0/images/glyph_right_white.gif) no-repeat 50% 50%;
    overflow:hidden;
    text-indent:-99999px;
    width: 16px;
    height: 16px;
}
.ui-datepicker-header
{
    -moz-border-radius: 3px;   
    -webkit-border-radius: 3px;   
    border-radius: 3px;   
    background: #FF9933 url(https://auth.worketc.com/v2.0/images/orange_grad.gif) repeat-x;
	border-top: 1px solid #FBB949;
	border-left: 1px solid #FBB949;
	border-right: 1px solid #FBB949;
	border-bottom: 1px solid #F69419;
	color: White;
	font-weight: bold;
}
.ui-datepicker thead
{
    background: url(https://auth.worketc.com/v2.0/images/gradshadeup.png) repeat-x 0 0;
    border-color: #7DBEF1;
}
.ui-datepicker .ui-state-default, .ui-datepicker .ui-state-hover, .ui-datepicker .ui-state-highlight
{
    border: 1px solid #EEEEEE;
}
.ui-datepicker .ui-state-default { }
.ui-datepicker .ui-state-hover { border-color: #FF9933; background:#FFCC99; }
.ui-datepicker .ui-state-active { border-top: 1px solid #FBB949;
	border-left: 1px solid #FBB949;
	border-right: 1px solid #FBB949;
	border-bottom: 1px solid #F69419; background:  #FF9933; color:White; }
.ui-datepicker .ui-state-highlight { border-top: 1px solid #FBB949;
	border-left: 1px solid #FBB949;
	border-right: 1px solid #FBB949;
	border-bottom: 1px solid #F69419; }
.ui-datepicker-calendar
{
    background: white;
    -moz-border-radius: 3px;
}