﻿/* ========================
Pepper Interactive
www.pepper-interactive.nl

Colors
-------------
007ac9 - Blue
66afdf - Light blue
99cae9 - Light blue
8c9a9e - Gray
======================== */

html {
    overflow: -moz-scrollbars-vertical;
}
body
{
    margin:0;
    padding:0;
    font-family: Arial,Helvetica,Sans-serif;
    font-size: 12px;
    line-height: 18px;
	color:#000000;
}

/* Tekst
--------------------------------------------------- */

h1, h2, h3, h4, h5
{
    font-size:20px;
    line-height:21px;
    font-weight:bold;
	color:#007ac9;
	margin:15px 0;
}
a
{
    color:#007ac9;
	text-decoration:none;
}
a:hover 
{
    text-decoration:underline;
}
img
{
    border:0;
}

/* Template
--------------------------------------------------- */
.wrapper
{
    width:960px;
    margin:0 auto;
    overflow:auto;
}
/* Header
--------------------------- */
.header
{
	height:100px;
}
	.header-left
	{
		float:left;
		width:220px;
	}
		.logo
		{
			margin-left:-3px;
			position:absolute;
		}
		.logo p
		{
            margin:0;
		}
	.header-right
	{
		float:left;
		width:740px;
		margin-left:220px;
	}
		.header-blocks
		{
			width:740px;
			height:70px;
		}
		.header-blocks ul, .header-blocks li
		{
			margin:0;
			padding:0;
		}
		.header-blocks li
		{
			list-style-type:none;
			float:left;
			text-align:center;
			width:133px;
			margin:5px 0 0 5px;
			height:16px;
			padding:5px;
		}
		.header-blocks-block
		{
		    background:url('../images/background_headerblock.png') 0 0;
		}
			.header-blocks-block a
		    {
		        margin:0 2px;
		    }
		.search .searchfield
		{
			border:0;
		}
		.menu
		{
			width:740px;
		}
		.menu ul, .menu li
		{
			margin:0;
			padding:0;
		}
		.menu li
		{
			list-style-type:none;
			float:left;
			text-align:center;
		}
		.menu li a
		{
			text-decoration:none;
			padding:7px 0;
			margin-left:5px;
			display:block;
			color:#565656;
			background:url('../images/button.png') 0 0;
			width:143px;
			height:16px;
			color:white;
			font-weight:bold;
		}
		.menu li .Selected, .menu li a:hover
		{
			background:url('../images/button.png') 0 -30px;
		}
/* Content
--------------------------- */
.content
{
    overflow:auto;
    width:960px;
}
	.info-block
	{
		width:960px;
		margin-top:5px;
	}
		.info-block-left
		{
			float:left;
			width:588px;
			height:291px;
			overflow:hidden;
		}
		.info-block-right
		{
			float:left;
			background:url('../images/background_infoblock.png') 0 0;
			width:367px;
			height:291px;
			overflow:hidden;
			margin-left:5px;
		}
			.info-block-right h2
			{
			    font-size:25px;
				line-height:30px;
				margin-left:25px;
				font-weight:bold;
				color:White
			}
			.info-block-right h3
			{
			    font-size:20px;
				margin-left:25px;
				line-height:25px;
				font-weight:bold;
				color:White
			}
			.info-block-right p
			{
			    font-size:12px;
				margin-left:25px;
				line-height:22px;
				font-weight:bold;
				color:White
			}
	.content-left
	{
		width:390px;
		float:left;
		min-height:444px;
		margin-right:20px;
	}
		.content-left p, .content-right p
		{
			margin-left:10px;
		}
		.content-left h1, .content-right h1, .content-left h2, .content-right h2
		{
			background:url('../images/background_heading.png') 0 0 no-repeat;
			display: block;
			padding: 5px 0;
		}
	.content-right
	{
		width:390px;
		float:left;
		margin-right:17px;
	}
	.news-block
	{
		width:143px;
		float:left;
		overflow:hidden;
	}
		.news-block h2
		{
			background:url('../images/background_heading_news.png') 0 0 no-repeat;
			display: block;
			padding: 5px 0 20px;
			margin-bottom:0;
		}
		.news-block-text
	    {
		    width:143px;
		    background-color:#e3e7e9;
		    overflow:auto;
	    }
	        .news-block h3
	        {
		        font-size:16px;
		        line-height:20px;
		        margin:7px 5px;
		        font-weight:bold;
		        color:#007ac9
	        }
	        .news-block p
	        {
		        font-size:11px;
		        line-height:14px;
		        margin:7px 5px;
	        }
	        .news-block .button-news
	        {
		        margin:5px;
	        }
	    .news-block-text-bottom
	    {
	        background:url('../images/background_newsblock_bottom.png') 0 0 no-repeat;
		    width:143px;
	        height:5px;
	    }
