/*
------------------------------------------------------
PBS.org Video Aggregation Module CSS
------------------------------------------------------
*/

/*
STYLES INDEX

I. Global
II. Layout
III. Content
IV. CSS Hacks

*/

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

/* Control global styles of the module that include text color, font, font size and line-height. */
#video-agg
{
	color: #000;
	font-family: verdana, arial, sans-serif;
	font-size: 10px;
	line-height: 12px;
}

/* Control global styles of links. */
#video-agg a:link,
#video-agg a:visited,
#video-agg a:hover,
#video-agg a:active
{
	color: #000;
}

/* Control global styles of images. */
#video-agg img
{
	border: 0;
}


/*
======================================================
II. Layout
======================================================
*/

/* Control the width of the 1 column layout option. */
#video-agg .video-1col
{
	width: 300px;
}

/* Control the width of the 2 column layout option. */
#video-agg .video-2col
{
	width: 600px;
	padding:20px;
	background-color:#B3CCE3;
}

/* Control the width of the 3 column layout option. */
#video-agg .video-3col
{
	width: 750px;
}

/* Control how the definition list (dl) features inside of the 1 column layout display. The CSS attribute of "display: block;" displays the definition lists on top of each other. */
#video-agg .video-1col dl
{
	display: block;
}

/* Control how the definition list (dl) features inside of the 2 and 3 column layout display. The CSS attribute of "float: left;" displays the definition lists next to each other, left to right. */
#video-agg .video-2col dl,
#video-agg .video-3col dl
{
	float: left;
}


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

/* Control the global styles of the definition list (dl) features. */


#video-agg dl
{
	width: 285px;
	margin: 0 10px 0 0;
	padding: 0 0 15px 0;
}

/* Control the global styles of the definition term. */
#video-agg dl dt
{
	margin: 0 0 .25em 0;
}

/* Control the global styles of links inside of the definition term. */
#video-agg dl dt a
{
	font-weight: 900;
}

/* Control the style of the feature image inside of the definition term. */
#video-agg dl dt .video-image
{
	float: left;
	margin: 0 5px 0 0;
}

/* Control the style of links around the feature image inside of the definition term. This is where you can change the border color around the feature image.*/
#video-agg dl dt .video-image a:link,
#video-agg dl dt .video-image a:visited,
#video-agg dl dt .video-image a:active
{
	float: left;
	line-height: 0;
	border: 1px solid #666;
}

/* Control the style of links around the feature image inside of the definition term. This is where you can change the hover border color around the feature image.*/
#video-agg dl dt .video-image a:hover
{
	float: left;
	line-height: 0;
	border: 1px solid #000;
}	

/* Control the global styles of the definition description. */
#video-agg dl dd
{
	margin: 0 0 0 59px;
}


/*
======================================================
IV. CSS Hacks
======================================================
*/

/* clearing floated block elements -
fixes problem in Firefox where floated element does not define height of the container box */
#video-agg dl:after,
#video-agg .video-2col:after,
#video-agg .video-3col:after
{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

/* clearing floated block elements -
fixes problem in IE/Win 5.0, 5.5, and 6 */
* html #video-agg dl
{
	height: 1%;
}