/* ############################## LAYOUTS + DEFAULTS ################################### */
.col-30{
	width: 200px;
	float: left;
	border-right: 1px dashed #333333;
}
.col-60{
	width: 500px;
	float: left;
	padding-left: 30px;
}

.button{
	cursor: pointer;
}

.hslice{
	font-family:Arial, Helvetica, sans-serif
}


.plain{
	color:#400000;
	background-image: none;
	font-size: 1.8em;
	padding: 7px 0px 0px 7px;
}

.date{
	float: left;
	display: block;
	width: 100px;
	color: #CCCCCC;

}
.title{
	float: left;
	width: 250px;
	display: block;
	color: #000000;
	margin-bottom: 5px;
}


.cell-good{
	background-color: #339900 !important;
}
.cell-warning{
	background-color:#FF6600 !important;
}
.cell-bad{
	background-color:#FF0000 !important;

}

.changeLink{
	size: 0.8em;
	color:#333;
}

.row-odd td{
	padding: 0px 3px;
	background: #555555;
}
.row-even td{
	padding: 0px 3px;
	background: #333333;
}
.row-odd-new td{
	padding: 0px 3px;
	background: #ff5e17;
}
.row-even-new td{
	padding: 0px 3px;
	background: #d24b10;
	
}
.row-odd td .new{
	display: none;
}
.row-even td .new{
	display: none;
}
.row-odd td .expired{
	color: #000000;
	font-size: 1.2em;
	text-transform: uppercase;
}
.row-even td .expired{
	color: #000000;
	font-size: 1.2em;
	text-transform: uppercase;
}

.row-odd-new td .new{
	color: #000000;
	font-size: 1.2em;
	text-transform: uppercase;
}
.row-even-new td .new{
	color: #000000;
	font-size: 1.2em;
	text-transform: uppercase;
}
.row-odd-new td a:hover{
	color: #000000;
}
.row-even-new td a:hover{
	color: #000000;
}
.row-underline td{
	border-bottom: 1px solid #666666;
}
.row-highlight td {
	color: #000000;
	text-transform: uppercase;
	background: #d24b10;
}
.row-unathorised td{
	padding: 0px 3px;
	background:#800000;
	
}
.row-overtime td{
	padding: 0px 3px;
	background:#606;
}
.row-late td{
	padding: 0px 3px;
	background:#036;
}
.row-ignore td{
	background:#333;
	color:#999;
}
.row-normal td{
	background:#030;
}
div.button{
	padding: 3px 4px;
	float: left;
	cursor: pointer;
}
.td-sort{
	cursor: pointer;
	background-position: right center;
	background-repeat: no-repeat;
}
.td-sort.alpha{
	background-image: url(/images/sort-alpha.png);
}
.td-sort.numr{
	background-image: url(/images/sort-num-r.png);
}
.unathorised-colour{
	background:#800000 !important;
}

.overtime-colour{
	background:#606 !important;
}
.late-colour{
	background:#036 !important;
}
.ignore-colour{
	background:#333 !important;
	color:#999;
}
.normal-colour{
	background:#030 !important;
}
.row-title td{
 	font-size: 1.2em;
	font-weight: bold;
	color: #FFFFFF;
	background-color:#000000;
	padding-left: 5px;
 }

.tooltip{
	cursor: help;
	margin: 10px 10px 10px 0px;
	position: relative;
}
.tooltip span{
	display: none;
}
.tooltip:hover span{
	display: block;
	width: 330px;
	position: absolute;
	z-index: 2000;
	background-color:#333333;
	border: 2px solid #FFFFFF;
	padding: 15px ;
	color: #FFFFFF;
	top: 5px;
	left: 7px;
	text-decoration: none;
}

.tooltip.left:hover span{
	display: block;
	width: 330px;
	position: absolute;
	z-index: 2000;
	background-color:#333333;
	border: 2px solid #FFFFFF;
	padding: 15px ;
	color: #FFFFFF;
	top: 5px;
	left: -355px;
	text-decoration: none;
}

.submenu{
	position: absolute; 
	top: 30px; 
	left: 800px;
	width: 200px;
}
.submenu img{
	border: none;
	text-decoration: none;
	position: relative;
	top: +3px;
}
/* ############################## INDEX ################################### */

.index h3{
	width: 350px;
	float:left;
}
.icontitle {
	width: 350px;
	float:left;
}
.icon{
	position: relative;
	top: +6px;
	float: left;
	margin-right: 10px;
	width: 16px !important;
	height: 16px !important; 
}
#index_newsbox li{
	clear: left;
}
.godmode{
	background-image: none !important;
	background-color: #FF5604 !important;
}


.contact_form td{
	vertical-align: top;
	border-bottom: 1px solid #333333;
	padding-bottom: 5px;
	padding-top: 5px;
}

/* ############################## AJAX FORMS ################################### */

