layerinfo type = "layout";
layerinfo name = "Stepping Stones";
layerinfo redist_uniq = "steppingstones/layout";
layerinfo author_name = "branchandroot";
layerinfo lang = "en";

set layout_authors = [ { "name" => "branchandroot", "type" => "user" } ];

##===============================
## Presentation
##===============================

set layout_type = "three-columns-left";

##===============================
## Colors
##===============================

propgroup colors_child {
    property Color color_entry_userpic_border { des = "Entry and comment userpic border color"; }
    property use color_page_details_text;
    }

set color_page_details_text = "#999";

##===============================
## Stylesheet
##===============================

function print_stylesheet() {
var string medium_media_query = generate_medium_media_query();

var string header_colors = generate_color_css( $*color_page_title, $*color_header_background, new Color );
var string entry_colors = generate_color_css( $*color_entry_text, $*color_entry_background, $*color_entry_border );
var string entry_userpic_colors = generate_color_css( new Color, $*color_entry_userpic_border, new Color );
var string tertiary_colors = generate_color_css( $*color_module_text, $*color_module_background, $*color_module_border );

var string{}{} scaling = {
    "" => {
        "padding"        => "100px",
        "noicon_img"     => "$*IMGDIR/profile_icons/user.png",
        "icon_wrap_size" => "110px",
        "icon_link_size" => "102px"
    },
    "small" => {
        "padding"        => "75px",
        "noicon_img"     => "$*IMGDIR/profile_icons/user-small.png",
        "icon_wrap_size" => "85px",
        "icon_link_size" => "77px"
    },
    "smaller" => {
        "padding"        => "50px",
        "noicon_img"     => "$*IMGDIR/profile_icons/user-smaller.png",
        "icon_wrap_size" => "60px",
        "icon_link_size" => "52px"
    }
};

var string entry_header_padding = $scaling{$*entry_userpic_style}{"padding"};
var string entry_icon_background = generate_background_css( $scaling{$*entry_userpic_style}{"noicon_img"}, "no-repeat", "center", $*color_entry_userpic_border );
var string entry_icon_wrap_size = $scaling{$*entry_userpic_style}{"icon_wrap_size"};
var string entry_icon_link_size = $scaling{$*entry_userpic_style}{"icon_link_size"};

var string comment_icon_background = generate_background_css( $scaling{$*comment_userpic_style}{"noicon_img"}, "no-repeat", "center", $*color_entry_userpic_border );
var string comment_icon_wrap_size = $scaling{$*comment_userpic_style}{"icon_wrap_size"};
var string comment_icon_link_size = $scaling{$*comment_userpic_style}{"icon_link_size"};

var string userpic_css = "";

if ($*userpics_position != "none") {
    $userpic_css = """
    .entry .contents .userpic {
        $entry_icon_background
        width: $entry_icon_wrap_size;
        height: $entry_icon_wrap_size;
        }

    .entry .contents .userpic a {
        width: $entry_icon_link_size;
        height: $entry_icon_link_size;
        }

    .comment .contents .userpic {
        $comment_icon_background
        width: $comment_icon_wrap_size;
        height: $comment_icon_wrap_size;
        }

    .comment .contents .userpic a {
        width: $comment_icon_link_size;
        height: $comment_icon_link_size;
        }
    """;

    if ($*userpics_position == "left") {
        $userpic_css =
        $userpic_css + """
        .entry .contents .userpic { left: -1.5em; }

        .comment .contents .userpic {
            float: left;
            margin: 0 .5em .5em -1.5em;
            }

        .entry .header,
        .entry .poster {
            padding-left: $entry_header_padding;
            }

        .entry .poster { margin-left: -.5em; }

        """;
    }

    elseif ($*userpics_position == "right") {
        $userpic_css =
        $userpic_css + """
        .entry .contents .userpic { right: -1.5em; }

        .comment .contents .userpic {
            float: right;
            margin: 0 -1.5em .5em .5em;
            }

        .entry .header { padding-right: $entry_header_padding; }

        """;
    }
}

"""

/* Stepping Stones
/* by branchandroot
******************************/

/* General
******************************/

body {
    border: none;
    margin: 0;
    }

h1, h2, h3, h4, h5 {
    font-weight: normal;
    font-style: italic;
    }

a:hover { text-decoration: none; }

blockquote {
    border-left: 3px solid $*color_entry_border;
    padding-left: .5em;
    }

dl dt { font-weight: bold; }


/* Header
******************************/

#header { background-color: transparent; }

#header > .inner:first-child {
    $header_colors
    margin: 1em 1em 1em 2em;
    padding: .5em 1em;
    }

#title a {
    color: $*color_page_title;
    text-decoration: none;
    }

#pagetitle {
    font-size: large;
    text-align: right;
    }

@media $medium_media_query {
    .column-right #header > .inner:first-child {
        margin-left: 1em;
        margin-right: 2em;
        }

    .three-columns-sides #header > .inner:first-child {
        margin: 1em 2em;
        }

    #pagetitle {
        margin-left: $*sidebar_width;
    }

    .two-columns-right #pagetitle {
        margin-left: 0;
        margin-right: $*sidebar_width;
        text-align: left;
        }

    .three-columns-right #pagetitle {
        margin-left: 0;
        margin-right: $*sidebar_width_doubled;
        text-align: left;
        }

    .three-columns-sides #pagetitle {
        margin-left: $*sidebar_width;
        margin-right: $*sidebar_width;
        text-align: center;
        }

    .three-columns-left #pagetitle {
        margin-left: $*sidebar_width_doubled;
        }
}

/* Main Column
******************************/

#primary > .inner:first-child { padding: 0 2em; }

.navigation { text-align: right; }

.navigation ul {
    $entry_colors
    display: inline;
    margin: 0;
    padding: .25em;
    }

.navigation ul li a { color: $*color_entry_link; }
.navigation ul li a:visited { color: $*color_entry_link_visited; }
.navigation ul li a:hover { color: $*color_entry_link_hover; }
.navigation ul li a:active { color: $*color_entry_link_active; }

/* Entries
******************************/

.one-column-split #entries { padding-top: 2em; }

.entry-wrapper {
    margin-bottom: 4em;
    margin-left: .5em;
    margin-top: 2em;
    }

.entry li { margin-left: 1em; }

.entry-content hr {
    display: block;
    margin: 1em 10%;
    }

.entry {
    padding: .5em;
    position: relative;
    }

/* Set height to keep alignment */
/* Use H3 default font size or custom size if set */
.no-subject .entry .entry-title {
    height: 1.17em;
    height: $*font_entry_title_size$*font_entry_title_units;
    }

.entry .contents { padding: .5em .5em 0; }

.entry .contents .userpic {
    position: absolute;
    text-align: center;
    top: -3em;
    }

.entry .contents .userpic a {
    $entry_userpic_colors
    display: block;
    margin: auto;
    }

.entry .contents .userpic img {
    $entry_userpic_colors
    margin-top: 5px;
    }

.entry-content { margin: 1.5em 0; }

.metadata { margin: 1em 0 0; }

.metadata.top-metadata { margin-bottom: 2em; }

.metadata-label { font-weight: bold; }

.metadata ul li {
    margin-left: 0;
    padding-left: 0;
    }

.entry .footer { margin: .5em 0; }

.entry .footer > .inner:first-child { padding: 1px; } /*float uneveness fix */

.entry .tag { margin-left: .25em; }

.entry .tag-text { font-weight: bold; }

.entry .tag li {
    margin-left: 0;
    padding: .25em 0;
    }

ul.entry-management-links {
    float: left;
    margin-left: -1em;
    margin-top: 1em;
    }

ul.entry-interaction-links {
    margin-bottom: .25em;
    margin-top: 1em;
    min-height: 17px; /* prevent entry-management icons from shoving quickreply aside */
    text-align: right;
    } 

/* Comments
******************************/

.comment {
    $entry_colors
    margin-bottom: 1em;
    margin-left: 1em;
    padding: .5em;
    }

.comment a { color: $*color_entry_link; }
.comment a:visited { color: $*color_entry_link_visited; }
.comment a:hover { color: $*color_entry_link_hover; }
.comment a:active { color: $*color_entry_link_active; }

.comment .header .datetime { color: $*color_entry_title; }

.comment-title {
    font-weight: bold;
    padding: 0 0 .25em;
    }

/* Restore comment title color */
.comment-title,
.comment-title a {
    color: $*color_comment_title;
    }

.partial .comment-title {
   display: inline;
   margin-right: .2em;
   }

.partial .comment-poster:before { content: "- "; }

.comment .contents { margin-top: .5em ; }

.comment .poster-ip {
    font-size: small;
    color: $*color_page_details_text;
    }

.comment .contents .userpic { text-align: center; }

.comment .contents .userpic a {
    display: block;
    $entry_userpic_colors
    }

.comment .contents .userpic img {
    margin: 5px;
    $entry_userpic_colors
    }

.comment-content,
.comment .edittime {
    margin-top: 1em;
    }

.comment .multiform-checkbox {
    display: block;
    font-size: small;
    text-align: right;
    }

.comment .footer { margin: .5em 0; }

.comment .footer > .inner:first-child { padding: 1px; } /*float uneveness fix */

.comment-management-links { float: right; }

.comment-interaction-links { text-align: left; }

.bottomcomment,
.comments-message {
    $entry_colors
    padding: 1px 1px 3px;
    }

/* User color if there is one */
.bottomcomment .entry-interaction-links a { color: $*color_entry_interaction_links; }

/* Otherwise fall back on entry colors */
.bottomcomment a { color: $*color_entry_link; }
.bottomcomment a:visited { color: $*color_entry_link_visited; }
.bottomcomment a:hover { color: $*color_entry_link_hover; }
.bottomcomment a:active { color: $*color_entry_link_active; }

.bottomcomment .entry-management-links,
.bottomcomment .entry-interaction-links {
    margin: .25em 0 .5em;
    }

.comment-pages { text-align: center; }

#qrdiv { margin: 1em; }

#qrdiv table { width: 100%; }

$userpic_css

/* Archive Pages
******************************/

#archive-year .navigation { text-align: left; }

div.month {
    $entry_colors
    margin: 2em 0 2em -1em;
    padding: 1em;
    }

.month a { color: $*color_entry_link; }
.month a:visited { color: $*color_entry_link_visited; }
.month a:hover { color: $*color_entry_link_hover; }
.month a:active { color: $*color_entry_link_active; }

table.month td,
table.month th {
    border-color: $*color_page_details_text;
    vertical-align: top;
    }

.month caption { display: none; }

#archive-year .month .footer {
    padding: .5em;
    text-align: center;
    }

#archive-month .navigation { text-align: center; }

#archive-month .navigation ul { display: block; }

.month dl .tag-text { font-style: italic; }

.month dl h3.entry-title { font-weight: bold; }

.day .inner > h3:first-child { text-align: center; }

/* Tags Page
******************************/

.page-tags .tags-container {
    $entry_colors
    margin-left: -1em;
    padding: 1em;
    }

.tags-container a { color: $*color_entry_link; }
.tags-container a:visited { color: $*color_entry_link_visited; }
.tags-container a:hover { color: $*color_entry_link_hover; }
.tags-container a:active { color: $*color_entry_link_active; }

/* Icons Page
******************************/

.icons-container {
    $entry_colors
    margin-left: -1em;
    padding: 1em;
    }

.icons-container a { color: $*color_entry_link; }
.icons-container a:visited { color: $*color_entry_link_visited; }
.icons-container a:hover { color: $*color_entry_link_hover; }
.icons-container a:active { color: $*color_entry_link_active; }

.sorting-options ul { padding-left: 0; }

.icons-container .icon { margin: 1em 0; }

.icon-image {
    float: left;
    clear: left;
    margin-bottom: .25em;
    min-width: 100px;
    padding-right: 1em;
    }

.icon-info { min-height: 100px; }

.icon-info span { font-weight: bold; }

.icon-info .default { text-decoration: underline; }

.icon-keywords ul li { padding: .25em 0; }

/* Sidebars
******************************/

#secondary,
#tertiary {
    margin-top: 0;
    }

#secondary > .inner:first-child,
#tertiary > .inner:first-child {
    $tertiary_colors
    margin: 1em;
    padding: 0;
    }

@media $medium_media_query {
    .multiple-columns #secondary,
    .multiple-columns #tertiary {
        margin-top: -5em;
        }

    .two-columns #tertiary > .inner:first-child {
        background-color: transparent;
        }

    .two-columns #tertiary .module {
        margin-right: 1em;
        }
}

.module {
    border: none;
    margin-bottom: 1em;
    padding: .6em;
    }

.module-header {
    font-size: large;
    padding: 1px 3px;
    }

.module-header a,
.module-header a:visited {
    color: $*color_module_title;
    }

.module-userprofile { text-align: center; }

.module-userprofile .module-header { text-align: left; }

.module-navlinks ul,
.module-typelist ul {
    list-style: none;
    }

.module-calendar table { font-size: small; }

/* Footer
******************************/

#footer { background-color: transparent; }

#footer > .inner:first-child {
    background-color: $*color_footer_background;
    margin: 1em 2em;
    padding: .5em;
    }

""";
}