/* Main CSS Document for Hepromij */

html { height: 100%; margin-bottom: 1px; } /* force scrollbars just to be safe */

body {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:11px;
	height:100%;
	color:#000;
	margin:0;
	padding:0;
	border:0;
	text-align:center;
	background-color:#3c0;
	background-image:url(../gfx/background.jpg);
	background-position:top left;
	background-repeat:repeat-x;
}

a:link, a:visited {
	font-weight:bold;
	color: #009;
}

a:hover, a:active {
	color: #606;
}

h1 {
	padding:3px 0;
	font-size:24px;
	color:#888;
	border-bottom:2px solid #83bf81;
}

h2 {
	padding:3px 0 0 0;
	font-size:14px;
	color:#000;
	margin:0;
}

p{
	padding-bottom:10px;
	margin:0;
}

img{
	border:0;
	text-align:left;
	margin:0;
	padding:0;
}

/* LAYOUT */

#header {
	margin:0 auto;
	position:relative;
	width:800px;
	height:130px;
	text-align:left;
}

#logo{
width:432px;
height:100px;
float:right;
background-image:url(../gfx/Heprologo_green.png);
}

#main {
background-image:url(../gfx/submenu.png);
background-position:top left;
background-repeat:no-repeat;
clear:both;
width:810px;
padding:32px 0 0 0;
margin:0 auto;
}

#container{
width:800px;
text-align:left;
margin:0 auto;
padding:0 5px;
background-image:url(../gfx/container_bg.png);
background-repeat:repeat-y;
}

#animatie{
display:block;
width:800px;
height:216px;
padding:0;
margin:0;
z-index:1;
border-top:1px solid #d6d6d6;
border-bottom:1px solid #d6d6d6;
text-align:right;
}

div#animatie a.caption {
text-align:left;
font-weight:bold;
text-decoration:none;
position:absolute;
background-image:url(../gfx/teaser200px.gif);
opacity:0.8;
filter: alpha(opacity=80);
width:200px;
height:175px;
top:10px;
right:10px;
z-index:1000;
padding:10px;
margin:0;
color:#000;
}

div#animatie ul {
  top:10px;
  left:10px;
  position:absolute;
  overflow:hidden;
  padding:0;
  z-index: 10001;
  margin:0;
}

div#animatie ul li {
  float: left;
  list-style: none;
}

div#animatie ul a{
  cursor: pointer;
  display: block;
  position: static;
  height:30px;
  opacity:0.8;
  filter: alpha(opacity=80);
  width:28px;
  padding:0;
  margin:0;
}

div#animatie ul a.prev{background-image:url(../gfx/prev.gif); margin:0 2px 0 0;}
div#animatie ul a.next{background-image:url(../gfx/next.gif); margin:0;}

div#animatie ul a.:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

#breadcrumb{
background-image:url(../gfx/level3.gif);
background-repeat:repeat-x;
background-position:bottom;
width:770px;
height:12px;
color:#000;
padding:10px 15px;
font-weight:bold;
color:#000;
}

#languages{
position:absolute;
float:right;
top:385px;
left:50%;
margin-left:330px;
}

#content{
background-color:#fff;
background-image:url(../gfx/faux.gif);
background-repeat:repeat-y;
text-align:left;
padding:0;
margin:0;
clear:both;
}

#rightcolumn { 
 display:inline;
 color:#333;
 margin:0 15px 15px 15px;
 padding:15px 0 0 0;    /* firefox bug! */
 width:218px;
 float:right;
}
#leftcolumn { 
 float: left;
 color: #333;
 margin: 15px;
 padding:0px;
 width: 520px;
 display: inline;
 position: relative;
 background-image:url(../gfx/level3.gif);
 background-repeat:repeat-x;
 background-position:top left;
}

#leftcolumn2 { 
 float: left;
 color: #333;
 margin: 15px;
 padding:0px;
 width: 520px;
 display: inline;
 position: relative;
 background:#FFF;
}

