/* -*- mode: css; indent-tabs-mode: nil -*-

 Copyright 2012 Jens Lindström, Opera Software ASA

 Licensed under the Apache License, Version 2.0 (the "License"); you may not
 use this file except in compliance with the License.  You may obtain a copy of
 the License at

   http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the
 License for the specific language governing permissions and limitations under
 the License.

*/

body {
    color: #222;
}

h1.noscript {
    color: red;
    text-align: center
}

div.main > table {
    width: 95%
}

.pagefooter {
    margin-top: 10px;
    border-top: 2px solid #A0A092;
    padding: 10px 1em 0 1em;
}

div.shortcuts {
    text-align: right;
}

div.shortcuts a.shortcut {
    text-decoration: none;
    color: #222
}

table.pageheader {
    border-bottom: 2px solid #A0A092;
}

table.pageheader td.left {
    vertical-align: bottom
}

table.pageheader td.left b {
    font-family: sans-serif
}

table.pageheader td.left b.opera {
    font-size: 40px;
    color: #d32226;
    cursor: pointer
}

table.pageheader td.left b.opera.development {
    color: #222
}

table.pageheader td.left b.critic {
    font-size: 50px;
    color: #666666;
    cursor: pointer
}

table.pageheader td.right {
    padding-bottom: 10px;
    text-align: right;
    vertical-align: bottom
}

table.pageheader td.right div {
    display: inline-block
}

table.pageheader td.right div span.buttonscope-global > :first-child {
    margin-left: 0.5em
}

.paleyellow {
    margin: 1rem auto;
    padding: 1rem;
    box-sizing: border-box;
    background: #ffffe6;
    border: 1px solid #cca;
    border-bottom-color: #bb9;
    border-right-color: #bb9;
    border-radius: 4px;
}

.paleyellow > h1 {
    margin: 0;
    padding: .25rem .5rem .5rem;
    border-bottom: 1px solid #cca;
    font-size: 1.9rem;
    font-weight: normal;
}


table.paleyellow {
    margin-top: 1.5em;
    margin-bottom: 2em;
    padding: 1em 1em 1.5em 1em;
}

table.paleyellow > tbody > tr > td {
    padding-left: 1em
}

table.paleyellow > * > tr > td.h1 {
    border-bottom: 1px solid #cca
}

table.paleyellow > * > tr > td.h1 > h1 {
    margin: 0 0 0.75rem;
    font-size: 1.9rem;
    font-weight: normal;
}

table.paleyellow > * > tr > td.h1 > h1 > * {
    text-shadow: none
}

table.paleyellow > * > tr > td.h1 > h1 > span.right {
    font-size: 50%;
    float: right
}

table.paleyellow > tbody > tr > td.h2 {
    border-bottom: 1px solid #cca
}

table.paleyellow > tbody > tr > td.h2 > h2 {
    font-size: 1rem;
    margin: 0.75rem 0;
}

table.paleyellow > tbody > tr > td.h2 > h2 > span {
    font-size: 50%;
    margin-left: 1em
}

table.paleyellow > tbody > tr > td.h2 > h2 > span.right {
    float: right
}

table.paleyellow > tbody > tr.item > td {
    padding-top: 0.5em
}

table.paleyellow > tbody > tr.item > td.name {
    font-family: serif;
    font-weight: bold;
    text-align: right;
}

table.paleyellow > tbody > tr.item > td.value {
    font-family: monospace;
    white-space: pre-wrap;
    padding-left: 1em
}

table.paleyellow > tbody > tr.item > td.value > div.buttons {
    float: right
}

table.paleyellow > tbody > tr.item > td.value > div.buttons button {
    margin-left: 3px
}

table.paleyellow > tbody > tr.help > td {
    font-style: italic;
    text-align: right;
    border-bottom: 1px solid #cca
}

table.paleyellow > tbody > tr.spacer > td {
    padding-top: 0.3em;
}

table.paleyellow > tbody > tr.separator > td {
    padding: 1em 0 0.5em 0
}

table.paleyellow > tbody > tr.separator > td > div {
    border-bottom: 1px solid #cca
}