.ajax-form{
	width: 400px;
	height: 200px;
	overflow:auto;
	border: 3px solid #FF3300;
	background-color: #333333;
	position: absolute;
	top: 40px;
	left: 298px;
	padding: 20px;
	z-index: 200;
	
}
.ajax-form .close{
	position: absolute;
	top: 0px;
	left: 400px;
	cursor: pointer;
}

.ajax-form-message{
	width: 400px;
	height: 200px;
	text-align: center;
	border: 3px solid #FF3300;
	background-color: #333333;
	position: absolute;
	top: 40px;
	left: 298px;
	padding: 20px;
	z-index: 200;
}
.ajax-form-message .close{
	position: absolute;
	top: 3px;
	left: 402px;
	cursor: pointer;
}
.ajax-form-message .message{
	width: 400px;
	padding-top: 100px;
	text-align: center;

}
.ajax-list{
	width: 400px;
	height: 400px;
	overflow:auto;
	border: 3px solid #FF3300;
	background-color: #333333;
	position: absolute;
	top: 40px;
	left: 298px;
	padding: 20px;
	
}
.ajax-list .close{
	position: absolute;
	top: 0px;
	left: 400px;
	cursor: pointer;
}
#MB_content .message{
	padding: 30px;
	text-align: center;
}
#MB_content table{
	width: 100%;
}
/* ############################## CONTACT LIST ################################### */
.msn-off{
	background-image: url(images/msn-off.png) !important;
	width: 16px;
	height: 16px;
	cursor: pointer;
	background-repeat: no-repeat !important;
	background-position: center center !important;
}
.msn-on{
	background-image: url(images/msn-on.png) !important;
	width: 16px;
	height: 16px;
	cursor: pointer;
	background-repeat: no-repeat !important;
	background-position: center center !important;
}

/* ############################## SQUADS ################################### */

.squad-list{
	clear: left;
}
.squad-list .member{
	padding-left: 20px;
	background: url(images/squad-user.png) no-repeat center left;
	cursor: move;
}
.squad-list .leader{
	padding-left: 20px;
	background: url(images/squad-leader.png) no-repeat center left;
	cursor: move;
}
.squad-list .empty{
	color:#333333;
}
.squad-box{
	float: left;
	width: 250px;
	padding-bottom: 20px;
}
.squad-box h4{
	color: #fdbb7a;
	float: left;
}

.squad-box .header{
	width: 100%;
}
.squad-box .header input{
	margin-bottom: 1px;
}
.squad-box .controls{
	float: right;
	width: 80px;
}
.squad-box .controls img{
	float: left;
}
#create_squad_box{
	background-color:#333333;
	border: 2px solid #fdbb7a;
	padding: 20px;
	position: absolute;
	top: 100px;
	left: 400px;
	z-index: 1000;
}

/* ############################## ALERTS ################################### */

.alert{
	padding: 0px;
	margin: 20px 40px 20px 0px;
	border: 5px solid #FF3300;
}
.alert .message{
	padding: 20px;
}
.alert .signoff{
	text-align:right;
	padding: 10px 20px 10px 0px;
	background: #000000;
}
.alert .alert-by{
	float: right;
	color: #CCCCCC;
}

/* FEEDBACK BOXES */
.large_info{
	background-color: #6DB0FF;
	background-image: url(images/modal_info.png);
	background-repeat:no-repeat;
	background-position:5px 3px;
	padding: 10px 5px 5px 75px;
	border: #001F5A solid 1px;
	font-size: 1em;
	color: #000000;
	margin: 5px;
	min-height: 50px;
	_height: 50px;
}
.large_info a{
	color: #0055FF;
}
.small_info{
	background-color: #fff084;
	background-image: url(images/messages_info_small.jpg);
	background-repeat:no-repeat;
	padding: 2px 2px 2px 20px;
	border: #CC3300 solid 1px;
	font-size: 1em;
	color: #000000;
	margin: 5px;
}


.large_success{
	background-color: #92ff8f;
	background-image: url(images/modal_success.png);
	background-repeat:no-repeat;
	padding: 10px 5px 5px 75px;
	background-position:5px 3px;
	border: #006600 solid 1px;
	font-size: 1em;
	color: #000000;
	margin: 5px;
	min-height: 50px;
	_height: 50px;
}
.large_success a{
	color:#336600;
}
.small_success{
	background-color: #B7F087;
	background-image: url(images/messages_success_small.jpg);
	background-repeat:no-repeat;
	padding: 2px 2px 2px 20px;
	border: #559328 solid 1px;
	font-size: 1em;
	color: #000000;
	margin: 5px 40px 5px 0px;
}

