Layouts #027b & #027c: Cities. London

[ruthenia_alba]

Style: S2 Flexible Squares
Account type: all types
Screen Resolution: 1024+
Entries: fixed width
Images: max width 710px
Browsers: Mozilla, Chrome, Safari, IE (Opera I guess, too)
Comments in journal's style: yes
Controlstrip: enabled
Sidebar: enabled, full
Title & Subtitle: title only



Live preview:
recent // friends // comments




Live preview:
recent // friends // comments

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 choose:

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

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

Blue version:

/* Layout #27b: Cities. London in blue */
/* Date: November 20, 2010 */
/* S2 Style: Flexible Squares */

/*----- CREDITS -----*/

/* Design & Codes: Ruthenia Alba @ ruthenia-alba.livejournal.com */
/* Header Photo: Wikimedia Commons */
/* Tiny Icons: famfamfam @ famfamfam.com */

/*----- COLORS-----

#CBD2D7 - grey gor borders and fills;
#3858b1 - a links;
#5a79ce - a hover links;
#A9B4BD - date;
#484848 - text;
#e9ecee - textarea & input;
*/

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

body {
margin: 0;
padding: 0;
background: url(http://ruthenia-alba.webs.com/027london-layout/upload/027london-bg-blue.jpg) repeat;
}

/* ----- links ----- */

a, a:link {
color: #3858b1;
}

a:hover {
color: #5a79ce;
}

a:visited {
color: #A9B4BD;
}

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

.title {
border: 0;
position: absolute;
align: center;
width: 900px;
margin: 80px 20px 0 20px;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
letter-spacing: 1px;
color: #3858b1;
}

.subtitle {
display: none;
}

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

#content {
border: solid 5px #CBD2D7;
padding: 0;
margin: 40px auto;
width: 940px;
background: #fff;
-moz-border-radius: 4px;
webkit-border-radius: 4px;
}

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

#header {
margin: 0;
border: 0;
background: url(http://ruthenia-alba.webs.com/027london-layout/upload/027london-header-blue.jpg) no-repeat;
height: 378px;
}

/* ----- navigation ----- */

ul.navheader {
background: #CBD2D7;
margin: 377px 20px 0 20px;
padding: 6px 0;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 0;
color: #484848;
}

ul.navheader li {
}

ul.navheader a,
ul.navheader a:link,
ul.navheader a:visited {
color: #3858b1 !important;
}

ul.navheader a:hover {
color: #5a79ce !important;
}

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

#sidebar {
float: left;
background: #fff;
border: 0;
margin: 20px 10px 0 20px;
padding: 0;
width: 170px;
font: normal 13px Arial;
}

.defaultuserpic img {
background: #fff;
padding: 5px;
border: 10px solid #CBD2D7;
margin-bottom: 10px;
-moz-border-radius: 2px;
webkit-border-radius: 2px;
}

.sbarbody {
margin: 0 0 20px 0;
padding: 0;
}

li.sbartitle {
background: #CBD2D7;
text-align: center;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
letter-spacing: 0px;
color: #3858b1;
border: 0;
margin: 0;
padding: 10px;
}

.sbarbody2 {
padding: 0;
font: normal 13px Arial;
color: #484848;
text-align: right;
}

ul.sbarlist sbarcontent {
margin: 0 !important;
padding: 0 !important;
}

li.sbaritem {
text-align: right;
margin: 7px 2px !important;
padding: 3px 5px !important;
border-bottom: 2px solid #CBD2D7 !important;
font: normal 13px Arial;
color: #484848;
}

.tagcategory0, .tagcategory1, .tagcategory2, .tagcategory3, .tagcategory4, .tagcategory5, .tagcategory6, .tagcategory7, .tagcategory8, .tagcategory9 {
font: normal 13px Arial;
}

.sbarbody2 a, .sbarbody2 a:link, li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited,
li.tagcloud a, li.tagcloud a:link, li.tagcloud a:visited {
color: #3858b1 !important;
}

.sbarbody2 a:hover, li.sbaritem a:hover, li.tagcloud a:hover {
color: #5a79ce !important;
text-decoration: none;
}

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

div #sidebar_calendar .sbarcontent {
padding: 0;
}

