/* GENERAL
-------------------------------------------------- */

html, body{
	margin: 0;
	padding: 0;
    background-color:#222222;
}

*{ box-sizing: border-box; }

body{
	font-family: "Lato", sans-serif;
	font-size: 1.1em;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	font-weight:400;
}

h2 {
    text-align: center;
}

a{ text-decoration: none; }

.clearfix{ clear:both; }

@font-face {
	font-family: Downcome;
	src: url(../fonts/DOWNCOME.TTF);
}

/* GRID & LAYOUT
-------------------------------------------------- */

#content { 
    padding:80px 0 50px 0; /* To account for fixed nav, which is 80px tall and footer that is 50px */ 
    background-color:#222222;
}

.container{
	width:90%;
	margin:0 auto;
	overflow: hidden;
}

@media screen and (max-width: 1020px) {
	.container{ width:100%; }
}

/* NAV
-------------------------------------------------- */

header{
	background-color:#181818;
	background: url(../img/nav-bg.png) repeat;
	position:fixed;
	width:100%;
	z-index:9999;
	height:90px;
}

nav ul{
	list-style: none;
	margin: 0;
	padding:0;
	overflow:hidden;
}
nav ul li{
	float:left;
	font-size:20px;
}
nav ul li a{
	color:#FFF;
	font-family:"Oswald", "Lato", sans-serif;
	text-transform: uppercase;
	display: block;
	padding: 1.33em;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
nav ul li a:hover{ color:#a9a9a9; }
nav ul li.logo{ float:left; }
nav ul li.logo a{ padding: 0; }

.nav-wrapper{ float:right; }

/* Responsive Menu */
.slicknav_menu {
	display:none;
	background:#181818;
}
.slicknav_menutxt{ display:none; }
.slicknav_btn { margin: 24.5px 10px; }
.slicknav_nav li {
	display: block;
	font-family:"Oswald", "Lato", sans-serif;
	text-transform: uppercase;
	font-size:20px;
	border-bottom:1px solid #383838;
}
.slicknav_nav li:first-child{ border-top:1px solid #383838; }
.slicknav_nav li:last-child{ border-bottom:none; }
.slicknav_nav a{
	text-align: center;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.slicknav_nav a:hover { color: #a9a9a9; }

.mobile-logo {
	float:left;
	color:#FFF;
	margin-left:10px;
}

@media screen and (max-width: 1020px) {
	nav ul li.logo{ margin-left:10px; }
}

@media screen and (max-width: 945px) {
	/* #menu is the original menu */
	#menu, header, li.logo{ display:none; }
	.slicknav_menu {
		display:block;
		background: url(../img/nav-bg.png) repeat;
		position:fixed;
		width:100%;
	}
	.nav-wrapper{
		float:none;
		background-color:#181818;
	}
}

/* HERO
-------------------------------------------------- */

#hero{
	background: url(../img/hero-bg.jpg) no-repeat;
	background-size:cover;
	margin:-8px 0 0 0;
	padding:158px 0 150px 0; /* to account for -8px margin */
	text-align: center;
}
#hero legend{ width:100%; }
#hero h2{
	color:#FFF;
	margin:0 0 10px 0;
}
#hero .search-wrapper{
	width:470px;
	margin:0 auto;
}
#hero input{
	padding:10px;
	font-size:16px;
	border:none;
	width:85%;
	border-radius:5px 0 0 5px;
	font-family:"Oswald", sans-serif;
	text-transform: uppercase;
}
#hero .btn{
	background-color:#932929;
	border-radius:0 5px 5px 0;
	padding:10px;
	font-size:16px;
	font-family:"Oswald", sans-serif;
	text-transform: uppercase;
	color:#FFF;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}
#hero .btn:hover{ background-color:#5f1b1b; }

@media screen and (max-width: 500px) {
	#hero{ padding:58px 0 50px 0; }
	#hero .search-wrapper{ width:90%; }
	#hero input{ width:initial; }
}

/* TOP TEN KILLERS
-------------------------------------------------- */

#top-ten{
	background: url(../img/rust-bg.jpg) no-repeat;
	background-size:cover;
	padding:50px 0 68px 0; /* to account for -17px margin */
	margin:0 0 -18px 0;
	color:#FFF;
}
#top-ten .steam-user{
	float:left;
	width:50%;
	overflow:hidden;
	padding:3%;
    padding-left: 15%; /* I added this to center the users after I increased the container width */
}
#top-ten img{
	border-radius:50%;
	height:auto;
}
#top-ten h2{
	color:#FFF;
	font-family:"Downcome", "Oswald", sans-serif;
	font-size:38px;
	margin:0 0 10px 0;
}
#top-ten h3{ margin:0 0 10px 0; }
#top-ten p{ margin:10px 0 0 0; }
#top-ten a{
	color:#AAA;
	text-transform: uppercase;
	font-size:12px;
}