.large_error{
	background-color: #F7817D;
	background-image: url(images/modal_error.png);
	background-repeat:no-repeat;
	background-position:5px 3px;
	padding: 10px 5px 5px 75px;
	border: #B91111 solid 1px;
	font-size: 1em;
	color: #000000;
	margin: 5px;
	min-height: 50px;
	_height: 50px;
}
.large_error a{
	color: #990000;
}
.small_error{
	background-color: #ffabab;
	background-image: url(images/messages_error_small.jpg);
	background-repeat:no-repeat;
	padding: 2px 2px 2px 20px;
	border: #FF0000 solid 1px;
	font-size: 1em;
	color: #000000;
	margin: 5px 40px 5px 0px;
}
.large_warning{
	background-color: #FAD57C;
	background-image: url(images/modal_warning.png);
	background-repeat:no-repeat;
	background-position:5px 3px;
	padding: 10px 5px 5px 75px;
	border: #EF941F solid 1px;
	font-size: 1em;
	color: #000000;
	margin: 5px;
	min-height: 50px;
	_height: 50px;
}

#helpbox{
	background-color: #f4a298;
	background-image: url(images/modal_help.png);
	background-repeat:no-repeat;
	background-position:5px 3px;
	padding: 10px 5px 5px 70px;
	border: #B91111 solid 1px;
	font-size: 1em;
	color: #000000;
	margin: 5px;
	min-height: 55px;
	_height: 55px;
	position: absolute;
	top: -192px;
	left: 206px;
	z-index: 3000;
}

/* LOGIN */

.lock{
	background: url(/style/steel/images/bg_body.jpg) #AFAEAE no-repeat top center;
	
}

.lock #login{
	margin-top: 200px;
}

.lock .abtn{
	margin-left: 113px;
}

/*############################################## LIBRARY ##########################*/
#library_content{
	float:left;
	width: 540px;

}
#library_menu{
	float:left;
	width: 230px;
	padding-left:10px;
	border-left: #999999 1px solid;
}
#library_menu ul{
	margin-left: 12px;
	list-style: disc;
}
/*############################################## TRAINING #########################*/
.split-left{
	float: left;
	width: 180px;
}
.split-right{
	float: left;
	width: 610px;
}
.stage{
	float: left;
	width: 230px;
	height: 200px;
	padding: 10px;
	margin: 10px;
	background-color:#333333;
	color: #FF6600;
	text-align: center;
	border: 2px solid #FF6600;
	position:relative;
}
.stage .inprogress{
	position: absolute;
	top: 70px;
	display: block;
	color: #FFCC00;
	font-size: 0.8em;
	width: 200px;
	left: 25px;
	text-align: center;
}
.stage .complete{
	position: absolute;
	top: 70px;
	display: block;
	color:#33CC00;;
	font-size: 0.8em;
	width: 200px;
	left: 25px;
	text-align: center;
}
.stage .links{
	position: absolute;
	top: 140px;
	display: block;
	width: 200px;
	left: 25px;
	text-align: center;
}

.module{
	float: left;
	width: 230px;
	height: 200px;
	padding: 10px;
	margin: 10px;
	background-color:#333333;
	color: #FFFFFF;
	text-align: center;
	border: 2px solid #FF6600;
	position:relative;
}
.module h5{
 	font-size: 20px;
}
.module span{
	display: block;
	color: #FFCC00;
	font-size: 0.8em;
	width: 230px;
	text-align: center;
	position: absolute;
	top: 170px;
	left: 10px
}
.module span a{
	color: #33CC00;
}
/*############################################## CREW EVENTS ######################*/



#exisiting-choices .title{
	width: 100px;
}

#exisiting-choices .value{
	width: 100px;
	float: left;
}

#exisiting-choices img{
	float: left;
}



