body {
min-width:1024px;
min-height:768px;
background:#000;
font-family:'Open Sans', Arial, sans-serif;
}

body.dimmed header,body.dimmed #bannerContainer,body.dimmed #videoContainer,body.dimmed #footerContainer {
opacity:0.4;
filter:alpha(opacity=40);
}

body.dimmed #wallpaper {
opacity:0.0;
filter:alpha(opacity=00);
}

body.dimmed #channelContainer {
background:#222;
}

body.dimmed #controlsContainer #controls {
background:#1A1A1A;
}

body.dimmed #controlsContainer #controls .button {
background:#242424;
color:#777;
}

body.dimmed #controlsContainer #controls .altButton {
background:#242424;
color:#444;
}

#channel-container {
position:relative;
min-height:324px;
padding-left:0;
padding-right:460px;
background:#222;
margin:0 20px;
}

#channel-container #stream-container {
position:absolute;
top:0;
right:460px;
bottom:0;
left:0;
}

#stream {
height:100%;
margin:10px 0 10px 10px;
}

#channel-container #chat-container {
position:absolute;
top:10px;
right:10px;
bottom:10px;
width:440px;
}

#chat {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background:#2A2A2A;
}

#chat.twitch .twitch {
display:block;
}
#channel-container.fullscreen{
	position: fixed;
	margin: 10px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
}
#channel-container.alt {
position:relative;
min-height:324px;
padding-left:460px;
padding-right:0;
background:#222;
margin:0 20px;
}

#channel-container.alt #stream-container {
position:absolute;
top:0;
right:10px;
bottom:0;
left:450px;
}

#channel-container.alt #chat-container {
position:absolute;
top:10px;
left:10px;
bottom:10px;
width:440px;
}

#channel-container.hide #stream-container {
position:absolute;
top:0;
right:10px;
bottom:0;
left:0;
}

#banner-container {
position:relative;
width:1024px;
height:104px;
margin:0 auto;
padding:2px 0;
}

#banner-container .banner {
width:960px;
height:100px;
position:relative;
margin:0 auto;
border-width: 2px;
border-style: solid;
border-color: #222
}

#banner-container .background {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:-1;
}

#controls .bar {
position:relative;
right:0;
font-size:12px;
text-decoration:none;
}

.span-1 {
margin-left:10px;
}

.alt-button {
float:left;
border-right:1px solid #1e1e1e;
font-size:12px;
font-weight:700;
color:#777;
text-transform:uppercase;
padding:11px 10px 10px;
}

#stream-container {
position:relative;
height:635px;
}

#team-container{
	min-width:1024px;
	margin: 0 auto;
}

#controlsContainer {
min-width:1024px;
margin:0 auto;
}

#controls {
background:#2A2A2A;
margin:0 20px;
padding:5px 0;
}

.bar {
height:38px;
background-color:#343434;
overflow:hidden;
}

.bar .button {
color:#eee;
cursor:pointer;
display:block;
position:relative;
float:left;
font-weight:700;
text-transform:uppercase;
border-left:1px solid #1e1e1e;
border-right:1px solid #444;
border-bottom:1px solid #1e1e1e;
background:#343434;
filter:none;
-webkit-transition:all 250ms ease;
-moz-transition:all 250ms ease;
-o-transition:all 250ms ease;
transition:all 250ms ease;
text-decoration:none;
height:100%;
padding:10px 14px;
}

.bar .button:hover {
color:#fff;
background-color:#09F;
}

.bar .button.active{
background-color:#09F;
}
.bar .button.inactive{
background-color:#444;
}

.bar .button.alt:hover {
color:#fff;
background-color:#FF6468;
}

#player-controls {
float:left;
margin-left:10px;
}

.textfill {
text-align:center;
overflow:hidden;
}

#video-container {
position:relative;
width:1024px;
background:#222;
margin:20px auto;
}

#video-container .tag {
position:absolute;
top:10px;
right:30px;
font-size:18px;
font-weight:800;
text-transform:uppercase;
letter-spacing:5px;
color:#666;
}

#video-container .channels {
height:40px;
width:100%;
}

#video-container .channels li {
float:left;
height:24px;
width:80px;
text-align:center;
text-transform:uppercase;
-webkit-transition:all 250ms ease;
-moz-transition:all 250ms ease;
-o-transition:all 250ms ease;
transition:all 250ms ease;
color:#FFF;
list-style:none;
background:#2A2A2A;
cursor:pointer;
padding:8px 0;
}

#video-container .channels li.active {
background-color:#09F;
}

#video-container .channels li:hover {
background:#FFF;
color:#000;
}

#video-container #video-list-outter-frame {
overflow:hidden;
height:670px;
padding:20px 0;
}

#video-container .video-list {
padding:0 20px 20px;
}

#video-container .video-list li {
display:inline-block;
position:relative;
height:300px;
width:290px;
background:#2a2a2a;
overflow:hidden;
margin:5px 7px;
padding:10px;
}

#video-container .video-list li:hover {
background:#3a3a3a;
}

#video-container .play {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999;
}

