/* structure.less */

/**
 * This file provides styles for the general layout structure.
 *
 * @author Anika Henke <anika@selfthinker.org>
 */
body {
    margin: 0 auto;
}

#dokuwiki__site {
    margin: 0 auto;
    max-width: @ini_site_width;
}

#dokuwiki__site > .site {
    padding: 0 .5em;
}

#dokuwiki__header {
    width: 100%;

    .headings {
        float: left;
    }

    .tools {
        float: right;
        text-align: right;
    }
}

[dir=rtl] #dokuwiki__header {
    .headings {
        float: right;
        text-align: right;
    }

    .tools {
        float: left;
        text-align: left;
    }
}

#dokuwiki__site .wrapper {
    position: relative;
}

#dokuwiki__aside {
    width: @ini_sidebar_width;
    float: left;
    position: relative;
    display: block;

    > .pad {
        margin: 0 1.5em 0 0;
    }
}

[dir=rtl] #dokuwiki__aside {
    float: right;
    > .pad {
        margin: 0 0 0 1.5em;
    }
}

.showSidebar #dokuwiki__content {
    float: right;
    margin-left: (-1 * @ini_sidebar_width);
    width: 100%;

    > .pad {
        margin-left: @ini_sidebar_width;
    }
}

[dir=rtl] .showSidebar #dokuwiki__content {
    float: left;
    margin-left: 0;
    margin-right: (-1 * @ini_sidebar_width);

    > .pad {
        margin-left: 0;
        margin-right: @ini_sidebar_width;
    }
}

#dokuwiki__footer {
    clear: both;
}


/* design.less */

/**
 * This file provides the main design styles for the
 * bits that surround the content.
 *
 * @author Anika Henke <anika@selfthinker.org>
 * @author Andreas Gohr <andi@splitbrain.org>
 * @author Clarence Lee <clarencedglee@gmail.com>
 */

.dokuwiki.export {
    background-color: @ini_background;
}

/* header
********************************************************************/

#dokuwiki__header {
    padding: 2em 0 1.5em;

    .headings,
    .tools {
        margin-bottom: 1.5em;
        width: 49%;
    }
    .tools {
        margin-top: .2em;
    }

    .logo {
        margin: 0;
        font-size: 1.5em;
        font-weight: normal;
        line-height: 1.2;

        img {
            float: left;
            margin-right: .5em;
            height: 64px;
            width: auto;
        }

        span {
            display: block;
            padding-top: 10px;
        }

        a {
            text-decoration: none;
            color: @ini_text;
            background-color: inherit;
        }
    }

    p.claim {
        margin-bottom: 0;
        font-size: 0.875em;
    }

    /* make all links in header (including breadcrumb and interwiki) same colour as the rest */
    a {
        color: @ini_link;
        background-color: inherit;
    }
}

[dir=rtl] #dokuwiki__header .logo img {
    float: right;
    margin-left: .5em;
    margin-right: 0;
}

/* tools
********************************************************************/

/* highlight selected tool */
.mode_admin .action.admin a,
.mode_login .action.login a,
.mode_register .action.register a,
.mode_profile .action.profile a,
.mode_recent .action.recent a,
.mode_index .action.index a,
.mode_media .action.media a,
.mode_revisions .action.revs a,
.mode_backlink .action.backlink a,
.mode_subscribe .action.subscribe a {
    font-weight: bold;
}

#dokuwiki__header .tools {
    ul {
        padding-left: 0;
        margin-bottom: 0;
    }

    li {
        font-size: 0.875em;
        margin-left: 1em;
        list-style: none;
        display: inline;
        vertical-align: top;
    }

    form.search div.ajax_qsearch li {
        font-size: 1em;
        margin-left: 0;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

[dir=rtl] #dokuwiki__header .tools li {
    margin-right: 1em;
    margin-left: 0;
}

#dokuwiki__header .mobileTools {
    display: none; /* hide mobile tools dropdown to only show in mobile view */
}

/*____________ site tools ____________*/

#dokuwiki__sitetools {
    text-align: right;

    form.search {
        font-size: 0.875em;
    }
}

[dir=rtl] #dokuwiki__sitetools {
    text-align: left;
}

