/* ------------------------------------------------------------------------
CSS sheet for WYTEC
Author: Jeff Sanders
Date Created: 8/28/09
All inquiries for this document should be directed to information@virtualtech.com.
--------------------------------------------------------------------------*/

/* ------------------------------------------------------------------------
MAIN DESIGN ELEMENTS
--------------------------------------------------------------------------*/
* {
	margin: 0px;
	padding: 0px;
}
body {
	background: #fff url(../images/background.jpg) top center repeat-x;
}
#wrapper {
	margin: 0px auto;
	width: 960px;
}
#header {
	background: url(../images/homeHeadBg.jpg) bottom left no-repeat;
	position: relative;
	height: 300px;
}
	#header h1 {
		margin: 0px;
		position: absolute;
		left: 20px;
		width: 275px;
		height: 95px;
		font: 12px Arial, Helvetica, sans-serif;
		text-indent: -10000px;
		background: url(../images/logo.png) top left no-repeat;
		overflow: hidden;
	}
	#header h1 a {
		width: 275px;
		height: 95px;
		display: block;
	}
	#header h2 {
		margin: 0px;
		position: absolute;
		top: 10px;
		right: 20px;
		width: 228px;
		height: 259px;
		text-indent: -10000px;
		background: url(../images/slogan.png) top left no-repeat;
		overflow: hidden;
		display: block;
	}
#content {
	padding: 20px 20px 20px 40px;
	min-height: 400px;
	border-bottom: 1px solid #ccc;
	overflow: auto;
}
#mainContent {
	width: 680px;
	float: left;
}
#sidebar {
	width: 190px;
	float: right;
}
#footer {
	clear: both;
	text-align: center;
}
#footer p {
	padding: 20px;
	font: 10px/22px Verdana, Arial, Helvetica, sans-serif;
}


/* ------------------------------------------------------------------------
NAVIGATION
--------------------------------------------------------------------------*/
ul#nav {
	padding-left: 20px;
	list-style-type: none;
	height: 60px;
}
ul#nav li {
	position: relative;
	height: 58px;
	float: left;
}
ul#nav li:hover {
	background: url(../images/triangle.jpg) center bottom no-repeat;
}
ul#nav li a {
	padding: 0px 18px;
	text-transform: uppercase;
	font: 14px/45px Arial, Helvetica, sans-serif;
	color: #8b8383;
	text-decoration: none;
	text-shadow: 2px 2px 2px #000;
	border-left: 1px solid #000;
	border-right: 1px solid #5B5B5B;
	display: block;
}
ul#nav li a:hover {
	color: #f4f4f4;
}
ul#nav li.about a {
	border-left: none;
}
ul#nav li.events a {
	border-right: none;
}

/* about */
#about ul#nav li.about {
	background: url(../images/triangle.jpg) bottom center no-repeat;
}
#about ul#nav li.about a {
	color: #fff;
}
#about #header {
	background: url(../images/aboutHeadBg.jpg) bottom left no-repeat;
}

/* programs */
#programs ul#nav li.programs {
	background: url(../images/triangle.jpg) bottom center no-repeat;
}
#programs ul#nav li.programs a {
	color: #fff;
}
#programs #header {
	background: url(../images/mediaHeadBg.jpg) bottom left no-repeat;
}


/* clubhouse */
#clubhouse ul#nav li.clubhouse {
	background: url(../images/triangle.jpg) bottom center no-repeat;
}
#clubhouse ul#nav li.clubhouse a {
	color: #fff;
}
#clubhouse #header {
	background: url(../images/computerHeadBg.jpg) bottom left no-repeat;
}


/* involved */
#involved ul#nav li.involved {
	background: url(../images/triangle.jpg) bottom center no-repeat;
}
#involved ul#nav li.involved a {
	color: #fff;
}
#involved #header {
	background: url(../images/involvedHeadBg.jpg) bottom left no-repeat;
}


/* media */
#media ul#nav li.media {
	background: url(../images/triangle.jpg) bottom center no-repeat;
}
#media ul#nav li.media a {
	color: #fff;
}
#media #header {
	background: url(../images/programsHeadBg.jpg) bottom left no-repeat;
}


/* board */
#board ul#nav li.board {
	background: url(../images/triangle.jpg) bottom center no-repeat;
}
#board ul#nav li.board a {
	color: #fff;
}
#board #header {
	background: url(../images/boardHeadBg.jpg) bottom left no-repeat;
}


