/*
    WineHQ CSS Theme for Application Database
    by Jeremy Newman <jnewman@codeweavers.com>
*/

/*
  =====================================================================================================================
    PAGE DEFAULTS
  =====================================================================================================================
*/

HTML {
    height: 100%;
}

/* Body Document Defaults */
BODY {
    background-color: #000000 !important;
    color: #000000;
    background-image: url('https://dl.winehq.org/share/images/bg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
}

/*
  =====================================================================================================================
   bootstrap tweaks, bs is awesome, but there are a few tweaks needed.
  =====================================================================================================================
*/

/* remove style from pre tags */
PRE {
    background-color: inherit; color: inherit;
    border: none; border-radius: none;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* fix blockquote */
BLOCKQUOTE {
    font-size: inherit;
}

/* make a form control inline */
input.form-control-inline {
    display: inline;
    width: auto;
}
select.form-control-inline {
    display: inline;
    width: auto;
}

/* thin buttons, good for inline */
.btn-skinny {
    padding-top: 0.15em !important;
    padding-bottom: 0.15em !important;
}

/* fix button text on a tags */
a.btn, a.btn:visited {
    color: inherit;
}

.panel.panel-scroll .panel-body {
    height: 250px;
    overflow: auto;
}

/*
  =====================================================================================================================
   PAGE LAYOUT
  =====================================================================================================================
*/

/* top logo */
#whq-logo-glass {
    position: fixed;
    top: 30px;
    z-index: -1;
}
#whq-logo-text {
    position: absolute;
    z-index: 2;
    left: 100px;
    top: 30px;
}

/* main content well */
#whq-page-body {
    margin: 45px 18px 10px 120px;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px 25px 25px 60px;
}

/* search box */
#whq-search_box {
    position: absolute;
    top: 20px;
    right: 0;
    width: 275px;
    margin-top: 1.6em;
    margin-right: 2em;
    margin-bottom: 1em;
    font-size: 10px;
    text-align: right;
}

/* whq-alert */
#whq-alert {
    position: absolute;
    top: 80px;
    left: 50%;
    margin-left: -125px;
    padding: 20px;
    width: 300px;
    background-color: #fcf8e3;
    z-index: 3;
    border-radius: 5px;
    border: 1px solid #A23808;
    cursor: pointer;
}
#whq-alert p { margin: 10px; padding: 0; font-size: 120%; }

/* footer */
#footer {
    margin: .25em 25px 1em 0;
    overflow: hidden;
    padding: 0;
    text-align: right;
    font-size: 90%;
    color: #fff !important;
}
#footer li {
    display: inline;
    margin: 0 1.3em;
}
#footer a, #footer a:visited {
    color: #fff;
}


/*
  =====================================================================================================================
   Top Tabs
  =====================================================================================================================
*/

#whq-tabs {
    clear: both;
    float: right;
    margin-right: 1em;
}

#whq-tabs .whq-tabs-menu { display: none; }

#whq-tabs UL {
    list-style: none;
    padding: 0;
    margin: 0;
}
#whq-tabs LI {
    float: left;
    width: 112px;
    height: 28px;
    margin: 0px 2px 0px 2px;
    padding: 0px;
    text-align: center;
    background-color: #848484;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}
#whq-tabs LI.s          { background-color: #cf3939; }
#whq-tabs LI.s A        { font-weight: bold; }
#whq-tabs LI:hover      { background-color: #832c2c; }
#whq-tabs LI A {
    display: block;
    width: 108px;
    height: 23px;
    padding-top: 3px;
    font-size: 16px; color: white; text-decoration: none;
}

/* footer */
#whq-footer {
    clear: both;
    color: #ffffff;
    margin: 1em 0 1em 120px;
}
#whq-footer IMG { vertical-align: middle; }
#whq-footer .glyphicon { vertical-align: -18%; }
#whq-footer A          { color: #ffffff; text-decoration: none; }
#whq-footer A:visited  { color: #ffffff; }
#whq-footer A:hover    { color: red; text-decoration: underline; }

