/* BEGIN: General Styles */
html,
body {
	width: 100%;
	height: 101%;
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	background: transparent url(../images/bg.jpg) repeat left top;
}

html.redworldrecord { background-color: #C21F3C; }
body.redworldrecord { background-color: #C21F3C; }

div#site_container,
div#header_wrapper,
div#footer_wrapper { width: 100%; }

a {
	color: #2E2E2E;
	text-decoration: none;
	outline: none; /* Firefox dotted links */
}

a:hover { text-decoration: underline; }

a:active { outline: none; }

a img { border: none; }

::-webkit-input-placeholder { color: #A9A9A9 !important; }
:-moz-placeholder { color: #A9A9A9 !important; }

/*http://css-tricks.com/snippets/css/clear-fix/*/

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

div#header,
div#deck,
div#footer {
	position: relative;
	padding: 0 25px;
}
div#site_container { position: relative; }
div#site_container ul {
	padding-left: 0;
	margin: 0;
	list-style: none;
}

div#site_container a.button {
	display: block;
	text-indent: -999em;
}
/* END: General Styles */

/* BEGIN: Header */
div#header_wrapper {
	position: fixed;
	top: 0;
	left: 0;
	padding: 10px 0 0 0;
	height: 46px; /*56-10*/
	background-image: url(../images/top-nav.png);
	background-size: 100% 100%;
	/*background-repeat: no-repeat;*/
	z-index: 50;
	min-width: 420px;
}

	/* BEGIN: Logo */
	div.logo {
		float: left;
		padding-top: 7px;
		width: 300px;
		height: 21px;
	}
	
	div#header h1,
	div#header h1 a {
		margin: 0;
		padding: 0;
		width: 174px;
		height: 21px;
		text-indent: -999em;
	}
	
	div#header h1 { float: left; }
	
	div#header h1 a {
		display: block;
		background: transparent url(../images/logo.png) no-repeat left top;
	}
	
	div#header h2 {
		float: left;
		margin: 0 18px;
		color: #00b386;
		font-weight: normal;
		font-size: 12px;
		text-transform: uppercase;
		font-family: 'Open Sans', sans-serif;
		line-height: 21px;
	}
	/* END: Logo */
	
	/* BEGIN: Search */
	div#header div#search {
		float: right;
		padding: 0 10px;
		-moz-box-shadow:    inset 0 0 10px #000000;
		-webkit-box-shadow: inset 0 0 10px #000000;
		box-shadow:         inset 0 0 10px #000000;
		-moz-border-radius: 6px;
		border-radius: 6px;
	}
	
	div#header div#search form {
		position: relative;
		height: 38px;
	}
	
	div#header div#search form textarea:focus,
	div#header div#search form input:focus { outline: 0; }
	
	/*div#header div#search form .tag {*/
	div#header .tag {
		padding: 2px 12px 2px 12px;
		color: #aaa;
		font-weight: 400;
		font-size: 21px;
		background-color: #333333;
		border-radius: 8px;
		cursor: not-allowed;
		margin-right: 10px;
		float: right;
	}
	
	div#header .tag:hover { text-decoration: none; }
	
	div#header div#search form input#search_text {
		width: 225px;
		height: 38px;
		padding: 0;
		padding-left: 5px;
		margin: 0;
		color: #ccc;
		font-size: 21px;
		border: none;
		background: transparent;
		text-align: right;
		margin-left: 56px;
		border-left: 2px inset;
		border-color: #000;
		-moz-border-left-colors: #000;
	}
	div#header div#search form input#search_text.hasTxt { text-align: left; }
	
	div#header input[type="search"] {
		-webkit-appearance: none;
		font-size: 21px;
		color: #ccc;
	}
	
	div#header input[type="submit"] { display: none; }
	
	div#header #handle_search,
	div#header #hash_search {
		position: absolute;
		width: 18px;
		height: 14px;
		top: 13px;
	}
	
	div#header #handle_search.active,
	div#header #handle_search:hover,
	div#header #hash_search.active,
	div#header #hash_search:hover {
		background-position: left bottom;
	}
	
	div#header #handle_search {
		left: 0px;
		background:transparent url(../images/handler_search.png) no-repeat left top;
	}
	
	div#header #hash_search {
		background:transparent url(../images/hash_search.png) no-repeat left top;
		width: 14px;
		left: 30px;
	}
	
	div#header div#search form input[type=submit]:hover { background-position: left bottom; }
	/* END: Search */
/* END: Header */

