@charset "utf-8";
/*
THE HUMANITIES PROJECT COLOR SCHEME
HP Red 1 (text):						#9D0A0E
HP Dark Blue (text):					#015878
HP Light Blue (background):				#D9E5E9
HP Dark Grey 1 (text):					#2F2F2F
HP Dark Grey 2 (text):					#595959
HP Light Grey 1 (text):					#9A9A9A
HP Light Grey 2 (i.e., footer text):	#B4B4B4
HP Background Grey: 					#B9B3B3
HP Banner Background:					#58A6BC
Another gray (search box):				#E6E6E6
*/


/* THE PAGE BODY */
body
{
	color: #2F2F2F; /* Default text color for all elements. */
	background: #015878; /* Dark blue background for all pages. */
	font-family: Arial, Helvetica, sans-serif; /* By default, all fonts are Arial/sans-serif. */
	font-size: 12px; /* Is this the size font we want? */
	padding: 15px; margin: 0; /* This gives a uniform page border across all browsers. */
}
* html body { text-align: center; } /* This centers the container div for Internet Explorer because auto margins don't work. */


/* PHOTOS, CAPTIONS, AND FLOATS */
img { border: none; }
img.photo, .video { border: solid 1px #015878; } /* Photos that should have a border. */
a:hover img.photo { border: solid 1px #9D0A0E; } /* If an image is a link, hovering will change the border color. */
img.right { float: right; margin: 0 0 0 10px; padding: 0; } /* An image floated right. */
img.left { float: left; margin: 0 10px 0 0; padding: 0; } /* An image floated left. */
div.PhotoFrame {  }
div.caption
{
	font-size: 10px;
	color: #9A9A9A;
	text-align: left;
	margin: 5px 0;
}
div.caption p { margin: 0 0 5px 0; text-align: left; }
div.caption a, div.caption a:visited { color: #9A9A9A; }
.right { float: right; margin: 0; padding: 0 0 0 10px; } /* Any element floated right. */
.left { float: left; margin: 0; padding: 0 10px 0 0; } /* Any element floated left. */


/* LINKS */
a,a:visited { color: #015878; text-decoration: none; }
a:hover { text-decoration: underline; }
a.email /* This adds a small envelope icon to the left side of all links that have the class "email". */
{
	padding-left: 15px; /* Make some space for the icon. */
	background-image: url("/College/humanities/img/icons/envelope.gif"); /* Place the icon as a background image. */
	background-position: left; /* Position it left. */
	background-repeat: no-repeat; /* Don't tile the image. */
}
a.external /* This adds a small arrow icon to the right side of all links that have the class "external" */
{	
	padding-right: 12px; /* Make some space for the icon. */
	background-image: url("/College/humanities/img/icons/external.png"); /* Place the icon as a background image. */
	background-position: right; /* Position it right. */
	background-repeat: no-repeat; /* Don't tile the image. */
}
a.xml /* This adds a small envelope icon to the left side of all links that have the class "email". */
{
	padding-left: 15px; /* Make some space for the icon. */
	background-image: url("/College/humanities/img/icons/xml.gif"); /* Place the icon as a background image. */
	background-position: left; /* Position it left. */
	background-repeat: no-repeat; /* Don't tile the image. */
}
* html a.external { background: none; padding: 0; } /* This disables the arrow on long links in Internet Explorer. (They don't display properly.) */


/* OTHER DEFAULTS AND USEFUL ELEMENTS */
form { margin: 0; } /* By default, forms should have zero margins. */
.active { color: #9D0A0E; } /* Elements marked with the class "active" will display in red. */
div.spacer { display: block; clear: both; margin: 0; padding: 0; line-height: 0; } /* This is useful for clearing floats. */
.FirstElement { margin-top: 0 !important; } /* This removes the top margin from the first element in a div so that it display at the top of the containing div. */
textarea { font-family: Arial, Helvetica, sans-serif; color: #2F2F2F; }
.title { font-style: italic; } /* Titles should be italicized. */
.Label, .label { float: left; display: block; width: 75px; }
p.note { font-style: italic; } /* Italicized notes that might end up at the bottom of a page. */
.important { color: #9D0A0E; } /* Important notes. */
.error { color: #9D0A0E; }
hr /* Horizontal rules. */
{
	margin: 5px 0; /* A top-and-bottom margin. */
	width: 100%; /* Horizontal rules should span their containers. */
	color: #D9E5E9; /* Set the color in Internet Explorer. */
	/* The next lines are for Firefox and Opera. They treat hr tags like boxes. */
	height: 0px; /* The inside of the hr should be collapse to nothing. */
	background: #D9E5E9; /* This is the inside color. */
	border: none; /* This removes the groove effect. */
	border-top: solid 1px #D9E5E9; /* And this makes a single 1px-wide line. */
}

/* TABLES */
table.chart {
	margin: 0 0 20px 5px;
	border-collapse:collapse;
	width: 100%;
}
table.chart caption {
	margin:0;
	padding-bottom:15px;
	font-size:larger;
	font-style: italic;
	text-align:center;
}
table.chart th {
	border-bottom:1px solid #015878;
	border-top:1px solid #015878;
	background:#EEE;
	font-weight:bold;
	margin:0;
	padding:4px;
	text-align:left;
	white-space:nowrap;
}
table.chart td {
	width: 50%;
	padding:4px;
	margin:0;
	border-bottom:1px dashed #9A9A9A;
	vertical-align: top;
}


/* BUG FIXES */
/* Internet Explorer sometimes fails to display text properly.  Should this happen, 
apply the class "buggy" to the offending element, and this should fix the problem. */
* html div.buggy { height: 1%; }
/* Internet Explore sometimes displays some elements of multi-tiered unordered lists 
with too much spacing. Applying the class "buggy" to the ul tag should correct the 
problem.*/
* html ul.buggy { height: 1%; }
/* Internet Explorer incorrectly sizes italicized fonts.  This may increase the width 
of an element that contains italicized font.  To counter this bug, we should say that 
overflowing content should be visible.  This prevents Internet Explorer from resizing 
the container (which could break the page. */
* html .italicsBug { overflow: visible; }


/* BULLETED AND NUMBERED LISTS */
ul,ol /* Standardizes the display of lists across browsers. */
{ margin: 0; padding: 0; }
ol { padding-left: 25px; }
ul { padding-left: 20px; list-style-type: square; } /* By default, all bulleted lists have square bullets. */
ul li, ol li { margin: 5px 0 0 0; }
ol li li { list-style: lower-alpha; }
li.last, ol.last { margin-bottom: 0 !important; }
ul.nobullets { list-style-type: none; padding-left: 10px; }
ul.bullets { list-style-type: square; padding-left: 15px; }


/* DEFAULT TEXT STYLES */
/* These are just here to serve for error-catching.  Try to control these more specifically inside each section of the page. */
h1 { font-size: 12px; text-transform: uppercase; color: #9D0A0E; padding-bottom: 5px; border-bottom: solid #58A6BC 1px; margin: 15px 0 5px; }
h2 { font-style: italic; color: #015878; font-family: "Times New Roman", Times, serif; font-size: 18px; }
h2 a { color: #015878; } h2 a:hover { color: #9D0A0E; text-decoration: none; }
h3 { /*text-transform: uppercase;*/ color: #9D0A0E; font-size: 12px; margin: 10px 0; }
h4 { font-size: 12px; color: #2F2F2F; margin: 10px 0 3px; }
h5 { font-size: 12px; color: #2F2F2F; margin: 10px 0 3px; }
h6 { font-size: 12px; color: #2F2F2F; margin: 10px 0 3px; }
p { font-size: 12px; /*text-align: justify;*/ color: #2F2F2F; line-height: 1.5em; }


/* THE HEADER */
div#header { height: 38px; overflow: hidden; _overflow: visible;  background: #D9E5E9; border-top: solid 1px White; } /* This makes sure the header is the same size in all browsers.  IE6 makes it a bit too tall. */
div#header a#CollegeLogo { display: block; float: left; width: 232px; position: absolute; }
div#header a#CollegeLogo img { position: relative; left: 10px; top: 8px; }
div#header div#info { float: right; width: 495px; padding: 0; text-align: right; height: auto; }
div#header div#info a.hidden { color: #D9E5E9; }
div#header div#info a.hidden:hover { color: #9D0A0E; text-decoration: none; }
div#header div#info /* The date at the top right of the page. */
{
	float: right;
	color: #2F2F2F;
	margin: 5px 10px 0 0;
}
* html div#header div#info { margin: 5px 5px 0 0; } /* Internet Explorer uses an incorrect margin size. */


/* THE MAIN PAGE CONTAINER */
div#container
{
	/* This container should have zero margins and padding.  Setting them to anything else 
	could cause browser incompatibilities. */
	width: 749px; padding: 0; margin: 0 auto;
	background: White; overflow: hidden; 
}
* html div#container { text-align: left; } /* This resets text alignment in Internet Explorer. */


/* THE NAVIGATION BAR */
div#navigation { text-align: right; padding: 10px; color: #595959; font-size: 11px; }
div#navigation a
{
	text-decoration: none;
	color: #595959;
	margin: 0; padding: 10px;
	margin-right: -1px;
	border-left: solid 1px LightGrey;
	border-right: solid 1px LightGrey;
}
div#navigation a:hover { color: White; /*color: #9D0A0E;*/ background: #9D0A0E; }


/* THE BANNER BLOCK */
div#banner { background: #58A6BC; height: 121px; }


/* THE MAIN PAGE BLOCK */
div#main {}