/* 

DOCUMENT INFORMATION
	Document: St. Paul's School - Online Annual Report
	Version:  1.0
	Client:   St. Paul's School
	Author:   Casey Collier (casey_at_dashton.com)
	Use:      Almost everything

TOC
	Utilities
	Main Blocks
	Typography
	Images
	Header Layout
	Content Layout
	Footer Layout

COLORS

	Dark Blue - #003366
	Powder Blue - #EBEEF5
	Cream - #FFFCE9
	Tan - #EEEBD9
	Yellow - #FFCC33
	

FONTS
	default body text  Arial, Helvetica Neue, Helvetica, sans-serif
	subtitle h2 text   Garamond, Hoefler Text, Times New Roman, Times, serif
	form input text    Cambria, Georgia, Times, Times New Roman, Times, serif
	default p text     Copperplate Light, Copperplate Gothic Light, serif
*/

/* NOTES: OPACITY */

/* 

TO WORK IN ALL VERSIONS OF IE
.opaque {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE5-7 first!
	filter: alpha(opacity=50);					// IE8 second!
}

  for IE use:
  filter:alpha(opacity=60);
  
  for CSS3 use:
  opacity:0.6;

*/


/* == UTILITIES */
/* Kills generic underline and outlines, bad for disabled users tho */
a {
	text-decoration: none;
	outline: none;
}
a:hover {
	text-decoration: underline;
}
img {
	border:none;
}

.floatright {
float:right;
}

.floatleft {
float:left;
}

.centered {
margin:0 auto;
display:block;
}

/* Cross-browser method for SUP and SUB */
sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

/* an IE way to make an element hidden */
.hidden {
	position: absolute;
	top: -10000px;
}

blockquote {
font-weight: bold;
padding: 0 10em;
}

blockquote p {
margin: 0;
text-indent: -0.8em; /* quick way to ensure hanging quotes */
}

cite {
text-align: right;
display: block;
}

.opaque {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE5-7 first! */
	filter: alpha(opacity=50);					/* IE8 second! */
}

.clearfix {
clear:both;
}

/* Clear Fix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* == BODY & General Def's */

/* Font Size %100 is defiend in the RESET sheet
   sets baseline grid combined with RESET sheet - 1em equals 10px
   baseline: 12px; */
body {
/* font-size:62.5%;
line-height: 1.8em; */
line-height:12px;
font-family:Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
background:#FFFCE9 url(../img/tile_bg_fade_2.jpg) repeat-x;
/* background:url(../img/texture0117b.jpg); */
/* overflow:visible; kill this if using the sticky footer */
}

.notice-me {color:#FF0000 !important;}
.notice-me li {color:#FF0000 !important;}

/* ==== BLOCKS */

/* PHOTO BACKGROUNDS */
#main_photo {
width: 1024px;
height:716px;
margin: 0 auto;
position:relative;
border:1px solid #FFFCE9;
background:#FFFCE9 url(../img/backgrounds/bg_photo_13.jpg) 0 130px no-repeat;
	-moz-box-shadow: 0px 0px 14px #F6F0E0;
	-webkit-box-shadow: 0px 0px 14px #F6F0E0;
	box-shadow: 0px 0px 14px #F6F0E0;
}

/* PHOTO BACKGROUND - B&W */
#main_photo_intro_text {
width: 1024px;
height:716px;
margin: 0 auto;
position:relative;
border:1px solid #FFFDE9;
background:#FFFDE9 url(../img/backgrounds/bg_intro_text_3.jpg) 0 130px no-repeat;
}

/* PHOTO BACKGROUND - Option 1 */
#main_photo_01 {
width: 1024px;
height:716px;
margin: 0 auto;
position:relative;
border:1px solid #FFFCE9;
background:#FFFCE9 url(../img/backgrounds/bg_photo_01.jpg) 0 130px no-repeat;
}
/* PHOTO BACKGROUND - Option 2 */
#main_photo_02 {
width: 1024px;
height:716px;
margin: 0 auto;
position:relative;
border:1px solid #FFFCE9;
background:#FFFCE9 url(../img/backgrounds/bg_photo_02.jpg) 0 130px no-repeat;
}
/* PHOTO BACKGROUND - Option 3 */
#main_photo_03 {
width: 1024px;
height:716px;
margin: 0 auto;
position:relative;
border:1px solid #FFFCE9;
background:#FFFCE9 url(../img/backgrounds/bg_photo_03.jpg) 0 130px no-repeat;
}
/* PHOTO BACKGROUND - Option 4 */
#main_photo_04 {
width: 1024px;
height:716px;
margin: 0 auto;
position:relative;
border:1px solid #FFFCE9;
background:#FFFCE9 url(../img/backgrounds/bg_photo_04.jpg) 0 130px no-repeat;
}
/* PHOTO BACKGROUND - Option 5 */
#main_photo_05 {
width: 1024px;
height:716px;
margin: 0 auto;
position:relative;
border:1px solid #FFFCE9;
background:#FFFCE9 url(../img/backgrounds/bg_photo_07b.jpg) 0 130px no-repeat;
}

