/*
    blauw        	#499eff
    donker blauw	#095e9f
    midden blauw 	#095ebf
    licht groen	    #aebfc3
    licht grijs     #d1dae3
    bijna zwart		#18171C
*/

@media screen and (min-width: 681px) {
	#home-aside {
		width: 320px;
		float: left;
	}
	
	#home-right {
		width: 400px;
		float: left;
		margin-top: 10px;
	}
}

/*  + + + + + + + + + + mobile phone landscape 680 + + + + + + + + + + */
@media screen and (max-width: 680px) and (min-width: 380px){
	#container {
		width: 100%;
		min-height: 800px;
		margin: 0;
		background: url("../ui_images/bridge.jpg") no-repeat;
		overflow: hidden;
	}
	/* + + + + + + + + + + aside + + + + + + + + + + */
	#aside {
		width: 100%;
	}
	#home-aside {
		width: 160px;
		max-width: 34%;
		float:left;
	}
	/* + + + + + header + + + + + */
	header {
		width: 45%;
		height: 100%;
		float: left;
	}
	#logoBox {
		float: left;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 4px;	
	}
	#logo {
		width: 128px;
		height: 96px;
	}
	ul.menu {
		clear: both;
		width: 128px;
		overflow: hidden;
		margin-top: 10px;
	}
	/* + + + + + kolom-aside + + + + + */
	#kolom-aside {
		width: 50%;
		float: left;
		margin-top: 10px;
		font-size: 14px;
	}
	#kolom-right {
		width: 100%;
		padding-right: 20px;
		clear: both;
	}
	#home-right {
		width: 560px;
		max-width: 60%;
		float: right;
		margin: 10px 0 0 10px;
	}
	.muziek-item audio {
		width: 100%;
	}

	.home-main #aside-content {
		padding: 6px;
		background-color: #d1dae3;
	}
	#bandinfoBox, #readmoreBox {
	margin-top: 10px;

}
	
	/* + + + + + + + + + + footer + + + + + + + + + + */
	footer {
		clear: both;
	}
}

/*  + + + + + + + + + + mobile phone portrait 480 + + + + + + + + + + */
@media screen and (max-width: 380px) {
	#container {
		width: 100%;
		min-height: 800px;
		margin: 0;
		background: url("../ui_images/bridge.jpg") no-repeat;
		overflow: hidden;
	}
	/* + + + + + + + + + + aside + + + + + + + + + + */
  	#aside, #home-aside, #kolom-right {
  		width: 100%;
  		height: auto;
  		margin: 0;
		background: none;
	}
	/* + + + + + header + + + + + */
	header {
		margin: 0;
		width: 100%;
		height: 100%;
	}
	#logoBox {
		float: left;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 4px;	
	}
	#logo {
		width: 128px;
		height: 96px;
	}
	ul.menu {
		float: left;
		width: 100%;
		overflow: hidden;
		margin-top: 10px;
	}
	
	/* + + + + + kolom-aside + + + + + */
	#kolom-aside {
		float: left;
		margin-top: 10px;
	}
	#home-right {
		width: 100%;
  		margin: -4px 10px 10px 2px;
		padding: 0 20px;
		border-left: none;
	}
	#home-right #aside-content {
		margin-right: 10px;
		padding: 6px;
		background-color: #d1dae3;
	}
	
	#aside-content h3 {
		font-size: 16px;
		height: 30px;
	}
	#bandinfoBox {
		margin-top: 10px;
	}
}