Flexible Squares: Smile

[gachapin_sekai]

Hope you like this layout :D




image


/* 02# Layout Theme : Smile
layout : citraryo.livejournal.com
credit : gachapin_sekai.livejournal.com
*/

/*Body*/

body
{background-color: #ffffff;
background-image:url();
background-position: cnter;
background-repeat:none;
background-attachment:fixed;
}

#content
{
background: transparent none repeat scroll 0 0;
margin: 15px 5% 15px auto;
width:1100px;
}

.subcontent {
background:;
border:0 solid;
min-height:50px;
padding: 5px;
border: 2px solid #EF4448;
margin: 10px 0
}

#maincontent
{
background: none repeat scroll 0 0;
border:0 none;
color:;
font-family:arial,sans-serif;
font-size:9px;
padding:35;
text-align:left;
width: 600px;
margin: 50px auto 10px auto; }

.clear
{height: 5px;}

.entry
{
line-height: 1.20;
padding: 0;
text-align: left;
background: #ffffff;
color: #FD7837;
font-family: "arial", sans-serif;
font-size: 13px;
text-align:justify;
margin: 20px 0 auto 0; }

.entry_text
{
margin-top: -10px;
min-height: 140px;
padding: 20px;
line-height: 1.3;
padding: 0 15px }

.subject, .subject a, .subject a:hover
{
line-height: 0.5
color: #FD7837!important;
background-color: !important;
font-family: "century gothic", arial, sans-serif!important;
font-size: 25px!important;
text-transform:uppercase;
font-weight:none;
text-align: center!important;
letter-spacing:1px;
margin-top:-1px;
border-bottom: 1px solid #EF4448;
}

.datesubject
{
background: ;
text-align: center!important;
text-align: center;
padding:10px 5px 5px 23px;
}

.date
{
color: #FD7837;
background-color: transparent!important;
font-family: "arial", sans-serif;
text-transform: lowercase;
font-size: 15px;
letter-spacing:3px;
margin-center:13px;
}

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

.entry ol li
{
padding-left: 7px;
margin-left: 43px;
}

.currents {text-transform:lowercase;
text-align: left;
padding-right: 20px;
padding-left: 20px;
line-height:11px;
font-size: 11px;
margin-top: -33px;
margin-left: 11px }

.ljtags {
border-left: 0px solid #EF4448;
padding:20px;
text-transform:lowercase;
margin: 50px 0 0 0;
}