/* BOX - EVERYTHING */
#main_frame {
width: 980px;
height:542px;
padding:4px;
position:absolute;
background:#FFF;
top:149px;
left:18px;
	-moz-box-shadow: 1px 1px 14px #666;
	-webkit-box-shadow: 1px 1px 14px #666;
	box-shadow: 1px 1px 14px #666;
}

#main_frame_hidden {
width:980px;
height:542px;
padding:4px;
position:absolute;
background:#FFF;
top:149px;
left:18px;
	-moz-box-shadow: 1px 1px 14px #666;
	-webkit-box-shadow: 1px 1px 14px #666;
	box-shadow: 1px 1px 14px #666;
display:none;
}

/* NAV BOX */
#nav-wrapper {
border-top:1px solid #003366;
border-bottom:1px solid #003366;
height:25px;
width:1024px;
margin:85px 0 50px 0;
padding:0;
/* position:relative;
top:25px;
left:0; */
text-align:center;
}

#nav-wrapper ul {
margin:-1px auto 0 auto;
height:25px;
text-transform:uppercase;
list-style-type:none;
list-style-position:outside;
/* CSC DEV */
text-align:left;
/* width:940px; */
width:1024px;
}
	#nav-wrapper ul li, #nav-wrapper ul li:first-child, #nav-wrapper ul li:last-child {
	font-family:Times, "Times New Roman", Georgia, serif;
	float:left;
	font-size:12px;
	height:25px;
	line-height:25px; /* keeps items vertical center */
	/* width:auto; */
	padding:0 15px 0 7px;
	background:url(../img/bullet.gif) right no-repeat;
	/* CSC DEV */
	display:block;
	width:auto;
	}
	#nav-wrapper ul li:first-child, #nav-wrapper ul li.first-child {
	list-style-type:none;
	}
	#nav-wrapper ul li:last-child, #nav-wrapper ul li.last-child {
	list-style-type:none;
	background:none;
	}
	#nav-wrapper ul li:last-child, #nav-wrapper ul li.last-child a {
	padding-right:0;
	}
	#nav-wrapper ul li:first-child, #nav-wrapper ul li.first-child a {
	padding-left:4px;
	}
	#nav-wrapper ul li.nav-no-bullet {
	list-style-type:none;
	background:none;
	}
	#nav-wrapper ul li.nav-center-image {
	list-style-type:none;
	position:relative;
	top:-80px;
	background:none;
	}
		#nav-wrapper ul li.nav-center-image a {
		margin:0;
		padding:0;
		border:none;
		/* background:url(../img/fpo_logo.gif) no-repeat; */
		height:115px;
		width:185px;
		display:block; 
		position:relative; 
		}
		#nav-wrapper ul li.nav-center-image a:hover {
		border:none;
		}
		#nav-wrapper ul li.nav-center-image a .rollover {
		display:block; 
		position:absolute; 
		top:0; 
		left:0;
		height:115px;
		width:185px;
		background:url(../img/fpo_logo_2.gif) no-repeat;
		}
	
	#nav-wrapper ul li a {
	vertical-align: middle;
	letter-spacing: 1px;
	display: block;
	color: #003366;
	font-weight:normal;
	border-top: 1px dashed #003366;
	border-bottom: 1px dashed #003366;
	padding:0 6px 0 6px;
	}
	
	#nav-wrapper ul li a:hover, #nav-wrapper ul li:first-child a:hover, #nav-wrapper ul li:last-child  a:hover {
	background-color:#f7f4e1;
	text-decoration: none;
	border-top: 1px dashed #003366;
	border-bottom: 1px dashed #003366;
	}
	#nav-wrapper ul li a.main-nav-selected {
	background-color: #EBEEF5;
	text-decoration: none;
	border-top: 1px dashed #003366;
	border-bottom: 1px dashed #003366;
	}

