html, body {
    background-color: black;
    color: white;
}

body, input, button, select, a, li, textarea {
    font-family: "Segoe UI", "Lucida Grande", tahoma;
    font-size: 10pt;
}

h1  {
    margin: 0.5em 0;
    font-size: 12pt;
}

p {
    padding: 0.5em 0;
}

a:link, a:visited {
    color: #FFFFFF;
    text-decoration: none;
}

a:hover {
    color: #FFDDDD;
}

ul {
    margin: 0.5em 0;
    list-style-type: square;
}

ul li {
    margin-left: 2em;
    line-height: 1.5em;
}


button, input[type="button"], input[type="submit"], input[type="reset"] {
    border: 1px white solid;
    border-radius: 4px;
    background-color: #88d;
    /* I like this orange colour: background-color: #FA6800; */
    color: white;
    padding: 2px 8px;
}

input[type="text"], input[type="password"], select, textarea,
.Combobox > input {
    border: 1px black solid;
    border-radius: 4px;
    background-color: white;
    color: black;
    padding: 2px 4px;
}

.Combobox > input {
    height: 1.5em;
}

/*
 * Common classes
 */

.clear {
    clear: both;
}

.ButtonBar {
    margin: 0.5em 0;
}

.ButtonBar button, .ButtonBar input {
    margin-right: 4px;
}

/*
 * Specific sections.
 */

#header {
    background-color: black;
    margin: 0 auto;
    width: 800px;
}

#tracker {
    float: left;
    margin: 0 0 0 -24px;
}

#logo {
    float: right;
    position: relative;
    top: 20px;
}

/*
 * Main blue section in the middle where all the action happens,
 * includes secondar menu but excludes primary menu.
 */

#mainBody {
    clear: both;
    background-color: #448;
    margin: 0 auto;
    width: 800px;
    border-radius: 8px;
    padding: 0.5em 1em;
}

#loginBody {
    clear: both;
    background-color: #448;
    margin: 0.5em auto;
    width: 800px;
    border-radius: 8px;
    padding: 1em;
}

#pageContent {
    clear: both;
}

#output {
    margin: 0.5em 0;
    padding: 0.5em;
    border: 1px white solid;
    border-radius: 4px;
    background-color: black;
    color: #A4C400;
    height: 16em;
    overflow: scroll;
    overflow-x: hidden;
}

/*
 * Primary menu - this appears above the main content body.
 */

#primaryMenu {
    clear: both;
    margin: 0 auto;
    width: 800px;
    padding-left: 4em;
    list-style-type: none;
}

#primaryMenu li {
    /* this would be nice, but doesn't work in IE8 so need to float left, display block and set width
    display: inline-block; */
    display: block;
    float: left;
    width: 6em;
    text-align: center;
    vertical-align: baseline;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    background-color: #66a;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 0;
    margin: 0 4px 0 0;
    height: 30px;
}

#primaryMenu li.current {
    background-color: #448;
    position: relative;
    top: 1px;
}

#primaryMenu li.extra {
    display: block;
    float: right;
    width: 20em;
    text-align: right;
    vertical-align: baseline;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    background-color: black;
    margin-right: 15px;
    height: 24px;
    padding: 0 0 4px 0;
}

#primaryMenu li a {
    padding: 0.5em;
    line-height: 2em;
}

/*
 * Secondary menu - this appears within the main content body.
*/

#secondaryMenu {
    clear: both;
    height: 25px;
    padding: 0;
    margin: 0.5em 0;
    margin-bottom: 1.5em; /* needs a bit more space underneath before next element */
    list-style-type: none;
    border-bottom: 1px white solid;
}

#secondaryMenu li {
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
    padding: 0 0 4px 0;
    margin: 0 0.5em 0 0.5em;
}

#secondaryMenu li.current {
    border-bottom: 3px #fff solid;
}

#secondaryMenu li:hover {
    border-bottom: 3px #fdd solid;
}

#secondaryMenu li a {
    text-decoration: none;
}

/*
 * Consultant Switcher
 */

#consultantSwitcher span {
    display: inline-block;
    border: 1px black solid;
    border-radius: 4px;
    background-color: white;
    color: black;
    padding: 4px 4px;
    font-weight: normal;
}

/*
 * General messages.
 * These will be used by forms, task monitor and script progress.
 */

div.Progress {
    color: #040;
    background-color: #dfd;
    margin: 0.5em 0;
    border: 1px #040 solid;
    border-radius: 4px;
    padding: 0.5em 1em;
    font-weight: bold;
}

div.Message {
    color: #00c;
    background-color: #dff;
    margin: 0.5em 0;
    border: 1px #00c solid;
    border-radius: 4px;
    padding: 0.5em 1em;
    font-weight: bold;
}

div.Error {
    color: #c00;
    margin: 0.5em 0;
    border: 1px #c00 solid;
    border-radius: 4px;
    background-color: #fdd;
    padding: 0.5em 1em;
    font-weight: bold;
}

