/* reset the browsers settings */
 * {
    margin: 0;
	padding: 0;
}

html {
	height: 100%;
}
h1, h5 {
	text-align: center;
	font-family: var(--site-default-font);
	color: var(--article-text-colour);
	
}

h1 {
text-shadow: 0.1vh 0.1vw var(--article-text-colour);
}

h5 {
	text-align: center;
	padding: 1vh 0vh 0vh 0vh;
 	font-size: calc((1vw + 1vh)*0.66);
}
.title_bold {
 	font-size: calc((1vw + 1vh)*1);
font-weight: bold;

}

.nme {
	text-align: right;
	font-style: italic;
}
/* ********************************************* CSS Grid support test ************************************************************************* */
@supports not (display: grid) {
/* ********************************************* Not supported ********************************************************************************* */

body { 
    min-height: 100%;
    color: #fff;
    background: var(--page-background-colour);
	font-family: var(--site-default-font);
    text-align: center;
    font-size: 3em;
    
	/* May 2019 */
	grid-template-rows: calc((1vw + 1vh)*4) 1fr 3%;  

}  

.fall_back {

}

.old_continue {
    display: inline-block;
    border: none;
	background-color: var(--general-hover-button);
	color: white;
	border-radius: calc((1vw + 1vh)*2);
  	padding: 40px;
   	opacity: 0.8;
 	font-size: calc((1vw + 1vh)*1.8);
    cursor: pointer;
  	text-decoration: none;
}

.old_continue:hover {
	background-color: var(--nav-hover-background-colour);
}

/* turn off unused items */
#mainArticle, a, #pageFooter, #pageHeader  {
	display: none;
}

} /* end media check */

/* ********************************************* CSS Grid support test ************************************************************************* */
@supports (display: grid) {
/* ********************************************* Supported ************************************************************************************* */

.fall_back {
	display: none;
}

body { 
	display: grid;
	grid-template-columns: 12% 1fr;
	grid-template-rows: 12% 1fr 3%;  
	grid-template-areas: 
		"header header"
		"sidebar article"
		"footer footer";
	height: 100vh;
	margin: 0;
	background: var(--page-background-colour);
  }  

#mainArticle { 
	grid-area: article;      
	background: var(--article-background-colour);
	color: var(--article-text-colour);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;  
	grid-template-areas: 
		"art1 art1 art1"
		"art1 art1 art1"
		"art1 art1 art1";
	grid-gap: calc((1vh+1vw)*2);
	padding: calc((1vh+1vw)*2);
	overflow: hidden;
	font-size: calc((1vw + 1vh)*1);
}

.article_1, .article_2, .article_3 {
	font-family: var(--site-default-font);
	font-size: calc((1vw + 1vh)*0.66);
	overflow: hidden;
	text-align: justify;
	padding: 1vh 2vh 1vh 2vh;
	box-shadow: calc(0.8vw) calc(0.8vh)  calc((1vw+1vh)*1)  0 rgba(0, 0, 0, 0.2);
	border-radius: calc((1vw + 1vh)*var(--tab-radius-left)) calc((1vw + 1vh)*var(--tab-radius-right)) calc((1vw + 1vh)*var(--tab-radius-left)) calc((1vw + 1vh)*var(--tab-radius-left));
}

.article_1 {
	grid-area: art1;
	background: var(--home-article1-background-colour);
	color: var(--home-article1-text-colour);
}

.article_2 {
	grid-area: art2;
	background: var(--home-article2-background-colour);
	color: var(--home-article2-text-colour);

}

.article_3 {
	grid-area: art3;
	background: var(--home-article3-background-colour);
	color: var(--home-article3-text-colour);
	padding: 2vh 2vh 1vh 2vh;
}

#sidebar { 
	grid-area: sidebar; 
	background: var(--sidebar-background-colour);
	color: var(--sidebar-text-colour);
	display: grid;
	grid-template-rows: repeat(9, 1fr); /* 100px 100px; */
	grid-template-areas: 
		"."
		"side1"
		"side2"	
		"side3"		
		"side4"
		"side5"	
		"side6"
		"side7"
		".";
}

.side1 {
	grid-area: side1; 
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}

.side2 {
	grid-area: side2; 
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}

.side3 {
	grid-area: side3; 
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}

.side4 {
	grid-area: side4; 
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}

.side5 {
	grid-area: side5; 
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}

.side6 {
	grid-area: side6; 
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}

.side7 {
	grid-area: side7; 
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}

.button1 {
	height: 5vh;
	width: 7vw;
	font-family: var(--site-default-font);
	font-size: calc((1vw + 1vh)*0.75);
	overflow: hidden;
	text-align: justify;
	padding: 0.5vh 1vw 1vh 1vw;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: var(--sidebar-button-text-colour);
	background: var(--sidebar-button-background-colour);
	opacity: var(--sidebar-opacity-not-hovered);
	border-radius: calc((1vw + 1vh)*var(--tab-radius-left)) calc((1vw + 1vh)*var(--tab-radius-right)) calc((1vw + 1vh)*var(--tab-radius-right)) calc((1vw + 1vh)*var(--tab-radius-left));
	border: solid calc((1vw + 1vh)*0.2) #fff;
}

.button1:hover {
	color: var(--sidebar-button-hover-text-colour);
	background: var(--general-hover-button);
}





/* Stack the layout on small devices/viewports. */
/*@media all and (max-width: 600px) { */

@media only screen and (orientation: portrait) {

body { 
	display: grid;
	grid-template-columns: 12% 1fr;
	grid-template-rows: 12% 1fr 3%;  
	grid-template-areas: 
		"header header"
		"article article"
		"footer footer";
/*	height: 100vh;
	margin: 0;
	background: var(--page-background-colour);
*/
  }  

#mainArticle { 
	grid-area: article;      
/*	background: var(--article-background-colour);
	color: var(--article-text-colour);
*/
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 2fr;  
	grid-template-areas: 
		"art1 art1 art1"
		"art1 art1 art1"
		"art1 art1 art1";
	grid-gap: calc((1vh+1vw)*2);
/*	padding: calc((1vh+1vw)*2);
	overflow: hidden;
	font-size: calc((1vw + 1vh)*1);
*/
	min-height: 100vh;

}

#sidebar { 
display: none;
}

.article_1, .article_2, .article_3 {
	font-family: var(--site-default-font);
	font-size: calc((1vw + 1vh)*1);
	overflow: visible;
	text-align: justify;
	padding: 1vh 2vh 1vh 2vh;
}


} /* end of media test */

/* ********************************************* CSS Grid support test ************************************************************************* */
}