/*------------------------------------------------------------------
underpages.css

Project:		SPR COFFEE ENGLISH site 
						www.SPRCOFFEE.com
						**NOT** IN PRODUCTION
Version:		1.0
First make:	02/25/09 
Written by:		Linda Jiang SPR
Email:    linda1984@126.com
-------------------------------------------------------------------*/


/*------------------------------------------------------------------
L A Y O U T
-------------------------------------------------------------------*/

div#page-content {
	/*font-size: 0.8em;*/
	/*margin: 1.15em auto 0em;*/
	padding: 4px;
	background: url(../images/bg_underpages.png);
	
	/* IE6 */
	_background-image:url(../images/bg_underpages.png);
	_background-color:#991122;
	/* IE7 */
	*background-image:url(../images/bg_underpages.gif);
	*background-color:#991122;
	
	}
	
div#page-header {
	float: left;
	width: 206px;
	/*height: 478px;*/
	/*border: 1px dashed teal;*/
	}

div#page-guts {
	float:right;
	/*float: right;*/
	width: 746px;
	font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
	/*padding: 2em;*/
	background: #000000;
	/*font-size: 1.155em;*/
	line-height:1.615em;
	}

div#page-guts .content,
#page-guts .page-nav {
  padding: 0.75em 2.25em;
  }

/* FIX THIS :: may not need these classes. I think I worked it out so I'm better utilizing existing classes. */
div#page-guts .content-opaque {
  padding: 0.75em 2.25em;
  background-color:#fff; 
  color:#333;
  }

/* FIX THIS  11.23.08 remove this? what else does it affect? see about/harvard at a glance, other opaque pages (eg campus tours). Address conflict with Site Map styles */
div#page-guts .content-opaque a {
    text-decoration: none;
	color: #9a1123;
}

div#page-guts .content-opaque a:hover  {
	text-decoration: none;
	color: #000;
  }
  
/*
div#page-guts .verbose {
  padding: 2em 12.25em;
  }

*/
div#a-linkcolleft {
	float:left;
	width: 100%;
	/*border: 1px solid teal;*/
}
div#a-linkcolleft2 {
	float:left;
	width: 47%;
	/*border: 1px solid teal;*/
}
div#a-linkcolleft3{
	float:left;
	width: 56.5%;
	/*border: 1px solid teal;*/
}
div#a-linkcolleft4{
    float:none;
	width:100%;
	/*border: 1px solid teal;*/
}
div#a-linkcolcenter1{
	margin-left:22%;
	width:58%;
	/*border: 1px solid teal;*/
}
div#a-linkcolcenter2{
	margin-left:20%;
	width:64%;
	/*border: 1px solid teal;*/
}
div#a-linkcolright {
	float:right;
	width: 47%;
	/*border: 1px solid teal;*/
}

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

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

#page-header h2 {
  margin: 1em 1.25em;
	font-weight: normal;
	font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
	font-size: 1.115em;
	line-height:1.3125em;
	color: #FFF;
	/*border-bottom: 1px solid #cc6666;*/
}

.page-content h3 {
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	text-transform:uppercase;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #666666;
	margin: 0 0 0.75em;
	padding: 1em 0 0.25em;
/* FIX THIS 11.23.08 add this color. double check that it doesn't mess with anything. :: broke Contacts. need to fix bg color for Student Info type ages that have no 'page-nav' class.
	color:#000;
*/
}

div#a-linkcolleft ul, div#a-linkcolleft2 ul,div#a-linkcolleft3 ul,div#a-linkcolleft4 ul, div#a-linkcolright ul {
	padding-bottom:0em;
	/*margin-top: 1em;*/
}

div#a-linkcolleft li, div#a-linkcolleft2 li, div#a-linkcolleft3 li, div#a-linkcolleft4 li{
  margin: 0.7em 0 0.7em -1.5em;
  }
div#a-linkcolright li {
  margin: 0.7em 0 0.7em -1.6em;
  }