/*
  =====================================================================================================================
   SideBar
  =====================================================================================================================
*/

#sidebar {
    top: 100px;
    left: 0;
    z-index: 2;
    position: absolute;
}

#sidebar p {
    margin: 5px 5px 5px 10px;
}

#sidebar ul {
    line-height: 1.5em;
    font-size: 95%;
    list-style: none;
    margin: 0;
    padding: 0;
}

#sidebar li {
    padding: 0;
    margin: 0;
}

#sidebar li a, #sidebar li a:visited {
    color: #fff;
}

#sidebar > ul {
    border: none;
    margin: 0 0 1em 0 !important;
    padding: 0;
    float: none;
    width: 160px;
    overflow: hidden;
    font-size: 95%; 
    background: rgba(149,73,58,0.98);
    background: linear-gradient(to right, rgba(149,73,58,0.7) 0%,
                rgba(149,73,58,0.95) 10%,
                rgba(149,73,58,1) 80%,
                rgba(126,44,29,1) 97%,
                rgba(110,29,14,1) 99%,
                rgba(110,29,14,1) 100%);
    border: 2px solid #6e1d0e;
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

#sidebar > ul > li.top {
    background: #732010;
    margin: 0;
    padding: 0.5em 1em 0.5em 0;
    font-size: 91%;
    font-weight: bold;
    white-space: nowrap;
    color: #fff;
    border-top-right-radius: 5px;
}

/*
    ====================================================================================================================
    debug log
    ====================================================================================================================
*/
#dlog {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    z-index: 9999;
    margin: 0;
    padding: 0;
    color: #fff;
    border-top: 1px outset rgba(48,48,48,0.8);
    background-color: rgba(0,0,0,0.9);
}
#dlogt {
    margin: 0;
    font-size: x-small;
    color: #777;
    font-weight: bold;
    cursor: pointer;
    background-color: rgba(0,0,0,0.4);
    border-top: 1px outset rgba(48,48,48,0.8);
}
#dlogp {
    display: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    height: 500px;
}
#dlogp pre {
    font-family: monospace;
    white-space: pre-wrap;
    margin: 5px 20px 20px 20px;
    background: inherit;
    border: none;
    color: #efefef;
}

div.appdb_dump {
    display: inline-block;
    position: relative;
    z-index: 999;
    min-width: 50px;
    max-width: 600px;
    max-height: 250px;
    padding: 5px;
    margin: 4px;
    border: 1px dashed #FF0000;
    background-color: #000000;
    opacity: 0.8;
    color: #FFFFFF;
    overflow: auto;
}
div.appdb_dump xmp { margin: 0; }

/*
  =====================================================================================================================
   All Other Classes
  =====================================================================================================================
*/

