/* ideas for this design taken, among others,
   http://css.maxdesign.com.au/floatutorial/tutorial0915.htm */

body {
	line-height: 1.5em;
	color: #3b3f48;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 0.8em;
	padding: 0px;
	margin: 0px;
	min-width: 800px;
}

/* global stuff... */

a {
	color: #606675;
}

h1 {
	margin-bottom: 1.5em;
	font-size: 1.5em;
}

h2 {
	font-size: 1.2em;
}

h3 {
	font-style: italic;
	font-size: 1.2em;
}

/* horizontal ruler, 1 pix thick */
hr {
	margin-bottom: 20px;
	margin-top: 20px;
	background-color: #a0a5b2;
	padding: 0px;
	border-style: none;
	height: 1px;
	
}

/* element with a thin border */

.thin-bordered-image { 
	border-color: #727a8c; 
	border-width: 1px; 
	border-style: solid; 
}

/* images are generally unbordered, also when links */
img {
	border: none;
}

/* I'd like my lists a bit less cluttered */
li {
	padding-top: 0.4em;
	padding-bottom: 0.4em;
}

code {

	font-size: medium;

	font-family: "Courier New", Courier, Monaco, monospace;

}

/************************/


/* the background holds the picture in the upper left corner */

#background {
	width: 100%;
	min-width: 600px;
	min-height: 900px;
	margin: 0;
	padding: 1px 0 1px 0; /* prevent top, bottom margins from collapsing.
	                         Note that it does not affect the BG image, because that one starts at border, not inside padding :) */
	background-image: url(art/white_cat_sky_birds.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

/* left column shall be as large as the cat-column in the background pic (150 px wide) */
#left-column {
	width: 125px; /* if you change this change #center-column */
	float: left;
} 

/* righ column contains the menu, which is 180 pix wide, plus 10pix gap on the 
 * right side toward the edge of the browser window */
#right-column {
	width: 190px; /* if you change this change #center-column */
	float: right;
	padding: 0 10px 0 10px; /* all on the right side shall be 10px from the edge of viewport without me telling it */
}

#center-column {
	margin-left: 125px; 	/* critical - width of #left-column */
	margin-right: 190px; 	/* critical - width of #right-column */
	
	padding-left: 20px;
	padding-right: 20px;

}

/************************/

/* The cat.. */
#thecat_rollover {
	position: absolute;
	width: 107px;
	height: 161px;
	left:8px;
	top: 49px; 
}

/* ... and this makes the cat white when rolling over it... (that sounded weird...) */
#thecat_rollover:hover {
	border-style: none;
	background-image: url(art/white_cat_sky_birds_cat_activated.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	
}

/************************/

/* the header is in the upper part of the page and contains "birthdayScanner X" as line*/
#center-column-header {
	display: block; /* this is important because I use this class on an <a> and want the <a> to be a block like a div */
	margin-top: 60px;
	margin-bottom: 30px;
	padding: 0px;
	min-height: 50px;
	min-width: 500px;
	background-image: url(art/birthdayscannerx_the_missing_link.png);
	background-position: left top;
	background-repeat: no-repeat;
}
                     
/* the footer is at the lower part of the page and contains my mail */                                               
#center-column-footer {
	border-top-color: #a0a5b2;
	border-top-width: 1px;
	border-top-style: solid;
	font-style: italic;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-top: 60px;
	color: #737b8d;
	padding: 0px;
	min-height: 30px;
	min-width: 500px;
	background-position: left bottom;
}

/* the page content is the whole area under the header in the page 
  and contains also the menu floating in a block at the right side */
#center-column-content {
	min-height: 400px;

}


/************************/
/* Menu                 */
/************************/


/* menu is located in right column, but not right at top
 * but upper edge is where the header of the center column ends,
 * so it appears at the same hight as the content text */
#menu {
/*	float: right;
*/	width: 180px;       /* this depends on the size of the blubox underlay pic */
	margin-top: 20px;
}

/* the upper part of the menu contains a upper bulge */
#menu-up {
	height: 11px;
	background-image: url(art/bluebox_up.png);
	background-repeat: no-repeat;
	background-position: top left;
} 

/* just a gradient line repeating vertically */
#menu-content {
	padding: 1px 1.0em 1px 1.0em; /* keep top bottom 1 px to prevent collaps. margins */
	margin: 0px;
	background-image: url(art/bluebox_inside.png);
	background-repeat: repeat-y;
	background-position: top left;
}

