/* 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 */
/* December 2010 - play with transitions for Opera */
/* June 2011 - gradient background, cleaned up some fluff; improved cross-browser compatibility */
/* March 2021 - 10 year anniverary update; cleaned some styles */


/* general styles */
html { 
	background-color: #747474; 
	background-image: -o-linear-gradient(top,#747474,black); 
	background-image: -webkit-linear-gradient(top,#747474,black); 
	background-image: -moz-linear-gradient(top,#747474,black); 
	background-image: linear-gradient(top,#747474,black); 
	margin:0; padding: 0; min-height:100%; }

body { 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:white;}
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; }

/* 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; width:65px; height: 65px; }
ul#pantone li:first-letter { font-weight: bold; }

/* hovering blocks */
li div { 
	text-align: right; 
	padding: 10px; 
	width: 130px; 
	overflow:hidden; 
	height: 355px; 
	font-style: italic; 
	position:absolute; 
	right:374px; 
	top:0px; 
	background-color: inherit; 
	opacity: 0; 
	-o-transition-property: opacity; -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; 
	-o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; 
	-o-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; transition-timing-function: ease-in;
	display:none;}
li:hover div { display: block; opacity: 1; }
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; }

/* little copyright thingie */
p#copyright { width: 375px; margin: 10px auto; display: block; font-style: italic; color: #8B8B8B; 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; }
}