/* --------------- Subpage --------------- */	
.content-sub
{
    background:url('../images/background_content_sub.png') 0 0 repeat-y;
    overflow:auto;
    min-height:400px;
}
.menu-sub
{
    width:220px;
    float:left;
    padding-top:40px;
}
	.menu-sub ul, .menu-sub li
	{
		margin:0;
		padding:0;
	}
	.menu-sub li
	{
		list-style-type:none;
		float:left;
		text-align:left;
	}
	.menu-sub li a
	{
		text-decoration:none;
		padding:7px 10px;
		display:block;
		color:#99cae9;
		width:200px;
		font-weight:bold;
	}
	.menu-sub .Selected, .menu-sub li a:hover
	{
		background-color:#66afdf;
		color:white;
	}
.crumbs
{
    width:740px;
    height:30px;
    float:left;
}
.content-sub-right
{
    width:700px;
    float:left;
    padding:0 20px;
}
	.content-sub-right h1, .content-sub-right h2
	{
		background:url('../images/background_heading.png') 0 0 no-repeat;
		display: block;
		padding: 5px 0;
	}
	.content-sub-right p
	{
		margin-left:10px;
	}
.content-sub-bottom
{
	background:url('../images/background_content_sub_bottom.png') 0 0 no-repeat;
	width:960px;
	height:6px;
}
/* --------------- News --------------- */
.news-wrapper
{
    padding:10px 0;
    width:740px;
    overflow:auto;
}
    .news-item
    {
        height:144px;
        width:730px;
        overflow:auto;
        background:url('../images/background_news.png') 0 0 no-repeat;
        padding:1px 5px 7px 5px;
    }
        .news-img
        {
            height:143px;
            width:143px;
            float:left;
        }
        .news-text
        {
            height:123px;
            width:546px;
            float:left;
            padding:10px;
        }
            .news-text h2
            {
                background:none;
                display:inherit;
                padding:0;
                margin:0 5px;
            }
            .news-text p
            {
                margin:5px;
            }
            .button-news
            {
                margin:0 5px;
                background:url('../images/button_news.png') 0 0 no-repeat;
                display:block;
                height:17px;
                width:79px;
                color:White;
                font-size:10px;
                text-align:center;
                line-height:17px;
            }
            .button-news:hover
            {
                text-decoration:none;
                background:url('../images/button_news.png') 0 -17px no-repeat;
            }
            .divider
            {
                color:#cad2d5;
                margin:0 5px;
            }
/* --------------- Products --------------- */
.product-wrapper
{
    padding:10px 0;
    width:738px;
    overflow:auto;
    margin-left:2px;
}
    .product-item
    {
        height:180px;
        width:239px;
        overflow:hidden;
        background:url('../images/background_product_item.png') 0 0 no-repeat;
        padding:2px;
        margin-left:3px;
        float:left;
    }
    .product-item h2
    {
        background:none;
        display:inherit;
        padding:0;
        margin:0 5px;
        font-size:14px;
        line-height:20px;
    }
/* --------------- Contact formulier --------------- */
.content-sub-right label 
{
    padding:4px 5px;
}
.content-sub-right input 
{
    border: 1px solid #b5b8c8;
    height: 20px;
    padding: 2px;
    margin: 4px 0 8px 5px;
    width: 194px !important;
}
.content-sub-right textarea 
{
    border: 1px solid #b5b8c8;
    height: 120px;
    margin: 4px 0 8px 5px;
    padding: 2px;
    width: 194px;
}
.x-form-element
{
    padding: 10px 0 !important;
}
.x-combo-list-item
{
    border: 1px solid #b5b8c8;
    border-top:0;
    width: 192px;
    cursor:pointer;
    padding:2px;
}
.contact-form-button 
{
    background-color:#007AC9;
    border: 0 none;
    color: white;
    cursor: pointer;
    height: 30px;
    margin: 0 10px;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    width: 200px;
}
.contact-form-button:hover 
{
    background-color:#29a2f1;
}
/* Footer
--------------------------- */
.footer 
{
    background:url('../images/background_footer.png') center top no-repeat;
    color:#8c9a9e;
    overflow:auto;
    margin-top:10px;
    padding-top:5px;
    font-size:10px;
}
    .footer ul, .footer li
    {
	    margin:0;
	    padding:0;
    }
    .footer li
    {
	    list-style-type:none;
	    float:left;
	    text-align:left;
    }
    .footer-left
    {
        width:600px;
        float:left;
        font-weight:bold;
    }
    .footer-left li
    {
        margin-left:10px;
    }
    .footer-right
    {
        width:360px;
        float:left;
    }
    .footer-right li
    {
        margin-right:20px;
        float:right;
    }
    .footer-right li a
    {
        color:#8c9a9e;
    }
