/*
-----------------------------------------------------
Templated Companion Site Demo
-----------------------------------------------------
Template CSS
-----------------------------------------------------
*/

/*
STYLES INDEX

I. Global

II. Header

III. Body Content

	A. Primary Column
		1. Header and Text Styles
		2. Form Styles
		3. Broadcast Info
		4. Video Preview
		5. Timeline

	B. Secondary Column
		1. Header and Text Styles
		2. E-commerce
		3. Features Promo
		4. Broadcast Info
		5. Secondary Navigation

IV. Footer

*/

/*
======================================================
I. Global
======================================================
*/

body
{
	text-align: center;
	margin: 0;
	color: #fff;
	font: 12px/12px "Lucida Grande", Verdana, sans-serif;
	background: #111111;
}

a {
	color: #a1a1a1;
	text-decoration: none;
}

a:hover {
	color: #fff;
	text-decoration: underline;
}

img {
	border: 0;
}

#sitewrapper
{
	width: 780px;
	margin: 0 auto;
	text-align: left;
}

#sitewrapper-videopreview
{
	width: 100%;
	margin: 0 auto;
	text-align: left;
	background-color: #cee6fe;
}

#sitewrapper a:link,
#sitewrapper a:visited,
#sitewrapper a:hover,
#sitewrapper a:active,
#sitewrapper-videopreview a:link,
#sitewrapper-videopreview a:visited,
#sitewrapper-videopreview a:hover,
#sitewrapper-videopreview a:active
{
/*	color: #34029a;
	text-decoration: underline;
*/	
}


/*
======================================================
II. Header
======================================================
*/

#header
{
	width: 100%;
}

#header #banner
{
/*	border-bottom: 1px solid #34029a;
*/	background-color: #111;
}


/*
======================================================
III. Body Content
======================================================
*/

#bodycontent
{
	width: 100%;
}

/*
-----------------------------------------------------------------------------------------------------------
A. Primary Column
-----------------------------------------------------------------------------------------------------------
*/

#primarycolumn .homepage
{
	vertical-align: top;
	border-right: 1px solid #636363;
	border-left: 1px solid #636363;
	border-bottom: 1px solid #636363;
	background: #363636 url(../images/bodycontent/bg_maincol.gif) top center repeat-x;
	padding: 12px 10px 20px 10px;
}

#primarycolumn
{
	vertical-align: top;
	border-right: 1px solid #636363;
	border-left: 1px solid #636363;
	border-bottom: 1px solid #636363;
	background: #363636 url(../images/bodycontent/bg_maincol.gif) top center repeat-x;
	padding: 12px 10px 20px 10px;
}

/*
-----------------------------------------------------------------------------------------------------------
A1. Primary Column: Header and Text Styles
-----------------------------------------------------------------------------------------------------------
*/

#primarycolumn h1
{
	font-size: 18px;
	line-height: 20px;
	color: #fff;
	margin: 5px 0 20px 0;
}

#primarycolumn h3
{
	font-size: 14px;
	line-height: 14px;
	color: #fff;
	margin: 20px 0 13px 0;
}

#primarycolumn h4
{
	font-size: 12px;
	line-height: 14px;
	color: #000;
	margin: 25px 0 0 0;
}

#primarycolumn h5
{
	font-size: 10px;
	line-height: 12px;
	color: #000;
	margin: 15px 0 0 0;
}

#primarycolumn p
{
	line-height: 15px;
	margin: 10px 0 0 0;
}

/*
-----------------------------------------------------------------------------------------------------------
A2. Primary Column: Form Styles
-----------------------------------------------------------------------------------------------------------
*/

#primarycolumn form
{
	margin: 20px 0 0 0;
}

#primarycolumn form p
{
	margin: 0 0 3px 0;
}

#primarycolumn form label
{
	font-weight: 900;
}

#primarycolumn form input,
#primarycolumn form textarea
{
	font-family: arial, verdana, sans-serif;
	font-size: 11px;
	vertical-align: middle;
	margin: 3px 0 6px 0;
}

#primarycolumn form select
{
	font-family: arial, verdana, sans-serif;
	font-size: 11px;
	color: #000;
	margin: 3px 0 12px 0;
}

#primarycolumn form input.radiobutton
{
	margin: 0 3px 0 0;
}

#primarycolumn .formrow
{
	margin: 3px 0 3px 0;
}

/*
-----------------------------------------------------------------------------------------------------------
A3. Primary Column: Broadcast Info
-----------------------------------------------------------------------------------------------------------
*/

.frontandcenter {
		margin-top: 10px;
		margin-bottom: 5px;
		border: #fff solid 3px;
}

#primarycolumn #broadcastinfo
{
	border: 1px solid #fff;
	padding: 5px 7px 5px 7px;
}

#primarycolumn #broadcastinfo p
{
	font-size: 12px;
	line-height: 14px;
	margin: 0;
}

/*
-----------------------------------------------------------------------------------------------------------
A4. Primary Column: Video Preview
-----------------------------------------------------------------------------------------------------------
*/

#primarycolumn #videopreview
{
	width: 160px;
/*	border: 1px solid #34029a;
*/	float: left;
/*	background-color: #34029a;
*/	margin: 10px 10px 5px 0;
}

#primarycolumn #videopreview img
{
	border-top: 5px solid #000;
	border-bottom: 5px solid #000;
}

#primarycolumn #videopreview p
{
	font-weight: 900;
	line-height: 11px;
	color: #34029a;
	text-transform: uppercase;
	text-align: center;
	margin: 10px 0 10px 0;
}

