/**
 * CSS Guide for Mambo 4.5 templates 
 * @author Wee Keat Chin
 * @url www.visualdensity.com
 * @email weekeat@visualdensity.com
 */


/**
 * General Body Styling
 * --------------------
 * These are normal css setup reccommended for your
 * HTML template although they are not neccessary
 */
 
body {
	margin: 0px 0px 0px 0px;
	padding:0px;
	background-image:url(../images/lifo_conf_achtergrond.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color : #00708B;
	background-repeat:repeat;
	background-position: left top;
	}

td,tr,p,div {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px;
	color: #00708B;
	}
	
h1 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:28px;
	line-height:28px;
	font-weight:900;
	/* Semidonkerblauwe titels */
	color:#23598d;
	}

h2 {
	/* Semidonkerblauwe titels */
	color: #23598d; 
	font-size: 18px; font-weight: bold;
	}

h3 {
	/* Semidonkerblauwe titels */
	color: #23598d; 
	font-size: 16px; font-weight: bold;
	}

h4 {
	/* Semidonkerblauwe titels */
	color: #23598d; 
	font-size: 14px; font-weight: bold;
	}

h5 {
	/* Semidonkerblauwe titels */
	color: #23598d; 
	font-size: 13px; font-weight: bold;
	}

h6 {
	/* Semidonkerblauwe titels */
	color: #23598d; 
	font-size: 12px; font-weight: bold;
	}

/* Begin 2column design */	
p {
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	margin:0px 0px 16px 0px;
	padding:0px;
	color: #00708B;
	}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

#Logo {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 7px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:80px; /* 14px + 17px + 2px = 33px */
	background-color:#ffffff;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:80px; /* the correct height */
	}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Logo {height:80px;}

#Banner {
	position:absolute;
	top:5px;
	right:0px;
	width:100px;
	margin:0px;
	padding:0px 7px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:100px; /* 14px + 17px + 2px = 33px */
	background-color:#ffffff;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:80px; /* the correct height */
	}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Banner {height:80px;}

#Headermenu {
	margin:0px 0px 10px 0px;
	padding:0px 0px 0px 20px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:24px; /* 14px + 17px + 2px = 33px */
	border-style:solid;
	border-color:white;
	border-width:0px 0px 2px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
	line-height:11px;
	background-color:#FFFFFF;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:24px; /* the correct height */
	}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Headermenu {height:24px;}

#Footer {
	position:relative;
	margin:50px 0px 10px 0px;
	padding:17px 0px 0px 20px;
	height:33px;
	line-height:11px;
	voice-family: "\"}\"";
	voice-family:inherit;
	height:14px;
	text-align: center;
	}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Footer {height:14px;}

#Content {
	font-size: 12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin:0px 50px 50px 220px;
	padding:10px;
	/* background-image:url(../images/pijl.gif); */
	height: 531px;
	background-repeat: no-repeat;
	background-position: left top;
	}

#Menu {
	position:absolute;
	top:106px;
	left:20px;
	width:190px;
	padding:0px;
	height:480px;
	background-image: url(../images/submenu-met-tafel.jpg);
	border-width:0px 1px 1px 1px;
	border-style:none;
	border-color:#999;
	line-height:17px;
	voice-family: "\"}\"";
	voice-family:inherit;
	background-repeat: no-repeat;
	background-position: top;
	}
/* Again, "be nice to Opera 5". */
body>#Menu {width:190px;}

#Specialtopics {
	position:absolute;
	top:600px;
	left:20px;
	width:190px;
	padding:0px;
	height:480px;
	border-width:0px 1px 1px 1px;
	border-style:none;
	border-color:#999;
	line-height:17px;
	voice-family: "\"}\"";
	voice-family:inherit;
	background-repeat: no-repeat;
	background-position: top;
	}
/* Again, "be nice to Opera 5". */
body>#Specialtopics {width:190px;}

#Taalkeuze {
	position:absolute;
	top:80px;
	right:20px;
	width:104px;
	margin:0px 0px 10px 0px;
	padding:0px 0px 0px 20px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:24px; /* 14px + 17px + 2px = 33px */
	line-height:11px;
	background-color:#FFFFFF;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:24px; /* the correct height */
	}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Taalkeuze {height:24px;}

