@import 'vars.scss';
@import 'mixins/collection.scss';
@import "compass/css3/box-shadow";

.darkGradient {
    background: #010101 inline-image('structure/map/gradient.png') top left repeat-x; /* Old browsers */
    background: -moz-linear-gradient(top, #3d3d3d 0%, #272727 50%, #181818 50%, #010101 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d3d3d), color-stop(50%,#272727), color-stop(50%,#181818), color-stop(100%,#010101)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3d3d3d 0%,#272727 50%,#181818 50%,#010101 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3d3d3d 0%,#272727 50%,#181818 50%,#010101 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #3d3d3d 0%,#272727 50%,#181818 50%,#010101 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3d3d', endColorstr='#010101',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #3d3d3d 0%,#272727 50%,#181818 50%,#010101 100%); /* W3C */
}

#map {
    background:#4c5d7e;
    height:500px;
    position:absolute;
    width:100%;
    z-index:9;
    left:0;
    top:-314px;

    .group {
        position:relative;
    }

    #home & {
        top:-178px;
    }

    .no-js & {
        display:none;
    }

    .oldie & {
        height:595px;
        top:-409px;
    }

    .oldie #home & {
        top:-273px;
    }

    shape,
    path {
        cursor:pointer !important;
    }
}

#showHideMap {
    position:absolute;
    top:488px;
    left:50%;
    margin-left:-89px;
    @include image-replace('#{$structure}/map/showHideMap.png',179px,43px);

    &.shown {
        background-position:bottom left;
    }

    .oldie & {
        top:583px;
    }

    .ie7 & {
        top:595px;
    }
}

#mapStats {
    font-size:1.5em;
    color:#7eb0ff;
    font-family:$chunkFive;
    position:absolute;
    bottom:46px;
    left:0;
    z-index:2;

    strong {
        color:#fff;
    }
}

#worldMap {
    width:960px;
    margin:12px;
    height:455px;

    .oldie & {
        height:550px;
    }
}

#mapZoomControls {
    @extend .darkGradient;
    height:39px;
    @include border-radius(5px);
    @include box-shadow(0 3px 5px rgba(0,0,0,0.48));
    width:72px;
    position:absolute;
    bottom:0;
    left:0;
    z-index:2;
}

.zoomButtons {
    float:left;
    cursor:pointer;
    margin:8px 0 0 8px;
}

.jvectormap-zoomin {
    @extend .zoomButtons;
    @include image-replace('#{$structure}/map/magnify.png',23px,24px);

    &.active {
        background-position:bottom left;
    }
}

.jvectormap-zoomout {
    @extend .zoomButtons;
    @include image-replace('#{$structure}/map/magnify.png',23px,24px);
    background-position:bottom right;

    &.active {
        background-position:top right;
    }
}

.jvectormap-label {
    @extend .darkGradient;
    position: absolute;
    display: none;
    border: solid 1px #CDCDCD;
    -moz-border-radius: 3px;
    background: #292929;
    color: white;
    z-index:12;
    padding: 7px;
    font-weight:bold;
}

.numReports {
    display:block;
    font-weight:normal;
}

.draggable {
    cursor:move;
}