.sbarcalendar {
text-align: center;
font: normal 15px Calibri;
color: #484848;
padding: 2px 4px;
border: 0;
}

.sbarcalendarposts {
background: #CBD2D7;
padding: 3px;
border: 0;
}

.sbarcalendarposts a,
.sbarcalendarposts a:link,
.sbarcalendarposts a:visited {
text-align: center;
font: bold 15px Calibri;
color: #3858b1 !important;
border: 0;
}

.sbarcalendarposts a:hover {
color: #5a79ce !important;
}

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

#maincontent {
margin: 15px 20px 0 210px;
background: transparent;
border: 0;
}

.subcontent {
margin: 0;
padding: 0;
border:0;
background: transparent;
}

/* ----- content: date & subject ----- */

.datesubject {
background: transparent;
margin: 0;
padding: 0;
}

.date {
background: transparent;
padding: 5px 0;
margin: 0;
color: #A9B4BD;
font: normal 11px Arial;
text-transform: uppercase;
text-align: left;
border: 0;
border-bottom: 2px solid #CBD2D7;
}

.subject,
.replytosubject {
background: transparent;
padding: 5px 0px;
color: #3858b1;
font: bold 15px Calibri, Arial;
text-transform: uppercase;
text-align: left;
border: 0;
}

.subject a, .subject .subj-link, .subject a:link, .subject a:visited,
.replytosubject a, .replytosubject a:link, .replytosubject a:visited {
color: #3858b1;
text-decoration: none;
padding: 0;
margin: 0;
}

.subject a:hover,
.replytosubject a:hover {
color: #5a79ce;
text-decoration: none;
border: 0;
}

/* ----- content: userpic ----- */

.userpic,
.userpicfriends {
background: #fff !important;
border: solid 10px #CBD2D7;
position: relative;
float: right;
margin: 5px 0px 5px 15px;
padding: 4px;
-moz-border-radius: 3px;
webkit-border-radius: 3px;
}

.userpic img,
.userpicfriends img {
width: 70px;
height: 70px;
}

.userpicfriends a font {
font: normal 13px Arial;
color: #3858b1;
}

.userpicfriends a:hover font {
color: #5a79ce;
}

.userpicfriends a:hover {
text-decoration: none !important;
}

/* ----- content: entry ----- */

.entry {
background: transparent;
text-align: justify;
border: 0;
margin: 0;
padding: 0;
font: normal 13px Arial;
line-height: 18px;
color: #484848;
}

.entry img {
max-width: 710px;
}

.lj-view-friends .entry_text {
min-height: 80px !important;
}

.entry_text {
min-height:50px;
}

.entry_text p {
font: normal 13px Arial;
line-height: 18px;
color: #484848;
}

blockquote {
padding: 10px;
margin: 10px 100px;
background: #CBD2D7;
font: normal 13px Calibri, Arial;
-moz-border-radius: 2px;
webkit-border-radius: 2px;
}

/* ---- content: tags & currents ---- */

.ljtags {
margin: 10px 0 5px 0;
font: bold 15px Calibri;
text-transform: uppercase;
}

.ljtags a {
font: normal 13px Arial;
text-transform: lowercase;
}

.ljtags a:hover {
text-decoration: none;
}

.currents {
margin: 0 !important;
padding: 0;
font: normal 13px Arial;
}

.currents strong {
font: bold 15px Calibri;
text-transform: uppercase;
}

.currents a:hover {
text-decoration: none;
}

.currentlocation, .currentmood {
margin: 0 0 5px 0;
font: normal 13px Arial;
}

.currentmusic {
margin: 0;
font: normal 13px Arial;
}

.clear {
height: 0;
}

/* ------- content: comments ------- */

.comments {
background: #CBD2D7;
margin: -5px 0 0 !important;
padding: 5px;
text-align: center;
color: #CBD2D7;
}

.comments a, .comments a:link {
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #3858b1 !important;
}

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

/* ----- content: footer ----- */

#footer {
margin: 0 20px;
border:0;
background: #fff;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #484848;
}

.navfooter a, .navfooter a:link {
color: #3858b1 !important;
}

.navfooter a:hover {
color: #5a79ce;
}

