/*
 * sspjStyles.css
 *   main style sheet for sspj website
 *   note fixes for various browsers, especially ie
 */

/*
 * body: parent to all divs, including Canvas
 */
			body {
				background-image: url("plaid.jpg");
				margin: 20px;
				font-size: 12px;
				behavior: url(csshover.htc);
	text-align: center; /* kluge for IEv5 to center the canvas */
	font-size: 16px;
}


/*
 * canvasMain: provides the "page"
 */
#canvasMain {
	font:normal .8em/160% Verdana,Arial,Helvetic,sans-serif;
	background-color: #fff; /* White */
	color: #000;
	border: 1px solid #000;
	border: 1px solid #406D67;
	width: 760px;
	margin: 20px auto 20px auto;
	position: relative;
	text-align: left; /* follows body centering kluge for IEv5 */
}
.clear {clear:both;height:1px;overflow:hidden;}

/*
 *	header: top of each page, above navigation
 */
div.header {
	font-family: Garamond,
		"Hoefler Text",
		Palatino,
		"Palatino Linotype",
		serif;

	color:#226644;
	color:#28526C; /* blue scheme - dark navy */
	color:#1C640B; /* blue scheme - dark navy */
	color:#28526C; /* green scheme 2 */ 
	width: 760px;
	height: 90px;
	background-image: url("../images/sspjSchool.jpg");
	background-position: top right;
	background-repeat: no-repeat;
}

/*
 * headLeft: left subdivision of header
 */
div.headerLeft {
	float:left;
	width: 365px;
	padding:0px 0px 0px 20px; /* top - right - bottom - left */
}

/*
 * headLeft: right subdivision of header
 */
div.headerRight {
	float:right;
	width: 365px;
	height: 90px;
	margin-left: -500px;
	overflow: hidden;
}
/*
 *	disguise anchors within header
 */
div.header a {
	color:#229106;
	color:#28526C; /* blue scheme - dark navy */
	color:#1C640B; /* green scheme 2 */
	text-decoration: none;
}

/*
 * navigation: below header, menus hang from here
 */
#navigation {
	margin:0;
	height: 26px; width: 760px;
	padding-top: 0px;
	position:relative;
}

#navigation div {
		background-color:#228006;
		background-color:#66899D;
		background-color:#28526C; /* blue scheme - dark navy */
		background-color:#406D8C; /* blue scheme 2 */
		background-color:#1C640B; /* green scheme 2 */
		width=100%;
}

#navigation ul {
		margin:0;
		padding:3px 0px 0px 0px;
		font:bold .9em "Trebuchet MS",Verdana,Arial,sans-serif; 
		text-align: center;
		background-color:#66709D;
		background-color:#28526C; /* blue scheme - dark navy */
		background-color:#406D8C; /* blue scheme 2 */
		background-color:#1C640B; /* green scheme 2 */
		width=100%;
		height:18px;
}

#navigation li {
		display:inline;
		list-style:none;
		border-right:1px solid #fff;
		padding:0px 0px 0px 0px;
		margin:0px 0px 0px 0px ;
}	

#navigation li a {
		color:#fff;
		text-decoration:none;
		padding:0px 6px 0px 6px;
		margin:0px 0px 0px 0px;
}

#navigation li a:hover {
	text-decoration:underline;
}

/*
 * menu: slide down from navigation bar
 */
.menu {
	position:relative; 
	padding:0px;
	margin:0px;	
	left:0px; 
	text-align:left;
	background-color: #F2E099; /* Beige */
	background-color: #B5CAD7; /* Beige */
	background-color: #E3EAE4; /* light green */
}

.menu ul {
	padding:0px;
	margin:0px;
	list-style:none;
	/* border-left: 1px solid #FEEEE7;
	border-right: 1px solid #FEEEE7; */
}

.menu li {
	padding:0px;
	margin:0px; /*
	border-bottom:1px solid #ffffff;
	border-bottom: 1px solid #1C640B; 
	border-bottom:1px solid #ffffff; */
	border: 1px solid #fff;
}

.menu li a {
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	color: #532826;
	text-decoration:none;
	display:block;
	margin:0px;
	padding:0px 0px 0px 20px;
	line-height:20px;
	vertical-align:middle;
}

