/* Styles for main page of www.markschenk.com */
/* March 2006 - decimated styling with same result by using position absolute */
/* June 2008 - added some text-shadow effects */
/* March 2010 - added webfonts + rounded corners */

@font-face {
	font-family: "Diavlo"; /* http://www.josbuivenga.demon.nl/diavlo.html */
	src: url("http://www.markschenk.com/styles/Diavlo_BOLD_II_37.otf") format("opentype");
}

/* general styles */
body { background-color: black; color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; margin: 0px; padding: 50px 160px; }
h1 { font-family: Diavlo; margin: 0px auto; width: 375px; font-size: 22px; }
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: underline; }
a:hover { border-width: 0px 0px 1px 0px; border-style: solid; border-color: white; text-decoration: none; }

/* some CSS3 stuff */
li > a:link, li > a:visited { text-shadow: black 3px 4px 5px; text-decoration: none; }
li > a:hover { font-weight: bold; border: none; }
h3 { text-shadow: black 1px 1px 5px; }

/* pantone square styling. Tantek's Boxmodel hack included */
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; border-radius: 1em 0em 0em 1em; }
li:hover div { display: block; }
li#que div { width: 355px; height: auto; text-align: justify; top: 375px; left: 0px; z-index: 2; display:none;  border-radius: 0em 0em 1em 1em; }
li#que:hover div { display: block; }

/* little copyright thingie */
p#copyright { width: 375px; margin: 10px auto; display: block; font-style: italic; color: #DCDCDC; z-index: -2; line-height: 1.5em;}

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