/* Einde 2column design */	

/** div container for top menu. position:top **/
#topmenu {
	position:relative;
	float:left;
	clear:left;
	background-image: url(../images/bg_topmenu.jpg);
	background-repeat:no-repeat;
	width: auto;
}

/** unordered list item link for top menu for firefox only **/
#topmenu>ul#mainlevel-nav li a {
	width: auto;
}

/* 
mambo top menu layout
you need to add menu class suffix: -nav
*/

/** unordered list top menu **/
ul#mainlevel-nav
{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.8em;
}

/** unordered list item for top menu **/
ul#mainlevel-nav li
{
	display: block;
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	margin: 0;
	width: auto !important;
	font-size: 11px;
	line-height: 24px;
	white-space: nowrap;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
}

/** unordered list item link for top menu **/
ul#mainlevel-nav li a
{
	display: block;
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
	color: #314B77;
	font-weight:bold;
}

/** unordered list item link for top menu for firefox only **/
#topmenu>ul#mainlevel-nav li a {
	width: auto;
}

/** unordered list item for top menu for firefox only **/
#mainlevel-nav li a:hover {
	background: #00123E;
	color: #FFFFFF;
	text-decoration:none;
}

#sidelevel-nav
{
	display: block;
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	margin: 0;
	width: 180px !important;
	white-space: nowrap;
}

#sidelevel-nav a
{
	display: block;
	text-decoration: none;
}

/** unordered list item for top menu for firefox only **/
#sidelevel-nav a:hover {
	display: block;
	background: #666666;
	margin: 0;
	color: #FFFFFF;
	text-decoration:none;
	width: 180px;
}

body>#sidelevel-nav {}

a:link, a:visited {
	font-size: 12px;
	font-family:verdana, arial, helvetica, sans-serif; 
	/* Semidonkerblauwe links */
	color: #23598d; 
	text-decoration: none;
	}

a:hover {
	color: #23598d;	text-decoration: underline;
	font-family:verdana, arial, helvetica, sans-serif;
	}

/* li {
	list-style: inside 3px;
	}
*/
	


/**
 * General Mambo Styles
 * --------------------
 * The following are styles that are often used
 * site wide by Mambo to provide better control
 * of content's appearences.
 */

hr { 
	/* often used in components like Akobook, and Simpleboard forum
	   to define the separator lines */
	background: transparent; 
	height:1px; 
	/* Donkerblauwe rand */
	border: 1px solid #314B77;
	}

hr.separator {
	/* found this css style in Peekmambo's css style. Still haven't worked out
	   if this is a custom style or an in built style. Will update when I find out*/
	background: transparent;
	height: 1px;
	width: 75px;
	/* Donkerblauwe rand */
	border: 1px solid #314B77;
}

.pagenavbar { 
	/*for some weird reasons, this is not used in page nav, but found it used 
	  for nick names in forum threads by Simpleboard */
}

.pagenav {
	/* as the name implies, this is for formatting texts for
	   those "<< Start < Previous 1 Next > End >>" links */
	font-family:verdana, arial, helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: normal;
}

a.pagenav, a.pagenav:visited {
	/* same as above, but for links */
	font-weight: bold;
	font-size: 0.9em;
	/* Donkerblauw bijna zwarte tekst */
	color: #343A58;
}

a.pagenav:hover {
	/* same as above, but for links with mouse pointer over it */
	/* Semidonkerblauwe links */
	color: #23598d;
	font-size: 0.9em;
}

.small {
	/* general style for texts when small size fonts are used. In 
	   the contents, this style is used for "Written by..." texts */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#23598d;
	font-size:12px;
	font-weight: bold;
	background-color:inherit;
	}

.smalldark {
    font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#999999;
	font-size:12px;
	font-weight: bold;
	background-color:inherit;
    }





/**
 * Mambo Form Styles
 * -----------------
 * Here are 2 styles that Mambo uses to let users control
 * how their forms and buttons may look.
 */
 
.button {
	/* this style applies to most form buttons generated by
	   Mambo and its components. Change its format here*/
	color: #FFFFFF; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin-top: 4px;
	font-weight: normal;
	text-align: center;
	font-size: 12px;
	background: #94B1CF;
	border: 1px solid #000066;
	height: 20px;
	}

