@import url("https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700");

@font-face {
    font-family: 'league_gothicregular';
    src: url('leaguegothic-regular-webfont.eot');
    src: url('leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguegothic-regular-webfont.woff') format('woff'),
         url('leaguegothic-regular-webfont.ttf') format('truetype'),
         url('leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
    background-color: #FAFAFA;
    overflow: -moz-scrollbars-vertical;
}

body {
     color: #282828;
     font: 300 15px/1.5 'Palatino',Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;
     margin: 0px;
     padding: 50px 0px;
}

.wrapper {
     margin: 0px auto;
     width: 640px;
}

header, section, footer {
     display: block;
}

header .h {
    text-decoration: underline;
}

a {
     color: #770000;
     text-decoration: none;
}

p {
     margin: 0px 0px 20px;
     padding: 0px;
}

strong {
     color: #222222;
     font-weight: 700;
}

header {
     background: linear-gradient(#F0F0F0, #F0F0F0) repeat scroll 0px 0px transparent;
     border-bottom: 1px solid #AAAAAA;
     padding: 15px 20px;
     position: relative;
}

header h1, header h1 a {
     color: #990000;
     font-size: 100px;
     line-height: 1.2;
     margin: 0px;
     padding: 0px;
     font-family: "league_gothicregular";
}

header h1 .smaller { font-size:50px }

header.without-description h1 {
     margin: 10px 0px;
}

header p {
     color: #770000;
     margin: 0px;
}

header p.view {
     font-weight: 700;
     text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9);
}

header p.view a {
     color: #393939;
}

header p.view small {
     font-weight: 400;
}

header ul {
     list-style: none outside none;
     margin: 0px;
     padding: 0px;
     position: absolute;
     right: 20px;
     top: 20px;
     z-index: 1;
}

header ul li {
     float: left;
}

header ul a {
     display: block;
     font-weight: 800;
     padding: 10px;
     text-align: center;
     background-color: white;
}

header ul a:hover {
     background-color: #BFC0A9;
}

header ul a strong {
     color: #FFFFFF;
     display: block;
     font-size: 14px;
}

section {
     background: linear-gradient(#FAFAFA, #F0F0F0 700px) repeat scroll 0px 0px transparent;
     border-top: 1px solid #FFFFFF;
     font-size: 17px;
     padding: 15px 20px;
     position: relative;
     text-align:justify;
}

h1, h2, h3, h4, h5, h6 {
     color: #222222;
     line-height: 1.2;
     margin: 0px 0px 20px;
     padding: 0px;
     text-align:left;
}

p, ul, ol, table, pre, dl {
     margin: 0px 0px 20px;
}

.large {margin: 0 -20px 20px}
.large img, .large .coverslideBlock {width:100%}

h1, h2, h3 {
     line-height: 1.1;
}

h1 {
     font-size: 28px;
}

h2 {
     color: #393939;
}

h3, h4, h5, h6 {
     color: #494949;
}

blockquote {
     background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.06);
     color: #222222;
     font-style: italic;
     margin: 0px -20px 20px;
     padding: 15px 20px 1px 40px;
}

img {
     max-width: 100%;
}

code, pre {
     color: #333333;
     font-family: Monaco,Bitstream Vera Sans Mono,Lucida Console,Terminal;
     font-size: 13px;
}

pre {
     background: none repeat scroll 0% 0% #3A3C42;
     color: #F8F8F2;
     margin: 0px -20px 20px;
     overflow-x: auto;
     padding: 20px;
}

pre code {
     color: #F8F8F2;
}

li pre {
     margin-left: -60px;
     padding-left: 60px;
}

table {
     border-collapse: collapse;
     width: 100%;
}

th, td {
     border-bottom: 1px solid #AAAAAA;
     padding: 5px 10px;
     text-align: left;
}

td.right {text-align: right;}

dt {
     color: #222222;
     font-weight: 700;
}

th {
     color: #222222;
}

small {
     font-size: 11px;
}

hr {
     background: none repeat scroll 0% 0% #AAAAAA;
     border: 0px none;
     height: 1px;
     margin: 0px 0px 20px;
}

footer {
     margin: 0px auto;
     overflow: hidden;
     padding: 20px 0px 0px;
     width: 640px;
}

footer .left {
    width: 400px
}

footer .right {
    float:right
}

footer a {
     font-weight: bold;
}

footer p {
     float: left;
}

footer p + p {
     float: right;
}

@media print, screen and (max-width: 740px) {
  body { padding: 0px; }
  .wrapper { border-radius: 0px; box-shadow: none; width: 100%; }
  footer { border-radius: 0px; padding: 20px; width: auto; }
  footer .left { width: 100%; }
  footer p { float: none; margin: 0px; }
  footer p + p { float: none; }
  header ul {top: 0px; right: 0px}
}

@media print, screen and (max-width: 480px) {
  header p.view { display: block; }
  header p { width: 100%; }
  header h1 {margin-top: 30px}
}

@media print, screen and (max-width: 250px) {
  td.right {display:none}
  header ul li {float:none}
  header ul {position:inherit}
}

@media print {
  header p.view a small:before { content: "at http://github.com/"; }
}

/* SRS */

#test {
    display: block;
    /*border:1px solid #000000;*/
    width: 100%; /* body width - padding - border */
    min-height: 400px;
    background: lightblue;
    font-size: 48px;
    padding: 0px;
    margin: auto;
    text-align: center;
}
#test p{
    min-height:200px;
    margin: 0px;
}

.center {text-align: center}

#hint {
    display:none;     
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid;
    margin: 0 10%;
    padding: 5%;
    position: relative;
    float:right;
    text-align: center;
    top: 200px;
    width: 70%;
}

#KO {background-color:blue}
#OK {float:right; background-color:green}
#OK, #KO {width:50%; text-align:center; height:40px; line-height:35px; color:white;}