body {
    background-color: #ffffff;
    color: #555;
    font-family: arial,verdana,helvetica,sans-serif;
}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
* html .clearfix{height:1%;}
.clearfix{display:inline-block;}
.clearfix{display:block;}
em {
    font-style: italic;
}
a.icon {
    width: 24px;
    height: 24px;
    display: block;
    float: left;
    margin-right: 2px;
    margin-bottom: 2px;
    margin-left: 0px;
    margin-top: 0px;
}
a.icon:hover {
    margin-right: 1px;
    margin-bottom: 1px;
    margin-left: 1px;
    margin-top: 1px;
}
a.icon:active {
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 2px;
    margin-top: 2px;

}
a.edit {
    background-image: url('/static/icon_edit.png');
}
a.delete {
    background-image: url('/static/icon_delete.png');
}
a.details {
    background-image: url('/static/icon_details.png');
}
a.remove_right {
    /* Because the silly jquery plugin seems to get stuck on icon remove right */
    background-image: url('/static/icon_remove.png');
    float: right;
    width: 24px;
    height: 24px;
    display: block;
    margin-right: 2px;
    margin-bottom: 2px;
    margin-left: 0px;
    margin-top: 0px;
}
a.add {
    background-image: url('/static/icon_add.png');
}

/* nav pages */
#nav {
    padding: 0;
    margin-top: 10px;
    margin-bottom: 3px;
    margin-left: 3em;
    margin-right: 3em;
    font-weight: bold;
    height: 30px;
    color: #555;
    background-color: #ccc;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    border-radius: 10px;
}
#nav li {
    list-style: none;
    float: left;
}
#nav li a {
    border-left: solid 1px #ccc;
    display: block;
    padding: 3px 8px;
    margin-right: 15px;
    height: 22px;
    color: #555;
    font-weight: bold;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    border-radius: 10px;
}
#nav li ul {
    display: none;
    width: 10em;
    background-color: #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    border-radius: 10px;
    z-index: 1;
}
#nav li:hover a {
    background-color: #fff;
    border-width: 1px;
    border-style: solid;
    border-colorgg: #ccc;
    border-radius: 10px;
}
#nav li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
}
#nav li:hover li {
    border-style: none;
    float: none;

}
#nav li:hover li a {
    border-width: 0px;
    border-style: none;
    margin-right: 0px;
    background-color: #fff;
    color: #555;
}
#nav li li a:hover {
    color: #555;
    background-color: #ccc;
}
#nav li.messages {
    line-height: 30px;
    float: right;
    margin-right: 10px;
}

/* timesheet main page styles */
h2 {
    font-weight: bold;
}
a {
    color: #88c;
}
input, textarea {
    border-width: 2px;
    border-style: inset;
    border-color: #ccc;
    border-radius: 5px;
}
input[type=submit], input[type=button], button {
    background-color: #ccc;
    border-style: outset;
}
.box {
    margin: 8px;
    border-width: 1px;
    border-style: solid;
    border-color: #bbb;
    background-color: #fffffe;
    padding: 8px;
    border-radius: 5px;
}
.right {
    float: right;
}
.left {
    float: left;
}
.error, .errorlist {
    font-size: x-small;
    color: #f77;
    background-color: #fffaee;
    list-style-type: none;
}
ul.errorlist {
    font-size: small;
}
label.error {
    display: block;
    margin: 2px;
}
tr.new {
  color: green;
  font-weight: bold;
}

