/* CSS stylesheet - WebEtui Proberen site */

/* PAGE STYLES */
body { margin:0; padding:0; background:white url(../gfx/bg_home.jpg) repeat-x; font:small Trebuchet MS; color:#555 }
div#webetui_body { background:white url(../gfx/bg_home.jpg) repeat-x }
div#page { margin:40px 40px 30px 80px }
body.website_maken div#page,
body.cms_proberen div#page { margin:20px 0 30px 20px }

body.website_maken h1, body.cms_proberen h1 { margin:0 0 5px; font-size:22px }
body.website_maken h2, body.cms_proberen h2 { margin:0; font-family:Trebuchet MS; color:#333; font-size:100%; font-weight:bold }
body.website_maken p, body.cms_proberen p { font-size:100%;  }
body.website_maken div#footer p, body.cms_proberen div#footer p { font-size:115%;  }
body.website_maken strong, body.cms_proberen strong { color:#FF5800; font-weight:bold }


/* INHOUD STYLES */
h1 { color:white; font-family:Arial Narrow; font-weight:normal; font-size:34px; margin:0 0 28px; padding:0 }
h1#potlood { margin:0; width:811px; height:217px; text-indent:-300px; font-size:1px; background-image:url(../gfx/logo_potlood.gif); background-repeat:no-repeat; }
h2 { color:#7F8083; font-family:Arial Narrow; font-weight:normal; font-size:24px; margin:0 80px 30px 0 }
h2 strong { color:#FF4814; font-weight:normal }
h3 { font-size:21px; color:#535456; font-family:Arial Narrow; font-weight:normal; margin:40px 0 10px 0 }
body.index h3 { margin-top:20px }
h3 em { color:#FF5800; font-style:normal;  }
h3 a { text-decoration:none; color:#535456 }
h4, h5 { color:#e94c1e }
h4 { font-size:100% }
h5 { font-size:90% }
p { margin:0 40px 1em 0; font-size:115%;  }
ul, ol { font-size:115% }
a { color:#e94c1e;   }
a:hover { color:#FF8800 }
a img { border:0 }
iimg { display:block; margin-left:-8px }

ol { margin:0 25px 1em 25px; padding:0 }
ul { margin:0 25px 1em 25px; padding:0 }
li { margin:3px 0 }

div.small { font-size:85% }

div#menu { height:56px; margin-left:80px; min-width:750px }
div#menu ul { margin:0; padding:0; list-style-type:none; font-size:13px }
div#menu ul li { display:inline; }
div#menu ul li a { text-decoration:none; color:white; display:block; float:left; border-left:1px solid #528BB7; border-right:1px solid #7AB1CF; padding:19px 32px; }
div#menu ul li a:hover { color:#ffdec6 }
div#menu ul li a.selected { background:#79a7c9 }

div.kolom { width:33%; float:left; padding-bottom:20px }
div.kolom p { margin-right:50px }

div.imgkader img { border:1px solid #7f8083; float:left; margin:0 }
div.kader { background:#e0ebf3; border:1px solid #7f8083; padding:6px 20px 13px; margin:0 40px 24px 266px }
div.kader h3 { margin-top:10px }
div.kader a { text-decoration:none; color:#3e769e }
div.kader a:hover { color:#e94c1e }
div.kader table { border:0; background:none; width:auto }
div.kader table td { border:0; padding:2px 8px 2px 0; vertical-align:top }
div.kader table td.c1 { width:80px }

div#logo { float:left; margin-left:0px; padding:9px 34px 0 10px }
div#telefoon { display:none; color:white; float:left; background:url(../gfx/phone.gif) no-repeat; background-position:20px 19px; padding:19px 44px 19px 54px;  }

body.index div#logo { display:none }
body.index div#telefoon { display:block }

div.mapkader { position:relative; padding-right:296px; margin-right:37px  }
div#map { height:366px; margin:0 0px 30px 0; border:1px solid #7f8083; }
div.contactfotos { display:block; position:absolute; right:0px; top:0 }
div.contactfotos div.address { padding:12px 20px 11px; margin-bottom:3px; width:227px; font-size:10px; font-weight:bold; font-style:normal; background:#e0ebf3; border:1px solid #7f8083; line-height:15px }
div.contactfotos div.address p { margin:0 }
div.contactfotos p { margin:0 }
div.contactfotos img { display:block;border:1px solid #7f8083;  }
div.kleinefotos img { float:left; margin:3px 3px 0 0;  }

/* tabel */
table { width:686px; border-top:1px solid #CCC; border-left:1px solid #CCC; background:white }
th em { font-style:normal; color:#FF5800 }
td strong { color:#FF5800 }
td, th { padding:2px 12px;  }
td, th {  border-bottom:1px solid #CCC; border-right:1px solid #CCC }
th { padding:4px 12px; background:white url(../gfx/tdbg.jpg) repeat-x;  }
div.tarieven table { font-size:85% }
div.tarieven td.c2, div.tarieven td.c3, div.tarieven td.c4 { text-align:center }
td img { display:inline }

div.waarom table { margin:15px 0 30px 10px; width:auto }
div.waarom table td { width:350px; background:white url(../gfx/vinkje.gif) no-repeat; background-position:9px 6px; padding:6px 12px 6px 32px }
div.waarom img { margin:0 0 20px 10px; border:1px solid #ccc }

/* rechts */
div.rechts { float:right; font-size:80%; width:220px; top:14px; right:20px }
div.rechts h2 { font:small Arial; font-weight:bold; margin:0 0 0.8em }
div.rechts li { margin:0 0 5px 0 }
div.rechts p { line-height:1.5em }
div.rechts a { font-weight:normal }

/* footer */
div#footer { clear:both; font-size:10px; border-top:1px solid #ccc; padding:3px 0; margin:60px 40px 30px 0;  }
div#footer ul { margin:0; padding:0;  }
div#footer li { list-style-type:none; display:inline; padding:0 10px 0 15px; background-image:url(../gfx/streepje.gif); background-repeat:no-repeat; background-position:0 8px }
div#footer li#cms_proberen { padding-left:0; background:none }
div#footer a  { text-decoration:none;  }
div#footer p { position:absolute; right:40px; }
div#footer a.selected {color:#FF6600; text-decoration:underline }
div#footer a:hover { color:#FF8800 }

/* website maken */
div.websitemaken { border:1px solid #ccc; background:#e4eef8 url(../gfx/tdbg.jpg) repeat-x; padding:20px; height:430px; width:930px }
div.websitemaken h2 { color:#FF5800; font:21px Arial Narrow, sans-serif; font-weight:100 }
div.websitemaken label { display:block; font-size:11px; font-weight:bold; margin:18px 0 3px; width:auto }
div.websitemaken input.url { width:80px; }
div.websitemaken input.text { width:180px; font:12px Trebuchet MS; margin:0 }
div.websitemaken input.submit {  background-image:url(../gfx/button_big.gif); height:24px; width:177px; border:0;color:white; font:11px Arial; font-weight:bold; margin:24px 0 6px 0; padding:0px 0 0px 18px; cursor:pointer; text-align:left;  }
div.websitemaken textarea { display:block; font:12px Trebuchet MS; width:180px; height:110px; margin:0 }
div.websitemaken div.comment { width:200px; font-size:11px; display:block; color:#777; margin:4px 0 6px }
form#formulier div.website { width:200px; float:left; }
form#formulier div.persoonlijk { width:210px; float:left;  }
form#formulier div.vormgeving { width:450px; margin:0 30px; float:left;  }
form { margin:0; padding:0 }
input.text, input.url, textarea { font:12px Trebuchet MS; border:1px solid #555; padding:0 }

form#formulier div#template {  background:white; border:1px solid #555; width:416px; height:278px; font-family:Arial }
div#websitetitle { color:#CCC; font-size:18px; text-align:right; padding:3px 10px }
div#websitemenu { background:#066504; color:white; padding:3px 10px }
div#websitemenu span { padding:0 12px 0 0 }
div#websitepage { padding:20px; width:376px }
div#websitepage h1 { color:#066504; font-family:Arial;font-size:14px; font-style:normal; font-weight:bold; margin:0 0 4px; padding:0 }
div#websitepage h2 { color:#066504; font-family:Arial; font-size:11px; font-weight:bold; margin:0 0 6px; padding:0 }
div#websitepage ul { margin:0 0 0 16px; padding:0 }
div#websitepage ul li { background:none; list-style-type:disc; padding:0; margin:0 0 2px }
div#template { font-size:70% }

div#colors { margin:12px 0 0 0 }
div#colors label,
div#fonts label { float:left; margin:0; padding:1px 8px 0 0 }
div#colors a { display:block; width:16px; height:16px; border:1px solid #E4EEF8; float:left; cursor:pointer; margin:0 2px 0 0; text-decoration:none }
div#colors a.selected, div#colors a:hover { border:1px solid #555 }
input#input_websitecolor { width:50px; margin-left:5px }

div#fonts { font-size:12px; margin:12px 0; line-height:22px }
div#fonts a { padding:0 10px;  cursor:pointer; font-weight:normal; color:black; text-decoration:none }
div#fonts a.selected, div#fonts a:hover { color:#FF5400 }