- 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;
}
- mappppp
{
position: relative; -moz-box-sizing: border-box; box-sizing: border-box;
}
h2, h3, h4, h5, h6 {
margin-bottom: 20px; font-family: "Roboto Condensed", Helvetica, sans-serif; font-weight: 300;
}
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;
}