/* 
    Document   : map
    Created on : 16.08.2012, 16:20:23
    Author     : darius.daniali
    Description:
        Purpose of the stylesheet follows.
*/


/* Map */

#MapContainerOuter {
    height: 100%;
   /* margin-right: 290px;*/
}
#MapContainerInner {
    height: 100%;
    position: relative;
}
#MapWrapper {
    display: block;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
    z-index: 20;
}

#sampaslogo {
    background: url('../img/sampas-beyaz.png') center center no-repeat;
    bottom: 145px;
    display: block;
    height: 40px;
    position: absolute;
    right: 700px;
    width: 305px;
    z-index: 1;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
}

#sampashak {
   /* background: url('../img/about.png');
    bottom: 358px;
    display: block;
    height: 64px;
    position: absolute;
    right: 220px;
    width: 64px;
    z-index: 150;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2); */
}
#MapBase {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    height: 2240px;
    width: 3435px;
    
    top: 45%;
    left: 50%;
    margin-top: -1120px;
    margin-left: -1720px;
}
#MapShift {
    height: 100%;
    margin-top: 100px;
    position: relative;
}
#MapShift > img {
    display: block;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
#MapShift > svg {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#MapShift polygon {
    cursor: pointer;
    fill: transparent;
    
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#MapShift polygon:hover {
    fill: rgba(237,125,49,0.5);
}
#MapShift[data-active='1'] polygon[data-dist='1'],
#MapShift[data-active='2'] polygon[data-dist='2'],
#MapShift[data-active='3'] polygon[data-dist='3'],
#MapShift[data-active='4'] polygon[data-dist='4'],
#MapShift[data-active='5'] polygon[data-dist='5'],
#MapShift[data-active='6'] polygon[data-dist='6'],
#MapShift[data-active='7'] polygon[data-dist='7'],
#MapShift[data-active='8'] polygon[data-dist='8'],
#MapShift[data-active='9'] polygon[data-dist='9'],
#MapShift[data-active='10'] polygon[data-dist='10'],

 {
    fill: transparent;
}

#MapShift.animation > .mapOverlay,
#MapShift.animation > .mapDistrict,
#MapShift.animation > svg {
    display: none;
}

.yerlerzumbuton {
    display: none;
}
.yerlerzumbutonvideo,
.yerlerzumbutonresim,
.districtButtonPano,
.districtButtonObjVR {
    border: 2px solid white;
    cursor: pointer;
    display: block;
    height: 30px;
    position: absolute;
    text-indent: -9000px;
    width: 30px;
    
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -o-border-radius: 16px;
    -ms-border-radius: 16px;
    border-radius: 16px;
    -webkit-transform: scale(1.8);
    -moz-transform: scale(1.8);
    -o-transform: scale(1.8);
    -ms-transform: scale(1.8);
    transform: scale(1.8);
}
.yerlerzumbutonvideo {
    background: royalblue url('../img/btn_dist_vid.png?3') 8px 6px no-repeat;
}
.yerlerzumbutonresim {
    background: royalblue url('../img/btn_dist_resim.png?3') center 7px no-repeat;
}
.districtButtonPano {
    background: royalblue url('../img/btn_dist_pano.png?3') 5px 5px no-repeat;
}
.districtButtonObjVR {
    background: royalblue url('../img/btn_dist_objvr.png?3') 5px 5px no-repeat;
}


#vid01-1 {
    left: 2000px;
    top: 1050px;
}
#vid01-2 {
    left: 750px;
    top: 1150px;
}
#vid01-3 {
    left: 1050px;
    top: 1350px;
}
#vid01-4 {
    left: 1350px;
    top: 600px;
}
#resim01-1 {
    left: 1980px;
    top: 1125px;
}
#resim01-2 {
    left: 1800px;
    top: 1040px;
}
#resim01-3 {
    left: 1780px;
    top: 200px;
}

#vid02-1 {
    left: 1300px;
    top: 1184px;
}
#vid02-2 {
    left: 1200px;
    top: 1850px;
}
#vid03-1 {
    left: 1450px;
    top: 1165px;
}
#vid04-1 {
    left: 1735px;
    top: 1070px;
}

#vid05-1 {
    left: 1730px;
    top: 885px;
}