undertheblue | Layout: 04: The Starry Sky.

Live Preview is currently

ruriair.

Works with: Chrome, FireFox, IE.
Resolution: 1024x768 and above.
Features: Custom everything except the usual modules; responsive journal header. Tolerable on mobile?
Navstrip: Yes.

How To Install:

1. Go to the Select Style page and type "Plain" into the search box. Select Plain for Tabula Rasa by hitting Apply Theme underneath it.

2. Go to the Modules page. Make sure everything is under "Main Module Section"; make sure Profile is ranked first, Navigation is ranked second, followed by Link List, followed by Custom Text at the lowest. Hit Save.

3. Go to the Custom CSS page and uncheck "Use layout's stylesheet(s)". Copy and paste this into "Custom Stylesheet URL": http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Just+Me+Again+Down+Here|Coming+Soon

4. Copy and paste the code below into "Use embedded CSS" and hit Save.

4. On the same page, make sure your Page Setup is "1 Column (modules at top and bottom; no sidebar)" by hitting Apply Page Setup underneath it.

CODE:

/*THE STARRY SKY by RURIAIR. BACKGROUND BY SUBTLE PATTERNS. MINI ICONS BY PINVOKE.*/

body {
background: #fafafa url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Backgrounds/stardust.png') repeat fixed;
color: #444;
font: 14px "Coming Soon", century gothic, sans-serif;
padding: 0px 0px 0px 0px!important;
margin: 0;
text-shadow: #000 2px 1px 1px;
  scrollbar-base-color: #444;
  scrollbar-3dlight-color: #333;
  scrollbar-highlight-color: #333;
  scrollbar-track-color: #333;
  scrollbar-arrow-color: #0a0a0a;
  scrollbar-shadow-color: #2a2a2a;
  scrollbar-dark-shadow-color: #2a2a2a;

}

::-webkit-scrollbar-thumb:vertical {
background-color: #444;
height:50px;
border: 1px solid #2a2a2a;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

::-webkit-scrollbar {
height:10px;
width:10px;
border: 1px solid #2a2a2a;
background-color: #111;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

::-webkit-scrollbar-track {
background: #3a3a3a;
}

::selection {
background:#666;
color:#fff;
text-shadow: #000 2px 1px 1px;
}

::-moz-selection {
background:#666;
color:#fff;
text-shadow: #000 2px 1px 1px;
}

::-webkit-selection {
background:#666;
color:#fff;
text-shadow: #000 2px 1px 1px;
}

img a, a img {border:none;}

a, a:link {
font-family: georgia;
color: #333;
text-decoration: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

a:hover {
color: skyblue;
text-decoration: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

b, strong {
color: #333!important;
}

li {
display: inline;
}

ul {
padding: 0;
margin: 0;
}

.entry-content li, .sticky-entry div.entry-content li {display: list-item;}

.entry-content ul, .sticky-entry div.entry-content ul {
width: 75%;
margin: 10px auto;
border: 1px dashed #d9d5db;
padding: 25px;
background: #fafafa;
font: 12px "trebuchet ms", sans-serif;
}

pre, xmp, plaintext, listing {
max-width: 100%;
word-wrap: break-word;
font-size: 14px;
}

blockquote {
border: 1px dashed #d9d5db;
padding: 15px;
background: #fafafa;
font: 12px "trebuchet ms", sans-serif;
}

.entry-content ul a, .sticky-entry div.entry-content ul a, blockquote a {
font-size: 14px;
}

/*HEADER*/

#header {
margin: 10px auto;
}

#title, #subtitle {
width: 80%;
margin: auto;
text-align: center;
}

#title {
font: 30px "century gothic", sans-serif;
color: #666;
letter-spacing: -3px;
margin-bottom: -10px;
}

#subtitle {
font: 25px "just me again down here", trebuchet ms, sans-serif;
color: #fff;
letter-spacing: 3px;
}

#pagetitle {
display:none;
}

/*MAIN*/

.topnav {margin: 25px 0px -40px 0px;
max-height: 17px;
padding: 5px;}

.page-back a {
font-size: 0px;
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/arrow-skip-180.png') no-repeat;
padding: 16px 16px 0px 0px;
margin-right: 5px;
}

