﻿/*

NOTES: When making adjustments to height, you must change the height property in content, leftnav, twocolleft, twocolright by about

65px either way. Then you must make the same adjustment to the top property in footer. 



*/





* {
	margin: 0;
	padding: 0;

}



body {
	margin: 0;
	padding: 0;
	border: 0 none;
	text-align: left;
	position: static;
	background: #A0A0A0 url("../images/gradient.jpg") repeat-x;
	font-family:Arial, Helvetica, sans-serif;
	color: #000000;
	font-size:medium;

}

/*** IE5/Win font size hack ***/

* html body {

	font-size: x-small;

	f\ont-size: medium ;

}



#container {

	margin: 0;

	padding: 0;

	border: 0;

	width: 1095px;

	position: relative;

	float:none;

	text-align: left;

	z-index:1;

}



html>body #container {margin: 0 auto}

#tipDiv {
    padding:4px;
    color:#000; font-size:11px; line-height:1.2;
    background-color:#E1E5F1; border:1px solid #667295; 
    width:250px; 
}


#header {
	padding: 0;
	margin:0;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	width: 720px;
	line-height:121px;
	height: 87px;
	float: none;
	z-index:3;
	background: black url('../images/knowzone.gif') top left no-repeat;

}



.getinvolved #header {
	background-image: url('../images/knowzone4.gif');
}

.how2 #header {
	background-image: url('../images/knowzone4.gif');
}

.education #header {
	background-image: url('../images/knowzone7.gif');
}

.sports #header {background-image: url('../images/knowzone6.gif');}

.culture #header {
	background-image: url('../images/knowzone5.gif');
}

.thingstodo #header {background-image: url('../images/knowzone3.gif');}

.thingstoknow #header {
	background-image: url('../images/knowzone2.gif');
}



#mainmenu {
	width:700px;
	z-index: 2;
}



#header #getinvolved {
	position: absolute;
	line-height:29px;
	margin-left: 19px;
	margin-top: 88px;
	width:101px;
	z-index:5;
	left: -6px;
	top: 63px;
	height: 28px;
}

#header #how2 {
	position: absolute;
	line-height:29px;
	margin-left: 19px;
	margin-top: 88px;
	width:101px;
	z-index:5;
	left: -6px;
	top: 63px;
	height: 28px;
}

#header #education {
	position: absolute;
	line-height: 28px;
	margin-left: 105px;
	margin-top: 89px;
	width:97px;
	z-index:5;
	left: 14px;
	top: 62px;
	height: 23px;
	visibility: visible;
}

#header #sports {
	position: absolute;
	line-height: 28px;
	margin-left: 178px;
	margin-top: 87px;
	width:99px;
	z-index:5;
	left: 51px;
	top: 64px;
}

#header #arts {
	position: absolute;
	line-height: 28px;
	margin-left: 303px;
	margin-top: 83px;
	width: 99px;
	z-index:5;
	left: 26px;
	top: 72px;
	height: 23px;
}

#header #todo {
	position: absolute;
	line-height: 28px;
	margin-left: 388px;
	margin-top: 81px;
	width: 102px;
	z-index:5;
	left: 45px;
	top: 71px;
	height: 29px;
}

#header #toknow {
	position: absolute;
	line-height: 28px;
	margin-left: 479px;
	margin-top: 77px;
	width: 97px;
	z-index:5;
	left: 65px;
	top: 76px;
	height: 24px;
}

#header #girlszone {
	position: absolute;
	line-height: 28px;
	margin-left: 577px;
	margin-top: 77px;
	width: 98px;
	z-index:5;
	left: 35px;
	top: 114px;
}



#knowzonelink {
	position:absolute;
	line-height:60px;
	margin-left:26px;
	margin-top:31px;
	width:228px;
	display:block;
	text-decoration:none;
	left: -27px;
	top: -21px;
	height: 72px;
	z-index: 1;
}

#header li a {
	text-decoration:none;
	display:block;
	visibility: hidden;
}

#header a em {
	visibility:hidden;
	font-size:70%
}



#header ul {

	margin:0;

	padding:0;

	line-height:.8em;

	list-style-type: none;

	vertical-align:top;

}

#header ul li {

	position:relative;

	float:left;

	margin:10px;

}



#header ul li ul li {float:none; margin:0; padding:0; display:block; background-color:#333;}

#header ul li ul {

	margin:0;

	padding: 6px 0 5px 0;

	background: #000 url("../images/red-border.gif") repeat-x 0 0;

	width:150px;

	position:absolute;

	top:28px;

	left:0;

	display:none;

}



#header ul li:hover ul { display: block; }



