/* ################### Main ################### */

::-webkit-scrollbar { width:3px; background: #bbbbbb; }

::-webkit-scrollbar-thumb { background:#323374; }

.custom-scroll {
    width: 100%;
    height: 650px;
    overflow: auto;
}

/* Stilisiere die Scrollbar des Containers */
.custom-scroll::-webkit-scrollbar {
    width: 12px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background-color: #4768a7;
    border-radius: 10px;
    border: 3px solid #4768a7;
}


body {
background-image:url('./background.png');
background-attachment:fixed;
font-family: "tahoma"; 
text-align:justify;
font-size: 11px; 
color: #666;
margin: 0px; 
padding-bottom: 50px;
}

b {color:#c9b4d7;}
i {color:#cee5e0;}
s {color:#f3aa66;}
u {color:#aad1d7;}


.image {
opacity: .5;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
}

.image:hover {
opacity: 1;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
}

blockquote{
padding:6px;
background-color: #eee8ef; 
border-left:10px solid #bab6b6;
}

/* ################### Überschriften ################### */

h1 {
	color:#323374;
    font-size:28px;
    font-family: 'Scriptina';
    text-transform:none;
    font-weight:none;
    margin:0px;
    text-shadow: -1px 0 #d9e2e8, 0 1px #d9e2e8, 1px 0 #d9e2e8, 0 -1px #d9e2e8;
    height:58px;
    line-height 15px;
	background: url(h1.png) top left no-repeat;
	border-bottom: none;
	text-align: left;
	margin-bottom:0px;
	padding-left:50px;}
	
@font-face{
font-family: 'Scriptina';
src: url('SCRIPTIN.ttf') format('truetype');
}

h2 {
font-family: calibri;
text-align: right;
font-size: 10px;
text-transform: uppercase;
color: #bbb;
text-shadow: none;
font-weight: none;
margin-top: 0px;
text-decoration: none;
border-top: 2px solid #eee;
line-height: 20px;
}

h3{
font-family: century gothic;
color:#d3b9d7;
text-shadow: 0px 0px 15px #fff;
font-size: 15px; 
font-weight: bold; 
text-align: right;
padding-left:2px; 
border-bottom: 1px solid #d3b9d7; 
display:block;
text-transform: lowercase; 
margin:2px; padding:2px 2px 2px 2px;
}

/* ################### Design ################### */

#container {
width: 1000px;
margin: 0 auto;
margin-top: -8px;
padding:4px;
background-color:#fbfbfb;
border:1px solid #fbfbfb;
box-shadow: 0 0 8px rgba(152,107,142, .3);
}

#header {
margin: 0 auto;
width: 1000px;
height: 400px;
background: url('header.png') no-repeat;
}

#sister {
margin: 0 auto;
width: 120px;
height: 70;
position: absolute;
margin-left: 500px;
margin-top: 300px;
z-index: 99;
}

#content {
top: 395px;
width: 998px;
min-height: 500px;
background: #fff;
padding: 3px 3px 3px 3px;
text-align: left;
}

#footer{
color: #fff;
text-shadow: none;
clear: both;
height: 250px;
padding: 0px;
background:url(FooterBG.png);
margin: 0 auto;
background-color: #ffffff;
}

/* ################### Navi/Links ################### */

a:link, a:active, a:visited {
text-decoration: none; 
color: #736F6E; 
}

a:hover {
color: #ffcaa3;
text-decoration: none; 
}

#sister > a {
opacity: 0.5;}

#sister > a:hover {
transition:0.5s;
opacity: 1;}

#menu {
margin:10px auto;
width:1000px;  /* Breite des Menüs */
}
/* Erste Ebene */
#menu > ul {
margin:0px;
padding:0px;
}
#menu > ul > li {
margin:0px;
padding:0px;
list-style:none;
float:left;
width:16%;
position:relative;
}
#menu > ul > li > a {
display:block;
text-align:center;
font-family: Cinzel Decorative;
font-size: 20px;
font-weight:bold;
text-decoration:none;
background: #fbfbfb; /* Old browsers */
color: #323374;
    text-shadow: -1px 0 #d9e2e8, 0 1px #d9e2e8, 1px 0 #d9e2e8, 0 -1px #d9e2e8;
 margin-top: 5px;
}

#menu > ul > li:first-child > a {
        border-left:none;
}

#menu > ul > li.spacer {
float:none;
clear:both;
}
#menu > ul > li > a:hover {
background: #fff; /* Old browsers */
text-shadow:0px 0px 0px rgba(255,255,255,0.9);
#323374;
    text-shadow: -1px 0 #d9e2e8, 0 1px #d9e2e8, 1px 0 #d9e2e8, 0 -1px #d9e2e8;;
}
/* Zweite Ebene */
#menu > ul > li > ul {
opacity:0;
position:absolute;
margin: 10px 0px 0px 0px;
padding:0px;
width:100%;
}
#menu > ul > li:hover > ul {
opacity:0.95;
-o-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;  
}
#menu > ul > li > ul > li {
margin:0px;
padding:0px;
list-style:none;
}
#menu > ul > li > ul > li > a {
 display:block;
font-family: calibri;
font-size: 9px;
color:#6d6d6d;
text-align:center;
font-weight:none;
text-transform: uppercase;
text-decoration:none;
letter-spacing: 1px;
background: rgba(255,255,255,0.7);
padding:5px;
border:1px solid rgba(255,255,255,0.2);
 border-top:0px solid;
-moz-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.2);
 -webkit-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.2);
 box-shadow: inset -1px -1px 1px rgba(255,255,255,0.2);
}
#menu > ul > li > ul > li > a:hover {
color:#6d6d6d;
background: rgba(255,255,255,0.9);
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

/* ################### CUTIES ################### */


.shootingstars {
outline: none;
font-color: #ffffff;
}
.shootingstars:hover{
  transition:0.5s; transform: rotate(100deg);
 -ms-transform: rotate(100deg);
 -moz-transform: rotate(100deg);
 -webkit-transform: rotate(100deg);
 -o-transform: rotate(100deg);}

a.shootingstars span {
    z-index: 9;
	font-color: #ffffff;
    display:none; 

padding: 10px;
margin-left: -15px;
margin-top: 0px;
text-align: bottom;
}

a.shootingstars:hover span{
	line-height:10px;
    display: inline; 
	position: absolute; 
    border:1px dotted #999; 
	background: url(bgupdates.png);
    z-index: 9;
	font-size: 10px;
	font-color: #ffffff;
	text-shadow: 0 0 5px #fff, 0 0 10px #eacde4, 0 0 60px #eacde4;
	font-weight: lighter;
	letter-spacing: -1px;
	z-index: 9;
    }