body 
	{margin: 0; padding: 0; font: normal .8em Verdana, Arial, Helvetica, sans-serif; color: #000; background: #fff}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* BEGIN POSITIONING ELEMENTS */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#maincontainer  /* contains all the page elements - max width 1024 pixels, center column stretches, left and right columns fixed */
	{min-width: 780px; max-width: 1024px; margin-left: auto; margin-right: auto; width: expression(document.body.clientWidth < 790? "780px" : document.body.clientWidth > 1024? "1000px" : "auto");}
	/* IE doesn't recognize min-width or max-width, this width:expression command replicates min-width and max-width command for IE */
	/* This will not work if Javascript is disabled!!! */
		
#banner /* contains the logo and logolinks elements */
	{width: 100%; height: 65px;}

#logo  /* UMUC logo at top left of page - actual image is in HTML so an alt tag can be used */
	{float: left; width: 510px; height: 65px;}

#logolinks /* top right nav links */
	{float: right; padding: 35px 0 0 0;}

#backgroundcontainer1 /* contains headers, columns, center links, and footers elements - needed to tile background image down the left column */
	{margin: 0; padding: 0; height: auto; background: url("images/blue_navigation_background.jpg") repeat-y;}

#backgroundcontainer2  /* contains headers, columns, center links, and footers elements - needed to tile background image down the right column */
	{margin: 0; padding: 0; background: url("images/white_background.jpg") 100% 0 repeat-y;} 

#leftheader /* fixed left header image (blue section) */ 
	{float: left; width: 187px; height: 80px; margin: 0; padding: 0; background: url("images/blue_header_background.jpg") no-repeat;}

#rightheader /* fixed right header image (red section with no dots) */
	{float: right; width: 195px; height: 80px; margin: 0; padding: 0; background: url("images/red_header_right_background.jpg") no-repeat;}

#centerheader /* center header image (red section with dots) that tiles as page widens - holds header headings h1 and h2 */
	{width: auto; margin:0 187px; height: 80px; background: url("images/red_header_background.jpg") repeat-x;}

#left  /* left column content - holds navigation menu include */
	{float: left; width: 175px; margin : 0; padding: 0; text-align: left;}

#right  /*right column content */
	{float: right; width: 175px; margin: 0; padding: 0; text-align: center;}

#center /* main center content area */
	{margin:0 175px; padding: 0; background:white;}

#centerlinks /* holds links at bottom of center column */
	{clear:both; width:100%; height:30px; padding: 0 0 .5em 0; text-align: center; background: url("images/blue_navigation_background.jpg") repeat-y;}

#dots  /* yellow dot background below the 3 columns */
	{clear:both; width:100%; height:50px; background: url("images/yellow_dot.jpg") repeat;}

#leftfooter /* fixed left footer image (gold) */ 
	{float: left; width: 15px; height: 29px; margin: 0; padding: 0; background: url("images/footer_left.jpg") no-repeat;}

#rightfooter /*fixes right footer image (gold) */
	{float: right; width: 15px; height: 29px; margin: 0; padding: 0; background: url("images/footer_right.jpg") no-repeat;}

#centerfooter /* footer image that tiles as page widens - holds footer links */
	{margin: 0 15px; height: 29px; text-align: center; background: url("images/footer.jpg") repeat-x;}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Begin Positioning fixes for IE 3px float bug - other browsers don't see this code */
* html #leftheader, #leftfooter 
	{margin-right: -3px;}
 
* html #left /* This expresion is needed to combat the 3px jog the center column takes when the left column content ends */
	{margin-right: -3px; height:expression((document.body.clientHeight)? document.body.clientHeight - 300 + "px" : document.documentElement.clientHeight - 300 + "px")}		

* html #rightheader, #rightfooter 
	{margin-left: -3px;} 
  
* html #centerheader, #centerfooter 
	{margin: 0 }	
/* End IE 3px float bug fixes */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Classes that clear floats, necessary or columns fall out of template  */
.clearfix:after 
	{content: "."; clear: both; height: 0; visibility: hidden; display: block;}

.clearfix /* Fixes IE/Mac */
	{display: inline-block;}	

* html .clearfix /* Fix for IE - other browsers won't see this \*/
	{height: 1%;}

.clearfix 
	{display: block;}
/* End float clearing classes */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* END POSITIONING ELEMENTS */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* BEGIN EXPANDING MENU */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#masterdiv
	{margin: 0; padding: 1em 0; }

.menutitle
	{cursor: pointer; margin: 0 2em 1em; color: #fff; background:inherit; font: 85% Arial, Helvetica, sans-serif;}

.menutitle a
	{text-decoration: none;}

.submenu 
	{margin: 0; padding: 0 0 1em 3em;}
	
.submenu a 
	{cursor: pointer; margin: 0 ; text-decoration: none; color: #A98E37; background:inherit; font: 85% Arial, Helvetica, sans-serif; text-align: left;}

.othermenu 
	{cursor: pointer; margin: 0 2em 1em; color: #fff; background:inherit; text-decoration: none; font: 85% Arial, Helvetica, sans-serif; line-height: 2em;}

.othermenu a 
	{color: #fff; background:inherit; text-decoration: none;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* END EXPANDING MENU */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* BEGIN DOTS CLASSES - white, yellow, and blue dots for left, right, and center columns - use instead of hr */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.whitedotsleft
	{margin: .5em 1.5em .25em 1.7em; height: .1em; background: url("images/white_dot.jpg") repeat-x;}

.yellowdotscenter 
	{margin: .25em 1.25em .25em 1.25em; height: .1em; background: url("images/yellow_dot.jpg") repeat-x;}

.bluedotscenter 
	{margin: .25em 1.25em .25em 1.25em; height: .5em; background: url("images/blue_dot.jpg") repeat-x;}

.yellowdotsright 
	{margin: .25em .25em .25em .25em; height: .5em; background: url("images/yellow_dot.jpg") repeat-x;}

.bluedotsright 
	{margin: .25em .25em .25em .25em; height: .5em; background: url("images/blue_dot.jpg") repeat-x;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* END DOTS CLASSES */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* BEGIN STYLE ELEMENTS */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#logolinks a, #logolinks #logolinks a:hover /* links at top right of page */
	{padding: 0 .5em 0 0; font: normal 90% Arial, Helvetica, sans-serif; color: #000; text-decoration: none; background:#fff;}

#centerheader /* center header text color */
	{color: #fff;}

#centerheader h1 /* first and largest heading in center header */
	{padding: .8em 0 0 0; font: normal 150% Verdana, Arial, Helvetica, sans-serif;}

#centerheader h2 /* second and smallest heading in center header */
	{padding: 0 0 0 .1em; font: normal 105% Verdana, Arial, Helvetica, sans-serif;}

#left h3 /* navigation menu headers */
	{margin: 1.5em 1.6em 0; font: bold 99% Arial, Helvetica, sans-serif; color: #A98E37; background: inherit; text-decoration: none;}

#right h3 /* right column gold header */
	{margin: .7em .01em; font-family : Arial, Helvetica, sans-serif; color: #A98E37; background: inherit; text-decoration: none; text-align: left;}

#right a /* right column links */
	{margin: 0; font: normal 100% Arial, Helvetica, sans-serif; color: #05143F; background: inherit; text-align: left; text-decoration: none;}

#right a:hover /*right column link mouseovers */
	{color: #990000; background: inherit;}

#right img /* right column images */
	{margin: 5px 0 5px 0;}

#right a img /* right column image links */
	{padding: 0px; border:2px solid #fff;}

#right a:hover img /* right column image link mouseovers */
	{border-color:#990000; color:#000; background:#fff;}

#center /* center main content area */
	{color: #000;}

#center h3 /* center main content area h3 */
	{padding: .5em .7em;}

#center h4 /* center main content area h4 */
	{padding: .5em .8em;}

#centerlinks a /* links at bottom of center column */
	{padding: .5em 0; font: 85% Arial, Helvetica, sans-serif; color: #05143F; text-decoration: none;}

#centerlinks a:hover /* links at bottom of center column mouseovers */
	{color: #A98E37;}

#centerfooter, #centerfooter a /* footer text and links */
	{padding: .5em .5em .5em .5em; font: normal 93% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none;}

#centerfooter a:hover /* footer link mouseovers */
	{color: #801E20;}
	
h1,h2,h3,h4  /* global header margins */
	{margin: 0.2em 0}

p /* main text area margins */
	{margin: 1em 1em 1em 1em;}

li, ul, ol, dl /* list margins */
	{margin: 0 0 0 2em;}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* END STYLE ELEMENTS */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */