html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

body {
    background-color: #EEE;
    overflow: hidden;
    font-family: "Trebuchet MS";
}

.overlay{
    display:none;
    position: fixed;
    top: 0; left:0; right:0; bottom:0;
    background:rgba(20,20,20,.7);
    z-index:300;
}

#username {
    display:block;
    
}

#help {
    display:block;
}

.overlay .container {
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -100%);
    -webkit-transform:translate(-50%, -100%);
    background:white;
    padding:20px;
    border-radius:4px;
    //box-shadow:5px 5px 5px black;
}

.overlay .help {
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    color: white;
}

#mapDiv {
    height:100%;
    width:100%;
    background: gray;
}

#lesson-container{
    width:40px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 100%;
    z-index: 200;
    
    overflow:scroll;
    overflow-x:hidden;
}

#lessonBtnContainer{
    width: 30px;
}

.lessonBtn{
    margin-left: 4px;
    margin-top: 8px;
    height: 110px;
    position: absolute;
    
    outline: 0px;
}

#lessonContent{
    visibility: hidden;
    position:absolute;
    padding: 20px;
}

#lessonClose{
    visibility: hidden;
    position: absolute;
    right: 0px;
    z-index: 200;
    outline: 0px;
}

#lesson_1{ top:0px; }
#lesson_2{ top:120px; }
#lesson_3{ top:240px; }
#lesson_4{ top:360px; }


#map-container{
    position: absolute;
    left: 5%;
    height: 90%;
    width: 90%;
    margin:30px auto;
    border: 4px solid;
    border-radius:4px;
    border-color: #999;
}

/* Contains the tools and map features */
#toolsContainer {
    position: absolute;
    top: 20px;
    left: 20px;
    /*
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%); */
}

/* Contains the map name & launch features */
#controlContainer {
    position: absolute;
    top: 20px;
    right: 20px;
    text-align: right;
}

/* Contains the map scale feature */
#scaleContainer {
    position: absolute;
    //bottom: 100px;
    //left: 50%;
    width: 100%;
    background: wheat;
}

#dataLayerSelect{
    //background: #000;
    border: #000;
    border: 4px solid;
    border-radius:4px;
    border-top-color:#FFF;
    border-left-color:#DDD;
    border-right-color:#DDD;
    border-bottom-color:#BBB;
    
    font-weight: bold;
    outline-width: 0px;
    height: 30px;
}

#map.pin {
    cursor:crosshair;
}

.main-container{
    height: 100%;
}

#map_zoom_slider{
    display: none;
}

.button{

    background-color: white;

    cursor:pointer;
    box-sizing: content-box;
    font-size: 16px;
    font-weight: bold;
    /* box-sizing: border-box; */
    border: 2px solid;
    border-radius:4px;
    

    border-color: #DDD;

    text-align: center;
    transition:.3s;

}

.tool{
    //margin: 12px;
    margin-bottom: 12px;
    height: 50px;
    width: 50px;
}

.button:hover {
    transform:scale(1.05);
}

.mouseOver{
    cursor:pointer;
}

.mouseOver:hover {
    background-color: red;
}

#layers .button {
    background-color: #FF8822;
}

#layers{
    position: absolute;
    top: 180px;
}

.button-set + .button-set {
    margin-top:50px
}

#line{
    background-color: #2288AA; 

    background-image: url("../assets/img/line_img.png");
    background-size: cover;
    padding: 5px;
}

#endLine{
    visibility: hidden;
    color: #333;
    position: absolute;
    top: -8px;
    font-weight: bold;
    width: 68px;
    padding: 5px;
    border: 2px solid;
    border-radius:4px;
    border-color:#DDD;
    background: #CCC;
    outline-width: 0px;
}

#pin{
    background-color: #EEE; 
    background-image: url("../assets/img/pin_img.png");
    background-size: cover;
    padding: 5px;
}

#hybridLayer{
    background-color: #FF8822; 
    padding: 5px;

    background-image: url("../assets/img/hybridImage.png");
    background-size: cover;
}

#streetLayer{
    background-color: #FF8822; 
    padding: 5px;

    background-image: url("../assets/img/streetsImage.png");
    background-size: cover;
}

#terrainLayer{
    background-color: #FF8822; 
    padding: 5px;

    background-image: url("../assets/img/terrainImage.png");
    background-size: cover;
}

#addLayer{
    background-color: #FF8822; 
    background-image: url("../assets/img/zoomIn.png");
    background-size: cover;
}

