Layout #006: Pink Flamingo (S2 Flexible Squares)

[ruthenia_alba]

One of my old layouts recoded recently.
This layout is perfect for small resolutions (800+ px), i.e. netbooks.

Style: S2 Flexible Squares
Account type: all types
Screen Resolution: 800+
Entries: fixed
Browsers: Mozilla, Chrome, Safari
Comments in journal's style: yes
Controlstrip: enabled, new
Sidebar: full
Title & Subtitle: title only




Live preview:
recent // friends // comments


Because of the narrow entries, this layout is perfect for devices with small screen (800px wide and higher). The moment is that the new controlstrip is 1000px wide, so scrolling line will appear.

The entries width is 550px, bigger pictures are clipped.

INSTRUCTIONS.

1. In Customize section choose Flexible Squares style (sidebar on the left!) and click "Customise selected theme ->" below.

2. In left menu choose "Custom CSS". In Page section:

- Use layout's stylesheet(s): Yes
- Use layout's stylesheet(s) when including custom external stylesheet: No
- Use external stylesheets: No
- Custom external stylesheet URL: (leave blank)

3. In Custom stylesheet block, insert the following code:

/* Template: Pink Flamingo */
/* Date: June 10, 2008 */
/* Recoded: June 25, 2011 */
/* S2 Style: Flexible Squares */
/* Design & Codes by Ruthenia Alba (ruthenia_alba.livejournal.com) */
/* Tiny icons by hobbitholes (hobbitholes.livejournal.com) */

/*-------- BASICS ---------*/

body {
padding: 0;
margin: 0;
background: url(http://ruthenia-alba.webs.com/006flamingo-layout/upload/006flamingo-bg.gif) repeat scroll;
}

a, a:link {
color: #53bddc;
text-decoration: none;
}

a:hover {
color: #1187aa;
text-decoration: none;
}

a:visited {
color: #1187aa;
text-decoration: none;
}

/* ----------- CONTENT ----------- */

#content {
width: 730px;
border: 0;
margin: 0 auto 40px auto;
padding: 0 10px;
background: #fff;
}

#maincontent {
background: transparent;
margin: 0;
padding: 0;
border: 0;
}

div.subcontent {
width: 555px;
float: right;
margin: 0;
border: 0;
padding: 0 3px 0 0;
overflow: hidden;
}

/*-------- title & subtitle ---------*/

.title {
position: absolute;
top: 405px;
margin-left: 20px;
font: bold italic 18px Georgia;
color: #1187aa;
letter-spacing: 0;
}

.subtitle {
display: none;
}

/*-------- header ---------*/

#header {
height: 340px;
background: url(http://ruthenia-alba.webs.com/006flamingo-layout/upload/006flamingo-header.jpg) transparent no-repeat;
border: 0;
margin: 50px 0 0;
padding: 0;
}

ul.navheader {
border: 0;
padding: 5px 0 0;
margin: 0;
font: bold italic 17px Georgia;
letter-spacing: 0;
color: #53bddc;
}

ul.navheader li {
display: inline;
margin-right: 10px;
}

#header a,
#header a:link {
color: #53bddc !important;
text-decoration:none;
}

#header a:hover {
color: #1187aa !important;
text-decoration: none;
}

#header a:visited {
color: #53bddc !important;
}

/*-------- SIDEBAR ---------*/

#sidebar {
background: transparent;
margin: 0;
padding: 10px 5px;
border: 0;
font: normal 12px Arial, Verdana;
}

.defaultuserpic img {
padding: 3px;
border: 1px dashed #53bddc;
}

.sbarbody,
.sbarbody2 {
padding: 0;
margin: 10px 0;
font: normal 12px Arial, Verdana;
color: #565656;
align: left;
}

li.sbartitle {
margin: 0;
padding: 3px;
border: 0;
border-bottom: 1px solid #53bddc;
background: transparent;
font: bold italic 18px Georgia;
text-align: left;
color: #53bddc;
}

li.sbaritem {
margin: 0;
padding: 5px 0;
list-style: none;
font: normal 12px Arial, Verdana;
line-height:1em;
text-align: left;
}

#sidebar a,
#sidebar a:link {
color: #565656 !important;
text-decoration: none;
}

#sidebar a:hover {
color: #53bddc !important;
text-decoration: none;
}

#sidebar a:visited {
color: #565656;
}

/*------ sidebar summary --------*/

#sidebar_summary li.sbaritem {
padding: 5px 0;
margin: 5px 2px 2px 2px;
color: #ff6b6d;
border: 0;
line-height: 18px;
}

/* ------ sidebar calendar ------- */

.calendar td {
padding: 3px;
color: #565656;
border: 0;
}

#sidebar_calendar ul.sbarlist {
padding: 0;
}

.sbarcalendarposts {
background: #E2F8FE;
}

#sidebar_calendar .sbarcalendarposts a,
#sidebar_calendar .sbarcalendarposts a:link,
#sidebar_calendar .sbarcalendarposts a:visited {
color: #1187aa !important;
text-decoration: none;
}

