@font-face{
    font-family: 'sundays';
    src: url('../fonts/sundayscript.ttf');}
@font-face{
    font-family: 'blogger';
    src: url('../fonts/bloggersans.ttf');}

/* STATIC */

nav, nav ul, section#changelogs .toggle-box + label:before, article .boutonpipix, .bouton, footer, h1{
  background-color:#0e9a9a;}
    
/* RESPONSIVE */

@media (min-width: 1024px){
  section article{width:950px;}
  article div#pipixmenu{width:950px;}
  footer div{width:950px;}
  footer #contentfooter{
    position:relative;
    margin:auto;}
  footer #partner,footer #rs{ 
    display:table-cell;
    vertical-align:top;
    padding:0 8px;}
  footer #rs{
    position:absolute;
    top:0px;right:0px;
    text-align:right;}
  footer #cr p{font-size: 1em;}
}
@media (min-width: 1440px){
  section article{width:1100px;}
  article div#pipixmenu{width:950px;}
  footer div{width:1300px;}
}
@media (min-width: 2560px){
  section article{width:1200px;}
  article div#pipixmenu{width:1000px;}
  footer div{width:1500px;}
}
@media handheld, only screen and (max-width: 1023px) and (min-width: 769px), only screen and (max-width: 1023px) and (min-device-width: 769px){
  nav{font-size:1em;}
  section article{padding: 15px 30px 5px 30px!important;}
  .t-wipe{display:none!important;}
}
@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px){
  nav.m-menu{display:block!important;}
  nav{
    height:54px!important;
    font-size:1.5em!important;}
  section div img#pointe{display:none;}
  section article{padding: 15px 30px 5px 30px!important;}
  .m-wipe, .t-wipe{display:none!important;}
  article div div#pipix-dl,
  article div div#pipix-desc{
    display:initial!important;
    width:initial!important;}
  footer div div div{
    display:block!important;
    width:initial!important;
    text-align:center!important;}
  h1{
    padding:8px 50px!important;
    font-size:2em!important;
    border-top:initial!important;}
}
@media handheld, only screen and (max-width: 320px), only screen and (max-device-width: 320px){
  nav.m-menu{display:block!important;}
  nav{
    height:54px!important;
    font-size:1.5em!important;}
  section div img#pointe{display:none;}
  section article{padding: 15px 30px 5px 30px!important;}
  .m-wipe, .t-wipe{display:none!important;}
  article div div#pipix-dl,
  article div div#pipix-desc{
    display:initial!important;
    width:initial!important;}
  footer div div div{
    display:block!important;
    width:initial!important;
    text-align:center!important;}
  h1{
    padding:8px 50px!important;
    font-size:2em!important;
    border-top:initial!important;}
}

/* RESPONSIVE END */

html{overflow-y:scroll;}
body{
  position:relative; 
  margin:0;              
  background-color:#ffffff;
  font-family: "Open Sans", "trebuchet ms", serif;}

/* HEADER */

header{position:relative;z-index:5;}
header img{
  display:block;
  width:100%;}

/* NAV */

nav#fixedone{
  top:0px;
  display:none}
nav.m-menu{
  display:none;
  position: absolute;
  right: 0px;
  border-bottom:initial;}
nav.m-menu a#m-menu{
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  text-align: center;
  font-size: 26px;
  margin: 0;
  position: relative;
  display: block;}
nav{
  border-bottom:1px solid #396777;
  height:52px;
  font-size:1em;
  text-align:center;}
nav ul{
  position:relative;
  display:inline-table; 
  margin:0;
  padding:0;
  text-align:left;
  list-style:none;} 
nav ul:after{
  content:"";
  clear:both;
  display:block;}
nav ul li{float:left;}
nav ul li:hover > ul{display:block;}
nav ul li a{
  display:block; 
  padding:15px 40px;
  color:#FFFFFF;
  text-decoration:none;}
nav ul li a:hover{color:#fef44b;}
nav ul ul{ 
  display:none;
  width:inherit;
  border:1px solid #396777;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  padding:10px 0;
  position:absolute;
  top:100%;
  text-align:left;}
nav ul ul li{
  position:relative;
  float:none;
  width:initial;}
nav ul ul li:hover{background:#12b1b1;}
nav ul ul li a{
  padding:5px 40px;
  color:#FFFFFF;}
nav ul ul ul{
  position:absolute;
  left:100%;
  top:-11px;
  border:1px solid #396777;
  border-top-right-radius:5px;}

nav.fixed{
  position:fixed;
  width:100%}
  
/* NAV M */

nav #m-nav{
  position:fixed;
  top:0px;right:0px;
  display:none;
  padding-top:15px;
  height: 100%;
}
nav #m-nav ul{
  width: 100%;
  position: relative;
  list-style: none;
  padding: 0 0 30px 0;
  margin: 0;}
nav ul#m-nav li{
  float:initial!important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.overlay{
/*transform: translateX(-450px); */
}
.overlay .m-cache {
  position: fixed;
  top:0;right:0;bottom:0;left:0;
  z-index: 1;
  overflow:hidden!important;
  background-color:rgba(0, 0, 0, 0.6);
    animation-duration: 250ms;
    animation-delay: 0ms;
}
 
/* */
 
#mcservmenu a{color:#0e9a9a;}
#mcservmenu a.mcselected1,#mcservmenu a:nth-child(1):hover{color:#FFC107;}
#mcservmenu a.mcselected2,#mcservmenu a:nth-child(2):hover{color:#FF5555;}
#mcservmenu a.mcselected3,#mcservmenu a:nth-child(3):hover{color:#55FFFF;}
#mcservmenu a.mcselected4,#mcservmenu a:nth-child(4):hover{color:#55FF55;}
#mcservmenu a.mcselected5,#mcservmenu a:nth-child(5):hover{color:#FF0000;}

/* SECTION */

section{padding-bottom:10px;}
section article{
  margin:0 auto;
  padding: 15px 15px 5px 15px;}
section:nth-child(odd){background-color:#ffffff;}
section:nth-child(even){background-color:#f0f0f0;}

section#changelogs div div{margin:0 30px;}
section#changelogs .toggle-box{display:none;}
section#changelogs .toggle-box + label{
  cursor:pointer;
  display:block;
  font-weight:bold;
  line-height:21px;
  margin-bottom:5px;}
section#changelogs .toggle-box + label + div{
  display:none;
  margin-bottom:10px;}
section#changelogs .toggle-box:checked + label + div{display:block;}
section#changelogs .toggle-box + label:before{
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  color:#FFFFFF;
  content:"+";
  display:block;
  float:left;
  font-weight:bold;
  height:20px;
  line-height:20px;
  margin-right:5px;
  text-align:center;
  width:20px;}