.clearfoot {
background: #fff;
}

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

/* ----- links to posts ----- */

.skiplinks {
color: #fff;
margin: 5px 0;
text-align: left;
font: normal 13px Arial;
}

.skiplinks a {
padding: 0 5px 0 0;
font: normal 13px Arial;
}

.skiplinks a:hover {
text-decoration: none;
}

/* ----- comments ----- */

.box {
border: 0;
padding: 0;
font: normal 13px Arial;
color: #484848;
}

.box center {
font: normal 15px Calibri, Arial;
text-transform: uppercase;
color: #484848;
margin: 0 0 30px 0;
padding: 0;
}

.box center a {
color: #3858b1;
}

.box center a:hover {
color: #5a79ce;
text-decoration: none;
}

.commentbox {
background: transparent;
border: 0;
font: normal 13px Arial;
padding: 0;
margin: 0;
color: transparent;
}

.datesubjectcomment {
background: transparent;
color: #484848;
border: 0;
border-bottom: 2px solid #CBD2D7 !important;
padding: 0 0 5px 0;
margin: 20px 0 0 0;
}

.commentreply {
font: normal 13px Arial;
line-height: 18px;
color: #484848;
text-align: justify;
margin: 5px 0 0;
}

.userpiccomment {
position: relative;
max-width: 70px;
max-height: 70px;
background: #fff;
border: solid 10px #CBD2D7;
float: left;
padding: 4px;
-moz-border-radius: 3px;
webkit-border-radius: 3px;
margin: 0px 10px 0px 0px;
}

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

.commentbox div a:hover,
.commentboxpartial a:hover {
text-decoration: none;
}

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

.commentboxpartial {
margin: 5px 0;
padding: 5px 0;
background: transparent;
border: 0;
}

div.box form table {
border: 0 !important;
margin: 0 0 30px 0;
align: center;
color: #484848;
font: normal 13px Arial;
}

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

.replytoposter {
font: normal 13px Arial;
color: #484848;
}

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

input, textarea, select {
font: normal 13px Arial;
color: #484848;
border: 2px solid #CBD2D7;
background: #e9ecee;
padding: 2px;
margin: 2px;
-moz-border-radius: 2px;
webkit-border-radius: 2px;
}

/* ----- FRIENDS PAGE ----- */

.lj-view-friends .userpicfriends {
color: #484848;
}

.lj-view-friends .userpicfriends a font {
color: #3858b1;
}

.lj-view-friends .userpicfriends a:hover font {
color: #5a79ce;
}

.lj-view-friends .userpicfriends a:hover {
text-decoration: none !important;
}

.lj-view-friends img {
max-width: 710px;
}

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

ul.year {
padding: 0 0 5px 0;
margin-top: 20px;
border-bottom: 2px solid #CBD2D7 !important;
}

ul.year li {
display: inline;
color: #;
padding: 0 10px;

}

ul.year li a {
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #3858b1;
}

ul.year li a:hover {
color: #5a79ce;
text-decoration: none;
}

li.active {
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #484848;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

td.yearmonth {
color: #484848;
padding-bottom: 10px;
font: normal 11px Arial;
text-transform: uppercase;
}

td.yearmonth a:hover {
text-decoration: none;
}

table.yeartable td.yearday {
padding: 5px;
background: #fff;
text-align: center;
color: #484848;
border: 0;
font: bold 15px Calibri, Arial;
text-transform: uppercase;
}

table.yeartable td.yeardate {
font: normal 15px Calibri;
background: transparent;
border: 1px solid #CBD2D7;
color: #484848;
padding: 5px 5px 0 0;
}

table.yeartable td.yeardate a:hover {
text-decoration: none;
}

/* ----- TAGS PAGE ----- */

.lj-view-tags #maincontent {
margin-top: 20px;
}

.lj-view-tags h2 {
padding: 0px 20px 5px 0;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #484848;
border-bottom: 2px solid #CBD2D7 !important;
}

.ljtaglist {
font: normal 13px Arial;
color: #484848;
line-height: 18px;
}

.ljtaglist a {
text-decoration: none;
}

/* ----- MISCELLANEOUS ----- */

/* ----- lj user & images ----- */