/* the lower part of the menu, a lower bulge */
#menu-down {
	height: 11px;
	background-image: url(art/bluebox_down.png);
	background-repeat: no-repeat;
	background-position: top left;
}

/* menu items */
.menuitem {
	text-decoration: none;
	color: #5f5f5f;
}

.menuitem:hover {
	color: white;
	text-decoration: none;
	
}

.menuitem-activated {
	color: white;
	text-decoration: none;
}

/* the birthday scanner x icon above the menu */
#big-bsx-icon {
	width: 96px;
	height: 96px;
	margin: 35px auto 0px auto; /* center the icon over the menu, which itself is not really centered in the right column, therefore just centering
									the icon makes it appear slightly off-balance. Note that there are cleaner ways than to fine-adjust the
									margin pixels but I don't really care right now. */
	background-image: url(art/bsx_96.png);
	background-position: top left;
	background-repeat: no-repeat;
}

/* the "Languages" bar in the upper right corner of the page, above the menu and the big icon */
#languages-bar {
	margin: 0px auto 0px auto; /* below menu */
	padding: 1px 0 1px 0; /* prevent collapsing margins */
	width: 56px;
	height: 26px;
}

/* the flags are <a> elements. 
   Note they must be blocks to make them not collapse if empty - I want them as big as the background pic.
   Note also that they must float to be horizontally stacked - because with them being blocks they would be vertically stacked.
   */
   
/* German Flag */

#german-flag {
	width: 24px; height: 24px;
	margin: 0 2px 0 2px;
	border: none;
	background-image: url(art/flags_german_small.png);
	display: block;
	float: left; /* direction does not matter actually */ 
}

#german-flag:hover { 
	background-image: url(art/flags_german_small_activated.png);
}

#german-flag-activated {
	width: 24px; height: 24px;
	margin: 0 2px 0 2px;
	border: none;
	background-image: url(art/flags_german_small_activated.png);
	display: block;
	float: left; /* direction does not matter actually */ 
}

/* English Flag */

#english-flag {
	width: 24px; height: 24px;
	margin: 0 2px 0 2px;
	border: none;
	background-image: url(art/flags_english_small.png);
	display: block;
	float: left; /* direction does not matter actually */ 
}

#english-flag:hover { 
	background-image: url(art/flags_english_small_activated.png);
}

#english-flag-activated {
	width: 24px; height: 24px;
	margin: 0 2px 0 2px;
	border: none;
	background-image: url(art/flags_english_small_activated.png);
	display: block;
	float: left; /* direction does not matter actually */ 
}

/************************/
/* content              */
/************************/

/* used for the first - typically italic - sentence of a page */
.preface {
	font-style: italic;
}




/************************/
/* 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;
}




/************************/
/* misc                 */
/************************/

/* the download button image */
.download-button {
	width: 203px;
	height: 37px;
	margin: 10px auto 10px auto;
	display: block;
	border: none;
	background-image: url(art/my_download_button2.png);
	background-position: top left;
	background-repeat: no-repeat;
}

.download-button:hover {
	background-image: url(art/my_download_button2_activated.png);
}

/************************/
/* Awards colu          */
/************************/

/* All awards in one vertical column */

#awards {
	width: 70px;
	margin: 30px auto 30px auto;
}

#badge-macupdate {
	width: 70px;
	height: 64px;
	margin: 10px auto 10px auto;
	display: block;
	background-image: url(art/macupdate5.png);
	background-position: top left;
	background-repeat: no-repeat;
}

#badge-soft32 {
	width: 70px;
	height: 42px;
	margin: 10px auto 10px auto;
	display: block;
	background-image: url(art/soft32_4stars.gif);
	background-position: top left;
	background-repeat: no-repeat;
}

#badge-universalbinary {
	width: 70px;
	height: 163px;
	margin: 10px auto 10px auto;
	display: block;
	background-image: url(art/MacOSX_Universal_4C_15mm.png);
	background-position: top left;
	background-repeat: no-repeat;
}

/************************/
/* preloads             */
/************************/

/*  hover images without javascript magic and without having IMG tags in the code. */

#preload1 {
	display: none;
	background-image: url(art/my_download_button2_activated.png);
}

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

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

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