#rightcolumn .sidebar{
background-color:#fff;
color:#888;
margin:0 0 10px 0;
}
#rightcolumn .sidebar h3{
width:218px;
height:38px;
background-image:url(../gfx/siderbar_top_groen.gif);
background-repeat:no-repeat;
padding:5px 0 0 10px;
margin:0;
font-size:18px;
color:#AAA;
}

#rightcolumn .sidebar p{
width:210px;
padding:0 4px 10px 4px;
}

#footer{
width:780px;
padding:5px 10px;
background-image:url(../gfx/footer.gif);
text-align:right;
color:#FFF;
clear: both;
margin:0 auto;
}

#footer a, #footer a:visited{
color:#fff;
font-weight:normal;
padding-left:15px;
}

#footer a:hover{
color:#0d0;
font-weight:normal;
padding-left:15px;
}

/* sliding level 3 menu */

ul#buttons {
	width:500px;
    margin:0;
    padding:0;
    list-style:none;
	font-family:"Trebuchet MS", Arial, Helvetica,Sans-serif;
	font-weight:bold;
	font-size:12px;
}

ul#buttons li {
      float:left;
      background:url("../gfx/level3left.gif") no-repeat left top;
      margin:0;
      padding:0 2px 0 9px;
      }
ul#buttons span{
      float:left;
      display:block;
      width:auto;
      background:url("../gfx/level3right.gif") no-repeat right top;
      padding:8px 15px 4px 6px;
      text-decoration:none;
      color:#000;
      cursor:pointer;
      }
/*#buttons > ul span {width:auto;}*/
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
ul#buttons span{float:none;}
    /* End IE5-Mac hack */

ul#buttons .current {
      background-position:0 -150px;
      border-bottom:1px solid #fff;
      }
ul#buttons .current span{
      background-position:100% -150px;
      padding-bottom:-2px;
      color:#aaa;
	  border-bottom:1px solid #fff;
}
	
#panes {
 float:left;
 text-align:left;
 border:none;
 width:500px;
 margin:0;
}

#panes div div {
 overflow: hidden;
}


/* FORMS */

.nospamming{
display:none;
}

.contactlabel{
width:120px;
float:left;
text-align:right;
margin: 0 1em 10px 0;
clear: both;
}

.formitem{
border:1px solid #000;
background-image:url(../gfx/formbg.gif);
background-position:top left;
background-repeat:no-repeat;
font-family:"Courier New", Courier, monospace;
font-size:11px;
color:#000;
padding:3px;
margin-bottom:10px;
}

.contactsubmit{
color:#080;
padding:5px;
margin:10px 0 0 0;
font-weight:bold;
font-size:12px;
text-align:left;
border:1px solid #007;
background-image:url(../gfx/level3.gif);
background-repeat:repeat-x;
background-position:bottom left;
width:100px;
cursor:pointer;
float:right;
}

/* primary en secondary menu - eidenlijk nested voor elkaar met sliding sprites */

#header ul#primary {
	margin:0 0 0 10px;
	padding: 0;
	position: absolute;
	bottom: -1px;
	width: 800px; 
	font-family:"Trebuchet MS", Arial, Helvetica,Sans-serif;
	font-weight:bold;
	font-size:14px;
}

#header ul#primary li  {
	display: inline;
	list-style: none;
	float:left;
    background:url("../gfx/left_both.png") no-repeat left top;
    margin:0;
    padding:0 2px 0 9px;
}

#header ul#primary a,
#header ul#primary a.current {
	width:.1em;
	display: block;
	float:left;
    white-space:nowrap;
    background:url("../gfx/right_both.png") no-repeat right top;
    padding:8px 15px 4px 6px;
    text-decoration:none;
    color:#fff;
}

#header > ul#primary a {width:auto;}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {float:none;}
    /* End IE5-Mac hack */
#header a:hover {
      color:#333;
      }

#header ul#primary .current{
    background-position:0 -150px;
	border:0;
}

#header ul#primary .current a {
      background-position:100% -150px;
      white-space:nowrap;
	  padding-bottom:5px;
	  color:#fff;
      }
