/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
* {
    margin: 0;
    padding: 0;
} 

html, body, #wrap {
    height: 100%;
}

body > #wrap {
    height: auto;
    min-height: 100%;
}

#main {
    padding-bottom: 40px;  /* must be same height as the footer */
}

#footer {
    position: relative;
	margin-top: -40px; /* negative value of footer height */
	height: 40px;
	clear: both;
}

#footer img {
    padding: 0 10px 0 10px;
}

/* CLEAR FIX*/
.clearfix:after {
    content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
    display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}
/* End hide from IE-mac */


body {
	color: #0b0b0b;
	background: #ffffff;
	font: 500 14px Verdana, Lucida Sans Unicode, Lucida Grande, sans-serif;
    text-align: center;
}

.background {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -10;
}

.background img { width: 100%; height: 100%; }

.background div {
    background: #AFDDE9;
    z-index: -1;
}

.background div#backLeft {
    width: 170px;
}

.background div#backTop {
    height: 125px;
}

.corner {
    left: 170px;
    height: 1px;
}

#bc1 { top: 125px; width: 50px; }
#bc2 { top: 126px; width: 49px; }
#bc3 { top: 127px; width: 48px; }
#bc4 { top: 128px; width: 46px; }
#bc5 { top: 129px; width: 45px; }
#bc6 { top: 130px; width: 44px; }
#bc7 { top: 131px; width: 42px; }
#bc8 { top: 132px; width: 41px; }
#bc9 { top: 133px; width: 40px; }
#bc10 { top: 134px; width: 38px; }
#bc11 { top: 135px; width: 37px; }
#bc12 { top: 136px; width: 36px; }
#bc13 { top: 137px; width: 34px; }
#bc14 { top: 138px; width: 33px; }
#bc15 { top: 139px; width: 32px; }
#bc16 { top: 140px; width: 30px; }
#bc17 { top: 141px; width: 29px; }
#bc18 { top: 142px; width: 28px; }
#bc19 { top: 143px; width: 26px; }
#bc20 { top: 144px; width: 25px; }
#bc21 { top: 145px; width: 24px; }
#bc22 { top: 146px; width: 22px; }
#bc23 { top: 147px; width: 21px; }
#bc24 { top: 148px; width: 20px; }
#bc25 { top: 149px; width: 19px; }
#bc26 { top: 150px; width: 18px; }
#bc27 { top: 151px; width: 16px; }
#bc28 { top: 152px; width: 15px; }
#bc29 { top: 153px; width: 14px; }
#bc30 { top: 154px; width: 12px; }
#bc31 { top: 155px; width: 11px; }
#bc32 { top: 156px; width: 10px; }
#bc33 { top: 157px; width: 8px; }
#bc34 { top: 158px; width: 7px; }
#bc35 { top: 159px; width: 6px; }
#bc36 { top: 160px; width: 4px; }
#bc37 { top: 161px; width: 3px; }
#bc38 { top: 162px; width: 1px; }

.connect {
    position: relative;
    background: transparent;
    width: 100%;
    text-align: center;
    padding-top: 10px;
}

.connect img {
    height: 20px;
    vertical-align: top;
    border: none;
}

.connect #email {
    margin-top: -5px;
    height: 30px;
}

.connect a {
    border: none;
    padding: 10px 10px 0 10px;
}

.header {
    position: absolute;
    top: 35px;
    left: 50px;
}

.header #sp {
    position: relative;
    top: 5px;
    left: 25px;
}

.lessonBooks {
	width: 95%;
	height: 200px;
	border: 2px solid gray;
}

#twitter_div {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
}

#content {
    position: relative;
    background: transparent;
    top: 0px;
    height: 70%;
    min-width: 300px;
    margin: 110px 180px 0 200px;
    padding: 10px 10px 0 10px;
    text-align: left;
    overflow: auto;
    filter:alpha(opacity=90);
    opacity:0.9;
}

#content img {
    border: none;
    padding: 5px;
}

#content a {
    border: none;
    text-decoration: none;
    color: #216778;
}

#content a:link { text-decoration: none; }
#content a:visited { text-decoration: none; }
#content a:active { text-decoration: none; }
#content a:hover { text-decoration: underline; }

