/**************************************************************************************
 GENERAL PAGE ELEMENTS 
**************************************************************************************/
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small; 
  /*background: #CCCCCC url(../images/layout/gradients/bg_grad.jpg) fixed;*/
  background: #EEE url(../images/layout/gradients/bg_body_blue.gif) repeat-x;
  background-attachment:fixed;
  color: #FFF;
  margin: 0;
  padding: 182px 0 1.7em 0; /* bottom padding is height of #footer */
}
html>body #header, #footer { position: fixed;}

/* hide from mac ie5 \*/
#footer {position: absolute;}
/* end hide from mac ie5 */

.cor_info {
  display: none;
}

.int_heading {
  display: none;
}
h1 {font-size:1.15em;}
h1, h2, h3, p {margin-bottom: 0.5em}
h2 {font-size: 1em; font-weight: bold;}
strong {font-weight: bold}
em {font-style: italic}
ul {list-style-type: square; padding-left: 30px; margin:5px;}
img {border:none}
div {display: block}
.pipe {font-weight:bold;color:#FF7700;}
#bodyContainer {position: relative; height: 100%; width: 950px; margin: 0 auto;}

/*** BEGIN HEADER ***/
#header {width: 950px; height: 155px; position: fixed; top: 0;}
div.logo {
  background: url(../images/layout/header/logo.png);
  width: 125px;
  height: 35px;
  margin-top: 18px;
  margin-right: 21px;
  }
p.vpgi9001 {margin-top: 2em}
div.site_name {
  background: url(../images/layout/header/natuurlijk_interform.png);
  width: 406px;
  height: 47px;
  margin-top: 52px;
  margin-right: 15px;
  clear:right;
  }
div.site_name, div.logo {
  float: right;
  position:relative;
  }
/*** END HEADER ***/

#wrapper {height: 100%; width: 100%;}
#navcontainer {
  border-top: 1px solid #C0C0C0;
  border-bottom: 1px solid #C0C0C0;
  width: 950px; 
  height: 25px;
  background: url(../images/layout/gradients/navbar.jpg) repeat-x;
  margin-top:155px;
}
table.mainContent {height: 100%}
table.mainContent td.leftColumn {
  width: 25%;
  padding: 15px;
  text-align:left;
  background: #459283 url(../images/layout/gradients/bg_sidebar.jpg) repeat-x; 
  vertical-align: top;
}
table.mainContent td.rightColumn {
  width: 560px;
  padding: 20px;
  background: #003399 url(../images/layout/gradients/bg_content.jpg) repeat-x; 
  text-align:justify;
  border-left: 1px solid #C0C0C0;
  vertical-align: top;
}
#filler {height: 200px}
#orangeBox {
	background-color:#FF8200;
  color:#FFF;
  padding:20px;
  text-align:justify;
}

/**************************************************************************************
 PAGE ELEMENT HILIGHT BORDERS
**************************************************************************************/
table.confirmation th, table.confirmation td.confirmDel, table.confirmation td.success, table.newspaged td.newsitem, .inlineimageborder, .pagetitle, legend, .TDgreen, .TDblue, .footergreen, .date, .pdfdownloads, .editornav, .tomtom, table.newComers td.heading, table.newspaged th, table.newspaged td.pagination, table.newspaged th.newstitle, table.news td.newsitem, table.news th, .TDblueGrad, .TDgreenGrad {
  border-top: 1px solid #C0C0C0;
  border-bottom: 1px solid #053269;
  border-left: 1px solid #C0C0C0;
  border-right: 1px solid #053269;
}

.downloadbutton, .downloadbutton:hover {
  border-top: 1px solid #C0C0C0;
  border-bottom: 1px solid #459283;
  border-left: 1px solid #C0C0C0;
  border-right: 1px solid #459283;
}

