@charset "utf-8";
/* Basic CSSs for PeopleWhere */

body, textarea {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	font-weight:normal;
	max-width:1260px; 
}

body.popup {
	margin:0px; padding:0px;
}
body.popup #content {
	width:800px !important;
	min-width:800px !important;
	max-width:800px !important; 	
}

body, #content, .container-body, .container  {
	overflow:visible !important;
}

/*html {
	overflow:scroll !important;
}*/

.small, .small * {
	font-size:10px; 
}
	
select {
	padding-left:5px;
}

.link, .link td {
	text-decoration:underline;
	color: #993366;
}

.link, .link td:hover {
	color: #000000;
}

a img, img {
	border:0px none #000000;
}

h1.headertitle {
	display:inline;	
	margin-left:20px;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:24px; 
	font-weight:bold;
}

h1.report {
	display:block;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:18px; 
	font-weight:bold;
	margin:10px 0px 10px 0px;
}

h3 {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:16px; 
	font-weight:bold;
	margin:5px;
}

#header{
	min-width:960px; 
	max-width:1260px;
	margin-bottom:10px;
}
#content {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px; 
	min-width:960px; 
	max-width:1260px;
}
#footer {
	min-width:960px; 
	max-width:1260px;	
}

.portal {
	min-width:960px; 
	max-width:1260px; 
	border:solid 0px #000;
}
.portal .leftColumn {
	vertical-align:top; 
	padding-right:330px; 
	min-width:620px; 
}
.portal .rightColumn {
	vertical-align:top;
	float:right;
	width:320px;
	margin-left:-320px;
}
.portal	.bottomColumn {
	height:225px;
}
	
.tablebody.thead.th {font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold }
.tablebody.tbody.td {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	font-weight:normal;
}
.tablebody .subtitle {
	font-weight:bold;
}

.paneltable {
	width:100%;
	border-collapse: collapse;
	border:0px none #FF0000; 
	padding:0px;
	margin:0px;
	font-size:12px;
}

.paneltable .subtitle {
	font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;
}

table.newpaneltable {
	background-color:#FFF;	
	width:100%;
	font-size:12px;
	border-collapse: separate;
	border-spacing: 0;
	*border-collapse: collapse; /* hack is needed for IE7 also */	
}
table.newpaneltable td {
	background-color: #e3eab9;
	padding: 3px 2px 4px 3px;
	vertical-align: top;	
	border-top: 1px solid white;
	*position: relative;
}

.right {
	padding-right:5px;
	text-align:right; 
	float:right;
}
.left {
	padding-left:5px;
	text-align:left; 
	float:left;
}

.solidtable {
	border-collapse: collapse;
	border:0px none #FF0000; 
	padding:5px;
	margin:0px;
}
.solidtable thead th {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:14px; 
	font-weight:bold 
}
.solidtable tbody td {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	padding:5px;
}
.boldfont, tr.boldfont td, tr.boldfont th {
	font-weight:bold;
}

.alertbox {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12pt; 
	font-weight:bold; 
	color:#FF0000;
	padding:5px;
	display:none;
}

a.selecteditem, .selecteditem {
	background-repeat:no-repeat;
	background-position:left;
	background-image:url(/images/tick.png);
	padding-left: 20px;
	font-weight:bold;
	color:#000 !important;
	text-decoration:none;
}

.kassets {
	display:inline-block;
	width:250px; 
	vertical-align:top; 
	padding:5px 5px 5px 0px;
	zoom: 1;
	*display: inline;
}

#showhidecolumn {
	font-weight:bold;
}

#showhidecolumn ul { 
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	list-style-image: none;
	list-style-position: outside;
}

#showhidecolumn li {
	float: left;
	list-style-type: none;
	padding-right: 10px;
	padding-left: 18px;
	cursor:pointer;
	white-space:nowrap;		
}

#showhidecolumn li.on {
	background-image:url(/images/tick.png);	
	background-repeat:no-repeat;
}

#showhidecolumn li.off {
	background-image:url(/images/cross.png);
	background-repeat:no-repeat;
}

