td { vertical-align: top;}

hr {border: 1px dotted gray; border-color: #B09B88 white white; background: #fff;}

/*enclose content & side nav in #container*/
#container {
	width: 96%;
	max-width:1200px; 
/*	margin: 10px auto;
*/	margin-top:10px;
	margin-bottom:10px;
	margin-left:20px;
	background-color: #fff;
	color: #333;
	line-height: 130%;
}

#crumbtrail {
/*	height:25px;
*/	margin-left:182px/*215px - commented when CS&IT logo is used*/;
	padding-bottom:5px;
}

#crumbtrail a {
	color:#333;
}

/*side column styles*/	
#back {
	margin-bottom:14px;
	}
#back a {
	text-decoration:none;
	color:#333;
	font-weight:bold;
	font-style:italic;
	}

#leftnav {
	float: left;
	width: 166px;
	/*margin-top:55px;  this line is only used with CS&IT logo turned on*/
}

#leftnav h3/*, #leftnav .back */{
	background: #A63839;
	color: #FFF;
	text-transform: uppercase;
	padding: 0.25em 0 0.25em 0.5em;
	font: bold 1.33em/1.0em Arial, Verdana, sans-serif;
	letter-spacing: 1px;
}

#leftnav h3 a:link, #leftnav h3 a:visited {
	color: #FFF;
	text-decoration: none; 
}

/*#leftnav .back {
	font-size:88%;
	background-color: #c5b299;
}

#leftnav .back a {
	color: #333;
	text-decoration:none;
}

#leftnav .back a:hover {
	color:#555;
}*/

#leftnav-nocaps {
	float: left;
	width: 160px;
}

#leftnav-nocaps h4 {
	background: #A63839;
	color: #FFF;
	padding: 0.25em 0 0.25em 0.5em;
	font: bold 1.33em/1.0em Arial, Verdana, sans-serif;
	letter-spacing: 1px;
}

#leftnav-nocaps h4 a:link, #leftnav-nocaps h4 a:visited {
	color: #FFF;
	text-decoration: none; 
}

#leftnav .nav-archives {
	font-style:italic;
	font-weight:bold;
	color:#555555;
}

#rightnav {
	float: right;
	width: 157px;
	padding: 65px 0 0 0;
	vertical-align: top;
	margin: 0;
}

#rightnav ul {margin: .90em 0 0 1.85em;}

#rightnav li {margin:3px 0;}

#rightnav a:link, #rightnav a:visited { color: #004B8C; }

#leftnav p, #rightnav p { margin: 0 0 1em 0; }

.rightnav-head { background-color: #F3EDE6; padding: 2px 2px 2px 2px;}

#rightnav h3 {
	font-size:12px;
	line-height:13px;
	}

#navlist { /*margin-left: 30px;*/ }
	
#navlist {
	border-bottom: 1px dotted #9E855A;
}

#navlist li {
	list-style: none;
}

#navlist a {  /* total width of a (padding + width) = 166px*/
	display: block;
	padding: 5px 5px 5px 10px;
	width: 151px;
	color: #333;
	background-color: #F3EDE6;
	text-decoration: none;
	border-top: 1px dotted #9E855A;
	font-weight: bold;
	font-size: .90em;
}
	
#navlist a:hover {
	color: #fff !important;
	background-color: #BAA588 !important;
	text-decoration: none;
}

#navlist ul a {font-weight: normal;}

#navlist #active #current {
	background: #BAA588;
	color: #FFF;
	padding: 5px 10px 5px 10px;
	font-weight: bold;
}

#navlist #active #current-nohighlight {
	background: #F3EDE6;
	color: #333;
	padding: 5px 10px 5px 10px;
	font-weight: bold;
}


#navlist #active ul a {
	color: #333;
	background-color: #F3EDE6;
	border-top: none;
	
}

#subnavlist a {  /* total width of a (padding + width) = 166px*/
	display: block;
	text-indent: -21px;
	padding: 3px 3px 3px 32px;
	width: 125px;
	color: #333;
	background-color: #F3EDE6;
	text-decoration: none;
}

#subnavlist #subactive #subcurrent {
	display: block;
	text-indent: -21px;
	padding: 3px 3px 3px 32px;
	width: 125px;
	color: #fff;
	background-color: #BAA588;
	text-decoration: none;
	font-weight: normal;
}

#subnav-4thlevel a {  /* total width of a (padding + width) = 166px*/
	display: block;
	text-indent: 0px;
	padding: 3px 7px 3px 19px;
	width: 140px;
	color: #333;
	background-color: #F3EDE6;
	text-decoration: none;
}
	
