/* 
   Copyrights:

  --  All items on this website are © Grundsatzlich IT 2008.
*/

/* generics */

/*
   Colorscheme PUBERS.NU :
   1. foreground red:  #e71c16 // rgb(231,28,22);
   2. background blue: #8aadde 	// rgb(138, 173, 222)
   3. link-color: #264060	//rgb(38,64,96)
   4. Tekst: black
*/    
	
/* body - this covers the whole page */

/* IE browsers up to IE6 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: 950px; 		/* avoid width:100% in the rest of the sheet - causes all kinds of trouble in IE6 vs IE5.5 */
	min-width: 950px;
	padding: 0;
	text-align: center;
	color: black;
	background-color: #8aadde;
	font-size: 10pt;	/* fallback in case something goes wrong with a tag */
	position: relative;
	}
	
/* now fudge the body style for non-IE (i.e. normal) browsers , including IE7+ */
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: 950px; 		/* avoid width:100% in the rest of the sheet - causes all kinds of trouble in IE6 vs IE5.5 */
	min-width: 950px;
	padding: 0;
	text-align: center;
	color: black;
	background-color: #8aadde;
	font-size: 10pt;	/* fallback in case something goes wrong with a tag */
	position: relative;
	}


/* main banner */

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

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

/* navbar (inspired by Meyerweb mostly) */

#navigate {
	top: 0; left: 0; right: 0; bottom: 0;
	overflow: hidden;
	height: 1.6em; 
	line-height: 1.6em;
	font-family: Verdana;
	font-size: 12px;
	border-width: 1px;
	border-color:white;
	border-style: solid;
	color: white;
	background-color: #52518D;
	width: 950px;
	}

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

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

#navlinks {
	float: left; 
	/* background-image: url(../images/stripe.jpg); */
	}

#navlinks a {
	text-decoration: none; 
	}

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

#navlinks li a {
	padding: 0.25em 1em; 
	margin-right: 0.125em;
	font-weight: bold;
	font-style: normal;
	color: white;
/*	border: 2px solid black; */
	}

#navlinks li a:hover {
	background-color: #E71C16;
	}

/* 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 { 
	border: 2px solid white;
	background-color: #E71C16;
	}

#bubbles p {
  padding: 0.75em 0 0 0;
  font-family: Verdana;
  font-size: 14pt;
  font-weight: bold;
  line-height: 1.5em;
  color: #404070;
}

#bubbles img {
	border: 0px solid rgb(138, 173, 222);	/* 0px to hide the border, and backgroundcolor in case it doesn't hide for some reason */
}

.bubble-tips {
  position: absolute; width: 200px; height: 100px;
  text-align: center;
  background-image: url(../images/ellips_tips.gif);
}

.bubble {
  position: absolute;  width: 200px;  height: 100px;
  text-align: center;
}


/* main content */
#main {
	padding: 1em 1em 1em 1em;
	color: black;
	background-color: #8aadde;
	font-family: Verdana;
	margin: 1px;
	text-align: left;
	min-height: 35em; /* This line provides a minimum height. If you don't use it, all kinds of browsers run amuck with the page. */
	height: 100%;
    }

#main.oudersbackground {
	background-image: url(../images/hpc-ouders-1-large.gif);
	background-repeat: no-repeat;
	background-position: center 270px;
	background-attachment: fixed;
	}

div.pubersbackground {
	background-image: url(../images/hpc-pubers-3-large.gif);
	background-repeat: no-repeat;
	background-position: center 270px;
	background-attachment: fixed;
	}
	
div.instellingenbackground {
	background-image: url(../images/hpc-instellingen-1-large.gif);
	background-repeat: no-repeat;
	background-position: center 270px;
	background-attachment: fixed;
	}

#main a {
	text-decoration: none;
	color:#264060; /* darkblue  */
	}

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

#main #quotes {
	margin: 0.5em;
	padding: 0.5em;
    color: black;
	background-color: #AaCdFe;
    }
	
#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: 60%;
	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 */
	}


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


#main h1 {
	text-align: left;
	font-size: 24pt;
	font-weight: 500;
    font-family: Verdana;
    line-height: 1.5em;
	/* color: rgb(231,28,22); (red) */
    color: #404070;	
	}

	
#main h2 {
	text-align: left;
	font-size: 18pt;
	font-weight: 500;
    font-family: Verdana;
    line-height: 1.5em;
    color: #404070;	
	}

