/* 
   This CSS was inspired (amongst others) by http://meyerweb.com, http://csszengarden.com, http://daringfireball.net, http://alistapart.com
   as well as many other well-designed sites. If you want to copy items out of this CSS, you are welcome. 
   However, the pictures used on the website are protected by copyright. 
   You need written permission from Grundsatzlich IT to use pictures that belong to us. 
   Some pictures are under the copyright of third parties such as iStockPhoto.com so we can't give you permission to copy them.
   
   To summarize: all items, unless we say otherwise *in writing*, are © Grundsatzlich IT 2007-2009.
*/

/* generics */

/*
   Colorscheme:
   1. the nice dotted vertical bars: rgb(128,128,128);
   2. H1: Grundsatzlich-blue: rgb(125,165,205);  #7DA5CD 
   3. H2+H3: Grundsatzlich dark blue: rgb(105,145,185);  #6991B9
   4. The links:  color:#5090FF; 	very nice light blue color
   5. Official Grundsatzlich IT background color (large square from card): #2c6290 (dark slate-grey blue)
   6. Official Grundsatzlich IT grey (sidebar from card): #c1c1c1 (grey)
   7. Official color grey for titles H4: rgb(100,100,100)
   8. Tekstcolor: 	rgb(64,64,64) color:#404040;
   9. Contrasting color: orange
*/    
	
/* body - this covers the whole page */

/* IE browsers read the following lines (non-IE should not)  */
* html body {	
	margin-left: 10%;	/* alternative margin definition: "margin: top right bottom left;" */
	margin-right: 10%;
	margin-top: 20px;
	margin-bottom: 20px;
	height:100%;
	top: 0px;
	width: 1024px; 		/* avoid width:100% in the rest of the sheet - causes all kinds of trouble in IE6 vs IE5.5 */
	padding: 0;
	text-align: center;
	color: black;
	background-color: white;
	font-size: 9pt;	/* fallback in case something goes wrong with a tag */
	}
	
/* now fudge the body style for non-IE (i.e. normal) browsers */
body {	
	margin-left: auto;	/* alternative margin definition: "margin: top right bottom left;" */
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	height:100%;
	top: 0px;
	width: 1024px; 
	padding: 0;
	text-align: center;
	color: black;
	background-color: white;
	font-size: 9pt;	/* fallback in case something goes wrong with a tag */
	}

/* main banner */

#banner {
	text-align: right;
	padding: 0px; 
	margin: 0px;
	overflow: hidden; 
	border-width: 2px;
	border-color: black;
	border-style: solid;
	color: white;
	background-color: black;
	background-image: url(../images/banner.jpg);
	height: 150px;
	z-index: 1;
	font-family: Arial;
}

#banner h1 {
	font-size: 48px;
	font-weight: 500;
	line-height: 1.5em; 
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 0px;
	margin-top: 40px;
	margin-left: 100px;
	margin-bottom: 1px;
	margin-right: 20px;
	}

#banner h3 {
/*	text-align: right; */
	font-size: 20px; 
	letter-spacing: 0.4em; 
	text-transform: uppercase;
	padding: 0px; 
	margin-top: 1px;
	margin-left: 105px;
	margin-right: 25px;
	}


/* navbar (inspired by Meyerweb mostly) */

#navigate {
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 1; 
	overflow: hidden;
	height: 64px; 
	background-image: url(../images/nav.gif);
	line-height: 35px;
	font-family: Verdana;
	font-size: 12px;
	border-width: 0px 2px 0px 2px;
	border-color: black;
	border-style: solid;
	background-color: rgb(245,245,245);
	}

#navigate ul, 
#navigate li { 
	margin: 0; 
	padding: 0; 
	}

#navigate ul {
	padding-left: 0.25em;
	padding-right: 0.25em;
	}

#navigate #navlinks .activeLink { 
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	background-position: 55% 100%;
	}

