/* Main CSS */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: normal;
}
/* Decided to make strong look italic with a certain color */
strong {
	font-family: Helvetica, Times, sans-serif;
	font-size: 1.25em;
	font-style: italic;
	color: #022F55;
}
/* The default for the body content on the page */
body {
	text-align: left;
	position: relative;
	font-family: Arial, Helvetica, Times, sans-serif;
  background-image: url(images/verticalbar6.png);
	background-repeat: repeat-x;
	font-size: 1em;
}
/* Used for special announcements... */
#announce {
	position: absolute;
	top: 250px;
	right: 5px;
	height: 310px;
	width: 48px;
	border: 2px inset gray;
	background-repeat: no-repeat;
}
#wrapper {
  position: relative;
	background-image: url(images/school.jpg);
	text-align: left;
	width: 790px;
  height: 820px;
	margin-left: auto;
	margin-right: auto;
  margin-top: 1%;
	margin-bottom: 1%;
	border-right: 3px inset #959595;
	border-bottom: 3px inset #959595;
	border-top: 3px outset white;
	border-left: 3px outset white;
}
/* Used to hold the GSS emblem on the page in a consistent place */
.gssemblem {
	position: absolute;
	top: 112px;
	left: 230px;
	height: 52px;
	width: 49px;
}
.gssemblem a:hover, gssemblem a:active {
	text-decoration: none;
	background-color: transparent;
}
/* This is the default header for the pages... it may change from time to time
   Currently the school likes the one they have */
#header {
	position: relative;
	background-image: url(gsslogo.png);
	background-repeat: no-repeat;
	width: 750px;
	height: 75px;
	left: 20px;
	top:-5px;
}
#boxtop {
	position: absolute;
	font-family: Georgia, Times, sans-serif;
	top: 230px;
	height: 40px;
	width: 700px;
	border: 2px;
}
/* Used when a scroll messages was in place... currently not used but will 
   keep this for the time being. */
#scrollmsg {
	position: absolute;
	font-family: Georgia, Times, sans-serif;
	top: 230px;
}
/* Used to position the Slogan on the pages... Nurturing Hearts ... */
.slogan {
	position: absolute;
	width: 280px;
	height: 72px;
	top: 75px;
	left: 298px;
	font-family: Georgia;
	color: #530046;
	font-size: 16pt;
	font-weight: normal;
}
/* Position of content for page and other values for content types */
#content {
	position: absolute;
	top: 225px;
	width: 550px;
	left: 200px;
	font-size: 14pt;
}
#content p {
	font-size: .80em;
	line-height: 1.5;
}
#content a {
	color: Navy;
}
#content .email a:hover, a:active {
	text-decoration: none;
	background-color: transparent;
}
/* Used when displaying a pdf inline... not used much... will be redoing
   Calendar page soon with a system that will be easy for school to update */
#inlinepdf {
	position: absolute;
	top: 225px;
	width: 600px;
	left: 170px;
	font-size: 75%;
}
/* This was used to hold a donation button to Paypal... not needed but want
   to keep this just in case they change their minds later. I'm sure I'll 
   have to change things slightly since I've made changes to the menu items. */
#donate {
	position: absolute;
	left: 18px;
	width: 124px;
	height: 49px;
	top: 545px;
	background-color: Red;
}
/* The footer positioning is used by this class ID */
#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	margin-top: 12pt;
	margin-right: auto;
	margin-left: auto;
	padding: 1em 0 1em 0;
	font-size: small;
}
/* This is the information bar that is used on each page ... */
#tbar {
	position: absolute;
	top: 180px;
	left: 200px;
	background-image: url("images/titlebar3.png");
	width: 395px;
	height: 38px;
	font-size: 1.8em;
	font-style: italic;
	font-family: Georgia;
	color: white;
}
/* Weather information... was commented out, but may be used again later as needed
.weather {
	position: absolute;
	top: 670px;
	left: 680px;
}
.weather a:hover, .weather a:active {
	text-decoration: none;
	background-color: transparent;
}
#currentweather {
	position: absolute;
	bottom: 5px;
	left: 20px;
}
*/
/* Default link details... as far as color text decoration... */
a:link, a:visited {
	text-decoration: underline;
	color: #6A5ACD;
	background-color: transparent;
}
a:hover, a:active {
	text-decoration: underline overline;
	color: #191970;
	background-color: #C9C3ED;
}
/* Sidebar information used to hold page links ... */
#sidebar {
	position: absolute;
	top: 277px;
	left: 20px;
	width: 140px;
}
#sidebar a {
	display: block;
	padding: 1px;
	text-decoration: none;
	width: 140px;
	height: 25px;
	margin: 1px;
	color: #FFFFFF;
	font-family: Arial, Helvetica, Times, sans-serif;
}
#sidebar a:link, #sidebar a:visited {
	background: #3366CC;
	border: 1px outset #0099FF;
}
#sidebar a:focus, #sidebar a:hover {
	background: #477CAA;
	border: 1px inset #00A8BC;
	color: black;
}
#sidebar a:active {
	background: teal;
	border: 1px inset #C0C0C0;
}
/* Used to handle overflow on page when not using the iframe technique to handle
   large amounts of data... but still keep things on a page that is easy to navigate
   this may all change if I decide to support iPhone, same with the iframe 
   note someof the values only relate to IE but do not interfere with Firefox and 
   other browsers */
#extent {
  height: 530px;
  width: 575px;
  padding-right:10px;
  overflow:auto;
} 
#w3complaint {
  position: absolute;
  bottom: 45px;
  left: 45px;
  border: 0;
}
#w3complaint a:focus, #w3complaint a:hover {
	text-decoration: none;
	background-color: transparent;
	border:0;
}