@charset "utf-8";

/*	Happy People van Oranje STYLES
	Author:	Joey Buys, Netvlies
			
	----------------------------------------------------*/

/*	Table of contents
	= GENERIC
	= NAV STYLES
 	----------------------------------------------------*/

/*	=GENERIC
	----------------------------------------------------*/
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
	}
	
	body { background: #e0e0e0; font-family: Verdana, Arial, Helvetica, sans-serif; }
	
	#pagebox { width: 891px; margin: 20px auto; font-size: 0; line-height: 0; }
	#pagebox .top { height: 9px; background: url(../img/pagebox_top_bg.gif) no-repeat; } 
	#pagebox .bot { height: 9px; background: url(../img/pagebox_bot_bg.gif) no-repeat; }
	#pagebox .content { height: 100%; overflow: hidden; padding: 0 9px; background: url(../img/pagebox_content_bg.gif) repeat-y; }
	#pagebox .content .col-a { width: 254px; float: left; padding-bottom: 40px; }
	#pagebox .content .col-a h1.logo { padding-bottom: 40px; }
	#pagebox .content .col-a #logoAnimatie { padding-bottom: 40px; height: 320px; }
	#pagebox .content .col-b { width: 619px; float: left; }
	
	#pagebox .content .main { background:url(../img/content_main_bg.gif); padding: 30px 0 30px 36px; } 
	#pagebox .content .main .box { width: 547px; }
	#pagebox .content .main .box .top { height: 9px; background: url(../img/box_top_bg.png) no-repeat; }
	#pagebox .content .main .box .bot { height: 9px; background: url(../img/box_bot_bg.png) no-repeat; }
	#pagebox .content .main .box .content { padding: 30px 30px 0px 30px; background: url(../img/box_content_bg.png) repeat-y; color: #312f2f; font-size: 13px; line-height: 20px; }
	#pagebox .content .main .box .content p { margin-bottom: 15px; }
	#pagebox .content .main .box .content a { color: #312f2f; }
	#pagebox .content .main .box .content a:hover { text-decoration: none; }
	#pagebox .content .main .box .content span.titel { color: #ff8504; } 
	#pagebox .content .main .box .content .footer-nav { color: #857e7e; }
	#pagebox .content .main .box .content .footer-nav a { color: #857e7e; text-decoration: none; font-size: 10px; }
	#pagebox .content .main .box .content .footer-nav a:hover { color: #231f20; text-decoration: underline; }

/*	=NAV STYLES
	----------------------------------------------------*/
	#pagebox .meta-nav { height: 15px; } 
	#pagebox .meta-nav ul { float: right; margin-right: 9px; }
	#pagebox .meta-nav ul li { list-style: none; display: inline; margin-left: 10px; }
	#pagebox .meta-nav ul li a { padding-left: 20px; color: #1e1919; font-size: 11px; line-height: 15px; text-decoration: none; }
	#pagebox .meta-nav ul li a.english { background: url(../img/meta-nav_english_bg.gif) no-repeat top left; }
	#pagebox .meta-nav ul li a.contact { background: url(../img/meta-nav_contact_bg.gif) no-repeat top left; }
	#pagebox .meta-nav ul li a.nederlands { background: url(../img/meta-nav_nederlands_bg.gif) no-repeat top left; }
	#pagebox .meta-nav ul li a:hover { background-position: bottom left; text-decoration: underline; }
	
	#pagebox .content .main-nav { background: #fe4c06; height: 100%; overflow: hidden; margin-top: 43px; }
	#pagebox .content .main-nav ul li { list-style: none; display: inline; }
	#pagebox .content .main-nav ul li a { height: 73px; display: block; float: left; }
	#pagebox .content .main-nav ul li a span { display: none; }
	#pagebox .content .main-nav ul li a.home { width: 93px; background: url(../img/main-nav_home_bg.gif) top; }
	#pagebox .content .main-nav ul li a.concept { width: 100px; background: url(../img/main-nav_concept_bg.gif) top; }
	#pagebox .content .main-nav ul li a.producten { width: 123px; background: url(../img/main-nav_producten_bg.gif) top; }
	#pagebox .content .main-nav ul li a.distributie { width: 118px; background: url(../img/main-nav_distributie_bg.gif) top; }
	#pagebox .content .main-nav ul li a.wkwijn { width: 138px; background: url(../img/main-nav_wkwijn_bg.gif) top; }
	
	#pagebox .content .main-nav ul li a.about { width: 83px; background: url(../img/main-nav_about_bg.gif) top; }
	#pagebox .content .main-nav ul li a.products { width: 110px; background: url(../img/main-nav_products_bg.gif) top; }
	#pagebox .content .main-nav ul li a.distributors { width: 134px; background: url(../img/main-nav_distributors_bg.gif) top; }
	#pagebox .content .main-nav ul li a:hover { background-position: bottom; }
	#pagebox .content .main-nav ul li a.selected { background-position: bottom; }
	
	#pagebox .content .sub-nav-home { margin-left: 3px; }
	#pagebox .content .sub-nav-home li { list-style: none; display: inline; }
	#pagebox .content .sub-nav-home li a { height: 194px; display: block; float: left; }
	#pagebox .content .sub-nav-home li a span { display: none; }
	#pagebox .content .sub-nav-home li a.rode { width: 78px; background: url(../img/sub-nav_home-rw_bg.jpg) top; }
	#pagebox .content .sub-nav-home li a.witte { width: 82px; background: url(../img/sub-nav_home-ww_bg.jpg) top; }
	#pagebox .content .sub-nav-home li a.rose { width: 79px; background: url(../img/sub-nav_home-row_bg.jpg) top; }
	
	#pagebox .content .sub-nav-home li a.en_rode { width: 78px; background: url(../img/en_sub-nav_home-rw_bg.jpg) top; }
	#pagebox .content .sub-nav-home li a.en_witte { width: 82px; background: url(../img/en_sub-nav_home-ww_bg.jpg) top; }
	#pagebox .content .sub-nav-home li a.en_rose { width: 79px; background: url(../img/en_sub-nav_home-row_bg.jpg) top; }
	
	#pagebox .content .sub-nav-home li a:hover { background-position: bottom; }
	
	#pagebox .content .sub-nav { margin-left: 20px;  }
	#pagebox .content .sub-nav img.vsl { margin-left: 17px; }
	#pagebox .content .sub-nav img.vsl-concept { margin: 20px 0 0 17px; }
	#pagebox .content .sub-nav ul li { list-style: none; }
	#pagebox .content .sub-nav ul li a { width: 225px; height: 22px; display: block; background-position: top left; }
	#pagebox .content .sub-nav ul li a span { display: none; }
	#pagebox .content .sub-nav ul li a.happy-people-van-oranje { background: url(../img/sub-nav_happy-people-van-oranje_bg.gif) no-repeat; }
	#pagebox .content .sub-nav ul li a.merk { background: url(../img/sub-nav_merk_bg.gif) no-repeat; }
	#pagebox .content .sub-nav ul li a.kunstenaar { background: url(../img/sub-nav_kunstenaar_bg.gif) no-repeat; }
	#pagebox .content .sub-nav ul li a.distributeurs { background: url(../img/sub-nav_distributeurs_bg.gif) no-repeat; }
	#pagebox .content .sub-nav ul li a.rodewijn { background: url(../img/sub-nav_rodewijn_bg.gif) no-repeat; }
	#pagebox .content .sub-nav ul li a.wittewijn { background: url(../img/sub-nav_wittewijn_bg.gif) no-repeat; }
	#pagebox .content .sub-nav ul li a.rosewijn { background: url(../img/sub-nav_rosewijn_bg.gif) no-repeat; }
	
	#pagebox .content .sub-nav ul li a.en_happy-people-van-oranje { background: url(../img/en_sub-nav_happy-people-van-oranje_bg.gif) no-repeat; }
	#pagebox .content .sub-nav ul li a.en_brand { background: url(../img/en_sub-nav_brand_bg.gif) no-repeat; }
	#pagebox .content .sub-nav ul li a.en_artist { background: url(../img/en_sub-nav_artist_bg.gif) no-repeat; }
	#pagebox .content .sub-nav ul li a.en_distributors { background: url(../img/en_sub-nav_distributors_bg.gif) no-repeat; }
	#pagebox .content .sub-nav ul li a.en_redwine { background: url(../img/en_sub-nav_redwine_bg.gif) no-repeat; }
	#pagebox .content .sub-nav ul li a.en_whitewine { background: url(../img/en_sub-nav_whitewine_bg.gif) no-repeat; }
	#pagebox .content .sub-nav ul li a.en_rosewine { background: url(../img/en_sub-nav_rosewine_bg.gif) no-repeat; }
	#pagebox .content .sub-nav ul li a:hover { background-position: bottom left; }
	#pagebox .content .sub-nav ul li a.selected { background-position: bottom left; }
	
/*	=CONTACT STYLES
	----------------------------------------------------*/
	#pagebox .content .main.contact .invoer { width: 228px; height: 18px; padding: 2px 0 0 2px; border: 1px solid #5a5758; background: url(../img/contact_input_bg.gif); }
	#pagebox .content .main.contact textarea { width: 363px; height: 118px; padding: 2px 0 0 2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; border: 1px solid #5a5758; background: url(../img/contact_input_bg.gif); }
	#pagebox .content .main.contact .hdr { margin-top: 20px; }
	#pagebox .content .main.contact .btn { margin-top: 20px; }
	#pagebox .content .main.contact .box .content .error { display: block; font-weight: bold; clear: left; color: red; }

/*	=PRODUCT STYLES
	----------------------------------------------------*/	
	#pagebox .content .main.product .box .content .cat-1 { padding-bottom: 40px; background: url(../img/main_cat-1_bg.jpg) right top no-repeat; }
	#pagebox .content .main.product .box .content .cat-2 { padding-bottom: 40px; background: url(../img/main_cat-2_bg.jpg) right top no-repeat; }
	#pagebox .content .main.product .box .content .cat-3 { padding-bottom: 40px; background: url(../img/main_cat-3_bg.jpg) right top no-repeat; }
	#pagebox .content .main.product .box .content div ul li { list-style: none; padding-left: 41px; }
	#pagebox .content .main.product .box .content div ul li.beschrijving-1 { background: url(../img/product_beschrijving-1_bg.gif) left top no-repeat; }
	#pagebox .content .main.product .box .content div ul li.beschrijving-2 { background: url(../img/product_beschrijving-2_bg.gif) left top no-repeat; }
	#pagebox .content .main.product .box .content div ul li a { display: block; text-decoration: none; }
	
/*	=PRODUCT DETAIL STYLES
	----------------------------------------------------*/	
	#pagebox .content .main.productdetail .box .content .col-a { float: left; width: 365px; }
	#pagebox .content .main.productdetail .box .content .col-b { float: right; margin-right: -13px; width: 135px; }
	#pagebox .content .main.productdetail .box .content .footer-nav { clear: both; }