/* CSS of mvdvlist.nl
 * Copyright owner: Martin van der Vlist
 * Note: IE is delibarately in Quirk mode, to keep hacking for IE5 and 6 easier
 *
 * TODO: Er moet een truc worden gevonden zodat
 *       background-repeat=repeat werkt zónder lelijke randjes boven
 * TODO: hoogte foto_index thumbnails variabel maken
 * TODO: IE-behaviour in de HTML code plaatsen voor CSS2 compatibiliteit, 
 *       alhoewel het niets zal slopen in andere browsers.
 *       Dan ook direct de mid.png's pakken en op stretch zetten.
 * TODO: navigatie tussen meerdere pagina's per directory verduidelijken
 * TODO: line-spacing tekst onder thumbnails kleiner maken, om scrollbar bij
 *       3 regels verticaal te voorkomen
 * TODO: directorykleur na aanklikken veranderen
 * TODO: duidelijkere terugknop bij directory's
 * TODO: title mooier maken?
 * Darkgreen:  #5C8028
 * Lightgreen: #82B93A
 */

/* All pages */

html {
	margin: 0;
	padding: 0;
	background-color: #629D11;
  background-image: url(green-diagonal.bmp);
  text-align: center;
}

body {
  width:         788px;
  margin-top:     15px;
  margin-bottom:  10px;
  
  margin-left:   auto;
  margin-right:  auto;
  text-align:    left;
}

img {
  border-width: 0px;
}

.png a {
  position: relative;
}

#banner {
  margin-bottom: 0;
/*	background-color: #82B93A;*/
	background-image: url("titelrand doorzichtige dropshadow.png");
  background-repeat: no-repeat;
  background-position: left top;
  padding-top:    16px;	
	padding-bottom: 25px;
	padding-left:   17px;
	padding-right:  22px;
	height: 54px;
}

#banner_content {
	height: 100%;
	position: relative;
}

#current_title {
  color: black;
	font-family: "Trebuchet MS", verdana, serif;
	font-size: 18px;
	font-weight: normal;
	
	display: block;
	position: absolute;
	left: 11px;
	top: 16px;
	margin: 0;
	padding: 0;
}

#subtitle {
  color: black;
	font-family: "Trebuchet MS", verdana, sans-serif;
	font-size: 11px;
	font-weight: bold; 
	
	display: block;
	position: absolute;
	right: 10px;
	bottom: 2px;
	margin: 0;
}

#real_body {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0;
  position: relative;
}

#menu_bar {
  color: white;
  margin: 0;
  margin-left: 15px;
  padding: 0;
  padding-left: 0.5em;
  list-style-type: circle;
  list-style-image: url(dash.png);
  list-style-position: outside;
  position: absolute;
  left:0px;
  width: 110px;
	
	font-family: "Trebuchet MS", verdana, sans-serif;
	font-size: 12px;
}

#menu_bar ul {
  line-height: 2em;
	padding-left: 0px;
	margin-left: 0;
	margin-top: 2em;
}

#menu_bar li {
  margin-left: 14px;
}

#menu_bar a:link {
  color: white;
	text-decoration: none;
}

#menu_bar a:visited {
  color: #82B93A;
	text-decoration: none;
}
#menu_bar a:hover {
  color: white;
	text-decoration: underline;
}


#content_container {
  margin-left: 118px;
  margin-right: 10px;
  margin-bottom: 0px;
	padding-top: 5px;
	padding-bottom: 1px;
	padding-left: 5px;
	padding-right: 3px;
/*  background-color: #82B93A;*/
}

#content {
  border-width: 1px;
  border-style:  solid;
  border-color: #5C8028;
  margin: 0px;
  padding: 2px;
  display: block;
  right: 0px;
/*  margin-left: 103px;*/
  margin-left: 0;
/*	background-color: #82B93A; */
	min-height: 150px;       /* min-height for correct menu layout */

	font-family: "Trebuchet MS", verdana, serif;
	font-size: 12px;
}

#content h1{
	font-family: "Trebuchet MS", verdana, serif;
	font-size: 16px;
	margin-bottom: -0.5em;
}

/* geen lege ruimte eronder */
#content .nospace {
	margin-top: -1em;
  position: relative;
}
/* als je dit niet instelt, snapt IE .nospace en h1 niet :S */
#content p {
	margin-bottom: 1em;
	margin-top: 1em;
}

#content a {
  text-decoration: none;
	color: #020;
	font-style: italic;
}
#content a:visited {
  color: #527223; 
}
#content a:hover {
  text-decoration: underline; 
	color: black;
}

#footer {
  margin: 0;
  text-align: center;
  position: relative;
  padding: 0;
  padding-right:90px;
  padding-left: 90px;
}

#thanks {
  margin: 0;
  padding: 0;
	font-family: "Trebuchet MS", verdana, serif;
	font-size: 10px;
}

