@import url(genericons/genericons.css);

*
{
    padding:0;
    margin:0;    
    box-sizing:border-box;
    transition:all 1s linear;    
}

body, input, select, p, button, legend, textarea, label, table
{
    font-size:1rem;
}


body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    font-family: "Lucida Grande", Verdana, Sans-Serif;
    background: #e0e0e2;
    color: #475454;
}

header
{
    display:-webkit-flex;
    display:flex;

    -webkit-flex-grow:0;
    flex-grow:0;

    -webkit-flex-shrink:0;  
    flex-shrink:0;/*Item soll sich nicht verkleinern / item remain a fixed size*/    
       
    -webkit-flex-direction:row;
    flex-direction:row;

    -webkit-justify-content:center;
    justify-content:center;

    -webkit-align-items:center;
    align-items:center;

    -webkit-align-content:center;
    align-content:center;

    padding:10px;
    padding-top:20px;
}

main
{
    display:-webkit-flex;
    display:flex;

    -webkit-flex-grow:1;
    flex-grow:1;

    -webkit-flex-shrink:0;
    flex-shrink:0;          
    
    -webkit-flex-direction:column;
    flex-direction:column;

    -webkit-justify-content:flex-start;
    justify-content:flex-start;

    -webkit-align-items:center;
    align-items:center;

    -webkit-align-content:center;
    align-content:center;

    width:100%;
}

footer
{   
    display:-webkit-flex;
    display:flex;

    -webkit-flex-grow:0;
    flex-grow:0;
     
    -webkit-flex-shrink:0; 
    flex-shrink:0;   
    
    -webkit-flex-direction:row;
    flex-direction:row;

    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;

    -webkit-justify-content:center;
    justify-content:center;

    background:#777;
    padding:5px;    
}

footer div
{
    display:-webkit-flex;
    display:flex;   
    
    -webkit-flex-direction:row;
    flex-direction:row;

    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;

    -webkit-justify-content:center;
    justify-content:center;
    
    color:#fff;
    font-size:0.8rem;
    text-align:center;
}

footer a
{
    color: #fff;
}

/*BUTTONS*/ 
button
{
    border:0;
    cursor:pointer;/*forces the cursor to change to a hand when the button is hovered*/
    outline:none;/*avoid the dotted line in Firefox*/
    background:lightcoral;
    padding:5px;
    padding-left:15px;
    padding-right:15px;
    color:#475454;
    font-size:1rem;    
}

button:hover
{
    color:green;
}

button::-moz-focus-inner/*avoid the dotted line in Firefox*/
{
  border: 0;
}

footer button
{
    background:transparent;    
    padding:0px;
    padding-left:5px;
    padding-right:5px;
    color:#fff;
}

footer button:hover
{
    color:lightgreen;
}

button div
{
    display:-webkit-flex;
    display:flex;

    -webkit-flex-direction:row;
    flex-direction:row;

    -webkit-justify-content:center;
    justify-content:center;

    -webkit-align-items:center;
    align-items:center;
}

h1
{    
    font-size:1.4rem;    
    text-align:center;
    font-weight:normal;
    color:#7C8989;
}

h2
{    
    font-size:1.1rem;
    margin-bottom:10px;
}

h3
{    
    font-size:1.0rem;
    margin-top:20px;
    margin-bottom:10px;
}

iframe
{
    width:100%;
    height:100%;
    border:0;
    overflow:hidden;
    margin:0;
}

.flex_h
{    
    display:none;

    -webkit-flex-direction:row;
    flex-direction:row;

    -webkit-justify-content:center;
    justify-content:center;

    -webkit-align-items:center;
    align-items:center;

    -webkit-flex-wrap:wrap;    
    flex-wrap:wrap;    
    
    width:100%;    
}

.flex_v
{    
    display:none;    

    -webkit-flex-direction:column;
    flex-direction:column;

    -webkit-justify-content:center;
    justify-content:center;

    -webkit-align-items:center;
    align-items:center;

    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    
    width:100%;
    padding:20px;
}

