/*--------------------------------------------

Project: Virtual Temp
Author: Carlo Esperat

---------------------------------------------*/

*, html { margin: 0; padding: 0; /*font: 12px Arial, Helvetica, sans-serif*/ font-family: Arial, san-serif; }
body {font-size: 10pt;}

/* START Main styles files from standard styles.css */
.header {background-color: lightskyblue; display: block; padding: 10px; font-size: 24pt; border-bottom: 1px solid #888;}
.menu_container {background-color: antiquewhite; display:block; text-align: center; padding: 5px;}
.submenu_link {margin-right: 15px;}
.report_link {margin-right: 5px;}
.content {margin: 15px; margin-left: 10%; margin-right: 10%;}
.footer {border-top: 1px solid #777; margin-top: 8px; padding: 3px; color: #777; font-size:8pt; text-align: right;}
.td_title {background-color: lightskyblue; color: black; font-weight: bold; padding: 5px;}
.td1 {background-color: #ddd; border: 1px solid #aaa; padding: 6px;}
.td2 {background-color: antiquewhite; border: 1px solid #aaa; padding: 6px;}
.form_label {display: block; color: #777; font-size: 9pt;}
.form_element {background-color: #dedede; color: #555; font-size: 12pt; border: 1px solid #bbb; border-radius: 3px; margin-bottom: 3px; padding: 6px; }
.form_validation_errors {display: none; border: 1px solid yellow; background-color: red; color: white; font-weight: bold; padding: 5px; border-radius: 4px;}
/* END Main styles files from standard styles.css */

/* START extra style definitions by JS */
.event { padding: 7px; }
.overdue_event {background-color: red; border: none; color: yellow; font-weight: bold; }
.overdue_event .report_link {color: yellow; font-weight: bold;}
.obvious_box {background-color: yellow; border: 1px solid red; padding: 4px; color: black; font-weight: bold;}
/* START extra style definitions by JS */

.fleft { float: left; }
.fright { float: right; }
.clear { clear: both; }
a { color: #155569; text-decoration: none; } a:hover { text-decoration: underline; }
#header {
	background: url(../images/header-bg.jpg);
	height: 150px; /*150px*/
	width: auto;
}
/*.wrapper, #content {
	margin: 0 auto;
	width: 910px;
}*/
.wrapper, #container {
	font: 12px Arial, Helvetica, sans-serif;
	margin: 0 auto;
	width: 889px; /*910*/
}

#content {
	font: 12px Arial, Helvetica, sans-serif;
	/*margin: 0 auto;
	width: 910px;*/
	margin: 15px 15px ;
}
.logo {
/*	background: url(../images/logo.gif) bottom no-repeat;
	display: block;
	height: 38px;
	margin: 0 0 18px 0;
	padding: 54px 0 0 30px;
	text-indent: -3000px;
	width: 275px;*/
	background: url(../images/header.jpg) no-repeat bottom;
	display: block;
	height: 102px;
	margin: 0 0 9px 0;
	padding: 0;
	text-indent: -3000px;
	width: 856px;
}
.text01 {
	display: none;
	height: 17px;
	margin: 50px 0 0 29px;
	text-indent: -3000px;
	width: 220px;
}
.nav {
	clear: both;
	margin: 0;
	height:26px;
	padding:6px 0 0;
	border-top: 1px solid #d9f0fb;
}
.nav li.logged {
	float: left;
	list-style: none;
	margin: 0 56px 0 0;
}
.nav li.loggedIT {
	float: left;
	list-style: none;
	margin: 0 36px 0 0;
}
.nav li.notlogged {
	float: left;
	list-style: none;
	margin: 0 99px 0 0;
}
.nav li:last-child {
	margin: 0;
}
.nav li a {
	color: #000;
	font: 14px "Segoe UI", Arial, Helvetica, sans-serif;
	text-decoration: none;
}
.nav li a:hover {
	color: #053a54;
}

.nav li .active {
	background-color: blue;
	border-radius: 5px;
}

#container {	
	margin: 15px auto;
}
h1 {
	color: #033b4d;
	font-size: 20px;
	font-weight: normal;
	letter-spacing:-1px
}
h2 {
	font-size: 18px;
	font-weight: normal;
	letter-spacing:-0.5px
}
#container p {
	color: #4c4b4a;
	padding: 6px 0 9px 0;
}
#container ul { margin: 0 0 0 15px; }
#container ul li { color: #4c4b4a; }
#container strong { font-weight: bold; }
.leftpanelw {
	background: #f0eeef;
	clear: both;
	height: 500px;
	margin: 0 7px 0 0;
	width: 20%; /* 225px */
	display: none;
}
.leftpane {
	background: #f0eeef;
	clear: both;
	height: 500px;
	margin: 0 7px 0 0;
	/*width: 270px;*/
	width: 17%; /* 225px */
}
.leftpane ul {
	margin: 20px 0 0 20px;
}
.leftpane li {
	color: #999;
	font-size: 14px;
	list-style: none;
	padding: 5px 5px 5px 10px;;
	text-decoration: none;
}
.leftpane li a {
	color: #999;
	font-size: 15px;
	text-decoration: none;
}
.leftpane li a:hover { color: #000; }
.leftpane .regsltd {
	background: #FFF;
	color: #000;
}
.mainpanelw {
	margin: 0 0 0 10px;
	width: 600px; /* 665px, 900 */
}
.mainpane {
	font: 12px Arial, Helvetica, sans-serif;
	margin: 0 0 0 10px;
	width: 80%; /* 665px, 900 *
	min-width: 800px;*/	
}
.mainpane2 {
	font: 12px Arial, Helvetica, sans-serif;
	margin: 0 0 0 10px;
	width: 98%; /* 665px, 900 *
	min-width: 800px;*/	
}
.lbl {
	clear: both;
	float: left;
	padding: 7px 0;
	width: 200px;
}
.lbl2 {
	float: left;
	padding: 7px 7px 18px 0;
	width: auto;
}
.lbl3 {
	float: left;
	padding: 7px 7px 7px 0;
	width: auto;
}
.lbl4 {
	float: right;
	padding: 7px 7px 7px 0;
	width: auto;
}
.dtls {
	float: left;
	width: 250px;
}
.dtls .txtbox, input, select {
	padding: 3px;
	/*width: 250px;*/
}
.spc { 
	margin: 35px 0 0;
}
input.btn, input.btn2 {
	font: 14px "Segoe UI", Arial, Helvetica, sans-serif;
	background: #0C7190;
	border: none;
	color: #FFF;
	padding: 7px 15px;
	/*text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);*/
	border-radius: 0.7em 0.7em 0.7em 0;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	width: auto;
	cursor:pointer;
}
input.btn:hover, input.btn2:hover { background:#155569; }
.btn2 { margin: 0 7px 0 0; }
.txtarea {
	height: 100px;
	padding: 3px;
	width: 252px;
}
.txtarea2 {
	height: 70px;
	padding: 3px;
	width: 500px;
}
.txtarea3 {
	height: 70px;
	padding: 3px;
	width: 152px;
}
.txtarea4 {
	height: 100px;
	padding: 3px;
	width: 500px;
}
.txtarea5 {
	height: 80px;
	padding: 3px;
	width: 700px;
}
.lbl01, .lbl02, .lbl03, .lbl04, .lbl05, .lbl06, .lbl07, .lbl08, .lbl09, .lbl10, .lbl11, .lbl12, .lbl13, .lbl14, .lbl15 {
	float: left;
	padding: 3px 0;
}

.lbl01 { width: 78px; } .dropdown01 { width: 65px; }
.lbl02 { width: 283px; } .lbl02 input { width: 261px; }
.lbl03 { width: 270px; }
.lbl04 { width: 201px; } .dropdown02 { width: 186px; } .txtbox01 { width: 410px; } 
.lbl05 { width: 200px; } .lbl05 input { width: 178px; }
.lbl06 { width: 225px; } .lbl06 input { width: 200px; } .lbl06 .txtbox02 { width: 184px; } 
.lbl07 { width: 428px; } .lbl07 input { width: 402px; } .txtbox03 { width: 250px; height:30px; } 
.lbl08 { width: 193px; } .lbl08 input { width: 185px; } .txtbox04 { width: 400px; height:40px; } 
.lbl09 { width: 660px; } .lbl05 input { width: 158px; } .txtbox05 { width: 500px; height:40px; } 
.lbl10 { width: 143px; } 
.lbl11 { width: 30px; }
.lbl12 { width: 160px; } 
.lbl13 { width: 220px; } .smallbox {width: 100px; } .dropdown05 { width: 45px; }
.lbl14 { width: 100px; } 
.lbl15 { width: 250px; }
.callans { font-style: italic; }
.spc1 { height: 20px; }
.dropdown04 { width: 186px; height: 200px; }
.lbl05 .rbtn { float: left; margin: 3px 7px 0 0; width: 12px; }
.lbl06 .rbtn { float: left; margin: 3px 7px 0 0; width: 12px; }
.login {
	background: #e2e0e0;
	margin: 61px auto 0;
	padding: 15px;
	width: 261px;
}
.dtls2 {
	width: 250px;
}
.spc2 {
	margin: 20px 0 0;
}
.spc3 {
	height: 50px; 
}
.spc4 {
	margin: 2px 0 0;
}
.savedmsg {
	background: #f3f09a;
	border: 1px solid #bfba3a;
	padding: 10px;
}
.savedmsg2Container {
	background: #95cf82;
	border: 1px solid #95cf82;
}
.savedmsg2 {	
	background: #95cf82;
	border: 1px solid #95cf82;
	padding: 7px;
}
.savedmsg3Container {
	background: #66CCFF;
	border: 1px solid #66CCFF;
}
.savedmsg3 {	
	background: #66CCFF;
	border: 1px solid #66CCFF;
	padding: 7px;
}
.row {
	clear: both;
	border-bottom: 1px solid #CCC;
	height: auto;
}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .c01, .c02, .c03, .col10, .col12, .col14, .col15, .col16 {
	padding: 7px 3px;
	/*border:1px solid red;*/
}
.col1 { width: 10%; }
.col2 { width: 30%; }
.col3 { width: 15%; }
.col4 { width: 15%; }
.col5 { width: 10%; }
.col6 { width: 10%; }
.col7 { width: 20%; }
.col8 { width: 5%; }
.col9 { width: 16%; }
.col10 { width: 60%; }
.col11 { width: 8%; }
.col12 { width: 20%; }
.col14 { width: 26%; }
.col15 { width: 12%; }
.col16 { width: 5%; }

.c01  { width: 70%; }
.c02  { width: 7%; }
.c03  { width: 10%; text-align: right; }
.c04  { width: 20%; text-align: right; }

/*.col1, .col3, .col5 {
	width: 102px;
}
.col2 { width: 144px; }
.col4 { width: 102px; }
.col6 { width: 54px; }
.col7 { width: 46px; }
.col8 { width: 81px; }
.col9 { width: 80px; }
.col10 { width: 70px; }
.col11 { width: 167px; }*/
.head, .row2 { background: #CCC; }
.head a { text-decoration:none; }
.edit, .add, .cancel, .delete, .instruct, .emp, .view, .department, .escallation, .viewevent {
	float: left;
	margin: 5px 11px 0 0;
	text-indent: -3000px;
}
.edit {
	background: url(../images/icon_edit.png) no-repeat;
	height: 16px;
	width: 16px;
}
.delete {
	background: url(../images/icon_delete.png) no-repeat;
	height: 16px;
	width: 16px;
}
.emp {
	background: url(../images/icon_emp.png) no-repeat;
	height: 16px;
	width: 16px;
}
.instruct {
	background: url(../images/icon_info.png) no-repeat;
	height: 16px;
	width: 16px;
}
.view {
	background: url(../images/icon_view.png) no-repeat;
	height: 16px;
	width: 16px;
}

.viewevent {
	background: url(../images/icon_eye.png) no-repeat;
	height: 16px;
	width: 16px;
}




.department {
	background: url(../images/icon_department.png) no-repeat;
	height: 16px;
	width: 16px;
}
.escallation {
	background: url(../images/icon_escalation.png) no-repeat;
	height: 16px;
	width: 16px;
}
.add {
	background: url(../images/icon-add.jpg);
	height: 10px;
	width: 10px;
}
.cancel {
	background: url(../images/icon-delete.jpg) no-repeat;
	height: 10px;
	margin: 5px 0 0;
	width: 9px;
}
.amt { text-align: right; }
.ovf { overflow: hidden; }
.logged {
	color: #000;
	float: right;
	margin: -72px 15px 0 0;
	width: auto;
	font-weight:bold;
}
.logged p { float: right; }
a.logout {
	background: #FFF;
	border-radius: 0.7em 0.7em 0.7em 0;
	color: #0a5c77;
	float: right;
	margin: -6px 0 0 15px;
	padding: 7px 15px;
	text-decoration: none;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
a.logout:hover {
	background: #e8f6fa;
}
/*#container {
	margin: 15px auto 50px;
	width: 800px;
}*/
.center { margin: 30px 0 0 65px; }
.row3 { clear: both; float: left; width: 23px; margin: 7px 0 0; }
.row3 input { margin: 3px 0 0; width: 18px; }
.row3i { float: left; width: 250px; margin: 7px 0 0; }
.text02 { clear: both; font-weight: normal; }
.text02 em { font-style: italic; }
.txtarea02 {
	height: 250px;
	padding: 3px;
	width: 750px;
}
.addmore { float: left; }
.ques01 { width: 270px; float: left; padding:6px 0; }
.addmore  { width: 18px; margin: 0 0 0 11px; }
.add01 { background: url(../images/icon-add-row.jpg); height: 18px; width: 18px; display: block; text-indent: -3000px; }
.del01 { background: url(../images/icon-del-row.jpg); height: 18px; width: 18px; display: block; text-indent: -3000px; }
.addcredits {
	background: url(../images/icon-add-credit.jpg);
	display: block;
	float: right;
	height: 18px;
	margin: 7px 15px 0 0; 
	text-indent: -3000px;
	width: 18px; 
}
.editcontact {
	background: url(../images/icon-edit.jpg);
	display: block;
	float: left;
	height: 9px;
	margin: 10px 10px 0 10px; 
	text-indent: -3000px;
	width: 9px; 
}
.okcredits {
	background: url(../images/icon-okay.jpg);
	display: block;
	float: right;
	height: 18px;
	margin: 7px 15px 0 0; 
	text-indent: -3000px;
	width: 18px; 
}
.okcontact {
	background: url(../images/icon-okay.jpg);
	display: block;
	float: left;
	height: 18px;
	margin: 7px 15px 0 0; 
	text-indent: -3000px;
	width: 18px; 
}
.acred-dis { border: 1px solid #FFF; width: 75px; text-align: right; }
.acred { width: 75px; text-align: right; }
.acred-dis2 { background: #f3f09a; border: 1px solid #f3f09a; width: 100px; text-align: left; font-weight:bold; }
.acred2 { width: 100px; text-align: left; }
.balance { width: 75px; text-align: right; }
.dropdown03 { width: 120px; }
.help { background: url(../images/icon-help.jpg); height: 16px; width: 16px; display: block; text-indent: -3000px; float: right; margin: 2px 15px 0 0;  }
.service-details {
	background: #e8e8e8;
	padding: 7px;
}
.noborder { border: none; }
.checkout { width: 275px; float: right; }
#container strong { font-weight: bold; }
.nr { color: #5d5b5b; }
.contact2 {
	background: #a8daea; 
	float: right;
	padding: 15px 25px;
	width: 230px;
}
.contact1 {
	float: left;
	width: 500px;
}

/* Validation */
.jsvalidation { height:15px; margin-top:5px; text-align:left; color: #FF0000; font-size: 10px; }
.dateDisplay {
	float: right;	
	text-align:right;
	width: 30%;
	color: #155569;
	font-size:20px;
	padding:20px 5px 5px 5px;
}
.pagination {
	float: right;	
	text-align:right;
	width: 30%;
	color: #155569;
	padding:5px 5px 5px 5px;
}
.pagination strong {
	font: 12px Arial, Helvetica, sans-serif;
	font-weight:bold;
	color: #155569;
	text-decoration:none;
}
.pagination a {
	font: 12px Arial, Helvetica, sans-serif;
	color: #155569;
	text-decoration:none;
}
.pagination a:hover {
	font: 12px Arial, Helvetica, sans-serif;
	color: #000;
	text-decoration:none;
}
/* CROSS SELECT */
/* ruler for measuring item width should be invisible */
.jqxs span {
	visibility:none;
	position:absolute;
}
.jqxs ul, .jqxs div {
	float:left;
	margin:4px;
	padding:0;
}

/* ie6 fix for float margin bug */
* html .jqxs ul, * html .jqxs div{
	margin:4px 2px;
	border:1px solid red;
}
.jqxs ul{
	border-top:2px solid gray;
	border-left:2px solid gray;
	border-bottom:2px solid silver;
	border-right:2px solid silver;
	overflow: auto;	
}
.jqxs ul, .jqxs li {
	padding:0;
	list-style:none;
	text-indent:0;
}
.jqxs li {
	padding: 0 2px;
	color:black;
	background:white;
	margin:0;
	cursor: pointer;
	overflow:hidden;
}

.jqxs li span {
	display:none;
}

.jqxs_optionsList li.jqxs_selected {
	display:none;
} 

.jqxs li.jqxs_focused {
	color:#fff;
	background:#ccc;
}

.jqxs input {
	width:90px;
	display:block;
	background: #155569;
	color:#fff;
}

/* not used in default style, but useful for applying custom button designs */
.jqxs input.jqxs_active {

}

.testwrapper ul { list-style: none; line-height: 28px; }
.testwrapper ul li { text-indent: 30px; background: url(../images/list.png) no-repeat 0 4px; }
.formMargin { margin-top:10px; }

.ug {
	background: #CCC;
	float: left;
    height: 102px;
    margin: 10px 3px 3px;
    padding: 14px;
    width: 20%;
}
ol { margin: 3px 0 19px; }
ol li, #container .collapse ul li { margin: 0 0 0 23px; padding: 3px 0; }
#container h2.expand2 { font-size:18px;font-weight:normal;color:#000; }
h2.expand { font-size: 12px; font-weight: bold; color: #155569; padding: 0 0 0 16px; background: url(../images/arrow-coll.gif) no-repeat left; }
h3 { padding: 7px 0; }
.collapse { padding: 0 0 0 16px; border-bottom: 1px solid #ccc; margin: 0 0 7px 0; }
#container .collapse ul { margin: 0 0 7px 0; }
ol ol { list-style: lower-alpha; color: #4C4B4A; margin: 3px 0; }
.red { color:#ff0000; }
.textBg { background:#FFFF99; }
.commentBg { background:#FFCCCC;  }
.borderRadTop { border-radius: 7px 7px 0 0; }
.borderRadBottom { border-radius: 0 0 7px 7px; }

/* homepage */

.lpane {
	margin:10px 0 0 0;
	width:565px;
	float:left; 
}
.lpane p, .lpane ul li { font-size:14px; }
.rpane {
	background:url(../images/iphone.jpg) no-repeat;
	width:293px;
	height:378px;
	float:left;
}
.rpane h3 { letter-spacing:-0.5px; }
.welfare {
	background:#b6d886;
	padding:10px 25px;
	clear:both;
	width:849px;
}
.welfare h3 {
	font:bold 18px "Segoe UI", Arial, Helvetica, sans-serif;
}
.makeanenq {
	background:url(../images/btn-enquiry.jpg);
	font-size:0;
	float:left;
	display:block;
	width:163px;
	height:45px;
	margin:15px 0 0;
}
.downloadbrochure {
	background:url(../images/btn-downloadbrochure.jpg);
	font-size:0;
	width:163px;
	height:45px;
	float:left;
	display:block;
	margin:15px 10px 0 0;
}
.hlogin:hover, .hlogout:hover {
	text-decoration:none; background: #155569; }
.rlogn { float: right; }
.hlogin, .hlogout {
	font-weight: bold;
	float: right;
	display: block;
    padding: 7px 15px;
    width: 150px;
	background: #0c7190;
	border: none;
	color: #FFF;
	padding: 12px 15px;
	border-radius: 0.7em 0.7em 0.7em 0;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	width: auto;
	cursor:pointer;
}
.hello {
	float:left;
	font:14px "Segoe UI", Arial, Helvetica, sans-serif;
	margin:13px 15px 0 0;
}
.situations {
	background:url(../images/situations.jpg);
	height:126px;
	width:844px;
}
#container .welfare ul {
	float:left;
	margin:15px 0 0 18px;
	width:400px;
}
.welfare ul li { font-size:14px; }
#container ul.check li {
	list-style-image:url(../images/check.gif);
	padding:3px 0;
}

/*Added by milo 20140313 for event/addevent*/
.dropdown{ 

  -webkit-appearance: none; /*Removes default chrome and safari style*/
  -moz-appearance: none; /* Removes Default Firefox style*/
  background: url('../images/dropdown_arrow.png') no-repeat;  /*Adds background-image*/
  background-color: #4285F4;
  background-border: 2px solid #2664C9;
  border: 2px solid #2664C9;
  background-position: 43px -1px;  /*Position of the background-image*/
  width: 70px; /*Width of select dropdown to give space for arrow image*/
  text-indent: 0.01px; /* Removes default arrow from firefox*/
  text-overflow: "";  /*Removes default arrow from firefox*/
   
  margin: 1px 5px 1px 0px;
  color: #fff;
 -moz-border-radius: 2x;
 -webkit-border-radius: 2px;
 -khtml-border-radius: 2px;
 border-radius: 2px;	      
}