#navlinks {
	float: left; 
	line-height: 39px;
	clear: both;
	}

#navlinks a {
	text-decoration: none; 
	}

#navlinks li {
	float: left; 
	list-style: none; 
	padding-left: 1em;
	}

#navlinks li a {
	padding: 0.25em 0.5em; 
	margin-right: 0.125em;
	font-weight: normal;
	font-style: normal;
	color: rgb(128,128,128);
	}


#navlinks li a:hover {
	color: black;
	}

/* otherLink links get floated to the right with a margin on the left side */
#navlinks #otherLink {
	margin-left: 1.75em; 
	float: right;
	}

#navlinks .activeLink a { 
	color: black;
	}

/* subnavlinks for the grey bar */

#subnavlinks {
	float: left; 
	clear: both;
	line-height: 20px;
	}

#subnavlinks a {
	text-decoration: none; 
	}

#subnavlinks li {
	float: left; 
	list-style: none; 
	padding-left: 1em;
	}

#subnavlinks li a {
	padding: 0.25em 0.5em; 
	margin-right: 0.125em;
	font-weight: normal;
	font-style: normal;
	color: rgb(100,100,100);
	}


#subnavlinks li a:hover {
	color: black;
	}

#subnavlinks .activeLink a { 
	color: black;
	}



/* main content */
#main {
	padding: 1em 1em 1em 1em;
	color: black;
	background-color: white; 
	border-width: 0px 2px 2px 2px;
	border-color: black;
	border-style: solid;
	font-family: Verdana;
	margin: 0px;
	text-align: left;
	/* min-height: 38em; *//* This line provides a minimum height. If you don't use it, all kinds of browsers run amuck with the page. */
	/* height: 38em; *//* needed for IE, or the browser will do really weird things with the lay-out when you select or hover over tags.  */
    }

#main a {
	text-decoration: none;
	color:#5090FF; /* very nice light blue color */
	}

/* read more link */
#main .leesmeer { 
	font: verdana, arial, helvetica, sans-serif; 
	font-weight: bold; 
	/* text-transform: uppercase; */
	}

#main #leftbar {
	float: left;
	width: 25%;
/*	border: 1px dotted red;*/	 /* debugging */
	}

#main #centerfold {
	float: left;
	width: 44%;
/*	border: 1px dotted red;	 *//* debugging */
	border-left: 1px dotted rgb(128,128,128);
	border-right: 1px dotted rgb(128,128,128);
	margin-left: 0.5em;
	padding: 0 0.5em 0 0.5em;
	}
	
#main #rightbar {
	float: right;
	width: 25%;
/*	border: 1px dotted red;*/	 /* debugging */
	margin-left: 1em;
	}

/* 2 column 1:2 layout */
#main #col21 {
	float: left;
	width: 31%;
	margin: 0 0 0 0;
	margin-right: 63%;	/* this hack will push all text in the main div to below our div, combined with col33 */
	border-right: 1px dotted rgb(128,128,128);
	}

#main #col22 {
	float: left;
/*	border: 1px dotted red;*/	 /* debugging */
	padding: 0 1.5em 0 1.5em;
	margin: 0 0 0 0;
	width: 63%;
	margin-left: -63%;  /* this hack will push all text in the main div to below our div, combined with col32 */
	}

/* 3 column 1:1:1 layout */	
#main #col31 {
	float: left;
	width: 31%;
	margin-right: 1.5%;
	}

#main #col32 {
	float: left;
	width: 30%;
	/*border: 1px dotted red;	 *//* debugging */
	border-left: 1px dotted rgb(128,128,128);
	border-right: 1px dotted rgb(128,128,128);
	margin: 0 0 0 0;
	padding: 0 1.5em 0 1.5em;
	margin-right: 30%;	/* this hack will push all text in the main div to below our div, combined with col33 */
	}

