Tranquility II ▶ Smoke on the Water

[daemon]

This was originally a request layout, but it spiralled waaay off track...nevertheless, I liked the result so I'm going to post it. I also have a bunch of semi-completed layouts stored on my test account -- some requests -- and will try to get these into open as well.

Oh, and no worky in Internet Explorer, cry moar. I was going to try to work some cross compatibility into this, but it's a weekend, I have Drawing class tomorrow shoot me, and I thoroughly lack motivation.

layout notes.

Account Types:
Basic, Plus, and Paid

Compatible Browsers:
Mozilla Firefox, Safari, Google Chrome, Opera

Min. Resolution:
1024x768

Credits and Misc.:
N/A

Navstrip:
Compatible with and without.

Custom Comment Pages?:
Yes

Disabled Elements:
Tiny icons

installation.

CSS Stylesheet:

/*---------------------------------------------------
STYLESHEET CREATOR: noctem.livejournal.com
STYLESHEET NAME: Smoke on the Water
S2 STYLE: Tranquility II
DOWNLOAD: thrashmetal.livejournal.com

****Please remember to credit!****
-----------------------------------------------------*/

body {
background:#D3D3D3 none repeat scroll 0 0;
color:#B0B0B0;
font-family:arial;
font-size:11px;
line-height:18px;
text-align:center;
}
blockquote {
background:#EEEEEE none repeat scroll 0 0;
color:#C5C5C5;
font-family:georgia;
font-size:10px;
padding:10px;
}
blockquote b, blockquote strong {
}
b, strong {
}
i, em {
}
s, strike {
}
a, a:visited {
color:#9E9E9E;
font-size:100%;
text-decoration:none;
}
a:hover {
text-decoration:none;
}
a img {
border:medium none;
}
a.comm {
background:transparent url(http://stat.livejournal.com/img/community.gif) no-repeat scroll 0 0;
padding-bottom:7px;
padding-left:19px;
}
a.user {
background:transparent url(http://stat.livejournal.com/img/userinfo.gif) no-repeat scroll 0 0;
padding-bottom:7px;
padding-left:19px;
}
p {
margin:5px;
padding:5px;
}
form {
display:inline;
margin:0;
padding:0;
}
input, select, textarea {
background:#F4F4F4 none repeat scroll 0 0;
border:0 none;
color:#D3D3D3;
font-family:georgia;
font-size:11px;
margin:3px;
padding:2px;
}
#container {
padding-top:20px;
position:relative;
text-align:left;
}
#header {
border:medium none;
}
#header h1 {
color:#DDDDDD;
display:none;
font-family:georgia;
font-size:37px;
font-weight:normal;
letter-spacing:-3px;
margin-bottom:7px;
margin-left:8px;
margin-top:0;
padding:0;
text-align:center;
text-transform:lowercase;
}
#menu {
color:#333333;
float:left;
margin-bottom:15px;
margin-top:34px;
padding:13px;
position:relative;
width:150px;
}
#content {
margin-left:160px;
position:relative;
}
#entries {
border:0 none;
padding:0;
}
ul#user-links {
margin:0 0 5px;
padding:0;
}
#user-links a, #user-links a:visited {
color:#B0B0B0;
font-family:arial;
font-size:9px;
font-weight:normal;
letter-spacing:0;
line-height:11px;
margin-right:5px;
text-transform:uppercase;
}
#user-links a:hover {
}
.active {
color:#C5C5C5;
font-family:georgia;
font-size:24px;
letter-spacing:-1px;
margin-right:5px;
text-transform:lowercase;
}
ul#user-links {
margin-bottom:0;
margin-left:0;
margin-right:0;
padding:4px 0 6px 9px;
}
ul#lj-summary {
display:none;
margin:0;
padding:0;
}
#menu h2 {
display:none;
margin:20px 0;
}
#menu h2.userpic {
float:left;
text-align:center;
}
#lj-links a, #lj-links a:visited {
color:#B0B0B0;
font-family:georgia;
font-size:22px;
letter-spacing:-1px;
margin-right:5px;
text-transform:lowercase;
}
#lj-links a:hover {
color:#EEEEEE;
}
#menu ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:-2px;
text-align:right;
}
#menu ul li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding:0;
}
#content h2 {
color:#E3E3E3;
font-family:georgia;
font-size:37px;
font-weight:normal;
height:18px;
letter-spacing:-1px;
margin-bottom:3px;
text-transform:lowercase;
}
#content h2 a {
color:#E3E3E3;
}
#entries, #comments {
margin:0;
width:550px;
}
.ind-entry {
border-bottom:0 none;
margin-bottom:12px;
}
.ind-entry h3 img {
float:right;
margin-right:-132px;
padding:5px;
position:relative;
}
.ind-comment-one h3 img, .ind-comment-two h3 img, .ind-comment-screened h3 img {
float:right;
margin-right:-149px;
margin-top:-17px !important;
padding:5px;
position:relative;
}
h3.userpic {
float:right;
}
h3.userpic img {
border:11px solid #E3E3E3;
margin-top:8px;
padding:0;
}
.ind-entry h2 {
color:#424242;
font-family:georgia;
font-size:27px;
font-weight:normal;
letter-spacing:-2px;
margin-left:11px !important;
text-transform:lowercase;
}
.ind-comment-one h4, .ind-comment-two h4, .ind-comment-screened h4 {
color:#999999;
font-family:courier new;
font-size:10px;
font-weight:normal !important;
line-height:11px;
padding:0 !important;
text-align:left;
text-transform:uppercase;
}
.ind-entry h4 {
background:#E3E3E3 none repeat scroll 0 0;
color:#B0B0B0;
font-family:tahoma;
font-size:8px;
font-weight:normal;
letter-spacing:0;
line-height:10px;
margin-bottom:0;
margin-top:0;
padding:14px 32px 9px;
text-align:left;
text-transform:uppercase;
}
.ind-entry h4 a, .ind-comment-one h4 a, .ind-comment-two h4 a, .ind-comment-screened h4 a, .ind-entry h4 a:visited, .ind-comment-one h4 a:visited, .ind-comment-two h4 a:visited, .ind-comment-screened h4 a:visited {
color:#C5C5C5;
font-family:georgia;
font-size:9px;
letter-spacing:0;
text-decoration:none;
}
h4 {
padding:15px;
}
.ind-entry div.entry-item, .ind-entry div.month-entries {
background:#E3E3E3 none repeat scroll 0 0;
color:#B0B0B0;
font-family:arial;
font-size:11px;
line-height:20px;
padding:2px 19px 10px;
text-align:justify;
}
.ind-entry div.entry-item a, .ind-entry div.month-entries a, .ind-entry div.entry-item a:visited, .ind-entry div.month-entries a:visited {
border-bottom:medium none;
color:#9E9E9E;
text-decoration:none;
}
.ind-entry div.entry-item a:hover {
}
.ind-comment-one, .ind-comment-two, .ind-comment-screened {
margin:10px 0;
padding:5px;
}
.ind-comment-one #content h2, .ind-comment-two #content h2 {
color:#D3D3D3 ;
font-family:georgia;
font-size:20px;
font-weight:normal;
height:18px;
letter-spacing:-1px;
margin-bottom:3px;
text-transform:lowercase;
}
.ind-comment-one, .ind-comment-two {
background:#E3E3E3 none repeat scroll 0 0;
border-bottom:0 none;
font-family:arial;
padding:4px 17px;
}
.ind-comment-screened {
background-color:#F6F6F6;
opacity:0.65;
padding:4px 17px;
}

