/*   set the body   */
html,body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color: #F0F0F0;
	font-family: Georgia, Verdana, Arial;
	font-size: 12pt;
	} 

/* headings 
===============================*/

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	color: #000;
	font-family: Georgia, Arial, Helvetica, sans-serif;
	}

h1 { 
	font-size: 1.4em;
	margin-left: -10pt;
	padding-top: 10px;
	}

h2 { font-size: 1.25em;
	padding-top: 5px;
	}

h3 { font-size: 1.2em; }

h4 { font-size: 1.1em; }

h5 { font-size: 1.0em; }

img.inline {
	margin: 20px;
	border: 1px solid #000;
/*	float: center;*/
}

p {
	font: 10px/13px Georgia, Arial, Helvetica, sans-serif;
	color: #000;
	margin-left: 10px;
	margin-right: 10px;
}


p.totop {
	text-align: right;
	font: 10px/12px Georgia;
	color: black;
	font-weight: normal;
	margin-top: -20px;
}


/*a {
	font: 10px/12px Georgia, Arial, Helvetica;
	color: #111;
	text-decoration: none; font-weight: normal;
	}

a:hover {
	color: #111;
	text-decoration:none; font-weight: normal;
	}*/


/* source code blocks */
p.source {
	font-family: monospace;
	margin: 15px;
	padding: 5px;
	color: #000;
	background-color: #ffe;
	border: dashed #aa9 1px;
	}


/* main division of body */
#main {
	width: 750px;
	margin: 0px auto 15px 24px; /* divine proportion between bottom an left margin... :) */
	padding: 11px 0 0 0;
	background-color: #FFF;
	background-image: url(../images/background_main.png);
	background-position: 0px 0px;
	background-repeat: repeat-y;
	position:relative;
	}


/*   5 different headers
==============================================*/

/* common header definition */
.header {
	width: 710px;
	height: 120px;
	margin: 0 0 0 20px;
	background-repeat: no-repeat;
}

/* specific header definition */
.header_home { background-image: url(../images/header_bg_home.jpg);}
.header_photos { background-image: url(../images/header_bg_photos.jpg);}
.header_blender { background-image: url(../images/header_bg_blender.jpg);}
.header_random { background-image: url(../images/header_bg_random.jpg);}
.header_elsewhere { background-image: url(../images/header_bg_elsewhere.jpg);}



/*   main navigation stuff, unordered list   
==============================================*/
ul#navigation {
	margin: 0 0 0 73px;   /* divine proportion: 118/73 ~= 1.618 */
	padding: 0 0 0 0;
	list-style-type: none;
	background-color: transparent;
	width: 104px;
	}

ul#navigation li {
	float: left;
	margin: 0 0 0 0;
	border: 1px solid #FFF;
	}

ul#navigation li a {
	font: 11px/22px Arial, Helvetica, sans-serif;
	color: #FFF;
	background-color: #B4C1CD;
	display: block;
	padding: 0 0 0 13px;  /* divine proportion: 22/13 ~= 1.618 */
	width: 194px;      /* divine proportion: 194/120 ~= 1.618 */
	text-decoration: none;
	}

ul#navigation li a:hover {
	background-color: #99AABB;
	color: #111;
	text-decoration:none;
	}


/*   wrapper around content
==================================*/

.content {
	width: 670px;
	margin: 20px;
	padding: 20px;
/* 	border: 1px solid black; */
/* 	min-height: 200px; */
	font: 12px/16px Georgia;
	}

/*  categories
==================================*/

ul.content_cat {
	float: left;
	clear: both;
	width: 650px;
	padding: 0px;
	margin: 5px 10px 10px 10px;
/* 	border: 1px solid black; */
/* 	background-image: url(../images/content_left_bg.png); */
/* 	background-repeat: no-repeat; */
	list-style-type: none;
/* 	border: 1px solid black; */
	}

ul.content_cat li {
	background-image: url(../images/content_left_bg_2.png);
	background-repeat: no-repeat;
	height: 90px;
	padding: 18px;
	margin-top: 0px;
/* 	border: 1px solid black; */
	}

ul.content_cat li a {
	border: 0;
	}

ul.content_cat li a:hover {
	background-color: transparent;
	}

ul.content_cat li img {
	display: inline;
	margin: 0px 10px 0px 0px;
	padding: 0px;
	border: 2px solid #FFF;
	float: left;
	}

ul.content_cat li p {
	text-align: justify;
	font: 11px/14px Georgia black;
	text-decoration: none;
	font-weight: normal;
/* 	border: 1px solid black; */
	border: 0;
} 

ul.content_cat li p.totop {
	text-align: right;
}

ul.content_cat li h5 {
	font: 11px/14px Georgia black;
	margin: 0px 0px 5px;
	font-weight: normal;
	}


ul.content_cat li p a, ul.content_cat li p a:link, ul.content_cat li p a:visited, ul.content_cat li p a:active{
	color: #BBB;
	text-decoration: none;
	font-weight: normal;
}

