Mapa puro de CSS

<html>
<head>
<style>
@import url(‘map_usa.css’);

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(0.1) skew(1deg) translate(0px); }
to
{ -webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(0.1) skew(1deg) translate(0px); }
to
{ -moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(0.1) skew(1deg) translate(0px); }
to
{ -o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px); }
}

@font-face {
font
-family: hamburgerheavenregular’;
src
: url(‘../fonts/hambh__-webfont.eot’);
src
: url(‘../fonts/hambh__-webfont.eot?#iefix’) format(‘embedded-opentype’),
url
(‘../fonts/hambh__-webfont.woff’) format(‘woff’),
url
(‘../fonts/hambh__-webfont.ttf’) format(‘truetype’),
url
(‘../fonts/hambh__-webfont.svg#hamburgerheavenregular’) format(‘svg’);
font
-weight: normal;
font
-style: normal;

}

#header{
height
: 140px;
width
: 1050px;
margin
-right: auto;
margin
-left: auto;

}

#header h1{
font
-family: hamburgerheavenregular, sans-serif;
font
-size: 96px;
line
-height:18px;
}

#mapBox{
background
-image: url(../images/map.gif);
background
-size:100%;
background
-repeat:no-repeat;
height
: 603px;
width
: 984px;
margin
-top: -60px;
margin
-right: auto;
margin
-left: auto;
border
: medium dashed #FFF;
}

a
{
display
:block;
height
: 50px;
width
: 50px;
background
-image: url(../images/star.png);
background
-size:70%;
background
-repeat:no-repeat;
transition
:All 1.2756s ease;
-webkit-transition:All 1.2756s ease;
-moz-transition:All 1.2756s ease;
-o-transition:All 1.2756s ease;
transform
: rotate(0deg) scale(0.5) skew(1deg) translate(0px);
-webkit-transform: rotate(0deg) scale(0.5) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.5) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.5) skew(1deg) translate(0px);
-ms-transform: rotate(0deg) scale(0.5) skew(1deg) translate(0px);

}

a
:hover{
transform
: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-ms-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
}

a
.close{
display
:block;
height
: 19px;
width
: 22px;
background
-image: url(../images/x.png);
background
-size:70%;
margin
-top: 10px;
margin
-left: 205px;
margin
-bottom: 20px;
}

a
.close:hover{
-webkit-animation: cssAnimation 0.80828s 16 ease;-moz-animation: cssAnimation 0.80828s 16 ease;-o-animation: cssAnimation 0.80828s 16 ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;

}
.descript{
height
: 280px;
width
: 240px;
-moz-border-radius-topleft: 48px;
-moz-border-radius-topright:48px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:48px;
-webkit-border-top-left-radius:48px;
-webkit-border-top-right-radius:48px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:48px;
border
-top-left-radius:48px;
border
-top-right-radius:48px;
border
-bottom-left-radius:0px;
border
-bottom-right-radius:48px;
-moz-box-shadow: 21px 21px 25px #666;
-webkit-box-shadow: 21px 21px 25px #666;
box
-shadow: 21px 21px 25px #666;
padding
: 7px;
}

.titleBox{
font
-family: hamburgerheavenregular, sans-serif;
margin
-left: 15px;
margin
-top: -30px;
height
: 20px;
width
: 250px;
font
-size: 22px;
margin
-bottom: 10px;
line
-height: 30px;
margin
-right: auto;
}

.videoBox{
height
: 144px;
width
: 192px;
margin
-top: 10px;
margin
-left: auto;
margin
-right: auto;
}

.textBox{
width
: 210px;
margin
-top: 10px;
margin
-left: 10px;
height
: 70px;
font
-family: Arial, Helvetica, sans-serif;
}

/*————————————————————————-*/
.descript{
background
-color: #0F5;
}
/*———————————————-*/
/*———————————————-*/
a
.item_1{
margin
-top: 470px;
margin
-left: 440px;
width
:50px;
height
:50px;
}

#itemDetails_1{
display
:none;
margin
-top: -340px;
margin
-left: 480px;
position
: fixed;
}