#firefox {
  margin: 0;
  padding: 0;
	font-family: "Trebuchet MS", verdana, serif;
	font-size: 10px;
}

#valid_XHTML {
  position: absolute;
  width: 88px;
  height: 31px;
  top: 0px;
  right: 0px;
}

#valid_CSS {
  position: absolute;
  width: 88px;
  height: 31px;
  top: 0px;
  left: 0px;
}

/* Randen voor het content-vlak, met aparte kleur voor het menu */
.box_inner_m {
		padding: 0 15px 0 15px;
    margin-right: 0px;
		margin-bottom: -15px;
    background-image: url("rand met menu doorzichtig mid 1600px.png");
    background-position: 0px 10px;
    background-repeat: no-repeat;
    /*right and left side borders*/
}
/* IE heeft een hoogte nodig, zoals gewoonlijk.
 * En  het plaatje overlapte, doordat background-position
 * niet werkt met IE hack 
 * TODO: Fix IE7 */
* html .box_inner_m {
  height: 1%;
	margin-top: 10px;
}

.box_top_m {
  height:28px;
  margin-bottom: -10px;
  margin-left: 0px;
	margin-right: 0px;
  padding: 0;
  background:url("rand met menu doorzichtig top.png") 0% 0 no-repeat;
  /*top border and right-top corner*/
}

/*TODO: remove from HTML*/
.box_top_m div {
  width:18px;
  height:17px;
  margin: 0; 
  padding: 0;
	display: none;
  /*left-top corner*/
}

.box_bottom_m {
  height:27px;
  margin-top: 15px;
	background-image: url("rand met menu doorzichtig bottom.png");
  background-position: left top;
  background-repeat: no-repeat;
  /*left-bottom corner*/
}

.box_bottom_m div {
	width:18px;
	height:17px;
	display: none;
  /*bottom border and right-bottom corner*/
}

/* Randen voor het content-vlak, egaal */
.box_inner_p {
		padding: 0 15px 0 15px;
    margin-right: 0px;
		margin-bottom: -15px;
    background-image: url("rand contentkleur doorzichtig mid 800px.png");
    background-position: 0px 10px;
    background-repeat: no-repeat;
    /*right and left side borders*/
}
* html .box_inner_p {
  height: 1%;
	margin-top: 10px;
}

.box_top_p {
  height:28px;
  margin-bottom: -10px;
  margin-left: 0px;
	margin-right: 0px;
  padding: 0;
  background:url("rand contentkleur doorzichtig top.png") 0% 0 no-repeat;
  /*top border and right-top corner*/
}

.box_top_p div {
  width:18px;
  height:17px;
  margin: 0; 
  padding: 0;
	display: none;
  /*left-top corner*/
}

.box_bottom_p {
  height:27px;
  margin-top: 15px;
	background-image: url("rand contentkleur doorzichtig bottom.png");
  background-position: left top;
  background-repeat: no-repeat;
  /*left-bottom corner*/
}

.box_bottom_p div {
	width:18px;
	height:17px;
	display: none;
  /*bottom border and right-bottom corner*/
}
/* -- directory index -- */

#login {
  display: none;
}
#login input {
  background-color: #82B93A;
	width: 88px;
}
#login button {
  margin-left: 35px;
}

#server_notifications {
  display: block;
	border-bottom: 1px solid #5C8028;
	margin-left: -2px;
	margin-right: -2px;
	margin-bottom: 0px;
	padding: 5px;
	padding-top: 0px;
	font-weight: bold;
	font-family: "arial", verdana, sans-serif;
}

#dir_description {
  display: block;
	border-bottom: 4px double #5C8028;
	margin-left: -2px;
	margin-right: -2px;
	margin-bottom: 0px;
	padding: 5px;
	padding-top: 0px;
}

.thumbnail {
  display: block;
	float: left;
/*	width: 190px; /* 3/row*/
  width: 141px; /* 4/row*/
	height: 140px;
	overflow: auto;
  border: 1px solid #5C8028;
	margin-left:  4px;
	margin-right: 4px;
	margin-top:   4px;
	margin-bottom: 4px;
	text-align: center;
}

.thumbnail img {
/*  border: 1px solid yellow;*/
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.thumbnail p {
  display: inline;
	margin: 1px;
	padding: 1px;
/*  border: 1px solid blue;*/
	text-align: left;
}

.clear {
	clear: both;
}

/* -- view midsized -- */
#view_midsized {
/*  background-color: #82B93A;*/
  margin-left:   2px;
	margin-right:  7px;
  margin-top:    0px;
  margin-bottom: 0px;
  padding: 5px;
	border-bottom: 1px solid #5C8028;
	position: relative;
}

#view_midsized img {
  float: left;
	position: relative;
	display: inline;
	margin-right: 0; 
}
#view_midsized a {
  float: left;
  margin: 0;
	margin-right: 10px;
	padding: 0;
}