table.paleyellow > tbody > tr.centered > td {
    text-align: center
}

table.paleyellow > tbody > tr.centered > td > button {
    margin-top: 1em
}

@media (min-width: 1348px) {
    .section,
    div.main > table,
    table.paleyellow {
        width: 1280px
    }
}

.callout {
    padding: 0 0.75rem;
    background: #fffff4;
    border: 1px solid #ddb;
    border-bottom-color: #cca;
    border-right-color: #cca;
    border-radius: 4px;
}

table.callout {
    margin: 0 auto;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-spacing: 0;
}
table.callout th {
    border-bottom: 1px solid #cca;
}
table.callout th,
table.callout td {
    padding: 0.25em 0.5em;
    text-align: left;
}

.inset {
    padding: 0.25em 0.5em;
    background: #fffff0;
    border: 1px solid #ddb;
}

.ui-dialog .inset {
    padding: 0.1rem 0.5rem;
    background: #fbfaf9;
    border: 1px solid #e0cfc2;
}

.ui-dialog { box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5), 0 7px 25px rgba(0, 0, 0, 0.5) }

table.pageheader td.left > ul {
  display: inline-block;
  margin: 0 0 0 1em;
  padding: 0;
  font-weight: bold
}

table.pageheader td.left > ul > li {
  display: inline;
  padding: 0
}

table.pageheader td.left > ul > li > a {
  text-decoration: none;
  color: #222
}

table.pageheader td.left > ul > li:before {
  content: " | "
}

table.pageheader td.left > ul > li:first-child:before {
  content: none
}

.message-dialog pre {
    margin-left: 1em
}

.error-dialog code, .message-dialog code {
    display: inline-block;
    border: 1px solid #cca;
    background-color: #fff;
    padding: 2px 4px
}

.repository-select {
    background-color: white;
    text-align: left;
    white-space: nowrap
}

.repository-select .repository {
    flex-flow: row wrap;
}

.repository-select .repository .repository-name {
    font-weight: bold
}

.repository-select .repository .repository-path {
    font-family: monospace;
    padding-left: 0.5rem;
    margin-left: auto;
}

.notifications {
    position: fixed;
    width: 400px;
    margin: 0
}

.notification {
    border-radius: 5px;
    border: 2px solid #8a8;
    margin: 10px auto;
    padding: 5px 2em;
    background-color: #dfd;
}

table.searchresults {
    width: 100%
}

table.searchresults .id {
    text-align: right;
    padding-right: 0.5em
}

table.searchresults .summary {
    padding-left: 0.5em
}

table.searchresults td.link {
    text-align: right;
    vertical-align: top;
}

table.searchresults tr.review td {
    font-family: monospace;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #fff
}

div.searchdialog .help {
    float: right
}

div.searchdialog input {
    width: 100%;
    font-family: monospace;
    margin-top: 0.5em
}

.flex {
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
}

.ui-dialog > .flex {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.ui-dialog > .flex > * {
    -ms-flex: none;
    -webkit-flex: none;
    flex: none;
}
.ui-dialog > .flex > .flexible {
    -ms-flex: auto;
    -webkit-flex: auto;
    flex: auto;
    min-height: 0;
}

input:not([type]),
input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
    margin: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: .3rem;
    background: #fff;
    opacity: .95;
    border: 1px solid #efefcf;
    border-top-color: #e5e6b3;
    border-left-color: #e5e6b3;
    border-radius: 2px;
    font-size: inherit;
}
input:not([type]):focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
textarea:focus {
    outline: none;
    opacity: 1;
    border-color: #ddb;
    border-top-color: #cca;
    border-left-color: #cca;
    box-shadow: 0 0 1px 1px #fff;
}

select {
    font-size: inherit;
}

input:disabled,
select:disabled {
    opacity: .7;
}

fieldset {
    border: 0;
    padding: 0;
}

.input-label {
    font-size: .9rem;
    font-weight: bold;
}

.checkbox-group label {
    padding-right: .5rem;
    white-space: nowrap;
}
.checkbox-group label:last-child {
    padding-right: 0;
}

.clickable {
    cursor: pointer
}