.page-forward a {
font-size: 0px;
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/arrow-skip.png') no-repeat;
padding: 16px 16px 0px 0px;
margin-left: 5px;
}

.bottomnav {margin: -25px 0px 5px 0px;
max-height: 17px;
padding: 5px;
}

.page-separator {display:none;}

.navigation a {
color: #c7cbed;
position: relative;
z-index: 99;}

#primary {
width: 50%;
margin: auto;
text-align: center;
position: relative;
z-index: 99;
min-height: 50px;
min-width: 678px;
}

/*ENTRIES*/

.noentries {
font: italic 14px georgia;
color: #d9d5db;
letter-spacing: 3px;
margin: auto;
}

.page-entry #primary {
width: 100%;
}

.page-entry .entry {
width: 50%;
margin: auto;
min-width: 676px;
}

.entry, .tags-container, .page-archive div.month {
border: 1px solid #d9d5db;
background: #fff url('') repeat scroll;
padding: 0px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin: 50px auto;
text-align: center;
text-shadow: none!important;
}

.page-entry .entry, .tags-container {margin: 10px auto;}

.entry-content, .tags-container .contents {
padding: 15px;
text-align: justify;
font-size: 16px;
}

.entry-content img {max-width: 100%;}

.entry div.header, .tags-container div.header, div.month div.header, .comment div.header {
background: #d9d5db url('') repeat scroll;
margin: 0;
padding: 5px;
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-bottom: 1px solid #aaa;
min-height: 32px;
}

h3.entry-title, h3.entry-title a, div.month div.header h3, .page-month dt a, .comment-title, .comment-title a {
margin: 0;
font: bold .9em "trebuchet ms", sans-serif;
letter-spacing: 3px;
text-transform: capitalize;
color: #333;
}

.entry div.header div.inner, .tags-container div.header div.inner, div.month div.header div.inner, .page-month #archive-month .topnav div.inner, .comment div.header div.inner {
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/160.png') no-repeat scroll;
min-height: 32px;
}

h3.entry-title {
width: 90%;
margin: auto;
}

h3.entry-title a {
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/weather-moon-clouds.png') no-repeat scroll;
padding-left: 20px;
}

.datetime, .datetime a {
font: italic .9em georgia;
letter-spacing: 10px;
text-transform: lowercase;
color: #777;
}

.datetime {
padding: 2px;
}

.entry-poster.empty {
margin: auto;
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/playing-card.png') no-repeat scroll;
padding: 0px 16px 0 0;
margin-top: 5px;
vertical-align: text-bottom;
font-size: 16px;
}

.entry-poster {font-size: 0px;}

.entry-poster a b, .ljuser a b, h3.entry-title a b {
color: #333!important;
font: normal 18px "ubuntu condensed", sans-serif!important;
letter-spacing: -1px;
text-transform: lowercase;
vertical-align: text-bottom;
}

.entry-poster span.ljuser:nth-child(2):before {
content: "~";
font: normal 30px "ubuntu condensed", sans-serif!important;
padding: 0px 5px;
}

.entry div.userpic img {
width: 70px;
height: 70px;
margin: 10px;
border: 2px solid #d9d5db;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}

/*ENTRY FOOTERS*/

.entry div.footer hr, .tag-text, .time, .metadata {display:none;}

.tag {
margin: 5px auto;
width: 80%;
font-size: 0px;
}

.tag li {display:inline-table!important;}

.tag li a, .ljtaglist li a {
font: bold 14px century gothic;
color: #9a9da2;
text-transform: uppercase;
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/star-empty.png') no-repeat scroll;
padding-left: 18px;
padding-top: 2px;
margin: 0px 5px;
}

/*ARROW FIX*/
.tag li>a:not([rel=tag]), .tagnav, .tag-nav-trigger { display:none; }

.entry-interaction-links {
text-align: right;
padding: 0px 3px 1px 0px;
}

.entry-readlink {
margin-top: -3px;
}

.entry-readlink a {
font: 20px georgia;
}

.entry-permalink a, .commentpermalink a {
font-size: 0px;
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/weather-clouds.png') no-repeat;
padding: 16px 16px 0px 0px;
}

.entry-replylink a {
font-size: 0px;
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/quill.png') no-repeat;
padding: 16px 16px 0px 0px;
}

.entry div.footer {padding: 3px;}

.page-top {
width: 80%;
margin: 15px auto 5px auto;
text-align: center;
}

.page-top a {
font: 18px "trebuchet ms", sans-serif;
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
}

/*SIDEBAR*/

#module-jump-link, .module, .userlite-interaction-links, .module h2, .manage-link, .module-search.module {display:none;}

.module-userprofile.module, .module-customtext.module, .module-navlinks.module, .module-typelist.module {
display:block!important;
}

#secondary {
color: #d9d5db;
position: relative;
width: 50%;
margin: auto;
text-align: center;
height: 150px;
overflow-y: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity: .7;
-moz-opacity: .7;
-webkit-opacity: .7;
filter: alpha(opacity=70);
z-index: 1;
}

