layerinfo "type" = "layout";
layerinfo "name" = "Skittlish Dreams";
layerinfo "des" = "A Dreamwidth port of Skittlish. Candy-coloured theme which comes in several flavors";
layerinfo "redist_uniq" = "skittlishdreams/layout";
layerinfo "author_name" = "Kaigou";
layerinfo "lang" = "en";

set layout_authors = [ { "name" => "Kaigou" } ];
set layout_resources = [ { "name" => "Circular Icons", "url" => "http://prothemedesign.com/circular-icons/" } ];

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

propgroup presentation {
    property use layout_type;
    property use num_items_recent;
    property use num_items_reading;
    property use margins_size;
    property use margins_unit;
    property use sidebar_width;
    property use medium_breakpoint_width;
    property use large_breakpoint_width;
    property use use_custom_friend_colors;
    property use use_shared_pic;
    property use use_journalstyle_entry_page;
    property use custom_control_strip_colors;

    property use reverse_sortorder_group;
    property use reg_firstdayofweek;
    property use tags_page_type;
    property use num_items_icons;
    property use icons_page_sort;

    property use all_entrysubjects;
    property use all_commentsubjects;
    property use entry_datetime_format_group;
    property use comment_datetime_format_group;
    property use userpics_style_group;
    property string entryicons_position {
       des = "Place icons on the same side or opposite the sidebar";
       values = "none|None (don't show)|same|Same side as sidebar|opposite|Opposite the sidebar";
    }
    property use entry_metadata_position;
    property use userlite_interaction_links;
    property use entry_management_links;
    property use comment_management_links;

    property bool use_action_links_images {
        des = "Theme has images for the entry/comment links";
        noui = 1;
    }
}

set layout_type = "two-columns-right";
set sidebar_width = "300px";
set tags_page_type = "";
set all_commentsubjects = true;
set entryicons_position = "same";
set entry_management_links = "text";
set comment_management_links = "text";
set use_action_links_images = true;
set custom_colors_template = "%%new%% .userpic a {background-color: %%background%%; border: solid 1px %%foreground%%;}";

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

propgroup colors {
    property use color_page_background;
    property use color_page_text;
    property use color_page_link;
    property use color_page_link_hover;
    property use color_page_link_visited;
    property Color color_page_border { des = "Main border color for the page, and various elements"; }
    property use color_page_details_text;

    property use color_module_background;
    property use color_module_text;
    property use color_module_link;
    property use color_module_title;

    property use color_header_background;
    property use color_header_link;
    property use color_header_link_active;
    property Color color_header_link_hover_background { des = "Page header hover background color"; }
    property use color_header_link_hover;
    property use color_header_link_visited;
    property use color_page_title;

    property use color_footer_background;
    property Color color_footer_text { des = "Page footer text color"; }
    property use color_footer_link;
    property use color_footer_link_active;
    property Color color_footer_link_hover_background { des = "Page footer hover background color"; }
    property use color_footer_link_hover;
    property use color_footer_link_visited;

    property use color_entry_background;
    property use color_entry_text;
    property use color_entry_title;
    property use color_entry_title_background;
    property Color color_entry_title_border { des = "Entry title border color"; }
    property Color color_entry_title_border_alt { des = "Alternate entry title border color"; }
    property Color color_entry_metadata_text { des = "Entry metadata color"; }

    property use control_strip_bgcolor;
    property use control_strip_fgcolor;
    property use control_strip_bordercolor;
    property use control_strip_linkcolor;
}

##===============================
## Fonts
##===============================

propgroup fonts {
    property use font_base;
    property use font_fallback;
    property use font_base_size;
    property use font_base_units;
    property use font_module_heading_size;
    property use font_module_heading;
    property use font_module_heading_units;
    property use font_module_text;
    property use font_module_text_size;
    property use font_module_text_units;
    property use font_journal_title;
    property use font_journal_title_size;
    property use font_journal_title_units;
    property use font_journal_subtitle;
    property use font_journal_subtitle_size;
    property use font_journal_subtitle_units;
    property use font_entry_title;
    property use font_entry_title_size;
    property use font_entry_title_units;
    property use font_comment_title;
    property use font_comment_title_size;
    property use font_comment_title_units;
    property use font_sources;
}

set font_base = "Tahoma, Verdana, Arial";
set font_fallback = "sans-serif";
set font_base_size = "1";
set font_base_units = "em";
set font_module_heading_size = "1.1";
set font_module_heading_units = "em";
set font_journal_title_size = "2";
set font_journal_title_units = "em";

##===============================
## Images
##===============================

