Dreams In Colour; Flexible Squares

[lu_hesperia]

( STATIC ) ( LIVE )

XIII. DREAMS IN COLOUR→ S2 Flexible Squares
→ Basic, plus and paid; ad placement vertical.
→ Features custom comment pages, title, subtitle, navigation and sidebar.
→ Sidebar tag list and page summary are disabled.
PREVIEW AND CODE
(Static) (Live)
/*- 013 Dreams in Colour
Layout by lu_hesperia at ourhappyhours.livejournal.com
Tiny icons by pinvoke.com -*/

::selection {background-color:#cef542; color:#fff;}

::-moz-selection {background-color:#cef542; color:#fff;}

@font-face {font-family: 'Carme'; font-style: normal; font-weight: 400; src: local('Carme Regular'), local('Carme'), url(http://themes.googleusercontent.com/static/fonts/carme/v4/Upg28fsDDYxCiFrWVodtfA.woff) format('woff');}

body {background-color:#eaeaea; font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif; font-size:11px;}

a, a:link, a:visited {color: #bdbdbd; text-decoration: none; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

p, td, blockquote {}

code, kbd, pre, tt {font-family: monospace;}

input, select, textarea {font-family: consolas; background-color:#555; color:#ccc; font-size: 10px; border:0px;}

#content {text-align: justify;}

#maincontent {width: 3240px; margin: 86px auto 0px -30px; background-color: transparent; z-index:0;}

#sidebar {margin-left: 30px; margin-bottom: 12px; background-color: #fff; width: 226px; float: left; padding: 0 12px; color:#939393; line-height: 125%;}

.sbarbody2 img {max-width:226px;}

ul.sbarlist {list-style: none; margin-left: -40px;}

li.sbaritem {text-align:center; background-color:#eaeaea; margin: 3px 0; text-transform: uppercase; padding:2px; letter-spacing:1px; font-size:9px;}

li.sbaritem:hover {background-color: transparent;}

.sbartitle {text-align: center; color: #444; font-family: 'Carme'; font-size: 14px; text-transform: uppercase; list-style: none;}

.sbartitle:hover {color:#f9d945; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

table.calendar {}

.sbarcalendar {}

.sbarcalendarposts a:hover {color:#36b30f;}

.defaultuserpic {padding-top:15px;}

.defaultuserpic img {margin-left:57px; border:13px solid #333; width:86px; height:86px;}

div#sidebar_summary.sbarbody {display:none;}

div#sidebar_tags.sbarbody {display:none;}

#header {position: fixed; top:0px; width: 100%; background-color:#333; height:25px !important; margin:0 0 auto 0; padding:7px 0; text-align: left; top:0px; z-index:20;}

ul.navheader {top: 0px; margin:0; padding-left:5px;}

ul.navheader li {display:inline; list-style-type:none; margin:0; padding:5px; font-size:12px; text-transform:uppercase;}

div#header li.view {color:#f9d945; font-size:12px; text-transform:uppercase;}

div#header a, div#header a:link, div#header a:visited {color:#777;}

div#header a:hover {-webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; color:#dc68fd;}

div#header a[href$=".livejournal.com/"]:hover {color: #f5b349;}

div#header a[href*="/calendar"]:hover {color: #f54568}

div#header a[href*="/friends"]:hover {color: #66b2ff;}

div#header a[href*="/profile"]:hover {color: #95ea52;}

.title {background-color:#555; color:#777; font-family:'Carme'; font-size:25px; letter-spacing:-2px; position:relative; text-align:right; text-transform:uppercase; margin: 54px 0; padding: 5px 15px 14px 5px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

.title:hover {color:#f9d945; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

.title:first-letter {color: #f54568;}

.subtitle {background-color: transparent; color: #999; font-family: 'Carme'; font-size: 9px; letter-spacing: 3px; position: relative; text-align: right; text-transform: uppercase; margin-top: -71px; padding: 0px 13px 6px 5px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

.subtitle:hover {color: #95ea52; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

.subcontent {width: 550px; padding: 0px; float: left; position: relative; margin-left: 30px; background-color: transparent;}

.entry {margin-left: 130px; padding: 0 12px 12px 12px; background: #ffffff; color: #939393; font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif; line-height: 125%;}

.entry_text img {max-width: 396px;}

.userpic, .userpicfriends {font-size:9px; color: transparent; text-align: right; position: relative; text-align:center; float: left; z-index: 15; background-color: transparent !important;}

.userpic img, .userpicfriends img {padding:0px; border: 15px solid #333;}

.userpic font, .userpicfriends font {color: #999 !important;}

.userpic a font, .userpic a, .userpicfriends a font, .userpicfriends a {color: #999;}

.userpic a:hover font, .userpic a:hover, .userpicfriends a:hover font, .userpicfriends a:hover {color: #f54568!important; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

.date {text-align: right; color: #969696; font-size: 8px; text-transform: uppercase;}

.subject {text-align: right; color: #66b2ff; font-family: 'Carme'; font-size: 14px; text-transform: uppercase;}

.subject:hover {margin-right:18px solid;}

.subject a, .subject a:link, .subject a:visited {color: #66b2ff;}

.subject a:hover {color: #95ea52; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

.datesubject {margin-left: 130px; padding: 6px; background-color: #fff;}

h2 {display: none;}

.ljtaglist {color: #939393; background-color: #fff; list-style-type:none; margin-left:340px; padding: 12px; width:380px;}

.ljtags {background: transparent url(http://i.imgur.com/dCueo.png) scroll 100% 50% no-repeat; font-size: 9px; color: transparent; margin: 12px 0 0 0; padding: 0 18px 0 0; text-align: right; text-transform: uppercase; line-height: 125%;}

.ljtags a, .ljtags a:link, .ljtags a:visited {font-size:9px;}

.currents {font-size: 10px; line-height: 100%; color: #adadad; margin-top: 5px; text-align: right; text-transform: lowercase; border-right:2px solid #eaeaea; padding-right:3px;}

.currents a, .currents a:link, .currents a:visited, .currents a:hover {color:#adadad;}

.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {display: none;}

.comments {color:#eaeaea; clear:both; font-weight:bold; margin-top:8px; padding:6px;}

.comments:hover {background-color:#eaeaea;}

div.comments a, div.comments a:link, div.comments a:visited {color:#888; line-height:1; padding:4px 6px;}

div.comments a:hover {color:#f32200;}

.separator{height: 0px;}

#footer {top:78px; position:fixed; text-transform:lowercase; z-index:100;}

ul.navfooter {display: inline; margin: 0; padding: 0;}

div#footer a, div#footer a:link, div#footer a:visited {color:#95ea52; font-size:35px;}

div#footer a:hover {-webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; color:#66b2ff;}

ul.navfooter li {display: inline; background-color:transparent; margin:0 5px; padding:20px 5px;}

#footer .viewing {display:none;}

ul.year {text-align: center; list-style: none; margin-left:340px; margin-bottom:44px; background-color: #fff; padding: 9px 12px; font-family: 'Carme'; font-size: 14px; width:380px;}

ul.year li {display: inline;}

table.yeartable {background-color: #fff; margin-left:340px; padding: 12px;}

table.yeartable td.yeardate, table.yeartable td.yearday {color: #939393; font-size: 7pt;}

table.yeartable td.yearday {text-align: center; color: #939393; font-size: 7pt;}

td.yearmonth {color: #939393; font-size: 8pt;}

.clear {height: 0px;}

div#qrformdiv {padding-bottom:15px}

form#qrform table {border-width: 0px !important;}

.userpiccomment {width:75px; height:75px; float: left; padding: 12px; background:#444; z-index: 15;}

.userpiccomment:hover {background:#444;}

.box {float: left; clear: right; margin-left: 50px; width:540px; color:#777}

div#comments.box {margin-left: 30px; margin-top: -15px;}

.datesubjectcomment {text-align:right; margin-right:-12px; padding:0px 6px 3px 0; background-color:#dbdbdb; font-size: 8px;
text-transform: uppercase;}

.datesubjectcomment a, .datesubjectcomment a:link, .datesubjectcomment a:visited {text-transform: lowercase;}

.datesubjectcomment a:hover {}

textarea.textbox {width:100%!important;}

.reply {}

.replytosubject {}

.commentreply {margin: 12px 0px 12px 111px;}

.commentreply img {max-width:100%;}

.commentbox {padding-bottom:10px; min-height: 102px;}

.commentboxpartial {margin:10px; padding:10px;}

.commentinfo {width: 100%; margin-top:10px;}

.skiplinks {margin: -22px 0 0 537px; color: transparent; font-size:10px; text-transform: uppercase;}

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], img[src*="icon_sticky.png"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_spam.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"] {height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent none no-repeat scroll 0 0; }

.subject img {vertical-align: middle !important;}

img[src*="icon_protected.gif"]{background-image: url(http://i.imgur.com/1pkIxw8.png);}

img[src*="icon_private.gif"]{background-image: url(http://i.imgur.com/faoeIgT.png);}

img[src*="icon_groups.gif"]{background-image: url(http://i.imgur.com/i4V7S0x.png);}

img[src*="icon_sticky.png"]{background-image: url(http://i.imgur.com/FLp83.png);}

.ljuser img[src*="syndicated.gif"]{background-image: url(http://i.imgur.com/VW920.png) !important;}

.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i.imgur.com/r6EzA.png) !important;}

.ljuser img[src*="partnercomm.gif"] {background-image: url(http://i.imgur.com/cJzp8.png) !important;}

.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i.imgur.com/zupNZ.png) !important;}

img[src*="btn_unspam.gif"]{background-image: url(http://i.imgur.com/wuJqY.png);}

img[src*="btn_spam.gif"]{background-image: url(http://i.imgur.com/o63uw.png);}

img[src*="btn_del.gif"]{background-image: url(http://i.imgur.com/Eci4Q.png);}

img[src*="btn_scr.gif"] {background-image: url(http://i.imgur.com/IW1FR.png);}

img[src*="btn_unscr.gif"] {background-image: url(http://i.imgur.com/aVYvC.png);}

img[src*="btn_freeze.gif"] {background-image: url(http://i.imgur.com/7KTc8.png);}

img[src*="btn_unfreeze.gif"] {background-image: url(http://i.imgur.com/80cia.png);}

img[src*="btn_track.gif"] {background-image: url(http://i.imgur.com/LrbKY.png);}

img[src*="btn_tracking.gif"] {background-image: url(http://i.imgur.com/LrbKY.png);}

img[src*="btn_tracking_thread.gif"] {background-image: url(http://i.imgur.com/LrbKY.png);}

img[src*="anonymous.gif"] {background-image: url(http://i.imgur.com/pOnEG.png);}

img[src*="openid-profile.gif"] {background-image: url(http://i.imgur.com/J4DG0.png);}

img[src*="userinfo.gif"] {background-image: url(http://i.imgur.com/NpNX0.png);}

img[src*="talk/none.gif"] {background-image: url(http://i.imgur.com/zKR7h.png);}

img[src*="help.gif"] {background-image: url(http://i.imgur.com/W4MKd.png);}

img[src*="pencil.gif"],img[src*="btn_edit.gif"] {background-image: url(http://i.imgur.com/AQfq6.png);}

span.i-ljuser img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://l-stat.livejournal.com/img/userinfo.gif?v=94.3) no-repeat !important; padding: 0 0 0 0 !important;}

span.i-ljuser img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://l-stat.livejournal.com/img/userinfo.gif?v=94.3) no-repeat !important; padding: 0 0 0 0 !important;}

span.ljuser a {font-variant:small-caps!important; font-size:13px!important;}

span.ljuser a:hover {color:#ca19d5!important;}

.w-cs {position:fixed; top:30px; background:#444; color:#444444; height:50px; text-transform: lowercase; font-size: 11px;}

.w-cs .w-cs-userinfo {background:#444; border:0px;}

.w-cs .w-cs-summary li.w-cs-i-tokens {border:0px;}

.w-cs .w-cs-summary li.w-cs-i-tokens a:hover {color: #36b30f!important;}

.w-cs .w-cs-summary li.w-cs-i-inbox a:hover {color: #ffaac0!important;}

.w-cs a:link, .w-cs a:visited, .w-cs a:active {color: #bdbdbd !important;}

.w-cs a:hover {color: #ff8838!important;}

.w-cs .ljuser a:link, .w-cs .ljuser a:visited, .w-cs .ljuser a:active, .w-cs .ljuser a:link b, .w-cs .ljuser a:visited b, .w-cs .ljuser a:active b {font-size: 13px !important; font-weight: normal !important; font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif!important; font-variant: small-caps!important; color: #cdcdcd!important; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

.w-cs .ljuser a:hover, .w-cs .ljuser a:hover b {color: #ca19d5!important;}

.w-cs .w-cs-menu li a:hover {color: #86c0ff!important;}
.w-cs .w-cs-menu li+li a:hover {color: #ff8838!important;}
.w-cs .w-cs-menu li+li+li a:hover {color: #63f42a!important;}
.w-cs .w-cs-menu li+li+li+li a:hover {color: #ff26bf!important;}
.w-cs .w-cs-menu li+li+li+li+li a:hover {color: #3b8aff!important;}
.w-cs .w-cs-menu li+li+li+li+li+li a:hover {color: #ffc11b!important;}
.w-cs .w-cs-menu li+li+li+li+li+li+li a:hover {color: #f32200!important;}
.w-cs .w-cs-menu li+li+li+li+li+li+li+li a:hover {color: #36b30f!important;}
.w-cs .w-cs-menu li+li+li+li+li+li+li+li+li a:hover {color: #ffaac0!important;}
.w-cs .w-cs-menu li+li+li+li+li+li+li+li+li+li a:hover {color: #ca19d5!important;}

.w-cs .w-cs-summary {background:#444;}

.w-cs-user-controls .w-cs-status p{background:#444; color:#cdcdcd !important; letter-spacing: 0px; font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif; font-size: 11px;}

.w-cs .w-cs-search .w-cs-text {width: 150px; border-right: 25px solid #555!important; background-color:#555!important;}

.w-cs .w-cs-text {background-color: #555!important;}

.w-cs .w-cs-search-inner {background:transparent!important;}

.w-cs FORM.w-cs-login .note {color: #bdbdbd; font-size:10px;}

.w-cs FORM.w-cs-login .note:hover {color: #86c0ff; font-size:10px;}

.w-cs .w-cs-summary {background:transparent!important; color:transparent!important;}

::-webkit-scrollbar{width:10px; height:10px;}

::-webkit-scrollbar-track-piece{background-color:#666; -webkit-border-radius:0;}

::-webkit-scrollbar-thumb:vertical{height:autopx; background-color:#333;}

::-webkit-scrollbar-thumb:horizontal{width:autopx; background-color:#333;}

::-webkit-scrollbar-thumb:vertical:hover {height:sutopx; background-color:#333;}

::-webkit-scrollbar-thumb:horizontal:hover {width:autopx; background-color:#333;}

::-webkit-scrollbar-corner {background-color: #666;}

a:hover {color: #86c0ff;}
a+a:hover {color: #ff8838;}
a+a+a:hover {color: #63f42a;}
a+a+a+a:hover {color: #ff26bf;}
a+a+a+a+a:hover {color: #3b8aff;}
a+a+a+a+a+a:hover {color: #ffc11b;}
a+a+a+a+a+a+a:hover {color: #f32200;}
a+a+a+a+a+a+a+a:hover {color: #36b30f;}
a+a+a+a+a+a+a+a+a:hover {color: #ffaac0;}
a+a+a+a+a+a+a+a+a+a:hover {color: #ca19d5;}
a+a+a+a+a+a+a+a+a+a+a:hover {color: #86c0ff;}
a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ff8838;}
a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #63f42a;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ff26bf;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #3b8aff;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ffc11b;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #f32200;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #36b30f;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ffaac0;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ca19d5;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #86c0ff;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ff8838;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #63f42a;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ff26bf;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #3b8aff;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ffc11b;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #f32200;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #36b30f;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ffaac0;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ca19d5;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #86c0ff;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ff8838;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #63f42a;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ff26bf;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #3b8aff;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ffc11b;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #f32200;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #36b30f;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ffaac0;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ca19d5;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #86c0ff;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ff8838;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #63f42a;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ff26bf;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #3b8aff;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ffc11b;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #f32200;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #36b30f;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ffaac0;}
a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a:hover {color: #ca19d5;}

li a:hover {color: #86c0ff;}
li+li a:hover {color: #ff8838;}
li+li+li a:hover {color: #63f42a;}
li+li+li+li a:hover {color: #ff26bf;}
li+li+li+li+li a:hover {color: #3b8aff;}
li+li+li+li+li+li a:hover {color: #ffc11b;}
li+li+li+li+li+li+li a:hover {color: #f32200;}
li+li+li+li+li+li+li+li a:hover {color: #36b30f;}
li+li+li+li+li+li+li+li+li a:hover {color: #ffaac0;}
li+li+li+li+li+li+li+li+li+li a:hover {color: #ca19d5;}
li+li+li+li+li+li+li+li+li+li+li a:hover {color: #86c0ff;}
li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ff8838;}
li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #63f42a;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ff26bf;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #3b8aff;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ffc11b;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #f32200;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #36b30f;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ffaac0;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ca19d5;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #86c0ff;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ff8838;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #63f42a;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ff26bf;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #3b8aff;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ffc11b;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #f32200;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #36b30f;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ffaac0;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ca19d5;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #86c0ff;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ff8838;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #63f42a;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ff26bf;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #3b8aff;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ffc11b;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #f32200;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #36b30f;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ffaac0;}
li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a:hover {color: #ca19d5;}

.b-popup-contextual .i-popup-arrtl, .b-popup-contextual .i-popup-arrbl {display:none;}

.b-popup-contextual .i-popup-arrtr, .b-popup-contextual .i-popup-arrbr {display:none;}

.b-contextualhover {min-width:150px; width: auto; min-height: 44px; margin-left: 0px; color: #bdbdbd; font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif; text-align: justify; line-height: 125%; font-size: 10px!important;}

.b-contextualhover, .b-contextualhover div, .b-contextualhover p, .b-contextualhover ul, .b-contextualhover ol, .b-contextualhover li, .b-contextualhover label, .b-contextualhover img, .b-contextualhover span, .b-contextualhover h3, .b-contextualhover input {padding: 0; margin: 0; color: #bdbdbd; font-size:10px!important;}

.b-contextualhover img {border: none;}

.b-contextualhover p {margin-bottom: 3px; line-height: 125%; font-size: 10px;}

.b-contextualhover .input-checkbox {margin-right: 2px; vertical-align: middle;}

.b-contextualhover .b-contextualhover-section {overflow: hidden; padding: 0px;}

.b-contextualhover .b-contextualhover-side {margin: -11px -71px 0 0; height: 0px; float: right; width: 60px;}

.b-contextualhover .b-contextualhover-userpic {float: right; width: 60px; height: 60px; text-align: right;}

.b-contextualhover .b-contextualhover-userpic a, .b-contextualhover .b-contextualhover-userpic a:hover {border: none !important;}

.b-contextualhover .b-contextualhover-userpic img {max-width: 50px; max-height: 50px; border: 8px solid #333;}

.b-contextualhover .b-contextualhover-title {padding-bottom: 0px;}

.b-contextualhover .b-contextualhover-title h3 {color: #bdbdbd; font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif; margin-bottom: 2px; font-weight: normal; font-style: normal; line-height: 125%; font-size: 10px;}

.b-contextualhover .b-contextualhover-options {margin: 0; padding: 1px 0; border-top: 0px dotted #D3D3D3; list-style: none;}

.b-contextualhover .b-contextualhover-options li {margin-bottom: 0px; line-height: 125%; font-size: 10px!important;}

.b-contextualhover .b-contextualhover-options li a:hover {text-decoration: none !important;}

.b-contextualhover .b-contextualhover-param {line-height: 18px; margin:0 0 6px;}

.b-contextualhover .b-contextualhover-param-item {list-style: none;}

.b-contextualhover-param-item .b-icon-scapital {margin:0 2px 0 0;}

.b-popup-outer {position: relative; padding: 1px; background: #555; border: 0px solid #CCC; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; z-index: 100;}

.b-popup-inner {padding: 10px; border: 0px solid #e7e7e7; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;}

.b-popup div, .b-popup strong, .b-popup label {color: #999; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

.b-popup div:hover, .b-popup strong:hover, .b-popup label:hover {color: #ac19d5; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}

BODY:not(.s-schemius) .b-contextualhover a:link, BODY:not(.s-schemius) .b-contextualhover a:active, BODY:not(.s-schemius) .b-contextualhover a:focus, BODY:not(.s-schemius) .b-contextualhover a:visited {border-bottom: 0 !important; text-decoration:none!important; color: #999!important; background-color:transparent;}

BODY:not(.s-schemius) .b-contextualhover a:hover {border-bottom: 0 !important; text-decoration: none!important; color: #ff26bf!important;}

.w-cs .w-cs-group-second .w-cs-menu {
left: 5px!important; border: 0px!important; background: #444!important;}

.w-cs .w-cs-group-second .w-cs-menu LI A, .w-cs .w-cs-menu LI SPAN {border-bottom: 0px!important;}Although the preview shows only three entries if you use the code above five of them will be shown in a row. Depending on the number of entries you want you'll have to modify the width of the .maincontent:
[Number of entries/Width] 1/920, 2/1500, 3/2080, 5/3240, 10/6140.
For every extra entry you want you have to add 580px.INSTALLATION
(1) Apply any Flexible Squares theme. Make sure the page set up is either 2 Column (sidebar on left) or 2 Column (sidebar on right). Set the ads to vertical.
(2) Display → Navigation Strip color: Dark gray. IMPORTANT: Adjust the number of entries to the width.
(3) Text → There you can edit your comments text so that they look like in the preview.
(4) Sidebar → Ordering: Default Userpic, Blurb, Link List and Calendar.
(5) Custom CSS → Set all drop-down boxes to No and paste the code.NOTES AND CREDITS
→ Don't redistribute or claim as your own.
→ Credit is nice.
→ Tiny icons by pinvoke.com
→ Preview icon by rainymondaay at rainyweek
→ Original post here at ourhappyhours