@charset 'utf-8';
@import url(reset.css);
@import url(fancybox.css);


/*
Theme Name: TIL
Theme URI: http://wordpress.org/
Description: The TIL WordPress by esher.
Version: 0.9
Author: Frank Lämmer
Author URI: http://franklaemmer.de/
*/


.js div { } /* apply only on JavaScript enabled browsers */
.ie7 div { } /* apply only on Internet Explorer 7 and below */

hr {
	display:none;
}

body {
	background: #000;
}

h1, h2, h3, h4, 
.nav-element, 
.playbutton span,
#mediacontainer #slideshow, 
.blog-navigation,
.more,
h2 a {
	color: #fff;
	font-family: 'Arial Black', Arial, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: -1px;
}

.nav-element a {
	text-decoration: none;
}

.nav-element a:hover, 
li.current_page_item a {
	text-decoration: underline;
}



p, li, a ,a, address{
	font-family: Arial, sans-serif;
	color: #fff;
}

.wrapper {
	width: 980px;
	margin: auto;
}

/* backgrounds */

#main {
	min-height: 500px;
	padding: 150px 0 20px 0;
}



/* background portraits */

#main {
	background: url(img/background-default.jpg) no-repeat bottom center;
}

#main.bg_ben-j {
	background: url(img/background-ben-j.jpg) no-repeat top center;
}

#main.bg_hong-10 {
	background: url(img/background-hong-10.jpg) no-repeat top center;
}

#main.bg_lilou {
	background: url(img/background-lilou.jpg) no-repeat top center;
}

#main.bg_ronnie {
	background: url(img/background-ronnie.jpg) no-repeat top center;
}

#main.bg_roxrite {
	background: url(img/background-roxrite.jpg) no-repeat top center;
}

#main.bg_taisuke {
	background: url(img/background-taisuke.jpg) no-repeat top center;
}




#footer {
	background: url(img/footer.jpg) no-repeat top center;
	padding:40px 0 30px 0;
}

#footer p {
	margin-top: 10px 0;
	font-size: 10px;
	line-height: 12px;
	text-align: center;
}

#footer #mk2logo {
	display: block;
	padding-top:20px;
	margin: 5px 0;
	background: url(img/mk2-logo.png) no-repeat top center;
	text-decoration: none;
}

#footer #mk2logo span {
	display:none;
}

#footer #wordpresslink {
	text-decoration: none;
}

.col-left {
	float: left;
	width: 240px;
	margin-right:100px;
}

.col-right {
	float: left;
	width: 640px;
}

.c {
	clear: both;
}


/* Top */

#top {
	position: absolute;
	top: 10px;
}

#top h3{
	font-size: 19px;
	margin:-3px 0 2px 0;
	z-index: 120;
}

#topnav {
	z-index: 99;
	position: absolute;
}

#topnav h1 {
	width: 280px;
	height: 75px;
	background: url(img/til-logo.png) no-repeat;
}

#topnav h1 a {
	display: block;
	height: 100%;
}

#topnav h1 span {
	display:none;
}

#topnav ul li {
	float: left;
	font-size: 14px;
	margin: 0 10px 0 0;
}

/* kwicks */

.kwicks {
	/* recommended styles for kwicks ul container */
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
}
.kwicks li{
	/* these are required, but the values are up to you (must be pixel) */
	width: 100px;
	height: 78px;
	
	/* esher */
	border: 1px solid #fff;
	position: relative;
	
	/*do not change these */
	display: block;
	overflow: hidden;
	padding: 0;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.kwicks.horizontal li {
	/* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
	margin-right: 5px; /*Set to same as spacing option. */	
	float: left;
}

.kwicks.horizontal li a {
	float: left;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.kwicks.horizontal li a span {
	display: block;
	margin: 57px 0 0 0;
	padding: 4px;
	font-size: 14px;
}

.kwicks.horizontal li a:hover span,
.kwicks.horizontal li.current_page_item a span {
	text-decoration: underline;
}

#ben-j { 
	background: url(img/bboy-benj.jpg);
}

#hong-10 { 
	background: url(img/bboy-hong10.jpg);
}

