<style type="text/css">

body {
	text-align: center;
	padding: 0;
}

#container {
	font-family: helvetica, arial, verdana, sans-serif;
	font-size:62.5%;
	width: 670px;
	background: white;
	text-align: justify;
	border: 2px solid #D8D9CF;
	padding: 0;
	margin: 20px auto 20px 10px;
}

#container_blank {
	font-family: helvetica, arial, verdana, sans-serif;
	font-size:62.5%;
	width: 670px;
	background: white;
	text-align: justify;
	padding: 0;
	margin: 20px auto 20px 10px;
}


p {
	font-family: helvetica, arial, verdana, sans-serif;
	font-size: 1.45em;
	margin: 10px 20px;
}



p#subnav {
	font-family: verdana, arial, sans-serif;
	font-size: 1.1em;
	line-height: 18px;
}

.describe {  /* Use within imageboxleft or imageboxright for captioning image */
	font-family: verdana, arial, sans-serif;
	font-size: 1.1em;
	font-style: italic;
}


.disclaim {  /* Use within subnav box as course disclaimer */
	font-family: verdana, arial, sans-serif;
	font-size: 1em;
	font-style: italic;
	margin-left: 2px;
}

table ul, table p, table ol {
	font-size: 1.0em;
	margin: 10px 0;
}

p#detour, p.detour { 
	background-color: #f9fec0;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	padding: 10px 20px;
	width: 550px;
	margin: 10px auto;
  	position: center;
}

p#assignment, p.assignment { /* for paragraph content only. */
	background-color: #f9fec0;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	padding: 10px 20px;
	width: 480px;
	margin: 10px auto;
  	position: center;
}

#assignment, .assignment { /* This version allows extra formatting, like ul.*/
	background-color: #f9fec0;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	width: 520px;
	margin: 10px auto;
  	position: center;
}

p#summary, p.summary {
	background-color: #e0e9e9;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	padding: 10px 20px;
	width: 480px;
	margin: 10px auto;
  	position: center;
}

#summary, .summary {
	background-color: #e0e9e9;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	width: 520px;
	margin: 10px auto;
  	position: center;
}

p#course_objectives, p.course_objectives {
  	background-color: #e9efeb;
  	border-color: #909090;
  	border-style: dotted;
  	border-width: 1px 0px 1px 0px;
  	padding: 10px 20px;
  	width: 480px;
  	margin: 10px auto;
  	position: center;
  	font-size:1.45em;
}
p#tech, p.tech {
  	
  	font-size:0.93em;  	
}

#course_objectives ul, #course_objectives ol {
	font-size:1.05em;
}

#course_objectives, .course_objectives {
  background-color: #e9efeb;
  border-color: #909090;
  border-style: dotted;
  border-width: 1px 0px 1px 0px;
  padding: 10px 20px;
  width: 480px;
  margin: 10px auto;
  position: center;
  font-size:1.45em;
}

#course_objectives p {
	padding: 0;
	margin: 0;
	font-size:1.05em;
}


#course_objectives ul, #course_objectives ol {
	margin-bottom: 10px;
	}

p#brownbox, p.brownbox { /* for paragraph content only. */
	background-color: #e8e6d4;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	padding: 10px 20px;
	width: 480px;
	margin: 10px auto;
  	position: center;
}

#brownbox, .brownbox { /* This version allows extra formatting, like ul.*/
	background-color: #e8e6d4;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	width: 520px;
	margin: 10px auto;
  	position: center;
}

p#purplebox, p.purplebox { /* for paragraph content only. */
	background-color: #e6e7e8;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	padding: 10px 20px;
	width: 480px;
	margin: 10px auto;
  	position: center;
}

#purplebox, .purplebox { /* This version allows extra formatting, like ul.*/
	background-color: #e6e7e8;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	width: 520px;
	margin: 10px auto;
  	position: center;
}


p#rosebox, p.rosebox { /* for paragraph content only. */
	background-color: #f1e5df;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	padding: 10px 20px;
	width: 480px;
	margin: 10px auto;
  	position: center;
}

#rosebox, .rosebox { /* This version allows extra formatting, like ul.*/
	background-color: #f1e5df;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	width: 520px;
	margin: 10px auto;
  	position: center;
}


