/*

Basis Template
Kurs: MovieDatabase SoSe 2013

======================================================================== */


/* HTML5 Elemente */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}

html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

/* Responsive Images */

img {
max-width: 100%;
/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
height: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}


/* Basis
============================================= */

body {
margin: 0;
font-family:Arial, sans-serif;
font-size: 12px;
line-height: 18px;
color: #777;
background-color: #ffffff;
}

/* Links */

a {
color: #666;
cursor:pointer;
text-decoration: none;
-webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
     -o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
}

a:hover,
a:focus {
color: #999;
text-decoration: none;
}

a:hover,
a:active {
outline: 0;
}


/* Raster
============================================= */

/* Clearfix und Abstandsausgleich für die Zeilen */

.row { margin-left: -20px; *zoom: 1; }

.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}

.row:after { clear: both; }

/* Info zum folgenden Selektor
http://blog.teamtreehouse.com/css3-substring-matching-attribute-selectors */

[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;

/* nur um die Spalten sichtbar zu machen  */
background:#fff; color:#000; margin-bottom:20px;
}



.container { width: 940px; }

.span12 { width: 940px; }
.span11 { width: 860px; }
.span10 { width: 780px; }
.span9 	{ width: 700px; }
.span8  { width: 620px; }
.span7  { width: 540px; }
.span6  { width: 460px; }
.span5  { width: 380px; }
.span4  { width: 300px; }
.span3  { width: 220px; }
.span2  { width: 140px; }
.span1  { width: 60px; }

.offset12 { margin-left: 980px; }
.offset11 { margin-left: 900px; }
.offset10 { margin-left: 820px; }
.offset9  { margin-left: 740px; }
.offset8  { margin-left: 660px; }
.offset7  { margin-left: 580px; }
.offset6  { margin-left: 500px; }
.offset5  { margin-left: 420px; }
.offset4  { margin-left: 340px; }
.offset3  { margin-left: 260px; }
.offset2  { margin-left: 180px; }
.offset1  { margin-left: 100px; }


/* Clearfix + Zentrieren für den Container */

.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}

.container:before,
.container:after {
display: table;
content: "";
line-height: 0;
}

.container:after { clear: both; }


/* Typografie
============================================= */

p { margin: 0 0 5px 0; }

/* hervorheben */
.lead {
font-size: 21px;
line-height: 30px;
margin-bottom: 20px;
}

small { font-size: 85%; }
strong { font-weight: bold; }
em { font-style: italic; }

/* Zitate */
cite { font-style: normal; }

/* abgeschwächt */
.muted { color: #999999; }

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

h1, h2,
h3, h4,
h5, h6 {
margin: 10px 0;
font-weight: normal;
line-height: 20px;
color: #333333;
text-rendering: optimizelegibility;
}

h1,
h2,
h3 { line-height: 40px; }

h1 { font-size: 39px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 15px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }


/* hoch- und tiefstellen */
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }




/*
==============================================
==============================================
   Module
==============================================
============================================== */

/* Header
============================================= */
/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/
.bxslider {margin: 0}
.bx-wrapper {
	position: relative;
	margin: 0 auto 60px;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
	margin-bottom: -15px;
	background: #fff;
}


/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(../img/home/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}


/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 10px;
	background: url(../img/home/controls_left.png) no-repeat;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(../img/home/controls_right.png) no-repeat;
}

.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 60%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}


/* Hover Bilder
============================================= */
.figure {
    box-shadow: 8px 8px 14px #eee;
    cursor:crosshair;
	color:#000;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.figure .figcaption {
    position: absolute;
    top: 0;
	height:100%;
	width: 100%;
	background: none repeat scroll 0 0 #F4F6F1;
	overflow: hidden;
    visibility: hidden;
	transform: translateX(-100%);
    transition: all 0.4s ease-out 0s;
	}
	
.figcaption h4 {
    text-transform: capitalize;
	letter-spacing:0.3em;
	line-height: 1.3em;
	margin-top:40%;
	margin-bottom: 9px;
	color: #595959;
	font-weight:bold;
	}
	
.figure p {
	font-size:12px;
	letter-spacing:0.2em;
	color:#737373;
	margin-bottom: 12px;}	

.figure a {
	color:#666;
	font-weight: bold;
	font-size:12px;
	}
	
.figure .pfeil {color:#E2E2E2;
display:inline;}

.figure a:hover {
	color: #000;
	cursor: pointer;
text-decoration: none;
	}

.figure:hover .figcaption {
    transform: translateX(0px);
    visibility: visible;
	opacity: 1;
    filter: alpha(opacity=100)
}

.moreborder {
	position: absolute;
	width:50px;
	padding: 5px 20px 5px 20px;
	border:thin solid #d8d8d8;
	left: 50%;
	margin-left: -45px;
	-webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
     -o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
	}
	
.moreborder:hover,
.moreborder:focus {
	background-color:#ebeee5;
	border-color:#999;
	color:#13160e;
	text-decoration: none;
	box-shadow: 10px 10px 14px e6e6e6;
}


/* Navigation
============================================== */

.span12 #navigation{
	background-color:#f6f6f6;
	padding-top:1px;
	padding-bottom:1px;
		}
	

.nav ul {
	text-align:center;}

.nav ul li {
	display: inline;
	list-style:none;
	}
.nav a {
	margin-right: 10px;
	margin-left: 10px;}	

.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */


/* INFOBOX
============================================== */
.info{margin-left: 10px;
	text-align:justify;
	color: #595959;
	font-size:13px;
	line-height:1.7em;
	letter-spacing:0.08px;}
	
