@import 'forms.css';

/*
Colorscheme:
Teal (light to dark): #98d0c7, #52b8a3, #308172
Gray: #7e797d

*/

* {
  padding: 0;
  margin: 0;
}

body {
  font: 8pt/1.4 Verdana, sans-serif;
  color: #736870;
}

.hide { display: none !important; }

#wrapper {
  width: 741px;
  margin: 0 auto;
  padding: 0 8px;
  background: white url(../img/body_bg.gif) top center repeat-y;
}

#wrapper-bottom-border {
  width: 741px;
  height: 35px;
  margin: 0 auto 1em auto;
  padding: 0 8px;
  background: #84ccbe url(../img/footer.gif);
  text-align: center;
  line-height: 35px;
  color: white;
}

a {
  color: #55b8a6;
}

a:hover {
  color: #2e7f70;
}

img {
  border: none;
}

#header {
  position: relative;
  height: 165px; /* 165px (logo height) */
}

h1 {
  width: 134px;
  height: 165px;
}

h1 img {
  /* float: left; */
}

h2 {
  font-size: 1.8em;
}

#header h2 {
  position: absolute;
  top: 100px;
  left: 160px;
}

/* ====================================
 * Navigation
 * ==================================== */

#nav-wrapper {
  width: 607px; /* 741px - 134px - (padding nav-wrapper) */
  position: absolute;
  top: 0;
  left: 134px;
  border-bottom: 1px solid #bfb9bd;
}

#nav {
  height: 16px;
  margin: 10px;
  list-style: none;
}

#nav li {
  display: inline;
}

#nav li a {
  display: block;
  position: absolute;
  top: 10px;
  width: 80px;
  height: 16px;
  /* Done on purpose, specifity */
  background-image: url(../img/nav.gif);
  background-repeat: no-repeat;
  outline: none;
}

#nav-home a    { left: 10px;  background-position: 0 0; }
#nav-overons a { left: 90px;  background-position: -80px 0; }
#nav-aanbod a  { left: 170px; background-position: -160px 0; }
#nav-contact a { left: 170px;/*250px*/ background-position: -240px 0; }

#nav-home a:hover, #nav-home.active a       { background-position: 0 -16px !important; }
#nav-overons a:hover, #nav-overons.active a { background-position: -80px -16px !important; }
#nav-aanbod a:hover,  #nav-aanbod.active a  { background-position: -160px -16px !important; }
#nav-contact a:hover, #nav-contact.active a { background-position: -240px -16px !important; }

/* ====================================
 * Content
 * ==================================== */ 

#content-wrapper {
  padding: 1.5em;
  /* border-bottom: 35px solid #84ccbe; */
}

#content-wrapper p {
  margin: 1em 0;
}

#copyright {
  padding-bottom: 20px;
  font-size: .8em;
  text-align: center;
}

/* ====================================
 * Admin
 * ==================================== */

#logged-in-notice {
   position: absolute;
   z-index: 100;
   top: 4em;
   right: 1em;
   padding: 8px;
   font-weight: bold;
   font-size: .9em;
   text-align: right;
   background: #F9F9F9;
   border: 1px solid #CCC;
 }

form.snippet-editor textarea {
  width: 300px;
  height: 100px;
  border: 1px solid teal;
  padding: 2px;
}

a.admin_action {
  position: absolute;
  font-weight: bold;
  padding:2px;
  border: 1px solid maroon;
  color: maroon;
  background: white;
}

a.admin_action:hover {
  color: black;
  border-color: black;
}

/* ====================================
 * Misc.
 * ==================================== */

#soft-error {
  background: #55B8A6;
  color: white;
  margin: 1em;
  padding: 1em;
  font-weight: bold;
}

#soft-error ol, ul {
  list-style-position: inside; 
}

#redirect-message-wrapper {
  font-family: Verdana;
  font-size: 12px;
  width: 50em;
  margin: 10em auto 0 auto;
  border: 1px solid #bfb9bd;
}

#redirect-message-wrapper h2 {
  padding: .5em;
  font-size: 1.4em;
  border-bottom: 1px solid #bfb9bd;
}

#redirect-message {
  padding: 1em;
}

#redirect-message-footnote {
  padding: 0 1em;
  color: #BFB9BD;
  font-size: .8em;
}

.error-message {
  margin: 1em;
  padding: .5em;
  font-weight: bold;
  border: 1px solid #bfb9bd;
}