* {
	margin: 			0px;
	padding: 			0px;
	box-sizing: 		border-box;
}

html,body {
	margin: 			0px;
	height:				100%;
	width:				100%;
	font-family: 		Times;
	font-size:			13pt;
	color: 				#000000;
}

.ulsquared {
	list-style-type: 	square;
	margin:		 		1rem;
}

a:link,a:visited,a:active { 
	text-decoration: 	none; 
	color: 				black; 
}

a:hover { 
	text-decoration: 	underline; 
	color: 				black; 
}

h1 {
	font-size:			16pt;
}

h2 {
	font-size:			15pt;
}

h3 {
	font-size:			14pt;
}

h4 {
	font-size:			12pt;
}


.header {
	position:			absolute; 
	top:				0px; 
	left:				0px; 
	height:				200px; 
	right:				0px;
	overflow:			hidden;
	background: 		url("../img/general/header.png");
	background-position: center; 
	background-repeat: 	no-repeat; 
	background-size: 	auto 100%; 
}
		 
.content {
	position:			absolute; 
	top:				200px;
	bottom:				71px;
	left:				0px;
	right:				0px;
	overflow:			auto; 
	padding: 			0px 10px 0px 10px;
}

.articles {
	display: 			flex;
	flex-wrap: 			wrap;
	justify-content: 	center;
	align-items: 		baseline;
	align-content: 		flex-start;
}

.thumb {
	padding: 			20px 20px 20px 20px;
}

.prevImg {
	cursor:				pointer;
	width:				100%;
	border: 			solid 1px #343434;
	box-shadow: 		10px 10px 5px rgba(0, 0, 0, 0.2);
}

.prevMenu {
	background-color: 	#cfcfcf;
	width:				100%;
	border: 			solid 1px #343434;
	box-shadow: 		10px 10px 5px rgba(0, 0, 0, 0.2);
}

.footer {
	position:			absolute; 
	bottom:				0px; 
	height:				70px; 
	left:				0px; 
	right:				0px; 
	overflow:			hidden;
	padding: 			4px 0px 4px 0px;
	background-color: 	#009700;
	border-top: 		2px solid #000000; 
	border-bottom: 		2px solid #000000;
	text-align: 		center;
} 

.largeDetail {
	position:			absolute; 
	left:				0px; 
	right:				0px; 
	padding: 			10px 10px 10px 10px;
	border: 			0px solid #000000;
	background-color :	#FCFCFC;
	display: 			none;
	z-index:			50;
}

.detailDiv {
	position:			absolute;
	top: 				35px; 
	bottom:				10px; 
	left:				10px; 
	right:				10px;
	overflow: 			auto;
	padding: 			10px;
	font-family: 		Helvetica;
	background-position: center; 
	background-repeat: 	no-repeat; 
	background-size: 	cover; 
}


.button {
	background-color: 	#cfcfcf;
	border: 			1px black;
	color: 				#000000;
	padding: 			5px 10px;
	text-align: 		center;
	text-decoration: 	none;
	display: 			inline-block;
	font-family: 		Times;
	font-size: 			15px;
	font-weight: 		bold;
}
		
.button:hover, .button:focus {
	background-color: 	#999999;
}

.menu {
	width: 				250px;
	margin-left:		20px;
	background-color: 	#cfcfcf;
	padding:			10px;
}	

.boxMenu {
	background-color: 	#cfcfcf;
	margin-left:		20px;
	width:				280px;
	border: 			solid 1px #343434;
	box-shadow: 		10px 10px 5px rgba(0, 0, 0, 0.4);
}

.navigation {
	display: 			none;
	position: 			absolute; 
	width: 				100%;
	margin:				auto;
	background-color: 	transparent;
	z-index: 			99;
}

.button-content a:hover {
	background-color:	#d0efab;
}

.show {
	display:			block;
}	

.smallFont {
	font-size:			10pt;
}

.gridContainer {
	display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(auto-fill, 16%);
    /*grid-auto-rows: 30px;*/
}

.gridThumb {
	padding: 			6px 20px 20px 20px;
}

.gridElement 		{grid-area: span 2 / span 2 / auto / auto;}
.gridElementDBL 	{grid-area: span 4 / span 4 / auto / auto;}

.switchImage1		{}