#view_midsized #filename {
  display: block;
	margin:0;
	padding: 0;
	position: relative;
  font-family: verdana, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	margin-bottom: 6px;
}
#view_midsized #description {
	float: none;
	position: relative;
	display: inline;
	margin: 0;
	margin-left: 0px;
	
	padding: 0px;
  font-family: "Trebuchet MS", verdana, sans-serif;
	font-size: 12px;
	text-align: right;
}

#view_midsized_bottom {
  margin-right: 10px;
  margin-bottom: -2px;
	margin-left: 2px;
  padding: 5px;
	position: relative;
}

#view_midsized_bottom a {
  /* no underline, black*/
	color: white;
	display: inline;
	text-decoration: none;
	list-style-type: none; /*fix*/
	
}
#view_midsized_bottom ul {
/*	top: -10px;*/
	position: relative;
	width: 500px;
	display: block;
	top: 0px;
	padding: 0px;
	margin-left: 0px;
	margin-top: 0px;
}
#view_midsized_bottom li {
	list-style: none;
}

#view_midsized_bottom .prev {
	width: 90px;
	height: 90px;
	float: left;
	margin-left: 0px;
}

#view_midsized_bottom .next {
	width: 90px;
	height: 90px;
	float: left;
}

/* geen idee hoe, maar het werkt :) */
#view_midsized_bottom .index {
	float: left;
}

#view_midsized_bottom .index a{
	font-size: 0px;
	width: 63px;
	height: 60px;
	float: left;
	padding: 0;
  background: url(up_arrow.gif) no-repeat top;
}

#exif_table {
	border-width: 2px;
	border-style: solid;
	border-color: #EED #887 #554 #AAA;
  /*float: right;*/
	margin-top:    5px;
	margin-bottom: 0px;
	margin-right:  5px; 
	border-collapse: separate;
	background: none;
	border-spacing: 1px !important; /* IE heeft dit in de HTML code staan */
	position: absolute;
	right: 0px;
	top: 0;
	padding: 0;

	font-family: verdana, sans-serif;
	font-size: 11px;
}

#exif_table .odd{
  border-right: 1px none #D8D8C8;
	background-color: #CCB;
	width: 100px;
	margin :0;
}
#exif_table .even{
  border-right: 1px solid #909088;
	background-color: #DDC;
	width: 130px;
	margin :0;
}

#exif_table tr{
  border: 1px solid #909088;
	margin :0;
}
#exif_table td{
  padding: 1px;
	border: 2px solid red;/*color wordt overschreven door statements hieronder*/
	margin :0;
}

#exif_table .HoddVodd {
	/*top right bottom left*/
	border-color: #998 #EED #EED #998;
	background: #DDC;
}
#exif_table .HevenVodd {
	border-color: #AA9 #FFF #FFF #AA9;
	background: #EEE;
}
#exif_table .HoddVeven {
	border-color: #998 #EED #EED #998;
	background: #DDC;
}
#exif_table .HevenVeven {
	border-color: #AA9 #FFF #FFF #AA9;
	background: #EEE;
}
/* layout directory lijsten */
.dir {
  
  display: block;
  float: left;
  border: 0px solid black;
  list-style-type: disc;
  margin:0;
  margin-bottom: 1em;
  padding: 0;
  padding-left: 2em;
  width:280px;
}

.dir li {
  border: 0px solid red;
}
.back {
  font-weight: bold;
}

#content .dir a {
	font-style: normal;
}
/* navigatie meerdere pagina's */
.tabs {
	margin-top: 0px;
	margin-bottom: 4px;
	margin-left: -2px;
	margin-right: -2px;
	padding-left: 0;
	display: block;
	width: auto;
	border-bottom: 1px solid #5C8028;
	padding: 0px;
} 

.tabs li { /*TODO: css2 compatible maken? neh, nergens voor nodig :P */
	margin-left: 10px;
	margin-right: -8px;
	margin-bottom: 0;
	padding: 0px 10px;

	border: 1px solid #5C8028;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 6px;
	list-style: none;
	display: inline;
}

#content .tabs a {
	font-style: normal;
}
	
.here {
	border-bottom: 1px solid #82B93A !important;
}

.nextpage {
	display: block;
	float: left;
	height: 140px;
/*	width: 9px;*/
	overflow: hidden;
	border: 1px solid #5C8028;
	margin-left:  0px;
	margin-right: 0px;
	margin-top:   4px;
	margin-bottom: 4px;
	text-align: center;
	font-weight: bold;
	font-size: 16px;		
}
.nextpage a {
	display: block;
	height: 100%;
	margin-top: 30px;
}

div.phpBBcode {
	position: absolute; 
	bottom: 0; 
	right: 5px; 
	font-family: Arial; 
	font-size: 9px;
}
div.phpBBcode input {
	font-size: 8px;
	font-family: Verdana;
	border: 1px solid #5C8028;
}