/* =============================
	Custom fonts
   ============================= */

@font-face {
	font-family: 'FeltTipRoman';
	src: url('../fonts/FeltTipRoman.eot');
	src: local('☺'), url('../fonts/FeltTipRoman.woff') format('woff'), url('../fonts/FeltTipRoman.ttf') format('truetype'), url('../fonts/FeltTipRoman.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'FeltTipRoman-Heavy';
	src: url('../fonts/FeltTipRoman-Heavy.eot');
	src: local('☺'), url('../fonts/FeltTipRoman-Heavy.woff') format('woff'), url('../fonts/FeltTipRoman-Heavy.ttf') format('truetype'), url('../fonts/FeltTipRoman-Heavy.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* =============================
	Main / containers
   ============================= */

body {
	background-color:#DBDBDB;
	overflow:hidden;
}

.background-container {
	width:810px;
	height:810px;
	margin:0 auto;
	background-color: #00B259;
	background-image: url("../img/card_background_2.png");
}

/* The "margin-top" on the container
	should match the "top" on the content-container */
.container {
	width:810px;
	margin:0 auto;
}

/* The "top" on the content-container
	should match the "margin-top" on the container */
.content-container {
	top: 0;
	display: block;
    height: 710px;
    margin-left: 49px;
    margin-top: 51px;
    position: absolute;
    width: 712px;
}

.content-container.background {
	background-color:#F6F2EC;
}

/* =============================
	Top Copy
   ============================= */

.top-logo {
	height: 91px;
    left: 50%;
    margin-left: -305px;
    margin-top: 35px;
    position: absolute;
    width: 610px;
}

.top-logo img {
	margin:0;
	padding:0;
}

.top-copy {
	margin-top: 147px;
    padding: 0 46px;
    position: absolute;
    width: 620px;
}

.top-copy h4 {
	color: #00b259;
	font-family: FeltTipRoman-Heavy,"Comic Sans","Comic Sans MS",cursive;
	font-weight:normal;
	font-size:23px;
	text-align:center;
}

.top-copy p {
	color: #464646;
    font-family: FeltTipRoman,"Comic Sans","Comic Sans MS",cursive;
    font-size: 23px;
    font-weight: normal;
    line-height: 26px;
    margin-top: 4px;
    text-align: center;
}

.top-copy p a {
	color: #464646;
}

.top-copy p span {
	color: #00b259;
	font-family: FeltTipRoman-Heavy,"Comic Sans","Comic Sans MS",cursive;
}

/* =============================
	Scroller
   ============================= */

.scroller {
	bottom: 0;
    height: 425px;
    margin: 242px auto 0;
    overflow: auto;
    width: 90%;
    /* border-top: solid 1px rgb(177, 177, 117);
    border-top: solid 1px rgba(194, 194, 194, 0.6);
    border-bottom: solid 1px rgb(117, 117, 117);
    border-bottom: solid 1px rgba(194, 194, 194, 0.6); */
}

.scroller ul {
	display: block;
    height: 55px;
    margin: 15px auto;
    width: 618px;
}

.scroller ul li {
	float:left;
	position:relative;
}

.scroller ul li.d {
	height: 55px;
	line-height: 55px;
	margin-top:-60px;
}

.scroller ul li.rank {
	color: #FFFFFF;
    font-family: FeltTipRoman-Heavy,"Comic Sans","Comic Sans MS",cursive;
    font-size:14px;
    margin-left: 10px;
    text-align: center;
    width: 55px;

}

.scroller ul li.rank.s1 {
	font-size:34px;
}

.scroller ul li.rank.s2 {
	font-size:32px;
}

.scroller ul li.rank.s3 {
	font-size:27px;
}

.scroller ul li.rank.s4 {
	font-size:22px;
}

.scroller ul li.rank.s5 {
	font-size:18px;
}

.scroller ul li.user {
	color: #464646;
    font-family: FeltTipRoman,"Comic Sans","Comic Sans MS",cursive;
    font-size: 20px;
    margin-left: 80px;
    max-width: 450px;
}

.scroller ul li.score {
	color: #00b259;
	font-family: FeltTipRoman-Heavy,"Comic Sans","Comic Sans MS",cursive;
	font-size:28px;
	float:right;
	margin-right:13px;
}

.scroller .scroller-footer {
	width:100%;
	height:50px;
	float:left;
	display:none;
}

.scroller .scroller-footer img {
	display: block;
    margin: 4px auto 0;
}