/**************************************************************************************
 PAGE LINKS
**************************************************************************************/
a {color: #00BFFF; text-decoration:none; outline: none;}
a:hover {color: #FF7700; text-decoration:none; outline: none; border: none;}
a:visited {color: #FF7700; text-decoration: none; outline: none;} 

#downloadbrochButton a, #contactformButton a, #downloadbrochButton a:hover, #contactformButton a:hover, .downloadbutton a, .downloadbutton a:hover, .downloadbutton a:visited, #drukwerkscanButton a, #drukwerkscanButton a:hover {color: #FFF; cursor: pointer;}
/* END PAGE LINKS */

.isoLogo {margin-top: 20px;}
.photo {width: 100%; text-align: center; margin-top: 20px;}
.inlineimage {float: left; padding: 2px; margin-right: 15px; margin-bottom: 10px;}
.inlineimageborder { 
  float: left;
  padding: 2px; 
  margin-right: 20px; 
  margin-bottom: 14px;
}
.inlineimageblock { 
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  text-align: center;
  background: #1B48A5;
  border-top: 1px solid #6D8AC4;
  border-bottom: 1px solid #053269;
  border-left: 1px solid #6D8AC4;
  border-right: 1px solid #053269;
}
input, textarea, select {background: #F4F4F4 url(../images/layout/backgrounds/inputShadow.gif) no-repeat; border: none;}

.pagetitle {
  background: url(../images/layout/gradients/bg_titles.jpg) repeat-x; 
  font-weight: bold; 
  padding: 0px 0 4px 5px; 
  text-align: left; 
  margin-bottom: 1.5em;
}

.smallfont {font-size:9px; font-weight:bold; font-style:italic;}

fieldset {
  border: 1px solid #C0C0C0;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  text-align: left;
	background:#3F66B3;
}

legend {
  background: url(../images/layout/gradients/bg_green.png) repeat-x; 
  font-weight: bold;
  padding: 2px 5px 4px 5px;
}

.TDgreen {
  background: #459283; 
}
.TDgreenGrad {
  background: url(../images/layout/gradients/bg_green.png) repeat-x; 
  font-weight: bold;
}

.footergreen {
  background: #346767 url(../images/layout/gradients/bg_green.png) repeat-x; 
  font-weight: bold;
  padding: 5px;
  display: block;
}
.date {
  height: 14px;
  background: url(../images/layout/gradients/bg_titles.jpg) repeat-x;
  padding: 3px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10px;

}
.downloadwrapper { width: 402px; margin: 0 auto ; }

.pdfdownloads { 
  width: 200px;
}
.pdfdownloads:hover {cursor:pointer;}
#downloadbrochButton { margin-top: 15px}
#downloadbrochButton, #contactformButton, #drukwerkscanButton {
  display: block;
  width: 228px;
  height: 30px;
  background: url(../images/layout/buttons/download_glass_button.png) no-repeat;
  padding: 10px 0px 2px 1px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  margin: 0 auto;
}
.downloadbutton {
  background: url(../images/layout/gradients/bg_green.png) repeat-x;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  padding: 2px;
}
.downloadbutton:hover {
  background: url(../images/layout/gradients/bg_off_green.gif) repeat-x;
  color: #FFFFFF;
  cursor: pointer;
}

#toelichting {margin-top: 10px;}

/**************************************************************************************
 LOGIN
**************************************************************************************/
.login, .loginShop{
  border: solid 1px #FFFFFF;
  background: #002F68 url(../images/layout/gradients/mainheader.gif) repeat-x;
  margin: 0 auto;
  padding: 6px;
  width: 225px;
}
.loginShop { margin-bottom: 15px; }
.loginTitle{
  float: left;
  width: 205px;
  background: url(../images/layout/gradients/bg_titles.jpg) repeat-x;
  padding: 3px;
  text-align: center;
  text-transform:uppercase;
  font-weight: bold;
  font-size:12px;
  border: solid 1px #FFFFFF;
}

ul#logout {margin:0px}
#logout li {
padding-left: 15px;
font-weight: bold;
}
#logout li a {
  background: url(../images/layout/gradients/middle_red_but.gif) repeat-x;
  color: #FFFFFF;
  border: 1px solid #C0C0C0;
  padding: 2px 5px 2px 5px;
  font-size:10px;
  text-transform: uppercase;
}

.cancel {background: url(../images/layout/gradients/middle_red_but.gif) repeat-x;}
.button, .cancel:hover, .cpNavlist li a {background: url(../images/layout/gradients/grad_button.gif) repeat-x;}
.cancel, .button, .cpNavlist li a {
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  font-size:10px;
  border: 1px solid #C0C0C0;
  padding: 2px 5px 2px 5px;
  color: #FFF;
}

/**************************************************************************************
 FOOTER
**************************************************************************************/
#footer {
  border-top: 1px solid #C0C0C0;
  padding-top: 0.7em;
  background: url(../images/layout/gradients/bg_footer.jpg) repeat-x;
  text-align: center;
  height: 2em;
  clear:both;
  width: 950px;
  position: fixed;
  bottom: 0;
}

