/*
              This file is part of the Folding@home NaCl Client

        Copyright (c) 2013-2014, Hong Kong University Science & Technology
               Copyright (c) 2013-2014, Stanford University
                             All rights reserved.

        This software is free software: you can redistribute it and/or
        modify it under the terms of the GNU Lesser General Public License
        as published by the Free Software Foundation, either version 2.1 of
        the License, or (at your option) any later version.

        This software is distributed in the hope that it will be useful,
        but WITHOUT ANY WARRANTY; without even the implied warranty of
        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
        Lesser General Public License for more details.

        You should have received a copy of the GNU Lesser General Public
        License along with this software.  If not, see
        <http://www.gnu.org/licenses/>.

                For information regarding this software email:
                               Joseph Coffland
                        joseph@cauldrondevelopment.com
*/

html * {
    padding: 0;
    margin: 0;
}

a {
    outline: none;
    color: #8e0028;
}

a:hover {text-decoration: none;}

p {padding: 1em 0;}

.clearfix {
    content: " ";
    clear: both;
}

body {
    background: #5875a0;
    font-family: 'PT Sans', sans-serif;
    font-size: 12pt;
}

.message {
    background: #ece66c;
    width: 100%;
    border-bottom: 1px solid black;
}

.message-close {
    float: right;
    clear: right;
    width: 16px;
    height: 1.25em;
    background-image: url('../images/close.png');
    background-repeat: no-repeat;
    background-position: center;
}

.message-close:hover {
    background-image: url('../images/close_hover.png');
}

div.what {
    float: right;
    font-size: 80%;
}

#header {
    width: 440px;
    height: 125px;
    margin: auto;
    background: url('../images/header.png') no-repeat;
}

#panel, #stats, #control, #project {
    border-radius: 10px;
    margin: 10px;
}

#panel {
    width: 900px;
    margin: 0 auto;
    background: #eee;
    color: #444;
    border: 3px solid #444;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, .6);
}

#panel-header {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 12pt;
    font-weight: bold;
    background: #fff;
    color: #818d9f;
    padding: 0.25em 10px 0.25em 25px;
    height: 32px;
    line-height: 32px;
}

#menu {width: 100%;}
#menu td {width: 33%;}
#menu td.left {text-align: left;}
#menu td.middle {text-align: center;}
#menu td.right {text-align: right;}
#menu span {padding: 0 0.2em;}
#menu a {text-decoration: none;}

#menu img {
    width: 24px;
    border: 1px solid #fff;
    vertical-align: middle;
    margin-bottom: 5px;
    border-radius: 5px;
}

#menu img:hover {border: 1px solid #ddd;}
#menu .button img, #menu .button img:hover {border: 0;}

a.button {
    display: inline-block;
    /*border: 1px solid #ddd;*/
    border-radius: 5px;
    padding: 0.1em 0.2em;
    line-height: 1.5em;
}

a.button:hover {background: #ddd;}

#menu .google-button {
    position: relative;
    top: 5px;
}

a.desktop {color: #42c0fb;}

#menu .desktop img {
    width: 16px;
    vertical-align: inherit;
}

#identity {
    padding: 0.5em 25px;
    width: 850px;
}

#identity p {padding: 0.25em 0;}
#identity input.user {width: 14em;}
#identity input.team {width: 5em;}

#identity input.passkey {
    width: 20em;
    font-family: "courier";
}

.user-points {
    font-size: 150%;
    font-weight: 900;
    color: #fb6436;
}

.team-points {
    color: #ff5315;
    font-weight: bold;
    font-size: 120%;
}

#status {
    margin-top: -10px;
}

#status-image {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: 3px solid #000;
    margin-right: 10px;
    margin-top: -10px;
    padding: 0;
    float: left;
    color: black;
    background: #64ca7d;
    font-size: 34px;
    text-align: center;
}

#status-image.running div, #status-image.waiting div {
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#status-image.running div:after {
    content: "\21bb";
}

#status-image.uploading div:after, #status-image.downloading div:after {
    content: "\27bd";
}

#status-image.uploading div {
    -webkit-animation: upload 0.5s ease infinite alternate;
    animation: upload 0.5s ease infinite alternate;
    -webkit-transform: rotate(-90deg) translate(2px, -1px);
    transform: rotate(-90deg) translate(2px, -1px);
}

#status-image.downloading div {
    -webkit-animation: download 0.5s ease infinite alternate;
    animation: download 0.5s ease infinite alternate;
    -webkit-transform: rotate(90deg) translate(-2px, -1px);
    transform: rotate(90deg) translate(-2px, -1px);
}

#status-image.waiting {
    background: white;
}

#status-image.waiting div:after {
    content: "\231b";
}

#status-image.error {
    background: #ff0000;
}

#status-image.error div:after {
    content: "\2620";
}

#status-image.paused, #status-image.finished {
    background: #fff276;
}

#status-image.paused div:after, #status-image.finished div:after {
    content: "\2615";
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes upload {
    to {
        -webkit-transform: rotate(-90deg) translate(-4px, -1px);
        transform: rotate(-90deg) translate(-4px, -1px);
    }
}

@keyframes upload {
    to {
        -webkit-transform: rotate(-90deg) translate(-4px, -1px);
        transform: rotate(-90deg) translate(-4px, -1px);
    }
}

@-webkit-keyframes download {
    to {
        -webkit-transform: rotate(90deg) translate(4px, -1px);
        transform: rotate(90deg) translate(4px, -1px);
    }
}

