/*
Theme Name: Biohazard France
Theme URI: http://www.biohazardfrance.net/
Description: Biohazard France Theme.
Version: 0.1
Author: Ada
 
Creation Theme by Ada || https://www.biohazardfrance.net
 
*/


* {
  margin: 0;
  padding: 0;
}

html, body {
background: #000;
padding: 0px;
font-size: 1rem;
font-family: "Open Sans", Tahoma, Verdana, Arial, sans-serif;
font-weight: normal;
text-decoration: none;
color: #fff;
line-height: 1.5;
}

A:Link{color:#536482;text-decoration:none;}
A:Visited{color:#536482;text-decoration:none;}
A:Hover{color:#63b3fe;text-decoration:none;}

	body {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}

	header {
	order: 1;
	height: 150px;
	text-align: center;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	}
	
	header img {
		object-fit: cover;
		height: 100%;
	}
	
	nav#sites li {
	list-style-type: none;
	background: #13161c;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	padding: 6px;
	font-size: 0.8em;
	text-align: center;
	}
	
	nav#sites img  {
	margin-top: 10px;
	box-sizing: border-box;
	border: 5px solid #000;
	width: auto;
	max-width: auto;
	min-width: auto;
	}
	
	nav#sites ul {
	display: flex;
	gap: 15px;
	}

	nav#sites ul li {
	display: flex;
	flex-direction: column;
	}
	
	div#sitebox {
	/*width: 176px;
	height: 200px;*/
	display: inline;
	float: left;
	background: #13161c;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	margin-right: 12px;
	padding: 6px;
	font-size: 0.8em;
	text-align: center;
	}
	
	.sitename {
	font-size: 9px;
	letter-spacing: 2px;
	color: grey;
	}
	
	.actu {
	font-size: 9px;
	letter-spacing: 2px;
	color: red;
	}
	
	div#container {
		display: flex;
		gap: 15px;
	}
	
	div#newsline {
	background: url(../index-images/news.jpg) center no-repeat;
	min-height: 39px;
	margin-bottom: 15px;
	}
	
	.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
	}
	
	div#alternate_title {
	font-family: Muli, "Century Gothic", Geneva, Tahoma, Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 1px #000;
	margin-bottom: 15px;
	background: #1B2029;
	padding-left: 15px;
	border-radius: 2px;
	}
	
	div#latest-game img {
		border-radius:5px;
	}
	
	.menubox {
	background: #13161c;
	margin-bottom: 10px;
	border-radius: 2px;
	padding: 5px;
	overflow: hidden;
	text-align: center;
	}
	
	li.heading-title-1, li.heading-title-2, li.heading-title-3 {list-style-type:none;}
	
	ol {margin:8px 0;}
	ol > li {margin-left:15px;}
		
	.heading-title-1 {
	letter-spacing: 3px;
	word-spacing: 3px;
	color: grey;
	font-size: 9px;
	text-shadow: 3px 2px 2px #000;
	text-transform:uppercase;
	}

	.heading-title-2 {
	background: #1b2029;
	margin-bottom: 1px;
	border-radius: 2px 2px 0 0;
	padding: 5px;
	text-align: center;
	letter-spacing: 2px;
	word-spacing: 2px;
	font-variant: small-caps;
	font-size: 12px;
	text-shadow: 3px 2px 2px #000;
	}

	.heading-title-3 {
	font-size: 11px;
	background: #13161c;
	margin-bottom: 1px;
	padding: 5px;
	text-align: left;
	font-weight: normal;
	text-transform: uppercase;
	}
	
	.heading-title-3:hover {
	background: #262d3a;
	}

	.filebox {
	font-size: 10px;
	background: #13161c;
	margin-bottom: 1px;
	padding: 5px;
	text-align: left;
	overflow: hidden;
	}
	
	.filebox:hover {
		background: #262d3a;
	}
	
	.filebox img:hover { 
  	-moz-transform: rotate(8deg);  
  	-webkit-transform: rotate(8deg); 
	}
	
	.otherbox {
	font-size: 11px;
	background: #13161c;
	margin-bottom: 1px;
	padding: 5px;
	text-align: left;
	}
	
	.otherbox ul {
	list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;
	}

	.otherbox.forumDiscussions ul li {
	list-style-position: inside;
	list-style-type: square;
	color: #536482;
	margin-left: 0px;
	padding-left: 3px;
	padding-bottom: 3px;
	}
	
	.otherbox img {
	border: thin solid black;
	}
	
	div#affiliatesbox {
	font-size: 10px;
	background: #13161c;
	margin-bottom: 1px;
	padding: 5px;
	text-align: left;
	}
	
	div#affiliatesbox img {
	border: thin solid grey;
	min-width: 100%;
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	}
	
	div#affiliatesbox img:hover {
	border: thin solid red;
	}
	
	div#affiliatesbox ul {
		list-style-type: none;
	}
	
	div#affiliatesbox li {
	padding: 1px;
	}
	
	.newcontent {
	color: yellow;
	text-decoration: blink;
	}
	
	.filefooter {
	background: #1b2029;
	border-radius: 0 0 2px 2px;
	margin-bottom: 10px;
	height: 15px;
	font-size: 10px;
	}

	#content h3{
	font-size: 18px;
	font-family: Muli, "Century Gothic", Geneva, Tahoma, Verdana, Arial, sans-serif;
	font-weight: bold;
	background: #1B2029; /* old browsers */
	background: -moz-linear-gradient(left, #1B2029 0%, #0B0E11 100%); /* firefox */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1B2029), color-stop(100%,#0B0E11)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1B2029', endColorstr='#0B0E11',GradientType=1 ); /* ie */
	text-shadow: 3px 2px 2px #000;
	border-radius: 2px 2px 0px 0px;
	border-bottom: thin solid #000;
	margin: 0;
	padding : 5px 5px 5px 15px;
	text-align: left;
	}
	
	.gameReleaseTitle{
	font-size: 12px;
	color: red;
	margin-top: 0.4em;
	margin-bottom: 0.4em;
	text-align: center;
	}
	
	p {
	padding-top: 5px;
	padding-bottom: 5px;
	}
	
	img {
	width: 100%;
	max-width: 100%;
	}
	
	hr {
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid #262d3a;
	}
	
	table {
	font-size: 11px;
	width: 100%;
	margin-bottom: 10px;
	}

	td {
	border: thin solid #0e1014;
	padding: 2px;
	}
	
	img.smilies {
		width: auto;
		max-width: auto;
		min-width: auto;
	}
	
	.ttitle {
	color: #fff;
    font-size: 21px;
    margin-bottom: 3%;
    padding-bottom: 5px;
    padding-top: 4%;
    text-align: center;
    text-shadow: 2px 1px 3px white;
    text-transform: uppercase;
	}
	
	.newsblock {
	background: #13161c;
	padding: 15px;
	text-align: left;
	border-bottom: thin solid #000;
	}
	
	.newsblock img {
	max-width: 100%;
	vertical-align: middle;
	}

	.newsblock embed {
	max-width: 100%;
	}
	
	.newsblock ul {
	padding: 30px 15px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	}
	
	.newsblock ul li {
	list-style-type: none;
	}
	
	.newsblock ul li::before {    
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
	font-weight:900;
	display:inline-block;
	font-style:normal;
	font-variant:normal;
	text-rendering:auto;
    margin:0 10px 0 0;
}
	
	.newsblock img {
	border: 0px;
	}
	
	.newsfooter {
	background: #1B2029; /* old browsers */
	background: -moz-linear-gradient(left, #1B2029 0%, #0B0E11 100%); /* firefox */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1B2029), color-stop(100%,#0B0E11)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1B2029', endColorstr='#0B0E11',GradientType=1 ); /* ie */
	border-radius: 0px 0px 2px 2px;
	margin-bottom: 30px;
	padding: 2px 15px 2px 15px;
	text-align: left;
	font-size: 10px;
	text-transform: uppercase;
	}
	
	.newsposter {
	color: #2099a1;	
	}
	
	.cited, blockquote {
	background: #000 url("../index-images/quote.png") top left no-repeat;
	padding: 20px 10px 10px 10px;
	margin: 2% 1%;
	border: solid 1px #253045;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.5em;
	/*-moz-border-radius: 0 5 0 5;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;*/
	/*border-radius: 2px;*/
	}
	
	blockquote cite {
    font-style: normal;
    font-weight: bold;
    margin-left: 0px;
    display: block;
    font-size: 0.9em;
	}
	
	.newspage {
	font-size: 13px;
	font-family: Muli, "Century Gothic", Geneva, Tahoma, Verdana, Arial, sans-serif;
	text-align: left;
	}
	
	#navblock {
	/* padding: 5px; */
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
    text-align: right;
	border: thin solid #232833;
	background: #13161c;
	margin-bottom: 20px;
	}
	
	.navbutton {
	background-color: #0B0E11;
	display: inline-block;
	padding: 1%;
	margin-left: 1px;
	}
	
	.navbutton:hover {
	background-color: #232833;
	}
	
	div#footer {
	order: 4;
	text-align: center;
	border: thin solid #13161c;
	background: #090c11;
	font-size: 11px;
	color: #536482;
	padding: 10px;
	margin-bottom: 10px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	box-sizing: border-box;
	}
	
	.otherbox select, option {
	background-color:#000;
	font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
	color: #fff;
	font-size: 10px;
	border: 0px;
	width: 100%;
	}
	
	.otherbox fieldset {
	border: 0;
	}
	
	.social > a {position: relative; top: 0; transition: top linear 300ms;}
	.social > a:hover {top: -1px;}

	
	@media only screen and (min-device-width: 768px) {
		body {
			padding-top: 15px;
		}
		
		header, nav#sites, #container, div#footer {
			width: 100%;
		}

		div#container {
			order: 3;
		}
		
		nav#sites {
			order: 2;
		}
		
		main#content {
			order: 2;
		}
		
		nav#leftcol {
			order: 1;
		}
		
		nav#rightcol {
			order: 3;
		}
		
		nav#leftcol, nav#rightcol {
			min-width: calc(100% / 5);
			max-width: calc(100% / 5);
			width: calc(100% / 5);
		}
		
		nav#sites ul li {
			width: calc(100% / 5);
		}
	}
	
	@media only screen and (min-device-width: 1024px) {
		header, nav#sites, #container, div#footer {
			min-width: 1000px;
			max-width: 1000px;
		}
	}
	
	@media only screen and (min-device-width: 1400px) {
		header, nav#sites, #container, div#footer {
			min-width: 1200px;
			max-width: 1200px;
		}
	}

	@media only screen and (min-device-width: 1600px) {
		header, nav#sites, #container, div#footer {
			min-width: 1400px;
			max-width: 1400px;
		}
	}
	
	@media only screen and (max-device-width: 1023px) {
		body {
			padding: 15px;
		}
	}
	
	@media only screen and (max-device-width: 767px) {
		header, nav#sites, div#container, div#footer {
			max-width: 100%;
		}
		
		div#container {
			order: 2;
		}
		
		nav#sites {
			order: 3;
		}
		
		nav#sites li#SvH {
			order: 3;
		}
		
		nav#sites li#TLE {
			order: 4;
		}
		
		nav#sites li#Coll {
			order: 4;
		}
		
		nav#sites li#forum {
			/* Gap 15px */
			width: calc((100% - 15px) / 2);
			order: 2;
		}
		
		nav#sites li#actu {
			/* Gap 15px */
			width: calc((100% - 15px) / 2);
			order: 1;
		}
		
		nav#sites ul {
			flex-wrap: wrap;
		}
		
		nav#sites ul li {
			/* Gap 2*15px */
			width: calc((100% - 30px) / 3);
			box-sizing: border-box;
		}
		
		#container {
			flex-direction: column;
		}
		
		div#latest-game {
			display:none;
		}
		
		div#latest-game img {
			max-height: 150px;
			object-fit: cover;
		}
		
		main#content {
			order: 1;
		}
		nav#leftcol {
			order: 3;
		}
		nav#rightcol {
			order: 2;
		}
		
		nav#rightcol #image-of-the-week,
		nav#rightcol #random-character
		{
			display: none;
		}
	}