* {
	padding:0;
	margin: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #C8C8C8;
}

body.white {
	background: #FFF;
}

.list a, .main_table a , .main_content a {
	color: #333333;
}

.wrapper {
	width: 1000px; /* old is 960px */
	margin: 0 auto;
	background-color: #DCDFE4;
}
.wrapper .background {
	width: 1000px; /* old is 960px */
	float: left;
	background-color: #DCDFE4;
	border: 1px solid #000;
}
div.header {
	background: url(../img/template/header.gif) no-repeat;
	float: left;
	width: 1000px; /* old is 960px */
	height: 89px;
}

.header .logout {
	float: right;
	padding-right: 10px;
	padding-top: 10px;
}

.header .logout a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
}

.header .logout a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: underline;
}

/*Styling for the login screen*/
.login_container {
	margin: 0 auto;
	width: 500px;
	margin-top: 200px;
	border: 1px #CFCFCF solid;
	-moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	padding-top: 25px;
	padding-right: 30px;
	padding-bottom: 25px;
	padding-left: 30px;
}
.login_container #error {
	background-color: #ffebe8;
	border: 1px #dd3c10 solid;
	font-size: 13px;
	font-weight: bold;
	color: #333;
	padding: 10px;
	margin-bottom: 10px;
}
.login_container #success {
	background-color: #fff9d7;
	border: 1px #e2c822 solid;
	font-size: 13px;
	font-weight: bold;
	color: #333;
	padding: 10px;
	margin-bottom: 10px;
}
.login_header {
	border-bottom: 1px #CFCFCF solid;
	margin-bottom: 5px;
}

.login_header h2 {
	font-size: 16px;
	margin-bottom: 5px;
}

.form_row label {
	width: 150px;
	display: block;
	float: left;
	color: #666;
	font-weight: bold;
}
label.persistent {
	padding-top: 5px;
	padding-bottom: 5px;
	display: block;
}

.fileCategory {
	text-align: left;
        font-weight: bold !important;
}
.fileCategory span {
	color: #ffffff;
        font-weight: normal;
}

/*Styling for fileupload*/
ol#log li {
	float: none;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
}

/*Styling for the left menu*/
/* clear the Jquery Css */
.left_menu a.ui-corner-top {
	-moz-border-radius-topleft: 0px;
	-webkit-border-top-left-radius: 0px;
	-moz-border-radius-topright: 0px;
	-webkit-border-top-right-radius: 0px;
}

.left_menu a.ui-corner-all {
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
}

.left_menu .ui-corner-bottom {
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border: 0px solid;
}

.left_menu a.ui-state-default, .left_menu a.ui-state-active, .left_menu a.ui-state-hover, .left_menu a.ui-widget-content, .left_menu a.ui-helper-reset
{
	border: 0px solid;
}

/*Styling for the left menu*/
.left_menu {
	background-color: #DCDFE4;
	width: 170px;
	float: left;
}
div.left_menu a {
	background: url(../img/template/left-menu-top.gif) repeat-x;
	height: 22px;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	padding-top: 6px;
	display: block;
	text-decoration: none;
}

.left_menu div ul li {
	list-style:none;
	list-style-type: none;
	height: 24px;
	padding-top: 0px;
}
.left_menu div ul li a{
	display: block;
	color: #000;
	height: 20px;
	background: #DCDFE4;
	text-decoration: none;
	padding-top: 4px;
	padding-left: 10px;
	font-weight: normal;
	text-align: left;
	outline: 0;
}
.left_menu div ul li a:hover{
	background: #EEEFF2;
}
.left_menu div ul li a.ui-accordion-content-active{
	background: #EEEFF2;
}


/*Styling for the content*/
.wrapper .background .center {
	float: left;
	width: 830px; /* old is 790px */
	background: url(../img/template/collapse_background.png) repeat-y left;
}
.collapse {
	float: left;
	height: 60px;
	width: 10px;
	background: url(../img/template/collapse.gif) no-repeat bottom;
}

.wrapper .background .center .content {
	background-color: #EEEEEE;
	float: right;
	width: 820px; /* old is 780px */
	min-height: 450px;
}

.content-bottom {
	height: 30px;
	background: #EEEEEE;
	float: right;
	width: 820px; /* old is 780px */
}

.content_title {
	padding-left: 10px;
	height: 30px;
	padding-top: 5px;
	font-size: 18px;
}

div.overflow, div.overflowonly {
	overflow: hidden;
	height: 15px;
}