span.Title {
    font-weight: bold;
    font-style: italic;
}

/*
 * New timesheet table style.
 */

table.Data {
    border: none;
    border-collapse: collapse;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin: 0.5em 0;
}

table.Data thead tr th {
    color: #FFFFFF;
    background: #87794E;
    border: 1px #87794E solid;
    text-align: left;
    line-height: 24px;
    padding: 0 4px;
}

table.Data thead tr th:first-child {
    border-top-left-radius: 4px;
}

table.Data thead tr th:last-child {
    border-top-right-radius: 4px;
}

table.Data tbody tr td {
    color: #000000;
    background: #FFFFFF;
    border: 1px #87794E solid;
    line-height: 24px;
    height: 24px;
    padding: 0 4px;
    vertical-align: top;
}

table.Data tbody tr.Total td {
    color: #FFFFFF;
    background: #87794E;
}

table.Data tbody tr td.Hours {
    text-align: right;
}

a[href="#top"], a[href="#bottom"] {
    display: block;
    float: right;
    font-weight: bold;
    margin: 0;
    padding: 0.5em 0;
}

table.Data tbody tr td.Icons {
    margin: 0;
    line-height: 16px;
    padding: 4px;
}

table.Data tbody tr td.Icons a {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 2px;
    border: 1px #87794E solid;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: 2px 2px;
}


.icon-copy { background-image: url(../images/copy.gif); }
.icon-edit { background-image: url(../images/edit.gif); }
.icon-save { background-image: url(../images/save.gif); }
.icon-delete { background-image: url(../images/trash.gif); }
.icon-execute { background-image: url(../images/execute.gif); }
.icon-progress { background-image: url(../images/progress.gif); }
.icon-log { background-image: url(../images/log.gif); }
.icon-info { background-image: url(../images/info.png); }
.icon-confirm { background-image: url(../images/tick.gif); }
.icon-cancel { background-image: url(../images/cancel.png); }



button.TimesheetEntries {
    width: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 0;
    border-radius: 4px;
    background-color: white;
    background-repeat: no-repeat;
    background-position: 1px;
    background-image: url(../images/info.gif);
}



/*
 * Button icon styling
 */
button.Edit {
    width: 22px;
    margin-top:5px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px #87794E solid;
    border-radius: 4px;
    background-color: white;
    background-repeat: no-repeat;
    background-position: 2px;
    background-image: url(../images/edit.gif);
}

button.Edit:hover {
    cursor: pointer;
}




/*
 * Nice new Form style
 */
div.FormRow {
    margin: 0.5em 0;
}

div.FormRow label {
    display: block;
    float: left;
    text-align: right;
    width: 6em;
    position: relative;
    top: 6px;
}

div.FormRow input, div.FormRow textarea, div.FormRow select {
    margin-left: 0.5em;
}

div.FormButtons {
    margin: 0.5em 0;
    padding-left: 6.5em;
}

div.FormButtons button, div.FormButtons input {
    margin-right: 4px;
}

.FormError {
    color: red;
    visibility: hidden;
}


/*
 * Form fields
 */
.FormFields ul {
    list-style-type: none;
    display: table;
}

.FormFields ul > li {
    display: table-cell;
}

.FormFields ul > li > label {
    display: block;
    width: 6em;
    white-space: nowrap;
    text-align: right;
    top: 6px;
}

.FormFields ul > li > input,
.FormFields ul > li > select,
.Combobox > input {
    margin-left: 0.5em;
}

.Combobox > input {
    width: auto;
}

.Combobox.Small > input {
    width: 4em;
}


.FormFields ul > li.TextArea > label {
    display: inline-block;
    vertical-align: top;
}

.FormFields ul > li.TextArea > textarea {
    width: 360px;
    height: 80px;
    margin-left: 0.2em;
}

.FormFields ul > li > input {
    width: 18em;
}

.FormFields ul > li.Checkbox > input[type=checkbox] {
    width: 1.5em;
}

.FormFields ul > li.Small > input {
    width: 4em;
}

.FormFields ul > li.Date > input {
    width: 6em;
}

.FormFields ul > li.Medium > input {
    width: 8.8em;
}

.FormFields ul > li.Large > input {
    width: 22em;
}

.FormFields ul > li > select {
    width: 18em;
}

.FormFields ul > li.Small > select {
    width: 4.9em;
}

.FormFields ul > li.Medium > select {
    width: 9.6em;
}
.ComboboxButton {
    height: 1.73em;
    margin-bottom: 0.275em;
    margin-left: 0.1em;
    border: 1px black solid;
    border-radius: 4px;
}

.ComboboxButton.Disabled {
    background: lightgray;
    border: 1px black solid;
    margin-left: -0.24em;
}


/*
 * Delete dialog style
 */
.DeleteDialog > .ui-dialog-title {
     color: red;
}


.Required {
    font-weight: bold;
}

.Required:after { content:" *"; }