Team:Tianjin/Resources/CSS:maincssmap

1. page {

   min-height: 100%;
   height: auto !important;
   /* This line and the next line are not necessary unless you need IE6 support */
   height: 100%;
   margin: 0px auto -87px;
   /* the bottom margin is the negative value of the footer's height */

}

/*-------------------------------------------------------------- 2.0 Typography

---

*/

body {

   font-family: "futura pt", "futura-pt", arial, sans-serif;
   font-style: normal;
   font-weight: 300;
   font-size: 16px;
   font-size: 1.6rem;
   line-height: 1.3;

color:#2f353c; }

body {

   background-color:#e8f1f5; 

}

1. mappppp

{

   position: relative;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}

h2, h3, h4, h5, h6 {

   margin-bottom: 20px;
   text-transform: uppercase;
   font-family: "Roboto Condensed", Helvetica, sans-serif;
   font-weight: 300;

color:#e5e5e5; }

h1 {

   font-size: 36pt;

}

h2 {

   font-size: 24pt;

}

p {

   font-size: 12pt;
   margin-bottom: 12pt;

} .centered {

   position: absolute;
   top: 50%;
   left: 50%;
   -ms-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);

}

.centered-y {

   position: absolute;
   width: 100%;
   top: 50%;
   -ms-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);

color:#CF0; }

.distribution-map {

   position: relative;
   width: 100%;
   padding: 20px;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0 auto;

}

.distribution-map > img {

   width: 100%;
   position: relative;
   margin: 0;
   padding: 0;

}

.distribution-map .map-point {

   cursor: pointer;
   outline: none;
   z-index: 0;
   position: absolute;
   width: 2.2%;
   height: 4%;
   border-radius: 2em;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
   opacity: 0.8;
   -ms-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   -moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
   -o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
   -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
   -webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
   -webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
   transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
   background: rgba(26, 26, 26, 0.6);
   border: 0.2em solid #7fcff7;

}

.distribution-map .map-point .content {

   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity: 0;
   -webkit-transition: opacity 0.25s ease-in-out;
   transition: opacity 0.25s ease-in-out;
   width: 100%;
   height: 100%;
   left: 50%;
   -ms-transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   overflow: overlay;

}

.distribution-map .map-point:active, .distribution-map .map-point:focus {

   margin: 0;
   padding: 0;
   filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
   opacity: 1;
   width: 300px;
   height: 220px;
   color: #e5e5e5;
   z-index: 1;
   -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
   transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;

}

.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {

   filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
   opacity: 1;
   -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0 ease-in-out 0.25s, overflow 0 ease-in-out 0.25s;
   -o-transition: opacity 0.25s ease-in-out 0.25s, height 0 ease-in-out 0.25s, overflow 0 ease-in-out 0.25s;
   -webkit-transition: opacity 0.25s ease-in-out, height 0 ease-in-out, overflow 0 ease-in-out;
   -webkit-transition-delay: 0.25s, 0.25s, 0.25s;
   -webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0 ease-in-out 0.25s, overflow 0 ease-in-out 0.25s;
   transition: opacity 0.25s ease-in-out 0.25s, height 0 ease-in-out 0.25s, overflow 0 ease-in-out 0.25s;
   overflow: hidden;

}

.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {

   color: #afe1fa;

}