/* SUB-NAV BOX */
#nav-sub-wrapper {
width:180px;
height:540px;
margin:0 2px 0 0;
border:1px solid #003366;
background:#FFF;
float:left;
}

	#nav-sub-wrapper h3 {
	font-size:13px;
	font-weight:bold;
	font-family:Times, "Times New Roman", serif;
	letter-spacing:2px;
	text-transform:uppercase;
	color:#003366;
	width:164px;
	margin:27px 0 14px 24px;
	line-height:14px;
	}
	
	#nav-sub-wrapper > ul {
	margin:0 0 0 8px;
	padding:5px 0 0 0;
	width:164px;
	text-transform:uppercase;
	color:#003366;
	font-size:11px;
	letter-spacing:1px;
	}
	
	

	
	
	#nav-sub-wrapper > ul > li {
	margin:0;
	padding:2px 8px 2px 16px;
	border:1px solid #FFF;
	line-height:14px;
	}
	#nav-sub-wrapper > ul > li:hover {
	border-left:1px dashed #006699;
	border-right:1px dashed #006699;
	}
	#nav-sub-wrapper > ul > li:hover a {
	color:#006699;
	}
		#nav-sub-wrapper > ul > li.sub-nav-top-selected {
		border-left:1px dashed #006699;
		border-right:1px dashed #006699;
		}
		#nav-sub-wrapper > ul > li.sub-nav-top-selected a {
		color:#006699;
		}
	
	#nav-sub-wrapper > ul > li.sub-no-hover {
	margin:0 0 0 16px;
	padding:0;
	border:1px solid #FFF;
	}
	#nav-sub-wrapper > ul > li.sub-no-hover:hover {
	border:1px solid #FFF;
	}


	#nav-sub-wrapper > ul > li.sub-nav-first {
	padding:8px 8px 4px 16px;
	line-height:14px;
	}


	#nav-sub-wrapper > ul ul {
	margin:10px 0 4px 8px;
	border:1px solid #FFF;
	}
	#nav-sub-wrapper > ul ul:hover {
	margin:10px 0 4px 8px;
	border:1px solid #FFF;
	}
	#nav-sub-wrapper > ul ul li {
	margin:0 0 8px 0;
	font-size:9px;
	line-height:12px;
	text-indent:-2px;
	}
	#nav-sub-wrapper > ul ul li.sub-nav-last {
	margin:0 0 8px 0;
	}
	#nav-sub-wrapper > ul ul li a {
	padding:2px;
	}
	#nav-sub-wrapper > ul ul li a:hover {
	background-color:#FFCC33;
	color:#000;
	}
	#nav-sub-wrapper > ul ul li a.sub-nav-selected {
	background-color:#FFCC33;
	color:#000;
	}

	#nav-sub-wrapper > ul li a {
	color:#003366;
	text-decoration:none;
	}
	#nav-sub-wrapper > ul li a:hover {
	color:#006699;
	text-decoration:none;
	}

/* BOX - CONTENT ON RIGHT */
#content-wrapper-interior {
width:790px;
height:540px;
border:1px solid #003366;
background:#FFF;
float:right;
position:relative;
margin:0;
}

/* LOWER NOTES */
#footer_notes {
width:780px;
height:20px;
position:absolute;
bottom:4px;
right:10px;
text-align:right;
}
#footer_notes span {
font-family:Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
font-size:11px;
padding:0 30px 0 0;
color:#003366;
}


#footer_notes_alt {
width:780px;
height:20px;
position:absolute;
bottom:24px;
right:58px;
text-align:right;
display:none;
}
#footer_notes_alt span {
font-family:Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
font-size:10px;
color:#999;
}
#footer_notes_alt span.credit-all-caps {
font-family:Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
font-size:10px;
color:#999;
text-transform:uppercase;
}

/* ==== SCROLLER MODULE */


/* REDUNDANT BLOCK FOR DESIGN PURPOSES */
.holder {
	margin: 0;
	display: block;
	/* TEMP */
	margin:26px;
	padding:0;
	width:736px;
	height:500px;
}
.scroll-pane {
	width: 736px;
	float: left;
}


/* BOX - HOLDS SCROLL CONTENT */
#content-wrapper-interior-panel-scroller {
margin:0;
padding:0;
width:730px;
/*width:8000px;*/
height:506px;
position:relative;
overflow:auto;
}

/* BOX - IS SCROLLED - NO SCROLL */
#content-wrapper-interior-panel-noscroll {
width:730px;
height:480px;
overflow:hidden;
position:relative;
}

/* BOX - IS SCROLLED - CAMPAIGN > GIFTS */
#content-wrapper-interior-panel {
width:5832px;
height:470px;
overflow:hidden;
position:relative;
border-left:1px solid #FFF; /* REQ kills an odd glitch */
}

