/* Colors:          Orange:     Blue:
basic background:   #ffb932;    rgb(164,164,255);
button-active:      #ffaa30;    rgb(175,175,255);
menu-hover:         #ffcc50;    rgb(200,200,255);
light background:   #fff680;    rgb(220,220,255);
*/

/*
error/warning:      #990000;
approved            #005500;
disapproved         #990000;
*/

@media (max-width: 768px) {  /* The smallest tablet screen. Bootstrap uses this to collapse nav bar. */
  /* Optional elements which not be shown on narrow screen sizes. */
  /* NOT used, using Bootstrap's hidden-xs instead */
  .wide-only {
    color: fuchsia;
    display: none;
  }
}

header, section, footer, aside, nav, article, figure, figcaption, hgroup {
    display: block; /* Compatibility for pre-HTML5 browsers. */
}

h1 {
    text-align: center;
    /* text-shadow: 2px 2px 2px #ddd; */
}

table#score_table {
    clear: right;
}

/* content */
section#content {
    margin: 0px 5px 0px 5px;
}

p.small {
    font-size: small;
}

.error, .warning {
    color: #990000;
    font-weight: bold;
}

footer {
    font-size: small;
}

.centered {
    text-align: center;
}

/* divs */
div.actionlinks {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
}

div.profile_picture {
    width: 200;
    float: right;
}

div.tomrow {
    display: table-row;
}

div.rowleft, div.rowmiddle, div.rowright, div.tablecell {
    display: table-cell;
    white-space: nowrap;
}

div.timestamp {
    font-size: small;
    margin: 5px;
}

.note {
    font-size: small;
    font-style: italic;
}

/* Tables */
caption {
    text-align: left;
    font-size: normal;
    font-weight: bold;
    white-space: nowrap;
}

th {
    font-size: normal;
    text-align: left;
}

td {
    vertical-align: top;
}

table.election tr:nth-child(even) {
    background-color: white;
}

table.election tr:nth-child(odd) {
    background-color: rgb(220,220,255);
}

tr.header {         background-color: rgb(164,164,255); }

td.nowrap, th.nowrap {
    white-space: nowrap;
}

td.numeric, th.numeric {
    white-space: nowrap;
    text-align:right;
}

td.error {          color: #990000; font-weight: bold}

/* Links */
a {                 text-decoration: none }
a:hover {           text-decoration: underline; }

/* Remove blue link rectangle in Explorer. */
img {
    border-style: none;
}

/* No underlining for image links. */
a.image:hover {
    text-decoration: none;
}

table#questionnavigation td {
    vertical-align: middle;
}

table#questionnavigation .navigation {
    padding: 50px 10px;
}

/* Drag and Drop */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
  -moz-user-drag: element;
}

div {
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

div#ballottable {
    display: table;
    width: 100%;
    border: 1px dotted gray;
    border-spacing: 5px;
}

div#ballotrow {
    display: table-row;
    border: 1px dotted gray;
}

div#ballot, div#unranked {
    display: table-cell;
    box-sizing: border-box;
    border: 1px dotted gray;
    vertical-align: top;
    /* vertical-align: bottom; */
    margin: 2px;
    padding: 2px;
}

div.dnd {
    background-color: rgb(220,220,255);
    border: 2px solid rgb(164,164,255);
    margin: 0px;
    padding: 2px;
    box-shadow: 4px 4px 10px #777;
    cursor: move;
    z-index: 2;
}

div.dragtgt, div.dragover {
    z-index: 0;
    padding: 2px;
    margin: 2px 2px -5px 2px;
    border: 1px dotted gray;
    background-color: #ffffff;
}

div.appendtgt {
    margin: 2px;
    padding: 2px;
    color: gray;
    border: 1px dotted gray;
}

div.dragover {
    background-color: rgb(220,220,255);
    margin-top: 2px;
}

div.spacing {
    margin: 2px;
}

/* Approved/Disapproved */
td.approved {           color: #005500; white-space: nowrap; text-align:right }
td.disapproved {        color: #990000; white-space: nowrap; text-align:right }
td.approved-high {      color: #005500; white-space: nowrap; text-align:right; font-weight: bold }
td.disapproved-high {   color: #990000; white-space: nowrap; text-align:right; font-weight: bold }
td.green {              background-color: #aaffaa }
td.red {                background-color: #ffaaaa }
h1.approved {           color: #005500; white-space: nowrap; }
h1.disapproved {        color: #990000; white-space: nowrap; }

span.approved {         color: #005500; white-space: nowrap; text-align:right }
span.disapproved {      color: #990000; white-space: nowrap; text-align:right }
span.approved-high {    color: #005500; white-space: nowrap; text-align:right; font-weight: bold }
span.disapproved-high { color: #990000; white-space: nowrap; text-align:right; font-weight: bold }

/* Bells&whistles */
/*
div#svgpie {
    transition-property: all;
}

div#svgpie:hover {
    -webkit-transform: rotate(180deg);
}
*/