/* the zencat main page is single column, fixed width, centered design. */

body {
	line-height: 1.3em;
	font-size: 0.8em;
	background-color: #171515;
	padding: 0px;
	margin: 0px;
	
	font-family: Helvetica, Verdana, Arial, sans-serif;
	
}

#centered-column {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
}

/*** MAIN PAGE ***/

#picture-main {
	width: 600px;
	height: 300px;
	margin-top: 50px; /* not directly at the upper corner */
	background-image: url(art/main_big_cat.jpg);
	background-repeat: no-repeat;
	background-position: left top;


	/* Note: the 1pix padding prevents the margins of #menu-main and #picture-main collapse...
	    see "margins collapse", e.g. http://reference.sitepoint.com/css/collapsingmargins , 
   	    "Collapsing Margins Between Parent and Child Elements" */
	padding-top: 1px; 

}

#thebigcat {
	border-style: none;
	margin-top: 32px;
	margin-left: 39px;
	float: left;
	width: 179px;
	height: 240px;
}

/*
#thebigcat:hover {
	background-image: url(art/main_big_cat_black.jpg);
	background-position: left top;
	background-repeat: no-repeat;
}
*/

#menu-main {
	text-align: right;
	width: 150px;
	margin-top: 50px;
	margin-left: 400px;
}

.menuitem {
	text-decoration: none;
	color: #663300;
}

.menuitem:hover {
	color: #ffcc66;
}

hr.menu {
	height: 2px;
	border-style: none;
	background-image: url(art/hr_menu.jpg);
	padding: 0px;
	margin: 0px;
	/* "...Den Unterstrich unter dem Birthdayscanner-Link würde ich evtl. kürzen, so etwa bis senkrecht über dem Teidegipfel.." */ 
	margin-left: 25px;
}

/*** CONTENT PAGE ***/

#picture-content {
	width: 600px;
	height: 150px;
	margin-top: 50px; /* not directly at the upper corner */
	margin-bottom: 0px;	
	
	background-image: url(art/main_small_cat_upper_half.jpg);
	background-repeat: no-repeat;
	background-position: left top;

	/* Note: the 1pix padding prevents the margins of #menu-main and #picture-main collapse...
	    see "margins collapse", e.g. http://reference.sitepoint.com/css/collapsingmargins , 
   	    "Collapsing Margins Between Parent and Child Elements" */
	padding-top: 1px; 
}

#thecat {
	border-style: none;
	margin-top: 8px;
	margin-left: 9px;
	float: left;
	width: 80px;
	height: 109px;
}

#thecat:hover {
	background-image: url(art/main_small_black_cat.jpg);
	background-position: left top;
	background-repeat: no-repeat;
}


/*
#picture-content:hover {
	background-image: url(art/main_small_black_cat.jpg);
	background-repeat: no-repeat;
	background-position: left top; 
}*/


/* IF there is content, it starts at the middle of the image which will contain a semi-trans
 * pane. */
/* color: color: #403333; */
#content {
	min-height: 300px;
	color: #403333;
	margin-top: -1px; /* this counter-effects the 1pix padding of the picture - I do not really understand it thou */
	
	padding: 30px;
		
	background-color: #afa6aa;
	background-image: url(art/main_small_cat_lower_half.jpg);
	background-repeat: no-repeat;
	background-position: left top;	
}

h1 {
	margin-bottom: 1.5em;
	padding-bottom: 0.8em;
	border-bottom-color: #949494;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	font-weight: bold;
	font-size: large;
}

h2 {
	font-size: medium;
}


h3 {
	font-style: italic;
	font-size: medium;
}

hr {
	background-color: #777676;
	height: 1px;
	border-style: none;
}

a {	
	text-decoration: none;
	color: #aa5500;
}

a:hover {
	color: #ffcc66;
}

img {
	border: none;
}


/*** BLOG ***/

.blog-entry-header {

	font-weight: bold;
	font-style: italic;
	font-size: small;
	margin-top: 2em;
	padding-top: 2em;

}

.blog-entry-date {
	font-style: italic;
	font-size: small;
	

}

.blog-sig {
	color: #797979;
	font-style: italic;
	font-size: small;
}

.centered_image {
	margin-right: auto;
	margin-left: auto;
}



/* preload hover images without javascript magic and without having IMG tags in the code. */
#preload1 {
	display: none;
	background-image: url(art/bsx_shine.png);
}

#preload2 {
	display: none;
	background-image: url(art/main_big_cat_black.jpg);
}

#preload3 {
	display: none;
	background-image: url(art/main_small_black_cat.jpg);
}