/*
Thirtytwo.com Stylesheet / home

URL: 		thirtytwo.com
Created by: 	Foxxyz/Ivo KH Janssen & Mike Rusczyk
For:		Sole Technology Inc
Site Design by:	Teh Webnerds
		
http://thirtytwo.com

*/


body {
	overflow: hidden;
	}

object {
	display: block;
	}	
	
/******************\
|	ID SPECIFICS   |
\******************/

#background {
	color: inherit;
	background-color: #000;
	}

	#background span {
		top: 0;
		left: 0;
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		text-indent: -98009px;
		color: inherit;
		background: transparent url(/app/css/images/diagonal-lines.png) repeat 0 0;
		}	
	
#backlink {
	font-family: ko-htf48, Helvetica,Arial,sans-serif;
	text-transform: uppercase;
	font-size: 20px;
	display: none;
	text-align: right;
	top: 638px;
	left: 50%;
	margin-left: -455px;
	position: fixed;
	padding: 15px 5px 40px;
	width: 930px;	
	z-index: 6;
	}
	
	#backlink a {
		color: #fff;
		background-color: inherit;
		}
		
		#backlink a:focus {
			outline-style: none;
			}
		
		#backlink a:hover {
			color: #F47B20;
			background-color: inherit;
			}
			
/* -------- */			

#content {
	width: 100%;
	position: fixed;
	z-index: 2;
	left: 0;
	bottom: 55px;
	}

	#content h2 {
		display: none;
		}

	#content li {
		float: left;
		}
		
		#content li a {
			display: block;
			overflow: hidden;
			width: 312px;
			border-right: 1px solid #7F7F7F;
			border-bottom: 1px solid #969595;
			margin-bottom: -1px;
			color: #292427;
			background: transparent;
			transition: background 150ms ease, border-color 300ms ease;
   			-o-transition: background 150ms ease, border-color 300ms ease;
   			-webkit-transition: background 150ms ease, border-color 300ms easee;
			-moz-transition: background 150ms ease, border-color 300ms ease;
			}
			
			#content li a:hover {
				color: #e0dfe0;
				background: #565656;
				-moz-box-shadow: 1px 0px 4px -1px #404040 inset;
				-webkit-box-shadow: 1px 0px 4px -1px #404040 inset;
				box-shadow: 1px 0px 4px -1px #404040 inset;
				}			
			
		#content li a img {
			float: left;
			border: 1px solid #8D8B8C;
			margin: 15px 10px 15px 15px;
			
						width: 133px;
						height: 90px;
						}
						
				#content li a:hover img {
					border-color: #3f3f3f;
					box-shadow: 1px 1px 4px #555555;
					-moz-box-shadow: 1px 1px 4px #555555;
					-webkit-box-shadow: 1px 1px 4px #555555;
					}
		
		#content li h3 {
			font-size: 28px;
			line-height: .9;
			margin: 0 15px 0 0;
			overflow: hidden;
			float: left;
			padding: 20px 0 10px 5px;
			width: 131px;
			}
			
/* --------- */			
		
		#content li:first-child {
			top: 155px;
			left: 20px;
			position: fixed;
			font-size: 50px;
			max-width: 540px;
			float: none;
			background: transparent url(/app/css/images/home-transparency.png) repeat 0 0;
			}
			
				.home #content li h3 .sub {
					display: block;
					font-size: 12px;
					font-weight: bold;
					font-style: italic;
					font-family: Georgia, "Times New Roman", Times, serif;
					text-transform: capitalize;
					margin-bottom: 3px;
					}
			
			#content li:first-child h3 {
				font-size: 46px;
				padding: 15px 15px 8px;
				width: auto;
				}
				
				#content li:first-child h3 .sub {
					display: block;
					font-size: 13px;
					margin: 0 0 3px 2px;
					font-weight: bold;
					font-family: Georgia, serif;
					text-transform: none;
					font-style: italic;
					}
			
			#content li:first-child a {
				width: auto;
				border: 1px solid #ADADAD;
				margin: 0;
				/*padding-right: 81px;*/
				min-height: 82px;
				position: relative;
				}
				
				#content li:first-child a:hover {
					border-color: #000;
					-moz-box-shadow: 1px 1px 2px #767575;
					-webkit-box-shadow: 1px 1px 2px #767575;
					box-shadow: 1px 1px 2px #767575;
					}
					
				#content li.video:first-child a {
					background: transparent url("/app/css/images/homepage-play-icon-black.png") no-repeat right -7px;
					padding-right: 56px;
					}
					
					#content li.video:first-child a:hover {
						border-color: #565656;
						-moz-box-shadow: 1px 1px 2px #767575;
						-webkit-box-shadow: 1px 1px 2px #767575;
						box-shadow: 1px 1px 2px #767575;
						background-color: #565656;
						background-image: url("/app/css/images/homepage-play-icon-white.png");
						-moz-box-shadow: inset 1px 0 2px -1px #404040 inset;
						-webkit-box-shadow: 1px 0 2px -1px #404040 inset;
						box-shadow: 1px 0 2px -1px #404040 inset;
						}
					
					#content li.video:first-child h3 .sub {
						margin: -3px 0 3px 2px;
						}
			
			#content li:first-child img {
				display: none;
				} 
				
			#content li:first-child h5 {
				display: none;
				}
				
			#content li:first-child .main {
				padding-top: 7px;
				display: block;
				}
				
				#content li:first-child .sub + .main {
					padding-top: 0;
					}
				