#lilou { 
	background: url(img/bboy-lilou.jpg);
}

#ronnie { 
	background: url(img/bboy-ronnie.jpg);
}

#roxrite { 
	background: url(img/bboy-roxrite.jpg);
}

#taisuke { 
	background: url(img/bboy-taisuke.jpg);
}

.kwicks.horizontal #taisuke {
	margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
}



#content {
}

.col-left p,
.col-left ul {
	font-size: 12px;
	line-height: 16px;
	margin: 5px 0 10px 0;
}

.col-right * {
	text-shadow: #000 -1px -1px 2px ;
}

.col-right p,
.col-right address {
	font-size: 16px;
	line-height: 22px;
	margin: 5px 0 15px 0;
}

.col-right h2 {
	font-size: 36px;
}

.col-right h3 {
	font-size: 26px;
}

.col-right h4 {
	font-size: 22px;
}



.col-right a {
	text-decoration: underline;
}

.col-right h2 a {
	text-decoration: none;
}

.col-right h2 a:hover {
	text-decoration: underline;
}



.col-right a:hover {
	text-decoration: none;
}



/* mediaplayer */

#mediacontainer, 
#nonverblaster {
	margin: 5px 0 20px 0;
	width: 640px;
	height: 380px;
	border: 1px solid #fff;
	position: relative;
}
 
#mediacontainer .playbutton {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}

#mediacontainer #slideshow {
	position: absolute;
	width: 640px;
	height: 380px;
}

#mediacontainer #slideshow p{
	color: 000;
	padding: 10px;
}

#mediacontainer .playbutton {
	background: url(img/play-trailer-button.png) no-repeat center center;
	text-decoration: none;
}

#mediacontainer .playbutton span {
	display: none;
	padding:177px 0 0 291px;
	color: #000;
	font-size: 12px;
}

#mediacontainer a.playbutton:hover span {
	display: block;
	text-shadow: 1px 1px 1px #ddd;
}

/* social buttons */


.social-sharing {
	padding: 10px;
	background-color: #fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.social-sharing h4 {
	color: #000;
	margin: 0 0 5px 0;
	padding: 0;
}


/* blog styles */

.blogentry {
	position: relative;
	margin: 0 0 60px 0;
}

.entry img,
.blogentry img {
	border: 1px solid #fff;
}

.metablock {
	position: absolute;
	left: -245px;
	text-align: right;
	font-family: Arial;
	font-size: 12px;
	line-height: 14px;
	color: #fff;
}

.metablock a {
	text-decoration: none;
}

.metablock a:hover {
	text-decoration: underline;
}


.metablock .date {
	font-weight: bold;
}

.blog-navigation a.older{
	float:left;
}

.blog-navigation a.newer{
	float:right;
}

.col-right .comments-container {
	margin: 40px 0 0 0;
}

.col-right .comments-container p {
	font-size: 14px;
}

.comments-container label {
	margin: 10px 0 0 0;
	display: block;
	color: #fff;
	font-family: Arial;
	font-weight: bold;
	font-size: 12px;
}

.col-right .comments-container textarea,
.col-right .comments-container input {
	text-shadow: none;
	width: 628px;
	padding: 4px;
	font-family: Arial;
	font-size: 12px;
}

.col-right .comments-container input {
	width: 624px;
}

.col-right .comments-container button {
	text-shadow: none;
}



.col-right ul {
	list-style:square inside;
}




#gallery-1 a img, 
#gallery-2 a img, 
#gallery-3 a img {
	border: 1px solid #fff !important;
}

#gallery-1 a:hover img,
#gallery-2 a:hover img,
#gallery-3 a:hover img {
	border: 1px solid #000 !important;
}

.wordtube {
	border: 1px solid #fff;
	width: 640px;
}