/* 
    Created on : 05.07.2019, 19:20:18
    Author     : Harald Grob
*/

@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,500,500italic);

/* min-width = oberhalb einer Breite von XXXpx des Screens sind diese Eigenschaften aktiv.
   min-width => Desktop-Bereich weil größerer Bereich
   min-width => Mobile-First, weil die Hauptdefinitionen (@media ohne Breite) für kleinere Bildschirme passen.
   ----------------------------------------------------------------------------------------
   max-width = unterhalb einer Breite von XXXpx des Screens sind diese Eigenschaften aktiv.
   max-width => Mobile-Bereich weil kleinerer Bereich 
   max-width => Desktop-First, weil die Hauptdefinitionen (@media ohne Breite) für größere Bildschirme passen.
*/

/* Mobile-First - Änderung ab 2024-04-10 */

@media screen {

    html {
        font-family: Ubuntu, arial, verdana, sans-serif;
        font-size: 80%;
    }

    body {
        margin: 0;
        font-size: 13px;
        font-size: 0.875rem;
        background-color: rgba(255, 244, 225, 1);
    }

    .page_start_container {
        margin: 0 auto;
        width: 275px;
    }

    .page_admin_container {
        margin: 0 auto;
        width: 280px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .page_hsg_container {
        padding-left: 20px;
    }

    nav {
        font-size: 1rem;
        padding: 10px;
    }

    header {
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
        text-align: center;
        width: 100%;
        font-size: 18pt;
        font-weight: 500;
    }

    section {
        min-height: 500px;
        padding: 10px 0;
    }

    article {
        padding-top: 5px;
    }

    footer {
        text-align: center;
        margin-bottom: 70px;
    }

    .img {
        width: 100%;
    }

    .img404 {
        max-width: 600px;
    }

    h1 {
        font-weight: bold;
        font-size: 1.4rem;
    }

    .folder {
        margin-top: 30px;
        width: 100%;
        text-align: center;
        font-size: 1.2rem;
    }

    .force {
        padding: 10px 0;
        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
    }

    .plain {
        display: inline-block;
        margin-top: 30px;
        width: 100%;
        text-align: center;
        font-weight: bold;
        color: white;
        background: lightgrey;
    }

    .imgtextcontainer {
        margin-bottom: 20px;
    }

    .thumb {
        width: 100%;
        display: block;
    }

    .textblock {
        display: block;
    }

    .datablock {
        clear: both;
        display: block;
        border: 1px solid lightgray;
        padding: 5px;
    }

    hr {
        margin-top: 20px;
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    }

    hr.index {
        margin-top: 20px;
        margin-bottom: 25px;
    }

    form#login {
        margin: 0 auto;
        width: 300px;
    }

    form#login input[type=text], input[type=password] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    form#login input[type=submit] {
        width: 100%;
        background-color: #4CAF50;
        color: white;
        font-size: 1.2rem;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    form#login input[type=submit]:hover {
        background-color: #45a049;
    }

    form#delete input[type=submit] {
        width: 100%;
        padding: 5px 0;
        margin: 10px 0;
    }

    form#confirm input[type=submit] {
        width: 100%;
        padding: 5px 0;
        margin: 5px 0;
    }

    form#back input[type=submit] {
        width: 300px;
        padding: 5px 0;
        margin-bottom: 10px;
    }

    form#edit input[type=submit] {
        margin-top: 5px;
        background-image: url(../img/edit32.png);
        width: 32px;
        height: 32px;
        border: none;
    }
    
    form#imgupload input[type=file], input[type=text] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    
    form#imgupload input[type=submit] {
        display: block;
        width: 100%;
        background-color: #4CAF50;
        color: white;
        font-size: 1.2rem;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    
    form#changetext label {
        margin-top: 10px;
        display: block;
    }
    
    form#changetext textarea {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    
    form#changetext input[type=submit] {
        width: 100%;
        background-color: #4CAF50;
        color: white;
        font-size: 1.2rem;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    form#picUP, form#picDOWN {
        display: inline;
    }
    
    form#picUP input[type=submit], input[type=submit] {
        width: 50px;
        padding: 5px 0;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    form#picUP input[type=submit] {
        float: left;
    }

    form#picDOWN input[type=submit] {
        float: right;
    }

    /*
    textarea {
        padding: 3px 5px;
        width: 290px;
    }
    */

    span.filename {
        font-size: 80%;
    }

    .border_red {
        border: 1px solid red;
    }

    .text-center {
        text-align: center;
    }

    .mt5 {
        margin-top: 5px;
    }

    .mt10 {
        margin-top: 10px;
    }

    .mb10 {
        margin-bottom: 10px;
    }

    .p10 {
        padding: 10px;
    }

    .impressum {
        font-size: 85%;
    }

    .ip {
        display: inline-block;
    }

    .href {
        text-decoration: none;
        color: #0000F9;
    }

    a:hover {
        text-decoration: underline;
        color: lightblue;
    }

} /* Ende @media */



@media screen and (min-width: 320px) {

    .page_start_container {
        width: 315px;
    }

    .page_admin_container {
        width: 315px;
    }

    .link {
        display: inline;
    }

} /* Ende @media screen min-width 320px */

@media screen and (min-width: 480px) {

    html {
        font-size: 85%; /* bei 100% waere das Browserdefault, 16px  */
    }

    .page_start_container {
        width: 470px;
    }

    .page_admin_container {
        width: 470px;
    }

} /* Ende @media screen min-width 480px */

@media screen and (min-width: 768px) {

    html {
        font-size: 95%; /* bei 100% waere das Browserdefault, 16px  */
    }

    .page_start_container{
        width: 750px;
    }

    .page_admin_container {
        width: 550px;
    }

} /* Ende @media screen min-width 768px */

@media screen and (min-width: 1024px) {

    html {
        font-size: 110%; /* bei 100% waere das Browserdefault, 16px  */
    }

    .page_start_container{
        width: 850px;
    }

} /* Ende @media screen min-width 1024px */

@media screen and (min-width: 1200px) {

    html {
        font-size: 120%; /* bei 100% waere das Browserdefault, 16px  */
    }

} /* Ende @media screen min-width 1200px */