@import url('/font/roboto.css');

body {
    font-family:Roboto, Arial, sans-serif;
    color:#2d2d2b;
    background:url(back.jpg) no-repeat #2d2d2b;
    font-size:10px;
    background-size: 100%;
    margin:0;
}
div {
    box-sizing:border-box;
}
table {
    border-collapse:collapse;
}
td {
    padding:2px 0;
}
a {
    color: #FFF;
    text-decoration:none;
}

.box a {
    color:#d4121e;
}
form {
    position:relative;
}

#container {
    margin:0 auto;
    max-width:1200px;
    padding:40px;
}

/* main left column */
#main {
    font-size:150%;
    background:url(t_electude20.png) 0 20px no-repeat;
    padding-top:25px;
    float:left;
    width:60%;
    color:#fff;
    padding-right:10px;
    text-shadow: 0 0 6px #000;
}
#main .box {
    color:#000;
    text-shadow:none;
    font-size:70%;
}

.extra {
    font-size:80%;
}

/* side panels on the right */
#panels {
    float:left;
    width:40%;
}
#panels > div, .box {
    background:rgba(255,255,255,0.8);
    padding:10px;
    margin-left:1%;
    margin:10px 0;
    border:1px solid #ccc;
    box-shadow:2px 2px 4px #000;
}

#panels > div {
    background:#d4121e;
    color:#FFF;
    border:none;
}

#panels .message {
    color:#d4121e;
}

#panels .opt {
    margin-top:3px;
    font-size:90%;
}
#panels .opt.right {
    float:right;
}

#privacy a,
#panels a{
    color:#2d2db;
}
#panels h2 {
    color:#2d2db;
}
#panels .you {
    font-weight:bold;
}
#panels input[type=submit],
#panels input[type=submit]:disabled {
    font-weight:bold;
    color: #d4121e;
    background:#FFF;
}

input[type=submit],
input[type=submit]:disabled {
    font-size:100%; 
    font-family:Roboto, Arial, sans-serif;
    border:none;
    margin-top:10px;
    display:block;
    cursor:pointer;
    background: #d4121e;
    color:#FFF;
    padding:8px;
}
/* horizontal menu in main div */
.menu {
    padding:0;
}
.menu a {
    display:block;
    float:left;
    padding:10px;
    opacity:0.7;
    cursor:pointer;
    color:#FFF;
}
.menu a:hover {
    background:rgba(255,255,255,0.2);
}

.home .menu {
    display:none;
}

.game a[href=game],
.game a[href=game]:hover,
.experiment a[href=experiment],
.experiment a[href=experiment]:hover,
.help a[href=help],
.help a[href=help]:hover,
.account a[href=account],
.account a[href=account]:hover {
    opacity:1;
    color:#000;
    background:rgba(255,255,255,0.8);
    text-shadow:none;
}
.box[id],
#home,
#game{
    display:none;
    clear:left;
}
/*
#game, #experiment, #account, #terminate {
    display:none;
    clear:left;
}
*/

#game .box {
    opacity:0.7;
    margin:4px 0;
}

#game .active {
    opacity:1;
}

#game .score {
    background:#900;
    box-shadow:inset -1px 1px 2px rgba(0,0,0,0.5);
    border-bottom:1px solid #FFF;
    width:100%;
    margin:5px 0;
    height:15px;
}
#game .score .ok {
    background:#0E2;
    box-shadow:inset 1px 1px 2px rgba(0,0,0,0.7);
    height:100%;
}
.forgot #home {
    display:block;
}
.forgot #login,
.forgot .menu,
#forgot {
    display:none;
}
a.button {
    margin-top:10px;
    display:table;
    color:#fff;
    background:url(w_go_right.png) 0 50% no-repeat #d4121e;
    border:none;
    padding:8px 8px 8px 30px;
    cursor:pointer;
    text-shadow:none;
}
.extra .button{
    margin-top:0;
    box-shadow:2px 2px 4px rgba(0,0,0,0.5);
}

select[disabled], input[disabled] {
    cursor:default !important;
    opacity:0.6;
}

#main .box i {
    color:#666;
}
h1 {
    color:#cdcac7;
    font-size:2em;
    margin:23px 0 10px 0;
    font-weight:normal;
}
h1 span {
    display:none;
}