.ljuser a b {
font: bold 15px Calibri;
letter-spacing: 0px;
color: #3858b1;
}

.ljuser a:hover {
text-decoration: none;
}

.ljuser a:hover b {
color: #5a79ce !important;
}

img[src*="userinfo.gif"] {
width: 0;
height: 0;
padding: 6px 8px 8px 17px;
background: url(http://ruthenia-alba.webs.com/027london-layout/upload/027london-ljuser.png) no-repeat transparent;
}

img[src*="community.gif"] {
width: 0;
height: 0;
padding: 6px 8px 8px 17px;
background: url(http://ruthenia-alba.webs.com/027london-layout/upload/027london-ljcomm.png) no-repeat transparent;
}

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

div.ContextualPopup img {
border:0 none;
}

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

div.ContextualPopup .Relation {
border: 0;
color: #484848;
font: normal 15px Calibri, Arial;
margin: 2px 0;
padding: 2px 0;
}

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

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

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

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

/* ----- controlstrip ----- */

#lj_controlstrip {
background: #CBD2D7;
height: 40px;
font: normal 12px Arial;
}

#lj_controlstrip_statustext {
color: #484848;
font: normal 12px Arial;
}

#lj_controlstrip a,
#lj_controlstrip a:link,
#lj_controlstrip a:visited {
font: normal 12px Arial;
color: #3858b1;
}

#lj_controlstrip a:hover {
color: #5a79ce;
text-decoration: none;
}

#lj_controlstrip_user,
#lj_controlstrip_actionlinks,
#lj_controlstrip_search,
#lj_controlstrip_login,
#lj_controlstrip_loggedout_userpic {
border-right:0 none;
}

#lj_controlstrip_login td {
border-bottom:0 none;
}

#lj_controlstrip td td {
border-bottom:0 none;
}

#lj_controlstrip input {
background: #e9ecee;
border: 0;
padding: 0 2px 4px 2px;
color:#484848;
height: 18px;
margin: 0px;
}

#lj_controlstrip_search_input_text,
#lj_controlstrip select,
#lj_controlstrip input#xc_user,
#lj_controlstrip input#xc_password,
#lj_controlstrip input#xc_remember {
background:# !important;
border:0 none !important;
}

#lj_controlstrip_search_input_text {
width: 98% !important;
height: 14px !important;
}

Pink version:

/* Layout #27c: Cities. London in pink */
/* Date: November 20, 2010 */
/* S2 Style: Flexible Squares */

/*----- CREDITS -----*/

/* Design & Codes: Ruthenia Alba @ ruthenia-alba.livejournal.com */
/* Header Photo: Wikimedia Commons */
/* Tiny Icons: famfamfam @ famfamfam.com */

/*----- COLORS-----

#d7d0d6 - grey gor borders and fills;
#cc4981 - a links;
#df6f9f - a hover links;
#A9B4BD - date;
#484848 - text;
#e9ecee - textarea & input;
*/

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

body {
margin: 0;
padding: 0;
background: url(http://ruthenia-alba.webs.com/027london-layout/upload/027london-bg-pink.jpg) repeat;
}

/* ----- links ----- */

a, a:link {
color: #cc4981;
}

a:hover {
color: #df6f9f;
}

a:visited {
color: #A9B4BD;
}

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

.title {
border: 0;
position: absolute;
align: center;
width: 900px;
margin: 80px 20px 0 20px;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
letter-spacing: 1px;
color: #cc4981;
}

.subtitle {
display: none;
}

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

#content {
border: solid 5px #d7d0d6;
padding: 0;
margin: 40px auto;
width: 940px;
background: #fff;
-moz-border-radius: 4px;
webkit-border-radius: 4px;
}

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

#header {
margin: 0;
border: 0;
background: url(http://ruthenia-alba.webs.com/027london-layout/upload/027london-header-pink.jpg) no-repeat;
height: 378px;
}

/* ----- navigation ----- */

ul.navheader {
background: #d7d0d6;
margin: 377px 20px 0 20px;
padding: 6px 0;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 0;
color: #484848;
}

ul.navheader li {
}

ul.navheader a,
ul.navheader a:link,
ul.navheader a:visited {
color: #cc4981 !important;
}

