@import url(https://fonts.googleapis.com/css?family=Roboto); /*-- Navigation, H1, H2 and H3 Font --*/
@import url(https://fonts.googleapis.com/css?family=Orbitron); /*-- H1 Heading Font --*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans); /*-- Body Font --*/

* {
	margin: 0;
	border: 0;
	padding: 0;
}
body {
	background-color: #999999;                 /* Dark grey */
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
}
h1 {
	font-family: 'Orbitron', sans-serif;
	text-align: center;
	font-size: 170%;
	color: #0B3C5D;                            /* Prussian blue */
	text-transform: uppercase;
	letter-spacing: 3px;
	padding: 3% 0 3% 0;
}
h1 a {
	text-decoration: none;
	color: #0B3C5D;                            /* Prussian blue */
}
h1 a:hover {
    color: #4484CE;                            /* Cerulean blue */
}
h2, h3 {
	font-family: 'Roboto', sans-serif;
	text-align: center;
	color: #0B3C5D;                            /* Prussian blue */
	text-transform: uppercase;
	letter-spacing: 1%;
}
.left-col h2 a {
	text-decoration: none;
	color: #0B3C5D;                            /* Prussian blue */
}
h2 a:hover {
    color: #4484CE;                            /* Cerulean blue */
}
h3 {
    text-decoration: none;
    color: #0B3C5D;                             /* Prussian blue */
}
h3 a:hover {
    color: #4484CE;                             /* Cerulean blue */
}
h5 {
    color: #000000;                             /* Black */
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: 100;
}
p {
	padding: 2%;
	color: #000000;                            /* Black */
	text-align: justify;
}
img {
	text-align: center;
	max-width: 100%;
	height: auto;
}
#wrapper {
	margin: 0 auto;
	max-width: 1120px;
	background: #D9D9D9;                       /* Light grey */
	overflow: auto;
}
header {
	width: 97%;
}
#logo {
	float: left;
	margin: 1% 0 0 5%;
}
#banner-wrapper {
	max-width: 1020px;
	margin: 0 auto;
	padding: 0 0 3% 0;
}

