/* -------------------------------------------------------------- 
  
   reset.css
   * Resets default browser CSS.
   
   Based on work by Eric Meyer:
   * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}


body { line-height: 1.5; background: #fff; margin:1.5em 0; }

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight:400; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

a img { border: none; }

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

   typography.css
   * Sets up some sensible default typography.

   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Wilson Miner      [wilsonminer.com]
   * Richard Rutter    [clagnut.com]

   Read more about using a baseline here:
   * alistapart.com/articles/settingtypeontheweb

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

/* This is where you set your desired font size. The line-heights
   and vertical margins are automatically calculated from this.
   The percentage is of 16px (0.75 * 16px = 12px). */

body { font-size: 75%; }


/* Default fonts and colors.
   If you prefer serif fonts, remove the font-family
   on the headings, and apply this one to the body:
   font: 1em Georgia, "lucida bright", "times new roman", serif; */


body {
  color: #222;
  font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  /*font-family: georgia, times, serif;*/
}
h1,h2,h3,h4,h5,h6 {
  color: #111;
  font-family: georgia, times, serif;
  /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 1.7em; margin-bottom: 0.75em; }
h3 { font-size:180%; line-height: 1.4em; margin-bottom: 0px; letter-spacing: 0.3px; padding-bottom: 0px;}

h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }


/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
p.last      { margin-bottom: 0; }
/*p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.top   { margin-top: 0; } /* Use this if the image is at the top of the <p>.

img         { margin: 0 0 1.5em; }
*/

ul {line-height: 1.5em;}

