/*-----------------------------------------------------------------------
[Stylesheet]	layout.css

Client:		Vertel eens
Project:	Vertel eens online
Version:	1.0
Last change:	16/09/08

[Layout]
<div id="page_margins">
	<div id="page">
		<div id="header">
                        <div class="top-left"></div>
                        <div class="top"></div>
                        <div class="top-right"></div>

                        <div class="header-left"></div>
                        <div class="content_header"></div>
                        <div class="header-right"></div>

                        <div class="pathway-left"></div>
                        <div class="pathway"></div>
                        <div class="pathway-right"></div>

                        <div class="menu-left"></div>
                        <div class="menu"></div>
                        <div class="menu-right"></div>
		</div>

		<div id="hdrsize">
		</div>

		<div id="main">
                        <div class="howitworks"></div>

			<div id="col1"></div>

			<div id="col2"></div>

                        <!-- IE clearing -->
                        <div id="ie_clearing">&nbsp;</div>

                        <div class="ad_bottom"></div>
		</div>

        	<div class="content-bottom"></div>

	</div>
</div>

<div id="footer">
        <div id="footer_content"></div>
</div>

[Colors]
lightbrown [borders]:	#d9c799

[Known issues]
Mac OSX Safari & Firefox: spacing below header @ 'featured' box (div.snw)
------------------------------------------------------------------------*/


/*
 login menu
*/
div.top-left {
	position:absolute;
	left:0px;
	top:0px;
	width:10px;
	height:44px;
	background:url(../images/top_left.gif);
}

div.top {
	position:absolute;
	left:10px;
	top:0px;
	width:891px;
	height:44px;
	background:url(../images/top.gif);
}

div.top-right {
	position:absolute;
	left:901px;
	top:0px;
	width:11px;
	height:44px;
	background:url(../images/top_right.gif);
}

div.loginmenu_container {
	height:18px;

	margin-top:18px;
	height:22px;
}

div.login {
	height:22px;
	padding-right:1px;
}

div.search {
        float:left;
	height:22px;
        margin-right:1px;
}


div.helpbutton {
	float:left;
	height:18px;
	margin-left:2px;
        margin-right:5px;
	margin-top:1px;
	padding-top:3px;
	width:18px;
}


div.searchform {
	float:left;
	margin-left:3px;
}
/*
 end login menu
*/

/*
 header
*/
div.header-left {
	position:absolute;
	left:0px;
	top:44px;
	width:10px;
	height:164px;
	background:url(../images/header_left.gif);
}

div.content_header {
	position:absolute;
	left:10px;
	top:44px;
	width:891px;
	height:164px;
	z-index: 50;
}

#content_header {
	position:absolute;
	left:10px;
	top:44px;
	width:891px;
	height:164px;
    z-index: 50;
}

div.header-right {
	position:absolute;
	left:901px;
	top:44px;
	width:11px;
	height:164px;
	background:url(../images/header_right.gif);
}

/* set header size (login + flash + menu + pathway) */
#hdrsize {
	height:274px;
}
/*
 end header
*/

/*
 pathway
*/
div.pathway-left {
	position:absolute;
	left:0px;
	top:251px;
	width:13px;
	height:25px;
	background: #fff url(../images/pathway_left.gif) no-repeat;
}

div.pathway {
	position:absolute;
	left:10px;
	margin-left:3px;
        padding-top:5px;
	border-right:5px solid #fff;
	top:251px;
	width:889px;
	height:23px;
	background:url(../images/bg_nav.gif);
}

div.pathway-right {
	position:absolute;
	left:901px;
	top:251px;
	width:11px;
	height:29px;
	background: #fff url(../images/pathway_right.gif) repeat;
}

/*
 menu elements
*/
#menu_container {
	width:912px;
	height:43px;
	position:relative;
	clear:both;
}

div.menu-left {
	position:absolute;
	left:0px;
	top:208px;
	width:10px;
	height:43px;
	background:url(../images/menu_left.gif);
}