/*-- Start Navigation Style --*/
nav {
    box-shadow: 3px 4px 24px 0 rgba(0, 0, 0, 0.07);
	margin-top: 2px;
	background: #0B3C5D;                       /* Prussian blue */
	font-family: 'Roboto', cursive;
	font-weight: bold;
}
.nav ul {
	width: 100%;
	overflow: hidden;
	list-style: none;
}
.nav-button:hover {
	cursor: pointer;
}
.navigation {
	clear: both;
	width: 100%;
	position: relative;
}
.nav a {
	color: #FFFFFF;                            /* White */
	text-transform: uppercase;
	text-decoration: none;
}
body .nav .nav-menu li a {
	display: inline-block;
	padding: 15px 20px;
	color: #FFFFFF;                            /* White */
	font-size: 18px;                           /* Nav headings font size */
	font-weight: 700;
}
.nav.slab .nav-menu li.active a {
	color: #FFFFFF;                            /* White */
	text-decoration: underline;
}
.nav.slab .nav-menu li a:hover {
	color: #4484CE;                            /* Cerulean blue */
	text-decoration: underline;
}
.nav.slab .nav-toggled {
	/*width: 100%;*/
	min-height: 36px;
	border-radius: 6px;
}
.nav.slab .nav-toggled-controls {
	display: block;
	height: 36px;
	color: #4484CE;                            /* Cerulean blue */
	text-align: left;
	position: relative;
}
.nav.slab .nav-toggled-title {
	position: relative;
	top: 9px;
	left: 15px;
	font-size: 16px;
}
.nav.slab .nav-button {
	display: block;
	position: absolute;
	right: 15px;
	top: 8px;
}
.nav.slab .nav-button span {
	display: block;
	margin-top: 4px;
	height: 2px;
	background: #4484CE;                       /* Cerulean blue */
	width: 24px;
}
.nav-toggled-controls{
	border-bottom: 0px solid #0B3C5D;          /* Prussian blue */
}
.nav.slab .nav-toggled ul li a {
	display: block;
	width: 100%;
	background-color: #4484CE;                 /* Cerulean blue */
	text-align: left;
	padding: 10px 0px 10px 15px;
	border-bottom: 1px solid #0B3C5D;          /* Prussian blue */
	text-align: left;                          /* Align left in sub-menu on small screens */
	font-size: 16px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.nav.slab .nav-toggled ul li a:active {
	background-color: #4484CE;                 /* Cerulean blue */
	color: #5E412F;
	border-top: 1px solid #0B3C5D;             /* Prussian blue */
}
.nav.slab .nav-toggled ul li a:hover {
	background: #4484CE;                       /* Cerulean blue */
	text-decoration: none;
	color: #0B3C5D;                            /* Prussian blue */
	border-bottom: 1px solid #0B3C5D;          /* Prussian blue */
}
.nav.slab .nav-toggled ul li {
	position: relative;
}
.toggle-sm:after {
	position: absolute;
	right: 15px;
	top: 10px;
	font-size: 18px;
	line-height: 25px;
}
.nav .nav-menu {
	text-align: center;
	overflow: visible;
	min-height: 56px;
}
.nav .nav-menu li {
	display: inline-block;
	padding: 0px;
	margin: 0px !important;
	position: relative;
}
.nav-button:hover {
	cursor: pointer;
}
.nav .nav-toggled ul {
	display: none;
	margin: 0px ;
	padding: 0px ;
}
.nav ul {
	overflow: visible;
}
body .nav .nav-menu li a {
	padding: 15px 30px;
}
/*-- End Navigation Style --*/

/*-- Start Image Slider --*/
.slider {
	max-width: 1020px;
	box-shadow: 1% 2% 5% 0 rgba(0, 0, 0, 0.07);
}
.slider1 img {
	width: 100%;
	margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a {
	outline: 0 none;
	position: absolute;
	text-indent: -9999px;
	top: 40%;
	height: 71px;
	width: 40px;
	z-index: -1;
	transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a {
	z-index: 5;
}
.slider .bx-wrapper .bx-prev {
	background: #0B3C5D url("../images/left-arrow.png") no-repeat 8px 13px;    /* Prussian blue */
	left: 0px;
}
.slider .bx-wrapper .bx-prev:hover {
	background: #0B3C5D url("../images/left-arrow.png") no-repeat 8px 18px;    /* Prussian blue */
}
.slider .bx-wrapper .bx-next {
	background: #0B3C5D url("../images/right-arrow.png") no-repeat 10px 12px;  /* Prussian blue */
	right: 0px;
}
.slider .bx-wrapper .bx-next:hover {
	background: #0B3C5D url("../images/right-arrow.png") no-repeat 10px 17px;  /* Prussian blue */
}
/*-- End Image Slider --*/

.one-third {
	width: 28%;                                /* Size of each section 28% for 1/3 */
	float: left;
	margin: 2% 0 3% 4%;
	text-align: center;
}
.one-third i,
.one-quarter i {
	color: #B56357;                            /* Red rust */
	font-size: 585%;
}
.one-third img {
    border-radius: 5%;
	margin: 3% 0 3% 0;
	opacity: 1;
}
.one-quarter {
	width: 20%;                                /* Size of each section 20% for 1/4 */
	float: left;
	margin: 2% 0 3% 4%;
	text-align: center;
}
.clearfix {
	clear: both;
}
h2.welcome {
    margin-left: 5%;
    margin-right: 5%;
    text-align:left;
    border-bottom: solid;
}
.left-col {
	width: 60%;
	float: left;
	margin: 4% 0 4% 4%;
}
.game-name {
	font-weight: bold;
	text-transform: uppercase;
}
.left-col a {
    text-decoration: none;
    color: #000000;                             /* Black */
}
.left-col a:hover {
    color: #4484CE;                            /* Cerulean blue */
}
.sidebar {
	width: 26%;
	float: left;
	margin: 4% 4%;
}
.sidebar img {
	opacity: 1;
	border-radius: 5%;
	margin: 0 0 5% 0;
}

.sidebar ul {
    list-style: none;
}

.sidebar ul li .grabtitle {
    display: block;
    font-weight: bold;
    color: #0B3C5D;                             /* Prussian blue */
    padding-bottom: 2px;
    border-top: ridge;
    border-color: #FFFFFF;                      /* White */
}

.sidebar ul li a {
    text-decoration: none;
    color: #000000;                             /* Black */
}
.sidebar ul li a:visited {
    color: #000000;                             /* Black */
}
.sidebar ul li a:hover {
    color: #4484CE;                             /* Cerulean blue */
}

.SeriesWinner {
    font-weight: bold;
}

.mmhisthead a {
    color: #0B3C5D;                             /* Prussian blue */
}

.mwords {
    color: #000000;                             /* Black */
}

/*-- Mystery Games Score Table --*/

#MMScores {
	width: 90%;
	border-collapse: collapse;		             /* Prevent borders doubling up in cells */
}

#MMhisttable {
	width: 100%;
	border-collapse: collapse;		             /* Prevent borders doubling up in cells */
}

#footystats {
    border-collapse: collapse;
}

#MMScores caption,
#MMhisttable caption,
#footystats caption {				             /* Formatting of captions in tables */
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}

#MMScores th,
#MMhisttable th,
#footystats th {					             /* Formatting of headers in tables */
	text-transform: uppercase;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 5px;
	background: #0B3C5D;                         /* Prussian blue */
	color: #FFFFFF;                              /* White */
	font-weight: bold;
	font-size: 14px;
}

