/*
designed for sylar server
author : Sylvain MARIEN
mail : sylvain@sylarserver.fr
*/

@font-face {
    font-family: 'seasideresortnfregular';
    src: url('../font/SEASRN__-webfont.eot');
    src: url('../font/SEASRN__-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SEASRN__-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'archery';
    src: url('../font/SF_Archery_Black_SC-webfont.eot');
    src: url('../font/SF_Archery_Black_SC-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SF_Archery_Black_SC-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
header .main
{color: white;
font-size: 2.2em;
font-family: seasideresortnfregular;
font-weight: bold;
text-align: center;
position:relative; top :25px;
}

header .accueil
{-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
border-radius:6px;
	text-indent:0;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:50px;
	line-height:50px;
	width:100px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
	position: fixed;
	left: 5px;
	top: 5px;
}
header .accueil:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}
header .accueil:active {
	position: fixed;
	left: 5px;
	top: 6px;
}

body
{background-color: black;
background-image: url('../img/main.jpg');
background-size : cover cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}

article {color: white;
font-size: 1.4em;
text-align: center;
width : 900px;
margin: 0 auto;
position: relative; top: 25px;
}

#erreur {position: relative; top: 100px;}
.errorimg {border-radius: 20px; }

.forum{background-repeat: no-repeat;
background-size: contain;
background-color: white;
background-position: center;
height : 212px;
width : 760px;
display : inline-block;
border-radius : 15px;
box-shadow: 6px 6px 6px black;
margin-top : 25px; 
}
.forum:hover {
box-shadow: 6px 6px 6px black inset;
border: solid 3px;

}

#status li{
	list-style-type:none;
}


#hosts {
position: absolute;
bottom: 50px;
width: 100%;
text-align : center;
}

.link {background-repeat: no-repeat;
background-size: contain;
background-color: white;
background-position: center;
height : 100px;
width : 100px;
display : inline-block;
border-radius : 15px;
}
.link:hover {
box-shadow: 3px 3px 3px black inset;}
#mumble{background-image: url('../img/mumble.jpg');}
#teamspeak{background-image: url('../img/teamspeak.jpg');}
#csgo{background-image: url('../img/csgo.jpg');}
#gmod{background-image: url('../img/gmod.jpg');}
#minecraft{background-image: url('../img/minecraft.jpg');}
#owncloud{background-image: url('');}

#hosts p{
color: white;
font-size: 1.5em;
font-family: archery;
}

.liens{
position : absolute;
right : 15px;
bottom : 15px;
border: 1px solid white;
border-radius: 6px;
padding : 15px;
background-color: grey;
color: white;
font-size: 1.2em;
text-align: center;
width: 260px;
height: 240px;
max-width: 20%;
}

.wn{
position : absolute;
left : 15px;
bottom : 15px;
border: 1px solid white;
border-radius: 6px;
padding : 15px;
background-color: grey;
color: white;
font-size: 1.4em;
text-align: center;
width: 260px;
max-width: 20%;
}

 h2{
font-family: Algerian;
border-bottom: 3px dotted;
}

a {
text-decoration : none;
color : white;}

a:hover {
color : black;
}


@media only screen and (max-width:1130px){

.accueil, .liens, .wn {display:none;}
body, article{width:auto; font-size:140%;}
article{position: relative; top: 2px;}
.forum{position: relative; right: 30px; bottom: 15px; display: span; width: 90%; background-color: black;
    padding-bottom: 25%;
    height: 0;}
#hosts {position: relative; top: 10px;}
.link {height : 170px; width : 170px; position:relative ; right: 30px;}
}
@media only screen and (max-width:360px){

.accueil, .liens, .wn {display:none; visibility:hidden;}
body, article{width:auto; font-size:100%;}
body {background-image: url('../img/mobile.jpg'); background-size: cover;}
article{position: relative; top: 2px;}
.forum{position: relative; bottom: 15px; display: span; width: 90%; background-color: black;
    padding-bottom: 25%;
    height: 0;}
#hosts {position: relative; top: 10px; }
.link {height : 80px; width : 80px; position:relative ; right: 30px;}
}