/*********************************************
	STYLES FOR BROWSER
	1. Developer, this is the individual 
	   css file for a web browser
	2. Please keep your code CLEAN. 
	3. Bring over ANY custom tags. 
	4. Make SURE to test the "Big 5" Browsers:
		-- IE7, IE8 - A MUST! 
		-- Firefox
		-- Chrome
		-- Safari
		-- Opera
*********************************************/
html, body{
	margin:0;
	padding:0;
	background-color:#0e878a;
}

body { /* Use both the px/em variable */
	font: 11px/1.3em Verdana, Geneva, sans-serif; 
	color: #000;
}

		
a { /* default link styles*/
	color:#069;
	text-decoration: none;
}
	
	a:hover{
		text-decoration: underline;
	}

.wrapper{ /* This is where you would change by default. A SAFE width is 320px */
	width: 980px;
	margin:0 auto;
	background-color:#fff;
}

/* temporary demo styles */
body.red{ background: url(http://0.media.bustedtees.com/bustedtees/mf/c/4/bustedtees.6690fb1cff9907811ca177c4493ff437.jpg);}
body.red .wrapper{background-color:#F00;}
body.red .header{ background-color:#F6C; height:300px;}





/*********************************************
	STANDARD TAGS:
	These are our standard tags. YOU MUST
	USE THESE TO HAVE THE SITE WORK PROPERLY
	WITH MOBILE AND DEFAULT CSS
	1) .header
	2) .main-nav -- located in nav.css
	3) h1, h2, h3, h4, h5
	4) .breadcrumbs
	5) .content
		-- .col-1
		-- .col-2 
		-- .col-3
		-- Make more if needed.
	6) .footer
*********************************************/

h2 { color: #064654; font-size: 14px; font-weight: bold; }

h3, h4, h5 { /* Format as you need, use em's */
}

.breadcrumbs { /* Format as you need with your a tags, etc. */
	color: #000;
	margin: 0 0 0 10px;
}

.content { /* Format as you need. Use em's where you can to keep consistent */
	background: url(/images/green-grade.jpg) left top repeat-y #FAF2DB;
	position: relative;
	z-index: 100;
	color: #000;
}
.home-content { /* Format as you need. Use em's where you can to keep consistent */
	background: url(/images/content-bg.png) left top repeat-x;
	position: relative;
	z-index: 100;
	color: #000;
}

	.col-1 { 
		width: 216px;
		min-height: 450px;
		float: left;
	}
	
	.col-2 { 
		width: 490px;
		float: left;
		background:url(/images/content-bg.png) repeat-x;
		min-height: 350px;
	}
	
	.col-2-2 { 
		width: 763px;
		float: left;
		background:url(/images/content-bg.png) repeat-x;
	}
	
	.col-3 { 
		width: 273px;
		float: left;
		display: block; 
		min-height: 250px;
		background:url(/images/content-bg.png) repeat-x;
	}
	
.footer { /* Format as you need. */
	width: 980px;
	background: #0f868a;
	padding: 10px 0 0 0;
}

	.footer-left { float: left; width: 475px; margin: 0 10px 0 0; font-size: 10px; color: #fff; }
		.footer-left a { color: #fff !important; text-decoration: none; font-weight: normal !important; }
		.footer-left a:hover { text-decoration: underline; }
	.footer-right { float: left; width: 475px; color: #56cdc9; font-size: 12px; font-weight: bold; }
		.footer-right a { color: #56cdc9; text-decoration: none; }
		.footer-right a:hover { text-decoration: underline; }
		
			.footer-right-sub { font-size: 10px; color: #fff; font-weight: normal !important; margin: 10px 0 0 0; }
				.footer-right-sub a { color: #fff !important; text-decoration: none; }
				.footer-right-sub a:hover { text-decoration: none; }
					.sub-left { width: 110px; float: left; }
						.sub-left img { margin: 0 0 10px 0; }
					.sub-right { float: left; }
	
	
	.footer a {
		color: #56cdc9;
		text-decoration: none;
		font-weight: bold;
	}
	
	.footer a:hover {
		color: #fff;
		text-decoration: underline;
	}
	
	/* Use this for your footer nav to make it easier on spacing! */
	/* nav class inherited from core.css */
	
	.footer ul.nav { 	
		text-align:left;
		margin:0 auto 5px;
	}
	
		.footer ul.nav li { 
			position:relative;
			display: inline;
			float:none;
			border-left: 1px solid #56cdc9;
			padding:0 5px 0 10px;
		}

.marg { margin: 0 0 10px 0; }
/*******************************************
	SITE SPECIFIC FORMATTING
	1. This is where you will test and put 
	   your site specific tags. 
********************************************/


/*********************************************
	Social
*********************************************/

.s { background: url(/images/social.png) left top no-repeat; }

	.fb { background-position: 0px 0px; width: 30px; height: 32px; display: block; text-indent: -9999px !important; float: left; margin: 0 3px 0 0; }
		.fb:hover { background-position: 0px -32px; }
	.tw { background-position: -30px 0px; width: 30px; height: 32px; display: block; text-indent: -9999px !important; float: left; margin: 0 3px 0 0; }
		.tw:hover { background-position: -30px -32px; }
	.li { background-position: -60px 0px; width: 30px; height: 32px; display: block; text-indent: -9999px !important; float: left; margin: 0 3px 0 0; }
		.li:hover { background-position: -60px -32px; }
	.sh { background-position: -90px 0px; width: 30px; height: 32px; display: block; text-indent: -9999px !important; float: left; margin: 0 3px 0 0; }
		.sh:hover { background-position: -90px -32px; }


/*******************************************
	Header Sprite
********************************************/


h1 { /* This will use the same admin controlled headers */
	background: url(/images/header-sprite2.jpg) left top no-repeat;
	height: 74px; 
	width: 490px;
	display: block;
	text-indent: -9999px;
}

	.t1 { background-position: 0px 0px; }
	.t2 { background-position: 0px -74px; }
	.t3 { background-position: 0px -148px; }
	.t4 { background-position: 0px -222px; }
	.t5 { background-position: 0px -296px; }
	.t6 { background-position: 0px -370px; }
	.t7 { background-position: 0px -444px; }
	.t8 { background-position: 0px -518px; }
	.t9 { background-position: 0px -592px; }
	.t10 { background-position: 0px -666px; }
	.t11 { background-position: 0px -740px; }
	.t12 { background-position: 0px -814px; }
	.t13 { background-position: 0px -888px; }
	.t14 { background-position: 0px -962px; }
	.t15 { background-position: 0px -1036px; }
	.t16 { background-position: 0px -1110px; }
	.t17 { background-position: 0px -1184px; }
	.t18 { background-position: 0px -1258px; }
	.t19 { background-position: 0px -1332px; }
	.t20 { background-position: 0px -1406px; }
	.t21 { background-position: 0px -1480px; }
	.t22 { background-position: 0px -1554px; }
	.t23 { background-position: 0px -1628px; }
	.t24 { background-position: 0px -1702px; }
	.t25 { background-position: 0px -1776px; }
	.t26 { background-position: 0px -1850px; }
	.t27 { background-position: 0px -1924px; }
	.t28 { background-position: 0px -1998px; }
	.t29 { background-position: 0px -2072px; }
	.t30 { background-position: 0px -2146px; }
	.t31 { background-position: 0px -2220px; }
	.t32 { background-position: 0px -2294px; }
	.t33 { background-position: 0px -2368px; }
	.t34 { background-position: 0px -2442px; }
	.t35 { background-position: 0px -2516px; }
	.t36 { background-position: 0px -2590px; }
	.t37 { background-position: 0px -2664px; }
	.t38 { background-position: 0px -2738px; }
	.t39 { background-position: 0px -2812px; }
	.t40 { background-position: 0px -2886px; }
	.t41 { background-position: 0px -2960px; }
	.t42 { background-position: 0px -3034px; }
	.t43 { background-position: 0px -3108px; }
	.t44 { background-position: 0px -3182px; }
	.t45 { background-position: 0px -3256px; }
	.t46 { background-position: 0px -3330px; }
	.t47 { background-position: 0px -3404px; }
	.t48 { background-position: 0px -3114px; }
	.t49 { background-position: 0px -3188px; }
	.t50 { background-position: 0px -3626px; }
	.t51 { background-position: 0px -3700px; }
	.t52 { background-position: 0px -3774px; }
	.t53 { background-position: 0px -3848px; }
	.t54 { background-position: 0px -3922px; }
	.t55 { background-position: 0px -3996px; }
	.t56 { background-position: 0px -4070px; }
	.t57 { background-position: 0px -4144px; }
	.t58 { background-position: 0px -4218px; }
	.t59 { background-position: 0px -4292px; }
	.t60 { background-position: 0px -4366px; }
	.t61 { background-position: 0px -4440px; }
	.t62 { background-position: 0px -4514px; }
	.t63 { background-position: 0px -4588px; }
	.t64 { background-position: 0px -4662px; }
	.t65 { background-position: 0px -4736px; }
	.t66 { background-position: 0px -4810px; }
	.t67 { background-position: 0px -4884px; }
	.t68 { background-position: 0px -4958px; }
	.t69 { background-position: 0px -5032px; }
	.t70 { background-position: 0px -5106px; }
	.t71 { background-position: 0px -5180px; }
	.t72 { background-position: 0px -5254px; }
	.t73 { background-position: 0px -5328px; }
	.t74 { background-position: 0px -5402px; }
	.t75 { background-position: 0px -5476px; }
	.t76 { background-position: 0px -5550px; }
	.t77 { background-position: 0px -5624px; }
	.t78 { background-position: 0px -5698px; }
	.t79 { background-position: 0px -5698px; }
	.t80 { background-position: 0px -5846px; }
	.t81 { background-position: 0px -5920px; }
	.t82 { background-position: 0px -5994px; }
	.t83 { background-position: 0px -6068px; }
	.t84 { background-position: 0px -6142px; }
	.t85 { background-position: 0px -6216px; }
	

	.t86 { background-position: 0px -3478px; }
	.t87 { background-position: 0px -6265px; }
	.t88 { background-position: 0px -6065px; }

/*******************************************
	Sprite and buttons
********************************************/

.sprite { background: url(/images/sprite.png) left top no-repeat; }

	a.donate-online { width: 180px; height: 42px; display: block; text-indent: -9999px; background-position: 0px -84px; }
	a:hover.donate-online { background-position: 0px -126px; }

	a.event-registration { width: 180px; height: 42px; display: block; text-indent: -9999px; background-position: -180px -84px; }
	a:hover.event-registration { background-position: -180px -126px; }
	
	a.mailing-list { width: 180px; height: 42px; display: block; text-indent: -9999px; background-position: -360px -84px; }
	a:hover.mailing-list { background-position: -360px -126px; }
	
		.link-float { float: left; margin: 10px; }


/*******************************************
	Header
********************************************/

.top-header { 
	text-align: right;
	background: #0e878a;
	padding: 5px;
	color: #fff;
	font-weight: bold;
	line-height: 20px;
	position: relative;
}

	.top-header a { font-weight: bold; color: #fff; text-decoration: none; }
	.top-header a:hover { text-decoration: underline; }
	.top-header input { border: 1px solid #000; padding: 3px; margin: 0 5px 0 0; }
	.top-search { float: left; margin: 0 10px 0 10px; }
	.top-right { float: right; }
	.top-social { 
		position: absolute; top: 150px; right: 5px; 
		width:170px;}

.header {
	height: 147px;
}


/*******************************************
	Left Col Formatting
********************************************/

.left-title {
	width: 206px;
	margin: 15px 0 0 0;
	padding: 5px 0 5px 10px;
	display: block;
	background: #043a46;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	border-bottom: 1px solid #064753;
	border-top: 1px solid #064753;
}

	.left-testimonials {
		padding: 10px;
		color: #fff;
		font-size: 10px;
	}
	
		.left-testimonials a { font-weight: bold; color: #FF9; text-decoration: none; }
		.left-testimonials a:hover { text-decoration: underline; }
		
		
/*******************************************
	Homepage Formatting
********************************************/

.row1 { height: 236px; border-bottom: 4px solid #0e878a; }
.row2 { background: #fff; min-height: 15px; }

/* The top home formatting */

.left-home-top { width: 460px; height: 236px; float: left; border-right: 1px solid #000; position: relative; }
	.np { background: url(/images/next.png) left top no-repeat; }
	.next { background-position: 0px 0px; display: block; position: absolute; top: 50px; right: 5px; height: 42px; width: 53px; }
		.next:hover { background-position: -53px 0px; }
	.prev { background-position: 0px -53px; display: block; position: absolute; top: 50px; right: 402px; height: 42px; width: 53px; }
		.prev:hover { background-position: -53px -53px; }
.right-home-top { width: 519px; float: left; }

/* the second row formatting on homepage */
.home-cols {
	width: 224px;
	padding: 10px;
	font-size: 11px; 
	float: left;
	color: #000;
	border-right: 1px dashed #000;
	min-height: 400px;
}

.no-dash {
	border:none;
}

	.home-cols a { color: #0e738a; text-decoration: none; }
	.home-cols a:hover { color: #000; text-decoration: underline; }
	
	
/*******************************************
	General Subpage Formatting
********************************************/

.subpage-left { width: 230px; float: left; margin: 0 10px 0 0; }
.subpage-right { width: 225px; float: left; }


/*******************************************
	Module Formatting
********************************************/

.staff-left { float: left; margin: 0 10px 0 0; }
	.staff-left img { border: 1px solid #064654; padding: 2px; }
.staff-right { float: left; width: 325px; }
.staff-seperator { height: 10px; border-bottom: 1px dotted #064654; margin: 0 0 10px 0; }

.np { text-align: center; font-size: 10px; font-style:italic; margin: 0 0 20px 0; }
	.np img { float: left; margin: 0 10px 0 0; border: 1px solid #064654; }


/*********************************************
	Video
*********************************************/

.tv-holder {

	background: url(/images/tv.jpg) left top no-repeat;
	width: 458px;
	height: 447px;
	padding: 37px 0 0 35px;
	margin:0;
	/*
	float: left;
	border-right: 1px solid #ccc;
	*/
}

.tv-shows {
	/*width: 92px;
	float: right;*/

}

#videodiv{
	height:345px;
	overflow:hidden;
}

#videodivhomepage{

	overflow:hidden;
	text-align:center;
}

ul.tv   {
	list-style: none;
	list-style-type: none;
	margin: 0 0 0 22px;
	padding: 0;
}

ul.tv li  {
	width: 130px;
	border: 1px solid #ccc;
	float:left;
	margin:5px 15px 12px 0;
	background:#a7bdbd;
	float: left;
	display: inline-block;
}

ul.tv li .inner  {
	padding:5px;
	display:block;
}


ul.tv li img  {
	width: 120px;
	height:90px;

}


.tv li a  {
	display: block;
	padding: 0;
	text-decoration: none;
	height:170px;
	float: left;
}

.tv li:hover a:hover {
	background-color:#DFF1FF;
}

.video-name{
	color:#fff;
	font-weight:bold;
	text-align:center;
	padding-top:6px;
	margin-left:-10px;
	font-size:10px;
}