section#changelogs .toggle-box:checked + label:before{content:"\2212";}

/* TS3VIEWER */

section .col3 #ts3viewer iframe{border:1px solid #828790;}
article .bouton {
  position: relative;
  -webkit-border-radius: 5px;
  border: none;
  border-radius: 5px;
  color: #FFFFFF;
  display: inline-block;
  padding: 2px 10px;
  text-align: center;
  text-decoration: none; }
article .bouton:hover{
  background-color:#12b1b1;
  color:#fef44b;}
article .bouton:active {
  background-color: #12b1b1;
}

/* ARTICLE */

div#artmore{
  padding:10px 0;
  background-color:#f1f2f3;}

article .boutonpipix {
  position: relative;
  -webkit-border-radius: 5px;
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: 0px 8px 0px #0c7979;
  box-shadow: 0px 8px 0px #0c7979;
  color: #FFFFFF;
  display: inline-block;
  font-size: 34px;
  padding: 2px 10px;
  text-align: center;
  text-decoration: none; }
article .boutonpipix:hover{
  background-color:#12b1b1;
  color:#fef44b;}
article .boutonpipix:active {
  background-color: #12b1b1;
  box-shadow: 0 4px #0c7979;
  transform: translateY(4px);
}
article #pipixmenu{margin:auto;}
article #pipixlogo {
  display: inline-block;
  vertical-align: middle;
  width: 250px;
  height: 250px; }
article #pipixsmenu {
  display: inline-block;
  vertical-align: middle;}
  
article div div#pipix-dl,
article div div#pipix-desc{
  display:table-cell;
  width:49%;
  vertical-align:top;}
  div#pipix-desc{
    background-color:#dff7ff;
    border-radius:20px;}
  div#pipix-desc h2,
  div#pipix-desc p,
  div#pipix-desc img{
    margin:0;
    padding:15px;}
  div#pipix-dl h3 img{
    margin:10px;
    vertical-align:middle;
    width:25px;
    height:25px;}
  div#pipix-more{
    margin:15px 0;
    background-color:#d8e9d0;
    border-radius:20px;}
  div#pipix-more p{
    margin:0;
    padding:15px;}
  div#pipix-changelogs{margin:0 15px;}
article#servers .mini{
  font-family:sans-serif;
  font-size:10px;}
article#servers div div{
  display:table-cell;
  width:49%;
  vertical-align:top;
  padding:5px;}
  
table.servers,
table.statseco{
  width:100%;
  border-collapse:collapse;}

table.servers tbody tr:nth-child(odd),
table.statseco tr:nth-child(odd){background-color:#f5f5f5;}
table.servers tbody tr:nth-child(even),
table.statseco tr:nth-child(even){background-color:#e0e0e0;}

table.servers tbody tr td,
table.statseco tr td,{padding:5px 10px;}

table.statseco thead tr,
table.statseco tfoot tr{
  background-color:initial;
  font-weight:bold;}
 
img.gameslogo{
  position:relative;top:-75px;
  width:80px;height:80px; 
  float:right;}

img.glogo{
  position:relative;
  top:-19.92px;
  width:80px;height:80px;
  float:left;}
  
/* FOOTER */

footer{
  padding:10px 0;
  color:#ffffff;}
footer a{color:#fef44b;}
footer div{
  margin:auto;
  padding:0 10px 0 10px;}
footer div div {padding:0;}
footer div div div{
  padding:0 15px 5px 15px;
  display:table-cell;
  vertical-align:top;
  width:33.33333333%;
}

/* MORE... */

h1{
  margin:0;
  padding:8px 0;
  color:#ffffff;
  border-top:1px solid #396777;
  text-align:center;
  font:bold 3em sundays;}

img#cm-full{
  position:relative;
  top:20px;}

.glist div{min-height:100px;}
.glogo{margin:15px;}
  
.col3 > *{padding:0 30px;}
.col3 div{
  display:table-cell;
  vertical-align:top;
  width: 33.33333333%;}
  
.active{color:#fef44b;}

.show{display:block!important;}

.timestamp{
  text-align:right;
  font-size:0.8em;
}