span.big {
	display: inline;
	width: 400px;
	height: 15px;
}

div.overflowwrap {
	overflow: hidden;
	white-space: nowrap;
	height: 15px;
}

/* Styling for the tabs (some parts of this CSS are overrides for the CSS jquery uses
for its designing. We can't delete these out of the jquery-css itself
because other items make use of them!!) */
ul.tabs {
    overflow: hidden;
    /*height: 35px;*/
    background-color: #EEEEEE;
    border: none;
    border-radius: 0;
    margin-left: 5px;
    margin-bottom: 1px;
}

ul.tabs li {
	float: left;
	list-style:none;
	list-style-type:none;

	/*
    margin-right: 3px;
    padding-left: 10px;
    */

	padding-bottom: 10px;
	background: url(../img/template/tab-bar.gif) repeat-x bottom;
	height: 24px;
    line-height: normal;

    padding-right: 3px;
    margin-bottom: 1px;
}
ul.tabs li a {
	display: block;
	text-decoration: none;
	background-image: url(../img/template/tab.png);
	background-repeat: no-repeat;
	background-position: right;
	padding-right: 7px;
	outline: none;

    margin-bottom: 10px;
}
ul.tabs li span {
	display: block;
	padding-top: 4px;
	padding-bottom: 5px;
	padding-left: 7px;
	color: #666;
	font-weight: bold;
	background-image: url(../img/template/tab.png);
	background-repeat: no-repeat;
	outline: none;
}
ul.tabs li a:hover{
	background-image: url(../img/template/tab-active.gif);
	color: #FFF;
}

ul.tabs li a:hover span{
	background-image: url(../img/template/tab-active.gif);
	color: #FFF;
}
ul.tabs li.ui-tabs-selected a{
	background-image: url(../img/template/tab-active.gif);
	color: #FFF;
}

ul.tabs li.ui-tabs-selected a span{
	background-image: url(../img/template/tab-active.gif);
	color: #FFF;
}

ul.tabs .ui-corner-top {
	-moz-border-radius-topleft: 0px;
	-webkit-border-top-left-radius: 0px;
	-moz-border-radius-topright: 0px;
	-webkit-border-top-right-radius: 0px;
	border: 0px solid;
}

ul.tabs .ui-corner-all {
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border: 0px solid;
}

ul.tabs .ui-corner-bottom {
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border: 0px solid;
}

.tabs .ui-state-default, .tabs .ui-state-focus, .tabs .ui-state-active, .tabs .ui-state-hover, .tabs .ui-widget-content, .tabs .ui-helper-reset, .tabs .ui-widget-header
{
	border: 0px solid;
	/*background: none;*/
}
.tabs .ui-state-default, .tabs .ui-state-hover, .tabs .ui-tabs-selected, .tabs .ui-state-active
{
	/*background: none;*/
	border: 0px solid;
}


/*Styling for the content elements*/
.main_bar {
	background: url(../img/template/content-bar.gif) repeat-x;
	height: 18px;
	padding-top: 2px;
	color: #FFF;
	font-weight: bold;
	padding-left: 10px;
}
div.toggle {
	background: url(../img/icons/world_edit.png) no-repeat;
	width: 16px;
	height: 16px;
	float: right;
	padding-right: 5px;
}

input.myError{
    border: 1px solid red !important;
}

label.error, div.error {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	color: #E53138;
	background: #FFF;
    display: block;
}
div.error.valid {
	padding-top: 0px;
	padding-bottom: 0px;
}
.main_error, .success_message {
	border-bottom: solid 1px #D2D2D2;
}

.main_error ul.errors {
    background: none;
    padding: 10px 0 10px 10px;
    list-style: none;
}

.main_error ul.errors li {
    padding-left: 25px;
    background: url("../img/icons/error.png") no-repeat transparent;
}

.main_content {
	background: #EEE;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.main_table {
	background: #EEE;
}
.table_sort {
	float: left;
}
.table_sort.second {
	padding-left: 10px;
}

.split_line {
	width: 15px;
    background-image: url("../img/form/1x1_99999b.png");
    background-repeat: repeat-y;
    background-position: center;
}