propgroup images {
    property use image_background_page_group;
    property string[] image_background_container_group {
        des = "Main body background image";
        grouptype = "image";
    }
    set image_background_container_group = [ "image_background_container_url", "image_background_container_repeat", "image_background_container_position" ];
    property string image_background_container_url {
        grouped = 1;
    }
    property string image_background_container_repeat {
        values = "repeat|tile image|no-repeat|don't tile|repeat-x|tile horizontally|repeat-y|tile vertically";
        grouped = 1;
    }
    property string image_background_container_position {
        values = "top left|top left|top center|top center|top right|top right|center left|center left|center center|center|center right|center right|bottom left|bottom left|bottom center|bottom center|bottom right|bottom right";
        grouped = 1;
        allow_other = 1;
    }
    property use image_background_module_group;
    property string[] image_background_navigation_group {
        des = "Navigation background image";
        grouptype = "image";
    }
    set image_background_navigation_group = [ "image_background_navigation_url", "image_background_navigation_repeat", "image_background_navigation_position" ];
    property string image_background_navigation_url {
        grouped = 1;
    }
    property string image_background_navigation_repeat {
        values = "repeat|tile image|no-repeat|don't tile|repeat-x|tile horizontally|repeat-y|tile vertically";
        grouped = 1;
    }
    property string image_background_navigation_position {
        values = "top left|top left|top center|top center|top right|top right|center left|center left|center center|center|center right|center right|bottom left|bottom left|bottom center|bottom center|bottom right|bottom right";
        grouped = 1;
        allow_other = 1;
    }
    property use image_background_header_group;
    property use image_background_header_height;
    property string[] image_background_footer_group {
        des = "Footer background image";
        grouptype = "image";
    }
    set image_background_footer_group = [ "image_background_footer_url", "image_background_footer_repeat", "image_background_footer_position" ];
    property string image_background_footer_url {
        grouped = 1;
    }
    property string image_background_footer_repeat {
        values = "repeat|tile image|no-repeat|don't tile|repeat-x|tile horizontally|repeat-y|tile vertically";
        grouped = 1;
    }
    property string image_background_footer_position {
        values = "top left|top left|top center|top center|top right|top right|center left|center left|center center|center|center right|center right|bottom left|bottom left|bottom center|bottom center|bottom right|bottom right";
        grouped = 1;
        allow_other = 1;
    }
    property use image_background_entry_group;
}

set image_background_page_position = "top left";
set image_background_page_repeat = "repeat-x";
set image_background_container_position = "top right";
set image_background_container_repeat = "repeat-y";
set image_background_module_position = "top left";
set image_background_module_repeat = "no-repeat";
set image_background_navigation_position = "top right";
set image_background_navigation_repeat = "no-repeat";
set image_background_header_height = 100;
set image_background_header_position = "top left";
set image_background_header_repeat = "repeat-x";
set image_background_footer_position = "top left";
set image_background_footer_repeat = "repeat-x";
set image_background_entry_repeat = "repeat-y";
set image_background_entry_position = "top right";

##===============================
## Modules
##===============================

propgroup modules {
    property use module_userprofile_group;
    property use module_navlinks_group;
    property string module_navlinks_section_override {
       values = "none|(none)|one|Header|two|Sidebar";
       grouped = 1;
       }
    property use module_calendar_group;
    property use module_links_group;
    property use module_syndicate_group;
    property use module_tags_group;
    property use module_pagesummary_group;
    property use module_active_group;
    property use module_time_group;
    property string module_time_section_override {
       values = "none|(none)|two|Sidebar|three|Footer";
       grouped = 1;
       }
    property use module_poweredby_group;
    property string module_poweredby_section_override {
       values = "none|(none)|two|Sidebar|three|Footer";
       grouped = 1;
       }
    property use module_customtext_group;
    property use module_credit_group;
    property use module_search_group;
    property use module_cuttagcontrols_group;
    property use module_subscriptionfilters_group;
}

set module_layout_sections = "none|(none)|two|Sidebar";
set grouped_property_override = { "module_navlinks_section" => "module_navlinks_section_override",
                                "module_poweredby_section" => "module_poweredby_section_override",
                                "module_time_section" => "module_time_section_override",
                                };
set module_userprofile_section = "two";
set module_navlinks_section = "one";
set module_calendar_section = "two";
set module_links_section = "two";
set module_syndicate_section = "two";
set module_tags_section = "two";
set module_pagesummary_section = "two";
set module_active_section = "two";
set module_time_section = "none";
set module_poweredby_section = "three";
set module_customtext_section = "two";
set module_credit_section = "two";
set module_search_section = "two";
set module_cuttagcontrols_section = "two";

##===============================
## Text
##===============================

propgroup text {
    property use text_module_customtext;
    property use text_module_customtext_url;
    property use text_module_customtext_content;
    property use text_module_subscriptionfilters;

    property use text_view_recent;
    property use text_view_archive;
    property use text_view_friends;
    property use text_view_friends_comm;
    property use text_view_friends_filter;
    property use text_view_network;
    property use text_view_tags;
    property use text_view_memories;
    property use text_view_userinfo;

    property use text_entry_prev;
    property use text_entry_next;
    property use text_edit_entry;
    property use text_edit_tags;
    property use text_tell_friend;
    property use text_mem_add;
    property use text_watch_comments;
    property use text_unwatch_comments;
    property use text_permalink;

    property use text_read_comments;
    property use text_read_comments_friends;
    property use text_read_comments_screened_visible;
    property use text_read_comments_screened;
    property use text_post_comment;
    property use text_post_comment_friends;

    property use text_meta_location;
    property use text_meta_mood;
    property use text_meta_music;
    property use text_meta_xpost;
    property use text_tags;

    property use text_stickyentry_subject;

    property use text_max_comments;
    property use text_skiplinks_back;
    property use text_skiplinks_forward;
}

set text_entry_prev = "Previous";
set text_entry_next = "Next";
set text_tell_friend = "Share";
set text_mem_add = "Memory";
set text_watch_comments = "Track";
set text_unwatch_comments = "Untrack";
set text_post_comment = "Reply";
set text_post_comment_friends = "Reply";

##===============================
## Custom CSS
##===============================

propgroup customcss {
    property use external_stylesheet;
    property use include_default_stylesheet;
    property use linked_stylesheet;
    property use custom_css;
}

function prop_init() {
    if ( $*entryicons_position == "none" ) {
        $*userpics_position = "none";
    }
}

