/* 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(amadeus.ttf) format('truetype');}
@font-face {font-family: homeheart; src: url(home_heart.ttf) format('truetype');}
@font-face {font-family: janda; src: url(janda.ttf) format('truetype');}
@font-face {font-family: futura; src: url(futura.ttf) format('truetype');}

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

/* transitions */
img {
   transition: all 1s;
   -webkit-transition: all 1s;
}

/* html elements */

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

body
{
   background: #000;
   background:url(background.jpg);
   color:#FFF;
   cursor: url(arrow.svg), url(arrow.png), default;
   font-family:chams;
}

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

/* 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;
   border-radius: 15px;
   font-family: futura;
}

.canvas img {
   border-radius: 15px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   position: absolute;
   left: 0;
   top: 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;}
.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;}

input[type="button"] {
   background: #513;
   border-radius: 3px;
   margin: 15px;
   margin-left: 0;
   display: inline-block;
   color:#fff;
   padding: 6px;
}

.dialog ul li span {color:#3a8;}