#header ul li ul li a {

	display:block;

	color:#FFF;

	font-family: Verdana, Helvetica, Arial, sans-serif;

	font-weight:bold;	

	font-size:8pt;

	text-decoration:none;

	padding:4px 7px 7px 7px;

	margin:0;

	border-top:1px solid #666;

	height:.8em;

	vertical-align:middle;

}



#header ul li ul li:hover {

	background-color:#666;

}



/* List information */



.links {

	list-style-type: none;

	font-family:Verdana, Helvetica, Arial, sans-serif;

	font-size: 8pt;

	text-decoration:none;

	width:345px;

	overflow: auto;

	overflow-x: hidden;

	margin-left: 1.2em;

	border: 1px solid #000;

	}



.links li a {

	display: block;

	width:340px;

	background: #C0C0C0;

	text-decoration:none;

	padding-left: 5px;

	line-height: 1.3em;

	font-size:8pt;

}



.links li ul {

	list-style-type:none;

	font-family:Verdana, Helvetica, Arial, sans-serif;

	font-size: 8pt;

	text-decoration:none;

	width:345px;

	overflow: show;

	margin-left: 25px;

	}

	

.links li ul li a {

	display: block;

	width:320px;

	background: #B8B8B8;

	text-decoration:none;

	padding-left: 25px;

	line-height: 1.2em;

	font-size:8pt;

	font-weight: normal;

}



.last {

	border-bottom: 1px solid #000;

}



.links li a:hover, .links li ul li a:hover {
	display:block;
	width: 340px;
	background: #D1D1D1;
	color: #FF2E2E;
	text-decoration:none;
}



.links li ul li a:hover {

	width:320px;

}



.head {
	background: #AAAAAA;
	color:white;
	width:100%;
	font-weight:bold;
	font-size: 10pt;
	line-height:1em;
	padding-bottom:1px;
	border-bottom: 1px solid #000;
	padding-left: 5px;

}





/* Content information */



#content {

	margin: 0;

	width: 720px;

	text-align: left;

	float:none;

	height:632px;	

}



#footer {
	margin: 0;
	padding: 0;
	border: 0;
	width: 959px;
	height: 75;
	position: absolute;
	float:none;
	top: 751px;
	vertical-align: bottom;
	z-index:3;
	left: 5px;

}



#footerImg {

	background-image: url("../images/bottom.jpg");

	width: auto;

	height: 29px;

}



#footer p {

	font-size: 7pt;

	color: #666;

	text-align: center;

}



#twocolleft {
	position:absolute;
	float:none;
	width: 711px;
	height: 601px;
	left:4px;
	overflow:auto;
	text-size: 10pt;
	z-index:5;
	top: 155px;
	background-image: url(../images/brickBlankSlate-lg.JPG);
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 3px;
	visibility: visible;

}

#twocolright {
	position:absolute;
	float: left;
	width: 185px;
	height: 740px;
	left: 719px;
	vertical-align:top;
	text-align:left;
	background: #000000 url("../images/rightback_01.jpg") repeat-y;
	padding: 10px 18px 0px 18px;
	overflow:auto;
	z-index:7;
	top: 1px;
	visibility: visible;

}



.image1

{

	background: url("../images/imagelink1.gif") no-repeat 0 0;

	position:absolute;

	float:right;

	right:12px;

	top:10px;

	width:182px;

	height: 171px;

	overflow:hidden;

	z-index:2;

}



.image2

{

	background: url("../images/imagelink2.gif") no-repeat 0 0;

	position:absolute;

	float:right;

	right:12px;

	top:232px;

	width:182px;

	height:166px;

	overflow:hidden;

	z-index:2;

}



.headtop

{
	position:absolute;
	color: #990000;
	font-weight: bold;
	z-index: 2;
	width: 510px;

}



.headbottom

{
	position: relative;
	left: 1px;
	top: 1px;
	color:#999999;
	font-weight: bold;
	z-index:1;

}



.topic

{
	float:left;
	color: #111111;
	width: 565px;
	margin-left:35px;
	font-family:Verdana;
	border: 1px solid #111111;
	background-color: #999966;
	padding-left: 5px;
	font-size: 11px;
	padding-right: 5px;
	padding-top: 5px;

}



#leftnav

{
	position:absolute;
	float: none;
	left: 0px;
	width:122px;
	height: 632px;
	background: url("../images/navback.jpg") top right;
	padding: 10px 0px 0px 8px;
	visibility: hidden;
	z-index: 2;

}



#leftnav ul

{

	margin: 0px;

	display: block;

	font-family:verdana;

	font-size:10pt;

	margin-bottom: 5px;

}



#leftnav ul li

{

	float:none;

	position:relative;

	display: block;

	list-style-type:none;

	line-height:1.4em;



}