/*############################################## LOG ##############################*/
.log_block{
	float: left;
	border-bottom: 1px solid #999999;
}
.log_icon{
	float: left;
	width: 20px;
	height: 20px;
}
.log_datetime{
	float: left;
	width: 130px;
	height: 20px;
}
.log_user{
	float: left;
	width: 120px;
}
.log_message{
	float: left;
	width: 490px;
}
#logcontrol{
	padding-bottom: 20px;
}
#logcontrol .col{ 
	width: 250px;
	float: left;

}
#logcontrol .block{
	float: left;
	clear: left;
}
#usercontrol{
	padding-bottom: 20px;
}
#usercontrol .col{ 
	width: 250px;
	float: left;

}
#usercontrol .block{
	float: left;
	clear: left;
}
 /* SHIFT DETAILS */
 
 .shift_details .eventtitle{
	 float: right;
	 width: 300px;
	 text-align: center;
 }
 
 .shift_details{
 	font-size: 1.1em;
	width: 400px;
 }
 .shift_details .date{
 	font-size: 1.5em;
	color: #cecece;
	float: none;
	width: 300px;
	
 }
  .shift_details .time{
 	font-size: 1.5em;
	color: #000000;
	float: none;
 }
 .shift_details .eventtime{
 	padding-top: 10px;
 }
 
 .shift_details .cover{
 	font-weight: bold;
	padding-top: 10px;
 }
 .shift_details .group{
 	padding-top: 10px;
 }

 .shift_reports ul{
 	list-style: none;
 }
 .shift_event_details{
 	width: 300px;
	float: right;
 }
 #collegue_box{
 	width:800px;
	clear:both;
	display:inline-block;
 }
 #collegue_box h3{
 	clear:both;
 }

  #collegue_box img{
  	height: 80px;
	width: 80px;
  }
  #collegue_box a{
  	text-decoration: none;
  }
 #collegue_box .pic_box{
 	float:left;
	width: 90px;
	text-align: center;
	margin-bottom: 10px;
	height: 110px;
 }
 #collegue_box .pic_box img a{
 	text-decoration: none;
 }
 .calendar_date{
 	font-size: 2em;
	color:#FFFFFF;
	float:right;
	margin-right: 5px;
 }
 .shift_list_title{
 	font-size: 1.1em;
	font-weight: bold;
	color: #CCCCCC;
 }
 
 .shift_calendar{
	width: 690px !important;
	margin: 0px 5px 0px 5px;
	padding-left: 2%;
	clear:both;
 }
 
 .cal_daytitle{
 	width: 14%;
	font-size:1.2em;
	font-weight: bold;
	text-align:center;
 }
 
 .cal_date{
 	background-color:#3c0505;
	color:#000000;
	text-align:center;
	font-weight:bold;
 }
 .cal_details{
	color: #FFFFFF;
	border:1px solid #FFFFFF;
 }
  .cal_details a{
  	color: #ff8400;
	font-size: 1.2em;
	text-decoration: none;
 }
 .cal_details a:hover{
  	color: #cf5f04;
	font-size: 1.2em;
	text-decoration: none;
 }
  .cal_details_null{
	border: #FFFFFF solid 1px;
	
 }
 .cal_today{
 	color:#FF6600;
	text-align:center;
	font-weight:bold;
	font-size: 1em !important;
 }
 
 .cal_nav_right{
 	text-align:right;
 }
 
 .cal_details a .span{
 	display: none;
 }
 #cal_details_popup_right{
 	position: absolute;
	display: block;
	top: 200px;
	left: 650px;
	width: 200px;
	background-color: #333333;
	border: 2px solid #ff8400;
	padding: 10px;
 }
 #cal_details_popup_right ul ul{
 	padding-left: 10px;
	color: #AAAAAA;
 }
  #cal_details_popup_left{
 	position: absolute;
	display: block;
	top: 200px;
	left: 260px;
	width: 200px;
	background-color: #333333;
	border: 2px solid #ff8400;
	padding: 10px;
 }
#cal_details_popup_left ul ul{
 	padding-left: 10px;
	color: #AAAAAA;
 }
 
 .shift_display{
 	background-color:#333333;
	border:#000000 2px solid;
	display:inline-block;
	width: 775px;
 }
 .table_display{
 	background-color:#333333;
	border: #000000 2px solid;
	width:100%;
	margin-top: 5px;
 }
 .shift_tabbox_list{
 	background-image:url(images/shift_tab_left.png);
	width: 341px;
	height: 40px;
	
 }
 .shift_tabbox_calendar{
 	background-image:url(images/shift_tab_right.png);
	width: 341px;
	height: 40px;
 }
 .shift_tab_left{
 	font-size: 1.1em;
	margin: 15px 0px 0px 60px;
	float:left;
	font-weight:bold;
 }
 .shift_tab_right{
 	font-size: 1.1em;
	margin: 15px 40px 0px 0px;
	float:right;
	font-weight:bold;
 }
 .cover_by{
 	text-align:center;
color:#FFF2EA;
}
.cover_by_cancelled{
 	text-align:center;
	color:#CC0000;
 }
 .excuse_menu{
 	background-color: #333333;
	border: 1px solid #FF3300;
	width: 150px;
	padding: 3px;
	position: absolute;
	margin-left: -160px;
 }
  .excuse_menu ul{
  	padding: 0px;
	margin: 0px;
	list-style: none;
  }
  .group_menu{
 	background-color: #333333;
	border: 1px solid #FF3300;
	width: 160px;
	padding: 3px;
	position: absolute;
 }
  .group_menu ul{
  	padding: 0px;
	margin: 0px;
	list-style: none;
  }
  .rowHighlight {
	background-color:#000000;
  }
  .rowHighlight td{
	background-color:#000000;
  }
  .rowHidden{
  	background-color:#000000;
	display: none;
  }

  
  .locked{
  	background-image: url(images/shift-locked.png);
	height: 16px;
	width: 16px;
	cursor: pointer;
  }
  .unlocked{
  	background-image: url(images/shift-unlocked.png);
	height: 16px;
	width: 16px;
	cursor: pointer;
  }
   .hidden{
  	background-image: url(images/shift-hidden.png);
	height: 16px;
	width: 16px;
	cursor: pointer;
  }
  .visible{
  	background-image: url(images/shift-visible.png);
	height: 16px;
	width: 16px;
	cursor: pointer;
  }
  
 /*MEMOs */
 .memo_details .title{
 	font-size: 1.5em;
	font-weight: bold;
 }
 .memo_details .postedby{
 	float:right;
	text-align:center;
	clear: right;
	margin-top: 3px;
 }
 .memo_details .datetime{
 	font-style:italic;
 }
 .memo_details {
 	clear: both;
	border-bottom:#fdbb7a 1px solid;
	margin: 5px 0 5px 80px;
	width: 500px;
	padding: 10px;

 }
 
 /*CONTACTS */
 .contact_list{
 	font-size: 0.8em;
 }
 
 .contact_title{
 	font-weight: bold;
	color: #CCCCCC;
	font-size: 1.2em;
 }
 
 
 /*GALLERY */
 .album_box{
 	margin: 0px 0px 0px 20px;
 }
 
 /*NEWS */
 .news_details .title{
 	font-size: 1.5em;
	font-weight: bold;
 }
 .news_details .postedby{
 	float:right;
	text-align:center;
 }
 .news_details .datetime{
 	font-style:italic;
 }
 
 /*LOGIN */
 #login{
	width: 330px;
	padding: 20px 10px 5px 10px;
	margin: 0px auto 50px auto;
	position: relative;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
 }

 
 .login_footer{
	width: 100%;
	text-align: center;
 }
 /*CONTACT DETAILS */
 #contact_details .name{
 	font-size: 1.5em;
	color: #FFFFFF;
	font-weight: bold;
	margin-top: 20px;
 }
 #contact_details .email{
 	font-size: 1.2em;
	margin-top: 10px;
	color:#e1e1e1;
	margin-left: 20px;
 }
  #contact_details .phone{
 	font-size: 1.3em;
	color:#e1e1e1;
	margin-left: 20px;
	margin-top: 10px;
 }

 #contact_details .birthday{
 	font-size: 1.2em;
	margin-top: 10px;
	margin-left: 20px;
	color: #e1e1e1;
 
 }

