/*
	This is the CSS stylesheet that is used for the ELO-FAQ-site.
	The stylesheet is based on the one used for the Nucleus FAQ (http//faq.nucleuscms.org")
	designed by Rodrigo Moraes (http://smalltalking.com")

	
	Here's how the pages are built up:

	MAIN PAGE
	---------

	body
	  <div id="main-copy"> 
  		<div class="rowOfBoxes"> 
    	  <div class="twoThirds noBorderOnLeft"
		    <h1>welkom etc
			<div catcolumn
			  <ul catgorien
    	  </div class="twoThirds noBorderOnLeft"
		  <div class="oneThird
		  	<h2 laatste bijdragen
			<h2 random etc
		  </div class="oneThird
  		</div class="rowOfBoxes"> 
		<div class="rowOfBoxes dividingBorderAbove"> 
    	  <div class="quarter noBorderOnLeft"> 
		  <quarter 2
		  <quarter 3
		  <quarter 4
		</div class="rowOfBoxes dividingBorderAbove"> 
	  </div main copy
     <#footer
	    ...
	 </#fooder
	 <#header
	   navigatiebar
	   logo, titel etc.
	   ...
	 </#header		  
	   
	
	DETAILED PAGE
	-------------
	body
	  div.contents
	    h1 (site title)
	      h2 (item tit
/*common styles */
/*================*/	   
body {
	background:#FFF;
	font-family:verdana, helvetica, arial, sans-serif;
	font-size:73%;	/* Enables font size scaling in MSIE */
	color: #623100;
	background-image: url(background1.gif);
	background-repeat: repeat;
	margin:0;
	padding:0; }

html > body {
	font-size:9pt; }

.titel {
	font-family: verdana, arial, sans-serif;	
	position: absolute;
	top: 20px;
	left: 20px;
	color: #660000;
	border: 1px solid #FFCC00;
	background-color: #F5E8C9;
	padding: 5px;
}

.titel h1 {
	color: #993300;
	font-style: italic;
	text-align: center;
}

.titel h2 {
	text-align: center;
	font-size: 18px;
	font-weight: 100;
}

.titel h3 {

	font-size: smaller;
	text-align: center;
}


.twoThirds textarea {
	width:90%;
	height:50px;
	background:#FFFCF0;
	border:1px solid #917F5F;
	padding:15px;
	margin:10px 0;
}
ul, ol {
	margin:1em 0 1.5em 0;
	padding:0; }

ul li, ol li {
	margin:0 0 5px 1em;
	padding:0; }

ul.categories {
	list-style:square;
	margin:1.25ex 0 0 1.2em; }

.rowOfBoxes {
	clear:both;
}
	
.quarter, .oneThird, .half, .twoThirds, .fullWidth {
	margin:1em 0 0.5em 0;
	float:left;
	border-left:1px solid #CCC; }

.quarter {
	width:21%;
	padding:0 1.9%; }

.quarter p {
	margin-top:0.9em;
	line-height:160%; }

.oneThird {
	width:28%;
	padding:0 20px 0 20px; 
	border:0; }

.half {
	text-align:justify;
	width:46%;
	padding:0 1.9%; }

.twoThirds {
	margin:100px 0 0 0;
	text-align:justify;
	width:63%;
	padding:0 1.9%;
	border-right:1px solid #CCC;
}

.twoThirdsTags {
	text-align:left;
	clear:left;
}

.tagsBox {
	background-color: #E2E2E2;
	margin: 4px;
	padding: 4px;
	border: 1px solid #666666;
}

.fullWidth {
	text-align:justify;
	width:96%;
	padding:0 1.2em;
	border-left:none; }

.filler {	/* use with an empty <p> element to add padding to the end of a text box */
	border:1px solid white; }
 
.noBorderOnLeft {
	border-left:none; }

.dividingBorderAbove {
	border-top:1px solid #CCC; }

/**/
.catcolumn { 
	float:left;
	width:250px; }
/* ##### Header ##### */
#header {
	position:absolute;
	top:23px;
	left:0; 
	width:100%;
	height:125px; }

.midHeader {
	position:absolute;
	top:23px;
	background:#FFFFFF;
	margin:0;
	padding:5px 0 0 10px;
	text-align: center;
	vertical-align: middle;
	left: 200px;
	font-style: italic;
	color: #000099;
}

.logo {
	margin:0;
	padding:0; }

.logo a:link, .logo a:hover, .logo a:active, .logo a:visited {
	background:transparent; 
	border:0; }

.headerLinks {
	color:#6B6B6B;
	text-align:right;
	margin:0;
	padding:0 0 2ex 0;
	position:absolute;
	right:10px;
	top:10px; }

.headerLinks a {
	color:#6B6B6B;
	background:transparent;
	text-decoration:none;
	margin:0;
	padding:0 0 0.5ex 0;
	display:block; }

.headerLinks a:hover {
	color:#9F9F9F;
	background:transparent;
	text-decoration:underline; }

.subHeader {
	color:white;
	background:#6B6B6B;
	margin:0;
	padding:0.5ex 10px;
	height: 15px;
}

.subHeader a, .subHeader .highlight {
	color:white;
	background:transparent;
	font-size:110%;
	font-weight:bold;
	text-decoration:none;
	margin:0;
	padding:0 0.25ex 0 0; }

.subHeader a:hover, .subHeader .highlight {
	color:#FFCC00;
	background:transparent;
	text-decoration:none; }

/* ##### Footer ##### */
#footer {
	height:20px;
	color:#6B6B6B;
	background:#F5F5F5;
	font-size:100%;
	line-height:1.25em;
	margin:2em 0 0 0;
	padding:10px 10px;
	border-top:1px solid #C0C0C0;
	clear:left;
	position: relative;
	top: 100px;
}