p#seafoambox, p.seafoambox { /* for paragraph content only. */
	background-color: #e9fbff;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	padding: 10px 20px;
	width: 480px;
	margin: 10px auto;
  	position: center;
}

#seafoambox, .seafoambox { /* This version allows extra formatting, like ul.*/
	background-color: #e9fbff;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	width: 520px;
	margin: 10px auto;
  	position: center;
}

p.hanging {
 margin: 10px 20px 10px 60px;
 text-indent: -40px;
 text-align: left;
 font-size: 1.2em;
 
}

blockquote {
	/* Applies opening quotes */
	background: transparent url(../_graphics/bg-quote-left.png) left top no-repeat;
	margin: 20px 20px;
	padding-left: 60px;	
}

blockquote p {
	/* Applies closing quotes */
	background: url(../_graphics/bg-quote-right.png) right bottom no-repeat;
	margin: 0;
	padding-right: 60px;

}

p.blockquoteplain {
	margin: 20px 20px;
	padding-left: 60px;
	padding-right: 60px;
	font-size: 1.45em;
}


div#listAssignment {
	background-color: #f9fec0;
	border-color: #909090;
	border-style: dotted;
	border-width: 1px 0px 1px 0px;
	padding: 10px 20px;
	width: 480px;
	margin: 10px auto;
  	position: center;
	font-size: 1.45em;
} 

#listAssignment ul { font-size:1em; }


p#footer_navigation {
  background-color: #e5f3c4;
  border-color: #909090;
  border-style: dotted;
  border-width: 1px;
  padding: .5em;
  margin-bottom: 10px;
  margin-top: 10px;
}

.footer_navigation, #footer_navigation {
  background-color: #e5f3c4;
  border-color: #909090;
  border-style: dotted;
  border-width: 1px;
  padding: .5em;
  margin: 10px 20px;
}


p#footnote_bar {
	font-size: 1em;
	border-color: #909090;
	border-style: dashed;
	border-width: 1px 0px 1px 0px;
	padding: 10px 20px;
	margin: 10px 10px;
  	position: center;
}


#header {
	width:600px; 
	voice-family: "\"}\""; 
	voice-family:inherit;
  	width:606px;
  	min-height:70px;
	height:auto !important;
  	height:70px;
  	background-color: #DFE2D4;
	background-image: url('http://www.idd.depaul.edu/_graphics/SNLOnline.png');
	background-repeat: no-repeat;
	text-align: left;
	border: 0px solid #D8D9CF;
	margin: 0px;
}

html>body #header {
  width:600px;
  height: auto;
} 


h1 { /* Topmost course title */
	float: left;
	display: inline;
	text-align: left;
	width: 660px;
	font-size: 2.2em;
	color: #737577;
	font-family: arial, verdana, sans-serif;
	margin: 0px 6px 0px 0px;
	background-color: #DFE2D4;
}


h1#longtitle { /* This isn't needed anymore, unless title is _really_ long. Topmost course title, if long */
	float: right;
	display: inline;
	font-size: 1.6em;
	color: #737577;
	font-family: arial, verdana, sans-serif;
	margin: 6px 20px 0px 20px;
	background-color: #DFE2D4;
}

h2 { /* Module Title */
	 margin-top: 1.6em;
	.margin-top: 1.6em;
	_margin-top: 1.6em;
	margin-left: 20px;
	margin-right: 40px;
	font-size: 2em;
	color: #737577;
	font-family: arial, verdana, sans-serif;
	text-align: left;
	border-bottom: 1px solid #737577;
}

h2.subnav { /* Module Title in courses with subnav */
	 margin-top: 2em;
	.margin-top: 2em;
	_margin-top: 2em;
}


h3 { /* Module sections: objectives, learning outcomes, instructions, etc */
	margin: 20px 20px 8px 20px;
	font-size: 1.8em;
	color: #737577;
	font-family: arial, verdana, sans-serif;
}

/* H3s to be used on syllabus only */
h3#info {
	background: #e0e9e9;
	padding-left: 4px;
}
h3#assessment {
	background: #dfe2d4;
	padding-left: 4px;
}
h3#policies {
	background: #eadac5;
	padding-left: 4px;
}
h3#other {
	background: #e9efeb;
	padding-left: 4px;
}