function Page::print()
{
"""
<!DOCTYPE html>
<html>
    <head>""";
        $this->print_meta_tags();
        $this->print_head();
        $this->print_stylesheets();
        $this->print_head_title();
    println "</head>";
    $this->print_wrapper_start();
    $this->print_control_strip();
    """
    <div id="container">
        <div id="header">
            <div class="inner">
                <div id="titles-wrap">
            """;
                    $this->print_global_title();
                    $this->print_global_subtitle();
            """
                </div>
            """;
                $this->print_module_section("one");
            """
            </div><!-- end header>inner -->
        </div><!-- end header -->
        <div id="wrap">
            <div id="content">
    """;
                $this->print_body();
    """
            </div>
    """;
            $this->print_module_section("two");
    """
            </div><div style="clear:both;"></div>
        </div>
        <div id="footer"><div class="inner">
    """;

    $this->print_module_section("three");
    print safe """<div class="page-top"><a href="#">$*text_page_top</a></div>""";
    """
        </div></div>
    """;
    $this->print_wrapper_end();
    """
    </html>
    """;
}

# so that the decorative background image will show up
function TagsPage::print_navigation( string{} opts )  {
    """
    <div class="navigation $opts{"class"}">
        <div class="inner">
        </div><!-- navigation>inner -->
    </div><!-- navigation -->
    """;
}

function TagsPage::print_body
{
    $this->print_navigation( { "class" => "topnav" } );

    """<div class='tags-container'>\n<div class="inner">\n""";
    """<div class="header">\n<div class="inner">\n""";
    print safe "<h2>$*text_tags_page_header</h2>";
    "</div>\n</div>\n";
    """<div class="contents">\n<div class="inner">\n""";

    if ($*tags_page_type == "multi") {
        print_multilevel_tags($.tags, { "list-class" => "ljtaglist tags_multilevel", "print_uses" => $*tags_page_count_type });
    }
    elseif ($*tags_page_type == "cloud") {
        print_cloud_tags($.tags, { "list-class" => "ljtaglist tags_cloud", "print_uses" => $*tags_page_count_type });
    }
    else {
        print_list_tags($.tags, { "list-class" => "ljtaglist tags_list", "print_uses" => $*tags_page_count_type });
    }

    "</div>\n</div>\n";
    """<div class="footer">\n<div class="inner">\n""";
    print_tag_manage_link();
    "</div>\n</div>\n";
    "</div>\n</div>\n";

    $this->print_navigation( { "class" => "bottomnav" } );
}

# so that the decorative background image will show up
function IconsPage::print_navigation( string{} opts ) {
    """
    <div class="navigation $opts{"class"}">
        <div class="inner">
        </div><!-- navigation>inner -->
    </div><!-- navigation -->
    """;
}

function IconsPage::print_body {
    $this->print_navigation( { "class" => "topnav" } );
    """<div class='icons-container'>\n<div class="inner">\n""";
    """<div class="header">\n<div class="inner">\n""";
    print safe "<h2>$*text_icons_page_header</h2>";
    "</div>\n</div>\n";
    """<div class="contents">\n<div class="inner">\n""";
    """<div class="sorting-options">\n<ul>\n""";
    var int sort_ct = 0;
    foreach var string k ($.sort_keyseq) {
        var string text = lang_icon_sortorder_title($k);
        if ( $k == $.sortorder ) {
            print safe """<li class='$k active'>$text""";
        } else {
            print safe """<li class='$k'><a href='$.sort_urls{$k}'>$text</a>""";
        }
        if ( (++$sort_ct) < size $.sort_keyseq) { print $*text_default_separator; }
        "</li>\n";
    }
    "</ul>\n</div>\n";
    $.pages->print({ "class" => "icon-pages toppages" });
    foreach var Icon i ($.icons) {
        $i->print();
    }
    $.pages->print({ "class" => "icon-pages bottompages" });
    "</div>\n</div>\n";
    """<div class="footer">\n<div class="inner">\n""";
    $this->print_icon_manage_link();
    "</div>\n</div>\n";
    "</div>\n</div>\n";
    $this->print_navigation( { "class" => "bottomnav" } );
}

function generate_background_css_flipped (
    string background_image,
    string background_image_repeat,
    string background_image_position,
    Color background_color
) : string
"Same as generate_background_css, but uses a flipped version of the image."
{
    var string background_css = generate_background_css( $background_image, $background_image_repeat,
        $background_image_position, $background_color );
    return $background_css->replace( ".gif", "-REDUX.gif" );
}

