@charset "UTF-8";

/* 
 * CSS Document for WHG Design
 * @copyright	2009 WHG Design. All Rights Reserved.
 * @link		http://www.whgdesign.nl/
 *
 */

* {border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; color:#444; margin:0; padding:0; font:400 13px Trebuchet MS, Arial, Helvetica, sans-serif;}
html {background:#f8f8f8;}
.content {width:940px; margin:0 auto;}
.totalscreen {width:1000px; margin:0 auto;}
.clear {clear:both;}
.topheading {margin-top:0;}
.tweedspacer {height:99px;}
p.spacer {display:inline-block; height:10px;}

/*--- TEXT ---*/

h2 {font:700 30px Trebuchet MS, Arial, Helvetica, sans-serif; margin:22px auto; letter-spacing:1.5px; word-spacing:2px;}
h3 {font:700 24px Trebuchet MS, Arial, Helvetica, sans-serif; margin:20px auto; letter-spacing:0; word-spacing:0;}
h4 {font:700 20px Trebuchet MS, Arial, Helvetica, sans-serif; margin:18px auto; letter-spacing:0; word-spacing:0;}
h5 {font:700 18px Trebuchet MS, Arial, Helvetica, sans-serif; margin:16px auto; letter-spacing:0; word-spacing:0;}
h6 {font:700 16px Trebuchet MS, Arial, Helvetica, sans-serif; margin:14px auto; letter-spacing:0; word-spacing:0;}
p {font:400 13px/1.4 Trebuchet MS, Arial, Helvetica, sans-serif; margin-bottom:10px; letter-spacing:0.5px; word-spacing:1.2px;}
a {text-decoration:none; color:#5f9e0e;}
a:hover {color:#444;}
a img {border:none;}
strong {font-weight:700;}
blockquote {width:820px; background:url(../images/quote.png) no-repeat top right;}
blockquote p {margin:5px; padding:20px 40px 0 10px; margin:-15px 0; font:italic 400 12px/1.7 Trebuchet MS, Arial, Helvetica, sans-serif;}
blockquote p em {font:700 20px Trebuchet MS, Arial, Helvetica, sans-serif;}
blockquote cite {margin:0 5px;}
blockquote cite a {font:italic 400 12px Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:-0.2px; color:#5f9e0e;}
blockquote cite a.website {font:italic 400 12px Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:-0.2px; color:#5f9e0e;}
address {margin-bottom:10px; font:400 13px/1.3 Trebuchet MS, Arial, Helvetica, sans-serif;}

/*------ FORM ------*/

form {clear:both; padding-top:20px; width:40%;}
fieldset {border-bottom:1px dashed #dbdbdb; padding:5px;}
label {font:400 13px/1.4 Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:0.5px; word-spacing:1.2px; margin-left:10px;}
form input {float:right; width:200px; border:1px solid #bdbdbd; background:#fff url(images/input_bkg.gif) repeat-x top left; padding:3px 6px; font:400 13px Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:2px; color:#707070; margin:5px 10px 10px 10px;}
form select {float:right; width:200px; border:1px solid #bdbdbd; background:#fff url(images/input_bkg.gif) repeat-x top left; padding:3px 6px; font:400 13px Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:2px; color:#707070; margin:5px 10px 10px 10px;}
form input.checkbox {float:right; width:10px; margin:5px 10px;}
form textarea {float:right; width:250px; border:1px solid #bdbdbd; background:#fff url(/images/input_bkg.gif) repeat-x top left; padding:3px 6px; font:400 15px Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:2px; color:#707070; margin:5px 10px 10px 10px;}
form input:hover ,form textarea:hover, form input:focus ,form textarea:focus {border:1px solid #707070;}
form button {background:#ebebeb; padding:5px 10px; margin:0px;}
form button:hover {background:#99ce35;}

form.webhostingaanmeld {width:800px; margin:0 auto;}
form.webhostingaanmeld small {font-size:10px;}
form.webhostingaanmeld p {margin:0 0 10px 0; font-size:12px; color:#777;}
form.webhostingaanmeld h4 {margin:20px 0 10px 0;}
form.webhostingaanmeld h6 {margin:0;}
form.webhostingaanmeld label {margin:6px 0 0 10px;}
form.webhostingaanmeld span {color:#5f9e0e;}
form.webhostingaanmeld input {float:none; width:150px; margin-left:20px;}
form.webhostingaanmeld select {float:none; width:230px; margin-left:20px; padding:3px 6px 3px 1px;}
form.webhostingaanmeld select em {font-size:10px; color:red;}
form.webhostingaanmeld select option em {font-size:10px; color:red;}
form.webhostingaanmeld input.radio {float:none; margin:0;}
form.webhostingaanmeld input.checkbox {float:none; margin:0; padding:0;}
form.webhostingaanmeld table {width:400px; margin:10px 0 10px 50px; padding-bottom:20px; border-bottom:1px dashed #dbdbdb;}

/*------ LIST ------*/

#main ul {}
#main ul li {list-style-type:none; list-style-position:outside; background:url(../images/bullet_green.png) left top no-repeat; line-height:16px; padding-left:25px; margin-bottom:5px;}
#main ol {}
#main ol li {list-style-position:inside; font-style:italic; line-height:16px; margin-bottom:5px;} 

/*--- HEADER ---*/

#headertop {width:100%; height:75px; background:url(../images/top_bkg.gif) repeat-x top left;}

#logo {float:left; text-indent:-9999px; margin-top:14px;}
#logo a {display:block; width:196px; height:47px; background:url(../images/logo.png) no-repeat;}

ul#nav {float:right; margin-top:25.5px;}
ul#nav li {list-style:none; display:inline-block; float:left; margin-right:10px;}

ul#nav li a {display:block; cursor:pointer; height:24px; padding-right:8px;}
ul#nav li a:hover {display:block; background:url(../images/nav_item_hover.png) no-repeat right top;}
ul#nav li.on a {display:block; background:url(../images/nav_item_active.png) no-repeat right top;}

ul#nav li a span {display:block; height:24px; padding:2px 0 0 8px; color:#fff; font:700 13px Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:0.5px;}
ul#nav li a:hover span {background:url(../images/nav_item_hover.png) no-repeat left -24px;}
ul#nav li.on a span {background:url(../images/nav_item_active.png) no-repeat left -24px;}

#header {width:100%; height:150px; background:url(../images/header_normal_bkg.jpg) repeat-x;}
#header.home {width:100%; height:325px; background:url(../images/header_home_bkg.jpg) repeat-x;}

h1#title {display:block; text-indent:-999px;}
h1#title.home {width:223px; height:0; background:none;}
h1#title.diensten {width:223px; height:150px; background:url(../images/title_diensten.png) no-repeat left 55.5px;}
h1#title.webhosting {width:302px; height:150px; background:url(../images/title_webhosting.png) no-repeat left 55.5px;}
h1#title.portfolio {width:220px; height:150px; background:url(../images/title_portfolio.png) no-repeat left 55.5px;}
h1#title.overons {width:225px; height:150px; background:url(../images/title_overons.png) no-repeat left 55.5px;}
h1#title.contact {width:199px; height:150px; background:url(../images/title_contact.png) no-repeat left 55.5px;}
h1#title.referenties {width:282px; height:150px; background:url(../images/title_referenties.png) no-repeat left 55.5px;}
h1#title.algemenevoorwaarden {width:600px; height:150px; background:url(../images/title_algemenevoorwaarden.png) no-repeat left 55.5px;}

#topcolumns {width:100%; height:150px; background:url(../images/header_bottom_bkg.gif) repeat-x top left;}
#topcolumns .content {width:960px;}
#topcolumns .columns4 {width:100%; height:100%; color:#fff;}
#topcolumns .columns4:hover {background:#168ad1 url(../images/columnstop_hover.jpg) no-repeat top center;}
#topcolumns a {position:relative; display:block; width:220px; height:45px; cursor:pointer; padding:8px 10px 5px 10px; font:400 12px/1.4 Trebuchet MS, Arial, Helvetica, sans-serif; text-indent:-9999px;}
#topcolumns a.head1 {background:url(../images/col_title_webdesign.png) no-repeat left top;}
#topcolumns a.head2 {background:url(../images/col_title_seo.png) no-repeat left top;}
#topcolumns a.head3 {background:url(../images/col_title_development.png) no-repeat left top;}
#topcolumns a.head4 {background:url(../images/col_title_printdesign.png) no-repeat left top;}
#topcolumns p {margin:0px 10px 10px 10px; font:400 12px/1.3 Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:0.2px; word-spacing:2px; color:#fff;}

/*--- SLIDER ---*/

#sliderbox {position:relative; top:1px; left:0; width:100%;}
#slider {width:820px; height:325px; margin:0 auto;}
#slider ul, #slider li {margin:0; padding:0; list-style:none;}
#slider li {width:820px; height:325px; overflow:hidden;}	
#prevBtn, #nextBtn {display:block; width:32px; height:32px; position:relative; margin-bottom:0;}	
#nextBtn {top:-194.5px; left:914px;}	
#prevBtn {top:-162.5px; left:-30px;}												
#prevBtn a, #nextBtn a {display:block; width:43px; height:42px;}
#nextBtn a {background:url(../images/arrow_next.png) no-repeat 0 0;}
#prevBtn a {background:url(../images/arrow_prev.png) no-repeat 0 0;}

/*--- MAIN ---*/

#main {margin:50px auto;}
#main a {border-bottom:1px dotted #5f9e0e;}
#main a:hover {color:#444; border-bottom:1px dotted #444;}

#main .kerstkaarten {float:left; width:600px; padding:0 30px 50px 0;}
#main img.kaart {width:300px; padding-top:40px; height:216px;}

/*--- SUBBUTTONS ---*/

ul#submenu {width:581px; margin:30px auto;}
ul#submenu li {float:left; display:inline-block; list-style:none; width:163px; height:44px; padding:0; margin:0 14px 60px 14px; text-indent:-9999px; background:none;}
ul#submenu li a {display:block; width:163px; height:44px; border:none;}
ul#submenu li a:hover {border:none; text-decoration:none;}
ul#submenu li.webdesign a {background:url(../images/sub_webdesign.jpg) no-repeat;}
ul#submenu li.webdesign a.active, ul#submenu li.webdesign a:hover {background:url(../images/sub_webdesign_active.jpg) no-repeat;}
ul#submenu li.printdesign a {background:url(../images/sub_print.jpg) no-repeat;}
ul#submenu li.printdesign a.active, ul#submenu li.printdesign a:hover {background:url(../images/sub_print_active.jpg) no-repeat;}
ul#submenu li.overige a {background:url(../images/sub_overige.jpg) no-repeat;}
ul#submenu li.overige a.active, ul#submenu li.overige a:hover {background:url(../images/sub_overige_active.jpg) no-repeat;}

/*--- PORTFOLIO ---*/

#portfolio ul {float:left; width:820px; margin:20px 0 0 60px;}
#portfolio ul li {display:block; float:left; list-style:none; width:220px; padding:0; margin:0 0 70px 60px; background:none;}
#portfolio ul li.first {margin-left:30px;}
#portfolio ul li a img {display:block; height:220px; border:none;}
#portfolio ul li a {border:none;}
#portfolio ul li a:hover img {border:none;}
#portfolio ul li h5{color:#1379b7;}
#portfolio ul li p {margin-bottom:5px; letter-spacing:0; word-spacing:0;}
#portfolio ul li small {font:italic 400 12px Trebuchet MS, Arial, Helvetica, sans-serif; line-height:1.6; color:#787878;}

/*--- WEBHOSTING ---*/

#webhosting h4 {display:block; width:700px; text-align:center; font-size:22px; font-weight:400; color:#787878; line-height:1.5}
#webhosting h4 em {font-size:22px; font-weight:700; color:#444;}
#webhosting p.toptext {display:block; width:700px; text-align:center;; margin:0 auto;}
#webhosting #plans {width:786px; margin:40px auto;}

#webhosting #plans .basic {display:block; float:left; width:222px; margin:30px 10px; border:none; background:#fff url(../images/webhosting_headbox_small.png) no-repeat top left;}
#webhosting #plans .basic h3 {margin:0 0 -2px; text-align:center; font-weight:400; font-size:22px; color:#fff;}
#webhosting #plans .basic p {margin:-2px; text-align:center; font-size:20px; color:#fff;}
#webhosting #plans .basic p sup {margin:0; font-size:10px; vertical-align:super; color:#fff;}
#webhosting #plans .basic ul {padding:0 0 6px 0; background:url(../images/webhosting_footerbox_small.png) no-repeat left bottom;}
#webhosting #plans .basic ul li {margin:0; padding:8px 0 8px 15px; border-left:1px solid #dfdfdf; border-right:1px solid #dfdfdf; background:none;}
#webhosting #plans .basic ul li span {padding:6px 10px 6px 35px; border-bottom:1px solid #ececec; background:url(../images/tick.png) 5px 6px no-repeat; color:#787878}
#webhosting #plans .basic ul li.last span {border-bottom:none; background:url(../images/tick.png) 5px 6px no-repeat;}

#webhosting #plans .pro {display:block; float:left; width:282px; margin:0 10px; border:none; background:#fff url(../images/webhosting_headbox_big.png) no-repeat top left;}
#webhosting #plans .pro h3 {margin:12px 0 3px; text-align:center; font-weight:400; font-size:24px; color:#fff;}
#webhosting #plans .pro p {margin:0 0 6px 0; text-align:center; font-size:22px; color:#fff;}
#webhosting #plans .pro p sup {margin:0; font-size:12px; vertical-align:super; color:#fff;}
#webhosting #plans .pro ul {padding:0 0 6px 0; background:url(../images/webhosting_footerbox_big.png) no-repeat left bottom;}
#webhosting #plans .pro ul li {margin:0; padding:10px 20px; border-left:1px solid #dfdfdf; border-right:1px solid #dfdfdf; background:none;}
#webhosting #plans .pro ul li span {font-size:14px; padding:6px 10px 6px 35px; border-bottom:1px solid #ececec; background:url(../images/tick.png) 5px 6px no-repeat; color:#787878}
#webhosting #plans .pro ul li.last span {border-bottom:none; background:url(../images/tick.png) 5px 6px no-repeat;}

#webhosting #plans .advanced {display:block; float:left; width:222px; margin:30px 10px; border:none; background:#fff url(../images/webhosting_headbox_small.png) no-repeat top left;}
#webhosting #plans .advanced h3 {margin:0 0 -2px; text-align:center; font-weight:400; font-size:22px; color:#fff;}
#webhosting #plans .advanced p {margin:-2px; text-align:center; font-size:20px; color:#fff;}
#webhosting #plans .advanced p sup {margin:0; font-size:10px; vertical-align:super; color:#fff;}
#webhosting #plans .advanced ul {padding:0 0 6px 0; background:url(../images/webhosting_footerbox_small.png) no-repeat left bottom;}
#webhosting #plans .advanced ul li {margin:0; padding:8px 0 8px 15px; border-left:1px solid #dfdfdf; border-right:1px solid #dfdfdf; background:none;}
#webhosting #plans .advanced ul li span {padding:6px 10px 6px 35px; border-bottom:1px solid #ececec; background:url(../images/tick.png) 5px 6px no-repeat; color:#787878}
#webhosting #plans .advanced ul li.last span {border-bottom:none; background:url(../images/tick.png) 5px 6px no-repeat;}

#webhosting .colleft {float:left; width:600px; margin:40px 0 0 100px;}
#webhosting .colright {float:right; margin:60px 0 0 0;}
#webhosting .colright ul li {border-bottom:1px solid #ececec; padding:5px 0 5px 25px; background:url(../images/bullet_add.png) no-repeat left 5px;}
#webhosting .colright ul li.last {border-bottom:none;}

/*--- COLUMNS ---*/

.columns2 {float:left; width:460px; margin-bottom:20px; margin-left:10px;}
.columns3 {float:left; width:300px; margin-bottom:20px; margin-left:10px;}
.columns4 {float:left; width:220px; margin-bottom:20px; margin-left:10px;}

.first {margin-left:0;}

#topcolumns .columns4 {width:240px; margin:10px 0 0 0;}

/*--- LISTS ---*/

#boxlist {width:842px; margin:0 auto;}
#boxlist .box_top {width:842px; height:11px; margin-top:20px; background:url(../images/box_top.jpg) no-repeat top left;}
#boxlist .box_middle {width:842px; height:100%; padding:10px; background:url(../images/box_middle.jpg) repeat-y;}
#boxlist .box_middle img {float:left; margin-top:5px;}
#boxlist .box_middle h5 {margin:5px 0 5px 73px;}
#boxlist .box_middle p {margin:0 40px 10px 73px;}
#boxlist .box_middle ul {margin:0 40px 10px 73px;}
#boxlist .box_bottom {width:842px; height:11px; margin-bottom:20px; background:url(../images/box_bottom.jpg) no-repeat bottom left;}

/*--- QUOTES ---*/

#quotes {width:702px; margin:20px auto;}
#quotes .box_small_top {width:702px; height:11px; background:url(../images/box_small_top.jpg) no-repeat top left;}
#quotes .box_small_middle {width:702px; height:100%; padding:5px; background:url(../images/box_small_middle.jpg) repeat-y;}
#quotes .box_small_middle blockquote {height:100%; width:682px; margin:5px 10px 5px 5px; background:url(../images/quote.png) no-repeat top right;}
#quotes .box_small_middle blockquote p {padding:10px 40px 10px 10px; font:italic 400 12px/1.8 Trebuchet MS, Arial, Helvetica, sans-serif;}
#quotes .box_small_middle blockquote p em {font:700 16px Trebuchet MS, Arial, Helvetica, sans-serif;}
#quotes .box_small_middle cite {margin-top:10px; font:italic 400 12px Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:-0.2px; color:#5f9e0e;}
#quotes .box_small_middle cite:hover {color:#444;}
#quotes .box_small_bottom {width:702px; height:11px; margin-bottom:20px; background:url(../images/box_small_bottom.jpg) no-repeat bottom left;}


/*--- FOOTER ---*/

#footer {height:390px; background:url(../images/footer_bkg.gif) repeat-x bottom left;}

#tweets {width:820px; height:99px; position:relative; top:10px; left:0; background:url(../images/twitterbird.gif) no-repeat bottom left;}
#tweet {width:100%; margin:0 0 0 85px; background:url(../images/tweed_right_bkg.gif) no-repeat top right;}
#tweet li {list-style:none; height:46px; padding:4px 10px 0 0; margin-right:10px; font:400 12px Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:0.2px; word-spacing:1px; background:url(../images/tweed_bkg.gif) repeat-x top right;}
#tweet small {margin-left:10px; font:italic 400 11px Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:0;}
#tweet .hash {font:400 12px Trebuchet MS, Arial, Helvetica, sans-serif; color:#5f9e0e;}
#tweet .reply {font:400 12px Trebuchet MS, Arial, Helvetica, sans-serif; color:#5f9e0e;}
#tweet a {color:#5f9e0e; border-bottom:1px dotted #5f9e0e; font:400 12px Trebuchet MS, Arial, Helvetica, sans-serif;}
#tweet a:hover {color:#444; border-bottom:1px dotted #444;}

#topbottom {height:65px;}

ul#bottomnav {float:right; margin-top:20.5px;}
ul#bottomnav li {list-style:none; display:inline-block; float:left; margin-right:10px;}

ul#bottomnav li a {display:block; cursor:pointer; height:24px; padding-right:8px;}
ul#bottomnav li a:hover {display:block; background:url(../images/bottomnav_item_hover.png) no-repeat right top;}

ul#bottomnav li a span {display:block; height:24px; padding:2px 0 0 8px; color:#fff; font:700 12px Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:0.5px;}
ul#bottomnav li a:hover span {background:url(../images/bottomnav_item_hover.png) no-repeat left -24px;}

#bottom .footer1 {float:left; width:300px; margin:10px 10px 14px 20px;}
#bottom .footer1 h5.contact {height:30px; padding:15px 0 0 68px; margin-bottom:5px; background:url(../images/contact.png) no-repeat left top; color:#fff;}
#bottom .footer1 address {padding-left:68px; color:#cbcbcb;}
#bottom .footer1 a {font:400 13px/1.3 Trebuchet MS, Arial, Helvetica, sans-serif; color:#cbcbcb;}
#bottom .footer1 a:hover {color:#5f9e0e;}

#bottom .footer2 {float:left; width:300px; margin:10px 0 0 10px;}
#bottom .footer2 h5.touch {height:30px; padding:15px 0 0 68px; margin-bottom:5px; background:url(../images/tag-green.png) no-repeat left top; color:#fff;}
#bottom .footer2 li {list-style:none; margin-bottom:4px;}
#bottom .footer2 li a {height:16px; margin:0 0 3px 68px; padding:0 0 2px 30px; font:400 12px Trebuchet MS, Arial, Helvetica, sans-serif; color:#cbcbcb;}
#bottom .footer2 li a:hover {color:#5f9e0e;}
#bottom .footer2 li.twitter a {background:url(../images/mini_twitter.gif) no-repeat left center;}
#bottom .footer2 li.hyves a {background:url(../images/mini_hyves.gif) no-repeat left center;}
#bottom .footer2 li.facebook a {background:url(../images/mini_facebook.png) no-repeat left center;}
#bottom .footer2 li.flickr a {background:url(../images/mini_flickr.gif) no-repeat left center;}
#bottom .footer2 li.vimeo a {background:url(../images/mini_vimeo.gif) no-repeat left center;}

#bottom .footer3 {float:left; width:300px; margin:10px 0 0 10px;}
#bottom .footer3 h5.links {height:30px; padding:15px 0 0 68px; margin-bottom:5px; background:url(../images/links.png) no-repeat left top; color:#fff;}
#bottom .footer3 ul li {list-style-type:none; list-style-position:outside; background:url(../images/bullet_blue.png) left top no-repeat; line-height:16px; padding-left:25px; margin:0 0 5px 68px;}
#bottom .footer3 ul li a {font:400 12px Trebuchet MS, Arial, Helvetica, sans-serif; color:#cbcbcb;}
#bottom .footer3 ul li a:hover {color:#5f9e0e;}

#copyright {text-align:center; font:400 10.5px Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:0px; word-spacing:0px; color:#989898;}
#copyright a {font:400 10.5px Trebuchet MS, Arial, Helvetica, sans-serif; letter-spacing:0px; word-spacing:0px; color:#5f9e0e;}
#copyright a:hover {color:#989898;}