#showhidecolumn li:hover {
	text-decoration:underline; 
}
#showhidecolumn.small {
	font-size:10px; 
	line-height:15px;
}
.container {
	width: 100%;
}

.container-body, .container-body-hl {
	padding: 5px;
	padding-bottom:10px;
	position:relative;
	white-space:normal;
}

.container-body-nopadding, .container-body-hl-nopadding {
	padding: 0px;
	padding-bottom:0px;
	position:relative;
}

h2, div.warningbar {
	font-size:15px !important; 
	font-weight:bold;	
}

.container h2, .container h3, .container h4, .container .title, .container h2 a.iconlink {
	display: block;
	margin:0px;
	padding-left:5px;
	padding-right:2px;
	padding-top:2px;
	padding-bottom:2px;
}

.container .title {
	font-size:12px; 
	font-weight:bold;
	margin:0px;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:0px;
	padding-right:0px;	
}

form {
	margin:0px;
}

.info, .info_o, .add, .edit, .new, .save, .cancel, .delete, .icon, .yes, .no, .question, .person, .people, .erase, .duplicate, .split, .trash, .warning, .warningbar, .swap, .find , .skip {
	padding-right:3px;
	padding-left: 32px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-repeat:no-repeat;
	background-position:left;
	text-decoration:none !important;
}

/* 16 x 16 icons */
.yes_vsm, .edit_vsm, .save_vsm, .question_vsm, .cancel_vsm, .no_vsm, .question_vsm, .redo, .magnify_vsm, .checked, .run_vsm, .add_vsm {
	padding-right:3px;
	padding-left: 18px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-repeat:no-repeat;
	background-position:left;
	text-decoration:none !important;
}

.checked {
    background:#FFF url(/images/tick.png) scroll no-repeat left center;		
}
.add_vsm {
	background: transparent url(/images/add_vsm.gif) scroll no-repeat left center;
	padding-left: 20px;
}
.run_vsm {
	background: transparent url(/images/yes_vsm.gif) scroll no-repeat left center;
	padding-left: 28px;
	padding-top: 5px;
	padding-bottom: 5px;	 
}
.yes_vsm {
    background: transparent url(/images/tick.png) scroll no-repeat left center;	
}
.edit_vsm {
	background-image:url(/images/pencil_vsm.gif);
	padding-left: 20px;	
}
.save_vsm {
	background-image:url(/images/save_vsm.gif);	
}
.cancel_vsm {
	background-image:url(/images/cross.png);	
}
.no_vsm {
	background-image:url(/images/cross.png);
}
.question_vsm {
	background-image:url(/images/question_vsm.gif);
}
.magnify_vsm {
	background-image:url(/images/magnify_vsm.gif);
}

a.yes_vsm, a.edit_vsm, a.save_vsm, a.question_vsm, a.cancel_vsm, a.no_vsm, a.question_vsm, a..magnify_vsm, a.redo, a.run_vsm, a.add_vsm {	
	font-style:normal;
	font-weight:bold;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	display:inline-block;
	padding-right:3px;
}

