/* CSS Document */
*:focus { outline: none; }

html,body { margin: 0; padding: 0; height: 100%; font-family: "Agrofont", "Trebuchet MS", Trebuchet, Geneva, Arial, sans-serif; color: #525e64; }

* { font-family: "Agrofont", "Trebuchet MS", Trebuchet, Geneva, Arial, sans-serif;  }

body { font-size: 11px; line-height: 19px; }
h1 { color: #00abc4; font-weight: normal; font-size: 26px; margin: 21px 0; line-height:28px; }
h2 { color: #00abc4; font-weight: normal; font-size: 16px; margin: 21px 0; }
h1 + h2 { margin-top: -10px;  }
a { color: #00abc4; text-decoration: none; }
a img { border: none; }
a:hover { text-decoration: underline; }
ul { color: #00abc4; margin-left: 12px; padding-left: 0; }
b { color: #00abc4; }
strong { font-weight: normal; color: #00abc4; }

hr { color:#00abc4; background:#00abc4; border: 0; margin: 20px 0; height: 1px;  } 

a.add { padding: 6px 0 4px 20px; background: url(/images/add.png) left center no-repeat; }
a.delete { padding: 6px 0 4px 20px; background: url(/images/delete.png) left center no-repeat; }

#tinymce { padding: 0 20px 0 20px; }

#container { width: 980px; min-height: 100%; height: auto !important; height: 100%; background: url('../images/containerBg.gif') repeat-y; margin: 0 auto; }

#verpakkingen { width: 465px; height:150px; display: block; }

#header { height: 320px; width: 980px; position: relative; background: url('../images/headerBg.gif') no-repeat; position: relative;  }
#branding { background: url('../images/branding.png') no-repeat; position: absolute; top: 50px; left:0; margin: 0; padding: 0; }
#branding a { text-indent: -999em; display: block; height: 52px; width: 400px; }

#language { position: absolute; right: 0; top: 70px; letter-spacing: 2px; }
#language a { text-decoration: none; font-size: 12px; margin: 0 5px; }
#language a:hover { color: #00abc4; text-decoration: underline; }

#menu { position: absolute; margin: 0; padding: 0; width: 150px; list-style: none; font-size: 12px; line-height: 24px; top: 134px; letter-spacing: 1px; }
#menu li {  text-align: right; padding-right: 12px; }
#menu li a { color: #525e64; text-decoration: none; }
#menu li a:hover { color: #00abc4; }
#menu li.selected a { color: #00abc4; }

#ad { position: absolute; margin: 0; padding: 0; width: 150px; top:320px; z-index:1; left: -1px; }
#ad a { text-decoration:none; bottom:0px; }

#content { margin-left: 400px; margin-bottom: 100px; width: 465px; position: relative; }
#content #editHeader{ position: absolute; top: 0; z-index: 10;}
#content #editHeader.hover{ background: #eee; padding: 20px; left: -21px; top: -21px; border:#00abc4 dashed 1px; }
#content #editHeaderForm .text { position: absolute; color: #00abc4; font-weight: normal; font-size: 26px; border: 1px solid #00abc4; padding: 5px; top: 11px; left: -7px; z-index: 1;  width: 465px; }
#content #editContent { position: absolute; top: 41px; min-height: 50px; width: 100%; height: auto !important; height: 50px; z-index: 20; padding-top: 20px; }
#content #editContent.hover {  background: #eee; border:#00abc4 dashed 1px; padding: 20px; left: -21px; width: 465px; top: 40px; }
#content #editContentForm { position: absolute; top: 45px; left: -20px; z-index: 1;  }
#content #editContent > h2 { margin-top: -10px; }
#content #editContent > p { margin-top: 0px; }

table { width: 100%; }
table th { text-align: left; font-weight: bold; color: #00abc4; vertical-align: top; width: 146px; padding: 5px 20px 5px 0; }
table tr.border th { border-bottom: 1px solid #9A9A9D; }
table td { vertical-align: top; padding: 5px 10px 5px 0; }
table td input.text { width: 100%; border: 1px solid #9A9A9D; }
table td textarea { width: 100%; height: 150px; font-size: 11px; border: 1px solid #9A9A9D; }
table td textarea.small { width: 100%; height: 75px; font-size: 11px; border: 1px solid #9A9A9D; }

#content table.producten { font-size: 12px; letter-spacing: 1px; color: #525E64; margin-top: 3px; line-height: 24px; }
#content table.producten a { color: #525E64; }

#content div.c{ display: none; }
#content div.show { display: block; }
#content #productmenu { margin: 10px 0 20px 0; padding: 0; list-style: none; width: 580px; height: 30px; }
#content #productmenu li { float: left; padding: 0 35px; font-size: 13px; line-height: 30px; border-right: 1px solid #00abc4; cursor: pointer; }
#content #productmenu li.selected { background:#00abc4; color: #FFF; }
#content #productmenu li.last { border-right: none; }

#submenuBg { position: absolute;  padding: 10px 0 30px 0; top: 320px; left: 0; background: #FFF; width: 400px; }
#submenu { margin: 0; padding: 0; margin-left: 149px; list-style: none; font-size: 12px; line-height: 24px; letter-spacing: 1px; }
#submenu li { }
#submenu li a { color: #525e64; text-decoration: none; }
#submenu li a:hover { color: #00abc4; }
#submenu li.selected a { color: #00abc4; }

#options { margin-left: 149px; padding-left: 12px; padding-top: 6px; margin-top: 30px; border-left: 1px solid #525e64;  }

#sfeer1 { position: relative; position: absolute; height: 155px; width: 249px; overflow: hidden; top: 142px; left: 150px; }
#sfeer1 img { position: absolute; z-index: 1; }
#sfeer1 .overlay { background:#00abc4; position: absolute; top: 0; left: 0; height: 155px; width: 249px; overflow: hidden; z-index: 2; }

#sfeer2 { position: relative; position: absolute; height: 155px; overflow: hidden; top: 142px; left: 400px; width: 580px; }
#sfeer2 img { position: absolute; z-index: 1; }
#sfeer2 .overlay { background:#00abc4; position: absolute; top: 0; left: 0; height: 155px; width: 580px; overflow: hidden; z-index: 2; }

#sfeer1 form,
#sfeer2 form { position: absolute; top: 0; left: 0; padding: 0; text-align: center; width: 249px; overflow: hidden; z-index: 3; }
#sfeer1 form .submit,
#sfeer2 form .submit{ margin-top: 20px; background: #00abc4; color: #FFF; width: 180px; height: 25px; border: none; }

#sfeer1 form div,
#sfeer2 form div{ line-height: 30px; color: #FFF; background: #9A9A9D; margin-bottom: 30px; font-size: 14px; font-weight: bold; }

#sfeer2 .producten { width: 580px; background: #00abc4; padding: 20px 0; height: 115px; }
#sfeer2 .producten h1, #sfeer2 .producten h2 { color: #FFF; margin: 0 0 0 20px; line-height: 30px; }

#sfeer2 .product { width: 580px; background: #9A9A9D; padding: 20px 0; height: 115px; position: relative; }
#sfeer2 .product h1, #sfeer2 .product h2 { color: #FFF; margin: 0 0 0 20px; line-height: 30px; }
#sfeer2 .product a { background: url('/images/pijltje.gif') left center no-repeat; padding-left: 20px; color: #FFF; text-decoration: none; position: absolute; left: 20px; bottom: 20px; }


#admin { position: absolute; top: 0; width: 100%; background: #00abc4; }
#admin div { background: #00abc4; width: 980px; margin: 0 auto; line-height: 25px; height: 25px; position: relative; color: #FFF;  }
#admin .left { position: absolute; left: 10px;width: auto; }
#admin .right { position: absolute; right: 10px; width: auto; }
#admin a { color: #FFF; text-decoration: none; border-bottom: 1px solid #FFF; }
#admin a:hover { color: #FFF; text-decoration: none; border-bottom: 1px dotted #FFF; }
#admin img {padding:0; margin:0; margin:0 0 8px;}