/* 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: Tahoma, Verdana, Arial, 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: Tahoma, Verdana, Arial, 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: Tahoma, Verdana, Arial, 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: Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em;
}

.module-content {
    font-family: Tahoma, Verdana, Arial, 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: Tahoma, Verdana, Arial, sans-serif; 
    }

.comment-title {
    font-family: Tahoma, Verdana, Arial, 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;
}

.comment .admin-poster {
    white-space: nowrap;
}

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

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