/****** by Thor K.H, 2009                    ******
******* inspiration gathered from everywhere ******
******* copylefted                           *****/

/* #1 reset the two parts that will           **
**    annoy you the most                      */
* {margin:0; padding:0;font-size:1em;}

/* #2 set some basics regarding               **
**    layout/position on elements we display  */
header, section, nav, section > article:target, section > article:target p, section > article:first-of-type  {
	display:block; }
section:first-of-type a, section > article:first-of-type, p, nav a {
	position:relative; }

/* #3 get to work on the key element          **
**    of every single webpage                 */
body {
	font-family:helvetica,arial,sans-serif;
	background:#222;
	padding:40px 0 75px; }

/* #4 manage some of the structural elements  **
**    considering how vital they are          */
h1 {
	text-align:left;
	color:#798DA0;
	font-family:"Lucida Grande",Tahoma,sans-serif;
	padding:2px 0 2px 10px;
	text-transform:uppercase; }
h2 {
	font-size: 2em;
	font-family:Palatino,"Palatino Linotype",Georgia,"Times New Roman",serif;
	color: #CCC;
	padding: 1em 0 0 10px; }

/* #5 let's rumble on the some of the tags    **
**    that aren't as complex as others        */
strong { color:#000; font-weight: normal; }
abbr { border:none; cursor:help; }
img { border:none; }

/* #6 setting the defaults that make          **
**    the page as a whole document styled     */
header {
	background:#000; width:100%; position:fixed; top:0; z-index: 10; }
nav {
	font-family:Verdana, sans-serif; float:right; z-index:15; }
section {
	width:40em;	margin:0 auto; clear:both; }
address {
	background:#333; padding:0.5em; font-size:1.5em; color:#ccc; }

/* #7 context dependant selectors             **
**    goes here as they do best seperated     */
address > a {
	float:right; color:#fff; text-decoration:none; }
address > a:hover { text-decoration:underline; }
/* THE HEADER */
header p { font-size: 0.8em; }
header a { color:#999; text-decoration:none; border-bottom:dashed #000 1px; }
header:hover a{color:#fff;}
header:hover a:hover { color: #ccc; border-bottom: solid #fff 1px; }
/* NAVIGATION */
nav li {display:inline; z-index:15;}
nav ul { margin:0 auto; padding:2px 10px 2px 0;}
/* PLACES */
header + ul { width:42em; margin:0 auto; font-family:"Andale Mono", monospace;
	text-align:center; font-size:16px;}
header + ul > li { display:inline-block; width:10em; height:8em; vertical-align:middle;
	overflow:hidden; margin:0 auto; text-align:center; line-height:8em; position:relative; }
header + ul a { opacity:0.7; font-size:8em; background:#ccc; color:#222;
	text-decoration:none; display:block; width:100%; height:100%;
	-moz-border-radius:4px; -webkit-border-radius:4px; font-variant:small-caps; }
	header + ul a:hover { color:#222; opacity:1; text-shadow:0 0 4px; }
	li > a[title=twitter]:hover { color:#33CCFF; }
	li > a[title=delicious]:hover { color:#fff; }
	li > a[title=superuser]:hover { color:#00BFF3; }
	li:hover > a[title=reader] { color:#E4B3B3; }
/* SECTIONS   */
section p {
	color:#444;	background:#E0E0E0; padding:0.6em; font-size:1.2em; margin:0.1em;
	-moz-border-radius-topleft:16px; -moz-border-radius-topright:16px;}
section > article, section > article + p {
	display:none; }

/* #8 additions to the visual document        **
**    as they are not changing but adding     */
/* <nav> HEADER TOOLTIPS */
nav a:nth-child(n)[title]:hover:before {
	content: attr(title); display:block;
	position:fixed; z-index: 11;
	top:2px; left: 0.5em; width:15em; white-space:nowrap;
	color: #B57E5A; background:#000; }
/* <article> 256px ICONS */
/* <ul> PLACES TOOLTIPS */
header + ul a:nth-child(n)[title]:hover:before {
	content: attr(title); display:block; color:#fff;
	position:absolute; width:100%; text-shadow:0 0 8px #222;
	color:#fff; background:transparent; font-size:0.2em; }
article:target {
	background:no-repeat 22em 1.5em; padding-top:7em; margin-top:23px;}
#about { background-image:url(img/user.png); }
#contact { background-image:url(img/mail.png); 
	background-position:22em -0.5em;}
#what, #where { background-image:url(img/question.png); }