.new{
	color: #FF0000;
}
/*COVERSHIFTS PAGE */

.loading{
  position: absolute;
  top: 33px;
  left: 693px;
  width: 220px;
  height: 19px;
  display: block;
  background: url(/images/waitingOff.gif);
}


 /*ALUMNI */
 
 .alumni_toggle{
	 width:100px; 
	 float:right;
	 margin-top: 15px;
	 margin-bottom: 20px;
	 margin-right: 60px;
	 font-weight: bold;
 }
 
 /*AUTH ACCOUNTS */
.authorise_accountbox{
	border: 3px dashed #FF6600;
	padding: 5px;
	margin: 10px
}
.authorise_accountbox .authorise_namebox{
	font-size: 1.4em;
}

/* GALLERY */
.album_frame{
	float: left;
	clear:right;
	width: 220px;
	text-align:center;
	font-size: 0.8em;
}
/*MEMOs */
 .comment_details .title{
 	font-size: 1.5em;
	font-weight: bold;
 }
 .comment_details .postedby{
 	float:right;
	text-align:center;
 }
 .comment_details .datetime{
 	font-style:italic;
 }
 .comment_details {
 	clear: both;
	border:#660000 1px solid;
	margin: 5px 0px 5px 0px;
	display: inline-block;
 }
 /*SHIFT LISTS */
 span.noncrew{
 	color: #071351;
	font-size: 0.9em;
 }
 span.covering{
 	color: #135107;
	font-size: 0.9em;
 }
 span.wantcover{
 	color: #ffc601;
	font-size: 0.9em;
 }
/* SLIDESHOW */
.photo_list{
	height: 125px;
	width: 125px;
	float:left;
	text-align:center;
}
.photo_album{
	height: 85px;
	width: 85px;
	float:left;
	text-align:center;
	background-image:url(images/gallery_folder.jpg);
	background-repeat:no-repeat;
	background-position:center;
	color:#003366;
	font-size: 0.8em;
	
	padding: 40px 20px 0px 20px;
}
.slideshow_box{
	position: relative; 
	width: 450px; 
	height: 450px;
	overflow:visible;
	left: 30px;

}

.slideshow_holder{
	 position:absolute; 
	 top: 0px;
	 width: 450px; 
	 height: 450px;
}
.slideshow_photo_holder{
	 text-align:center; 
	 width: 450px; 
	 height: 450px;
	 background-color:#FFFFFF
}
.slideshow_endofshow{
	width: 100px;
	height: 3em;
	position: absolute;
	top: 300px;
	left: 150px;
	background-color:#FFFFFF;
	border: #990000 1px solid;
	font-size: 1em !important;
	
}
.slideshow_paused{
	
	position:absolute;
	top:150px; 
	left:150px; 
	width:200px; 
	height:200px;
}
.slideshow_loading_holder{
	z-index: 100; 
	width: 40px; 
	height: 40px; 
	position: absolute; 
	top:35px; 
	left:430px;
}
.slideshow_loading{
	width: 100%; 
	height: 100%; 
	position:absolute;
	top: 0px;
	left: 0px;
}
.slideshow_controls{
	text-align:center;
	margin-bottom: 15px;
}
.gallery_control{
	text-align: center;
	width: 100%;
}
.gallery_previous{
	float: left;
}
.gallery_next{
	float: right;
}


