Layout Post #11: Round & Round

[causefire]

Style: S2 Flexible Squares
Account: Basic, Plus & Paid
Browser: IE,Firefox & Safari {round edges only for Firefox}



image preview | live preview



/* Cleaned CSS: */
/*------------------------------------------------------------------
S2 Flexible Squares
Layout by muddi88 @ http://community.livejournal.com/xaddictionsx/
PLEASE DO NOT REMOVE THIS SECTION
--------------------------------------------------------------------*/

body {
background-color: #000000;
color: #a4a4a4;
font-family: arial;
font-size: 8.5pt;
line-height:140%;
text-align: justify;
}

a, a:link, a:visited, a:active{ color: #d77373; text-decoration: none;}

a:hover{ color: #a4a4a4; }

blockquote {
background-color: #ffffff;
padding: 10px;
margin: 7px;
color: #a4a4a4;
text-align: justify;
border: 1px solid #ececec;
}

strong, b { color: #d77373; font-weight: bold;}

em, i { color:#d77373;}

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

/*-------------------------------
general
-------------------------------*/

#content {
width: 800px;
margin-left: auto; margin-right: auto;
background-color: transparent;
}

#maincontent {
margin-left: auto;
margin-right: auto;
text-align: justify;
float: right;
background-color: #000000;
padding: 5px;
width: 600px;
}

.subcontent {
background-color: #ffffff;
border: 1px solid #dddddd;
-moz-border-radius-topleft: 2%;
-moz-border-radius-topright: 2%;
-moz-border-radius-bottomleft: 2%;
-moz-border-radius-bottomright: 2%;
margin-top: 20px;
padding: 5px 0 5px 0;
}

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

#header{ display: none;
background-color: #ffffff;
padding: 15px 0 15px 0;
margin: 0px 5px 0px 5px;
float: right;
width: 600px;
border: 1px solid #dddddd;
-moz-border-radius-topleft: 2%;
-moz-border-radius-topright: 2%;
-moz-border-radius-bottomleft: 2%;
-moz-border-radius-bottomright: 2%;
text-align:center;
text-transform:lowercase;
letter-spacing: -1px;
font-family:georgia;
font-size:18pt;
}

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

div#header a:hover {
color: #a4a4a4;
}

ul.navheader{
padding: 0 0px 0 0px;
margin: 0 0px 0 0px; }

ul.navheader li {
display:inline;
}

/*-------------------------------
title, subtitle
-------------------------------*/

.title, .subtitle {
display: none;
}

/*-------------------------------
footer
-------------------------------*/

#footer {
background-color: transparent;
margin-top: -50px;
text-transform:lowercase;
letter-spacing: -1px;
font-family:georgia;
font-size:18pt;
padding: 5px;
float: right;
text-align: right;
}

div#footer a, div#footer a:link, div#footer a:visited {
color:#888;
}

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

ul.navfooter{
padding: 5px 0px 5px 0px;
margin: 0px 0px 0px 0px;
}

ul.navfooter li {
display: block;
}

.clearfoot {
clear: both;
}

#footer .viewing {
display:none;
}

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

#sidebar {
width: 150px;
margin: 0px 0 0px 0;
background-color: #000000;
color: #a4a4a4;
font: 7.5pt arial, sans-serif;
line-height:140%;
float: left;
text-align: right;
padding: 5px;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #d77373;
}

div#sidebar a:hover {
color: #dddddd;
text-decoration: none;
}

.defaultuserpic {
display: none;
}

.sbarheader, .sbarbody {
padding: 0px 10px 0px 10px;
margin: 20px 0 20px 0;
}

.sbarbody2 {

margin: 20px 0 0 0;
padding: 0px 10px 0px 10px;
}

table.calendar {
width: 80%;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
font: 7pt arial, sans-serif;
text-align: center;
border-color: #202020;
border-width: 1px;
border-style: solid;
}

.sbarcalendarposts {
background-color: #232323;
font: 8.5pt arial, sans-serif;
text-align: center;
border-width: 1px;
border-color: #202020;
border-style: solid;
}

