/*@import url('http://fonts.googleapis.com/css?family=Open+Sans') /* https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file i dunno...*/

@font-face { /*Host a font? https://stackoverflow.com/questions/32610902/font-not-showing-properly-in-html-page*/
	font-family: 'Segoe Script';
	src: /*url('webfont.eot'); /* IE9 Compat Modes */
	/*src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		/*url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
		/*url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
		url('segoesc.ttf')  format('truetype'); /* Safari, Android, iOS */
		/*url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	   
}
	
body{
	color: Tomato;
	font-family: Segoe Script, British Shorthair, Cool Jazz, Arial, Helvetica, sans-serif;/*arial narrow; verdana;*/
	font-size: 1.5em;
	/*text-shadow: -1px 1px 0px yellow;/*vertical holizontal blur colour*/

}

a{
	text-decoration: underline;
}

#h2MainPageFeaturedTitle,
#h2MainPageFeaturedSubTitle{
	color:inherit;
}

#imgMainPageFeaturedImage{
	position: static;
	max-height: 100%;/* 1000px;*/
	max-width: 100%;
}

.DivMainPageArrowDisplacer{
	height:45%;
}

#divMainPageLeftArrow{
	position: absolute;
	height: 100%;
	left: 10px;
}

#divMainPageRightArrow{
	position: absolute;
	height: 100%;
	right: 10px;
}

.Arrow {
	position: static;
	padding: 2px;
	height: 92px;
	max-width: 92px;
}
	.Arrow:hover {
		opacity: 0.2;
		}

.Flex {
	width: auto;	
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/*Scene selector on the main page*/

/*other stuff*/
ol{
	color: green;
	
	text-align: left;
}

li{
	color: green;
	/*font: inherit;*/
	text-align: left;
}


p{
	/*color: grey; moved to body{}*/
}

	a:link {color:red; /*default state*/
		/*text-decoration:none;*/
	}	
				
	a:visited{color:red;
	}
				
	a:hover{ /*background-color:blue; /*cursor over the link*/
		color:white;
	}
				
	a:active{ background-color:orange; /*while holding down LMButton*/
	}
	
h1, h2, h3, h4, h5, h6 {
		/*color:grey;*/
		text-align:center;
}

h3{
	.a {text-align:left;}
	}

body{
	/*background-image:url(art/background_repetitive_1.jpeg)*/
	background-image: linear-gradient(to right, black, #2F0000 20%, #2F0000 80%, black) /*orange,yellow,green,blue,indigo,violet);*/
}

#divJoinButton{
	bottom: 0px;
	position: fixed;
	width: 100%;
}

#joinButton{
	text-align: center;
}

#otherScenes{
	position: static;
	/*background-color:black;*/
}
.Outer{ /*styh called box model http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div*/
	/*margin: 2px;*/
	/*border: solid 1px black;*/
    padding-top: 3%;
	padding-left: 1%;
	padding-right: 1%;
	padding-bottom: 1%;
	margin-top: 1%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 1%;
    text-align: center;
}

.Inner{ /*styh called box model http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div*/
	/*height: 310px; /*should accommodate .thumb below*/
	/*border: solid 1px black;*/
    padding-top: 1%;
	padding-left: 1%;
	padding-right: 1%;
	padding-bottom: 1%;
	margin-top: 1%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 1%;
    text-align: center;
}

.Desc {
	/*border: solid 1px black;*/
    padding-top: 1%;
	padding-left: 1%;
	padding-right: 1%;
	padding-bottom: 1%;
	margin-top: 1%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 1%;
    text-align: center;
}

.Thumb {
    /*padding: 2%;*/
	/*border: solid 1px black;*/
    padding-top: 1%;
	padding-left: 1%;
	padding-right: 1%;
	padding-bottom: 1%;
	margin-top: 1%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 1%;
    text-align: center;
	
	max-height: 300px;
	max-width: 100%;
	
}


.Thumb:hover {
	transform: scale(1.02, 1.02);

}


.Banner {
    margin: 5px;
    border: 1px solid #ccc;
    float: left; /*left, right, inherit<*/
    width: auto;
	max-width: 400px;
	max-height:150px;
}

/*styling class: "button"	ref: https://stackoverflow.com/questions/11689427/resizing-a-button*/
.Button {	
	background-color: #000000;
    color: #FFFFFF;
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin:10px;
	width: auto;
	text-shadow: none;/*vertical holizontal blur colour*/
}
    
.Adaptive-btn {	
	margin: 5px;
	border: 1px solid #ccc;
	float: left; /*left, right, inherit<*/
   }
   
	.Adaptive-btn:hover {
		opacity: 0.5;
		}