/* ********************************************************************** 
	320， 480， 640， 960， 1024， 1366， 1920， 2200, 3840

	orientation = portrait or landscape	
	hover = hover or none. 
	pointer = fine (mouse,stylus), coarse (touchscreen, remote control), none (keyboard).
	
	Typically:
	Smartphones, touchscreens - hover:none and pointer:coarse	
	Stylus-based screens - hover:none and pointer:fine	
	Desktop computers, laptops, touchpads - hover:hover and pointer:fine	
	Smart TVs, video game consoles - hover:hover and pointer:coarse	
	
	Typically can't hover over small touch devices like mobile phones and tablets 
		although this isn't always the case.
	
	hover and pointer aren't set the same way on all devices	 
	
	any-pointer, is better although still not perfect
	
	another issue is that devices are becoming more similar 
	
	not all -> reverses meaning, e.g. @media not all and (pointer:fine){ // means only if the pointer is coarse or none 

	my phone: hover:none, not all and (pointer:fine) // pointer is coarse or none
	my computers: hover:hover, any-pointer:fine
	
	For undetermined devices, it's best to check for: 
		size
		hover (smaller devices are typically touchscreen and can't hover)
		orientation (width of screen is larger in landscape view)
	
** ***************************** ***** ***************************** */

/* most likely a small display, a smart phone */ 
@media screen and (hover:none) {
}

/* most likely a small screen on a large display */
@media screen and (hover:hover) {
}

/* ***************************** 320px ***************************** */

/* most likely a small display, a smart phone */ 
@media screen and (min-width:320px) and (hover:none) {
}

/* most likely a small screen on a large display */
@media screen and (min-width:320px) and (hover:hover) {
}

/* ***************************** 480px ***************************** */

/* most likely a small display, a smart phone */ 
@media screen and (min-width:480px) and (hover:none) {
}

/* most likely a small screen on a large display */
@media screen and (min-width:480px) and (hover:hover) {
}


/* ***************************** 640px ***************************** */


/* ***************************** 960px ***************************** */

/* most likely a small display, a smart phone or tablet */ 
@media screen and (min-width:960px) and (hover:none) {
}

/* most likely a small display in landscape view */
@media screen and (min-width:960px) and (hover:none) and (orientation:landscape) { 
	body { padding:0rem 2rem 0.5rem 2rem; }
	
	#nav-sites, #nav-languages { text-align: right; }

	#nav-sites a, #nav-languages a { text-align:right;	
		padding:0 0.75rem 0 0.75rem; }

	/* removes rounded boarder corners */
	.banner-image { border-radius:0rem; }
	
	.link-button { width:49.5%; }

	.aside-block { display:block; }
	
	.wrapped-list { display:block;
		float:right;
		background-color:#ffffdf;
		padding:1rem;
		margin:0 0.5% 1rem 1rem;
		border-radius:0.25rem;
		width:49.5%; }

	.wrapped-list h3 { margin:0; }
	
	.list-on { display:none; } /* turn off when wrapped list is on */

	.half-box, 
	.half-text { display:inline-block; }
		
	.middle-text { vertical-align:middle; }
		
	.top-text { vertical-align:top; }				

	.third-box, 
	.fourth-box { float:left;  
		margin:0; 
		padding:0; }

	.fourth-box { width:49.9% }	

	.third-box { width:33.3%; }

	.half-box { width:49.5%;
		text-align:right; }

	.figure { display:inline-block; }

	.half-text { padding-right: 2%; 
		width: 49%;  
		text-align:center; }

	.half-youtube-video { padding-bottom:28.125%; }

	#page-footer { text-align:right; 
		background-color:#eee; }
		
	#website-logos {
		display:none;	
	}
	
	.copyright-email, .copyright-owner, .copyright-owner a { color:#222; }
	
	.copyright-owner a { text-decoration:none; }
	
	.link-button, .banner-image, .image-border, .image-rounded-border, .wrapped-list {
	border:0.125rem solid #222; }	
	
}

/* most likely a small screen on a large display */
@media screen and (min-width:960px) and (hover:hover) {
	body { padding:0rem 2rem 0.5rem 2rem; }
	
	#nav-sites, #nav-languages { text-align: right; }

	#nav-sites a, #nav-languages a { text-align:right;	
		padding:0 0.75rem 0 0.75rem; }

	/* removes rounded boarder corners */
	.banner-image { border-radius:0rem; }
	
	.link-button { width:49.5%; }

	.aside-block { display:block; }
	
	.wrapped-list { display:block;
		float:right;
		background-color:#ffffdf;
		padding:1rem;
		margin:0 0.5% 1rem 1rem;
		border-radius:0.25rem;
		width:49.5%; }

	.wrapped-list h3 { margin:0; }
	
	.list-on { display:none; } /* turn off when wrapped list is on */

	.half-box, 
	.half-text { vertical-align:middle;  
		display:inline-block; }
		
	.third-box, 
	.fourth-box { float:left;  
		margin:0; 
		padding:0; }

	.fourth-box { width:49.9% }	

	.third-box { width:33.3%; }

	.half-box { width:49.5%;
		text-align:right; }

	.figure { display:inline-block; }

	.half-text { padding-right: 2%; 
		width: 49%;  
		text-align:center; }

	.half-youtube-video { padding-bottom:28.125%; }

	#page-footer { text-align:right; 
		background-color:#eee; }
		
	#website-logos {
		display:none;	
	}
	
	.copyright-email, .copyright-owner, .copyright-owner a { color:#222; }
	
	.copyright-owner a { text-decoration:none; }
	
	.link-button, .banner-image, .image-border, .image-rounded-border, .wrapped-list {
	border:0.125rem solid #222; }	
	
}

/* ***************************** 1024px ***************************** */

/* most likely a small display, a smart phone or tablet */ 
@media screen and (min-width:1024px) and (hover:none) {
}

/* most likely a small screen on a large display */
@media screen and (min-width:1024px) and (hover:hover) {
}

/* ***************************** 1366px ***************************** */
/* typically large-screen displays */

/* most likely a small screen on a large display */
@media screen and (min-width:1366px) and (hover:hover) {
	.link-button { width:24.9%; }	
	.fourth-box { width:24.9% }	
	.link-button, .banner-image, .image-border, .image-rounded-border, .wrapped-list {
	border:0.1rem solid #222; }	
}

/* ***************************** 1920px ***************************** */
/* typically large-screen displays */

/* most likely a small display, a smart phone or tablet */ 
@media screen and (min-width:1920px) and (hover:none) {
	body { border-left:1rem solid #f9f9f9; /* 	add page borders */
			border-right:1rem solid #f9f9f9; }	/*	 add page borders */	
}

/* ***************************** 2200px ***************************** */
/* typically large-screen displays */

/* most likely a small screen on a large display */
@media screen and (min-width:2200px) and (hover:hover) {
	/* add space on outside of borders */
	body { margin:0 2rem; }	
}

/* ***************************** 3840px ***************************** */

/* 4K */

/* most likely a small screen on a large display */
@media screen and (min-width:2200px) and (hover:hover) {
}