/*Do what thou wilt shall be the whole of the Law*/

/*I found the bare bones of this css code on a how to page and built it to suit. I liked the array of boxes; the idea being very unique.*/


body { background-color: black; color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; margin: 0px; padding: 50px 160px; }
h1 { margin: 0px auto; width: 375px; font-size: 22px;
color: #FF9900;
text-align: center;
 }
h2 { margin: 0px 0px 2px 0px; font-size: 14px; }
h3 { margin: 0px; font-size: 12px; }
p { margin: 0px 0px 10px 0px; }
a:link, a:visited, a:hover, a:active { color: white; text-decoration: none ; }
a:hover { border-width: 1px 0px; border-style: solid; border-color: white; text-decoration: none; }


ul#pantone { width: 375px; height: 375px; margin: 0px auto; padding: 0px; list-style: none; position:relative; }
ul#pantone li { display: block; float: left; margin: 0px; padding: 5px; line-height: 15px; width:75px; height:75px; voice-family: "\"}\"";  voice-family:inherit;  width:65px; height: 65px; }
ul#pantone li:first-letter { font-weight: bold; }

/* hovering blocks */
li div { text-align: right; padding: 10px; width: 130px; height: 355px; font-style: italic; position:absolute; right:374px; top:0px; display:none; background-color: inherit; }
li:hover div { display: block; }
li#que div { width: 355px; height: auto; text-align: justify; top: 375px; left: 0px; z-index: 2; display:none; }
li#que:hover div { display: block; }
p#copyright { width: 375px; margin: 10px auto; display: block; font-style: italic; color: #DCDCDC; z-index: -2; line-height: 1.5em;
text-align: center;
color: #FF9900;
}
body div#iewarning { padding: 5px; display: block; border: 1px white solid; width: 365px; margin: 10px auto; z-index: -2; }
head:first-child+body div#iewarning { display: none; }

@media projection {
ul#pantone li { float: right; text-align: right;}
li[id] div { left: 375px; text-align: left; }
li#que { left: 0px; }
}