Gryffindor Common Room layout

[fuesch]

There are some colors that I probably didn't get 100% right, because I couldn't find full-size screenshots for the Gryffindor common room.

Gryffindor Common Room

preview



Click here for live preview, then click on the layout's icon.



layout info
Based on Flexible Squares.
Works for all account types.
Tested in Firefox 18, Google Chrome 24 and Internet Explorer 9.

The widths of maincontent and sidebar aren't changeable.

how to implement this layout
Go to the Customize Journal page.

Make sure Style System is S2.

Choose the Flexible Squares layout.

Go to Custom CSS
» Use layout's stylesheet(s): No
» Use layout's stylesheet(s) when including custom external stylesheet: No
» Use external stylesheets: No
insert custom stylesheet

/* Gryffindor Common Room
http://fuesch.livejournal.com/37608.html */

body {
margin: 0px;
padding: 50px 0px 75px 0px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
background: #000000 url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/bg.jpg) center top no-repeat;
}

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

a:visited {
color: #F6AF0D;
text-decoration: none;
}

a:hover {
color: #FCCA00;
text-decoration: underline;
}

a:active {
text-decoration: none;
}

code, kbd, pre, tt {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}

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

blockquote {
width: 418px;
margin-left: auto;
margin-right: auto;
padding: 15px;
color: #000000;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/blockquote.png) top center repeat-y;
}

blockquote a, blockquote a:link {
color: #A01210!important;
}

blockquote a:visited {
color: #A94B49!important;
}

blockquote a:hover {
color: #A01210!important;
}

q {
font-style: italic;
}

q i {
font-style: normal;
}

/* ------- GENERAL ------- */

.ljuser img[src*="userinfo.gif"], .ljuser img[src*="community.gif"] {
width: 0px!important;
height: 0px!important;
padding: 12px 0px 2px 14px !important;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/userhead.png) no-repeat!important;
}

.clear {
display: none;
}

#lj_controlstrip_new {
position: absolute;
}

body a + div, #lj_controlstrip_new + div, #content-outer + div {
position: absolute;
background: none;
border: none!important;
}

body a + div {
top: 100px;
left: 25%;
}

#content-outer a + div {
position: static;
}

.headerimage {
position: absolute;
top: 0px!important;
left: 0px!important;
width: 100%;
height: 277px;
margin: 0px auto;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/headerimage.png) top center no-repeat!important;
z-index: 1;
}

#content-outer {
width: 960px;
margin: 75px auto 0px auto;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/content-outer.png) top left repeat-y;
}

#content {
padding-bottom: 15px;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/content.png) bottom left no-repeat;
}

#header {
position: relative;
top: -11px;
width: 587px;
height: 163px;
padding: 3px 25px 0px 25px;
text-align: center;
font-weight: bold;
z-index: 2;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/crest.png) center bottom no-repeat;
}

ul.navheader {
position: absolute;
height: 124px;
width: 272px;
margin: -3px 0px 0px 655px;
padding: 0px;
}

ul.navheader li {
display: block;
padding: 11px 0px 0px 0px;
font-size: 14px;
}

ul.navheader li a:visited {
color: #FCCA00;
}

.title {
display: inline;
width: 587px;
padding: 0px 40px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
line-height: 80%;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/headingdecor-left.png) center left no-repeat, url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/headingdecor-right.png) center right no-repeat;
}

.subtitle {
padding: 16px 0px 0px 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-style: italic;
}

#sidebar {
position: relative;
top: -21px;
right: -8px;
float: right;
width: 304px;
margin: 0px;
padding: 0px;
text-align: left;
font-weight: bold;
z-index: 2;
}

div#sidebar a, div#sidebar a:link {
color: #94B19C;
}

div#sidebar a:visited {
color: #A5B0A8;
}

div#sidebar a:hover {
color: #94B19C;
}

#sidebar .ljuser {
font-weight: normal;
}

#sidebar_tags, #sidebar_summary, #sidebar_calendar, #sidebar_linklist {
padding: 0px 0px 55px 0px;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/sbarbody.png) bottom center no-repeat;
}

.sbarbody {
margin: -55px 0px 0px 0px;
}

.sbarbody2 {
margin: 0px;
padding: 10px 49px 55px 41px;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/sbarbody2.png) bottom center no-repeat;
}

.sbarbody2 b {
font-weight: normal;
}

ul.sbarlist {
margin: 0px;
padding: 0px;
list-style: none;
}

ul.sbarlist + .sbarlist {
margin: 0px;
padding: 5px 49px 0px 41px;
list-style: none;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/sbarlistsbarlist.png) top center;
}

li.sbartitle {
margin: 0px;
padding: 89px 39px 0px 31px;
list-style: none;
text-align: center;
font-size: 16px;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/sbartitle.png) top center;
}

.tagcloud {
padding: 0px;
list-style: none;
text-align: justify;
}

.tagcloud span {
padding: 0px 2px;
vertical-align: middle;
}

