﻿/*
COLOR SCHEMES:
	Periwinkle: #666699
	Tan: #F9EDBA
	Red: #993333
	Dark Tan: #C7BE95
*/

/* BEGIN GENERAL HTML AND CLASSES */
body
{
	background-color: White;
	font: normal 12px/17px Arial, Helvetica, sans-serif;
	margin: 0px;
	padding-bottom: 5px;
	vertical-align: top;
}

a
{
	color: #993333;
	text-decoration: none;
}

a:hover
{
	color: #666699;
	text-decoration: underline;
}

img
{
	border: 0;
}

h2
{
	color: #993333;
	display: block;
	font-size: 28px;
	font-variant: small-caps;
	font-weight: bold;
	line-height: 28px;
	margin: 0px;
	margin-bottom: 15px;
}

h3
{
	border-bottom: solid 3px #C7BE95;
	color: #666699;
	display: block;
	font-size: 20px;
	font-weight: bold;
	line-height: 20px;
	margin: 20px 0px 5px 0px;
	padding-bottom: 5px;
	text-align: left;
}

h4
{
	display: block;
	font-size: 14px;
	font-weight: bold;
	line-height: 14px;
	margin: 0px;
	margin-bottom: 3px;
	text-align: left;
	text-transform: uppercase;
}

h5
{
	display: block;
	font-size: 12px;
	font-weight: bold;
	line-height: 14px;
	margin: 0px;
	margin-bottom: 3px;
	text-align: center;
	text-transform: uppercase;
}

h6
{
	display: block;
	font-size: 10px;
	font-weight: bold;
	line-height: 12px;
	margin: 0px;
	margin-bottom: 3px;
	text-align: center;
	text-transform: uppercase;
}

p
{
	margin: 5px 5px 10px 5px;
}

td
{
	vertical-align: top;
}

ul
{
	list-style-type: square;
	margin-top: 1px;
}

ul li, ol li
{
	padding-bottom: 6px;
}

.addthis_button, .next, .prev
{
	cursor: pointer;
}

.borderRight
{
	border-right: solid 1px #666699;
}

.button
{
	background-color: #666699;
	border: solid 2px #F9EDBA;
	color: White;
	font: bold 11px Verdana, Arial, Helvetica, sans-serif;
}

.buttonStop
{
	background-color: #993333;
	border: solid 2px #C7BE95;
	color: White;
	font: bold 14px Arial, Helvetica, sans-serif;
}

.clearFloat
{
	clear: both;
}

.colorRed
{
	color: Red;
}

.favorite
{
	color: #666699;
	font-weight: bold;
}

.floatLeft
{
	float: left;
}

.floatRight
{
	float: right;
}

.grayBorder
{
	border: 1px solid #CDCDCD;
	padding: 1px;
}

.grayText
{
	font-size: 11px;
	line-height: 11px;
	color: #666666;
}

.noWrap
{
	white-space: nowrap;
}

.searchTextbox
{
	font-size: 11px;
}

.searchWatermark
{
	color: #999999;
	font-size: 11px;
	font-style: italic;
	width: 140px;
}

.shiftLeft
{
	margin-left: 20px;
}

.textCenter
{
	text-align: center;
}

.textLeft
{
	text-align: left;
}

.textRight
{
	text-align: right;
}

.wizardSideBar
{
	background-color: #C7BE95;
	vertical-align: top;
}
/* END GENERAL HTML AND CLASSES */

/* BEGIN MASTER STRUCTURES */
/* TABS (FUTURE DEVELOPMENT) */
#tabsBar
{
	background-color: #F4DD80;
	height: 30px;
	width: 100%;
}

#tabsArea
{
	background-color: #666666;
	height: 30px;
	margin: 0px auto;
	width: 984px;
}

/* HEADER */
#headerBar
{
	background-color: #F9EDBA;
	height: 140px;
	width: 100%;
}

#headerArea
{
	background: url(bgHeader.png) no-repeat;
	height: 140px;
	margin: 0px auto;
	width: 984px;
}

#headerAreaLeft
{
	float: left;
	margin-left: 10px;
	width: 175px;
}

#headerAreaLeftShare
{
	margin-top: 10px;
}

#headerAreaLeftDate
{
	color: #993333;
	font: normal 16px/16px Verdana, Arial, Helvetica, sans-serif;
	margin: 30px 0px 0px 10px;
}

#headerAreaLeftDate div
{
	border-top: solid 2px #666699;
	margin: 3px 0px;
}