.menu li:hover {
	padding:0px;
	margin:0px; /*
	border-bottom:1px solid #ffffff;
	border-bottom: 1px solid #1C640B; 
	border-bottom:1px solid #ffffff; */
	/* border: 1px solid #1C640B; *//* green scheme 2 */
}
.menu li a:hover {
	background-color:#D3AD12;  /* Dark beige */
	background-color:#28526C; /* blue scheme - dark navy */
	background-color:#64955B; /* green scheme 2 */
	background-color: #E3EAE4; /* light green */
	background-color:#1C640B; /* green scheme 2 */
	color:#000;
	color:#fff;
}

#breadCrumbs {
	padding:15px 0px 0px 20px; 
}

/*
 *	content: self explantory, holds columns
 */
div.content {
	float:left;
	width: 100%;
	margin:0px;
}

/*
 *	content p: nice, indented paragraphs
 */
div.content p {
	color: #666;
	margin:0;
	padding:0;
	text-indent: 1.5em;
}

div.content p.noindent {
	color: #666;
	margin:0;
	padding:0;
	text-indent: 0em;
}

/*
 *	page: an alternative to columnLeft + columnRight
 */
#page {
	float:left;
	background-color: #fff;
	width:720px;
	padding:10px 20px 10px 20px; /* top - right - bottom - left */
}

* html #page {
	width: 720px;
}

/*
 *	columnLeft: put school content here
 */
#columnLeft {
	float:left;
	background-color: #fff;
	width:345;
	padding:10px 20px 10px 20px;
}

* html #columnLeft {
	width: 375px;
}

/*
 *	columnRight: put school content here
 */
#columnRight {
	float:left;
	width:345px;
	padding:10px 20px 10px 10px;
	background-color: #fff;
}

* html #columnRight {
	width: 375px;
}

/*
 *	menuLeft and menuRight provide wider right column for studenLunch.html
 */
#menuLeft {
	float:left;
	background-color: #fff;
	width:300px;
	padding:20px 10px 30px 20px; /* top - right - bottom - left */
}

* html #menuLeft {
				width:330px;
}

#menuRight {
	float:left;
	width:400px;
	padding:20px 20px 30px 8px; /* top - right - bottom - left */
	background-color: #fff;
}

* html #menuRight {
				width:428px;
}

/*
 *	linkMain: holds links to children pages
 */
#linkMain {
	color:#229106;
	width:100%;
	overflow: hidden;
}

#linkMain a {
	/* color:#229106; */
	color:#1A7D02;
	font-size:.9em;
}

#linkMain ul {
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 2.5em;
	line-height: 1.5em;
	list-style: none;
}

#linkMain li {
	background-image: url("../images/sspjCross.png");
	background-repeat: no-repeat;
	background-position: 0em .2em;
	padding-left: 1.2em;
}

#linkMain li.external {
	background-image: url("../images/sspjEarth2.jpg");
	background-repeat: no-repeat;
	background-position: 0em .2em;
	padding-left: 1.5em;
}

/*
 *	linkLeft: left subdivision of linkMain
 */
#linkLeft {
	float:left;
	width:23%;
}

#linkLeft ul {
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 1em;
	line-height: 1.5em;
	list-style: none;
}

#linkLeft li {
	background-image: url("../images/sspjCross.png");
	background-repeat: no-repeat;
	background-position: 0em .2em;
	padding-left: .9em;
}

/*
 *	linkRight: right subdivision of linkMain
 */
#linkRight {
	float:left;
	width:27%;
}

#linkRight ul {
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 1.1em;
	line-height: 1.5em;
	list-style: none;
}

#linkRight li {
	background-image: url("../images/sspjCross.png");
	background-repeat: no-repeat;
	background-position: 0em .2em;
	padding-left: .9em;
}

/*
 *	checkList: used in Terra Nova report, etc
 */
div.checkList li {
	background-image: url("../images/sspjCheckGreen.png");
	background-repeat: no-repeat;
	background-position: 0em 0em;
	padding-left: 2em;
	padding-top: .3em;
}

div.checkList ul {
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 2.5em;
	line-height: 1.5em;
	list-style: none;
}

div.clear {
	clear: both;
}

/*
 *	middleStates: a center div with brown anchor text
 */
#middleStates {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size:2em;
	text-align: center;
	/* align: center; */
	vertical-align:middle;
}