#video-container .play a {
display:block;
width:100%;
height:100%;
}

#video-container .video-list li .frame {
height:180px;
width:290px;
overflow:hidden;
}

#video-container .video-list li .frame img {
margin-top:-30px;
margin-left:-15px;
}

#video-container .video-list li .title {
margin-top:10px;
color:#6F9;
font-weight:600;
font-size:14px;
height:20px;
overflow:hidden;
}

#video-container .video-list li .summary {
margin-top:10px;
height:60px;
text-align:justify;
color:#DDD;
font-weight:600;
font-size:12px;
}

#video-container .video-list li .date {
position:absolute;
bottom:10px;
right:10px;
color:#FFF;
font-size:10px;
text-transform:uppercase;
}

html,body,#chat .twitch,#chat .chatango {
height:100%;
width:100%;
}

#chat .twitch,#chat.twitch .chatango,#channel-container.hide #chat-container {
display:none;
}

#chat-controls,#other-controls {
float:right;
margin-right:10px;
}

	#team-container{
		height: 50px;
	}
	#team-members{
		background: #2A2A2A;
		margin: 0 20px;
		height: 50px;
		padding: 5px;
	}
	#team-members .online, #team-members .offline, #team-members ul li{
		height: 40px;
	}
	#team-members h1{
		float: left;
		top: 10px;
		height: 50px;
		width: 80px;
		margin: 2px 0 0 0;
		font-size: 12px;
		text-align: center;
		text-transform: uppercase;
		color: #666;
	}
	#team-members span.status{
		float: left;
		width: 60px;
		height: 30px;
		padding-top: 10px;
		margin-right: 5px;
		background: #343434;
		text-align: center;
		color: #AAA;
		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase;
	}
	#team-members .online, #team-members .offline{
		list-style: none;
	}
	#team-members ul, #team-members ul li{
		float: left;
	}
	#team-members ul li{
		position: relative;
		background: #343434;
		margin-right: 5px;
		overflow: hidden;
	}
	#team-members .online li{
		width: 125px;
		-webkit-transition:all 250ms ease;
		-moz-transition:all 250ms ease;
		-o-transition:all 250ms ease;
		transition:all 250ms ease;
	}
	#team-members .online li:hover{
		background: #555;
	}
	#team-members ul li a{
		display: block;
		width: 100%;
		height: 100%;
	}
	#team-members ul li img{
		height: 30px;
		width: 30px;
		margin: 4px;
	}
	#team-members .online li img{
		border: 1px solid #6F9;
	}
	#team-members ul li .broadcaster{
		font-size: 10px;
		position: absolute;
		top: 2px;
		left: 40px;
	}
	#team-members .online li .broadcaster{
		color: #6F9;
		text-transform: uppercase;
	}
	#team-members .online li .game{
		position: absolute;
		left: 40px;
		bottom: 2px;
		height: 22px;
		
		font-size: 10px;
		line-height:10px;
		overflow: hidden;
		color: #FFF;
	}
	#team-members .offline li{
		width: 40px;
	}
	#team-members .offline li:hover{
		width: 125px;
	}
	#team-members .offline li img{
		border: 1px solid #B8B8B8;
		opacity: 0.5;
		filter: alpha(opacity=50); /* For IE8 and earlier */
	}
	#team-members .offline li .broadcaster{
		position: absolute;
		top: 2px;
		left: 40px;
		color: #B8B8B8;
		text-transform: uppercase;
	}
	#team-members .offline li .offline{
		position: absolute;
		left: 40px;
		bottom: 2px;
		height: 22px;
		
		font-size: 10px;
		overflow: hidden;
		color: #B8B8B8;
	}
	

/*
	EASTER EGG STYLING
*/

#konami{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index:-8;
	overflow: hidden;
}
#kappa{
	position: absolute;
	bottom: 5px;
	right: -95px;
	background: url('http://vinesauce.com/assets/imgs/konami/kappa.png');
	height: 130px;
	width: 96px;
}

/*
	HEADER STYLING
*/

header {
	position:relative;
	margin:0 auto;
	box-shadow:0 2px 3px rgba(0,0,0,0.35),0 1px 0 rgba(0,0,0,0.2);
	-moz-box-shadow:0 2px 3px rgba(0,0,0,0.35),0 1px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.35),0 1px 0 rgba(0,0,0,0.2);
	z-index:1;
	background:url(../imgs/headerBg.png) #333 repeat-x;
}

header .top-bar {
	width:1024px;
	height:70px;
	margin:0 auto;
	position:relative;
}

header .image-logo {
	position:absolute;
	left:0;
	top:8px;
	width:54px;
	height:54px;
	background:url(../imgs/vineshroom-larger.png);
	z-index:0;
}

header .text-logo {
	position:absolute;
	left:50px;
	top:10px;
	width:350px;
	height:51px;
	background:url(../imgs/vinesauce-logo.png);
	z-index:1;
	overflow:hidden;
}

header .image-logo a, header .text-logo a{
	display: block;
	width: 100%;
	height: 100%;
}