div#a-linkcolleft a, div#a-linkcolleft2 a, div#a-linkcolleft3 a, div#a-linkcolleft4 a, div#a-linkcolright a {
	text-decoration: none;
	/*font-weight: bold;*/
	color: #ccc;
	border-bottom: 1px dotted #000;
}
div#a-linkcolleft4 a {
	text-decoration: none;
	/*font-weight: bold;*/
	color: #ccc;
	border-bottom: 1px dotted #000;
}
div#a-linkcolleft a:hover, div#a-linkcolleft2 a:hover, div#a-linkcolleft3 a:hover, div#a-linkcolleft4 a:hover, div#a-linkcolcenter1 a:hover, div#a-linkcolcenter2 a:hover,div#a-linkcolright a:hover,
div#a-linkcolleft a:active, div#a-linkcolleft2 a:active, div#a-linkcolleft3 a:active, div#a-linkcolleft4 a:active, div#a-linkcolcenter1 a:active,div#a-linkcolcenter2 a:active, div#a-linkcolright a:active {
	text-decoration: none;
	border-bottom: 1px dotted #FFFFFF;
	color: #FFFFFF;
	}

div#a-linkcolleft a span.story-link, div#a-linkcolleft2 a span.story-link, div#a-linkcolleft3 a span.story-link,  #page-guts .intro span.story-link {
  color:#ee2233;
  /*font-size:1.2em;*/
  line-height:0.8em;
  padding-left:0.1em;
  }
div#a-linkcolright a span.story-link {
 /* color:#ee2233;
  font-size:1.2em;*/
  line-height:0.em;
  padding-left:0.1em;
  }
div#a-linkcolleft a:hover span.story-link, div#a-linkcolleft2 a:hover span.story-link, div#a-linkcolleft3 a:hover span.story-link, div#a-linkcolleft4 a:hover span.story-link, div#a-linkcolright a:hover span.story-link,
div#a-linkcolleft a:active span.story-link, div#a-linkcolleft2 a:active span.story-link, div#a-linkcolleft3 a:active span.story-link, div#a-linkcolleft4 a:active span.story-link, div#a-linkcolright a:active span.story-link {
  color:#fff;
  }


/* Other template types */

#page-guts.thin .content {
  padding: 1.9em 40px;
  }

#page-guts.thin #a-linkcolleft {
  width:190px;
  }
  #page-guts.thin #a-linkcolleft2 {
  width:190px;
  }
  #page-guts.thin #a-linkcolleft3 {
  width:190px;
  }
   #page-guts.thin #a-linkcolleft4 {
  width:190px;
  }
  #page-guts.thin #a-linkcolright {
  width:190px;
  }

#page-guts.opaque {
	background-color:#fff;
	padding-bottom:1em;
	color:#444;
	text-decoration:none;
  }

.opaque a {
	color:#444;
	/* CHECK THIS : Turned off to fix link in top black of Officers and Deans
	border-bottom:1px solid #fff;
*/
	text-decoration:none;
	}

.opaque a:hover {
  color:#000;
  border-bottom:1px dotted #000;
  text-decoration:none;
  }

#page-guts .page-nav {
  background-color:#222;
  color:#ccc;
  }

.page-content ol {
  margin:0;
  padding:0;
  }

#page-guts .page-nav ul li {
  /*list-style:decimal inside;*/
  border-bottom:1px solid #555;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	font-size:0.869em;
	text-transform:uppercase;
	letter-spacing:0.05em;
	margin-bottom:1.125em;
	padding: 0.5em 0em 0.25em 0em;
  }

#page-guts .page-nav li a,
#page-guts .page-nav li a:hover {
  border:0;
  }

/* Page Specific 

#page-about {
  background:url(../images/general_info.jpg) top right no-repeat;
  }

#page-siteguide {
  background:url(../images/siteguide.jpg) top right no-repeat;
  }
*/


.content ul {
  position:relative;
  padding-top:1em;
  }

.content ol li {
  position:relative;
  list-style:decimal inside;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	font-weight:bold;
  }

.content li h3 {
	display:inline;
	border-bottom:0px;
	font-size:1.2em;
	font-weight: bold;
  }

.content li a.jump-top {
	position:absolute;
	/*bottom:-536px;*/
	right:24px;
	z-index:10;
	font-size:0.85em;
	background:url(../images/arrow_bullet_up_off.gif) left center no-repeat;
	padding-left: 10px;
	border:0;
	font-weight:bold;
	color: #c00000;
	/* IE6 
  _top:1em;*/
	_right:2.75em;
	top: 344px;
  }