#play{
    position: absolute;
    right:  0px;
    top: 50px;
    height: 24px;
    width: 100px;
    padding-top: 6px;
    background-color: white;
    z-index: 100;
    outline-width: 0px;
font-weight: bold;
    font-size:15px;
}

#share{
    position: absolute;
    right:  0px;
    top: 40px;
    height: 24px;
    width: 100px;
    background-color: white;
    outline-width: 0px;
}

#save{
    visibility: visible;
    position: absolute;
    right:  0px;
    top: 0px;
    height: 24px;
    width: 100px;
    padding-top: 6px;
    background-color: white;
    z-index: 98;
    outline-width: 0px;
font-weight: bold;
    font-size:15px;
}

#zoomIn{
    background-color: white;
    position: absolute;

    width: 40px;
    height: 40px;
    bottom: 20px;
    right: 20px;
    //transform: translateX(-50%);
    //-webkit-transform: translateX(-50%);


    background-image: url("../assets/img/zoomIn.png");
    background-size: cover;
}

#zoomOut{
    background-color: white;
    position: absolute;


    width: 40px;
    height: 40px;
    bottom: 20px;
    left: 20px;
    //transform: translateX(-50%);
    //-webkit-transform: translateX(-50%);

    background-image: url("../assets/img/zoomOut.png");
    background-size: cover;
}

#zoomBar{
    position: absolute;
   
    bottom: 4px;
    left: 50%;
    height: 28px;
    width: 100%;
    
    text-align:center;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}

#zoomToolTip{
    position: absolute;
    //background:white;
    width: 100%; 
    height: 80px;
    top: -80px;
    visibility: hidden;
}

.sliderToolTip{
    height: 72px;
    width: 72px;
    background: none;
    border: none;
    padding-right: 48px;
    
    padding-left: 48px;
    
    outline-width: 0px;
}


.sliderBtn{
    //background-image: url("../assets/img/zoomDot.png");
    background-size: cover;
    height: 20px;
    width: 40px;
    border: none;
    margin-left: 4px;
    margin-right: 4px;
    
    outline-width: 0px;
    
    font-size: 14px;
    font-weight: bold;
    color: #444;
}

#moveBack{
    visibility: hidden;
    background-color: white;
    position: absolute;
    
    width: 40px;
    height: 40px;
    bottom: 20px;
    left: 20px;

    background-image: url("../assets/img/moveBack.png");
    background-size: cover;
}

#moveForward{
    visibility: hidden;
    background-color: white;
    position: absolute;

    width: 40px;
    height: 40px;
    bottom: 20px;
    right: 20px;

    background-image: url("../assets/img/moveForward.png");
    background-size: cover;
}

#moveStop{
    visibility: hidden;
    background-color: white;
    position: absolute;

    width: 40px;
    height: 40px;
    bottom: 20px;
    right: 20px;

    background-image: url("../assets/img/moveStop.png");
    background-size: cover;
}

#map-attribution{
    color: #333;
    font-size: 25px;
    font-weight: bold;
    right:  15px;
    padding-right: 12px;
    text-decoration-color: #333;
    padding: 4px;
    background:rgba(255,255,255,0.85);

    border: 4px solid white;
    margin: 12px;
    border-radius:6px;
    width: 260px;
}

#map-name{

    text-align: center;
    border: 0px;
    background: none;
    color: #333;
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
    outline-width: 0px;
    width: 260px;
}

#map-author{
    text-align: center;
    border: 0px;
    background: none;
    color: #333;
    font-size: 25px;
    font-weight: normal;
    right:  15px;
    width: 260px;
    outline-width: 0px;
}

.button.active {
    border-color:#ffd905;
    background-color:#e2c108;
    transform:scale(1.05);
    -webkit-transform: scale(1.05);
}

#map-canvas { 
    height: 100%; 
    margin: 0; 
    padding: 0;
}

.labels {
    color: #333;
    background-color: white;
    font-family: "Lucida Grande", "Arial", sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    width: 40px;     
    border: 2px solid #feb144;
    margin: 12px;
    border-radius:8px;
    white-space: wrap;
}


.popup{
    background-color: #d8d8d8;
    padding: 12px;
    padding-top: 0px;
}

#popup-closeBox{
    visibility: visible;

}

#popupHeading{
    font-family: "Lucida Grande", "Arial", sans-serif;
    color: #333;
    font-size: 25px;
    font-weight: bold;
    right:  15px;
    padding-right: 12px;
    padding: 4px;
    text-transform: uppercase;
    background: none;
    outline-width: 0px;
}

#popupDescription{
    font-family: "Lucida Grande", "Arial", sans-serif;
    color: #333;
    font-size: 12px;
    font-weight: normal;
    right:  15px;
    padding-right: 12px;
    padding: 4px;

}

