/* import rules */

@import url("layout.css");
@import url("slide_show.css");

@import url("form.css");

html {
overflow: -moz-scrollbars-vertical;
}
html, body {
  border: 0;
  margin: 0;
  padding: 0;
  color:#443833;

}

body {
  font: 100%/1.25 arial, helvetica, sans-serif;
  background: #443833 url(../images/bg.jpg) repeat-y top center;
  
  width: 100%;
  height: 101%;
  min-width: 970px;
  
}
/***** Common Formatting *****/

div#sb_content {
	margin-left: 13px; /* have all content shift right (align with sb_top) */

}

div#sb_menu_bg
{
 	display: block;
	position: absolute;	
	
	background: #443833 url(../images/kalligrafie_270.png) no-repeat top left;
	height: 343px;
	padding-top: 2px; /* shift menu items down */
	
}		

div#sb_menu_bg div
{
	width: 264px;
	height: 40px;
	float: top;
	background-color: #877065;
	margin-bottom: 2px;	
	
}

div#sb_menu_fg
{
  display: block;
	position : relative;
	padding-top: 2px; /* shift menu items down */
	
}

div#sb_menu_fg a
{
	width: 264px;
	height: 40px;
	/**opacity: 1;*/
	margin-bottom: 2px;
}

.sb_menu_hover {
  display: block;
  height: 40px;
  margin-left: 13px;
  /*text-decoration: none;*/
  color: white;
  font-weight: bold;
  margin-left: 13px; /* shift menu text to the right */
}


div.sb_menu_hover_aikido a {
  display: block;

  height: 40px;
  margin-left: 13px;
  /*text-decoration: none;*/
  color: white;
  font-weight: bold;
  margin-left: 13px; /* shift menu text to the right */
}

.sb_menu_hover:hover {
  background-color: #443833;
  color: white; /* menu text color*/
  
  font-size:140%; /* menu text size */
  /* set transparency (different browsers) */
  filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
	margin-left: 0px; /* align hover menu text to the left border () */
}

div.sb_menu_hover_aikido a:hover {
  background-color: #443833;
  color: white; /* menu text color*/
  background:  url(../images/arrow_right_33x58.png) no-repeat center right;
  font-size:140%; /* menu text size */
  /* set transparency (different browsers) */
  filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
	margin-left: 0px; /* align hover menu text to the left border () */
}

.sb_menu_bdrop {
  /* set transparency (different browsers) */
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

.transparent_class_fg {
	position:relative;
	/* set transparency (different browsers) */
  filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	background-color: transparent;
}



div#main_back {
  display: block;
  position: absolute;
  margin-left:-5px;
  background:  url(../images/pictures/DSC_0014_cropped_50.jpg) no-repeat top center;
  /* background: #443833 url() sets background around image */
	width: 670px;
	height: 518px;
  /* set transparency (different browsers) */
  filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
	
}

div#aikido_back {
  display: block;
  position: absolute;
  margin-left:-5px;
  background:  url(../images/pictures/00167_25.jpg) no-repeat top center;
  /* background: #443833 url() sets background around image */
	width: 670px;
	height: 518px;
  /* set transparency (different browsers) */
  filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
}


div#lesgevers_back {
  display: block;
  position: absolute;
  margin-left:-5px;
  background:  url(../images/pictures/DSC_0209_25.jpg) no-repeat top center;
  /* background: #443833 url() sets background around image */
  width: 670px;
  height: 518px;
  /* set transparency (different browsers) */
  filter:alpha(opacity=30);
  -moz-opacity:0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}

div#competitie_back {
  display: block;
  position: absolute;
  margin-left:-5px;
  background:  url(../images/pictures/DSC_0393_25.jpg) no-repeat top center;
  /* background: #443833 url() sets background around image */
  width: 670px;
  height: 518px;
  /* set transparency (different browsers) */
  filter:alpha(opacity=30);
  -moz-opacity:0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}

div#contact_back {
  display: block;
  position: absolute;
  margin-left:-5px;
  background:  url(../images/00173_670.jpg) no-repeat top center;
  /* background: #443833 url() sets background around image */
	width: 670px;
	height: 518px;
  /* set transparency (different browsers) */
  filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
	
}

div#main_front {
  position:relative;
  
}

#main_front p {
 text-align:justify; 
 margin-right:7px;
}

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

h1 {
  width: 97%;
  clear: both;
  margin-top: 20px;
  margin-bottom: 10px;

  padding-bottom: 3px;
  letter-spacing: -1px;
  font: 2em arial, helvetica, sans-serif;
  color: #877065;
/*   background-color: transparent; */
  border-bottom: 4px solid #877065;
}

h2 {
  padding: 10px 0 0 0;
  color:  #443833;
  background-color: transparent;
  font-size: 110%;
  letter-spacing: -1px;
  font: 1.4em arial, helvetica, sans-serif;
}

h3 {
  font: 1em arial, helvetica, sans-serif;
  font-weight: bold;
}

p, ul, ol {
  
	margin: 0;
  padding: 0 0 18px 0;;

}

ul, ol {
  
list-style: none;
/*  background-color: #55453E;*/
  padding: 0 0 18px 40px;
 
}

li.ontop {
	position: relative;
	top: -11.5em;
	background-color: transparent;
  
}

.alt {
	color: rgb(204, 0, 0);
}

blockquote {
  font-size: 1.4em;
  color: #55453E;
  background-color: transparent;
  width: 400px;
  background: url(../images/close-quote.jpg) no-repeat right bottom;
  padding-left: 18px;
  text-indent: -18px;
}