ul.navheader a:hover {
color: #df6f9f !important;
}

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

#sidebar {
float: left;
background: #fff;
border: 0;
margin: 20px 10px 0 20px;
padding: 0;
width: 170px;
font: normal 13px Arial;
}

.defaultuserpic img {
background: #fff;
padding: 5px;
border: 10px solid #d7d0d6;
margin-bottom: 10px;
-moz-border-radius: 2px;
webkit-border-radius: 2px;
}

.sbarbody {
margin: 0 0 20px 0;
padding: 0;
}

li.sbartitle {
background: #d7d0d6;
text-align: center;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
letter-spacing: 0px;
color: #cc4981;
border: 0;
margin: 0;
padding: 10px;
}

.sbarbody2 {
padding: 0;
font: normal 13px Arial;
color: #484848;
text-align: right;
}

ul.sbarlist sbarcontent {
margin: 0 !important;
padding: 0 !important;
}

li.sbaritem {
text-align: right;
margin: 7px 2px !important;
padding: 3px 5px !important;
border-bottom: 2px solid #d7d0d6 !important;
font: normal 13px Arial;
color: #484848;
}

.tagcategory0, .tagcategory1, .tagcategory2, .tagcategory3, .tagcategory4, .tagcategory5, .tagcategory6, .tagcategory7, .tagcategory8, .tagcategory9 {
font: normal 13px Arial;
}

.sbarbody2 a, .sbarbody2 a:link, li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited,
li.tagcloud a, li.tagcloud a:link, li.tagcloud a:visited {
color: #cc4981 !important;
}

.sbarbody2 a:hover, li.sbaritem a:hover, li.tagcloud a:hover {
color: #df6f9f !important;
text-decoration: none;
}

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

div #sidebar_calendar .sbarcontent {
padding: 0;
}

.sbarcalendar {
text-align: center;
font: normal 15px Calibri;
color: #484848;
padding: 2px 4px;
border: 0;
}

.sbarcalendarposts {
background: #d7d0d6;
padding: 3px;
border: 0;
}

.sbarcalendarposts a,
.sbarcalendarposts a:link,
.sbarcalendarposts a:visited {
text-align: center;
font: bold 15px Calibri;
color: #cc4981 !important;
border: 0;
}

.sbarcalendarposts a:hover {
color: #df6f9f !important;
}

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

#maincontent {
margin: 15px 20px 0 210px;
background: transparent;
border: 0;
}

.subcontent {
margin: 0;
padding: 0;
border:0;
background: transparent;
}

/* ----- content: date & subject ----- */

.datesubject {
background: transparent;
margin: 0;
padding: 0;
}

.date {
background: transparent;
padding: 5px 0;
margin: 0;
color: #A9B4BD;
font: normal 11px Arial;
text-transform: uppercase;
text-align: left;
border: 0;
border-bottom: 2px solid #d7d0d6;
}

.subject,
.replytosubject {
background: transparent;
padding: 5px 0px;
color: #cc4981;
font: bold 15px Calibri, Arial;
text-transform: uppercase;
text-align: left;
border: 0;
}

.subject a, .subject .subj-link, .subject a:link, .subject a:visited,
.replytosubject a, .replytosubject a:link, .replytosubject a:visited {
color: #cc4981;
text-decoration: none;
padding: 0;
margin: 0;
}

.subject a:hover,
.replytosubject a:hover {
color: #df6f9f;
text-decoration: none;
border: 0;
}

/* ----- content: userpic ----- */

.userpic,
.userpicfriends {
background: #fff !important;
border: solid 10px #d7d0d6;
position: relative;
float: right;
margin: 5px 0px 5px 15px;
padding: 4px;
-moz-border-radius: 3px;
webkit-border-radius: 3px;
}

.userpic img,
.userpicfriends img {
width: 70px;
height: 70px;
}

.userpicfriends a font {
font: normal 13px Arial;
color: #cc4981;
}

.userpicfriends a:hover font {
color: #df6f9f;
}

.userpicfriends a:hover {
text-decoration: none !important;
}

/* ----- content: entry ----- */

