/*
   default.css
   Stylesheetdefinities voor www.sitestepper.be
   (c) 2004-2010 - E.De.L.Com bvba
*/
html,body { margin:0; padding:0; }
*         { margin:0; padding:0; }

body {
   background-color: #f5f5f5;
   color: black;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   margin: 0px;
   padding: 0px;
   text-align:left;
   font-size:12px;
   background-image:url(http://www.sitestepper.be/images/contents-background.jpg);
   background-repeat: repeat-y;
   background-position: 00px 120px;
}

A:link    {color: #000080;}
A:visited {color: #303080;}
A:hover   {color: #00002d;}

/* --- algemene layout van de site ------------------------------------------ */

div#header {
  height:106px;
  padding:0px 0px;
  /* background: transparent url(http://www.sitestepper.be/images/header-background.jpg) repeat-x top left; */
  /*background-color:#000080;*/
  background: #000080 url(http://www.sitestepper.be/images/subheader-blauw-zwart.jpg) repeat-x bottom left;
}
div#header h1{
   font-family: Arial, Helvetica, sans-serif;
  padding:15px 0 10px 0;
  margin:0;
  font-size:40px;
  background: transparent;
  color:white; /*#004080;*/
  overflow:hidden;
  height:40px;
  line-height:40px;
}
div#header p {
  color:white; /*#004080;*/
}
div#header a       { color:white; text-decoration:none; }
div#header a:hover { color:#d7ebff; text-decoration:underline; }
/*div#header a       { color:#004080; text-decoration:none; }
div#header a:hover { color:#00254a; text-decoration:underline; }*/
div#header ul{
  height:44px;
  width:180px;
  float:right;
  margin-top:20px;
}
div#header li{
  line-height:11px;
  font-size:11px;
  color:white;
}

div#subheader {
  height:1.5em;
  line-height:1.5em;
  margin:0;
  padding:2px 5px;
  /*background:#000040;*/
  color: #ffffff;
  font-size:0.9em;
  /*width:100%;*/
  background: #000040 url(http://www.sitestepper.be/images/subheader-blauw-zwart.jpg) repeat-x top left;
}

div#subheader a       { color:white; text-decoration:none; }
div#subheader a:hover { color:white; text-decoration:underline; }

div#subheader .talen {
   width:200px;
   height:1.5em;
   line-height:1.5em;
   font-size:0.9em;
   float:left;
   padding-left:15px;
}
div#subheader .welkom {
   width:375px;
   height:1.5em;
   line-height:1.5em;
   font-size:0.9em;
   float:right;
   text-align:right;
   padding-right:0;
}

div#footer{background: #000040;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#wrapper{float:left;width:100%;}

div#content {margin: 0 200px 0 200px; padding:5px 25px;}
div#content p {line-height:1.5; padding:2px 7px 2px 20px;text-align:justify;}
div#content ul{line-height:1.5; padding:2px 7px 2px 20px;}
div#content li{line-height:1.5; padding:2px 7px 2px 20px;}
div#content ol{line-height:1.5; padding:2px 7px 2px 20px;}

div#navigation {
   float:left; width:200px; margin-left:-100%;
   padding:0 !important;
   border-right:1px solid #000080;
   border-bottom:1px solid #000080;
   /*background-color:#000040;*/
/*    font-size:11px; */
   background: #000080 url(http://www.sitestepper.be/images/navigation-background.jpg) repeat-x top left;
}

div#information {
   float:left; width:200px;margin-left:-200px;
   padding:0 !important;
   }

div#footer{clear:left;width:100%}

/* --- content = veranderde deel van de site -------------------------------- */