#secondary:hover {
height: 355px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
}

#secondary a {color: #c7cbed;}

#secondary a:hover {color:#666;}

.module-userprofile.module div.userpic img {
margin: 10px;
border: 4px solid #3a3a3a;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}

.journal-name {
color: #fff;
font: 20px century gothic;
letter-spacing: 5px;
margin-top: -5px;
padding-bottom: 5px;
}

.journal-website-name a {
font: 2em "just me again down here", trebuchet ms, sans-serif;
letter-spacing: 3px;
}

.module-navlinks.module {
margin: 5px 0px 0px 0px;
}

.module-navlinks.module li a {
font-size: 0px;
height: 16px;
width: 16px;
padding: 16px 16px 0px 0px;
margin: 0px 5px;
}

a.recent {
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/wheel.png') no-repeat;
}

a.archive {
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/calendar-day.png') no-repeat;
}

a.read {
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/address-book-blue.png') no-repeat;
}

a.network {
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/color-swatches.png') no-repeat;
}

a.tags {
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/direction.png') no-repeat;
}

a.memories {
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/cake.png') no-repeat;
}

a.userinfo {
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/anchor-1.png') no-repeat;
}

.module-typelist.module li a {
margin: 0px 3px;
text-transform: capitalize;
letter-spacing: 3px;
}

.module-customtext.module {
width: 80%;
margin: 10px auto;
padding: 5px;
overflow-y: auto;
height: 90px;
background: #3a3a3a;
border: 1px solid #2a2a2a;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
opacity: .5;
-moz-opacity: .5;
filter:alpha(opacity=50);
color: #d9d5db;
text-align: justify;
letter-spacing: 1px;
font: 12px "trebuchet ms", sans-serif;
}

.module-customtext.module a, .module-customtext.module b {
color: #c7cbed!important;
}

#tertiary {
display:none;
}

/*TAGS PAGE MORE FOUND UNDER ENTRIES*/

.ljtaglist {
padding: 15px;
font: 12px "trebuchet ms", sans-serif;
width: 80%;
margin: auto;
text-align: center;
}

.ljtaglist li {
display: block!important;
font: 16px georgia;
letter-spacing: 1px;
margin: 7px 0px;
}

.ljtaglist li a:hover {
color: #333!important;
}

.tags-container h2 {font-size:0px!important;min-height:32px;}

.non-link-tag {
font: 20px georgia;
color: #333;
}

/*ARCHIVE*/

.page-archive .navigation {
font: 24px georgia;
}

.page-archive .topnav {
margin-bottom: -25px;
}

.page-archive .bottomnav {
margin-top: -40px;
margin-bottom: 15px;
}

.month caption, h3.day-date {display:none;}

table.month {
width: 100%;
padding: 10px;
margin-top: 10px;
}

.month div.footer a {
font: 16px georgia;
}

.month div.footer {
padding-bottom: 5px;
}

table.month td {
padding: 3px;
font: 20px "trebuchet ms", sans-serif;
vertical-align: top;
}