#sidebar_calendar .sbarcalendarposts a:hover {
color: #1187aa !important;
text-decoration: none;
}

/*-------- ENTRY ---------*/

.entry {
background: transparent;
border: 0;
border-bottom: dashed 1px #53bddc;
margin: 0 0 10px 0;
padding: 0;
text-align: justify;
font: normal 12px Arial;
line-height: 18px;
}

.entry p {
font-size: 12px;
}

/* ----- entry header: date & subject ----- */

.datesubject {
margin: 0;
padding: 0;
background: transparent;
color: #664e2f;
}

.date {
padding: 0 0 5px 0;
margin: 0;
background: transparent;
text-align: left bottom;
font: bold italic 17px Georgia;
color: #53bddc;
}

.subject,
.replytosubject,
.subj-link {
padding: 0 0 10px 0;
font: bold 13px Arial;
color: #565656 !important;
}

.subject a {
color: #565656 !important;
}

/* --------- entry text ------------ */

.entry_text {
color: #565656;
min-height: 80px;
}

blockquote {
background: #e2f8fe;
margin: 10px 120px auto 15px;
padding: 10px;
border: 0;
border-left: 5px solid #53bddc;
font: normal italic 11px Arial;
line-height: 16px;
}

/*----- userpics -----*/

.userpic,
.userpicfriends {
position: relative;
float: right;
background: transparent !important;
border: dashed 1px #53bddc;
margin: 5px 0 5px 7px;
padding: 3px;
}

.lj-view-entry .userpicfriends font {
display: none;
}

.userpicfriends a,
.userpicfriends a:link,
.userpicfriends a:visited {
color: #53bddc! important;
text-decoration: none;
}

.userpicfriends a:hover {
color: #1187aa! important;
text-decoration: none;
}

.userpicfriends font {
color: #1187aa !important;
text-decoration: none;
}

/* ------- entry metadata: tags & currents ------- */

.ljtags {
margin: 10px 0 0;
padding: 10px 0 0;
font: normal 12px Arial;
}

.ljtags a,
.ljtags a:link {
color: #53bddc !important;
text-decoration: none;
}

.ljtags a:hover {
color: #1187aa !important;
text-decoration: none;
}

.ljtags a:visited {
color: #1187aa !important;
}

.currents {
margin: 0;
padding: 0;
font: normal 12px Arial;
color: #53bddc;
}

.currents div {
margin-top: 4px;
font: normal 12px Arial;
}

.currents strong {
font: normal 12px Arial;
color: #565656;
}

/* ------ entry links (comments, memories etc.) ------ */

.comments {
background: transparent;
text-align:center;
margin: 0 0 20px 0;
padding: 0;
font: normal 12px Arial;
top: 10px;
color: #fff;
}

.comments a,
.comments a:link {
color: #ff6b6d !important;
text-decoration: none;
}

.comments a:hover {
color: #c73638 !important;
text-decoration: none;
}

.comments a:visited {
color: #ff6b6d;
}

/* ----- separator, clear ----- */

.separator,
.clear {
height: 0;
}

/* --------- FOOTER ------------- */

#footer {
background: transparent;
border: 0;
margin: 0 0 30px 175px;
padding: 0;
font: bold italic 16px Georgia;
letter-spacing: 0;
text-align:center;
}

ul.navfooter {
color:#565656;
}

.clearfoot {
height: 0;
}

#footer a,
#footer a:link {
color: #ff6b6d;
text-decoration: none;
}

#footer a:hover {
color: #c73638;
text-decoration: none;
}

#footer a:visited {
color: #ff6b6d;
}

/* -------- COMMENTS PAGE --------- */

.skiplinks {
margin: 5px 0;
width: 555px;
float: right;
text-align: center;
font: normal 12px Arial;
color: #fff;
}

.box {
border: 0;
color: #565656;
padding: 10px 0 0 0;
margin: 0 4px 20px 175px;
font: normal 12px Arial;
}

.box center {
margin: 0;
}

.commentbox {
background: transparent;
border: 0;
font: normal 12px Arial;
padding: 0;
}

.commentbox a {
font: normal 12px Arial;
}

.commentbox div div {
padding: 5px 0 0 0 !important;
min-height: 20px;
}

.commentbox div div img {
max-height: 15px;
max-width: 15px;
}

.commentboxpartial {
background: transparent;
font: normal 12px Arial;
}

.datesubjectcomment {
background: #e2f8fe;
border: 0;
}

.datesubjectcomment a,
.datesubjectcomment a:link,
.datesubjectcomment a:visited {
color: #53bddc;
text-decoration: none;
}

.datesubjectcomment a:hover {
color: #1187aa;
text-decoration: none;
}

div .commentreply {
color:#565656;
font: normal 12px Arial;
line-height: 18px;
}

.userpiccomment {
max-height: 80px;
max-width: 80px;
background: #fff;
border:1px dashed #53bddc;
padding: 3px;
margin-left: -5px;
}

/* ----- REPLY PAGE ----- */

