html,
body {
    margin:0;
    padding:0;
    height:100%;
	font-family:Arial,Verdana,Sans-serif;
	font-size:100%;
	color: black;
	overflow-x:hidden;
}

* {
    box-sizing: border-box;
}

.theScreen {
}

@font-face {
  font-family: "Glory";
  src: url("GiveYouGlory.ttf");
  }

/* before anything else I want a feedback bar that doesn't move or influences the page & I don't have to constantly check the console */
.feedBack {
width:100%;
background-color: rgb(255, 0, 0);  /* Fall-back for browsers that don't support rgba  */
background-color: rgba(255, 0, 0, .5);
color:white;
text-align:center;
position:fixed;
z-index:+25;
}
  
.buttonGAM {
    background-color: #4CAF50; /* Green */
	background-color: rgba(25, 25, 200, .5);
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.backgroundCanvas {
position:fixed;
}

.centerCanvas {
position:fixed;
z-index:+1;
}

.maskCanvas {
position:fixed;
z-index:+2;
}

.interfaceCanvas {
position:fixed;
z-index:+3;
}

.loadCanvas {
position:fixed;
z-index:+4;
}

.helpCanvas {
position:fixed;
z-index:+5;
}

.adBoxLeft {
	width:160px;
	height:612px;
	float:left;
	background-color:lightblue;
	position: fixed;
	z-index:-1;
}

.adBoxRight {
	width:160px;
	height:612px;
	right: 0;
	background-color:lightgrey;
	position: fixed;
	z-index:-1;
}

.adBoxBottom {
	width:300px;
	height:50px;
	bottom: 0;
	background-color:red;
	position:absolute;
	z-index:+6;
}

.theText {
position:relative;
background-color:yellow;
z-index:+5;
}

.paypalBTN {
position:relative;
padding-left:5px;
float:right;
z-index:+5;
}

.loginBox {
background-image: url("rootImg/mainSplash_p.jpg");
background-repeat:no-repeat;
background-position:top center;
text-align:center;
top: 0;
color:white;
z-index:+10;
}

.nameForm {
z-index:+8;
background-color: rgb(153, 153, 153); 
background-color: rgba(153, 153, 153, .5);
}

.ffs {
position:fixed;
z-index:+9;
}

table {

background-color: rgb(153, 153, 153); 
background-color: rgba(153, 153, 153, .5);
}
	
.labelWidth {
	display:inline-block;
	width:50px;
}

.loginForm {
	padding-top:1px;
	padding-bottom:1px;
	background-color: rgb(153, 153, 153); 
	background-color: rgba(153, 153, 153, .5);
}

/* ========== OLD esign Starts Here ============================
.paypalBTN {
	padding-left:10px;
	float:right;
}

.buttonGAM {
    background-color: #4CAF50; /* Green 
	background-color: rgba(25, 25, 200, .5);
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.container {
}

.adBoxLeft {
	width:160px;
	height:612px;
	float:left;
	background-color:lightblue;
	position: fixed;
	z-index:+2;
}

.adBoxRight {
	width:160px;
	height:612px;
	right: 0;
	background-color:lightgrey;
	position: fixed;
	z-index:+2;
}

.adBoxCentre {
	width:300px;
	height:262px;
	float:right;
	margin-top:-50px;
	z-index:+4;
}

.adBoxCentre_in {
	width:300px;
	height:262px;
	position:fixed;
	z-index:+10;
}

.mouseCatcher {
width:340px;
height:282px;
padding-left:2px;
padding-right:2px;
padding-top:2px;
padding-bottom:2px;
position:fixed;
z-index:+8;
}

.adExplain {
width:300px;
padding-left:2px;
padding-right:2px;
padding-top:2px;
padding-bottom:2px;
background-color:red;	
color:white;
position:fixed;
z-index:+20;
}

.adClose {
width:300px;
padding-left:2px;
padding-right:2px;
padding-top:2px;
padding-bottom:2px;	
color:white;
width:300px;
position:fixed;
z-index:+20;
}

/*
position:fixed;
margin-left:auto;



.canvasBox {
/*border:1px solid #000000; 
width:100%;
text-align:center;
}

.bgCanvas {
background-image: url("img/mainSplash.jpg");
background-size:100% 100%;
}

.overCanvas {
position:fixed;
z-index:+5;
top:0;
}

.loginBox {
background-image: url("img/mainSplash.jpg");
background-repeat:no-repeat;
background-position:top center;
height:1200px;
top: 0;
color:white;
}

.loginForm {
width:60%;
margin-left:20%;
position:fixed;
z-index:+5;	
top:400px;
color:white;

text-align:left;
padding-left:20%;
}

.labelWidth {
	display:inline-block;
	width:100px;

}
	
	
/* before anything else I want a feedback bar that doesn't move or influences the page 
.feedback {
width:100%;
/* background-color: rgb(255, 0, 0);  Fall-back for browsers that don't support rgba 
background-color: rgba(255, 0, 0, .5);
color:white;
text-align:center;
position:fixed;
z-index:+25;
}

.copyBox { 
width:100%;
height:20px;
text-align:center;
position: fixed;
bottom:0;
font-size: 0.90em;
background-color:lightgrey;
z-index:+25;
}

/* not sure if I use this any more 
.feedbackBox {
padding:10px;
border:1px solid #000000;
top:-100px;
background-color: rgb(0, 153, 0); 
background-color: rgba(0, 153, 0, .5);
color:white;
text-align:center;
position:fixed;
z-index:+50;
}



form {
	border:none;
}

table {
width:60%;
margin-left:20%;
position:fixed;
z-index:+5;
border-collapse: collapse;
background-color: rgb(0, 153, 0); 
background-color: rgba(0, 153, 0, .5);
}


img.Float { 
    float: left;
	padding-right:10px;
}



/* unvisited link
a:link {
text-decoration: none;
color:blue;
}

/* mouse over link 
a:hover {
text-decoration: underline;
color:purple;
}

/* visited link 
a:visited {
text-decoration: none;
color:blue;
}


ol {
list-style-type: number;
margin-left:5px;
padding-right:10px;
margin-top:0;	
}

ol.b
 {
list-style-type: lower-alpha;
margin-left:5px;
padding-right:10px;
margin-top:0;
}

li {
margin-left:10px;
padding-left:5px;
}








.logo {
background-color: rgb(55, 55, 55);
background-color: rgba(55, 55, 55, .2);
width:60%;
margin-left:20%;
height:100px;
position: fixed;
background-image: url("header.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
z-index:+1;
}

.logoSmall {
background-color: rgb(155, 255, 155);
background-color: rgba(155, 255, 155, .2);
width:100%;
height:70px;
position: fixed;
background-image: url("header.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
z-index:+1;
}

.wideScreen {
width:60%;
margin-left:20%;
}

.fullScreen {
width:100%;
}

.menuBar {
background-color:white;
width:60%;
margin-left:20%;
margin-top:100px;
font-size: 1.10em;
height:28px;
position: fixed;
z-index:+1;
}

.menuBarSmall {
background-color:white;
width:100%;
margin-top:70px;
font-size: 0.8em;
height:22px;
position: fixed;
z-index:+1;
}


.linkBox {
float: left;
padding-left:10px;
padding-right:10px;
padding-top:6px;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}

.active {
background-color:black;
font-weight: bold;
color: white;
}

.right {
float: right;
padding-right:10px;
}


.bi {
font-weight:bold;
font-style: oblique;
}

p {
text-indent: 10px;
}

p.b{
margin-bottom:0;
margin-top:0;
}

/*
.copyBox { 
width:60%;
margin-left:20%;
height:20px;
text-align:center;
position: fixed;
bottom:0;
font-size: 0.90em;
background-color:lightgrey;
z-index:+25;
}

.copyBoxSmall { 
width:100%;
height:20px;
text-align:center;
position: fixed;
bottom:0;
font-size: 0.90em;
background-color:lightgrey;
z-index:+25;
}
*/

/* ******************* specific in game ********************** 
@font-face {
font-family: "jrhand Regular";
src: url("jrha_webfont.ttf");
}

.textBody {
background-color: rgb(230, 230, 230); 
background-color: rgba(230, 230, 230, .8);
width:60%;
margin-left:20%;
text-align:left;
padding:10px;
z-index:+10;
}

.textBodyWide {
background-color: rgb(230, 230, 230); 
background-color: rgba(230, 230, 230, .8);
width:100%;
text-align:left;
padding:10px;
}

.imageBuffer {
top:-500px;
left:-500px;
position:fixed;
}
*/