/* CSS Document Copyright 2011 MS Dept of Information Technology Services */

/* SITE COLORS ---- Rich Gold #d29e17, Dark Navy-like Blue #17356b; for Banking.  Vibrant Blue #008fdb, Navy #1b3962 for MREC. */
/* -webkit=Safari and older versions of Chrome, Chrome 12 standard.  -moz=older versions of Firefox, Firefox 5 Standard.  -o=Opera, Opera 11.50 Standard.  -khtml=Konqueror */

body {
	margin:16px 0 10px 0;  /* top margin allows the shadow to show well, bottom provides space for footer to begin. */
	padding:0;
	text-align: center;
	font: 12px Arial, Verdana, Helvetica, sans-serif;
	color:#000;
	background-color: #fff;
}

/*  Fixes the page jumping in Firefox  */
html { 
	min-height: 100%;
	margin-bottom: 1px;
}

/* Sets everything to 0 due to some browsers automatically adding padding and margins */
* {
	margin: 0;
	padding: 0;
}

/* BEGIN Headings */
/* For 18px, bold text, left aligned for page titles*/


h1 {
	color: #00000;
	background-color: #fff;
	text-indent: 0;
	text-align: left;
	padding: 0;
	margin: 0;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size:  25px;
	font-weight: bold;
}

/* For Paragraph Titles 15pxt, Bold text, Special Effects left aligned, Bottom 0  */
h2 {
  text-indent: 0;   
  text-align: left;
  padding: 0;
  margin-bottom: 0;
  font: 15px Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
  color: #000000;
  background-color: transparent;
}

.boxthick h2 {
  color: #fff;
  background-color: transparent;
  position: relative;  /* IMPORTANT!  Only IE6, needs this for titles to display, otherwise they are a no show! */
  margin-top: -25px; 
  margin-bottom: 15px;
  -webkit-box-shadow: 0;
  -moz-box-shadow: 0;
  -o-box-shadow: 0;
  -khtml-box-shadow: 0;
  box-shadow: 0;
  font: 18px Arial, Helvetica, sans-serif;
}

/* May not need for Applications  */
.boxthin h2 {
  color: #17356b;
  background-color: #fff;
  /* position: relative; */  /*  Doesn't seem to be needed anywhere */
  /* margin-top: -25px; */
  margin-bottom: 10px;
  -webkit-box-shadow: 0;
  -moz-box-shadow: 0;
  -o-box-shadow: 0;
  -khtml-box-shadow: 0;
  box-shadow: 0;
  font: 18px Arial, Helvetica, sans-serif;
}


/* For Paragraph Titles 14px, bold text, left aligned */
h3 {
  color: #000000;			
  background-color: transparent;
  text-indent: 0;
  text-align: left;
  padding: 0;
  font: 14px Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
}

.inline h3 {
  display: inline;
}

/* Black text, For 12px, bold text, left aligned, Bottom 0 */
h4 {
  color: #000000;
  background-color: transparent;
  text-indent: 0;
  padding: 0;
  margin: 0;
  font: 12px Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
}

/* For 12px, normal text, no align */
h5 {
  
  color: #000000;
  background-color: transparent;
  text-indent: 0;
  padding: 0;
  font: 12px Arial, Verdana, Helvetica, sans-serif;
}

/*  #000000; For 9pt, normal text, centered TOP NAV WRITTEN OUT */
h6 {
  color: #764A1D;
  background-color: transparent;
  text-indent: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  font: 11px Arial, Verdana, Helvetica, sans-serif;
}

/* END Headings */

/* The WRAP and WRAPINSIDE give the look of a graphically designed look and feel. */
/* WRAP is the thicker outside border of the website/application and includes a shadow all the way around the "box. */
#wrap {
	border: 6px solid #FF4719;  /* COLOR OF BORDER!  CHANGE HERE IF COLOR IS CHANGING! */
	width: 960px;
	background-color: #fff;
	color: #000;
	margin: 0 auto;
	padding-bottom: 9px;
	padding-top: 9px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
	-moz-box-shadow: 0 0 15px #fff;
    -webkit-box-shadow: 0 0 15px #fff;
	-o-box-shadow: 0 0 15px #fff;
	-khtml-box-shadow: 0 0 15px #000;
    box-shadow: 0 0 15px #000;
}

/* WRAPINSIDE is the thinner inside border of the website/application. */
#wrapinside {
	border: 1px solid #008fdb;  /*  COLOR OF BORDER!  CHANGE HERE IF COLOR IS CHANGING! */
	border-top: none;  /* Removed as top border was showing just above the image header border */
	width: 940px;
	background-color: transparent;
	color: #000;
	margin: 0 auto;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	border-bottom-left-radius: 0;
}

