Our Friendly Bomber layout & matching profile layout

[fuesch]

I'm still amused that Jim wore a tie with a skull pattern, so here's a layout to celebrate this glorious character-costume combo.

Our Friendly Bomber

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 24, Google Chrome 30 and Internet Explorer 10.

Maincontent width is flexible. The sidebar's is too, but still restricted by the background image.

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

/* Our Friendly Bomber
http://fuesch.livejournal.com/41440.html */

body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
color: #1E2136;
font-size: 12px;
background: #B7B8C0 url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/bg.png) right repeat-y;
}

body > div[style*="width"] {
position: absolute;
margin: 0px 0px 0px 205px!important;
padding: 0px!important;
background-color: none!important;
border: none!important;
}

body > #content-outer + div[style*="width"] {
position: absolute;
margin: 0px auto!important;
padding: 0px!important;
background-color: none!important;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/sidebar.gif) left repeat-y;
border: none!important;
}

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

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

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

a:active {
color: #263B9E;
text-decoration: none;
}

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

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

q {
font-style: italic;
}

q i {
font-style: normal;
}

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

#lj_controlstrip_new {
margin-left: 55px;
}

.clear {
display: none;
}

.headerimage {
position: absolute;
top: 12px;
width: 113px;
height: 586px;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/Jim.png);
z-index: 15;
}

#lj_controlstrip_new + .headerimage + #content-outer {
margin-top: -50px;
}

#content {
text-align: left;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/sidebar.gif) left repeat-y;
}

#header {
width: 300px;
height: 248px;
padding: 112px 5px 0px 0px;
text-align: right;
font-size: 10px;
color: #B7B8C0;
text-transform: uppercase;
}

ul.navheader {
margin: 0px;
padding: 0px 0px 16px 0px;
}

ul.navheader li {
display: block;
padding: 4px 8px 4px 113px;
background: #1E2136;
}

ul.navheader li + li {
margin-top: 14px;
}

.view {
color: #F3F6F8;
font-weight: bold;
}

#header a, #header a:link, #header a:visited {
color: #B7B8C0;
text-decoration: none;
}

#header a:hover {
color: #F3F6F8;
text-decoration: none;
}

#header a:active {
color: #F3F6F8;
font-weight: bold;
}

.title {
padding: 0px 8px 0px 113px;
}

.subtitle {
padding: 0px 8px 0px 113px;
text-transform: none;
}

#sidebar {
display: inline-block;
width: 170px;
margin: 0px 0px 0px 70px;
text-align: right!important;
color: #B7B8C0;
vertical-align: top;
text-align: left;
}

#sidebar > div[style*="width"] {
position: relative!important;
width: 170px!important;
top: -15px;
margin: 0px!important;
text-align: right;
}

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

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

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

#sidebar a:active {
color: #F3F6F8;
text-decoration: none;
text-shadow: #B7B8C0 0px 0px 5px;
}

.sbarbody {
margin: 0px 0px 30px 0px;
}

.sbarbody2 {
margin: -30px 0px 30px 0px;
font-size: 11px;
}

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

ul.sbarlist + .sbarlist {
margin: 0px 0px 30px 0px;
padding: 0px;
font-size: 11px;
list-style: none;
}

li.sbartitle {
padding: 0px 0px 8px 0px;
text-transform: uppercase;
list-style: none;
}

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

li.sbaritem + li {
padding-top: 8px;
}

div.defaultuserpic {
margin-bottom: 30px;
padding: 0px;
text-align: right;
background: none;
}

table.calendar {
margin: 0px -2px 0px auto;
}

.sbarcalendar {
width: 20px;
padding: 2px 0px;
text-align: center;
border: 1px solid #373A53;
}

.sbarcalendarposts {
width: 20px;
padding: 2px 0px;
text-align: center;
background: #373A53;
border: 1px solid #373A53;
}

.sbarcalendarposts a {
display: block;
}

.defaultuserpic {
margin: 0px 0px 15px 0px;
padding: 10px;
text-align: center;
background: #EEEEEE;
}

.tagcloud {
list-style: none;
}

.tagcloud span {
vertical-align: middle;
}

.tagcloud span + span {
margin-left: 5px;
}

#maincontent {
display: inline-block;
width: 650px;
margin: -248px 0px 0px 62px;
vertical-align: top;
text-align: left;
}

#maincontent > div[style*="margin"] {
position: relative;
top: -15px;
margin: 0px auto!important;
text-align: center;
}