#headerAreaCenter img
{
	height: 139px;
	width: 540px;
}

#headerAreaRight
{
	float: left;
	margin: 5px 0px 0px 18px;
	width: 225px;
}

#headerAreaRightSearch
{
	border-bottom: solid 2px #666699;
	margin-bottom: 5px;
	padding-bottom: 3px;
	white-space: nowrap;
}

/* MENU */
#menuBar
{
	background: #666699 url(bgMenu.gif) repeat-x;
	height: 55px;
	width: 100%;
}

#menuArea
{
	color: White;
	font: bold 12px/17px Verdana, Arial, Helvetica, sans-serif;
	height: 50px;
	margin: 0px auto;
	padding: 10px 20px 0px 20px;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	width: 969px;
}

#menuArea ul
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#menuArea li
{
	background: none;
	float: left;
	margin: 0px;
	padding: 0px;
}

#menuArea a.oneLine
{
	border-right: #F9EDBA 1px solid;
	color: White;
	display: inline-block;
	height: 27px;
	margin-top: 1px;
	padding: 8px 10px 0px 10px;
	white-space: nowrap;
	width: 113px;
}

#menuArea a.long
{
	width: 140px;
}

#menuArea a.medium
{
	width: 135px;
}

#menuArea a.short
{
	width: 90px;
}

#menuArea a.twoLine
{
	border-right: #F9EDBA 1px solid;
	color: White;
	display: inline-block;
	height: 35px;
	margin-top: 1px;
	padding: 0px 10px 0px 10px;
	width: 113px;
}

#menuArea a:hover
{
	background-color: #993333;
	text-decoration: none;
}

#menuArea a.last
{
	border-right: none;
}

#menuArea a.select
{
	background-color: #993333;
    border: solid #F9EDBA 1px;
    border-bottom-width: 0px;
}

.menuArea-dropdown
{
	background-color: #F9F9F9;
	border: 3px solid #993333;
	line-height: 12px;
	padding: 2px;
}

.menuAreaFlow span 
{
    display: inline-block;
}

.menuArea-dropdown a
{
	color: #993333;
	display: block;
	padding: 3px;
	width: 180px;		
}

.menuArea-dropdown a:hover
{
	background-color: #666699;
	color: White;
}

/* BODY */
#mainArea
{
	background-color: #F9EDBA;
	margin: 0px auto;
	padding: 10px 0px;
	width: 984px;
}

#contentAreaOuter
{
	background-color: White;
	margin: 0px auto;
	padding: 0px;
	width: 954px;
}

#contentArea
{
	display: inline-block;
	padding: 10px;	
	width: 954px;
}

#contentAreaLeft
{
	float: left;
	width: 580px;
}

#contentAreaRight
{
	float: left;
	margin: 20px 0px 0px 20px;
	width: 329px;
}

#topFiveArea
{
	background: #C7BE95 url(bgTop5Videos.png) repeat-x;
	height: 215px;
	margin: 0px auto;
	padding: 5px;
	width: 974px;
}

#topFiveArea h3
{
	border-bottom: 0px;
	margin-top: 0px;
	padding-bottom: 0px;
}

#topFiveAreaLower div.number
{
	color: #777259;
	float: left;
	font: 72px Arial, Helvetica, sans-serif;
	margin-left: 30px;
}

#topFiveAreaLower div.numberFirst
{
	color: #777259;
	float: left;
	font: 72px Arial, Helvetica, sans-serif;
	margin-left: 20px;
}

#topFiveAreaLower div.video
{
	float: left;
	font-size: 10px;
	line-height: 12px;
	text-align: center;
	width: 120px;
}

#topFiveAreaLower div.video img
{
	height: 120px;
	padding-bottom: 4px;
	width: 120px;
}

/* FOOTER */
#footerBar
{
	background: #666699 url(bgMenu.gif) repeat-x;
	height: 55px;
	width: 100%;
}

#footerArea
{
	color: White;
	height: 55px;
	margin: 0px auto;
	padding-top: 20px;
	width: 954px;
}

#footerAreaLeft
{
	float: left;
}

#footerAreaLeft ul
{
	list-style-type: none;
	margin: 0px;
	padding: 0px 0px 10px 0px;
}

#footerAreaLeft ul li
{
	background: none;
	display: inline;
	margin: 0px;
	padding: 0px 10px;
	border-right: 1px solid White;
}

#footerAreaLeft ul li.first
{
	padding-left: 0px;
}