.backfill {
    background: #d4d4d4;
}

.links ul, .live ul {
    list-style: none;
    padding: 0 0 0 0;
    margin: 0;
    font-weight: bold;
    font-size: 18px;
}

.links li, .live li {
    padding: 15px 0 0 0;
    font-weight: normal;
    font-size: 14px;
}

.links img {
    vertical-align: middle;
    padding: 0 15px 0 0;
}

.live img {
    vertical-align: middle;
    padding: 0 15px 0 0;
    height: 100px;
}

#bio {
    clear: both;
    padding-top: 15px;
}

.contactTip {
    float: left;
    background: url(images/contactTip.png) top left no-repeat;
    padding: 2px 10px 0 10px;
    margin-left: 10px;
    color: #ffffff;
    width: 200px;
    height: 20px;
    font-size: 12px;
}

.contact {
    font-size: 12px;
}

.contact input, .contact textarea {
    float:left;
    width: 250px;
}

.contact #submit {
    width: 50px;
    font-size: 10px;
}

.contact ul {
    list-style: none;
    padding: 0 0 0 0;
    margin: 0;
}

.contact li {
    padding: 0 0 0 0;
}

.label {
    padding-top: 10px;
}

.sponsors {
    height: 50px;
}

/* Video Related Style */
.titlec {
    font-size: small;
}

table.youtube
{
    position: relative;
    margin-top: 20px;
}

table.youtube td
{
    padding: 3px;
	border: 0px;
}

#playerContainer
{
    position: relative;
    width: 500px;
    height: 375px;
}
/* End Video Related Style */

/* Upcoming Events Related Style */
.events {
    float: right;
    background: transparent;
    margin-right: 10px;
    margin-top: 100px;
    width: 150px;
    height: 300px;
    text-align: left;
}

.events .date {
    font-size: 14px;
}

.feedTitle {
    font-size: 22px;
}

#creditfooter {
    display: none;
}

.fbsubscribelink {
    padding-top: 10px;
    font-size: 10px;
}

.events ul {
    list-style: none;
    padding: 0 0 0 0;
    margin: 0;
    font-size: 12px;
}

.events li {
    padding: 10px 0 0 0;
}

