/* Custom params
   custom:textcolor		navy
   custom:pagecolor		#D8E9F6  blue
   custom:pagepic			beach kites
   custom:border			navy
   custom:contentbg		white light blue
   custom:headerimage	crab and bacon
*/

@import "standard.css";

body {
	font-family: Calibri, "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: navy;	/* custom:textcolor */
	background: #D8E9F6 url("images/crab.jpg") no-repeat scroll bottom left; /* custom:pagecolor custom:pagepic */
	margin: 0; padding: 0;
	line-height: 1.3em; /* also fixes IE peek-a-boo bug */
}
a { color: #B22222; }
a:visited { color: #00008B; }
a:hover, a:focus {
	background-color : #DDDDDD;
}
a.active {
	color: navy;
	font-weight: bold;
	text-decoration: none;
}
h1 {
	font-size: 150%;
	font-weight: normal;
	margin: 0 0 0 0;
	padding: 5px 5px 5px 0;
	/* border-left: 1px solid navy; */ /* custom:border */
	/* border-top: 1px solid navy;*/ 	 /* custom:border */
}
h1 img {
	float: left;
	padding: 0 10px 5px 0;
}
h2 {
	font-size: 100%;
	font-weight: bold;
	margin: 2em 0 0 0;
	padding: 0;
}
h1 + h2 { margin-top: 0.25em; }
h3 {
	font-size: 100%;
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 0em;
}
h4 {
	font-size: 100%;
	font-weight: normal;
	margin-top: 0.5em;
	margin-bottom: 0em;
}
input, textarea {
	background-color: #D8E9F6;	/* custom: pagecolor */
}


/* --- page2 --- */
#page2 {
	/* Set positioning context. Absolute trips the IE6 text selection bug */
	/* Relative works, but it needs width to avoid tripping an IE6 right margin bug */
	position: relative; left: 0; top: 0;
	width: 100%;	/* Avoids IE6 right-margin bug if window is < header pic width */
	margin-top: 10px;
}

/* --- content --- */

#content {
	margin: 0 0 0 125px;
	padding: 0 10px 15px 10px;
	background-color: white;	/* custom:contentbg, same as menu active background, to get folder effect */
	/* Min height avoids low-content pages overlapping menu - this is valid but fails W3C validator, so use only if needed */
	/* min-height: 40em; */ /* WinIE ignores */
	/* _height: 40em;		 */ /* WinIE only, wellstyled.com/css-underscore-hack.html */
}
#content p {
	padding-right: 10px;
}

/* --- header --- */

#header {
	background: #F7FAFD url(images/kites.jpg) no-repeat top left;	/* custom:headerimage */
	height: 150px;	/* custom:headerimage height */
	margin: 0;
	padding: 0;
	width: 100%;
}
#header a, #header img {
	color: white;
	background-color: gray;
	border: none;
	text-decoration: none;
	padding: 10px;
}
#header h1 {
	font-size: 150%;
	font-weight: normal;
	/* margin: 80px 0 0 0; */ /* top margin here also moves header bg image down in Firefox, so use padding instead. Note bg color is on a, above. */
	padding: 60px 0 10px 0;	 	  /* custom: top offset and heading image height */
	text-align: right;
	letter-spacing: 5px;
	white-space: nowrap;
	border: none;	/* resets h1 above */
}
#header h2 {
	font-size: 85%;
	font-weight: bold;
	color: maroon;
	margin: 0;
	padding: 50px 10px 0 425px; /* left padding keeps out of the kites */
	text-align: right;
	letter-spacing: 1px;
	white-space: nowrap;
	border: none; /* resets h2 above */
}


/* --- menu --- */

div#menu {
	position: absolute; top: 0; left: 0; /* relative to page2 */
	width: 111px;
	margin: 0 0 0 0; 
	padding: 0 0 0 10px;
	line-height: 1.5em;
	background-color: #D8E9F6;	/* custom:pagecolor */
	/* border-top: 2px solid navy; */
	/* border-left: 1px solid navy; */
}
div#menu img {
	margin: 0; padding: 0;
}
div#menu ul {
	margin: 0; padding: 0;
	list-style: none;
	text-align: left;
	font-size: 90%;
	font-weight: normal;
}
div#menu ul li {
	margin: 0 0 2px 0;
	padding: 0;
	list-style: none;
	/* border: 1px solid navy;
	border-top: none;
	border-left: none; */
}
div#menu a {
	display: block;
	text-decoration: none;
}
div#menu a.active {
	font-weight: bold;
	background-color: white;	/* custom:contentbg, same as content background, to get folder effect */
	/* border-bottom: 1px solid #20208F; */
}
div#menu p {
	margin: 2em 0 0 0; 
	padding: 0 0 0 0;
	font-size: 100%;
	font-weight: bold;
	color: navy;
	height: 2em;
	border-top: 1px solid navy;	/* custom:border */
}
/*
div#ul.menu li.active {
	border-left: 5px solid #B22222;
	font-weight: bold;
	background-color: #DDDDDD;
}
div#ul.menu li.active a {
	background-color: #DDDDDD;
}
*/

/* --- footer --- */

#footer {
	font-size: 75%;
	margin: 2em 0 0 120px;
	padding: 5px 0 0 5px;
	border-top: 1px solid navy;	/* custom:border */
	/* background-color: transparent; */
}
#footer p {
	margin: 0; padding: 0;
	line-height: 1.3em;
}

#breadcrumbs {
	font-size: 90%;
}

/* --- util --- */
a.plainlink, a.plainlink:hover, a.plainlink:focus, a.plainlink:visited {
	text-decoration: none;
	color: navy;	/* custom:textcolor */
	background-color: transparent;
	border: none;
}
.footnote {
	margin-top: 1em;
	font-size: 75%;
}

/* Responsive */

#content > img { max-width: 99%; height: auto; }

@media screen and (max-width: 655px) {
	h1 { font-size: 120%; font-weight: bold; }	
	h2 { }
	h3 { }
	#content { margin: 0; }
	img { padding-right: 9px; }
	body { background-image: none; }
	#footer {	margin-left: 0; }
} /* (max-width: 655px) */