#menu {
   /*background: #7D7DA6 url(http://www.sitestepper.be/images/mnbar-bg.gif) repeat-x top left;*/
   /*border-top: 1px solid #656589;*/
   background-color:#001;
   margin: 0;
   padding: 3px 0 0 0;
   float:left;
   width: 100%;
}
* html #menu { margin: 0 0 5px 0;}
#menu ul {
   margin:0 0 0 20px;
   padding:0;
   list-style:none;
   font-size:85%;
}
#menu li {
   float:left;
   margin:0;
   padding:0;
   background-image:none;
   line-height:normal;
   text-indent:0;
}
#menu a, #menu strong {
   display:block;
   padding:2px 15px 7px 15px;
   /*border:solid #9B9BCB;
   border-width:0 1px 0 0;*/
   /*background: #8989C3 url(http://www.sitestepper.be/images/mnitem-bg.gif) repeat-x bottom left;*/
   color:#fff;
   text-decoration:none;
   white-space:nowrap;
}
* html #menu a {
   width:1%;
}
#menu a.home {
   border-left: 1px solid #9494B6;
}
#menu #current strong, #menu #current a {
   color: #323269;
   font-weight: bold;
   background: #fff url(http://www.sitestepper.be/images/mncur-bg.gif) repeat-x bottom left;
}
#menu a strong, #menu #current a strong {
        color: #323269;
        padding: 0;
        border:none;
}
#menu #current strong    {
}
#menu a:hover    {
   color:#001;
   background: #fff url(http://www.sitestepper.be/images/mnhov-bg.gif) repeat-x bottom left;
}
#menu #current a:hover strong, #menu #current a:hover     {
   color: #000;
   background: #fff url(http://www.sitestepper.be/images/mnhov-bg.gif) repeat-x bottom left;
}
#menu #current   {
   background: #fff url(http://www.sitestepper.be/images/mncur-bg.gif) repeat-x bottom left;
}
#menu #h {
   border-left-width:1px;
}



/* --- content = veranderde deel van de site -------------------------------- */

#content h1 {
   padding:15px 0 10px 0;
   line-height:150%;
   height:150%;
   font-size:150%;
   font-weight: bold;
   text-align: left;
   display:block;
   /* width:100%; */
   margin:10px 0 20px 0;
   /* border:1px solid red; */
   clear:both;
   color:#004080;
   }

#content h1 em {
   margin-left:10px;
   color:#006ad5;
}

/* --- herdefinitie van generieke html tags --------------------------------- */
h2 {
   font-size: 14px;
   font-weight: bold;
   margin:30px 5px 20px 0;
   font-style: Italic;
   color:#004080;
   clear:both;
}
h3 {
   font-size: 12px;
   font-weight: bold;
   font-style: normal;
   font-variant:small-caps;
   margin:8px 5px 5px 0px;
}

th {
   font-weight: bold;
   text-align: center;
   vertical-align: middle;
   padding: 6px 5px;
}
td {
   font-weight: normal;
}
ul, ol, dl {
   margin-left:15px;
}
li {
   margin-bottom:5px;
}
dt {
   margin-bottom:5px;
   margin-top:8px;
   font-weight:bold;
}
img {
   border:none;
}

.btnimg {
}

/* --- class-namen om css-properties te zetten ------------------------------ */
.clear { clear:both; }
.noclear { clear:none; }
.left { text-align:left; }
.right { text-align:right; }
.center { text-align:center; }
.float-left { float:left; border:3px solid cyan; }
.float-right { float:right; border:3px solid cyan; }

/* --- navigatieblok (links van het scherm)---------------------------------- */