#footer a {
	color:#6B6B6B;
	background:transparent;
	text-decoration:underline; }

#footer a:hover {
	color:#9F9F9F;
	text-decoration:none; }
	
/* ##### Main Copy ##### */
#main-copy {
	margin:0 0 0 0;
	padding:0.5em 10px;
	clear:left; }

#main-copy h1, #main-copy h2, #main-copy h3 {
	color:#6B6B6B;
	background:transparent;
	font-family:"trebuchet ms", trebuchet, verdana, sans-serif;
	font-size:200%;
	margin:0;
	padding:0; }

#main-copy h3 {
	font-family:verdana, sans-serif;
	font-size:1.3em; }

#main-copy h1 a:link, #main-copy h1 a:visited {
	text-decoration:none; }

#main-copy h1 a:hover, #main-copy h1 a:active {
	text-decoration:underline; }

#main-copy p {
	line-height:1.75em;
	margin:1em 0 1.5em 0;
	padding:0; }

/*
	Definitions for headers in the menu (.menu h2), page titles (h1) 
	and dateheads (.contents h2):
	- page titles are centered (within the .contents div)
	- menu headers (h2) use a small font
	- dateheads use a large font and are in a box
*/

h1 {
	text-align: center;

}



/* 
	Definitions for the item listings like they are done on the main page and in archives
	- h3.item is the title of an item (<h3 class="item">)
	- .itembody is the item contents
	- .iteminfo contains the time of posting and the name of the author, and the amount of comments
	
	anchors in the iteminfo (.iteminfo a) are not underlined and bold
*/

/* item title */
h3.item {
	font-size: medium;
	margin: 0px;
	margin-top: 10px;
}

.itembody {	
	margin-top: 5px;	
	margin-bottom: 5px;
}

.iteminfo {	
	font-size: x-small;
	color: gray;
}

.iteminfo a {
	font-weight: bolder;
	color: #555;
	text-decoration: none;
}

/*
	Definitions of how comments listings look like on item pages
	- h3.comment contains the name of the comment author
	- .commentbody contains the text from the comment
	- .commentinfo contains the time of commenting
*/

/* comment title */
h3.comment {
	font-size: medium;
	margin-bottom: 10px;
}

.commentbody {
	text-align: justify;
}

.commentinfo {	
	font-size: x-small;
	color: gray;
}

.commentaar {
	background-color: #FFFFCC;
	margin: 5px;
	padding: 5px;
	border: 2px solid #FFFF33;
	font-style: italic;
	color: #336600;
	visibility: hidden;
	z-index: 1;
}

/*
	Some rules that apply to contents generated using the markup buttons 
	"add left box" and "add right box"
	
	both boxes have slightly larger text, and take a maximum of 20% of 
	the width of the contents.
*/

.leftbox, .rightbox {
	margin: 3px;
	padding: 3px;
	font-size: larger;
	width: 20%;
}
.leftbox {
	float: left;
	border-right: 2px solid #ccc;	
}
.rightbox {
	float: right;
	border-left: 2px solid #ccc;	
}


/*
	Some general rules:
	- images never have a border (even when they are inside a hyperlink)
	- elements having class="skip" are not shown
	- item lists using <ul class="nobullets"> have no list-item bullets
	- highlighted text (in search results) have a yellow background
*/

img {
	border: none;
}

.skip {
	display: none;
}

ul.nobullets {
	list-style: none;
	margin-left: 0px;
	padding-left: 0px;
}

.highlight {
	background-color: yellow;
}
/*
	gedrag van de links
*/

a:link {
	color: #0000CC;
	text-decoration: none;
	font-weight: bold;
	font-style: italic;
}
a:hover {
	text-decoration: underline;
	color: #0000FF;
}
a:visited {
	color: #0000FF;
	font-weight: bold;
	text-decoration: none;
	font-style: italic;


}
/*
	Externe newsfeeds
*/

.feedTitle {
}

.feedLink {
	background-color: red;
}

.feedDesc {
	background-color: green;

}

.feedTitle a:link, .feedTitle a:visited {
	color: #000066;
	text-decoration: none;
	font-weight: normal;
	font-style: normal;
}

.feedTitle a:hover {
	text-decoration: underline;
	color: white;
	background-color: #b7bac3;
}