.info li{
	list-style:none;
	margin-bottom: 10px;
	}
	
.info h5 { font-size: 13.5px;
	letter-spacing:0.2em;
	line-height: 1.3em;
	margin-bottom: -5px;
	color: #595959;
	font-weight:bold; }
	
.info h6 {
	font-weight:bold;
	margin: 5px 0;
	letter-spacing:0.1em;
	color: #7f7f7f;
	
	}	
	
.info a h6:hover,
.info a h6:focus {
color: #333;
text-decoration: none;
}
.info a h6{	
	cursor:pointer;
	text-decoration: none;
	-webkit-transition: all 0.2s ease-in;
	   -moz-transition: all 0.2s ease-in;
		 -o-transition: all 0.2s ease-in;
		-ms-transition: all 0.2s ease-in;
			transition: all 0.2s ease-in;}

.infotitle h5{
	font-size: 13.5px;
	letter-spacing:0.15em;
	line-height: 1.3em;
	font-style:italic;
	color: #333;
	font-weight:bold; 
	margin:20px 0 0 10px}				
.infotitle p{
	color: #595959;
	font-size:13px;
	font-style:italic;
	line-height:1.7em;
	letter-spacing:0.08px;
	margin:-15px 0 0 10px;
	}	

	

/* Footer
============================================== */
footer {height: 250px;}


/*
==============================================
==============================================
   Responsive / CSS3 Media Queries
==============================================
============================================== */


/*
   Elemente ein- und ausblenden
==============================================*/

@-ms-viewport { width: device-width; }

.hidden { display: none; visibility: hidden; }
.visible-phone { display: none !important; }
.visible-tablet { display: none !important; }
.hidden-desktop { display: none !important; }
.visible-desktop { display: inherit !important; }


@media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important ; }
.visible-tablet { display: inherit !important; }
.hidden-tablet { display: none !important; }
}

@media (max-width: 767px) {
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important; }
.visible-phone { display: inherit !important; }
.hidden-phone { display: none !important; }
}

.visible-print { display: none !important; }

@media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
}

/* Mobile 
==============================================*/

@media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
font-size: 0.7em;
line-height: 1.6em;
}

.container { width: auto; }

.row { margin-left: 0; }

[class*="span"] {
float: left;
display: block;
width: 50%;
padding-left:10px;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.span12 {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.span8 {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.bx-wrapper .bx-next {
	    visibility: hidden;}


.figure:hover .figcaption {
    
}

/* Typografie
=========================== */
.span12 #navigation{
	font-size:8px}
/*
===========================
===========================
 Module
===========================
=========================== */


/* Header
=========================== */


/* Navigation
=========================== */


/* Footer
=========================== */


}


/* Tablet 
==============================================*/


@media (min-width: 768px) and (max-width: 979px) {

.row {
margin-left: -20px;
*zoom: 1;
}

.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after { clear: both; }

[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}

.container { width: 724px; }

.span12 { width: 724px; }
.span11 { width: 662px; }
.span10 { width: 600px; }
.span9 { width: 538px; }
.span8 { width: 476px; }
.span7 { width: 414px; }
.span6 { width: 352px; }
.span5 { width: 290px; }
.span4 { width: 228px; }
.span3 { width: 166px; }
.span2 { width: 104px; }
.span1 { width: 42px; }

.offset12 { margin-left: 764px; }
.offset11 { margin-left: 702px; }
.offset10 { margin-left: 640px; }
.offset9 { margin-left: 578px; }
.offset8 { margin-left: 516px; }
.offset7 { margin-left: 454px; }
.offset6 { margin-left: 392px; }
.offset5 { margin-left: 330px; }
.offset4 { margin-left: 268px; }
.offset3 { margin-left: 206px; }
.offset2 { margin-left: 144px; }
.offset1 { margin-left: 82px; }

.span12 #navigation{
	font-size:10px}

.figcaption h4 {font-size:85%;
				margin-top:35%;
				margin-bottom: 7px;}
.figcaption p {font-size: 80%;
				margin-bottom: 10px;}
.figcaption a {font-size: 80%}
.moreborder {
	padding: 4px 17px 4px 17px;}
.info{
	font-size:90%}
.info h5{font-size: 95%}
.info h6{font-size: 95%}
.infotitle h5{font-size: 95%}
.infotitle p{font-size: 95%}

}



/* Large Desktop 
==============================================*/

@media (min-width: 1200px) {
.row {
 margin-left: -30px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}
.container { width: 1170px; }

.span12 { width: 1170px; }
.span11 { width: 1070px; }
.span10 { width: 970px; }
.span9 { width: 870px; }
.span8 { width: 770px; }
.span7 { width: 670px; }
.span6 { width: 570px; }
.span5 { width: 470px; }
.span4 { width: 370px; }
.span3 { width: 270px; }
.span2 { width: 170px; }
.span1 { width: 70px; }

.offset12 { margin-left: 1230px; }
.offset11 { margin-left: 1130px; }
.offset10 { margin-left: 1030px; }
.offset9 { margin-left: 930px; }
.offset8 { margin-left: 830px; }
.offset7 { margin-left: 730px; }
.offset6 { margin-left: 630px; }
.offset5 { margin-left: 530px; }
.offset4 { margin-left: 430px; }
.offset3 { margin-left: 330px; }
.offset2 { margin-left: 230px; }
.offset1 { margin-left: 130px; }



}