/*These are all elements for styling the html elements*/
input[type=text], input[type=password] {
	border: 1px solid #99999B;
	padding-top: 2px;
	height: 18px;
	padding-left: 2px;
	margin-bottom: 2px;
	margin-top: 1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
select {
	border: 1px solid #99999B;
	margin-bottom: 2px;
	/*height: 22px;  this makes the dropdowns the right size but also ugly -___-"*/
	margin-top: 1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
select.fixedwidth {
	width: 220px;
}
input.fixedwidth {
	width: 216px;
}
textarea {
	border: 1px solid #99999B;
	margin-bottom: 2px;
	margin-top: 1px;
}
.no_spacing input, .no_spacing select {
	margin-bottom: 3px;
	margin-top: 2px;

}
table.margin_bottom {
	margin-bottom: 15px;
}
.list tr td {
	height: 21px;
	/*padding: 0 5px;*/
    overflow: hidden;
	*position: relative;/*IE 6 border spacing hack*/
}



div.arrow {
	background: url("../img/icons/arrow_out.png") no-repeat;
	width: 16px;
	height: 16px;
}

a.delete, a.edit, a.add, a.user, a.presence, a.absence, a.vacation, a.training, a.hotlist, div.on_hotlist, a.talent, a.dossier, div.on_talent, div.on_absence, div.has_picture {
	width: 16px;
	height: 16px;
	display: block;
	float: left;
	margin-right: 2px;
}

a.delete {
	background: url("../img/icons/page_delete.png") no-repeat;
}

a.edit {
	background: url("../img/icons/page_edit.png") no-repeat;
}

a.add {
	background: url("../img/icons/add.png") no-repeat;
}

a.user {
	background: url("../img/icons/user_edit.png") no-repeat;
}

a.presence {
	background: url("../img/icons/clock_add.png") no-repeat;
}

a.absence {
	background: url("../img/icons/pill_add.png") no-repeat;
}

div.on_absence {
	background: url("../img/icons/pill.png") no-repeat;
}

a.vacation {
	background: url("../img/icons/world_add.png") no-repeat;
}

a.hotlist {
	background: url("../img/icons/heart_add.png") no-repeat;
}

div.on_hotlist {
	background: url("../img/icons/heart.png") no-repeat;
}

a.talent {
	background: url("../img/icons/award_star_add.png") no-repeat;
}

div.on_talent {
	background: url("../img/icons/award_star_gold_3.png") no-repeat;
}

a.dossier {
	background: url("../img/icons/book_add.png") no-repeat;
}

div.on_dossier {
	background: url("../img/icons/book.png") no-repeat;
}
#workHome table td{
    padding:4px !important;
}


div.has_picture {
	background: url("../img/icons/photo.png") no-repeat;
}

div.greenbox {
	width: 13px;
	height: 13px;
	background-color: #15A752;
	float: left;
}

div.graybox {
	width: 13px;
	height: 13px;
	background-color: #CCC;
	float: left;
}

/*
CSS3 Method doesn't work yet for most browsers
.list tr:nth-child(even)
{
	background: #EEEEEE;
}
.list tr:nth-child(odd)
{
	background: #FAFAFA;
}
*/

.list tr.even, .list tr td.even {
	background: #EEEEEE;
}
.list tr.odd, .list tr td.odd {
	background: #FAFAFA;
}

tr.header td {
    padding-top: 21px;
    background-color: white !important;
}
tr.header td, .list th, .list .headerRow {
	background: url("../img/template/table-header.gif") repeat-x scroll left bottom #F0F0F0 !important;
	height: 21px;
	font-weight: normal;
}
table.list {
	width: 100%;
    border-collapse: separate;/*IE 6 border spacing hack*/
	border-spacing: 0px;
 	*border-collapse: collapse; /* hack is needed for IE7 also */
}

table.list td div {
	overflow:hidden;
}

/* Style the dropdown and tabel row of the screen presence */
.select_presence {
    width: 125px;
}

.DFLT {
	background: #C3C3C3;
}
.AANW {
	background: #00CD00;
}
.AFGB {
	background: #48D1CC;
}
.AFDO {
    background: #b6c7ef;
}
.ZIEK {
	background: #EEDC82;
}
.LAAT {
	background: #FFA54F;
}
.NOKD {
	background: #F08080;
}

/* Text status colors */
.blue {
	color: #1A62CE;
}
.orange {
	color: #FF7202;
}
.green {
	color: #15C01C;
}
.red {
	color: #DE0A09;
}

div.attention {
    background-color: white;
    color: black;
    padding: 5px;
}

.loading {
	height: 16px;
	width: 16px;
	background: url(../img/loader.gif) no-repeat;
	float: left;
}
.hidden {
	display: none;
}


#absence_overview {
    table-layout: fixed;
}

