/*	*************************************************************
	* Website Sabinaleonelli.org and this CSS file are written, *
	* and periodically cleaned up, by Michel Durinx.            *
	*************************************************************
	This version: jan 2008

	(*)The CSS & HTML are heavily edited versions of the didactic 
	example <ComplexSpiral Demo> by Eric A. Meyer.  My own 
	preferences drive most alterations, e.g. when you scroll down 
	very far, I hate it when the links (here: top left) disappear 
	off the screen so you have to scroll back to top before going 
	to another page/folder [YES I'm looking at you, evil GMail 
	frontend!]; the div called  <shell> adds the 25px margin 
	below <content> that most browsers miss; ...
	
	(*) The design idea of suggesting coloured transparency with 
	the background image is due to the designer Eric A. Meyer. 
	I've added a layer of complexity, the fifth picture that 
	underlies <h1> and <h2> headers replaces a background colour 
	for <h1> (and nothing for <h2>). Original flower picture was 
	downloaded from Usenet so the copyright is unknown to me 
	(but the alterations are due to Eric A. Meyer). We wanted an
	Arabidopsis picture for obvious reasons (read the CV!) but 
	can't seem find a suitable one.  Let's face it, <Arabidopsis 
	thaliana> is a sad and ugly weed.

	(*) A lot of the editing has been the moving of ALL style 	
	elements to the CSS file, as it should be!  No kludging 
	around mixing styles, but one central place to rule all 
	matters of layout. The HTML files should be editable by 
	complete beginners without puzzle skills, I believe. Also 
	this means that accessibility (by vision impaired, e.g.)
	should be high as a consequence, since these pages are 
	simple and clean in text-only browsers or when disabling
	the CSS file.	

	(*) The empty <kludge> div is to combat an IntExplorer	
	bug where the first div of <content> gets the wrong margin 
	[only visible if bg of that div differs]	  	  	*/
 

body {background: black url(flower-bg.jpg) 0 0 no-repeat fixed; 
	position: relative; margin: 0px; padding: 0px;}

div#links {position: fixed; top: 52px; left: 0; width: 160px; height: 700px; 
	font: 16px Verdana, sans-serif;}
div#links a {background: transparent url(flower-fade.jpg) 0 0 no-repeat fixed; 
	display: block; text-align: center; font: bold 1em sans-serif; 
   	padding: 5px 10px; margin: 0 0 2px; border-width: 0; 
	text-decoration: none; color: #ffc;}
div#links a:hover {background: transparent url(flower-wash.jpg) 0 0 no-repeat fixed; 
	color: #411;}

div#shell {position: absolute; top: 25px; left: 161px; right: 25px; padding: 0px 0px 25px 0px}

div#content {background: #43638c url(flower-blue.jpg) 0 0 no-repeat fixed;  
	color: #eed; font: 13px Verdana, sans-serif; 
	padding: 0px 10px 10px 25px; border: solid #f89880;}
div#content h1 {padding: 8px 2px 8px 8px; margin: 1px -9px 10px -24px; text-align: right; font: bold 32px sans-serif; color: #000000; 
	letter-spacing: 0.5em; text-transform: lowercase; height: 2.0ex; vertical-align: middle; white-space: nowrap;}
div#content h2 {padding: 0px 0px 0px 8px; margin: 15px -9px 10px -24px; font: bold 18px sans-serif;
	background: #8ab3dc url(flower-light.jpg) 0 0 no-repeat fixed;}
div#content h3 {padding: 0px 0px 0px 8px; margin: 15px -9px 10px -24px; font: bold 15px Verdana, sans-serif;
}
div#content h4 {padding: 0px 0px 0px 0px; margin:  5px -9px  0px   0px; font: bold 13px Verdana, sans-serif;
}
div#content quote {font-size: 90%; font-weight: normal; font-style: italic;}
div#content code, pre {color: #EDC; font: 110% monospace;}
div#content dt {font-weight: bold;}
div#content dd {margin-bottom: 0.66em;}

div#content a:link {color: white;}
div#content a:visited {color: #BBC;}
div#content a:link:hover {color: #FF0;}
div#content a:visited:hover {color: #CC0;}