/* Cleaned CSS: */

.ContextualPopup, .icon-browser {
    background: #ffffff;
    color: #444444;
    }

.ContextualPopup a, .icon-browser a { color: #0870c9; }
.ContextualPopup a:visited { color: #0870c9; }
.ContextualPopup a:hover { color: #1166ee; }
.ContextualPopup a:active { color: ; }

/*
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 { color: #0870c9;
 text-decoration: none; }
a:visited { color: #0870c9;
  }
a:hover {  color: #1166ee;
 text-decoration: underline; }

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

q { font-style: italic; }

body { background: #e3e3e3 url("https://www.dreamwidth.org/img/styles/skittlishdreams/bg.gif") repeat-x top left; font-family: Georgia, sans-serif; font-size: 1em; margin: 0; padding: 0; }

#canvas {
    margin-left: 0em;
    margin-right: 0em;
    }

@media only screen and (min-width: 900px) {
    .two-columns-right #container { background: #1c1c1c url("https://www.dreamwidth.org/img/styles/skittlishdreams/left_bg.gif") repeat-y right; }
    .two-columns-left #container { background: #1c1c1c url("https://www.dreamwidth.org/img/styles/skittlishdreams/left_bg-REDUX.gif") repeat-y left; }
    .two-columns-right #container, .two-columns-left #container { color: #666666;
background-color: #0870c9;
 margin: 0 4%; }
}

/*--- Header ---*/

#header, #header a {
    color: #dddddd;
background-color: #1c1c1c;

    border-bottom: 2px solid #000000;
    padding: 0;
    text-decoration: none;
    }

@media only screen and (min-width: 900px) {
    .two-columns-right #header { margin: 0 5px 0 0; }

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

#header #titles-wrap {
    
            background: #1c1c1c url("https://www.dreamwidth.org/img/styles/skittlishdreams/header_bg.gif") repeat-x top left;
            min-height: 100px;
}

#header h1 {
    font-family: Georgia, sans-serif; font-size: 2em;
    font-weight: lighter;
    font-variant: normal;
    letter-spacing: .2em;
    margin: 0;
    padding: 20px 20px 0 2em;
    text-transform: lowercase;
    }

#header h2 {
    font-family: Georgia, sans-serif; 
    padding: 0 20px 0 2.7em;
    }

@media only screen and (min-width: 900px) {
    .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 {
    color: #dddddd;

    padding: .5em 20px;
    line-height: 2em;
    text-decoration: none;
    }

#header .module-navlinks li a:visited {
    color: #dddddd;

    }

#header .module-navlinks li a:hover,
#header .module-navlinks li .current {
    color: #ffffff;

    }

#header .module-navlinks li a:active {
    color: #dddddd;

    }

@media only screen and (min-width: 900px) {
    #header .module-navlinks li a {
        line-height: 1em;
    }
}

/*--- Wrap ---*/

#wrap { color: #666666;
 }
#content {position: relative; width: 100%; padding-bottom: 20px; background-color: #0870c9;
}
@media only screen and (min-width: 900px) {
    .two-columns-right #wrap {padding-right: 300px; padding-top: 20px; padding-left:  20px;}
    .two-columns-left #wrap  {padding-left: 300px; 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: #ffffff;
    color: #444444;
    padding: 10px 10px 10px 30px;
    }

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

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

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

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

.module-section-two { background-color: #0870c9;
 position: relative; text-align: center; padding: 20px; }
.module-section-two .module { background: transparent url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_box.gif") no-repeat top left; color: #dddddd;
 margin: 0 20px; padding: 10px; text-align: left; }
