/*  LOOT

    A load order optimisation tool for Oblivion, Skyrim, Fallout 3 and
    Fallout: New Vegas.

    Copyright (C) 2013    WrinklyNinja

    This file is part of LOOT.

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

    LOOT 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 General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with LOOT.  If not, see
    <http://www.gnu.org/licenses/>.
*/
::-webkit-scrollbar-corner {
    background: inherit;
}
body {
    font:10pt/1.5 Helvetica,sans-serif;
    margin:0;
    background:#f8f8f8;
    height: 100%;
}
noscript {
    background:#c00;
    display:block;
    padding:10px 5px;
    color:white;
}
header {
    background:#e3e3e3;
    position:fixed;
    top:0;
    left:0;
    z-index:2;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.5);
    width:100%;
    height: 3em;
}
header > ol {
    display: inline-block;
    margin:0;
    padding:0;
}
header > ol > li {
    display: inline-block;
    padding: 0.75em 1em;
    margin: 0;
    cursor: pointer;
}
header > ol:last-child {
    position: fixed;
    right: 0;
}
header li:hover {
    background: #ccc;
}
header img {
    height: 2.5em;
    width: 2.5em;
    vertical-align: middle;
    padding: 0 0.5em;
}
header > ol > li > ol {
    background: #e3e3e3;
    position: fixed;
    z-index: 2;
    box-shadow: 0 3px 3px 1px rgba(0,0,0,0.5);
    list-style-type: none;
    padding: 0;
    margin:0;
    top: 3em;
}
header > ol > li > ol > li {
    padding: 0.5em 1em;
}
#fileMenu > ol {
    left: 3.75em;
}
#gameMenu > ol {
    left: 98px;
}
#helpMenu > ol {
    left: 235px;
}

header li > span, #filtersToggle > span {
    margin-right: 1em;
}
header li.disabled {
    cursor: default;
    color: #999;
}

#container {
    position: fixed;
    top: 3em;
    height: calc(100% - 3em);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
}
nav {
    height: 100%;
    width: 33%;
    flex-shrink: 0;
}
nav > ol {
    padding-left: 1em;
    list-style-type: none;
    height: calc(100% - 4em);
}
nav > ol > li:nth-child(3) {
    height: calc(100% - 7em);
    overflow: auto;
    padding: 0;
}
nav li:not(:last-child) {
    padding: 0.5em 0.5em;
}
#filtersToggle {
    cursor: pointer;
}
nav > ol > li:not(:nth-child(3)):hover, #pluginsNav li:hover {
    background: #ccc;
}
nav a {
    text-decoration: none;
    color:black;
    display: inline-block;
    width: 100%;
}
#pluginsNav {
    height: 100%;
    overflow: auto;
    margin: 0;
    padding: 0;
}
#pluginsNav li {
    padding: 0 0.5em;
    white-space:nowrap;
}
#pluginsNav li > span {
    display: inline-block;
    width: 1.2em;
}
#searchBox {
    padding: 0.3em 0.6em;
    width: 100%;
    height: 100%;
}
main {
    overflow: auto;
    position: relative;
    flex-grow: 1;
}

section {
    background:white;
    overflow:hidden;
    margin:1em;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    padding:1em;
    position: relative;
}

dialog {
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    overflow:hidden;
    padding: 2em;
    top: 3em;
    max-width: 40em;
    max-height: calc(100% - 8em);
    overflow: auto;
}
dialog > h1 {
    font-weight: normal;
    text-align: center;
}
dialog[is=message-dialog] > h1 {
    margin: 0;
    margin-bottom: 1em;
    display: inline-block;
    text-align: left;
}
dialog[is=message-dialog] > span:first-child {
    font-size: 4em;
    position: relative;
    margin-right: 0.5em;
    top: 0.2em;
}
dialog[data-type=warn] > span:first-child  {
    color: gold;
}
dialog > .buttons {
    text-align: center;
}
dialog button {
    margin: 0.5em;
}




#about h1, #about p {
    text-align: center;
}

#about blockquote {
    white-space: pre;
}
#about button {
    margin: 0 auto;
    display: block;
}

section h1 {
    margin: 0;
    font-weight: normal;
    font-size: 1.2em;
}

#filters {
    margin: 0;
    padding: 0;
}
#filters.hidden {
    display:none;
}
#filters label {
    display:inline-block;
    padding:0.2em 0.5em;
    white-space:nowrap;
    cursor:pointer;
}
#filters div {
    padding:0.2em 0.5em;
    font-style:italic;
}