.content li a.jump-top2 {
	position:absolute;
	/*bottom:-536px;*/
	right:24px;
	font-weight:bold;
	z-index:10;
	font-size:0.85em;
	background:url(../images/arrow_bullet_up_off4.gif) left center no-repeat;
	padding-left: 10px;
	border:0;
	color: #c00000;
	/* IE6 
  _top:1em;*/
	_right:2.75em;
	top: 344px;
  }

.content li a.jump-top2:hover {
  background:url(../images/arrow_bullet_up_on2.gif) left center no-repeat;
  border:0;
  color:#bbb;
  }
.content li a.jump-top:hover {
  background:url(../images/arrow_bullet_up_on.gif) left center no-repeat;
  border:0;
  }

.content ol ol,
.content ol ul {
  padding-bottom:1em;
  padding-top:0.5em;
  border-top:1px solid #aaa;
  }

.content ol ol ol,
.content ol ul ul {
  padding-bottom:0;
  padding-top:0;
  border-top:0;
  }

.content ol ol li,
.content ol ul li {
  border-bottom:0px;
	margin-bottom: 0.4em;
	padding-top:0em;
  font-weight:normal;
}

.content ol ol li {
  list-style:lower-alpha inside;
  font-family: Helvetica, Arial, Tahoma, sans-serif;
/* fix bug 236 here
padding-left:1em; margin-left:1em;
*/
  }

.content ol ul li {
  list-style:none;
  padding-top:0.5em;
  }

.content ol ul ul li,
.content ol ol a {
	font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
	}

.content ol ul ul li {
  padding-left:1em;
  padding-top:0em;
  }

.content ul ul a span.story-link,
.content ul a span.story-link {
  color:#000;
  padding-left:0.5em;
  }

.content h4 {
  margin:0;
  padding:0;
  color:#444;
  }


/* alpha page nav styles */

#page-guts .intro {
	padding: 1.25em 2em;
/* 11.24.08 added colors */
	background:#000;
	color:#ccc;
	text-decoration:none;
	}
	
#page-guts .intro a {
	color: #ccc;
	text-decoration:none;
	}
	
#page-guts .intro h3 {
	font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
	text-transform: none;
	font-weight: normal;
/* FIX THIS : add color. double check it doesn't mess with anything. */
	color:#bbb;
	}

#page-guts .intro .nodivider h3  {
        border-bottom:0;
	}
	
#page-guts  span.breadcrumb {
	font-weight: bold;
	color: #fff;
	}

#page-guts .page-nav ol#alpha-nav {
	margin: .86em 0;
	border: 0pt none;
	}

#page-guts .page-nav ol#alpha-nav li {
	/*list-style-type: disc;*/
	margin: 0 .115em;
	display: inline;
	border-bottom: none;
	}

ol#alpha-nav li a {
	font-weight: bold;
	/*font-size: 1.25em;*/
	color: #ccc;
	}
	
div.alpha-list {
	background-color:#fff;
	color: #000;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	font-weight: bold;
	}
	
div.alpha-list a {
	font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
	color: #912;
	font-weight: normal;
	}
	
.alpha-list table {
	padding: 2em;
	}
	
.alpha-list table td {
	padding: .5em;
	}

.alpha-list table tr {
	width: 680px;
	display: block;
	}

span.link-description {
	font-family: Georgia, Utopia, Palatino, 'Palatino Linotype', serif;
	color: #222;
	/*font-size: .9em;*/
	font-weight: normal;
	}

.campus-tour table { border:0; padding:4px; width:100%; font-family:Helvetica, Arial, Tahoma, sans-serif; font-size:.8125em; }
.indented-list li { margin:4px 0 4px 20px; }
.bulleted-list li { margin:4px 0 4px 20px; list-style: square outside url(/images/bullet_square.gif); }

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


 
/* 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:68px;
	left:1px;
	}	

div#left-nav {
	position:absolute;
	top:68px;
	left:1px;
	z-index:0;
	width: 210px;
	/* For IE */
 	filter:alpha(opacity=70);
	/* CSS3 standard */
 	opacity:0.7;
	}
div#page-guts2 {
	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-guts2 .content {
  padding: 9px 0 9px 35px;
 /* For testing */
  min-height:525px; 
  /* For IE6 */
 _height:525px;
  }