/* Standard Icons */
.info {
	background-image:url(/images/about_sm.gif);
}
.info_o {
	background-image:url(/images/info_sm.gif);
	line-height:32px;
	padding-left:35px;	
}
.add {
	line-height:24px;
	background-image:url(/images/add_sm.gif);
}
.edit {
	background-image:url(/images/pencil_sm.gif);
	line-height:24px;
}
.save {
	background-image:url(/images/save_sm.gif);	
	padding-left:35px;	
	line-height:30px;
}
.cancel {
	background-image:url(/images/cancel_sm.gif);	
	padding-left:33px;	
	line-height:30px;
}
.delete {
	background-image:url(/images/erase_sm.gif);	
	line-height:30px;
}
.yes {
    background: transparent url(/images/yes_sm.gif) scroll no-repeat left center;	
	padding-left:35px;
	line-height:30px;
}
.no {
	background-image:url(/images/no_sm.gif);
	line-height:30px;
	padding-left:35px;
}
.question {
	background-image:url(/images/question_sm.gif);
	line-height:30px;
	padding-left:28px;
}
.redo {
	background-image:url(/images/redo_sm.gif);	
	padding-left: 30px;
}
.new {
	background-image:url(/images/new_sm.gif);
	padding-left:35px;	
	line-height:30px;	
}
.person {
	background-image:url(/images/person_sm.gif);
	padding-left:28px;	
}
.people {
	background-image:url(/images/people_sm.gif);
}
.erase {
	background-image:url(/images/eraser_vsm.gif);
	padding-left:20px;
	height: 16px; 
	display:block;
}
.duplicate, a.duplicate {
	background-image:url(/images/copy_sm.gif);
	line-height: 30px;
}
.split {
	background-image:url(/images/split_sm.gif);
}
.trash {
	background-image:url(/images/burndustbin_sm.gif);
}
.warning, .warningbar {
	background-image:url(/images/warning_sm.gif);
}
.swap {
	background-image:url(/images/swap_sm.gif);	
	padding-left:33px;	
	line-height:30px;
}
.find {
	background-image:url(/images/rs1_sm.gif);	
	padding-left:33px;	
	line-height:30px;
}
.skip {
	background-image:url(/images/playforwardforward_sm.gif);	
	padding-left:32px;	
	line-height:30px;
}

a.iconlink, a.info, a.info_o, a.add, a.edit, a.save, a.cancel, a.delete, a.icon, a.yes, a.no, a.question, a.new, a.person, a.people, a.erase, a.duplicate, a.split, a.trash, a.warning, a.swap, a.find, a.skip {	
	font-style:normal;
	font-weight:bold;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	display:inline-block;
	padding-right:3px;
}
img.iconlink, img.icontext {
	vertical-align:middle;
	padding-right:5px;
}

.iconwithtext {
	font-style:normal;
	display:inline-block;
	padding-right:5px;
	padding-left:6px;
	padding-bottom:3px;
}
a.iconlink img, a.iconwithtext img, .iconwithtext img, iconlink img {
	vertical-align: middle;
	padding-right:5px;
}

a.icononly img, icononly {
	vertical-align: middle;
	padding-right:5px;
	padding-left:5px;
}


/* start of styles required for jquery.tooltip */
#tooltip {
	font-size:12px; 
	position: absolute;
	z-index: 10000;
	border: 1px solid #111;
	background-color: #FFFFFF;
	padding: 5px;
	opacity: 0.85;
}

#tooltip h3, #tooltip div { 
	margin: 0;
	font-size:13px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
}

td.tooltips span {
	padding-right: 20px;
	background-image:url(/images/about_vsm.gif);
	background-repeat:no-repeat;
	background-position:right;
}
/* end of styles required for jquery.tooltip */

/* Use this if we want to hide something until page load, then in the body:
	<body>
	....
		<script type="text/javascript" language="JavaScript">
			document.body.className+=' hide';
		</script>     

	and then on page load: 
	$(document).ready(function() {
   		$(".tobehiddenWithJS").show(); 
	});  
*/

body.hide .tobehiddenWithJS, .hidebydefault{
	display:none;
}

.draggableelement {
	cursor:move;
}

table.table_no_wrap {
	width:100%;
	border-collapse:collapse;
	border-spacing:0px;
}

table.imgmiddlealign img, table.imgmiddlealign td {
	vertical-align:middle;
}

table.table_no_wrap td {
	white-space:nowrap;
}

input.large {
	width:330px; 
}

input[disabled=true], input[disabled=disabled] { 
	color:#777;
	background-color:#eee;
}

.greyedout {
	color:#666;
	font-style:italic;
}
input.greyedout, select.greyedout {
	color:#666;	
	font-style:normal;
}

.header-right {
	padding-top: 10px; 
	padding-right:8px; 
	padding-bottom: 0px;
	padding-left:0px;
	width: 200px; 
	text-align:right; 
	float:right;
}
.header-right .bold {
	font-weight:bold;	
}
.header-right a {
	text-decoration:none;
}
.header-right .date {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:17px; 
	font-weight:regular;
}

