Spring Love

[artphilia]

Title: Spring Love
System: s2
Theme: Flexible Squares
Account: free, plus & paid
Header: no
Browser: Chrome, Firefox & IE (others unknown!)
Download: ZIP
Preview: Screenshot or live @ cssbox



/*
Original stylesheet by Nadia @ a r t p h i l i a @ lj.com
Downloaded from: c s s b o x @ lj.com
Style System: S2
Theme: Flexible Squares
Account: Plus or Paid
*/

@font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: 300;
src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url('http://themes.googleusercontent.com/static/fonts/opensanscondensed/v4/gk5FxslNkTTHtojXrkp-xMTgyteJAvYJ1fpbrx49ekQ.woff') format('woff');
}

html, body {
height: 100%;
}

* {
margin: 0;
padding: 0;
}

body {
color: #717171;
font-family: Calibri, Tahoma, Verdana, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
background-color: #EEEEE6;
background-image: url(http://i248.photobucket.com/albums/gg197/artphilia/livejournal/ljbg.png);
background-repeat: repeat;
}

a, a:visited, a:active {
color: #8acf1e;
text-decoration: none;
font-weight: normal !important;
}
a:hover {
color: #e7e02b;
}

p, td {
font-size: 12px;
}
table {
border: 1px solid transparent !important;
}

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

blockquote {
margin: 15px;
padding: 5px 15px 20px 15px;
font-size: 11px;
font-family: Consolas, Inconsolata, Monaco, monospace;
border: 1px solid #eee;
background-color: #f3f3f3;
text-align: justify;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/

#content {
width: 900px;
margin: 0 auto;
padding: 0;
background-color: transparent;
}

#maincontent {
margin-right: 250px;
background-color: transparent;
border: 0 solid #fff;
}

#sidebar {
text-align: justify;
position: relative;
width: 250px;
padding: 10px;
margin: 0;
float: right;
background-color: #fafafa;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
#sidebar:before, #sidebar:after {
position: absolute;
width: 40%;
height: 10px;
content: ' ';
left: 12px;
bottom: 12px;
background-color: transparent;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
z-index: -1;
-webkit-border-bottom-right-radius: 30px;
-moz-border-bottom-right-radius: 30px;
border-bottom-right-radius: 30px;
}
#sidebar:after {
left: auto;
right: 12px;
-webkit-transform: skew(5deg) rotate(5deg);
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
transform: skew(5deg) rotate(5deg);
}

.subcontent {
text-align: justify;
position: relative;
width: 500px;
padding: 50px;
margin: 0 auto;
background-color: #fafafa;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
.subcontent:before, .subcontent:after {
position: absolute;
width: 40%;
height: 10px;
content: ' ';
left: 12px;
bottom: 12px;
background-color: transparent;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
z-index: -1;
}
.subcontent:after {
left: auto;
right: 12px;
-webkit-transform: skew(5deg) rotate(5deg);
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
transform: skew(5deg) rotate(5deg);
}

#header {
margin: 0 auto;
}

/*-----------------------------------------------------------------------------
Header/Footer - navigation
--------------------------------------------------------------------------------*/

ul.navheader {
padding: 5px 0 15px 0;
background-color: transparent;
margin: 0 0 20px 0;
text-align: center;
}

ul.navheader li {
display: inline;
font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: normal;
font-style: none;
text-transform: uppercase;
text-decoration: none;
padding: 12px 20px 12px 10px;
margin: 0 0 50px 0;
text-shadow: 1px 1px #fff;
}

.view {
padding: 12px 20px 12px 10px;
margin: 0 0 50px 0;
color: #717171;
text-shadow: 1px 1px #fff;
}

/* look and color of links top menu & footer menu */
div#header a, div#header a:active, div#header a:visited {
color: #8acf1e;
}

div#header a:hover, div#footer a:hover {
color: #e7e02b;
}

div#footer a, div#footer a:active, div#footer a:visited {
color: #8acf1e;
}
div#footer a:hover {
color: #e7e02b;
}

.title, .subtitle {
display: none;
}

/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/

.entry {
}

.date {
margin: 0;
padding: 0;
font-size: 10px;
text-align: center;
color: #717171;
background-color: transparent;
}

.subject {
margin: 0 0 10px 0;
padding: 0;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 22px;
font-weight: normal;
text-align: center;
text-transform: none;
background-color: transparent;
border-bottom: 1px solid #eaeaea;
}

.subject a, .subject a:active, .subject a:visited {
color: #8acf1e;
text-decoration: none;
}

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

.datesubject {
background-color: transparent;
padding: 5px;
}

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

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

/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
border-top: 1px solid #eaeaea;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 22px;
background-color: transparent;
color: #fff;
margin: 5px 0;
position: relative;
}
div.comments a, div.comments a:active, div.comments a:visited {
padding: 0 10px 5px 10px;
color: #8acf1e;
text-decoration: none;
}
div.comments a:hover {
color: #e7e02b;
text-decoration: none;
}

