/*

Trapeze Grey: 	#4A4A4A;
Trapeze Blue:	#E0E9F4;
Trapeze Red: 	#ae1939;
Trapeze Background Gray :  #3f3f3f;
Trapeze Blue Border: 81A7CC;
New Blue =287ab3;

Green = #94c55a


trapeze light blue #90C0DD
trapeze blue #4B8AAF
Trapeze background Grey: #D4D5D7

#A8ACB0;
#D4D5D7; 
grey: 3F3F3F;
*/


body {
    font: 9pt "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica,  sans-serif;
    background-color:#D4D5D7;
    text-align: center;
    color: #000000;
    margin: 0;
    padding: 0;
}


font.fontMainColored{
	color: 	#000000;
}

font.fontPrimaryColor{
	color: 	#ffffff;
	font-size: 15pt;
}

font.fontSecondColor{
	color: 	black;
	font-size: 10pt;
}
font.fontLightestColor{
	font: 8pt "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica,  sans-serif;
	color: #E0E9F4;
	font-weight: bold;
	
}

font.fontCalendarColored{
	color: #4B8AAF;
	font-size: 10pt;
	font-weight: bold;
}

font.fontLogin{
	font: 8pt "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica,  sans-serif;
	color: #E0E9F4;

}
font.fontAccentColor{
}

font.headerNameFont{
	color: #ffffff;
	font-size: 10pt;
	font-weight:bold;
}
font.headerDivisionFont{
	color: #E0E9F4;
	font-size: 9pt;
	font-weight:bold;
}


div.employeeHeader{
	align: center;
	width: 100%;
	height: 100px;
	background-color: #4B8AAF;
}

tr.employeeHeaderTR{
	height: 90px;
	width:100%;
}

td.employeeHeaderDesktopLogo{
	width: auto;
}

td.employeeHeaderDesktop{
	width: auto;
}

td.employeeHeaderMobileLogo{
	display: none;
}

td.employeeHeaderMobileText{
	display: none;
}

div.CopyRightFooter{
	width: 100%;
	height: 30px;
	background-color: #3f3f3f;
	font: 6pt;
	font-weight:bold;	
	color: #ffffff;
	padding-top: 8px;
	padding-bottom: 8px;
	
}
font.CopyRightFont{
	color: #ffffff;
	font: 10pt;
	font-weight:bold;
}

input
{	 
	font: 8pt "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica,  sans-serif;

}

.inputpaddle
{
	border:none;
	background-color: transparent;
	color:#4B8AAF;
	text-decoration: underline;
}



div.headerPicture
{
	width: 100%;
	height:80px;	
	background: url('../images/TopBackGround.JPG') no-repeat left top;
}

table.LoginMsgContent{
	width: 100%;
	border: none;
	padding: none;
	border-collapse: collapse;

}

td.loginSecondaryColor
{	
	background-color: #3f3f3f;
 	opacity:0.8;
 	filter:alpha(opacity=80); 
	padding-top: 100px;
}

td.LoginTable{
}
	
table.LoginTable{
}

td.MessageTable{
}


td.displayData{
	height: 20px;
}

.zebraLn1{
	background-color: white;
	border-bottom: #D3D3D3 1px dotted;
	vertical-align: top;
	/*
	border-left: #D3D3D3 1px solid;
	border-right: #D3D3D3 1px solid;
	*/
	font-size: 8pt;
}

.zebraLn2{
	background-color: white;
	border-bottom: #D3D3D3 1px dotted;
	vertical-align: top;
	/*
	border-left: #D3D3D3 1px solid;
	border-right: #D3D3D3 1px solid;
	*/
	font-size: 8pt;
}


.zebraLn1 td{
	border-bottom: #D3D3D3 1px dotted;
	border-left: #D3D3D3 1px transparent;
	border-right: #D3D3D3 1px transparent;
	padding: 4px;
}