.entry {
background: transparent;
text-align: justify;
border: 0;
margin: 0;
padding: 0;
font: normal 13px Arial;
line-height: 18px;
color: #484848;
}

.entry img {
max-width: 710px;
}

.lj-view-friends .entry_text {
min-height: 80px !important;
}

.entry_text {
min-height:50px;
}

.entry_text p {
font: normal 13px Arial;
line-height: 18px;
color: #484848;
}

blockquote {
padding: 10px;
margin: 10px 100px;
background: #d7d0d6;
font: normal 13px Calibri, Arial;
-moz-border-radius: 2px;
webkit-border-radius: 2px;
}

/* ---- content: tags & currents ---- */

.ljtags {
margin: 10px 0 5px 0;
font: bold 15px Calibri;
text-transform: uppercase;
}

.ljtags a {
font: normal 13px Arial;
text-transform: lowercase;
}

.ljtags a:hover {
text-decoration: none;
}

.currents {
margin: 0 !important;
padding: 0;
font: normal 13px Arial;
}

.currents strong {
font: bold 15px Calibri;
text-transform: uppercase;
}

.currents a:hover {
text-decoration: none;
}

.currentlocation, .currentmood {
margin: 0 0 5px 0;
font: normal 13px Arial;
}

.currentmusic {
margin: 0;
font: normal 13px Arial;
}

.clear {
height: 0;
}

/* ------- content: comments ------- */

.comments {
background: #d7d0d6;
margin: -5px 0 0 !important;
padding: 5px;
text-align: center;
color: #d7d0d6;
}

.comments a, .comments a:link {
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #cc4981 !important;
}

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

/* ----- content: footer ----- */

#footer {
margin: 0 20px;
border:0;
background: #fff;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #484848;
}

.navfooter a, .navfooter a:link {
color: #cc4981 !important;
}

.navfooter a:hover {
color: #df6f9f;
}

.clearfoot {
background: #fff;
}

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

/* ----- links to posts ----- */

.skiplinks {
color: #fff;
margin: 5px 0;
text-align: left;
font: normal 13px Arial;
}

.skiplinks a {
padding: 0 5px 0 0;
font: normal 13px Arial;
}

.skiplinks a:hover {
text-decoration: none;
}

/* ----- comments ----- */

.box {
border: 0;
padding: 0;
font: normal 13px Arial;
color: #484848;
}

.box center {
font: normal 15px Calibri, Arial;
text-transform: uppercase;
color: #484848;
margin: 0 0 30px 0;
padding: 0;
}

.box center a {
color: #cc4981;
}

.box center a:hover {
color: #df6f9f;
text-decoration: none;
}

.commentbox {
background: transparent;
border: 0;
font: normal 13px Arial;
padding: 0;
margin: 0;
color: transparent;
}

.datesubjectcomment {
background: transparent;
color: #484848;
border: 0;
border-bottom: 2px solid #d7d0d6 !important;
padding: 0 0 5px 0;
margin: 20px 0 0 0;
}

.commentreply {
font: normal 13px Arial;
line-height: 18px;
color: #484848;
text-align: justify;
margin: 5px 0 0;
}

.userpiccomment {
position: relative;
max-width: 70px;
max-height: 70px;
background: #fff;
border: solid 10px #d7d0d6;
float: left;
padding: 4px;
-moz-border-radius: 3px;
webkit-border-radius: 3px;
margin: 0px 10px 0px 0px;
}

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

.commentbox div a:hover,
.commentboxpartial a:hover {
text-decoration: none;
}

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

.commentboxpartial {
margin: 5px 0;
padding: 5px 0;
background: transparent;
border: 0;
}

div.box form table {
border: 0 !important;
margin: 0 0 30px 0;
align: center;
color: #484848;
font: normal 13px Arial;
}

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

.replytoposter {
font: normal 13px Arial;
color: #484848;
}

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

input, textarea, select {
font: normal 13px Arial;
color: #484848;
border: 2px solid #d7d0d6;
background: #e9ecee;
padding: 2px;
margin: 2px;
-moz-border-radius: 2px;
webkit-border-radius: 2px;
}

/* ----- FRIENDS PAGE ----- */

.lj-view-friends .userpicfriends {
color: #484848;
}

