/* general declarations 
		----------------------- */

body	{
	font-family: Baskerville, "PalatinoÊLinotype", Palatino, Georgia, serif;
	color: black;
	background: #fffcf2;
 	padding: 0; margin: 0;
	}

h1	{
	margin-top: 0; padding-top: 0;
	text-align: center;
	font-weight: normal; 
	font-size: 180%;
	font-family: Zapfino, "Apple Chancery", "Zapf Chancery", "MonotypeÊCorsiva", "URW Chancery L", serif; 
	clear: right;
	}

a:link, a:link img	{
	color: #222222; 
	text-decoration: underline; 
	border: none;
	}
	
a:visited	{color: #666666;}
a:link:hover, a:visited:hover	{color: #aaaaaa;}

span.removed	{
	position: absolute; /* stuff we want out of the way ----- */
	left: -10000px;	
	}

img.screenshot	{
	float: right; 
	clear: right; 
	margin-left: 20px; margin-bottom: 20px; 
	padding: 5px; 
	border: solid black 1px ;
	}

pre	{
	}

.html, .css, .php	{
	display: block;
	font-family: monospace; 
	margin: 1em 0;
	padding: 1em;
	border: 1px solid black;
	background: white;
	font-size: 90%;
	clear: right;}
	
.smallscreenshot	{
	float: right;
	display: block;
	width: 100px;
	text-align: center;
	padding: 0 0 1em 1em;
	font-size: 80%;
	}
	
.smallscreenshot	img {
	border: 1px solid black;
	width: 100px;
	}
	

	
		/* masthead 
		-----------*/

div#masthead	{
	color: white;
	background: black;
	width: 100%;
	min-height: 100px;
	padding: 0;
	border-bottom: 10px solid gray; 
	}

div#masthead a.home span	{ /*send the text part of the home link far away */
	position: absolute; 
	left: -2000px; 
	}

div#masthead a.home { /* home page link */
	position: absolute; /* remove it from the flow */
	left: 40%; right: 40%;
	padding-top:20px;
	width: 182px;
	height: 84px;
	background:  url(images/esquivalierlogotypesmall.png) center center no-repeat;
	}

div#masthead a.home:hover	{
	background:  url(images/esquivalierlogotypehoversma.png) center center no-repeat;
	}

		/* home page masthead only 
		-------------------------- */

div#masthead.home	{ /* home page masthead is wider, taller and includes logo*/
	margin: auto;
	width: 363px;
	height: 180px;
	background:  url(images/esquivalierlogotype.png) center 10px no-repeat;
	border: none; /* we don't want the grey border */
	}
	
div#masthead.home:hover	{ /* just for fun */
	background:  url(images/esquivalierlogotypehover.png) center 10px no-repeat;
	}

		/* main links menu 
		------------------ */

ul.menu	{
	padding: 10px; margin: 0;
	}
	
ul.menu li a	{	/* the anchors are displayed as list items, and light up the list markers on hover */ 
	display: list-item; 
	color: gray; 
	text-decoration: none; 
	width: 10em;
	list-style: inside url(images/nibblack.png) square; /* inside keeps the marker within the viewport */
	}

ul.menu li a:hover	{
	color: white;
	list-style: inside url(images/nibwhite.png) ;
	}
	
		/* secondary menu
		----------------- */
		
span.menu_description	{
	display: block;
	font-size: 90%;
	}

		/* main content area of page 
		---------------------------- */

#main	{
	color: black;
	background: #fffcf2;
	border-top: black 1px solid;
	padding: 10px 50px;}

#main ul li	{
	list-style: square;
	padding: 10px 0 0;
	}	
		/* for home page only
		---------------------*/	

body.home	{
	background: black; 
	color: white;
	}
	
#main.home	{
	padding: 20px 0;
	background: black; color: white;
	}

#main.home a	{ /* gets rid of some ugly marks in some browsers */
	text-decoration: none;
	}

#main.home	img	{
	border: none; 
	}	

#main.home ul.homepagemenu	{ /* center the home page menu */
	margin: 0 40px 0 0; /*looks more centered 40px to the left */
	width: auto; 
	text-align: center;
	}
	
#main.home ul li	{
	list-style: none;
	}	
	
	
.homepagemenu a	{
	display: block;
	width: 540px;
	height: 120px;
	margin: auto;
	}
	
		/* portfolio gallery styles 
		--------------------------- */