td.day {
width: 70px!important;
height: 70px!important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

td.day .label {
color: #fff;
background: #d9d5db;
width: 100%;
float: left;
}

td.day a {
font-size: 20px;
color: #333;
}

td.day:hover {
background: #d9d5db;
color: #fff;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

table.month thead {
color: #666;
font: bold 16px century gothic;
text-transform: uppercase;
letter-spacing: 2px;
}

.page-month div.month {
background: #fff;
margin: auto;
margin-top: -1px;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border: 1px solid #d9d5db;
border-top: 1px solid #aaa;
border-bottom: none!important;
}

.page-month #archive-month {
background: #d9d5db url('') repeat scroll;
margin: 10px 0;
padding: 0;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-bottom: 1px solid #aaa;
min-height: 32px;
text-shadow: none!important;
}

.page-month dd {
font: 16px georgia;
text-align: left;
padding: 25px;
margin: 0;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
}

.page-month dl {
margin: 0!important;
}

.page-month .navigation {
margin: auto!important;
font-size: 0;
max-height: 100%!important;
}

.page-month .navigation a {
font: 16px georgia;
color: #333;
}

.page-month .topnav {padding: 6px;}

.page-month .bottomnav {
margin: 0!important;
border: 1px solid #d9d5db;
border-top: none!important;
background: #fff url('') repeat scroll;
padding: 5px;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
}

.page-month .datetime, .page-month .restrictions, .page-month .access-filter, .page-month .entry-poster.empty {display:none;}

.page-month dt {
border: 1px dashed #d9d5db;
padding: 15px;
background: #fafafa;
font: 12px "trebuchet ms", sans-serif;
width: 70%;
margin: 15px auto;
}

/*STICKY*/

.sticky-entry-icon, .sticky-entry-title, .sticky-entry .datetime {display:none;}

/*COMMENT PAGES*/

.comment-from-text, .comment-date-text, .comment li.link.thread a, .partial .comment .datetime, .comment-subjecticon, #subjectIconImage {display:none;}

#comments {
text-align: center;
width: 80%;
margin: auto;
}

#comments .entry-readlink a {
font: 30px georgia;
color: #fff;
}

#comments .entry-interaction-links {
float: right;
}

.comment-pages {
width: 60%;
margin: 10px auto;
text-align: center;
}

.comment-pages, .comment-pages b {
font-size: 0px;
}

.comment-pages a, .comment-pages a b {
color: #fff;1
font: bold 12px georgia;
margin: 3px;
}

.comment-pages a:hover, .comment-pages a b:hover {
color: skyblue!important;
}

.comment-pages b {color: #d9d5db!important;}

.comment-page-current b {
color: #666!important;
font: bold 12px georgia;}

.view-flat a, .view-top-only a, .view-threaded a {
font: 14px georgia;
margin: 5px;
color: #c7cbed!important;
letter-spacing: 3px;
}

.comment {
text-align: left;
background: #fff;
border: 1px solid #d9d5db;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin: 30px auto;
width: 80%;
text-shadow: none!important;
}

.comment div.header {
margin-bottom: 10px;
}

.comment-title {
width: 90%;
margin: auto;
}

.comment .datetime {
text-align: right;
margin-left: 30px;
}

.comment-content {
min-height: 50px;
padding: 10px;
text-align: justify;
font-size: 16px;
}

.comment-poster {
padding: 5px;
}

.anonymous {
font-style: italic;
color: #aaa;
}

.comment div.userpic img {
float: left;
width: 70px;
height: 70px;
margin: 10px;
border: 2px solid #d9d5db;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}

.comment div.footer {
width: 90%;
margin: auto;
text-align: center;
padding: 5px;
}

.partial .comment {
width: 50%;
padding: 5px;
}

/*REPLIES*/

form#postform {
border: 1px solid #d9d5db;
background: #fff url('') repeat scroll;
padding: 7px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-shadow: none!important;
text-align: left;
}

form#qrform {
text-align: left!important;
}

#postform .textbox, #qrform .textbox, #qrform .text, #qrform select {
border: 1px solid #aaa;
color: #666;
padding: 7px;
background: #d9d5db!important;
font: 16px "Coming Soon", century gothic, sans-serif;
}

#postform select#prop_picture_keyword {
margin: 5px!important;
border: 1px solid #aaa;
color: #666;
padding: 3px;
background: #d9d5db!important;
font: 16px "Coming Soon", century gothic, sans-serif;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

