/* ==================================
Stylesheet der "Little Boxes" DVD
Stand: Klassen zum clearen erstellt
Datei: birdschirm.css
Datum: 09. Mai 2014
Autor: Philipp Kapusta

Aufbau: 1. Kalibrierung
		2. Allgemeine Styles
		3. Styles für Layoutbereiche
		4. Sonstige Styles
================================== */

/* ===============================
	1. Kalibrierung
   =============================== */
   
* { padding: 0; margin: 0; } /* weil in jedem Browser anders */

h2, p, ul, ol { margin-bottom: 1em; } /* abstände wachsen wenn schrift vegrößtert wird */

ol ul { margin-bottom: 0; }

li { margin-left: 2em; }
   
   /* ===============================
	2. Allgemeine Styles
   =============================== */
 
html { height: 101%; }
 
body {
         /*background-image: url('images/backgrounds/Turquoise_Storm_Clouds_Texture_by_pareeerica.jpg'); http://sirius-sdz.deviantart.com/ 
    	background-repeat: repeat;*/
    	background-color: white;
        color: black;
        font-family: Lato, Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-weight: 100;
        letter-spacing: 1px; 
}  

h1 { 
	text-align: center;
	width: 600px;
	padding-top: 10px;
	padding-bottom: 20px;
	font-size: 150%; 
	letter-spacing: 1px;  
	font-weight: 500;
}
h2 { 
	padding-bottom: 20px;
	width: 600px;
	font-size: 145%;
	font-weight: 500; 
}
h3 { 
	width: 600px;
	text-align: center;
	margin-left: 215px;
	margin-top: 350px;
	margin-bottom: 5px;
	float: left;
	width: 600px;
	text-align: justify;
	font-size: 140%;
	font-weight: 300;
}

h4 { 
	margin-left: 215px;
	text-align: justify;
	font-size: 100%;
	font-weight: 300;
	width: 600px;
}

h5 { 
	margin-left: 215px;
	margin-bottom: 45px;
	float: left;
	width: 603px;
	text-align: justify;
	font-size: 80%;
	font-weight: 300;
}

h6 { 
	padding-bottom: 20px;
	width: 600px;
	text-align: justify;
	font-size: 100%;
	font-weight: 300;
}

address {
        text-align: center;
        font-size: 80%;
        font-style: normal;
        letter-spacing: 1.5px;
        line-height: 1.5;
}

/* ===================
	Hyperlinks ==== */

a { 
  text-decoration: none; 
  outline: none;
}

a:link { color: black; } /* nicht besuchte Links */
a:visited { color: #cc6600; } /* besuchte Links */

#whiteColor1 {
	color: white;
}
#whiteColor2 {
	color: white;
}
#whiteColor3 {
	color: white;
}
#whiteColor4 {
	color: white;
}
#whiteColor5 {
	color: white;
}
#whiteColor6 {
	color: white;
}
#whiteColor7 {
	color: white;
}
#whiteColor8 {
	color: white;
}

a:hover, 
a:focus { border-bottom: 1px solid #d90000; }
a:active {
        background-color: #d90000;
        color: white;
}

/* ===================
	Klassen und IDs */
	
.skiplink {
        position: absolute;
        top: -5000px;
        left: -5000px;
        width: 0;
        height: 0;
        overflow: hidden;
        display: inline;
}

.bildrechts {
    	float: right;
    	/* padding: 3px;
    	margin-bottom: 10px;
	margin-left: 10px; */
}

.clearing {
	clear: both;
}

.textlinks {
	text-align:left;
}

.borderTop {
	border-top: 1px #aaaaaa solid;
}

.language {
	margin-top: 0px;
	float: left;
	border-color: #ffffff;
	font-weight: 500;
	}
	.language a:hover,
	.language a:focus {
		background-color: #eeeeee;
		color: black;
		border-left-color: #bbbbbb;
		border-right-color: #bbbbbb;
		border-bottom: none;
		}

.cover {
	margin-left: auto;
    	margin-right: auto;
    	width: 100%;
    	max-width: 1035px;
    	min-width: 720px;
	background-color: #ffffff;
	height: 100%;
	min-height: 500px;
	margin-top: 25px;
	text-decoration: none;
	padding-top: 10px;
	padding-bottom: 10px;
	/*border-left: 1px solid;
	border-right: 1px solid;*/
	border-radius: 10px;
	border-color: #87CEFA;
	font-weight: 300;
}

        .cover_startseite {
        	margin: auto;
        }

        .cover li {
        	list-style-type: none;
        	border-radius: 10px;
        }
.textRed {
	color: red;
}

.bildrechts {
	float: right;
	padding: 3px;
	margin-bottom: 10px;
	margin-left: 10px;
}

.weight {
	font-weight: 400;
}

.bildlinks {
	float: left;
	padding: 3px;
	margin-right: 10px;
	margin-left: -5px;
}
        
#soundcloud {
	line-height: 50em;
	height: 450px;
	width: 60%;
	display: block;
	margin: auto;
	border-radius: 10px;
	background-color: white;
	
}