.subnav {
	padding:0px;
	margin:0px;	
}

.subnav a {
	font-weight:bold;
	text-decoration:none;
}

.subnav ul {
	list-style-type: none;
	list-style-image: none;
	list-style:none;
	padding:0px;
	margin:0px;		
	line-height:25px;
}

.subnav ul li {
	display:inline;
	padding-left: 7px;
	padding-right: 7px;
}

ul.headerlist {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	list-style-image: none;
	list-style:none;
	text-decoration:none;
	font-size:13px;
}

ul.headerlist li {
	float: left;
	font-weight:bold;
	padding-left:8px;
	padding-right:8px;
	padding-top:8px;
	padding-bottom:8px;
}

ul.headerlist li a {
	font-weight:bold;
	text-decoration:none;
}

/* Report Table - colours in ss1.css*/

.reporttable {
	width:100%;
	padding:0px;
	margin:0px;
	table-layout:fixed;
	border-spacing:0px; 
	display:none;
	*border-collapse: collapse; /* hack is needed for IE7 also */
}
.reporttable tr {
	text-align:left;
	padding:0px;
	margin:0px;
}
.reporttable td, .reporttable th {
	font-size:10px;
	border:solid #fff 1px;
	border-right:none;
	border-bottom:none;
	border-spacing:0px;
	vertical-align:top;
	padding-left:2px;
}

.reporttable td.header, .reporttable th.header {
	font-weight:bold;
	font-size:12px;
}

.reporttable td.date {
	font-weight:bold;
	font-size:16px;
}
.reporttable td.blankrow {
	border-left:none;
}
.reporttable td.category {
	font-size:12px;
	font-weight:bold;
}

.reporttable td.category .details_orgcode, .reporttable td.category .details_orgname {
	font-size:10px;
	font-weight:normal;
}

.reporttable span.details_absence, .reporttable span.details_holiday,  .reporttable span.shift_late, .reporttable span.shift_late_warn {
	display:block;
	width: 100%;
	padding-top:5px;
	padding-bottom:5px;
}

.reporttable span.details_absence *, .reporttable td.details_absence>span, .reporttable span.details_holiday *, .reporttable td.details_holiday>span {
	margin-left: 3px;
	margin-top: 2px;
	margin-bottom: 2px;	
}

.reporttable td.details_absence span.details_absence, .reporttable td.details_holiday span.details_holiday {
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;	
}
.reporttable thead tr th, .reporttable tbody tr th, .reporttable tfoot tr th {
	padding: 8px 3px 8px 3px;
}
.reporttable tbody td {
	padding: 3px 3px 4px 3px;
}

/* W3C browsers ignore *properties.  This hack is needed to get IE to display tables with 1px cell spacing since IE ignores the border-spacing property */
.reporttable td, .reporttable th {
	*border-bottom: 1px solid white;
	*border-left: 1px solid white;	
	*position: relative;
}
.reporttable th {
	*border-top: 1px solid white;
	*border-left: 1px solid white;	
	*position: relative;
}

.unbreakable {
	white-space:nowrap;
}

.divideline {
	height:3px;
	width:100%;
}

#scheduletable .hl {
}

#scheduletable .leftnav {
	padding-left:5px;
	padding-right:5px;
	white-space:nowrap;
}

hr {
	border: 0;
	height:3px;
	width:100%;
	margin-top: 7px;
	margin-bottom:10px;
	clear:both;
}

#shiftoptionsbox {
	position:absolute; 
	display:none; 
	width:800px;
	left:10px; 
	top:360px; 
	border:1px solid #000000;
	background-image:url(/images/empty1x1.gif);
	background-repeat:repeat;
}

#shiftoptionsbox .container-body {
	cursor:default;
	height:405px;
}

#shiftoptionsbox .container-body input, #shiftoptionsbox .container-body select {
	font-weight:normal;
	margin-bottom:3px;
	font-size:12px; 
}
#shiftoptionsbox .container-body span {
	font-weight:bold;
	padding-right: 13px;
	margin-bottom:3px;
}
#shiftoptionsbox .container-body .normal {
	font-weight:normal;
	padding-right: 0px;
	margin-bottom:0px;
}