.wages .block{
	width: 776px;
	margin: 0px 2px;
}
.wages .block-title{
	margin-bottom: 2px;
	cursor: pointer;
	margin-bottom: 2px;
}
.wages .heading{
	float: left;
	margin-right: 2px;
	background:#333;
	padding: 0px 3px;
}
.wages .block table{
	width: 752px !important;
	position: relative;
	left: 29px;
}
#clocks{
	position: relative;
}

.clockSummary{
	overflow:auto;
	margin-bottom: 15px;
	height: 600px;
}
.clockSummary table{
	width: 100%;
}
.clockSummary .block{
	width: 450px;
	margin: 0px 2px;
	clear: left;
}
.clockSummary .block-title{
	margin-bottom: 2px;
	cursor: pointer;
	margin-bottom: 2px;
}
.clockSummary .heading{
	float: left;
	margin-right: 2px;
	background:#333;
	padding: 0px 3px;
}
/* CLOCKIN */
#clockin{
	width: 855px;
	height: 505px;
	padding: 0px 40px 39px 30px;
	top: 82px;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
	position: relative;
	margin: auto;
	background: url(/images/clockin_logo.png) no-repeat center center;
 }
 #clockin hr, #clockin form{
	 padding: 0px;
	 margin: 0px;
 }
 #clockin a{
 	color:#CCCCCC;
 }
  #clockin a:hover{
 	color:#FFFFFF;
 }
 .clockin{
 	background: url(/style/steel/images/bg_clockin.jpg) #AFAEAE no-repeat top center;

 }
  .clockin.x800x600{
 	background: url(/style/steel/images/bg_clockin_800x600.jpg) #AFAEAE no-repeat top center !important;

 }
 .clockin.x800x600 #clockin{
	width: 780px !important;
	top: 75px !important;
	margin: 0px !important;
	padding: 0px;
 }
 .clockin_footer{
 	padding-top: 20px;
	width: 100%;
	text-align: center;
 }
 #clockface{
	 position: absolute;
	 top: -73px;
	 left: 37px;
	 width: 380px;
	 text-align:left;
	 font-size: 2em;
	 color: #D42;
 }
  .clockin.x800x600 #clockface{
	  top: -66px !important;
  }
 #clockinlist .list{
	 width: 50%;
	 float: left;
	 overflow: auto;
	 padding: 0px;
	 margin: 0px;
 }
  #clockinlist.normal .list{
	 height: 340px;
 }
 #clockinlist.tall .list{
	 height: 550px;
 }
  .clockin.x800x600 #clockinlist.normal .list{
	  height: 326px !important;
  }
  .clockin.x800x600 #clockinlist.tall .list{
	  height: 461px !important;
  }

 #clockin #clockinMode{
  position:absolute;
  top: -24px;
  left: 825px;
  font-size: 0.8em;
 }
 #clockin #clockinMode a{
  color: #999;
 }
 #clockin #clockinMode a:hover{
  color: #333;
 }
 #clockin #clockinConfirm{
  position:absolute;
  top: 120px;
  left: 176px;
  width: 388px;
  background-image: url(/style/steel/images/clockin_confirm.png);
  height: 187px;
  padding: 25px;
 }
  #clockin #clockinConfirm span{
    width: 100%;
    text-align: center;
    font-size: 2em;
    display:block;
    padding: 40px 0 10px 50px;
  }
 #clockin #clockinConfirm div{
  width: 50% !important;
  float:left;
 }
 #clockin #clockinConfirm div input{
  font-size: 1.4em;
 }
  #clockin #clockinFire{
	  position:absolute;
	  top: 151px;
	  left: 241px;
	  width: 388px;
	  background-image: url(/style/steel/images/clockin_fire.png);
	  height: 187px;
	  padding: 25px;
 }
 .clockin.x800x600 #clockin #clockinFire{
  	top: 117px !important;
  	left: 170px !important;
  }
  #clockin #clockinFire span{
    width: 100%;
    text-align: center;
    font-size: 1.5em;
    display:block;
    padding: 30px 0 15px 50px;
  }
 #clockin #clockinFire div{
  width: 50% !important;
  float:left;
 }
 #clockin #clockinFire div input{
  font-size: 1.4em;
 }
 #clockin .message{
	width: 515px;
	left: 250px;
	top: -83px;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
	position: absolute;
	margin: auto;
 }
 