.zebraLn2 td{
	border-bottom: #D3D3D3 1px dotted;
	border-left: #D3D3D3 1px transparent;
	border-right: #D3D3D3 1px transparent;
	padding: 4px;
}

td.InsideTD {
	border: 0px;
	padding: 0px;
}

.TextLabelItem{
	color: 	#000000;
	font-size: 1em;
	white-space: nowrap;
	font-weight:normal;
	text-align:left;
}
.TextDataItem{
	font-size: 1em;
	color: 	#000000;
	border:none;
	text-align: left;
	font-weight:bold;
}
.TextLabelItemSmall{
	color: 	#287ab3;
	font-size: 1em;
	white-space: nowrap;
	font-weight:bold;
}
.ContentHeader{
	text-align: left;
	font: 10pt "Century Gothic", "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
	font-weight:bold;
   	color:  #4B8AAF; 

}

.ContentFilter{
	width:100%;
	vertical-align: center;
}

.ContentFilterForm{
	float: right;
	vertical-align: center;
	width: 70%;
	margin:0px 0px 0px 0px; 
}

div.BodyBackground{
	
	margin: 0px;
	width: 100%;
	background-color: #E0E9F4;
}

div.OuterWrap{
	margin-top: 1px;
	margin-bottom: 2px;
	width:100%;
	min-height:550px;
	height: expression( this.scrollHeight < 550 ? "550px" : "auto" );	
	padding-top: 20px;
	/*background: url('../images/WebBackground.png');*/
}

div.BorderWrap{
	width: 91.666666%;
	margin: 0px 0px 0px 0px ; 
	background-color: #F0F0F0;
	border: 1px solid #4B8AAF;
	padding: 20px;
}

div.FooterHeaderWrap{
	width: 91.666666%;
	margin: 0px 0px 0px 0px ; 
	background-color: #4B8AAF;
	border: 2px solid #ffffff;
	padding-left: 1.666%;
	padding-right: 1.666%;

	padding-top: 10px;
	padding-bottom: 10px;

}

div.BorderTop{	
	width:100%;	
	height:20px;
	background: url('../images/BorderTop.png') no-repeat;
 	opacity:0.9;
 	filter:alpha(opacity=100); 
}
div.BorderBottom{
	width:100%;
	height:25px;
	background: url('../images/BorderBottom.png') no-repeat;
 	opacity:0.9;
 	filter:alpha(opacity=100); 
}
div.BorderMiddle{	
	width:100%;
	background: url('../images/BorderMiddle.png') repeat-y left top;
 	opacity:0.9;
 	filter:alpha(opacity=100); 
}
div.BorderInsideContent{
	width: 87.5%; 
	min-height:300px;
	height: expression( this.scrollHeight < 300 ? "300px" : "auto" );
	margin:0px 30px 0px 30px; 
}
div.BorderInsideHeaderFooterContent{
	color:white;
}

div.ContentArea{
	width: 100%; 
	overflow-y : hidden;
	overflow-x : hidden;
	POSITION : relative;
	OVERFLOW : auto;
}

div.BorderBottomLeft{
	width:100%; 
	height:30px; 
	margin:0px auto; 
	background:url('../images/BorderBottomLeftCorner.png') no-repeat left bottom; 
}

div.BorderBottomRight{
	height:30px;
	background:url('../images/BorderBottomRightCorner.png') no-Repeat right bottom;	
	margin: 0px 0px 0px 60px; 	
}

.BorderBottomLeft span{
	display:block; 
	position:relative; 
	right:2.5%;
	height:30px; 
	background:url('../images/BorderBottomSide.png') repeat-x right bottom; 
}
 #zebraLn1 td {  
	border-bottom: 1px dashed;
}
 #zebraLn2 td {;	
 	border: 1px transparent; 
	border-bottom: 1px dashed;
}
table.CalendarTemplate{
	width: 100%;
   	 BORDER-COLLAPSE: collapse;
   	 border:1px #D3D3D3 solid; 
     background-color: #ffffff;
   	 padding: 2px;
}

