* {
	padding:0;
	margin:0;
}

/*
Text Colors
Bar Background #000000
Bar Static Text Color #AEB4BF
Bar Hover over Text Color #fff
*/

/*For @fontface embedded fonts, used Kingsthings Calligraphica from fontsquirrel.com, need these formats to make sure it works on all web browsers: .eot .svg .ttf .woff . woff2  Used website onlinefontconverter.com to convert .tff Css below*/
/*Bold Version of Kings Things Calligraphica*/
@font-face {
  font-family: 'KingthingsCalligraphica2';
  src: url('../fonts/kingsbold/KingthingsCalligraphica2.eot');
  src: url('../fonts/kingsbold/KingthingsCalligraphica2.woff2') format('woff2'),
       url('../fonts/kingsbold/KingthingsCalligraphica2.woff') format('woff'),
       url('../fonts/kingsbold/KingthingsCalligraphica2.ttf') format('truetype'),
       url('../fonts/kingsbold/KingthingsCalligraphica2.svg#KingthingsCalligraphica2') format('svg'),
       url('../fonts/kingsbold/KingthingsCalligraphica2.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
		font-stretch: expanded;
}

/*Light Version of Kings Things Calligraphica*/
@font-face {
  font-family: 'KingthingsCalligraphicaLight';
  src: url('../fonts/kingslight/KingthingsCalligraphicaLight.eot');
  src: url('../fonts/kingslight/KingthingsCalligraphicaLight.woff2') format('woff2'),
       url('../fonts/kingslight/KingthingsCalligraphicaLight.woff') format('woff'),
       url('../fonts/kingslight/KingthingsCalligraphicaLight.ttf') format('truetype'),
       url('../fonts/kingslight/KingthingsCalligraphicaLight.svg#KingthingsCalligraphicaLight') format('svg'),
       url('../fonts/kingslight/KingthingsCalligraphicaLight.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
	font-stretch: expanded;
}

body {
	/*background:#ddd; lightgray*/
	font-size:100%;
	font-family: Palatino, "Palatino Linotype", "Century Schoolbook L", "Times New Roman", "serif";
	background-image:url(../images/template/background.gif); 
	background-attachment:fixed;
}
div#wrapper  {
	width:940px; /*designed for 940px*/
	margin:0px auto 20px auto;  /*auto centers it*/
	background:rgba(255,255,255,.3); /*White, slightly opaque*/
	overflow:hidden;
}
header {

}

div#social {
	position:relative;
}

div#social li {
	float:right; /*Can position li elements next to each other*/
	list-style:none;
	/*background-color:#fff;*/
	padding:10px 0px 10px 10px;
}

div#social a {
	display:block; /*shows images correctly on page */
}

#fb a {
	background: url('../images/template/fb.png') 0 0; /*Upper left of image*/
	width:48px; /*width left right of image*/
	height:48px; /*top half portion of the image ONLY, NOT whole*/
	opacity:.5;
	-webkit-transition:opacity .5s;
	-moz-transition:opacity .5s;
	transition:opacity .5s;
}

#fb:hover a {
	background: url('../images/template/fb.png') 0 -48px; /*moves 130px upward overlaying bottom half of image on top half*/
	opacity:1;
}
#tw a {
	background: url('../images/template/tw.png') 0 0;
	width:48px;
	height:48px;
	opacity:.5;
	-webkit-transition:opacity .5s;
	-moz-transition:opacity .5s;
	transition:opacity .5s;
}

#tw:hover a {
	background: url('../images/template/tw.png') 0 -48px;
	opacity:1;
}
#di a {
	background: url('../images/template/di.png') 0 0;
	width:48px;
	height:48px;
	opacity:.5;
	-webkit-transition:opacity .5s;
	-moz-transition:opacity .5s;
	transition:opacity .5s;
}

#di:hover a {
	background: url('../images/template/di.png') 0 -48px;
	opacity:1;
}