header .twitter {
	position:absolute;
	top:10px;
	right:5px;
	height:24px;
	width:600px;
	text-align:right;
	font-size:14px;
	font-weight:600;
	color:#999;
}

header .twitter span.left {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	background:url(../imgs/twitterBorder.png);
	width:75px;
}

header .twitter span.right {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	background:url(../imgs/twitterBorder.png);
	background-position:-75px 0;
	width:75px;
}
header .twitter span.left.active{
	background-position: 0 -26px;
	cursor: pointer;
}
header .twitter span.left.active:hover{
	background-position: 0 -52px;
	cursor: pointer;
}

header .twitter span.right.active{
	background-position: -75px -26px;
	cursor: pointer;
}
header .twitter span.right.active:hover{
	background-position: -75px -52px;
	cursor: pointer;
}

header .twitter-text-frame {
	position:absolute;
	top:0;
	right:74px;
	bottom:0;
	left:74px;
	height:24px;
	z-index:2;
	overflow:hidden;
}

header .twitter-background {
	position:absolute;
	top:0;
	right:74px;
	bottom:0;
	left:74px;
	background:#333;
	z-index:1;
}

header .twitter-text li {
	position:relative;
	padding:2px 0;
	height:20px;
}

header .twitter-text{
	list-style: none;
	font-family: 'Open Sans', Arial, sans-serif;
}

header .twitter-text .first-child span{
	color: #DDD;
}
header .twitter-text li{
	line-height: 24px;
}
header .twitter-text li .tweet,header .twitter-text li .time {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	list-style:none;
	text-align:center;
	white-space:nowrap;
}

header .twitter-text li .time {
	display:none;
}

header .main-navigation {
	position:absolute;
	right:0;
	bottom:0;
	list-style:none;
	height: 34px;
	margin:0;
	padding:0;
	text-align:center;
}

header .main-navigation li {
	display:block;
	position:relative;
	float:left;
	list-style:none;
	margin:0;
	padding:3px 5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	font-weight:200;
	text-transform:uppercase;
	cursor:pointer;
	height: 28px;
	line-height: 28px;
}

header .main-navigation li a {
	text-decoration:none;
	color:#FFF;
}

header .main-navigation li.hover span {
	background:url(../imgs/spanarrow.png);
	bottom:-6px;
	height:6px;
	left:45%;
	position:absolute;
	width:11px;
	z-index:4;
}

header .bottom-bar {
	width:1024px;
	height:30px;
	margin:0 auto;
	position:relative;
	background:#0C3;
	overflow:hidden;
}

header .bottom-bar .container {
	width:100%;
}

header .bottom-bar ul {
	width:100%;
	height:30px;
	background:#333;
	overflow:hidden;
}

header .bottom-bar ul li {
	display:block;
	float:right;
	list-style:none;
	padding:2px 20px 5px 0;
	text-align:center;
	line-height: 25px;
}

header .bottom-bar ul li a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:400;
	text-transform:uppercase;
	text-decoration:none;
	color:#FFFFFF;
	text-shadow:2px 2px 3px #111111;
}

header .bottom-bar ul li a:hover {
	color:#CCC;
}

header .main-navigation li.hover,header .main-navigation li:hover,header .main-navigation li a:hover {
	color:#6F9;
}

/*
	FOOTER STYLING
*/


#footer-container{
	height: 100px;
	background: url('../imgs/footerBg.png')#2A2A2A;
}

footer{
	position: relative;
	margin: 0px auto;
	width: 1024px;
	height: 70px;
	padding-top: 30px;
}
#signature{
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0 auto;
	padding: 10px 0;
	width: 300px;
}
#signature span{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #CCC;
	font-weight: 400;
	float: left;
	width: 50px;
}
#signature a{
	display: block;
}

.signature-image-container{
	height: 32px;
	overflow: hidden;
}
.signature-image:hover{
	margin-top:-32px;
}

#bg-changer{
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0px auto;
	width: 312px;
	height: 50px;
}
.bg-text{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #CCC;
}
#bg-changer ul{
	width: 190px;
	height: 20px;
}
#bg-changer ul li{
	list-style: none;
	float: left;
	width: 16px;
	height: 16px;
	margin: 10px 10px 10px 0;
	background-image: url('../imgs/bgBlock.png');
	background-position: 0 -16px;;
}
#bg-changer ul li:hover{
	background-image: url('../imgs/bgBlock.png');
	background-position: 0 0;
}
#bg-changer .active{background-position: 0 0;}
#bg-changer .active:hover{background-position: 0 0;}

/*
	WALLPAPER STYLING
*/

#wallpaper {
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:-9;
}
#wallpaper-background {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
}
#wallpaper-foreground {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
background:url(../imgs/wallpaperStripe.png);
background-repeat:repeat;
opacity:0.05;
filter:alpha(opacity=05);
}
.bg-1{
background-size:100% 100%;
background-repeat:repeat-x;
background: url('../imgs/backgrounds/new/background1.png') repeat-x;	
background-position: center top;
}
.bg-2{
background-size:100% 100%;
background: url('../imgs/backgrounds/new/background2.png') repeat-x;
background-position: center top;
}