@media only screen and (max-width: 910px) {
	.header 			{ height: 180px }
	.content 			{ top: 180px; bottom:70px }
	.footer 			{ height: 70px; }
	.navigation			{ bottom: 75px; }
	.thumb				{ width: 50%}
	.largeDetail		{ top:180px; bottom:0px; }
	.gridElement 		{grid-area: span 3 / span 3 / auto / auto;}
	.gridElementDBL 	{grid-area: span 6 / span 6 / auto / auto;}
	.switchImage1		{content: url(https://the-green-way.org/img/start/large/Greentroducing.jpg)}
}

@media only screen and (max-height: 600px) {
	.header 			{ height: 100px }
	.content 			{ top: 100px; bottom:40px }
	.footer 			{ height: 40px; }	
	.navigation			{ bottom: 45px; }
	.thumb				{ width: 50%}
	.largeDetail		{ top:100px; bottom:0px; }
	.gridElement 		{grid-area: span 3 / span 3 / auto / auto;}
	.gridElementDBL 	{grid-area: span 6 / span 6 / auto / auto;}
	.switchImage1		{content: url(https://the-green-way.org/img/start/large/Greentroducing.jpg)}
}	
@media only screen and (min-height: 601px) {
	.header 			{ height: 180px }
	.content 			{ top: 180px; bottom:70px }
	.footer 			{ height: 70px; }
	.navigation			{ bottom: 75px; }
	.thumb				{ width: 50%}
	.largeDetail		{ top:180px; bottom:0px; }
	.gridElement 		{grid-area: span 3 / span 3 / auto / auto;}
	.gridElementDBL 	{grid-area: span 6 / span 6 / auto / auto;}
	.switchImage1		{content: url(https://the-green-way.org/img/start/large/Greentroducing.jpg)}
}	

/* Desktop Styles */
@media only screen and (min-width: 1000px) {
	.header 			{ height: 120px }
	.content 			{ top: 120px; bottom:75px }
	.footer 			{ height: 70px; }
	.navigation			{ bottom: 75px; }
	.thumb				{ width: 33%}
	.largeDetail		{ top:120px; bottom:0px; }
	.gridElement 		{grid-area: span 2 / span 2 / auto / auto;}
	.gridElementDBL 	{grid-area: span 4 / span 4 / auto / auto;}
	.switchImage1		{content: url(https://the-green-way.org/img/start/large/Greentroducing.jpg)}
}


@media only screen and (max-height: 500px) {
	.header 			{ height: 60px }
	.content 			{ top: 60px; bottom:30px }
	.footer 			{ height: 40px; }	
	.navigation			{ bottom: 45px; }
	.thumb				{ width: 50%}
	.largeDetail		{ top:60px; bottom:0px; }
	.gridElement 		{grid-area: span 3 / span 3 / auto / auto;}
	.gridElementDBL 	{grid-area: span 6 / span 6 / auto / auto;}
	.switchImage1		{content: url(https://the-green-way.org/img/start/large/Greentroducing.jpg)}
}
@media only screen and (min-height: 501px) and (max-width: 500px) {
	.header 			{ height: 40px }
	.content 			{ top: 40px; bottom:40px }
	.footer 			{ height: 40px; }	
	.navigation			{ bottom: 45px; }
	.thumb				{ width: 100%}
	.largeDetail		{ top:40px; bottom:0px; }
	.gridElement 		{grid-area: span 6 / span 6 / auto / auto;}
	.gridElementDBL 	{grid-area: span 6 / span 6 / auto / auto;}
	.switchImage1		{content: url(https://the-green-way.org/img/start/small/Greentroducing.jpg)}
}
@media only screen and (min-height: 501px) and (min-width: 501px) and (max-width: 1000px){
	.header 			{ height: 60px }
	.content 			{ top: 60px; bottom:61px }
	.footer 			{ height: 60px; }
	.navigation			{ bottom: 65px; }
	.largeDetail		{ top:60px; bottom:0px; }
	.switchImage1		{content: url(https://the-green-way.org/img/start/large/Greentroducing.jpg)}
	
}

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 1px grey; 
  border-radius: 8px;
}
 
::-webkit-scrollbar-thumb {
  background: #94df7a; 
  border-radius: 8px;
  border: 1px solid #343434;
}

::-webkit-scrollbar-thumb:hover {
  background: #d0efab; 
}