Pride 63

» style -- Flexible Squares, S2
» works with -- Free, Paid & Sponsored
»

uploading instructions. READ THEM.
/* BY: Minty_Peach -- (http://minty_peach.livejournal.com) STYLE -- Flexible Squares S2 DO NOT EDIT & REPOST AS YOUR OWN DO NOT REMOVE THIS SECTION */ BODY{ margin-top: 30px; background-color: #dddddd; background-image: url(''); background-repeat: no-repeat; background-position: top-left; background-attachment: scroll; text-align: left; font-size: 10px; color: #777777; font-family: "Verdana", sans-serif; } i, s, u { color: #999999; } a, a:link, a:visited { font-family: "verdana" Helvetica, sans-serif; color: #6DB334; text-transform: uppercase; text-decoration: none; } a:hover{ color: #aaaaaa; } blockquote { margin: 5px 10px 5px 10px; padding: 10px; color: #777777; font-size: 10px; border: 1px solid #cccccc; background: #F8F8F8; text-align: justify; line-height: 16px; } p, td { font-size: 10px; } code, kbd, pre, tt { font-family: monospace; } #content { width: 850px; margin-left: auto; margin-right: auto; padding: 0px; background-color: #FDFDFD; } #maincontent { margin: 15px 0px 15px 220px; } #sidebar { width: 195px; padding: 20px; border-right: 1px dashed #cccccc; color: #555555; background-color: #FDFDFD; font-family: "verdana" Helvetica, sans-serif; font-size: 10px; line-height: 16px; text-align: justify; float: left; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited { color: #aaaaaa; text-transform: lowercase; text-decoration: none; } div#sidebar a:hover { text-decoration: none; color: #aaaaaa; } .defaultuserpic { text-align: center; border-color: 10px solid #FEFEFE; } .sbarheader { padding: 0px 3px 0px 3px; } .sbarbody { padding: 0px 3px 0px 3px; } .sbarbody2 { padding: 0 3px 0 3px; } table.calendar { margin-right: auto; margin-left: auto; } .sbarcalendar { padding: 3px; border: 1px solid #ddd; background: #FEFEFE; text-align: center; font-family: "Verdana", Helvetica, sans-serif; color: #bbbbbb; font-size: 10px; background-image: url('http://i28.tinypic.com/1y233b.png'); background-repeat: repeat-x; background-position: top-left; } .sbarcalendarposts { padding: 3px; border: 1px solid #ccc; background: #eee; text-align: center; font-family: "Verdana", Helvetica, sans-serif; color: #EB8A00; font-size: 10px; background-image: url('http://i27.tinypic.com/v689oz.png'); background-repeat: repeat-x; background-position: top-left; } ul.sbarlist { margin-left: 0px; list-style: none; padding-left: 0px; } li.sbaritem { padding: 3px; color: #ffffff; list-style: none; border: 1px solid #ddd; text-align: right; background-image: url('http://i28.tinypic.com/1y233b.png'); background-repeat: repeat-x; background-position: top-left; } li.sbaritem:hover { background-image: url('http://i31.tinypic.com/par8n.png'); background-repeat: repeat-x; background-position: top-left; } li.sbartitle { list-style: none; text-align: right; text-transform: uppercase; margin-top: 15px; color: #ffffff; font-size: 7pt; padding: 4px; border: 1px solid #ccc; background-color: #71BC29; background-image: url('http://i27.tinypic.com/v689oz.png'); background-repeat: repeat-x; background-position: top-left; } ul.ljtaglist li{ padding: 0px; margin: 0px; list-style: decimal-leading-zero; list-style-position: outside; } /**************************************************** HEADER & FOOTER LINKS - NOT THE HEADERIMAGE **************************************************/ #header { width: auto; line-height: 30px; text-align: center; font-size: 7pt; color: #dddddd; text-transform: uppercase; background-color: #333333; background-image: url('http://i28.tinypic.com/1y233b.png'); background- repeat: repeat-x; background-position: top-left; } #footer { width: auto; line-height: 30px; text-align: center; font-size: 7pt; color: #dddddd; text-transform: uppercase; background-image: url('http://i28.tinypic.com/1y233b.png'); background- repeat: repeat-x; background-position: top-left; } div#header a, div#header a:link, div#header a:visited { color: #dddddd; padding: 10px; font-size: 7pt; } div#footer a, div#footer a:link, div#footer a:visited { color: #dddddd; padding: 10px; font-size: 7pt; } div#header a:hover { color: #999999; } div#footer a:hover { color: #999999; } ul.navheader { padding: 0 5px 0 5px; margin: 0 0px 0 0px; } ul.navheader li { display: inline; list-style: none; padding: 0; } div#header li.view { font-size: 7pt; padding: 10px; } div#footer li.viewing { font-size: 7pt; padding: 10px; } #footer .viewing { display:none; } ul.navfooter { padding: 0 5px 0 5px; margin: 0 0px 0 0px; } ul.navfooter li { display: inline; margin: 0 0px 0 0px; } .clearfoot { clear: both; } ul.navfooter { padding: 0px; margin: 0px; } ul.navfooter li { display: inline; margin: 0 0px 0 0px; } /******************* title & subtitle *********************/ .title { display: none; } .subtitle { display: none; } /******************************* TAGS PAGE LAYOUT ********************************/ .ljtaglist { list-style-type: none; margin: -1px 20px 0px 20px; margin-left: 70px; width: 50%; text-transform: uppercase; text-align: left; } .ljtaglist li { border-bottom: 1px solid #cccccc; padding: 5px 2px 5px 20px; color: #888888; } H2 { margin: 30px 0px 10px 90px; text-align: left; padding: 2px 2px 2px 10px; line-height: 12px; font-weight: normal; font-style: italic; font-size: 12px; text-transform: uppercase; letter-spacing: 0px; font-family: arial; color: #888888; background: url('') 0px 2px no-repeat; } /*********************************************** ENTRY, TAGS LIST, SUB CONTENT, EXTRA ***********************************************/ ul.ljtaglist { color: #bbb; font-family: "Tahoma", Helvetica, sans-serif; font-size: 8pt; padding: 8px 8px 8px 12px; text-align: left; margin-right: auto; margin-left: auto; padding: 35px; } .subcontent { padding: 20px 25px 20px 40px; background: #FDFDFD; } .entry{ margin: 0px; padding: 10px 3px 10px 3px; color: #555555; font-family: "verdana" Helvetica, sans-serif; font-size: 10px; line-height: 16px; text-align: justify; border-left: 0px solid #bbbbbb; } .entry ul li { padding-left: 0px; margin-left: 0px; list-style: decimal-leading-zero; list-style-position: outside; } .entry ol li { padding-left: 0px; margin-left: 0px; list-style: decimal-leading-zero; list-style-position: outside; } /*********************************************** USERPICS, FRIENDS PAGE USERPICS, DATE, SUBJECT &MORE ************************************************/ .userpic { display: none; position: relative; float: left; padding: 7px; margin: 10px; border: 2px dotted #cccccc; background-color: #FFFFFF; z-index: 15; } .userpicfriends { position: relative; float: left; padding: 7px; margin: 10px; text-align: left; font-family: "Verdana", sans-serif; font-size: 8pt; z-index: 15; background-color: #FFFFFF !important; border: 2px dotted #cccccc; } .userpicfriends font { color: #aaaaaa !important; text-transform: uppercase; } .userpicfriends br { display: block; height: 0; } .date { text-align: right; font-weight: normal; padding-left: 6px; color: #FFFFFF; font-family: "arial" Helvetica, sans-serif; font-size: 7pt; text-transform: uppercase; float: right; border-left: 1px solid #FFFFFF; } .subject { text-align: right; padding-left: 6px; color: #FFFFFF; font-family: "arial" Helvetica, sans-serif; font-size: 7pt; text-transform: uppercase; } .subject a, .subject a:link, .subject a:visited { color: #aaaaaa; text-transform: lowercase; } .subject a:hover { color: #999; } .datesubject { padding: 7px; border: 1px solid #ccc; background-color: #71BC29; background-image: url('http://i27.tinypic.com/v689oz.png'); background-repeat: repeat-x; background-position: top-left; } .currents, .currentmood, .currentmusic { font-family: arial; font-size: 10px; } .currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong { color: #999999; padding-left: 13px; margin-top: 35px; font-size: 10px; text-transform: lowercase; font-family: "arial" Helvetica, sans-serif; background: url('http://i132.photobucket.com/albums/q11/minty_peach/other-1.gif') 0px 0px no-repeat; } .ljtags { margin-top: 25px; margin-left: 1px; color: #777777; padding-left: 13px; text-transform: lowercase; font-family: "arial" Helvetica, sans-serif; background: url('http://i132.photobucket.com/albums/q11/minty_peach/tags.gif') 0px 2px no-repeat; } .ljtags a, .ljtags a:link, .ljtags a:visited { color: #71BC29; font-size: 7pt; text-transform: none; } .currentlocation a, .currentlocation a:link, .currentlocation a:visited { color: #71BC29; font-size: 7pt; text-transform: lowercase; } .currentlocation a:hover, .ljtags a:hover { color: #aaaaaa; text-transform: lowercase; text-decoration: none; } .comments { font-family: "Verdana", sans-serif; font-size: 7pt; text-align: right; padding: 4px; position: relative; border: 1px solid #dddddd; color: #888888; top: 10px; background-image: url('http://i28.tinypic.com/1y233b.png'); background- repeat: repeat-x; background-position: top-left; } div.comments a, div.comments a:link, div.comments a:visited { color: #dddddd; padding: 7pt; text-transform: uppercase; } div.comments a:hover { color: #bbbbbb; } /*********************************************** ARCHIVE PAGE/CALENDAR ******************************************/ ul.year { text-align: center; padding: 10px; } ul.year li { display: inline; } table.yeartable { margin-left: auto; margin-right: auto; } table.yeartable td.yeardate, table.yeartable td.yearday { color: #dddddd; padding: 1px; border: 1px solid #999999; text-align: center; background-image: url('http://i28.tinypic.com/1y233b.png'); background-repeat: repeat-x; background-position: top-left; } table.yeartable td.yearday { color: #dddddd; border: 1px solid #999999; padding: 1px; text-align: center; background-image: url('http://i27.tinypic.com/v689oz.png'); background-repeat: repeat-x; background-position: top-left; } td.yearmonth { color: #dddddd; border-style: none; } /*********************************************** HEADER IMAGE ******************************************/ .headerimage { position: relative; width: 0px; height: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; background-image: url(''); background-repeat: no-repeat; } .separator { height: 0px; } /*********************************************** COMMENT PAGES ******************************************/ .clear { display: none; height: 0px; } .skiplinks { text-transform: lowercase; text-align: center; padding: 10px; color: #888888; border-bottom: 1px dashed #bbb; } .datesubjectcomment { background-color: #dddddd; padding: 5px; } .userpiccomment { position: relative; border: 2px solid #cccccc; background-color: #FEFEFE; top: -30px; left: 0px; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left; } .box { border-style: solid; border-width: 1px 0px 0px 0px; border-color: #cccccc; padding: 10px; clear: right; } input, textarea { background-color: #dddddd; color: #555555; } textarea.textbox{ width: 95% !important; } .reply{ position: relative; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; text-align: left; font-family: "tahoma"; font-size: 10px; line-height: 125%; color: #EB8A00; } .replytosubject { font-weight: bold; } .commentreply { position: relative; margin: 10px; font-size: 10px; font-family: "tahoma"; color: #999; } .commentbox { border-color: #cccccc; border-width: 1px; border-style: solid; padding: 10px; margin: 10px; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #EB8A00; } .datesubjectcomment a:hover { color: #999999; } .commentboxpartial { border-color: #cccccc; border-width: 1px; border-style: dotted; padding: 10px; margin: 10px; } .commentinfo { margin-top: 10px; width: 100%; }

**************************************************************
KEEP READING! --->

This layout is "image heavy" and they are already uploaded to tinypic.com, but for those who have problems with tinypic, here are my image links, and where to put them. (FIRST UPLOAD TO YOUR OWN HOST)

http://i132.photobucket.com/albums/q11/minty_peach/666gray.png
section to be replaced under:
--> li.sbaritem:hover

http://i132.photobucket.com/albums/q11/minty_peach/444gray.png
section to be replaced under:
--> #header
--> #footer
--> .comments
--> table.yeartable td.yeardate, table.yeartable td.yearday
--> .sbarcalendar
--> li.sbaritem

http://i132.photobucket.com/albums/q11/minty_peach/green5.png
sections to be replaced under:
--> .sbarcalendarposts
--> li.sbartitle
--> .datesubject
--> table.yeartable td.yearday