ul.sbarlist {
margin: 0px;
padding: 0px;
list-style: circle;
}

li.sbaritem {
padding: 5px 10px 0 10px;
list-style: none;
line-height: 15px;

border-bottom: 1px solid #1c1c1c;
}

li.sbartitle {
padding: 5px 5px 5px 5px;
margin: 0px 0px 0px 0px;
list-style: none;
background-color: #000000;
text-align: left;
color: #a4a4a4;
font-weight: normal;
font-family:"georgia" Helvetica;
text-transform:lowercase;
font-size: 10pt;
letter-spacing: 0px;
}

/*-------------------------------
entries
-------------------------------*/

.entry {
padding: 10px 20px 5px 20px;
margin: 0px 0 0px 0;
background-color: transparent;
text-align: justify;
letter-spacing: 0px;
}

.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

.userpic {
margin: 10px 10px 10px 10px;
position: relative;
float: right;
background-color: transparent !important;
z-index: 15;
}

.userpic img, .userpicfriends img {
padding:5px;
border: 1px solid #ececec;
}

.userpicfriends {
margin: 10px 10px 10px 10px;
position: relative;
float: right;
background-color: transparent !important;
z-index: 15;
text-align: center;
}

.userpicfriends a font {
color: #8d8d8d;
}

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

.date {
padding: 5px 0px 3px 0;
margin-left: 20px;
top: 5px;
color: #a4a4a4;
font: 7pt georgia;
text-align: left;
}

.subject {
padding: 0px 0px 2px 0;
margin-left: 20px;
color: #a4a4a4;
text-transform:lowercase;
letter-spacing: -1px;
text-align: left;
font-size:18pt;
font-family:georgia;
line-height:14pt;

}

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

.subject a:hover {
color: #777777;
}

.datesubject {
margin: 0px 0 0px 0;
padding: 5px 0 5px 0;
background-color: #ffffff;
}

/*-------------------------------
currents, tags, comment links
-------------------------------*/