form.search {
    display: block;
    position: relative;
    margin-bottom: 0.5em;

    input {
        width: 18em;
        padding: .35em 22px .35em .1em;
    }

    button {
        background: transparent url(images/search.png) no-repeat 0 0;
        border-width: 0;
        width: 19px;
        height: 14px;
        text-indent: -99999px;
        margin-left: -20px;
        box-shadow: none;
        padding: 0;
    }
}

[dir=rtl] form.search {
    input {
        padding: .35em .1em .35em 22px;
    }

    button {
        background-position: 5px 0;
        margin-left: 0;
        margin-right: -20px;
        position: relative;
    }
}

/*____________ breadcrumbs ____________*/

.dokuwiki div.breadcrumbs {
    border-top: 1px solid @ini_border;
    border-bottom: 1px solid @ini_background;
    margin-bottom: .5em;
    font-size: 0.875em;
    clear: both;

    div {
        padding: .1em .35em;
    }

    div:only-child {
        border-top: 1px solid @ini_background;
        border-bottom: 1px solid @ini_border;
    }

    div:first-child {
        border-top: 1px solid @ini_background;
    }

    div:last-child {
        border-bottom: 1px solid @ini_border;
    }

    .bcsep {
        font-size: 0.75em;
    }
}

/* sidebar
********************************************************************/

.dokuwiki .aside {
    font-size: 0.875em;
    overflow: hidden;
    word-wrap: break-word;

    /* make sidebar more condensed */

    h1 {
        font-size: 1.714em;
        margin-bottom: .292em;
    }

    h2 {
        margin-bottom: .333em;
    }

    h3 {
        margin-bottom: .444em;
    }

    h4 {
        margin-bottom: .5em;
    }

    h5 {
        margin-bottom: .5714em;
    }

    p,
    ul,
    ol,
    dl,
    pre,
    table,
    fieldset,
    hr,
    blockquote,
    address {
        margin-bottom: .7em;
    }

    ul,
    ol {
        padding-left: .5em;
    }

    li ul,
    li ol {
        margin-bottom: 0;
        padding: 0;
    }

    a:link,
    a:visited {
        color: @ini_link;
        background-color: inherit;
    }
}

[dir=rtl] .dokuwiki .aside ul,
[dir=rtl] .dokuwiki .aside ol {
    padding-right: .5em;
}

/* content
********************************************************************/

.dokuwiki .pageId {
    float: right;
    margin-right: -1em;
    margin-bottom: -1px;
    margin-top: -1.5em;
    overflow: hidden;
    padding: 0.5em 1em 0;

    span {
        font-size: 0.875em;
        border: solid @ini_background_alt;
        border-width: 1px 1px 0;
        background-color: @ini_background;
        color: @ini_text_alt;
        padding: .1em .35em;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        box-shadow: 0 0 .5em @ini_text_alt;
        display: block;
    }
}

.dokuwiki div.page {
    clear: both;
    background: @ini_background;
    color: inherit;
    border: 1px solid @ini_background_alt;
    box-shadow: 0 0 .5em @ini_text_alt;
    border-radius: 2px;
    padding: 1.556em 2em 2em;
    margin-bottom: .5em;
    overflow: hidden;
    word-wrap: break-word;
}

.dokuwiki .docInfo {
    font-size: 0.875em;
    text-align: right;
    overflow-wrap: break-word;
}

/* license note under edit window */
.dokuwiki div.license {
    font-size: 93.75%;
}

[dir=rtl] .dokuwiki .docInfo {
    text-align: left;
}

[dir=rtl] .dokuwiki .pageId {
    float: left;
    margin-left: -1em;
    margin-right: 0;
}

/* footer
********************************************************************/

.dokuwiki .wrapper {
    margin-bottom: 1.4em;
}

#dokuwiki__footer {
    margin-bottom: 1em;
    text-align: center;

    > .pad {
        font-size: 0.875em;
    }

    div.license {
        margin-bottom: 0.5em;
        font-size: 100%;
    }

    div.buttons a {
        img {
            opacity: 0.5;
        }

        &:hover img,
        &:active img,
        &:focus img {
            opacity: 1;
        }
    }

}

[dir=rtl] #dokuwiki__footer .license img {
    margin: 0 0 0 .5em;
}


/* content.less */