.inputbox {
	/* Again, the name implies that this style changes the 
	   way those input box looks */
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #343A58;
	background: #FFFFFF;
	border: 1px solid;
	}





/**
 * Mambo Tabbed Frontend Admin Interface
 * -------------------------------------
 * The CSS styles here defines how the frontend admin interface
 * will look like when editing and adding news through frontend.
 */
 
.ontab {
	/* For styling of the "Tab" buttons when editing contents through the frontend
	   (when you log in as admin in the frontend). This .ontab is the styling for the
	   tab when it is active or after its "clicked" */
	background-color: #323A15;
	border-left: outset 1px #DCF2FA;
	border-right: outset 1px #808080;
	border-top: outset 1px #DCF2FA;
	border-bottom: solid 1px #d5d5d5;
	text-align: center;
	font-weight: bold;
	color: #FFFFFF;
}
.offtab {
	/* Same as above, used for styling of the "Tab" buttons when editing contents through the frontend.
	   This .ontab is the styling for the tab when it is NOT active or when it is NOT "clicked" */
	background-color : #e5e5e5;
	border-left: outset 1px #E0E0E0;
	border-right: outset 1px #E0E0E0;
	border-top: outset 1px #E0E0E0;
	border-bottom: solid 1px #d5d5d5;
	text-align: center;
	cursor: hand;
	font-weight: normal;
}