blockquote:first-letter {
  background: url(../images/open-quote.jpg) no-repeat left top;
  padding-left: 40px;
  font: italic 2em Georgia, "Times New Roman", Times, serif;
}

small {
  font-size: 0.85em;
}

img {
  border: 0;
}

sup {
  position: relative;
  bottom: 0.3em;
  vertical-align: baseline;
}

sub {
  position: relative;
  bottom: -0.2em;
  vertical-align: baseline;
}

acronym, abbr {
  cursor: help;
  letter-spacing: 1px;
  border-bottom: 1px dashed;
}
/***** Links *****/

a {
  text-decoration: none;
  color:  #bb4100;
  
}

a:hover {
  text-decoration: none;
  color: #fd5800;
}

a img {
  border: none;/*remove border for linked images*/
}


/* ---------------------------------------------------------------- */

div#nav_back {
  display: block;
  position: absolute;	
  background: #443833 url(../images/kalligrafie_270.png) no-repeat top left;
  
	height: 343px;
	width: 264px;
  
}


div#main {
	padding: 0;
	
	display: block;
	/*QQQ position : relative;*/
	width: 264px; /* width if background image */
}
div#main p {
}


#main ul ul {width: 10em;}

/*************************************************************/

/* the menu */
.folder {
	margin:0;
	padding:0;
	border:0;
}

.topmenu ul, .topmenu li, .topmenu a {
	display:block;
	margin:0;
	padding:0;
	border:0;
	top: 3px; /* space above toplevel menu bar*/
	outline: none;
}

.topmenu li {
	list-style:none;
	padding: 12px 7px;
	text-decoration: none;
	color:white;
	width:auto;
	height:100%;
	background:transparent url(../images/bar.png) repeat-y;

	margin-bottom:3px; /* space between menu bars */
}

.topmenu li.folder ul {
	/* position submenu in relation to topmenu */
	position:absolute;
	left:120px; /* IE */
	top:auto;
	
}		
.topmenu li.folder > .topmenu ul { left:140px; } /* others */

.topmenu a:hover {
	/* text remains white while hovering */
	color:white;
}

.topmenu a {

	text-decoration:none;
	color:white;
	font-weight:bold;
	width:100%; /* IE */
}

.topmenu li > .topmenu a { width:auto; } /* others */

/* hovers with specificity */

.topmenu li.folder:hover { 
	/* background for folder */
}

.topmenu li:hover {
	/* background for toplevel */
	
	background:transparent url(../images/barhover.png) repeat-y;
}
	
.topmenu ul ul, .topmenu li:hover ul ul {
	display:none; 
}

.topmenu li:hover ul, .topmenu li:hover li:hover ul {
	display:block;
	
	/* background color submenu */
	background-color: white;
	border-left: 2px solid #877065;
	border-bottom: 2px solid #877065;
	/* make sure hovering submenu is on top of everything or it will compete with 
	   onmouseover events for other links */
	z-index:12;
}	

.dim {
	position:relative;
	z-index:10;
}

.submenu li {
	width:236px;

}

li.submenu li {
	width:236px;

}

/* this shows the submenu (overrides topmenu hide) */
li.submenu ul {
	display:block;

	
}


.topmenu li.submenu:hover ul
{
	margin:0;
	padding:0;
	border:0;
	background-color: transparent;
}



/*************************************************************/


div.breadcrumbbar {
text-align:left;
text-decoration: none;padding: 0 0 0 0;  
float: left;
} 

p.breadcrumb { 
font: bold 12px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; 
color: #877065; 

padding: 0 0 0 0; 
}

p.breadcrumb a { 
background: transparent url(../images/breadcrumb.gif) no-repeat center right; 
padding-right: 18px; /*adjust bullet image padding*/ 
/* color: #877065; */

}

p.breadcrumb a:visited, p.breadcrumb a:active{ 
color: #877065; 
}

p.breadcrumb a:hover { 
color: #fd5800; 

}

/*************************************************************/

/* remove the table styling */
div#tb_cal table  {
	
	position:relative;
	top:18px; /* distance between kalligrafie backgournd and calender*/
	font: normal 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; 
	border-collapse:collapse;
	
	color : #ba9087;
	border-color:#877065;
}

div#tb_cal table a:hover {
  text-decoration: none;
  color: green;
}

div#eventView {
  display: block;
	position: relative; 
	top: -300px; /* shift submenu vertically */
	left:-10px;
}

textarea#areastyle {
	
	
}


/*************************************************************/
/*
zoom method http://randsco.com/_miscPgs/cssZoom06.html
*/

div.zoom { float:right;
margin:0px 7px 5px 10px; }

div.zoom img { width:200px;
border:1px solid #369; }

div.zoom span.caption {
display:none; }

div.zoom a:hover { padding:0px; }
/* IE needs this in the above selector */

div.zoom a:hover img { width:100%;
margin: 0px -10px ; }




/* ---------------------------------------------------------------- */

/***** Global Classes *****/

.clear         { clear:both; }

.float-top    { float:top;position:relative;}
.float-left    { float:left; }
.float-right   { float:right; }
.float-bottom   { float:bottom; }

.text-left     { text-align:left;}
.text-right    { text-align:right; }
.text-bottom   { float:bottom;}
.text-bottomleft    { text-align:left; position:relative; top:90%; }
.text-bottomright    { text-align:right; position:relative; top:90%; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }

.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }

.wrap          { width:960px;margin:0 auto; }

.img-left      { float:left;margin:5px 10px 5px 0; }
.img-right     { float:right;margin:5px 10px 0 10px; }


.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }
.noborder      { border: none; }