/* BOX - IS SCROLLED - CAMPAIGN > ALUMNI */
#content-wrapper-interior-panel-two {
width:8570px;
height:470px;
overflow:hidden;
position:relative;
border-left:1px solid #FFF; /* REQ kills an odd glitch */
}

/* BOX - IS SCROLLED - CAMPAIGN > PARENTS */
#content-wrapper-interior-panel-three {
width:7133px;
height:470px;
overflow:hidden;
position:relative;
border-left:1px solid #FFF; /* REQ kills an odd glitch */
}

/* BOX - IS SCROLLED - CAMPAIGN > DONORS */
#content-wrapper-interior-panel-four {
width:2676px;
height:470px;
overflow:hidden;
position:relative;
border-left:1px solid #FFF; /* REQ kills an odd glitch */
}

/* BOX - IS SCROLLED - CAMPAIGN > FACULTY */
#content-wrapper-interior-panel-twelve {
width:1295px;
height:470px;
overflow:hidden;
position:relative;
border-left:1px solid #FFF; /* REQ kills an odd glitch */
}

/* BOX - IS SCROLLED - CAMPAIGN > FOUNDATIONS, ETC. */
#content-wrapper-interior-panel-five {
width:1946px;
height:470px;
overflow:hidden;
position:relative;
border-left:1px solid #FFF; /* REQ kills an odd glitch */
}

/* BOX - IS SCROLLED - CAMPAIGN > TRIBUTES */
#content-wrapper-interior-panel-nine {
width:1215px;
height:470px;
overflow:hidden;
position:relative;
border-left:1px solid #FFF; /* REQ kills an odd glitch */
}

/* BOX - IS SCROLLED - CAMPAIGN > LEADERSHIP */
#content-wrapper-interior-panel-thirteen {
width:973px;
height:470px;
overflow:hidden;
position:relative;
border-left:1px solid #FFF; /* REQ kills an odd glitch */
}

/* BOX - IS SCROLLED - CAMPAIGN > LIFETIME */
#content-wrapper-interior-panel-ten {
width:1215px;
height:470px;
overflow:hidden;
position:relative;
border-left:1px solid #FFF; /* REQ kills an odd glitch */
}

/* BOX - IS SCROLLED - CAMPAIGN > LOYALTY */
#content-wrapper-interior-panel-eleven {
width:3890px;
height:470px;
overflow:hidden;
position:relative;
border-left:1px solid #FFF; /* REQ kills an odd glitch */
}

/* BOX - IS SCROLLED - VOLUNTEERS */
#content-wrapper-interior-panel-six {
width:3160px;
height:470px;
overflow:hidden;
position:relative;
border-left:1px solid #FFF; /* REQ kills an odd glitch */
}

/* BOX - IS SCROLLED - FUNDS */
#content-wrapper-interior-panel-seven {
width:8020px;
height:470px;
overflow:hidden;
position:relative;
border-left:1px solid #FFF; /* REQ kills an odd glitch */
}

/* BOX - IS SCROLLED - BROOKLYNWOOD */
#content-wrapper-interior-panel-eight {
width:974px;
height:470px;
overflow:hidden;
position:relative;
border-left:1px solid #FFF; /* REQ kills an odd glitch */
}

/* BOX - IS SCROLLED - PHOTOS */
#content-wrapper-interior-panel-photos-01 {
width:9950px;
height:470px;
overflow:hidden;
position:relative;
}
#content-wrapper-interior-panel-photos-02 {
width:10406px;
height:470px;
overflow:hidden;
position:relative;
}

/* BOX - IS SCROLLED - INFOGRAPH */
#content-wrapper-interior-panel-infographics {
width:2960px;
height:470px;
overflow:hidden;
position:relative;
}


/* BOX - GALLERY ITEMS */
#gallery {
list-style-type:none;
/* width:100%; */
}
	#gallery li {
	display:inline;
	float:left;
	border-left:2px solid #FFF;
	}
	#gallery img {
	display:block;
	}
	.photo_wrapper {
	height:470px;
	}