div.box form table {
border: 0 !important;
margin: 20px 0;
align: center;
color: #565656;
font: normal 12px Arial;
}

.replytoposter {
font: normal 12px Arial;
color: #565656;
}

#qrform,
#qrform b {
font: normal 12px Arial;
}

/* ------ input & textarea ---------- */

input,
textarea,
select {
background: #e2f8fe;
border: 1px solid #53bddc;
font: normal 12px Arial;
padding: 3px;
color:#565656;
}

/* ----------- CALENDAR --------- */

ul.year,
ul.year a {
font: bold italic 16px Georgia;
}

li.active {
font: bold italic 16px Georgia;
color: #565656;
padding: 0 0 0 10px;
}

td.yearmonth {
font: normal 12px Arial;
color: #565656;
padding-bottom: 5px;
}

table.yeartable td.yearday {
padding: 5px;
background: #53bddc;
border: 0;
color: #fff;
font: normal 12px Arial;
}

td.yearmonth a {
font: normal 12px Arial;
}

table.yeartable td.yeardate {
border: 0;
border-bottom: 1px dashed #53bddc;
border-right: 1px dashed #ff6b6d;
padding-right: 10px;
font: normal 12px Arial;
color: #565656;
}

td.yeardate a {
background: #E2F8FE;
padding: 1px 7px;
color: #565656;
font: normal 12px Arial;
}

/* ------- LJ USER & IMAGES --------- */

img[src*="userinfo.gif"] {
width: 0;
height: 0;
padding: 4px 0px 10px 6px;
margin: 0 0 0 3px;
background: url(http://ruthenia-alba.webs.com/006flamingo-layout/upload/006flamingo-ljuser.gif) transparent no-repeat;
}

img[src*="community.gif"] {
width: 0;
height: 0;
padding: 2px 0px 10px 12px;
margin:0 0 0 3px;
background: url(http://ruthenia-alba.webs.com/006flamingo-layout/upload/006flamingo-ljcomm.gif) transparent no-repeat;
}

/* ----- NAVIGATION STRIP ------ */

#lj_controlstrip_new {
background: #fff;
border: 0;
border-bottom: 1px dashed #53bddc;
}

.w-cs {
color: #565656 !important;
font: normal 12px Arial;
}

.w-cs A:link,
.w-cs A:visited,
.w-cs A:active {
border: none !important;
text-decoration: none;
color: #53bddc !important;
}

.w-cs A:hover {
color: #1187aa !important;
text-decoration: none;
}

.w-cs .w-cs-menu li {
background: url(http://ruthenia-alba.webs.com/006flamingo-layout/upload/006flamingo-strip.png) no-repeat;
}

/* ----- left part: total ------ */

.w-cs .w-cs-userinfo {
background: transparent !important;
border-right: solid #53bddc 1px;
}

/* ----- left part: message window ------ */

.w-cs-summary {
background: #E2F8FE !important;
border: solid #53bddc 1px;
}

.w-cs .w-cs-summary LI.w-cs-i-tokens {
border-right: 1px solid #53bddc;
}

/* ----- right part: viewing journal ------ */

.w-cs-status p {
margin-top: 2px;
color: #565656 !important;
font: normal 12px Arial !important;
}

/* ----- buttons: logout, search ------ */

.w-cs input.submit,
.w-cs input.text {
font: normal 11px Arial;
background: #E2F8FE;
border: solid #53bddc 1px !important;
height: 19px;
padding: 0 5px 4px 5px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0 0 0 !important;
-webkit-box-shadow: 0 0 0;
box-shadow: 0 0 0;
text-shadow: 0 0;
color: #565656 !important;
}

.w-cs FORM.w-cs-search INPUT.submit {
position: absolute;
top: 4px;
right: 7px;
width: 16px;
height: 16px;
padding: 0;
background: url(http://ruthenia-alba.webs.com/006flamingo-layout/upload/006flamingo-search.png) no-repeat;
border: 0 !important;
}

/* ----- Contextual Popup ----- */

div.ContextualPopup img {
border:0 none;
}

div.ContextualPopup div.Inner {
opacity: 1;
background: #fff !important;
border: 1px solid #53BDDC;
color: #565656 !important;
font: normal 12px Arial;
margin:0;
padding:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

div.ContextualPopup .Relation {
border: 0;
color: #1187aa;
font: bold italic 13px Georgia;
margin: 2px 0;
padding: 2px 0;
}

div.ContextualPopup .Userpic {
padding: 8px 8px 0 0;
}

div.ContextualPopup .Userpic img {
padding: 2px;
border: 1px dashed #53bddc;
}

div.ContextualPopup div.Inner a,
div.ContextualPopup div.Inner a:link,
div.ContextualPopup div.Inner a:visited {
color: #53bddc !important;
font: normal 12px Arial;
text-decoration: none !important;
}

div.ContextualPopup div.Inner a:hover {
color: #1187aa !important;
font: normal 12px Arial;
text-decoration:none !important;
}

div.ContextualPopup .Content .OnlineStatus {
font-weight: bold;
}