div.menu {
	position:absolute;
	left:10px;
	top:208px;
	width:891px;
	height:47px;
	/* background:url(../images/bg_menu.gif); */
	background-color:#FFF;
}

div.menu-right {
	position:absolute;
	left:901px;
	top:208px;
	width:11px;
	height:43px;
	background:url(../images/menu_right.gif);
}

#menu_image_container {
	position:absolute;
	left:0px;
	top:0px;
	width:878px;
	height:40px;
        overflow:hidden;
        border:1px solid;
        border-color:#ECECE9;
        border-style:none none solid none;
}

#dropmenudiv {
	position:absolute;
	width:150px;
        border:1px solid;
        border-color:#ecece9;
	padding-bottom:2px;
	padding-left:2px;
	padding-right:2px;
	padding-top:2px;
	text-align:left;
	z-index:100;
}

.home {
	position:absolute;
	left:0px;
	top:0px;
	width:56px;
	height:45px;
}

.oververtels, .oververteleens {
	position:absolute;
	left:61px;
	top:0px;
	width:119px;
	height:45px;
}

.onderzoek {
	position:absolute;
	left:163px;
	top:0px;
	width:96px;
	height:45px;
}

.partners {
	position:absolute;
	left:255px;
	top:0px;
	width:79px;
	height:45px;
}

.reageren, .reacties {
	position:absolute;
	left:334px;
	top:0px;
	width:81px;
	height:45px;
}

.inspiratie {
	position:absolute;
	left:428px;
	top:0px;
	width:91px;
	height:45px;
}

.webshop {
	position:absolute;
	left:517px;
	top:0px;
	width:87px;
	height:45px;
}

.nieuws {
	position:absolute;
	left:607px;
	top:0px;
	width:71px;
	height:45px;
}

.contact {
	position:absolute;
	left:679px;
	top:0px;
	width:75px;
	height:45px;
}

.vraagenantwoord, .help {
	position:absolute;
	left:754px;
	top:0px;
	width:45px;
	height:45px;
}
/*
 end menu elements
*/

/*
 main content
*/
#main {
	/* top:276px; */
	background-image:url(../images/bg_content.gif);
}

#maincopy {
	/* top:276px; */
	background-image:url(../images/bg_content.gif);
}

div.content-bottom {
	position:relative;
	width:912px;
	height:15px;
	background:url(../images/content_bottom.gif) no-repeat;
}

div.ad_bottom {
	padding-left:10px;
	padding-top:5px;
	background-image:url(../images/bg_content.gif);
}

div.howitworks {
	margin-left: 10px;
	margin-right: 10px;
	height: 290px;
	background: url(../images/bg_hwh.gif);
    overflow:hidden;
	position: relative;
}

.readon {
	width: 100px;
	height: 20px;
}

#videoframe {
	position: absolute;
	left: 215px;
	top: 0px;
}


/*
 end main content
*/

/*
 homepage slider
*/
#hwh_wrap {
	height: 320px;
	width: 822px;
	overflow: hidden;
	float: left;
}

.hwh_button {
	width: 35px;
	height: 320px;
	float: left;
}

#hwh_left {
	background: #fff url('../images/slide_left.gif') bottom left no-repeat;
}
#hwh_right {
	background: #fff url('../images/slide_right.gif') bottom right no-repeat;
}

.hwh_video {
	background-image: url('../images/hwh_vid.jpg');
	background-repeat: no-repeat;
}

/*
 modifications
*/
.subcolumns_39 { width: 892px; overflow:hidden; margin-left:10px; margin-right:10px;}

.subcolumns_39_shop { width: 892px;  margin-left:10px; margin-right:10px;}

.subcolumns_thumbs{ width: 893px; overflow:hidden; padding-left:10px; padding-right:10px;}

#footer_content img {border:none;}

#menu_image_container img {border:none;}

.floater {position: relative; float: left;}

.vertspacer_5 {height:5px;width:100%;}
.vertspacer_2 {height:2px;width:100%;}

/*
 end modifications
*/