#leftnav ul li a

{

	color:#EEC3C3;

	text-decoration:none;

	font-weight:bold;

}



#leftnav ul li a:hover

{

	color:white;

	text-decoration:none;

	font-weight:bold;

}



#leftnav ul li ul

{

	position: relative;

	float: none;

}



#leftnav ul li ul li

{

	position:relative;

	float: none;

	display: block;

	left: 10px;

	font-weight:normal;

	line-height:1em;

}



#leftnav ul li ul li a

{

	color:#DDCCCC;

	text-decoration:none;

	font-size: 8pt;

	font-weight:normal;

}



#leftnav ul li ul li a:hover

{

	color:white;

	text-decoration:none;

	font-weight:normal;

}



img {border: 0;}



.break {clear: both ;}



p {
	font-size: 11pt;
	padding-bottom: 1ex;
	padding-left: 1pt;
	color: #000000;

}



td b {

	font-size:8pt;

}



h2 {

	font-size: 14pt;

	padding-bottom: 0.3em; 

	letter-spacing:-0.05em;

}



.adlink {

	list-style-type: none;

	font-size: 10pt;

	font-weight: bold;

	margin-left: 10px;

}



.adlink li {

	display:block;

	position:relative;

}



.button

{

	font-family: Verdana;

	font-weight: bold;

	font-size: 7pt;

	color:red;

	background: #000;

	border: 1px solid #CCC;

}



.message {

	font-family:Verdana;

	font-weight:bold;

	font-size: 10pt;

	color:red;

}





.link {

	border-top: 1px solid #000;

	background: #DD9999;

	min-height: 30px;

	margin-left: 1em;

	padding-top: 5px;

	padding-left: 2px;

}



.link:hover, .link2:hover {

	background: #EECCCC;

	}

	

.link2 {

	border-top: 1px solid #000;

	background: #EEBBBB;

	display: block;

	min-height: 30px;

	height: auto;

	margin-left: 1em;

	padding-top: 5px;

	padding-left: 2px;

	}

	

* html body .link2 {

	border-top: 1px solid #000;

	background: #EEBBBB;

	height: 30px;

	margin-left: 1em;

	padding-top: 5px;

	padding-left: 2px;

	}



.link .image, .link2 .image {

	float: right;

	display: block;

	min-height: 30px;

	min-width: 70px;

}

	

* html body .link .image, * html body .link2 .image {

	float: right;

	display: block;

	height: 30px;

	width: 70px;

}



.link .title, .link2 .title, .link2 .title a {

	font-size: 10pt;

	font-weight: bold;

	min-height: 20px;

	color: red;

}



* html body .link .title, * html body  .link2 .title, * html body .link2 .title a {

	font-size: 10pt;

	font-weight:bold;

	color:red;

}



.link .desc, .link2 .desc {

	clear: both;

	padding-left: 2em;

	display: block;

	font-size: 8pt;

	padding-bottom: 5px;

}



* html body .link .desc, * html body .link2 .desc {

	font-size: 8pt;

	font-weight: normal;

	clear: both

	/*height:105px;*/

	overflow: auto;

	padding-bottom: 5px;

}



.text {

	border: 1px solid #000;

}



textarea {

	border: 1px solid #000;

}



.facility {

	margin-left: .2em;

	border-top: 1px solid #000;

	clear:both;

	font-face: Arial;

	font-size: 10pt;

	background: #EEBBBB;

}



.table {

	display: table;

	}



.row

	{

	display: table-row;

	}



.cell {display: table-cell;}



a:link, a:visited {
	color: #0066FF;
	text-decoration:none;
	text-decoration:none;
	font-weight: bold;
}

a:hover {
	color: #FF9933;
	font-weight: bold;
}

a:active {
	color: #0066FF;
	font-weight: bold;
}

#leftnav-inactive {
	position:absolute;
	float: none;
	left: 740px;
	width:180px;
	height: 733px;
	background: url("../images/navback.jpg") top right;
	padding: 15px 5px 5px 8px;
	visibility: visible;
	overflow: auto;
	z-index: 8;
	font-family: Arial, Helvetica, sans-serif;
	top: 1px;
}
#topnav {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	background-color: #FFFFFF;
	position: absolute;
	width: 716px;
	height: 69px;
	top: 86px;
	left: 4px;
	visibility: visible;
	z-index: 9;
}
.topic-side {
	float:left;
	color: #111111;
	width: 160px;
	margin-left:2px;
	font-family:Verdana;
	border: 1px solid #111111;
	background-color: #999966;
	padding-left: 5px;
	font-size: 11px;
	padding-right: 5px;
	padding-top: 5px;
}
