body { font-family: Trebuchet MS, sans-serif; font-size: 10pt; }

/* Generics */
.right { text-align: right; }
.scrollable { overflow: auto; }
/* Other stuff */
div.spacer { clear: both; }
.right-align { float: right; }
.left-align { float: left; }
.footer { text-align: center; margin: 0px auto; }
.center, .content-center { text-align: center; }
.hidden { display: none; }


/* General CSS-forms (you will need a container for these!) */
/* Also, these should always come before anything else */
/* (it's cascading after all) */

div.row { clear: both; height: 20px; margin-bottom: 3px; }

span.form-control, span.date-control, span.time-control {
 width: 150px;
 text-align: left;
 float: right;
}
span.label {text-align: right; padding-right:5px; }
/* End general css-forms */

/* Select forms */
form.selector div.spacer { clear:both; height: 3px; width: 100px; margin: 0px auto; }
div.selector { margin: 0px auto; }

form.selector div.row * { float:left; }

form.selector div.label {
  text-align: right;
  padding-right: 10px;
  vertical-align: top;
  width: 150px;
}

form.selector div.short-label {
  text-align: right;
  padding-right: 10px;
  vertical-align: top;
  width: 100px;
}

form.selector div.data {
  text-align:     left;
  padding-left:   3px;
  vertical-align: top;
  width: 145px;
}

form.selector input[type=radio] { float:none; text-align:left; width: 20px; }
form.selector div.row input[type=checkbox] { float:left; text-align:left; width: 20px;}
form.selector input    { width: 135px;}
form.selector textarea { width: 135px;}
form.selector select   { width: 140px; }
form.selector span.date { width:140px; margin: 0px; }
form.selector span.date * { margin: 0px; float:none; }
form.selector span.date input { width: 110px; }
option { clear:left; }
form.selector select.year { width: 60px; margin: 0px 5px; }
form.selector select.week { width: 40px; margin: 0px 5px;}
form.selector select.number { width: 40px; }
form.selector div.row br { float:none; }
form.selector input.form_date_input_with_script { width: 110px; }



tr.clickable {
 cursor: pointer;
}


/* End select forms */
/* End generics */





/* Errors and Events */
div.error { 
    width: 80%; 
    border: 1px solid red;
    color: red;
    padding: 5px;
    text-align: center;
    margin: 5px;
    font-weight: bold;
}

span.error { color: red; }
span.warning { color: brown;font-weight: bold; }
span.event { color: black; }
tr.faulty { background-color: red; }
/* End errors and events */


div.print_button {
  position: absolute;
  z-index: 5;
  top:0px;
  width: 100px;
  opacity: 0.5;
}

div.print_button input {
  background-color: SpringGreen;
  border-style:dotted;
  color: black;
}

div.list {
 position: relative;
 z-index:  0;
 clear:    both;
}


/* login */
p#login_message { 
 margin: 10px auto;
 width: 400px;
 border: 1px solid black;
 color: #aa3400;
 font-weight: bold;
 background-color: #ddddff;
}

div#new_unemployed table { border: 1px solid black; width: 90%; margin: 0px auto;}
div#new_unemployed table caption { 
    font-style: italic; 
    text-align: left; 
    font-weight: bold; 
}

/* end login */

/* checkin */


div#checkin_table, div#checkout_table {
  border: 1px solid black;
  padding: 2px;
  margin: 10px auto;
  width: 90%;
}

div#checkin_table div.table_type,
div#checkout_table div.table_type { text-align: left; text-decoration: underline; font-style: italic; font-weight: bold; padding-bottom: 5px; padding-left: 50px;}

div#checkin_table div, div#checkout_table div { overflow: hidden; }
div#checkin_table div.employee_header div,
div#checkout_table div.employee_header div{ font-weight: bold; text-decoration: underline; }
div#checkin_table div.employee,
div#checkout_table div.employee { clear: both; height:25px; }
div#checkin_table div.highlight,
div#checkout_table div.highlight { background-color: #ccffee; }
div#checkin_table div div,
div#checkout_table div div { float: left; overflow: hidden; padding-top: 3px; }

div#checkin_table div input,
div#checkout_table div input {margin-top: -3px; }

div#checkout_table div.name {width: 200px; text-align: left; }
div#checkout_table div.nick {width: 140px; font-style: italic; }
div#checkout_table div.schedule {width: 200px; }
div#checkout_table div.reported_in { margin-left: 10px; }

div#checkin_table div.name {width: 200px; text-align: left; }
div#checkin_table div.nick {width: 140px; font-style: italic; }
div#checkin_table div.schedule {width: 200px; }

