body {
	margin: 0px;
	background-color: #FFFFFF;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
}

a:link, a:active, a:visited {
    color: #553770;
    text-decoration: underline;
}

	a:hover, a:visited:hover {
		color: #553770;
		text-decoration: none;
	}

td a:link, a:active {
	color: blue;
	text-decoration: underline;
}

td a:hover, a:visited, a:visited:hover {
	color: purple;
	text-decoration: none;
}

a.skip-main {
	left: -999px;
	position: absolute;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -999;
}

a.skip-main:focus, a.skip-main:active {
	color: black;
	background-color: lightgray;
	left: auto;
	top: auto;
	width: 30%;
	height: auto;
	overflow: auto;
	margin: 10px 35%;
	padding: 5px;
	border-radius: 15px;
	border: 2px solid black;
	text-align: center;
	font-size: 1.2em;
	z-index: 999;
}

a.remove-scrollbar {
    left: -999px !important;
    position: relative;
    top: -999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
}

a.remove-scrollbar:focus, a.remove-scrollbar:active {
    color: black;
    background-color: lightgray;
    left: 0px !important;
    top: 0px !important;
    width: 20%;
    height: auto;
    overflow: auto;
    margin: 10px 35%;
    padding: 5px;
    border-radius: 15px;
    border: 2px solid black;
    text-align: center;
    font-size: 1.2em;
    z-index: 999;
}

.SiteTitle {
	border: none;
	font-size: 24px;
	font-weight: bold;
	color: #553770;
}

h1 {
	margin: 10px 0px 4px 0px;
	border-bottom: 1px solid #FEBD43;
	padding-bottom: 2px;
	font-size: 16px;
	color: #553770;
}

h2 {
	margin: 10px 0px 4px 0px;
	font-size: 14px;
	color: #553770;
}

	/*Use this h2 if you want an h2 title with a bottom rule*/
	h2.rule {
		border-bottom: 1px solid #553770;
		padding-bottom: 2px;
	}

input#Login1_username {
	width: 100%;
}


input#Login1_password {
	width: 100%;
}

li {
	padding-left: 0px;
}

p {
	margin: 10px 0px 0px 0px;
}

table {
	margin-top: 15px;
	font-size: 11px;
}

tbody tr {
	margin: 2px;
}

tfoot td {
	padding-bottom: 8px;
}

/*tr.alternating_row {
  background-color: #F1F1F1;
}*/
/* customization color to be refined !!!!! */
/*.dxgvGroupRow, .hideIndentColumn
{
	display: none;
}*/
.dxgvTable caption {
	background-color: #553770 !important;
	color: #FFFFFF;
	text-align: left;
	font-weight: bold;
	/*color: #990033;*/
	/*background-color:lightgray*/
}

table caption {
	background-color: #553770 !important;
	color: #FFFFFF;
	padding-top: 3px;
	padding-bottom: 3px;
	text-align: left;
	font-size: x-small;
	font-weight: bold;
}

.innerTable caption {
	background-color: #FEBD43 !important;
	color: #000000;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
	text-align: left;
	font-size: xx-small;
	font-weight: bold;
}

.dxgvTable a {
	color: #553770;
	text-align: left;
	font-weight: bold;
}

.dxgvHeader {
	background-color: #FEBD43;
	color: #000000;
}

	.dxgvHeader td {
		background-color: #FEBD43;
		color: #000000;
	}

tr.GridHeaderItem, thead td {
	background-color: #FEBD43;
	color: #000000;
}
.banner {
	background-color: #553770 !important;
	color: #FFFFFF;
	text-align: left;
	font-size: 11px;
	font-weight: bold;
}
tr.GridItem, td.GridItem {
	/*background-color:azure*/
	background-color: white;
	color: black;
}

tr.GridAltItem, td.GridAltItem {
	/*background-color:beige*/
	background-color: lightgray;
	color: black;
}

tr.GridFooterItem {
	/*background-color: lightgray;*/
	background-color: #BDBDBD;
	color: #000000;
	font-weight: bold;
}

/* end of customization color*/
th {
	background-color: #FEBD43;
	text-align: left;
	color: #000000;
}

.th {
	background-color: #FEBD43;
	text-align: left;
	color: #000000;
}

td {
	font-size: 11px;
	/*font-weight: normal;*/
	vertical-align: top;
}

/* ################################
#  outer creates an invisible wrapper div so that contained, visible divs can have a width set to auto.
#  This causes the various elements to render out to the same width and creates a work around for IE 5
#  incorrect application of the CSS block model.
###################################*/
#outer {
	width: 1280px;
	border: 0px solid red;
	margin: 0 auto;
}