.flex_v p
{
    max-width:100%;
    text-align:left;
}

.flex_v div
{
    max-width:100%;
}

.flex_v_left
{    
    display:-webkit-flex; 
    display:flex;

    -webkit-flex-direction:column;
    flex-direction:column;

    -webkit-justify-content:center;
    justify-content:center;

    -webkit-align-items:flex-start;
    align-items:flex-start;

    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    
    width:100%;
    padding-left:3%;
    padding-right:3%;
}

.flex_v_left p
{
    max-width:100%;
    text-align:left;
}

.flex_v_left div
{
    max-width:100%;
}

.div_rect
{    
    margin-top:40px;

    display:-webkit-flex;
    display:flex;

    -webkit-flex-direction:column;
    flex-direction:column;

    -webkit-justify-content:center;
    justify-content:center;

    -webkit-align-items:flex-start;
    align-items:flex-start;
}

.flex_v_start
{    
    display:-webkit-flex;
    display:flex;
    
    -webkit-flex-direction:column;
    flex-direction:column;
    
    -webkit-justify-content:space-between;
    justify-content:space-between;
    
    -webkit-align-items:flex-start;
    align-items:flex-start;
    
    -webkit-flex-wrap:wrap; 
    flex-wrap:wrap;
}

.controls_container
{    
    display:-webkit-flex;
    display:flex;
    
    -webkit-flex-direction:row;
    flex-direction:row;
    
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    
    -webkit-justify-content:center;
    justify-content:center;

    margin:10px;
}

.controls_container input
{
    padding:2px;    
}

.control_item
{    
    display:-webkit-flex;
    display:flex;
    
    -webkit-flex-direction:row;
    flex-direction:row;
    
    -webkit-flex-wrap:nowrap;
    flex-wrap:nowrap;
    
    -webkit-justify-content:center;
    justify-content:center;
    
    -webkit-align-items:center;
    align-items:center;

    margin:10px;
}

.control_item label
{    
    margin-right:5px;
}

#info_no_matches
{
    display:none;
}

/*Tabelle*/
table
{ 
    padding:4px;
    font-size:0.9em;    
    border-collapse: collapse;    
}

table th, td
{
    padding:4px;    
    text-align:left;    
}

/*Linien zwischen den Zeilen*/
table tr 
{
    border:none;
} 

#image_list_foto
{    
    display:-webkit-flex;
    display:flex;
    
    -webkit-flex-direction:row;
    flex-direction:row;
    
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    
    -webkit-justify-content:center;
    justify-content:center;

    width:100%;
}

#image_list_foto figure
{
    margin:3px;
    opacity:0.8;
}

#image_list_foto figure:hover
{
    opacity:1;
}

#image_list_foto figcaption
{
    display:none;
}

#image_list_foto img
{
    height:130px;
}

/*Detail-Anzeige der Bilddaten*/
#article_show_details
{
    display:none;    
    
    -webkit-flex-direction:row;
    flex-direction:row;
    
    -webkit-justify-content:center;
    justify-content:center;
    
    -webkit-align-items:flex-start;
    align-items:flex-start;

    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;

    margin-top:10px;
    padding:20px;
    max-width:100%;    
}

#show_details_img
{    
    max-width:100%;
    height:auto;
    width:100%;
    object-fit: cover;

    margin-right:20px;
    margin-bottom:10px;
    box-shadow: 5px 5px 4px #777;
}

#show_details_button_back
{
    padding:3px;
    padding-left:10px;
    padding-right:10px;
    background:transparent;
    border-color:#999;
    border-width:1px;
    border-style:solid;
}

.ce_text 
{
    font: 11px Verdana,Helvetica,Arial,sans-serif;    
    letter-spacing: .04em;
    margin-top:1.4rem;
}

    .ce_text p
    {
        margin-top: 0.4rem;
    }

ul
{
font-size:1rem;
}