/* no_user checkin */
div#checkin_table div.lastname {width: 150px; text-align: left; }
div#checkin_table div.firstname {width: 150px; text-align: left; }
div#checkin_table div.birthdate {width: 150px; text-align: left; }

div#checkout_form div.row span.label {
    display: block;
    width: 150px;
    padding-right: 10px;
}


/* end checkin */


table.report {
margin: 10px auto;
border-style: solid;
border-width: 1px;
border-color: black;
width:  450px;
}
 
tr.header { width: 450px; }

th.action {
border-style: solid;
border-width: 0px;
border-bottom-width: 2px;
border-right-width: 1px; 
background-color: #9999ff;
width: 300px;
}

th.temperature {
border-style: solid;
border-width: 0px;
border-right-width: 1px; 
border-bottom-width: 2px; 
background-color: #9999ff;
width: 100px;
}

th.checkbox {
border-style: solid;
border-width: 0px;
border-right-width: 1px; 
border-bottom-width: 2px; 
background-color: #9999ff;
width: 50px;
}

div.info { position: relative; z-index: 2; text-align: left }

div.info:hover { z-index: 3; }

div.info span { display: none }

div.info:hover span{
 display:  block;
 position: absolute;
 top: 10px; left:50px; width:150px;
 border:   1px solid black;
 background-color: #e5e5e5;
}


/* schedule */
div#select_container {
  border: 1px solid white;	 
 display: block;
  width:   775px;
  margin:  0px auto 75px;
}

table.schedule {
 border: 1px solid black;
 width:  900px;
 margin: 0px auto;
}

th.schedule {
 border-style:        solid;
 border-width:        0px;
 border-right-width:  1px; 
 border-bottom-width: 2px; 
 background-color:    #9999ff;
 width:               110px;
}
td.holiday {
 margin: 0px;
 background-color: #ff9999;
}

td.sunday {
 margin: 0px;
 background-color: #bbbbbb;
}

td.saturday {
 margin: 0px;
 background-color: #dddddd;
}

span.wrong_group_list {
  font-size: 80%;
  font-style: italic;
}

div.forml { clear: both; float: left; width: 100px; }
div.formw { float: left; width: 100px; }


/* Temperature */

.temp-selector { margin-top: 10px; margin-bottom: 10px; }

