/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

ol, ul {
    list-style: disc;
}

body {
    padding: 0px;
    margin: 0px;
    background-color: #505050;
}

p {
    margin-bottom: 5px;
    line-height: 120%;
}

a {
    text-decoration: none;
}

li > a, p > a {
    color: #000000;
}

#addDrinkerDialog, #addPartyDialog {
    width: 400px;
}

#kickDrinkerDialog {
    width: 400px;
}

#configureDrinksDialog {
    width: 600px;
}

h1 {
    background-color: #252525;
    color: #ffffff;
    margin: 0px;
    padding: 5px;
    font-size: 2.0em;
}

.noBorders tr, .noBorders td {
    border: 0px;
}

.topic {
    vertical-align: top;
}

h1 > a {
    background-color: #252525;
    color: #ffffff;
    margin: 0px;
    padding: 5px;
}

h2 {
    margin: 0px;
}

table#drinkers {
    border-spacing: 5px;
    border-collapse: separate;
    margin-left: auto;
    margin-right: auto;
}

td.userButton {
    display:table-cell;
    margin: 5px;
    font-size: 1em;
    text-align:center;
    color: #000000;
    font-variant: small-caps;
    cursor: pointer;
}

.roundedCornersBordered {
    border: 2px solid #000000;
    border-radius: 5px;    
}

div.drinker {
    width: 25%;
    height: 300px;
    text-align: center;
    float: left;
}

div.drinker p {
    font-size: 2em;
}

span.name {
    font-size: 200%;
}

span.details {
    font-size: 133%;
}

div.body {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

div.body div, div.body table {
    margin-left: auto;
    margin-right: auto;    
}

div.party {
    font-size: 2.0em;
    background-color: #50b93e;
    color: #000000;
}

div.party a {
    color: #000000;
}

div#graphDialog a {
    color: #ffffff;
    z-index: 666;
}

div.dialog {
    padding: 5px;
    border: 3px solid #505050;
    border-radius: 10px;
    background-color: #252525;
    color: #ffffff;
}

.marginAuto {
    margin-left: auto;
    margin-right: auto;
}

div.popupDialog {
    padding: 5px;
    border: 3px solid #505050;
    border-radius: 10px;
    background-color: #252525;
    color: #ffffff;
    display: none;
    position: absolute;
}

div.popupDialog th {
    text-align: left;
    width: 25%;
    font-variant: small-caps;
}

div.popupDialog td {
    text-align: right;
}

td input, td select {
    width: 100%;
    background-color: #505050;
    color: #ffffff;
}

div.popupDialog a {
    color: #ffffff;
}

#emailCorrect {
    width:24px;
    height:24px;
}

#partyStartTime {
    margin-left: 10px;
    font-size: 0.4em;
}




/* header stuff */
.headerButton {
    margin: 3px;
    color: #ffffff;
    border: 1px solid #0c0c0c;
    border-radius: 8px;
    font-weight: bold;
    text-shadow: #6a6a6a 3px 3px 2px;
    
    font-variant: small-caps;
    font-size: 2em;
    
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
}

.headerButton a {
    color: #ffffff;
}

.headerButtonLeft {
    float: left;
}

.headerButtonRight {
    float: right;
}

.header {
    text-align: center;
    background-color: #252525;
    min-height: 48px;
    margin-bottom: 5px;
}

.headerMargin {
    margin-top: 20px;
}

.headerTextDiv {
    margin-left: auto;
    margin-right: auto;
    width: 33%;
}

div#addDrinkerButton, div#addPartyButton {
    background-color: #50b93e;
    background-image: url("/static/images/plus.png");
}

div#goBack {
    background-color: #e60d0f;
    background-image: url("/static/images/back.png");
}

div#graphButton {
    background-color: #dd318a;
    background-image: url("/static/images/chart.png");
}

div#configureButton {
    background-color: #65E6E4;
    background-image: url("/static/images/jakari.png");
}

div#kickDrinkerButton {
    background-color: #e60d0f;
    background-image: url("/static/images/kieltomerkki.png");
}

div#configureDrinksButton {
    background-color: #65E6E4;
    background-image: url("/static/images/jakari.png");
}

div#closeButton {
    background-color: #e60d0f;
    background-image: url("/static/images/x.png");
}

input[disabled] {
    background-color: red;
}

.undo, .editDrink {
    background-color: #000000;
    color: #ffffff;
    position: absolute;
    display: none;
    border: 2px solid #ffffff;
    border-radius: 5px;
    cursor: auto;
    text-align: center;
}

.undo h1, .editDrink h1 {
    background-color: #000000;
    color: white;
    font-size: 200%;
    margin-bottom: 5px;
}

.divButton {
    border: 2px solid #ffffff;
    border-radius: 5px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    cursor: pointer;
}

.closeButton {
    float: right;
}

#historyGraph {
    height: 300px;
    background-color:#E6A465;
    margin-left:auto;
    margin-right:auto;
    height: 300px;
}

.marginBox {
    padding: 5px;
}

canvas {
    margin: 5px;
}

li.drink {
    cursor: pointer;
}

.ui-accordion-content {
    padding: 0px !important;
}

.editDrink select {
    font-size: 1.25em;
    padding: 5px;
    width: auto;
}

div#progressbar {
    width: 80%;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
}

.datetimepicker table {
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}

div#fooTime {
    padding: 5px;
}

.datetimepicker {
    margin-left: auto;
    margin-right: auto;
}

.datetimepicker input[type=text] {
    padding: 5px;
    text-align: center;
}

div.userButton {
    height: 100%;
}

.graph {
    position: absolute;
}