/*
Main css file for "WebTools" framework.
Author  Matteo Morelli
Version 2.2
*/

			/*Standard page style */ 
/* debug */	.PageBody {background-image: url("/images/development.png"); font-size: 12px; font-family: Arial; color: #000000;}
			.AlertNote {font-weight: normal; font-size: 12px; font-family: Arial; color: #FF0000;}

			/*Web nodes */
			.WebNode {border: 1px solid #000000; background-color: #C0C0C0; padding: 2pt;}
			/* .WebNode {border: 1px solid #000000; background-color: #FFFFFF; padding: 2pt;} */
/* debug */ .DarkWebNode {border: 0px solid #000000; background-color: #ea5f60; adding: 2pt;}

			/*Web frames */
/* debug */	.WebFrameHeader {border: 1px dotted #778; background-color: #b6ecc4; color: #000000; position: relative; top: 10px; left: 10px; white-space: nowrap;}
/* debug */	.WebFrameBody {border: 1px dotted #778; background-color: #adbdd8; padding-top: 10px; padding-bottom: 5px;}

			.WebFrameHeaderR1 {border: 1px dotted #778; background-color: #b6ecc4; color: #000000; position: relative; top: 10px; left: 10px; white-space: nowrap;}
			.WebFrameBodyR1 {border: 1px dotted #778; background-color: #feff37; padding-top: 10px; padding-bottom: 5px;}
			.WebFrameHeaderR2 {border: 1px dotted #778; background-color: #b6ecc4; color: #000000; position: relative; top: 10px; left: 10px; white-space: nowrap;}
			.WebFrameBodyR2 {border: 1px dotted #778; background-color: #ff8837; padding-top: 10px; padding-bottom: 5px;}
			.WebFrameHeaderR3 {border: 1px dotted #778; background-color: #b6ecc4; color: #000000; position: relative; top: 10px; left: 10px; white-space: nowrap;}
			.WebFrameBodyR3 {border: 1px dotted #778; background-color: #f44336; padding-top: 10px; padding-bottom: 5px;}
			.WebFrameHeaderDoubtful {border: 1px dotted #778; background-color: #b6ecc4; color: #000000; position: relative; top: 10px; left: 10px; white-space: nowrap;}
			.WebFrameBodyDoubtful {border: 1px dotted #778; background-color: #f44336; padding-top: 10px; padding-bottom: 5px;}

			.WebSheet {border: 1px solid #000000; background-color: #FFFFFF;}
			.WebSheetTitle {border: 0px solid #000000; background-color: #FFFFFF; font-weight: bold; font-size: 16px; font-family: Arial; color: #000000; text-align:center;}
			.WebSheetDescription {border: 0px solid #000000; background-color: #FFFFFF; font-weight: normal; font-size: 12px; font-family: Arial; color: #000000; text-align:left;}
			.WebSheetContent {border-top: 1px dotted #444444; background-color: #FFFFFF; font-weight: normal; font-size: 12px; font-family: Arial; color: #000000; text-align:left;}


			/*Web tabs */
			.TabsList {padding: 3px; margin: 0px; border-bottom: 0px solid #778; font: bold 12px Verdana, sans-serif; }
			.TabsHeader {list-style: none; margin: 0; display: inline; }
			.TabLink {padding: 2px 0.5em 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #CCCCCC; text-decoration: none; }
			.CurrentTab {padding: 2px 0.5em 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: 1px solid #FFFFFF; background: #FFFFFF; text-decoration: none; }
/* debug */	.TabContent {background-image: url("/images/development.png");  padding: 1px 1px 1px 1px; margin: 0px; border: 1px solid #778;  text-align: left; vertical-align: top; }

			/*Web data tables */
			.DataTable {border: 1px solid #778; border-collapse: collapse; border-spacing: 0; }
			.DataTableTitle {border: 1px solid #778; background-color: #FFFFFF; position: relative; top: 10px; left: 5%; text-align: center;}
			.TableHeader{border: 1px solid #778; padding-top: 8px; text-align: center;}
			.TableHeaderSortable {border: 1px solid #778; padding-top: 8px; text-decoration: none; text-align: center;}
			.TableHeaderSortableLink {border: 0px solid #778; padding-top: 8px; text-decoration: none; text-align: center;}
			.TableHeaderArrow {font-weight: bolder; text-decoration: none;}
			.TableBorderBottom {border-bottom: 1px solid #000;}
			.TableBorderTop {border-top: 1px solid #000;}
			.TableBorderTitle {border-bottom: 2px solid #000;}
			.TableBorderBottomGray {border-bottom: 1px solid gray;}
			.TableBorderTopGray {border-top: 1px solid gray}
			.TableBorderTitleGray {border-bottom: 2px solid gray;}
			.DataRow {background: #FFFFFF; border: 1px solid #778;}
			.DataRow:hover {background: #daba72}
			.AlternateDataRow {background: #E9E9E9; border: 1px solid #778;}
			.AlternateDataRow:hover {background: #daba72}
			.AlternateDataRow1 {background: #D0D0D0; border: 1px solid #778;}
			.AlternateDataRow1:hover {background: #daba72}
			.AlternateDataHighlight {background: #FFFF00; border: 1px solid #778;}
			.DataCell {border: 1px solid #778;}
			.DataCellDark {border: 1px solid #778; background: #E9E9E9;}
			.DataCellBold {font-weight: 900; color: #000000;}
			.DataCellStampToday {border: 2px solid #91e2c4;}
			.DataCellStampWeekend {background: #A0A0A0;}
			.DataCellStampWeekendToday {background: #A0A0A0; border: 2px solid #91e2c4;}
			.DataCellStampBankHoliday {background-color:#ce8686;color:white;}
			.RecordControlArea{border: 1px solid #778; border-top: 0px solid #778; padding-top: 1px; text-align: center; padding: 2px; position: relative; left: 1%; width: 30%; white-space: nowrap;}
			.RecordControlButton{border: 1px solid #777777; font-family: Arial; font-weight: normal; font-size: 12px; color: #000000;}
			.RecordControlText{border: 0px solid #777777; text-align: center;}


			/*Web details layer */
			.DetailsLayer{border: 0px solid #778; text-align: left; padding: 2px; margin: 2px; background: yellow; cursor:help;}
			.DetailsLayerText {background: yellow; text-decoration: none; cursor:help;}

			/*Web detays menu */
			.DetailsMenuTitle{border: 0px solid #778; text-align: left; cursor: pointer;}


			/*Main Menu nodes */
			.MainMenuHeader{ width: 99%; font-weight: normal; }
			.MainMenuHeader:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
			.MainMenuHeader ul{border: 1px solid #BBB; border-bottom: 0px solid #BBB;width: 100%; height: 14px; background: #FFFFFF; padding: 4px 0; margin: 0; text-align: left; }
			.MainMenuBar{ width: 99%; font-weight: bold; }
			.MainMenuBar:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
			.MainMenuBar ul{border: 1px solid #BBB; width: 100%; height: 14px; background: url(chromebg.gif) center center repeat-x; padding: 4px 0; margin: 0; text-align: left; }
			.MainMenuBar ul li{ display: inline; }
			.MainMenuBar ul li a{ color: #494949; padding: 4px 7px; margin: 0; text-decoration: none; border-right: 1px solid #DADADA; }
			.MainMenuBar ul li a:hover{ background: url(chromebg-over.gif) center center repeat-x; }
			.MainMenuBar ul li a[rel]:after{ content: " " }
			.MainMenuDrop{ position:absolute; top: 0; border: 1px solid #BBB; border-bottom-width: 0; font:normal 12px Verdana; line-height:18px; z-index:100; background-color: white; width: 200px; visibility: hidden; filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); }
			.MainMenuDrop a{ width: auto; display: block; text-indent: 3px; border-bottom: 1px solid #BBB; padding: 2px 0; text-decoration: none; font-weight: bold; color: black; }
			.MainMenuDrop a:hover{background-color: #F0F0F0;}
			.MainMenuPrinter {border: 1px dotted #778; background-color: #DDDDDD; padding-top: 8px; }

			/*Web form */
			.WebInputActive {border: 1px solid #888888; font-size: 12px; font-family: Arial; color: #000000; background-color: #FFFFFF;}
			/*
			.WebInputUnvalid {border: 1px solid #000000; font-size: 12px; font-family: Arial; color: #000000; background-color: #FAC1A9;}
			*/
			.WebInputUnvalid {border: 1px solid #000000; font-size: 12px; font-family: Arial; color: #000000; background-color: #ff9e9e;}
			.WebInputFixed {border: 0px solid #000000; border-bottom: 1px dotted #000000; font-size: 12px; font-family: Arial; color: #000000; background-color: transparent;}
			/* .WebInputFixedWithFrame {border: 1px dotted #000000; font-size: 12px; font-family: Arial; color: #000000; background-color: transparent;} */
			.WebInputSubmitting {border: 1px solid #000000; font-size: 12px; font-family: Arial; color: #444444; background-color: #999999;}
			.WebInputLabel {font-family: Arial; font-size: 12px; color: #000000;}
			.WebInputLabelRO {border: 0px solid #000000; font-size: 12px; font-family: Arial; color: #000000; background-color: transparent; text-align: right;}
			.WebInputCharsCount {background-color: transparent; border: 0px solid #777777; text-align: center;}
			.WebButtonActive {font-size: 12px; font-family: Arial; }
			.WebButtonDisabled {font-size: 12px; font-family: Arial; }
			.WebButtonSubmitting {font-size: 12px; font-family: Arial;}
			.WebLabel {border: 0px solid #000000; font-size: 12px; font-family: Arial; color: #000000; background-color: transparent; text-align: right;}
			.WebPanelDivision {border-left: 0px dotted #000000; padding: 4pt; text-align: left; vertical-align: top;}


.collapsible {
  margin-left: 10px;
	background-color: #adbdd8;
	color: white;
	cursor: pointer;
	padding: 0px;
	/* width: 100%; */
	/* border: none; */
  	text-align: left;
	/* outline: none; */
/* '  	font-size: 15px; */
}

.active, .collapsible:hover {
  background-color: #adbdd8;
}

.collapsible:before {
	content: '\002B';
	color: white;
	font-weight: bold;
	float: left;
	font-size: 15px;
	margin-top: 0px;
  margin-left: 25px;
}
.active:before {
  content: "\2212";
}

.content0 {
  margin-left: 43px;
  margin-bottom: 10px;
  padding: 0px 0px 0px;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #adbdd8;
}
.content2 {
  margin-left: 44px;
  margin-bottom: 10px;
  padding: 0px 6px 0px;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #adbdd8;
}

.sDown {		/* JQuery function help with this */
  transition: 0.5s ease;
  z-index:1;
  cursor:zoom-in;
}
.zoomDown {
  transform: scale(15) translate(-20px,10px);
  cursor:zoom-out;
  z-index:2;
}
.sLeftDown {		/* JQuery function help with this */
  transition: 0.5s ease;
  z-index:1;
  cursor:zoom-in;
}
.zoomLeftDown {
  transform: scale(15) translate(-40px,10px);
  cursor:zoom-out;
  z-index:2;
}
.sLeft {		/* JQuery function help with this */
  transition: 0.5s ease;
  z-index:1;
  cursor:zoom-in;
}
.zoomLeft {
  transform: scale(15) translate(-40px,0px);
  cursor:zoom-out;
  z-index:2;
}


.sUp {		/* JQuery function help with this */
  transition: 0.5s ease;
  z-index:1;
  cursor:zoom-in;
}
.zoomUp {
  transform: scale(15) translate(-40px,-20px);
  cursor:zoom-out;
  z-index:2;
}


.sMain {		/* JQuery function help with this */
  transition: 0.5s ease;
  z-index:1;
  cursor:zoom-in;
}
.zoomMain {
  transform: scale(3) translate(-200px,50px);
  cursor:zoom-out;
  z-index:2;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



/* Calendar control */
#CalendarControlIFrame {display: none; left: 0px; position: absolute; top: 0px; height: 250px; width: 250px; z-index: 99;}
#CalendarControl {position:absolute; background-color:#FFF; margin:0; padding:0; display:none; z-index: 100; }
#CalendarControl table {font-family: arial, verdana, helvetica, sans-serif; font-size: 8pt; border-left: 1px solid #336; border-right: 1px solid #336;}
#CalendarControl th {font-weight: normal;}
#CalendarControl th a {font-weight: normal; text-decoration: none; color: #FFF; padding: 1px;}
#CalendarControl td {text-align: center;}
#CalendarControl .header {background-color: #777777;}
#CalendarControl .weekday {background-color: #DDD; color: #000;}
#CalendarControl .weekend {background-color: #FFC; color: #000;}
#CalendarControl .current {border: 1px solid #339; background-color: #336; color: #FFF;}
#CalendarControl .weekday,
#CalendarControl .weekend,
#CalendarControl .current {display: block; text-decoration: none; border: 1px solid #FFF; width: 2em;}
#CalendarControl .weekday:hover,
#CalendarControl .weekend:hover,
#CalendarControl .current:hover {color: #FFF; background-color: #336; border: 1px solid #999;}
#CalendarControl .previous {text-align: left;}
#CalendarControl .next {text-align: right;}
#CalendarControl .previous,
#CalendarControl .next {padding: 1px 3px 1px 3px; font-size: 1.4em;}
#CalendarControl .previous a,
#CalendarControl .next a {color: #FFF; text-decoration: none; font-weight: bold;}
#CalendarControl .title {text-align: center; font-weight: bold; color: #FFF;}
#CalendarControl .empty {background-color: #CCC; border: 1px solid #FFF;}

/* Progress bar */
.ProgressBar {background-color: #cccccc; border: 1px solid black; padding: 0px;}
.ProgressBarGauge {position: relative; top: 0px; left: 0px; background-color: navy; padding-top: 5px; padding:0px;}
.ProgressBarText {position: relative; top: 0px; left: 0px; color:#f0ffff; text-align: center; font: bold; padding: 0px; padding-top: 5px;}
.PageLoadProgressBar {position: fixed; bottom: 15px; left: 10px; width: 100px; z-index:100; height: 15px; background-color: #cccccc; border: 1px solid black; padding: 0px;opacity: 0.5}
.PageLoadProgressBarGauge {position: relative; top: 0px; left: 0px; background-color: navy; padding-top: 5px; padding:0px;}

/* Modal window */
#popupMask {position: absolute;	z-index: 200; top: 0px;	left: 0px; width: 100%;	height: 100%; opacity: .4; filter: alpha(opacity=40);
	/* this hack is so it works in IE
	 * I find setting the color in the css gives me more flexibility 
	 * than the PNG solution.
	 */
	background-color:transparent !important;
	background-color: #333333;
	/* this hack is for opera support
	 * you can uncomment the background-image if you don't care about opera.
	 * this gives you the flexibility to use any bg color that you want, instead of the png
	 */
	background-image/**/: url("maskBG2.png") !important; // For browsers Moz, Opera, etc.
	background-image:none;
	background-repeat: repeat;
	display:none;
}
#popupContainer {position: absolute; z-index: 201; top: 0px; left: 0px; display:none; padding: 0px;}
#popupInner {border: 2px solid #000000;	background-color: #ffffff;}
#popupFrame {margin: 0px; width: 100%; height: 100%; position: relative; z-index: 202;}
#popupTitleBar {background-color: #486CAE; color: #ffffff; font-weight: bold; height: 1.3em; padding: 5px; border-bottom: 2px solid #000000; border-top: 1px solid #78A3F2; border-left: 1px solid #78A3F2; border-right: 1px solid #204095; position: relative; z-index: 203;}
#popupTitle {float:left; font-size: 1.1em;}
#popupControls {float: right; cursor: pointer; cursor: hand;}


.CellHeader {border: 1px solid #FFFFFF; background-color: #9090FF; font-weight: bold; font-size: 12px; font-family: Arial; color: #000000; padding: 1pt;}
.CellHeaderSort { background-color: #9090FF; font-size: 12px; font-family: Arial; color: #000000; padding: 1pt; text-decoration:none;}
.CellData0 {border: 1px solid #FFFFFF; background-color: #CCCCCC; font-weight: normal; font-size: 12px; font-family: Arial; color: #000000; padding: 1pt;}
.CellData1 {border: 1px solid #FFFFFF; background-color: #D7D7D7; font-weight: normal; font-size: 12px; font-family: Arial; color: #000000; padding: 1pt;}
.LightCell {background-color: #CCCCCC; border-right: 1px dotted #000000; border-bottom: 1px dotted #000000; font-weight: normal; font-size: 12px; font-family: Arial; color: #000000;}
.HiddenCell {background-color: #CCCCCC; border: 0px solid #FFFFFF; font-weight: normal; font-size: 12px; font-family: Arial; color: #000000; padding: 2pt;}
.Note {font-weight: normal; font-size: 10px; font-family: Arial; color: #000000;}
.MainMenuItem {font-weight: bold; font-size: 13px; font-family: Arial; color: #000000; text-decoration:none;}
.MainMenuVoice {font-weight: normal; font-size: 13px; font-family: Arial; color: #000000; text-decoration:none;}
A:link {font-weight: normal; font-size: 12px; font-family: Arial; color: #000000;}
A:visited {font-weight: normal; font-size: 12px; font-family: Arial; color: #000000;}
A:hover {font-weight: normal; font-size: 12px; font-family: Arial; color: #0000FF;}
SELECT {border: 1px solid #000000; Font-size: 12px; font-family: Arial; Color: #111111;}
/* INPUT {border: 1px solid #777777; font-family: Arial; font-weight: normal; font-size: 12px; color: #000000;} */


/* class created to mask clock pictogram in input type 'time'. It is used in the TimeStamp popup entry  */
.DateTime        {color: #000000; } /*border: 1px solid #888888; font-size: 12px; font-family: Arial; color: #000000; background-color: #FFFFFF; border-radius: 5px;}*/  /*  height: 16px;  margin: 1px 0; width: 40px;*/
.DateTimeUnvalid {color: red; } /*border: 1px solid #000000; font-size: 12px; font-family: Arial; color: #000000; background-color: #ff9e9e; border-radius: 5px; height: 20px;width: 40px;}*/
input[type="time"]::-webkit-calendar-picker-indicator { display: none;}