/* header text */
H1.title            { color: #A50D0D; border-bottom: 1px solid #A50D0D; margin: 0px; }
H3.title            { color: #A50D0D; border-bottom: 1px solid #A50D0D; margin: 0px; }
P.newsdate          { color: #4e4e4e; font-size: 10pt; text-align: right; margin: 0 5px 10px 0;}
P.newstitle         { color: #4e4e4e; font-size: 12pt; font-weight: bold; border-bottom: 1px solid #C0C0C0; margin-bottom: 5px; }
P.newstitle A       { color: #4e4e4e; text-decoration: none; }
P.newstitle A:hover { color: #FF6666; text-decoration: none; }
DIV.newsblock       { margin: 0 5px 25px 10px; padding: 0; }

/* stuff */
.clear              { clear: both; }
.inline             { display: inline-block; }
.small              { font-size: 8pt; }
.cursor-pointer     { cursor: pointer; }
.no-text-decoration { 
    text-decoration: none !important; 
    
}

/* IMG options */
IMG                 { border: 0; text-decoration: none !important; }
IMG.absmiddle       { vertical-align: top; }
IMG.fill-width      { width: 100%; }

/* Link Colors */
A                   { color: #A50D0D; }
A:visited           { color: #FF0000; }
A:hover             { color: #FF6666; text-decoration: underline; }
A:active            { color: #FF0000; }
A.hidden            { text-decoration: none; color: #000000; }

/* Format a span to look like a hyperlink */
.pseudolink { color: #A50D0D; cursor: pointer; }
.pseudolink:hover { text-decoration: underline; }

/* Padding and Margin Removal */
.nomargin        { margin: 0px !important; }
.nomargin-top    { margin-top: 0px !important; }
.nomargin-bottom { margin-bottom: 0px !important; }
.nopadding       { padding: 0px !important; }

/* add margins */
.margin-xs         { margin: 0.25em; }
.margin-sm         { margin: 0.5em; }
.margin-md         { margin: 1.0em; }
.margin-lg         { margin: 2.0em; }
.margin-xl         { margin: 3.0em; }
.margin-top-xs     { margin-top: 0.25em; }
.margin-top-sm     { margin-top: 0.5em; }
.margin-top-md     { margin-top: 1.0em; }
.margin-top-lg     { margin-top: 2.0em; }
.margin-top-xl     { margin-top: 3.0em; }
.margin-right-xs   { margin-right: 0.25em; }
.margin-right-sm   { margin-right: 0.5em; }
.margin-right-md   { margin-right: 1.0em; }
.margin-right-lg   { margin-right: 2.0em; }
.margin-right-xl   { margin-right: 3.0em; }
.margin-bottom-xs  { margin-bottom: 0.25em; }
.margin-bottom-sm  { margin-bottom: 0.5em; }
.margin-bottom-md  { margin-bottom: 1.0em; }
.margin-bottom-lg  { margin-bottom: 2.0em; }
.margin-bottom-xl  { margin-bottom: 3.0em; }
.margin-left-xs    { margin-left: 0.25em; }
.margin-left-sm    { margin-left: 0.5em; }
.margin-left-md    { margin-left: 1.0em; }
.margin-left-lg    { margin-left: 2.0em; }
.margin-left-xl    { margin-left: 3.0em; }

/* add padding */
.padding-xs        { padding: 0.25em; }
.padding-sm        { padding: 0.5em; }
.padding-md        { padding: 1.0em; }
.padding-lg        { padding: 2.0em; }
.padding-xl        { padding: 3.0em; }
.padding-top-xs    { padding-top: 0.25em; }
.padding-top-sm    { padding-top: 0.5em; }
.padding-top-md    { padding-top: 1.0em; }
.padding-top-lg    { padding-top: 2.0em; }
.padding-top-xl    { padding-top: 3.0em; }
.padding-right-xs  { padding-right: 0.25em; }
.padding-right-sm  { padding-right: 0.5em; }
.padding-right-md  { padding-right: 1.0em; }
.padding-right-lg  { padding-right: 2.0em; }
.padding-right-xl  { padding-right: 3.0em; }
.padding-bottom-xs { padding-bottom: 0.25em; }
.padding-bottom-sm { padding-bottom: 0.5em; }
.padding-bottom-md { padding-bottom: 1.0em; }
.padding-bottom-lg { padding-bottom: 2.0em; }
.padding-bottom-xl { padding-bottom: 3.0em; }
.padding-left-xs   { padding-left: 0.25em; }
.padding-left-sm   { padding-left: 0.5em; }
.padding-left-md   { padding-left: 1.0em; }
.padding-left-lg   { padding-left: 2.0em; }
.padding-left-xl   { padding-left: 3.0em; }

/* HR */
hr
{
    border: 0;
    color: #A50D0D;
    background-color: #A50D0D;
    height: 1px;
    width: 100%;
    text-align: left;
}

/* template navigation links */
.link-container     { position: relative; height: 1.2em; }
.link-container p   { position: absolute; width: 50%; margin: 0; }
.left-link          { left: 0; }
.right-link         { right: 0; text-align: right; }

/* Status colors */
.hdr                { background-color: #000000; color: #ffffff; }
.pct0               { background-color: #ff5050; }
.pct5               { background-color: #ff5d4f; }
.pct10              { background-color: #ff694e; }
.pct15              { background-color: #ff764d; }
.pct20              { background-color: #ff824b; }
.pct25              { background-color: #ff8f4a; }
.pct30              { background-color: #ff9b49; }
.pct35              { background-color: #ffa848; }
.pct40              { background-color: #ffb447; }
.pct45              { background-color: #ffc146; }
.pct50              { background-color: #ffcd45; }
.pct55              { background-color: #ffda43; }
.pct60              { background-color: #ffe642; }
.pct65              { background-color: #fff341; }
.pct70              { background-color: #ffff40; }
.pct75              { background-color: #dcff48; }
.pct80              { background-color: #c8ff50; }
.pct85              { background-color: #b4ff58; }
.pct90              { background-color: #a0ff60; }
.pct95              { background-color: #8cff60; }
.pct100             { background-color: #60ff60; }
.nonexistent        { background-color: #ff5050; }
.poor               { background-color: #ff8f4a; }
.outdated           { background-color: #ffcd45; }
.outdadeq           { background-color: #ffff40; }
.adequate           { background-color: #dcff48; }
.adeqgood           { background-color: #c0ff54; }
.good               { background-color: #60ff60; }

/* ToDo colors */
.todo               { background-color: red; }
.inprogress         { background-color: yellow; }
.done               { background-color: limegreen; }
.invalid            { color: gray; text-decoration: line-through; }

/* Fun Projects */
.works              { background-color: lightblue; }
.abandoned          { background-color: gray; }
.modified           { font-weight: bold; }
.submitted          { font-style: italic; }
.committed          { font-style: italic; color: gray; }

/* App Support status */
.gold               { background-color: wheat; }
.silver             { background-color: silver; }

/* Rating Number */
.rating { font-family: Helvetica, Arial; font-size: 6pt; color: #333333; }

/* Vote Button */
.votebutton { background-color: #666666; color: #ffffff; }

/* Rate Button */
.ratebutton { background-color: #666666; color: #ffffff; }

/* Search Button */
.searchbutton   { background-color: #666666; color: #ffffff; }

/* Search Field */
.searchfield    { background-color: #E0E0E0; color: #666666; }

/* Note box */
.note { padding: 7px; }

/* Main table */
.mainTable { padding-left: 7px; }

/* Banner div */
#banner { border: 1px solid black; }

/* Editor textarea */
#editor { height: 25em; width:700px; }

/* zoom image overlay style */
.zoom_overlay { position:relative; top:10px; left:10px; margin-left:-32px; padding:0px; }

/* application title/name */
h1.whq-app-title, h2.whq-app-title {
    font-size: 36px;
    color: #732010;
    border-bottom: 1px solid #732010;
    margin: 0.25em 0 0.5em 0;
}
h2.whq-app-title { margin-top: 1em; font-size: 24px; }

/* breadcrumb */
.whq-breadcrumb a, .whq-breadcrumb a:visited {
    color: inherit;
}
.whq-breadcrumb i {
    font-size: 80%;
    color: #aaaaaa;
}

/* comments */
.panel-forum .panel-body {
    font-family: monospace;
    font-size: 12px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* screenshots */
.whq-shot {
    display: inline-block;
}
.whq-shot img {
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
}
.whq-shot img:hover {
    opacity: 0.8;
}
.whq-shot i.fa {
    display: inline-block;
    margin: 0px 0 0 -25px;
    font-size: 20px;
    opacity: 0.8;
    color: #ffffff;
    text-shadow: 1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.whq-shot-link {
    font-size: 70%;
    white-space: nowrap;
}
.whq-shot-none {
    display: inline-block;
    width: 128px;
    height: 85px;
    padding-top: 35px;
    border-radius: 5px;
    background-color: #000000;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

/* classes for the main page */
div.topx_style {
    padding: 7px;
    margin: 6px;
    border: 2px solid #999999;
    border-radius: 5px;
}
div.topx_style.platinum { background-color: #333333; }
div.topx_style.platinum div.rating_header { color: #ffffff; }
div.topx_style.gold     { background-color: #FFF600; }
div.topx_style.silver   { background-color: #C0C0C0; }
div.rating_header { padding: 8px; }
div.rating_title { padding-bottom: 4px; font-weight: bold; font-size: 160%; }

/*
  =====================================================================================================================
   Boxes
  =====================================================================================================================
*/

.html_frame {
    margin: 1em 0 1em 0;
    border-radius: 5px;
    background-color: #ffffff;
}
.html_frame_title {
    font-size: 120%;
    font-weight: bold;
    border-top: 3px solid #732010;
    border-left: 3px solid #732010;
    border-right: 3px solid #732010;
    background-color: #95493A;
    padding: 5px;
    color: #ffffff;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

/*
  =====================================================================================================================
   Tables
  =====================================================================================================================
*/

/* default table styles for appdb (overrides bootstrap defaults) */
table {
    border-spacing: 0.25em;
    border-collapse: separate;
}
table td {
    padding: 0.25em;
}

/* wine hq table style */
table.whq-table {
    border-spacing: 0.25em;
    border-collapse: separate;
}
table.whq-table-full {
    width: 100%;
}
table.winehq td {
    padding: 0.25em;
}
table.whq-table thead tr td {
    background-color: #95493A;
    border: 1px solid #732010;
    font-weight: bold;
    color: #ffffff;
}
table.whq-table thead tr td a {
    color: #ffffff;
}
table.whq-table thead tr td:first-child {
    border-top-left-radius: 5px;
}
table.whq-table thead tr td:last-child {
    border-top-right-radius: 5px;
}
table.whq-table tbody tr td {
    background-color: #ffffff;
}
table.whq-table tbody tr:nth-child(odd) td {
    background-color: #ddd;
}

/* box */
.box-title {
    background-color: #AAAAAA; color: #FFFFFF; font-weight: bold;
}
.box-label {
    background-color: #C0C0C0;
}
.box-body {
    background-color: #E0E0E0;
}

TD.cline {
    background-color: #EEEEEE; color: #000000; 
    text-align: center; font-weight: bold; font-size: 10pt;
}

TH.qheader { background-color: #C3C8E5; color: #555555; font-size: 10pt; }
TR.qheader { background-color: #C3C8E5; color: #555555; font-size: 10pt; }

TABLE.bg { background-color: #FF6666; color: #FFFFFF }
TABLE.bg2 { background-color: #E0E0E0; }
TD.bg2 { background-color: #E0E0E0; }

TD.line1 { background-color: #E7E7E7; }
TD.line2 { background-color: #C0C0C0; color: #505050; font-size: 8pt; }
TD.line3 { background-color: #6F6F6F; }
TR.line1 { background-color: #E7E7E7; }
TR.line2 { background-color: #C0C0C0; color: #505050 }
TR.line3 { background-color: #6F6F6F; }


TH.titlex { background-color: #BBC2E5 }
TH.title { background-color: #C0C0C0; font-weight: bold }
TD.title { background-color: #C0C0C0; font-weight: bold }
TD.btitle { background-color: #FFFFFF }

TH.sqtitle { background-color: #C3C8E5; color: #555555 }

TR.buttons { background-color: #BDDAE5 }
TD.button { background-color: #BDDAE5 }
TD.button2 { background-color: #ABB2D5; }

/* misc table styles */
table tr.rowtitle td {
    background-color: #95493A;
    border: 1px solid #732010;
    font-weight: bold;
    color: #ffffff;
    padding: 0.25em;
}
table tr.rowtitle td:first-child  {
    border-top-left-radius: 5px;
}
table tr.rowtitle td:last-child {
    border-top-right-radius: 5px;
}

/* misc backgrounds from color name */
.white { background-color: #FFFFFF; }

/* query row colors */
.color0 { background-color: #E0E0E0 }
.color1 { background-color: #C0C0C0 }
.color2 { background-color: #FFFFFF }
.color3 { background-color: #666666 }
.color4 { background-color: #999999 }

/* table row colors for ratings (alternating colors for rows) */
tr:nth-child(odd) td.Platinum   { background-color: #333333 !important; color: #ffffff !important; }
tr:nth-child(even) td.Platinum  { background-color: #666666 !important; color: #ffffff !important; }

tr:nth-child(odd) td.Gold       { background-color: #FFF600 !important; }
tr:nth-child(even) td.Gold      { background-color: #fffcb3 !important; }

tr:nth-child(odd) td.Silver     { background-color: #C0C0C0 !important; }
tr:nth-child(even) td.Silver    { background-color: #e6e6e6 !important; }

tr:nth-child(odd) td.Bronze     { background-color: #FCBA0A !important; }
tr:nth-child(even) td.Bronze    { background-color: #FCBA0A !important; }

tr:nth-child(odd) td.Garbage    { background-color: #999966 !important; }
tr:nth-child(even) td.Garbage   { background-color: #ebebe0 !important; }

/* labels */
TD.label  { font-weight: bold }

/* for inwine/intwine */
TD.yes    { color: #00B100; font-style: italic; text-align: center }
TD.no     { color: #B10000; font-style: italic; text-align: center }
TD.stub   { color: #0000B1; font-style: italic; text-align: center }

/* width of the application column in the top 'X' lists on the main page */
TD.app_name { padding:10px; width: 150px }

/*
  =====================================================================================================================
   Application description and notes
  =====================================================================================================================
*/

/* Define <code> to behave like "generic" quoted software input and output. */
.code { background-color: #efefef; padding: 0.5em; border-width: 1pt;
        border-style: solid; border-color: #c0c0c0; white-space: -moz-pre-wrap;
        font-family: monospace; }

/* bash shell command prompt input and output */
.quote_terminal { background-color: #f0ece6; padding: 0.5em; border-width: 1pt;
                  border-style: solid; border-color: #c0c0c0; white-space: -moz-pre-wrap;
                  font-family: monospace; }

/* graphical user interface input and output */
.quote_window { background-color: #c0e0f0; padding: 0.5em; border-width: 1pt;
                border-style: solid; border-color: #c0c0c0; white-space: -moz-pre-wrap;
                font-family: monospace; }

/*
  Wine registry modification.
  Modifying the registry is a somewhat common wine task,  and other How To's already
  uniquely quote registry modifications, so here is a CSS to formalize this behavior.
  In practice this tag is not necessary, since, like almost everything else, registry
  edits are done either via a command prompt (regedit /C foo.reg (once implemented))
  or via the regedit graphical user interface.
*/
.quote_registry { background-color: #c6ffc6; padding: 0.5em; border-width: 1pt;
                  border-style: solid; border-color: #c0c0c0; white-space: -moz-pre-wrap;
                  font-family: monospace; }


thead.historyHeader { font-weight: bold }
table.historyTable { border: 1px;
                     font-family: "bitstream vera sans", "verdana", "arial", "helvetica", sans-serif;
                     font-size: 12px; }

/* note/howto colors */
.note-howto            { font-weight: bold; color: green;   }
.note-defaultnote      { font-weight: bold; color: #0066CC; } /* mid-light blue */
.note-warning          { font-weight: bold; color: red; }

/* done */