/* --------- */					

		#content li .meta {
			display: none;
			}
			
	#content span.playvideo {
		display: block;
		width: 80px;
		height: 100%;
		text-indent: -9009px;
		border-left: 1px solid #7F7F7F;
		top: 0;
		right: 0;
		position: absolute;
		color: inherit;
		background: transparent url(/app/css/images/homepage-play-icon.png) no-repeat -8px -7px;
		}	
		
			#content a:hover span.playvideo {
				background-position: -108px -7px;
				border-color: #e0dfe0;
				}
		
	#content ul {
		list-style: none;
		overflow: hidden;
		margin: 0 20px;
		background: transparent url(/app/css/images/home-transparency.png) repeat 0 0;
		border-color: #ADADAD #ADADAD #969595;
		border-width: 0 1px 1px 1px;
		border-style: solid;
		}
		
/* --------- */		
	
#footer {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: #B8B6B8 url(/app/css/images/site.jpg) repeat fixed 0 0;
    width: 100%;
	}	
	
#header {
	height: 55px;
	background-image: none;
	position: fixed;
	left: 0;
	top: 0;
	}
	
		#header li li a  {
			border-color: #ADADAD;
			}
	
		#header li ul {
			top: 50px;
			background: transparent url(/app/css/images/home-transparency.png) repeat 0 0;
			-moz-box-shadow: 1px 1px 2px #767575;
			-webkit-box-shadow: 1px 1px 2px #767575;
			box-shadow: 1px 1px 2px #767575;
			}
	
				#header > ul > li > a:hover {
					padding-bottom: 24px;
					}
					
	#header ul.snlinks {
		position: fixed;
		right: 15px;
		top: 28px;
		float: none;
		margin: 0;
		}
				
/* ---------- */						
	
	#player {
		top: 0;
		left: 50%;
		position: fixed;
		min-height: 516px;
		display: none;
		padding: 15px 15px 40px;
		margin: 75px 0 0 -455px;
		width: 910px;
		color: inherit;
		background: #000;
		z-index: 5;
		}
		
#wrapper {
	width: auto;
	height: 100%;
	padding: 0;
	margin: 75px 20px 0;
	margin-bottom: 50px;
	overflow: visible;
	}	
	
/******************\
| CLASS SPECIFICS  |
\******************/
			
			.engaged #content li a {
				transition: none;
			 	-o-transition: none;
			 	-webkit-transition: none;
				-moz-transition: none;
				}	
	
.progressBar {
	position: absolute;
	bottom: 14px;
	left: 46px;
	width: 720px;
	height: 13px;
	background: url(/app/css/images/player/progress-bar.png) left center repeat-x;
	cursor: pointer;
	}

	.progressBar .elapsed {
		position: absolute;
		width: 0;
		height: 13px;
		background: url(/app/css/images/player/progress-bar-elapsed.png) left center repeat-x;
		border-right: 4px solid #F47B20;
	}
	
/* ---- SNS tools ---- */			

.sntools {
	width: 42px;
	right: 6px;
	bottom: 12px;
	position: absolute;
	}

	.sntools h4 {
		display: none;
		}

	.sntools li {
		list-style-type: none;
		float: left;
		margin: 0 5px 0 0;
		}	
	
	.sntools li.fblike {
		position: absolute;
		left: -88px;
		top: -2px;
		}

		.sntools li.fblike span {
			opacity: .7;
			}

			.sntools li.fblike span:hover {
				opacity: 1.0;
				}

		.sntools li span.facebook, .sntools li span.twitter {
			display: block;
			width: 16px;
			height: 16px;
			text-indent: -9909px;
			color: inherit;
			background: transparent url(/app/css/images/sns-icons-blog.png) no-repeat 0 0;
			cursor: pointer;
			}

			.sntools li span:focus {
				outline-style: none;
				}

			.sntools li span:hover {
				background-position: 0 -20px;
				}	

			.sntools li span.facebook {
				background-position: -21px 0;
				}

				.sntools li span.facebook:hover {
					background-position: -21px -20px;
					}

	.sntools ul {
		line-height: normal !important;
		margin: 0 !important;
		position: relative;
		}
		
/* -------- */			

.controlDiv {
	position: absolute;
	bottom: 10px;
	left: 21px;
	width: 23px;
	height: 18px;
	cursor: pointer;
	background: url(/app/css/images/player/home-player.png) no-repeat 0 0;
	}
	
	.controlDiv.sound {
		bottom: 11px;
		left: 775px;
		background-position: 0 -74px;
		}
		
		.controlDiv.sound:hover {
			background-position: 0 -92px;
			}
			
	.controlDiv.sound.muted {
		background-position: 0 -109px;
		}
		
		.controlDiv.sound.muted:hover {
			background-position: 0 -129px;
			}
	

	.controlDiv.play, .controlDiv.replay {
		background-position: 0 0;
		}
		
		.controlDiv.play:hover {
			background-position: 0 -20px;
			}
	
	.controlDiv.pause {
		background-position: 0 -37px;
		}
		
		.controlDiv.pause:hover {
			background-position: 0 -55px;
			}