nav {
	height:50px;
	line-height:50px; /*centers this vertically in nav region*/
	background:#000000/*Passive color of nav bar*/
}
nav li {
	font-family: 'KingthingsCalligraphicaLight';
	font-size:1.7em;
	font-stretch:expanded;
	float:left;
	list-style:none;
	width:12.4%;  /*8 list items means each gets ~12% of line*/
	text-align:center;
}
nav a {
	text-decoration:none; /*gets rid of underline*/
	color:#AEB4BF; /*Static color of text, was #F3E7BE*/
	display:block;  /*whole block is black*/
}
nav a:hover {
	font-family: 'KingthingsCalligraphicaLight';
	font-stretch:expanded;
	background:#000000; /*Background color on hover, Originally black*/
	color:#fff; /*Color of text on hover, was #fff all white #fff*/
	/*font-weight:bold;*/
}

footer {
	clear:both;
	padding:0 50px 0 50px;
	height:50px;
	line-height:50px; /*centers this vertically in nav region*/
	background:#000000;
}
footer li {
	font-family: 'KingthingsCalligraphicaLight';
	float:left;
	font-size:1.5em;
	list-style:none;
	width:12.4%;  /*8 list items means each gets ~12% of line*/
	text-align:center;
}
footer a {
	font-family: 'KingthingsCalligraphicaLight';
	text-decoration:none; /*gets rid of underline*/
	color:#AEB4BF; /*Static color of text, was #F3E7BE**/
	display:block;  /*whole block is black*/
}
footer a:hover {
	background:#000000;
	color:#fff;
	/*font-weight:bold;*/
}
main {
	/*height:400px;*/
	/*background:#666; /*dark gray*/
	width:660px;
	float:left;
}
main img {
	padding:10px 0px 5px 10px;
}

main td {
	vertical-align:middle;
}

main ul {
	list-style-type:square;
	list-style-position:inside;
	font-size:.9em;
	margin:10px 0px 20px 30px;
}
main li {
	padding-top:7px;
}

main ol {
	list-style-type:decimal;
	list-style-position:inside;
	margin:20px 0px 20px 30px;
	font-size:.9em;
}

div#FormWrap {
	width:100%;
}

/*div#FormWrap img {
	margin:5px 10px 5px 10px;
}

div#FormWrap input {
	margin:5px;
}
*/

div#container {
	/*background:orange;
	height:300px; GET RID of once content is added to box*/
	margin:0px 0px 20px 0px;
	clear:both; /*Use this when container is out of place. Must have this otherwise this box will be out of place on top of main, due to float main, float aside*/
	/*border-bottom:1px solid #ddd;
	padding-top:10px;*/
}


div.box1,
div.box2,
div.box3 {
/* this relates to all three boxes*/
	width:450px;
	line-height:1.5;
	padding-left:10px;
	padding-bottom:20px;
}

div.box1 {
float:left;
margin-right:20px;
}
div.box2 {
float:left;
}
div.box3 {
float:right;
}
div.box1 li, div.box2 li {
	padding-left:5px;
	padding-bottom:7px;

}

div#copyright {
	text-align:center;
	color:black;
	margin:0px auto 15px auto;  /*auto centers it*/
	background:white;
}

img {
	max-width:100%;  /*property declaration for image for responsive websites, so images fits in its container*/
	display:block; /*gets rid of strip at bottom on image that shows background*/
	border:0px;
}

.center {
	margin:0px auto; /*Centers image below footer Must use this if using display:block*/
}
.centertext {
	text-align:center;
}

.left {
float:left;
}

.right {
float:right;
}

img#logo {
	width:940px;
	margin:0px auto;  /*auto centers img in space*/
}

p {
	padding-left:20px;
	padding-right: 10px;
	margin-top:15px;
	margin-bottom:10px;
	line-height:1.4;
}

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto; 
}
img.platform {
	float:left;
	vertical-align: middle;
}

hr {
	margin-bottom: 10px;
	margin-top: 20px;
}

h1 {
  font-family: 'KingthingsCalligraphica2';
	font-size:3.157em; /*1em=16px  For relative sizes see type-scale.com*/
	line-height:1.15;
	margin-top:10px;
	margin-bottom:7px;
	color:black;
	font-weight:300;
	padding-left:5px;
}
h2 {
  font-family: 'KingthingsCalligraphicaLight';
	background:#DCE2DF; /*was #ddd*/
	font-size:2.369em; /*1em=16px */
	line-height:1.15;
	margin-top: 7px;
	margin-bottom:7px;
	color:black;
	font-weight:200;
	padding:5px 5px 5px 10px;
}
h3 {
  font-family: 'KingthingsCalligraphicaLight';
	font-size:1.777em; /*1em=16px */
	line-height:1.15;
	margin-top:5px;
	margin-bottom:10px;
	color:black;
	font-weight:200;

}
h4 {
	font-size:1.333em; /*1em=16px */
	margin-top:10px;
}

