.container {
    position: absolute;
    width: 99%;
    height: 99%;
    background-color: #ffffff;
    font-family: "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
    margin-left: -5px;
    margin-top: -5px;
    overflow: hidden;
}

#app-title {
    width: 100%;
    color: #ffffff;
}

#atlas-summary {
    border: 2px solid #888888;
    border-color: #003366;    
    background-color: #003366;
}

.atlas-summary-icon {
    
}

#eurowarslogo {
    height: 180px;
    width: 180px;
}

.actionbutton {
    height: 40px;
    border-radius: 5px;
    background-color: #ddd;
}

.actionimg {
    height: 32px;
    width: 32px;
    margin-top: 2px;
}

#atlas-summary-text {
    margin-left: 2px;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

#battlefield {
    background-color: #bdb1b1;
    width: 250px;
    height: 24px;
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
    text-indent: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border: 2px inset;
    border-radius: 2px;
    border-color: #003366;    
}

#battlefield:hover {
    text-overflow: inherit;
    overflow: visible;
    background-color: #bdb1b1;
    z-index: 200;
}

#help {

}

#columnleft {
    width: 25%;
    height: 100%;
    float: left;
    display: flex;
    flex-flow: column;    
}

#conflict-block {
    height: 50%;
    overflow-y: auto;        
    border: 2px solid;
    border-color: #003366;
    background-color: #eeeeee;
    margin-bottom: 1px;
    resize: vertical;
}

#conflict-button-panel {
    margin-top: 10px;
    margin-bottom: 10px;
}

#conflict-header {
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    line-height: 110%;
}

#conflict-description {
    margin: 5px;
    font-family: Verdana;
    font-size: 15px;
}

#event-block {
    overflow-y: auto;
    height: 36%;
    resize: vertical;
    border: 2px solid;
}

#listheader {
    border: 2px solid black;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    margin-top: -1px;
    background-color: #bbb;
    line-height: 180%;
}

#eventlist {
    border-color: #bbbbbb;
    overflow: auto;
}

.event-item {
    border: 2px solid;
    overflow-y: auto;
    height: 30%;
    resize: vertical;
    font-size: 13px;
}

#center-link {
    height: 32px;
    background-color: #bbbbbb;
}

.event-info {
    margin-left: 4px;
    margin-right: 4px;
    padding-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 140%;
    border-bottom: 2px solid #444;
}

.eventname {
    width: 100%;
    height: 24px;
    background-color: #2c3e50;
    color: white;
    cursor: pointer;
    padding: 0px;
    border: outset 2px #444;
    margin-top: 1px;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;    
    text-align: center;
}

#eventname:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
    box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

#eventname::before {
    background-color:#322620;
    content:"";
    width:20px;
    height:20px;
    right:15px;
    top:50%;
    margin-top:-9px;
    border-radius: 50%;
/*    box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066; */
}

#eventname:active::before {
    top:50%;
    margin-top:-12px;
    box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

p {
    font-family: Verdana;
    line-height: 140%;
    font-size: 14px;
    margin-left: 8px;
    margin-right: 8px;
    text-align: justify;
}

p-center {
    font-family: Verdana;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
}

p-event {
    display: block;
    font-family: Arial;
    line-height: 140%;
    font-size: 10px;
    margin-left: 4px;
}
   
#overlay {
   display:none;
   position:fixed;
   left:0px;
   top:0px;
   width:100%;
   height:100%;
   background:#000;
   opacity:0.5;
   z-index:99999;
}

#popup {
   display: none;
   position: fixed;
   left: 50%;
   top: 50%;
   width: 400px;
   height: 300px;
   margin-top: -75px;
   margin-left: -150px;
   background: #FFFFFF;
   border: 2px solid #000;
   z-index: 100000;
}

#columnright {
    width: 75%;
    height: 100%;
    float: right;
}
   
#maparea {
    position: relative;
    height: 90%;
    border: 2px solid #003366;
}

#map-canvas {
    position: absolute;
    height: 100%;
    width: 100%;
}

#region-div {
    width: 100%;
    height: 100%;
    border: none;  
    overflow: hidden;    
}

#attribution {
    position: absolute;
    background-color: #888;
    width: 25%;
    z-index: 10000;
    font-size: 13px;
    font-weight: 800;
    line-height: 150%;
    bottom: 0px;
    padding-top: 8px;
    margin-left: -2px;
}

#attrlist {
    list-style-type: none;
    margin-left: -15px;
}

#locations {
    visibility: hidden;
    font-size: 0px;
}

#events {
    visibility: hidden;
    font-size: 0px;
}

#conflict-dates  {
    visibility: hidden;
}