* {
	font-family:	Verdana, Geneva, Arial, san-serif;
	font-size:10pt;  /* if this is changed, change NormalText as well */
}

body {
	margin:0px;
	background-color:#ffffff;
}
	
img {
	border:0
}

/* main header for forms, pages, etc */
h1 {
	font-size:1.1em;
	background-color: #D8E4F1;
	text-align:center;
	padding:5px 0px;
}

/* left aligned header */
h2 {	
	font-size:1.1em;
	padding:5px;
	margin:5px;
	border-bottom:black 1px solid;
}

/* center aligned header with standard padding/margins */
h3 {
	text-align:center;
	padding:3px;
}

/* left aligned header, no padding or margin */
h4 {
	margin:0px;
	padding:0px;
}

h5 {	
	background-color:	#F1EEDA;
	text-align:center;
	padding:3px;
	margin:3px;
}

h6 {
	color:black;
	margin:0px;
	padding:0px;
}

a {
	color:#be4c00;
	background-color: inherit;
	text-decoration:underline;	
}

p {
	margin:15px;
}

table {
	width:100%;
	cell-spacing:2px;
	border-collapse:collapse;
}

table tr th {
	text-align:right;
}

table tr td {
	text-align:left;
}

table.rowData {
	width:100%;
	cell-spacing:2px;
	border-collapse:collapse;
}

table.rowData tr th {
	text-align:left;
	background-color:#E3DEBB;
	font-size:.9em;
}

table.rowData tr td {
	font-size:.9em;
}

table.pinChange {
	width: 75%;
	cell-spacing: 3px;
	margin: 10px auto;
	background-color: #E3DEBB;
}

table.pinChange tr th {
	text-align: right;
	width: 40%;
}

table.pinChange tr td {
	text-align: left;
	width: 60%;
	padding: 5px 20px;
}

ul {
	text-align:left;
}

ul li {
	margin-top:10px;
}

ol li {
	margin-top:10px;
}

.noPrint {
	display:none;
}

/* HEADER STYLES */
.siteHeader {
	font-size:		1.2em;
	font-weight:	700;
	color:			#660099;	
}


/* 2 column fluid layout*/
/* column container */
.colMask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
}

/* common column settings */
.colRight,
.colMid,
.colLeft {
	float:left;
	width:100%;
	position:relative;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:1em 0 1em 0;
	overflow:hidden;
}

/* 2 Column (left menu) settings */
.leftMenu {
	background:#fff;		/* right column background color */
}
.leftMenu .colLeft {
	right:74%;			/* right column width */
	background:white;	/* left column background color */
}
.leftMenu .col1 {
	width:74%;			/* right column (mainContent) content width */
	left:99%;			/* 100% plus left column left padding */	
	border:purple 1px solid;
	margin:.5em 0;
	padding:0;
}
.leftMenu .col2 {
	width:22%;			/* left column (sideContent) content width (column width minus left and right padding) */
	left:1%;			/* (right column left and right padding) plus (left column left padding) */
	margin:.5em 0;
	padding:0;
}

/* MAIN CONTENT */

.smallText {
	font-size: .8em; 
	font-style: normal; 
	font-weight: normal;
}

.textRed {
	color:red;
}

/* errorMessageClass and userMessageClass are used in the common utility function */
.errorMessageClass {
	text-align:center; 
	color:red; 
	font-size:1.2em; 
	font-weight:bold;
	padding:5px 5px;
}

.userMessageClass {
	text-align:center; 
	color:blue; 
	font-size:1.2em; 
	font-weight:bold;
	padding:5px 5px;
}

.margin20_5 {
	margin:20px 5px;
}

/* below is used to activate the datepicker */
.datepicker {
	display:inline;
}

.ui-datepicker { 
  margin-left: 100px;
}


/*  code to insert inside of a loop to change the row color. Add class="##strStyle##" to the TR row. These match OTIS and TOL.
cfif (qryGetOneRoster.currentRow MOD 2) gt 0
	<cfset strStyle = "rowColorA">
cfelse
	<cfset strStyle = "rowColorB">
/cfif */
.rowColorA {
	background-color:inherit;
}

.rowColorB {
	background-color:#E0E0E0;
}


/* MENU STYLES */

/* SITE TABS */
#tab {
	width:100%; 
	white-space:nowrap; 
	z-index:3; 
	font-weight:500;
	padding-left: 1px;
	clear:both;
	border-bottom:#660099 10px solid;
}

#tab .selected 		{border-radius: 10px 10px 0px 0px; background: #660099; color: white; padding: 1px 3px; display: inline; margin: 0px 0px;}
#tab .notselected 	{border-radius: 10px 10px 0px 0px; background: #E6E0B9; color: black; padding: 1px 3px; display: inline; margin: 0px 0px;}

#tab .left {width: 10px; padding: 0px 2px; display: inline; color: white;}
#tab .right {width: 10px; padding: 0px 2px; display: inline; color: white;}

#tab .leftSelected {width: 10px; padding: 1px 2px; display:inline; color: white;}
#tab .rightSelected {width: 10px; padding: 1px 2px; display:inline; color: white;}

#tab a:link, #tab a:visited, #tab a:hover, #tab a:active {color: black; text-decoration:none; padding:0px 4px}

#tab a:link.alwaysLink, #tab a:visited.alwaysLink, #tab a:hover.alwaysLink, #tab a:active.alwaysLink {color: white; text-decoration:none; padding:0px 4px; font-weight:bold;}

#tab a:hover {
	text-decoration: none;	
	font-weight:500;
	color:#CC3300;	
}

#tab strong {
	color:#ffffff; 
	padding:0 4px;	
}


/* FOOTER */
.pageFooter{
	text-align: center;
	padding-top: 7px;
}

.siteFooter {
	border-top: 20px solid #663399;
	clear:both;
}

.siteFooter a {
	font-weight:normal;
	margin-right:20px;
	font-size:.8em;
	color:#be4c00;
}