ul.content_cat li p a:hover { color: #666; text-decoration:none; font-weight:normal; }


p.content_cat_text_description {
	font: 11px/13px Georgia;
	text-decoration: none;
}


/*  thumbnails page , based on Stu Nicholls, http://www.cssplay.co.uk/,
==================================*/

/* needed for IE to make :active state work first time */
a.gallery, a.gallery:visited {color:#FFF;}

/* common styling for all galleries */
a.gallery, a.gallery:visited {
/* 	display:block;  */
	display: inline-block; 
	color: #000; 
	text-decoration: none; 
	border: 1px solid black; 
	width: 40px; 
	height: 40px; 
	float: left;
	margin: 2px;
	padding: 0px;
	z-index: 50;
}

/* by default, dont show big images */
a.gallery em, a.gallery span {
	display:none;
}

/* change border when hovering above thumbnails */
a.gallery:hover, a.gallery:hover span {
	border: 1px solid white;
}

/* urls to thumbnail images are in the respective html files */

/* set up the overall width of the menu div and the margins */
#thumbnails_left {
	position: relative;
	width: 650px;
	height: 660px;
	background-color: #FFF;
	background-image: url(../images/fotos_bg_22.png);
	background-repeat: repeat;
	margin-top: 5px;
	margin-left: 10px;
	padding: 0px;
	z-index: 1;
	font-family: verdana, arial, sans-serif; 
}

/* header of photo gallery with grey background */
#thumbnails_left_top {
	margin-top: 0px;
	height: 50px;
	background-color: #FFF;
	background-image: url(../images/fotos_bg_top22.png);
	background-repeat: no-repeat;
	z-index: 100;
}

#thumbnails_left_top p {
	position: absolute;
/* 	left: 20px; */
/* 	top: 7px; */
	margin: 0px;
	padding-left: 20px;
	padding-top: 18px;
/* 	margin: 0px 0px 5px 0px; */
	font: 11px/14px Georgia;
	font-weight: normal;
	/*font-color: black;*/
	color: black;
	width: 610px;
	text-align: left;
/* 	border: 1px solid black; */
}

#thumbnails_left_top p.to_top {
	text-align: right;
	font: 11px/14px Georgia black;
	font-weight: normal;
}

#thumbnails_left_top a, a:link, a:visited, a:active {
	color: #555;
	text-decoration: none;
	font-weight: normal;
}

#thumbnails_left_top a:hover { color: #666; text-decoration:none; font-weight:normal; }

#thumbnails_left .thumbs {
	width:138px;
/* 	height: inherit;  */
/* 	height: 500px; */
	position: absolute; 
	left: 2px; 
	top: 54px;
/* 	border: solid black 0px; */
/* 	border-right: solid #DCDCDC 2px; */
	border: 0;
/* 	border-right: solid black 1px; */
/* 	background-color: #F5F5F5; */
	padding: 2px;
}

#thumbnails_left a.gallery:active, #thumbnails_left a.gallery:focus {
	border: 1px solid white;
}

#thumbnails_left a.gallery:hover span {
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	top: 0px;
	left: 145px;
	padding: 8px;
	font-style: italic;
	color: #000;
	z-index: 100;
	border: 0px;
}

#thumbnails_left a.gallery:hover span:first-line {
	font-style:normal;
	font-weight:bold;
	font-size:1.1em;
	color:#000;
}

#thumbnails_left a.gallery em img {
	border: 0;
	position: absolute;
	top: 4px;
}

#thumbnails_left a.gallery:active em, #thumbnails_left a.gallery:focus em {
	display: block; 
	position: absolute; 
	width: 480px; 
	height: 480px; 
	top: -0px; 
	left: 150px; 
	padding: 0px; 
	color: #000; 
/* 	border: 1px solid #FFF;  */
	border: 0;
	z-index: 50;
}

/* styling for background text of photo area */
#thumbnails_left h1 {
	clear:both;
	margin-left: 155px;
	padding-top:100px;
	padding-left:50px;
	max-width: 430px;
	font-family: georgia, arial, serif;
	font-size:2em;
	font-weight:normal;
	color:#999;
/* 	border: 1px solid black; */
	}

#thumbnails_left h1 em {
	font-size:0.6em; 
	color:#000;
}

/* empty footer of photo gallery*/
#thumbnails_left_bottom {
	clear: both;
	margin-top: 607px;
	height: 30px;
	background-color: #FFF;
	background-image: url(../images/fotos_bg_bottom22.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	z-index: 100;
/* 	border: 1px solid black; */
}



/*  "elsewhere" list of links
==================================*/

dl.elsewhere {
	margin: -5px 0 10px 15px;
	/*border-bottom: 1px solid #000;*/
	}

dl.elsewhere dt {
	padding: 1px 0 0 0;
	}

dl.elsewhere dd {
	font: 11px/12px Georgia, Arial, Helvetica;
	color: #000;
	margin: 0px 0px 3px 10px;
	padding: 0px;
	}

dl.elsewhere dt a {
	font: 11px/12px Georgia, Arial, Helvetica;
	color: #7482FF;
	text-decoration:none; font-weight: normal;
	}

dl.elsewhere dd a {
	font: 11px/12px Georgia, Arial, Helvetica;
	color: #7482FF;
	text-decoration:none; font-weight: normal;
	}


dl.elsewhere dd a:hover {
	color: #0000FF;
	text-decoration:none; font-weight:normal;
	}

dl.elsewhere dt a:hover {
	color: #0000FF;
	text-decoration:none; font-weight:normal;
	}



/*   footer
====================================================*/

#footer {
	width: 750px;
	height: 50px;
	clear: both;
	/*padding-top: 5px;*/
	background-image: url(../images/footer_background.png);
	background-repeat: no-repeat;
	background-position: 0px 25px;
	/*border: 1px solid #000BBB;*/
	}

/*    copyright notice and w3c conformance markup  */
#footer p {
	font: 11px/13px sans-serif;
	text-align: center;
	color: #A6A6A6;
	margin: 0 0 0 0;
	}
	
#footer a,
	a:link,
	a:visited,
	a:active {
		color: #7482FF; text-decoration:none; font-weight:normal;
	}

#footer a:hover { color: #000; text-decoration:none; font-weight:normal; }




a , a:visited , a:active {
	font: 10px/12px Georgia, Arial, Helvetica;
	color: #7482FF;
	text-decoration: none; font-weight: normal;
	}

a:hover {
	color: #0000FF;
	text-decoration:none; font-weight: normal;
	}