#main #col33 {
	float: right;
	width: 30%;
	margin-left: -30%; /* this hack will push all text in the main div to below our div, combined with col32 */
	}

/* 2 column 1:1 layout */
#main #col_left {
	float: left;
	width: 48%;
	margin: 0 0 0 0;
	margin-right: 48%;	/* this hack will push all text in the main div to below our div, combined with col33 */
	border-right: 1px dotted rgb(128,128,128);
	}

#main #col_right {
	float: left;
/*	border: 1px dotted red;*/	 /* debugging */
	padding: 0 1.5em 0 1.5em;
	margin: 0 0 0 0;
	width: 48%;
	margin-left: -48%;  /* this hack will push all text in the main div to below our div, combined with col32 */
	}
	
/* Now we get a lot of stuff for the product page */
	
#main #products {
	float: left;
	width: 33%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	margin-right: 61%;	/* this hack will push all text in the main div to below our div, combined with col33 */
	}

#main #descriptions {
	float: left;
	width: 63%;
	/*border: 1px dotted red;	 *//* debugging */
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	margin-left: -61%; /* this hack will push all text in the main div to below our div, combined with col32 */
	}


#main #products p {
	margin: 0 0 0.5em 0;
	padding: 0 0 0.5em 0;
}	

#main #products h4 {
	margin-bottom: 1em;
	border-bottom: 1px dotted white;
}

#main #descriptions div.description {
	min-height: 40em; 
	border-left: 1px dotted rgb(125,165,205);
	margin: 0 0 0.5em 0;
	padding: 0 0 0.5em 0.5em;
}

#main #descriptions div.description p {
	/* top right bottom left */
	margin: 0 0 0.5em 0;
	padding: 0 0 0.5em 0;
}

#main #descriptions div.description h4 {
	margin-bottom: 1em;
	border-bottom: 1px dotted white;
	/*b order: 1px dotted red; */
}

/* remember: Link-Visited-Hover-Focus-Active */
#main #products h4:hover {
	color: rgb(125,165,205);
	border-color: rgb(125,165,205);
	}

#main #products h4:focus{
	color: rgb(125,165,205);
	border-color: rgb(125,165,205);
	}
	
#main #products h4:active {
	color: rgb(125,165,205);
	border-color: rgb(125,165,205);
	}

#main #products .activeProduct {
	color: rgb(125,165,205);
	border-color: rgb(125,165,205);
	}
	
#main #descriptions span.description_start {
	border-bottom: 1px dotted;
	border-color: rgb(125,165,205);
	font-size: 10pt;
}

/* This concludes the hacks for the product page */

#main #title-line {
	text-align: left;
	color: rgb(64,64,64);
	font-style: italic;
	font-weight: bold;
	}

/* now the articles layout  */
#main #article {
	float: left;
	width: 95%;
	/* border: 1px dotted red;	 *//* debugging */
	margin: 0 0 0 0;
	padding: 0 1.5em 1.5em 1.5em;
}

/* article header is a leftside column containing a date and possibly an image */
#article #header {
	float: left;
	width: 20%;
}
	
#article #header #date {
	height: 45px;
	padding: 1em 1em 0 0;
	text-align: center;
	color: orange;
	background-image: url(../images/article-date-bg2.gif);
	background-repeat: no-repeat;
	font-style: italic;
	font-weight: bold;
	font-size: 10pt;
}

#article #header #image {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position: relative;
	left: 20%;
}

/* now the article main part */
#article #newstitle {
	float: right;
	width: 80%;
	margin-left: -80%;
	padding: 0 0 0.5em 0;
	margin: 0.5em 0em 0.5em 0em;
	color: rgb(100,100,100);
	font-size: 10pt;
	font-weight: bold;
	border-bottom: 2px solid rgb(128,128,128);
	}

#article #tekst {
	float: right;
	width: 80%;
	margin-left: -80%;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}