@keyframes download {
    to {
        -webkit-transform: rotate(90deg) translate(4px, -1px);
        transform: rotate(90deg) translate(4px, -1px);
    }
}

#progress {
    border: 1px solid black;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 1em;
}

#progress div {
    height: 1.25em;
    width: 0;
    margin-left: -9px;
    text-align: right;
    background: #7a97c2;
    font-weight: bold;
    padding: 2px 2px 2px 10px;
}

#progress div.paused {
    width: 100%;
    text-align: center;
    background: #fff276;
}

#status-text {font-weight: bold;}
#eta {height: 2.5em;}
#power-slider {height: 6em;}
#control #power-slider .what {margin-top: -0.25em;}

#power-slider span {
    font-weight: bold;
    margin-bottom: 0.25em;
}

#power-slider #slider {height: 1em;}

.ui-button {
    white-space: nowrap;
}

.ui-slider .ui-slider-handle {
    background: url(../images/slider.png) no-repeat !important;
    width: 28px;
    height: 37px;
    border: none !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    outline: none;
}

.ui-slider .ui-slider-handle.ui-state-hover,
.ui-slider .ui-slider-handle.ui-state-active {
    background:
    url(../images/slider-hover.png) no-repeat !important;
}

.ui-slider-horizontal {
    background: url(../images/slider-bg.png) no-repeat !important;
}

.ui-slider .ui-widget-header {background: none;}

#power-slider ul {
    margin-top: 10px;
    padding: 0px;
    list-style: none;
}

#power-slider ul li {
    float: left;
    width: 33.33%;
    font-weight: bold;
}

#power-slider ul li.label-1 {text-align: left;}
#power-slider ul li.label-2 {text-align: center;}
#power-slider ul li.label-3 {text-align: right;}

#control {
    padding: 1em;
    width: 345px;
    float: left;
}

#control .what {
    margin-top: -1.25em;
    margin-bottom: 0.25em;
}

.folding-start {display: none;}

.folding-start .button, .folding-stop .button {
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    border: 2px solid #303031;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    cursor: pointer;
    clear: left;
}

.folding-start .button {
    background: url('../images/button_bg.png') repeat-x 0 0;
    background-color: #46a95f;
}

.folding-start .button:hover {background-color: #2c9345;}

.folding-stop .button {
    background: url('../images/button_bg.png') repeat-x 0 0;
    background-color: #e03131;
}

.folding-stop .button:hover {background-color: #ca2b2c;}

#project {
    border-radius: 10px;
    background: #fff;
    padding: 1em;
    width: 450px;
    float: right;
    overflow: hidden;
}

#project .what {margin-top: -1em;}
#project .brief {margin-top: 1em;}
.brief .project .pthumb {max-width: 200px;}

.project .pthumb {
    float: right;
    margin: 0.5em;
    margin-right: 0;
    border-radius: 5px;
}

.project .mthumb {
    float: left;
    margin: 1em;
    margin-left: 0;
}

#dialogs {display: none;}

.ui-dialog {
    font-size: 12pt;
    font-family: Arial;
}

.ui-dialog hr {margin: 0.5em 0;}
.ui-dialog p {padding: 0.25em 0;}
.ui-dialog ul, .ui-dialog ol {margin: 1em 2em;}
.ui-dialog li {margin: 0.5em 1em 0.5em 0.25em;}
.ui-dialog h1, .ui-dialog h2, .ui-dialog h3, .ui-dialog h4 {
    margin: 1em 0 0 0;
    text-decoration: underline;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
    margin: auto;
}

.ui-widget-content a {color: #8e0028;}
#invalid-id-dialog {width: 500px;}
#invalid-id-dialog p {padding: 0.25em;}

#invalid-id-dialog div {
    background: #eee;
    border-radius: 10px;
    padding: 0.25em 0.5em;
    margin: 0.5em 0;
}

#bug-dialog {text-align: left;}

#bug-dialog img, #bug-submitting-dialog img {
    float: right;
    width: 64px;
    margin-bottom: -64px;
}

#bug-dialog table, #bug-dialog td, #bug-dialog textarea {width: 100%;}
#bug-dialog td {padding: 5px;}
#bug-dialog textarea {font-size: 80%;}
#bug-dialog p {font-size: 80%;}
#bug-disclaimer {font-size: 90%;}

#bug-iframe {
    width: 400px;
    height: 100px;
    border: 0;
}

.input-warn {border: 3px solid red;}

#nacl-error-dialog {width: 45em;}

#nacl-error-dialog li {
    padding: 0.25em;
    border-radius: 10px;
    border: 1px solid #eee;
}

#nacl-error-dialog li:hover {
    background: #eee;
    cursor: pointer;
}

#nacl-error-dialog li p {
    margin: 0.5em 0;
    padding: 0 0.5em;
    display: none;
}

#learn-dialog, #help-dialog, #project-dialog {width: 42em;}

#folding-power-dialog th {
    font-weight: normal;
    padding-right: 1em;
    padding-left: 2em;
    text-align: right;
}

#fahcore {
    width: 0;
    height: 0;
    visibility: hidden;
}

img.bug-icon {
    width: 24px;
    vertical-align: middle;
}

img.icon {float: right;}

.ui-widget-overlay {
    opacity: 0.4;
    filter: alpha(opacity = 40);
    background: #000;
}

#footer {
    width: 900px;
    margin: 0.25em auto;
    text-align: center;
    font-weight: normal;
    color: #222;
    font-size: 80%;
}