.bottomCenter {
	border-radius: 10px;
	background-color: white;
	padding-top: 20px;
	margin-top: 20px;
	width: 100%;
    	max-width: 1035px;
    	margin: auto;

}

#coverName {
	color: white;
}

#startseite #logo {
        display: block;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
	width: 1035px;
	height: 150px;
	border-color: #aaaaaa;
	border-bottom: 1px solid black;
	border-radius: 10px;
}

   /* ===============================
	3. Styles für Layoutbereiche
   =============================== */

#startseite, #musikseite, #kontaktseite {
	padding-bottom: 5px;
}

#startseite #hintergrundFarbe {
	background-color: black;
	width: 1494px;
	margin: auto;
}	

#starttext {
	text-align: left;
}
#starttext2 {
	text-align: left;
}


.navibereichHorizontal {
	border-radius: 10px;
	color: black;
	padding-bottom: 5px;
	height: 31px;
	min-width: 720px;
	margin: auto;
  	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: 17px;
  	text-align: center;
}	
	.navibereichHorizontal ul {
		margin: auto;
		background-color: #dddddd;
	}
	.navibereichHorizontal li {
		display: inline;
		list-style-type: none;
		margin: auto;
		background-color: white;
	}

	.navibereichHorizontal a
	{
		text-decoration: none;
		color: black;
		padding: 10px;
		border: 1px solid;
		border-radius: 10px;
		border-color: #cccccc;
	}
	.navibereichHorizontal span {
		text-decoration: none;
		color: black;
		padding: 10px;
		border-left: 1px solid;
		border-top: 1px solid;
		border-right: 1px solid;
		border-radius: 10px;
		border-color: #cccccc;
	}
	.navibereichHorizontal a:hover,
	.navibereichHorizontal a:focus {
		background-color: #eeeeee;
		color: black;
		border-bottom-color: white;
		border-bottom: none;
	}
	
.greyBottom {
	margin: auto;
	margin-bottom: 0px;
	margin-top: 30px;
	text-align: center;
	color: #dddddd;
	background-color: #dddddd;
	font-weight: 300;
	max-width: 1035px;
}	
	
#text {
	width: 600px;
	font-weight: 300;
	height: 600px;
	text-align: justify;
}
	#textbereich a {
		border-bottom: 1px dashed #cc0000;
	}
	#textbereich ul li { list-style-type: square; }
	#textbereich a:hover,
	#textbereich a:focus {
		border-bottom: 1px solid #d90000;
	}



#footer {
	border-bottom: 1px solid #cccccc;
	height: 10px;
	margin-bottom: 20px;
}

#end {
	background-color: #dddddd;
	margin: auto;
	color: black;
	padding-bottom: 5px;
	height: 31px;
	width: 1035px;
	margin: auto;
  	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: 17px;
  	text-align: center;
}
.end2 {
	background-color: #dddddd;
	margin: auto;
	color: black;
	height: 25px;
	width: 600px;
	margin: auto;
}
	
