/* reset */
* {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block}
body {line-height:1;}
ol, ul {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none}
table {border-collapse:collapse; border-spacing:0}

/* fonts */
@font-face {font-family: amadeus; src: url(../fonts/amadeus.ttf) format('truetype');}
@font-face {font-family: homeheart; src: url(../fonts/home_heart.ttf) format('truetype');}
@font-face {font-family: janda; src: url(../fonts/janda.ttf) format('truetype');}
@font-face {font-family: futura; src: url(../fonts/futura.ttf) format('truetype');}
@font-face {font-family: roboto; src: url(../fonts/RobotoSlab-Regular.ttf) format('truetype');}
@font-face {font-family: roboto; src: url(../fonts/RobotoSlab-Bold.ttf) format('truetype'); font-weight: bold}
@font-face {font-family: roboto; src: url(../fonts/RobotoSlab-Light.ttf) format('truetype'); font-weight: lighter;}
@font-face {font-family: chalk; src: url(../fonts/chalk.ttf) format('truetype');}

/* responsive */
img, canvas, video {max-width:100%}

/* transitions */

* {
   transition: all 1s;
   -webkit-transition: all 1s;
}

li {
   transition: none !important;
   -webkit-transition: none !important;
}

/* html elements */

html {
   cursor: url(arrow.svg), url(arrow.png), default;
   height:100%;
}

body
{
   background: #000;
   background:url(background.jpg);
   color:#FFF;
   cursor: url(arrow.svg), url(arrow.png), default;
   font-family:roboto, serif;
   font-size:12px;
   position: relative;
   min-height:100%;
}

h1 {
   font-family: amadeus;
   font-size: 250%;
   color: #f55;
   text-align: center;
   margin: 10px;
   margin-top:0;
   padding-top:5px;
}

h2 {
   position: absolute;
   top: 40%;
   text-align: center;
   width: 100%;
   font-size: 34px;
}

/* classes */

.wrapper {
   max-width: 60%;
   margin: auto;
   transition: all 1s;
   -webkit-transition: all 1s;
}

.canvas {
   width: 100%;
   padding-top: 56%;
   position: relative;
   max-width: 1600px;
   background: #000;
   font-family: futura;
   overflow: hidden;
}

.canvas img, .canvas canvas, video {
   min-width:100%;
   border-radius: 15px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   position: absolute;
   left: 0;
   top: 0;
}

video {
   opacity:0;
}

#true_canvas
{
   background-size: cover;
   opacity:0;
}

.dialog_wrapper
{
   width:100%;
   background: #000;
}

.dialog {
   padding: 15px 13px;
   color:#fff;
   font-size: 120%;
   border-radius: 15px;
   position: relative;
}


.dialog p .player {font-weight: bold}

.click
{
   position: absolute;
   right: 0px;
   bottom: -50px;
   text-shadow: 2px 2px 4px #f99;
   color: #a77;
   background: #000;
   border-radius: 10px;
   width: 100px;
   vertical-align: middle;
   text-align: center;
   padding: 10px;
   text-transform: lowercase;
}

.click:hover {color:#a77;}

.dialog ul {margin: 0 15px; overflow:auto; overflow-y:hidden;}
.dialog ul:last-child {margin-top:15px;}
.dialog ul:first-child {margin-top:0;}
.dialog ul li {color:#66f;text-shadow: 1px 1px 4px #66f; padding:3px 0;}
.dialog ul li:hover {color:#77f;background:#223}
.dialog ul.tc li {width: auto}
.dialog ul.tc li:nth-child(even) {float:right;}
.dialog ul.tc li:nth-child(odd)  {float:left;clear:right;}

.version {position:absolute; width: 100%; bottom: 0; text-align:center;background: #000;padding: 5px 0;z-index:-999;}
.version a {color:#fff;text-decoration: none;color:#faa;}

button {
   background: #534;
   border-radius: 3px;
   margin: 15px;
   margin-left: 0;
   display: inline-block;
   color:#fad;
   padding: 5px;
   font-size: 25px;
   width: 40px;
   cursor: url(arrow.svg), url(arrow.png), default;
}

button:hover {background:#948}

.dialog ul li span {color:#3a8;}
.mphoto {cursor:pointer;max-width:175px;margin-top:10px;}

/* #left_side {position: absolute; top:10px; left:10px; text-align: center} */
#left_side {float:left; margin:10px; margin-bottom: 30px text-align: center}
#calendar table {border:1px solid #f55; text-align: center; font-family: monospace;}
#calendar table tr:first-child td {background: #333; font-weight: bold}
#calendar td {padding: 5px; background: #000; border: 1px solid #643;}
#calendar .weekend {background: #322}
#calendar .today {color: #7cf; background: #358 !important; font-weight: bold;}
#calendar .classDay {background:#523}
#calendar .wasted {color:#f35;}

#calendar #day25 {background: #fc3;color: #000;font-weight: bold;}

#left_side button
{
   width: 175px;
   font-size: 17px;
   padding: 2px 0;
   margin: auto;
   margin-top: 1px;
   background: #224;
   color: #58C;
   cursor: pointer;
}

button.skills
{
   background: #224;
   color: #58C;
   width: 75px;
}

.message
{
   color:#8FA;
   float:right;
}

#buttonLegend
{
   float: right;
   text-align: center;
   margin-right: 180px;
   margin-top: 20px;
}

#main_p {
   line-height: 150%;
}

#right_side {float:right; margin:10px; margin-bottom: 30px text-align: center}