#primarycolumn #videopreview a:link,
#primarycolumn #videopreview a:visited,
#primarycolumn #videopreview a:hover,
#primarycolumn #videopreview a:active
{
	color: #fff;
}

/*
-----------------------------------------------------------------------------------------------------------
A5. Primary Column: Timeline
-----------------------------------------------------------------------------------------------------------
*/

#primarycolumn #timeline td
{
	border-top: 1px solid #9cf;
	vertical-align: top;
	padding: 5px 0 0 0;
}

#primarycolumn #timeline p
{
	line-height: 12px;
	margin: 0 0 15px 10px;
}

#primarycolumn #timeline .caption
{
	font-size: 10px;
	color: #666;
	margin: 0 0 20px 20px;
}

#primarycolumn #timeline img
{
	margin: 0 0 0 20px;
}

#primarycolumn #timeline .time
{
	width: 40px;
	font-size: 16px;
	line-height: 17px;
	font-weight: 900;
	color: #000;
	text-align: center;
	vertical-align: top;
	padding: 6px 0 4px 0;
}

/*
-----------------------------------------------------------------------------------------------------------
A6. Primary Column: Custom Styles Written by Caleb Watson
-----------------------------------------------------------------------------------------------------------
*/

#primarycolumn .caption {
	text-align: center;
	margin: 0 auto 10px auto;
	font-size: 9px;
	font-style: italic;
}

#primarycolumn .img_cap_right {
	width: 125px;
	float: right;
	margin: 10px 0 5px 10px;
}

#primarycolumn .img_cap_right p {
	font-size: 9px;
	font-style: italic;
	text-align: center;
}

#primarycolumn .img_cap_right img {
	border: 1px solid #fff;
}

#primarycolumn .img_cap_left {
	width: 125px;
	float: left;
	margin: 10px 10px 5px 0;
}

#primarycolumn .img_cap_left p {
	font-size: 9px;
	font-style: italic;
	text-align: center;
}

#primarycolumn .img_cap_left img {
	border: 1px solid #fff;
}



/*
-----------------------------------------------------------------------------------------------------------
B. Secondary Column
-----------------------------------------------------------------------------------------------------------
*/

#secondarycolumn
{
	width: 220px;
/*	border-left: 1px solid #34029a;
*/	background-color: #111;
	vertical-align: top;
	padding: 10px;
}

/*
-----------------------------------------------------------------------------------------------------------
B1. Secondary Column: Header and Text Styles
-----------------------------------------------------------------------------------------------------------
*/

#secondarycolumn h3
{
	font-size: 14px;
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
	margin: 0 0 10px 0;
}

/*
-----------------------------------------------------------------------------------------------------------
B2. Secondary Column: E-commerce
-----------------------------------------------------------------------------------------------------------
*/

#secondarycolumn #ecommerce
{
	margin: 0 0 50px 0;
}

#secondarycolumn #ecommerce img
{
	float: left;
/*	border: 1px solid #34029a;
*/	margin: 0 9px 0 0;
}

#secondarycolumn #ecommercedescription p
{
	line-height: 12px;
	margin: 0 0 3px 0;
}

/*
-----------------------------------------------------------------------------------------------------------
B3. Secondary Column: Features Promo
-----------------------------------------------------------------------------------------------------------
*/

#secondarycolumn #featurespromo
{
	clear: both;
	border-top: 1px solid #636363;
	padding-top: 10px;
}

#secondarycolumn #featurespromo #programfeaturepromo img,
#secondarycolumn #featurespromo #topicfeaturepromo img
{
	border: 1px solid #fff;
}

#secondarycolumn #featurespromo #programfeaturepromo p,
#secondarycolumn #featurespromo #topicfeaturepromo p
{
	font-size: 13px;
	line-height: 14px;
	font-weight: 900;
	margin: 4px 0 20px 0;
}

/*
-----------------------------------------------------------------------------------------------------------
B4. Secondary Column: Broadcast Info
-----------------------------------------------------------------------------------------------------------
*/

#secondarycolumn #broadcastinfo
{
	margin: 0 0 20px 0;
}

#secondarycolumn #broadcastinfo p
{
	line-height: 13px;
	border: 1px solid #fff;
	padding: 5px 5px 6px 5px;
	margin: 0;
}

/*
-----------------------------------------------------------------------------------------------------------
B5. Secondary Column: Secondary Navigation
-----------------------------------------------------------------------------------------------------------
*/

#secondarynav {
	border-top: 1px solid #636363;
	padding-top: 10px;
}

#secondarycolumn #secondarynav ul
{
	list-style-type: none;
	clear: both;
	padding: 0;
	margin: 0 0 10px 0;
}

#secondarycolumn #secondarynav ul li
{
	font-size: 12px;
	line-height: 19px;
}


/*
======================================================
IV. Footer
======================================================
*/

#footer
{
	width: 100%;
/*	border-top: 1px solid #34029a;
*/	background-color: #111;
	font-size: 9px;
	padding-top: 40px;
}

#footer .funders,
#footer .producers
{
	vertical-align: top;
	padding: 5px 10px 5px 10px;
}

#footer .funders img,
#footer .producers img
{
/*	border: 1px solid #34029a;
*/	margin: 5px 0 0 0;
}

#footer .funders p,
#footer .producers p,
#footer #copyright p
{
	margin: 0;
}

#footer #copyright
{
	line-height: 15px;
	vertical-align: top;
	padding: 7px 0 5px 10px;
}