select#prop_picture_keyword option:nth-child(even){
background: #aaa;
color: #fff;
}

#commenttext.textbox, #body.textbox, #subject.textbox {
width: 90%!important;
margin: auto;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

#subject.textbox {
margin-bottom: 10px;
font: bold 12px "trebuchet ms", sans-serif!important;
}

/*QUICKER REPLY*/
.qr-icon img {
border: 2px solid #d9d5db;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}

#qrform .qr-body {margin-left:60px;
}

#qrform .qr-footer {
padding-bottom:15px;
text-align: center;}

#qrform select#prop_picture_keyword.select{
margin: 0px 5px 5px 5px;
padding: 1px;
border-radius: 10px 0px 0px 0px;
-moz-border-radius: 10px 0px 0px 0px;
-webkit-border-radius: 10px 0px 0px 0px;
}

#qrform input#subject.text {
margin: 0px 0px 5px 0px;
border-radius: 0px 10px 0px 0px;
-moz-border-radius: 0px 10px 0px 0px
-webkit-border-radius: 0px 10px 0px 0px;
}

#qrform #body.text {
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
}

#qrform #subject.textbox {margin-top: 10px;
margin-bottom: 5px;}

input#submitpost.submit, input#submitmoreopts.submit, input#submitpview.submit {
background: #eae6ea;
margin: 0px 5px;
border: 1px solid #aaa;
color: #aaa;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-shadow: 1px 1px 1px #fff;
text-transform: uppercase;
letter-spacing: 1px;
font: bold 20px Ubuntu Condensed;
padding:3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

input#submitpost.submit:hover, input#submitmoreopts.submit:hover, input#submitpview.submit:hover {
background: #d9d5db;
text-shadow: 1px 1px 1px #333;
color: #fff;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

/*ICONS*/

.default.label, .keywords-label, .comment-text, .description-text, .icons-container h2  {display:none!important;}

.page-icons #primary {
width: 80%;
}

.icons-container {
text-align: center;
color: #c7cbed;
}

.icon {
display: inline-table;
width: 300px;
margin: 35px 70px;
text-shadow: none!important;
}

.icon-image {
background: #d9d5db url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/160.png') no-repeat scroll 2% 50%;
padding: 3px 0px 0px 3px;
height: 20px;
margin: auto;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
}

.icon-image img {
border: 3px solid #d9d5db;
height: 100px;
width: 100px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
margin-top: 30px;
}

.icon-info {
background: #fff;
border: 1px solid #d9d5db;
min-height: 68px;
text-align: center!important;
padding: 15px;
padding-top: 120px;
font: 12px "trebuchet ms", sans-serif;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
}

.icon-keywords {
color: #333;
font: bold 16px georgia;
letter-spacing: 3px;
}

.icon-comment, .icon-comment a b {
color: #aaa!important;
}

.icon-description {
color: #666;
}

.sorting-options {
margin: 20px auto;
font-size: 0px!important;
letter-spacing: 1px;
}

.icon-pages, .icon-pages b {
color: #c7cbed!important;
}

.icon-pages a, .icon-pages a b, .sorting-options a {
font: 14px georgia;
letter-spacing: 1px;
color:  #c7cbed;
}

.icon-pages a:hover, .icon-pages a b:hover, .sorting-options a:hover {
color: skyblue;
}

.icon-pages.toppages {
margin-bottom: 25px;
}

/*NAVSTRIP*/

#lj_controlstrip {
margin: 10px auto auto auto;
position: relative;
background: transparent!important;
border: none!important;
width: 100%;
text-align: center;
}

#lj_controlstrip td {
text-align: center;
width: auto;
border: none!important;
}

#lj_controlstrip_login td {
padding: 1px;
}

#lj_controlstrip input, #lj_controlstrip select {
background: #d9d5db;
color: #333;
border: 1px solid #111;
padding: 4px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-left: 5px;
}

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input#search {
background: #d9d5db;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

input#xc_remember {
margin: 0px 3px 1px 3px!important;
vertical-align: middle!important;
}

#lj_controlstrip .ljuser a b {
color: #fff!important
}

/*HOVER MENU*/

