Basic Job Ticket - sample CSS file

/*
 Eric Meyer's Reset CSS: Our default setting.
 http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
 License: none (public domain)
 */
html, body, blockquote, pre, abbr, acronym, address, code,
em, img, dl, dt, dd, ol, ul, li,
fieldset, form, label,  legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

ul {
    list-style: none;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
}

table, td, th {
    vertical-align: middle;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

a img { border : none }

/* Custom setting start */
/* -------------------------------------------------------- */
html {
    background: #eee;
}

body {
    background: #eee;
    color: #333;
    font: 75%/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 20px;
}

form {
    padding: 20px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12) !important;
}

input.ValidationError:focus,
textarea.ValidationError:focus,
select.ValidationError:focus {
    border: 2px solid #ff0000;
}

/* Custom top paragraph */
form p.introduction {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.6;
    margin: 0 0 2em;
    color: rgba(255,255,255,1);
    /* background: linear-gradient(to right, rgba(154,169,16,1), rgba(154,169,16,0)); Esko green */
    /* background: linear-gradient(to right, rgba(249,153,69,1), rgba(249,153,69,0)); Connect orange */
    background: linear-gradient(to right, rgba(155,155,155,1), rgba(155,155,155,0));
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12) !important;
    padding: 6px 0 6px 10px;
}

form p.note {
    font-size: 1.25em;
    margin: -1.7em 0 1.25em;
    padding: 20px;
}

/* Side by side labels */
fieldset div {
    margin: 0 0 10px 160px;
}

fieldset div.controls {
    margin: 25px 0 0;
    padding: 0;
}

fieldset div label {
    color: #666;
    float: left;
    font-size: 1.16em;
    font-weight: bold;
    line-height: 1.1;
    margin: 5px 20px 0 -160px;
    width: 140px;
    text-align: right;
}

fieldset abbr {
    color: #7b0101;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    padding: 0 1px;
    vertical-align: middle;
 }
 
 fieldset div label abbr {
     display: block;
     font-size: 23px;
     padding: 0;
     position: relative;
     width: 16px;
     left: 580px;
     top: -0.9em;
}

fieldset div input,
fieldset div textarea,
fieldset div select {
    line-height: 1;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12) !important;
}


/* Custom input, textarea and submit button */
input,
textarea,
select {
    border: 1px solid #666666;
    padding: 5px;
    width: 420px;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 86%,rgba(255,255,255,1) 100%);
    min-height: 26px;
}

textarea {
    height: 140px;
}

input[type=submit] {
    cursor: pointer;
    float: right;
    background: url(images/Submit.png) no-repeat 0 0;
    width: 115px;
    height: 45px;
    margin: 0;
    overflow: hidden;
    padding: 32px 0 0 116px;
    border: none;
}

input[type=submit]:active {
    background: url(images/Submit_down.png) no-repeat 0 0;
}

/* Custom focus selection */
input:focus,
textarea:focus,
select:focus {
    border: 2px solid #26a0ac;
}

input[type=submit]:focus {
    border: none;
}

/* Date */
fieldset fieldset.datetime {
    color: #666;
    margin: 0;
    padding: 0;
}

fieldset fieldset.datetime div {
    background: none;
    float: left;
    margin: 0;
    padding-left: 0;
}

fieldset.datetime div label {
    width: 60px;
    margin: 5px 0 0 0;
    padding: 0;
}

fieldset.datetime div select {
    width: 75px;
    margin: 5px 0 0 5px;
    padding: 0;
}

/* EOF */