/* vim:ts=4:sw=4:et:ai:sts=4:cinoptions=(0

    lessish stylesheet for ikiwiki
    responsive styles based on the Less CSS Framework
    version 0.1 - 29 June 2012
    https://github.com/spiffin/ikiwiki_lessish

    Less Framework 4
    http://lessframework.com
    by Joni Korpi
    License: http://opensource.org/licenses/mit-license.php

    Type presets from http://goldengridsystem.com/
    by Joni Korpi   <http://jonikorpi.com/>
    licensed under MIT <http://opensource.org/licenses/mit-license.php>

*/

/* Selection colours (easy to forget) */

::selection         {background: rgb(255,255,158);}
::-moz-selection    {background: rgb(255,255,158);}
img::selection      {background: transparent;}
img::-moz-selection {background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}

/* Zoomable baseline grid type size presets */

body {
    /* 16px / 24px */
    font-size: 1em;
    line-height: 1.5em;
    font-family: Georgia, serif;
}
.small {
    /* 13px / 18px */
    font-size: 0.8125em;
    line-height: 1.3846153846153846em;
}
.normal, h3 {
    /* 16px / 24px */
    font-size: 1em;
    line-height: 1.5em;
}
.large, h2, h1 {
    /* 26 / 36px */
    font-size: 1.625em;
    line-height: 1.3846153846153846em;
}
.huge {
    /* 42px / 48px */
    font-size: 2.625em;
    line-height: 1.1428571428571428em;
}
.massive {
    /* 68px / 72px */
    font-size: 4.25em;
    line-height: 1.0588235294117647em;
}
.gigantic {
    /* 110px / 120px */
    font-size: 6.875em;
    line-height: 1.0909090909090908em;
}

/*
    Default Layout: 992px.
    Gutters: 24px.
    Outer margins: 48px.
    Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

body {
    width: 896px;
    padding: 72px 48px 84px;
    margin: 0 auto;
    color: rgb(60,60,60);
    /* Stops Mobile Safari from auto-adjusting font-sizes */
    -webkit-text-size-adjust: 100%;
}
.sidebar + #pagebody { /* 7 columns, leave 3 for sidebar */
    margin-right: 276px;
}
.sidebar {
    width: 228px;
    padding: 4px 12px;
    margin: 0px;
    float: right;
    text-align: center;
    border: 1px solid #aaa;
}
.sidebar div { margin: auto; }
.sidebar .calendar table { margin: auto; }
/*
    Tablet Layout: 768px.
    Gutters: 24px.
    Outer margins: 28px.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (max-width: 991px) {
    body {
        width: 712px;
        padding: 48px 28px 60px;
    }
    /* Disable sidebar on small screens. */
    .sidebar + #pagebody {
        margin: 0px;
    }
    .sidebar {
        display: none;
    }
}

/*
    Bigger Phone Layout: 664px.
    Gutters: 24px.
    Outer margins: 22px.
----------------------------------------------------------
cols    1     2      3      4      5      6      7
px      68    160    252    344    436    528    620    */

@media only screen and (max-width: 767px) {
    body {
        width: 620px;
        padding: 36px 22px 48px;
        font-size: 1em;
    }
}

/*
    Bigger Phone Layout: 552px.
    Gutters: 24px.
    Outer margins: 12px.
---------------------------------------------------
cols    1     2      3      4      5      6
px      68    160    252    344    436    528    */

@media only screen and (max-width: 663px) {
    body {
        width: 528px;
        padding: 24px 12px 36px;
        font-size: 1em;
    }
}
/*
    Wide Mobile Layout: 460px.
    Gutters: 24px.
    Outer margins: 12px.
--------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (max-width: 551px) {
    body {
        width: 436px;
        padding: 24px 12px 36px;
        font-size: 1em;
    }
}
/*
    Mobile Layout: 368px.
    Gutters: 24px.
    Outer margins: 12px.
-------------------------------------
cols    1     2      3      4
px      68    160    252    344    */

@media only screen and (max-width: 459px) {
    body {
        width: 344px;
        padding: 24px 12px 36px;
        font-size: 1em;
    }
}
/* Mobile Layout: dynamic. */

@media only screen and (max-width: 367px) {
    body {
        width: auto;
        padding: 24px 12px 36px;
    }
}

/* End Less */

.header {
    font-weight: normal;
    font-size: 200%;
}

h1, h2 { font-weight: normal; margin: 10px 0; }
h3, h4 { font-weight: bold; margin: 10px 0; }

p { margin: 16px 0 }
h1 + p, h2 + p, h3 + p, h4 + p { margin-top: -4px; }
p + p { margin-top: 8px; }

a:link { text-decoration: underline; color: #59c903; }
a:visited { text-decoration: underline; color: #5d9a20; }
a:hover { background: #efefef; text-decoration: none; color: #333; }
a:active { background: #efefef; text-decoration: underline; color: #00ff00; }

hr {
    border: 0; height: 1px; color: #333; margin: 10px 0;
    background-color: #666;
}

.actions ul {
    margin: 0 0 10px;
    padding: 16px .8em 10px 0px;
    height: auto;
}
.actions li {
    padding: 0 .5em 0 0;
}

.pagedate,
.pagelicense,
.pagecopyright {
    font-size: small;
    color: #ccc;
}

blockquote {
    font-style: italic;
}

code {
    font: 14px Monaco, Courier, monospace;
    line-height: 24px;
}

textarea {
    font: 12.5px Monaco, monospace;
    background: #232323;
    color: #a7ed61;
}

.pageheader #otherlanguages,
.pageheader .actions ul {
    border-bottom: 1px solid #666;
}

#pageinfo {
    margin: 1em 0;
    border-top: 1px solid #666;
}

.notebox {
    color: #333 !important;
}

input#searchbox {
    background: none;
}

/* Local mods. */
p .align-right {
    margin: .5em 0 .5em 1em;
    clear: both;
}
p .align-left {
    margin: .5em 1em .5em 0;
    clear: both;
}
.mypagecloud {
    text-align: center;
    padding: 10px 10px;
    border: 1px solid #aaa;
    background: #eee;
    color: black !important;
}
.footnote {
    font-size: .83em;
    vertical-align: super; 
}
#content img {
    max-width: 100%;
    width: auto;
    height: auto;
}
img.fullwidth {
    width: 100%;
}
/* Make sure long words are broken if needed. */
.inlinepage {
    word-wrap: break-word;
}

/* Images with caption. */
table.img {
    display: inline;
}