@charset "UTF-8";
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400';

:root {
    --page-width: 1240px;
    --logo-width: 120px;
    --logo-height: 120px;

    /* --- Parasol Theme */
    --cl-code-parasol-background:   #F8F8F2;
    --cl-code-parasol-foreground:   #004260;
    --cl-code-parasol-builtin:      #80A5E9;
    --cl-code-parasol-doc:          #9F9F9F;
    --cl-code-parasol-functions:    #7540CA;
    --cl-code-parasol-keyword:      #F73D8A;
    --cl-code-parasol-string:       #00B664;
    --cl-code-parasol-type:         #F73D8A;
    --cl-code-parasol-variables:    #008ED4;

    /* --- Theme Variables */
    --cl-code-background:           var(--cl-code-parasol-background);
    --cl-code-foreground:           var(--cl-code-parasol-foreground);
    --cl-code-builtin:              var(--cl-code-parasol-builtin);
    --cl-code-doc:                  var(--cl-code-parasol-doc);
    --cl-code-function-name:        var(--cl-code-parasol-functions);
    --cl-code-keyword:              var(--cl-code-parasol-keyword);
    --cl-code-string:               var(--cl-code-parasol-string);
    --cl-code-type:                 var(--cl-code-parasol-type);
    --cl-code-variable-name:        var(--cl-code-parasol-variables);

    /* Other properties */
    --cl-link-page:                 var(--cl-code-parasol-functions);
    --cl-link-footer:               #F8F8F2;
}