/* BEGIN: Leaderboard */
div.ad_space {
	display: none;
	padding: 28px 0;
	background-color: #ebebeb;
}
div.ad_space.active { display: block; }

.ad_space ins { margin: 0 auto; }
.vineviewer-responsive-leaderboard { width: 728px; height: 90px; }

@media(max-width: 900px) {
	.ad_space ins { margin-left: -50px; }
}

@media(max-width: 700px) {
	.vineviewer-responsive-leaderboard { width: 234px; height: 60px; }
}


#ad_container { display: none; }

#videos .ad_space { clear: left; }


/* END: Leaderboard */


/* BEGIN: Deck */
div#deck_wrapper {
	margin-top: 56px; /* TEMP */
	width: 100%;
	height: 98px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	text-align: left;
}
div#deck {
	margin-top: -100px;
	opacity: 0;
	filter: alpha(opacity=0);
	position: fixed;
    top: 56px;
    z-index: 48;
    width: 100%;
    padding: 0;
}
@media only screen and (max-device-width: 356px) {
	body.mobile div#deck_wrapper {
		margin-top: 45px;
	}
	body.mobile div#deck {
		top: 45px;
	}
}
div#deck.done {
	opacity: 1;
	filter: alpha(opacity=100);
}
div#deck.hide {
	display: none;
}
div#deck .bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0.65;
	filter: alpha(opacity=65);
	z-index: -1;
}
div#deck a.close {
	position: absolute;
	right: 15px;
	top: 15px;
	font-size: 40px;
}
div#deck a.close:hover {
	text-decoration: none;
}
div#deck span {
	display: none;
    padding: 45px 0 0 15px;
    vertical-align: top;
    color: #333;
    font-weight: 800;
}
@media only screen and (min-width: 600px) {
div#deck span { display: inline-block; }
}
div#deck h2 {
	margin: 0;
	padding: 0;
	color: #333;
	font-weight: 400;
	font-size: 28px;
	text-transform: uppercase;
	line-height: 86px;
}

div#deck a#vw {
	position: absolute;
	right: 0;
	top: 16px;
	display: block;
	width: 142px;
	height: 47px;
	text-indent: -999em;
	background: transparent url(../images/new/vw-bg.png) no-repeat left top;
}
/* END: Deck */

/* BEGIN: Body */
div#body {
	padding: 0 0 59px;
	/*margin-top: 98px;*/
	margin-top: 56px;
}

iframe:not([seamless]) {
	border: 0 inset; /* UNDO INHERIT STYLE */
	border-image: initial;
}

div#videos {
	/*float: left;*/
	margin: 0 auto;
	min-width: 312px;
}

#videos div.video {
	float: left;
	/*margin: 5px;*/
	margin: 10px 5px 10px;
	width: 300px;
	height: 341px;
	border: 1px solid #cfcfcf;
	background: #FFF url(../images/loading.gif) no-repeat 50% 50%;
	/*overflow: hidden;*/ /* causing video issues */
	position: relative;
}
#videos div.video a:hover {
	text-decoration: none;
	color: #ff9201;
}

#videos div.video .mute_btn {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 40px;
	height: 40px;
	background: transparent url(../images/audio.png) no-repeat top left;
	overflow: hidden;
}

#videos div.video .mute_btn.on {
	background-position: bottom left;
}

video_container#videos div.video .video_container { height: 300px; }

