/*
 *	Tablet/mobile styles
 *
 */

/* =================== smaller laptops (macbook air) =================== */

@media only screen and (min-device-width: 1280px) and (max-device-width: 1440px) {

	/* ugly code: the individual hovers to images.. hence the + combinator */
	#bord-gianni-hover:hover + #bord-gianni-image     { margin-top:-8px; }
	#bord-malika-hover:hover + #bord-malika-image     { margin-top:-8px; }
	#bord-niels-hover:hover + #bord-niels-image       { margin-top:-8px; }
	#bord-lola-hover:hover + #bord-lola-image         { margin-top:-8px; }
	#bord-ladekast-hover:hover + #bord-ladekast-image { margin-top:-8px; }
}

/* =================== tablet / ipad =================== */

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	/* ... */	
}

/* =================== mobile / iphone =================== */

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

	/* reduce the size of the headers */	
	H1 { font-size:20px; line-height:22px; }

	/* limit the height for about texts */
	DIV.aboutContent {
		max-height:300px;
		overflow-y:scroll;
		-webkit-overflow-scrolling: touch;
	}

	/* give color to highlight: */
	/* see https://yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/ */

	#mapContainer {
		-webkit-user-select: none;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

	#mapImage {
		-webkit-user-select: none;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	
	/* we want the vimeo and lessons box to be full width on the iphone */
	#popupVideoBox 		{ width:auto; float:none; }
	#popupLessonsBox	{ width:auto; float:none; }
	
	/* ensure the list is not exceeding the window */
	#popupLessonsList	{
		max-height:100px;
		overflow-y:scroll;
		-webkit-overflow-scrolling: touch;
	}

	/* ugly code: the individual hovers to images.. hence the + combinator */
	#bord-gianni-hover:hover + #bord-gianni-image     { margin-top:-4px; }
	#bord-malika-hover:hover + #bord-malika-image     { margin-top:-4px; }
	#bord-niels-hover:hover + #bord-niels-image       { margin-top:-4px; }
	#bord-lola-hover:hover + #bord-lola-image         { margin-top:-4px; }
	#bord-ladekast-hover:hover + #bord-ladekast-image { margin-top:-4px; }

}