li.sbaritem {
margin: 0px;
padding: 5px 0px;
}

li.sbaritem + li.sbaritem {
padding: 7px 0px 5px 0px;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/sbaritem.png) top center no-repeat;
}

.count {
font-weight: normal;
}

#sidebar div.defaultuserpic:first-child {
padding-top: 60px;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/defaulticon1stchild.png);
}

.defaultuserpic {
height: 150px;
margin: -55px 0px 0px 0px;
padding: 94px 39px 0px 31px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/defaulticon.png);
}

#sidebar div:first-child .sbartitle {
padding-top: 55px;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/first-child.png) top center no-repeat;
}

#sidebar div:first-child {
margin: 0px;
}

table.calendar {
margin: 5px auto 0px auto;
}

.sbarcalendar {
padding: 4px 5px;
text-align: center;
font-weight: normal;
border: 1px solid #3B4A3E;
border-top: 1px solid #1C201A;
border-left: 1px solid #1C201A
}

.sbarcalendarposts {
padding: 4px 5px;
text-align: center;
border: 1px solid #3B4A3E;
border-top: 1px solid #1C201A;
border-left: 1px solid #1C201A
}

.sbarcalendarposts a {
display: block;
}

#maincontent {
position: relative;
width: 587px;
margin: 0px auto 0px 25px;
text-align: left;
z-index: 2;
}

#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 40px 0px 5px 0px;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/footer.png) bottom center no-repeat;
z-index: 100;
clear: both;
}

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

ul.navfooter li {
margin: 0px 10px;
display: inline;
}

.navfooter a, .navfooter a:link, .navfooter a:visited {
color: #CCCCCC;
}

.navfooter a:hover {
color: #FCD82E;
text-decoration: none;
}

.clearfoot {
display: none;
}

/* ------- ENTRIES & FRIENDS ------- */

.subcontent {
margin: 0px 0px 40px 0px;
}

.userpic {
position: relative;
float: right;
margin: 63px 25px 10px 10px;
background: none!important;
box-shadow: -2px 2px 10px #141F16;
}

.userpicfriends {
position: relative;
float: right;
margin: 63px 25px 10px 10px;
text-align: center;
color: #4B6450;
font-family: "Times New Roman", Times, serif;
text-shadow: #141F16 -1px 1px 3px;
background: none!important;
}

.userpicfriends img {
margin-bottom: 3px;
box-shadow: -2px 2px 10px #141F16;
}

.userpicfriends font {
color: #FCCA00;
}

.userpicfriends font:hover {
text-decoration: underline;
}

.datesubject {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/datesubject.png) top;
}

.date, .replytoposter {
padding: 31px 135px 0px 145px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
}

.replytoposter {
padding-top: 29px;
font-size: 12px;
text-shadow: #B38F2B 0px 0px 2px;
}

.subject, .replytosubject {
padding: 20px 135px 0px 35px;
font-size: 20px;
}

.replytosubject {
padding-top: 7px;
}

.entry {
padding: 12px 35px 0px 35px;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/entry.png) top center repeat-y;
}

.ljtags, .currents {
margin-top: 12px;
font-size: 10px;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}

.comments {
margin: -13px -35px 0px -35px;
padding: 25px 135px 6px 145px;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 0px;
font-weight: bold;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/comments.png) bottom center no-repeat;
}

.comments a {
display: inline-block;
width: 140px;
}

.comments a, .comments a:link {
font-size: 12px;
letter-spacing: 1px;
}

.separator {
display: none;
}

/* ------- COMMENTS ------- */

.skiplinks {
margin-bottom: 15px;
padding: 10px;
text-align: center;
color: #6F0B0B;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/skiplinks.png) center;
border-top: 1px solid #BF150D;
border-bottom: 1px solid #BF150D;
}

.skiplinks a {
margin: 0px 3px;
}

.separator + .clear + div, .subcontent + .clear + div {
display: none;
}

.subcontent + .clear {
display: block!important;
margin: -52px -35px 40px -35px;
padding: 25px 0px 6px 0px;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/comments.png) bottom center no-repeat;
}

.box {
display: block!important;
padding: 10px;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/box.png) top repeat-x;
border-top: 1px solid #BF150D;
}

.box center {
margin-bottom: 10px;
}

.box + .box center {
margin-top: 10px;
}

.commentbox {
margin: 0px 0px 5px 0px;
padding: 7px 0px 8px 52px;
font-size: 11px;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/commentbox.png) left repeat-y!important;
}

.userpiccomment {
position: relative;
float: left;
height: 29px;
width: 29px;
margin: 1px 0px 0px -47px;
padding: 5px 4px 4px 4px;
font-size: 9px;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/userpiccomment.png) top left no-repeat;
}

.commentreply {
margin: 10px 0px;
}

.commentreply + div {
padding: 4px 0px 1px 4px;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/commentreply+div.png) left repeat-y;
text-align: left!important;
font-size: 11px!important;
color: #A77E04!important;
}

