/*----------------------------------------------------------------------------------------------------------------------------------------------------
youtubeWall.css

	Description:	Styles for YouTube Video Wall.
	Project:		YouTube Video Wall
	Version:		1.0
	Last change:	2008-11-15
	Author:			Dirk Sidney Jansen [http://sidisinsane.com]
-----------------------------------------------------------------------------------------------------------------------------------------------------
TOC (Table of contents)

	I.		General settings
	II.		Video Wall
	III.	Microformats
-----------------------------------------------------------------------------------------------------------------------------------------------------			
STYLEGUIDE
	
	Navi:
	Active borders					#FFF (highest contrast)
	Hover borders					#DF2222 (color)
	Inactive								opacity: 0.6 (medium contrast)
	
	Thumbs:
	Active & hover borders		#FFF (highest contrast)
	visited								opacity: 0.25 (low contrast)
----------------------------------------------------------------------------------------------------------------------------------------------------*/

/*
	I.		General settings
------------------------------------------------------------------------------------------------------*/
body {
	background: #000;
}
h3 {
	text-transform: uppercase; 
	line-height: 1em;
	margin-top: 1em;
}

/*
	II.		Video Wall
------------------------------------------------------------------------------------------------------*/
ul#video-wall {
	float: left;	
	width: 973px;
	padding: 3px;
	margin: 0;
	list-style-type: none;
	background: #000;
}
	li.vevent,
	li.navi {
		position: relative; /* make parent */
		float: left;
		width: 136px;
		height: 103px;
		margin: 0 0 3px 3px;
	}
		/* Link behaviour */
		li.vevent a,
		li.navi a,
		li.navi a.active:hover {
			display: block;
			width: 130px;
			height: 97px;
		}
		li.vevent a {
			border: 3px solid #333;
		}
		li.navi a {
			opacity: 0.60;
			-moz-opacity: 0.60;
			filter: alpha(opacity=60);
			z-index: 100;
			color: #FFF;
			border: 3px solid #666;
		}
		li.vevent a:visited {
			opacity: 0.25;
			-moz-opacity: 0.25;
			filter: alpha(opacity=25);
		}
		li.vevent a:hover,
		li.vevent a.active,
		li.vevent a.active:visited,
		li.navi a:hover,
		li.navi a.active,
		li.navi a.active:visited {
			position: absolute;
			opacity: 1;
			-moz-opacity: 1;
			filter: alpha(opacity=100);
			border: 3px solid #FFF;
		}
		li.vevent a:hover,
		li.vevent a.active,
		li.vevent a.active:visited,
		li.navi a.active,
		li.navi a.active:visited,
		li.navi a.active:hover {
			border: 3px solid #FFF;
		}
		li.navi a:hover {
			height: 203px;
			color: #000;
			background: #FFF;
			border: 3px solid #DF2222;
		}
		li.navi a.active:hover {
			color: #FFF;
			background: none;
			cursor: default;
		}
			li.navi a span {
				display: block;
				margin-top: 20px;
				padding: 5px;
				text-transform: lowercase;
				font-variant: small-caps;
				font-weight: 700;
			}
			li.navi a small {
				display: none;
				visibility: hidden;
			}
			li.navi a:hover small,
			li.navi a.active small,
			li.navi a.active:hover small {
				display: block;
				visibility: visible;
			}
			li.navi a:hover small {
				color: #000;
			}
			li.navi a.active small,
			li.navi a.active:hover small {
				color: #FFF;
			}

	/* Video Box */	
	li#video-box {
		float: right;
		height: 415px;
		margin-bottom: 3px;
		background: #E4E4E4;
		color: #000;
		border:3px solid #FFF;
		text-align: center;
	}
		li#video-box small {
			width: 398px;
			font-size: 11px;
		}
				
	/* Footer */
	li#footer {
		position: relative;
		float: left;
		display: block;
		width: 537px;
		height: 87px;
		padding: 5px;
		margin: 0 0 3px 3px;
		color: #FFF;
		border: 3px solid #666;
	}
		li#footer p {
			font-size: 11px;
			margin-bottom: 1em;
		}
		li#footer p a {
			font-weight: 700;
		}
		li#footer p a:hover {
			color: #DF2222;
		}
			/* Social-Bookmarking */
			ul#sb {
				position: absolute;
				left: 5px;
				bottom: 5px;
				heigth: 16px;
				padding: 0;
				margin: 10px 0 0 0;
				list-style-type: none;
			}
				/*ul#sb li {
					float: left;
					margin-left: 10px;
				}
					ul#sb a {
						display: block;
						width: 16px;
						height: 16px;
						text-indent: -9999em;
					}
					ul#sb a:hover {
						opacity: 0.60;
						-moz-opacity: 0.60;
						filter: alpha(opacity=60);
					}
					li#delicious a {
						background: url(../img/icons/delicious.png);
					}
					li#digg a {
						background: url(../img/icons/digg.png);
					}
					li#stumbleupon a {
						background: url(../img/icons/stumbleupon.png);
					}*/
		
/*
	III.	Microformats
------------------------------------------------------------------------------------------------------*/	
/* Hide hCalendar data */
.dtstart,.dtend,.summary {
	display: none;
	visibility: hidden;
}