body{
    padding:0;
    margin:0;
    background:url('../images/navy_blue.png');
    font-family:Verdana,sans-serif;
    font-size:12px;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

image{
    border:none;
}

input, select {
    padding:1px;
}

button {
    padding: 3px 10px;
    background: #cd9ed8;
    border: 1px solid #bd97ae;
    color: white;
    text-shadow: 1px 1px 0 #9157c1;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    font-size: 13px;
    outline: none;
}

button:hover{
    background: #e2bdea;
    border-color:#d58de6;
}

    button:active {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
        box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    }

    button:disabled{
        background: #bfbfbf; /* Old browsers */
        border:1px solid #aaa;
        text-shadow:none;
        cursor:help;
        opacity:0.8;
    }

select {
    cursor: pointer;
}

#logo{
    float:left;
    display:inline-block;
    margin:15px 0px 0px 15px;
}

#header{
    height:80px;
    width:100%;
    padding:5px 0px;
    background:url('../images/groovepaper.png');
    border-bottom:1px solid #aaa;
    overflow:hidden;
    transition:all 0.1s linear;
}

#header.minified{
    height:0px;
    border:none;
    padding:0px;
    transition:all 0.4s linear;
}

#pageWrap{
    position:relative;
}

#heatmapWrap{
    background:rgba(210,200,200,0.1);
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    overflow:hidden;
    pointer-events:none;
}

#heatmap {
    position:absolute;
    overflow:hidden;
    width:100%;
    height:100%;
}

#minimap {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 10%;
    height: 300px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255, 0.5);
    outline: none;
    overflow: hidden;
    opacity: 0.8;
    background:white;
    display: none;
}

#minimap:hover {

}

#minimap span {
    text-align: center;
    display: block;
    position: absolute;
    left:0;
    bottom:3px;
    width: 100%;
    font-size: 10px;
    font-family: "Arial";
    letter-spacing: 1px;
    font-style: italic;
    color: #A9D;
}

#minimapCursor {
    width: 100%;
    height: 100px;
    top:0px;
    left:0px;
    background: rgba(255,255,255, 0.3);
    border:1px solid rgba(150,120,200, 0.5);
    box-shadow: 0px 0px 2px rgba(0,0,0,0.3);   
    position: absolute;
}

#loading {
    position: absolute;
    text-align: center;
    top:300px;
    width:100%;
    padding:10px 0px;
    background:rgba(247,213,173,0.8);
    box-shadow:0px 0px 3px rgba(0,0,0,0.2);
    -o-box-shadow:0px 0px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.2);
    font-size:16px;
    font-family:Arial,sans-serif;
    font-weight:bold;
    z-index:20001;
    color:rgba(0,0,0,0.6);
    text-shadow:1px 1px 2px rgba(255,255,255,0.5);
}

#heatmapIframe {
    opacity:0.1;
    border:none;
    background:white;
}

input[type=range] {
    cursor: pointer;
}

#options {
    float:right;
    margin:0px 20px 0px 0px;
    padding:0px;
    list-style:none;
}
    #options li{
        position:relative;
    }

    #options li:hover {
        background:rgba(255,255,255,0.5);
    }
    #options .option {
        width: 150px;
        display:inline-block;
        font-weight:bold;
        color:#333;
        text-shadow:1px 1px 0px white;
    }

    #options select {
        width: 170px;
    }

#type {
    margin:0px 20px;
    float:right;
    position:relative;
}
#type span {
    font-weight: bold;
    position:absolute;
    top:-15px;
    left:0px;
}

.clickRadius{
    z-index:10001;
    -o-border-radius:100px;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px;
    background:#e02c3d;
    width:0px;
    height:0px;
    position:absolute;
    opacity:1;
}

.clickBox{

    -webkit-border-radius: 50px;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius: 50px;
    -moz-border-radius-topleft: 0;
    box-shadow:0px 0px 1px rgba(0,0,0,0.5), 1px 1px 2px rgba(0,0,0,0.5), 3px 3px 4px rgba(0,0,0,0.3);
    border-radius: 50px;
    border-top-left-radius: 0;
    z-index:10002;
    padding:2px 5px;
    font-family:Arial;
    font-size:9px;
    position:absolute;
    background:#c0db7e;
    opacity:0.7;
    border:1px solid white;
    text-shadow:1px 1px rgba(255,255,255,0.2);
    font-weight:bold;
    transition: opacity 0.3s linear;
}

    .clickBox:last-of-type {
        background:#f52034;
        opacity:1;
    }
    
    .clickBox:nth-last-of-type(2) {
        background:#bc5cd3;
        opacity:0.95;
    }

    .clickBox:nth-last-of-type(3) {
        background:#897ed1;
        opacity:0.9;
    }
        
    .clickBox:nth-last-of-type(4) {
        background:#7eb3d1;
        opacity:0.8;
    }

    .clickBox.rightClick:after {
        content: ' RIGHT CLICK';
    }

#recordControls{
    display:inline-block;
    opacity:0;
    filter:alpha(opacity=0);
    position:fixed;
    bottom:0;
    width:100%;
    height:40px;
    padding-top:2px;
    border:none;
    background: #1d1d1d;
    border-top:1px solid #555;
    color:white;
}

#recordControls img{
    vertical-align:middle;
}