div.navblok {
   margin:10px 10px 5px 10px;
   padding:0;
   border:1px solid #000080;
   font-size:11px;
   background: #ffffd3 url(http://www.sitestepper.be/images/navblok-background.jpg) repeat-x top left;
}
div.navblok strong {
   font-weight:bold;
   background-color:white;
   color:#000040;
   padding:2px 0 2px 5px;
   display:block;
   border-bottom:1px solid #000080;
   height:1.6em;
   line-height:1.6em;
}
div.navblok b {
   width:178px;
   min-height:20px;
   line-height:20px;
   padding:0px;
   font-weight:bold;
   color:white;
   background-color:#0080ff;
   display:block;
   overflow:hidden;
   border-top:1px solid white;
   border-bottom:1px solid white;
}
div.navblok em {
   width:200px;
   min-height:20px;
   line-height:20px;
   padding:0px;
   font-style:normal;
}
div.navblok em a, div.navblok b a {
   padding:0px 25px 0px 5px;
   display:block;
   overflow:hidden;
   text-decoration:none;
}
div.navblok b a { color:#ffffd3; }

div.navblok em a:hover, div.navblok b a:hover {
   padding:0px 25px 0px 5px;
   display:block;
   overflow:hidden;
   text-decoration:underline;
   background-color:#0080ff;/*#808040;*/
   color:white;
   /*border-top:1px solid white;
   border-bottom:1px solid white;*/
}

/* --- scheiding ------------------------------------------------------------ */
div.bloksep {
   width:100%;
   height:5px;
}

/* --- losse delen links van het scherm ------------------------------------- */
div.navtitel {
   margin:25px 10px 5px 10px;
   padding:2px 0 2px 5px;
   border:1px solid #000080;
   background-color: white; /*#ffffd3;*/
   font-size:11px;
}
div.navinfo {
   margin:5px 10px 10px 10px;
   padding:0;
   font-size:10px;
   color:white;
}
div.navinfo a { color: white }

/* --- infoblock (rechts van het scherm)------------------------------------- */

div.infoblok {
   margin:10px 10px;
   padding:0;
   border:1px solid #000080;
   background-color:white;
   font-weight:normal;
   font-style: normal;
   font-size:11px;
}
div.infoblok strong {
   color:white;
   background-color:#000040;
   padding:2px 0 2px 5px;
   display:block;
}
div.infoblok b {
   font-weight:bold;
   color:#000040;
   background-color:white;
   padding:8px 0 8px 5px;
   display:block;
}
div.infoblok em, div.infoblok i {
   width:178px;
   min-height:20px;
   line-height:20px;
   display:block;
   font-style: normal;
}
div.infoblok em {
   padding:2px 0 2px 0;
}
div.infoblok i {
   padding:2px 0 2px 5px;
}

div.infoblok em a, div.infoblok em a:hover {
   padding:0px 5px 0px 5px;
   display:block;
   overflow:hidden;
   text-decoration:none;
}
div.infoblok em a:hover {
   text-decoration:underline;
   background-color:#0080ff;
   color:white;
}


/* --- andere classen en id's ----------------------------------------------- */

.uitspraak {
   margin-top: 20px; margin-bottom: 20px; margin-right:10px;
   font-weight: bold; border:3px solid #0080C0;
   padding:10px;
   font-size:1.1em;
   color:#0080c0;
   background-color:white;
   overflow:hidden;
}

#content .schermafdruk-rechts, #content .schermafdruk-links {
   border:1px solid #888;
   padding:6px;
   margin-top:5px;
   margin-bottom:5px;
   background-color:white;
   /*width:250px;*/
}

#content .schermafdruk-rechts {
   float:right;
   margin-left:15px;
}
#content .schermafdruk-links {
   float:left;
   margin-right:15px;
}


.schermafdruk p {
   font-weight:bold;
   font-size:9px;
   background-color:#000080;
   text-align:center;
   color:white;
   padding:0px; margin:0px;
}

.klikhier {
   margin:10px;
}
/* --- buttons -------------------------------------------------------------- */
.button { float:right;
          margin:10px;
          width:150px;
          height:75px;
        }
.uitspraak .button { margin:0px 5px; }

/* --- portfolio ---- ------------------------------------------------------- */
#portfolio  {
   font-size: 9px;
   clear:left;
   float:left;
   padding:0px;
   width:100%;
   margin:0;
   border:none;
}
#portfolio .sc-griditem {
   float:left;
   width:270px;
   height:175px;
   vertical-align:top;
   margin:0 8px 5px 0;
   padding:0;
   border:none;
   overflow:hidden;
}
#portfolio .sc-imgheader {
   background-color:#0080ff;
   color:white;
   display:block;
   clear:left;
}
#portfolio .sc-imgheader h1, #portfolio .sc-imgheader h2 {
   padding:0px 3px !important;
   width:262px;
   text-align:left;
}
#portfolio .sc-imgheader h1 {
   color:white !important;
   height:14px !important;
   line-height:15px;
   font-size: 11px !important;
   background:none #000040;
   font-weight:bold;
   margin:0px !important;
   border:1px solid #000040;
   text-align:left !important;
}
#portfolio .sc-imgheader h2 {
   line-height:15px;
   font-weight:normal;
   background:none #e8eff7;
   font-size:9px;
   margin:0px 0px 5px 0px;
   text-decoration:none;
   border-left:1px solid #000040;
   border-right:1px solid #000040;
   border-bottom:1px solid #000040;
}
.sc-imgheader h1 a {
   color:white;
   display:block;
   text-align:left;
   text-decoration:none;
}
.sc-imgheader h2 a {
   color:#000040;
   text-align:left;
   text-decoration:underline;
}
.sc-imgheader a:visited{ text-decoration:none; }
.sc-imgheader a:hover{ text-decoration:underline;
}
#portfolio p{
   padding:0px 0px 0px 0px !important;
   color:#000040;
   text-align:justify !important;
   line-height:11px !important;
   font-size:9px !important;
}
#portfolio img {
   float:left;
   margin:0px 5px 5px 0px;
   border:1px solid #cccccc;
   width:100px;
   height:75px;
}