h2 {
    margin:0 0 0.6em 0;
    font-size:1.3em;
}

#main .opt {
    font-size:80%;
}
table {
    box-sizing:border-box;
    width:100%;
}
td:last-child {
    text-align:right;
}
td.num {
    width:25px;
}
select,
input[type=text],
input[type=password]{
    box-sizing:border-box;
    font-family:Roboto, Arial, sans-serif;
    font-size:100%; 
    color:#222;
    padding:0.5em;
    margin:0.2em 0 0.2em 0;
    border:none;
    background:#FFF;
    width:100%;
}

input.alert {
    background:url(icons.svg) no-repeat right -200px #FFF;
/*  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='25px' width='20px'><text x='17' y='20' fill='red' text-anchor='end' font-size='20'>✗</text></svg>") right center no-repeat #FFF;*/
}
input.ok{
    background:url(icons.svg) no-repeat right -100px #FFF;
    /* '%23' = '#' url-escaped, required in Firefox */
/*  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='25px' width='20px'><text x='17' y='20' fill='%2347d' text-anchor='end' font-size='20'>✔</text></svg>") right center no-repeat #FFF; */
}

#main::selected{
    text-shadow:none;
}

.message {
/*  color:#00A01D;*/
    background:#FFF;
    white-space:pre-line;
    display:none;
    margin-top:10px;
    padding:10px;
    position:relative;
    background:#fff;
}

.message.active {
    display:block;
}


.message:after {
    content:"";
    position:absolute;
    bottom:-13px; /* value = - border-top-width - border-bottom-width */
    left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:13px 13px 0;
    border-style:solid;
    border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;

    top:-13px; /* value = - border-top-width - border-bottom-width */
    bottom:auto;
    left:auto;
    left:10px; /* value = (:before right) + (:before border-right) - (:after border-right) */
    border-width:0 13px 13px;
}

.close {
    margin:-5px -5px 0 0;
    width:24px;
    height:24px;
    float:right;
    background:url(icons.svg);
    cursor:pointer;
    opacity:0.4;
}
.close:hover{
    opacity:0.8;
}

.error {
    opacity:0;
    color:#2d2d2b;
    position:absolute;  
    top:-20px;
    left:10%;
    right:10%;
    padding:10px;
    background:#FFF;
    border:5px solid #716d6c;
    transition:opacity 0.4s;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    white-space:pre-line;
    box-shadow:2px 2px 4px rgba(0,0,0,0.5);
}


.error:before {
    content:"";
    position:absolute;
    bottom:-20px; /* value = - border-top-width - border-bottom-width */
    left:40px; /* controls horizontal position */
    border-width:20px 20px 0;
    border-style:solid;
    border-color:#716d6c transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}

/* creates the smaller  triangle */
.error:after {
    content:"";
    position:absolute;
    bottom:-13px; /* value = - border-top-width - border-bottom-width */
    left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:13px 13px 0;
    border-style:solid;
    border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}

#footer {
    clear:left;
    font-size:120%;
    color:#cdcac7;
    text-shadow: 0 0 6px #000;
}
#footer a {
    color:#FFF;
    font-weight:bold;
}
#footer div {
    margin-top:10px;
    font-size:10px;
    opacity:100%;
}
#footer br {
    clear:left;
}

.facebook, .twitter, .googleplus, .linkedin {
    display:block;
    width:34px;
    height:34px;
    margin:0 2px;
    float:left;
    background:url(social.png);
}
.twitter{
    background-position:-34px 0;
}
.googleplus{
    background-position:-68px 0;
}

.linkedin{
    background-position:-102px 0;
}

@media screen and (min-width: 801px) {
    body {
        font-size:12px;
    }
    #main {
        background:url(t_electude30.png) 0 20px no-repeat;
    }
    h1 {
        margin-top:35px;
    }
}
@media screen and (min-width: 1025px) {
    body {
        font-size:14px;
    }
}
/* small screens, single column */
@media screen and (max-width: 600px) {
    body {
        font-size:12px;
    }
    #container {
        padding:20px;
    }
    #main, #panels {
        width:100%;
        float:none;
    }
    #main {
        padding-right:0px;
    }
    #panels {
        margin-top:20px;
    }
}