* {
        box-sizing: border-box;
    }
    body {
        font-family: sans-serif;   
        background-color:white;
    }
    body.zoomed {
        background-color:#999;
    }
    #main {
        position: relative;   
        top: 2em;
        
    }
    #header {
        margin-left:140px;
        width:600px;
    }
    h1,h2 {
      margin-top:0.1em;
      margin-bottom: 0.1em;
    }
    .col {
        width: 200px;
        position: absolute;
        top:0;
    }
    
    #main a {
          color:white; 
    }
    
    .yearline {
        width:100%;
        height:2px;
        background-color:#eeeeee;
        position:absolute;
    }
    .yearline.fiver {
        height:6px;
    }
    
    
    .captioncol {
        width:100%;   
        text-align: center;
        font-weight: bold;
        position: sticky;
        top:0;
        z-index:30;
        background: rgba(255,255,255,0.5);
        
        
    }
    .range {
        position: absolute;        
        width:100%;
        display: flex;
        align-items: center;
    }
    
    .yearlabel {
        position: absolute;                
        text-align:center;
        width:300px;
        font-weight:bold;
        z-index:50;
    }
    
    .eventlabel {
        position: absolute;
        /*!!!!*/
        width:100%;
        color:white;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    
    .photosquare, .eventlabel.photo {
        background-size: cover;
        background-position: center;        
        height:80%;
        cursor:pointer;   
    }
    
    .photosquare, .eventlabel.photo {
        position: absolute;
        text-align: center;
        /*!!!!*/
        width: 100%;
        z-index:20;
        display: flex;
        justify-content: space-between;
        align-items: center;
        Xmin-height:1.6em;
        Xmax-height: 10em;
    }
    .photosquare .label, .eventlabel.photo .label {
        width: 100%;        
    }
    .plainlabel {    
        /*!!!!*/
        width:100%;
        z-index:18;
        padding:2px;
        
    }
    .photosquare .label, .plainlabel,  .eventlabel.photo .label {
        color: white;
        font-weight:bold;
        
        text-align:center;        
    }

    .range .bar {
        width: 20px;
        height: 100%;
        position:absolute;
        left:90px;
        border-radius:14px;
        z-index:10;
    }
    

    
    #col_YEARS .range{
        Xborder-bottom:1px solid black;
        font-weight: bold;    
        color:black;
        border-style; none;
    }
       #col_YEARS .range .label{
        color:black;
    }
    
    

 #bigimgwrap {
        margin:auto;
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        z-index:1000;
        display:none;
        background: rgba(0,0,0,0.5);
}    
 #bigimg {
        margin:auto;
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        max-height:100%;
        max-width:100%;
}
    img {
        cursor:pointer;   
    }
    .photosquare {
        cursor:pointer;           
    }


    #minimap {
        position:fixed;
        width:120px;
        border:1px black solid;
        height:400px;
        left:0px;
        top: 40px;
        background-color: rgb(255,255,255);
        background-color: rgba(255,255,255,.8);
        z-index: 100;
        overflow: hidden;
    }
    #age{
        position:fixed;
        top:440px;
        width:120px;
        left:0px;
        text-align:center;
        font-size:12px;
    }

    
    #minimap .line {
        width: 2px;
        position:absolute;
        z-index: 101;
    }
    #minimap .line.vert {
        width: 2px;
    }
    #minimap .line.horiz {
        height: 2px;
        width: 8px;
    }
    #minimap .line.year {
        border-top:1px solid #ddd;
        font-size:8px;
        width:100%;
        z-index:102;
    }
    
    #frame {
        position: absolute;
        top:20px;
        border-left:6px #ccc solid;
        border-right:6px #ccc solid;
        border-left:6px rgba(0,0,0,.1) solid;
        border-right:6px rgba(0,0,0,.1) solid;
        height:80px;
        width:100%;
        z-index: 110;
    }    
    #frametop, #framebot {
        position:absolute;   
        text-align: center;
        background-color: #ccc;
        background-color: rgba(0,0,0,.1);
        color: black;
        height:1em;
        font-size:8px;
        font-weight:bold;
        width:100%;
        padding-bottom:10px;
    }    
    #frametop {
        top:0;   
    }
    #framebot {
        bottom:0;   ;
    }