.ind-comment-one h2 {
color:#B4B4B4;

font-size:18px;
font-style:normal !important;
margin-bottom:0;
}
.ind-comment-one div.entry-item {
color:#767676;
font-family:arial;
font-size:11px;
line-height:18px;
}
.ind-comment-two h2 {
color:#999999;
margin:20px 0;
}
.ind-comment-two div.entry-item {
color:#767676;
line-height:18px;
margin:10px 0;
}
.ind-comment-screened h2 {
color:#999999;
margin:20px 0;
}
.ind-comment-screened div.entry-item {
color:#767676;
margin:10px 0;
}
.ind-comment-screened div.entry-item a {
color:#00B4FF;
text-decoration:underline;
}
.ind-comment-screened div.entry-item a:visited {
color:#00B4FF;
}
.ind-comment-screened div.entry-item a:hover, .ind-comment-screened div.entry-item a:visited:hover {
color:#006894;
}
.month-entries {
margin:10px 0;
}
.month-entries ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:10px;
}
.month-entries ul li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding:3px;
}
.ljtaglist {
background:#E3E3E3 none repeat scroll 0 0;
list-style-image:none;
list-style-position:outside;
list-style-type:square;
margin-left:0;
padding:16px 31px;
}
.ljtaglist ul li {
border-bottom:1px solid gray;
}
#footer {
color:#C5C5C5;
font-size:11px;
position:relative;
}
#footer b, #footer strong {
}
#footer p {
padding:20px;
}
#footer a, #footer a:visited {
color:#B5B5B5;
font-size:100%;
font-weight:bold;
text-transform:uppercase;
}
#footer a:hover, #footer a:visited:hover, #footer a:active {
color:#B5B5B5;
}
#content {
margin-left:180px;
}
.ljtags {
color:#C5C5C5;
font-family:georgia;
font-size:11px;
margin-bottom:-13px;
margin-left:10px;
margin-top:20px;
text-transform:lowercase;
}
.entry-form {
background:white none repeat scroll 0 0;
padding:13px;
}
.entry-form h2 {
display:none;
}
.ljuser a b {
background:transparent none repeat scroll 0 0;
font-family:georgia;
font-style:italic;
font-weight:normal;
letter-spacing:1px;
text-decoration:none !important;
}
.ljuser a:hover b {
background:transparent none repeat scroll 0 0;
border-bottom:0 none;
text-decoration:none !important;
}
img[src*="userinfo.gif"] {
background-repeat:no-repeat !important;
height:0;
width:0;
}
img[src*="openid-profile.gif"] {
height:0;
width:0;
}
img[src*="anonymous.gif"] {
height:0;
width:0;
}
img[src*="community.gif"] {
height:0;
width:0;
}
img[src*="partnercomm.gif"] {
height:0;
width:0;
}
img[src*="newsinfo.gif"] {
height:0;
width:0;
}
img[src*="syndicated.gif"] {
height:0;
width:0;
}
img[src*="icon_protected.gif"] {
background-image:url(http://irondevil.org/icon/categories/damnicons/lock.gif) !important;
background-repeat:no-repeat;
height:0;
padding:14px 14px 0 0 !important;
width:0;
}
img[src*="icon_groups.gif"] {
background-image:url(http://irondevil.org/icon/categories/damnicons/lock.gif) !important;
background-repeat:no-repeat;
height:0;
padding:14px 14px 0 0 !important;
width:0;
}
img[src*="icon_private.gif"] {
background-image:url(http://irondevil.org/icon/categories/damnicons/lock.gif) !important;
background-repeat:no-repeat;
height:0;
padding:14px 14px 0 0 !important;
width:0;
}
div.ContextualPopup {
font-family:courier new,"Arial","Verdana",sans-serif !important;
font-size:11px !important;
font-size-adjust:none !important;
font-stretch:normal !important;
font-style:normal !important;
font-variant:normal !important;
font-weight:normal !important;
line-height:normal !important;
margin:5px 0 0 20px;
}
div.ContextualPopup img {
border:0 none;
}
div.ContextualPopup div.Inner {
background:#E3E3E3 none repeat scroll 0 0 !important;
border:0 none !important;
color:#B0B0B0 !important;
font-family:arial;
padding:0;
width:20em;
}
div.ContextualPopup .Content {
line-height:1.4;
margin-right:50px;
padding:2px 4px 6px;
}
div.ContextualPopup .Relation {
font-weight:bold !important;
}
div.ContextualPopup .Content .OnlineStatus {
font-weight:bold;
}
div.ContextualPopup .Userpic {
padding:8px 8px 0 0;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
color:#929292 !important;
font-weight:normal;
text-decoration:none !important;
}
#lj_controlstrip {
background:transparent none repeat scroll 0 0 !important;
}
#lj_controlstrip td {
border-bottom:0 none;
color:#989898;
}
#lj_controlstrip_statustext {
color:#B0B0B0;
}
#lj_controlstrip a {
color:#B0B0B0;
}
#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic {
border-right:0 none;
}
#lj_controlstrip_login td {
border-bottom:0 none;
}
#lj_controlstrip td td {
border-bottom:0 none;
}
#lj_controlstrip_userpic {
background-image:url(http://stat.livejournal.com/palimg/controlstrip/ljlogo.gif/ptd4dce8000000);
}
#lj_controlstrip_loggedout_userpic {
background-image:url(http://stat.livejournal.com/palimg/controlstrip/ljlogo-loggedout.gif/ptd4dce8000000);
}
#lj_controlstrip input {
background:#CFCFCF none repeat scroll 0 0;
color:#B0B0B0 !important;
}
#lj_controlstrip_search_input_text, #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember {
background:#CFCFCF none repeat scroll 0 0 !important;
}
#lj_controlstrip .ljuser a b {
background:transparent none repeat scroll 0 0;
color:#B0B0B0;
letter-spacing:0;
text-decoration:none !important;
}
#lj_controlstrip a img {
margin:0;
opacity:0.5;
padding:0;
}

How to Install:
1. Click here OR type "Tranquility II" into the search box. Apply one of the listed themes.

2. Click Customize your theme in the Current Theme box on the upper-right.

3. If you wish to have the extra links under the main navigation, add these via the Links List.

4. Click Custom CSS.

5. Make sure the drop-down box is set to No. Paste the code into the box and click Save Changes.

Credit and Comment:
• Please credit thrashmetal somewhere public. (Profile, Links List, Friends Only post, etc.)
• Comments aren't required, but are appreciated!

Other Instructions:
N/A

Please read all instructions and the LAYOUT FAQ before asking questions!

▶ Watch thrashmetal for more!
▶ List of previously made layouts
▶ Check the Layout FAQ if you need help.