#summary > table {
    border-collapse:separate;
    border-spacing:0;
    display: inline-block;
    vertical-align: top;
}
#summary > table:not(:last-child) {
    margin-right: 4em;
}
#summary td {
    padding:0.5em;
    line-height:1.5;
    text-align:right;
    padding-left:3em;
}
#summary > table td:first-child {
    text-align:left;
    padding-left:0;
}
input[type='checkbox'] {
    position:relative;
    top:0.15em;
    margin-left:0.5em;
}
ul {
    margin-top:0.5em;
    margin-bottom:0;
    list-style:none;
    padding-left:0;
}

.hidden, section .buttons li.hidden, .fa.hidden {
    display:none;
}
#summary li, li > ul > li {
    padding:0.5em 1em;
    list-style:disc inside;
}
li.say, li.error, li.warn {
    padding:0.5em 1em;
    list-style:disc inside;
}
li.say > p, li.error > p, li.warn > p {
    margin: 0;
}
li.error{
    background:#ff9090;
}
li.warn{
    background:#FFDD55;
}
.version{
    color:#6394F8;
}
.crc{
    color:#BC8923;
}
.tag.add {
    color:green;
    margin-left: 1.75em;
}
.tag.remove {
    color:red;
    margin-left: 1.75em;
}
plugin-card > ul {
    margin-left: 1.75em;
}

#settings {
    width: auto;
    max-width: 90%;
}
#settings > select {
    float: right;
    clear: both;
    position:relative;
    top:-0.15em;
}
#settings > label {
    display: inline-block;
    height: 18px;
    padding: 1px;
    margin: 2px;
}



input[readonly] {
    border: none;
    -webkit-user-select: none;
}
td input {
    width: 100%;
    text-overflow: ellipsis;
}

table[is=editable-table] td:last-child {
    cursor: pointer;
}
table[is=editable-table] td:last-child:hover {
    color: red;
}
table[is=editable-table] {
    margin: 3em 1em;
    border-collapse: collapse;
}
table[is=editable-table] td, table[is=editable-table] th {
    vertical-align: top;
    text-align: left;
    padding: 0.5em;
}
table[is=editable-table] th {
    border-bottom: 1px black solid;
}
table[is=editable-table] tbody tr:last-child {
    cursor: pointer;
    color: grey;
}
table[is=editable-table] tbody tr:last-child:hover {
    color: black;
}

#pluginsNav .priority {
    display: none;
}
body.editMode header {
    color: #999;
}
body.editMode header #headerOverlay {
    z-index: 3;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
[draggable] {
    -webkit-user-select: none;
    cursor: move;
}
.highlight, #applySortButton {
    box-shadow: inset 0 0 10px 3px #69aaff;
    outline: 3px solid #69aaff;
}
input:invalid {
    background-color: pink;
    color: white;
}
input:valid {
    background-color: white;
    color: black;
}
#hoverText {
    position: fixed;
    z-index: 5;
    background: white;
    box-shadow:0 0 3px 0px rgba(0,0,0,0.5);
    padding: 2px 5px;
}
progress, .progress {
    /* Reset the default appearance */
    -webkit-appearance: none;
    width: 250px;
    height: 20px;
    display: block;
    margin: 0 auto;
}
#progressDialog > h1 {
    font-size: 1.5em;
}

@-webkit-keyframes indeterminate {
	0% { width: 0% }
	100% { width: 100% }
}

progress::-webkit-progress-bar, .progress.bar {
    background-color: #eee;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress::-webkit-progress-value, .progress .value {
    height: 100%;
    background-color: green;
    -webkit-animation: indeterminate 2s linear 0 infinite alternate paused;
}
#progressDialog[open] > .progress > .value {
    -webkit-animation-play-state: running;
}

:host > span {
    display: inline-block;
    width: 1.2em;
}
li[is=plugin-li][data-bsa=false] > .loadsBSA,
li[is=plugin-li][data-dummy=false] > .dummyPlugin,
li[is=plugin-li][data-edits=false] > .hasUserEdits,
li[is=plugin-li][data-global-priority=false] > .hasGlobalPriority,
li[is=plugin-li] > .hasPriority:not([title^=Priority]) {
    visibility: hidden;
}
li[is=plugin-li] > a {
    text-decoration: none;
    color: black;
}
li[is=plugin-li] > .hasGlobalPriority, li[is=plugin-li] > .hasPriority {
    display:none;
}
body.editMode li[is=plugin-li] > .hasGlobalPriority,
body.editMode li[is=plugin-li] > .hasPriority {
    display: inline-block;
}

#firstRun > ul {
    list-style-type: disc;
    padding-left: 40px;
}
#firstRun > button {
    display: block;
    margin: 0 auto;
}
#firstRun .tag {
    margin: 0;
}
#firstRun .fa {
    padding: 0 0.3em;
}