table.CalendarTemplateAsTable{
	width: 100%;
   	 BORDER-COLLAPSE: collapse;
   	 border:1px #D3D3D3 solid; 
     background-color: #ffffff;
   	 padding: 2px;
}

.CalendarRow
{
	height: 90px;
	border:1px #D3D3D3 solid; 
}

.CalendarDate
{
	border:1px #D3D3D3 solid; 
}

.borderOnMouse:hover{
	/*border: solid 1px #81A7CC;*/
}

.employeePicture
{
	margin-top:10px;	
}

#EmployeeImg{

		border:2px solid #C8C8C8;
}
.PictureCorners
{
height: 75px;
width: 75px;
background:url('../images/white_corners.png') no-repeat left top;
margin-top: -74px;
margin-left: 2px;
}

td.tdColored{
	background-color: #287ab3;
}

h1.colored, 
h2.colored, 
h3.colored,
h4.colored,
h5.colored,
h6.colored {
    color: #000000;
    border-bottom: 0px ;	
}

a.HelpLink:link {  font-family: "Century Gothic",Verdana, Arial, Helvetica, sans-serif; color: #287ab3; font-size:110%; 	text-decoration: none}
a.HelpLink:hover {  font-family: "Century Gothic",Verdana, Arial, Helvetica, sans-serif; color: #4A4A4A; font-size:110%; 	text-decoration: none}
a.HelpLink:visited {  font-family: "Century Gothic",Verdana, Arial, Helvetica, sans-serif; color: #3A6EA5; font-size:110%; 	text-decoration: none}

.HelpHeaderFont
{
	color: #4A4A4A;
	padding-bottom: 1.0em;
}

hr {
	border: 0;
   	height: 1px;
    color:  #d3d3d3;
    background-color: #d3d3d3;
}

.calendarRule
{
	border-top: 1px dashed #d3d3d3;
	border-bottom: transparent;
	border-left: transparent;
	border-right: transparent;
	color: transparent;
  	background-color: transparent;
}
.msgIcon
{
    position: relative;
	bottom: -25px;
}

.MainTitle{
	padding-top: 10px;
}

.ImagesColor
{
	border: 2px solid #81A7CC;
	background-color: #4B8AAF;
	border-radius: 10px;
	height: 40px;
	padding:6px;
}

.SmallerImage
{

	height:15px;
	padding:3px;
	border-radius: 100px;
	border: 1px solid #81A7CC;
	background-color: #4B8AAF;
	margin-right: 3px;

}

.SearchImage
{
	background-color: #4b8aaf;
	border-radius: 5px;
	height: 18px;
}

.GridImage
{

	height:15px;
	padding:3px;
	border-radius: 5px;
	border: 1px solid #81A7CC;
	background-color: #4B8AAF;
	margin-right: 3px;
}

.GridSpacerImage
{
	width:15px;
	height:0px;
	padding:4px;
	margin-right: 3px;
}

.HoverSearchImage
{
	background-color: #000000;
	border-radius: 5px;
	height: 18px;
}

#CalendarIconFromDate, #CalendarIconPeriodFromDate
{
	margin-left: 3px;
	height: 19px;
	background-color: #4B8AAF;
	border-radius: 5px;
	
	
}

#CalendarIconToDate, #CalendarIconPeriodToDate
{
	margin-left: 3px;
	height: 19px;
	background-color: #4B8AAF;
	border-radius: 5px;
	
	
}

#ToDate, #FromDate
{
	margin-bottom:3px;

}

#cancelButton
{
	margin-left: 3px;
}


/*Bid Request Icons*/
#ImportRequest, #RefreshRequest, #Prnt, #PrntPg, #EmployeeBankTypeId
{
	margin-right: 3px;
}


.DetailImage
{

	height:15px;
	padding:3px;
	border-radius: 5px;
	border: 1px solid #81A7CC;
	background-color: #4B8AAF;

}

.CopyImage
{

	height:15px;
	padding:3px;
	border-radius: 5px;
	border: 1px solid #81A7CC;
	background-color: #4B8AAF;

}

.MessageBorderTop
{
	border-top:2px solid #81A7CC; 
	border-left:2px solid #81A7CC;

}

.MessageBorderMid
{
	border-top:2px solid #81A7CC; 
	border-right:2px solid #81A7CC;

}

.MessageBorderBottom
{
	border-bottom: 2px solid #81A7CC; 
	border-right:2px  solid #81A7CC; 
	border-left:2px solid #81A7CC;

}

.header {
    background-color: #dee7ec;
    border-top: 1px solid #8cacbb;
    border-bottom: 1px solid #8cacbb;
    float: none;
    font-family:Arial; 
    margin: 0.5em 0em 0em 0em;
    padding: 0.5em 0em 0.5em 0em;
    text-align: center;
}

/* Any device with width less than 969 px */
@media screen and (max-width: 969px){
	/* 2px border between each "row" */
	.zebraLn2, .zebraLn1{
		border-bottom: #D3D3D3 2px solid;
	}
		
	/* No bottom border on last "row" */
	.zebraLn1:last-of-type, .zebraLn2:last-of-type{
		border-bottom: initial;
	}
	
	/* Losing screen size on mobile devices*/
	td.loginSecondaryColor{
		height: 160px;
		padding-top: 5px;
	}
	
	div.BorderInsideContent{
		margin:0px 0px 0px 0px; 
		width: 100%; 
	}
	
	div.BorderWrap{
		padding: 1px;
        width: 98%;
	}
	
	textarea.input{
		width: 14em;
	}
	font.headerNameFont{
	color: #ffffff;
	font-size: 8pt;
	font-weight:bold;
	}
	font.headerDivisionFont{
	display: inline;
	color: #E0E9F4;
	font-size: 7pt;
	font-weight:bold;
	}
	
	
	font.fontPrimaryColor{
	color: 	#ffffff;
	font-size: 10pt;
	}

	
	div.employeeHeader{
	align: center;
	width: 100%;
	height: 70px;
	background-color: #4B8AAF;
	}

	tr.employeeHeaderTR{
	height: 70px;
	width:100%;
	}

	td.employeeHeaderMobileLogo{
		display: block;
		width: 150px;

	}
	td.employeeHeaderMobileText{
		display: table-cell;
	}

	td.employeeHeaderDesktopLogo{
	display: none;
	width: auto;
	}
	
	td.employeeHeaderDesktop{
	display: none;
	width: auto;
	}

	td.LoginTable{
		width: 100%;
		align:center;		
		background-color: #3f3f3f;
		opacity:0.8;
		filter:alpha(opacity=80); 
	}
	
	table.LoginTable{
		width: 200px;
	}
	td.MessageContent{
		min-height: 200px;
	}
	
	
table.CalendarTemplate{
	width: 100%;
   	 BORDER-COLLAPSE: collapse;
   	 border:1px #D3D3D3 solid; 
     background-color: #ffffff;
   	 padding: 2px;
	}

	.CalendarRow
	{
		height: auto;
		border:1px #D3D3D3 solid; 
	}

	.CalendarDate
	{
		border:1px #D3D3D3 solid; 
	}

    #cancelButton
    {
	    margin-left: 0px;
    }
}


td.navMenu{
	padding-left: 10px;
	background-color: blue;
	valign: middle;
	width: 50px;
}

#navMenuImg{
    valign: middle;
	align: middle;
	margin-top: 15px;
	padding-left: 10px;
	width: 40px;
	height: 40px;
}

.LoginLabelFont {
    color: #ffffff;
}

.LoginButton {
    margin-left: 5px;
}

.LoginRememberMe {
    color: #ffffff;
    vertical-align: middle;
}

input.LoginRememberMe {
    margin-left: 4px;
    margin-right: 2px;
}

input.form-text::-ms-clear {
    display: none;
}