#recordInfo {
    position: fixed;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(250,230,250,0.3);
    border-bottom:none;
    min-width: 300px;
    padding: 3px;
    list-style: none;
    left:10px;
    bottom: 31px;
    display: inline-block;
    z-index: 201;
    height: 30px;
    overflow: hidden;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

    box-shadow:0 -1px 8px rgba(0,0,0,0.3);
    cursor: pointer;
}

#recordInfo.active{
    height:180px;
}

#recordInfo.active li:first-child:before {
    content: '\2193';
}

#recordInfo li{
    box-shadow:0 1px 0 rgba(255,255,255,0.3);
    padding-left:15px;
    padding-top:8px;
    height: 28px;
}


#recordInfo:not(.active) li:first-child:before{
    content: '\2191';
}

#recordInfo li:nth-child(2n){
    background-color:rgba(100,100,100, 0.1);
}

#recordInfo li:last-child{
    box-shadow:none;
}

#recordInfo li:hover{
    background:rgba(255,255,255,0.1);
}
#recordButtons{
    position: absolute;
    top: 12px;
    right: 5px;   
    z-index:110;
}

#cursor{
    opacity:0;
    filter:alpha(opacity=0);
    z-index: 10003;
    position: absolute;
}

.opt{
    background:#fafafa;
    -o-border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    float:left;
    width:50px;
    height:50px;
    padding:3px;
    margin:5px;
    overflow:hidden;
    cursor:pointer;
    border:1px solid white;
    -moz-transition: background-color 0.15s ease-in-out;
    -o-transition: background-color 0.15s ease-in-out;
    -webkit-transition: background-color 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out;
    box-shadow:inset 0px 0px 5px rgba(0,0,0,0.3);
}

.opt img{
  width:50px;
  -moz-transition: transform 0.15s ease-in-out;
  -o-transition: transform 0.15s ease-in-out;
  -webkit-transition: transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out;
  display:inline-block;
  will-change: transform;
}

.opt:hover img{
  transform: rotate(30deg) scale(1.2);
}

.opt:hover{
   background:#e1c5ff;
}

    .opt.selected {
        -webkit-box-shadow: 0px 0px 6px #d1b5ef;
        box-shadow: 0px 0px 6px #d1b5ef;
        border:1px solid #d1b5ff;
        background:#fafafa;
    }
    .opt.selected img{
          transform: rotate(30deg) scale(1.2);
    }

#progressBar{
    width:100%;
    height:8px;
    background: #555;
    margin-top:-3px;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    display:none;
}

#progressBar div{
    background: #e02c3d;
    width:0;
    height:20px;
    border-right:1px solid #4d0303;
    box-shadow:1px 0 0 #907676;
}

#progressBar span{
    color:#333;
    position:absolute;
    left:5px;
    font-weight:bold;
    top:0px;
    opacity:1;
    font-size:7px;
    display:inline-block;
    width:8px;
}

#userFlag img{
     padding-bottom:2px;
}

#deleteRecord{
    position:absolute;
    cursor:pointer;
    opacity:0.5;
    -webkit-transition:opacity 0.3s linear;
    bottom:2px;
    right:3px;
}

#deleteRecord:hover{
    opacity:1;
}

#hoverWrap{
    display:none;
}

.tooltip {
    z-index: 2000004 !important;
}

.ust_dialog {
    position:absolute;
    width: 500px;
    background: white;
    box-shadow: 1px 3px 8px rgba(0,0,0,0.3);
    border-radius: 4px;
    position:relative;
    display:none;
    z-index:20002;
    overflow: hidden;
}

    .ust_dialog #close {
        position: absolute;
        top: 4px;
        right: 4px;
        font-weight: bold;
        color: #875399;
        font-size: 10px;
        background: #EBDDEF;
        height: 15px;
        width: 15px;
        padding-top: 1px;
        text-align: center;
        border-radius: 2px;
        -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        -webkit-transition: all 0.3s linear;
        transition: all 0.3s linear;
        cursor:pointer;
    }

    .ust_dialog #close:hover{
        background:#f4daff;
    }

.ust_dialog h1{
    text-align:center;
    font-weight: normal;
    font-size:14px;
    font-family: Arial, Geneva, 'DejaVu Sans', sans-serif;
    padding:6px;
    margin:0px 0px 5px 0px;
    color: white;
    background: #a87eb7;
    letter-spacing: 1px;
}

#settings ul{
    margin:0px;
    padding:0px;
    list-style:none;
}

#settings ul li{
    padding:9px;
    margin:0px;
    overflow:hidden;
}
#settings ul li:nth-child(2n+1){
    background:#f6f3ff;
}

#header #show_settings{
    position:absolute;
    top:0px;
    right:10px;
    cursor:pointer;
    opacity:0.5;
}

#header #show_settings:hover{
    opacity:1;
}

#settings input[type=range]{
    width:200px;
}

.right{
    float:right;
    width:270px;
    text-align:center;
    overflow:hidden;
}

.right span{
   display:inline-block;
   vertical-align:top;
}

#settings label{
    float:left;
    font-weight:bold;
    color:#540e38;
    cursor: help;
}

#settings button{
    float:right;
    padding:7px 35px;
}

#settings img {
    vertical-align: middle;
    padding-bottom: 2px;
}

#records{
    display:none;
}

#downloadHeatmap {
    position: fixed;
    bottom: 30px;
    left: 10px;
    z-index: 101;
    outline: none;
}