#clockin .message .success{
	padding: 10px 0 0 65px;
	font-size: 1.4em;
	color: #000000;
	position: absolute;
	height: 60px;
	width: 400px;
	background: url(/images/modal_success.png) top left no-repeat;
}
#clockin .message .error{
	padding: 10px 0 0 65px;
	font-size: 1.4em;
	color: #000000;
	position: absolute;
	height: 60px;
	width: 450px;
	background: url(/images/modal_error.png) top left no-repeat;
}
#clockin .message .info{
	padding: 10px 0 0 65px;
	font-size: 1.4em;
	color: #000000;
	position: absolute;
	height: 60px;
	width: 450px;
	background: url(/images/modal_warning.png) top left no-repeat;
}
#clockin h2{
	margin: 0px;
	padding: 0px;
}
#clockin .authorise{
  position: absolute;
  top: 120px;
  left: 245px;
  padding-left: 70px;
  width: 300px;
  background: url(/images/modal_tools.png) top left no-repeat;
}
#clockin #clockRef{
	font-size: 1.3em;
}
#clockin #clockPass{
	font-size: 1.3em;
}
#clockin #clockSubmit{
	font-size: 1.4em;
}
#clockin #clockBreak{
	font-size: 1.4em;
}
#clockinMode{
  position: absolute;
}
 .clockin.x800x600 #clockinlist .list{

}
#clockinlist ul{
	list-style: none;
	padding: 0px;
	margin: 0px;
}
#clockinlist li{
	height: 37px;
	width: 160px;
	background-repeat: no-repeat;
	background-position:center center;
	float: left;
	padding: 3px 11px 0 29px;
	margin: 0px 5px 0px 0px;
	text-align: center;
	cursor: pointer;
}
.clockin.x800x600 #clockinlist li{
	padding: 3px 0px 0px 20px !important;
}

#clockinlist li.male-normal{
	background-image: url(/style/steel/images/clockin_male_ok.png);
}
#clockinlist li.female-normal{
	background-image: url(/style/steel/images/clockin_female_ok.png);
}
#clockinlist li.male-late{
	background-image: url(/style/steel/images/clockin_male_late.png);
}
#clockinlist li.male-break{
	background-image: url(/style/steel/images/clockin_male_break.png);
}
#clockinlist li.male-over{
	background-image: url(/style/steel/images/clockin_male_over.png);
}
#clockinlist li.female-late{
	background-image: url(/style/steel/images/clockin_female_late.png);
}
#clockinlist li.female-break{
	background-image: url(/style/steel/images/clockin_female_break.png);
}
#clockinlist li.female-over{
	background-image: url(/style/steel/images/clockin_female_over.png);
}
#clockinlist li span{

}
#clockinlist li .timeMsg{
	font-size: 0.6em;
	text-transform: uppercase;
	padding-top: 3px;
}
#clockin .groups {
	position: absolute;
	left: -233px;
	top: 96px;
	width: 820px;
}
#clockin .groups ul{
	list-style: none;
	padding: 0px;
	margin: 20px 0 0 0;
}
#clockin .groups li{
	height: 33px;
	width: 355px;
	background-repeat: no-repeat;
	background-position:center center;
	padding: 7px 0px 0px 45px;
	margin: 0px 5px 4px 0px;
	text-align: left;
	cursor: pointer;
	background-image: url(/style/steel/images/clockin_option_btn.png);
	font-size: 1.4em;
}
.kboard{
  /*width: 800px;
  margin-left: 24px;*/
 }
 .clockin.x800x600.kboard{
 	width: 784px !important;
    margin-left: 2px !important;
 }
 #clockin .fire{
	width: 40px;
  	height: 38px;
	position: absolute;
	top: -73px;
	left: 857px;
	background: url(/style/steel/images/fire_button.png) no-repeat center center;
	cursor: pointer;
 }
 .clockin.x800x600 #clockin .fire{
	 top: -67px;
	left: 739px;
 }
.kboard .row {
  clear:left;
 }
.kboard .rowRight{
 	width: 200px;
	float: right;
 }
.kboard .rowSpecial{
 	width: 100px;
	float: left;
 }