/* HEADERBOX provides a border of color, along with a slight blurred shadow for the HEADER image of the website/application. */
.headerbox {
	border: 2px solid #1b3962;  /* COLOR OF BORDER!  CHANGE HERE IF BORDER COLOR IS CHANGING! */
	background-color: #fff;
	color: #000;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	-moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
	-o-box-shadow: 0 0 5px #888;
	-khtml-box-shadow: 0 0 5px #888;
    box-shadow: 0 0 5px #888;
	overflow:hidden;
}

/* Used for adding spacing along the inside wall of the wrapper for display.  .Net will likely handle this in the Application. */
#content {
	padding: 17px 10px 10px 10px;
	text-align: left;
	/* background-color: #fff; */  /*  Had to comment this out so that the inner wrapper corners would show up */
	color: #000;
	/* width: ?px; once DIVs are determined */
}

/* used to denote in Text where the FOOTER COMPONENTS will be located. */
#footer {
	color:#000;
	background-color: transparent;
}

/* CLEARBOTH, CLEARLEFT AND CLEARRIGHT are used to CLEAR FLOATS when used. */

.clearboth {
	clear: both;
}

.clearleft {
	clear: left;
}

.clearright {
	clear: right;
}

/*  BOXES for Login, Forms, and other uses.  Various Widths.  Height adjusts to content.  */

/* Used only for Chrome and Opera fixes, will not display in Firefox and IE9 - Will remove once Chrome and Opera have been corrected. */
.top {
	display: none;
}

/*  BEGIN code for Boxes, Thick Top and Thin Boxes  */
/*  Box with Thick Top  */
.boxthick {
		border: 1px solid #1b3962;  /* COLOR OF BORDER!  CHANGE HERE AND NEXT LINE IF CHANGING! */
		border-top: 30px solid #1b3962;  /* COLOR OF TOP THICK BORDER!  CHANGE HERE AND TOP LINE IF CHANGING! */
		background-color: #fff;
		color: #000;
		/*padding: 10px;
		padding-top: 0;
		margin:  1.20em;
		float: left;*/
		margin: 0 auto;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-o-border-radius: 6px;
		-khtml-border-radius: 6px;
		border-radius: 6px;
		-webkit-box-shadow: 0 0 6px #000;
		-moz-box-shadow: 0 0 6px #000;
		-o-box-shadow: 0 0 6px #000;
		-khtml-box-shadow: 0 0 6px #000;
		box-shadow: 0 0 6px #000;
}

/*  Box with Top Thin Border  */
.boxthin {
	    border: 1px solid #1b3962;  /* COLOR OF BORDER!  CHANGE HERE IF BORDER COLOR IS CHANGING! */
		background-color: #fff;
		color: #000;
		padding: 0px;
		padding-top: 5px;
		margin: 1.20em;
		float: left;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-o-border-radius: 6px;
		-khtml-border-radius: 6px;
		border-radius: 6px;
		-webkit-box-shadow: 0 0 6px #000;
		-moz-box-shadow: 0 0 6px #000;
		-o-box-shadow: 0 0 6px #000;
		-khtml-box-shadow: 0 0 6px #000;
		box-shadow: 0 0 6px #000;
}

/* Size of Boxes */

/*  Box 250px Wide  */
.box250 {
	    width: 250px;
}