.ContextualPopup {
width: 10em!important;
padding: 0!important;
text-align: center;
background: #fff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-shadow: none!important;
z-index:200!important;
}

.ContextualPopup li {
display: block!important;
}

.ContextualPopup .Relation {
color: #333;
font: bold 16px century gothic!important;
letter-spacing: -1px;
text-transform: lowercase;
margin-bottom: 0px!important;
}

.ContextualPopup .Relation div:nth-child(2){
display: none!important;
}

.ContextualPopup .Actions li {
display: inline-table!important;
margin: 3px;
}

.ContextualPopup .Actions a {
font: 12px "trebuchet ms", sans-serif!important;
color: #666;
}

.ContextualPopup .Actions a:hover {
color: skyblue;
}

.ContextualPopup .Actions {
text-align: center;
clear: both;
}

.ContextualPopup .Userpic {
padding: 0px!important;
margin: 0px!important;
border: none!important;
border-bottom: 1px solid #aaa!important;
width: auto!important;
background: #d9d5db;
float: none!important;
}

.ContextualPopup .Userpic img {
height: 65px;
width: 65px;
margin: 5px auto;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
background: #fff;
padding: 3px;
}

.ContextualPopup .Content {
padding: 2px!important;
border-top: none!important;
}

/*MINI ICONS*/

span.ljuser img [src*="user.png"], [src*="img/silk/identity/user.png"], [src*="user_staff.png"],[src*="img/silk/identity/user_staff.png"] {
background: transparent url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/playing-card.png') no-repeat!important;
height: 0!important;
width: 0!important;
padding: 18px 18px 0px 0px!important;
}

span.ljuser img [src*="community.png"], [src*="img/silk/identity/community.png"],[src*="img/silk/identity/comm_staff.png"],[src*="comm_staff.png"] {
background: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/present.png') no-repeat!important;
background: transparent;
height: 0!important;
width: 0!important;
padding: 18px 18px 0px 0px!important;
}

span.restrictions img [src*="icon_18.png"],[src*="img/icon_18.png"] {
background: transparent url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/heart.png') no-repeat!important;
height: 0!important;
width: 0!important;
padding: 16px 16px 0px 0px!important;
vertical-align: middle;
}

span.restrictions img [src*="icon_nsfw.png"],[src*="img/icon_nsfw.png"] {
background: transparent url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/heart-half.png') no-repeat!important;
height: 0!important;
width: 0!important;
padding: 16px 16px 0px 0px!important;
vertical-align: middle;
}

span.access-filter img [src*="locked.png"],[src*="img/silk/entry/locked.png"] {
background: transparent url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/lock-1.png') no-repeat!important;
height: 0!important;
width: 0!important;
padding: 16px 16px 0px 0px!important;
vertical-align: middle;
}

span.access-filter img [src*="private.png"],[src*="img/silk/entry/private.png"] {
background: transparent url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/shield.png') no-repeat!important;
height: 0!important;
width: 0!important;
padding: 16px 16px 0px 0px!important;
vertical-align: middle;
}

.comment li.link.reply a {
font-size: 0px;
background: transparent url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/quill.png') no-repeat;
padding: 16px 16px 0px 0px!important;
}

.comment li.link.threadroot a {
font-size: 0px;
background: transparent url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/keyboards-combination.png') no-repeat;
padding: 16px 16px 0px 0px!important;
}

.comment li.link.commentparent a{
font-size: 0px;
background: transparent url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/arrow-step-out.png') no-repeat;
padding: 16px 16px 0px 0px!important;
}

.comment li.link.cmt_hide a{
font-size: 0px;
background: transparent url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/magnifier-zoom-out.png') no-repeat;
padding: 16px 16px 0px 0px!important;
}

.comment li.link.cmt_unhide a{
font-size: 0px;
background: transparent url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/magnifier-zoom-in.png') no-repeat;
padding: 16px 16px 0px 0px!important;
}

.comment li.link.expand a{
font-size: 0px;
background: transparent url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/newspaper--plus.png') no-repeat;
padding: 16px 16px 0px 0px!important;
}

/*MISC*/

