/* CSS Document */
body {
	background-color: #EEEEEE;
	margin: 0; padding: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
}
* { margin: 0; padding: 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
img { border: 0; }

.clear { clear: both; }

.line-space-double {
	height: 5px;
	background-color: #0099FF;
	border-top: 2px solid #0066CC;
	width: 100%;
	margin: 10px 0;
}

.content-wrap {
	position: relative;
	width: 900px;
	margin: 0 auto;
	background-color: #FFF;
	border: 1px solid #999;
	padding-top: 5px;
}

.title-border-bottom 
{
    font-size: 14px; font-weight: bold; border-bottom: 2px solid #0066CC;
    padding: 3px; text-transform: uppercase;
    width: 98%; margin: 5px auto;
}
.title-dark-blue-bg
{
    font-size: 14px; font-weight: bold; background-color: #0066CC;
    padding: 3px; text-transform: uppercase;
    width: 98%; margin: 5px auto; color: #FFFFFF;
}

/* Warning / Info Highlight */
.MsgBox{
    border: 1px solid #fed22f;
    background-color: #ffffcc;
    color: #363636;
    padding: 5px;
    width: 95%;
    margin:0 auto;
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 14px;
}
/* Default Link */
a{ color:#5078B3; text-decoration:none; }
a:hover{ color:#2E4d7B; text-decoration:underline; }

/*Text colors*/
.TextRed
{ color:#FF0000; }
.TextGreen
{ color:Green; }
.TextDarkBlue
{ color:#0066CC; }

/* Alignment */
.TextCenter
{ text-align: center; }
.TextRight
{ text-align: right; }

/* Login List */
#Login
{   width:100%; margin:0 auto; margin: 10% 0;  }
.LoginTable{
    width:300px;
    border:solid 1px #999;
    border-collapse:collapse;
    margin:0 auto;
    background-color: #FFFFFF;
}
    .LoginTable td {    font-size: 14px; padding: 3px;    }
    .LoginTable td input {    font-size: 14px; padding: 5px;    }
    .LoginTable td input[type="text"], .LoginTable td input[type="password"] {   width: 85%; border: 1px solid #666666;    }
    .LoginTable td.LoginHeader { font-size:14px; padding: 5px; background-color:#0066CC; color:#FFFFFF; }

	#logo-left {
		float: left;
		width: 45%;
	}
	#logo-left img { max-width: 250px; width: 100%; }
	#logo-right {
		float: right;
		width: 50%;
		text-align: right;
	}
	#logo-right img { max-width: 350px; width: 100%; }
	.navigation {
		position: relative;
		/*border: 1px solid #666;*/
		float: left;
		width: 60%;
	}
		.navigation ul {
			display: block;
			list-style:none;
		}
		.navigation ul li {
			float: left;
			margin: 5px;
			text-align: center;
			color: #FFFFFF;
		}
		.navigation ul li a {
			padding: 5px;
			line-height: 20px;
			color: #FFFFFF;
			background-color: #0066CC;
			text-decoration: none;
		}
		.navigation ul li a:hover {
			background-color: #0099FF;
		}
		.navigation ul li a.navSelected { border: 1px solid #0066CC; background-color: #0099FF; }
	.logout {
		float: right;
		text-align: right;
		width: 35%;
		padding: 0 1%;
	}

	.dashboard {
		width: 98%;
		margin: 0 auto;
		margin-top: 10px;
		border-top: 1px dotted #666;
	}
	.dashboard table {
		width: 100%;
		margin: 0 auto;
		border-collapse: collapse;
	}
	.dashboard table#CA-List tr td { padding: 3px; }
	.filter-area, .view-ca
	{
        width: 100%; background-color: #F0F0F0;
        border: 1px solid #666666; margin: 10px auto;
    }
    .filter-area table, .GridTable { width: 100%; }
	.filter-area table#CA-Filter tr td, .GridTable tr td, .GridTable tr th { padding: 3px; vertical-align: middle; }
	.filter-area table#CA-Filter tr td table tr td { padding: 0; } /*Calendar extender*/
	
	.GridTable tr td table { width: auto; }
	.ViewLink { padding: 2px; background-color: #0099FF; border: 1px solid #0066CC; text-align: center; color: #FFFFFF; font-size: 12px; }
	.ViewLink:hover { background-color: #DDDDDD; text-decoration: none; color: #0066CC; }
	 
	#CA-AppTable { width: 90%; margin: 0 auto; margin-top: 10px; border: 1px dotted #CCCCCC; }
	#CA-AppTable tr td { padding: 3px; vertical-align: top; }
	
	.CA-Details { width: 98%; margin: 5px auto; }
	.ViewCATable { width: 100%; margin: 0 auto; color: #333333; }
	.ViewCATable tr td { padding: 3px 0; }
	.ReadOnlyTextField { background-color: #F0F0F0; color: #0066CC; }
	
	
	.LightGrayHeader { font-size:14px; padding: 5px; background-color:#DDDDDD; color:#0066CC; }
	
	select {    font-size: 14px; border: 1px solid #666666;   }
	select option {  font-size: 14px; padding: 5px; }
	input, textarea {    font-size: 14px; padding: 5px; border: 1px solid #666666;   }
	input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {    border: 1px solid #0066CC; background-color: #99CCFF; cursor: pointer;    }
	input[type="submit"]:hover, input[type="submit"]:focus { background-color: #0099FF; cursor: pointer; color: #FFFFFF; }
	input[type="image"] { padding: 0; border: 0; margin: 0; }
	textarea { width: 90%; }
	
	#footer {
		background-color: #CCC;
		width: 100%;
		text-align: right;
		font-size: 12px;
		margin-top: 10px;
		color: #444;
	}
	#footer .footer-content { padding: 5px 10px; }
	#footer .footer-content .version { font-size: 10px; color: #666; }
	
	/* Pop-up Modal */
    .modalBackground {
	    background-color:Black;
	    filter:alpha(opacity=80);
	    opacity:0.8;
    }
    .ModalPopup {
	    background-color:#FFFFFF;
	    border: 3px solid #CCCCCC;
	    padding-top:10px;
	    padding-left:10px;
	    width:500px;
	    height:250px;
    }
    
    /* Print CSS */
    #tablePrintReport * { font-family: Arial; padding: 2px; }
    .CA-Form-Title { font-size: 18px; font-weight: bold; }

/* for 900px or less */
@media screen and (max-width: 900px) {
	.content-wrap { width: 95%; }

}

/* for 420px or less */
@media screen and (max-width: 420px) {
	.logout, .navigation { width: 95%; float: none; clear: both; text-align: center; }
	.logout { margin-bottom: 10px; }
    .LoginTable { width: 90%; }
}