@import url(https://fonts.googleapis.com/css?family=Josefin+Slab|Amatic+SC|Droid+Sans+Mono|Glegoo|Pinyon+Script|Josefin+Sans);

* { padding: 0px; margin: 0px;}
#header {font-family:Glegoo;width: 100%; background-color: white; height: 30px; padding: 20px; font-size: 8pt; position: fixed;}
#h1 {font-size: 1pt;font-family:Amatic SC;}
#links { position: fixed;font-family:Droid Sans Mono; text-decoration: none;list-style-type: none;margin: 0;padding: 0;background-color: #333; width: 100%; margin-top:  70px;}
.item {float: left;}
.item .link{text-decoration: none; display: block; text-align: center; -webkit-transition-duration: 0.4s;transition-duration: 0.4s; color: white; padding: 10px;}
.item .link:hover { background-color: #555; color: white;}



/* gui */
.button {color: #000;padding-left: 20px; padding-right: 20px; padding-top: 5px; padding-bottom: 5px;font-family:Droid Sans Mono; -webkit-transition-duration: 0.4s;transition-duration: 0.4s;display: inline-block; border: 2px solid #555;background-color: transparent; cursor: pointer; text-decoration: none; font-size: 9pt;}
.button:hover {background-color: #555; color: white;}
.logintesxtfield {width: 100%;  border: solid black 1px; margin-bottom: 10px; padding: 2px; }
td {border-bottom: 1px solid silver; padding: 0.4em 0;}
table {width:100%; margin-top: 20px;}
#kreuz { width: 20px; height: 20px; cursor: pointer;}
th {font-size: 9pt;border-bottom: 1px solid silver; padding: 0.4em 0; }
#nachricht {border-radius: 2px; position: fixed;bottom: 30px; left: 50%; background-color: rgba(0,0,0,0.7);font-family: Droid Sans Mono; padding: 16px; z-index: 1; text-align: center; margin-left: -125px;  min-width: 250px; color: white; display: none;}
.menubuttonelement { width: 20px;height: 2px;background-color: white;margin: 6px 0; margin-left: 5px;}



/* text editor */
#dokoment_titel { border-bottom: 1px solid silver; border-top: none; border-left: none;  border-right: none;  font-size: 18pt; font-family:Droid Sans Mono; margin-bottom: 5px; width: 100%;}
#dokoment_textfeld {border: none; width: 100%; height: 600px;font-family:Droid Sans Mono; font-size: 10pt;}



/*mobil*/
@media screen and (max-width: 500px) {
 .item .link{display: none; }
  {width: 300px;height: 416px; overflow: hidden; margin: 0px;}
 #content { font-family:Droid Sans Mono; padding-right:40px;padding-left: 10px; padding-top:40%; overflow: hidden;}
 .mobil_ausblenden {display: none;}
 
 /*index php */
 .element {border: 1px solid #ccc;padding: 0.5em;float: left;margin: 5px; width: 100%;} 
 /*navigaton bar only for mobile*/
 .overlay {height: 0%;width: 100%;position: fixed;z-index: 1;top: 0;left: 0;background-color: rgb(0,0,0);background-color: rgba(0,0,0,  0.9);overflow-y: hidden;transition: 0.5s; }
 .overlay-content {position: relative;top: 5%; width: 100%;text-align: center;margin-top: 100px;}
 .overlay .link_overlay{padding: 8px;text-decoration: none;font-size: 26px;color: #818181;display: block; transition: 0.3s; font-family:Droid Sans Mono;}
 .overlay :hover, .overlay .link_overlay:focus {color: #f1f1f1;}
 .overlay .closebtn {position: absolute;top: 20px;right: 45px;font-size: 50px;}
 .closebtn {color: #818181;text-decoration: none;}
 /*gui*/
 #text {font-family:Droid Sans Mono;  background-color: white;display: none; padding:40px; padding-top: 40%;  }
 
 
 /* login */ 
#login {font-family:Droid Sans Mono; margin:auto;  width: 100%; background-color: #f1f1f1; padding: 30px;  margin-top: 30%;}
#erforlgs_login {display: block; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); color: white; background-color:#ff4d4d;  font-family:Droid Sans Mono;margin:auto; margin-top: 25%; padding: 30px; width: 300px;}
.logintesxtfield {width: 60%;  border: solid black 1px; margin-bottom: 10px; padding: 2px; }
}

@media screen and (min-width: 500px) {
 .item .link_overlay .overlay{display: none;}
  { width: 300px;height: 416px; margin-left: 40px; overflow: hidden;}
 #content { font-family:Droid Sans Mono; padding-right:40px;padding-left: 40px; padding-top:100px; overflow: hidden; height: 60%;}
 #openbutton_overlay {display: none;}
 #text {font-family:Droid Sans Mono;  background-color: white;display: none; padding: 60px; padding-top: 100px;  }
 
 
 /* login */ 
#login {font-family:Droid Sans Mono; margin:auto;  width: 300px; background-color: #f1f1f1; padding: 30px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-top: 30%;}
#erforlgs_login {display: block; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); color: white; background-color:#ff4d4d;  font-family:Droid Sans Mono;margin:auto; margin-top: 25%; padding: 30px; width: 300px;}
}
#mittelfeld { padding: 100px; font-family:Droid Sans Mono; color: white; }

/* index.php */
.news {border: 1px solid #ccc; padding: 5px; margin-right: 8px; font-size: 12px;}
h3 {font-size: 20pt; text-decoration: none;}
.element {border: 1px solid #ccc;padding: 0.5em;float: left;margin: 5px;}
#nächste_sendung {width: 180px;margin: 5px;}
#nächste_sendung_days {font-size: 60px; text-align: center; margin-top: 20px; font-weight: bold;}
#nächste_sendung_untertietel {text-align: center; letter-spacing: 3px;}
#dashboard_tietel { text-transform: uppercase; margin: 2px;letter-spacing: 3px;}
#live {width: 180px;margin: 5px; background-color:rgb(255, 51, 51);}
#pb { border-radius: 50%; border: 0.5px solid silver;  width: 96px; padding-top: 17px; padding-bottom: 17px; float: left;}
.pb_text { padding-left: 120px; }

/* sendeplan */
.sendplaner { text-decoration: none; font-size: 9pt; color: #e6e6e6; }
#sortable1 {margin-right: 10px; border: 1px solid black; padding: 20px;border-style: dotted; padding-left: 40px;}
#sortable2 {margin-right: 10px; border: 1px solid red; padding: 20px;border-style: dotted; padding-left: 40px;}
#sortable {margin-right: 10px; border: 1px solid black; padding: 20px;border-style: dotted; padding-left: 40px; margin-bottom: 5px;}
#titel {color: silver; font-size: 9pt; margin-bottom: 5px;}
#app {border: solid black 1px; padding: 5px; font-family:Droid Sans Mono; font-size: 10pt; }

/* chat */
#chat { width:300px; height: 350px; background-color: #f1f1f1; margin-bottom: 10px; overflow-y: scroll;}
.chat_item { margin: 6px; width: 110px;padding: 5px;background: #FFFFFF;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; word-wrap: break-word;}
.chat_item_me { margin: 6px; width: 110px;padding: 5px;background: rgb(220,246,197);-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; margin-left:  160px;}
.chatext { font-size: 13px; }
#chat_alleladen { width: 300px; height: 30px; }

#user_chat { overflow-y: hidden;}
.user_chat_user {width: 280px; height: 57px;  background: #f1f1f1;  padding: 10px; -webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px; font-size: 13px; margin-bottom: 5px;}
.userlist_pb { float:left;  border-radius: 50%; border: 0.5px solid silver;  width: 55px; padding-top: 10px; padding-bottom: 10px; margin-right: 10px; }
.userlist_name {float: left;letter-spacing: 3px;}
.userlist_burgername { color: gray; margin-top: 2px;}

.chatdate { color: gray; font-size: 9px; margin-top: 2px;}
#chat_textfield { width: 200px; height: 25px; margin-bottom: 2px; font-family:Droid Sans Mono; font-size: 15px; color: gray; resize: none; padding: 5px 5px; border: 2px solid #ccc;}
#actionbar_chat {width:300px; }
.actionbar_chat_td { border: none;}

/*api referenz */

#code{background-color: black; padding: 2px; font-size: 12px; color: green;}
.referenzschrift{font-size: 12px;}