#footer {
width: 300px;
padding: 0px 5px 20px 0px;
text-align: right;
font-size: 10px;
color: #B7B8C0;
text-transform: uppercase;
clear: both;
}

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

ul.navfooter li {
display: block;
padding: 4px 8px 4px 113px;
background: #0F1225;
}

ul.navfooter li + li {
margin-top: 14px;
}

.viewing {
color: #F3F6F8;
font-weight: bold;
}

#footer a, #footer a:link, #footer a:visited {
color: #B7B8C0;
text-decoration: none;
}

#footer a:hover {
color: #F3F6F8;
text-decoration: none;
}

#footer a:active {
color: #F3F6F8;
font-weight: bold;
}

.clearfoot {
display: none;
}

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

.subcontent {
margin-bottom: 30px;
}

.userpic {
position: relative;
float: right;
margin: 10px 10px 5px 10px;
background: none!important;
z-index: 15;
}

.userpicfriends {
position: relative;
float: right;
margin: 10px 10px 5px 10px;
text-align: center;
font-size: 10px;
background: none!important;
z-index: 15;
}

.userpicfriends img {
padding-bottom: 3px;
}

.userpicfriends font {
color: #43508E;
}

.datesubject {
padding: 10px 10px 12px 10px;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/datesubject.png);
}

.date, .replytoposter {
margin: -11px 0px 0px -6px;
padding: 0px 0px 10px 0px;
font-size: 22px;
color: #C6C8CE;
}

.replytoposter b {
font-weight: normal;
}

.subject, .replytosubject {
margin: -24px 0px 0px 20px;
color: #1E2136;
font-size: 16px;
}

.subject a, .replytosubject a {
color: #1E2136;
}

.entry {
margin-left: 10px;
padding: 10px 10px 0px 10px;
text-align: left;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/entry.png) right bottom repeat-x;
}

.ljtags, .currents {
margin-top: 12px;
font-size: 11px;
color: #F3F6F8;
}

.currents strong {
font-weight: normal;
}

.currentmood img {
padding-right: 3px;
}

.comments {
margin: -5px 0px 0px -10px;
padding-top: 18px;
text-align: right;
color: #B7B8C0;
font-size: 10px;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/comments.png) left top no-repeat;
}

.comments a {
color: #1E2136;
}

.separator {
display: none;
}

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

.skiplinks {
margin-bottom: 14px;
padding: 4px 8px;
text-align: left;
font-size: 10px;
color: #AAABB5;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/datesubject.png);
}

.box {
margin-top: -20px;
padding-left: 10px;
}

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

.box + .box {
margin-top: 1px;
text-align: center;
}

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

.commentbox {
margin: 0px 0px 4px 0px;
padding: 0px 0px 16px 0px;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/entry.png) right bottom no-repeat;
}

.datesubjectcomment {
padding: 5px 10px;
font-size: 16px;
color: #C6C8CE;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/datesubject.png);
}

.datesubjectcomment b {
font-weight: normal;
}

.datesubjectcomment img[src*="userinfo.gif"] {
margin-top: -2px;
padding-bottom: 2px;
}

.datesubjectcomment strong {
color: #1E2136;
font-weight: normal;
}

.userpiccomment {
position: relative;
float: right;
margin: 0px -5px 5px 10px;
z-index: 15;
}

.commentreply {
margin: 10px;
}

.commentreply + div {
padding: 0px 10px 10px 10px;
text-align: right!important;
font-size: 0px!important;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/comments.png) left bottom no-repeat;
}

.commentreply + div a {
font-size: 10px;
}

.commentreply + div > a + a {
margin-left: 7px;
}

.commentreply + div div {
padding: 5px 0px 0px 0px!important;
text-align: right!important;
font-size: 10px;
}

.commentreply + div div img {
vertical-align: text-bottom;
}

.commentboxpartial {
margin: 0px 0px 20px 0px;
padding: 5px 10px;
font-size: 16px;
color: #C6C8CE;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/datesubject.png);
}

.commentboxpartial b {
font-weight: normal;
}

.commentboxpartial img[src*="userinfo.gif"] {
margin-top: -2px;
padding-bottom: 2px;
}

#qrform {
margin-bottom: 4px;
padding: 0px 0px 16px 0px;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/entry.png) right bottom no-repeat;
}

#qrform table {
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/comments.png) left bottom no-repeat;
border: none!important;
}

.commentbox #qrform {
margin-bottom: 0px;
padding: 0px;
text-align: left!important;
text-transform: none;
background: none;
}

.commentbox #qrform table {
background: none;
}

