/*
    Japak Direct mail & Fulfilment CSS
    Version: 1.0

    Kleuren:

    Lichtblauw 	:	#4bc2f0
    Blauw       :	#397fa1
    Oranje      :	#f7a11a
    Grijsblauw 	:	#577182
*/


/* -------------------------------------------------------------
 * Basic elements
 */

    /* Pagina body */
    body{
        color:#577182;
        background:#fff url(../images/bg.gif) left top repeat-x;
        font-family:Arial, Helvetica, sans-serif; font-size:10px;
        line-height:1.8em;
        margin:0 auto;
    }

    /* Kopteksten  */
    h1,h2,h3,h4,h5,h6{color:#397fa1; font-weight:bold; margin-bottom:18px;}

    h1{font-size:2.4em;}
    h2{font-size:2.2em;}
    h3{font-size:2.0em;}
    h4{font-size:2.1em;}
    h5{font-size:1.3em; color:#577182; margin-bottom:8px;}
    h6{font-size:1.6em;}

    /* Paragraven */
    p{font-size:1.2em; margin-bottom:1.8em;}

    /* Links */
    a{color:#577182; text-decoration:none; }
    a:hover{text-decoration:underline;}
    #error-links{margin:20px 0 0 5px;}
    #error-links li{list-style:none; margin-bottom:5px; background:url(../images/pijl-blauw-links.gif) left 5px no-repeat;padding-left:10px;}
    #error-links a{color:#397fa1; font-size:1.3em;}

    .no-pointer:hover{cursor:default !important;}

    .error-link{color:#f7a11a; font-size:1.3em;}

    /* Opsommingen */
    .opsom{margin-left:5px;}
        .opsom li{
            background: url(../images/oranje-blokje.gif) left 3px no-repeat;
            font-size:1.2em;
            margin-top:5px; padding-left:20px;
        }

    /* Tabellen */
    .info{font-size:1.2em;margin-bottom:105px;}
    .info-persoon{margin-bottom:10px;}
    table.print-view{display:none;}
        
        .info th{text-align:left;width:150px;}
        .info-persoon th{width:80px;}
        .info td{padding-bottom:10px;}

    /* Spacer */
    .spacer20{
        display:inline;
        float:left;
        height:20px; width:25px;
    }

    /* Print */
    #print-container{display:none;}

    /* Breadcrumbs */
    #breadcrumbs, #breadcrumbs-slider{left:224px; position:absolute; top:-42px;}
	#breadcrumbs-slider{top:-278px;}
	
	/* Top items */
	#top-items{
            font-size:1.3em;
            position:absolute; right:0; top:20px;
            width:500px;
	}

	#telefoonnr{
            display:block;
            float:right;
            margin-left:25px;
            height:20px;
            line-height:20px;
            background:url(../images/tel.png) left 1px no-repeat;
            padding-left:25px;
            font-weight:bold;
	}
	
	#top-items #link{
            display:block;
            float:left;
            height:20px;
            line-height:20px;
            color:#f7a11a;
            font-weight:bold;
	}

    #klanten-login, #klanten-ingelogd{
        display:block;
        float:right;
        margin-left:25px;
        height:20px;
        line-height:20px;
        background:url(../images/lock.png) left 1px no-repeat;
        padding-left:25px;
        font-weight:bold;
	}

    #klanten-ingelogd{
        background:url(../images/lock-open.png) left 1px no-repeat;
	}

    /* Nadruk */
    em{font-style:normal; text-decoration:underline;}
    .blue{color:#397fa1;}
    .orange{color:#f7a11a;}

    sub{font-size:.7em;}

    .hidden{visibility:hidden;}

/* -------------------------------------------------------------
 * Template
 */

    #container{margin:0 auto; width:960px;}

    /* -------------------------------------------------------------
     * Header
     */
    #header{padding-top:12px; position:relative;}
	
        /* Navigatie */
        #nav{
            background:#3d7fa1 url(../images/nav-sprite.png) left top no-repeat;
            height:45px; width:730px;
            position:absolute; right:0; top:60px;
        }
        #nav a:hover{text-decoration:none;}

            .mainnav{float:left;display: inline;}
		
                .mainnav .hoofd-item, #contact a, #contact-form a, #klant a{
                    color:#fff;
                    display:block;
                    font-family:Arial, Helvetica, sans-serif; font-size:12px;
                    height:45px; line-height:45px; width:112px;
                    text-align:center; text-decoration:none;
                }
                    #contact a, #contact-form a{width:108px;}

                    #home a{
                        display:block;
                        height:25px; width:50px;
                        padding:10px 5px;
                        text-align:center; text-decoration:none;
                    }

                    .mainnav:hover .hoofd-item, .open .hoofd-item{
                        background:#3d7fa1 url(../images/nav-sprite.png) -35px -55px no-repeat;
                        color:#1e4254;
                        cursor:pointer;
                    }

                    .mainnav:hover, .actief, .open{background:url(../images/actief.gif) center bottom no-repeat;}

                    .sub-outer{position:relative; z-index:99;}

                    .sub-inner{
                        display:none;
                        left:0; position:absolute; top:0;
                        padding-bottom:10px;
                        z-index:99;
                    }

                    .mainnav:hover .sub-inner, .open .sub-inner{display:block;}

                        .nav-hoek{
                            left:110px; position:absolute; top:-45px;
                            background:url(../images/nav-sprite.png)  -170px -55px repeat-x;
                            height:45px; width:10px;
                        }
                        .sub-inner ul{
                            background:#fff url(../images/nav-sprite.png) left -100px repeat-x;
                            border-left:1px solid #e0dfdf; border-right:1px solid #e0dfdf;
                            padding:15px 10px 10px;
                            width:201px;
                        }
                        .sub-inner .hoek{
                            background:url(../images/nav-sprite.png) right -55px no-repeat;
                            height:12px; width:81px;
                            position:absolute; right:0; top:0;
                        }
                        .sub-inner .bottom{
                            background:url(../images/nav-sprite.png) right -45px no-repeat;
                            bottom:0;
                            height:10px; width:223px;
                            left:0;
                            position:absolute;
                        }
                        .sub-inner a{
                            border-bottom:2px solid #f3f7f9;
                            color:#666;
                            display:block;
                            font-size:12px;
                            height:35px; line-height:35px;
                            padding-left:31px;
                            text-decoration:none;
                        }
                        .sub-inner a:hover, .sub-actief{background-color:#eee;}
	
	
	/* -------------------------------------------------------------
	 * Slider
	 */

        #slider{
            height:226px; width:960px;
            margin:7px 0 12px;
            position:relative;
	}
            #slider-left, #slider-right{
                position:absolute;
                height:226px;
                width:6px;
                top:0;
            }
            #slider-left{
                background:url(../images/slider-left.jpg) left top no-repeat;
                left:0;
            }
            #slider-right{
                background:url(../images/slider-right.jpg) left top no-repeat;
                right:0;
            }

            #slider-list{
                height:226px; width:948px;
                overflow:hidden;
                position:relative;
                margin:0 6px;
            }

            #slider-list li{
                list-style:none;
                background:url(../images/slider-repeat.jpg) left top repeat-x;
                display:block;
                height:226px; width:948px;
                z-index:5;
                position:absolute;
                left:0;
                top:0;
                padding:15px;
            }

            #slider-titel{
                position:absolute;
                left:692px;
                color:#fff;
                top:25px;
                font-size:1.4em;
                z-index:12;
            }
            #slide-prev, #slide-next{
                display:none;
                width:88px;
                height:28px;
                position:absolute;
                bottom:15px;
                z-index:12;
            }
            #slide-prev:hover, #slide-next:hover{
                text-decoration:none;
                color:#fff;
            }
            #slide-prev{
                left:692px;
            }
            #slide-next{
                right:25px;
            }
            #slider-list h2{
                position:absolute;
                left:686px;
                top:63px;
                color:#fff;
                width:230px;
                font-size:2.4em;
                line-height:1.2em;
            }

            #slider-list img{border:2px solid #3d7fa1;}

            #slider-list .active{z-index:7;}
            #slider-list .last-active{z-index:6;}

	
	/* -------------------------------------------------------------
	 * Content
	 */

    #homepage-video-btn{
         float:right;
    }

    .video-btn{

    }
	
	#content-outer{
            background:#f0f0f0;
            border:1px solid #ccc;
            margin-top:7px;
            width:948px;
            padding:6px 5px;
            position: relative;
	}
            #content-inner{
                background:url(../images/bg-content.gif) left top repeat-y;
                padding:40px 40px 20px;
                width:868px;
                position:relative;
            }
                #content-header, #content-footer{
                    left:0; position:absolute;
                    height:5px; width:948px;
                }
                #content-header{background:url(../images/content-header.gif) left top no-repeat; top:0;}
                #content-footer{background:url(../images/content-footer.gif) left top no-repeat; bottom:0;}


                #breadcrumbs{margin-bottom: 40px;}
                    #breadcrumbs a{text-decoration:none;}
                    #breadcrumbs a:hover{text-decoration:underline;}

                /* Kolommen */
                .col1{display:inline; float:left; width:532px;}
				.col-over-japak{width:440px !important;}
                .col2{display:inline; float:right; width:440px;}

                #contact-page{width:400px;}
                #contact-form{margin-bottom:30px;}

                #page p{width:425px;}

                    .col1 strong{font-size:12px;}

                /* Slagzin */
                #slagzin, #error-zin{
                    font-size:20px;
                    font-family:Arial;
                    line-height: 25px;
                    float:right;
                    width:255px;
                    color:#4bc2f0;
                    position:relative;
                    font-weight:normal;
                    margin-top:25px;
                }
                    #slagzin #quote, #error-zin #quote{left:-10px; position: absolute;}


                /* Page photo */
                #page-photos{float:right; margin:34px 0; overflow:hidden; height:331px; width:311px; border:2px solid #397fa1;}
                .over-japak{width:364px !important;}
                    #page-slider{
                        height:331px; width:311px;
                        position:relative;
                        overflow:hidden;
                    }
                    .over-japak #page-slider{width:364px !important;}
                        #page-slider li{
                            left:0; position:absolute; top:0;
                            list-style:none;
                            height:331px; width:311px;
                            z-index:5;
                            background-color:#fff;
                        }
                        .over-japak #page-slider li{width:364px !important;}
                        #page-slider li.active{z-index:7;}
                        #page-slider li.last-active{z-index:6;}
                
                /* Eyecatcher */
                .eyecatcher{overflow:hidden;margin-top:20px;}
                    .eyecatcher li{
                        float:left;
                        display:inline;
                        background:url(../images/bg-eyecatcher.jpg) left top no-repeat;
                        height:152px; width:228px;
                        padding:25px 20px 20px;
                    }
                    .eyecatcher .first, .eyecatcher .second{margin-right:30px;}
                        .eyecatcher h3 a{color:#397fa1;font-size:16px;font-family:Verdana;text-decoration:none;}
                        .eyecatcher .small a{font-size:14px;}
                        .eyecatcher p{width:220px; color:#397fa1; margin-top:20px;}
                        .eyecatcher .button{display:none;}

                .eyecatcher-link{border:3px solid #4bc2f0;display:block;height:95px;width:224px;margin:20px 0;}
                .eyecatcher-link:hover{border:3px solid #f7a11a;}
                .eyecatcher-current, .eyecatcher-current:hover{border:3px solid #adaea9; cursor:default;}
                    .eyecatcher-link img{margin-bottom:-5px; height:95px; width:224px;}

                .small li{
                    background:url(../images/bg-eyecatcher.jpg) left top no-repeat;
                }
                    .small h3, .small h3 a{font-size:14px;}
					
					#diervoerder, #diervoerder a{font-size:13px !important;}

            /* Box grijs */
            .box-grijs{
                background-color:#f2f0f0;
                position:relative;
            }
                .box-grijs .hoek-linksboven, .box-grijs .hoek-rechtsboven,
                .box-grijs .hoek-linksonder, .box-grijs .hoek-rechtsonder{
                    position:absolute;
                    height:9px; width:9px;
                }

                .box-grijs .hoek-linksboven{
                    background:url(../images/hoek-grijs-linksboven.jpg) left top no-repeat;
                    left:0;
                    top:0;
                }

                .box-grijs .hoek-rechtsboven{
                    background:url(../images/hoek-grijs-rechtsboven.jpg) left top no-repeat;
                    right:0;
                    top:0;
                }
                .box-grijs .hoek-linksonder{
                    background:url(../images/hoek-grijs-linksonder.jpg) left top no-repeat;
                    left:0;
                    bottom:0;
                }
                .box-grijs .hoek-rechtsonder{
                    background:url(../images/hoek-grijs-rechtsonder.jpg) left top no-repeat;
                    right:0;
                    bottom:0;
                }
           
                #motto h3{
                    font-size:28px;
                    font-family:Arial;
                    line-height:34px;
                    width:400px;
                    color:#4bc2f0;
                    position:relative;
                    font-weight:normal;
                    margin-top:5px;
                }

                .mensen{
                    width:370px;
                    padding:20px;
                    height:146px;
                    float:left;
                    display:inline;
                    margin-bottom:25px;
                    overflow:hidden;
                }

                .mensen img{
                    float:left;
                    border:2px solid #aaa;
                    margin-right:20px;
                }

                .mensen h2{
                    font-size:1.8em;
                    margin-bottom:0;
                }
                .mensen h3{
                    font-size:1.2em;
                    margin-bottom:2px;
                    color:#aaa;
                }

                .mensen p{
                    width:370px;
                    color:#3d7fa1;
                    display:inline;

                }

                #mensen-box{
                    background: url(../images/mensen-bg-repeat.gif) left top repeat-x;
                    width:865px;
                    height:394px;
                    position:relative;
                    padding-top:15px;
                    overflow:hidden;
                }
                #persoon-detail h2{
                    font-size:36px;
                    color:#f7a11a;
                    font-weight:normal;
                    margin-top:40px;
                }
                #functie-header{
                    font-size:12px;
                    color:#aaaaaa;
                    font-weight:bold;
                    margin-bottom:10px;
                }
                #mensen-box-left{
                    background: url(../images/mensen-balk-links.gif) left top no-repeat;
                    width:20px;
                    height:394px;
                    position:absolute;
                    left:0;
                    top:0;
                }
                #mensen-box-right{
                    background: url(../images/mensen-balk-rechts.gif) left top no-repeat;
                    width:20px;
                    height:394px;
                    position:absolute;
                    right:0;
                    top:0;
                }
                #kantoor-mensen{
                    overflow:hidden;
                    width:870px;
                    height:195px;
                }
                #kantoor-mensen li{
                    float:left;
                    border-right:2px solid #dbdbda;
                    width:172px;
                    text-align:center;
                    display:inline;
                }
                #kantoor-mensen a img{
                    border:3px solid #4bc2f0;
                    margin-bottom:10px;
                }
                #kantoor-mensen a:hover img{
                    border:3px solid #f7a11a;
                }
                #kantoor-mensen h3, #kantoor-mensen h3 a{
                    font-size:12px;
                    color:#397fa1;
                    font-weight:bold;
                    margin-bottom:10px;
                }
                #kantoor-mensen #last{
                    border-right:none;
                }
                #persoon-detail{
                    float:left;
                    width:425px;
                }
                #persoon-groot{
                    float:right;
                    border:2px solid #397fa1;
                    margin-top:60px;
                    margin-bottom:50px;
                }


            /* Container DIV - automatically generated */
            .simply-scroll-container {
                    position: relative;
            }

            /* Clip DIV - automatically generated */
            .simply-scroll-clip {
                    position: relative;
                    overflow: hidden;
                    z-index: 2;
            }

            /* UL/OL/DIV - the element that simplyScroll is inited on
            Class name automatically added to element */
            .simply-scroll-list {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 1;
                    overflow: hidden;
                    margin: 0;
                    padding: 0;
                    list-style: none;
            }

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

            .simply-scroll-list li img {
                    border: none;
                    display: block;
            }

            /* Custom class modifications - adds to / overrides above

            .simply-scroll is default base class */

            /* Container DIV */
            .simply-scroll {
                height:125px;
                width:860px;
                margin-bottom: 1em;
                margin:35px 0 0 27px;
            }

            /* Clip DIV */
            .simply-scroll .simply-scroll-clip {
                height:125px;
                width:815px;
            }

            /* Explicitly set height/width of each list item */
            .simply-scroll .simply-scroll-list li {
                float: left; /* Horizontal scroll only */
                margin-right:10px;
                height:125px;
                width:93px;
            }
            .simply-scroll .simply-scroll-list li img{
                border:2px solid #aaa;
                height:121px;
                width:89px;
            }

            /* Google maps */
            #locatie{
                position:absolute;
                left:-430px;
                bottom:0;
                display:none;
            }
                #map_canvas{
                   width:361px;
                   height:291px;
                   border:1px solid #ccc;
                   position:relative;
                }
                #route{color:#397fa1 !important; font-size:1.2em; position:absolute; top:-10px; right:-15px; }
                #route:hover{text-decoration:underline;}
                #map_canvas span, #map_canvas a{display:none;}

                #logocontrol a{display:inline;}

                #logocontrol img{
                   position: absolute;
                   left:10px;
                   bottom:5px;
                }


        /* -------------------------------------------------------------
	 * Formulieren
	 */

             form{padding:20px 0 20px 20px;}

             form p{position:relative; margin-bottom:25px;}

             label{
                 display:inline;
                 width:110px;
                 font-weight:bold;
                 padding-top:3px;
                 float:left;
             }
             .vereist{float:left; font-size:2em; margin: 10px 10px 0 0;}

             input.text{
                 width:254px;
                 height:18px;
                 padding:2px 5px;
                 color:#397fa1;
             }

             span.error{
                display:block;
                position:absolute;
                bottom:-20px;
                left:130px;
                color:#b23c3c;
            }

            p.melding{
                width:380px;
                padding:5px 10px;
                color:#fff;
                font-weight:bold;
            }

            p.melding.error{background-color:#f7a11a;border:1px solid #fff;}
            p.melding.succes{background-color:#4bc2f0;border:1px solid #fff;}

             textarea{
                 width:258px;
                 height:230px;
                 padding:5px;
                 color:#397fa1;
                 overflow:auto;
             }

             input.submit{
                background:#fff url(../images/button.jpg) left top no-repeat;
                color:#397fa1;
                height:27px; line-height:27px; width:87px;
                text-align:center;
                font-weight:bold;
                display:block;
                border:none;
                margin-left:130px;
             }
			 
			 .frm-submit{
				background:#fff url(../images/button.jpg) left top no-repeat;
			    color:#397fa1;
			    height:27px; line-height:27px; width:87px;
			    text-align:center;
			    font-weight:bold;
			    display:inline;
				float:left;
				margin-right:10px;
				margin-bottom:20px;
			    border:none;
			}

     /* -------------------------------------------------------------
	 * Sitemap
	 */
         #sitemap{
            width:950px;
            margin:0 auto;
         }
         #sitemap-home{
             background: url(../images/sitemap-lijn.gif)  center bottom no-repeat;
             display:block;
             width:60px;
             height:30px;
             margin-left:390px;
         }
         #sitemap ul li ul li{padding:5px 0 15px 20px;}
         #sitemap a, #sitemap span{font-size:11px;}

         #sitemap-main{width:950px;}

         #sitemap ul{margin-left:15px; text-align:left;}

         #sitemap-subpages{display:block; margin:0 50px;}

         #sitemap ul li ul li{background: url(../images/sitemap-hoek.gif)  -2px top no-repeat; border-left:2px solid #4bc2f0;}

         li.last{
             background: url(../images/sitemap-laatste-hoek.gif) left top no-repeat !important;
             border:none !important;
         }

         .main-outer{
             float:left; width:155px;
             border-top:2px solid #4bc2f0; margin:0;
             padding-top:15px;
             background: url(../images/sitemap-lijn.gif)  15px -2px no-repeat;
         }
         .main-outer-last{
             width:42px !important;
             border:none;
             background: url(../images/sitemap-laatste-lijn.gif)  -35px top no-repeat;
         }
         .main-outer-first{
             border:none;
             background: url(../images/sitemap-eerste-lijn.gif)  15px top no-repeat;
         }

         .sitemap-hoofd-item{margin-bottom:5px; display:block; width:60px;}
         .sitemap-large{width:100%!important;}


	/* -------------------------------------------------------------
	 * Footer
	 */

        #footer{color:#999; margin-top:8px;}
        	#footer ul{float:right;}
        		#footer li{float:left; margin-left:5px;}
        			#footer a{color:#999; font-size:1.2em; text-decoration: none;}
        			#footer a:hover{text-decoration: underline;}