#main h3 {
	text-align: left;
	color: rgb(201,28,22);
	font-size: 14pt;
	font-weight: 500;
	}

#main h3.banner {
	text-align: center;
	}

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

#main p { 
	line-height: 1.5em;
	padding: 0 0 0.5em 0;
	font-size: 10pt;	/* fallback in case something goes wrong with a tag */
	}

p.quote {
    font-style: italic;
	font-size: 9pt;
	}
	
#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 img.hidden {
	visibility: hidden;
	}
	
#main ul, 
#main li { 
	font-size: 12pt; 
	font-family: Verdana;
	}

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

ul.pdflist {
	font-size: 12pt; 
	font-family: Verdana;
	list-style-image: url(../images/pdf-icon-small.gif);
	}

ul.doclist {
	font-size: 12pt; 
	font-family: Verdana;
	list-style-image: url(../images/word-icon-small.gif);
	}
	
#contentbox ul, 
#contentbox li { 
	font-size: 10pt; 
	font-family: Verdana;
	}

#tabs {
	text-align: left;
	font-weight: 500;
    font-family: Verdana;
	line-height: 1.6em;
	font-size: 10pt;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	color: white;
	}
	
#tabs #tabnames {
	float: left;
	width: 31%;
	margin: 0 0 0 0;
	padding: 1em 1em 1em 1em;	/* clockwise from top */
	margin-right: 63%;	/* this hack will push all text in the main div to below our div, combined with col33 */
	border: 1px solid white;
	background-color: #52518D;
	}

#tabs #tabnames li {
	padding: 0.3em 0.5em 0.3em 0.5em; 
	margin: 0.3em 0.5em 0.3em 0.5em;
	font-style: normal;
	color: white;
	list-style: none; 
	border: 2px solid #52518D;
	}

#tabnames li:hover {
	background-color: #E71C16;
	cursor: hand;
	}
	
#tabs #tabnames .activeTab { 
	border: 2px solid white;
	background-color: #E71C16;
	}

#tabs #tabtexts {
	float: left;
	width: 60%;
	margin-left: -60%;  /* this hack will push all text in the main div to below our div, combined with col32 */
	border: 1px solid white;
	}

#tabs #tabtexts li {
	padding: 0.5em 0.5em 0.5em 0.5em; 
	margin: 0.5em 0.5em 0.5em 0.5em;
	color: black;
	list-style: none; 
	display: none;
	}

#tabs #tabtexts li li {
	display: block;
	list-style: circle; 
	}

#tabs #tabtexts li.activeTab { 
	display: block;
	}

/* conference stuff */
#conference h1 {
	text-align: left;
	font-size: 24pt;
	font-weight: 500;
    font-family: Verdana;
    line-height: 1em;
    color: #404070;	
    }

#conference h1.announcement {
	color: rgb(201,28,22); /* red */
    }

#conference h2 {
	text-align: left;
	font-size: 18pt;
	font-weight: 500;
    font-family: Verdana;
    line-height: 1em;
    color: #404070;	
	font-style: italic;
	}

#conference h3 {
    color: #404070;	
	text-align: left;
	font-size: 14pt;
	font-weight: 500;
	line-height: 0.7em;
	}

#conference h3.banner {
	text-align: center;
	}

#conference h3.announcement {
	color: rgb(201,28,22);
	}

#conference h4 {
	text-align: left;
	color: rgb(171,28,22);
	font-size: 10pt;
	margin: 0;
	padding: 0;
	}

#conference p, input {
    color: #404070;	
	text-align: left;
	font-size: 12pt;
	font-weight: 500;
} 

/* http://www.positioniseverything.net provided some help on this one */
b.unseen {
	color: #8aadde;	/* 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 {
	text-align: center;
	font: 8pt verdana, arial, helvetica, sans-serif; 
	line-height: 1.5em;
	color:#606060;
	}

.disclaimer a {
	text-decoration: none;
	color:#264060; 
	font: 8pt verdana, arial, helvetica, sans-serif; 
	font-weight: bold; 
	}

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

.copyright a {
	text-decoration: none;
	color:#264060; 
	font: 8pt verdana, arial, helvetica, sans-serif; 
	font-weight: normal; 
	}
	
/* the footer with our address */

#footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 99%;
	padding: 1em;
	overflow: hidden;
	font-family: Verdana;
	font-size: 10px;
	background-color: #8aadde;
	}

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

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