@import url(headers.css);

html,body{min-height:100%;}

body {
  background: url('../~img/background.png') repeat-x 0 0;
  color: #333536;
  font: .75em/1.7em Arial, Helvetica, sans-serif;
}
  
.jqmWindow {
  display: none;
  background: #fff;
  position: fixed;
  top: 40%;
  left: 50%;
  border: 1px solid black;
  margin-left: -180px;
  width: 360px;
}
  .jqmWindow .close {
    height: 10px;
  }
    .jqmWindow .close a {
      color: #929292;
      font-weight: bold;
      font-size: 1.2em;
      position: absolute;
      right: 12px;
      text-decoration: none;
      top: 7px;
      z-index: 1;
    }
    .jqmWindow .close a:hover {
      color: #000;
    }

.jqmOverlay {
  background-color: #000;
}

.accessibility,
#skiplinks {
  position: absolute;
  left: -999em;
}

#loginDialog {
  background: #fff;
  padding: 1em;
  text-align: left;
  position: relative;
}

#pagewrapper {
  background: #fff url('../~img/content-bg.png');
  margin: 0 auto;
  position: relative;
  width: 948px;
}

  #wrapper {
    background: url('../~img/content-bg-top.png') no-repeat 0 0;
    min-height: 450px;
    padding: 5px 5px 0;
  }
  
    #header {
      background: url('../~img/header-bg.png') no-repeat 1px 1px;
      border: 1px solid #d1d0d0;
      height: 162px;
      margin: 28px auto 0;
      padding: 1px;
      position: relative;
      width: 872px;
    }
      #header div {
        background: #fff url('../~img/header.jpg') no-repeat 0 0;
        height: 128px;
        margin: 0 0 0 226px;
        padding: 0;
        position: relative;
        left: auto;
        width: 646px;
      }
        #header > div > span {
          background: transparent url('../~img/header-corner.gif') no-repeat right top;
          display: block;
          text-indent: -999em;
          height: 2px;
          position: absolute;
          right: 0;
          top: 0;
          width: 2px;
        }
      #header #logo {
	      background:transparent url('../~img/transparent.gif') repeat;
        position: absolute;
        left: 21px;
        height: 107px;
        outline: medium none;
        text-indent: -999em;
        top: 28px;
        width: 179px;
	    }
      #header #main-nav {
        background: transparent;
        background-image: none;
        margin: 0 0 0 226px;
        height: auto;
        position: relative;
        width: auto;
      }
        #header #main-nav div {
          background: transparent url('../~img/nav-bg-corner.png') no-repeat 0 0;
          bottom: 0;
          height: 3px;
          margin: 0;
          padding: 0;
          position: absolute;
          right: 0;
          text-indent: -999em;
          width: 3px;
        }
          #header #main-nav div > span {
            background-color: transparent;
            background-image: none;
          }
        #header #main-nav ul {
          background: #104eb7 url('../~img/nav-bg.png') repeat-x 0 0;
          font-size: 1.1em;
          list-style: none;
          margin: 0;
          padding: 0 0 0 20px;
          height: 34px;
        }
          #header #main-nav ul:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
          }
          #header #main-nav li {
            color: #fff;
            float: left;
            margin: 5px 7px;
            text-transform: uppercase;
          }
            #header #main-nav li a {
              background: transparent none no-repeat 0 0;
              display: block;
              color: #fff;
              text-decoration: none;
            }
            #header #main-nav li.active a {
              background: transparent url('../~img/nav-bg-left-vf2.png') no-repeat left top;
            }
            #header #main-nav li a:hover {
              background: transparent url('../~img/nav-bg-left-vf1.png') no-repeat left top;
            }
              #header #main-nav li a span {
                display: block;
                margin: 0 0 0 5px;
                line-height: 25px;
                padding: 0 7px 0 2px;
              }
              #header #main-nav li.active a span {
                background: url('../~img/nav-bg-right-vf2.png') no-repeat right top;
              }
              #header #main-nav li a:hover span {
                background: url('../~img/nav-bg-right-vf1.png') no-repeat right top;
              }

    #sec-nav {
      position: absolute;
      right: 36px;
      top: 8px;
    }
      #sec-nav div {
        position: absolute;
        left: -999em;
      }
      #sec-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
        #sec-nav li {
          display: inline;
          margin: 0 5px;
        }
        #sec-nav li a {
          color: #818181;
        }
        #sec-nav li a:hover {
          text-decoration: none;
        }
        #sec-nav li a img {
          border: 1px solid #fff;
          position: relative;
          top: 3px;
        }
          #sec-nav li a:hover img {
            border-color: #b0d3e0;
          }
    
    #contentwrapper {
      float: left;
      margin-top: 35px;
      margin-bottom: -75px;
      width: 100%;
    }
      #contentwrapper.nomenu #content {
        margin-left: 30px;
      }
      #content {
        margin: 0 32px 0 258px;
        position: relative;
      }
        #content h1 {
          color: #005abb;
          margin: 0;
          padding: 0;
          font-size: 2em;
        }
	      #content.news h1 {
          margin-right: 150px;
        }
        #content .time {
          color: #7c7c7c;
          display: block;
          font-size: .9em;
		      position: absolute;
          right: 0;
          top: 5px;
          text-align: right;
          width: 180px;
        }
        #content .main .formtastic {
          margin: 0 -20px 0 0;
        }
          #loginDialog .formtastic fieldset,
          #content .formtastic fieldset {
            border: 0;
            margin: 0;
            padding: 0;
          }
            #content .formtastic legend {
              position: absolute;
              left: -999em;
            }
            #loginDialog .formtastic fieldset legend {
              color: #5994a9;
              font-size: 1.2em;
              font-weight: bold;
              margin: 0 0 2em;
              padding: 0;
            }
            #loginDialog .formtastic ol,
            #loginDialog .formtastic ul,
            #content .formtastic ol,
            #content .formtastic ul {
              list-style: none;
              margin: 0;
              padding: 0;
            }
              #loginDialog .formtastic ol > li,
              #content .formtastic ol > li {
                clear: both;
                margin: 2px 0;
              }
              #loginDialog .formtastic ol > li:after,
              #content .formtastic ol > li:after {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
              }
                #loginDialog .formtastic label,
                #content .formtastic label {
                  float: left;
                  text-align: left;
                  width: 100px;
                }
                  #loginDialog .formtastic label abbr,
                  #content .formtastic label abbr {
                    border: 0;
                    margin-left: 5px;
                  }
                #loginDialog .formtastic input,
                #content .formtastic .string input,
                #content .formtastic .text textarea,
				#loginDialog .formtastic .text textarea {
                  border: 1px solid #d1d0d0;
                  float: left;
                  width: 200px;
                }
                #loginDialog .formtastic input {
                  width: 225px;
                }
                #loginDialog .formtastic .text textarea {
                  width: 225px;
                }				
                #content .formtastic .check label {
                  font-size: .9em;
                  float: none;
                  margin-left: 5px;
                }
                #loginDialog .formtastic .check input,
                #content .formtastic .check input {
                  border: 0;
                  float: left;
                  margin-left: 100px;
                  width: auto;
                }
                #loginDialog .formtastic .check {
                  margin-top: 2.5em;
                }
                #loginDialog .formtastic .check label {
                  float: none;
                  font-size: .9em;
                }
                #loginDialog .formtastic .check input {
                  margin-left: 0;
                }
                #loginDialog .formtastic .string input:focus,
                #content .formtastic .string input:focus,
                #content .formtastic .text textarea:focus {
                  background-color: #f5fafd;
                }
                #content .formtastic .error input,
                #content .formtastic .error textarea,
				#loginDialog .formtastic .error input,
                #loginDialog .formtastic .error textarea
				{
                  border-color: #005ABB;
                }
                #content .formtastic .inline-hints,
				#loginDialog .formtastic .inline-hints,
                #content .formtastic .inline-errors,
                #content .formtastic .errors {
                  clear: both;
                  margin: 0 0 0 100px;
                  padding: 0;
                }
                #content .formtastic .inline-hints {
                  font-size: .8em;
                }
                #content .formtastic .inline-errors,
                #content .formtastic .errors {
                  color: red;
                  font-weight: bold;
                }
                #content .formtastic .commit input,
                #content .formtastic .commit a {
                  margin: 20px 0 0 100px;
                }
                #loginDialog .formtastic .commit input,
                #loginDialog .formtastic .commit a {
                  clear: both;
				  float: right;
                  margin-top: 1.5em;
                  position: relative;
                }
        #content .main {
          float: left;
          margin: 0 20px 0 0;
          position: relative;
          width: 300px;
        }
          #content .main .intro {
          }
		  
		  #content h3{color:#5994A9; font-size:1.2em; margin:10px 0 0 0; margin-bottom:-10px;}
          
          #content .main p {
            margin: 1em 0 1.5em;
          }
          #content .specs h2,
		  #content .main h2,
          #content ul.more,
          #content div.more,
          #content a.navlink {
            background: url('../~img/more-bg.png') no-repeat 0 0;
            color: #005abb;
            display: block;
            font-size: 1.1em;
            margin-bottom: -85px;
            min-height: 108px;
            min-width: 95px;
            padding: 15px 0 0 15px;
            text-decoration: none;
          }
		  
          #content a.navlink {
            background: url('../~img/button-bg.png') no-repeat 0 0;
			      margin-bottom: inherit;
            min-height: 33px;
          }
          #content a.navlink:hover {
            text-decoration: underline;
          }
        #loginDialog a.button,
        #content a.button {
          color: #fff;
          cursor: pointer;
          display: inline-block;
          /*background: url('../~img/button1-right-vf0.png') no-repeat right center;*/
          background: url('../~img/button1-right-vf0.png') no-repeat right 0;
          line-height: 42px;
          margin: 1em 0;
          font-size: 1.3em;
          font-weight: bold;
          text-decoration: none;
          text-shadow: 1px 1px #759eae;
        }
        #loginDialog a.button:hover,
        #content a.button:hover {
          background: url('../~img/button1-right-vf1.png') no-repeat right center;
          /*background-position: right -42px;*/
        }
          #loginDialog a.button span,
          #content a.button span {
            /*background: url('../~img/button1-left-vf0.png') no-repeat left center;*/
            background: url('../~img/button1-left.png') no-repeat 0 0;
            display: block;
            padding: 0 25px;
          }
          .specs a.button span {
		  	width:200px;
			text-align:center;
		  }
          #loginDialog a.button:hover span,
          #content a.button:hover span {
            /*background: url('../~img/button1-left-vf1.png') no-repeat left center;*/
            background-position: 0 -42px;
          }
        #content .specs {
          float: left;
		  width:300px !important; jos 
        }
		/*#content .specs p{
          padding:0 0 0 15px;
        } jos */
          #content .specs h2, #content .main h2 {
            /* see #content .main a.button */
            color: #5994a9;
            font-size: 1.2em;
          }
		  #content a {
            color: #005abb;
          }
          #content a:hover {
            text-decoration: none;
          }
          #content address {
            margin: 1.5em 0 0 15px;
            font-style: normal;
          }
            #content address span {
              font-size: .9em;
            }
          #content .specs ul {
            list-style: none;
            margin: -1.5em 0 0 15px;
            padding: 0;
          }
            #content .specs li {
              margin: .3em 0;
            }
            #content .specs li:before {
              content: "- ";
            }
          .personal div#logo,
		      #header,
          #content .specs img,
          #content .promo,
          #content .questions li,
          #content .itemlist li {
            border: 1px solid #d1d0d0;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            -khtml-border-radius: 3px;
            padding: 1px;
          }
          #content .specs img {
            margin: 1em 0 1.5em;
          }
        #content .promo,
        #content .itemlist {
          margin: -6px -10px -6px 0;
          padding: 0;
          position: relative;
        }
        #content .itemlist {
          list-style: none;
        }
        .nomenu #content .itemlist {
        }
        #content .itemlist:after {
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
        }
        .nomenu  #content .itemlist:after {
          clear: none;
        }
          
          #content .itemlist li {
            float: left;
            margin: 6px 9px 6px 0;
          }
          #content .promo {
            padding: 1px;
            width: 434px;
          }
          #content .itemlist li {
            width: 206px;
			
          }

          #content .itemlist li .newsitem{
			height:290px;
          }


			#content .itemlist li div.product p{
				height:40px;
				}

            #content .itemlist li div,
            #content .promo div {
              background: #e6f5ff url('../~img/gradient1.png') repeat-x 0 0;
              padding: 5px;
            }
            #content .itemlist li:hover div,
            #content .promo:hover div {
              background: #ceeaf3 url('../~img/gradient2.png') repeat-x 0 0;
            }
              #content .itemlist li h2,
              #content .promo h1 {
                color: #005abb;
                font-size: 1.2em;
                line-height: 1.5em;
                margin: 0 0 5px;
              }
              #content .promo h1 {
                font-size: 1.5em;
				        margin-left: 13px;
              }
			.nomenu #content .itemlist h2 {
                min-height: 3em;
              }
              .nomenu #content .promo h1 {
                line-height: 2.4em;
              }
              #content .itemlist li:hover h2,
              #content .promo:hover h1 {
                color: #585858;
              }
              #content .itemlist li img,
              #content .promo img {
                border: 1px solid #fff;
                margin: 0 -6px;
              }
              #content .itemlist li img {
                height: 134px;
                width: 206px;
              }
              #content .promo img {
                width: 434px;
              }
              #content .itemlist li p,
              #content .promo p {
                margin: 10px 13px;
              }
              #content .itemlist li a,
              #content .promo a {
                display: block;
                color: #005abb;
                margin: 20px 13px 10px;
                text-decoration: none;
              }
              #content .itemlist li:hover a,
              #content .promo:hover a {
                color: #5c6568;
              }
              #content  .itemlist li a:hover,
              #content .promo a:hover {
                text-decoration: underline;
              }
          #content .itemlist li.featured {
            float: none;
            width: auto;
          }
            #content .itemlist li.featured div {
            }
            #content .itemlist li.featured div:after {
              content: ".";
              display: block;
              height: 0;
              clear: both;
              visibility: hidden;
            }
              #content .itemlist li.featured h2 {
                margin-left: 321px;
                text-align: left;
              }
              #content .itemlist li.featured img {
                border: 0;
                float: left;
                height: 209px;
                margin: -5px 20px -5px -5px;
                width: 321px;
              }
          #content ul.more {
            /* see #content a.navlink */
            list-style: none;
            margin: 1em 0;
          }
            #content ul.more li {
              margin: 3px 0;
            }
            #content ul.more a {
              color: #333536;
              display: inline-block;
              line-height: 1.65em;
              padding: 0 5px;
              text-decoration: none;
            }
            #content ul.more a:hover {
              background: #cde9f3;
              color: #585858;
            }
            #content ul.more a span {
              background: url('../~img/arrow.gif') no-repeat right 60%;
              padding-right: 10px;
            }
          #content div.more {
            /* see #content a.navlink */
            float: left;
            width: 414px;
            margin: 5px 0 0 0;
          }
            #content div.more h2 {
              color: #5994a9;
              font-size: 1.1em;
              margin: 0 0 .5em 0;
              padding: 0;
            }
            /*
            #content div.more dl {
              color: #333536;
              font-size: 1em;
            }
              #content div.more dt {
                color: #5994a9;
                float: left;
                width: 142px;
                position: relative;
                z-index: 1;
              }
              #content div.more dd {
                border-bottom: 1px solid #e5f0f4;
                margin: 0;
                position: relative;
              }
              #content div.more a {
                position: relative;
                color: #333536;
                display: block;
                text-decoration: none;
                padding-left: 142px;
                margin: 0;
              }
              #content div.more dd:hover {
                background: #cde9f3;
                color: #585858;
              }
            */
            #content div.more ul {
              color: #333536;
              font-size: 1em;
              list-style: none;
              margin: 0;
              padding: 0;
            }
              #content div.more li {
                border-bottom: 1px solid #e5f0f4;
                margin: 0 0 0 -5px;
              }
              #content div.more li.last,
              #content div.more li:last-child {
                border: 0;
              }
                #content div.more a {
                  background: transparent;
                  cursor: pointer;
                  display: block;
                  padding: 0 5px;
                  text-decoration: none;
                }
                #content div.more a:hover {
                  background: #cde9f3;
                }
                  #content div.more a .title {
                    color: #5994a9;
                    display: inline-block;
                    width: 145px;
                  }
                  #content div.more a .description {
                    color: #333536;
                    display: inline-block;
                    text-decoration: none;
                    margin: 0;
                  }
                  #content div.more a:hover .description {
                    color: #585858;
                  }
          #content.faq .main {
            width: 100%;
          }
          #content .questions {
            list-style: none;
            margin: -4px 0 0;
            padding: 0;
            position: relative;
          }
            #content .questions li {
              /* see #content .itemlist li */
              margin: 4px 0;
              padding: 0;
            }
            #content .questions li div:after {
              content: ".";
              display: block;
              height: 0;
              clear: both;
              visibility: hidden;
            }
              #content .questions h2 {
                border-bottom: 1px solid #d1d0d0;
                font-size: 1em;
                font-weight: normal;
                margin: 0 0 -1px 0;
              }
              #content .questions h2:hover {
                background: #e7f3fb;
              }
              #content .questions h2.active {
                background: url('../~img/question-heading-active.png') repeat-x 0 0;
              }
                #content .questions h2 span {
                  display: inline-block;
                  margin: 0 1em;
                }
              #content .questions div {
                margin: 0;
                padding: 1em;
              }
                #content .questions p {
                  margin: 0 0 1em;
                }
                #content .questions img {
                  float: left;
                  margin: 0 1em 0 0;
                  position: relative;
                }
                
      .personal {
        color: #777777; 
      }
      .personal  #logo {
        border: 0;
        float: left;
        margin: 65px 0 0 35px;
      }
      .personal div#logo {
        background: #edf6fc  url('../~img/client-logo-bg.png') repeat-x 0 0;
        height: 210px;
        margin-top: 75px;
        width: 320px;
      }
        .personal div#logo img {
          border: 0;
          margin: 0;
        }
      .personal .main {
        margin: 0 35px 0 400px;
        position: relative;
      }
        .personal h1 {
          font-size: 2em;
          margin: 30px 0 20px;
        }
        .personal a.button {
          color: #fff;
          cursor: pointer;
          display: block;
          /*background: url('../~img/button2-right-vf0.png') no-repeat right center;*/
          background: url('../~img/button2-right.png') no-repeat right 0;
          line-height: 57px;
          margin: 1em 0;
          font-size: 1.3em;
          font-weight: bold;
          text-decoration: none;
          text-shadow: 1px 1px #759eae;
        }
        .personal a.button:hover {
          /*background: url('../~img/button2-right-vf1.png') no-repeat right center;*/
          background-position: right -57px;
        }
          .personal a.button span {
            /*background: url('../~img/button2-left-vf0.png') no-repeat left center;*/
            background: url('../~img/button2-left.png') no-repeat 0 0;
            display: block;
            padding: 0 25px;
            text-align: center;
          }
          .personal a.button:hover span {
            /*background: url('../~img/button2-left-vf1.png') no-repeat left center;*/
            background-position: 0 -57px;
          }
                
      #sub-nav {
        /*background: url('../~img/subnav-bg.png') repeat-x 0 0;*/
        float: left;
        margin: -35px 0 -35px 30px;
        padding: 35px 0;
        position: relative;
        width: 208px;
      }
        #sub-nav h2 {
          position: absolute;
          left: -999em;
        }
        #sub-nav ul {
          list-style: none;
          margin: 0;
          padding: 0; 
        }
          #sub-nav li {
            border-bottom: 1px solid #d3e4ed;
          }
          #sub-nav li.last,
          #sub-nav li:last-child {
            border-bottom: 0;
          }
            #sub-nav li a {
              color: #585858;
              display: block;
              line-height: 2.4em;
              padding: 0 20px;
              text-decoration: none;
            }
            #sub-nav li a.active {
              background: #fff;
            }
            #sub-nav li a:hover {
              background: #cde9f3;
            }
              #sub-nav li a span {
                display: block;
                margin-right: -10px;
              }
              #sub-nav li a:hover span {
                background: transparent url('../~img/arrow.gif') no-repeat right 1em;
              }
			  #sub-nav li a.active span {
                background: transparent url('../~img/arrow.gif') no-repeat right 1em;
              }
 				#sub-nav .subMenuSub {
					font-size: 12px;
					color: #585874;
					border-top: 1px solid #f2f7fa;
					padding-bottom: 1px;
				}
				  #sub-nav .subMenuSub li a {
					color: #585874;
					display: block;
					line-height: 20px;
					padding: 0 20px 0 35px;
					text-decoration: none;
					width: 153px;
					margin-top: 1px;
				  }
				  #sub-nav .subMenuSub li a.active {
					 background: #f3fafc;
				  }
				  #sub-nav .subMenuSub li a:hover {
					 background: #e3f3f8;
				  }
				  #sub-nav .subMenuSub li a span {
					 display: block;
					 margin-right: -10px;
				  }
				  #sub-nav .subMenuSub li a.active span,
				  #sub-nav .subMenuSub li a:hover span {
					background: transparent url('../~img/arrow.gif') no-repeat right 0.6em;
				  }
  #footer {
    background: url('../~img/content-bg-bottom.png');
    clear: both;
    margin: 0;
    height: 158px;
    padding: 0 40px;
  }
    #footer span {
      color: #5994a9;
      font-size: .8em;
      margin-right: 20px;
      position: relative;
      top: 100px;
    }
      #footer span a {
        color: #5994a9;
        text-decoration: underline;
      }
      #footer span a:hover {
        text-decoration: none;
      }
	  
	  a.navlink:hover { text-decoration:none !important; }
	  a.navlink:hover .cufon{ text-decoration:underline !important; }
	  
.homeLeft{float:left; margin-top:6px;}
.homeRight{float:right;}

.interactieblok{
	  color: #fff !important;
	  cursor: pointer;
	  display: block;
	  /*background: url('../~img/button2-right-vf0.png') no-repeat right center;*/
	  background: url('../~img/button2-right.png') no-repeat right 0;
	  line-height: 57px;
	  margin: 1em 0;
	  font-size: 1.3em;
	  font-weight: bold;
	  text-decoration: none;
	  /*
text-shadow: 1px 1px #759eae;	
*/
}
.interactieblok:hover {
  /*background: url('../~img/button2-right-vf1.png') no-repeat right center;*/
  background-position: right -57px;
}
.interactieblok span {
/*background: url('../~img/button2-left-vf0.png') no-repeat left center;*/
background: url('../~img/button2-left.png') no-repeat 0 0;
display: block;
padding: 0 25px;
text-align: center;
}
.interactieblok:hover span {
/*background: url('../~img/button2-left-vf1.png') no-repeat left center;*/
background-position: 0 -57px;
}