/**
 * This file provides the main design styles for the page content.
 *
 * @author Anika Henke <anika@selfthinker.org>
 * @author Andreas Gohr <andi@splitbrain.org>
 * @author Clarence Lee <clarencedglee@gmail.com>
 */

/*____________ section indenting ____________

.dokuwiki .page  h1 {margin-left: 0;}
.dokuwiki .page  h2 {margin-left: .666em;}
.dokuwiki .page  h3 {margin-left: 1.776em;}
.dokuwiki .page  h4 {margin-left: 3em;}
.dokuwiki .page  h5 {margin-left: 4.5712em;}
.dokuwiki .page  div.level1 {margin-left: 0;}
.dokuwiki .page  div.level2 {margin-left: 1em;}
.dokuwiki .page  div.level3 {margin-left: 2em;}
.dokuwiki .page  div.level4 {margin-left: 3em;}
.dokuwiki .page  div.level5 {margin-left: 4em;}

[dir=rtl] .dokuwiki .page h1 {margin-left: 0; margin-right: 0;}
[dir=rtl] .dokuwiki .page h2 {margin-left: 0; margin-right: .666em;}
[dir=rtl] .dokuwiki .page h3 {margin-left: 0; margin-right: 1.776em;}
[dir=rtl] .dokuwiki .page h4 {margin-left: 0; margin-right: 3em;}
[dir=rtl] .dokuwiki .page h5 {margin-left: 0; margin-right: 4.5712em;}
[dir=rtl] .dokuwiki .page div.level1 {margin-left: 0; margin-right: 0;}
[dir=rtl] .dokuwiki .page div.level2 {margin-left: 0; margin-right: 1em;}
[dir=rtl] .dokuwiki .page div.level3 {margin-left: 0; margin-right: 2em;}
[dir=rtl] .dokuwiki .page div.level4 {margin-left: 0; margin-right: 3em;}
[dir=rtl] .dokuwiki .page div.level5 {margin-left: 0; margin-right: 4em;}
*/
/* hx margin-left = (1 / font-size) * .levelx-margin */

/*____________ links to wiki pages (addition to _links) ____________*/

/* existing wikipage */
.dokuwiki a.wikilink1 {
    color: @ini_existing;
    background-color: inherit;
}

/* not existing wikipage */
.dokuwiki a.wikilink2 {
    color: @ini_missing;
    background-color: inherit;
}

/*____________ images ____________*/

/* embedded images (styles are already partly set in lib/styles/all.css) */
.dokuwiki img.media {
    margin: .2em 0;
}

.dokuwiki img.medialeft {
    margin: .2em 1em .2em 0;
}

.dokuwiki img.mediaright {
    margin: .2em 0 .2em 1em;
}

.dokuwiki img.mediacenter {
    margin: .2em auto;
}

/*____________ lists ____________*/

.dokuwiki .page,
.dokuwiki .aside {
    ul li {
        color: @ini_text_alt;
    }

    ol li {
        color: @ini_text_neu;
    }

    li .li {
        color: @ini_text;
    }
}

/*____________ tables ____________*/

/* div around each table */
.dokuwiki div.table {
    overflow-x: auto;
    margin-bottom: 1.4em;
    min-width: 50%;
}

.dokuwiki div.table table {
    margin-bottom: 0;
}

.dokuwiki table.inline {
    min-width: 50%;
}

.dokuwiki table.inline tr:hover td {
    background-color: @ini_background_alt;
}

.dokuwiki table.inline tr:hover th {
    background-color: @ini_border;
}

/*____________ code ____________*/

/* fix if background-color hides underlining */
.dokuwiki em.u code {
    text-decoration: underline;
}

/* filenames for downloadable file and code blocks */
.dokuwiki dl.code,
.dokuwiki dl.file {
    dt {
        background-color: @ini_background_site;
        background: linear-gradient(to bottom, @ini_background_alt 0%, @ini_background_site 100%);
        color: inherit;
        border: 1px solid @ini_border;
        border-bottom-color: @ini_background_site;
        border-top-left-radius: .3em;
        border-top-right-radius: .3em;
        padding: .3em .6em .1em;
        margin-bottom: -1px;
        float: left;

        a {
            background-color: transparent;
            font-size: 0.875em;
            font-weight: normal;
            display: block;
            min-height: 16px;
        }
    }

    dd {
        margin: 0;
        clear: left;
    }

    pre {
        box-shadow: inset -4px -4px .5em -.3em @ini_border;
    }
}