h4 { /* Subsections */
	margin: 20px 20px 0px 20px;
	font-size: 1.6em;
	color: #737577;
	font-family: arial, verdana, sans-serif;
}

h5 {
	margin: 8px 180px 8px 20px;
	font-size: 1.45em;
	color: #737577;
	font-family: arial, verdana, sans-serif;
	padding-left: 4px;
}

/* Used in syllabus only */
h5#info {
	background: #e0e9e9;
}
h5#assessment {
	background: #dfe2d4;
}
h5#policies {
	background: #eadac5;
}
h5#other {
	background: #e9efeb;
}

h6 { /* sub-sub sections (smaller than h4) */
	margin: 20px 20px 0px 20px;
	font-size: 1.2em;
	color: #737577;
	font-family: arial, verdana, sans-serif;
}

h7 { /* sub-sub sections (smaller than h4) */
	margin: 15px 15px 15px 15px;
	font-size: 1.2em;
	color: #737577;
	font-family: arial, verdana, sans-serif;
}

table { /* Use sparingly and for tabular data! */
	font-family: helvetica, arial, verdana, sans-serif;
	font-size: 1.45em;
	margin: 10px 20px;
	border: 0px;
	display: table;
}

TD {
	margin: 5px 5px;
	text-align: left;
	display: table-cell;
	border: 1px solid #D8D9CF;
	padding:4px;
}

TH { /* first row's cells can be TH, table header, makes text bold. */
	font-weight: bold;
	margin: 10px 20px;
	text-align: left;
	display: table-cell;
	border: 1px solid #D8D9CF;
	padding:4px;
}

TR {
	margin: 5px 5px;
	text-align: left;
	display: table-row;
	background: #dee5e1;
}

TR.alt { /* put on alternating rows for a different bg color */
	background: #e9efeb;
	}

ul,  ol, dl { /* Unordered list, ordered list, definition list */
	margin: 1em;
	padding: 0 20px;
	font-size: 1.45em;
   }
   
ul.no_bullet {
list-style-type: none;
}
   

ol ol, ul ul, ol ul, ul ol {
	margin: 1em;
	padding: 0px 20px;
	font-size: 1.0em;
   }
   
dt { /* Definition term */
	font-weight: bold;
	}
	
dd { /* term's (dt's) definition */
	font-style: italic;
	margin: 0px 0px 8px 0px;
	}  
   

#content {
	clear: left;
}

#content a {
	color: #927000;
}

#content a:hover {
	text-decoration: none;
	color: #B28A29;
}

#imageboxleft {
	float: left;
	border: solid #D8D9CF;
	border-width: 2px;
	margin: 10px 20px;
	display: inline;
	
}

#imageboxright {
	float: right;
	border: solid #D8D9CF;
	border-width: 2px;
	margin: 10px 20px;
	display: inline; 

}

/* Small right box in syllabus has printable course PDF & disclaimer */
#subnavbox {
	float: right;
	width: 150px;
	background-color: #f4e8d9;
	border: 1px dotted #D8D9CF;
	text-align: left;
	margin: 0px 10px 0px 10px;
	display: inline;
	padding: 4px;
}

#subnavbox a {font-size: 1.45em;}