/* ################################
#  utility defines a utility meta element.
#  This can be used to hold elements such as login status and/or a help button
###################################*/
#utility {
	padding: 0px 8px 4px 0px;
	width: 100%;
	height: 30px;
	background-color: #553770;
	text-align: right;
	color: #FFFFFF;
	position: fixed;
	top: 0;
}

	#utility form {
		margin: 0px;
		border: none;
	}

/* ################################
#  header defines the page header meta element. This is not the same as an html head.
#  A header area can include things like a branding graphic, banners, and/or utility links like a help button.
###################################*/
#header {
	padding: 5px;
	width: auto;
	text-align: right;
	top: 0;
	left: 0;
	margin-top: 30px;
}

	#header img {
		border: 0;
		display: block;
		margin: 0 auto;
	}

	#header h1 {
		border: none;
		font-size: 24px;
		color: #553770;
	}

	#header a:link, #header a:visited, #header a:active {
		text-decoration: none;
	}

/* ################################
#  tabs_bar defines the tabs container meta element.
#  tab_off defines the off state of a single tab.
#  tab_on defines the on state of a single tab.
###################################*/
#tabs_bar {
	float: left;
	clear: both;
	width: 100%;
}

	#tabs_bar table {
		background-color: #553770;
		border: none;
		width: 100%;
	}

	#tabs_bar td.inner_notext {
		background-color: #CECECE;
	}

	#tabs_bar td.inner {
		padding: 0px 3px;
		font-size: 11px;
		color: black;
		font-weight: bold;
		background-color: #FEBD43;
		white-space: nowrap;
	}

	#tabs_bar td.inner_on {
		padding: 0px 3px;
		font-size: 11px;
		color: black;
		font-weight: bold;
		background-color: #FFFFFF;
		white-space: nowrap;
	}

	#tabs_bar a:link, #tabs_bar a:active, #tabs_bar a:visited {
		color: black;
		text-decoration: none;
	}

		#tabs_bar a:hover, #tabs_bar a:visited:hover {
			color: #553770;
			text-decoration: none;
		}

/* ################################
#  content styles define the page content meta elements.
#  Any content elements are defined within this area.
#  Content elements can include graphics, text, form elements, etc.
# content is for single column layouts. Use content_left and content_right for two column layouts.
###################################*/

#content {
	margin-left: 5px;
	margin-right: 5px;
}

	#content table {
		float: left;
		clear: both;
		/*margin: 10px 0 20px 0;*/
		margin: 0 0 0 0;
		width: 100%;
	}


#content_left h2 {
	background-color: #CECECE;
	padding-left: 10px;
	height: 21px;
}



#content_right h2 {
	margin: 0px;
	padding: 5px 0px 0px 8px;
	height: 21px;
	background-color: #553770;
	font-size: 14px;
	color: #FFFFFF;
}

#content_right input.button {
	background-color: #FEBD43;
	color: #553770;
}

/* ################################
#  These define a sidebar meta-element and tables appearing in the sidebar meta-element.
###################################*/
#sidebar {
	margin: 10px 0px;
	padding: 3px;
	border: 1px solid #553770;
}

	#sidebar h2 {
		padding-bottom: 4px;
		font-size: 14px;
		color: white;
	}

	#sidebar table {
		margin: 0px;
		border: none;
	}

	#sidebar th {
		background-color: #FFFFFF;
		font-weight: normal;
		color: #000000;
	}

	#sidebar td {
		text-align: left;
	}

	#sidebar thead th {
		border: none;
		font-weight: bold;
		color: #FFFFFF;
		background-color: #553770;
	}

	#sidebar thead td {
		border-bottom: 1px solid #999999;
	}

	#sidebar tfoot td {
		border-top: 4px solid #553770;
	}

/* form_section_panels are meta elements for containing and stylizing a subsection of a form. */

.form_section_panel {
	position: relative;
	padding-bottom: 10px;
}

	.form_section_panel h2 {
		margin: 10px 0px 0px 0px;
	}

/* application panels are used on the institutional aid application pages */

/*#application_panel {
  position: relative;
  clear:both;
  margin: 0px 35px;
  border: 1px solid #F5CE85;
  padding: 0px 15px 10px 15px;
  background-color: #FEF8D5;
  width: 625px;
  height: 10%;
  voice-family: "\"}\"";
  voice-family:inherit;
  width: 595px;
}

#application_panel .form_row {
	margin: 0px;
}

#application_panel .form_element {
	padding: 0px 5px;
}

#application_panel #instruction {
  margin: 0px 0px 20px 0px;
	border: 0px solid #D5DDE5;
	width: auto;
}*/

/*#application_sub_panel {
	border: 1px solid #F5CE85;
	padding: 10px;
}*/

/*#application_sub_panel .form_section_panel {
	margin: 0px 10px 15px 0px;
	border-top: none;
	border-bottom: 1px dotted #000000;
	padding-bottom: 10px;
	width: auto;
}*/

/*###################################
# These are form styles:
# 1. form_cols are for making multi column forms
# 2. Label styles are for labelling form elements
# labels to mark form_elements. Form_element can be used to contain form fields.
###################################*/
.form_row {
	position: relative;
	float: left;
	clear: both;
	margin: 0px 10px;
	padding: 5px 0px 0px 0px;
	border: 0px solid black;
	width: 100%;
}

.form_element {
	float: left;
	padding: 0px 5px;
	vertical-align: top;
}

.label {
	float: left;
	margin-bottom: 0px;
	border: 0px solid black;
	width: 270px;
	text-align: right;
}

.labelLeft {
	float: left;
	margin-bottom: 0px;
	border: 0px solid black;
	text-align: left;
}

.labelError {
	color: #C00000;
}

.labelBold {
	display: block;
	margin-top: 10px;
	width: 300px;
	text-align: right;
	font-weight: bold;
}
/*.RTBlabel {
  float: left;
  margin-bottom: 0px;
  border: 0px solid black;
  text-align: right;
  font-weight: bold;
  color: #00438A;
  padding-left: 3px;
}*/

/*.sublabel {
	clear: both;
	padding-left: 3px;
	font-size: 9px;
	font-weight: normal;
}*/

/*.RTBsublabel {
	font-size: 9px;
	font-weight: normal;
}*/

/*###################################
# These are form styles (currently these are all HTML tag based).
# Note: CSS attribute selectors are not well supported in current browsers,
#       hence the use of class selectors on input elements.
###################################*/
/*label {
	display: block;
	margin-top: 10px;
	width: 300px;
	text-align: right;
	font-weight: bold;
}*/

input.text, select {
	margin: 0px 3px;
	border-width: 1px;
	border-style: outset;
	border-color: #CCCCCC;
	font-size: 11px;
}

select {
	margin-left: 0px;
}

input.button {
	clear: right;
	margin: 5px 0px 0px 5px;
	border-width: 1px;
	border-style: outset;
	border-color: #FFFFFF;
	height: 25px;
	background-color: #553770;
	font-size: 11px;
	font-family: verdana, arial, sans-serif;
	color: #FFFFFF;
}

	input.button:focus {
		clear: right;
		margin: 5px 0px 0px 5px;
		border-style: outset;
		height: 25px;
		background-color: #553770;
		font-size: 11px;
		font-family: verdana, arial, sans-serif;
		color: #FFFFFF;
		border: 2px solid black;
	}
/*input.button_sm {
	border-width: 1px;
	border-style: outset;
	border-color: #CCCCCC;
	font-size: 9px;
	background-color: #206FE1;
	color: #FFFFFF;
}*/

/*###################################
# instruction defines an instruction meta element. Use this to add instructions for forms, etc.
###################################*/
#instruction, .instruction {
	clear: both;
	margin: 0px 0px 20px 0px;
	width: 100%;
	border: .1px solid #FFFFFF;
}

/*###################################
# These are special use table formatting styles
###################################*/
/*table.nested {
	border: none;
	margin-top: 0px;
	text-align: right;
	background-color: #FFFFFF;
}

table.nested th {
	text-align: right;
	background-color: #FFFFFF;
}

table.nested td {
	text-align: right;
}*/

/*###################################
# Tip defines a javascripted meta-element that pops up on mouseover events
# and is hidden on mouseout events.
###################################*/
.tip {
	border: 1px solid #000000;
	padding: 10px;
	background-color: #EFEFEF;
	width: 150px;
}

/*###################################
# footer defines the page footer meta element
###################################*/
#footer {
	clear: both;
	padding: 10px 0;
	margin-top: 10px;
	width: 100%;
	text-align: right;
	bottom: 0;
	left: 0;
	background: #553770;
	color: white;
	position: fixed;
}

