Layout #1 - Beauty Contest!

[ingrid_tonks]

This is my first layout!.

Name: Beauty Contest.
Theme: S2 Flexi Squares (free and paid account)
Preview




- no hotlinkg
- credit gigiicons
- comment if taking ;)



IF YOU ARE NEW AT USING S2 LAYOUTS PLEASE WATCH THIS FIRST
CLICK HERE!!(Tutorial)

Images:
please no hotlinking!!


Codes:

/* CSS Document */
body {
margin: 18px 0 18px 0;
background-color:#000000;
text-align: center;
color: #999999;
font-family: "Arial", sans-serif;
font-size: 10px;
}

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

a:hover {
color:#00CCCC;
text-decoration:none;
}

p, td, blockquote {
font-size: 11px;
}

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

#content
{
width: 540px;
margin-left: auto; margin-right: auto;
background-color:#333333;
border-width: 0px;
padding: 0px;
}

#maincontent {
margin-top: 15px;
font-family: "arial", sans-serif;
font-size: 10px;
background-color: transparent;
color: #999999;;
border-width: 0px;
margin:0px;
line-height:15px;
text-align: left;
}

#header {
width: 100%;
padding: 0px;
padding-bottom:5px;
margin: 0px;
text-align: center;
font-family: "arial", sans-serif;
font-size: 10px;
text-transform:uppercase;
font-weight: normal;
letter-spacing: 1px;
border-width: 0px;
background-image: url(http://i3.photobucket.com/albums/y63/arrowgal/bg1.png);
color:#00CCCC;
}

#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
font-weight:normal;
letter-spacing: 1px;
background-color: #333333;
color: #00CCCC;
border-width: 0px;
z-index: 100;
clear: both;
padding:0px;
}

#sidebar {
display:none; }

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #00CCCC;
text-decoration:none;
}

div#header a:hover, div#footer a:hover {
color: #00CCCC;
text-decoration: none;
}

.subtitle{
display:none; }

.title {
font-family: "trebuchet ms", sans-serif;
font-size: 10px;
background-color:#000000;
text-transform:none;
color:#999999;
padding-bottom:2px;
text-transform:uppercase;
font-weight: normal;
top: 10px;
}
ul.navheader
{
padding: 0px;
margin: 0px;
}

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

.subcontent {
background-color: #333333;
padding:0px;
margin:0px;
}

.entry {
font-size: 10px;
text-align: justify;
border-width: 0px;
padding-bottom:15px;
letter-spacing:0px;
margin: 0px;
padding: 5px;
background-color: transparent;
color:#999999;
font-family: "arial", sans-serif;
}

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

.userpic {
position: relative;
float: right;
background-color: #009999;
padding: 2px;
margin: 3px;
border-width: 2px;
border-color:#666666;
}

.userpicfriends {
position: relative;
float: right;
background-color: #009999 !important;
padding: 2px;
margin: 3px;
margin-top:0px;
border-width: 2px;
border-color:#666666;
text-align: center;
}
.date {
font-size: 10px;
color: #555555;
text-transform:uppercase;
font-family: "Verdana", sans-serif;

}
.ljtags{
font-size: 10px;
color: #555555;
text-transform:uppercase;
line-height:12pt;
font-family: "Verdana", sans-serif;
}

.subject {
font-weight: bold;
padding: 2px;
color: #999999;
font-family: "Verdana", sans-serif;
font-size: 10px;
text-transform:uppercase;
letter-spacing:2px;
background-color:#444444;
border-width:2px;
border-color:#009999;
}

.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: "Verdana", sans-serif;
font-size: 10px;
}

.comments {
text-align: left;
background-color:transparent;
padding-top: 6px;
padding-left:0px;
padding-right:0px;
padding-bottom:6px;
margin:2px;
font-family: "Verdana", sans-serif;
font-size:10px;
text-transform:lowercase;
color: #999999;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #99CCCC;
letter-spacing:normal;
font-size: 9px;
font-family: "arial", sans-serif;
}

div.comments a:hover {
color:#00CCCC;
letter-spacing:normal;
font-size: 9px;
text-decoration: none;
font-family: "arial", sans-serif;
}

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: dotted;
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.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}
.separator{
height: 15px;}

.clear{ height: 15px; }
}

.skiplinks {
text-align: center;
}
/*reply pages*/

.datesubjectcomment {
background-color: #333333;
border-style:dotted;
border-width:1px;
border-color:#555555;
padding: 4px;
margin-top: 17px;
}

.userpiccomment {
position: relative;
background-color: #009999;
top: -28px;
left: 0px;
padding: 2px;
margin: 8px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 2px;
border-color:#666666;
border-style: solid;
}
input, textarea {
border-width:thin;
background-color: #333333;
color: #999999;
}

.box {
border-style: dotted;
border-color: #cccccc;
border-width: 1px 0px 0px 0px;
padding: 10px;
}

textarea.textbox {
width: 100%;
}

.reply {
position: relative;
padding: 24px 10px 10px 10px;
text-align: left;
margin: 20px 30px 10px 30px;
font-family: "arial", sans-serif;
font-size: 10px;
line-height: 120%;
background-color: #333333;
color: #999999;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 10px;
font-family: "arial", sans-serif;
color: #999999;
}

.commentbox {

border-color: #555555;
border-width: 1px;
border-style: solid;
padding: 5px;
margin: 5px;
background-color: #333333;
}

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

.datesubjectcomment a:hover {
color: #00CCCC;
}
.commentinfo {
background-color: #333333;
margin-top: 10px;
width: 100%;
}
.commentboxpartial {
border-color: #cccccc;
border-width: 1px;
border-style: solid;
padding: 5px;
margin: 5px;
background-color: #333333;
}

Installation:
1.Copy the codes.
2.Go to Manage > Customize
3.Select S2 under Style System.
3.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.Under Sidebar set Show the default user picture on the sidebar and Show the calendar in the sidebar to NO.
6.Paste the CSS codes into the Custom stylesheet field.

if you want to add a header, copy this code:

.headerimage {
position: relative;
width: 540px;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://yourheader.jpg");
background-repeat: no-repeat;
}