#footerAreaLeft ul li.last
{
	border-right: none;
}

#footerAreaLeft ul li a
{
	color: White;
	text-decoration: none;
}

#footerAreaLeft ul li a:hover
{
	color: White;
	text-decoration: underline;
}
/* END MAIN MASTER STRUCTURES */


/* BEGIN SUB MASTER STRUCTURES */
#connectArea
{
	border: solid 1px #CDCDCD;
	margin-bottom: 20px;
	padding: 5px;
}

#connectAreaUpper
{
	background-color: Black;
	color: White;
	font-size: 14px;
	font-weight: bold;
	padding: 5px 0px;
	text-align: center;
	vertical-align: middle;
}

#connectAreaLower
{
	background-image: url(bgConnect.gif);
	background-repeat: repeat-x;
	display: inline-block;
	width: 100%;
}

#connectAreaLower div
{
	float: left;
	padding: 0px 10px;
}

#connectAreaLower div.first
{
	margin-left: 5px;
}

#studentCamAd
{
	margin-bottom: 20px;
	text-align: center;
}

#newsArea
{
	margin-bottom: 20px;
}

#newsArea h3
{
	margin-top: 0px;
	padding-bottom: 0px;
}

#newsAreaBody
{
	max-height: 275px;
	overflow: auto;
	padding: 0px 5px;
}

#newsAreaBody ul
{
	list-style-type: square;
	margin-top: 1px;
}

#newsAreaBody ul li
{
	padding-bottom: 3px;
}

#sitesArea
{
	margin-top: 20px;
}

#sitesArea h3
{
	margin-top: 0px;
	padding-bottom: 0px;
}

#sitesAreaBody
{
	padding: 0px 5px;
}

/* TWITTER STYLES */
#twitter_module
{
	background-color: #F9EDBA;
	margin: 5px;
	padding: 5px;
}

#twitter_counter
{
	background-color: #FFFFCE;
	filter: alpha(opacity = 0);
	margin-bottom: 15px;
	opacity: 0;
	padding: 6px;
	text-align: center;
	zoom: 1;
}

#twitter_counter a
{
	color: red;
}

#twitter_entries
{
	padding: 3px;
	text-align: left;
}

#twitter_entries .single_twitt .twitter_img
{
	float: left;
	margin-right: 10px;
	text-align: center;
	width: 50px;
}

#twitter_entries .single_twitt .twitter_img img
{
	border: 1px solid #BABABA;
	height: 48px;
	padding: 1px;
	width: 48px;
}

#twitter_entries .single_twitt .twitter_content
{
	font-size: 14px;
	margin-top: 5px;
	padding-right: 3px;
}

#twitter_entries .single_twitt .twitter_content .twitt_status
{
	font: normal 12px/12px Arial, Helvetica, sans-serif;
	font-style: italic;
	margin-top: 5px;
}

#twitter_entries .single_twitt .twitter_content .twitt_status a
{
	color: Black;
}
/* END SUB MASTER STRUCTURES */

.programListContentImgArea
{
	float: left;
	padding: 5px 5px 10px 5px;
	width: 70px;
}

.programListContentImgArea img
{
	height: 70px;
	width: 70px;
}

.programListContentTextArea
{
	float: left;
	padding: 5px 5px 10px 5px;
	width: 490px;
}

#teachableArea
{
	border: 4px #666699 solid;
	display: inline-block;
	margin-bottom: 15px;
	width: 570px;
}

#teachableAreaLeft
{
	float: left;
	height: 490px;
	padding: 5px;
	width: 395px;
}

#teachableAreaLeftVideo
{
	height: 330px;
	text-align: center;
	vertical-align: middle;
}

#teachableAreaRight
{
	float: left;
	height: 500px;
	padding: 7px 5px 5px 5px;
	padding-left: 0px;
	width: 160px;
}

#teachableAreaRightScroll
{
	background-color: #F9EDBA;
	font-size: 10px;
	height: 457px;
	line-height: 12px;
	padding: 0px 5px;
	text-align: center;
}

#teachableAreaRightScroll.scrollable
{
	overflow: hidden;
	position: relative;
}

#teachableAreaRightScroll.scrollable #teachableAreaRightScrollItems.items
{
 	height: 20000em;
	position: relative;
}

#teachableAreaRightScroll.scrollable #teachableAreaRightScrollItems.items div.item
{
	height: 140px;
	margin-top: 1px;
	padding: 5px 0px;
}

