html,body,ul,ul li,form,img,p,h1,h2,h3,h4,dl { margin: 0; padding: 0; }
p { padding: 5px 0; }
ul,ul li { list-style-type: none; }
img { vertical-align: middle; }
a img { border: none; }

h2 { line-height: 25px; font-size: 20px; }
h3 { line-height: 20px; font-size: 15px; }

body { font-family: "Helvetica Neue","Nimbus Sans","Nimbus Sans L", arial, sans-serif; font-size: 13px; }
body.home { background: #a1c20f url("img/bghome.jpg") fixed;}
body.geboortekaartjes { background: #009ee0 url("img/bgkaartjes.jpg") fixed; }
body.hoewerkthet, body.faq { background: #e2017b url("img/bghoewerkthet.jpg") fixed; } 
body.teksten { background: #faba00 url("img/bgteksten.jpg") fixed; }
body.prijzen { background: #006bb3 url("img/bgprijzen.jpg") fixed; }
body.contact { background: #1ea12d url("img/bgcontact.jpg") fixed; }

#content { padding-top: 25px; }
#content a { text-decoration: none; }
#content a:hover { text-decoration: underline; }
#boxmodelcorrection { border: 2px solid #FFF; border-top: none; border-bottom: none; padding: 10px 35px; }
#bgbot { height: 25px; }


.home #content { background: url("img/ct_top.home-trans.png") top left no-repeat;  color: #006e3a; }
.home #content a { color: #006e3a; }
.home #bgbot { background: url("img/ct_bot.home-trans.png") top left no-repeat; }
.home #boxmodelcorrection { background: #ecf1c1; }

.geboortekaartjes #content { background: url("img/ct_top.kaarten-trans.png") top left no-repeat; color: #004779}
.geboortekaartjes #bgbot { background: url("img/ct_bot.kaarten-trans.png") top left no-repeat; }
.geboortekaartjes #boxmodelcorrection { background: #d4edf9; }

.hoewerkthet #content, .faq #content { background: url("img/ct_top.hoewerkthet-trans.png") top left no-repeat; color: #44006f;  }
.hoewerkthet #bgbot, .faq #bgbot { background: url("img/ct_bot.hoewerkthet-trans.png") top left no-repeat; }
.hoewerkthet #boxmodelcorrection, .faq #boxmodelcorrection { background: #fadde9; }

.contact #content { background: url("img/ct_top.contact-trans.png") top left no-repeat; color: #006d0d; }
.contact #bgbot { background: url("img/ct_bot.contact-trans.png") top left no-repeat; }
.contact #boxmodelcorrection { background: #f7f7da; }

.teksten #content { background: url("img/ct_top.teksten-trans.png") top left no-repeat; color: #4e3700; }
.teksten #bgbot { background: url("img/ct_bot.teksten-trans.png") top left no-repeat; }
.teksten #boxmodelcorrection { background: #fff2d6; }

.prijzen #content { background: url("img/ct_top.prijzen-trans.png") top left no-repeat; }
.prijzen #bgbot { background: url("img/ct_bot.prijzen-trans.png") top left no-repeat; }
.prijzen #boxmodelcorrection { background: #d5e6f5; }


h1 { width: 967px; margin: 0 auto; height: 197px; background: url("img/logo-trans.png") no-repeat top left; }
h1 span { visibility: hidden; }
h2.slogan {  width: 967px; margin: -100px auto 0 auto; height: 100px; color: #FFF; background: url("img/slogan-trans.png") top left no-repeat; }
h2.slogan span { margin-left: 300px; visibility: hidden; }

#content, #menu, #footer {  width: 829px; margin: 0 auto; }
#menu { height: 36px; margin-bottom: 13px; }
#menu li { float: left; display: block; width: 134px; margin-left: 5px; } 
#menu li a { display: block; line-height: 36px; text-align: center; background: url("img/test-trans.png"); color: #FFF; 
font-family: "helvetica neue", arial; font-weight: bold; text-decoration: none; font-size: 12px; text-transform: uppercase;}
#menu li:first-child { margin-left: 0; }

#menu li.kaarten a { background: url("img/blue-trans.png"); }
#menu li.hoewerkthet a { background: url("img/pink-trans.png"); }
#menu li.teksten a { background: url("img/yellow-trans.png"); }
#menu li.prijzen a { background: url("img/dblue-trans.png"); }
#menu li.contact a { background: url("img/green-trans.png"); }
#menu li.home a { background: url("img/lgreen-trans.png"); }
#menu li.kaarten a:hover { background: url("img/blueh-trans.png"); }
#menu li.hoewerkthet a:hover { background: url("img/pinkh-trans.png"); }
#menu li.teksten a:hover { background: url("img/yellowh-trans.png"); }
#menu li.prijzen a:hover { background: url("img/dblueh-trans.png"); }
#menu li.contact a:hover { background: url("img/greenh-trans.png"); }
#menu li.home a:hover { background: url("img/lgreenh-trans.png"); }

#footer { color: #FFF; font-size: 11px; padding: 10px 0; text-align: center; }

/**
 * Styling of the homepage
 **/
#flashobject { width: 243px; height: 274px; float: right; background: url("img/home_flashbg.jpg") top left no-repeat; }
div.welcome { background: url("img/welcome.jpg"); width: 497px; height: 274px; }
div.welcome h2 { padding: 0 30px; line-height: 50px; font-size: 20px; }
div.welcome p { padding: 5px 30px 0 30px; }
div.welcome p.contact { padding-top: 12px; }
#content div.welcome a.bar { text-decoration: none; display: block; background: url("img/welcome_link.jpg"); line-height: 32px; color: #FFF; font-weight: bold; font-size: 13px; margin: 12px -16px 0 -15px; padding: 0 16px; }
#content div.welcome a.bar:hover { background: url("img/welcome_linkh.jpg"); }

ul.style { clear: both; margin: 15px 0 0 -15px; }
ul.style li { background: url("img/style_dark.jpg"); float: left; width: 211px; padding-left: 30px; height: 58px; margin-left: 15px; }
ul.style li.kleuren { background: url("img/style_light.jpg"); }
ul.style li strong { display: block; line-height: 20px; font-size: 16px; margin-top: 10px; }

.home .related { height: 40px; padding: 10px 0 0 0; clear: both; margin-bottom: -10px; }
.home .related h3 { display: block; width: 150px; height: 40px; float: left; padding: 0 0 0 30px; line-height: 20px; }
.home .related a { display: block; float: left; width: 210px; line-height: 20px; }

/**
 * Styling zo werkt het
 */
#flashskyscrape { float: right; width: 200px; height: 400px; margin-top: -25px; }
.hoewerkthet #flashskyscrape { margin-top: -50px; }
.hoewerkthet #content ul, .hoewerkthet #content ul li { list-style-type: circle }
.hoewerkthet #content ul { padding-left: 20px; width: 500px; margin-bottom: 20px; }
.hoewerkthet #content li { padding: 3px 0; margin-top: 8px; }

/**
 * Styling FAQ
 * //flashobject hetzelfde als zo werkt het ...
 */
.faq #content ul { padding: 15px 0 0 15px; list-style-type: circle; }
.faq #content ul li { line-height: 18px; list-style-type: circle; }
.faq #content ul li a { font-weight: bold; color: #44006f; font-weight: bold; text-decoration: none; }
.faq #content ul li a:hover { text-decoration: underline; }
#faq { margin: 25px 0 0 0; padding: 0; width: 500px; }
#faq dd, #faq dt { margin: 0; padding: 0; }
#faq dt { font-size: 16px; font-weight: bold; line-height: 25px; margin-top: 15px; }


/**
 * Styling teksten
 **/
.teksten #content p { width: 539px; }
.teksten #content div.example { width: 262px; height: 222px; float: left; padding: 15px 0; margin: 0 15px 15px 0; }
.teksten #content div.example blockquote { margin: 0; padding: 10px 0 0 10px; }

/**
 * Styling prijzen
 */
.prijzen #content { color: #06438A; }
.prijzen table { margin-bottom: 20px; }
.prijzen table th, .prijzen table td { width: 200px; text-align: left; padding-left: 12px; line-height: 25px; background: #96B6DC; color: #000; }
.prijzen table th { font-weight: bold; }

.prijzen #content ul, .prijzen #content li { list-style-type: circle; }
.prijzen #content li { padding: 2px 0; }
.prijzen #content ul { padding: 5px 0 10px 15px;  }


/** popup */
body.popup { background: #d4edf9; }
.popup #content { background: #d4edf9; padding: 0; width: 470px; }
.popup #boxmodelcorrection { border: none; padding: 0; margin: 10px; }
/** end popup */

div.error ul { padding: 10px; }