@media only screen and (min-width: 900px) {
    .multiple-columns .module-section-two { padding: 0; width: 300px; }
    .multiple-columns .module-section-two .module { margin: 20px; }
    .two-columns-right .module-section-two {float: left; margin-right: -300px; /* <--- IMPORTANT */}
    .two-columns-left .module-section-two {float: right; margin-left: -300px; /* <--- 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 { color: #ffffff;
 }
.module-section-two .module-header a {text-decoration: none; }
.module-section-two h2 {margin: 0; margin-bottom: 7px; padding: 0.2em; color: #ffffff;
 }
.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 {
    font-family: Georgia, sans-serif; font-size: 1.1em;
}

.module-content {
    font-family: Georgia, sans-serif; 
}

.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 only screen and (min-width: 900px) {
    .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 #0870c9; background: #ffffff url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_edge.gif") repeat-y right; }
    .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 #0870c9; background: #ffffff url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_edge-REDUX.gif") repeat-y left; }

    .two-columns-right .tags-container,
    .two-columns-right .icons-container { margin: 20px 5px -20px -20px; border-left: solid 1px #0870c9; background: #ffffff url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_edge.gif") repeat-y right; }
    .two-columns-left .tags-container,
    .two-columns-left .icons-container { margin: 20px -20px -20px 5px; border-right: solid 1px #0870c9; background: #ffffff url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_edge-REDUX.gif") repeat-y left; }

    .two-columns-right.page-reply #content, .two-columns-right.page-reply #postform { background: #ffffff url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_circle.gif") no-repeat right top; }
    .two-columns-right.page-reply #postform { background-position: right bottom; }
    .two-columns-left.page-reply #content, .two-columns-left.page-reply #postform { background: #ffffff url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_circle-REDUX.gif") no-repeat left top; }
    .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 #0870c9}

.entry, .comment, .text_noentries_day {padding: 10px; margin-top: 76px; position: relative; margin-bottom: 10px; border-top: solid 2px #0870c9; color: #444444;
background-color: #ffffff;
}


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

.entry-title, .comment-title {
    color: #0870c9;
background-color: #ffffff;

    border: solid 1px #eeeeee;
    margin: 0 0 .5em;
    padding: .2em;
    }

.entry .entry-title {
    font-family: Georgia, sans-serif; 
    }

.comment-title {
    font-family: Georgia, sans-serif; 
    }

.entry-wrapper-even .entry-title,
.comment-wrapper-even .comment-title {
    color: #0870c9;
background-color: #ffffff;

    border: solid 1px #dddddd;
    }

.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: #0870c9; border: 0px; }
.entry .userpic a, .comment .userpic a {background-color: #ffffff; border: solid 2px #0870c9; display: block; position: absolute; padding: 5px; }

.entry .userpic a {
    top: -66px;
    }

.comment .userpic a {
    top: -66px;
    }

.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 */

/* Constrain image dimensions.
    Job 1: Don't trash the layout sideways.
    Job 2: Limit height to fit inside the viewport. Having to scroll to see a
      portrait of someone is nonsense.
    Job 3: Defend the native aspect ratio.
    Job 4: Respect the width/height HTML attributes for scaling down OR up
      (within the limits of the container), but if they conflict with the aspect
      ratio, treat them as maximums and let the aspect ratio win. */
.entry-content img, .comment-content img {
    height: auto;
    max-width: 100%;
    max-height: 95vh;
    object-fit: contain;
    object-position: left;
}

.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; background-color: #e1e1e1;
 }

.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; }.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("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_edit.png"); }
.entry-management-links .edit_tags a, .comment-interaction-links .parent a {background-image: url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_tag.png"); }
.entry-management-links .mem_add a {background-image: url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_add.png"); }
.entry-management-links .watch_comments a, .comment-management-links .watch_thread a {background-image: url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_track.png"); }
.entry-management-links .link_prev a {background-image: url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_arrow_left.png"); }
.entry-management-links .link_next a {background-image: url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_arrow_right.png"); }
.entry-management-links .tell_friend a {background-image: url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_tell.png");}
.entry-interaction-links .entry-readlink a, .entry-interaction-links .entry-permalink a { background-image: url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_comments.png"); }
.entry-interaction-links li a, .comment-interaction-links li a { background-image: url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_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;
    
            background: #1c1c1c url("https://www.dreamwidth.org/img/styles/skittlishdreams/footer_bg.gif") repeat-x top left;
            height: 100px;
    color: #bababa;
background-color: #1c1c1c;

    padding: .5em 1em;
    }

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

@media only screen and (min-width: 900px) {
    #footer { margin: 0 4%; }

    .two-columns-right #footer { background: #1c1c1c url("https://www.dreamwidth.org/img/styles/skittlishdreams/left_bg.gif") repeat-y right; }
    .two-columns-left #footer { background: #1c1c1c url("https://www.dreamwidth.org/img/styles/skittlishdreams/left_bg-REDUX.gif") repeat-y left; }

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

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

#footer a {
    color: #bababa;

    text-decoration: none;
    }

#footer a:visited {
    
    }

#footer a:hover {
    color: #ffffff;

    }

#footer a:active {
    
    }

#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 only screen and (min-width: 900px) {
    .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; background: #ffffff url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_circle.gif") no-repeat right top; }
    .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; background: #ffffff url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_circle-REDUX.gif") no-repeat left top;}

    .two-columns-right.page-tags .navigation,
    .two-columns-right.page-icons .navigation {
        margin: -20px 5px -20px -20px; border-left: solid 1px #0870c9; background: #ffffff url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_circle.gif") no-repeat right top;
        }

    .two-columns-left.page-tags .navigation,
    .two-columns-left.page-icons .navigation {
        margin: -20px -20px -20px 5px; border-right: solid 1px #0870c9; background: #ffffff url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_circle-REDUX.gif") no-repeat left top;
        }

    .two-columns-right .bottomcomment, .two-columns-right .comments-message { background: #ffffff url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_circle.gif") no-repeat right top; }
    .two-columns-left .bottomcomment, .two-columns-left .comments-message { background: #ffffff url("https://www.dreamwidth.org/img/styles/skittlishdreams/blue_circle-REDUX.gif") no-repeat left top; }
    #comments .bottomcomment, #comments .comments-message {min-height:6em;border-top:4px solid #0870c9;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; color: #888888;
background-color: #ffffff;
 }
.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 {
    color: #444444;
background-color: #ffffff;

    border: solid 1px #0870c9;
    font-size: 1.2em;
    margin: 0;
    margin-bottom: 20px;
    padding: .2em;
    }

@media only screen and (min-width: 900px) {
    .two-columns-right #archive-year .navigation  {margin:-20px 5px -20px -20px; border-left: solid 1px #0870c9;}
    .two-columns-left #archive-year .navigation  {margin:-20px -20px -20px 5px;border-right: solid 1px #0870c9;}
    .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:#ffffff;}

@media only screen and (min-width: 900px) {
    .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 #0870c9; color: #0870c9;
background-color: #ffffff;
 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; color: #888888;
; letter-spacing: 0.08em; display: block; }
.metadata-label-groups, .tag-text {display:none; }
.metadata-item {color: #881111; }

.journal-name,
.journal-website-name {text-align: center; font-size: 1.8em; color: #ffffff; 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;
    }


            .two-columns-right .has-userpic .entry .header,
            .two-columns-right .has-userpic .entry .poster {
                margin-right: 120px;
                }
            .two-columns-right .has-userpic .comment .header { margin-right: 120px; }

            .two-columns-left .has-userpic .entry .header { margin-left: 120px; }
            .two-columns-left .has-userpic .comment .header,
            .two-columns-left .has-userpic .comment .poster {
                margin-left: 120px;
                }

            .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; }