/* now on with the presentation page  */
#main #presentation {
	float: left;
	width: 95%;
	/* border: 1px dotted red;	 *//* debugging */
	margin: 0 0 0 0;
	padding: 0 1.5em 1.5em 1.5em;
}

#presentation #image {
	float: left;
	width: 25%;
	padding: 1.5em 0 1.5em 0;
}

#presentation #tekst {
	padding: 1em 0 1em 0;
	border-bottom: 1px dotted rgb(128,128,128);
}

/* end of presentation page */

/* now on with the presentation page  */
#main #bookreview {
	float: left;
	width: 95%;
	margin: 0 0 0 0;
	padding: 0 1.5em 1.5em 1.5em;
}

#bookreview #image {
	float: left;
	width: 20%;
	padding: 1em 0 1em 0;
}

#bookreview #tekst {
	padding: 1em 0 1em 0;
	border-bottom: 1px dotted rgb(128,128,128);
	min-height: 100px;
}

/* end of presentation page */


/* now the main stuff */
#main h1 {
	text-align: left;
	color: rgb(125,165,205); /* #7DA5CD */
	font-size: 24pt;
	font-weight: 500;
	}

#main h2 {
	text-align: left;
	color: rgb(105,145,185); /* #6991B9 */
	font-size: 18pt;
	font-weight: 500;
/*	border-bottom: 1px dashed; */ /* optional, could be nice */
	}

#main h3 {
	text-align: left;
	color: rgb(105,145,185);
	font-size: 14pt;
	font-weight: 500;
	}

#main h4 {
	text-align: left;
	color: rgb(100,100,100);
	font-size: 10pt;
	margin: 0;
	padding: 0;
	}

#main p { 
	line-height: 1.5em;
	color:#404040;
	padding: 0 0 0.5em 0;
	}

#main #leftbar p { 
	border-bottom: 1px dotted rgb(128,128,128);
	}

#main img {
	padding: 5px;
	border: 1px solid rgb(128,128,128);
	}

#main img.leader {
	width: 190px;
	border: 0px solid;
	}
	
#main li { 
	line-height: 1.5em;
	color:#404040;
	padding: 0 0 0.5em 0;
	}

#main .notice {
	color: orange;
	}

	/*
#main li {
	list-style-type: none;
	list-style-image: url(../images/bullet.gif);
	}
*/

/* http://www.positioniseverything.net provided some help on this one */
#main #unseen {
	color: white;	/* hide things by setting font-color to main background-color */
	clear:both;		/* make sure there is no content on either side, thus restoring lay-out */
	height:1px;		/* provide a height for some browsers that depend on this */
	overflow:hidden;	/* no scrollbars :) */
	line-height:1%;	/* provide a height for some browsers that depend on this */
	font-size:0px;	/* provide a ZERO height for some browsers (IE) that depend on this */
	margin-bottom:-1px; /* make sure the whole thing is not displayed somewhere */
}
	
.disclaimer {
	font: 8pt verdana, arial, helvetica, sans-serif; 
	line-height: 1.5em;
	color:#606060;
	}

.disclaimer a {
	text-decoration: none;
	color:#5090FF; /* very nice light blue color */
	font: 8pt verdana, arial, helvetica, sans-serif; 
	font-weight: bold; 
	}

.copyright {
	font: 8pt verdana, arial, helvetica, sans-serif; 
	line-height: 1.5em;
	color:#606060;
	}

/* a fixed position footer at the bottom of the page */
#footer {
    clear: both;
}


#fixedfooter {
	position: fixed;
	bottom: 1px;
	width: 70%;
	border-width: 0px;
	border-color: black;
	border-style: solid;
	z-index: 2; overflow: hidden;
	font-family: Verdana;
	font-size: 10px;
	}

#fixedfooter ul {
	margin: 0; 
	padding: 0;
	}

#fixedfooter li .address {
	float: left; 
	list-style: none; 
	padding-left: 1em;
	}