[dir=rtl] .dokuwiki dl.code,
[dir=rtl] .dokuwiki dl.file {
    dt {
        float: right;
    }

    dd {
        clear: right;
    }
}

/* for code in <file> */
.dokuwiki dl.file {
    pre,
    dt {
        border-style: dashed;
    }
    dt {
        border-bottom-style: solid;
    }
}

/*____________ JS popup ____________*/

.JSpopup {
    background-color: @ini_background;
    color: @ini_text;
    border: 1px solid @ini_border;
    box-shadow: .1em .1em .1em @ini_border;
    border-radius: 2px;
    padding: .3em .5em;
    font-size: .9em;
}

.dokuwiki form.search div.ajax_qsearch {
    top: -.35em;
    font-size: 1em;
    text-overflow: ellipsis;
}

.JSpopup ul,
.JSpopup ol {
    padding-left: 0;
}

[dir=rtl] .JSpopup ul,
[dir=rtl] .JSpopup ol {
    padding-right: 0;
}

/* changes to underscored CSS files
********************************************************************/

#acl__tree li {
    margin: 0;
}

#dokuwiki__content span.curid a {
    font-weight: normal;
}

#dokuwiki__content strong span.curid a {
    font-weight: bold;
}

/*____________ changes to _edit ____________*/

.dokuwiki div.toolbar {
    button.toolbutton {
        border-radius: 0;
        border-left-width: 0;
        padding: .1em .35em;
    }

    button.toolbutton:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-left-width: 1px;
    }

    button.toolbutton:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}

[dir=rtl] .dokuwiki div.toolbar {
    button.toolbutton:last-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-left-width: 1px;
    }

    button.toolbutton:first-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-left-width: 0;
        border-right-width: 1px;
    }
}

.dokuwiki div.section_highlight {
    margin: 0 -2em;
    padding: 0 1em;
    border-width: 0 1em;
}

.dokuwiki textarea.edit {
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
}

.dokuwiki div.preview {
    margin: 0 -2em;
    padding: 0 2em;
}

.dokuwiki.hasSidebar div.preview {
    border-right: @ini_sidebar_width solid @ini_background_alt;
}

[dir=rtl] .dokuwiki.hasSidebar div.preview {
    border-right-width: 0;
    border-left: @ini_sidebar_width solid @ini_background_alt;
}

.dokuwiki div.preview div.pad {
    padding: 1.556em 0 2em;
}

/*____________ changes to _toc ____________*/

#dw__toc {
    margin: -1.556em -2em .5em 1.4em;
    width: @ini_sidebar_width;
    border-left: 1px solid @ini_border;
    background: @ini_background;
    color: inherit;
}

[dir=rtl] #dw__toc {
    margin: -1.556em 1.4em .5em -2em;
    border-left-width: 0;
    border-right: 1px solid @ini_border;
}

.dokuwiki.export #dw__toc {
    margin-top: 0;
    margin-right: 0;
}

[dir=rtl] .dokuwiki.export #dw__toc {
    margin-top: 0;
    margin-left: 0;
}

.dokuwiki h3.toggle {
    padding: .5em 1em;
    margin-bottom: 0;
    font-size: .875em;
    letter-spacing: .1em;
}

#dokuwiki__aside h3.toggle {
    display: none;
}

.dokuwiki .toggle strong {
    background: transparent url(images/toc-arrows.png) 0 0;
    width: 8px;
    height: 5px;
    margin: .4em 0 0;
}

.dokuwiki .toggle.closed strong {
    background-position: 0 -5px;
}

.dokuwiki .toggle strong span {
    display: none;
}

#dw__toc {
    > div {
        font-size: 0.875em;
        padding: .5em 1em 1em;
    }

    ul {
        padding: 0 0 0 1.2em;

        li {
            list-style-image: url(images/toc-bullet.png);
        }
    }

    ul li.clear {
        list-style: none;
    }

    ul li div.li {
        padding: .2em 0;
    }
}

[dir=rtl] #dw__toc ul {
    padding: 0 1.5em 0 0;
}

/*____________ changes to _imgdetail ____________*/

