@charset "UTF-8";
/* CSS Document */

@import url(nav.css);
@import url(navleft.css);
/*------------------------------------------------------------------
home.css

Project:		Harvard President's Office site 
				http://www.president.harvard.edu/

Version:		1.0
Last change:	12/03/08
-------------------------------------------------------------------*/


/*------------------------------------------------------------------
B A S I C
-------------------------------------------------------------------*/

body {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	font-size: 100%;
	line-height: 1.25em;
	color: #bbb;
	background: #000 url(bg_home1.gif) top center no-repeat; 
	/* rel to stylesheet */
}
	
img {border: none;}
ul {margin: 0; padding: 0;}
li {margin: 0; padding: 0; list-style-type: none;}
a {text-decoration: none;}

/*------------------------------------------------------------------
L A Y O U T
-------------------------------------------------------------------*/
#content {
	position: relative;
	width:960px;
	font-size: 0.8em;
	margin: 5px auto 0em;
	padding: 0;
	}
	
#header {
	margin: 0em auto 1.25em;
	padding: 0;
	/*border: 1px dashed teal;*/
	}

div#nav {
	position: absolute;
	top: 0;
	right: 0;
	z-index:1000;
	}
/* #banner used in the header.incl file. */
#banner {
	float: left;
}
#banner h1 {
	position: absolute;
	top: -9999px;
	}
/* Left red area restructured so transparency works in IE6. Divs are absolutely positioned to place opaque menu over transparent background. */
div#left-nav-top {
	position:absolute;
	top:1px;
	left:0px;
	}	

div#left-nav {
	position:absolute;
	top:1px;
	left:0px;
	z-index:0;
	width: 210px;
	/* For IE */
 	filter:alpha(opacity=70);
  	/* CSS3 standard */
 	opacity:0.7;
	}

div#page-guts {
	float:right;
	margin:1px 0 0 0;
	/* For IE6 */
	/*_margin-top:0px;*/
	width: 750px;
	font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
	/*
	font-size: 1.155em;
	*/
	line-height:1.375em;
	}

div#page-guts .content {
  padding: 9px 0 9px 35px;
 /* For testing */
  min-height:525px; 
  /* For IE6 */
 _height:525px;
  }
	
#footer {
	position: relative;
	width:960px;
	margin: 20px auto;
	padding:0;
}

.clear { clear:both; height:1; margin:0; }

.img-left { float:left; margin: 2px 11px 15px 0; }

a .img-left {border: 1px solid black}
a:hover .img-left {border: 1px solid white}

.img-left-large { float:left; margin: 2px 19px 17px 0; display:block }

a .img-left-large {border: 1px solid black}
a:hover .img-left-large {border: 1px solid white}



.offset { 
	position: absolute;
	left: -9999px;
	}
	
div#skipnav a:focus, div#skipnav a:active {
  position: relative;
  top: 100px; 
  left: 10030px;
  display: block;
  padding: 15px; 
  width: 15em; 
  z-index: 9;
  font-size: 1.5em;
  text-align: center;
  font-weight: bold;
  color: #991122;
  background-color: #fff;
	filter:alpha(opacity=75);
  /* CSS3 standard */
  opacity:0.75;
	}

/*------------------------------------------------------------------
T Y P O G R A P H Y  &  D E S I G N 
-------------------------------------------------------------------*/

em {font-style: italic;}	
strong {font-weight: bold; font-style: normal;}

h2, h3 {
	font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
  }
  
h2 {
	font-size:26px;
	font-weight:normal;
	margin:0 0 16px 0;
	padding:31px 0 0 0;
	color:#ffffff;
  }

h3 {
	font-size:1.313em;
	font-weight:bold;
	color:#ee2233;
	padding: 7px 0 12px 0;
	margin:0;
  }
  
#feature {
    margin:23px 0 0 0;
	padding: 0 0 0 0;
    color: #cccccc;
	display:block;
    }
  
div#feature a {
	text-decoration: none;
	border-bottom: none;
	font-weight:bold;
	color:#ee2233;
	}
  
div#feature a:hover, div#feature a:active {
	border-bottom: 1px dotted white;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	color:#ffffff;
	}
  
div#feature a h3 {
	font-size: 1.3em;
	line-height:1.35em;
	font-weight:bold;
	color:#ee2233;
	margin:0;
	padding: 2px 0 0 0;
	}
  
div#feature a:hover h3, div#feature a:hover h4 {
	border-bottom: 0;
	}

div#feature a h4 {
	font-size: 1.25em;
	line-height: 1.45em;
	font-weight:normal;
	color:#cccccc;
	padding: 10px 0 21px 0;
	margin:0;
  }
  