#MMScores td,
#MMScores th,
#MMhisttable td,
#MMhisttable th,
#footystats th {
	font-size: 12px;
	border: 1px solid #000000;                   /* Black */
	padding: 3px 3px 3px 3px;
	text-align: center;
}

#footystats td {
    font-size: 12px;
    border: 1px solid #000000;                   /* Black */
    padding: 3px 10px 3px 10px;
}

#MMhisttable td, 
#MMScores .ScoreName {
	text-align: left;
}

#MMScores .ScoreTotal {
	font-weight: bold;
}

#MMScores #ScoreName {
    width: 80px;
}

#MMScores #Score1,
#MMScores #Score2,
#MMScores #Score3,
#MMScores #Score4,
#MMScores #Score5,
#MMScores #Score6,
#MMScores #Score7,
#MMScores #Score8,
#MMScores #Score9,
#MMScores #Score10,
#MMScores #Score11,
#MMScores #Score12,
#MMScores #Score13,
#MMScores #Score14,
#MMScores #Score15,
#MMScores #MS,
#MMScores #MSW {
	width: 40px;
}

#MMScores #ScoreTotal {
    width: 80px;
}

#footystats .FootyYear {
    width: 40px;
    font-weight: bold;
    text-align: center;
}

#footystats #FootyScore1,
#footystats #FootyScore2 {
    width: 40px;
}

#footystats #FootyName {
    width: 200px;
}

#footystats .FootyResults {
    text-align: center;
}

#pointsummary li {
    width: 90%;
    list-style-position: inside;
    list-style-type: square;
    font-size: 14px;
    padding-bottom: 10px;
}

#rules li {
    width: 90%;
    list-style-position: inside;
    list-style-type: square;
    font-size: 14px;
    padding-bottom: 10px;
}

.super {
    vertical-align: super;
}

.sub {
    vertical-align: sub;
}

/*-- Start Footer --*/
footer {
	background: #D9D9D9;                       /* Light grey */
	max-width: 1020px;
	width: 100%;
	margin: 0 auto;
	padding: 1% 0;
	overflow: auto;
}
footer p {
	text-align: center;
}
footer h3 {
	text-decoration: underline;
}
.footercontact {
	text-align: center;
}
.social {
	list-style-type: none;
	margin: 3% 0;
	padding: 0;
	text-align: center;
}
.social li {
	display: inline;
}
.social i {
	color: #000000;                            /* Black */
	font-size: 195%;
	padding: 0 2%;
}
.social i:hover {
	color: #4484CE;                            /* Cerulean blue */
}






/*-- Resonsive Media Queries --*/
@media screen and (max-width: 740px) {
	#wrapper {
		margin-top: -1%;
	}
	.slider .bx-wrapper .bx-controls {
		display: none;
	}
	.one-third,
    .one-quarter {
		float: left;
		width: 100%;
		margin: 4% 0;
	}
	.one-third i,
    .one-quarter i {
		font-size: 355%;
	}
	h1 {
		font-size: 125%;
		letter-spacing: 2px;
	}
	h2.welcome {
		font-size: 120%;
	}
	.left-col {
		width: 100%;
		margin: 0 0 3% 0;
	}
	.sidebar {
		width: 100%;
		margin: 0;
	}
	img {
		width: 100%;
	}
	.sidebar img {
		opacity: 1;
	}
	.social i {
		font-size: 175%;
	}
}

/*-- Mystery Games --*/
.gamelogo {
    text-align: center;
}
.mgames h1 {
    text-align: center;
}
.mgames img {
    display: block;
    margin: 0 auto;
    border-radius: 5%;
}
.mgames li {
    margin: 4% 0 4% 4%;
    font-weight: bold;
    list-style: none;
}
.mmhistory a {
    text-decoration: none;
    color: #000000;                             /* Black */
}
.mmhistory a:hover {
    color: #4484CE;                             /* Cerulean blue */
}
audio{
    display: block;
    margin: 0 auto;
}

/*-- Data Submit Forms --*/
#email-form .label {
	float: left;
    width: 90px;
	margin-right: 5px;
	text-align: left;
	font-weight: bold;
	clear: left;
}
.youtubeclip {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#name,
#email,
#artist,
#title,
#link,
#song1,
#song2,
#song3,
#song4,
#song5,
#song6 {
	background-color: #FFFFFF;                 /* White */
	width: 250px;
	margin-top: 2px;
	border: 1px solid;
    border-radius: 5px;
    font-family:sans-serif;
    font-size: 14px;
}

#submit,
#reset {
	margin-left: 110px;
	margin-right: -100px;
    border: 1px solid;
    border-radius: 5px;
    font-size: 14px;
    padding: 0 10px 0 10px
}