#teachableAreaRightScroll.scrollable #teachableAreaRightScrollItems.items div.itemSelected
{
	background-color: #C7BE95;
	height: 140px;
	margin-top: 1px;
	padding: 5px 0px;
}

#teachableAreaRightScroll #teachableAreaRightScrollItems.items img
{
	height: 90px;
	padding-bottom: 4px;
	width: 90px;
}

#memberArea
{
	border: 1px solid #CDCDCD;
	clear: both;
	display: block;
	height: 170px;
	margin-bottom: 20px;
	padding: 5px;
	width: 568px;
}

#memberArea h3
{
	border-bottom: 0px;
	margin: 0px;
	padding-bottom: 0px;
}

#memberAreaBg
{
	background-color: #C7BE95;
	display: block;
	height: 160px;
	padding: 5px;
}

#memberAreaBodyLeft
{
	float: left;
	padding: 1px;
	width: 272px;
}

#memberAreaBodyRight
{
	float: left;
	margin-left: 10px;
	padding: 1px;
	width: 272px;
}

#memberAreaBodyLeft div p, #memberAreaBodyRight div p
{
	margin: 0px 0px 3px 0px;
}

#middleAdArea
{
	clear: both;
	display: block;
	margin-bottom: 20px;
	padding: 0px;
	width: 576px;
}

#middleAdBody
{
	padding: 5px;
}

#middleAdBody h3
{
	margin-top: 0px;
}

#bottomAds
{
	clear: both;
	display: block;
	width: 576px;
}

#bottomAdsLeft
{
	float: left;
	height: 160px;
	width: 270px;
}

#bottomAdsLeftArea
{
	display: block;
	padding: 20px 0px;
	text-align: center;
}

#bottomAdsRight
{
	float: left;
	height: 160px;
	margin-left: 28px;
	width: 270px;
}

#bottomAdsRightArea
{
	background-color: #F2F3F7;
	border: 2px solid #666699;
	display: inline-block;
	height: 130px;
	margin: 15px;
	text-align: center;
	width: 235px;
}

#bottomAdsRightAreaUpper
{
	margin: 5px 0px;
}

#bottomAdsRightAreaPrev
{
	float: left;
	height: 90px;
	padding-left: 2px;
	width: 20px;
}

#bottomAdsRightAreaNext
{
	float: right;
	height: 90px;
	padding-right: 2px;
	width: 20px;
}

#bottomAdsRightAreaScroll
{
	float: left;
	height: 90px;
	width: 180px;
}

#bottomAdsRightAreaScroll.scrollable
{
	height: 90px;
	margin-left: 5px;
	overflow: hidden;
	position: relative;
}

#bottomAdsRightAreaScroll.scrollable div.items
{
	position: absolute;
	width: 20000em;
}

#bottomAdsRightAreaScroll.scrollable div.items div.item
{
	float: left;
	width: 180px;
}

#searchAreaInfo
{
	background-color: #C7BE95;
	font-weight: bold;
	height: 18px;
	margin-bottom: 5px;
	padding: 5px;
}

#pagerArea
{
	padding-top: 5px;
	margin: 0px auto;
	width: 580px;
}

#pagerArea table
{
	border-top: solid 2px #C7BE95;
}

#pagerArea table td
{
	text-align: center;
	width: 19%;
	white-space: nowrap;
	vertical-align: middle;
}

#resourcesArea
{
	margin-bottom: 20px;
}

#resourcesAreaBody
{
	padding: 0px 5px;
}

#resourcesAreaBody ul
{
	list-style-type: square;
	margin-top: 1px;
}

#resourcesAreaBody ul li
{
	padding-bottom: 3px;
}

#videoAreaLeft
{
	float: left;
	width: 530px;
}

#videoAreaLeftBodyLeft
{
	float: left;
	width: 255px;
}

#videoAreaLeftBodyRight
{
	float: left;
	margin-left: 20px;
	width: 255px;
}

#videoAreaRight
{
	float: left;
	margin-left: 20px;
	width: 395px;
}

#videoAreaRightSaved
{
	margin-bottom: 20px;
}

#videoAreaRightBodyUpper
{
	height: 320px;
	margin-bottom: 20px;
	text-align: center;
	vertical-align: middle;
}

#videoAreaRightUpperImage
{
	padding-top: 25px;
}

#videoAreaRightUpperImage img
{
	height: 240px;
	width: 240px;
}

#lessonArea
{
	max-height: 700px;
	overflow: auto;
}