@media screen and (max-width: 1020px) {
	#top-ten h2{ text-align: center; }
}

@media screen and (max-width: 948px) {
	#top-ten{
		background: #040404; /* For browsers that do not support gradients */
		background: -webkit-linear-gradient(#000, #040404 33%, #000 66%); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#000, #040404 33%, #000 66%); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#000, #040404 33%, #000 66%); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#000, #040404 33%, #000 66%); /* Standard syntax */
	}
	#top-ten .steam-user{
		text-align:center;
		margin-bottom:5%;
	}
	#top-ten img{
		float:none !important;
		margin:0 auto;
	}
}

@media screen and (max-width: 836px) {
	#top-ten .steam-user{
		float:none;
		width:80%;
		margin:0 auto;
	}
}

/* FOOTER
-------------------------------------------------- */

footer{
	background: url(../img/footer-bg.png) repeat;
	color:#FFF;
	text-align: center;

    position: fixed;
    left: 0;
    bottom: 0;
    height:50px;
    width: 100%;
    overflow:hidden;
}
footer .container{ padding:20px 0; }


/*  I, David, added these.  ;)  love you  */

/* SEASONS
-------------------------------------------------- */

#season{
	padding:30px 0 0 0;
	margin:0 0 -18px 0;
}

#season h1, h2, h3, h4, h5{
    margin: 0;
}

#season .recap{
	float:left;
	width:50%;
	overflow:hidden;
	padding:3%;
}

.rating h1, h2, h3, h4, h5{
    margin: 0;
}

.rating .jk-rating-stars-container {
    display: block;
    text-align: center;
}

.overall{
	overflow:hidden;
    margin: 0;
    padding:0 0 30px 0; 
    text-align: center;
    width: 100%;
}

.overall-item .jk-rating-stars-container {
    display: block;
    text-align: center;
}

.overall .overall-item{
    width: 50%;
    float: left;
}

.overall .overall-item-full{
    width: 100%;
    float: left;
}

.overall .score-date{
    padding-top: 30px;
    float: left;
    width: 100%;
}

.recap .btn{
	background-color:#932929;
	border-radius:0 5px 5px 0;
	padding:5px;
	font-size:16px;
	font-family:"Oswald", sans-serif;
	text-transform: uppercase;
	color:#FFF;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.recap .btn:hover{ background-color:#5f1b1b; }

.recap h1, h2{
	margin:0 0 10px 0;
    text-align: center;
}

.recap .by-you{
	color: #5f1b1b;
}

/* Killer Bio
-------------------------------------------------- */

#killer-bio {
    display: flex;
    padding-top: 20px;
}

#killer-bio h1, h2, h3, h4, h5{
    margin: 0;
}

#killer-bio .picture img{
	float:left;
    width: 200px;
    height: 200px;
    padding-right: 6%;
}

#killer-bio .details{
	float:left;
	width:80%;
	overflow:hidden;
}

/* Killer Stats
-------------------------------------------------- */

#killer-stats {
    
}

#killer-stats .stats{
    width: 50%;
    float: left;
    text-align: left;
    padding: 3%;
}

#killer-stats .killer-donut{
    width: 50%;
    float: left;
    text-align: center;
    padding: 3%;
}

/* Killer achievements
---------------------------------------------------*/

#killer-achievements .container {
    width: 100%;
    padding: 3%;
}

#killer-achievements .container .item img{
    width: 64px;
    height: 64px;
    display: inline-flex;
    float: left;
}


/* Tooltip (doesn't quite work right yet)
---------------------------------------------------*/
.tooltip {outline:none; }
.tooltip strong {line-height:30px;}
.tooltip:hover {text-decoration:none;} 
.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:60px; margin-left:-160px;
    width:300px; line-height:16px;float: left;
}
.tooltip:hover span{
    display:inline; position:absolute; 
    border:2px solid #FFF;  color:#EEE;
    background:#333 /*url(../img/css-tooltip-gradient-bg.png)*/ repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
    
/*CSS3 extras*/
.tooltip span {
    -ms-border-radius:2px;
    border-radius:2px;
    -webkit-box-shadow: 0px 0px 8px 4px #666;
    -ms-box-shadow: 0px 0px 8px 4px #666;
    box-shadow: 0px 0px 8px 4px #666;
    /*opacity: 0.8;*/
}


/* Extra stuff
-------------------------------------------------- */

.new-line {
    float: left;
    width: 100%;
}

/*  Some button/a tags call a function instead of going to a page (missing href attribute).  
    They are a normal cursor rather than a pointer.  Add this class to fix that. */
.pointer {
    cursor: pointer;
}