html, body{
margin:0;
padding:0;
font-family: 'Calibri', Arial, Verdana, Times New Roman;
background: url('images/back.jpg') repeat;
background-attachment:fixed;
height: 100%;
}

#maincontainer{
width: 1024px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
margin-bottom: 30px;
background: #EFEFEF;
-moz-box-shadow: 0px -0px 14px #000;
-webkit-box-shadow: -0px 0px 14px #000;
-o-box-shadow: 0px -0px 14px #000;
-ms-box-shadow: 0px -0px 14px #000;
box-shadow: 0px -0px 14px #000;
}

#topsection{
background: url('images/header.png') no-repeat;
height: 281px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 0px;
}

#contentwrapper{
float: left;
width: 1004px;
height: auto;
min-height: 832px;
background: #EFEFEF;
padding: 10px;
}

#contentcolumn{
margin-right: 0; /*Set left margin to LeftColumnWidth*/
}

#content-left {
float: left;
width: 300px; /*Width of right column*/
min-height: 832px;
margin-left: -300px; /*Set left margin to -(RightColumnWidth) */
padding-top: 24px;
}

#footer {
clear: left;
width: 100%;
color: #000;

padding: 30px 0;
border-top: 1px dotted black;
background: #DFDFDF;
}



.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

#greyzone {
background: url('images/graupunkt.png') #CFCFCF;
margin:0;
margin-left:-20px;
margin-top: -10px;
color: #000;
padding:0;
width:1024px;
overflow: hidden;
}

#indexzone {
background: #9f9f9f;
width:39%;
padding:5px;
height: auto;
border:1px solid #000;
border-top:0;
margin-left:37px;
border-radius: 0 0 50px 50px;
min-height:270px;
position:relative;

}

#ueberschriftblock {
width:48%;
padding:5px;
height:auto;
font-size:20pt;
font: bold;
background: url('images/uberschrift.png');
color: #fff;
margin-top:-5px;
margin-left: -5px;
border-radius: 0 0 50px 50px;
text-align:center;
}

/* Ca3er style */
.cu3er_resize { width:670px; margin:0 auto; padding:10px 0 0px 0; background:url(images/simple_bg.gif) no-repeat bottom;}
#cu3er-container { width:670px; outline:0; }
.cu3er_resize_sub { width:670px; background:#282828 url(images/simple_bg.gif) no-repeat bottom; margin:0 auto; padding:0;}
.cu3er_resize_sub h2 { font:normal 48px Arial, Helvetica, sans-serif; color:#fff; padding:15px 0 40px 20px; margin:0;}
/*------------*/

#titel-content {
width:666px;
height: 30px;
background: url('images/titel_content.png') repeat-x;
padding-left: 5px;
font-size: 18pt;
color:#EFEFEF;
margin-top:30px;
margin-left: 1px;
}

#titel-leftcontent {
height: 30px;
background: url('images/titel_content.png') repeat-x;
padding-left: 5px;
font-size: 18pt;
color:#EFEFEF;
margin-top:30px;
}

ul.sidebar { list-style-type: square; }

#menusection{
background: transparent;
height: 42px; /*Height of top section*/
margin-top:-81px;
}

#shoutbox {width:649px; min-height:250px;background:#9F9F9F;margin-left:1px;padding:10px;border-left:1px solid #828282;border-right:1px solid #828282;border-bottom:1px solid #828282;color:#fff;}

/* Navigation */
.purple #slatenav{height:42px;font-size:11px;font-weight:bold;background:#5F5F5F;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.purple #slatenav ul{margin:0px;padding:0;list-style-type:none;}
.purple #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.purple #slatenav ul li a{display:block;float:left;color:#aaa;text-decoration:none;padding:14px 15px 0 22px;height:28px;}
.purple #slatenav ul li a:hover {color:#fff;background:transparent  no-repeat top center;}
.purple #slatenav ul li a.current{color:#fff;background:transparent  no-repeat top center;text-decoration:underline;}
.purple #slatenav ul li ul {
        position: absolute;
        width: 15em;
        left: -999em;
        background: #5F5F5F;-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border-radius: 0 0 30px 30px;
}
.purple #slatenav ul li:hover ul {
        left: auto;
        margin-left: 0em;
        margin-top: 42px;
}

.purple #slatenav ul li:hover ul li:first-child {
        margin-top: 0px;

}
/* erforderlich um hasLayout bei IE 7 zu erzeugen */
.purple #slatenav ul li li {
        overflow: hidden;
}
/* Navigation-END */

a:link   {
         font-weight:bold;
         color:#1C8DFF;
         text-decoration:none;
         }

a:visited {
         font-weight:bold;
         color:#1C8DFF;
         text-decoration:none;
         }

a:focus {
         font-weight:bold;
         color:red;
         text-decoration:underline;
         }

a:hover {
         font-weight:bold;
         color:#FF5F00;
         text-decoration:none;
         }

a:active {
         font-weight:bold;
         color:#FF00FF;
         text-decoration:underline;
         }

.shadow-text-news {
                  text-shadow: 3px 3px 5px gray;
                  font: bold italic 20pt "Calibri", Arial, Germand;
                  }

.shadow-text-imp {
                 text-shadow: 3px 3px 5px gray;
                 font-size: 40pt;
                 }

.playlists-name  {
                 font: bold italic 12pt "Calibri", Arial, Germand;
                 color: #8971FD;
                 a:link: #1C8DFF;
                 a:visited: #1C8DFF;

                 }

#playlist-id {position:absolute;margin-top:-380px;margin-left:365px;width:300px;}

p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

p#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}