.ui-dialog {
text-shadow: none!important;
padding: 0px;
border: 2px solid #aaa;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 5px 2px #aaa;
-moz-box-shadow: 0px 0px 5px 2px #aaa;
-webkit-box-shadow: 0px 0px 5px 2px #aaa;
}

.track-dialog .ui-dialog-titlebar {
background: #d9d5db;
border:none;
border-bottom: 1px solid #aaa;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
}

.track-dialog .ui-dialog-title {
font: bold .9em "trebuchet ms", sans-serif;
  letter-spacing: 3px;
  text-transform: capitalize;
  color: #333;
}

.track-dialog .ui-widget-content {
border: none!important;
}

Colors:
#d9d5db | #c7cbed | skyblue

FONTS:
If you can't see any differences you need to either download the fonts or change them to other fonts in the CSS. Make sure you copied the font code properly for the extra fancy fonts.

Century Gothic vs Century Gothic | Georgia 1234567 vs Georgia 1234567
Trebuchet MS vs Trebuchet MS

Images:
Please upload these to your own server as I cannot guarantee they won't move from their current host.

Mini Icons - "playing-card.png", "present.png", "star-empty.png", "heart.png", "heart-half.png", "lock-1.png", "shield.png", "keyboards-combination.png", "arrow-step-out.png", "maginfier-zoom-out.png", "maginfier-zoom-in.png", "newspaper--plus.png", "weather-clouds", "quill.png"

Backgrounds - "stardust.png"

Navigation - "wheel.png", "calendar-day.png", "address-book-blue.png", "color-swatches.png", "direction.png", "cake.png", "anchor-1.png", "arrow-skip-180", "arrow-skip"

Header icons - "160.png", "weather-moon-clouds.png"

Notes:

1. Background is from Subtle Patterns. Mini Icons and buttons are from Pinvoke of the Diagona set and Fugue set. The ones shown are just the ones I personally picked out of the 3,000+ there.

2. The fancy fonts are also ones I personally picked. You can choose whatever you like but you may need to adjust font sizes.

3. Not enabling any of the modules I'm using probably will screw things up idk. The custom text is set at a fixed height that will automatically gain a scrollbar and will display even if no text is inputted. So if you want it gone, then uncheck it on the modules page.

4. ??? Most of this was coded forever ago idk.

READ THE FAQ BEFORE COMMENTING.

last updated: 7/23/15 at 5:39pm CST for quicker reply, reply page tweaks, "user posting in community" tweaks, and I guess I played with the icon browser a little at some point.

Flat | Top-Level Comments Only

absolutely LOVE your layouts, and have been using them for a lot of my journals lately. really great work, especially how you take the time to do the comment and icon pages!!

Funny story: I saw this comment first thing when I woke up from one hour of sleep because I always check my phone for e-mails right away and I was so, so confused because I thought this was an rp tag from Makoto and I had no idea what he was saying or what the context was.

ty tho please tell me if anything doesn't work right. Like idk why the list of icons on Makoto's custom icon page appear super narrow when I'm p. sure I used the same CSS and things were wider but you might want to change .icon {width:35%;} to like .icon {width: 100%;}. They'll just be a single column instead of two. Maybe it's because you set #primary to have a 500px width. If you don't use custom icon pages and don't care though it's cool.

If you want to get super fancy and keep your 500px width for where you need it but fix the thing you could doooo body.page-icons #primary {width: 100%!important;} right above .icon and you should have two columns of icons.

You also have a dreaded horizontal scrollbar so first you should see if you unchecked the thingamajig as instructed because there is mysterious padding showing up that's causing it. You can manually remove the padding by putting #header, #footer {padding: 0!important;} at the bottom of the CSS.

LMFAO LAUGHING iM SORRy im too lazy to get on my person account half the damn time |'8

IT COULD BE MY FAULT THINGS ARE FUCKED UP i almost always edit the codes a little after i grab them because preferences, but something happened the first time i grabbed that layout and i lost the original code i had fixed up and then like... i tried to recreate the code, but i was so distraught abut losing it that i gave up and walked away and just never took the time to go back because school was busy |'8 story you didnt need but oh well

thank you though ill go through later and fix those things o7

Layout: 04: The Starry Sky.

no subject

no subject

no subject