#video_info_template,
#overlay_template { display: none; }

	#videos ul.video_info {
		position: relative;
		/*margin: 10px 0 0 10px;*/
		padding-left: 10px;
		width: 290px;
		/*height: 26px;*/
		height: 36px;
		list-style: none;
		overflow: hidden;
		background-color: #fff;
		display: none;
		z-index: 5;
	}

	#videos ul.video_info li {
		font-size: 12px;
		font-family: 'Open Sans', sans-serif;
	}

	#videos ul.video_info li.user,
	#videos ul.video_info li.dts { margin-top: 10px; }
	#videos ul.video_info li.user { float: left; }
	#videos ul.video_info li.dts {
		float: right;
		/*margin-right: 25px;*/
		margin-right: 33px;
	}
	
	#videos ul.video_info li.dts .timeago {
		letter-spacing: -2px;
		padding: 2px;
	}

	#videos ul.video_info li a {
		font-size: 12px;
		font-family: 'Open Sans', sans-serif;
		color: #aaa;
	}
		
		/* BEGIN: Overlay */
		#videos div.overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 300px;
			height: 340px;
			overflow: hidden;
			display: none;
		}
		/* END: Overlay */
		
		/* BEGIN: Video Nav */
		#videos ul.video_info li.video-nav {
			/*display: none;*/
			position: absolute;
			left: 269px;
			padding-left: 14px;
			top: 0px;
			width: 143px;
			height: 36px;
			background: #fff url(../images/vine-nav/drawer-gradient.jpg) no-repeat left top;
		}
		
		/*#videos ul.video_info li.video-nav.active { left: 121px; }*/
		
		#videos ul.video_info li.video-nav ul {
			width: 100%;
			height: 100%;
		}
		
		#videos ul.video_info li.video-nav ul li,
		#videos ul.video_info li.video-nav ul li a.button {
			width: 19px;
			height: 19px;
		}
		
		#videos ul.video_info li.video-nav ul li a.button { position: relative; }
		
		#videos ul.video_info li.video-nav ul li {
			float: left;
			margin: 8px 0 8px 12px;
		}
		
		
		/*#videos ul.video_info li.video-nav ul li.like { margin-left: 0; }*/
		
		#videos ul.video_info li.video-nav ul li.toggle_drawer a { background: transparent url(../images/vine-nav/drawer.jpg) no-repeat left top; }
		#videos ul.video_info li.video-nav ul li.like a { background: transparent url(../images/vine-nav/like.jpg) no-repeat left top; }
		#videos ul.video_info li.video-nav ul li.dislike a { background: transparent url(../images/vine-nav/dislike.jpg) no-repeat left top; }
		#videos ul.video_info li.video-nav ul li.share a { background: transparent url(../images/vine-nav/share.jpg) no-repeat left top; }
			
			#videos ul.video_info li.video-nav ul li.toggle_drawer {
				margin: 0;
				height: 36px;
			}
			
			#videos ul.video_info li.video-nav ul li.toggle_drawer a.button {
				height: 36px;
			}
			
			/* tooltip */
			#videos span.tooltip {
				position: absolute;
				width: 42px;
				bottom: 29px;
				z-index: 10;
				padding: 0 8px 0 2px;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			#videos span.tooltip span {
				color: #11b88e;
				font-size: 11px;
			}
			
			#videos span.tooltip-share {
				right: 26px;
				background: transparent url(../images/vine-nav/share-tooltip.png) no-repeat left top;
				height: 29px;
				text-indent: -999px;
			}
			
			#videos span.tooltip-dislike {
				right: 56px;
				background: transparent url(../images/vine-nav/dislike-tooltip.png) no-repeat left top;
				height: 39px;
			}
			
			#videos span.tooltip-like {
				right: 85px;
				background: transparent url(../images/vine-nav/like-tooltip.png) no-repeat left top;
				height: 39px;
			}
			/* BEGIN: Social Networks */
			#videos div.overlay div.social-networks {
				display: none;
				position: absolute;
				left: 0px;
				top: 305px;
				width: 300px;
				height: 200px;
				/*z-index: 10;*/
				overflow: hidden;
			}
			
			#videos div.overlay div.social-networks div,
			#videos div.overlay div.social-networks div a.button {
				width: 300px;
				height: 50px;
			}
			
			#videos div.overlay div.social-networks div a.button {
				transition: opacity 1s;
				-webkit-transistion: opacity 1s; /* Safari */
				-moz-transition: opacity 1s; /* Firefox */
				-o-transition: opacity 1s; /* Opera */
			}
			
			
			#videos div.overlay div.social-networks div a.button:hover { opacity: 0.5; }
			#videos div.overlay div.social-networks div.video-nav_facebook a.button { background: transparent url(../images/vine-nav/facebook.png) no-repeat left top; }
			#videos div.overlay div.social-networks div.video-nav_twitter a.button { background: transparent url(../images/vine-nav/twitter.png) no-repeat left top; }
			#videos div.overlay div.social-networks div.video-nav_google a.button { background: transparent url(../images/vine-nav/google.png) no-repeat left top; }
			#videos div.overlay div.social-networks div.video-nav_copy-link a.button { background: transparent url(../images/vine-nav/copy-link.png) no-repeat left top; }
			/* END: Social Networks */
		
		#videos ul.video_info li.video-nav ul li.expand a { background: transparent url(../images/vine-nav/expand.jpg) no-repeat left top; }
		#videos ul.video_info li.video-nav ul li.active a,
		#videos ul.video_info li.video-nav ul li a:hover { background-position: left bottom; }
		/* END: Video Nav */

#message {
	padding-top: 71px;
	text-align: center;
	font-size: 2em;
	height: 50px;
}

