/*
  =====================================================================================================================
    WineHQ.org
    CSS Layout
  =====================================================================================================================
*/

/*
  =====================================================================================================================
    BOOTSTRAP OVERRIDES
  =====================================================================================================================
*/

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

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

/* Body Document Defaults */
BODY                {
                     background-color: #000000;
                     color: #000000;
                     background-image: url('../images/bg.jpg');
                     background-repeat: no-repeat;
                     background-attachment: fixed;
                    }

/* header sizes */
H1           { font-size: 28px; }
H2           { font-size: 24px; }
H3           { font-size: 18px; }
H4           { font-size: 14px; }
H5           { font-size: 12px; }

/* default 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; }

/* fake link colors */
SPAN.link           { color: #06456b; text-decoration: none; cursor: pointer; }
SPAN.link:hover     { color: #FF6666; text-decoration: underline; }
SPAN.link:active    { color: #FF0000; text-decoration: none; }

/* misc Sizes */
.tiny        { font-size: 0.65em; }
.small       { font-size: 0.75em; }
.bulky       { font-size: 1.25em; }
.large       { font-size: 1.5em; }
.big         { font-size: 2em; font-weight: bold; }
.huge        { font-size: 3em; font-weight: bolder; }
.gigantic    { font-size: 4em; font-weight: bolder; }
.monsterous  { font-size: 5em; font-weight: bolder; }

/* background colors */
.vltgrey     { background-color: #f9f9f9; }
.ltgrey      { background-color: #efefef; }
.grey        { background-color: #c0c0c0; }
.white       { background-color: #ffffff; }
.dkgrey      { background-color: #002434; }
.ltblack     { background-color: #999999; }
.black       { background-color: #000000; }
.blueish     { background-color: #bed5f7; }
.yellowish   { background-color: #FFFFCC; }

/* text colors */
.inverse            { color: #ffffff; }
.inverse:visited    { color: #ffffff; }
.success            { color: #008000; }
.success:visited    { color: #008000; }
.error              { color: #ff0000; }
.error:visited      { color: #ff0000; }
.disabled           { color: #999999; }
.disabled:visited   { color: #999999; }
.normal             { color: #000000; font-weight: normal; }
.water              { color: #6060ff; }
.good               { color: #60ff60; }
.warning            { color: #fffa00; }
.blueman            { color: #335184; text-shadow: 1px 1px 0px rgba(175, 210, 220, 0.8); }
.narrow-letter      { letter-spacing: -1px; }
.shadow             { text-shadow: 1px 1px 0px rgba(210, 210, 210, 0.8); }
.txt_orange         { color: #f37321; }
.txt_orange:visited { color: #f37321; }
.txt_blue           { color: #044469; }
.txt_blue:visited   { color: #044469; }

/* prevent text selection */
.unselectable
{
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* hide any element */
.noshow { display: none; }

/* floats */
.css_right { float: right; }
.css_left { float: left; }

/* inline block element */
.css_inline { display: inline-block; }

/* force block element */
.css_block { display: block !important; }

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

/* horizonal rules */
HR { border-top: 1px solid #d4d4d4; }

/* DIV styles */
DIV.align_center    { float: none; margin-left: auto ; margin-right: auto ; }
DIV.center-div      { float: none; display: table; margin: 0 auto; }
DIV.clear           { clear: both; margin: 0px; padding: 0px; }

/* Force Border Box Sizing */
.border-box         { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

/* Padding and Margin Removal */
.nomargin        { margin: 0px !important; }
.nomargin-top    { margin-top: 0px !important; }
.nomargin-bottom { margin-bottom: 0px !important; }
.nomargin-right  { margin-right: 0px !important; }
.nomargin-left   { margin-left: 0px !important; }
.nopadding        { padding: 0px !important; }
.nopadding-top    { padding-top: 0px !important; }
.nopadding-bottom { padding-bottom: 0px !important; }
.nopadding-right  { padding-right: 0px !important; }
.nopadding-left   { padding-left: 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; }

/* add padding */
.padding_half    { padding: 0.5em; }
.padding_one     { padding: 1em; }

/* add margin */
.margin_half     { margin: 0.5em; }
.margin_one      { margin: 1em; }

/* vertical align */
.vertical-align-top { vertical-align: top; }
.vertical-align-middle { vertical-align: middle; }

/* disable wrapping */
.nowrap          { white-space:nowrap; }

/* text styles */
.bold                   { font-weight: bold; }
.bolder                 { font-weight: bolder; }
.italic                 { font-style: italic; }
.strike                 { text-decoration: line-through; }
.underline              { text-decoration: underline; }
.center, .text_center   { text-align: center; }
.justify, .text_justify { text-align: justify; }
.text_right             { text-align: right; }
.text_left              { text-align: left; }

/* other misc overrides */
.cursor             { cursor: pointer; }
.absmiddle IMG      { vertical-align: top; }
.blip               { color: #ff0000; font-size: 10px; }
.border             { background-color: #d4d4d4; }
.noborder           { border: none !important; }
.gline              { border-top: 1px solid #d4d4d4; width: 100%; }
.indent             { margin-left: 1.75em; }

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

/* List Options */
LI.roomy            { padding-bottom: 10px; }
UL.roomy LI         { padding-bottom: 10px; }
OL.roomy LI         { padding-bottom: 10px; }
UL.small LI         { font-size: 10px; }
ul.ulmenu           { box-sizing:border-box; -moz-box-sizing:border-box; display: block; list-style: none; margin: 0px; padding: 0px; }
ul.ulmenu > li      { box-sizing:border-box; -moz-box-sizing:border-box; float: left; padding: 0px 5px 5px 0; list-style-image:none !important; line-height: 1em;}

UL.plst             { padding-left: 1.75em; display: inline-block; list-style: none; }
UL.plst li:before   { content: '\f0eb'; font-family: FontAwesome; width: 1.75em; margin-left: -1.75em; margin-right: 1.1em; }

UL.flst             { padding-left: 1.75em; display: inline-block; list-style: none; }
UL.flst li:before   { content: '\f0c6'; font-family: FontAwesome; width: 1.75em; margin-left: -1.75em; margin-right: 0.5em; }

UL.gcheck           { padding-left: 1.75em; display: inline-block; list-style: none; }
UL.gcheck li:before { content: '\f00c'; font-family: FontAwesome; width: 1.75em; margin-left: -1.75em; margin-right: 0.5em; color: green; }

UL.warn             { padding-left: 1.75em; display: inline-block; list-style: none; }
UL.warn li:before   { content: '\f071'; font-family: FontAwesome; width: 1.75em; margin-left: -1.75em; margin-right: 0.5em; color: orange; }

UL.nostyle          { list-style: none; padding: 0px; }

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

/* rounded corners */
.cornerround
{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

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

#whq-logo-glass {
    position: fixed;
    top: 30px;
    z-index: -1;
}

#whq-logo-text {
    position: absolute;
    z-index: 2;
    left: 100px;
    top: 30px;
}

#whq-page-body {
    margin-left: 120px;
    margin-top: 45px;
}

.whq-page-container {
    padding: 2em;
    background-color: #fff;
    border-radius: 5px;
}

/* 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;
}

/* top tabs */
#whq-tabs {
    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; }

/* debug log */
#whq-debug-log
{
    clear: both;
    height: 150px;
    margin: 10px;
    border: 2px inset #999999;
    font-family: monospace, sans-serif;
    color: #c0c0c0;
    background-color: #090909;
    overflow: auto;
    font-size: 10px;
}

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

@media (max-width: 767px) {
    #whq-logo-glass {
        position: absolute;
        top: auto;
        left: auto;
        right: 10px;
        width: 70px;
        z-index: 2;
    }
    body.page-home #whq-logo-glass {
        width: 150px;
    }
    #whq-logo-glass img { width: 100%; }

    #whq-logo-text {
        position: relative;
        left: 0; top: 0;
        margin-bottom: -15px;
    }

    #whq-search-box {
        display: none;
    }

    #whq-page-body {
        margin-left: 0;
        margin-top: 0;
    }

    #whq-tabs {
        float: none;
        display: block;
        background-color: #832c2c;
        padding: 5px 15px 5px 15px;
        margin: 0 0 10px 0;
    }
    #whq-tabs .whq-tabs-menu {
        display: block;
        color: #fff;
        font-size: 28px;
        font-weight: bolder;
        cursor: pointer;
    }
    #whq-tabs UL {
        display: none;
        background-color: #999999;
        padding: 0;
        margin: 10px 0 15px 0;
    }

    #whq-tabs UL LI {
        display: block;
        float: none;
        width: auto;
        height: auto;
        border-radius: 0;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
    }

    #whq-tabs UL LI A {
        display: block;
        width: auto;
        height: auto;
        margin: 0 0 2px 0;
        padding: 15px 0 15px 15px;
        text-align: left;
    }
    #whq-tabs LI:hover { background-color: #A22323; }

    #whq-footer {
        margin-left: 0;
    }

}

/*
  =====================================================================================================================
   WINEHQ ELEMENTS
  =====================================================================================================================
*/

/* header text */
H1.title            { color: #A50D0D; border-bottom: 1px solid #A50D0D; margin: 0 0 1em 0; }
H1.title A          { color: #A50D0D; text-decoration: none; }
H1.title A:hover    { color: red; }
H3.title            { color: #A50D0D; border-bottom: 1px solid #A50D0D; margin: 0 0 1em 0; }
H3.title A          { color: #A50D0D; text-decoration: none; }
H3.title A:hover    { color: red; }
P.newsdate          { color: #4e4e4e; font-size: 80%; margin: 0 5px 10px 10px;}
P.newstitle         { color: #4e4e4e; font-size: 125%; 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; }

/* winehq main page menu */
.winehq_menu_wrap                                   { display: block; padding-left: 0; }
@media (max-width: 767px) {
    .winehq_menu_wrap                               { margin-top: 15px; padding-left: 15px; }
}

.winehq_menu                                        { padding: 2em; }
.winehq_menu>.winehq_menu_item                      { display: inline-block; padding: 0; margin: 0px 0px 30px 0px; text-decoration: none; cursor: pointer; }
.winehq_menu>.winehq_menu_item.donate               { margin-bottom: 0; }
.winehq_menu>.winehq_menu_item>.title               { display: block; font-size: 24px; padding: 10px 0 0 60px; margin: 0; color: maroon; }
.winehq_menu>.winehq_menu_item:hover>.title         { text-decoration: underline; color: red; }
.winehq_menu>.winehq_menu_item>.subtitle            { display: block; font-size: 14px; color: #4e4e4e; padding: 0 0 0 80px; margin: 0; }

/* icons for the main page menu elements */
.winehq_menu .icon {
    background: url('../images/home_icons.png') no-repeat;
    width:50px; height:50px;
    display:inline-block;
    float:left; 
    clear:left;
}
.winehq_menu .info .icon              { background-position: 0 0 }
.winehq_menu .info:hover .icon        { background-position: 0 -50px }
.winehq_menu .dl .icon                { background-position: -50px 0 }
.winehq_menu .dl:hover .icon          { background-position: -50px -50px }
.winehq_menu .help .icon              { background-position: -100px 0 }
.winehq_menu .help:hover .icon        { background-position: -100px -50px }
.winehq_menu .devel .icon             { background-position: -150px 0 }
.winehq_menu .devel:hover .icon       { background-position: -150px -50px }
.winehq_menu .donate .icon            { background-position: -200px 0 }
.winehq_menu .donate:hover .icon      { background-position: -200px -50px }

/* info box */
div.whq-info-box {
    margin: 10px;
    padding: 5px;
    border: 1px solid #C0C0C0;
    background-color: #F0F0F0;
    border-radius: 3px;
}

/* Rounded Corner Box */
div.rbox                              { display:block; margin: 0px; }
div.rbox b.rtop, b.rbottom            { display:block; margin: 0px;  }
div.rbox b.rtop b, b.rbottom b        { display:block; height: 1px; overflow: hidden; background: #FFFFFF; }
div.rbox b.r1                         { margin: 0 5px; }
div.rbox b.r2                         { margin: 0 3px; }
div.rbox b.r3                         { margin: 0 2px; }
div.rbox b.rtop b.r4, b.rbottom b.r4  { margin: 0 1px; height: 2px}
div.rbox div.content                  { margin: 0; background-color: #FFFFFF; }

/* WWN Colors */
.wwn TABLE          { margin: 0px; padding: 0px; border-spacing: 0; }
.wwn TH             { color: #A50D0D; border-bottom: 1px solid #A50D0D; margin: 5px 0 5px 0; padding: 5px 0 5px 0; text-align: left; }
.wwn BLOCKQUOTE     { margin: 1em 1em 1em 1em; color: #A8003C; }
.wwnQuote           { color: #A8003C; }
p.indent            { padding-left: 1em; padding-right: 1em;}

/* RSS Feed Links */
ul.rss {
    list-style: none;
    padding: 0 0 0 2px;
    margin: 0;
}
ul.rss li {
    background: url("./images/feed.gif") no-repeat 0 1px;
    padding: 0px 0 0px 0px;
    height: 18px;
}
ul.rss li a {
    font-size: 8pt;
    padding: 0 0 0 18px;
}

/* 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; }

/*
  =====================================================================================================================
    RIGHT TO LEFT LANGUAGE HANDLING
  =====================================================================================================================
*/

BODY.rtl {
    direction: rtl;
}