#header ul#primary li:hover, 
#header ul#primary li:hover a {
      background-position:0% -150px;
      color:#fff;
      }
#header ul#primary li:hover a {
      background-position:100% -150px;
      }

#header ul#secondary{
	position: absolute;
	margin:0;
	padding:0;
	bottom:-2.4em;
	left:0;
	width:800px;
	background:none;
	font-family:"Trebuchet MS", Arial, Helvetica,Sans-serif;
	font-size:11px;
}

#header ul#secondary li{
	background:none;
	color:#fff;
}

#header ul#secondary li.current a{
color:#000;
}

#header ul#secondary li a{
	width: auto;
	display: block;
	float: left;
	padding:2px 8px 0 0;
	margin: 0;
	text-align:left;
	border-right:1px dotted #000;
	background:none;
}

#header ul#secondary li a:hover {
	color:#000;
	background:none;
}

#header ul#secondary li:last-child a { border: none; }

/* options dropdown list via mootools*/

#options{
	font-size:0.8em;
	height:60px;
	width:100%;
	background-color:#fff;
	/*border-bottom:2px solid #3C6;*/
	margin:0;
	padding:0;
	/*position:absolute;*/
	top:0px;
	left:0px;
	z-index:220;
}
span#opener{
	display:block;
	padding:0;
	width:70px;
	height:70px;
	background:url(../gfx/options_star.gif) no-repeat;
	position:absolute;
	right:0;
	top:0;
	z-index:200;
	cursor:pointer;
}
#options .option{
	float:right;
	height:40px;
	padding:3px;
	margin:0;
	text-align:right;
	border-left:1px solid #396;
}
#options .option ul{
	list-style:none;
	margin:3px 0 0 0;
	float:left;
}
#options .option ul li{
	display:inline;
	float:left;
	margin:0;
}
#options .option ul li span, #options .option ul li a {	
	display:block;
	margin:0px 2px 0px 2px;
}
#options .option #fontSmall{
	padding-top:5px;
	font-size:9px;
	font-weight:bold;
	text-decoration:underline;
}
#options .option #fontMed{
	padding-top:2px;
	font-size:12px;
	font-weight:bold;
	text-decoration:underline;
}
#options .option #fontLarge{
	font-size:14px;
	font-weight:bold;
	text-decoration:underline;
}
#options .option #changeTrebuchet{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	text-decoration:underline;
}
#options .option #changeGeneva{
	font-family:Geneva, Arial, Helvetica, sans-serif;
	text-decoration:underline;
}
#options .option #changeGeorgia{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-decoration:underline;
}
#options .option #styleChange li a, #options .option #styleChange li span {	
	width:20px;
	height:20px;
	border:1px solid #999999;
}
#options .option #cssGroen{
	background-color:#3c0;
}
#options .option #cssBlauw{
	background-color:#5ae;
}
#options .option #cssGeel{
	background-color:#8d6a07;
}

/* -------------------------------- message pop-up ------------------------------------------ */

#flippen {
background-image:url("../gfx/message.gif");
background-repeat:no-repeat;
background-position:left top;
color:#000;
width:404px;
height:284px;
padding:30px 0 10px 0;
position:absolute;
z-index:1000;
top:50%;
left:50%;
margin-left:-202px;
margin-top:-142px;
}

.topright{
position:absolute;
top:6px;
right:6px;
width:18px;
height:18px;
cursor:pointer;
}

/* ------------ rounded corner images ---------------------------------- */

div.wrapper img{	
	float:left;
	border:0 none;
}
div.wrapper div{	
	position:absolute;
	left:0;
	height:7px;
	width:100%
}
div.wrapper div.tl{
	background:transparent url("../gfx/tl.png") top left no-repeat;
	top:0
}
div.wrapper div.tr{
	background:transparent url("../gfx/tr.png") top right no-repeat;
	top:0;
	}

div.wrapper div.bl{
	background:transparent url("../gfx/bl.png") bottom left no-repeat;
	bottom:0
}
div.wrapper div.br{
	background:transparent url("../gfx/br.png") bottom right no-repeat;
	bottom:0;
}