#subnav-4thlevel #active #current {
	display: block;
	text-indent: 0px;
	padding: 3px 7px 3px 19px;
	width: 134px;
	color: #fff;
	background-color: #BAA588;
	text-decoration: none;
	font-weight: normal;
}

/*=============================================*/
/* Control display of left navigation elements */
/*=============================================*/

#navlist ul.software, /* Computer Science classes */
#navlist ul.computation, 
#navlist ul.security,
#navlist ul.scalable, 
#navlist ul.visualization, 
#navlist ul.eri, /* Student Institutes classes*/
#navlist ul.disl, /* Facilities classes */
#navlist ul.idc {
	display:none;
}

body#advanced-software * #navlist * ul.software, /* Computer Science classes */
body#computational-sciences * #navlist * ul.computation,
body#security * #navlist * ul.security, 
body#scalable-computing * #navlist * ul.scalable,
body#visualization-sci-computing * #navlist * ul.visualization, 
body#eri * #navlist * ul.eri, /* Student Institutes classes */
body#disl * #navlist * ul.disl, /* Facilities classes */
body#idc * #navlist * ul.idc {
	display:block;
}


/*====================================================*/
/* Control display of left nav ARCHIVE-level elements */
/*====================================================*/

#navlist ul.archive {
	display:none;
}

body.archive * #navlist ul.archive {
	display:block;
}


/*=======================*/
/*  Main content styles  */
/*=======================*/

h2 {
	color: #9D2D2C;
	border-bottom: 1px dotted #B09B88;
	font: bolder 1.66em/1.0em Verdana, Arial, Helvetica, sans-serif;
	padding-bottom: 0.15em;
	/*margin-top:25px; this line is only used when CS&IT logo is turned on*/
	margin-left: 182px;
}

.two-col h2 {
	margin-left:5px;
}
	
#content-sub {
	margin-left: 182px;
	margin-right: 170px;
	border-right: 1px dotted #B09B88;
	max-width: 65em;
	padding-top:8px;
	padding-right: 1em;
	vertical-align:top;
	font: normal 1.04em/1.35em Verdana, Arial, Helvetica, sans-serif;
}

.two-col #content-sub {
	margin-left:5px;
}

#content-sub img { /* inline styles for img caption & right-align are at bottom of document*/
	float:left;
	vertical-align:top;
	padding:2px 6px 6px 0px;
	border:none;
}
	
#content-sub h3 {
	color: #333;
	font: bolder 1.20em Verdana, Arial, Helvetica, sans-serif;
	/*font: bolder 1.10em/1.0em Verdana, Arial, Helvetica, sans-serif;*/
}

#content-sub h2 { margin: 0 0 .5em 0; }

#content-sub h3 {margin: 1.25em 0 0.25em;}

#content-sub h4 {margin: 1.25em 0 0.25em; font: bolder 1.0em /* Verdana,*/ Arial, Helvetica, sans-serif;}

#content-sub h5 {margin: 1.25em 0 0.25em; font: bolder .95em Verdana, Arial, Helvetica, sans-serif;}

#content-sub p {margin: .90em 0 0.85em;}

#content-sub ul {margin: .90em 0 0 3.25em;}

#content-sub blockquote {margin: .90em 0 0 3.25em;}

#content-sub ul ul {margin: 0 0 0 3.25em;}

#content-sub ol {margin: .90em 0 0 3.25em;}

#content-sub ol ol {margin: 0 0 0 3.25em;}

#content-sub a:link, #content-sub a:visited { color: #004B8C; }


/*  footer styles  */
#footer-sub {
	clear: both;
	margin: 1em;
	padding: .5em .5em .5em 17em;
	color: #333;
	border-top: 1px dotted #B09B88;
	font: normal .85em/1.00em Verdana, Arial, Helvetica, sans-serif;
}



/**********************/
/*   Inline Styles    */
/**********************/

.small { 
/* make text smaller */
	font: normal .90em/1.35em Verdana, Arial, Helvetica, sans-serif; 
	}

.topnav { 
/* style font of top navigation*/
	font: normal .90em/1.35em Verdana, Arial, Helvetica, sans-serif; 
	}

.brownbar { 
/* add a top border, change padding of any element*/
/* use <span class="brownbar"> around targeted element */
	border-top: 1px dotted #9E855A; 
	width: 100%; 
	padding: .1em 0 .5em 0; 
	}

.raise {
/* pseudo superscript */
	font-size:.65em; 
	vertical-align: super; 
	}