#loader {
	display: none;
	margin: 0 auto;
	height: 300px;
	width: 300px;
	background: transparent url(../images/loading_grey.gif) no-repeat 50% 50%;
}
/* END: Body */

/* BEGIN: Footer */
#footer_wrapper {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 24px;
	color: #FFF;
	background-color: #000;
	z-index: 50;
}

#footer_wrapper #copyright {
	float: left;
	padding-top: 6px;
	width: 375px;
	height: 18px;
}
#footer_wrapper #copyright a.button {
	float: left;
	width: 45px;
	height: 11px;
	margin-right: 12px;
	background: transparent url(../images/code-logo.gif) no-repeat left top;
}

#footer_wrapper #copyright p {
	float: left;
	margin: 0;
	font-size: 10px;
}

#footer_wrapper #copyright p a { color: #FFF; }

#footer_wrapper #about-us #popup {
	position: absolute;
	width: 272px;
	padding: 16px;
	background-color: #fff;
	border: 1px solid #a9a9a9;
	text-align: left;
	bottom: 20px;
	left: -136px;
	border-radius: 5px;
	display: none;	
}

#footer_wrapper #about-us #popup a { color: #00b386; }

#footer_wrapper #about-us {
	position: relative;
}

#footer_wrapper #about-us #popup p {
	color: #0c373d;
	line-height: 150%;
	font-size: 1.1em;
	margin: 1.1em;
}

#footer_wrapper #about-us #popup a {
	text-decoration: underline;
	text-transform: none;
}

#footer_wrapper #share {
	float: right;
	height: 24px;
}

#footer_wrapper #share li {
	float: left;
	width: 75px;
	font-family: Myriad-Pro, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
}

#footer_wrapper #share li a {
	color: #FFF;
	text-decoration: none;
}

#footer_wrapper #share li#about-us {
	width: 41px;
	margin-right: 15px;
}

#footer_wrapper #share li div.popup { display: none; }

#footer_wrapper #share li.text { padding-top: 6px; }

#footer_wrapper #share li.social,
#footer_wrapper #share li.social a.button {
	width: 27px;
	height: 24px;
}

#footer_wrapper #share li a.addthis_button_facebook {
	background: transparent url(../images/facebook.gif) no-repeat left top;
}
#footer_wrapper #share li a.addthis_button_twitter {
	background: transparent url(../images/twitter.gif) no-repeat left top;
}
/* END: Footer */



/* BEGIN: Modals */

#modal-mask {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: transparent url(../images/black_bg.png) top left;
	z-index: 80;
}

#modal-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 0;
}

#modal-wrapper a.button {
	position: absolute;
	right: -10px;
	top: -10px;
	width: 20px;
	height: 20px;
	background: transparent url(../images/button_close.png) no-repeat left top;
}
.modal { display: none; }
	#copy-modal {
		border: #ccc solid 1px;
		margin-bottom: 20px;
		padding: 10px;
	}
	
	#copy-modal input {
		width: 250px;
		height: 20px;
	}

/* END: Modals */


/* Mobile & Desktop */
#site_container.xlarge div#header,
#site_container.xlarge div#footer {
	width: auto;
}

/* Large */
#site_container.xlarge.large div#header h2.slug { display: none; }
#site_container.large div#header .logo {
	width: 174px;
	height: 28px;
}

/* Medium */
#site_container.large.medium div#header_wrapper {
	height: 45px;
}
body.mobile div#header_wrapper,
body.mobile div#footer_wrapper {
	min-width: 0;
}
#site_container.large.medium div#header div#search {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	-moz-border-radius: 0;
	border-radius: 0;
}

#site_container.large.medium div#header div#search form input#search_text { border: none; }
#site_container.large.medium div#footer_wrapper { display: none; }
#site_container.large.medium div#body { margin-top: 55px; }

/* Desktop Resize only  SMALL */
body.screen #site_container.small div#header .logo { width: 40px; }
body.screen #site_container.small div#header div#search form input#search_text { width: 195px; }
body.screen #site_container.small div#header h1 a { background: transparent url(../images/mobile_logo.png) no-repeat left top; }

/* Mobile Only */
/* Iphone 4S Landscape */
@media only screen and (max-device-width: 631px) and (min-device-width: 358px){}

/* Iphone 4s & Iphone 4 Portait */
@media only screen and (max-device-width: 356px) {
	body.mobile div#header_wrapper {
		height: 55px;
		padding-top: 0;
	}
	body.mobile div#header div#search form input#search_text { width: 65px; }
	body.mobile div#header { padding: 10px; }
}

/* and (orientation: portrait), only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {*/
/* END: iPhone and iPad View */