/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 1000px) {
		ul.leftmenu li a {
			background-position: 220px 12px;
		}

		div.header_homepage {
			height: auto;
		}

		div.container {
			width: 900px;
		}

		div.headerbox {
			width: 860px;
		}

		.gallery_list li.col3 {
			margin-right: 20px;
		}

		div.headerbox img {
			height: auto;
			width: 185px;
		}

		div.bannerbox {
			height: 226px;
		}

		div.newslist_content {
			width: 325px;
		}

		div.middlecontainer {
			width: 566px;
		}

		div.middlecontainer div.content {
			width: 525px;
		}

		div.contentcontainer {
			margin-top: 20px;
		}

		div.contentcontainer li.hl_colomn, div.contentcontainer li.hl_colomn_last, div.hl_container {
			width: 273px;
		}

		div.contentcontainer li.hl_row {
			width: 273px;
		}

		div.contentcontainer li.hl_row .content img.title {
			width: 100%;
		}

		div.leftcontainer {
			/*width: 275px;*/
			width: 273px;
		}

		div.leftcontainer div.hl_container {
			/*width: 275px;*/
			width: 273px;
		}

		.contactbox input {
			max-width: 216px;
		}

		.contactbox textarea {
			max-width: 234px;
		}

		div.hl_container div.content {
			width: 234px;
		}

		div.footercontainer {
			width: 820px;
		}

		h1.headertitle {
			margin-left: 51px;
		}

		a.leftloginbox {
			background: url('../images/aanmelden_m1.png') no-repeat;
		}
	}

	@media only screen and (max-width: 959px) {

		div.crumbpath {
			margin-top: 0;
		}

		#mainmenu {
			display: block;
		}

		ul.leftmenu li a {
			background-position: 265px 12px;
		}

		#leftmenu_wrapper {
			display: none;
		}

		div.container {
			width: 700px;
		}

		div.header, div.defaultheader {
			height: auto;
		}

		div.headerbox {
			position: relative;
			height: auto;
			margin: 0;
			top: 0;
			width: 700px;
		}

		div.newslist_content {
			width: 420px;
		}

		div.bannerbox {
			margin-top: 10px;
			height: 230px;
		}

		div.headerbox .topmenu, div.headerbox .mainmenu {
			display: block !important;
			position: relative;
			top: 0;
			width: 700px;
		}

		div.middlecontainer {
			float: none;
		}

		div.leftcontainer {
			float: none;
		}

		div.middlecontainer div.content {
			width: 620px;
		}

		div.contentcontainer li.hl_colomn {
			width: 320px;
		}

		li.hl_colomn.col1 {
			float: right;
			margin-right: 0;
		}

		li.hl_colomn.col3 {
			margin-right: 0;
		}

		div.contentcontainer li.hl_row {
			width: 320px;
		}

		div.hl_container div.content {
			width: 280px;
		}

		div.footercontainer {
			width: 620px;
		}

		a.leftloginbox {
			background: url('../images/aanmelden_m2.png') no-repeat;
		}

		div.buttonline {
			margin: 10px;
			position: relative;
		}

		div.bannerbox {
			height: 250px;
		}
		
		div.lang_selector {
			display: none;
		}
		
		div.lang_selector_small {
			display: block;
		}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {

		.webform {
			margin-left: 0;
		}

		.webform .form-product {
			width: 100%;
		}

		.webform .form-product .product-description {
			width: 100%;
		}

		div.middlecontainer h1 {
			font-size: 18px;
			line-height: 20px;
		}

		#mainmenu div.hl_container, #mainmenu div.hl_container div.content {
			width: 370px;
		}

		ul.leftmenu li a {
			background-position: 355px 12px;
		}

		div.container {
			width: 450px;
		}

		div.slider-container {
			margin-bottom: 20px;
		}

		div.bannerbox {
			height: 240px;
		}

		.highlight {
			margin-left: 43px;
		}

		div.headerbox {
			width: 450px;
		}

		div.newslist_image {
			float: none;
		}

		div.newslist_content {
			float: none;
			width: 370px;
		}

		.flexslider .slides li {
			overflow: hidden;
		}

		.flexslider .slides img {
			height: 290px;
			width: auto;
		}

		div.headerbox .topmenu, div.headerbox .mainmenu {
			position: relative;
			top: 0;
			height: auto;
			padding: 5px 0;
			width: 450px;
		}

		div.headerbox .topmenu form table {
			float: none;
			margin-left: 10px;
		}

		a.urltitle {
			display: none;
		}

		.mnav {
			margin: 10px 75px 0 75px;
			width: 300px;
		}

		div.contentcontainer li.hl_colomn {
			width: 410px;
		}

		div.contentcontainer li.hl_row {
			width: 410px;
		}

		div.hl_container div.content {
			width: 370px;
		}

		div.footercontainer {
			width: 370px;
		}

		a.leftloginbox {
			background: url('../images/aanmelden_m3.png') no-repeat;
		}

		div.header_homepage {
			height: auto;
		}

		div.buttonline {
			margin: 0 16px 0 20px;
			height: auto;
		}

		div.middlecontainer {
			width: 410px;
		}

		div.middlecontainer div.content {
			width: 370px;
		}

		div.buttonline a {
			background: url('../images/headerbutton_m1.png') no-repeat;
			float: none;
			height: 20px;
			width: auto;
			margin: 0 0 5px 0;
		}

		div.footerfollow {
			margin-top: 20px;
		}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {

		div.middlecontainer h1 {
			margin-left: 20px;
			margin-right: 20px;
		}

		.present_table td, .present_table select {
			font-size: 10px;
		}

		.present_table select {
			width: 50px;
		}

		#mainmenu div.hl_container, #mainmenu div.hl_container div.content {
			width: 260px;
		}

		ul.leftmenu li a {
			background-position: 245px 12px;
		}

		.webform {
			margin: 0;
		}

		.webform input, .webform textarea {
			max-width: 100%;
		}

		.webform .webform_input_submit {
			margin-left: 122px;
		}


		div.contentcontainer {
			margin-left: 0;
			margin-right: 0;
		}

		div.middlecontainer {
			width: 300px;
		}

		div.middlecontainer div.content {
			width: 260px;
		}

		div.contentcontainer li.hl_colomn {
			width: 300px;
		}

		div.contentcontainer li.hl_row {
			width: 300px;
		}

		div.container {
			width: 300px;
		}

		.highlight {
			margin-left: 0;
		}

		div.newslist_content {
			width: 100%;
		}

		div.headerbox, div.headerbox .topmenu {
			width: 100%;
		}

		.mnav {
			margin: 10px 20px 0 20px;
			width: 300px;
		}

		div.hl_container h2 {
			margin-left: 20px;
			margin-right: 20px;
		}

		div.hl_container div.content {
			width: 260px;
		}

		div.crumbpath {
			margin-left: 20px;
			margin-right: 20px;
		}

		div.footercontainer {
			margin-left: 0;
			margin-right: 0;
			width: 260px;
		}

		a.leftloginbox {
			background: url('../images/aanmelden.png') no-repeat;
		}

		div.buttonline a {
			background: url('../images/headerbutton_m2.png') no-repeat;
		}

		div.headerbox .topmenu, div.headerbox .mainmenu {
			width: 100%;
		}

		div.topmenu ul li, div.mainmenu ul li.lev0, div.mainmenu ul li.lev0_active, div.mainmenu ul li.spacer {
			padding-right: 8px;
		}
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/