@import url(desktop.css);
@import url(bildschirm.css);
@import url(reset.css);

/* =====================================
@font-face Regel wichtig: Pfad anpassen!
(hier fonts-Ordner) Anführungszeichen
beachten!
=======================================*/



@font-face {
    font-family: 'open_sanslight';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  

@font-face {
    font-family: 'sinkin_sans200_x_light';
    src: url('fonts/SinkinSans-200XLight-webfont.eot');
    src: url('fonts/SinkinSans-200XLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/SinkinSans-200XLight-webfont.woff') format('woff'),
         url('fonts/SinkinSans-200XLight-webfont.ttf') format('truetype'),
         url('fonts/SinkinSans-200XLight-webfont.svg#sinkin_sans200_x_light') format('svg');
    font-weight: normal;
    font-style: normal;

}
  



/*============================================
1. Allgemeine Styles
============================================= */


body{
 font-family: 'open_sanslight';
 font-size: 87.5%;
 line-height: 1.6em;
 /*background-color: #f0efea;*/
 background-color: #fff;
 color: gray;
 margin: 0px;
 text-align: center; /* Zentrierung IE */
  }

h1{
 font-family: 'sinkin_sans200_x_light';
 font-size: 180%;
 letter-spacing: 0.2em;
  }

h2{
 /*font-size: 120%;*/
 font-size: 95%;
 font-weight: normal;
 letter-spacing: 0.1em;
 margin-bottom: 0.6em;
 color:gray;
  }

h3{
 font-size: 105%;
 font-weight: normal;
 margin-bottom: 0.6em;
 color:gray;
  }

hr{
 border: none; 
 border-top: 1px solid #adadac;
 color: #fff;
 background-color: #fff;
 height: 1px;
 margin-right: 30px;
 margin-bottom: 50px;
 margin-left: 30px;
  }

.linie{
 
 margin-left: auto;
 margin-right: auto;
 margin-top: 10px;
 margin-bottom: 10px;
  }

.gebiet{
color: #ff6d0b;
  }


/*=======================================
2. Styles für einzelne Layoutbereiche
======================================== */


#kopfbereich{
 text-align: left;  /* IE */
 margin-top: 50px;
 margin-bottom: 100px;
 margin-left: 50px;
  }
 

#navibereich{
 text-align: left; /* IE */
 text-align: center;
 margin-right: auto;
 margin-left: auto;
  }

#navibereich span{
 text-decoration: underline;
  }


/*#linkbilder{
 text-align: left;  
 width: 600px;
 margin-top: 75px;
 margin-right: auto;
 margin-left: auto;
}


#linkbilder img{
 margin-bottom: 10px;
 box-shadow: 10px 10px 10px silver;
 border-color: #f4f2f2;
 border-width: 1px;
 border-style: solid;
 background-color: #fff;
 padding: 10px;
 margin-bottom: 5px;
}*/


#kleinebilder{
 text-align: left;  /* Inhalt wieder links, untern mit margin auto wieder zentriert */
 width: 200px;
 margin-top: 75px;
 margin-right: auto;
 margin-left: auto;
}

#kleinebilder img{
margin-bottom: 5px;
}


#blog{
 text-align: left;  /* Inhalt wieder links, untern mit margin auto wieder zentriert */
 width: 600px;
 background: transparent;
 margin-top: 75px;
 margin-left: auto;
 margin-right: auto;
 text-align: left;
}

/*
#container{
 border: 1px solid #ff6d0b;
 margin: 5px 0px;
 padding: 1px;
 width: 18%;
 text-align: left;
 text-align: center;
 }*/


#fussleiste{
 text-align: left /* IE */
 text-align: center;
 color: gray;
 clear: right;
 margin: 50px;
  }
  
  
#twelve-point-star{
  text-align: left;
  }

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


#kopfbereich a{
 text-decoration: none;
 color: #000;
  }
  
#navibereich a{
 text-decoration: none;
 color: #000;
  }
  

#fussleiste a{
  text-decoration: none;
 color: gray;
  }


a{
 text-decoration: underline;
 color: gray;
  }
    



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

a:hover{
 color: #99c7b4;
  }


4. Styles für Pfeil

#pfeil{
margin-right: auto;
margin-left: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 13px 20px 13px;
border-color: transparent transparent #99c7b4 transparent;
}

5. Styles für Twelve-Point-Star
 

#twelve-point-star {
   height: 100px;
   width: 100px;
   background: #fcc9a6;
   margin-left: 106px;
   margin-bottom: 25px;   
     }
 
#twelve-point-star:before {
   height: 100px;
   width: 100px;
   background: #fcc9a6;
   content:"";
   position: absolute;
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
     }
 
#twelve-point-star:after {
   height: 100px;
   width: 100px;
   background: #fcc9a6;
   content:"";
   position: absolute;
   -moz-transform: rotate(-30deg);
   -webkit-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
     }

#twelve-point-star span{
   display: block;
   margin-top: 35px;
   margin-left: 2px;
   font-size: 27px;
   position: absolute;
   z-index: 2;
    }

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