/* ------------------------------------------------
   Stylesheet created 2015-02-07
   Creator: Moppe
   http://www.moppe.de
------------------------------------------------ */

/* --------------------------------------------- */
/* --------------- general style --------------- */
/* --------------------------------------------- */
body {
 background: #505050 url('../images/bg.png');
 font: bold 14px Helvetica, Arial, Verdana, Sans-Serif;
 color: #A3A3A3;
 margin: 5px 0px 5px 0px;
 text-align: center;
}

img { border: none; }
p   { margin: 0px 0px 7px 0px; line-height: 16px; }

/* --------------------------------------------- */
/* ---------------- table style ---------------- */
/* --------------------------------------------- */
table {
 border: none;
 border-collapse: collapse;
 border-spacing: 0;
 font: normal 14px Verdana, Arial, Helvetica, Sans-Serif;
 color: #6E6E6E;
 padding: 0px;
 margin-left: auto;
 margin-right: auto;
}
th   {  }
td   {  }

/* --------------------------------------------- */
/* ----------------- link style ---------------- */
/* --------------------------------------------- */
a:link, a:visited, a:active { text-decoration: none; color: #A4A4A4; font-size: 16px; font-weight: bold; -webkit-transition: color 300ms linear; -moz-transition: color 300ms linear; -o-transition: color 300ms linear; transition: color 300ms linear }
a:hover, a:focus            { text-decoration: none; color: #FFB701; font-size: 16px; font-weight: bold; outline: none; }

/* --------------------------------------------- */
/* ---------------- page device ---------------- */
/* --------------------------------------------- */
#header {
  position: absolute;
  width: 100%;
  height: 170px;
  top: 0px;
  left: 0px;
  background: rgba(14, 20, 25, 0.2);
  border-bottom: 1px solid #000000;
  -webkit-box-shadow: 0px 5px 5px 1px rgba(98, 107, 123, 0.8); /* Safari, Chrome */
     -moz-box-shadow: 0px 5px 5px 1px rgba(98, 107, 123, 0.8); /* Firefox < 13 */
       -o-box-shadow: 0px 5px 5px 1px rgba(98, 107, 123, 0.8); /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
          box-shadow: 0px 5px 5px 1px rgba(98, 107, 123, 0.8); /* W3C Standard */
  z-index: -1;
}

#nav {
  position: absolute;
  bottom: 5px;
  right: 0px;
  margin-right: 100px;
}

#logo {
  position: absolute;
  width: 783px;
  height: 404px;
  top: 50%;
  left: 50%;
  background: url('../images/logo_trans.png');
  margin-top: -204px;
  margin-left: -391px;
}

#footer {
  position: absolute;
  width: 100%;
  height: 170px;
  bottom: 0px;
  left: 0px;
  background: rgba(14, 20, 25, 0.2);
  border-top: 1px solid #000000;
  -webkit-box-shadow: 0px -5px 5px 1px rgba(98, 107, 123, 0.8); /* Safari, Chrome */
     -moz-box-shadow: 0px -5px 5px 1px rgba(98, 107, 123, 0.8); /* Firefox < 13 */
       -o-box-shadow: 0px -5px 5px 1px rgba(98, 107, 123, 0.8); /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
          box-shadow: 0px -5px 5px 1px rgba(98, 107, 123, 0.8); /* W3C Standard */
  z-index: -1;
}

#copy {
  position: absolute;
  bottom: 0px;
  left:0px;
  width: 100%;
  height: 30px;
  padding-top: 5px;
  text-align: center;
  text-shadow: #000000 2px 2px 2px, #000000 1px 1px 2px;
  filter: shadow(color:#000000, direction=135 strength=4);
}

/* --------------------------------------------- */
/* --------------- mobile device --------------- */
/* --------------------------------------------- */

/* Tablets, Notebooks (IPad, IPad mini) */
@media only screen
and (min-device-width: 768px)
and (max-device-width:1024px) {

}

/* Smartphones (landscape) */
@media only screen and (max-width: 668px) {
  body {
    font-size: 13px;
  }
  #header {
    height: 25%;
  }
  #nav {
    margin-right: 30px;
  }
  #logo {
    width: 400px;
    height: 206px;
    background: url('../images/logo_trans_mobile_l.png');
    margin-top: -103px;
    margin-left: -200px;
  }
  #footer {
    height: 25%;
  }
  #copy {
    height: 25px;
  }
}

/* Smartphones (portrait) */
@media only screen and (max-width: 480px) {
  #logo {
    width: 340px;
    height: 175px;
    background: url('../images/logo_trans_mobile_p.png');
    margin-top: -87px;
    margin-left: -170px;
  }
}