html {font-size:100.01%; height:100%; margin-bottom:1px;} /* 16px font */
body {font:75%/1.25 Arial, Helvetica, sans-serif; background: url(/Templates/Garant/Images/bg.gif);height: 100%;min-height: 100%;} /* 12px font, 15px line-height */
h1 {font-size:1.5em;}
strong { font-weight: bold;}
em { font-style: italic;}
img.rightaligned {float:right;}
/* test styles 
div {border: 1px solid #000;}*/

#ContentFrame { width: 900px; margin: 40px auto; }

#PageWrapper {background:#fff;border:2px solid #bbb; border-bottom: 1px solid #bbb; overflow:hidden;}

#TopRule { display:block; width: 100%; font-size: 4px;}

#BottomRule {background: url(/Templates/Garant/Images/bg_contentbottom.png) top left transparent no-repeat; display:block; width: 100%; font-size: 4px;}

#PageHeader {height: 65px;}

#PageFooter {clear:both;margin: 0 15px; border-top: 3px #eee solid; color: #666; padding: 10px 0;}

.logo { margin-left: 20px; position: absolute; top: 25px; width: 267px; }
.topelement {margin-left: 680px; position: absolute; top: 20px; width: 208px;}

/* Menu */


.MainMenu { padding: 0 20px; list-style: none; height: 38px;border-bottom: 6px solid #84A202;}
.MainMenu li {background: transparent url('/Templates/Garant/Images/tab_bg.gif') no-repeat top right;float:left;margin:0 2px 0 0;padding: 0;text-align: center;}
.MainMenu li.selected {background: transparent url('/Templates/Garant/Images/tabhover_right.gif') no-repeat top right; }
.MainMenu a {display: block;background: transparent url('/Templates/Garant/Images/tab_left.gif') no-repeat left top;padding: 14px 15px 9px 15px;	font-size: 9pt;	font-family: Arial;	font-weight: bold;	color: #000; text-decoration:none;}
.MainMenu a:hover{}
.MainMenu .selected a {	color: #fff; background: transparent url('/Templates/Garant/Images/tabhover_left.gif') no-repeat left top;}
.MainMenu li.unselected:hover {	background: transparent url('/Templates/Garant/Images/tabhover_right.gif') no-repeat top right; }
.MainMenu li.unselectedHover { background: transparent url('/Templates/Garant/Images/tabhover_right.gif') no-repeat top right; }
.MainMenu li.unselected:hover a { color: #fff; background: transparent url('/Templates/Garant/Images/tabhover_left.gif') no-repeat left top; }
.MainMenu li.unselectedHover a { color: #fff; background: transparent url('/Templates/Garant/Images/tabhover_left.gif') no-repeat left top; }

.SubMenu {margin: 0 15px;}
#LeftContent h3 a {background-color:#8aa028; color: #fff; font-size: 1em; padding:5px;margin: 0 15px;width:165px; display:block; font-weight:bold;}
.SubMenu ul {}
.SubMenu li {}
.SubMenu li a {color:#000; display:inline-block;padding: 5px 5px 5px 10px;background: url('/Templates/Garant/Images/submenuitem_bg.gif') repeat-x bottom left;width:160px;}
.SubMenu li a:hover {background-color: #dde1e1;}
.SubMenu li span.selected { display:inline-block; padding: 5px 5px 5px 10px;font-weight:bold;background: url('/Templates/Garant/Images/submenuitem_bg.gif') repeat-x bottom left;width:160px;}

/* Column Layout */

#PageContent {padding-right: 205px; margin: 15px 0; overflow:hidden; background: url('/Templates/Garant/Images/submenu_bg.gif') repeat-y;}

#MainContainer { float:left; width:205px; padding: 0 490px 20px 0; overflow:hidden; background: url('/Templates/Garant/Images/submenu_bg.gif') repeat-y;}

#LeftContent {width:100%; float:left;overflow:hidden; min-height:100%; height:auto !important; height:500px;}

#CenterContent {display:inline;float:right;margin:0 -480px 0 0;position:relative;width:480px;}

#RightContent {display:inline;float:right;margin:0 -200px 0 10px;position:relative;width:185px; overflow:hidden; }

/* Stacked Layout */

#StackedContent {margin:15px;}

#TopContent {border-bottom: 1px dashed #d2d2d2;clear:both;}

#MiddleContent {border-bottom: 1px dashed #d2d2d2;}

#BottomContent {padding: 15px 0; overflow:hidden;}
#BottomContent .ProductMainBody { padding: 0 10px;}

.colwrapper{ float:left; width:434px; padding-right: 436px; overflow:hidden;}
.leftwrapper { width:216px; float:left; padding-right: 218px; overflow:hidden;}
.leftwrapper .teaser1 {}
.rightwrapper {display:inline;float:right;margin:0 -436px 0 0;width:218px;padding-right: 218px;}
.col1 {width:196px; float:left; padding: 0 10px;}
.col2 {display:inline;float:right;margin:0 -218px 0 0;position:relative;width:198px; padding: 0 10px;}
.col3 {width:198px; float:left; padding: 0 10px;}

/* Text styles */

#PageContent p, #BottomContent p, #ProductPanel p {margin: 1em 0;}
#PageContent p a, #BottomContent p a, #ProductPanel p a, #PageFooter p a{color: #000; border-bottom: 1px solid #8aa028;}
#PageContent p a:hover, #BottomContent p a:hover, #ProductPanel p a:hover, #PageFooter p a:hover {color: #8aa028; border-bottom: 1px solid #8aa028;}
#PageContent h2 {color: #8aa028; font-size: 1.2em; margin: 1.2em 0 0.8em; font-weight: bold;}
#BottomContent h2 {padding: 10px 0;}
#BottomContent h3 {padding: 0 10px;}

/* List styles */

#BottomContent ul {padding-bottom: 5px;}
#BottomContent ul li a {color: #000; border-bottom: 1px solid #8aa028;}
#BottomContent ul li a:hover {color: #8aa028; border-bottom: 1px solid #8aa028;}

/* Misc classes */

#ProductPanel {padding: 15px 0; border-top: 1px dashed #d2d2d2;overflow:hidden;clear:both; min-height: 240px;}
#ProductPanel #ProductBody h1 { padding-top:12px;}
#ProductPanel #ProductBody {padding: 0 150px 0 400px;}
#ProductPanel #ProductBody .labellogo {margin: 20px 20px 10px 0;}
#ProgressBar { text-align: center;}
#ProgressBar img { vertical-align: middle;}

.productimg {float:left;padding-left: 100px; }
.productbody{  }
#PageContent .accordionContainer{display: block;}
#PageContent .accordion h2.acHeading {margin:0;}
#PageContent .accordion h2 a {font-weight:bold;}
#PageContent .accordionHeader, .accordionHeaderSelected {margin-top:4px;}
#PageContent .accordionHeader h2 a {background:url('/Templates/Garant/Images/expand.gif') #dde1e1 no-repeat top right;color:#000;display:block; width:465px;padding:6px; font-size: 0.8em;}
#PageContent .accordionHeaderSelected h2 a {background:url('/Templates/Garant/Images/contract.gif') #84A202 no-repeat top right; color: #fff;display:block; width:465px;padding:6px; font-size: 0.8em;}
#PageContent .accordionContent {border: solid 1px #dde1e1; border-top:0;padding:5px;display:block; width:465px;margin-bottom:1px;}
#PageContent .accordionContainer .accordionContent p {margin: 1em!important;}

.hidden { display:none;}
.clear {clear:both;}

/* Coda Styles */

p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% }

p#cross-links { text-align: center }

p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }

noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
noscript a { color: #a00; text-decoration: underline }
noscript ol { margin-left: 25px; }

a:focus { outline:none }

img { border: 0 }
/*
h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }
*/		
.stripViewer .panelContainer .panel ul {text-align: left;margin: 0 15px 0 30px;}

.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
	margin: 20px 0;	position: relative;	width: 100%; overflow: hidden;}

.wrapper ul li p a {color:#000;border-bottom: 1px solid #8aa028;}
.wrapper ul li p a:hover {color: #8aa028; border-bottom: 1px solid #8aa028;}
.stripViewer .panelContainer .panel .wrapper ul li {padding-bottom: 5px;}

/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 130px; background: #fff; overflow: scroll}
.csw .loading {margin: 40px 0; text-align: center}

.stripViewer { /* This is the viewing window */
	position: relative;	overflow: hidden; margin: auto; width: 780px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: 130px;clear: both;	background: #fff;}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;	left: 0; top: 0;width: 100%;list-style-type: none;
	/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float:left;	height: 100%;position: relative;width: 800px; /* Also specified in  .stripViewer  above */
}

.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
	/*padding: 10px;*/
}

.panelContainer .panel .wrapper ul { list-style:none; margin: 0; padding: 0;}
.panelContainer ul li { display: block; float: left; margin: 0 14px;}
.panelContainer ul li p { margin: 0;text-align:center;}

.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	margin: auto;}

.stripNav ul { /* The auto-generated set of links */
	list-style: none;}

.stripNav ul li {
	float: left; margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */}

.stripNav a { /* The nav links */
	font-size: 10px;font-weight: bold;text-align: center;line-height: 32px;background: #c6e3ff;color: #fff;text-decoration: none;display: block;padding: 0 15px;}

.stripNav li.tab1 a { background: #60f }
.stripNav li.tab2 a { background: #60c }
.stripNav li.tab3 a { background: #63f }
.stripNav li.tab4 a { background: #63c }
.stripNav li.tab5 a { background: #00e }

.stripNav li a:hover {background: #333;}

.stripNav li a.current {background: #000;color: #fff;}

.stripNavL, .stripNavR { /* The left and right arrows */
	position: absolute;	top: 30px;	text-indent: -9000em;}

.stripNavL a, .stripNavR a {display: block;	height: 62px;width: 40px;}

.stripNavL {left: 0;}

.stripNavR {right: 0;}

.stripNavL {background: url("/Templates/Garant/Images/pil_vanster.gif") no-repeat center;}

.stripNavR {background: url("/Templates/Garant/Images/pil_hoger.gif") no-repeat center;}