/* SCREEN.CSS
   This is where all styles for on-screen media are declaired

   --------------------------------------------------------------------------------------------------------------------------
   FILE INFO
   Revision number:  1.1.1
   Last updated:     2008/10/14
   Last updated by:  Matt Wilcox
   ----------------------------------------------------------------------------------------------------------------------- */

/* =global_reset | based on http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
   ----------------------------------------------------------------------------------------------------------------------- */

   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
   del, dfn, em, font, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
   b, u, i, center,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0; padding: 0; border: 0; outline: 0;
     font-size: 100%; vertical-align: baseline; background: transparent; }
   body {
     line-height: 1; }
   ol, ul {
     list-style: none; }
   blockquote, q {
     quotes: none; }

   /* remember to define focus styles! */
   li:focus, a:focus {
     outline: 0; }

   /* remember to highlight inserts somehow! */
   ins {
     text-decoration: none; }
   del {
     text-decoration: line-through; }

   /* tables still need 'cellspacing="0"' in the markup */
   table {
     border-collapse: collapse; border-spacing: 0; }

/* =typography | based on http://alistapart.com/articles/settingtypeontheweb/
                          http://24ways.org/2006/compose-to-a-vertical-rhythm/

    NOTE: found that margin-top applied to everything is be a pain - it often messes up layout and requires jumping through
          hoops to fix, so have stopped doing this as a default and now add top margin manually when required instead.
    NOTE: using px for type is bad for people using IE6, but good for my brain. IE6 is dying, so I think that's OK. Feel free
          to tut if you're a purist. I'm a pragmatist.
   ----------------------------------------------------------------------------------------------------------------------- */
   body {
     font : 75%/1.5 Verdana, Helvetica, Ariel, Verdana, sans-serif; color : #fff; }
   html > body {
     font-size : 12px; }
   div, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   address, img, dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
     margin-bottom : 1.5em; }
   h1, h2, h3, h4, h5, h6 {
     font-family : "Comic Sans MS", Georgia, "Times New Roman", serif; font-weight : bold; color : #fff; text-shadow : rgba(0,0,0,.75) 0 1px 2px; }
   h1,
   .home h2 { font-size : 24px; line-height: 36px; margin-bottom: 18px; font-weight : normal; }
   h2 { font-size : 20px; line-height: 36px; margin-bottom: 18px; font-weight : normal; }
   h3, h4, h5, h6 {
     font-size : 18px; line-height: 18px; margin-bottom: 18px;
     font-weight : normal; }

/* =design | now the browser reset and basic typographic layout is done, lets get designing
   ----------------------------------------------------------------------------------------------------------------------- */

/* =html =body */
   html {
     background : #628328 url(../images/html.jpg) 50% 100% no-repeat; }
   body {
     background : url(../images/sky-1.jpg) 0 0 repeat-x; }

/* =h1 */
   h1 {  }

/* =h2 */
   #nav_main h2 {
     display : none; }
   #site_info h2 {
     display : none; }
   h2.endorsement {
     display : none; }

   .home h2 {
     font-size : 28px; /*width : 370px;*/ }

/* =h3 */
   .video h3 {
     position : absolute;
     margin-top : -2.2em;
     font-size : 22px; }

/* =h4 */
   h4 {  }

/* =p */
   p.accessibility {
     position : absolute;
     margin : -3.5em 0 0 0;
     z-index : 2; }

   p.nav_location {
     position : absolute; top : 445px; left : -10px;
     display : block; width : 244px; height : 96px;
     background : url(../images/wood.png) 0 0 no-repeat; z-index : 4; font : 16px/1.5 "Comic Sans MS"; }

   .attributed p {
     margin-bottom : 0; }

   #content_main > h2 + p,
   #content_main > h1 + p,
   #content_main > h2 + a + p {
     font-size : 1.333em; line-height : 1.125em; margin : .929em 0 2.25em 0; }

   label p.error {
     padding : .5em; color : #fff;
     background : #c00; text-align : left; }

   p.quote {
     font-family : Georgia, "Time New Roman", serif;  font-size : 18px; }
   p.author {
     text-align : right; color : #000; }
   .site_quote p.quote {
     color : #666; font-size : 12px; font-weight : bold; }
   #content_main blockquote.site_quote p.author {
     color : #000; padding : 0; background : none; }

   p#kids_entrance {
     position : absolute; left : 670px;
     display : block; width : 302px; height : 288px;
     background : url(../images/kids_entrance.png) 0 0 no-repeat; }

   p.tagline {
     margin-top : -1.4em;
     text-shadow : rgba(0,0,0,.75) 0 1px 2px; }

   #content_main blockquote p {
     padding : 0 10px 12px 10px; margin : 0; }
   #content_main blockquote p:last-child {
     background : url(../images/quote-bottom.gif) 0 100% no-repeat; }

/* =blockquote */
   blockquote {
     clear : both;
     margin : 1em; }

   #content_main blockquote {
     clear : none; float : left; width : 220px; padding : 10px 0 0 80px;
     background : url(../images/fd1-l.png) 0 0 no-repeat; color : #666; }

   #content_main blockquote.site_quote {
     margin : 0; padding : 0;
     background-image : none; }

   blockquote.testimonial {
     border-bottom : 1px solid #6E8D39; margin-bottom : 2em; }

   #content_main blockquote.site_quote {
     position : absolute; top : 20px; right : 130px;
     width : 300px;
     color : #000; }

/* =em =strong =del =ins =abbr =acronym =code =hr */
   em          { font-style : italic; }
   strong      { font-weight : bold; }
   del         { text-decoration : line-through; }
   ins         { text-decoration : none; color : #006; }
   del[title],
   ins[title]  { cursor : help; }
   acronym,
   abbr        { text-decoration : none; border-bottom : none; font-style : italic; cursor : help; }
   code        { font-family : dialogue, 'Courier New', courier, serif; }
   sup         { vertical-align : super; font-size : .8333em; }
   sub         { vertical-align : sub; }
   #content_main hr {
     display : block; width : 675px; height : 14px; border : 0;
     background : url(../images/hr-1.gif) 0 0 no-repeat; }

/* =address */
   address {  }

/* =dl =dt =dd */
   dl {  }
   dt {
     margin-bottom : 0;
     font-weight : bold; font-style : italic; }
   dd {
     margin-top : 0;
      }

/* =ul */
   #content ul {
     margin-left : 1em;
     list-style : disc outside; }
   #nav_main ul {
     margin : 0; }
   #nav_main ul ul {
     margin-left : 0; }

   #content ul.nav_internal {
     margin : 0; }

   #content_main ul {
     clear : left;
     margin-left : 0; }

/* =ol */
   #content ol {
     margin-left : 1.6em;
     list-style : decimal outside; }

/* =li */
   li {
     margin : .5em 0; }
   .nav_internal li {
     display : inline; padding : 0;
     list-style-type : none; list-style-position : outside; }

   #nav_main li li {
     border-bottom : 1px dashed #C9E0F1; margin : 0; padding : .5em 0; }
   #nav_main li li:last-child {
     border-bottom : 0; }

   #content_main ul:not(.nav_internal) li {
     padding-left : 34px; margin : 1em 0;
     list-style-type : none; list-style-position : outside; background : url(../images/li-1.gif) 14px 0 no-repeat; }
   #content_main ul:not(.nav_internal) li:nth-child(2n+2) {
     background : url(../images/li-2.gif) 18px 0 no-repeat; }


/* =img */
   img,
   img a { border : none; }
   .attributed img {
     margin : 0; }
  img.graph { 
    cursor: pointer;}

/* =hr */
   hr { display : none; }

/* =a */
   a:link    { color : #99f; text-decoration : none; }
   a:visited { color : #99f; text-decoration : none; }
   a:hover   { text-decoration : underline; }
   a:focus   { background-color : #ff9; color : #333; }
   a:active  { background-color : #ff6; color : #000; outline : none; }
   a:target  { background-color : #ff6; }

   p.accessibility a {
     margin : 0; padding : 0; line-height : 1em; }
   p.accessibility a:focus {
     position : absolute; left : 1em;
     margin-top : 2.5em;
     background-color : #ffff99; }

   p.nav_location a {
     display : block; width : 206px; height : 81px; padding : 15px 14px 0 24px;
     color : #fff; }

   .nav_internal li a {
     float : left;
     display : block; width : 128px; height : 46px; padding : 10px 8px 0 8px;
     background : #6e8d39 url(../images/nav_internal-a.png) 0 0 no-repeat; text-align : center; color : #fff; font : 14px Verdana, Georgia, "Times New Roman", serif; font-weight : normal; text-shadow : rgba(0,0,0,.5) 0 1px 1px; }
   .nav_internal li a.selected {
     background : #567222 url(../images/nav_internal-a_selected.png) 0 0 no-repeat; }

   .Ergebnisse .nav_internal li a {
     width : 104px; background-image : url(../images/evidence-nav_internal-a.png);}
   .Ergebnisse .nav_internal li a.selected {
     width : 104px; background-image : url(../images/evidence-nav_internal-a_selected.png);}

   #nav_main > ul > li > a {
     display : table-cell; width : 188px; height : 49px; margin-bottom : 6px; padding : 0 10px;
     background : url(../images/main_nav-a.gif) 0 0 no-repeat; color : #71861b;
     font-size : 12px; line-height : 1.2em; font-weight : bold; font-family : Verdana, "Comic Sans MS", Georgia, "Times New Roman", serif; vertical-align : middle; text-shadow : rgba(255,255,255,1) 0 1px 2px; }
   #nav_main a:hover,
   #nav_main a:focus {
     background-position : 0 -49px; }
   #nav_main li li a {
     display : block; padding : 4px 10px;
     color : #567222; }

   #site_context a {
     display : block; width : 240px; height : 245px;
     text-indent : -999em; overflow : hidden; }
   #site_context a:focus {
     background-color : transparent; }

   p#kids_entrance a {
     display : block; width : 302px; height : 288px; }

/* =table */
   table {
     width : 100%; border : 1px solid #ddd; }

/* =caption */
   caption {  }

/* =thead */
   thead {
     text-align : left; background : #ddd; }

/* =tfoot */
   tfoot {
     background-color : #ddd; }

/* =tbody */
   tbody {  }

/* =tr */
   tbody tr:hover { background-color : #f6f6f6; }

/* =th */
   th {
     font-weight : bold; padding : 2px; }

/* =td*/
   td {
     border : 1px dotted #ddd; padding : 2px; }

/* =form */
   form {
     position : relative;
     width : 100%;
     overflow : hidden; }

   #nav_main form {
     margin : 0; }

/* =fieldset */
   fieldset {  }

/* =legend */
   legend {
     margin : 0; }

   #nav_main legend {
     display : none; }

/* =label */
   label {
     position : relative; /* so we can absolutely position errors */
     display : block;
     overflow : hidden; /* so no collapsing float issues */ }

/* =input */
   input[type="text"],
   input[type="password"],
   textarea {
     border : 1px solid #999; }
   input[type="text"]:focus,
   input[type="password"]:focus,
   textarea:focus {
     background-color : #ffd; }

   label input {
     width : 97%; }
   .boolean input {
     width : auto; margin-right : .5em; }

/* =textarea */
    textarea {
      width : 99%; height : 8em; }

/* =select */
   label select {
     width : 100%; }
   select:focus {
     background-color : #ff9; }

/* =div */
   #container {
     position : relative;
     width : 970px; margin : 0 auto; }
   #fancy {
     background : url(../images/header-1.png) 50% 0% repeat-x; }
   #page_context,
   #site_context {
      }
   #nav_main {
     position : absolute; top : 531px; left : 0;
     display : block; width : 208px; margin : 0; padding : 0 10px 10px 6px;
     background : url(../images/nav_main.gif) 0 100%; }
   #content {
     margin-top : 210px; padding-bottom : 280px; }
   #content_main {
     margin-left : 250px; width : 720px; }

   .home div.video {
     float : right;
     width : 308px; height : 253px; padding : 66px 0 0 25px; margin : 0 0 0 1em;
     background : url(../images/videoplayer.jpg) 0 0 no-repeat; }

   .page #inner {
     padding : 20px; min-height : 500px;
     background : #577223 url(../images/inner.png) 0 0 no-repeat; }

/* =span */
   label span {
     display : block; }
   label.boolean span {
     display : inline; }

   blockquote.site_quote span {
     font-weight : bold; }

   p#kids_entrance a span {
     position : absolute; top : 34px; left : 136px;
     font : 28px/1.2 "Comic Sans MS", Georgia, "Times New Roman", sans; font-weight : bold; }

/* =layout-classes */
   .float-left {
     float : left;
     margin-right : 30px; }
   .float-right {
     float : right;
     margin-left : 20px; }
   .float-left.last {
     margin-right : 0; }
   .clear {
     clear : both; }

   /* full width portions */
   .one-third {
     width : 300px; text-align : justify; /* text align to show column bounds */ }
   .two-thirds {
     width : 630px; text-align : justify; /* text align to show column bounds */ }
   .half {
     width : 465px; text-align : justify; /* text align to show column bounds */ }

   /* portions inside a two-third parent portion */
   .two-thirds .one-third {
     width : 190px; }
   .two-thirds .two-thirds {
     width : 410px; }

/* =display-classes */
   .attributed {
     padding : 9px; border : 1px solid #eee;
     background-color : #f6f6f6; }

/* homepage slider */
#slider {
  width: 720px;
  margin: 0 auto;
  position: relative;
}

.scroll {
  /*height: 500px; */
  overflow: auto;
  position: relative; /* fix for IE to respect overflow */
  clear: left;
  background-color: #567222; }

.scroll_container div.panel {
  padding: 20px;
  /*height: 210px;*/
  width: 680px; /* change to 560px if not using JS to remove rh.scroll */
  float: left; position: relative;
  background : transparent url(../images/tabs-inner-1.png) no-repeat scroll 0 0; }

.scroll_container div.panel:first-child {
  background-image : url(../images/tabs-inner-2.png); }

.evidence .scroll_container div.panel {
  background : transparent url(../images/tabs-inner-4.png) no-repeat scroll 0 0; }
.evidence .scroll_container div.panel:first-child {
  background-image : url(../images/tabs-inner-2.png); }
.evidence .scroll_container div.panel:last-child {
  background-image : url(../images/tabs-inner-5.png); }

div#nav_location {
  position : absolute; }

/* recent edits */
#nav_location ul {
  margin : 0; }
#nav_location li {
  display : inline; list-style-type : none; list-style-position : outside; }
#nav_location li a {
  float : left;
  display : block; width : 29px; height : 29px; margin-right : 4px;
  background : url(../images/languages.jpg) 0 0 no-repeat; text-indent : -999em; overflow : hidden; }
#nav_location li#lang_2 a {
  background-position : -30px 0; }
#nav_location li#lang_3 a {
  background-position : -90px 0; }
#nav_location li#lang_4 a {
  background-position : -120px 0; }
#nav_location li#lang_5 a {
  background-position : -180px 0; }
#nav_location li#lang_6 a {
  background-position : -60px 0; }