/* --- foto-explan -- ------------------------------------------------------- */
.foto-explan  { font-size: 10px;
                clear:left;
                margin:5px 30px 15px 20px;}

.foto-explan h2 { font-size: 10px;
                  margin:5px 30px 15px 0px;
                  font-weight:bold;
                  text-align:left;}

/* --- boekenpagina's ------------------------------------------------------- */

#boeken {      width:550px;
               background-color:#0080c0;
               border:1px solid black;
               margin:10px auto;
               height:auto; }


.boekenlijst { /*margin-top:0px;
               margin-bottom:0px;
               padding:3px;
               width:100%;
               background-color:yellow;
               height:auto;*/
               clear:both;
               margin:15px;
               width:520px;
               display:block;
             }
.boekenlijst .boek {
               border:0px solid #CCCCCC;
               width:115px;
               padding:3px;
               background-color:white;
               float:left;
               margin:3px 3px 5px 3px;
               vertical-align:top;
               text-align:center;
             }
.boekenlijst .boekinfo {
               display:block;
               /*border:1px solid #CCCCCC;*/
               background-color:white;
               /*float:left;*/
               margin:5px auto 5px auto;
               vertical-align:top;
               padding:3px 3px 3px 3px;
               clear:both;
               width:510px;
               /*padding:10px;*/
             }
.boekenlijst .boekinfo h2 {
               background-color:#000040;
               color:#ffffff;
               font-weight:bold;
               padding:3px;
               margin:0px;
               }

.boekenlijst img { border:1px solid #30C0C0;
                   margin:3px;
                   padding:3px;
                   background-color:yellow;
                 }

.boekenlijst-topmenu {
               float:left;
               margin:3px 3px 15px 3px;
               padding:0px 0px 05px 0px;
               color:white;
               font-size:9px;
               border-bottom:1px solid white;
             }
.boekenlijst-topmenu a  { color:white;
                          font-size:9px;
                          text-decoration:none;}
.boekenlijst-topmenu a:link    { text-decoration:none;
                                 font-size:9px;}
.boekenlijst-topmenu a:visited { color:white;}
.boekenlijst-topmenu a:hover   { text-decoration:underline;
                                 color:white;}


/* --- softwarepagina's ------------------------------------------------------- */

.softwaretable {  border:3px solid #000060 ; padding:0;
                  background-color:white;
                  width:600px;
                  height:29px;
                  font-size:12px;
                  text-align:left;
                  margin-top:20px;
                  margin-bottom:20px; }
.softwaretable th {font-weight:bold;
                  background-color:#000060;
                  color:white; }
.softwaretable tr {border-bottom:1px solid #989fa7;
                   height:16px;}
.softwaretable td {  padding:3px 15px;
                  text-align:left;
                  vertical-align:top;
                   border-bottom:1px solid #000060;  }


/* --- prijstabellen -------------------------------------------------------- */

.prijstable {     border:3px solid #000060 ; padding:0;
                  background-color:#E8EFF7;
                  width:600px;
                  height:29px;
                  text-align:left;
                  margin-top:20px;
                  margin-left:20px;
                  margin-bottom:20px; }
.prijstable th {  font-weight:bold;
                  background-color:#000060;
                  color:white; }
.prijstable tr {  border-bottom:1px solid #989fa7;
                  height:20px; }
.prijstable td {  padding:3px 15px;
                  text-align:left; }

/* --- tabel voor de character map ------------------------------------------ */

.syntaxtable {   border:3px solid #000060 ;
                  padding:0;
                  background-color:#E8EFF7;
                  width:500px;
                  height:29px;
                  text-align:left;
                  margin:20px auto;
                  border-collapse:collapse; }
.syntaxtable th {font-weight:bold;
                  background-color:#000060;
                  color:white; }
.syntaxtable tr {border-bottom:1px solid #989fa7;
                  height:20px;   }
.syntaxtable td {padding:3px 15px;
                  text-align:left;
                  border-bottom:1px solid #0000a0; }



* html #webright.img { zoom:1; }


/* --- Step1Img pagina ------------------------------------------------------ */
.step1img h1 {
   text-align:center !important;
}



.html-voorbeeld {
   border:2px solid green;
}