﻿/*** layout ***/

body, html {
    font-family: verdana;
    font-size: 12px;
    line-height:20px;
    color: #333;
	background-color:maroon;
	background-position: 0px 0px, 50px 50px, 50px 0px, 0px 50px, 50px 0px, 100px 50px, 0px 0px, 50px 50px, 0px 0px, 0px 0px; background-image: radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%), radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%), radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)), radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)), radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%), radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%), radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)), radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)), linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 0%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%), linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 0%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%); background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll; background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat; background-size: 100px 100px; background-origin: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box; background-clip: border-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box; background-color: rgb(51, 0, 0);
	color:#FFFFFF;
    margin: 0;
    text-rendering: optimizeLegibility;
}
h1 {
	font-size:48px;
	color:white;
	-webkit-text-stroke: 1px black;
	text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
    margin-top:-40px;

}
a {
    color: #3399FF;
    text-decoration: none;
}
code {
    padding: 1px 3px;
    color: #D14;
    background-color: #F7F7F9;
    border: 1px solid #E1E1E8;
    border-radius: 5px;
}

h2 {
    display: inline-block;
}

.no-margin-top {
    margin-top: 0px;
}

/*** header ***/

header {
    width: 100%;
    height: 90px;
    line-height: 40px;
    background-color: #1B1B1B;
    background-image: linear-gradient(to bottom, #222222, #111111);
    background-repeat: repeat-x;
    border-color: #252525;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    border-width: 0 0 1px;
    color: #FFF;
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    z-index: 100;
}
#header-links {
    display: none;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 40px;
}
#header-links a {
    display: block;
    font-size: 9px;
    font-weight: bold;
    font-family: Verdana;
    color: #FAFAFA;
    text-transform: uppercase;
    margin-left: 0px;
    text-align: center;
    background-color: #1B1B1B;
    border-top: solid 1px #CACACA;
    line-height: 14px;
    padding: 10px;
}
#header-links a:hover {
    color: #636363;
}

/*** menu ***/

#header-menu-button {
    position: absolute;
    right: 6px;
    top: 6px;
    display: block;
    color: #757575;
    background-color: #e1e1e1;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
    background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
    background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
    background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
    background-image: linear-gradient(top, #ebebeb, #e1e1e1);
    box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
    border: none;
    border-radius: 3px;
    padding: 6px 10px;
    font-size: 11px;
    line-height: 16px;
    cursor: pointer;
}

/*** content ***/

#addthis-toolbox {
    position: absolute;
    right: 15px;
    top: 40px;
}
#content {
    position: relative;
    background:transparent;
    width: 920px;
    padding:0px;
    margin: 50px auto 10px;
    border:0px aqua solid;
}
.content-box {
    padding-left: 10px;
}
#content ul {
    padding-left: 10px;
}
/*** footer ***/
#SemiFooter {
	width:920px;
	background-color:white;
	border:3px black solid;
	padding:10px;
	margin:auto;
}
#SemiFooter p{
	color:black;
}
#SemiFooter a{
	color:navy;
	text-decoration:underline;
}
footer {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #1B1B1B;
    background-image: linear-gradient(to bottom, #222222, #111111);
    background-repeat: repeat-x;
    border-color: #252525;
    box-shadow: 10px 1px 10px rgba(0, 0, 0, 0.5);
    border-width: 0 0 1px;
    color: #FFF;
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    z-index: 100;
}

.SomeSpaceAroundDiv {
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
}
.RecommendedActivity {
	background-color:white;
	border:thin black solid;
	width:200px;
	height:280px;
	padding:4px;
	margin:auto;
	text-align: center;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 8px #000;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);

}
.RecommendedActivity h5{
	font-family:"Times New Roman", Times, serif;
	font-size:13px;
	margin: 0px;
	letter-spacing: 2px;
	color:gray;
}
.RecommendedActivity hr{
	width:80%;
	color:red;
	height:2px;
}

.RecommendedActivity img {
	margin-top:5px;
	margin-bottom:4px;
	width:162px;
	height:100px;
	border:thin gray solid;
	-webkit-box-shadow: 0px 0px 4px rgba(200,0,0,0.5);
	box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px rgba(200,0,0,0.5);
}
.RecommendedActivity a {
	border:0px;
}
.ButNew {
	display: inline-block;
	width:129px;
	white-space: nowrap;
	background-color: #ccc;
	border: 1px solid #777;
	padding: 7px 15px;
	margin: 4px;
	font: bold 16px/20px Arial, Helvetica;
	text-decoration: none;
	color: black;
	border-radius: 4px;
	background: repeating-linear-gradient(0deg, maroon 40px, white 100px);
	cursor:pointer;  
}   
.ButNew:hover
    {
	background-color: #eee;        
	background: repeating-linear-gradient(0deg, red 35px, yellow 90px);
}
.Tick {
	width:70px;
	height: 66px;
	display:none;
}
.Cross {
	width:35px;
	height: 31px;
	display:none;
}
#Trophybutton {
	display:none;
	background-color:red;
	color:white;
	font-weight:bold;
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
}
.LevelButtons {
	text-align:center;
}
.LevelButtons a {
	display: inline-block;
	white-space: nowrap;
	background-color: #ccc;
	border: 1px solid #777;
	padding: 4px 15px;
	margin: 4px;
	font: bold 16px/20px Arial, Helvetica;
	text-decoration: none;
	color: black;
	border-radius: 4px;
	background: repeating-linear-gradient(0deg, silver 40px, white 100px);
	cursor:pointer; 
	width:140px; 
}   
.LevelButtons a:hover
    {
	background-color: #eee;        
	background: repeating-linear-gradient(0deg, red 35px, white 90px);
}
.LevelButtons a.ThisOne {
	background: repeating-linear-gradient(0deg, red 35px, pink 90px);
	color:white;
}