.currentmood {
background:url(http://i35.tinypic.com/2n8y2vq.jpg) no-repeat left center;
padding:0px 0px 0px 10px;
font-family: arial;
font-size: 7.5pt;
}

.currentmusic {
background:url(http://i37.tinypic.com/2aivdx.jpg) no-repeat left center;
padding:0px 0px 0px 10px;
font-family: arial;
font-size: 7.5pt;
}

currentlocation {
display: none;
}

.currents strong {
display: none;
}

.comments {
padding: 10px 0 10px 0;
position: relative;
background-color: transparent;
font: 9pt georgia, sans-serif;
color: #a4a4a4;
text-transform: uppercase;

text-align: right;

}

div.comments a, div.comments a:link, div.comments a:visited {
color: #db7f7f;
}

div.comments a:hover {
color: #585858;
text-decoration: none;
}

.ljtags {
background:url(http://i34.tinypic.com/2s1kxlx.jpg) no-repeat left center;
padding:0px 0px 0px 10px;
margin:30px 0px 0px 0px;
text-transform: lowercase;
font-family: arial;
font-size: 7.5pt;
}

div.ljtags a, div.ljtags a:link, div.ljtags a:visited {
color: #a4a4a4;
}

div.ljtags a:hover {
color: #585858;
text-decoration: none;
}

/*-------------------------------
comment pages
-------------------------------*/

.box {
padding: 10px;
clear: left;
width: 600px;
}

.skiplinks {

text-align: center;
margin-top: 10px;
}

div.skiplinks a, div.skiplinks a:link, div.skiplinks a:visited {
color: #888;
}

div.skiplinks a:hover {
color: #d77373;
text-decoration: none;
}

.datesubjectcomment {
padding: 5px;
margin-top: 20px;
color: #a4a4a4;
background-color: #ffffff;

}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #888;}

.datesubjectcomment a:hover {
color: #5975bb;

}

.userpiccomment {
padding: 5px;
margin-right: 10px;
position: relative;
float: left;
background-color: transparent !important;
border: 1px solid #ececec;
z-index: 15;
}

input, textarea {
font-family: arial;
font-size: 10px;
background-color: #ececec;
color: #a4a4a4;
border: 1px solid #a4a4a4;
-moz-border-radius-topleft: 2%;
-moz-border-radius-topright: 2%;
-moz-border-radius-bottomleft: 2%;
-moz-border-radius-bottomright: 2%;
}

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

.reply {
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
position: relative;
background-color: transparent;
color: #a4a4a4;
font: 7.5pt arial, sans-serif;
line-height:140%;
text-align: justify;
}

.replytosubject {
background-color: #ececec;
color: #8d8d8d;
font-weight: bold;
}

.commentreply {
margin: 10px;
position: relative;
color: #a4a4a4;
font: 7.5pt arial, sans-serif;
line-height:140%;
text-align: justify;

}

.commentbox {
padding: 10px;
margin: 10px;
background-color: #ffffff;
border: 1px solid #dddddd;
-moz-border-radius-topleft: 2%; -moz-border-radius-topright: 2%;
-moz-border-radius-bottomleft: 2%;
-moz-border-radius-bottomright: 2%;
}

.commentboxpartial {
color: #a4a4a4;
padding: 3px;
margin: 5px;
background-color: #1c1c1c;
-moz-border-radius-topleft: 2%;
-moz-border-radius-topright: 2%;
-moz-border-radius-bottomleft: 2%;
-moz-border-radius-bottomright: 2%;
}

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

/*-------------------------------
year/archive page
-------------------------------*/

ul.year {
text-align: center;
padding-bottom: 20px;
}

ul.year li {
display: inline;
}

table.yeartable {
background-color: #202020;
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #202020;
border-color: #232323;
border-width: 1px;
border-style: solid;
text-align: center;
color: #a4a4a4;
}

table.yeartable td.yearday {
background-color: #d77373;
text-align: center;
color:#585858;
}

td.yearmonth {
border-style: none;
}

/*-------------------------------
tags page
-------------------------------*/

.ljtaglist {
margin: 20px 20px 20px 20px;
padding: 10px 40px 10px 40px;
background-color: #202020;
list-style-type:circle;
color: #a4a4a4;
}

h2 {
display: none;
}

/*-------------------------------
misc
-------------------------------*/

.separator {
height: 40px;
background-color: transparent;
}

.clear {
display: none;
}

#lj_controlstrip td {
background-color: #000000 !important;
}

#lj_controlstrip a {
font-family: arial !important;
font-size: 10px;
color: #ececec!important;
text-transform: lowercase;
}

/*--------------------------------
Headerimage - Don't forget to change width and height!
-------------------------------*/

.headerimage {
position: relative;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("URL HERE");
background-repeat: no-repeat;
}

/*--------------------------------
tiny icons - made by damnicons
-------------------------------*/

.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 12px 9px 0px 0px !important;

background: url(http://i30.tinypic.com/34j6o3t.gif);
}

.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 9px 9px 0px 0px !important;
background: url(http://i32.tinypic.com/2nrdcsi.gif);
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(http://i31.tinypic.com/2l95dop.gif);
padding: 12px 7px 0 2px !important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i31.tinypic.com/2l95dop.gif);
padding: 12px 7px 0 2px !important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i26.tinypic.com/a0guhe.gif);
padding: 11px 11px 0 2px !important;
}

Uploading Instructions:

- Go to your Customize page and switch to S2 (if you're using S1).
- Press "Select a New Theme" and type "Flexible Squares" in the search box and select a theme.
- Scroll down to "Choose a Page Setup", and set to sidebar on left.
- Press the "Customize Selected Theme" button.
- Now click "Custom CSS" and change "Use layout's stylesheet(s)" to "no".
- Copy&paste the the css into the "Custom stylesheet" box.
(Don't forget to press the "Save changes" button!)

Rules:
- Credit muddi88 or xaddictionsx when using!
- Feel free to change colors and anything else
- Comments are love! ♥ :D
- FRIEND xaddictionsx for updates!