function Page::print_default_stylesheet () {
    var string medium_media_query = generate_medium_media_query();
    var string large_media_query = generate_large_media_query();

    var string[] path_components = $*image_background_entry_url->split("/");
    var string image_base = $path_components[size($path_components)-1];
    var string theme_base_color =  $image_base->substr(0, $image_base->index("_"));

    var string page_font = generate_font_css("", $*font_base, $*font_fallback, $*font_base_size, $*font_base_units );
    var string journal_title_font = generate_font_css($*font_journal_title, $*font_base, $*font_fallback, $*font_journal_title_size, $*font_journal_title_units);
    var string journal_subtitle_font = generate_font_css($*font_journal_subtitle, $*font_base, $*font_fallback, $*font_journal_subtitle_size, $*font_journal_subtitle_units);
    var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units);
    var string comment_title_font = generate_font_css($*font_comment_title, $*font_base, $*font_fallback, $*font_comment_title_size, $*font_comment_title_units);
    var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units);
    var string module_font = generate_font_css($*font_module_text, $*font_base, $*font_fallback, $*font_module_text_size, $*font_module_text_units);

    var string page_background = generate_background_css( $*image_background_page_url, $*image_background_page_repeat, $*image_background_page_position, $*color_page_background );

    var string header_background = generate_background_css( $*image_background_header_url, $*image_background_header_repeat, $*image_background_header_position, $*color_header_background );

    if ($*image_background_header_height > 0) {
        $header_background = """
            $header_background
            min-height: """ + $*image_background_header_height + """px;""";
    }


    var string container_background = generate_background_css( $*image_background_container_url, $*image_background_container_repeat, "right", $*color_footer_background );
    var string container_background_redux = generate_background_css_flipped( $*image_background_container_url, $*image_background_container_repeat, "left", $*color_footer_background );

    var string footer_background = generate_background_css( $*image_background_footer_url, $*image_background_footer_repeat, $*image_background_footer_position, $*color_footer_background );
    if ($*image_background_header_height > 0) {
        $footer_background = """
            $footer_background
            height: """ + $*image_background_header_height + """px;""";
    }

    var string page_link_colors = generate_color_css($*color_page_link, new Color, new Color);
    var string page_link_hover_colors = generate_color_css($*color_page_link_hover, new Color, new Color);
    var string page_link_visited_colors = generate_color_css($*color_page_link_visited, new Color, new Color);

    var string container_colors = generate_color_css( $*color_page_text, $*color_module_background, new Color );
    var string content_colors = generate_color_css( new Color, $*color_page_border, new Color );

    var string page_text_colors = generate_color_css($*color_page_text, new Color, new Color);
    var string page_details_text_colors = generate_color_css($*color_page_details_text, new Color, new Color );

    var string header_colors = generate_color_css( $*color_page_title, $*color_header_background, new Color );
    var string header_link_colors = generate_color_css( $*color_header_link, new Color, new Color );
    var string header_link_active_colors = generate_color_css( $*color_header_link_active, new Color, new Color );
    var string header_link_hover_colors = generate_color_css( $*color_header_link_hover, $*color_header_link_hover_background, new Color );
    var string header_link_visited_colors = generate_color_css( $*color_header_link_visited, new Color, new Color );
    var Color header_bottom_color = $*color_header_background->darker();

    var string footer_colors = generate_color_css( $*color_footer_text, $*color_footer_background, new Color );
    var string footer_link_colors = generate_color_css( $*color_footer_link, new Color, new Color );
    var string footer_link_active_colors = generate_color_css( $*color_footer_link_active, new Color, new Color );
    var string footer_link_hover_colors = generate_color_css( $*color_footer_link_hover, $*color_footer_link_hover_background, new Color );
    var string footer_link_visited_colors = generate_color_css( $*color_footer_link_visited, new Color, new Color );

    var string module_colors = generate_color_css( new Color, $*color_module_background, new Color );
    var string module_box_background = generate_background_css( $*image_background_module_url, $*image_background_module_repeat, $*image_background_module_position, new Color );
    var string module_box_colors = generate_color_css( $*color_module_text, new Color, new Color );
    var string module_link_colors = generate_color_css( $*color_module_link, new Color, new Color );
    var string module_title_colors = generate_color_css( $*color_module_title, new Color, new Color );


    var string entry_background = generate_background_css( $*image_background_entry_url, $*image_background_entry_repeat, "right", $*color_entry_background );
    var string entry_background_redux = generate_background_css_flipped( $*image_background_entry_url, $*image_background_entry_repeat, "left", $*color_entry_background );

    var string entry_colors = generate_color_css( $*color_entry_text, $*color_entry_background, new Color );
    var string entry_title_colors = generate_color_css($*color_entry_title, $*color_entry_title_background, new Color);
    var string blockquote_colors = generate_color_css(new Color,$*color_entry_background->darker(), new Color);
    var string entry_metadata_color = generate_color_css($*color_entry_metadata_text, new Color, new Color);

    var string navigation_background = generate_background_css($*image_background_navigation_url, $*image_background_navigation_repeat, "right top", $*color_entry_background);
    var string navigation_background_redux = generate_background_css_flipped($*image_background_navigation_url, $*image_background_navigation_repeat, "left top", $*color_entry_background);

    var string navigation_colors = generate_color_css($*color_page_details_text, $*color_entry_background, new Color);


    var string entry_userpic_shift = "";
    if ( $*entry_userpic_style == "" ) { $entry_userpic_shift = "-66px"; }
    elseif ( $*entry_userpic_style == "small" ) { $entry_userpic_shift = "-50px"; }
    elseif ( $*entry_userpic_style == "smaller" ) { $entry_userpic_shift = "-33px"; }

    var string comment_userpic_shift = "";
    if ( $*comment_userpic_style == "" ) { $comment_userpic_shift = "-66px"; }
    elseif ( $*comment_userpic_style == "small" ) { $comment_userpic_shift = "-50px"; }
    elseif ( $*comment_userpic_style == "smaller" ) { $comment_userpic_shift = "-33px"; }


    var string entry_title_margin = "";
    if ( $*entry_userpic_style == "" ) { $entry_title_margin = "120px"; }
    elseif ( $*entry_userpic_style == "small" ) { $entry_title_margin = "95px"; }
    elseif ( $*entry_userpic_style == "smaller" ) { $entry_title_margin = "70px"; }

    var string comment_title_margin = "";
    if ( $*comment_userpic_style == "" ) { $comment_title_margin = "120px"; }
    elseif ( $*comment_userpic_style == "small" ) { $comment_title_margin = "95px"; }
    elseif ( $*comment_userpic_style == "smaller" ) { $comment_title_margin = "70px"; }

    var string entryicon_css = "";
        if ($*entryicons_position == "same") {
            $entryicon_css = """
            .two-columns-right .has-userpic .entry .header,
            .two-columns-right .has-userpic .entry .poster {
                margin-right: $entry_title_margin;
                }
            .two-columns-right .has-userpic .comment .header { margin-right: $comment_title_margin; }

            .two-columns-left .has-userpic .entry .header { margin-left: $entry_title_margin; }
            .two-columns-left .has-userpic .comment .header,
            .two-columns-left .has-userpic .comment .poster {
                margin-left: $comment_title_margin;
                }

            .two-columns-right .entry .userpic a,
            .two-columns-right .comment .userpic a { right: 10px; left: auto; }
            .two-columns-left .entry .userpic a,
            .two-columns-left .comment .userpic a { left: 10px; right: auto; }
            """;
        }
        elseif ($*entryicons_position == "opposite") {
            $entryicon_css = """
            .two-columns-right .has-userpic .entry .header,
            .two-columns-right .has-userpic .entry .poster {
                margin-left: $entry_title_margin;
                }
            .two-columns-right .has-userpic .comment .header,
            .two-columns-right .has-userpic .comment .poster {
                margin-left: $comment_title_margin;
                }

            .two-columns-left .has-userpic .entry .header { margin-right: $entry_title_margin; }
            .two-columns-left .has-userpic .comment .header { margin-right: $comment_title_margin; }

            .two-columns-right .entry .userpic a,
            .two-columns-right .comment .userpic a { left: 10px; right: auto; }
            .two-columns-left .entry .userpic a,
            .two-columns-left .comment .userpic a { right: 10px; left: auto; }
            """;
        }

    print_custom_control_strip_css();

    """
/*
Theme Name:    Skittlish Dreams, a DW port of Skittlish
Description:   A candy coloured theme. Comes in 7 flavors (orange, blue, green, pink, cyan, red, violet).
Version:1.0 Dreamwidth
original designer: Damien Tanner
mephisto (original): Cristi Balan
wordpress port: A.M. Griffin
pmwiki port: Dave G
dw port: Kaigou H.
all versions released under CCL

changes for dreamwidth port:
--- rewrote css to fit dw classes
--- reduced image load to three images
--- removed js functionality for color-switching
--- converted font-sizes to ems from px
--- changed layout to flexible-width only
*/

html {margin: 0px; padding: 0px; font-size: 100%; /* IE hack */}
* {box-sizing:border-box; -moz-box-sizing:border-box}

a, a:link, a:active { $page_link_colors text-decoration: none; }
a:visited { $page_link_visited_colors  }
a:hover {  $page_link_hover_colors text-decoration: underline; }

h1, h2, h3, h4 {
    font-weight: 700;
    font-variant: normal;
    letter-spacing: .08em;
    }

q { font-style: italic; }

body { $page_background $page_font margin: 0; padding: 0; }

html body {
    margin-left: $*margins_size$*margins_unit;
    margin-right: $*margins_size$*margins_unit;
    }

@media $medium_media_query {
    .two-columns-right #container { $container_background }
    .two-columns-left #container { $container_background_redux }
    .two-columns-right #container, .two-columns-left #container { $container_colors margin: 0 4%; }
}

/*--- Header ---*/

#header, #header a {
    $header_colors
    border-bottom: 2px solid $header_bottom_color;
    padding: 0;
    text-decoration: none;
    }

@media $medium_media_query {
    .two-columns-right #header { margin: 0 5px 0 0; }

    .two-columns-left #header {
        margin: 0 0 0 5px;
        text-align: right;
        }
}

#header #titles-wrap {
    $header_background
}

#header h1 {
    $journal_title_font
    font-weight: lighter;
    font-variant: normal;
    letter-spacing: .2em;
    margin: 0;
    padding: 20px 20px 0 2em;
    text-transform: lowercase;
    }

#header h2 {
    $journal_subtitle_font
    padding: 0 20px 0 2.7em;
    }

@media $medium_media_query {
    .two-columns-right .module-section-one .inner { text-align: right; }
    .two-columns-left .module-section-one .inner { text-align: left; }
}

#header .module-navlinks ul {
    margin: 0;
    padding: .5em 20px;
    }

#header .module-navlinks li {
    display: inline;
    }

#header .module-navlinks li a {
    $header_link_colors
    padding: .5em 20px;
    line-height: 2em;
    text-decoration: none;
    }

#header .module-navlinks li a:visited {
    $header_link_visited_colors
    }

#header .module-navlinks li a:hover,
#header .module-navlinks li .current {
    $header_link_hover_colors
    }

#header .module-navlinks li a:active {
    $header_link_active_colors
    }

@media $medium_media_query {
    #header .module-navlinks li a {
        line-height: 1em;
    }
}

/*--- Wrap ---*/

#wrap { $page_text_colors }
#content {position: relative; width: 100%; padding-bottom: 20px; $content_colors}
@media $medium_media_query {
    .two-columns-right #wrap {padding-right: $*sidebar_width; padding-top: 20px; padding-left:  20px;}
    .two-columns-left #wrap  {padding-left: $*sidebar_width; padding-top: 20px; padding-right: 20px;}
    .two-columns-right #content {margin: 0 -5px 0 0; float: left;}
    .two-columns-left #content {margin: 0 0 0 -5px; float: right;}
}

.tags-container,
.icons-container {
    background-color: $*color_entry_background;
    color: $*color_entry_text;
    padding: 10px 10px 10px 30px;
    }

.tags-container a,
.icons-container a {
    color: $*color_entry_link;
    }

.tags-container a:visited,
.icons-container a:visited {
    color: $*color_entry_link_visited;
    }

.tags-container a:hover,
.icons-container a:hover {
    color: $*color_entry_link_hover;
    }

.tags-container a:active,
.icons-container a:active {
    color: $*color_entry_link_active;
    }

.module-section-two { $module_colors position: relative; text-align: center; padding: 20px; }
.module-section-two .module { $module_box_background $module_box_colors margin: 0 20px; padding: 10px; text-align: left; }
@media $medium_media_query {
    .multiple-columns .module-section-two { padding: 0; width: $*sidebar_width; }
    .multiple-columns .module-section-two .module { margin: 20px; }
    .two-columns-right .module-section-two {float: left; margin-right: -$*sidebar_width; /* <--- IMPORTANT */}
    .two-columns-left .module-section-two {float: right; margin-left: -$*sidebar_width; /* <--- IMPORTANT */}
    .two-columns-right .module-section-two .module {margin-left: 10px;}
    .two-columns-left .module-section-two .module {margin-right: 10px;}
}

.module-section-two a { $module_link_colors }
.module-section-two .module-header a {text-decoration: none; }
.module-section-two h2 {margin: 0; margin-bottom: 7px; padding: 0.2em; $module_title_colors }
.module-section-two ul {list-style: none; margin-left: 0.5em; padding: 0; }
.module-section-two ul ul { margin-left: 0.5em; padding: 0.5em; }
.module-userprofile .userpic img {border: none; margin: 20px; }
.module-userprofile .userpic {text-align: center; }
.module-userprofile ul {margin: 0px; padding: 0px; text-align: center; margin-top: 5px; }
.module-userprofile p {margin-top: 0px; margin-bottom: 0px; }
.module-userprofile li {display: inline; padding: 5px; }
.module-calendar .module-content {text-align: center; }
.module-calendar table {margin-left: auto; margin-right: auto; }

.module h2 {
    $module_title_font
}

.module-content {
    $module_font
}

.search-box {
    max-width: 100%;
}

.search-form .search-box-item, 
.search-form .search-button-item {
    display: block
}
.search-form .comment_search_checkbox_item {
    display: inline
}

@media $medium_media_query {
    .two-columns-right #entries,
    .two-columns-right.page-entry .entry-wrapper,
    .two-columns-right.page-entry #comments,
    .two-columns-right.page-archive .year,
    .two-columns-right #archive-month {padding-right:22px; margin:-20px 5px -20px -20px; padding-left:5px; border-left: solid 1px $*color_page_border; $entry_background }
    .two-columns-left #entries,
    .two-columns-left.page-entry .entry-wrapper,
    .two-columns-left.page-entry #comments,
    .two-columns-left.page-archive .year,
    .two-columns-left #archive-month {padding-left:22px; margin:-20px -20px -20px 5px; padding-right:5px; border-right: solid 1px $*color_page_border; $entry_background_redux }

    .two-columns-right .tags-container,
    .two-columns-right .icons-container { margin: 20px 5px -20px -20px; border-left: solid 1px $*color_page_border; $entry_background }
    .two-columns-left .tags-container,
    .two-columns-left .icons-container { margin: 20px -20px -20px 5px; border-right: solid 1px $*color_page_border; $entry_background_redux }

    .two-columns-right.page-reply #content, .two-columns-right.page-reply #postform { $navigation_background }
    .two-columns-right.page-reply #postform { background-position: right bottom; }
    .two-columns-left.page-reply #content, .two-columns-left.page-reply #postform { $navigation_background_redux }
    .two-columns-left.page-reply #postform { background-position: left bottom; }

    .entry, .comment, .text_noentries_day, .page-reply .talkform  {margin-left:2em;}
}

.page-entry .entry-wrapper {margin-top:0;}
.page-reply .entry { border-bottom: solid 2px $*color_page_border}

.entry, .comment, .text_noentries_day {padding: 10px; margin-top: 76px; position: relative; margin-bottom: 10px; border-top: solid 2px $*color_page_border; $entry_colors}


.page-entry .entry, .page-entry .comment, .page-entry .text_noentries_day {border:0px;}
.page-entry #comments {padding-top:20px;}

.entry-title, .comment-title {
    $entry_title_colors
    border: solid 1px $*color_entry_title_border;
    margin: 0 0 .5em;
    padding: .2em;
    }

.entry .entry-title {
    $entry_title_font
    }

.comment-title {
    $comment_title_font
    }

.entry-wrapper-even .entry-title,
.comment-wrapper-even .comment-title {
    $entry_title_colors
    border: solid 1px $*color_entry_title_border_alt;
    }

.no-subject .entry .entry-title,
.no-subject .comment .comment-title {
    background: none;
    border:none;
    margin: 0;
    padding: 0;
    }

.comment-posted {
    font-weight:bold;
}
.comment-wrapper {
    min-width: 15em;
}

.userpic a {background-color: $*color_page_border; border: 0px; }
.entry .userpic a, .comment .userpic a {background-color: $*color_entry_background; border: solid 2px $*color_page_border; display: block; position: absolute; padding: 5px; }

.entry .userpic a {
    top: $entry_userpic_shift;
    }

.comment .userpic a {
    top: $comment_userpic_shift;
    }

.entry .userpic img, .comment .userpic img {border: none; display:block;}
.no-userpic .comment {margin-top: 20px; }

.no-userpic .comment-title {
    margin: 0;
    }

.entry .time, .entry .date {padding: 0.2em; display: inline-block; }

.entry-content,
.comment-content {
    padding: 10px 0;
    }

/* ensure comment content stretches out horizontally so it's readable */
.comment-content:before {
    content: "";
    display: block;
    overflow: hidden;
    width: 10em;
}
.comment-content { border-top: 1px transparent solid; } /* for firefox */

/* To constrain the width and prevent layout breaking */
.entry-content img, .comment-content img {
    max-width: 100%;
    height: auto;
    }

@media $large_media_query {
    .entry-content img, .comment-content img { max-width: none; }
}

.page-recent .security-public.restrictions-none.journal-type-P.has-userpic.no-subject .entry-content,
.page-day .security-public.restrictions-none.journal-type-P.has-userpic.no-subject .entry-content {
    padding-top: 20px;
    }

p {margin-top: .5em; margin-bottom: 0.5em; }
blockquote {margin: 1em; padding: 1em; $blockquote_colors }

.tag {font-weight: bold; text-align: left; }
.tag a {font-weight: normal; }
.tag ul {display: inline; margin: 0; padding: 0; }
.tag li {display: inline; padding: 0px; }
*+html .tag li {padding: 0 5px; }

.entry .metadata.top-metadata { padding-top: 10px; }
.entry .metadata ul {list-style: none; margin: 0px; padding: 0px; }
.entry .footer .inner, .comment .footer .inner {text-align: right; }
.entry .footer a {white-space: nowrap; }

.entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {text-align: right; margin: 0; padding: 0; display: inline; }
.entry-management-links li, .entry-interaction-links li,  .comment-management-links li, .comment-interaction-links li {display: inline; margin: 0; padding: 5px; }
.comment-management-links li.unscreen_comment a, .comment-management-links li.screen_comment a, .comment-management-links li.freeze_thread a { padding-left: 0; }""";