#middleStates input {
	margin-top: 0px;
	background: none;
	border: 0;
	color: brown;
	vertical-align:middle;
	text-decoration: underline;
	cursor: pointer;
	text-align:left;
	width: auto; /* width & overflow to eliminate long button in IE */
	overflow: visible; /* same comment */
}

#middleStates a {
	color: brown;
	vertical-align:middle;
}

#middleStates img {
	vertical-align:middle;
	text-align:right;
}

/*
 *	footer: bottom of every page
 */
div.footer {
	margin-top: 30px;
	margin-bottom: 20px;
	font:normal .8em/160% Verdana,Arial,Helvetic,sans-serif;
	font-size:1em;
	color: #666;
	width: 100%;
	text-align: center;
	align: center;
}

div.footerOutside {
	width: 20%;
	float: left;
}

/*
 *	footerLeft: left subdivision of footer
 */
div.footerLeft {
	border-top:1px solid #e5e5e5;
	padding-top: 35px;
	font:normal .8em/160% Verdana,Arial,Helvetic,sans-serif;
	font-size:1em;
	color: #666;
	width: 31%;
	float:left;
	text-align: center;
	line-height:15px;
}

/*
 *	footerRight: right subdivision of footer
 */
div.footerRight {
	border-top:1px solid #e5e5e5;
	padding-top: 30px;
	font:normal .8em/160% Verdana,Arial,Helvetic,sans-serif;
	font-size:1em;
	color: #666;
	width: 31%;
	text-align: center;
	float:left;
}

/*
 * heading 1 - used only in header div
 */
h1 {
	font-size: 2em;
	margin-top: 18px; /* need this for IEv8 */
	margin-bottom: 4px;
	color:#448855;
	color:#28526C; /* blue scheme - dark navy */
	color:#1C640B; /* green scheme 2 */
}

/*
 * heading 2 - used only in breadcrumbs div
 */
h2 {
	font:bold 1.2em/160% Verdana,Arial,Helvetic,sans-serif;
	color:#338866;
	color:#66899D;
	color:#28526C; /* blue scheme - dark navy */
	color:#1C640B; /* green scheme 2 */
	margin-top:2px;
	margin-bottom:2px;
}

h2.spacer {
	font:bold 1.2em/160% Verdana,Arial,Helvetic,sans-serif;
	color:#fff;
	margin-top:2px;
	margin-bottom:2px;
}

h2 a{
	color:#295546;
	text-decoration:none;
	color:#66899D;
	color:#28526C; /* blue scheme - dark navy */
	color:#1C640B; /* green scheme 2 */
}

h2 img{
	color:#229106;
	border: none;
	text-decoration:none;
	height: 15px;
}

/*
 * heading 3 - section headings with line above
 */
h3 {
	font:bold 1.2em/160% Verdana,Arial,Helvetic,sans-serif;
	margin-top:10px;
	margin-bottom:2px;
	border-top:1px solid #e5e5e5;
	padding-top:12px; 
	color: #226634;
}

h3.spacer {
	font:bold 1.2em/160% Verdana,Arial,Helvetic,sans-serif;
	margin-top:10px;
	margin-bottom:2px;
	border-top:1px solid #fff;
	color: #fff;
	padding-top:12px;
}

/*
 * heading 4 - paragraph headings
 */
h4 {
	padding-top:12px;
	margin-top:2px;
	font:bold 1em/160% Verdana,Arial,Helvetic,sans-serif;
	color: #338844
}

h4.spacer {
	padding-top:12px;
	margin-top:2px;
	font:bold 1em/160% Verdana,Arial,Helvetic,sans-serif;
	color: #fff;
}

/*
 * heading 5 - green highlight, for signatures
 */
h5 {
	padding-top:4px;
	font:bold italic 1em/160% Verdana,Arial,Helvetic,sans-serif;
	color:#229106;
	color:#66899D;
	color:#28526C; /* blue scheme - dark navy */
	color:#1C640B; /* green scheme 2 */
}

h5.spacer {
	padding-top:4px;
	font:bold italic 1em/160% Verdana,Arial,Helvetic,sans-serif;
	color:#fff;
}

/*
 *	ypSlideOut menus
 */
.menuTable {
	font-family: arial, helvetica, sans-serif; font-size: 10pt
}

