#header { margin: 0 auto; width: 622px; }
hr { border: 0; border-top: solid 1px #ccc; margin: 0 0 30px 0 }
#pyramid { width: 900px; margin: 0 auto; position: relative; text-align: center; }

/* ALL pyramid segments*/
#top { background: url('images/KeyCite.png') no-repeat; width: 230px; height: 172px; overflow: hidden; margin: 0 auto 1px; }
#top:hover { background-position: 0 -172px; }

#middle  { position: relative; top: -1px; width: 900px; }
#middle #a { background: url('images/Statutes.png') no-repeat; width: 173px; height: 173px; overflow: hidden; margin: 0 auto; float: left; position: relative; left: 220px; }
#middle #b { background: url('images/Case.png') no-repeat; width: 95px; height: 173px; overflow: hidden; margin: 0 auto; float: left; position: relative; left: 221px; }
#middle #c { background: url('images/Regulations.png') no-repeat; width: 188px; height: 173px; overflow: hidden; margin: 0 auto; float: left; position: relative; left: 222px; }
#middle #a:hover, #middle #b:hover, #middle #c:hover { background-position: 0 -173px; }

#bottom  { position: relative; top: -3px; width: 900px; clear: both; } /* the IE stylesheet copies this rule for an addtl -3px upward shift in IE for a total of -5px */
#bottom #a { background: url('images/State.png') no-repeat; width: 228px; height: 190px; overflow: hidden; margin: 0 auto; float: left; position: relative; left: 93px; top: 3px; }
#bottom #b { background: url('images/AmJur.png') no-repeat; width: 126px; height: 190px; overflow: hidden; margin: 0 auto; float: left; position: relative; left: 94px; top: 3px; }
#bottom #c { background: url('images/ALR.png') no-repeat; width: 129px; height: 190px; overflow: hidden; margin: 0 auto; float: left; position: relative; left: 95px; top: 3px; }
#bottom #d { background: url('images/Treatises.png') no-repeat; width: 227px; height: 190px; overflow: hidden; margin: 0 auto; float: left; position: relative; left: 96px; top: 3px; }
#bottom #a:hover, #bottom #b:hover, #bottom #c:hover, #bottom #d:hover  { background-position: 0 -190px; }
/* end ALL pyramid segments*/

/* top pyramid button & hover */
#top + .row1 { display: block; position: absolute; top: 1px; left: 28px; z-index: -1;
background:url('Keycite_info.png');
width: 425px;
height: 173px;
transition: .5s;
-moz-transition: .5s; /* Firefox 4 */
-webkit-transition: .5s; /* Safari and Chrome */
-o-transition: .5s; /* Opera */
opacity: 0; }

#top:hover + .row1 { opacity: 1; }
/* end top pyramid button & hover */

/* middle pyramid buttons & hover */
#middle #a + div, #middle #b + div, #middle #c + div { 
display: block; position: absolute; top: 1px; left: -78px; z-index: -1;
width: 412px;
height: 171px;
transition: .5s;
-moz-transition: .5s; /* Firefox 4 */
-webkit-transition: .5s; /* Safari and Chrome */
-o-transition: .5s; /* Opera */
opacity: 0; }

#middle #a + div { background: url('images/Statutes_info.png') no-repeat; }
#middle #b + div { background: url('images/CaseLaw_info.png') no-repeat; }
#middle #c + div { background: url('images/Regulations_info.png') no-repeat; }
#middle div { position:relative; }
#middle div a { position: absolute; height: 100%; width: 100%; top: 0; left: 0; }

#middle #a:hover + div, #middle #b:hover + div, #middle #c:hover + div { opacity: 1; }
/* end middle pyramid buttons & hover */

/* bottom pyramid buttons & hover */
#bottom #a + div, #bottom #b + div, #bottom #c + div, #bottom #d + div { display: block; position: absolute; top: 0px; left: -130px; z-index: -1;
width: 352px;
height: 190px;
transition: .5s;
-moz-transition: .5s; /* Firefox 4 */
-webkit-transition: .5s; /* Safari and Chrome */
-o-transition: .5s; /* Opera */
opacity: 0; }

#bottom #a + div { background: url('images/StateJurisMaterials_info.png') no-repeat; }
#bottom #b + div { background: url('images/AmJur_info.png') no-repeat; }
#bottom #c + div { background: url('images/ALR_info.png') no-repeat; }
#bottom #d + div { background: url('images/Treatises_info.png') no-repeat; }
#bottom div { position: relative; }
#bottom div a { position: absolute; height: 100%; width: 100%; top: 0; left: 0;  }

#bottom #a:hover + div, #bottom #b:hover + div, #bottom #c:hover + div, #bottom #d:hover + div { opacity: 1; }
/* end bottom pyramid buttons & hover */

#info { width: 700px; margin: 0 auto; color: #666; clear: both; position: relative; top: 7px; }
#info p { font: .7em arial, helvetica, sans-serif; }
#info ol { font: .8em arial, helvetica, sans-serif; margin: 25px; }