/**************************************************************************************
 READON LINK
**************************************************************************************/
.button:hover {color: #FFF; border: 1px solid #FFF; cursor: pointer; background: url(../images/layout/gradients/middle_red_but.gif) repeat-x;}
.readon { list-style-type: none; color: #FFF; background: #0055BB; border: 1px solid #C0C0C0; padding: 1px 5px 2px 5px; white-space: nowrap; display:inline; float: right; margin-top: 0.5em; margin-right: 0px;}
.readon:hover {color: #FFF; background: #1C86EE; border: 1px solid #FF7700;}
.readon li a, .readon li a:hover { color:#FFF; cursor: pointer; outline: none;}
.readon li {
padding-left: 8px;
background-image: url(../images/layout/icons/orange-arrow.png);
background-repeat: no-repeat;
background-position: 0 0.35em;
}

table.confirmation { width: 100%}
table.confirmation th {background: url(../images/layout/gradients/bg_green.png) repeat-x; height:35px;text-transform: uppercase;}
table.confirmation td.confirmDel, table.confirmation td.success, table.newspaged td.newsitem, .TDblueGrad {background: #002F68 url(../images/layout/gradients/mainheader.gif) repeat-x; padding: 4px;}
ul.confirmDelete {list-style-type: none; margin: 0px;}
.confirmDelete li {display: inline;}

ul.cpNavlist {margin:0}
.cpNavlist {list-style-type: none; line-height: 2em; padding-left:15px;}
.cpNavlist li a:hover {
  background: url(../images/layout/gradients/middle_red_but.gif) repeat-x; 
  color: #FFF; 
  border: 1px solid #C0C0C0; 
  padding: 2px 5px 2px 5px;
  text-transform: uppercase;
  text-align: center;
}

.editornav, .tomtom {
  background: #003399 url(../images/layout/gradients/bg_titles.jpg) repeat-x;
  padding: 5px;
  margin-bottom: 10px;
  white-space: nowrap;
}

.navinfo {list-style: none; padding-left: 25px; margin-bottom: 6px; font-weight: bold;}
    
#terugNaar {
  width: 225px;
  padding-left: 20px;
  text-align:left;
  margin-bottom: 20px;
}

/**************************************************************************************
 BEGIN ADMIN NAVLIST
**************************************************************************************/
table.adminCPnav { margin-top: 10px; margin-left: 25px;}

#navlist, #keywords, #insert, #update, #addSales, #prevPage, #logout, #upload{margin-left: 0; padding-left: 0; list-style: none;}
.disabled {display:none}
#prevPage li {
padding-left: 25px;
margin-bottom: 0.2em;
background-image: url(../images/layout/icons/back.png);
background-repeat: no-repeat;
background-position: 0 .15em;
}

#navlist li {
padding-left: 25px;
background-image: url(../images/layout/icons/insert.png);
background-repeat: no-repeat;
background-position: 0 0.4em;
line-height: 2em;
}

#keywords li {
padding-left: 25px;
background-image: url(../images/layout/icons/key.png);
background-repeat: no-repeat;
background-position: 0 .15em;
}

#upload li {
padding-left: 25px;
background-image: url(../images/layout/icons/photos.png);
background-repeat: no-repeat;
background-position: 0 -0.01em;
}

#addSales li {
padding-left: 25px;
background-image: url(../images/layout/icons/add_user.png);
background-repeat: no-repeat;
background-position: 0 .15em;
}

#insert li {
padding-left: 25px;
margin-bottom: 0.5em;
background-image: url(../images/layout/icons/voeg_toe.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
#update li {
padding-left: 25px;
margin-bottom: 0.2em;
background-image: url(../images/layout/icons/update.png);
background-repeat: no-repeat;
background-position: 0 0;
}
/* END OF ADMIN NAVLIST
**************************************************************************************/

#deleteWarn { list-style-type: none; padding: 0px; margin:5px;}
#deleteWarn li {
margin-bottom: 0.2em;
background-image: url(../images/layout/icons/warning.png);
background-repeat: no-repeat;
background-position: 4em 0;
}  