#footerTables {
	border-collapse: collapse;
	table-layout: fixed;
	margin: auto;
	font-weight: 300;
	color: black;
	height: 20px;
	width: 80%;
    	max-width: 1035px;
    	min-width: 720px;
    	
}
	#footerTables td {
		width: 100%;
		min-width: 240px;
	}
	#footerTables #subFooter {
        	list-style-type: none;	
        }
	#footerTables #logos li {
		display: inline;
		list-style-type: none;
		margin: 0;
		padding-left: 2px;
		margin-top: -10px;
		float: right;
	}

	#footerTables #t01c02 {
		text-align: center;
		width: 500px;	
	}
	
	
/* slideshow nach tutorial: */
#imgs img 
{
    /*overlays all the imgs */
    /*You see only the first img, for now*/
    left:50% !important;
    right:50% !important;
    margin-left:-300px;/**Half of the total desired width of the div**/
    margin-bottom: -200px;
    width:600px;
    height:360px;
    position:absolute;
    transition: 1s;
    visibility:hidden;
    
    /*we want to show only 1 img at the time*/
}
/*the container */
#Snav 
{
    left:50% !important;
    right:50% !important;
    margin-left:-300px;/**Half of the total desired width of the div**/
    margin-bottom: -200px;
    width:600px;
    height:360px;
    font-weight: 300;
    position:absolute;
    border-top: 1px solid black;
}
/* where the circles are going to be*/
#SnavUp 
{
    display:block;
    width:100%;
    height:20%;
}
#Scircles 
{
    display:block;
    width:5%;
    height:15%;
    margin-right:5%;
    margin-top:2%;
    float:right;        /* is going to be on the right side of the slider*/
}
#Scircles ul 
{
    margin:0;
    float:right;
    display:block;
    width:100%;
    height:100%;
}
#Scircles li
{
    /*we don't need the dots*/
    list-style:none;
    display:block;
    background-color:rgba(0, 0, 0, 1);
    width:25%;
    height:90%;
    margin-left:5%;
    float:left;     /*on the same line*/
    visibility:hidden;
    /*we need circles, not squares*/
    border-bottom-left-radius:25px;
    border-top-left-radius:25px;
    border-bottom-right-radius:25px;
    border-top-right-radius:25px;

}
/*ok , we are done with the SnavUp*/
#SnavMiddle 
{
    display:block;
    width:100%;
    height:15%;
    margin-top:10%;     /*this is up to you , where you want the buttons*/
}
/*left button*/
#Sleft 
{
    width:8%;
    height:100%;
    float:left;
    margin-left:3%;
    opacity:0.8;
}
/*button effect*/
#Sleft:hover 
{
    opacity:0.8;
}
#Sright 
{
    width:8%;
    height:100%;
    float:right;
    margin-right:3%;
    opacity:0.8;
}
#Sright:hover 
{
    opacity:0.8;
}
/*now we have to add the info at the bottom of the slider*/
#SnavBottom 
{
    display:block;
    background-color:rgba(0, 0, 0, 0.8);
    width:100%;
    height:25%;
    position:absolute;
    bottom:0;
    left:0;
}
#SnavBottom p 
{
    font:normal 80% Arial;
    color:#fff;
    position:absolute;
    bottom:0;
    left:0;
    margin-left:3%;
    visibility:hidden;
}


/*that's all , now we need to code the slider, the effect*/
/*slideshow ende*/	

.td.player .playlist {
max-height: initial !important;
overflow-y: initial !important;
}
	
	
   /* ===============================
	4. Sonstige Styles
   =============================== */

/* =============================
	Das Kontaktformular 
   =============================== */
	
form {
	margin: auto;
	background-color: #eeeeee;
	color: black;
	width: 360px;
	padding: 20px;
	padding-left: 120px;
	padding-right: 120px;
	border: 1px solid #8c8c8c;
	text-align: center;
}
label {
	display: block;
	cursor: pointer;
}	
input#absender, textarea {
	width: 360px;
	border: 1px solid #8c8c8c;
	margin-bottom: 1em;
}
textarea { height: 7em; }

input#absender:focus,
textarea:focus {
	background-color: #d9d9d9;
	color: black;
}
   
   
  /* ===============================
	ENDE DES STYLESHEETS
   =============================== */