.lower {
/* pseudo subscript */
	font-size: .65em; 
	vertical-align: sub; 
	}
 
#content-sub .text-nowrap { 
/* keep text together on one line */
 	white-space:nowrap; 
	}
 
ul.no-list-style li {
/* remove 'bullets' from any list */
/* maintains list formatting */
	list-style:none;
	}
	
.nomargin { 
/* remove margins from any element */
	margin:0;
	}

/******************************************/
/*  Inline Styles for image manipulation  */
/******************************************/

#content-sub img.img-right { 
/* align an image to the right (instead of default left) */
	float:right;
	padding:2px 0px 6px 6px;
}
#content-sub img.nofloat  { 
/* center an image, no text wrapping */
/* don't put <img> inside <p> */
	display:block;
	float:none;
	margin-left:auto;
	margin-right:auto;
}
/* create captions under images
  SYNTAX:
	<div class="caption">
		<img src="PATH" alt="ALT" />
		<p>caption line 1</p>
		<p>caption line 2</p>
	</div>
*/
#caption {
  float: left;
  border: thin silver solid;
  margin: 0 7px 4px 0;
  padding:2px;
}
#caption-right {
  float: right;
  border: thin silver solid;
  margin: 0 0 4px 7px;
  padding:2px;
}
#caption img, #caption-right img {
	float:none;
	display:block;
	margin-left:auto;
	margin-right:auto;
	padding:4px 4px 4px 4px;
}
#caption p, #caption-right p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  margin:0;
  padding:0;
  line-height:normal;
  clear:left;
}

/*=========================================*/
/*  Styles below originated in New Mexico  */
/*         - uncomment if needed -         */
/*=========================================*/
  
/*PULLQUOTE - CREATES FLOATING IMAGES IN BODY CONTENT AREA. CAN CREATE LISTED PROJECT HTML UNDER THE IMAGES*/
/*div.pullquote-right {float: right; width: 250px; color: #000; font: normal .95em Verdana, Arial, Helvetica, sans-serif; padding: 0px 12px 12px 5px; margin: 5px 0px 5px 0px; }
.pullquote-right a:link {text-decoration: underline; color: #52647A;  }
.pullquote-right a:visited {text-decoration: underline; color: #52647A;  }
.pullquote-right a:hover {text-decoration: underline; color: #FFFFFF;}

div.pullquote-left {float: left; width: 250px; color: #000; font: normal .95em Verdana, Arial, Helvetica, sans-serif; padding: 0px 12px 12px 5px; margin: 5px 0px 5px 0px; }
.pullquote-left a:link {text-decoration: underline; color: #52647A;  }
.pullquote-left a:visited {text-decoration: underline; color: #52647A;  }
.pullquote-left a:hover {text-decoration: underline; color: #FFFFFF;}
*/
  
  
/*PULLQUOTE - CREATES FLOATING IMAGES IN BODY CONTENT AREA. CAN CREATE LISTED PROJECT HTML UNDER THE IMAGES*/
/*div.pullquote-right180 {float: right; width: 180px; color: #000; font: normal .95em Verdana, Arial, Helvetica, sans-serif; padding: 0px 12px 12px 5px; margin: 5px 0px 5px 0px; }
.pullquote-right a:link {text-decoration: underline; color: #52647A;  }
.pullquote-right a:visited {text-decoration: underline; color: #52647A;  }
.pullquote-right a:hover {text-decoration: underline; color: #FFFFFF;}

div.pullquote-left180 {float: left; width: 180px; color: #000; font: normal .95em Verdana, Arial, Helvetica, sans-serif; padding: 0px 12px 12px 5px; margin: 5px 0px 5px 0px; }
.pullquote-left a:link {text-decoration: underline; color: #52647A;  }
.pullquote-left a:visited {text-decoration: underline; color: #52647A;  }
.pullquote-left a:hover {text-decoration: underline; color: #FFFFFF;}
*/

/*PULLQUOTE - CREATES FLOATING IMAGES IN BODY CONTENT AREA. CAN CREATE LISTED PROJECT HTML UNDER THE IMAGES*/
/*div.pullquote-rt-150px {float: right; width: 150px; color: #000; font: normal .95em Verdana, Arial, Helvetica, sans-serif; padding: 0px 12px 2px 5px; margin: 5px 0px 2px 0px; }
.pullquote-rt-100px a:link {text-decoration: underline; color: #52647A;  }
.pullquote-rt-100px a:visited {text-decoration: underline; color: #52647A;  }
.pullquote-rt-100px a:hover {text-decoration: underline; color: #FFFFFF;}
*/