/* 3 COLUMNN GRID */
ul.content-column-one {
/*width:184px;*/
width:230px;
margin:0 12px 0 0;
position:relative;
float:left;
border-top:1px solid #FFF; /*  "hidden" top border to keep the baseline grid intact */
border-left:1px solid #FFF; /* DEV ONLY */
/* margin:0 5px 0 0; */

}
	ul.content-column-one li {
	/* color:#003366; */
	color:#000;
	font-size:12px;
	line-height:14px;
	font-family:Arial, Helvetica, sans-serif;
	}
	
	/* Sans-Serif, Bold Header */
	ul.content-column-one li h4 {
	color:#003366;
	font-size:11px;
	line-height:14px;
	text-transform:uppercase;
	}
	/* Serif, Bold Header */
	ul.content-column-one li h5 {
	color:#003366;
	font-size:11px;
	line-height:14px;
	text-transform:uppercase;
	font-family:Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
	}
	/* Serif, Bold Header */
	ul.content-column-one li h6 {
	color:#003366;
	font-size:11px;
	line-height:14px;
	text-transform:capitalize;
	font-family:Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
	}
	
	ul.content-column-one li span.sub-header {
	color:#003366;
	font-size:11px;
	line-height:14px;
	text-transform:uppercase;
	}


/* 4 COLUMN GRID */
ul.content-column-four {
/*width:184px;*/
width:170px;
margin:0 14px 0 0;
position:relative;
float:left;
border-top:1px solid #FFF; /*  "hidden" top border to keep the baseline grid intact */
border-left:1px solid #FFF; /* DEV ONLY */
/* margin:0 5px 0 0; */
}
	ul.content-column-four li {
	/* color:#003366; */
	color:#000;
	font-size:12px;
	line-height:14px;
	font-family:Arial, Helvetica, sans-serif;
	}
	
	/* Sans-Serif, Bold Header */
	ul.content-column-four li h4 {
	color:#003366;
	font-size:11px;
	line-height:14px;
	text-transform:uppercase;
	}
	/* Serif, Bold Header */
	ul.content-column-four li h5 {
	color:#003366;
	font-size:11px;
	line-height:14px;
	text-transform:uppercase;
	font-family:Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
	}

	/* Serif, Bold Header */
	ul.content-column-four li h6 {
	color:#003366;
	font-size:11px;
	line-height:14px;
	text-transform:capitalize;
	font-family:Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
	}
	
	span.sub-header {
	color:#003366;
	font-size:11px;
	line-height:14px;
	text-transform:uppercase;
	}
	span.crusader {
	color:#003366;
	line-height:14px;
	font-size:11px;
	font-weight:bold;
	font-family:Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
	}
	ul li.narrow-leadin {
	width:210px;
	font-family:Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
	font-size:12px;
	color:#003366;
	}
	ul li.indented {
	padding-left:21px;
	}

	p.donate-now {
	/* background-color: #EBEEF5; */
	text-transform:uppercase;
	/* border-top: 1px dashed #003366;
	border-bottom: 1px solid #003366; */
	font-family:Times, "Times New Roman", Georgia, serif;
	font-size:11px;
	letter-spacing:1px;
	color:#003366;
	padding:8px 8px 8px 24px;
	position:absolute;
	bottom:20px;
	width:148px;
	}
	p.donate-now a {
	color:#E8A104;
	text-decoration:none;
	}
	p.donate-now a:hover {
	color:#6699CC;
	text-decoration:none;
	}
	p.donate-now a span {
	font-size:20px;
	position:relative;
	bottom:-1px;
	}



/* BOX FOR ALT CONTENT */
.content-alt-block-wrapper {
width:570px;
float:left;
}

/* ALT CONTENT COLUMN - WIDE */
.content-span-columns {
/* width:476px;
height:220px; */
width:545px;
margin-bottom:15px;
/* padding:26px 0 12px 0; */
text-align:center;
position:relative;
overflow:hidden;
border-top:1px dashed #006699;
border-bottom:1px dashed #006699;
}
	.content-span-columns p {
	color:#003366;
	font-size:11px;
	line-height:16px;
	text-align:left;
	padding-bottom:15px;
	}
	.content-span-columns h5 {
	color:#003366;
	font-size:11px;
	line-height:16px;
	font-weight:bold;
	margin-bottom:15px;
	margin-top:12px;
	}
	.content-span-columns a {
	color:#003366;
	font-weight:bold;
	}

/* ALT CONTENT COLUMN - HEADMASTER'S SECTION */
.content-span-columns-two {
width:352px;
height:500px;
margin:25px 0 0 26px;
position:relative;
float:left;
overflow:hidden;
}
	.content-span-columns-two img.headmasters-photo {
	margin-top:4px;
	margin-bottom:16px;
	padding:12px 0 12px 0;
	border-top:1px dashed #006699;
	border-bottom:1px dashed #006699;
	}

	.content-span-columns-two p {
	color:#003366;
	font-size:11px;
	line-height:17px;
	text-align:left;
	margin-bottom:18px;
	}