.tabpadding {
	/* this style is used set the size of the tab in 
	   in the above */
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

.tabheading {
	/* Not too sure what this is used for. Couldn't find anything
	   related to it yet at the moment */
}

.pagetext {
	/* this style is used to style the content of the editing form
	   contents (where HTMLArea sits and all its forms + contents) in
	   the frontend Administration interface */
	visibility: hidden;
	display: none;
	position: relative;
	top: 0;
}



/**
 * Mambo Menu Styling
 * ------------
 * You can control the way menu behave and look
 * by using the CSS settings below
 */

a.mainlevel:link, a.mainlevel:visited {
	/* this styling is for the MAIN items in the menu */
	color: #3D4E6D;
	font-weight: bold;
	text-decoration:none;
	text-align: left;
	}

a.mainlevel:hover {
	/* same as above, but when hovering */
	color: #FFFFFF; 
	background: #666666;
	font-weight: bold;
	text-decoration:none;
	text-align: left;
	font-size: 11px;
	}
	
a.sublevel:link, a.sublevel:visited {
	/* this styling is for menu items that HAS A PARENT */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #343A58; 
	font-weight: normal;
	font-size: 11px;
}

a.sublevel:hover {
	/* pffff!.. you know this! */
	color: #FFFFFF; 
	text-decoration: none;
	}

/** pathway link item **/
a.pathway:link,
a.pathway:link,
a.pathway:active,
a.pathway:visited {
	color:#999999;
	text-decoration:none;
}
a.pathway:hover {
	text-decoration:underline;
	color:#3973AC;
	background-color:inherit;
}



/**
 * Mambo General styling for Sections/Categories/Contents
 * ------------------------------------------------------
 * These stylings are either sometimes or often used across
 * Sections, categories and contents. They, therefore, deserves
 * to be mentioned and separated from others.
 */
 
.createdate {
	/* name says it all.. its for styling the date the content/articles are created under 
	   contents title */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 9px;
	color: #343A58;
	text-decoration: none;
	font-weight: normal;
	}

.modifydate {
	/* need me to say? :) Well it styles the "Last updated on" text
	   at the end of articles/contents */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	color: #343A58;
	text-decoration: none;
	font-weight: normal;
	}

a.readon:link, a.readon:visited {
	/* For formatting the "Read on..." link for blogs and on frontpage. */
	color: #23598d; 
	text-decoration: none; 
	font-family:  Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	}

a.readon:hover {
	/* Pfft..! */
	color: #23598d;	text-decoration: underline;
	font-weight: normal;
	font-family:  Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	}





/** 
 * Mambo Styling for Contents
 * --------------------------
 * All the styling for contents are listed
 * below.
 */
 
.contentpane {
	/* This is used mainly for the table that holds the SECTIONS such as News.
	   This is when you create a link to a Section and when clicked on it, it will display
	   "News" then some description (with image if you selected one) and then a list of 
	   Category of News. Yes! That entire thing is contained in a table with this style */
		
	/* background-color : #FFFFFF; */
	font-size: 12px;
	}

.contentpaneopen {	
	/* background-color : #FFFFFF; */
	font-size: 12px;
	}

.contentheading {
	/* This is used in several places; the Heading of contents on the frontpage,
	   it is also used for Section's heading (see above for explanation) "News" or
	   whatever heading you used */
	
	font-size: 20px;
	font-weight: bold;
 	color: #314B77;
	text-align:left;
	line-height: 28px;
	height: 15px;
	padding: 0px 0px 25px;
	}

.contentpagetitle {
	/* Couldn't find where is this yet. Will update this part when I
		get to it. Sorry. If you know, please email me the infos */
	font-size: 13px;
	font-weight: bold;
 	color: #FF9900;
	text-align:left;
	}

.contentdescription {
	/* When you create a link to a Section in the main menu and when clicked on it, it will display
	   "News" then some description (with image if you selected one) and then a list of 
	   Category of News. This style is used for formating the "DESCRIPTION" part of that page */
	font-size: 12px;
	color: #314B77;
	text-align: left;
	}

table.contenttoc {
	/* This is used to format the table of the Tables of Contents or "Jump to" 
	   box when it is enabled in a multiple paged content or article */
	color: #343A58;
	background-color: #e0e0e0;
	border-top: 1px solid #465675;
	border-bottom: 1px solid #465675;
	border-left: 1px solid #465675;
	border-right: 1px solid #465675;
    }

table.contenttoc td {
	/* the same as above, but this is used to format the td or
	   table cells */
    font-size: 8pt;
    font-weight: normal;
    text-align:left;
	padding: 3px;
}

.content_rating {
	/* used for styling the texts used for displaying 
	   those "stars" for rating in an article */
	font-weight: normal;
	font-size: 8pt;
}

.content_vote {
	/* used for those voting texts (the one with voting RADIO buttons) */
	font-weight: normal;
	font-size: 8pt;
}


/**
 * Mambo Sections Styles
 * ---------------------
 * Styling of sections tables 
 */

.sectiontableheader {
	/* This is for styling the section table headers on a SECTION's page.
	   An example would be those articles lists when you click on "News" or something?
	   With a table header of "Date", "Item Title", "Author" and "Hits" ? That's the
	   header that you will be controlling through this style */
	background-color : #94B1CF;
	background-repeat: repeat;
	padding: 2px;
	color : #FFFFFF;
	font-weight : bold;
	padding: 2px;
	}

.sectiontableentry1, {
	/* this is used when there's a whole list of data to provide and
	   you need to create alternate colors for each row of data. This is
	   the first color */
	background-color : #BED2EB;
	padding: 5px;
	}
	
.sectiontableentry2 {
	/* this is the second color for the row. So, the table generator,
	   will alternate its style through sectionableentry1 and sectiontableentry2
	   as it cycles through and outputs each row of data. Similar to forum's post
	   listings */
	background-color : #F3F3F3;
	padding: 5px;
	}





/**
 * Mambo Styles for Categories
 * ---------------------------
 * The following are the styling for "Category" items
 * generated from the Sections area
 */

.category {
	/* this is to set the category Titles ( found on a SECTION's page
	   where the Category lists are) styles */
	color: #3D4E6D; 
	font-size: 12px; 
	font-weight: bold; 
	text-decoration: none;
	}

a.category:link, a.category:visited {
	/* same as above, but to set the link format */
	color: #3D4E6D; font-weight: bold;
	}

a.category:hover {
	/* same as above, but for links with mouse pointer over it */
	color: #3D4E6D;
	}

/**
 * Mambo Components Styles
 * -----------------------
 * These stylings are to format the way components title
 * is displayed
 */

/** pathway block **/
span.pathway {
	display:block;
	text-align:left;
	color:#314B77;
	font-size:12px;
	font-weight:bold;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #E5E5E5;
	height:20px;
	margin-bottom:10px;
}

.componentheading {
	/* This is used for formatting the component's title
	   when it is displayed on its own page on the frontend */
	font-size: 24px;
	font-weight: bold;
 	color: #314B77;
	text-align:left;
	padding: 0px 0px 25px;
	}