#popupMediaFrame{
    //max-width: 128px;
    //max-height: 128px;
    //background-color: rgba(0,0,0,0.75);
}

#popupMedia{
    //background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
    //width: 120px;
    //height: 120px;
    border-radius:6px;
    outline-width: 0px;
    max-height: 200px;
    max-width: 360px;
    border:#000;
    border-width: 2px;
    margin: 4px;
    //margin: 10px;
    //left: 60px;
    //transform: translateX(-50%) translateY(-50%);
}


.input{
    color: #000;
    font-size: 18px;

    font-weight: bold;
    right:  15px;
    text-decoration-color: #000;
    padding: 4px;
    background:rgba(255,255,255,0.75);

    border: 2px solid white;
    border-radius:6px;
    outline-width: 0px;

}

.popupInput{
    //margin: 10px;
}

#geocodeContainer{
    visibility: visible;
}

#geocode{
    position: absolute;
    top:20px;
    left: 140px;
    width: 240px;
}

#geocodeBtn{
    position: absolute;
    top: 20px;
    left: 410px;
    width: 60px;
    height: 25px;
    color: #333;
}

#debug{
    padding: 10px;
    font-size: 10px;
}

#usernameInput{
    height: 12px;
    width: 222px;
    font-size: 12px;
    outline-width: 0px;
    border-color: #fcd204;
    height: 16px;
    
}

#submitUsername{
    height: 14px;
    font-weight: bold;
    height: 20px;
}



.pinBtn{
    font-size: 16px;
    font-weight: bold;
    border-color: #999;
    right:  15px;
    background: #CCC;
    outline-width: 0px;

}

.editPopupContent{
    visibility: visible;
    position: absolute;
    bottom: 6px;
    right: 8px;
    padding: 0px;
    height: 20px;
    width: 60px;
    background-color: rgba(0,0,0,0.65);
    outline-width: 0px;
    text-wrap:normal;
    font-size: 14px;
    font-weight:bolder;
    z-index: 100;
    margin: 3px;
    border:none;
    color: #DDD;
    padding-bottom: 2px;
    margin-right: 0px; 
}

#contentDisplay{
    visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    border-color: rgba(255,0,0,1);
    //border-radius:6px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    z-index: 500;
}

#mediaContent{
    position: absolute;
    max-height: 600px;
    border: white;
    border-width: 10px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}
#imgbox{
    //width: 500px;
    //top: 50%;
    //transform: translateX(-50%) translateY(-50%);
}

#contentDisplayClose{
    position: absolute;
    width: 50px;
    right:10px;
    top:10px;
}

#editPopupContentEmpty{
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 0px;
    height: 20px;
    width: 60px;
    background-color: rgba(0,0,0,0.65);
    outline-width: 0px;
    text-wrap:normal;
    font-size: 14px;
    font-weight:bolder;
    z-index: 100;
    margin: 3px;
    border:none;
    color: #DDD;
    padding-bottom: 2px;
    margin-right: 40px; 
}

/* 

Popup Template 

*/

#editPopup{
    visibility: hidden;
    position: absolute;
    width: 400px;
    background: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.85);
    border-radius:6px;
    left: 50%;
    top: 180px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    padding: 12px;

}

#editTitle{
    margin-top: 4px;
    width: 390px;
    text-decoration-color: black;
    background: rgba(0,0,0,.5);
    border: none;
}

#editDescription{
    width: 368px;
    font-size: 14px;
    height: 50px;
    font-weight: normal;
    text-decoration-color: black;
    background: rgba(0,0,0,.5);
    border: none;
}

#editMediaURL{
    width: 390px;
    font-size: 14px;
    text-decoration-color: black;
    background: rgba(0,0,0,.5);
    border: none;
    margin-bottom: 10px;
}

#deletePin{
    visibility: hidden;
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 50px;
    color: red;
}

#savePin{
    visibility: hidden;
    position: absolute;
    bottom: 10px;
    right: 10px;

}

#cancelEdit{
    visibility: hidden;
    position: absolute;
    bottom: 10px;
    right: 70px;
}

#dropDowns{
    padding-top: 4px;
    padding-left: 12px;
}

#mapScale{
    margin-left: 10px;
    outline-width: 0px;
    border-width: 2px;
    margin-bottom: 40px;
}

#playOrder{
    margin-left: 10px;
    outline-width: 0px;
    border-width: 2px;
    margin-bottom: 40px;
}



#emptySpace{
    height: 30px;

}