#dokuwiki__detail {
    padding: 0;

    img {
        float: none;
        margin-bottom: 1.4em;
    }

    div.img_detail {
        float: none;
    }

    div.img_detail dl {
        overflow: hidden;
    }

    div.img_detail dl dt {
        float: left;
        width: 9em;
        text-align: right;
        clear: left;
    }

    div.img_detail dl dd {
        margin-left: 9.5em;
    }
}

[dir=rtl] #dokuwiki__detail div.img_detail {
    dl dt {
        float: right;
        text-align: left;
        clear: right;
    }

    dl dd {
        margin-left: 0;
        margin-right: 9.5em;
    }
}


/* basic.less */

/**
 * This file provides the most basic styles.
 *
 * If you integrate DokuWiki into another project, you might either
 * want to integrate this file into the other project as well, or use
 * the other project's basic CSS for DokuWiki instead of this one.
 *
 * @author Anika Henke <anika@selfthinker.org>
 */

html {
    overflow-x: auto;
    overflow-y: scroll;
}
html,
body {
    color: @ini_text;
    background: @ini_background_site url(images/page-gradient.png) top left repeat-x;
    margin: 0;
    padding: 0;
}
body {
    font: normal 87.5%/1.4 Arial, sans-serif;
    /* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */
    -webkit-text-size-adjust: 100%;
}


/*____________ headers ____________*/

caption,
figcaption,
summary,
legend {
    padding: 0;
    margin: 0 0 .35em;
    line-height: 1.2;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    padding: 0;
    line-height: 1.2;
    clear: left; /* ideally 'both', but problems with toc */
}
[dir=rtl] h1,
[dir=rtl] h2,
[dir=rtl] h3,
[dir=rtl] h4,
[dir=rtl] h5,
[dir=rtl] h6 {
    clear: right;
}

h1 {
    font-size: 2em;
    margin: 0 0 0.444em;
}
h2 {
    font-size: 1.5em;
    margin: 0 0 0.666em;
}
h3 {
    font-size: 1.125em;
    margin: 0 0 0.888em;
}
h4 {
    font-size: 1em;
    margin: 0 0 1.0em;
}
h5 {
    font-size: .875em;
    margin: 0 0 1.1428em;
}
h6 {
    font-size: .75em;
    margin: 0 0 1.333em;
}
/* bottom margin = 1 / font-size */


/*____________ basic margins and paddings ____________*/

p,
ul,
ol,
dl,
pre,
table,
hr,
blockquote,
figure,
details,
fieldset,
address {
    margin: 0 0 1.4em 0; /* bottom margin = line-height */
    padding: 0;
}

div,
video,
audio {
    margin: 0;
    padding: 0;
}


/*____________ lists ____________*/

ul,
ol {
    padding: 0 0 0 1.5em;
}
[dir=rtl] ul,
[dir=rtl] ol {
    padding: 0 1.5em 0 0;
}

li,
dd {
    padding: 0;
    margin: 0 0 0 1.5em;
}
[dir=rtl] li,
[dir=rtl] dd {
    margin: 0 1.5em 0 0;
}
dt {
    font-weight: bold;
    margin: 0;
    padding: 0;
}

li ul,
li ol,
li dl,
dl ul,
dl ol,
dl dl {
    margin-bottom: 0;
    padding: 0;
}
li li {
    font-size: 100%;
}

ul             { list-style: square outside; }
ol             { list-style: decimal outside; }
ol ol          { list-style-type: lower-alpha; }
ol ol ol       { list-style-type: upper-roman; }
ol ol ol ol    { list-style-type: upper-alpha; }
ol ol ol ol ol { list-style-type: lower-roman; }


/*____________ tables ____________*/

table {
    border-collapse: collapse;
    empty-cells: show;
    border-spacing: 0;
    border: 1px solid @ini_border;
}

caption {
    caption-side: top;
    text-align: left;
}
[dir=rtl] caption {
    text-align: right;
}

th,
td {
    padding: .3em .5em;
    margin: 0;
    vertical-align: top;
    border: 1px solid @ini_border;
}
th {
    font-weight: bold;
    background-color: @ini_background_alt;
    text-align: left;
}
[dir=rtl] th {
    text-align: right;
}


/*____________ links ____________*/