h5 {
	line-height:1.15;
	font-size:1em; /*1em=16px */
	margin-top:15px;
	margin-bottom:15px;
}

figure {
	background:#ddd; /**/
	padding:5px;
}

figcaption {
	font-size:1em;
	font-style:italic;
	background-color:#666;
	color:white;
/*padding:8px;*/
}



aside {
	/*height:250px; Get rid of this once you add content.
	background:yellow;*/
	padding-top:12px; /*This lines up baseline with h1 header of main to the left.*/
	padding-bottom: 12px;
	width:240px;
	float:right;
}

aside p {
	font-size:.9em;
	padding-bottom:5px;
	margin:0;
}

aside ul {
	font-size:.9em;
	padding-left: 30px;
	padding-bottom:5px;
	padding-top: 10px;
	margin:0;
}

aside table {
margin-top:1px;
width:99%;
background:#DCE2DF; /*was #ddd* DCE2DF/
padding-bottom:7px;
padding-top:5px
}

aside td {
	padding-left:10px;
}

aside input {
	margin-top:5px;
	margin-bottom: 5px;
}

aside input.submit {
	width: 95%;
	margin-top:5px;
	margin-bottom: 5px;
}

aside.inner {
	border:1px solid #000000;  /*was #ddd then DCE2DF*/
	padding:0px 10px 10px 10px;
	margin-top:20px;
}

aside.inner img {
 	margin:10px auto;
	padding-top: 10px;
 }

aside.inner h4 {
	text-align: center;
}

hr.line {
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px solid black;

}
aside2 {
	/*height:250px; Get rid of this once you add content.
	background:yellow;*/
	padding-top:12px; /*This lines up baseline with h1 header of main to the left.*/
	padding-bottom: 12px;
	width:300px;
	float:right;
}

aside2 p {
	font-size:.9em;
	padding-bottom:5px;
	margin:0;
}

table#MainIndex {
	width:100%;
	border-collapse: collapse;
	border:1px solid #000000;
	margin-bottom: 15px;
}

table#MainIndex tr {
	border-collapse: collapse;
	border:1px solid #000000; 
}

table.inner {
	margin-top:20px;
	margin-bottom:10px;
	width:100%;
	border-spacing:20px 0px;	
	/*border:1px solid #ddd;*/
}

table.inner img {
	padding:10px 0px 10px 0px;
}

table.inner td {
	width:50%;
}

table.games {
	margin-top: 10px;
	margin-bottom: 20px;
	width:100%;
	border-collapse: collapse;
	border:1px solid #000000; /*light gray D1D1D1*/
	text-align: center;
	font-size: 1.1em;
	vertical-align: middle;
}

table.games td {
	width:30%;
	border:1px solid #000000;
	vertical-align: middle;
	line-height:50px;
	height:50px;
	text-align:center;
	
}
table.games p {
	padding-left: 25px;
	text-align: center;
}

.link { /*to center images in a table, on games page, use div class="link" tags around images*/
    display: flex;  
    justify-content: center;
}

ul.inner, div.box1 ul, div.box2 ul, div.box3 ul{
	font-size:.9em;
	margin-top:7px;
	margin-left:15px;
	list-style-position:inside;
	list-style-type:square;
}

div#download {
	clear:both; /*Use this when container is out of place. Must have this otherwise this box will be out of place on top of main, due to float main, float aside*/
	float:left;
	margin-top:10px;
}
div#download table {
	border:1px solid #000000; /*was #ddd*/
	width:100%;
	text-align:center;
}

div#download th, div#download td {
	padding:10px;
	width:33.3%; /*3 columns - thirds*/
}

div#bottomhr {
clear:both;
}

div#pagelinks ul {
	clear:both;
	float:left;
	font-size:.8em;
	list-style-type:square;
	list-style-position:outside;
}

address {
	padding-left:20px;
}

/*iframe {
	border:0px;
	height:169px;
}*/