if ( $*use_action_links_images ) {
""".entry-management-links li a, .comment-management-links li a, .comment-interaction-links .thread a {background-repeat: no-repeat; background-position: 0% 50%; padding-left: 18px; }

.entry-management-links .edit_entry a, .comment-management-links .delete_comment a, .comment-management-links .edit_comment a {background-image: url($*STYLES_IMGDIR/skittlishdreams/${theme_base_color}_edit.png); }
.entry-management-links .edit_tags a, .comment-interaction-links .parent a {background-image: url($*STYLES_IMGDIR/skittlishdreams/${theme_base_color}_tag.png); }
.entry-management-links .mem_add a {background-image: url($*STYLES_IMGDIR/skittlishdreams/${theme_base_color}_add.png); }
.entry-management-links .watch_comments a, .comment-management-links .watch_thread a {background-image: url($*STYLES_IMGDIR/skittlishdreams/${theme_base_color}_track.png); }
.entry-management-links .link_prev a {background-image: url($*STYLES_IMGDIR/skittlishdreams/${theme_base_color}_arrow_left.png); }
.entry-management-links .link_next a {background-image: url($*STYLES_IMGDIR/skittlishdreams/${theme_base_color}_arrow_right.png); }
.entry-management-links .tell_friend a {background-image: url($*STYLES_IMGDIR/skittlishdreams/${theme_base_color}_tell.png);}
.entry-interaction-links .entry-readlink a, .entry-interaction-links .entry-permalink a { background-image: url($*STYLES_IMGDIR/skittlishdreams/${theme_base_color}_comments.png); }
.entry-interaction-links li a, .comment-interaction-links li a { background-image: url($*STYLES_IMGDIR/skittlishdreams/${theme_base_color}_comment.png); background-repeat: no-repeat; background-position: 0% 50%; padding-left: 18px;  display: inline; }""";
}