a {
    outline: none;
}
a:link,
a:visited {
    text-decoration: none;
    color: @ini_link;
}
a:link:hover,
a:visited:hover,
a:link:focus,
a:visited:focus,
a:link:active,
a:visited:active {
    text-decoration: underline;
}


/*____________ misc ____________*/

img {
    border-width: 0;
    vertical-align: middle;
    color: #666;
    background-color: transparent;
    font-style: italic;
    object-fit: cover;
}
video {
    height: auto;
}
img,
object,
embed,
iframe,
video,
audio {
    max-width: 100%;
}
button img {
    max-width: none;
}
table img {
    max-width: 50vw;
}

hr {
    border-top: solid @ini_border;
    border-bottom: solid @ini_background;
    border-width: 1px 0;
    height: 0;
    text-align: center;
    clear: both;
}

acronym,
abbr {
    cursor: help;
    border-bottom: 1px dotted;
    text-decoration: none;
    font-style: normal;
}
em acronym,
em abbr {
    font-style: italic;
}

mark {
    background-color: @ini_highlight;
    color: inherit;
}

pre,
code,
samp,
kbd {
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
    /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
    font-size: 1em;
    direction: ltr;
    text-align: left;
    background-color: @ini_background_site;
    color: @ini_text;
    box-shadow: inset 0 0 .3em @ini_border;
    border-radius: 2px;
}
pre {
    overflow: auto;
    word-wrap: normal;
    border: 1px solid @ini_border;
    border-radius: 2px;
    box-shadow: inset 0 0 .5em @ini_border;
    padding: .7em 1em;
}

blockquote {
    padding: 0 .5em;
    border: solid @ini_border;
    border-width: 0 0 0 .25em;
}
[dir=rtl] blockquote {
    border-width: 0 .25em 0 0;
}
q:before,
q:after {
    content: '';
}

sub,
sup {
    font-size: .8em;
    line-height: 1;
}
sub {
    vertical-align: sub;
}
sup {
    vertical-align: super;
}

small {
    font-size: .8em;
}

wbr {
    display: inline-block; /* for IE 11 */
}

/*____________ forms ____________*/

/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */

form {
    display: inline;
    margin: 0;
    padding: 0;
}
fieldset {
    padding: .7em 1em 0;
    padding: .7rem 1rem; /* for those browsers understanding :last-child */
    border: 1px solid @ini_text_alt;
}
fieldset > :last-child {
    margin-bottom: 0;
}
legend {
    margin: 0;
    padding: 0 .1em;
}
label {
    vertical-align: middle;
    cursor: pointer;
}

input,
textarea,
button,
select,
optgroup,
option,
keygen,
output,
meter,
progress {
    font: inherit;
    font-weight: normal;
    color: #333;
    background-color: #fff;
    line-height: normal;
    margin: 0;
    vertical-align: middle;
    box-sizing: border-box;
}

select {
    max-width: 100%;
}
optgroup {
    font-style: italic;
    font-weight: bold;
}
option {
    font-style: normal;
    font-weight: normal;
}
option:checked {
    background-color: #ccc;
}

input,
textarea,
select,
keygen {
    border: 1px solid #ccc;
    box-shadow: inset 0 0 1px #eee;
    border-radius: 2px;
}
input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus,
keygen:active,
keygen:focus {
    border-color: #999;
}
input[type=radio],
input[type=checkbox],
input[type=image] {
    padding: 0;
    border-style: none;
    box-shadow: none;
}

/* all types of buttons */
input[type=submit],
input[type=button],
input[type=reset],
input.button,
a.button,
button,
.qq-upload-button {
    color: #333;
    background-color: #eee;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: .1em .5em;
    cursor: pointer;
}

input[type=submit]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=button]:hover,
input[type=button]:active,
input[type=button]:hover,
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:hover,
input.button:hover,
input.button:active,
input.button:focus,
a.button:hover,
a.button:active,
a.button:focus,
button:hover,
button:active,
button:focus,
.qq-upload-button:hover {
    border-color: #999;
    background-color: #ddd;
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
}

input::-moz-focus-inner,
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input[disabled],
button[disabled],
select[disabled],
textarea[disabled],
option[disabled],
input[readonly],
button[readonly],
select[readonly],
textarea[readonly] {
    cursor: auto;
    opacity: .5;
    background-color: #eee;
}