Layout #5 - SAUDADE

[ingrid_tonks]

I made an orange layout this time:)

Name: Saudade
Theme: S2 Flexi Squares (free and paid account)
Preview




- credit gigiicons
- comment if taking ;)



Codes:

/* CSS Document */

body {
margin-top: 8px;
background-color:#FF9933;
background-repeat: repeat-y;
background-attachment: scroll;
background-position: center top;
text-align: center;
color:#999999;

letter-spacing: .5px;
font-family: "Trebuchet MS", "Times New Roman";
font-size: 10px;
}
#content
{
width: 450px;
margin-left: auto; margin-right: auto;
background-color:#ffffff;/*FF9933;*/
border-left: solid #ffffff 17px;
border-right: solid #ffffff 17px;
border-top: solid #ffffff 7px;
border-bottom: solid #ffffff 17px;
padding: 0px;
text-align: justify;
}
#sidebar {
display:none;
}

#maincontent {
letter-spacing: .5px;
font-family: "Lucida Sans", "Trebuchet MS", "Times New Roman";
font-size: 10px;
line-height: 13px;
background-color:#ffffff;/*FFAE5D;*/
color:#999999;
border-width: 0px;
margin-right:0px;
margin-left:0px;
margin-top:1px;
text-align: justify;
width: 100%;
}
#header {
width: 100%;
padding: 0px;
padding-top:0px;
padding-bottom:6px;
border-bottom: solid #eeeeee 0px;
margin: 0px;
text-align: center;
font-family: "verdana", sans-serif;
font-size: 8.5px;
text-transform:uppercase;
font-weight: normal;
letter-spacing: 1px;
border-width: 0px;
background-color:#FFffff;
color:#dddddd;
}

#footer {
text-align: center;
letter-spacing: .5px;
font-family: "Lucida Sans", "Trebuchet MS", "Times New Roman";
font-size: 10px;
}
.title {
display:none;
text-decoration:none;
font-size: 10px;
padding-top:3px;
font-weight:bold;
background-color:#FFAE5D;
padding-bottom:0px;
color:#FF9999;
font-family:Arial, Helvetica, sans-serif;
}

.subtitle{
display:none;}

a, a:link, a:visited {
color: #FFCC99;
text-decoration: none;
font-weight: bold;
font-family: "Verdana", sans-serif;
font-size:10px;
}

a:hover {
color:#888888;
font-weight:normal;
border-bottom-style:solid;
border-bottom-width:0px;
font-size:10px;
}
div#header a, div#header a:link, div#header a:visited {
font-family: verdana,georgia;
color:#555555;
border-left: dotted #ffffff 0px;
border-right: dotted #ffffff 0px;
border-top: dotted #ffffff 0px;
border-bottom: dotted #ffffff 0px;
FONT-WEIGHT:normal;
font-size: 8.5px;
}

div#header a:hover {
font-family: verdana,georgia;
color:#cccccc;
font-weight:lighter;
font-size: 8.5px;
border-width:0px;
}
div#footer a, div#footer a:link, div#footer a:visited {
color:#888888;
border-left: dotted #FFCCCC 0px;
border-right: dotted #FFCCCC 0px;
border-top: dotted #FFCCCC 0px;
border-bottom: dotted #888888 1px;
letter-spacing: .5px;
font-family:"Lucida Sans", "Trebuchet MS", "Times New Roman";

}
div#footer a:hover {
color:#888888;
border-left: dotted #FFCCCC 0px;
border-right: dotted #FFCCCC 0px;
border-top: dotted #FFCCCC 0px;
border-bottom: dotted #888888 1px;
letter-spacing: .5px;
font-family: "Lucida Sans" "Trebuchet MS", "Times New Roman";
}

.subcontent {
background-color: #ffffff;/*FFAE5D;*/
padding:0px;
margin:0px;
}

.entry {
font-size: 10px;
text-align: justify;
border-width: 0px;
line-height: 16px;
letter-spacing:0px;
padding-left: 4px;
margin: 0px;
padding: 5px;
background-color: transparent;
letter-spacing: .5px;
font-family: "Trebuchet MS", "Times New Roman";
color:#555555;
font-weight:lighter;
}

.entry ol li
{
padding-left: 1px;
margin-left: 0px;
}
.entry ul li
{
padding-left: 1px;
margin-left: 0px;
}

.userpic {
position: relative;
float: right;
background-color: #ffffff !important;
padding:4px;
margin: 4px;
z-index: 13;
border-width: 1px;
border-color: #DFDFDF;
border-style: solid;
}