ul.portfoliopage	{
	margin: 10px 0 0 ; padding: 0;
	}
	
.portfoliopage { /* both the page as a whole and the caption text are centered */
	text-align: center ;
	}

.portfoliopage li { /* our gallery is an inline list */
	display: inline; 
	}

.portfoliopage a.thumbnail	{	/* each gallery item is in an a.thumbnail */
	display:table-cell; 	/* this is for browsers which don't do inline-block */
	display:inline-block; 	/* but it's better if browsers can */
	width: 165px; 
	padding: 0 ; 
	vertical-align: top; 	/* align the contents to the top of the element */
	margin-top: 1em;}

.portfoliopage .imgheight	{
	display: block;
	height: 100px;			/* a bit of height management */
	}
	
.portfoliopage .caption	{
	display: block;
	min-height: 2.3em; 		
								/* how many lines a caption can wrap before wrecking the vertical alignment of the rest of the row - this is an unsatisfactory solution, because it makes a blank anchor area below the caption. The only alternative would be two anchors, one for the img and one for the caption. If it weren't for the fact of many millions of Mozilla-based browsers out there, which are the ones which need this (because they don't do inline-blocks) I'd simply not bother catering for them at all, because accomodating them spoils other things */
	}	

.portfoliopage img.thumbnail	{border: solid black 1px ; margin: auto; }
	
		/* the individual items
		----------------------- */

.portfoliopage div.popupanchor	{ 
								/* we're using this as a place to anchor the pop-up to. It has a position: relative, so the absolutely positioned pop-up it contains will refer to it \*/
	position: relative;		/* escaped for IE5 Mac by the backslash above */
	width: auto;
	margin: 0; 
	}

.portfoliopage	div.caption	{
	text-align: left; 			/* This is more than a caption, really, so left-aligned */
	font-size: 90%;
	} 

.portfoliopage div.trigger	{			/* the area which triggers the pop-up */
	width: 400px; 
	margin: auto;
	}

.portfoliopage div.trigger>a	{
	color: #222222; 
	text-decoration: underline; 
	line-height:2;
	}
	
.portfoliopage div.trigger	a:hover	{
	color: #aaaaaa;
	}

html>body .portfoliopage div.trigger  div.caption	{ 
								/* the caption is hidden until we need it. The html>body nonsense is to hide the style from the stupid IE (at least prior to IE7) \*/
	position: absolute; 
	top: 0; left: -20000px;		
	width: 150%;	
								/* the width is just in case it's wide enough to reach across - these are escaped for IE Mac by the backslash above */
	}	
	
.portfoliopage div.trigger:hover  div.caption { /* the triggered popup */
	padding: 10px; 
	border: solid black 2px ; 
	position: absolute; top: 10px; left: 0; 
	width: auto; margin: 0 10px 10px;
	background: #a1a1a1 url(images/captionbackground.gif); /* animated! */
	color: black;
	}

.portfoliopage div.caption li	{
	list-style: square; 
	display: list-item;
	}

.about	{					
	display: none;
	}

html>body .portfoliopage div.trigger	.about	{ /* hide the rules from IE Mac \*/
	display: block;
	text-align: right;		/* end of hiding */
	}

html>body .portfoliopage div.trigger:hover	.about	{
	color: #fffcf2;
	}

.portfoliopage .alignright, .portfoliopage .alignleft, .photopage .alignright, .photopage .alignleft	{
							/* the width and the height ensure that the next and previous divs each occupy the same space whether actually a link is present or not - makes it possible to keep it all properly horizontally aligned */
	width: 8em; 
	height: 1em;
	}

/* photogallery styles */

.photogallery div.caption {text-align: left; width: auto; margin: 10px 25px 0; }

.photopage 	{text-align: center ; }

.photopage	li {display: inline; }
	
.photopage		span.set	{
	display:table-cell; /* for Firefox */
	display:inline-block; 
	width:150px; 
	padding: 0 0 0 ; 
	vertical-align: top; 
	position: relative ;
	}

div.photopage	{text-align: center;}

img.thumbnail	{display: block; border: solid black 1px ; margin: auto; }	

.imgheight	{
	display: block;
	height: 120px;
	}

.caption	{
	display: block ;
	margin-bottom: .5em;
	min-height: 4em; 
	}
	
.alignright {float: right; text-align: right ;}
.alignleft {float: left ; text-align: left ;}