/* --- BASICS --- */
body {
    margin:                 0 auto;
    padding:                0;
    background-color:       #D3D3D3;
    /*  background-image:       url("../img/kun06.png");  */    
    background-repeat:      no-repeat;
    background-position:    right top;
    font-family:            'Source Sans Pro', sans-serif;
    font-size:              1em;      }


img {
    border:                 0px;      }
a {
    text-decoration:        none;     }
a:visited, a:link {
    color: gray;
}

.left {
    text-align: left !important;
}
.center {
    text-align:             center;   }
.right {
    text-align:             right;    }


.light {                           
    color:                  silver; }
.dark {
    color:                  gray;    }

li {
    list-style-type: circle;
}

/* --- ELEMENTS --- */
      
#content {
    margin: 0 auto;
    height: auto;
    width: 80%;       
    max-width: 1200px;
}


#logo {
    margin-top: 1em;
    margin-bottom: 1px; /* because of dotting */
    width: 18em;
    height: 6em;
}
#logo a {
    color:                  inherit;    }


#menu {
    margin-top:             0em;        
    margin-bottom:          2em;
    border-right:           1px gray dotted;
    width:                  18em;
    height:                 42em;            
}
#menu .item {
    line-height:            1.1em;
    font-size:              3.5em;
    font-weight:            normal;     }
#menu .item a {
    color:                  inherit;    }
#menu .item a:hover {
    color:                  white;      }


#menu_small {
    padding-bottom: 1em;
    border-bottom: 1px gray dotted;
    text-align: center;
}
#menu_small .item {
    font-size:  2em;
    line-height: 1.1em;
    font-weight: normal;
}
#menu_small .item a {
    color: inherit;
}
#menu_small .item a:hover {
    color: white;
}


#page {
    font-size:              1.4em;
    text-align:             justify;    
    color:                  #606060;     
}
#page a:hover {
    text-decoration: none;
    color: white;           }


.sizes {
    border-collapse: collapse;
}
.sizes .header {
    background-color: gray;
    color: white;
}
.sizes td {
    border: 1px solid #606060;
    padding-left: .4em;
    padding-right: .4em;
    text-align: center;
}


/* standardní rozlišení */
@media screen and (min-width: 1401px) {
    #logo {
        border-right: 1px gray dotted;
    }
    #menu {
    }
    #menu_small {
        display: none;
    }
    #page {
        margin-top:             -35.5em;
        margin-left:            11.5em; 
        padding-left:           5%;        
    }
}
/* menší rozlišení == menu se zobrazí nahoře */
@media screen and (max-width: 1400px) {
    #logo {
        border: 0;
    }
    #menu {
        display: none;
    }
    #menu_small {
    }
    #page {
        margin-top: 0em;
        margin-left: 0em;
        padding-top: 0.5em;
        padding-left: 0em;
    }
}


#popup {
    position: absolute;
    margin-top: 300px;
    margin-left: 35%;
    z-index: 10;
    width: 30%;
    padding: 30px 30px 30px 30px; 
    background-color: white;
    border-radius: 10px;
    border: 2px solid gray;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
    font-size: 1.4em;
    text-align: justify;
    color: gray;
}
#popup .close {
    margin-top: -2em;
    margin-right: -0.65em;
}

/* REFERENCE */
.reference_thumb {
    padding-right: 1em;
    float: left;
}

.reference {
    min-height: 400px;     
}