/* BELOW IS NAVIGATION/SUBMENU - TOUCH AT YOUR OWN RISK! */

	#nav, #nav ul {
		display: block;
		position: relative;
		width:660px; 
		height: 26px;
		voice-family: "\"}\""; 
		voice-family:inherit;
  		width:660px; 
		list-style: none;
		white-space: normal;
		font-weight: normal;
		font-size: 1.2em;
		font-family: verdana, arial, sans-serif;
		font-variant: small-caps;
		border: solid #D8D9CF;
		border-width: 1px 0px 1px 0px;
		padding: 0;
		margin: 0;
	}
	
	html>body #nav {
	  	width:660px;
	}
	

	#nav li li {
		font-size: .8em;
   	}
   	
   	
   
		
	#nav a:hover {
		text-decoration: underline;
		}
		
		
	#nav li.plain, plain:hover {
		display: block;
		float: left;
		margin-left: 16px;
		padding: 5px 4px 5px 2px;
		text-align: left;
		}
	
	#nav li.active ul, #nav li.center ul {
		margin: 0;
		padding: 0;
		background: #f9fec0;
	}
	


	#nav a {
		text-decoration: none;
		color: #41581D;
		padding: 5px 0px 5px 0px;
	}

	#nav li { /*float the main list items*/
		margin: 0;
		float: left;
		display: block;
		padding: 0;
	}
	
	#nav li li { /*float the main list items*/
		margin: 0;
		float: left;
		display: block;
		padding: 0;
		border: 0;
	}


	#nav li ul {
		width:100%;
		display: block;
		visibility: hidden;
		position: absolute;
		clear: both;
		top: .9em;
		left: 0;
	}
	


	#nav li.center ul, #nav li.longer ul, #nav li.midsize ul, #nav li.xlong ul { /*put the subnav below - subnav bg color*/
		display: block;
		margin-top: 11px;
		background: #d8d8d8;
		width:660px; 
		voice-family: "\"}\""; 
		voice-family:inherit;
  		width:660px;
	}
	

	html>body #nav li.center ul {
			  width:660px;
		}
		
	#nav li.active ul, #nav li.activelonger ul, #nav li.midsize ul, #nav li.xlong ul { /*put the subnav below - subnav bg color*/
			display: block;
			margin-top: 11px;
			background: #e5f3c4;
			width:660px; 
			voice-family: "\"}\""; 
			voice-family:inherit;
  			width:660px;
			visibility: visible;
		}
	html>body #nav li.active ul, html>body #nav li.activelonger ul, #nav li.activemidsize ul, #nav li.activexlong ul {
		  width:660px;
		}


	#nav li a {
		color: #41581D;
		display: block;
		width: 43px;
		border-right: 1px solid #D8D9CF;
		text-align: center;
	}
	
	#nav li.xlong a, #nav li.activexlong a {
		color: #41581D;
		display: block;
		width: 219px;
		border-right: 1px solid #D8D9CF;
		border-bottom: 1px solid #D8D9CF;
		text-align: center;
	}
	
	#nav li.midsize a, #nav li.activemidsize a {
		color: #41581D;
		display: block;
		width: 75px;
		border-right: 1px solid #D8D9CF;
		text-align: center;
		border-bottom: 1px solid #D8D9CF;
	}
	
	#nav li.longer a, #nav li.activelonger a {
		color: #41581D;
		display: block;
		width: 100px;
		border-right: 1px solid #D8D9CF;
		text-align: center;
		border-bottom: 1px solid #D8D9CF;
	}

	#nav li.active a, #nav li.active a:hover, #nav li.activelonger a, #nav li.activelonger a:hover, #nav li.activemidsize a, #nav li.activemidsize a:hover{
		text-align: center;
		background: #e5f3c4;
		border-bottom: 1px solid #D8D9CF;
	}
	
	

	#nav li.active ul a, #nav li.activelonger ul a, #nav li.activemidsize ul a, #nav li.activexlong ul a { /*active subnav*/
		float: left; /*ie doesn't inherit the float*/
		border: 0;
		width: auto;
		margin-left: 16px;
		visibility: visible;
	}

	
	#nav li.center ul a, #nav li.longer ul a, #nav li.midsize ul a, #nav li.xlong ul a {
		float: left; /*ie doesn't inherit the float*/
		border: 0;
		color: #41581D;
		width: auto;
		margin-left: 16px;
	}

	#nav li.active:hover ul {
		display: block;
	}

	#nav li.center:hover ul, #nav li.longer:hover ul, #nav li.midsize:hover ul, #nav li.xlong:hover ul {
		display: block;
		z-index: 6000;
		visibility: visible;
		color: #7C6240;
		background: #f9fec0;
		}

	#nav li.center a:hover, #nav li.center:hover, #nav li.longer a:hover, #nav li.longer:hover, #nav li.midsize a:hover, #nav li.midsize:hover, #nav li.xlong a:hover, #nav li.xlong:hover {
		background: #f9fec0;
	}
	
	#nav li.active a:hover, #nav li.activelonger a:hover, #nav li.activemidsize a:hover, #nav li.activexlong a:hover {
		background: #e5f3c4;
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		left: -999em;
		visibility: visible;
	}
	
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
		left: 0px;
		visibility: visible;
	}
	
	#nav li:hover, #nav li.sfhover {
	visibility: visible;
}
	

</style>