body { font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif; color: #404040; } .container { position: relative; margin: 40px auto 50px auto; width: 900px; padding: 0; text-align: center;} img.info-icon{ cursor: pointer; z-index: 1001;} /*Left Plots*/ #container2 .info-icon3{ position: absolute; top: 165px; left: 443px;} #container2 .info-plot2{ position: absolute; top: 233px; left: 443px;} #container2 .info-plot3{ position: absolute; top: 297px; left: 443px;} #container2 .info-plot4{ position: absolute; top: 363px; left: 443px;} #container2 .info-plot5{ position: absolute; top: 430px; left: 443px;} #container2 .info-plot6{ position: absolute; top: 491px; left: 443px;} #container2 .info-plot7{ position: absolute; top: 549px; left: 443px;} #container2 .info-plot8{ position: absolute; top: 599px; left: 443px;} #container2 .info-plot9{ position: absolute; top: 600px; left: 374px;} #container2 .info-plot10{ position: absolute; top: 600px; left: 306px;} #container2 .info-plot11{ position: absolute; top: 600px; left: 240px;} #container2 .info-plot12{ position: absolute; top: 608px; left: 170px;} #container2 .info-plot13{ position: absolute; top: 728px; left: 175px;} #container2 .info-plot14{ position: absolute; top: 717px; left: 234px;} #container2 .info-plot15{ position: absolute; top: 717px; left: 294px;} #container2 .info-plot16{ position: absolute; top: 717px; left: 353px;} #container2 .info-plot17{ position: absolute; top: 717px; left: 413px;} #container2 .info-plot18{ position: absolute; top: 717px; left: 473px;} #container2 .info-plot19{ position: absolute; top: 832px; left: 473px;} #container2 .info-plot20{ position: absolute; top: 832px; left: 413px;} #container2 .info-plot21{ position: absolute; top: 832px; left: 353px;} #container2 .info-plot22{ position: absolute; top: 832px; left: 294px;} #container2 .info-plot23{ position: absolute; top: 832px; left: 234px;} #container2 .info-plot24{ position: absolute; top: 844px; left: 180px;} #container2 .info-plot25{ position: absolute; top: 914px; left: 185px;} #container2 .info-plot26{ position: absolute; top: 900px; left: 234px;} #container2 .info-plot27{ position: absolute; top: 900px; left: 294px;} #container2 .info-plot28{ position: absolute; top: 900px; left: 353px;} #container2 .info-plot29{ position: absolute; top: 900px; left: 413px;} #container2 .info-plot30{ position: absolute; top: 900px; left: 473px;} /*Left Effect*/ #pop7{ position: absolute; top: 97px; left: 200px;} #plot2{ position: absolute; top: 164px; left: 200px;} #plot3{ position: absolute; top: 228px; left: 200px;} #plot4{ position: absolute; top: 295px; left: 200px;} #plot5{ position: absolute; top: 362px; left: 200px;} #plot6{ position: absolute; top: 423px; left: 200px;} #plot7{ position: absolute; top: 480px; left: 200px;} #plot8{ position: absolute; top: 530px; left: 200px;} /*Left End*/ /*UP Effect*/ #plot9{ position: absolute; top: 440px; left: 260px;} #plot10{ position: absolute; top: 440px; left: 191px;} #plot11{ position: absolute; top: 440px; left: 125px;} #plot12{ position: absolute; top: 448px; left: 55px;} #plot13{ position: absolute; top: 566px; left: 61px;} #plot14{ position: absolute; top: 560px; left: 118px;} #plot15{ position: absolute; top: 560px; left: 179px;} #plot16{ position: absolute; top: 560px; left: 238px;} #plot17{ position: absolute; top: 560px; left: 298px;} #plot18{ position: absolute; top: 560px; left: 358px;} #plot19{ position: absolute; top: 675px; left: 358px;} #plot20{ position: absolute; top: 675px; left: 298px;} #plot21{ position: absolute; top: 675px; left: 238px;} #plot22{ position: absolute; top: 675px; left: 179px;} #plot23{ position: absolute; top: 675px; left: 118px;} #plot24{ position: absolute; top: 680px; left: 66px;} #plot25{ position: absolute; top: 750px; left: 70px;} #plot26{ position: absolute; top: 745px; left: 120px;} #plot27{ position: absolute; top: 745px; left: 180px;} #plot28{ position: absolute; top: 745px; left: 238px;} #plot29{ position: absolute; top: 745px; left: 298px;} #plot30{ position: absolute; top: 745px; left: 358px;} /*UP End*/ /*Bottom Row with UP effect Plot31-38*/ #container2 .info-plot31{ position: absolute; top: 1018px; left: 240px;} #plot31{ position: absolute; top: 860px; left: 125px;} #container2 .info-plot32{ position: absolute; top: 1018px; left: 294px;} #plot32{ position: absolute; top: 860px; left: 179px;} #container2 .info-plot33{ position: absolute; top: 1020px; left: 353px;} #plot33{ position: absolute; top: 865px; left: 238px;} #container2 .info-plot34{ position: absolute; top: 1020px; left: 413px;} #plot34{ position: absolute; top: 865px; left: 298px;} #container2 .info-plot35{ position: absolute; top: 1027px; left: 473px;} #plot35{ position: absolute; top: 870px; left: 358px;} #container2 .info-plot36{ position: absolute; top: 1028px; left: 533px;} #plot36{ position: absolute; top: 870px; left: 418px;} #container2 .info-plot37{ position: absolute; top: 1029px; left: 592px;} #plot37{ position: absolute; top: 870px; left: 477px;} #container2 .info-plot38{ position: absolute; top: 1029px; left: 652px;} #plot38{ position: absolute; top: 870px; left: 537px;} /*End of Bottom row*/ /*Right Grid Plot39-63*/ #container2 .info-plot39{ position: absolute; top: 900px; left: 700px;} #plot39{ position: absolute; top: 831px; left: 727px;} #container2 .info-plot40{ position: absolute; top: 900px; left: 642px;} #plot40{ position: absolute; top: 745px; left: 528px;} #container2 .info-plot41{ position: absolute; top: 908px; left: 583px;} #plot41{ position: absolute; top: 745px; left: 468px;} #container2 .info-plot42{ position: absolute; top: 850px; left: 583px;} #plot42{ position: absolute; top: 688px; left: 468px;} #container2 .info-plot43{ position: absolute; top: 830px; left: 642px;} #plot43{ position: absolute; top: 675px; left: 528px;} #container2 .info-plot44{ position: absolute; top: 830px; left: 700px;} #plot44{ position: absolute; top: 762px; left: 727px;} #container2 .info-plot45{ position: absolute; top: 716px; left: 700px;} #plot45{ position: absolute; top: 648px; left: 727px;} #container2 .info-plot46{ position: absolute; top: 716px; left: 642px;} #plot46{ position: absolute; top: 560px; left: 528px;} #container2 .info-plot47{ position: absolute; top: 725px; left: 583px;} #plot47{ position: absolute; top: 560px; left: 468px;} #container2 .info-plot48{ position: absolute; top: 665px; left: 583px;} #plot48{ position: absolute; top: 500px; left: 468px;} #container2 .info-plot49{ position: absolute; top: 646px; left: 642px;} #plot49{ position: absolute; top: 490px; left: 527px;} #container2 .info-plot50{ position: absolute; top: 646px; left: 700px;} #plot50{ position: absolute; top: 576px; left: 727px;} #container2 .info-plot51{ position: absolute; top: 531px; left: 700px;} #plot51{ position: absolute; top: 462px; left: 727px;} #container2 .info-plot52{ position: absolute; top: 531px; left: 642px;} #plot52{ position: absolute; top: 375px; left: 527px;} #container2 .info-plot53{ position: absolute; top: 540px; left: 583px;} #plot53{ position: absolute; top: 375px; left: 467px;} #container2 .info-plot54{ position: absolute; top: 480px; left: 583px;} #plot54{ position: absolute; top: 315px; left: 467px;} #container2 .info-plot55{ position: absolute; top: 462px; left: 642px;} #plot55{ position: absolute; top: 305px; left: 527px;} #container2 .info-plot56{ position: absolute; top: 461px; left: 700px;} #plot56{ position: absolute; top: 393px; left: 727px;} #container2 .info-plot57{ position: absolute; top: 346px; left: 700px;} #plot57{ position: absolute; top: 278px; left: 727px;} #container2 .info-plot58{ position: absolute; top: 346px; left: 642px;} #plot58{ position: absolute; top: 190px; left: 527px;} #container2 .info-plot59{ position: absolute; top: 354px; left: 584px;} #plot59{ position: absolute; top: 190px; left: 469px;} #container2 .info-plot60{ position: absolute; top: 295px; left: 584px;} #plot60{ position: absolute; top: 130px; left: 469px;} #container2 .info-plot61{ position: absolute; top: 277px; left: 663px;} #plot61{ position: absolute; top: 120px; left: 548px;} #container2 .info-plot62{ position: absolute; top: 173px; left: 594px;} #plot62{ position: absolute; top: 0px; left: 479px;} #container2 .info-plot63{ position: absolute; top: 158px; left: 645px;} #plot63{ position: absolute; top: 0px; left: 531px;} /*End of Right Grid*/ .popover { position: absolute; z-index: 1010; opacity: 0; display: none; width: 236px; padding: 1px; text-align: left; white-space: normal; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box;} .popover.top { margin-top: -10px;} .popover.right { margin-left: 10px;} .popover.bottom { margin-top: 10px;} .popover.left { margin-left: -10px;} .popover-title { padding: 8px 14px; margin: 0; font-size: 18px; font-weight: normal; line-height: 18px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;} .popover-content { padding: 9px 14px; font-size:14px;} .popover .arrow,.popover .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid;} .popover .arrow { border-width: 11px;} .popover .arrow:after { border-width: 10px; content: "";} .popover.top .arrow { bottom: -11px; left: 50%; margin-left: -11px; border-top-color: #999; border-top-color: rgba(0, 0, 0, 0.25); border-bottom-width: 0;} .popover.top .arrow:after { bottom: 1px; margin-left: -10px; border-top-color: #ffffff; border-bottom-width: 0;} .popover.right .arrow { top: 50%; left: -11px; margin-top: -11px; border-right-color: #999; border-right-color: rgba(0, 0, 0, 0.25); border-left-width: 0;} .popover.right .arrow:after { bottom: -10px; left: 1px; border-right-color: #ffffff; border-left-width: 0;} .popover.bottom .arrow { top: -11px; left: 50%; margin-left: -11px; border-bottom-color: #999; border-bottom-color: rgba(0, 0, 0, 0.25); border-top-width: 0;} .popover.bottom .arrow:after { top: 1px; margin-left: -10px; border-bottom-color: #ffffff; border-top-width: 0;} .popover.left .arrow { top: 50%; right: -11px; margin-top: -11px; border-left-color: #999; border-left-color: rgba(0, 0, 0, 0.25); border-right-width: 0;} .popover.left .arrow:after { right: 1px; bottom: -10px; border-left-color: #ffffff; border-right-width: 0;} .animated { -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; -o-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;} @-webkit-keyframes cardInTop { 0% { -webkit-transform-origin: 50% 100% 0px; -webkit-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5); } 100% { -webkit-transform-origin: 50% 100% 0px; -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } } @-moz-keyframes cardInTop { 0% { -moz-transform-origin: 50% 100% 0px; -moz-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5); } 100% { -moz-transform-origin: 50% 100% 0px; -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } } @-o-keyframes cardInTop { 0% { -o-transform-origin: 50% 100% 0px; -o-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5); } 100% { -o-transform-origin: 50% 100% 0px; -o-transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } } @keyframes cardInTop { 0% { transform-origin: 50% 100% 0px; transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5); } 100% { transform-origin: 50% 100% 0px; transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } } .cardInTop { -webkit-animation-name: cardInTop; -moz-animation-name: cardInTop; -o-animation-name: cardInTop; animation-name: cardInTop;} @-webkit-keyframes cardInBottom { 0% { -webkit-transform-origin: 50% 0% 0px; -webkit-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5); } 100% { -webkit-transform-origin: 50% 0% 0px; -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } } @-moz-keyframes cardInBottom { 0% { -moz-transform-origin: 50% 0% 0px; -moz-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5); } 100% { -moz-transform-origin: 50% 0% 0px; -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } } @-o-keyframes cardInBottom { 0% { -o-transform-origin: 50% 0% 0px; -o-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5); } 100% { -o-transform-origin: 50% 0% 0px; -o-transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } } @keyframes cardInBottom { 0% { transform-origin: 50% 0% 0px; transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5); } 100% { transform-origin: 50% 0% 0px; transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } } .cardInBottom { -webkit-animation-name: cardInBottom; -moz-animation-name: cardInBottom; -o-animation-name: cardInBottom; animation-name: cardInBottom;} @-webkit-keyframes cardInLeft { 0% { -webkit-transform-origin: 100% 50% 0px; -webkit-transform: perspective(500px) rotateY(-90deg) scale(0, 0); } 100% { -webkit-transform-origin: 100% 50% 0px; -webkit-transform: perspective(500px) rotateY(0deg) scale(1, 1); opacity: 1; } } @-moz-keyframes cardInLeft { 0% { -moz-transform-origin: 100% 50% 0px; -moz-transform: perspective(500px) rotateY(-90deg) scale(0, 0); } 100% { -moz-transform-origin: 100% 50% 0px; -moz-transform: perspective(500px) rotateY(0deg) scale(1, 1); opacity: 1; } } @-o-keyframes cardInLeft { 0% { -o-transform-origin: 100% 50% 0px; -o-transform: perspective(500px) rotateY(-90deg) scale(0, 0); } 100% { -o-transform-origin: 100% 50% 0px; -o-transform: perspective(500px) rotateY(0deg) scale(1, 1); opacity: 1; } } @keyframes cardInLeft { 0% { transform-origin: 100% 50% 0px; transform: perspective(500px) rotateX(-90deg) scale(0, 0); } 100% { transform-origin: 100% 50% 0px; transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } } .cardInLeft { -webkit-animation-name: cardInLeft; -moz-animation-name: cardInLeft; -o-animation-name: cardInLeft; animation-name: cardInLeft;} @-webkit-keyframes cardInRight { 0% { -webkit-transform-origin: 0% 50% 0px; -webkit-transform: perspective(500px) rotateY(90deg) scale(0, 0); } 100% { -webkit-transform-origin: 0% 50% 0px; -webkit-transform: perspective(500px) rotateY(0deg) scale(1, 1); opacity: 1; } } @-moz-keyframes cardInRight { 0% { -moz-transform-origin: 0% 50% 0px; -moz-transform: perspective(500px) rotateY(90deg) scale(0, 0); } 100% { -moz-transform-origin: 0% 50% 0px; -moz-transform: perspective(500px) rotateY(0deg) scale(1, 1); opacity: 1; } } @-o-keyframes cardInRight { 0% { -o-transform-origin: 0% 50% 0px; -o-transform: perspective(500px) rotateY(90deg) scale(0, 0); } 100% { -o-transform-origin: 0% 50% 0px; -o-transform: perspective(500px) rotateY(0deg) scale(1, 1); opacity: 1; } } @keyframes cardInRight { 0% { transform-origin: 0% 50% 0px; transform: perspective(500px) rotateX(90deg) scale(0, 0); } 100% { transform-origin: 0% 50% 0px; transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } } .cardInRight { -webkit-animation-name: cardInRight; -moz-animation-name: cardInRight; -o-animation-name: cardInRight; animation-name: cardInRight;} @-webkit-keyframes cardOutTop { 0% { -webkit-transform-origin: 50% 100% 0px; -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } 100% { -webkit-transform-origin: 50% 100% 0px; -webkit-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5); opacity: 0; } } @-moz-keyframes cardOutTop { 0% { -moz-transform-origin: 50% 100% 0px; -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } 100% { -moz-transform-origin: 50% 100% 0px; -moz-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5); opacity: 0; } } @-o-keyframes cardOutTop { 0% { -o-transform-origin: 50% 100% 0px; -o-transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } 100% { -o-transform-origin: 50% 100% 0px; -o-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5); opacity: 0; } } @keyframes cardOutTop { 0% { transform-origin: 50% 100% 0px; transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } 100% { transform-origin: 50% 100% 0px; transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5); opacity: 0; } } .cardOutTop { -webkit-animation-name: cardOutTop; -moz-animation-name: cardOutTop; -o-animation-name: cardOutTop; animation-name: cardOutTop;} @-webkit-keyframes cardOutBottom { 0% { -webkit-transform-origin: 50% 0% 0px; -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } 100% { -webkit-transform-origin: 50% 0% 0px; -webkit-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5); opacity: 0; } } @-moz-keyframes cardOutBottom { 0% { -moz-transform-origin: 50% 0% 0px; -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } 100% { -moz-transform-origin: 50% 0% 0px; -moz-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5); opacity: 0; } } @-o-keyframes cardOutBottom { 0% { -o-transform-origin: 50% 0% 0px; -o-transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } 100% { -o-transform-origin: 50% 0% 0px; -o-transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5); opacity: 0; } } @keyframes cardOutBottom { 0% { transform-origin: 50% 0% 0px; transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } 100% { transform-origin: 50% 0% 0px; transform: perspective(500px) rotateX(90deg) scale(0.5, 0.5); opacity: 0; }} .cardOutBottom { -webkit-animation-name: cardOutBottom; -moz-animation-name: cardOutBottom; -o-animation-name: cardOutBottom; animation-name: cardOutBottom;} @-webkit-keyframes cardOutLeft { 0% { -webkit-transform-origin: 100% 50% 0px; -webkit-transform: perspective(500px) rotateY(0deg) scale(1, 1); opacity: 1; } 100% { -webkit-transform-origin: 100% 50% 0px; -webkit-transform: perspective(500px) rotateY(90deg) scale(0, 0); opacity: 0; }} @-moz-keyframes cardOutLeft { 0% { -moz-transform-origin: 100% 50% 0px; -moz-transform: perspective(500px) rotateY(0deg) scale(1, 1); opacity: 1; } 100% { -moz-transform-origin: 100% 50% 0px; -moz-transform: perspective(500px) rotateY(90deg) scale(0, 0); opacity: 0; }} @-o-keyframes cardOutLeft { 0% { -o-transform-origin: 100% 50% 0px; -o-transform: perspective(500px) rotateY(0deg) scale(1, 1); opacity: 1; } 100% { -o-transform-origin: 100% 50% 0px; -o-transform: perspective(500px) rotateY(90deg) scale(0, 0); opacity: 0; }} @keyframes cardOutLeft { 0% { transform-origin: 100% 50% 0px; transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } 100% { transform-origin: 100% 50% 0px; transform: perspective(500px) rotateX(90deg) scale(0, 0); opacity: 0; }} .cardOutLeft { -webkit-animation-name: cardOutLeft; -moz-animation-name: cardOutLeft; -o-animation-name: cardOutLeft; animation-name: cardOutLeft;} @-webkit-keyframes cardOutRight { 0% { -webkit-transform-origin: 0% 50% 0px; -webkit-transform: perspective(500px) rotateY(0deg) scale(1, 1); opacity: 1; } 100% { -webkit-transform-origin: 0% 50% 0px; -webkit-transform: perspective(500px) rotateY(-90deg) scale(0, 0); opacity: 0; }} @-moz-keyframes cardOutRight { 0% { -moz-transform-origin: 0% 50% 0px; -moz-transform: perspective(500px) rotateY(0deg) scale(1, 1); opacity: 1; } 100% { -moz-transform-origin: 0% 50% 0px; -moz-transform: perspective(500px) rotateY(-90deg) scale(0, 0); opacity: 0; }} @-o-keyframes cardOutRight { 0% { -o-transform-origin: 0% 50% 0px; -o-transform: perspective(500px) rotateY(0deg) scale(1, 1); opacity: 1; } 100% { -o-transform-origin: 0% 50% 0px; -o-transform: perspective(500px) rotateY(-90deg) scale(0, 0); opacity: 0; }} @keyframes cardOutRight { 0% { transform-origin: 0% 50% 0px; transform: perspective(500px) rotateX(0deg) scale(1, 1); opacity: 1; } 100% { transform-origin: 0% 50% 0px; transform: perspective(500px) rotateX(-90deg) scale(0, 0); opacity: 0; }} .cardOutRight { -webkit-animation-name: cardOutRight; -moz-animation-name: cardOutRight; -o-animation-name: cardOutRight; animation-name: cardOutRight;}