/*
 CSS shadows by ID
 DEPRECATED

#shadow-container {
    position: relative;
    left: 3px;
    top: 3px;
	margin-top: 3px;
    margin-right: 5px;
    margin-bottom: 5px;
}

#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container {
    position: relative;
    left: -1px;
    top: -1px;
}

   #shadow-container .shadow1 {
        background: #e5e5e5;
    }

    #shadow-container .shadow2 {
        background: #e5e5e5;
    }

    #shadow-container .shadow3 {
        background: #e5e5e5;
    }

    #shadow-container .container_1 {
        background: url(../images/bg_subcol1.gif);
        border: 0px solid #848284;
        padding: 8px;
        height:250px;
    }

    #shadow-container .container_2 {
        background: url(../images/bg_subcol2.gif);
        border: 0px solid #848284;
        padding: 8px;
        height:95px;
    }

    #shadow-container .container_3 {
        background: url(../images/bg_subcol1.gif);
        border: 0px solid #848284;
        padding: 8px;
    }
/*
 end CSS shadows by ID
 DEPRECATED
*/


/*
 CSS shadows by CLASS
*/
.shadow-container {
        position: relative;
        left: 3px;
        top: 3px;
        margin-top: 3px;
        margin-right: 5px;
        margin-bottom: 5px;
}

.shadow-container .shadow2,
.shadow-container .shadow3,
.shadow-container .container {
    position: relative;
    left: -1px;
    top: -1px;
}

.shadow-container .container_1_webshop {
    position: relative;
    left: -1px;
    top: -1px;
}

   .shadow-container .shadow1 {
        background: #e5e5e5;
    }

    .shadow-container .shadow2 {
        background: #e5e5e5;
    }

    .shadow-container .shadow3 {
        background: #e5e5e5;
    }

    .shadow-container .container_1 {
        /* background: #f4f3eb url(../images/bg_subcol1.gif); */
        background: #f4f3eb url(../images/bg_subcol1.gif);
        border: 0px solid #848284;
        padding: 8px;
        height:249px;
	overflow:hidden;
    }

    .shadow-container .container_1_webshop {
        /* background: #f4f3eb url(../images/bg_subcol1.gif); */
        background: #f4f3eb url(../images/bg_subcol1.gif);
        border: 0px solid #848284;
        padding: 8px;
	height:50px; /* edit39, IE7: wat the ? */
    }

    .shadow-container .container_2 {
        /* background: #ebe3cc url(../images/bg_subcol2.gif); */
        background: #ebe3cc;
        border: 0px solid #848284;
        padding: 8px;
        height:120px;
    }

    .shadow-container .container_2_noimg {
        /* background: #ebe3cc url(../images/bg_subcol2.gif); */
        background: #ebe3cc;
        border: 0px solid #848284;
        padding: 8px;
        height:100px;
    }

	.shadow-container .container_2_noimg img {display:none;}

    .shadow-container .container_2b {
        background: #EBE3CC url(../images/webshop/cart_div_bg.gif) no-repeat scroll right top;
        border: 0px solid #848284;
        padding: 8px;
        height:120px;
    }

    .shadow-container .container_3 {
        /* background: #f4f3eb url(../images/bg_subcol1.gif); */
        background: #f4f3eb url(../images/bg_subcol1.gif);
        border: 0px solid #848284;
        padding: 8px 8px 8px;
    }

    .shadow-container .container_4 {
        /* background: #f4f3eb url(../images/bg_subcol1.gif); */
        background: #f4f3eb url(../images/bg_subcol1.gif);
        border: 0px solid #848284;
        padding: 8px;
    }


    .shadow-container .container_shop {
        /* background: #f4f3eb url(../images/bg_subcol1.gif); */
        background: #f4f3eb url(../images/bg_subcol1.gif);
        border: 0px solid #848284;
        padding: 8px;
        text-align:left;
    }



        .shadow-container_webshop {
                background-image: url(../images/bg_shop_container_bottom.gif);
                background-position: -2px bottom;
                background-repeat: no-repeat;
                position: relative;
                left: 3px;
                top: 3px;
                margin-top: 3px;
                margin-right: 3px;
                margin-bottom: 5px;
        }

        .shadow-container_webshop .container_webshop {
                background-image: url(../images/bg_shop_container.gif);
                border: none;
                padding: 0px;
                text-align:left;
                width:890px;
		display: table;
        }

        .shadow-container_webshop .container_floaters {
                background-image: url(../images/bg_shop_container.gif);
                border: none;
                padding: 8px;
                text-align:left;
                width:890px;
		display: table;
        }

        .shadow-container_webshop .shadow1_shop ,
        .shadow-container_webshop .shadow2_shop,
        .shadow-container_webshop .shadow3_shop {
                background: none;
        }

        .shadow-container_webshop .shadow2_shop,
        .shadow-container_webshop .shadow3_shop,
        .shadow-container_webshop .container {
                position: relative;
                left: -1px;
                top: -1px;
        }

        .webshop_col1 {
                width:425px;
        }

        .webshop_col2 {
                width:425px;
        }