#absence_overview th {
    text-align: left;
}

#absence_overview .table_data {
    padding-right: 0;
    text-align: right;
    white-space: nowrap;
}

.absence_followup {
    background: url("/assets/img/icons/table_relationship.png") !important;
}

.comments { overflow: hidden; }
.comments .comment_name { color: maroon; }
.comments .comment_message { color: black; padding: 0 10px 5px 20px; }

#geboorteland { width: 218px; }

#presence_overview td { white-space: nowrap; }

.employee_table td { height: 25px; vertical-align: top; }
.employee_table .col1, .employee_table .col3 { width: 150px; }
.employee_table .col2 { width: 250px; }
.employee_table .col4 { width: 200px; }

.success_message { padding: 5px 0 5px 26px; background: url("/assets/img/icons/accept.png") no-repeat 5px 5px white; }


.vestigingOvervlow {white-space:nowrap; overflow: hidden}

/* FIXME --> padding: 5px messes up tables, go figure it out */
table th ,table td { padding-left:5px; text-align: left; }
.viewCenter{text-align:center !important; }
.viewRight{padding-right:15px; text-align:right !important}


#accordion a.active {
    background-color: #EEEFF2;
}




/******* hours pagina *****/
.koptext {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: bold;
}

table.collapse {
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}

table.collapse td {
    padding: 3px;
    border: 1px dashed #ccc;
}


#linkMonth a,
#linkMonth div,
#linkWeek a,
#linkWeek div{ display:block;float:left }

.dateTitle{width:150px; text-align: center}

#linkWeek,
#linkMonth{ clear:both;}

#periode {
    clear: both;
    margin-top: 35px;
    margin-bottom: 20px;
}

#bar_container {
    width: 180px;
    height: 15px;
    background-color: #ffffff;
    margin: auto;
    border: #cccccc 1px solid;
}

#bar_legend {
    width: 150px;
    position: absolute;
    text-align: center;
    font-size: 10px;
}

#bar {
    height:100%;
    /*width: ?%;*/
    /*background-color: ?*/
}

#modifications_trigger {
    margin-top: 10px;
}
#modifications_trigger:hover {
    cursor: pointer;
}

#all_contracts_tbl {
    border-collapse:collapse;
}

#all_contracts_tbl tr.row td.left {
    border-width:1px 0 1px 1px;
}

#all_contracts_tbl tr.row td.right {
    border-width:1px 1px 1px 0;
}

#all_contracts .active {
    border: 1px solid green;
}

/* style for datetimepicker */
/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }

/* tabblad uren */
.urenoverzicht #nav {
    display: block;
    margin: 0 0 10px 10px;
}

.urenoverzicht #nav a, .urenoverzicht #nav span {
    display:block;
    float:left;
}

.urenoverzicht #nav span {
    width: 100px;
    text-align:center;
}

.urenoverzicht .next, .urenoverzicht .prev {
    border: 1px outset black;
    height: 13px;
    margin-top: 2px;
    padding: 0 3px;
    text-decoration: none;
}

.urenoverzicht input[type="text"] {
    width: 30px;
}

.urenoverzicht .tooltip {
    display: none;
}

#smaller_font, #smaller_font input {
    font-size: 11px;
}

.urenoverzicht.main_content {
    padding-left: 0px;
}

#table_select_languages td{
    padding-left: 0;
}

.list th {
    overflow: hidden;
}

.pager {
    height: 20px;
    margin-left: 10px;
    margin-top: 10px;
    padding: 1px;
}

.pager a {
    padding: 1px 4px 1px 4px;
    display: block;
    float:left;
    text-align: center;
}

.active_page {
    border: 1px solid black;
}

/* /task/wetpoortwachter/ */
.deadline_expired {
    background-color:red;
}

/* /task/vacation/ */
.num_days_to_vacation {
    width:150px;
    height:15px;
    background-color:#ffffff;
    margin:auto;
    border:#cccccc 1px solid;
}

.dayLeft {
    width:150px;
    position:absolute;
    text-align:center;
    font-size: 10px;
}

/* task/sollicitant/ */
.sollicitant td {
    vertical-align: top; padding: 3px 0 3px 3px;
}

/* een speciale case.. */
#verzuimform table td {
    padding: 4px 0 4px 6px;
    vertical-align: top;
}

#verzuimform .expandingTextarea {
    min-height: 40px;
}

.tar {
    text-align: right;
}