.kboard .row div,.kboard .rowRight div{
  float:left;
  width: 40px;
  height: 33px;
  margin: 3px;
  text-align: center;
  font-size: 20px;
  padding-top: 7px;
  cursor: pointer;
  background: url(/style/steel/images/kboard_button.png) no-repeat center center;
  color:#333;
}
.kboard .rowSpecial div{
  float:left;
  width: 80px;
  height: 33px;
  margin: 3px;
  text-align: center;
  font-size: 20px;
  padding-top: 7px;
  cursor: pointer;
  background: url(/style/steel/images/kboard_button_wide.png) no-repeat center center;
  color:#333;
}
.kboardUpper{
  text-transform: uppercase;
}
#clockin .bigbutton{
  float:left;
  width: 150px;
  height: 28px;
  margin: 3px;
  text-align: center;
  font-size: 15px;
  padding-top: 12px;
  cursor: pointer;
  background: url(/style/steel/images/kboard_button_big.png) no-repeat center center;
  color:#333;
}
#clockin #confirmPin{
	width: 534px;
	height: 492px;
	background: url(/style/steel/images/clockin_pin.png) no-repeat center center;
	position: absolute;
	z-index: 1000;
	top: -15px;
	margin-left: 165px;
}
.clockin.800x600 #clockin #confirmPin{
	margin-left: 115px !important;
}
#clockin #confirmPin .text{
	width: 250px;
	top: 100px;
	left: 200px;
	position: absolute;
	font-size: 1.2em;
	text-align: center;
	
}
#clockin #confirmPin .kboard{
	position: absolute;
	top: 202px;
	left: 203px;
	clear:both;
}
#clockin #confirmPin .kboard #confirmPinTextbox{
	width: 114px;
	margin-left: 5px;
	font-size: 1.4em;
	letter-spacing:0.8em;
	background-color:#999;
	border: 1px solid #CCC;
	padding-left: 13px;
}
#clockin #confirmPin .kboard .rowSpecial{
	float: left !important;
	width: 80px;
	margin: 3px 3px 3px 11px;
}
#clockin #confirmPin .confirmPinCancel{
	position: absolute;
	top: 400px;
	left: 71px;
}
#clockin #confirmPin .confirmPinOk{
	position: absolute;
	top: 400px;
	left: 393px;
}
#clockin #breakChoice{
	width: 534px;
	height: 492px;
	background: url(/style/steel/images/clockin_breaks.png) no-repeat center center;
	position: absolute;
	z-index: 1000;
	top: -15px;
	margin-left: 115px;
}
#clockin #breakName{
	position: absolute;
	top: 93px;
	font-size: 2em;
	left: 177px;
	width: 300px;
	text-align:center;
}
#clockin #breakOptions{
	position: absolute;
	top: 150px;
	font-size: 2em;
	left: 177px;
	width: 300px;
	text-align:center;
}
#clockin #breakLogOut{
	position: absolute;
	top: 390px;
	left: 65px;
	width: 400px;
	padding: 5px 0px 5px 0px;

}
#clockin #breakLogOut input{
	font-size: 1.4em;
}

#clockin #breakList{
	list-style: none;
	padding: 0px;
	margin: 30px 0 0 -111px;
	
}
#clockin #breakList li{
	height: 33px;
	width: 355px;
	background-repeat: no-repeat;
	background-position:center center;
	float: left;
	padding: 7px 0px 0px 45px;
	margin: 0px 5px 5px 0px;
	text-align: left;
	cursor: pointer;
	background-image: url(/style/steel/images/clockin_option_btn.png);
	font-size: 0.8em;
}
#clockin #footerOptions{
	padding: 0px 10px;
}
#clockin .page{
	height: 522px;
	overflow: auto;
}
.clockin.x800x600 #clockin .page{
	height: 435px !important;
}
#clockin #clockinbreaklist h2{
	margin-left: 20px;
}
#clockin .page table{
	width: 90%;
	margin-left: 10%;
}
#clockin .page table ul{
	padding: 0px;
	margin: 0px 0px 10px 0px;
}
#clockin #content-timeline{
	height: 545px;
	overflow: auto;
	padding-left: 23px;
}
.clockin.x800x600 #content-timeline{
	height: 460px !important;
}
#clockin #content-timeline .zerohour{
	border-right: 1px solid #f00;
	z-index:3000;
	position:absolute;
	height: 536px;
}
.clockin.800x600 #content-timeline .zerohour{
	height: 455px !important;
}
/* #
############################################## 				Timeline					*/

.timeline .dragLeft{
	float:left;
	display:none;
	height: 26px;
	width: 16px;
	background: url(/images/drag-left.png) no-repeat center center;
}
.timeline .dragRight{
	float:right;
	display:none;
	height: 26px;
	width: 16px;
	background: url(/images/drag-right.png) no-repeat center center;
}
.timeline .divCost{
	padding: 10px;
	font-size: 1.5em;
}
.timeline .contact{
	clear:left;
	height: 30px;
	position: relative;
	border-bottom: solid 1px #999;
}
/* ############################################### 				SITEMAP					*/
.sitemap div{
	width: 200px;
	float: left;
	margin-bottom: 10px;
	width: 265px;
}
.sitemap ul{
	padding: 0px;
	margin: 0px 0px 10px 0px;
}
.sitemap li{
	padding: 0px;
	margin: 0px;
	width: 230px;
}
.sitemap span{
	padding: 0px;
	margin: 0px;
	display: block;
	height: 16px;
	width: 16px;
	float: right;
	cursor: pointer;
}
.sitemap span.hidden{
	background: url(/images/shift-hidden.png);
}
.sitemap span.normal{
	background: url(/images/shift-visible.png);
}

#MB_content #errorlist ul{
	list-style: disc;
	margin-left: 15px;
	max-height: 300px;
}
#MB_content #errorlist ul li{
	margin-bottom: 3px;
}

 div.slider { width:640px; margin:10px 0 10px 20px; background-color:#FF6600; height:16px; position: relative; }
  div.slider div.handle { width:16px; top:0px; height:16px; background:url('images/split-handle.png'); cursor:move; position: absolute; }
  div.slider #split_tone{
  	margin:0; background-color:#ccc; height:16px; position: relative; }
  }