.events a { color: #216778; }
.events a:link { text-decoration: none; }
.events a:visited { text-decoration: none; }
.events a:active { text-decoration: none; }
.events a:hover { text-decoration: underline; }

/* Upcoming Events Related Style */

/* Menu Related Style */

.menu {
	position: absolute;
    width: 50px;
    height: 320px;
}

.menu a {
	display: block;
	background: none;
}

.menu b {
	display: none;
}

/* Note: For a Section to Appear Active, then section_on must be declared as the DIV ID value */
#home { float: left; margin-left: 14px; margin-top: 15px; width: 68px; height: 37px; background: transparent url(images/home.png) 0px 0px no-repeat; }
#learn { float: left; margin-left: 21px; margin-top: 0px; width: 72px; height: 45px; background: transparent url(images/learn.png) 0px 0px no-repeat; }
#media { float: left; margin-left: 13px; margin-top: 5px; width: 76px; height: 40px; background: transparent url(images/media.png) 0px 0px no-repeat; }
#live { float: left; margin-left: 28px; margin-top: 8px; width: 54px; height: 37px; background: transparent url(images/live.png) 0px 0px no-repeat; }
#links { float: left; margin-left: 30px; margin-top: 2px; width: 66px; height: 45px; background: transparent url(images/links.png) 0px 0px no-repeat; }

#home a { height: 37px; width: 68px; }
#learn a { height: 45px; width: 72px; }
#media a { height: 40px; width: 76px; }
#live a { height: 37px; width: 54px; }
#links a { height: 45px; width: 66px; }

#home a:hover { background: transparent url(images/home.png) -68px 0px no-repeat; }
#learn a:hover { background: transparent url(images/learn.png) -72px 0px no-repeat; }
#media a:hover { background: transparent url(images/media.png) -76px 0px no-repeat; }
#live a:hover { background: transparent url(images/live.png) -54px 0px no-repeat; }
#links a:hover { background: transparent url(images/links.png) -65px 0px no-repeat; }

#home_on a { float: left; margin-left: 14px; margin-top: 15px; width: 68px; height: 37px; background: transparent url(images/home.png) -68px 0px no-repeat; }
#learn_on a { float: left; margin-left: 21px; margin-top: 0px; width: 72px; height: 45px; background: transparent url(images/learn.png) -72px 0px no-repeat; }
#media_on a { float: left; margin-left: 13px; margin-top: 5px; width: 76px; height: 40px; background: transparent url(images/media.png) -76px 0px no-repeat; }
#live_on a { float: left; margin-left: 28px; margin-top: 8px; width: 54px; height: 37px; background: transparent url(images/live.png) -54px 0px no-repeat; }
#links_on a { float: left; margin-left: 30px; margin-top: 2px; width: 66px; height: 45px; background: transparent url(images/links.png) -65px 0px no-repeat; }

.submenu {
    position: absolute;
    background: transparent;
    top: 40px;
    left: 240px;
    height: 28px;
    width: 270px;
}

.submenu a {
	display: block;
	background: none;
    height: 27px;
}

.submenu b {
	display: none;
}

/* Note: For a Section to Appear Active, then section_on must be declared as the DIV ID value */
#pics { float: left; margin-right: 15px; width: 42px; background: transparent url(images/pics.png) 0px 0px no-repeat; }
#videos { float: left; margin-right: 15px; width: 70px; background: transparent url(images/videos.png) 0px 0px no-repeat; }
#sounds { float: left; margin-right: 15px; width: 77px; background: transparent url(images/sounds.png) 0px 0px no-repeat; }
#sponsors { float: left; margin-right: 15px; width: 102px; background: transparent url(images/sponsors.png) 0px 0px no-repeat; }
#networking { float: left; margin-right: 15px; width: 130px; background: transparent url(images/networking.png) 0px 0px no-repeat; }
#basic { float: left; margin-right: 15px; width: 57px; background: transparent url(images/basic.png) 0px 0px no-repeat; }
#advanced { float: left; margin-right: 15px; width: 106px; background: transparent url(images/advanced.png) 0px 0px no-repeat; }
#style { float: left; margin-right: 15px; width: 61px; background: transparent url(images/style.png) 0px 0px no-repeat; }

#pics a:hover { background: transparent url(images/pics.png) -42px 0px no-repeat; }
#videos a:hover { background: transparent url(images/videos.png) -70px 0px no-repeat; }
#sounds a:hover { background: transparent url(images/sounds.png) -77px 0px no-repeat; }
#sponsors a:hover { background: transparent url(images/sponsors.png) -102px 0px no-repeat; }
#networking a:hover { background: transparent url(images/networking.png) -130px 0px no-repeat; }
#basic a:hover { background: transparent url(images/basic.png) -57px 0px no-repeat; }
#advanced a:hover { background: transparent url(images/advanced.png) -106px 0px no-repeat; }
#style a:hover { background: transparent url(images/style.png) -61px 0px no-repeat; }

#pics_on a { float: left; margin-right: 15px;  width: 42px; background: transparent url(images/pics.png) -42px 0px no-repeat; }
#videos_on a { float: left; margin-right: 15px;  width: 70px; background: transparent url(images/videos.png) -70px 0px no-repeat; }
#sounds_on a { float: left; margin-right: 15px;  width: 77px; background: transparent url(images/sounds.png) -77px 0px no-repeat; }
#sponsors_on a { float: left; margin-right: 15px;  width: 102px; background: transparent url(images/sponsors.png) -102px 0px no-repeat; }
#networking_on a { float: left; margin-right: 15px;  width: 130px; background: transparent url(images/networking.png) -130px 0px no-repeat; }
#basic_on a { float: left; margin-right: 15px;  width: 57px; background: transparent url(images/basic.png) -57px 0px no-repeat; }
#advanced_on a { float: left; margin-right: 15px;  width: 106px; background: transparent url(images/advanced.png) -106px 0px no-repeat; }
#style_on a { float: left; margin-right: 15px;  width: 61px; background: transparent url(images/style.png) -61px 0px no-repeat; }

/* End Menu Related Style */