.lj-view-friends .userpicfriends a font {
color: #cc4981;
}

.lj-view-friends .userpicfriends a:hover font {
color: #df6f9f;
}

.lj-view-friends .userpicfriends a:hover {
text-decoration: none !important;
}

.lj-view-friends img {
max-width: 710px;
}

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

ul.year {
padding: 0 0 5px 0;
margin-top: 20px;
border-bottom: 2px solid #d7d0d6 !important;
}

ul.year li {
display: inline;
color: #;
padding: 0 10px;

}

ul.year li a {
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #cc4981;
}

ul.year li a:hover {
color: #df6f9f;
text-decoration: none;
}

li.active {
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #484848;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

td.yearmonth {
color: #484848;
padding-bottom: 10px;
font: normal 11px Arial;
text-transform: uppercase;
}

td.yearmonth a:hover {
text-decoration: none;
}

table.yeartable td.yearday {
padding: 5px;
background: #fff;
text-align: center;
color: #484848;
border: 0;
font: bold 15px Calibri, Arial;
text-transform: uppercase;
}

table.yeartable td.yeardate {
font: normal 15px Calibri;
background: transparent;
border: 1px solid #d7d0d6;
color: #484848;
padding: 5px 5px 0 0;
}

table.yeartable td.yeardate a:hover {
text-decoration: none;
}

/* ----- TAGS PAGE ----- */

.lj-view-tags #maincontent {
margin-top: 20px;
}

.lj-view-tags h2 {
padding: 0px 20px 5px 0;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #484848;
border-bottom: 2px solid #d7d0d6 !important;
}

.ljtaglist {
font: normal 13px Arial;
color: #484848;
line-height: 18px;
}

.ljtaglist a {
text-decoration: none;
}

/* ----- MISCELLANEOUS ----- */

/* ----- lj user & images ----- */

.ljuser a b {
font: bold 15px Calibri;
letter-spacing: 0px;
color: #cc4981;
}

.ljuser a:hover {
text-decoration: none;
}

.ljuser a:hover b {
color: #df6f9f !important;
}

img[src*="userinfo.gif"] {
width: 0;
height: 0;
padding: 6px 8px 8px 17px;
background: url(http://ruthenia-alba.webs.com/027london-layout/upload/027london-ljuser.png) no-repeat transparent;
}

img[src*="community.gif"] {
width: 0;
height: 0;
padding: 6px 8px 8px 17px;
background: url(http://ruthenia-alba.webs.com/027london-layout/upload/027london-ljcomm.png) no-repeat transparent;
}

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

div.ContextualPopup img {
border:0 none;
}

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

div.ContextualPopup .Relation {
border: 0;
color: #484848;
font: normal 15px Calibri, Arial;
margin: 2px 0;
padding: 2px 0;
}

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

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

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

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

/* ----- controlstrip ----- */

#lj_controlstrip {
background: #d7d0d6;
height: 40px;
font: normal 12px Arial;
}

#lj_controlstrip_statustext {
color: #484848;
font: normal 12px Arial;
}

#lj_controlstrip a,
#lj_controlstrip a:link,
#lj_controlstrip a:visited {
font: normal 12px Arial;
color: #cc4981;
}

#lj_controlstrip a:hover {
color: #df6f9f;
text-decoration: none;
}

#lj_controlstrip_user,
#lj_controlstrip_actionlinks,
#lj_controlstrip_search,
#lj_controlstrip_login,
#lj_controlstrip_loggedout_userpic {
border-right:0 none;
}

#lj_controlstrip_login td {
border-bottom:0 none;
}

#lj_controlstrip td td {
border-bottom:0 none;
}

#lj_controlstrip input {
background: #e9ecee;
border: 0;
padding: 0 2px 4px 2px;
color:#484848;
height: 18px;
margin: 0px;
}

#lj_controlstrip_search_input_text,
#lj_controlstrip select,
#lj_controlstrip input#xc_user,
#lj_controlstrip input#xc_password,
#lj_controlstrip input#xc_remember {
background:# !important;
border:0 none !important;
}

#lj_controlstrip_search_input_text {
width: 98% !important;
height: 14px !important;
}

P.S. I do not update this post, for all bug fixes check out the native post at my LJ.