#project_selector,
#expense_entry_container,
#project_tracking_container {
    min-height: 260px;
    width: 130px;
    float: left;
}
#project_selector input,
#expense_entry_container input, 
#project_tracking_container input {
    clear: both;
    width: 125px;
}
.item_list {
    width: 125px;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    border-radius: 5px;
    overflow-y: scroll;
    list-style: none;
    padding: 0;
    margin: 0;
}
#project_list {
    height: 220px;
    margin-top: 10px;
}
#project_selector h3 {
    font-size: x-small;
}
li.list_select {
    cursor: pointer;
    background-color: #fcfcfc;
}
li.list_select:nth-child(2n) {
    background-color: #efefef;
}
li.list_select:hover {
    background-color: #fff;
}
li.selected {
    background-color: #ffc !important;
    color: #7b7;
}
#time_entry_container {
    width: 200px;
    min-height: 260px;
    float: left;
    margin-top: 10px;
}
#time_box {
    width: 180px;
    margin-left: 0px;
    margin-top: 19px;
    min-height: 85px;
}
#duration_entry_container input {
    display: block;
    width: 178px;
}
#expense_type_list {
    height: 164px;
    margin-bottom: 5px;
}
.Reimbursement { /* reimbursement in expense is hilghighted*/
    color: #77f;
}
#event_type_list {
    margin-bottom: 5px;
    height: 190px;
}
#action_container {
    width: 247px;
    float: left;
}
#action_container input, #action_container select {
    width: 233px;
    margin-left: 8px;
}
#main_contributor_container {
    width: 215px;
}
#main_contributor_container input, #main_contributor_container select {
  width: 210px;
  margin-left: 0px;
}
#attachment_container {
    width: 215px;
    height: 54px;
}
#attachment_container input {
    clear: both;
    width: 210px;
    margin-left: 0px;
}
.time_container {
    width: 45%;
}
.date, .date_entry {
    font-size: xx-small;
    border-style: solid;
    border-width: 1px;
    border-color: #eee;
    border-radius: 5px;
    padding-left: 3px;
}
.date_nav {
    margin-top: 2em;
    margin-left: 2em;
    font-weight: bold;
}
.date_nav a {
    text-decoration: none;
}
#project_details h3 {
    font-weight: bold;
}
table.time_summary {
    width: 100%;
    border-spacing: 0px;
    border-radius: 5px;
    border-color: #ddd;
    border-width: 5px;
    border-style: solid;
}
table.time_summary td, table.time_summary th {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #dde;
}
table.time_summary th {
    background-color: #fff;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}
table.time_summary td {
    padding: 4px;
}
table.time_summary td.date {
    border-left-width: 0px;
    font-size: small;
    width: 12ex;
}
table.time_summary td.description {
    font-size: small;
}
table.time_summary tr {
    height: 2em;
    background-color: #f8f8f8;
}
table.time_summary tr:nth-child(2n) {
    background-color: #fdfdfd;
}
table.time_summary tfoot tr, table.time_summary tfoot th {
    background-color: #dde;
}
td.actions {
    width: 55px;
}
.center_box {
    margin-top: 5em;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 50%;
    border-spacing: 0px;
    border-radius: 5px;
    border-color: #ddd;
    border-width: 5px;
    border-style: solid;
}
.fitwidth {
  max-width: 350px;
}
.company_address {
    font-size: x-small;
}
/* project form */
#add_project_form {
    text-align: left;
    margin-top: 50px;
    padding-left: 1em;
}
#add_project_form ul {
    margin-left: 0px;
    padding-left: 0px;
}
#add_project_form li {
    list-style: none;
}
#add_project_form select {
    width: 20em;
}
#add_project_form #id_description {
    width: 20em;
    height: 5em;
}
#add_project_form th {
    vertical-align: top;
}
#project_number_container {
    display: none;
}
.locations tbody tr td input {
    width: 5em;
}

/* location search */
#location_search_form input {
    width: 5em;
}
/* search */
#project_search_form {
    width: 440px;
}
#contributor_container {
    float: left;
    margin-top: 2px;
    text-align: left;
    height: 6em;
    width: 200px;
    overflow-y: auto;
    overflow-x: auto;
}
#project_search_form li {
    list-style: none;
    text-align: left;
}
#project_search_form input,
#project_search_form select {
    width: 200px;
}
#project_search_form input[type=checkbox] {
    width: 12px;
    height: 12px;
}
.search_result .project_number {
    float: left;
    width: 6em;
}
.search_result .company {
    float: left;
    width: 12em;
    text-decoration: underline;
}
.search_result .project_type {
    float: left;
    width: 12em;
    font-style: italic;
}
.search_result .age {
    float: left;
}
.search_result .status {
    float: right;
    font-style: italic;
}
.search_result .invoice_number {
    float: left;
    width: 20em;
}
.search_result .ticket_number {
    float: left;
}
.search_result .time {
    float: right;
    width: 8em;
    text-align: right;
}
.search_result .expenses {
    float: right;
}
/* notifications */
.messages.success {
    color: #8a8;
    background-color: inherit;
    font-size: small;
}
.messages.error {
    color: #f77;
    background-color: inherit;
    font-size: small;
}