input, textarea {
padding: 2px;
color: #1E2136;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/datesubject.png);
border: 1px solid #989AA5;
}

input {
font-family: Georgia, "Times New Roman", Times, serif;
}

input[type='radio'], input[type='checkbox'] {
padding: 0px;
background: none;
}

input[type='submit'], input[type='button'] {
padding: 1px 2px;
font-size: 10px;
font-weight: bold;
vertical-align: text-bottom;
border-top: 1px solid #C7C7CD;
border-right: 1px solid #C7C7CD;
}

input[type='submit']:active, input[type='button']:active {
position: relative;
top: 1px;
right: 1px;
border-top: 1px solid #C2C3C9;
border-right: 1px solid #C2C3C9;
border-left: 1px solid #AAABB5;
border-bottom: 1px solid #AAABB5;
}

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

.lj-view-reply .subcontent + .separator + .clear + div, .lj-view-reply .subcontent + .clear + div {
display: none;
}

#postform {
margin-bottom: 20px;
padding: 0px 0px 16px 0px;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/entry.png) right bottom no-repeat;
}

#postform table {
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/comments.png) left bottom no-repeat;
}

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

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

ul.year {
margin: 0px 10px 12px 0px;
padding: 4px 8px;
text-align: left;
font-size: 10px;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/datesubject.png);
}

ul.year li {
margin-left: 5px;
padding: 0px;
display: inline;
}

table.yeartable {
width: 100%;
margin: 0px 0px 2px 0px;
padding: 0px 10px 26px 10px;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/entry.png) right bottom no-repeat;
}

td.yearmonth {
font-size: 16px;
border-style: none;
}

td.yearmonth + .yearmonth {
font-size: 12px;
}

table.yeartable td.yearday {
padding: 10px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/datesubject.png);
border: 1px solid #C2C3C9;
}

table.yeartable td.yeardate {
padding: 0px;
}

table.yeartable td.yeardate a {
margin-top: -3px;
display: block;
font-size: 16px;
}

td.yeardate div {
padding: 3px 5px 0px 5px;
border: 1px solid #C2C3C9;
border-bottom: none;
}

td.yeardate div + div {
padding: 0px 5px 3px 5px;
border-top: none;
border-bottom: 1px solid #C2C3C9;
}

.lj-view-month #maincontent form {
margin-bottom: 14px;
padding: 0px 8px;
text-align: left;
font-size: 10px;
color: #C6C8CE;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/datesubject.png);
}

.lj-view-month #maincontent form select, .lj-view-month #maincontent form input {
vertical-align: middle;
}

.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-left: 0px;
padding: 0px;
font-size: 0px;
background: none;
}

.lj-view-month dt {
margin: 0px;
padding: 10px 10px 12px 10px;
font-size: 16px;
color: #C6C8CE;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/datesubject.png);
}

.lj-view-month dt b {
font-weight: normal;
}

.lj-view-month dd {
margin: 0px 0px 4px 10px;
padding: 10px 10px 26px 10px;
font-size: 12px;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/entry.png) right bottom no-repeat;
}

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

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

.lj-view-tags h2 {
margin: 0px;
padding: 10px;
font-size: 22px;
color: #C6C8CE;
font-weight: normal;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/datesubject.png);
}

ul.ljtaglist {
margin: 0px 0px 0px 10px;
padding: 5px 10px 26px 10px;
list-style: none;
background: url(http://fatfrog.info/Ma/A/layout/ourfriendlybomber/entry.png) right bottom no-repeat;
}

ul.ljtaglist li {
padding: 5px 0px 0px 0px;
}







This profile layout is flexible in width and height.

Go to Edit Profile and insert the code into the Bio part.
To copy the code, click in the text area and then press Ctrl+A and Ctrl+C.

http://fatfrog.info/Ma/A/layout/ourfriendlybomber/profile-Jimtop.png">
http://fatfrog.info/Ma/A/layout/ourfriendlybomber/profile-Jimleft.png">	http://fatfrog.info/Ma/A/layout/ourfriendlybomber/profile-bg.png" rowspan="3">http://fatfrog.info/Ma/A/layout/ourfriendlybomber/profile-Jimright.png">		http://fatfrog.info/Ma/A/layout/ourfriendlybomber/profile-skulls.png" rowspan="3">
	CONTENT HERE

You don't have to use the lj-raw tags. With them you can only make line breaks/new paragraphs with
and
. Without the lj-raw tags you can also create line breaks and new paragraphs just by hitting the enter key.

If you want to change the link color, put a font tag with a different color in your link. Like so:
LINK TEXT