"""
.entry .footer hr {display: none; }
.entry .metadata-label {font-weight: bold; }
.full .comment-poster {display: inline-block; min-width: 40%; }

#content > hr {display: none; }

/*--- Footer ---*/

#footer {
    background: transparent;
    padding: 0;
    }

#footer .inner {
    clear: both;
    $footer_background
    $footer_colors
    padding: .5em 1em;
    }

#footer .inner .inner {
    background: none;
    height: auto;
    margin: 0;
    padding: 0;
    }

@media $medium_media_query {
    #footer { margin: 0 4%; }

    .two-columns-right #footer { $container_background }
    .two-columns-left #footer { $container_background_redux }

    .two-columns-right #footer .inner {
        margin-right: 5px;
        }

    .two-columns-left #footer .inner {
        margin-left: 5px;
        }
}

#footer a {
    $footer_link_colors
    text-decoration: none;
    }

#footer a:visited {
    $footer_link_visited_colors
    }

#footer a:hover {
    $footer_link_hover_colors
    }

#footer a:active {
    $footer_link_active_colors
    }

#footer .module {
    padding-left: 20px;
    }

#footer .page-top {
    text-align: right;
    }

.module-tags_cloud li, .tags_cloud li { display: inline; }

.hfeed .navigation, #archive-year .navigation,  #archive-month .navigation, #archive-day .navigation  {height:61px; margin-bottom:-20px; }

.page-tags .navigation,
.page-icons .navigation {
    height: 61px;
    }

@media $medium_media_query {
    .two-columns-right .hfeed .navigation,
    .two-columns-right #archive-year .navigation,
    .two-columns-right #archive-month .navigation,
    .two-columns-right #archive-day .navigation  {margin-right:-22px; $navigation_background }
    .two-columns-left .hfeed .navigation,
    .two-columns-left #archive-year .navigation,
    .two-columns-left #archive-month .navigation,
    .two-columns-left #archive-day .navigation  {margin-left:-22px; $navigation_background_redux}

    .two-columns-right.page-tags .navigation,
    .two-columns-right.page-icons .navigation {
        margin: -20px 5px -20px -20px; border-left: solid 1px $*color_page_border; $navigation_background
        }

    .two-columns-left.page-tags .navigation,
    .two-columns-left.page-icons .navigation {
        margin: -20px -20px -20px 5px; border-right: solid 1px $*color_page_border; $navigation_background_redux
        }

    .two-columns-right .bottomcomment, .two-columns-right .comments-message { $navigation_background }
    .two-columns-left .bottomcomment, .two-columns-left .comments-message { $navigation_background_redux }
    #comments .bottomcomment, #comments .comments-message {min-height:6em;border-top:4px solid $*color_page_border;text-align:center; background-color: transparent;}
    .two-columns-right .bottomcomment, .two-columns-right .comments-message {margin:20px -22px 20px 0;padding-right:30px;}
    .two-columns-left .bottomcomment, .two-columns-left .comments-message  {margin:20px 0 20px -22px;padding-left:30px;}
}

.navigation {margin: 0; padding: 0; text-align: center; $navigation_colors }
.navigation ul {margin: 0; padding: 5px 0 0 0; text-align: center; }
.navigation li {display: inline; padding: 0 5px; }
.navigation .page-back a:before {content: "<--  "; font-size: 0.5em; line-height:2em; letter-spacing: 0.08em; /*vertical-align: 50%; */ padding-right: 1px; }
.navigation .page-forward a:after {content: " -->"; font-size: 0.5em; line-height:2em; letter-spacing: 0.08em; /*vertical-align: 50%; */ padding-left: 1px; }
#archive-year .navigation, #archive-month .navigation  {height:61px;text-align:center;}

.page-tags #content h2,
.page-icons #content h2 {
    $entry_colors
    border: solid 1px $*color_page_border;
    font-size: 1.2em;
    margin: 0;
    margin-bottom: 20px;
    padding: .2em;
    }

@media $medium_media_query {
    .two-columns-right #archive-year .navigation  {margin:-20px 5px -20px -20px; border-left: solid 1px $*color_page_border;}
    .two-columns-left #archive-year .navigation  {margin:-20px -20px -20px 5px;border-right: solid 1px $*color_page_border;}
    .two-columns-right #archive-month .navigation   {margin:0 -22px 0 0;}
    .two-columns-left #archive-month .navigation   {margin:0 0 0 -22px;}

    .two-columns-right.page-tags #content h2,
    .two-columns-right.page-icons #content h2 {
        margin-right: 10px;
        }

    .two-columns-left.page-tags #content h2,
    .two-columns-left.page-icons #content h2 {
        margin-left: 10px;
        }
}


#archive-month dt {font-weight: bold; }

.month-wrapper, #archive-month dl {padding:10px;position:relative;background-color:$*color_entry_background;}

@media $medium_media_query {
    .two-columns-right #archive-month .entry-title {display: inline-block; margin:0 0 .5em 0; padding-left: 5px; }
    .two-columns-left #archive-month .entry-title {display: inline-block; margin:0 0 .5em 0; padding-right: 5px; }

    .two-columns-right .month-wrapper, .two-columns-right #archive-month dl {margin: 20px 2em 20px 3em;}
    .two-columns-left .month-wrapper, .two-columns-left #archive-month dl   {margin: 20px 3em 20px 2em; }
}

.month-wrapper h3 {padding: 0.2em; margin: 0; border-top: solid 2px $*color_page_border; $entry_title_colors font-size: 1.2em; margin-bottom: 20px; }
.month caption {display: none; }
.month .day span, .month .day p {padding: 0; margin: 0; }
.month .day p {margin-top: 4px; margin-bottom: -4px; }
.month .day, .month th {line-height: 2em; vertical-align: text-top; padding: 5px; text-align: center; }
    /* IE only to line up the empty days neatly */
    *+html .month .day span, *+html .month th span{vertical-align: 100%; }
.month .day-has-entries {line-height: 1em; }
.month .footer {width: 250px; text-align: center; margin: 10px 0px; }

.text_noentries_day {margin-top: 20px; margin-bottom: 20px; }

#postform {margin-top: 20px; }
#commenttext {width: 95%; }

.metadata-label, .metadata-item, .datetime, .tag, .entry-management-links, .entry-interaction-links {margin-top:.5em; font-weight: lighter; font-variant: normal; text-transform: uppercase; $page_details_text_colors; letter-spacing: 0.08em; display: block; }
.metadata-label-groups, .tag-text {display:none; }
.metadata-item {color: $*color_entry_metadata_text; }

.journal-name,
.journal-website-name {text-align: center; font-size: 1.8em; color: $*color_module_link; line-height: 1.43em; margin-bottom:.3em; font-weight: lighter; font-variant: normal; letter-spacing: .16em; }

.journal-name { font-size: 1.8em; }
.journal-website-name { font-size: 1.6em; }

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

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

.partial .comment .datetime {
    display: inline;
    }


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

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

.sorting-options ul li {
    display: inline;
    }

.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 {
    display: inline;
    margin: 0;
    padding: 0;
    }

.icon-keywords ul li {
    display: inline;
    padding: 0;
    }

$entryicon_css

    """;
}