/*
 * Designed by : BJ Begui
*/
#body{
	background:#ffffff url( /img/header.png ) repeat-x left top;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin:0 auto;
	position:relative;
}
#container{
	width: 960px;
	margin:0 auto;
	position:relative;
	padding-top: 3em;
	height: 90%; /* for css footer */

}
#container h1 {
	font-size:30px;
	font-weight:normal;
	letter-spacing:-1px;
	padding:10px 0 10px 0;
}
#container h1 a {
	color:#222;
	text-decoration:none;
}
#container h1 a:hover {
	color:#c00;
}

#content{
	width: 760px;
	margin:0 auto;
}

#footer-container {

	clear: both;
	position: relative;

	background:#eee;
	font-size:11px;
	color:#555;
	margin:0 auto;
	padding:10px 0;
	text-align:center;
	border-top:orange 1px solid;
	border-bottom:#000 6px solid;
}

/***For the skip ada nav bar ***/
#skip a, #skip a:hover, #skip a:visited{
	position:absolute;
	left:0px;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
}
#skip a:active, #skip a:focus{
	position:static;
	width:auto;
	height:auto;
}
/** end of ada nav **/

/***START OF TABS ***/
/*
ul#nav{
	margin: 0;
	padding: 0;
	font-size: 1.1em;
	list-style: none;
	float: left;
}
ul#nav li{
	margin: 0;
	padding: 0;
	overflow: hidden;  
	float: left;
	height:40px;
}
*/

.tabContainer{
	/* The UL */
	float:right;
	padding-right:13px;
}
#tabContent{
	/*background-color:#333;*/
	/*border:1px solid #444;*/
	margin-top:-15px;
	margin-bottom: 5px;
	width:100%;
}

.tabContainer li{
	/* This will arrange the LI-s next to each other */
	display:inline;
}

.tabContainer li a,.tabContainer li a:visited{
	/* Styling the hyperlinks of the tabs as colorful buttons */
	float:left;
	font-size:18px;

	/* display:block allows for additinal CSS rules to take effect, such as paddings: */
	display:block;

	padding:7px 16px 1px;
	margin:4px 5px;
	height:29px;

	/* Giving positioning */
	position:relative;

	/* CSS3 text-shadow */
	/*text-shadow:1px 1px 1px #CCCCCC;*/
}

#overLine{
	/* The line above the active button. */
	position:absolute;

	height:1px;
	background-color:white;
	width:90px;

	float:left;
	left:1px;
	top:-5px;
	overflow:hidden;
}


ul .left{
	/* The left span in the hyperlink */

	height:37px;
	left:0;
	position:absolute;
	top:0;
	width:10px;
}

ul .right{
	/* The right span in the hyperlink */

	height:37px;
	right:0;
	position:absolute;
	top:0;
	width:10px;
}

/* The hover states: */
ul a:hover{	background-position:bottom center; text-decoration:none;}
ul a:hover span.left{ background-position:left bottom;}
ul a:hover span.right{ background-position:right bottom;}

.clear{
	/* Old-school clear fix hack to clear the floats: */
	clear:both;
	height:1px;
	overflow:hidden;
}

h2 {
	font-size:0.9em;
	font-weight:normal;
	padding-right:40px;
	position:relative;
	right:0;
	text-align:right;
	text-transform:uppercase;
	top:-48px;
}

a, a:visited {
	color:#222;
	text-decoration:none;
	outline:none;
}
/* Not too sure if i need this */
a:hover{
	text-decoration:underline;
}


#leftcolumn {
	width: 450px;  float: left;
}
#rightcolumn { 
	width: 300px; float: right;
}