ul, ol      { margin:0 1.5em 1.5em 1.5em; }
ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }
dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin-top: 1.5em; font-style: italic; }
del         { color:#666; }

a:focus,
a:hover     { color: #000; }
a           { color: #009; text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
pre,code    { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.5; }
tt          { display: block; margin: 1.5em 0; line-height: 1.5; }


/* Tables
-------------------------------------------------------------- */

table   { margin-bottom: 1.4em; }
th      { border-bottom: 2px solid #ccc; font-weight: bold; }
td      { border-bottom: 1px solid #ddd; }
th,td   { padding: 4px 10px 4px 0; }
tfoot   { font-style: italic; }
caption { background: #ffc; }

/* Use this if you use span-x classes on th/td. */
table .last { padding-right: 0; }


/* Some default classes
-------------------------------------------------------------- */

div.legend img {margin: 0;}
div.legend p {padding-left: 0.5em; color: black; font-weight: bold; font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;}
div.legend p a {color: black; text-decoration: none;}
div.legend p a:hover { text-decoration: underline;}

.uitleg      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; color: #666;}

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.quiet      { color: #666; }

.hide       { display: none; }
.highlight  { background:#ff0; }
.added      { color:#060; }
.removed    { color:#900; }

.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }


#header a  { text-decoration: none; font-weight: bold; letter-spacing: 1px;
			font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif; }
#header a:hover {text-decoration: underline;}


#banner h2 { letter-spacing: 1px; font-size:200%; font-weight: bold; font-family: georgia, times, serif; }
#banner h3 { font-size:140%; font-family: georgia, times, serif; }




/***	Body, wrapper and graded sidebars   ***/

body {background-color: #e6e6e6; margin: 0px; padding: 0px;}
.wrapper {position: relative; background: #fcfcfc url(../pictures/background.png) repeat-y scroll 0 0; }


html, body {height:100%;}
.wrapper  {height:auto !important; height:100%; min-height:100%;}

.wrapper {
	padding: 20px 20px 20px 20px;
	width: 900px;
	margin: 0 auto;
}

/* ie6 png-hack */
body.ie6 img { behavior: url(js/iepngfix.htc); }

/***	Columns  ***/

.twocol_left {position: absolute; left: 20px; width: 14em; padding-top: 1em; }
.twocol_content {margin-left: 16.3em; margin-top: 1em; }


#editmenu {position: absolute; top: 0px; left:0px; padding: 10px;}


/*** Header ***/

@media screen {

	#header h1 {
		width:296px; height:60px;
		background: #fff url('../pictures/liberta.gif') no-repeat scroll top left;
		text-indent: -100em;
		font-size: 15px;
		overflow: hidden;
		margin-bottom:-10px;
		}
}


/*** Mainmenu ***/

#header ul {margin:0; list-style-position: inside; list-style-type: none; float: right; margin-right: 2em;}

#header ul li {float: left; width: 10em; padding: 0.5em 0 0.5em 0; text-align: center; margin-right: 0.6em;}


#header li a  { color: white; }

#header li.liber {background-color: #9DC208; }
#header li.voorraad {background-color: #636363; }
#header li.contact {background-color: #3f88ae; }



/*** Submenu ***/

#submenu  {background-color: #9DC208; color: white; padding: 0.15em 0; font-weight: bold; width: 100%; clear: both; }
#submenu a {margin-left: 3em; color: white; text-decoration: none;}
#submenu a:hover {text-decoration:underline;}


body.voorraad #submenu  {background-color: #636363;}
body.contact #submenu  {background-color: #3f88ae;}

#header li {border-bottom: 1px solid white; text-align: center;}
body.liber #header li.liber {border-bottom: 1px solid #9DC208;}
body.voorraad #header li.voorraad {border-bottom: 1px solid #636363;}
body.contact #header li.contact {border-bottom: 1px solid #3f88ae;}


	/** Large banner **/

#banner {margin-top: 10px; margin-bottom: 2em; height:154px; color: white; clear: both; width: 100%; text-align: right; }


body.liber #banner {background: #96ce00 url("../pictures/foto_home.jpg") no-repeat scroll 0 0;}
body.voorraad #banner {background: #636363 url("../pictures/foto_voorraad.jpg") no-repeat scroll 0 0;}
body.contact #banner {background: #3f88ae url("../pictures/foto_contact.jpg") no-repeat scroll 0 0;}


#banner div {height:154px; width: 492px; float: right; position: relative;}

@media screen {

	body.liber #banner div {background: #96ce00 url("../pictures/gradient_liber.jpg") repeat-x scroll 0 0;}
	body.voorraad #banner div {background: #636363 url("../pictures/gradient_voorraad.jpg") repeat-x scroll 0 0;}
	body.contact #banner div {background: #3f88ae url("../pictures/gradient_contact.jpg") repeat-x scroll 0 0;}

}
/*#banner h2 {color: white; position: absolute; bottom: 60px; right: 1em; }
#banner h3 {color: white; position: absolute; bottom: 15px; right: 1em; line-height: 110%; text-align: right}
*/

#banner h2 {color: white; padding-right: 20px;  margin-top: 2em; margin-bottom: 0;}
#banner h3 {color: white; padding-right: 20px; margin-top: 0.3em; }


	/** Small banner **/

#smallbanner {margin-top:1px; width: 100%; clear: both; margin-bottom: 15px; }

body.liber #smallbanner {background: #9DC208 url("../pictures/smallgradient_liber.jpg") repeat-x scroll center left;}
body.voorraad #smallbanner {background: #818181 url("../pictures/smallgradient_voorraad.jpg") repeat-x scroll center left;}
body.contact #smallbanner {background: #7CB1CC url("../pictures/smallgradient_contact.jpg") repeat-x scroll center left;}

/*#smallbanner {background-color: #636363;}*/
#smallbanner h2 {color: white;
	letter-spacing: 1px; font-weight: bold;
	font-family: georgia, times, serif;
	padding:0.3em 1em 0.3em 1em; margin: 0 0 0em 0; font-size:140%; text-align: right;}





div.blockimage
{
	float: left;
	padding: 0 40px;
}

div.blockimage img {border: 1px solid #bbb;}


.textblock {padding: 0em; font-size: 1.2em; background-color:#EDF2F5; float: left; padding: 10px;
	border: 1px solid #bbb;
	/*border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-bottom: 2px solid #777;
	border-right: 2px solid #777;*/
}
.textblock strong {color: #3f88ae;}

.textblock em {color: #9dc208; font-weight: bold;}



.labeled_tile {margin-top: 4px; text-align: center; font-size: 130%; font-weight: bold; margin-bottom: 4px;}


h3.summary_header {color: black; font-size:1.3em; font-weight: bold;}
h3.summary_header a {font-style: normal; color: #636363; text-decoration: none;}
h3.summary_header a:hover {color:black;}

/*** Positioning ***/





body.voorraad  h3 {color: black; font-size:2em;}
body.voorraad  h3 a {color: #636363; text-decoration: none;}
body.voorraad  strong {color: #3f88ae;}


	/*** Main items (menu left) ***/

div.mainitems {
	float: left; width: 100%; border: 1px solid gray; background-color:#B7DDF1; padding: 0.2em;
	}
div.mainitems ul {padding: 0 0 0.5em 0; margin: 0; line-height: 1.9em; list-style: none; }
div.mainitems li {padding-left: 0.3em;}
div.mainitems ul ul {list-style: circle; padding-left: 0em; list-style-position: inside;}
div.mainitems a {color: black; text-decoration: none;}
div.mainitems a:visited {color: #222;}
div.mainitems a:hover { text-decoration: underline;}
div.mainitems li.active a {color: black; text-decoration: none; font-weight: bold;}
div.mainitems li.active li a {color: black; text-decoration: none; font-weight: normal;}
div.mainitems a:visited.active {color: black;}
div.mainitems hr {margin: 0 5px 0 0;  border:0px; background-color: gray; height:1px;}

/*div.mainitems li {background-image: url("pictures/bullet.png");  background-repeat: no-repeat; background-position: 0 .7em; padding-left: 1em;}*/


div.groupinfo {float: left; clear: left; width: 100%;
			margin-top: 2em; padding-left: 5px;  font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;}

body.voorraad div.content {margin-left: 20em; }



div.grouptitle {clear: both; width: 490px; margin: 1em 0 0 0; position: relative;}
div.grouptitle h3 {font-style: normal; color: black;}
div.grouptitle p {color: gray; font-style: italic; font-size: 1.4em; margin-bottom: 0.5em; font-family: georgia, times, serif;}


/** group **/

div.items {/*float: right; */margin: 0; /* border: 1px solid gray;*/}

div.item {
	width: 170px; float: left; margin: 0px 4px 4px 0px;
	background-color:#F8F8F8; border: 1px solid silver; text-align: center; line-height: 1.4em;
	cursor: pointer;
	position: relative;
	padding-bottom: 2.4em;
	}

div.items div.my_hover {
	border: 1px solid #999; background-color: #EDF2F5;
	}
div.items div.my_hover p.more a { text-decoration: underline;}


div.items img {border: 1px solid silver; margin: 5px 4px 2px 4px;}


div.items h4 {margin: 0px; font-weight: bold; font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
	font-size: 1.1em; }


div.items div.text {text-align: left;  margin: 3px 10px 0 10px; padding:0px; /*min-height: 8em;*/}
div.items div.text div {margin-top: 3px;}
div.items div.text div.status {font-weight: bold; color: red; margin: 0px;  font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;}
div.items sub, div.items sup { line-height: 0; }


div.items p {margin: 0px; padding:0px;}
div.items p.more {position: absolute; bottom: 5px; left: 10px; }
div.items p.more a {color: #3f88ae; font-weight: bold; text-decoration: none; }
div.items p.more a:hover { text-decoration: underline;}

div.items div.onzichtbaar {background-color: #F9C197;}
div.items div.onzichtbaar div.edit {color: #333;}

div.item div.edit {font-size:90%; color: silver; font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;}
div.item div.edit a {color: gray; text-decoration: none;}
div.item div.edit a:hover {text-decoration: underline;}



/** item **/

.voorraadmainimage {text-align: center; }
.voorraadmainimage img {border: 1px solid gray; margin-bottom: 1em;}

h4.status {color: red; padding: 0px; margin: 0.5em 0em 0.5em 0em; font-size: 1.5em;}
div.imagelist { margin-bottom: 1em; }
div.imagelist div.image {width: 170px; height: 170px; margin-right: 4px; float: left; background-color:#F8F8F8; margin-bottom: 4px;
	border: 1px solid gray; text-align: center; vertical-align: middle;}
div.imagelist div.image img {margin: 6px 0 6px 0; }




span.back { background: transparent url('../pictures/back_arrow.gif') no-repeat scroll 0em 0.2em; padding-left: 17px; }
div.nav{margin-bottom: 1em;}


body.contact h3 {color: #3f88ae;}


table.form {margin-top: 2em;}
table.form td {padding: 3px; border: none;}
table.form td.header {font-weight: bold; padding-top: 1em; }
table.form strong {color: #3f88ae; font-weight: normal; }
table.form td.in {text-align: right;}


.contact_col {margin-left: 50px; float: left;}

/****** buttons *******/


div#tmodal_footer
{
	margin:0;
	padding: 1em;
}

div#tmodal_footer a
{
	text-decoration: none;
	padding: 0 0.5em;
}

div#tmodal_footer img
{
	border: none;
	vertical-align: middle;
}




/******* window ******/


#tmodal_window 
{
	 background-color: #f2f2f2; border: 1px solid gray; margin:0; padding:8px;
}

#tmodal_content
{
	background-color: #fff;
	overflow: auto;
	/*margin: 1em;	 */
}

div#tmodal_header
{
	/*background-color: yellow;*/
	font-weight: bold;
	/*padding: 0.1em;*/
}

div#tmodal_footer
{
	/*background-color: yellow;*/
	padding: 0.7em;
}


	/* std */
/*
body.std div#tmodal_window_outer {display: table; position: fixed; top: 0; left:0; width: 100%; height: 100%; }
body.std div#tmodal_window_middle {display:table-cell; vertical-align: middle; }
body.std div#tmodal_window_inner { display: table;  margin: 0 auto;  }
body.std div#tmodal_content {display:table-cell;}
*/
/*
body.ie7 div#tmodal_window_outer {display: table; position: fixed; top: 0; left:0; width: 100%; height: 100%; }
body.ie7 div#tmodal_window_middle {display:table-cell; vertical-align: middle; }
body.ie7 div#tmodal_window_inner { display: table;  margin: 0 auto;  }
body.ie7 div#tmodal_content {display:table-cell;}
*/

/*  with offset for large images
body.std div#tmodal_window_outer {display: table; position: fixed; top: 0; left:0; width: 50%; height: 100%;}
body.std div#tmodal_window_middle {display:table-cell; vertical-align: middle; }
body.std div#tmodal_window_inner { float: right; }
body.std div#tmodal_content {position: relative; top: 0; right: -50%;}
*/

	/* ie */
/*
body.ie div#tmodal_window_outer { position: absolute; left: 0; width: 100%; height: 100%; text-align: center;
	top: expression( ( ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); }
body.ie div#tmodal_window_middle {position: absolute; top: 50%; left: 50%;}
body.ie div#tmodal_window_inner { position: relative; top: -50%; left: -50%; text-align: left;}
*/


div#tmodal_imageview
{
	/*overflow: auto;*/
}

div#tmodal_content img
{
	border: 1px solid silver;
}




/*.popup-on { display: table; position: fixed; z-index:1000; top: 0px; width: 100%; height:100%; text-align: center; margin: 0 auto; }
#popup .middle {display: table-cell; position: relative; vertical-align: middle; width:100%; height:100%;}
#popupcontent {overflow: visible; }
*/
#css_tester {margin-left: 1px;}