Magenta Sunflowers [S2 Flexible Squares]

2009-10-12T11:00:51Z

My very first layout! I think it turned out rather well, actually. If very pink :)

Name:	Magenta Sunflowers
Style:	Flexible Squares
Accounts:	All (Basic, Plus, Paid)
Tested In:	Firefox and IE on Vista (no rounded corners in IE)
Resolution:	1024 x 768 +

Instructions:

Go to "Customize Journal"
Select and save any Flexible Squares theme except for "Circles"
Click on "Custom CSS" on the left hand side
Set all the drop down boxes to "No"
Copy and Paste the code below into the "Custom Stylesheet"
Click "Save Changes"

Code:

/*-By: exhale_silly.livejournal.com
Name: Magenta Sunflowers (flexible squares)
Ads: vertical
Tiny icon credit to: FamFamfam.com & ~mercscilla on DA
Please don't remove this header-*/

/*-Body-*/

BODY {
background-image: url(http://img29.imageshack.us/img29/436/602590.png);
background-repeat:repeat;
background-attachment:fixed;
background-color: #ffffff;
color: #222222;
text-align: left;
font-size: 12px;
margin: auto;
font-family: helvetica, verdana, arial, tahoma, "lucida sans", "lucida grande", sans-serif;
}

#content {
background-color: transparent;
width: 65%;
margin: auto;
margin-top: 20px;
}

#maincontent {
width: 87%;
background-color: transparent;
margin: 0px 10px 10px 0px;
}

.subcontent {
padding: 10px;
background-color: #FD0F5B;
border: 0px #3C2F2E solid;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}

.headerimage {
height: 140px;
position: relative;
background-image: url('http://img143.imageshack.us/img143/8717/beepsheader.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top-right;
}

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

a:hover {
color: #222222;
}

b, strong, u {
color: #222222;
}

i, em {
color: #FFBAD0;
}

.ljuser a b{
color: #FFFFFF;
}

::-moz-selection {
background: #404040;
color: #FFFFFF;
}

/*-header & footer-*/

#header, #footer {
width: 80px;
float: left;
margin-left: -130px;
background-color:#FD0F5B;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
font-family: georgia, garamond, "palatino linotype", serif;
font-size: 28px;
font-style: italic;
letter-spacing: -0.08em;
text-align: center;
text-transform: lowercase;
padding: 0px 30px 0px 0px; 
border: 0px #3C2F2E solid;
}

#header {
position: fixed;
}

#footer {
font-size: 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #FFFFFF;
margin-left: -25px;
padding: 0px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}

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

div#header li.view {
color: #FFF5F9;      
margin-left: -25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}

div#footer li.viewing {
display: none;
}

.clearfoot {
clear: both;
}

ul.navheader, ul.navfooter {
list-style: none;
}

ul.navheader li, ul.navfooter li {
list-style: none;
}

/*-title & subtitle-*/

.title {
display: none;
width: 150px;
color: #FFFFFF;
text-align: center;
font-size: 40px;
font-style: normal;
text-transform: uppercase;
}

.subtitle {
display: none;
color: #FFAB87;
text-align: left;
text-transform: lowercase;
font-size: 14px;
}

/*-entries-*/

.entry {
color: #222222;
text-align: justify;
padding: 25px 0px 10px 0px;
}

.entry a{
color: #FFFFFF;
}

.entry a:hover{
color: #222222;
}

.entry ul li {
margin: 0px;
padding: 0px;
list-style: circle;
list-style-position: inside;
}

.entry ol li {
margin: 0px;
padding: 0px;
list-style-position: inside;
list-style: decimal;
}

.date {
text-align: left;
color: #3C2F2E;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1em;
padding: 10px 0px 0px 0px;
}

.subject {
font-family: georgia, garamond, "palatino linotype", serif;
font-size: 22px;
font-style: italic;
letter-spacing: -0.08em;
text-align: left;
text-transform: lowercase;
}

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

.datesubject {
margin-right: 100px;
padding-bottom: 20px;
}