div#feature a em {
	font-size: 12px;
	font-weight:bold;
	color:#ee2233;
	padding-top: 16px;
  }
  
.multimedia h4 {
	font-size:1.000em;
	font-weight:bold;
	color:#ffffff;
	display:inline;
	margin:0;
	padding:0;
  }
  
.multimedia a:hover h4 {
	text-decoration: underline;
  }
  
h4 {
	font-size:1.000em;
	line-height: 140%;
	font-weight:bold;
	color:#cccccc;
	margin: 0;
	padding: -1px 0 0 0;
  }
  	
a strong {
  color:#cccccc;
  padding: 8px 0 0 0;
  outline: none;
  }	
  	
a:hover strong {
  color:#ffffff;
  padding: 8px 0 0 0;
  outline: none;
  }	
  
#col-left, #col-right {margin:0; padding: 13px 0 0 0 }
  	
a:hover span.col-left {
  color:#ffffff;
  border-bottom:1px dotted white;
  padding: 8px 0 0 0;
  outline: none;
  }	
  
h5 {
	font-size:0.750em;
	font-weight:bold;
	color:#cccccc;
	display:inline;
	margin:0;
	padding:0;
  }
	
	
div#page-guts .drewsphoto a {border-bottom:0; text-decoration:none; padding:0; margin:0}
div#page-guts .drewsphoto a:hover {border-bottom:0; text-decoration:none; padding:0; margin:0}

	
div#page-guts .teaser a {
	font-size:0.9375em;
	text-decoration: none;
	font-weight:bold;
	color: #ee2233;
	padding-top: 10px;
	margin-top:10px;
	outline: none;
	}
/* Show only to IE7 */
*:first-child+html div#page-guts .teaser a {
	font-size:1em;
  }
/* Show only to IE6 */
* html div#page-guts .teaser a {
	font-size:1em;
  }

div#page-guts a span {
	font-weight: normal;
	color: #cccccc;
  }

div#page-guts a:hover span {
	font-weight: normal;
	color: #ffffff;
  }
 
.white {color:#ffffff}
	
div#page-guts .teaser a:hover {
	text-decoration: none;
	border-bottom:1px dotted white;
	color: #ffffff;
	padding-top: 10px;
	margin-top:10px;
	outline: none;
	}

div#page-guts a em {
  color:#cccccc;
  font-size:1.2em;
  line-height:0.8em;
  padding-left:0.1em;
  font-style: normal;
  }
/* Show only to IE7 */
*:first-child+html div#page-guts a em {
	font-size:0.9375em;
  }
/* Show only to IE6 */
* html div#page-guts a em {
	font-size:0.9375em;
  }
/* Show only to IE7 */
*:first-child+html div#page-guts a strong {
	font-size:0.9375em;
  }
/* Show only to IE6 */
* html div#page-guts a strong {
	font-size:0.9375em;
  }
  
div#page-guts a:hover em, div#page-guts a:active em {
  color:#cccccc;
  }
  
div#page-guts p {
  font-size:1.125em;
  font-weight: normal;
  line-height:1.45em;
  padding: 0 0 0.7em 0;
  margin: 0;
  }
  
 .icon { margin:1px 0 -1px 0}

/* B A N N E R */

#banner img {
	float: left;
}
#banner h1 {
	margin-left: -9999px;
	position: absolute;
	
	/*	font-size: 16px;
	letter-spacing: .27em;
	color: white;
	padding: 6px ;
	margin-left: 33px;
	font-weight: lighter;
*/
}

/* F O O T E R */

#footer {
	font-size: .75em;
	font-weight: bold;
	text-align: center;
	clear:both;
}
#footer a {
	text-decoration: none;
	color: #dd3344;
	}
#footer a:hover,
#footer a:active {
	text-decoration: none;
	border-bottom: 1px dotted #ffffff;
	color: #ffffff;
	}
#footer span {
	padding-left: 5px;
	padding-right: 5px;
	}
	
	
/*------------------------------------------------------------------
M A R K U P - F R E E   C L E A R I N G
from http://www.positioniseverything.net/easyclearing.html
-------------------------------------------------------------------*/


div#header:after,
div.page-content:after,
div.page-content .content:after,
div.page-nav:after,
#faq ul li:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

/* IE6; hides from IE-mac \*/
* html div#header,
* html div.page-content,
* html div.page-content .content,
* html div.page-nav,
* html #faq ul li {
	height: 1%;
	}

/* End hide from IE-mac */

/* finally, for IE7 */
*:first-child+html div#header,
*:first-child+html div.page-content,
*:first-child+html div.page-content .content,
*:first-child+html div.page-nav,
*:first-child+html #faq ul li {
	min-height: 1px;
	}