/*Messaging Styles*/
ul.appMessage {
	list-style: none;
	margin: 0;
	padding: 2px;
	border: dotted 1px #aaa;
}

	ul.appMessage li {
		margin-left: 0;
		font-weight: bold;
		font-size: 11pt;
	}

		ul.appMessage li.error {
			color: Red;
		}

.datefield {
	width: 100px;
}

#tabs_sidebar {
	float: left;
	clear: both;
	width: 100%;
}

.menuLink {
	cursor: pointer;
	float: left;
	margin: 13px 10px;
	font-size: 18px;
	font-weight: bold;
}

.headerSection {
	background-color: #553770;
	height: 20px;
	color: #FFFFFF;
	max-width: 1280px;
	margin: 0 auto;
}

.studentName {
	text-align: right;
	padding: 3px 8px;
}

nav {
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	background-color: #553770;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 53px;
	clear: both;
	float: left;
}

	nav ul.menu {
		border: none;
		list-style: none;
		text-align: left;
		padding: 0;
	}

		nav ul.menu li {
			margin: 0;
			padding: 0;
			list-style: none;
			float: left;
			width: 100%;
		}

		nav ul.menu a {
			padding: 8px 0px 8px 8px;
			text-decoration: none;
			color: #fff;
			display: block;
			transition: 0.3s;
			font-weight: bold;
		}

            nav ul.menu a:hover {
                border: solid;
                border-color: black;
                border-width: medium;
                text-decoration: none;
                color: #fff;
            }

        nav ul.menu li > a.selected {
            background: #eeeeee;
            color: #000 !important;
            text-decoration: none;
        }

        nav ul.menu li > a.focused {
            border: solid;
            border-color: black;
            border-width: medium;
            text-decoration: none;
            color: #fff;
        }

	nav .closebtn {
		position: absolute;
		top: 0;
		right: 15px;
		font-size: 25px;
		margin-left: 50px;
		color: #fff;
		text-decoration: none;
		margin-top: 10px;
	}

.modalBackground {
	position: absolute;
	z-index: 55000;
	background-color: darkgray;
	filter: alpha(opacity=75);
	/* IE */
	-moz-opacity: 0.75;
	/* Mozilla */
	opacity: 0.75;
	/* CSS3 */
	top: 0px;
	left: 0px
}

.modalDialogTitle {
	text-align: left;
	font-weight: bold;
	background-color: #553770;
	color: white;
	padding: 5px;
}

.modalDialogMsg {
	background-color: white;
	margin-left: 10px;
	margin-right: 10px;
	min-height: 160px;
	text-align: left;
	overflow-x: hidden;
	overflow-y: auto;
}

.modalDialogButtonRow {
	background-color: white;
	font-size: smaller;
	text-align: center;
	vertical-align: middle;
	height: 40px;
}

.applicationQuestion {
	margin-bottom: 3px;
	margin-left: 15px;
	text-align: left;
	display: block;
}

.applicationAnswer {
	margin-bottom: 10px;
	margin-left: 15px;
	text-align: left;
	display: block;
}

#content_left {
	float: left;
	clear: both;
	margin: 0 0 50px 10px;
	width: 870px;
}

#content_right {
	float: right;
	margin: 0px 0px 40px 30px;
	width: 350px;
}

.content_right {
	float: right;
	margin: 0px 0px 40px 30px;
	width: 350px;
}

.headerImage {
	min-width: 1260px;
	float: left;
	margin-bottom: 20px;
}

.headerTitle {
	min-width: 1000px;
	text-align: center;
	margin-bottom: 5px;
}

.footerText {
	max-width: 1280px;
	margin: 0 auto;
	padding-right: 10px;
}

.footerText a {
	color: white;
	text-decoration: none;
}
	.footerText a:hover, .footerText a:visited, .footerText a:visited:hover {
		color: white;
		font-style: italic;
		text-decoration: underline;
	}

.headerText {
	max-width: 1280px;
	margin: 0 auto;
	padding-right: 10px;
}

.spacer {
	clear: both;
	padding: 25px 0;
}

#divPrintFriendlyHeader {
	display: none;
}

@media print {
	#footer, .spacer {
		display: none;
	}

	#header {
		display: none;
		top: 0 !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
		height: 0 !important
	}

	#tabs_sidebar, #utility {
		display: none;
		height: 0;
	}

	.headerSection {
		height: 0;
	}

	#divPrintFriendlyHeader {
		display: block;
		width: 100%;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 20px;
		top: 0;
	}
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}
@media print {
    body {
        transform: scale(.6, 0.6);
    }
}