#shiftoptionsbox #resultlist {
	clear: both; 
	max-height:290px; 
	overflow:auto;
}

#rotationoptionsbox {
	position:absolute; 
	display:none; 
	width:450px; 
	left:10px; 
	top:360px; 
	border:1px solid #000000;	
}
#rotationoptionsbox .container-body {
	font-weight:bold;
}

#rotationoptionsbox .container-body div {
	font-weight:bold;
	margin-bottom: 3px;
	display:inline-block;
	position:relative;
	/* display: inline-block for IE7 */
	zoom:1; 
	*display: inline; 
}
#rotationoptionsbox .container-body {
	cursor:default;
}

#rotationoptionsbox div.disabled {
	position:absolute;
	display:none;
/*	More tricks to get things to display properly for IE7; */
	background-image:url(/images/empty1x1.gif);
	background-repeat:repeat;
	top:0px; 
	left:0px; 
	width:100%; 
	height:100%; 
	z-index:10;
}

div.shift_functions {
	float:right; 
	vertical-align:top;
	padding-right:5px;
	text-align:right;
}

div.shift_functions .column {
	text-align:left;
	display:inline-block;
	*display: inline; 
	zoom:1; 
}

.spacing>img, .spacing>div, .spacing>form, .spacing>span, .spacing>a {
	padding-left:10px;
}

.popupform {
	float:left;
}
.popupform>div {
	padding-bottom:3px;
}

.scroll_checkboxes {
	display:inline-block;
    height: 40px;
	vertical-align:top; 
	zoom: 1;
	*display: inline;
    padding: 5px;
    overflow: auto;
    border: 1px solid #ccc	;
	white-space:nowrap;
	width:150px;
}

.staffNotesContainer {
	background:#E3EAB9;
	padding:5px;
	width:50%;
}

.staffNote {
	background:#CED5A4;	
	padding-top:0px;
}

.staffNote p {
	padding:10px;
}

.staffNote .subscript{
		font-size:.9em;
		font-weight:bold;
}

.horizontalMenu li {
	list-style-type:none;
	display:inline;
	padding:5px;
	overflow:auto;
	
}

.horizontalMenu li:hover {
	list-style-type:none;
	display:inline;
	padding:5px;
	background-color:#bEc594;
	overflow:auto;

}

.verticalMenu li {
	list-style-type:none;
	
	padding:5px;
	overflow:auto;
	
}

.verticleMenu li:hover {
	list-style-type:none;
	padding:5px;
	background-color:#bEc594;
	overflow:auto;

}
div.optionsDiv {
	/*width:1000px;*/
}
div.optionsDiv div {
	width:175px; display: inline-block;
	white-space: nowrap;
}
div.optionsDiv input[type='checkbox'] {
	position: relative;vertical-align: middle;bottom: 1px;
}
div.optionsDiv div label {
	padding-left:5px;
	display: inline-block;
	font-weight: bold;
	white-space: nowrap;
}
input.readonly, select.readonly {
	background-color : #eee;
}
input.error, select.error {
	border:2px solid red;
}
.darkCover {
	position:fixed;
	left:0px;
	top:0px;
	z-index:90;
	background-color:black;
	opacity:0.60;
	width:100%;
	height:100%;
}
div.pleasewait {
	padding-right:0px;
	padding-left: 80px;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-left:5px;
	background-repeat:no-repeat;
	background-position:left;
	text-decoration:none !important;
	background-image:url(/images/busyicon2.gif);
	font-size:16px; 
	font-weight:bold;
}

meter {
    /* Reset the default appearance */
    /*-webkit-appearance: none;*/
       -moz-appearance: none;
            appearance: none;

    margin: 0;
    width: 100px;
    height: .5em;

    /* Applicable only to Firefox */
    background: none;
    background-color: rgba(0,0,0,0.1);
}

meter.no-appearance {
  -webkit-appearance: none;
}

meter::-webkit-meter-bar {
    background: none;
    background-color: rgba(0,0,0,0.1);
}

meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }

meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }