/* ---------------------------------------------------------- */
/* HOBEON stylesheet */
/* ---------------------------------------------------------- */


/* ---------------------------------------------------------- */
/* HTML selectors */
/*MX added begin to make container scale with window*/
/* commented backslash hack \*/ 
html, body{height:100%;} 
/* end hack */
html,body {margin:0;padding:0}
* html #container{height:100%;}
* html #wrapper{height:100%;}

/*MX added end*/
body        { margin: 70px 0 0px 0; padding: 0; font-family: Frutiger, Arial, Helvetica, sans-serif; text-align: center; background: #000 url(../gfx/redback.gif) repeat-x 0 -100px;}
h1          { margin: 0; padding: 0; background: #fff; }
.arttitle { margin: 0; padding: 0; background:transparent;}
.printbutton {font-size: 1.0 em; }


h1 img      { margin: 4px auto; background: #fff;}
h2          { }
p           {  }
a           { text-decoration: none; color: #e42d27;}
a:hover     { text-decoration: none; color: #000;}
img         { border: 0; }
form, 
fieldset, 
input       { margin: 0; padding: 0; }
/* the pre tag often needs to be wrapped. de code below wil do this. Also works in Safari. */
pre {
  white-space: pre; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* IE 5.5+ */
}


/* ---------------------------------------------------------- */
/* site layout */

#container                              { margin: 0 auto;   border-bottom: 1px solid #fff;  border-left: 1px solid #fff; border-right: 1px solid #fff; border-top: 1px solid #fff; padding: 3px; padding-top: 5px; text-align: left; font-size: 75%; width: 974px; background: #000; min-height:100%}
  #siteMenu                             { margin-bottom: 4px; height: 20px; font-size: 1.0em; font-weight: bold; background: #fff; }
    #siteMenu a                         { float: right; margin: 0 10px 0 30px; padding: 0 8px; height: 20px; line-height: 20px; color: #000; }
    #siteMenu a:hover                   { color: #fff; background: #e42d27; }
    #siteMenu a.active                  { color: #fff; background: #e42d27; }
    a#homelink                          { float: left; }
    #siteMenu input                     { float: right; padding: 0 3px; height: 20px; color: #e42d27; border: 2px solid #e42d27;}
    html>body #siteMenu input           { height: 16px; }
    #siteMenu input.searchsubmitbutton  { border: 0; height: 20px; color: #fff !important; background: #000; font-weight: bold; }
  #navigation                           { float: left; margin: 0; padding: 0; width: 340px; font-size: 0.90em; font-weight: bold; position: relative; }
    #logo                               { margin: 0; padding: 0; text-align: center; background: #fff; }
    #logo img                           { margin: 4px auto; }
    #contentMenu                        { position: absolute; top: 258px; width: 340px; }
      #navigation ul                    { margin: 0; padding: 0; list-style: none outside;  }
      #navigation ul#topMenu            { position: relative; top: 0; left: 0; width: 340px;  z-index: 10; }
        #navigation li                  { line-height: 20px; }
          #navigation li a              { width: 169px; padding: 0 0 0 20px; line-height: 20px; font-weight: bold;  }
          html>body #navigation li a    { display: block; width: 148px; }
          #navigation ul ul             { background: transparent none; overflow: hidden; }
            #navigation li li a         { padding: 0 0 0 35px; width: 169px; line-height: 20px; font-weight: normal; }
            html>body #navigation li li a                   { width: 133px; }
              #navigation ul#subMenu                        { position: absolute; top: 0; left: 169px; width: 171px; overflow: hidden; z-index: 20; }
              html>body #navigation ul#subMenu              { left: 170px; width: 169px; }
                #navigation ul#subMenu li a                 { padding: 0 0 0 20px; }
                html>body #navigation ul#subMenu li a       { width: 159px; }
                  #navigation ul#subMenu li li a            { padding: 0 0 0 35px; }
                  html>body #navigation ul#subMenu li li a  { width: 149px; }
  #content                              { float: left; margin: 0; padding: 10px 20px; width: 620px; font-size: 1em;}
  html>body #content                    { width: 594px; color: #fff; }
  #content table.namen                  { margin: 0; border: 0; padding: 5px; width: 100%; text-align: left;}
  #content table.namen .on              { color: #fff; background: #e42d27 none !important; } 
  #content table.namen .off             { color: #000; background: transparent none !important; } 
  #content table.namen a                { font-weight: bold; color: #000;}
  #content table.namen a .cv            {color: #e42d27; }
  #content table.namen .on .rij         {color: #fff; text-align:left;}

  

/* ---------------------------------------------------------- */
/* pagehandling */

.clr { clear: both; display: block; margin: 0; padding: 0; width: 100%; height: 1px; font-size: 1px; line-height: 1px; visibility: hidden;}
.closed { display: none; }
.open { display: block; }
#topMenu.closed { display: block; }

.off,
.on { border-right: 1px solid #fff; border-bottom: 1px solid #fff; border-left: 1px solid #fff; height: 19px !important; line-height: 19px !important; }
.off:hover,
.on:hover { color: #000 !important; background-color: #fff !important; background-image: url(../gfx/folder-black.gif) !important; }

ul .off { color: #fff !important; background-color: #000; background-image: url(../gfx/arrowhead-white.gif) !important; background-repeat: no-repeat; background-position: 0 0; }
ul .on { color: #e42d27 !important; background-color: #000; background-image: url(../gfx/folder-red.gif) !important; background-repeat: no-repeat; background-position: 0 0; }
ul ul .off { color: #fff !important; background-color: #000; background-image: url(../gfx/arrowhead-white.gif) !important; background-repeat: no-repeat; background-position: 15px 0; }
ul ul .on { color: #fff !important; background-color: #e42d27; background-image: url(../gfx/folder-white.gif) !important; background-repeat: no-repeat; background-position: 15px 0; }

ul#subMenu li ul.open li a.on {display:table;   font-weight: bold !important; color: #fff !important; }
ul#subMenu li ul.open li a.off {display:table;   color: #e42d27 !important; }
#navigation a.off {display:table; color: #fff; }
#navigation a.on {display:table;}
#navigation a.off:hover {display:table; color: #000 !important; background-color: #fff !important; background-image:url(../gfx/arrowhead-black.gif); }


.folderoff,
.folderon { border-right: 1px solid #fff; border-bottom: 1px solid #fff; border-left: 1px solid #fff; height: 19px !important; line-height: 19px !important; }
.folderoff:hover,
.folderon:hover { color: #000 !important; background-color: #fff !important; background-image: url(../gfx/folder-black.gif) !important; }

ul .folderoff {color: #fff !important; background-color: #000 !important; background-image: url(../gfx/arrowhead-white.gif) !important; background-repeat: no-repeat; background-position: 0 0;}
ul .folderon { color: #e42d27 !important; background-color: #000 !important; background-image: url(../gfx/folder-red.gif) !important; background-repeat: no-repeat; background-position: 0 0;}
html>body ul .folderoff,
html>body ul .folderon {display:table;  width: 148px !important; }


ul ul .folderoff {color: #fff !important; background-color: #000 !important; background-image: url(../gfx/arrowhead-white.gif) !important; background-repeat: no-repeat; background-position: 15px 0;}
ul ul .folderon {color: #fff !important; background-color: #e42d27 !important; background-image: url(../gfx/folder-white.gif) !important; background-repeat: no-repeat; background-position: 15px 0;}
html>body ul ul .folderoff,
html>body ul ul .folderon {display:table;  width: 133px !important; }

ul#subMenu .folderoff,
ul#subMenu .folderon { border-left: 0px solid #fff !important; }
ul#subMenu .off,
ul#subMenu .on { border-left: 0px solid #fff !important; }

ul#subMenu .folderoff { color: #fff !important; background-color: #e42d27 !important; background-image: url(../gfx/arrowhead-white.gif) !important; background-repeat: no-repeat; background-position: 0 0; }
ul#subMenu .folderon { color: #000 !important; background-color: #fff !important; background-image: url(../gfx/folder-black.gif) !important; background-repeat: no-repeat; background-position: 0 0; } 
ul .subMenuopen {font-style: italic; display: block;}
ul .subMenuclosed {font-style: italic; display: none;}
.folderon {font-style: normal;}
.folderoff {font-style: normal;}
html>body ul#subMenu .folderoff,
html>body ul#subMenu .folderon {display:table;  width: 148px !important; }

ul#subMenu .off {color: #fff !important; background-color: #e42d27 !important; background-image: url(../gfx/arrowhead-white.gif) !important; background-repeat: no-repeat; background-position: 0 0;}
ul#subMenu .on { color: #000 !important; background-color: #fff !important; background-image: url(../gfx/folder-black.gif) !important; background-repeat: no-repeat; background-position: 0 0; } 
html>body ul#subMenu .off,
html>body ul#subMenu .on {display:table;  width: 148px !important; }

ul#subMenu ul .off { color: #fff !important; background-color: #000 !important; background-image: url(../gfx/arrowhead-white.gif) !important; background-repeat: no-repeat; background-position: 15px 0; }
ul#subMenu ul .on { color: #fff !important; background-color: #000 !important; background-image: url(../gfx/folder-white.gif) !important; background-repeat: no-repeat; background-position: 15px 0; } 
html>body ul#subMenu ul .off,
html>body ul#subMenu ul .on {display:table;  width: 133px !important; }

/* ---------------------------------------------------------- */
/* homepage */

#homePage .single #logo { border: 0; height: 258px; text-indent: -2000px; background: #fff url(../gfx/logo_hobeon.jpg) no-repeat 50% 50%; overflow: hidden; }
#homePage .intro { color: #fff; width: 520px; margin-top: 0; font-size: 1em; }
#homePage #content { color: #fff; font-size: 1.3em;  font-weight: bold;}
#homePage #content #main {margin-left: 10px;}
#homePage #content #main .title {color: #fff;  font-size: 2.0em;  line-height: 30px}
#homePage #content #main .summary {color: #fff;  font-size: 1.3em;  font-weight: bold; line-height: 30px}
#homePage #content #main .maintext {color: #e42d27; font-size: 1.3em;  font-weight: bold; line-height: 30px}
#homePage #content h1 { margin: -10px -20px; padding: 0; width: 620px; }
html>body#homePage #content h1 { width: 630px; }

#homePage #content .rssFeed { margin-left:10px; font-weight: normal; }
#homePage #content .rssFeed h2 { font-size: 1em; }
#homePage #content .rssFeed .rssItem { margin-bottom:10px; font-size: 1em; }
#homePage #content .rssFeed .rssItem a:hover { color: #FFF; }
#homePage #content .rssFeed .rssItem .title { font-size: 0.8em; }
#homePage #content .rssFeed .rssItem .summary { font-size: 0.8em; }

#homePage #newsPanel {position: relative; top: 0px; left: 168px; z-index: 200;}
html>body#homePage #newsPanel {left: 169px;}
#homePage #newsPanel ul {position: relative; width: 160px; border-right: 1px solid #fff; border-left: 1px solid #fff;background-color: #e42d27 !important; }
#homePage #newsPanel ul h3 {padding: 0px 0px 0px 10px; color: #fff; font-size: 110%; margin: 0px 0px 19px 0px;}
#homePage #newsPanel ul li {border-bottom: 1px solid #fff;}
#homePage #newsPanel ul li a{color: #fff; padding: 1px 5px 2px 10px; line-height: 16px !important; font-weight: normal;}
#homePage #newsPanel ul li a:hover {text-decoration: underline;}

/* ---------------------------------------------------------- */
/* infoPage */

#infoPage .intro { color: #fff; width: 520px; margin-top: 10px; font-size: 1em; }
#infoPage #wrapper { background: transparent url(../gfx/contentback.gif) repeat-y -2px 0; min-height:100%} 

#infoPage #content { color: #000; }
#infoPage #content .summary {font-weight: bold;}
#infoPage #content h1 {color: #e42d27; font-size: 1.5em;}

#infoPage #content th,
#infoPage #content td { color: #000; font-size: 12px; }

.single { padding: 0; height: auto; background: #fff; }
.multiple { padding: 5px 0 2px 5px; height: 254px; background: #fff; width: 339px; display:table}
.multiple #logo { float: left; border: 0; width: 168px; height: 125px; text-indent: 0 !important; background: #fff; overflow: hidden; }
.multiple .imageholder { padding: 1px 1px 1px 1px;}
.contact { color: #e42d27}

/* form segments */
.labelField {  font-weight: bold; float: left; padding: 0 0 0 0; width: 40%; background: transparent url(../gfx/label.gif) no-repeat right top; }
.required { background: transparent url(../gfx/required.gif) no-repeat right top; }
.fullField { float: left; padding: 0 0 1px 0;width: 60%; }
.oneThirdField { float: left; margin-right: 1%; padding: 0 0 1px 0; width: 19%; }
.twoThirdsField { float: left; padding: 0 0 1px 0; width: 40%; }
.dayField  { float: left; padding: 0 0 1px 0; width: 15%; }
.monthField  { float: left; padding: 0 0 1px 0; width: 15%; }
.yearField  { float: left; width: 20%; }

.contact form { margin: 0; padding: 0; width: 100%; background: transparent; }
.contact form div { line-height: 2.2em; }
.contact form fieldset { margin: 0; border: 0; padding: 0; }
.contact form input, form select { border: 1px solid #000; padding-left: 0.4em; width: 100%; background: #fff; }
.contact form textarea { border: 1px solid #000; padding-left: 0.4em; width: 100%; background: #fff; }
.contact form select option { padding: 0.1em 0; }
.contact form label { background: transparent; }
.contact form .button { float: left; width: 50% !important;  }
.contact form .button input { margin-right: 1%; width: 35%; text-align: left;  }
.contact form .button .attention { width: 100%; } 

.noStyle { text-align: left; color: #5C204B; background: transparent; }
.noStyle input, .noStyle label { display: inline; border: 0 !important; width: auto !important; background: transparent !important; }
input[type=radio] { margin: 0; padding: 0; width: auto; height: auto; line-height: auto; background: White;}
input[type=checkbox] { margin: 0; padding: 0; width: auto; height: auto; line-height: auto; background: transparent;}

.closedList { margin: 0 0 0 12px; padding: 0; }
.siteList { margin: 0; padding: 0; }

.searchResult { list-style-type: none; margin: 10px 0; padding: 0; }
.searchResult li { height: 23px; line-height: 18px; }
.searchResult li img { float: left; }