@import url(https://fonts.googleapis.com/css?family=Bubblegum+Sans|Patrick+Hand|Chewy|Coming+Soon|Handlee);

/*@font-face {
/*  font-family: MyFont; 
/*  src: url('Trinidatat-webfont.eot');
/*  src: url('Trinidat.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
/*       url('Trinidat.woff') format('woff'),                     /* Moderne Browser */
/*       url('Trinidat.ttf') format('truetype'),                  /* Safari, Android, iOS */
/*       url('Trinidat.svg#svgFontName') format('svg');           /* Ältere iOS-Geräte */
/*}*/
    
body{
  background-color: #FFF099;
  margin: 0;
  padding: 0;
  /*font-family: 'MyFont';*/
  font-family: TrajanPro-Regular, 'Lucida Grande', sans-serif;
  font-family: 'Patrick Hand', cursive;
  /*font-family: 'Bubblegum Sans', cursive;*/
  /*font-family: 'Chewy', cursive;*/
  /*font-family: 'Handlee', cursive;*/
  font-size: 1.3em;
}

img{
  border:0px;
}

#clouds_n1{
  height: 180px;
  background-color: transparent;
  background-image: url('../pics/bg-clouds-n1.png');
  background-repeat: repeat-y repeat-x;
  background-attachment: scroll;
  background-position: left top;
  text-align: center;
  position: fixed;
  z-index: 9;
  left: 0px;
  right: 0px;
}

#clouds_n2{
  height: 80px;
  background-color: transparent;
  background-image: url('../pics/bg-clouds-n2.png');
  background-repeat: repeat-y repeat-x;
  background-attachment: scroll;
  background-position: left top;
  text-align: center;
  position: fixed;
  z-index: 10;
  top: 100px;
  left: 0px;
  right: 0px;
}

#verlauf{
  height: 120px;
  background-color: transparent;
  background-image: url('../pics/verlauf.png');
  background-repeat: repeat-x;
  background-attachment: scroll;
  background-position: left top;
  background-size: 100% 120px;
  text-align: center;
  position: fixed;
  z-index: 10;
  top: 180px;
  left: 0px;
  right: 0px;
}

#banner{
  position: fixed;
  z-index: 20;
  top: 20px;
  left: 50%;
  margin-left:-410px;
}

#gras{
  background-color: transparent;
  background-image: url('../pics/gras.png');
  background-repeat: repeat-x;
  background-attachment: scroll;
  background-position: left bottom;
  /*background-size: 100% 120px;*/
  position: fixed;
  z-index: 20;
  bottom: 0px;
  width: 100%;
  height: 80px;
}

#menu{
  position: fixed;
  z-index: 20;
  background-color: transparent;
  left:20px;
  top:100px;
}

.button{
  position: absolute;
  z-index:22;
  cursor: pointer;
}

.buttontext{
  position:absolute;
  z-index: 27;
  top:50%;
  text-align:center;
  width:100%;
  margin-top:-0.8em;
  /*font-size: 1.0em;*/
}

#infobox{
  position: fixed;
  z-index: 20;
  background-color: transparent;
  right:220px;
  top:290px;
  height:331px;
/* height:infobox-middle + 31px */
}

.infolink a:link, a:visited, a:hover, a:active{
  color: #8A0CB8;
  background-color: transparent;
  text-decoration: none;
}

#impressum{
  position: fixed;
  z-index: 30;
  background-color: transparent;
  bottom:20px;
  right:30px;
  float:right;
  height:15px;
  font-size:0.8em;
}

#impressum_text{
  background-color: transparent;
  font-size:0.85em;
}

/*
#lolly1{
  height: 100px;
  width: 100px;
  position: absolute;
  background-repeat: no-repeat;
  background-attachment: scroll;
  z-index: 20;
  top: 150px;
  left: 150px;
}

#lolly2{
  height: 120px;
  width: 120px;
  position: absolute;
  background-repeat: no-repeat;
  background-attachment: scroll;
  z-index: 20;
  top: 300px;
  left: 60%;
}

#lolly3{
  height: 150px;
  width: 150px;
  position: absolute;
  background-repeat: no-repeat;
  background-attachment: scroll;
  z-index: 20;
  top: 600px;
  left: 12%;
}

#lolly4{
  height: 150px;
  width: 150px;
  position: absolute;
  background-repeat: no-repeat;
  background-attachment: scroll;
  z-index: 20;
  top: 60px;
  left: 70%;
}
*/
#clouds_n2 h1{
  padding-top:35px;
  color:white;
  font-size:35px;
  position: absolute;
  z-index: 10;
  top: -50px;
  left: 50%;
  margin-left: -220px;
}

#content{
  /*background-color:#FFFFFF;*/
  /*height:500px;
  width:60px;*/
  position: absolute;
  z-index: 5;
  top: 200px;
  left: 15%;
  right: 15%;
  padding-top: 50px;
  padding-left: 50px;
  padding-right: 50px;
  margin:25px auto 0 auto;
  /*-moz-border-radius:10px;
  -webkit-border-radius:10px;*/
}

.specialcontent p, a, h3{
  /*background-color:#FFFFFF;*/
  /*height:500px;
  width:60px;*/
  /*left: 15%;
  right: 15%;
  padding-top: 50px;
  padding-left: 50px;
  padding-right: 50px;
  margin:25px auto 0 auto;
  text-align: left;*/
  /*-moz-border-radius:10px;
  -webkit-border-radius:10px;*/
}