/*
 end CSS shadows by CLASS
*/

/*
 ct fix
*/
.fp_ct {
	height:210px;
	overflow:hidden;
}
/*
 end ct fix
*/

/*
 sIFR elements
*/
.sIFR-flash {
  visibility: visible !important;
  margin: 0;
  padding: 0;
}

.sIFR-unloading .sIFR-flash {
  visibility: hidden !important;
}

.sIFR-replaced, .sIFR-ignore {
  visibility: visible !important;
  height:25px;
  overflow:hidden;
}

.sIFR-alternate {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: block;
  overflow: hidden;
}

.sIFR-replaced div.sIFR-fixfocus {
  margin: 0pt;
  padding: 0pt;
  overflow: auto;
  letter-spacing: 0px;
  float: none;
}

.sIFR-dummy {
  width: 0px;
  height: 0px;
  margin-left: 42px;
  z-index: 0;
}

.sIFR-active #main h1,
.sIFR-active #main h2 {
  font-family: Verdana;
  font-size: 18px;
  line-height: 1em;
  margin: 0.5em 0 0;
  visibility: hidden;
}

.sIFR-active #extra h2,
.sIFR-active #footer h2 {
  font-family: Verdana;
  line-height: 1em;
  font-size: 16px;
  margin: 0;
  visibility: hidden;
}

.sIFR-active #main h1 + p,
.sIFR-active #main h2 + p {
  margin-top: 0;
}

/*
 end sIFR elements
*/

/* nieuws & artikelen */
.newsart {
        background-image:url(../images/bg_news_art.gif);
        background-repeat:no-repeat;
        width:100px;
        height:100px;
}

.newsart img {
        border:medium none;
		margin:0;
		height:90px;
		width:90px;
        /*
        width:91px;
        height:91px;
        */
}

/* mijn  profiel - mijn boeken */
.mybook {
        width: 100%;
        height: 190px;
        border-bottom:1px;
        border-bottom-style:solid;
        border-bottom-color:#CCCCCC;
}

.mybook_thumb {
        float: left;
        margin-bottom: 10px;
        margin-top: 10px;
        width:125px;
        height:170px;
}

.mybook_info {
        float: left;
        width: 250px;
        margin-left: 15px;
}

.mybook_title {
        position: relative;
        width: 100%;
        float: left;
        padding-top: 10px;
}

.mybook_subtitle {
        position: relative;
        width: 100%;
        float: left;
}

#ifr, #ifr_bg {
	width: 896px;
	height: 324px;
	position:absolute;
	left: 0px;
	top: 0px;
	z-index: 2;
}

#ifr_bg {
	background-color: #fff;
}

.hwh_thumb {
        width:150px;
        height:200px;
        float:left;
        margin-top:50px;
        margin-left:4px;
        margin-right:4px;
}

.hwh_thumb_wide {
        width:180px;
        height:200px;
        float:left;
        margin-top:50px;
        margin-left:4px;
        margin-right:4px;
}