* { border: 0; font-family: inherit; font-size: 1em; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; text-decoration: none }
a { color: #00719c }
a:hover { color: #00aeef }
address { font-style: normal }
b, strong { color: #333; font-weight: bold }
button { background: #000; color: #fff }
cite, dfn, i, var { font-style: italic }
code, pre, samp { font-family: 'Lucida Console', monospace }
h, h1, h2, h3, h4, h5, h6 { clear: both; color: #000 }
h1 { color: #fff; font-size: 3em; font-weight: bold; line-height: 1; padding: 24px 0 0 16px }
h2 { font-size: 1.5em; font-weight: normal; line-height: 1; margin: 1em auto; padding: 0 }
h3 { font-size: 1.2em; font-weight: normal; line-height: 1.25; margin: 1.25em auto; padding: 0 }
h4 { font-size: 1em; font-style: normal; font-weight: bold; line-height: 1.5; margin: 1.5em auto 0 auto; padding: 0 }
html { background: url('images/gray.png') #666 no-repeat fixed center; color: #666; font: normal 100%/1.5 'Calibri', sans-serif; overflow-y: scroll }
input, select, textarea { background: #fff; border: 1px solid; border-color: #999 #999 #ccc #ccc }
li { display: list-item; margin: 0 0 0 24px; padding: 0 0 0 .5em }
ol, p, pre, ul { margin: 1.5em auto }
pre { white-space: pre }
table { display: table }
td, th { display: table-cell }

#top { background: #fff; border-top: 0px solid #000; height: 4.5em }
#top .wrapper {  }
#top ul { bottom: 0; list-style: none; margin: 0; padding: 0; position: absolute; right: 0 }
#top ul li { background: transparent; color: #000; display: block; float: left; list-style: none; margin: 0; padding: 0 }
#top ul li a { color: #000; display: block; float: left; padding: .7em 2em }
    #logo img { display: block; height: 4.5em; vertical-align: bottom }
#header { background: url('images/maublau.png') #00719c no-repeat center top; color: #fff; height: 6em }
#header a { color: #fff }
#body { background: #fff; padding: 1.5em 0 }
    #s1 { float: left; width: 15em }
    #s1 ul { background: #eee }
    #s1 ul li { font-size: 1.2em; line-height: 1.25; padding: .625em 0 }
    #s2 { float: left; width: 30em }
    #s3 { float: left; width: 15em }
#footer { background: url('images/footer.png') transparent repeat-x; color: #ddd }
#footer a { color: #fff }
#footer .n { color: #fff; font-weight: bold }
    #s4 { background: transparent; float: left; padding: 1.5em 0; width: 15em }
    #s5 { background: transparent; float: left; padding: 1.5em 0; text-align: center; width: 30em }
    #s6 { background: transparent; float: left; padding: 1.5em 0; width: 15em }

body.home #top li.home a,
body.messenger #top li.messenger a,
body.verstuur-en-verfijn #top li.messenger a,
body.rapportage-en-analyse #top li.messenger a,
body.get-started #top li.messenger a,
body.ontwerp-en-ontwikkeling #top li.diensten a,
body.diensten #top li.diensten a
    { background: #00719c; color: #fff }

body.home #s1 { float: left; width: 30em }
body.home #s2 { float: left; width: 15em }
body.home #s3 { float: left; width: 30em }


body.home #header { height: 288px }

.clear { clear: both; width: 100% }
.note { background: #ffc; color: #663; border: 1px solid #cc9; margin-left: -16px; margin-right: -16px; padding: 11px 15px }
.wrapper { clear: both; height: 100%; margin: 0 auto; position: relative; width: 960px }
.s { padding: 0 1em }

.gallery { list-style: none; margin: 0; padding: 0 }
.gallery li { display: block; float: left; list-style: none; margin: 8px; padding: 0 }
.gallery li img { display: block; float: left; vertical-align: bottom }

body.cheetahmail #s2, body.contact #s2, body.messenger #s2, body.diensten #s2, body.online-magazines #s2, body.product #s2, body.strategie #s2 { width: 60em }
#s2a, #s2b, #s2c, #s2d { float: left; width: 28em }
#s2a, #s2c { clear: left; padding-right: 1em }
#s2b, #s2d { padding-left: 1em }
#s2c h2, #s2d h2 { margin-top: 0 }

body.messenger #s2c { margin: 0 1em 0 0; padding: 0; width: 13em }
body.messenger #s2d { margin: 0; padding: 0 0 0 1em; width: 43em }
body.messenger #s2b div { float: left; width: 13em }
body.messenger #s2d h2 { margin-bottom: 0 }
body.messenger #s2d1, body.messenger #s2d2 { margin-right: 2em }

body.klanten #s3 { width: 30em }

body.saas #s2a { clear: both; width: 58em }
body.saas #s2a1 { float: left; margin: 0 1em 0 0; width: 28em }
body.saas #s2a2 { float: left; margin: 0 0 0 1em; width: 28em }

body.profiel #s3 ul { background: #fcc; border: 1px solid #c99; color: #633; margin-left: -16px; margin-right: -16px; padding: 11px 15px }
body.profiel form table { width: 100% }
body.profiel form table th { padding-right: 8px; text-align: right }

.carousel { height: 18em; position: relative; width: 960px }

.carousel-control { display: block; height: 100%; overflow: hidden; position: absolute; text-indent: -9999px; top: 0; width: 32px }

.carousel-previous { background: url('images/carousel-previous.png') transparent no-repeat center; left: -32px }
.carousel-next { background: url('images/carousel-next.png') transparent no-repeat center; left: 960px }

.carousel-previous:hover { background: url('images/carousel-previous-h.png') transparent no-repeat center }
.carousel-next:hover { background: url('images/carousel-next-h.png') transparent no-repeat center }

.carousel-wrap { left: 0; position: absolute; width: 960px }

.carousel ul { list-style: none; margin: 0; padding: 0; width: 960px }
.carousel ul li { display: block; float: left; list-style: none; margin: 0; padding: 0; width: 960px }

.carousel .text { font-size: 1.2em; height: 288px; line-height: 1.25; padding: 0 16px; width: 576px }
.text strong { color: #fff }

p.more { background: #000; float: left; font-size: 1.2; font-weight: bold; line-height: 1.25; margin: 0 .5em 0 0; padding: .625em 1.6em; text-align: center; width: 6em }

p img.intro { float: left; margin: 0 1em 0 0 }

body.messenger p img.intro { display: block; float: none; margin: 0 auto; text-align: center }

.example-6 { width: 224px }
.example-6 .carousel-previous { display: none }
.example-6 .carousel-next { display: none }
.example-6 .carousel-wrap { width: 224px }
.example-6 ul { width: 224px }
.example-6 ul li { width: 224px }

#f1 { background: url('images/frame-message.png') transparent no-repeat 624px center }
#f2 { background: url('images/selexyz.png') transparent no-repeat 624px center }
#f3 { background: url('images/veer.png') transparent no-repeat 624px center }
/*#f4 { background: url('images/maublau-code.png') transparent no-repeat center; height: 18em; overflow: hidden }*/


.figure { float: left; margin: 0 1em 0 0 }
.figure ~ .figure { float: right; margin: 0 0 0 1em }
.figure ~ .figure ~ .figure { float: left; margin: 0 1em 0 0 }
.figure { float: left; margin: 0 1em 0 0 }
.figure { float: left; margin: 0 1em 0 0 }
body.verstuur-en-verfijn h2 { clear: none }

.nieuwsbrieven li { list-style: none; margin: 0; padding: 0 }

#s1 li.verstuur-en-verfijn { background: url('images/icon_sendcreate.png') transparent no-repeat left center; list-style: none; margin-left: 0; padding-left: 40px }
#s1 li.rapportage-en-analyse { background: url('images/icon_reportanalyze.png') transparent no-repeat left center; list-style: none; margin-left: 0; padding-left: 40px }
#s1 li.get-started { background: url('images/icon_getstarted.png') transparent no-repeat left center; list-style: none; margin-left: 0; padding-left: 40px }

#features dt { clear: left; float: left; margin: 0; width: 4em }
#features dd { float: left; margin: 0 0 1.5em 0; width: 9em }

#knikkers { height: 240px; position: absolute; right: 32px; top: 24px; width: 320px }

/*
body { opacity: .8 }
.wrapper { outline: 1px solid red }
html { background: url('../_sandbox/fgrid/block16.png') #666 repeat top center }
*/

body.messenger .gallery img,
body.klanten .gallery img { height: 24px }