/**************************************
 ****  liberunits.nl stylesheet    ****
 **************************************/

/* -------------------------------------------------------------- 
  
   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; }*/
h1 { font-size: 1.7em; margin-bottom: 0.75em; }
h2 { font-size:180%; line-height: 1.4em; margin-bottom: 0px; letter-spacing: 0.3px; padding-bottom: 0px;}
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 h1 { letter-spacing: 1px; font-size:200%; font-weight: bold; font-family: georgia, times, serif; }
#banner h2 { font-size:140%; font-family: georgia, times, serif; }







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

   body-wrapper.css
   * Sets-up 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-menu.css
   * Sets-up page header, main menu and banners

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



/*** Header ***/

@media screen {

	#header p.logo {
		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 h1 {color: white; padding-right: 20px;  margin-top: 2em; margin-bottom: 0;}
#banner h2 {color: white; padding-right: 20px; margin-top: 0.3em; }


	/** Small banner **/

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

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 h1 {color: white;
	letter-spacing: 1px; font-weight: bold;
	font-family: georgia, times, serif;
	padding:0.3em 1em 0.3em 0; margin: 0; font-size:140%; display: inline}


#smallbanner span {color: white;
	letter-spacing: 1px; font-weight: normal;
	font-family: georgia, times, serif;
	padding:0.3em 0.3em 1em; margin: 0; font-size:140%;
	}


dl.metatags {margin-top:3em; border-top: 1px solid #C6D880; background-color: #E6EFC2; color: gray; padding:0.5em}


p.edit_text {margin: 0px; padding: 0px; font-size: 80%;}



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

   home.css
   * Sets-up homepage specific stuff

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


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;}

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

   voorraad.css
   * Sets-up voorraad specific stuff

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


/*** 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.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 {margin: 0;}

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;}


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

   contact.css
   * Sets-up contact specific stuff

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


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;}


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

   tmodal.css
   * Sets-up imageviewer specific stuff

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

/****** 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; }
div#tmodal_header { font-weight: bold; }
div#tmodal_footer { padding: 0.7em;}
div#tmodal_content img { border: 1px solid silver; }




#css_tester {margin-left: 1px;}