/* events */
#events ul#nav li.events {
	background: url(../images/triangle.jpg) bottom center no-repeat;
}
#events ul#nav li.events a {
	color: #fff;
}
#events #header {
	background: url(../images/eventsHeadBg.jpg) bottom left no-repeat;
}


/* ------------------------------------------------------------------------
TEXT ELEMENTS
--------------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
	margin: 10px 0px;
}
h3 {
	font: bold 16px Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #333;
}
h4 {
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #BF8E2F;
}
p {
	margin: 10px 0px;
	font: 12px/22px Verdana, Arial, Helvetica, sans-serif;
	color: #333;
}
#content ul {
	margin-left: 15px;
}
li {
	font: 12px/22px Verdana, Arial, Helvetica, sans-serif;
}
#content a, #footer a {
	padding: 3px 5px;
	background-color: #ccc;
	color: #333;
	text-decoration: none;
}
#content a:hover, #footer a:hover {
	background-color: #333;
	color: #fff;
}

/* ------------------------------------------------------------------------
HOME ELEMENTS
--------------------------------------------------------------------------*/
p.intro {
	width: 651px;
	height: 171px;
	display: block;
	background: url(../images/intro.jpg) top left no-repeat;
	text-indent: -10000px;
	overflow: hidden;
}
#mainContent img {
	margin-bottom: 10px;
	padding: 10px;
	background: #f4f4f4;
	border: 2px solid #ccc;
}
h2.mission_title {
	background: url(../images/mission_title.jpg) top left no-repeat;
	height: 63px;
	display: block;
	text-indent: -10000px;
	overflow: hidden;
}

/* ------------------------------------------------------------------------
ABOUT ELEMENTS
--------------------------------------------------------------------------*/
h2.about_title {
	background: url(../images/about_title.jpg) top left no-repeat;
	height: 63px;
	display: block;
	text-indent: -10000px;
	overflow: hidden;
}

/* ------------------------------------------------------------------------
PROGRAMS ELEMENTS
--------------------------------------------------------------------------*/
h2.programs_title {
	background: url(../images/programs_title.jpg) top left no-repeat;
	height: 63px;
	display: block;
	text-indent: -10000px;
}

/* ------------------------------------------------------------------------
COMPUTER CLUBHOUSE ELMENTS
--------------------------------------------------------------------------*/
h2.clubhouse_title {
	background: url(../images/clubhouse_title.jpg) top left no-repeat;
	height: 63px;
	display: block;
	text-indent: -10000px;
}

/* ------------------------------------------------------------------------
INVOLVED ELMENTS
--------------------------------------------------------------------------*/
h2.involved_title {
	background: url(../images/involved_title.jpg) top left no-repeat;
	height: 63px;
	display: block;
	text-indent: -10000px;
}

/* ------------------------------------------------------------------------
MEDIA ELMENTS
--------------------------------------------------------------------------*/
h2.media_title {
	background: url(../images/media_title.jpg) top left no-repeat;
	height: 63px;
	display: block;
	text-indent: -10000px;
}
.entry_block {
	padding-bottom: 20px;
	border-bottom: 1px solid #ccc;
}
a#player {
	margin-top: 20px;
}

/* ------------------------------------------------------------------------
BOARD ELEMENTS
--------------------------------------------------------------------------*/
h2.board_title {
	background: url(../images/board_title.jpg) top left no-repeat;
	height: 63px;
	display: block;
	text-indent: -10000px;
}
#board ul {
	margin-left: 0px;
	list-style-type: none;
}
#board ul.board li {
	margin-bottom: 10px;
}

/* ------------------------------------------------------------------------
PARTNER ELMENTS
--------------------------------------------------------------------------*/
#sidebar h3 {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #666;
	text-transform: uppercase;
	text-align: center;
}
#content ul.logos {
	margin-left: 0px;
	list-style-type: none;
}
ul.logos li {
	margin-bottom: 10px;
	text-align: center;
}
ul.logos a img {
	border: none;
}
#content #sidebar a {
	background-color: #fff;
	padding: 0px;
}


/* ------------------------------------------------------------------------
MISC ELEMENTS
--------------------------------------------------------------------------*/
.col {
	width: 50%;
	float: left;
}