/*
=====

	CSS for the PBS KIDS Media Player
	Last Updated: April 30, 2007 by Malcolm Jones

	Classes included in the default templates, but not defined here are:

	.pbsmediaplayertitle
	.pbsmediaplayerdescription

	If you have any questions please get in touch with your PBS KIDS editorial contact.

=====
*/


/* CONTROLS THE DISPLAY WIDTH OF THE PLAYER CONTAINER AND THE HELP INFORMATION CONTAINER*/


.pbsmediaplayercontainer,
.pbsmediaplayerhelp
{
	width: 320px;
}



/*
=====
	STYLES USED IN THE PLAYER AREA OF THE PBS KIDS MEDIA PLAYER
=====
*/

/* DEFINES THE GLOBAL CONTAINER FOR THE PBS KIDS MEDIA PLAYER  */

.pbsmediaplayercontainer
{
	margin: 0 auto;
	text-align: center;
	padding: 0;
	font: 11px arial, sans-serif;
	color: #000;
}

/* DEFINES THE MEDIA PLAYER AREA ITSELF */

.pbsmediaplayer
{
	text-align: center;
	margin: 0 auto 5px auto;
}

/* DEFINES THE HELP LINK LAYOUT IN THE PLAYER AREA. To add a graphical button, please create a custom template following the guidelines at http://pbs.org/.techdocs/kids_media_player */

.pbsmediaplayerhelpbutton a:link,
.pbsmediaplayerhelpbutton a:visited,
.pbsmediaplayerhelpbutton a:hover,
.pbsmediaplayerhelpbutton a:active
{
	color: #c975c5;
}

.pbsmediaplayerhelpbutton a:link,
.pbsmediaplayerhelpbutton a:visited,
.pbsmediaplayerhelpbutton a:active
{
	text-decoration: underline;
}

.pbsmediaplayerhelpbutton a:hover
{
	text-decoration: none;
}

.pbsmediaplayerhelpbutton#videohelp /* Used in the default Video template */
{
	text-align: right;
}

.pbsmediaplayerhelpbutton#audiohelp /* Used in the default Audio template */
{
	text-align: center;
	margin: 0 auto;
}


/*
=====
	STYLES USED IN THE HELP AREA OF THE PBS KIDS MEDIA PLAYER
=====
*/

/* DEFINES THE GENERAL LOOK OF THE HELP AREA */

.pbsmediaplayerhelp
{
	color: #c975c5;
	margin: 0 auto;
	padding: 10px;
	font: 12px arial, sans-serif;
	text-align: center;
}

.pbsmediaplayerhelp p
{
	margin: 0;
	padding: 0;
}

.pbsmediaplayerhelp h1
{
	font-size: 18px;
	font-weight: 900;
	margin: 0 0 5px 0;
	padding: 0;
}

.pbsmediaplayerhelp a:link,
.pbsmediaplayerhelp a:visited,
.pbsmediaplayerhelp a:hover,
.pbsmediaplayerhelp a:active
{
	color: #c975c5;
}

.pbsmediaplayerhelp a:hover
{
	text-decoration: none;
}

.pbsmediaplayerhelp .pbsmediaplayerhelpinstructions
{
	font-weight: bold;
}

/* DEFINES THE MEDIA SELECTION APPERANCE IN THE HELP AREA. */

.pbsmediaplayerhelp .pbsmediaplayernav
{
	margin: 0 auto;
	text-align: center;
	font-size: 16px;
	margin-bottom: 30px;
}

.pbsmediaplayerhelp .pbsmediaplayernavheader h2 /* DO NOT REMOVE. This eliminates some extra text from the Help Text Display */
{
	display: none !important;
}

.pbsmediaplayerhelp .pbsmediaplayernav table
{
	width: 150px;
	font-size: 16px;
	line-height: 16px;
	color: #c975c5;
	margin: 0 auto;
	text-align: center;
}

.pbsmediaplayerhelp .pbsmediaplayernav td
{
	padding: 5px;
	text-align: center;
}

.pbsmediaplayerhelp .pbsmediaplayernav td.type
{
	text-align: center;
	margin: 0 auto;
}

.pbsmediaplayerhelp .pbsmediaplayernav td.size
{
	padding: 0 5px 0 0;
	text-align: right;
}

/* DEFINES THE "PLAY" BUTTONS IN THE HELP AREA */

.pbsmediaplayerhelp .pbsmediaplayernav td.size a:link,
.pbsmediaplayerhelp .pbsmediaplayernav td.size a:visited,
.pbsmediaplayerhelp .pbsmediaplayernav td.size a:hover,
.pbsmediaplayerhelp .pbsmediaplayernav td.size a:active
{
	display: block;
	font-weight: 900;
	padding: 2px 4px;
	text-decoration: none;
}

.pbsmediaplayerhelp .pbsmediaplayernav td.size a:link,
.pbsmediaplayerhelp .pbsmediaplayernav td.size a:visited,
.pbsmediaplayerhelp .pbsmediaplayernav td.size a:active
{
	color: #000;
	background-color: #ead407;	
}

.pbsmediaplayerhelp .pbsmediaplayernav td.size a:hover
{
	color: #fff;
	background-color: #c975c5;
}

/* DEFINES THE TABLE CONTAINING LINKS TO DOWNLOAD NEEDED PLUG-INS IN THE HELP AREA */

.pbsmediaplayerhelp .downloadplayers
{
	margin: 3px auto 10px auto;
	font-size: 12px;
	text-align: left;
}

.pbsmediaplayerhelp .downloadplayers td
{
	padding: 3px 8px 0 8px;
	font-size: 12px;
	text-align: center;
	vertical-align: top;
}