#xcontent{
  box-shadow: 8px 8px 8px #FAC475,
             -8px 8px 8px #FAC475,
              8px -8px 8px #FAC475,
             -8px -8px 8px #FAC475;
}

.letters{
  position:absolute;
  height:100px;
  width:100px;
  top:120px;
  z-index:200;
  border:0px;
  margin-left:150px;
}

.limbs{
  position:absolute; 
  z-index:180;
  border:0px;
  margin-left:150px;
}

#xmas{
  position:absolute;
  z-index:1001;
  top:-3px;
  left:57px;
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

.ftext{
  font-family: TrajanPro-Regular, 'Lucida Grande', sans-serif;
  font-family: 'Patrick Hand', cursive;
  font-size: 0.8em;
}

#fbutton1{
  cursor: pointer;
  height:36px; 
  width:125px;

  font-family: TrajanPro-Regular, 'Lucida Grande', sans-serif;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.0em;
  font-weight: normal;

  -moz-box-shadow:    3px 3px 3px #606060;
  -webkit-box-shadow: 3px 3px 3px #606060;
  box-shadow:         3px 3px 3px #606060;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border-width: 3px;
  border-style: solid;
  border-color: #F4A6C5;
  background-color: #F8D2DB;
}

#fbutton3{
  cursor: pointer;
  height:36px; 
  width:125px;

  font-family: TrajanPro-Regular, 'Lucida Grande', sans-serif;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.0em;
  font-weight: normal;

  -moz-box-shadow:    3px 3px 3px #606060;
  -webkit-box-shadow: 3px 3px 3px #606060;
  box-shadow:         3px 3px 3px #606060;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border-width: 3px;
  border-style: solid;
  border-color: #F8B24B;
  background-color: #FFF099;
}

.newsbox0{
  padding: 10px;
  -moz-box-shadow:    3px 3px 3px #606060;
  -webkit-box-shadow: 3px 3px 3px #606060;
  box-shadow:         3px 3px 3px #606060;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border-width: 3px;
  border-style: solid;
  border-color: #B2D61B;
  background-color: #D2E973;
}

.newsbox1{
  padding: 10px;
  -moz-box-shadow:    3px 3px 3px #606060;
  -webkit-box-shadow: 3px 3px 3px #606060;
  box-shadow:         3px 3px 3px #606060;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border-width: 3px;
  border-style: solid;
  border-color: #F4A6C5;
  background-color: #F8D2DB;
}

.newsbox2{
  padding: 10px;
  -moz-box-shadow:    3px 3px 3px #606060;
  -webkit-box-shadow: 3px 3px 3px #606060;
  box-shadow:         3px 3px 3px #606060;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border-width: 3px;
  border-style: solid;
  border-color: #8EC1DA;
  background-color: #C0DEED;
}

.newsbox3{
  padding: 10px;
  -moz-box-shadow:    3px 3px 3px #606060;
  -webkit-box-shadow: 3px 3px 3px #606060;
  box-shadow:         3px 3px 3px #606060;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border-width: 3px;
  border-style: solid;
  border-color: #F8B24B;
  background-color: #FFF099;
}



#################################################
##                                        ##
##               Admin Style              ##
##                                        ##
#################################################

.admin_main {
position:absolute;
left:250px;
top:35px;
}

.about{
font-family:Verdana,Arial,sans-serif;
font-size: 9px;
color:#171717;
text-align:left;
padding: 5px;
bottom:5px;
right:5px;
position:fixed;
z-index:100;
overflow-x:hidden;
}

.infotxt{
font-family:Verdana,Arial,sans-serif;
font-size: 9px;
color:#171717;
text-align:left;
overflow-x:hidden;
}

.login_edt {
padding:0;
margin:0;
width:120px;
/*
height:16px;
font-size:12px;
*/
color:#DCDCDC;
}

.login_btn {
padding:0;
margin:0;
margin-left:10px;
width:100px;
height:20px;
font-size:10px;
font-weight:bold;
border: 1px solid #171717;
background-color:#DCDCDC;
color:#171717;
}

.textarea {
padding:0;
margin:0;
width:80%;
font-size:12px;
color:#DCDCDC;
}

.select {
padding:0;
margin:0;
font-size:10px;
color:#DCDCDC;
}

.admin_button {
padding:0;
margin:0;
width:80%;
height:20px;
font-size:10px;
border: 1px solid #171717;
background-color:#DCDCDC;
color:#171717;
}

.filetype {
padding:0;
margin:0;
width:400px;
height:20px;
font-size:10px;
border: 1px solid #171717;
background-color:#DCDCDC;
color:#171717;
}

.info_box {
position:absolute;
top:20px;
left:20px;
border:1px solid #171717;
background-color:#DCDCDC;
color:#171717;
}

.auth_box {
position:absolute;
top:150px;
left:50px;
}

.link{
text-decoration:none;
color:#171717;
cursor:pointer;
}

.checkbox0[type="checkbox"] {
  display:none;
}
.checkbox0[type="checkbox"] + label::before {
  width: 35px;
  height: 40px;
  background: url("../pics/checkbox_blue.png");
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
}
.checkbox0[type="checkbox"]:checked + label::before {
  background: url("../pics/checkbox_blue_checked.png");
}