body {
    /* Reset */
    margin: 0;
    padding: 0;

    /* Color and background */
    color: #FFFFFF;
    background-color: #935D8C;
    background-image: linear-gradient(to bottom right, #5F4D93, #E37682);
    min-height: 100vh;
}

/* Font settings */
body, input, select, textarea {
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-size: 17pt;
    font-weight: 300;
    line-height: 1.65;
}

/* TOC; it already generates numbers, so we need to hide the HTML bullets */
#text-table-of-contents * { list-style: none; }

/* -- Inline Code -- */
code                  { background: var(--cl-preformatted); font-size: 17px; }

/* -- Code Blocks -- */
.org-builtin          { color: var(--cl-code-builtin); }
.org-doc              { color: var(--cl-code-doc); }
.org-comment          { color: var(--cl-code-doc); }
.org-comment-delimiter{ color: var(--cl-code-doc); }
.org-function-name    { color: var(--cl-code-function-name); }
.org-keyword          { color: var(--cl-code-keyword); }
.org-string           { color: var(--cl-code-string); }
.org-type             { color: var(--cl-code-type); }
.org-variable-name    { color: var(--cl-code-variable-name); }
.org-src-container    { color: var(--cl-code-foreground);
                        background: var(--cl-code-background);
                        border: 1px solid var(--cl-border-src);
                        padding: 0px 15px;
                        max-width: 100%;
                        overflow-y: scroll;
                        border-radius: 5px;
                        font-size: 17px; }

/* Menu */
.menu                 { flex-grow: 1; font-size: 1.3rem; display: flex; justify-content: flex-end; align-items: flex-end; }
.menu ul              { margin: 0; padding: 0; list-style: none; display: flex; }
.menu li              { margin-right: 20px; }
.menu li.active       { color: gold; font-weight: bold; }
.menu a               { text-decoration: none; padding: 20px 0; display: block; color: var(--cl-link-nav); }
.menu a:hover         { text-decoration: underline; }

/* Navigation */
header                { display: flex; width: var(--page-width); margin: 20px auto 10px; }
header h1             { font-size: 1.5rem; font-weight: 500; text-align: center; }
header h1 a           { text-decoration: none; color: var(--cl-link-nav); font-family: var(--ft-logofm); }
header h1 a:hover     { color: var(--cl-blue2); text-shadow: var(--cl-gray2) 0.01px 0 0.2px; }
header h1 img         { width: var(--logo-width); height: var(--logo-height); }

/* Footer */
.footer               { width: var(--page-width); background-image: linear-gradient(#e37682);
                        margin: auto; padding: 30px 0 190px 0; }
.footer ul            { margin: 0; list-style: none; padding: 0; display: flex; }
.footer li            { margin-right: 20px; }
.footer li:last-child { margin-right: 0; }
.footer img           { vertical-align: middle; padding-bottom: 3px; transition: 0.5s; width: 16px; height: 16px; }
.footer img:hover     { transition: 0.5s; width: 19px; height: 19px; }
.footer a             { color: var(--cl-link-footer); text-decoration: none; }
.footer a:hover       { text-decoration: underline; }
.footer .ack          { max-width: var(--dm-page-width); margin: 0 auto; padding-top: 50px; }
.footer a.M-x         { width: 20px; display: inline-block; text-align: center; }
.footer a:hover.M-x   { text-decoration: none; }

/* General settings for the content area */
.page                 { display: flex; width: var(--page-width); margin: auto; }
.page > .content      { flex-grow: 1; margin-bottom: 50px; max-width: calc(var(--page-width) - 20%); }

.page > .content article      { background: #fff; color: #333; border-radius: 15px; padding: 50px; margin-bottom: 50px; }
.page > .content h1           { font-weight: 50; font-size: 2em; margin: 0; }
.page > .content h2           { font-weight: 500; }
.page > .content p            { margin-bottom: 1.5rem; }
.page > .content a            { color: var(--cl-link-page); text-decoration: none; }
.page > .content a:hover      { text-decoration: underline; }
.page > .content .section     { border-bottom: solid 1px var(--cl-border-nav); }
.page > .content .symbol      { margin-bottom: 50px; }
.document header h1   { min-width: 200px; padding: 0 20px; }


/* Index page */
.page.index           { display: block; }
.page.index > .content{ max-width: none; }
.index header         { display: block; margin-top: 50px; }
.index .banner        { display: flex; flex-direction: column; align-items: center; }
.index .banner h1     { display: flex; flex-direction: column; align-items: center; margin: auto;
                        font-size: 80px; font-weight: 300; letter-spacing: -0.025em; }
.index header h1 img  { width: 168px; height: 315px; margin: 0px; }
.index .banner .sub   { font-size: 30px; font-weight: 100; margin: 0; padding: 0 0 50px 0; color: gold; }
.index article        { margin: 0 auto; padding: 0; }
.index .action        { text-align: center; }
.index .action a      { display: block; width: 150px;
                        background: #af0069; color: #fff;
                        font-size: 28px;
                        padding: 20px 30px; margin: -40px auto;
                        font-weight: 800; border: solid 20px #fff; border-radius: 90px;
                        margin-bottom: -60px;
                        position: relative; z-index: 10;
                        letter-spacing: -2px; }

.index .action a:hover { background: #c70039; text-decoration: none; }

.index .news          { width: calc(100% - 2em); background: #fff; padding: 20px; border-radius: 15px; }
.index .news h2       { color: #333; }
.index .news ul       { list-style: none; padding: 0; }

/* Features */
.no-heading h2        { display: none; }
.features             { margin: auto; padding: 80px 0; border-radius: 15px;
                        display: flex; flex-wrap: wrap; justify-content: center;
                        color: #333; background: #fff; }
.feature              { width: calc(40% - 4em); margin: 0;
                        padding: 20px 60px 20px 90px; }
.feature h3           { height: 60px; background-size: 60px 60px; background-repeat: no-repeat;
                        padding-left: 70px;  display: table-cell; vertical-align: middle; }
.feature.emacs-lisp h3 { background-image: url("../images/emacs-bw-icon.svg"); }
.feature.static     h3 { background-image: url("../images/html-bw-icon.svg"); }
.feature.templating h3 { background-image: url("../images/template-bw-icon.svg"); }
.feature.blog       h3 { background-image: url("../images/rss-bw-icon.svg"); }

/* -- Left menu with index of all sections & symbols  */
.left-pane            { min-width: 200px; width: 20%; padding: 20px; font-size: 18px; font-weight: 300; letter-spacing: .5px; }
.left-pane a          { text-decoration: none; color: #fff; }
.left-pane a:hover    { color: gold; }
.left-pane ul         { list-style: square; }
.left-pane ul li      { margin-bottom: 8px; }

/* -- special classes -- */
.img_highlight        { text-align: center; }
.img_highlight img    { margin: 40px 0px; box-shadow: 0 0 3px 3px #dedede; }

@media only screen
  and (min-width: 1px)
  and (max-width: 1240px) {

    :root { --page-width: calc(100% - 20px); }

    /* Menu */
    .menu             { font-size: 1.3rem; justify-content: center; }
    .menu ul          { justify-content: center; }
    .menu li:first-child { display: none; }
    .menu li:last-child { margin: 0; padding: 0; }

    /* Navigation */
    header                   { flex-direction: column; }
    header h1                { width: 155px; margin: auto; text-align: center; }

    /* Page */
    .left-pane             { width: auto; padding: 20px; }
    .page                  { flex-direction: column-reverse; }
    .page > .content       { max-width: 100%; }
    .page > .content article       { margin: 0 auto; padding: 10px; }
    .page > .content .section      { margin-bottom: 50px; }
    .page > .content .docstring    { padding-left: 0; }

    /* Footer */
    .footer                { padding: 20px 20px 50px 20px; width: calc(100% - 40px); }
    .footer ul             { flex-direction: column; }
    .footer .ack           { text-align: center; }

    /* Index */
    .index .banner         { text-align: center; }
    .index .banner h1 img  { height: 245px; }
    .index .news           { margin-top: 80px; }
    .feature               { width: 100%; padding: 10px; background-position: 20px 20px; }
    .feature h3            { padding-left: 70px; }
}