/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/

.separator {
height: 35px;
}

/*------------------------------------------------------------
Userpic/Usericon customization
-------------------------------------------------------------------------------*/

/*------------------------------------------------------------
Userpic/Usericon customization
-------------------------------------------------------------------------------*/
.userpic, .userpicfriends {
text-align: center !important;
font-size: 10px !important;
background-color: transparent !important;
margin: -50px 0 10px -165px;
position: relative;
float: left;
padding: 5px;
z-index: 15;
}

.userpic img, .userpicfriends img {
-webkit-border-radius: 5px 35px;
-moz-border-radius: 5px 35px;
border-radius: 5px 35px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
box-shadow: 0 3px 6px rgba(0,0,0,.25);
}

.userpiccomment {
-webkit-border-radius: 5px 35px;
-moz-border-radius: 5px 35px;
border-radius: 5px 35px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
box-shadow: 0 3px 6px rgba(0,0,0,.25);
margin: -50px 0 0 -160px;
position: relative;
float: left;
padding: 0;
z-index: 15;
}

.userpicfriends a font, .userpicfriends a:active font, .userpicfriends a:visited font {
color: #8acf1e !important;
font-family: Calibri, Tahoma, Verdana, Helvetica, sans-serif !important;
font-size: 10px !important;
text-align: center !important;
}

.userpicfriends a:hover font {
color: #e7e02b;
text-decoration: none;
text-align: center !important;
}

/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/

.defaultuserpic {
text-align: center;
display: none;
}

.sbarheader {
padding: 5px;
}

.sbarbody, .sbarbody2 {
padding: 5px;
}

div#sidebar a, div#sidebar a:active, div#sidebar a:visited {
color: #8acf1e;
}

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

/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/

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

.sbarcalendar {
border: 1px solid #eee;
background-color: #f3f3f3;
text-align: center;
font-family: Calibri, Tahoma, Verdana, Helvetica, sans-serif;
font-size: 9px;
padding: 2px 8px;
}

.sbarcalendarposts {
border: 1px solid #eee;
background-color: #f3f3f3;
text-align: center;
font-family: Calibri, Tahoma, Verdana, Helvetica, sans-serif;
font-size: 9px;
padding: 2px 8px;
}

/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/

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

li.sbaritem a, li.sbaritem a:active, li.sbaritem a:visited {
list-style: none;
display: block;
text-align: left;
letter-spacing: 3px;
text-transform: lowercase;
padding: 4px;
margin-top: 2px;
font-size: 11px;
}

li.sbaritem a:hover {
padding: 4px;
margin-top: 2px;
font-size: 11px;
color: #717171;
}

li.sbartitle {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 22px;
border-bottom: 1px dashed #D3D3D3;
color: #717171;
background-color: transparent;
margin-top: 10px;
text-align: center;
text-transform: uppercase;
font-weight: normal;
}

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

#footer {
width: 100%;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 20px;
text-align: center;
font-weight: normal;
letter-spacing: 1px;
background-color: transparent;
color: #717171;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0;
margin: 0;
}
ul.navfooter li {
display: inline;
margin: 0 5px;
}
.clearfoot {
clear: both;
}

/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/

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

ul.year li {
display: inline;
}

