body 
{
    background: #000000 url('images/bg.png') repeat-x;
    padding: 0;
    margin: 0;
    font-family: Arial, Sans-Serif;
    font-size: 10pt;
}
#status 
{
    width: 980px; color: White; background: #000000;
    margin: auto; text-align: right; padding: 5px;
}
#status a { color: White; text-decoration: none; }
#header 
{
    background: url('images/head-bar.png') repeat-x;
    height: 74px;
}
#head-content 
{
    width: 990px; margin: auto;
}
#logo { float: left; width: 500px; }

/*ABRSM*/
#abrsm { float: right; width: 300px; color: White; }
#abrsm img { float: left; }
#abrsm div { padding-top: 10px; }
#abrsm a { color: White; }

#main 
{
    width: 970px; color: Black; margin: auto; padding: 10px 10px 0 10px;
    background: #ffffff url('images/shad.png') repeat-x;   
    position: relative; z-index: 1;
}
#images  { position: absolute; right: 0; top: 0; z-index: -1; }
.clear { clear: both; }

#benefits-tab { float: left; width: 56px; z-index: 10; margin-top: 10px; }
#benefits-content { float: left; width: 350px; margin-left: 10px; margin-top: 15px; z-index: 10; }
#benefits img { border: none; }
#benefits a
{
    position: relative;
    z-index: 100;
}
#actions { padding-left: 0px; }

#testimonial { clear: left; }
#testimonial-tab { float: left; width: 56px; margin-top: 10px; }
#testimonial-content { float: left; width: 350px; margin-top: 10px; }

#watch-video { clear: left; width: 259px; float: left; height: 153px; }

/*Footer*/
#footer 
{
    width: 990px; color: Black; background: #ffffff; margin: auto;
    margin-bottom: 20px;
}
#footer a { color: Black; text-decoration: none; }
#footer-headings {  position: relative; background-color: white; z-index: 100; border-bottom: solid 5px #071f2a; height: 35px; padding-top: 6px; }
#resources-head { float: left; width: 270px; padding-left: 10px;}
#follow-us-head { float: left; width: 245px; }
#get-in-touch-head { float: left; width: 215px; }
#join-session-head { float: left; width: 175px; }
#footer-content 
{
    background: #abe2fc url('images/grad.png') repeat-x;
    height: 125px;
}
#resources { float: left; width: 270px; padding-left: 10px;}
#resources img { border: none; margin-top: 5px; }
#follow-us { float: left; width: 245px; }
#get-in-touch { float: left; width: 245px;  margin-top: 5px; }

#follow-us .icon { float: left; width: 30px; margin-top: 5px;}
#follow-us .text { float: left; width: 210px; height: 24px; padding-top: 6px; padding-left: 4px; margin-top: 5px;}
#get-in-touch .icon { float: left; width: 40px; }
#get-in-touch .text { float: left; width: 200px; height: 35px; padding-top: 5px; padding-left: 4px;}

#footer-ad { background: white; height: 83px; padding: 10px 0 0 10px; }
#footer-ad img { float: left; border: none; margin: 0; padding: 0; }
#articles { float: left; width: 200px; height: 52px; padding: 10px; background-color: #b3cbcf;}

#foot-logo { width: 200px; float: right; margin: 5px 10px 0 0; }

/*Alternative Style*/
#images2  { position: absolute; left: 200px; top: 0; z-index: -1; }
#extra { position: absolute; right: 0; top: 0; width: 255px; height: 486px; background-color: #abe2fc; }
#extra a { color: Black; text-decoration: none; }
#resources-head2 { background-color: White; padding-left: 10px; }
#follow-us-head2 { background-color: White; padding-left: 10px; }
#get-in-touch-head2 { background-color: White; padding-left: 10px; }
#resources2 { padding-left: 5px; background: #abe2fc url('images/grad.png') repeat-x; height: 80px;}
#resources2 img { border: none; margin-top: 5px; }
#follow-us2 { padding-left: 5px; background: #abe2fc url('images/grad.png') repeat-x; height: 120px;}
#get-in-touch2 { padding: 10px 0 0 5px; background: #abe2fc url('images/grad.png') repeat-x; height: 120px;}

#follow-us2 .icon { float: left; width: 30px; margin-top: 5px;}
#follow-us2 .text { float: left; width: 215px; height: 24px; padding-top: 6px; padding-left: 4px; margin-top: 5px;}
#get-in-touch2 .icon { float: left; width: 40px; }
#get-in-touch2 .text { float: left; width: 205px; height: 35px; padding-top: 5px; padding-left: 4px;}

#dialog-login { font-size: 10pt; }

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}