.temperature { float: left; text-align: center; }
.measured { background-color: #aaffaa; }
.late { background-color: #ff6666; }
.waiting { background-color: #aaaaff; }
.to_be { background-color: #ffffff; }
.temperature-form { margin-top: 10px; margin-bottom: 10px; }
.temperature-input { width: 100px; }
.min-temp, .max-temp { 
  clear: left; 
  cursor: pointer;
}
.min-temp { background-color: #ff8888; }
.max-temp { background-color: #8888ff; }

.temperature-info { float:left; font-weight: bold; width: 200px; text-align: left; margin-left: 10px; }
.temperature-status { float:left; font-weight: bold; width: 150px; text-align: center; }
.temperature-limit { font-weight: bold; text-align: left; margin-left: 10px; }
.weekdays {
 background-color: #aa99ff;
 border-width:     0px 1px 1px 0px;
 border-style:     solid;
 border-color:     black;
 float:            left;
 text-align:       center;
}


/* Messages */
div.inbox-wrapper, div.message-wrapper {
   width:  600px;
   margin: 0px auto;
}

table.inbox { 
 margin:          0px auto;
 text-align:      left; 
 border-collapse: collapse;
 border-bottom:   thin solid black;
}
table.inbox th { width: 150px; border-bottom: thin solid black; }
div.message-header { 
   border-top:  thin solid black;
   clear:       right;
   padding-top: 5px;
}
div.message, div.reply {
   text-align: left; 
   padding: 5px; 
   max-height: 200px;
   clear: right;
}
div.message { border-left: thin solid black; }
.inbox * .unread { background-color: lightgrey; }
.inbox * .active { background-color: orange; }
.inbox * a:link, .inbox * a:visited, .inbox * a:active {  
 text-decoration: none;
 color: blue;
}
.inbox * a:hover { text-decoration: underline; } 
div.messages { margin: 15px auto; width: 600px; text-align: center; }

div.reply * span:first-child { width: 50px }
div.reply * span.form-control, div.reply * span.form-control input[type=text], div.reply * span.form-control textarea { width: 530px }

/* Outbox view */
div.outbox-view { width: 715px; margin: 0px auto; }
div.outbox-view input[type=text], textarea#outbox { width: 530px }
/* End message controls */


/* Containers specific for general CSS-forms */
div.table-content, div.group-form-container, div.action-form-container, div.employee-container, div.period-container { 
 width: 390px;
 margin: 0px auto;
}

/* Specifics for displaying login screen (Same for admin/user)
 * Makes all form elements the same size in the login screen
 */
div.table-content * input, div.table-content * select { width: 150px }

/* Specifics for displaying action settings in Interface Admin */
div.action-form-container * input, div.action-form-container * textarea, div.action-form-container * select { width: 150px; }

div.action-form-container * span.date-control input { width: 120px; }
div.action-form-container * span.time-control select { width: 50px; }

.action_list_controls { width: 750px; text-align:left; margin: 0px auto; }
.action_list_name { clear:both; float: left; width: 170px; margin: 0px 3px; }
.action_list_desc { float:left; width: 325px; }
.action_list_yearly { float: left; width: 140px; margin: 0px 3px; }
.action_list_weekly { float: left; width: 140px; }
.action_list_link { cursor: pointer; }


/* Specifics for managing groups */
div.group-form-container * span.label { width: 120px }
div.group-form-container * span.form-control { width: 180px }

/* Time report selection specific */
div.period-container * span.label { width: 120px; }
div.period-container * input, div.period-container * select { width: 150px }
div.period-container * span.date-control input { width: 120px; }

/* End time report selection specifics */

/* Specifics for managing temp checks */
div.temp-check-wrapper { width: 400px; margin: 0px auto }
div.temp-check-wrapper * span:first-child { width: 180px }
div.temp-check-wrapper * span.form-control { width: 200px }
/* End temp check specifics */

div.select-group-container { width: 400px; margin: 0px auto; }
div.left-group-members-container,div.right-group-members-container 
{
  text-align: center;
}

div.left-group-members-container { float: left; }
div.right-group-members-container { float: right; }
div.change-group-button { float: left; margin: 50px 25px; }
select.employees { width: 150px; }
div.description-row { clear: both; }
a.calendar, a.calendar img { text-decoration: none; border: none; }

/* AdminLists */

#list_selector table
{
  margin: 0px auto;
}

table.logged_on_list, table.user_list {
border-collapse:collapse;
 margin: 0px auto;
 border-spacing: 30px 0px ;
}

table.logged_on_list td, table.user_list td {
 padding: 0px 10px 0px 10px;
 text-align: left;
}

table.report_log {
 margin: 10px auto;
 border-spacing: 20px 0px;
 font-family: "tahoma";
 font-size: 6pt;
}

table.report_log td {
 padding: 0px 10px 0px 0px;
 text-align: left;
}

table.group_hours {
 margin: 10px auto;
 border-spacing: 10px 0px;
 font-family: "tahoma";
 font-size: 11pt;
}

table.group_hours td {
 padding: 0px 5px;
 text-align: right;
}

table.employee_hours {
 margin: 10px auto;
 border-spacing: 20px 0px;
 font-family: "tahoma";
 font-size: 12pt;
}

table.employee_hours td {
 padding: 0px 10px 0px 0px;
 text-align: left;
}


/* timereport */

table.timereport {
 margin: 0px auto;
 border: 2px solid black;
 border-collapse: collapse;
 border-spacing:  0px;
 width:  660px;
}

tr.holiday {
 margin: 0px;
 background-color: #ff9999;
}

tr.sunday {
 margin: 0px;
 background-color: #bbbbbb;
}

tr.saturday {
 margin: 0px;
 background-color: #dddddd;
}

tr.yellow {
 margin: 0px;
 background-color: #dddd33;
}

tr.red {
 margin: 0px;
 background-color: #ff7777;
}

.timereport * tr {
 border:     1px solid black;
 margin: 0px;
}

.timereport * th {
 border:     2px solid black;
 font-size:  13pt;
 padding:    8px;
}

.timereport * td {
 border:     1px solid black;
 margin:     0px;
 text-align: center;
}

td.sum {
 text-align:   center;
 border:       0px solid black;
 border-width: 1px 0px 1px 1px;
 font-weight:  bold;
 font-size:  10pt;
}

td.sum_info {
 text-align:   right;
 border:       0px solid black;
 border-width: 1px 0px 1px 0px;
 font-weight:  bold;
 font-size:  10pt;
}

/* end timereport */


/* images */
.arrow {
 border-style: none;
}


/* ProblemReporting */
table.problems {
 margin: 0px auto;
}


table.temperature_measure {
 margin: 20px auto;
}
table.temperature_checks {
 clear: both;
 margin: 20px auto;
}

td.left { text-align: left; }
td.right { text-align: right; }


/* Admin Actions */
.action_complete {
text-align:left;
margin:0px auto;
border:1px solid black;
}


.clickable { cursor: pointer; }