#footer a {color: #FFF; text-decoration:none; outline: none;}
#footer a:hover {color: #FF7700; text-decoration:none; outline: none; border: none;}
#footer a:visited {color: #FF99FF; text-decoration:none; outline: none;}
.info {cursor: default;} 

#overDiv {
  border: 2px solid #FF0000;
  background-color:#FFFF66; 
  padding: 5px;
  position: absolute; 
  visibility: hidden; 
  z-index: 1000;
  color: #003399;
}

.form_error {border:2px solid #D70000; background-color:#FFD20F; color:#000; padding:2px 4px;}

table.error {
  text-transform: uppercase;
  width: 100%
}

table.error th {
  text-transform: uppercase;
  background: url(../images/layout/gradients/bg_red.png) repeat-x; 
  font-weight: bold; 
  font-size: 12px;
  text-align: center;
  padding: 5px;
}

table.error td {
  text-transform: none;
  background: #C0C0C0;
  color: #003399;
  font-size: small;
  padding: 5px;
}

input:focus, textarea:focus, input[type=text]:focus, input[type=password]:focus{border:1px solid #FF4500;}
label { display: inline;} 
input {display: block;}
input[type=checkbox], input[type=text], input[type=radio]{display: inline;}
select, input[type=password], input[type=text]{ padding: 3px; border: none;}
input[type=checkbox], input[type=radio] {margin-bottom: 0; background: none;}

#permissions {margin-bottom: 1em;}
.required, .important {color: #FF0000;}
.important {font-weight: bold}
ul.feedback {margin-bottom: 1em}

table.login td {width: 100%; border: 0px; padding: 0px;}

table.webform {border: none; border-collapse: collapse;}
table.webform td {border: none; padding: 2px; white-space: nowrap; text-align: left;}
table.webform th {background-image: url(../images/layout/gradients/bg_titles.jpg); font-weight: normal; padding: 2px;}
table.webform td.heading {text-decoration: none; background-image: url(../images/layout/gradients/bg_titles.jpg); font-weight: bold; padding: 2px; text-align: center;}

table.records {border: 1px solid #C0C0C0; border-collapse: collapse; width: 100%; text-decoration: none;}
table.records td.overzicht {border: 1px solid #C0C0C0; border-collapse: collapse; width: 100%; text-decoration: none; background-color:#C0C0C0;}
table.records td {border: 1px solid #C0C0C0; padding: 2px;}
table.records th {background-image: url(../images/layout/gradients/bg_titles.jpg); font-weight: bold; padding: 2px;} 
table.records td.vacature {border: 1px solid #C0C0C0; padding: 5px 5px 10px 5px;}

table.edit td {vertical-align: top; padding: 2px; white-space: nowrap;}
table.edit td label {margin-right: 0.5em; white-space: nowrap;}
table.edit td input,  table.edit td textarea, table.edit td select {margin-bottom: 5px; display: inline;}
table.edit td input[type=text] {border: 1px solid #C0C0C0; padding: 2px; white-space: nowrap;}

table.news {width: 100%; margin-bottom: 15px;}
table.news td {border: 1px solid #C0C0C0; padding: 5px 5px 10px 5px;}
table.news th {background-image: url(../images/layout/gradients/bg_titles.jpg); font-weight: bold; font-size: 10px; text-transform: uppercase; line-height: 14px; text-align: left;}
table.news td.heading {text-decoration:none; background-image:url(../images/layout/gradients/bg_titles.jpg); font-weight:bold; padding:2px; text-align: left;}
table.newspaged { width: 100%; margin-bottom: 30px;}
table.newspaged th, table.newspaged td.pagination, table.newspaged th.newstitle, table.news td.newsitem, table.news th {padding: 4px;}
table.newspaged th { background-image: url(../images/layout/gradients/bg_titles.jpg); font-weight: bold; }
table.newspaged td.pagination { background-image: url(../images/layout/gradients/bg_green.png); font-weight: normal; text-align: center; vertical-align: middle;}
table.newspaged th.newstitle { background-image: url(../images/layout/gradients/bg_green.png); font-weight: bold; text-align: left; vertical-align: middle;}

table.sales {width: 640px; border-collapse: collapse; text-align: left;}
table.sales th {border: 1px solid #003399; padding: 2px;}
table.sales th {background-color: #003399; font-weight: normal;}
table.sales td.heading { font-weight: bold;}
table.sales td.headingItalic { font-weight: bold; font-style:italic;}