.userpicfriends {
position: relative;
float: left;
background-color: #ffffff;
padding:4px;
margin: 4px;
text-align:center;
border-width: 1px;
font-family: "arial", sans-serif;
font-size: 7pt;
border-color: #DFDFDF;
border-style: solid;
z-index: 15;
}

.date{
color:#ffffff;
font-size: 9px;
text-transform:none;
font-family: "Verdana", sans-serif;

}
.ljtags {
color:#CCCCCC;
font-size: 9px;
color: #888888;
text-transform:none;
font-family: "Verdana", sans-serif;
padding:5px;

}

.subject {
font-weight: LIGHT;
padding:2px;
padding left:6px;
padding-bottom: 1px;
color:#bbbbbb;
font-family: "arial", sans-serif;
font-size: 11px;
text-transform:uppercase;
letter-spacing:3px;
background-color:#ffffff;
border-left: solid #eeeeee 0px;
border-right: solid #ffcccc 0px;
border-top: solid #eeeeee 0px;
border-bottom: dotted #cccccc 5px;
}

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

.subject a:hover {
color: #99FFCC;
}

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

.currents, .currentmood, .currentmusic {
font-family: "Trebuchet MS", sans-serif;
font-size: 10px;
}

.comments {
text-align: left;
background-color:transparent;
padding: 0px;
margin:0px;
letter-spacing: .5px;
font-family: "Lucida Sans", "Trebuchet MS", "Times New Roman";
font-size:10px;
text-transform:none;
color: #FF9999;
}

div.comments a, div.comments a:link, div.comments a:visited{
color:#999999;
border-bottom:1px solid 999999;
letter-spacing:normal;
font-size: 9px;
letter-spacing: .5px;
font-family: "Lucida Sans", "Trebuchet MS", "Times New Roman";
border-left-color:999999;
border-right-color:999999;
border-top-color:999999

}

div.comments a:hover {
color:#444444;
letter-spacing:normal;
font-size: 9px;
font-weight:bold;
text-decoration: none;
letter-spacing: .5px;
font-family: "Lucida Sans", "Trebuchet MS", "Times New Roman";
}

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

ul.year li {
display: inline;
}

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

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}

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

td.yearmonth {
border-style: none;
}

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

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

.viewing {
margin:0px;
padding:0px;}

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

/*reply pages*/
.userpiccomment {
position: relative;
border-width: 1px;
border-style: solid;
border-color: #dfdfdf;
background-color: #ffffff;
top: -10px;
left: 0px;
padding: 5px;
margin: 12px 10px -10px 10px;
float: left;
}

.box {
border-style: dotted;
border-width: 0px 0px 0px 0px;
border-color: #ffcc99;
padding: 8px;
clear: left;
}

input, textarea {
background-color: #ffffff;
color: #555555;
}

textarea.textbox {
width: 100%;
}

.reply {
position: relative;
margin: 20px 20px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: right;
letter-spacing: .5px;
font-family: "Trebuchet MS", "Times New Roman";
font-size: 10px;
line-height: 100%;
background-color:#F2f2f2;
color: #666666;
}

.replytosubject {
font-weight: bold;
border-left: solid #ffcccc 0px;
border-right: solid #ffcccc 0px;
border-top: solid #ffcccc 0px;
border-bottom: solid #ffcccc 1px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;

}

.commentreply {
position: relative;
margin: 10px;
font-size: 10px;
letter-spacing: .5px;
font-family: "Trebuchet MS", "Times New Roman";
color: #999999;
}

.commentbox {

border-color: #ffcccc;
border-width: 1px;
border-style: dotted;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

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

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

.commentboxpartial {
border-color: #ffcccc;
border-width: 1px;
border-style: dotted;
padding: 5px;
margin: 5px;
background-color: #ffffff;
}

.commentinfo {
background-color: #f2f2f2;
margin-top: 10px;
width: 100%;
}
.separator{
height: 10px;
}

.headerimage {
position: relative;
width: 483px;
height: 250px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://i3.photobucket.com/albums/y63/arrowgal/beach2.jpg");
background-repeat: no-repeat;
}

Installation:
1. Copy the codes.
2. Go to Manage > Customize
3. Select S2 under Style System.
4. Go to: Custom Options > Custom CSS
5. Set the Use layout's stylesheet(s) drop-down menu and the Set Use layout's stylesheet(s) when including custom external stylesheet to NO.
6. Paste the CSS codes into the Custom stylesheet field.

you can change the header and the colors if you want.