.commentreply + div div {
display: inline;
padding: 2px 0px 0px 5px!important;
vertical-align: top;
}

.commentreply + div div input[type="checkbox"] {
margin: 0px 3px 0px 2px;
}

.commentreply + div div img {
height: 13px;
width: 13px;
margin: 0px 4px 0px 0px;
}

.commentboxpartial {
margin: 0px 0px 5px 0px;
padding: 7px 10px;
font-size: 11px;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/commentbox.png) left repeat-y!important;
}

#content + div {
background-color: transparent!important;
border: none!important;
}

#postform, #qrform {
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/commentbox.png) left repeat-y;
}
#postform td, #qrform td {
padding: 2px;
}

#qrform {
margin-bottom: 5px;
}

.commentbox #qrform {
margin-left: 2px;
color: #000000;
}

#postform br {
display: none;
}

#postform table, #qrform table {
padding: 2px;
border: none!important;
}

input, textarea {
padding: 5px;
font-size: 11px;
color: #000000;
background: #F4EBE2;
border: none;
box-shadow: inset 2px 2px 3px #625E5A;
}

input[type='submit'], input[type='button'] {
color: #FFFFFF;
font-weight: bold;
background: #3A5D7D;
border-radius: 4px;
box-shadow: inset 0px -12px 12px #324150;
}

input[type='submit']:hover {
background: #304D68;
box-shadow: inset 0px -12px 12px #232C35;
}

.commentbox #qrform textarea {
font-size: 12px;
}

#postform textarea.textbox {
width: 95% !important;
}

/* ------- CALENDAR ------- */

.lj-view-archive #maincontent br {
display: none;
}

ul.year {
margin-bottom: 30px;
padding: 10px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/skiplinks.png) center;
border-top: 1px solid #BF150D;
border-bottom: 1px solid #BF150D;
}

ul.year li {
margin: 0px 3px;
display: inline;
}

.active {
font-weight: bold;
}

table.yeartable {
width: 587px;
margin: 0px 0px 20px 0px;
padding: 10px;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/box.png) top repeat-x;
border-top: 1px solid #BF150D;
}

td.yearmonth {
padding: 0px;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
border-style: none;
}

td.yearmonth a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-transform: none;
}

table.yeartable td.yearday {
padding: 10px;
text-align: center;
font-size: 20px;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/commentbox.png) left repeat-y;
}

table.yeartable td.yeardate {
padding: 5px 7px 0px 7px;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/commentbox.png) left repeat-y;
}

table.yeartable td.yeardate div + div {
position: relative;
top: -10px;
}

table.yeartable td.yeardate a {
display: block;
font-weight: bold;
}

.lj-view-month #maincontent {
margin-bottom: 20px;
padding-bottom: 9px;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/comments.png) bottom center no-repeat;
}

.lj-view-month #maincontent form {
padding: 29px 0px 8px 10px;
text-align: center;
font-size: 14px;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/datesubject.png) top;
}

.lj-view-month #maincontent form a {
font-weight: bold;
}

.lj-view-month #maincontent form br, .lj-view-month #maincontent form + br , .lj-view-month #maincontent form + br + br {
display: none;
}

.lj-view-month .entry {
margin-top: -12px;
padding-top: 0px;
padding-bottom: 0px;
}

.lj-view-month dt {
margin: 0px;
padding: 7px 0px 0px 0px;
font-size: 20px;
}

.lj-view-month dd + dt {
margin: 20px 0px 0px 0px;
}

.lj-view-month dd {
width: 418px;
margin-left: auto;
margin-right: auto;
padding: 15px 15px 10px 15px;
color: #000000;
background: url(http://fatfrog.info/Ma/A/layout/hufflepuffcommonroom/blockquote.png) top center repeat-y;
}

.lj-view-month dd a, .lj-view-month dd a:link {
color: #A01210!important;
}

.lj-view-month dd a:visited {
color: #A31111!important;
}

.lj-view-month dd a:hover {
color: #A01210!important;
}

.lj-view-month dd br {
display: block;
margin-top: 5px;
}

.lj-view-day .separator + .clear + .clear + .skiplinks {
margin-top: -10px;
}

/* ------- TAGS ------- */

.lj-view-tags #maincontent {
}

.lj-view-tags h2 {
display: inline;
margin: 0px 0px 0px 20px;
padding: 10px;
font-size: 12px;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/box.png) top repeat-x;
border: 1px solid #BF150D;
border-bottom: none;
}

.ljtaglist {
margin: 9px 0px 5px 0px;
padding: 10px;
list-style: none;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/box.png) top repeat-x;
border-top: 1px solid #BF150D;
}

ul.ljtaglist li {
margin: 0px 0px 5px 0px;
padding: 7px 0px 8px 10px;
font-size: 11px;
background: url(http://fatfrog.info/Ma/A/layout/gryffindorcommonroom/commentbox.png) left repeat-y;
}