/*  Box 450px Wide with Equal Thin Borders  */
.box450 
{
		text-align :center ;
	    border: 1px solid #286BA9;  /* COLOR OF BORDER!  CHANGE HERE IF BORDER COLOR IS CHANGING!  #ccc; */
		width: 450px;
		background-color: #fff;  /*  COLOR OF BACKGROUND - CURRENTLY WHITE */
		color: #000;             /* COLOR OF TEXT - CURRENTLY BLACK */
		padding: 10px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-o-border-radius: 6px;
		-khtml-border-radius: 6px;
		border-radius: 6px;
		-webkit-box-shadow: 0 0 6px #000;
		-moz-box-shadow: 0 0 6px #000;
		-o-box-shadow: 0 0 6px #000;
		-khtml-box-shadow: 0 0 6px #000;
		box-shadow: 0 0 6px #000;
}
/*  Box Header 450px Wide with Equal Thin Borders. Use it along with box450  */
.box450Header
{
	border: 1px solid #286BA9; /* COLOR OF BORDER!  CHANGE HERE AND NEXT LINE IF CHANGING!  #ccc; */
	width: 455px;
	height: 18px;
	background-color: #286BA9; /*  COLOR OF BACKGROUND - CURRENTLY WHITE */
	color: #fff; /* COLOR OF TEXT - CURRENTLY BLACK */
	padding: 5px;
	padding-left: 10px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	position: relative;
	font-family: Arial;
	font-size: 15px;
	font-weight: bolder;
	left: -11px;
	top: -12px;
}
.box700Header
{
	border: 1px solid #286BA9; /* COLOR OF BORDER!  CHANGE HERE AND NEXT LINE IF CHANGING!  #ccc; */
	width: 685px;
	height: 40px;
	background-color: #286BA9; /*  COLOR OF BACKGROUND - CURRENTLY WHITE */
	color: #fff; /* COLOR OF TEXT - CURRENTLY BLACK */
	padding: 6px;
	padding-left: 2px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	position: relative;
	font-family: Arial;
	font-size: 15px;
	font-weight: bolder;
	left: -4px;
	top: -12px;
}
.box700HeaderNew
{
	border: 1px solid #286BA9; /* COLOR OF BORDER!  CHANGE HERE AND NEXT LINE IF CHANGING!  #ccc; */
	width: 685px;
	height: 20px;
	background-color: #286BA9; /*  COLOR OF BACKGROUND - CURRENTLY WHITE */
	color: #fff; /* COLOR OF TEXT - CURRENTLY BLACK */
	padding: 6px;
	padding-left: 2px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	position: relative;
	font-family: Arial;
	font-size: 15px;
	font-weight: bolder;
	left: -4px;
	top: -12px;
}

/*  Box 550px Wide  */
.box550 {
	    text-align :center ;
	    border: 1px solid #286BA9;  /* COLOR OF BORDER!  CHANGE HERE IF BORDER COLOR IS CHANGING!  #ccc; */
		width: 550px;
		background-color: #fff;  /*  COLOR OF BACKGROUND - CURRENTLY WHITE */
		color: #000;             /* COLOR OF TEXT - CURRENTLY BLACK */
		padding: 10px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-o-border-radius: 6px;
		-khtml-border-radius: 6px;
		border-radius: 6px;
		-webkit-box-shadow: 0 0 6px #000;
		-moz-box-shadow: 0 0 6px #000;
		-o-box-shadow: 0 0 6px #000;
		-khtml-box-shadow: 0 0 6px #000;
		box-shadow: 0 0 6px #000;
}

/*  Box 700px Wide  */
.box700 {
	    width: 700px;
}
/*  Box 700px Wide  */
.box740 {
	    width: 740px;
}
/*  Box 750px Wide  */
.box750 {
	    width: 750px;
}
/*  Box 850px Wide  */
.box850 {
	    width: 850px;
}
/*  Box 850px Wide  */
.box900 {
	    width: 900px;
}

/*  END code for Boxes  */

/* Cool Raised Drop Shadow Box used to Highlight information for User */

.drop-shadow {
    position:relative;
    /*float:left;*/
    /*width: 60%;  /* width: 40%; */
    padding:1em; 
    /*margin:2em 10px 4em; */
    background:#fff;
	text-align: center; /*  added this  */
	font-size: 12px; /*  added this  */
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

/* Raised shadow - no pseudo-elements needed */
        
.raised {
	border: solid 1px #ccc; /* #ccc; #e0e0e0; added for IE8 and older */
	-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
		
		/* Raised shadow - Width 250px - no pseudo-elements needed */
        
        .raised250 {
            width: 250px; /* added for square boxesr */
			text-align: left;  /* added */
			border: solid 1px #ccc; /* added for IE8 and older */
			-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
		
		/* Raised shadow - Width 350px - no pseudo-elements needed */
        
        .raised350 {
            width: 350px; /* added for square boxesr */
			text-align: left;  /* added */
			border: solid 1px #ccc; /* added for IE8 and older */
			-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
        
        /* Raised shadow - Width 450px - no pseudo-elements needed */
        
        .raised450 {
            width: 450px;
			border: solid 1px #ccc; /* added for IE8 and older */
			-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
		
		/* Raised shadow - Width 650px - no pseudo-elements needed */
        
        .raised650 {
            width: 650px;
			border: solid 1px #ccc; /* added for IE8 and older */
			-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
		
		/* Raised shadow - Width 860px - no pseudo-elements needed - For Admin Image */
        
        .raised860 {
            width: 860px;
			border: solid 1px #ccc; /* added for IE8 and older */
			-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
        
/* End Raised Drop Shadow Box code */