The stars of Orion (interactive)

http://code.jquery.com/jquery-2.1.1.min.js
http://photodesk.chicagotribune.com.s3.amazonaws.com/Graphics/graphics-libraries-no-delete/makePanels/jquery.makePanels.1.0.min.js

/* Chrome, Safari, Opera */
@-webkit-keyframes ringAnimation {
0% {width: 40%;height:40%;opacity:1;top:30%;left:30%;}
85% {width: 100%;height:100%;opacity:1;top:0%;left:0%;}
100% {width: 40%;height:40%;opacity:0;top:30%;left:30%;}
}

/* Standard syntax */
@keyframes ringAnimation {
0% {width: 40%;height:40%;opacity:1;top:30%;left:30%;}
85% {width: 100%;height:100%;opacity:1;top:0%;left:0%;}
100% {width: 40%;height:40%;opacity:0;top:30%;left:30%;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes dotAnimation {
0% {opacity: .5;}
85% {opacity: 1;}
100% {opacity: 0;}
}

/* Standard syntax */
@keyframes dotAnimation {
0% {opacity: .5;}
85% {opacity: 1;}
100% {opacity: .5;}
}

.go-panels .panel, .panel{
max-width:720px;
margin-left:auto;
margin-right:auto;
}

.highlight-icon-outer{position: absolute;top:0;left:0;margin: -13.5px 0 0 -14.5px;}
.highlight-icon-inner{position:relative;width:25px;height:25px;}
.ring {position: absolute;height: 100%;width: 100%;border: 2px solid #D7153A;padding: 0;border-radius: 50%;top: 0;left: 0;margin: -2px 0 0 -2px;-webkit-animation: ringAnimation 1s infinite; /* Chrome, Safari, Opera */animation: ringAnimation 1s infinite;}
.dot {DISPLAY:NONE;position: absolute;height:54%;width:54%;background-color: #D7153A;top:23%;left:23%;border-radius: 50%;-webkit-animation: dotAnimation 1s infinite; /* Chrome, Safari, Opera */ animation: dotAnimation 1s infinite;}

.blurb{
width:30%;
float:right;
margin-top:25px;
}

.orion-illo{
float:left;
position:relative;
width:70%;
}

#betelgeuse .highlight-icon-outer{top: 45.5%;left: 38.4%;margin: -22.5px 0 0 -22.5px;}
#betelgeuse .highlight-icon-inner{width: 45px;height: 45px;}

#bellatrix .highlight-icon-outer{top: 48.7%;left: 59.5%;}
#orion-nebula .highlight-icon-outer{top: 82.7%;left: 52.2%;}
#rigel .highlight-icon-outer{margin: -22.5px 0 0 -22.5px;top: 90.9%;left: 66.7%;}
#rigel .highlight-icon-inner{width: 45px;height: 45px;}

#saiph .highlight-icon-outer{top: 95.1%;left: 43.3%;}

.alnitak {top: 72.8%;left: 48.6%;}
.alnitak.box {background-color:#D7153A;}

.alnilam {top: 70.7%;left: 51.75%;}
.alnilam.box {background-color:#FFD773;}
.alnilam .ring {border-color:#FFD773;}

.mintaka {top: 67.9%;left: 54.7%;}
.mintaka.box {background-color:#EB964F;}
.mintaka .ring {border-color:#EB964F;}

#meissa .highlight-icon-outer{top: 38.5%;left: 52.7%;}

@media all and (max-width: 700px) {
.highlight-icon-outer{margin: -15.5px 0 0 -16.5px;}
#rigel .highlight-icon-outer, #betelgeuse .highlight-icon-outer{margin: -24.5px 0 0 -24.5px;}
.blurb, .orion-illo{
float:none;
width:100%;
}
.ring {border: 4px solid #D7153A;margin: -2px 0 0 -2px;}

.highlight-icon-inner > *{
-webkit-animation:none;
animation:none;
}
}

$(‘#orion’).makePanels({
type:”dropdown”, /* Options are “none”, “buttons” or “dropdown” */
transitionSpeed: 0, /* 0=instant, 1000 = 1 second */
showForwardBackButtons:true, /* duh! */
alignNav:”center” /* Also can be “left” */
});