.menuLink {
	font-size: 8pt;
	font-family: verdana, helvetica, sans-serif; 
	color: #006666;
	text-decoration: none
}

.menuLink:hover {
	color: #006699;
	text-decoration: underline
}

.menuInsert {
	z-index: 200;
	font-style: normal;
	font-variant: normal;
	font-weight: normal; 
	line-height: 10pt;
	font-size: 9pt;
	font-family: verdana, helvetica, sans-serif; 
	width: 140px;
	color: #888888;
	height: 80px;
	background-color: #CEE6C5; 
	border: 1px solid #dddddd;
	margin: 0px; 
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 15px
}

.menuContainer {
	z-index: 1000
}

/*
 *	lunchMenu: nice table for lunch items
 */
table.lunchMenu {
	font:normal .9em/160% Verdana,Arial,Helvetic,sans-serif;
	width: 90%;
	border-spacing: 1px;
	margin-top: 20px;
	margin-bottom: 20px;
}

table.lunchMenu td {
	padding 6px 6px 6px 6;
	color: #000;
}

table.lunchMenu th {
	padding 6px 6px 6px 6;
	color: #000;
}

table.niceTable {
	font:normal .9em/160% Verdana,Arial,Helvetic,sans-serif;
	width: 100%;
	border-spacing: 1px;
	margin-top: 20px;
	margin-bottom: 20px;
}

table.niceTable td {
	border-right: 1px solid #787878;
	border-bottom: 1px solid #787878;	
	background-color: #FDFDF2; /* Lighter manila */
	padding 6px 6px 6px 12px;
	color: #000;
}

table.niceTable th {
	border-right: 1px solid #787878;
	border-bottom: 1px solid #787878;	
	background-color: #F2EACD; /* Muted Beige */
	padding 6px 6px 6px 12px;
	color: #000;
}

tr.title th {
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;	
	background-color:#fff; /* white */
	padding 6px 6px 6px 12px;
	color: #000; /* black */
}

tr.subTitle th {
	border-right: 1px solid #787878;
	border-bottom: 1px solid #787878;	
	background-color: #A0B79A; /* muted green */
	padding 6px 6px 6px 12px;
	color: #fff;
}

/*
 *	Forms table
 */
form {
	width: 100%;
}

form input {
	background-color: #FDFDF2; /* Lighter manila */
}

form select {
	background-color: #FDFDF2; /* Lighter manila */
}

form textarea {
	background-color: #FDFDF2; /* Lighter manila */
}

table.form {
	font:normal .9em/160% Verdana,Arial,Helvetic,sans-serif;
	width: 100%;
	border-spacing: 1px;
	margin-top: 20px;
	margin-bottom: 0px;
}

table.form td {
	background-color: #fff;
	padding 6px 6px 6px 6px;
	color: #000;
}

table.form th {
	background-color: #fff;
	padding 6px 6px 6px 12px;
	color: #000;
}

/*
 * leftCaption: left aligned photo caption
 */
div.leftCaption {
	clear: both;
	margin-top: 10px;
	margin-bottom: 20px;
	padding-right: 5px;
	padding-left: 10px;
	font-size:.9em;
	line-height: 1.5em;
	font-style: italic;
}

/*
 * centerCaption: center aligned photo caption
 */
div.centerCaption {
	clear:both;
	margin-top: 10px;
	margin-bottom: 20px;
	padding-right: 30px;
	font-size:.9em;
	line-height: 1.5em;
	text-align: center;
	font-style: italic;
}

/*
 * img-shadow: image box with drop shadow
 */
.img-shadow {
	float:left;
	position: relative;
	top: 0px;
	left: 0px;
	z-index: 3;	
	background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
	background: url(../images/shadow.gif) no-repeat bottom right;
	margin: 10px 0 0 10px !important;
	margin: 10px 0 0 10px;
}

.img-shadow div {
	background: none !important;
	background: url(../images/shadow2.gif) no-repeat left top;
	padding: 0 !important;
	padding: 0 6px 3px 0;
}

.img-shadow img {
	display: inline-block;
	color: #777;
	background-color: #fff;
	font: italic 1em georgia, serif;
	border: 1px solid #a9a9a9;
	padding: 4px;
	margin: -6px 6px 6px -6px !important;
	margin: 0;
}

* html .img-shadow img {
	border: 4px double #929691;
}