blockquote {
background-color: #FFBAD0;
color: #FD0F5B;
padding: 8px;
margin: 15px; 
text-align: justify;
border: 0px #3C2F2E solid;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

blockquote:hover {
color: #A85666;
}

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

/*-currents-*/

.currents {
background-color: transparent;
text-transform: lowercase;
}

.currents strong {
color: #FFBAD0;
font-weight: bold;
}

.currentlocation, .currentmood, .currentmusic, .currentgroup {
text-align: left;
color: #404040;
}

.currentlocation {
background: url(http://img199.imageshack.us/img199/1476/dotarrow.png) no-repeat left center;
padding: 0px 0px 0px 18px;
}

.currentmood {
background: url(http://img219.imageshack.us/img219/4171/butterflylightred.png) no-repeat left center;
padding: 10px 0px 0px 18px;
}

.currentmusic {
background: url(http://img34.imageshack.us/img34/4660/ipodm.png) no-repeat left center;
padding: 0px 0px 0px 18px;
}

.ljtags {
color: #FFBAD0;
text-align: right;
margin-top: 15px;
padding-bottom: 5px;
font-weight: bold;
text-transform: lowercase;
}

/*-comments-*/

.comments {
margin-top: 15px;
font-family: georgia, garamond, "palatino linotype", serif;
font-size: 20px;
font-style: italic;
color: #cccccc;
letter-spacing: -0.08em;
text-align: center;
text-transform: lowercase;
}

div.comments a, div.comments a:link, div.comments a:visited {
background-color: #FFFFFF;
color: #FD0F5B;
padding: 4px 8px 4px 8px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}

div.comments a:hover {
color: #8E2647;
}

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

.clear {
display: none;
}

.skiplinks {
text-transform: lowercase;
text-align: center;
padding: 10px;
background-color: #222222;
color: #FD0F5B;
margin-bottom: 15px;
border: 0px #3C2F2E solid;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}

.skiplinks a {
text-transform: lowercase;
text-align: center;
padding: 10px;
color: #F3F3F3;
margin: 3px;
}

.skiplinks a:hover {
color: #FFBAD0;
}

.datesubjectcomment {
background-color: #FD0F5B;
color: #FFFFFF;
padding: 2px;
margin: 10px 10px 5px 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

.userpiccomment {
position: relative;
max-width: 90px;
max-height: 90px;
top: -15px;
left: 8px;
margin: 0px 20px -10px -10px;
z-index: 15;
float: left;
padding: 7px;
background-color: #FFFFFF;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}

.box {
background-color: #FFBAD0;
width: auto;
clear: left;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}

input, textarea {
background-color: #FFBAD0;
color: #222222;
border: 1px solid #FD0F5B;
padding: 2px 4px 0px 4px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

textarea.textbox{
background-color: #FD0F5B;
border: 0px solid #FFEDB8;
color: #FFFFFF;
width: 95% !important;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}

.reply{
position: relative;
margin: 5px;
padding: 5px;
text-align: left;
line-height: 125%;
}

.replytoposter {
color: #FFFFFF;
margin: 15px 0px 0px 0px;
}

.replytosubject {
color: #FFFFFF;
margin: 5px 0px 0px 0px;
font-weight: bold;
text-transform: uppercase;
}

.commentreply {
position: relative;
padding: 10px 10px 20px 90px;
}

.commentbox {
padding: 15px opx 15px opx;
margin: 5px;
border: 3px dotted #ffffff;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}

.commentboxpartial {
padding: 5px;
margin: 12px;
}

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

/*-sidebar-*/

#sidebar {
float: right;
width: 170px;
margin-right: -100px;
color: #591519;
text-align: justify;
background-color: #FD0F5B;
border: 0px #3C2F2E solid;
padding: 10px 5px 8px 5px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}

#sidebar a, #sidebar a:link, #sidebar a:visited {
color: #FFFFFF;
text-decoration: none;
}

#sidebar a:hover {
color: #FFBAD0;
}

.defaultuserpic {
float: center;
text-align: center;
border: 0px solid #FFFFFF;
padding: 5px;
margin: auto;
}

.defaultuserpic img{
background-color: #FFFFFF;
width: 90px;
height: 90px;
padding: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

.sbarheader {
padding-top: 10px;
}

.sbarbody {
text-align: center;
padding: 5px 0 0 0;
}

.sbarbody2 {
font-size: 11px;
background-color: #FFBAD0;
color: #FD0F5B;
padding: 7px;
margin: 0px 7px 10px 7px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}

.sbarbody2 b, .sbarbody2 strong {
color: #FFFFFF;
}

table.calendar {
display: none;
}

.sbarcalendar, .sbarcalendarposts {
display: none;
}

ul.sbarlist {
margin: 0px;
padding: 0px;
list-style: none;  
font-family: "lucida sans", "lucida grande", "century gothic", tahoma, verdana, sans-serif;
}

li.sbaritem {
margin: 3px;
color: #E5DADA;
padding: 1px;
list-style: none;
list-style-position: inside;
text-align: left;
font-weight: normal;
text-transform: none;
border-right: 0px solid #3C2F2E;
}

li.sbaritem:hover {
border-right: 0px solid #3C2F2E;
color: #3C2F2E;
}

li.sbartitle {
text-align: right;
font-family: georgia, garamond, arial, sans-serif;
font-size: 20px;
font-style: italic;
letter-spacing: -0.08em;
color: #591519;
padding: 5px;
text-transform: lowercase;
}

ul.ljtaglist li {
margin: 0px;
padding: 5px;
list-style: circle;
}

/*-userpics-*/

.userpic, .userpicfriends {
margin: 2px 12px 0px 2px;
text-align: center;
position: relative;
float: left;
background-color: transparent !important;
z-index: 15;
border: 1px #FFFFFF dotted;
padding: 6px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}

.userpicfriends font {
color: #ffffff;
text-transform: lowercase;
text-align: center;
}

.userpicfriends br {
display: block;
height: 0;
}

.userpic img, .userpicfriends img {
background-color: #FFFFFF;
background-image: url(http://img29.imageshack.us/img29/436/602590.png);
background-repeat:repeat;
background-attachment:fixed;
width: 90px;
height: 90px;
padding: 6px;
margin: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

/*-tags page-*/

.ljtaglist {
list-style: circle;
width: 70%;
text-transform: lowercase;
text-align: left;
background-color: #ffffff;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}

.ljtaglist li {
border-bottom: 0px dotted #A85666;
padding: 10px;
color: #FFBAD0;
}

H2 {
background-color: #FFBAD0;
text-align: center;
padding: 10px;
margin-bottom: 15px;
line-height: 12px;
font-weight: bold;
font-size: 12pt;
color: #FD0F5B;
text-transform: uppercase;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}

ul.ljtaglist {
color: #222222;
padding: 8px 8px 8px 12px;
text-align: left;
margin-right: auto;
margin-left: auto;
padding: 25px;
}

ul.ljtaglist a {
color: #FD0F5B;
}

ul.ljtaglist a:hover {
color: #591519;
}

ul.ljtaglist li{
padding: 3px;
margin: 2px;
list-style: circle;
list-style-position: inside;
}

/*-archive-*/

ul.year {
text-align: center;
padding: 10px;
margin: 5px;
background-color: #FFBAD0;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}

ul.year a {
color:#ffffff;
}

ul.year li {
color: #591519;
font-weight: bold;
padding: 3px;
display: inline;
border: 0px solid #591519;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
width: 75%;
background-color: #FD0F5B;
padding: 5px 8px 8px 8px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}

td.yeardate {
color: #FD0F5B;
background-color: #FFFFFF;
text-align: center;
padding: 1px 8px 0px 0px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

table.yeartable td.yeardate a {
color: #591519;
}

table.yeartable td.yeardate a:hover {
color: #FFBAD0;
}

table.yeartable td.yearday {
background-color: #FD0F5B;
text-align: center;
text-transform: uppercase;
font-weight: bold;
border: 0px;
color: #591519;
}

td.yearmonth {
color: #FFFFFF;
border: 0px;
padding: 0px 0px 4px 0px;
}

td.yearmonth a {
color:#FFBAD0;
}

/*-contextual pop-up-*/

div.ContextualPopup {
position: relative;
margin: 5px 0 0 20px;
text-align: left;
}

div.ContextualPopup div.Inner {
background: transparent !important;
color: #FFFFFF!important;
border: 0px;
padding: 10px;
width: 220px;
}

div.ContextualPopup .Userpic {
padding: 5px;
margin-left: 15px;
background-color: #ffffff;
border: 0px solid #F3F3F3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

div.ContextualPopup .Content {
padding: 5px;
border: 0px solid #3C2F2E;
margin: 4px 30px 4px 4px;
background-color: #FFBAD0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:link {
text-decoration: none !important;
font-weight: bold;
color: #FD0F5B!important;
}

div.ContextualPopup .Relation {
text-transform: lowercase;
font-size:11px;
color: #FD0F5B;
border-bottom:1px dashed #ffffff;
padding:0px 0px 4px 0px;
margin:0px 0px 4px 0px;
}

/*-navigation bar-*/

table#lj_controlstrip td {
background-color: #FFBAD0;
border: solid 0px #3C2F2E;
border-bottom: 0px solid #3C2F2E;
}

#lj_controlstrip input {
background-color: #FD0F5B;
border: 1px solid #FD0F5B;
padding: 2px;
color: #ffffff;
}

#lj_controlstrip a {
color: #FD0F5B;
}

#lj_controlstrip_statustext {
color: #591519;
}

#lj_controlstrip .ljuser a b {
color: #591519;
margin-right: 5px;
}

#lj_controlstrip_userpic {
padding-top: 1px;
}

/*Tinyicons*/

.ljuser img {
width: 0px;
height: 0px;
background-repeat: no-repeat;
background-image: url(http://img262.imageshack.us/img262/8613/user02lightred.png);
padding: 17px 0px 0px 17px !important;
}

.ljuser img[src*="userinfo.gif"] {
background-image: url(http://img262.imageshack.us/img262/8613/user02lightred.png);
padding: 17px 0px 0px 17px !important;
}

.ljuser img[src*="community.gif"] {
background-image: url(http://img510.imageshack.us/img510/678/communitylightred.png);
padding: 17px 0px 0px 17px !important;
}

img[src*="icon_protected.gif"] {
width: 0; 
height: 0;
background: url(http://img218.imageshack.us/img218/172/locklightblue.png);
background-repeat: no-repeat;
padding: 17px 0px 0px 20px !important;
}

img[src*="icon_private.gif"] {
width: 0;
height: 0;
background: url(http://img218.imageshack.us/img218/172/locklightblue.png);
background-repeat: no-repeat;
padding: 17px 0px 0px 20px !important;
}

img[src*="btn_del.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i39.tinypic.com/144739d.png) no-repeat scroll 0 0;
}

img[src*="btn_scr.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i43.tinypic.com/358rj2a.png) no-repeat scroll 0 0;
}

img[src*="btn_unscr.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i39.tinypic.com/2drnh3.png) no-repeat scroll 0 0;
}

img[src*="btn_freeze.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i40.tinypic.com/17afb4.png) no-repeat scroll 0 0;
}

img[src*="btn_unfreeze.gif"] {
height: 0px; 
width: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i44.tinypic.com/242zlet.png) no-repeat scroll 0 0;
}

img[src*="btn_track.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i44.tinypic.com/5zmpvk.png) no-repeat scroll 0 0;
}

img[src*="btn_tracking.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i43.tinypic.com/aakt3q.png) no-repeat scroll 0 0;
}

img[src*="btn_tracking_thread.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i39.tinypic.com/71pcmf.png) no-repeat scroll 0 0;
}

img[src*="anonymous.gif"] {
height: 0px;
width: 0px; padding: 0px 0px 16px 16px !important;
background: url(http://i40.tinypic.com/2ngfymo.png) no-repeat scroll 0 0;
}

img[src*="openid-profile.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i44.tinypic.com/35b5evp.png) no-repeat scroll 0 0;
}

.box img[src*="userinfo.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 16px 16px !important;
background: url(http://i40.tinypic.com/33c56o1.png) no-repeat scroll 0 0;
}

img[src*="talk/none.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 10px 10px !important;
background: url(http://i39.tinypic.com/2ry4o4k.png) no-repeat scroll 0 0;
}

This is a World of Dreams and Reverie

Magenta Sunflowers [S2 Flexible Squares]