#itemDetails_1:target{
display
:block;
-webkit-animation: cssAnimation 0.3s 16 ease;
-moz-animation: cssAnimation 0.3s 16 ease;
-o-animation: cssAnimation 0.3s 16 ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
z
-index:2;
}
/*———————————————-*/

a
.item_2{
margin
-top: -180px;
margin
-left: 275px;
width
:50px;
height
:50px;
}

#itemDetails_2{
display
:none;
margin
-top: -340px;
margin
-left: 320px;
position
: fixed;
}

#itemDetails_2:target{
display
:block;
-webkit-animation: cssAnimation 0.3s 16 ease;
-moz-animation: cssAnimation 0.3s 16 ease;
-o-animation: cssAnimation 0.3s 16 ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
z
-index:2;
}

/*———————————————-*/
a
.item_3{
margin
-top: -245px;
margin
-left: 580px;
width
:50px;
height
:50px;
}

#itemDetails_3{
display
:none;
margin
-top: -340px;
margin
-left:620px;
position
: fixed;
}

#itemDetails_3:target{
display
:block;
-webkit-animation: cssAnimation 0.3s 16 ease;
-moz-animation: cssAnimation 0.3s 16 ease;
-o-animation: cssAnimation 0.3s 16 ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
z
-index:2;
}
/*———————————————-*/
a
.item_4{
margin
-top: 155px;
margin
-left: 440px;
width
:50px;
height
:50px;
}

#itemDetails_4{
display
:none;
margin
-top: -340px;
margin
-left:480px;
-webkit-margin-top: -380px;
-webkit-margin-left:510px;
position
: fixed;
}

#itemDetails_4:target{
display
:block;
-webkit-animation: cssAnimation 0.3s 16 ease;
-moz-animation: cssAnimation 0.3s 16 ease;
-o-animation: cssAnimation 0.3s 16 ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
z
-index:2;
}

</style>
</head>
<body>
<div id=”mapBox”><a href=”#itemDetails_1″></a>
<div id=”itemDetails_1″>
<div><a></a>
<div>Austin, Texas</div>
<div><iframe width=”128″ height=”96″ src=”http://www.youtube.com/embed/bA1ZIyeY91E” frameborder=”0″ allowfullscreen=”"></iframe></div>
<div>The capital of Texas is Austin. The state song of Texas is “Texas, Our Texas!”<br /> Add this Event to my iCal or <a href=”http://www.google.com/calendar/event?action=TEMPLATE&amp;text=Test%20Event&amp;dates=20130606T130000Z/20130606T213000Z&amp;details=This%20Panel%20where%20so%20and%20so%20explains%20all%20about%20that%20thing.&amp;location=Austin%20Convention%20Center%2C%20Panel%20Room%20213&amp;trp=false&amp;sprop=&amp;sprop=name:” target=”_blank”>Google Calendar</a></div>
</div>
</div>
<a href=”#itemDetails_2″></a>
<div id=”itemDetails_2″>
<div><a></a>
<div>Santa Fe, New Mexico</div>
<div><iframe width=”128″ height=”96″ src=”http://www.youtube.com/embed/5ai3iP6RPQY” frameborder=”0″ allowfullscreen=”"></iframe></div>
<div>The capital of New Mexico is Santa Fe. The state song of New Mexico is “O, Fair New Mexico”</div>
</div>
</div>
<a href=”#itemDetails_3″></a>
<div id=”itemDetails_3″>
<div><a></a>
<div>Madison, Wisconsin</div>
<div><iframe width=”128″ height=”96″ src=”http://www.youtube.com/embed/zOYus1BE7jk” frameborder=”0″ allowfullscreen=”"></iframe></div>
<div>The capital of Wisconsin is Madison. The state song of Wisconsin is “On, Wisconsin!”</div>
</div>
</div>
<a href=”#itemDetails_4″></a>
<div id=”itemDetails_4″>
<div><a></a>
<div>Oklahoma City, Oklahoma</div>
<div><iframe width=”128″ height=”96″ src=”http://www.youtube.com/embed/mrDVzbeDzRk” frameborder=”0″ allowfullscreen=”"></iframe></div>
<div>The capital of Oklahoma is Oklahoma City. The state song of Oklahoma is “Oklahoma!”