table.yeartable {
text-align: justify;
position: relative;
width: 500px;
padding: 50px;
margin: 0 auto;
background-color: #fff;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
table.yeartable:before, table.yeartable:after {
position: absolute;
width: 40%;
height: 10px;
content: ' ';
left: 12px;
bottom: 12px;
background: transparent;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
z-index: -1;
}
table.yeartable:after {
left: auto;
right: 12px;
-webkit-transform: skew(5deg) rotate(5deg);
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
transform: skew(5deg) rotate(5deg);
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px solid #d3d3d3;
}

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

td.yearmonth {
border-style: none;
}

/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/

.datesubjectcomment {
background-color: transparent;
padding: 0;
margin: 0;
}

input, textarea, select {
background-color: #fff;
font-size: 11px;
font-family: Consolas, Inconsolata, Monaco, monospace;
color: #717171;
border: 1px solid #D3D3D3;
padding: 2px;
margin: 0;
}
option {
background-color: #fff;
font-size: 11px;
font-family: Consolas, Inconsolata, Monaco, monospace;
color: #717171;
border: 0;
padding: 2px;
margin: 0;
}
textarea.textbox {
width: 100% !important;
}

.reply {
position: relative;
margin: 0;
padding: 0;
text-align: justify;
background-color: transparent;
}
.replytosubject {
font-weight: normal;
}
.commentreply {
position: relative;
margin: 10px;
}

.commentbox {
position: relative;
width: 500px;
padding: 50px;
margin-top: 10px;
margin-right: auto !important;
margin-bottom: 10px;
margin-left: auto !important;
background-color: #fff;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
.commentbox:before, .commentbox:after {
position: absolute;
width: 40%;
height: 10px;
content: ' ';
left: 12px;
bottom: 12px;
background: transparent;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
z-index: -1;
}
.commentbox:after {
left: auto;
right: 12px;
-webkit-transform: skew(5deg) rotate(5deg);
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
transform: skew(5deg) rotate(5deg);
}

.datesubjectcomment a, datesubjectcomment a:active, .datesubjectcomment a:visited {
color: #8acf1e;
text-decoration: none;
}

.datesubjectcomment a:hover {
color: #e7e02b;
}

.commentinfo {
background-color: #fff;
margin-top: 10px;
width: 90%;
}

.skiplinks {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 20px;
text-align: center;
color: #D3D3D3;
}

/*--------------------------------------------
Misc
-----------------------------------------*/

.clear {
height: 15px;
}

/*--------------------------------------------
Custom Userpics
-----------------------------------------*/

/* --- User icons --- */
.ljuser img[src*="userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background-color: transparent !important;
background-image: url(http://i248.photobucket.com/albums/gg197/artphilia/livejournal/user_zpsa138e9ac.png);
padding: 0 0 16px 17px !important;
background-repeat: no-repeat;
background-position: left center;
}

/* --- Community icons --- */
.ljuser img[src*="community.gif"] {
width: 0 !important;
height: 0 !important;
background-color: transparent !important;
background-image: url(http://i248.photobucket.com/albums/gg197/artphilia/livejournal/comm_zpsdbc7fad8.png);
padding: 0 0 16px 18px !important;
background-repeat: no-repeat;
background-position: left center;
}

/* --- Lock icons --- */
.subject img[src*="icon_protected.gif"], .summaryList img[src*="icon_protected.gif"] {
width: 0 !important;
height: 0 !important;
background-image: url(http://i248.photobucket.com/albums/gg197/artphilia/livejournal/tinyicons/key.png);
padding: 6px 8px 10px 10px !important;
background-repeat: no-repeat;
position: left middle;
}

/* --- Sticky icons --- */
.subject img[src*="icon_sticky.png"], .summaryList img[src*="icon_sticky.png"] {
width: 0 !important;
height: 0 !important;
background-image: url(http://i248.photobucket.com/albums/gg197/artphilia/livejournal/pin_zps4880d822.png);
padding: 2px 11px 12px 4px !important;
background-repeat: no-repeat;
position: left middle;
z-index: 15;
}

/*---------------------------------------------------------------------
Entry Stuff - Currents, Tags
------------------------------------------------------------------------*/
.ljtags {
margin-top: 15px;
margin-bottom: -15px;
padding: 1px;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
text-transform: uppercase;
font-size: 10px;
}

.currents strong {
font-weight: normal;
}

.currents, .currentmusic, .currentmood, .currentlocation {
padding: 10px 0;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
text-transform: uppercase;
font-size: 10px;
display: block;
margin: -15px 0 0 0;
}

********* R E A D M E *********

* Please upload ALL images from the zip to your own host i.e. photobucket.com, flickr.com or imageshack.us
* Open the css.txt with your texteditor and search for the following urls and replace them with your own. I won't host the images for you. Thanks!
- http://i248.photobucket.com/albums/gg197/artphilia/livejournal/user_zpsa138e9ac.png
- http://i248.photobucket.com/albums/gg197/artphilia/livejournal/comm_zpsdbc7fad8.png
- http://i248.photobucket.com/albums/gg197/artphilia/livejournal/tinyicons/key.png
- http://i248.photobucket.com/albums/gg197/artphilia/livejournal/pin_zps4880d822.png
- http://i248.photobucket.com/albums/gg197/artphilia/livejournal/ljbg.png

1) Go to your customize (http://www.livejournal.com/customize) site.
2) (Select a new theme) by searching for Flexible Squares. If you have you own layer for Flexible Squares use it.
3) (Choose a page setup) Set sidebar right.
4) Hit the customize selected theme button.
5) (customize your theme)
- (Sidebar) Set » Show the default user picture on the sidebar? - no
- (Sidebar) Set » Show the blurb/free text in the sidebar? - yes
- (Sidebar) Set » Show the link list in the sidebar? -yes
- (Sidebar) Set » Show tags in the sidebar? - yes
- (Sidebar) Set » Show the page summary in the sidebar? - no
- (Sidebar) Set » Show the calendar in the sidebar? - yes
6) (Custom CSS) Set the three pulldowns to 'no', copy the css and paste it into » Custom stylesheet. Save changes!
7) A link back to my journal (cssbox) somewhere at yours would be very nice, but isn't a must.

If you wanna change the images or colours that's just fine. I won't be offended. But please do not claim my css as yours. Thank you and enjoy!