.ljtags a:link, .ljtags a:hover {color: #EF4448; border:none;}

ul.ljtaglist {
background-color: #F1643F;
padding:5px;
list-style:none;}

.separator { background-image: url(http://img51.imageshack.us/img51/7155/a37z.gif);
background-repeat: no-repeat;
background-position: center !important;
height: 90px;
margin-left: auto;
margin-right: auto;
padding: 0px;}

.currentlocation, .currentmood, .currentmusic {
padding: 5px 0 5px 40px;
color: #EF4448;
background: transparent none no-repeat scroll 0 50%}

.currentlocation {background-image: url(http://img845.imageshack.us/img845/8247/whati.jpg)}

.currentmood{background-image: url(http://img843.imageshack.us/img843/1594/surprisen.jpg)}

.currentmusic {background-image: url(http://img217.imageshack.us/img217/3135/greeding.jpg)}
}
.separator { background-image: url(http://img51.imageshack.us/img51/7155/a37z.gif);
background-repeat: no-repeat;
background-position: center !important;
height: 90px;
margin-left: auto;
margin-right: auto;
padding: 0px;}

a, a:link, a:visited {
font-family: "arial", sans-serif;
font-size: 12px;
background-color: none;
color: #EF4448;
text-decoration: none;
}

a:hover
{
font-family: "arial", sans-serif;
font-size: 12px;
font-style:normal;
background-color:transparent;
font-weight:none;
text-decoration:none;
text-transform: lowercase;
cursor:default;
border-bottom:0;
color: #FD7837;
}

/*Header*/
#header{ color: #EF4448;
font-size: 20px;
text-transform: lowercase;
text-align: center;
position: relative;
font-family: segoe print;
padding: 0px;
}

div#header a, div#header a:link, div#header a:visited {
color: #FD7837;
padding: 0px;
margin: 2px;
font-size: 20px;
font-family: segoe print;

}

div#header a:hover, div#footer a:hover {
color: #EF4448;
background-color:;
text-transform: none; }
div#header li.view {
color: #EF4448;
padding: 0px;
font-family: segoe print;
font-size: 20px;

margin: 2px; }

ul.navheader {
padding: 0px;
margin: 0px;
text-align: center;
letter-spacing:3px;
font-family: segoe print;
font-size: 20px;
}

ul.navheader li { display: inline; padding: 0px 3px 0px 3px; }

.headerimage
{
background-image:url(http://img851.imageshack.us/img851/2706/prettysmilehorz5.jpg);
background-repeat: no-repeat;
position: relative;
width: 600px;
height: 100px;
margin-left: auto;
margin-right:+300px;
padding: 0px;
}
#header {
width: auto;
padding: 0px 50px 10px 0px;
margin: 0px;
text-align: left;
font-family: segoe print;
font-size: 25px;
font-weight: bold;
letter-spacing: 1px;
border-width: 0px;
background-color: transparent; }

.title { display: none;}
.subtitle { display: none;}

/*Sidebar */

#sidebar
{background: #ffffff none repeat scroll 0 0;
color: #EF4448;
float:left;
font-family:"arial",serif;
font-size:13px;
text-align:left;
text-transform: lowercase;
width: 200px;
padding: 5px;
position: relative;
margin-top: 50px;
border: 2px solid #EF4448;
}

#sidebar_text, #sidebar text, .sidebar_text, .sidebar text {background-color: #ffffff;}

.sbarheader
{padding: 0px 5px 0px 5px;}

.sbarbody
{line-height:20px;
padding:10px 10px 0;
background-color: #ffffff;
color: #EF4448; }

.sbarbody2
{ }

div#sidebar a, div#sidebar a:link, div#sidebar a:visited
{color: #EF4448; font-size:13px; font-style:normal;}

div#sidebar a:hover
{color: #FD7837;
text-decoration: none;
font-size:13px; font-style:normal;
}

ul.sbarlist
{
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:15px 0 0 0;
padding: 0px;
}

li.sbaritem{
background: ;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding:2px 2px 2px 5px;
font-size: 12px;
color: #EF4448;
border-bottom: 1px dashed #F6DEB5}

li.sbaritem:hover{
background: #F6DEB5;
list-style - text-transform: lowercase;
list-style-position:outside;
list-style-type:none;
padding:2px 2px 2px 5px;
font-size: 12px;
color: #ef4136;
border-bottom: 1px dashed #F6DEB5}

li.sbartitle
{border:0;
background-color: #F6DEB5;
color: #EF4448;
font-size:13px;
list-style-type: none!important;
text-align:center;
text-transform: uppercase;
letter-spacing: 0px;
-moz-border-radius:5px 5px 0 0;
border-radius:0px 0px 0 0;

}

#sidebar_summary,#sidebar_tags, #sidebar_calendar { display:; }

td.sbarcalendar {background: #F6DEB5;
color: #EF4448;
padding:0 0 0 2px;}

table.calendar {width:100%; padding:5px; background:transparent;}

td.sbarcalendarposts {background: #ffffff;
padding:0 0 0 2px;}

/*Footer*/

#footer {
background-color:;
padding:0;
text-transform: ;
width: 800px;
float:center;
text-transform:lowercase;
z-index:10;
margin: 25px auto 10px auto;
text-align: center }

ul.navfooter{
margin:0 auto;
text-align:center;}

ul.navfooter li {
margin: 0 5px 0 5px;
display:inline;
background:url() no-repeat scroll 0 0 transparent;
list-style:none outside none;
padding:100px 0px; }

.clearfoot { clear: both; }

div#footer a, div#footer a:link, div#footer a:visited
{
font-family: "arial", arial, sans-serif;
color: border: 2px solid #FA5326;
;
font-size: 18px;
text-transform:;
letter-spacing: -0.5px;
padding:9px;
background-color:;
}

div#footer a:hover {color: #ffffff;
text-transform: lowercase;
padding: 9px;
letter-spacing:-0.5px;
background: ;
font-family:"arial", arial;
border-bottom:none!important;
font-size: 18px;}

#footer .viewing { display:none; }

/*Userpics*/

.userpic, .userpicfriends{
float: right;
text-align:center;
margin: 0 0 10px 20px;
}

.userpic
{
float: right;
margin:0px -135px 0 0;
padding:0;
position:relative;
text-align: center;
border-style: solid;
border-width: 0px;
background: transparent!important;
font-family: arial, sans-serif;
font-size: 13px;
z-index: 15;
}

.userpicfriends
{
float: right;
margin:0 -135px;
padding:0;
text-align: center;
border-style: solid;
border-width: 0px;
background: transparent!important;
font-family: arial, sans-serif;
font-size: 13px;
z-index: 15;
color: #ffffff;
}

.userpic img, .userpicfriends img
{padding:0;
background:transparent;
border: 10px solid #FD7837;
}

.userpic img:hover, .userpicfriends img:hover
{
padding:0;
background-color:transparent;
border: 10px solid #FD7837;
}

.userpicfriends a font, .userpicfriends a
{
font-family: arial;
font-size: 13px;
color: #FD7837;
padding:0px;
background:#transparent!important;
}

.userpicfriends a:hover font, .userpicfriends a:hover
{color: #FD7837;
background:transparent!important;
padding:0px;}

span.ljuser a {color: #EF4448;
font-family: tahoma, sans-serif;
font-size: 11px;
border-bottom:none!important;
font-style:normal;
text-transform:uppercase;}

span.ljuser a:hover {color: #FD7837;
font-family: tahoma, sans-serif;
font-size: 15px;
border-bottom:none!important;
background-color:transparent!important;
font-style:normal;
text-transform:lowercase;}

.defaultuserpic {
text-align: center;
background: #ffffff!important;
webkit-transform: rotate(10deg) ;
moz-transform: rotate(10deg) ;
o-transform: rotate(10deg);}

.defaultuserpic img {
padding: none 0px;
background: #F6DEB5;
border: solid 10px; }

/*Comments*/
.comments
{
font-family: arial, sans-serif;
font-size: 25px;
color: #ffffff;
text-align: center;
position: relative;
top: 0px;
padding: 20px;
}

div.comments a, div.comments a:link, div.comments a:visited
{
font-family: arial, sans-serif;
color: #EF4448;
font-size: 25px;
text-transform:;
padding: 3px;
letter-spacing:-1px;
}

div.comments a:hover
{
font-family: arial, sans-serif;
color: #FD7837;
font-size: 25px;
text-transform:;
padding: 3px;
letter-spacing:-1px;
}

/*Reply Entry*/

.datesubjectcomment
{
color: #FD7837;
background-color: transparent!important;
padding: 5px;
margin-top: 0px;
}

.userpiccomment {
position: right;
top: -10px;
padding: 0px;
margin: 0px 0px 0px 0px;
z-index: 15;
float: right;
border-color: #FD7837;
border-width: 10px;
border-style: solid;
width: 85px;
height: 85px; }

.commentreply {
position: relative;
margin: 10px;
font-size: 13px;
font-family: arial;
color: #EF4448; }

.commentbox {
border: 2px solid #EF4448;
padding: 10px;
margin: 10px 0}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
margin-bottom: 5px;
color: #EF4448;
text-transform: lowercase; }

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

.skiplinks
{
background-color: #F6DEB5;
color: #EF4448;
text-align: center;
padding: 8px; }

/* Tiny Icons from buttery*/

img[src*="img/userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://img820.imageshack.us/img820/2751/unhappy.jpg) no-repeat !important;
padding: 30px 0 0 30px !important;
}

img[src*="img/community.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://img197.imageshack.us/img197/9080/justout.jpg) no-repeat !important;
padding: 30px 0 0 30px !important;
}

img[src*="img/icon_protected.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://img265.imageshack.us/img265/2297/thedevilu.jpg) no-repeat !important;
padding: 30px 0 0 30px !important;
}

img[src*="img/icon_private.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://img265.imageshack.us/img265/2297/thedevilu.jpg) no-repeat !important;
padding: 30px 0 0 30px !important;
}

img[src*="img/icon_groups.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://img31.imageshack.us/img31/3073/st5.gif) no-repeat !important;
padding: 15px 0 0 15px !important;
}

Intructions :
1. Go to your Customize
2. Choose 'Flexible Squares' in the search line
3. Click 'Apply Theme' and choose the theme that you like
4. Scroll down to 'Choose a Page Setup'
5. Click 'Apply Layout' for '2 Column (sidebar on left)'
6. Click 'Customize Selected Theme'
7. Click 'Custom CSS'
8. Change two Use layout's stylesheet'  and 'Use external stylesheets' into No
9. Copy the code and paste it into the white box
10.Then click Save Changes. Finish ^^
----

Credit :
Layout by
gachapin_sekai
Tiny icons by buttery
Divider by
cherany

---

PS :
- go to ! how to install if you have a problem in instalizing the layout.
- go to ! how to credit if you don't know how to credit.
- Don't steal
- And comments are loved ^^