undertheblue | Layout: 02: Go Ask Alice

Live Preview is currently at

gleipnir

Works with: Chrome, FireFox (visual differences), IE hates dashed anything.
Resolution: 1024x768 and above.
Features: Custom everything; fixed sidebar image, text, navigation, and links.
Navstrip: None.

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 reset to defaults but that the Custom Text module is checked if you want it. Hit Save.

3. Go to the Custom CSS page and uncheck "Use layout's stylesheet(s)". Copy and paste the code below and hit Save.

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

CODE:

/*---GO ASK ALICE by RURIAIR; MINI ICONS BY PINVOKE. TEXTURE BY UNKNOWN----*/

body {
background: #fafafa url() repeat scroll;
text-align: center;
color: #666666;
font: 10px century gothic;
margin: 0 0 20px 0;
padding-top: 0px!important;
}

blockquote {
display: block;
padding: 10px;
background: #f7f7f7;
color: #666666;
font-family: "courier new";
border: 1px dashed #ccc;
box-shadow: 0.5em 0.5em 1em #ccc;
-webkit-box-shadow: 0.5em 0.5em 1em #ccc;
-moz-box-shadow: 0.5em 0.5em 1em #ccc;

}

a, a:link, a:visited {
color: #e71a1c;
font-size: 12px;
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: #75B2DD;
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 b, a b:link, a b:visited {
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 b:hover {
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;
font-family: "Palatino";
font-size: 14px;
}

u {
color: #75B2DD;
font-family: "Georgia";
}

i, em {
color: #666;
font-family: "copperplate";
letter-spacing: 1px;
line-height: 1.1em;
}

s, strike {
color: #dddddd;
-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;
}

s:hover {
color: #666666;
-webkit-transition: -webkit-transform 1s ease-in-out, background-color linear 1s, color linear 1s;
-moz-transition: -moz-transform 1s ease-in-out, background-color linear 1s, color linear 1s;
-o-transition: -o-transform 1s ease-in-out, background-color linear 1s, color linear 1s;
transition: transform 1s ease-in-out, background-color linear 1s, color linear 1s;
}

::-moz-selection, 
::selection {
background: #666;
color: #fafafa;
text-shadow: black 0.1em 0.1em 0.2em;
}

small {
font-size: 11px;
}

::-webkit-scrollbar-thumb:vertical {
background-color: #e71a1c;
height:50px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
::-webkit-scrollbar {
height:10px;
width:5px;
background-color: #2a2a2a;
}

::-webkit-scrollbar-thumb:horizontal {
background-color: #e71a1c;
width:50px;
height: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

::-webkit-scrollbar:horizontal {
height: 5px;
background-color: #fafafa;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

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 {
margin-left: 40px;
padding: 5px;
}

/*----HEADER----*/

#header {
position: fixed;
top: 0%;
width: 100%;
display: block!important;
text-align: center;
margin-bottom: 20px;
outline: 6px dashed #2c2c2c;
z-index:0!important;
background: #2a2a2a url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/twilight-bg.png) repeat;
z-index: 8!important;
}

/*----TITLES---*/

#title {
text-align: right;
font: 14pt arial;
color: #4a4a4a;
padding: 5px;
letter-spacing: 1px;
}

#subtitle {
text-align: right;
margin-top: -30px;
padding: 5px;
font: italic 7pt arial;
color: #eee;
letter-spacing: 2px;
text-shadow: black 0.1em 0.1em 0.2em;
}

#pagetitle {
display: none;
}

/*----NAVIGATION----*/

.module-navlinks.module li a {
display: inline;
font: 22px monotype corsiva;
color: #fff;
padding: 10px;
text-align: center;
text-shadow: black 0.1em 0.1em 0.2em;
letter-spacing: 1px;
-moz-border-radius: 50px 50px 0px 0px;
-webkit-border-radius: 50px 50px 0px 0px;
-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;
}

.module-navlinks.module li a:hover {
color: #3a3a3a;
-moz-border-radius: 50px 50px 0px 0px;
-webkit-border-radius: 50px 50px 0px 0px;
-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;
}

.module-navlinks.module {
position: fixed;
top: 0%!important;
text-align: center;
width: 100%;
margin: 10px auto 5px -3px;
z-index: 9;
}

.topnav {
float: right;
position: fixed;
right: 13%;
bottom: 0%;
color: transparent;
z-index: 9;
}

.bottomnav {
float: left;
position: fixed;
left: 13%;
bottom: 0%;
color: transparent;
z-index: 9;
}

.page-forward a, .page-back a {
font: 50px meiryo;
}

.navigation.bottomnav li.page-forward, .navigation.topnav li.page-back, .noentries {
display: none;
}

.page-top {
display: none;
position: relative;
bottom: 0%;
margin: auto;
margin-bottom: 0px;
width: 100%;
text-align: center;
}

/*----STUFF----*/

#content {
width: 100%;
margin: 0;
}

/*----ENTRIES----*/

#primary {
position: relative;
width: 60%;
margin: 100px 28% 30px 28%;
text-align: center;
z-index: 0!important;
}

#entries {
display: block;
position: relative;
width: 90%;
margin: 0px;
text-align: center;
z-index: 0!important;
}

.entry {
width: 570px;
background: #fff;
margin: 60px 5px 20px 5px;
padding: 7px 7px 8px 7px;
text-align: justify;
font: 12px century gothic;
border: 1px dashed #ccc;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-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;
z-index: 0!important;
}

.entry:hover {
-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;
}

.entry-content {
padding: 10px;
padding-bottom: 40px;
margin-top: 15px;
border-top: 1px dashed #ccc;
}

.entry-title {
text-align: center;
color: #fff;
font: 9px 'consolas', trebuchet ms;
letter-spacing: 0.2em;
text-transform: uppercase;
text-shadow: black 0.1em 0.1em 0.2em;
background: #2a2a2a url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/twilight-bg.png) repeat;
width: 100%;
padding: 20px 8px 15px 8px;
margin: -10px -8px 10px -8px;
border-bottom: 3px solid #75B2DD;
border-radius: 42px 42px 0px 0px;
-moz-border-radius: 42px 42px 0px 0px;
-webkit-border-radius: 42px 42px 0px 0px;
}

.entry-title a {
padding: 3px;
color: #fff!important;
font: 9px 'consolas', trebuchet ms;
letter-spacing: 0.2em;
text-transform: uppercase;
text-shadow: black 0.1em 0.1em 0.2em;
}

.entry-title a b {
color: #fff!important;
font-size: 10px;
}

.entry-title span.ljuser a b {
color: #fff!important;
font-size: 10px!important;
}

.entry-title a span.ljuser img {
padding: 0px 20px 15px 0px!important;
}

.entry-title span.ljuser img {
padding: 0px 16px 15px 0px!important;
}

.time {display: none;}

.datetime, .datetime a {
font: italic 10px georgia;
color: #aaa;
letter-spacing: 4px;
}

.restrictions, .access-filter {
float: right;
margin-top: -8px;
}

.entry-poster {
float: right;
margin-top: -20px;
}

.entry-poster span.ljuser a b {
font: normal 14px century gothic;
letter-spacing: 3px;
text-transform: lowercase;
}

.entry img, .entry object, .entry iframe, .entry table {
max-width: 100%;
text-align: center;
}

/*----ENTRY FOOTERS----*/

.entry div.footer {
height: auto;
min-height: 20px!important;
text-align: center;
background: #2a2a2a url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/twilight-bg.png) repeat;
width: 100%;
padding: 8px 7px 10px 7px;
margin: 30px -7px -10px -7px;
border-top: 3px solid #75B2DD;
border-radius: 0px 0px 42px 42px;
-moz-border-radius: 0px 0px 42px 42px;
-webkit-border-radius: 0px 0px 42px 42px;
}

.tag-text {
display: none;
}

.tag {
position: absolute;
padding: 0px;
margin: -40px 0px 0px 33px;
word-wrap: normal;
width: 100%;
}

.tag ul {
text-align: justify;
width: 500px;
}

.tag li a {
border-bottom: 1px dotted #CCC;
font: 11px courier new;
margin-right: 3px;
}

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

ul.entry-management-links.icon-links, ul.entry-management-links.text-links {
margin: auto;
text-align: center;
margin-top: -30px;
}

ul.entry-management-links.text-links a {
font: 10px century gothic;
color: #999;
text-transform: uppercase;
}

ul.entry-management-links.text-links a:hover {
color: #2a2a2a;
}

ul.entry-interaction-links.text-links {
margin: auto;
text-align: right;
width: 90%;
margin-top: 3px;
}

ul.entry-interaction-links.text-links li a {
font: 27px georgia;
color: #fff;
text-shadow: black 0.1em 0.1em 0.2em;
-moz-border-radius: 50px 50px 0px 0px;
-webkit-border-radius: 50px 50px 0px 0px;
-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;
}

ul.entry-interaction-links.text-links li a:hover {
color: #3a3a3a;
text-shadow: black 0.1em 0.1em 0.2em;
-moz-border-radius: 50px 50px 0px 0px;
-webkit-border-radius: 50px 50px 0px 0px;
-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;
}

.entry-permalink, .metadata.bottom-metadata, .metadata.top-metadata, .metadata, .currentgroups {
display: none!important;
}

/*----ICONS BY ENTRIES----*/

.userpic {
width: 70px;
height: 70px;
float: right;
margin-right: -85px;
margin-top: 10px;
background: #2c2c2c url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/twilight-bg.png) repeat;
outline: 3px dashed #2c2c2c;
padding: 5px;
margin-left: 5px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-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;
}

.userpic:hover {
background: #e71a1c url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/red.png) repeat;
outline: 3px dashed #e71a1c;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-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;
}

.userpic img {
width: 70px;
height: 70px;
border: none!important;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}

/*----ARCHIVE AND OTHER SIDEBAR CRAP----*/

li a.archive, a.current.archive, {}

div.month {
width: 570px;
background: #fff;
margin: 60px 5px 20px 5px;
padding: 7px 7px 8px 7px;
text-align: center;
font: 11px century gothic;
border: 1px dashed #ccc;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}

.month div.footer {
height: 20px;
text-align: center;
background: #2a2a2a url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/twilight-bg.png) repeat;
width: 100%;
padding: 8px 7px 10px 7px;
margin: 30px -7px -10px -7px;
border-top: 3px solid #75B2DD;
border-radius: 0px 0px 42px 42px;
-moz-border-radius: 0px 0px 42px 42px;
-webkit-border-radius: 0px 0px 42px 42px;
}

.month div.footer a {
color: #fafafa;
}

.month div.footer a:hover {
color: #75B2DD;
}

.month div.header h3 {
text-align: center;
background: #2a2a2a url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/twilight-bg.png) repeat;
width: 100%;
padding: 20px 8px 15px 8px;
margin: -10px -8px 10px -8px;
border-bottom: 3px solid #75B2DD;
border-radius: 42px 42px 0px 0px;
-moz-border-radius: 42px 42px 0px 0px;
-webkit-border-radius: 42px 42px 0px 0px;
color: #fff;
font: 9px 'consolas', trebuchet ms;
letter-spacing: 0.2em;
text-transform: uppercase;
text-shadow: black 0.1em 0.1em 0.2em;
}

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

table.month caption {display:none;}

table.month th {
font: 20px century gothic;
padding: 5px;
}

table.month td.day {
height:50px!important;
width: 50px!important;
font: 12px century gothic;
margin: 10px;
}

table.month td.day p {
padding: 0;
margin: 0;
}

table.month td.day a {
font: 24px georgia;
}

#archive-day li.page-back a, #archive-day li.page-forward a {
position: fixed;
font: 20px georgia!important;
bottom: 3%;
}

#archive-day li.page-forward a {
position: fixed;
right: 14%;
}

h3.day-date {display:none;}

#archive-month {
width: 570px;
text-align: center;
background: #2a2a2a url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/twilight-bg.png) repeat;
border: 1px solid #666;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
z-index: 0!important;
margin-left: 10px;
padding: 5px;
}

#archive-month div.month {
background: transparent;
border: none!important;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
text-align: center;
margin: auto;
color: #aaa;
text-shadow: black 0.1em 0.1em 0.2em;
}

#archive-month div.month h3.entry-title {
width: 80%;
background: #2a2a2a;
background-image: none!important;
border: 1px dashed #444!important;
text-align: center;
margin: auto;
padding: 7px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}

#archive-month div.month h3.entry-title a, #archive-month div.month h3.entry-title a span.ljuser b {
font: 15px palatino linotype!important;
text-transform: lowercase;
}

#archive-month div.month h3.entry-title a span.ljuser img {
padding-right: 20px!important;
}

.month dd, .month dt, .month dl {
text-align: center;
margin: auto;
margin: 0;
padding: 0;
}

.month dl {
margin-left: -14px;
}

.month dt {
margin-top: 20px;
}

.month dt a {
font: 20px georgia;
color: #75B2DD;
}

.month dd {
margin-top: 20px;
}

.month span.poster.entry-poster a b {
color: #fafafa;
font: 12px century gothic;
}

.month span.poster.entry-poster {
margin-right: 50px;
}

#archive-month .navigation.topnav, #archive-month .navigation.bottomnav,#archive-year .navigation.topnav, #archive-year .navigation.bottomnav {
float: none;
position: relative;
top: auto;
left: auto;
bottom: auto;
right: auto;
padding: 5px;
text-align: center;
}

#archive-year .navigation.topnav {
margin-bottom: -40px;
}

#archive-year .navigation.topnav, #archive-year .navigation.bottomnav {
margin-right: 230px;
}

#archive-year .navigation.bottomnav li a, #archive-year .navigation.topnav li a{
font: 30px georgia;
}

#archive-year .navigation.bottomnav li.active, #archive-year .navigation.topnav li.active {
color: #666;
}

.month dd div.tag, .month dd span.restrictions, .month dd span.access-filter, #archive-year table.month caption,.day h3.day-date {
display: none;
}

/*----SIDEBAR----*/

#tertiary{
width: 100%;
height: 0;
bottom: 0%;
margin: 0;
background: transparent;
}

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

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

.module-search.module {
position: fixed;
right: 2%;
top: 10%;
margin: 0px;
padding: 0px;
z-index: 5;
}

.module-search.module h2 a {
font: 18px monotype corsiva;
color: #2a2a2a;
text-align: center;
}

.module-search.module div.search-form {
margin-top: -10px;
}

.module-search.module input.search-box {
color: #e71a1c;
font: 12px century gothic;
letter-spacing: 1px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
margin-right: 5px;
padding: 3px;
width: 130px;
}

.module-customtext.module {
float: right;
position: fixed;
right: 1%;
top: 50%;
width: 210px;
padding: 0 10px;
text-align: justify;
}

.module-customtext.module img {
position: fixed;
top: 20%;
width: 170px;
margin: 10px 10px auto 0;
padding: 15px;
border: 4px dashed #fafafa;
background: #2a2a2a url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/twilight-bg.png) repeat;
outline: 0px dashed #2c2c2c;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-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;
}

.module-customtext.module img:hover {
background: #e71a1c url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/red.png) repeat;
outline: 0px dashed #e71a1c;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-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;
}

.module-customtext.module span img {
margin-top: 100px;
}

.module-customtext.module h2 {
display: block!important;
font: 18px monotype corsiva;
color: #2a2a2a;
text-align: center;
margin: 20px auto -25px auto;
}

.module-customtext.module h2 a {
font: 18px monotype corsiva;
text-align: center;
margin: 20px auto -25px auto;
}

.module-typelist.module {
float: left;
position: fixed;
left: 0%;
top: 35%;
margin-left: 0px;
padding: 0px;
text-align: left;
max-width: 380px;
width: auto;
}

.module-typelist.module li a {
display: block;
margin-left: 0px;
margin-top: -20px;
padding: 0px;
text-align: left;
color: #2a2a2a;
letter-spacing: -5px;
font: italic 70px monotype corsiva;
text-transform: lowercase;
-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;
}

.module-typelist.module li a:hover {
color: #75B2DD;
-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;
}

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

.tags-container {
width: 570px;
background: #fff;
margin: 60px 5px 20px 5px;
padding: 7px 7px 8px 7px;
text-align: justify;
font: 11px century gothic;
border: 1px dashed #ccc;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}

.tags-container div.footer {
height: 20px;
text-align: center;
background: #2a2a2a url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/twilight-bg.png) repeat;
width: 100%;
padding: 8px 7px 10px 7px;
margin: 30px -7px -10px -7px;
border-top: 3px solid #75B2DD;
border-radius: 0px 0px 42px 42px;
-moz-border-radius: 0px 0px 42px 42px;
-webkit-border-radius: 0px 0px 42px 42px;
}

.tags-container h2 {
text-align: center;
background: #2a2a2a url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/twilight-bg.png) repeat;
width: 100%;
padding: 20px 8px 15px 8px;
margin: -10px -8px 10px -8px;
border-bottom: 3px solid #75B2DD;
border-radius: 42px 42px 0px 0px;
-moz-border-radius: 42px 42px 0px 0px;
-webkit-border-radius: 42px 42px 0px 0px;
color: #fff;
font: 9px 'consolas', trebuchet ms;
letter-spacing: 0.2em;
text-transform: uppercase;
text-shadow: black 0.1em 0.1em 0.2em;
}

.ljtaglist. {
padding: 10px;
margin: auto;
list-style-type: none;
display: inline;
text-align: center;
}

span.non-link-tag {
font: 14px georgia;
color: #999;
text-transform: uppercase;
letter-spacing: 2px;
}

.tags_multilevel {
width: 100%;
text-align: center;
margin: auto;
}

.tags_multilevel li {
padding-left: 20px;
}

.ljtaglist li {
width: 90%!important;
display: block;
margin: 0px auto 0px auto;
padding: 5px;
font: 10px 'consolas', trebuchet ms;
color: #ccc;
text-align: center;
background: transparent;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-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;
}

.ljtaglist li a {
font: 12px century gothic;
text-transform: lowercase;
}

.ljtaglist li:hover {
background: #fafafa;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-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;
}

/*----STICKY----*/

span.sticky-entry-icon, .sticky-entry span.datetime, .sticky-entry div.userpic, .sticky-entry span.entry-poster {display: none;}

.sticky-entry-title.entry-title {
border-bottom: 3px solid #e71a1c;
}

.sticky-entry div.footer {
border-top: 3px solid #e71a1c;
}

.sticky-entry div.entry-content {
border-top: none!important;
}

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

hr.below-reply-container, hr.above-entry-interaction-links {
display: none;
}

#comments {
width: 650px;
padding: 20px;
background: transparent;
outline: 0px dashed #f1f1f1;
text-align: center;
margin: auto 4% 10px -4%;
position: relative;
}

.comment {
background: transparent;
text-align: center;
width: 85%;
min-width: 300px;
margin-left: 50px;
margin-top: 20px!important;
padding: 10px;
border: 0px dashed #ccc;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}

.comment div.inner {
text-align: left;
}

.comment-content {
text-align: justify;
font: 12px century gothic;
background: transparent;
padding: 10px 10px 15px 10px;
border-bottom: 1px dashed #ccc;
margin-top: 5px;
}

.comment-title {
background: transparent;
text-align: left;
border-bottom: 0px dashed #ccc;
margin-bottom: 0px;
margin-left: 10px;
margin-top: 10px;
}

.comment-title a {
color: #ccc;
font: bold 14px helvetica;
letter-spacing: 1px;
}

.comment div.footer {
}

.comment div.userpic {
float: left;
width: 60px;
height: 60px;
margin: -16px 10px 0px -80px;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
background: transparent;
border: 0px;
outline: none;
}

.comment div.userpic img {
width: 60px;
height: 60px;
background: #ccc;
border: 2px dashed #fafafa!important;
padding: 3px;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}

span.poster.comment-poster {
text-align: right;
margin-left: 0px;
}

span.poster.comment-poster span.ljuser a b {
font: 10px 'consolas', trebuchet ms;
letter-spacing: 2px;
}

.comment-interaction-links.text-links li a, .comment-pages.toppages, .comment-pages.toppages a, .comment-pages.bottompages, .comment-pages.bottompages a b, .view-flat a, .view-top-only a, .view-threaded a, .expand_all a, .view-flat, .view-top-only, view-threaded, .expand_all {
font: 10px 'consolas', trebuchet ms;
color: #aaa;
}

.comment-interaction-links.text-links li a:hover,.comment-pages.toppages a:hover, .comment-pages.bottompages a:hover {
color: #2a2a2a;
}

.comment-pages.bottompages, .comment-pagestoppages a, .comment-pages.toppages, .comment-pages.toppages a {
text-align: center;
margin-top: 10px;
}

.comment-interaction-links.text-links {
text-align: right;
float: right;
margin: -10px 3px 10px 3px;
}

.comment-management-links.text-links, .comment-management-links.icon-links {
text-align: right;
margin: 10px 3px 10px 3px;
}

.comment-management-links.text-links a {
font: 10px century gothic!important;
text-transform: uppercase;
}

.bottomcomment, .comment-from-text, .comment-subjecticon, .comment-date-text, .comment div.footer span.datetime {
display: none;
}

.edittime {
color: #ccc;
text-align: right;
margin-bottom: -10px;
margin-top: 5px;
}

.edittime span.datetime {
color: #ccc;
}

#ljqrttopcomment {
margin-top: 10px;
width: 100%;
text-align: center;
color: #fafafa;
text-shadow: black 0.1em 0.1em 0.2em;
}

#ljqrttopcomment b {
color: #fafafa;
}

#ljqrttopcomment textarea#body.textbox, #ljqrttopcomment input#subject.textbox, #ljqrttopcomment select#prop_picture_keyword {
border: 1px dashed #444!important;
background: #2a2a2a;
color: #fafafa;
font: 11px century gothic;
}

#ljqrttopcomment select#prop_picture_keyword {
border: none!important;
}

#ljqrttopcomment textarea#body.textbox {
padding: 5px;
width: 90%!important;
margin-left: -35px;
font: 14px georgia;
letter-spacing: 1px;
color: #aaa;
}

#ljqrttopcomment input#subject.textbox {
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
font: 14px georgia;
letter-spacing: 1px;
color: #aaa;
padding: 5px;
}

#ljqrttopcomment span#quotebuttonspan {
float: right;
margin: 10px 30px;
}

#ljqrttopcomment select#prop_picture_keyword, #ljqrttopcomment input#randomicon {
margin-left: 5px;
}

form#postform {
width: 570px;
text-align: justify;
}

form#postform textarea#commenttext.textbox {
width: 90%!important;
}

form#postform input {
margin: 5px;
}

span.de strong {color:#e71a1c;}

/*----ICONS PAGE----*/

.icons-container {
width: 570px;
background: #fff;
margin: 60px 5px 20px 5px;
padding: 7px 7px 8px 7px;
text-align: center;
font: 11px century gothic;
border: 1px dashed #ccc;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
}

.icons-container div.footer {
height: 20px;
text-align: center;
background: #2a2a2a url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/twilight-bg.png) repeat;
width: 100%;
padding: 8px 7px 10px 7px;
margin: 30px -7px -10px -7px;
border-top: 3px solid #75B2DD;
border-radius: 0px 0px 42px 42px;
-moz-border-radius: 0px 0px 42px 42px;
-webkit-border-radius: 0px 0px 42px 42px;
}

.icons-container h2 {
text-align: center;
background: #2a2a2a url(http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Go%20Ask%20Alice/twilight-bg.png) repeat;
width: 100%;
padding: 20px 8px 15px 8px;
margin: -10px -8px 10px -8px;
border-bottom: 3px solid #75B2DD;
border-radius: 42px 42px 0px 0px;
-moz-border-radius: 42px 42px 0px 0px;
-webkit-border-radius: 42px 42px 0px 0px;
color: #fff;
font: 9px 'consolas', trebuchet ms;
letter-spacing: 0.2em;
text-transform: uppercase;
text-shadow: black 0.1em 0.1em 0.2em;
}

.sorting-options, .sorting-options a, .icon-pages.toppages, .icon-pages.toppages a, .icon-pages.toppages b, .icon-pages.toppages a b, .icon-pages.bottompages, .icon-pages.bottompages a, .icon-pages.bottompages b, .icon-pages.bottompages a b {
text-align: center;
font: 10px 'consolas', trebuchet ms;
color: #aaa;
margin: auto;
}

.sorting-options a:hover, .icon-pages.toppages a:hover, .icon-pages.bottompages a:hover, .icon-pages.toppages a b:hover, .icon-pages.bottompages a b:hover {
color: #2a2a2a;
}

.icon {
display: inline-table;
width: 45%;
margin: 7px;
}

.icon-image {
float: left;
width: 80px;
height: 80px;
margin: 5px 10px 5px 5px;
padding: 5px;
background: #ddd;
border: 2px dashed #fff;
}

.icon-image img {
width: 80px;
height: 80px;
border-radius: 5px;
border: none!important;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}

.icon-info {
text-align: justify;
margin: 15px;
}

.icon-keywords {
font: bold 12px century gothic;
color: #3a3a3a;
text-align: center;
margin-top: 5px;
}

.icon-comment {
text-align: center;
font: italic 11px georgia;
color: #999;
letter-spacing: 0px;
}

.icon-comment span.ljuser a b {
color: #999;
font: bold normal 12px georgia;
letter-spacing: 1px;
}

.icon-description {
font: 10px helvetica;
color: #e71a1c;
text-align: right;
}

.icon-description span.ljuser a b {
color: #75B2DD;
font: bold normal 12px helvetica;
letter-spacing: 1px;
}

.default.label, .keywords-label, .comment-text, .description-text {
display: none;
}

/*----NAVSTRIP----*/

#lj_controlstrip {
display: 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: url('http://i1292.photobucket.com/albums/b562/ruriair/Layouts/Mini%20Icons/199.png') no-repeat!important;
background: transparent;
height: 0!important;
width: 0!important;
padding: 0px 18px 16px 0px!important;
}

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

/*----CONTEXTUAL POPUP----*/

div.ContextualPopup {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 240px;
border: 1px solid #ccc;
}

div.ContextualPopup div.Inner, .ContextualPopup .Actions  {
font: 12px century gothic!important;
}

.ContextualPopup .Relation {
font: bold 12px century gothic;
letter-spacing: 1px;
text-transform: uppercase;
color: #3a3a3a;
}

.RelationshipStatus {display:none;}

Colors:
#75B2DD | #e71a1c

FONTS:
If you can't see any differences you need to either download the fonts or change them to other fonts in the CSS.

Century Gothic vs Century Gothic | Georgia 1234567 vs Georgia 1234567
Meiryo ☀☁☂☃☄★ vs Meiryo ☀☁☂☃☄★ | Trebuchet MS vs Trebuchet MS
Consolas vs Consolas | Monotype Corsiva vs Monotype Corsiva | Courier New vs Courier New

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

Mini Icons - "199.png", "200.png"

Backgrounds - "twilight-bg.png", "red.png"

Notes:

1. The sidebar image used to code this was 208px by 208px and is the recommended size. Browsers display dashed borders/outlines differently and the current styling has them similar on each browser, but a different sidebar image size will mess with that and also require adjusting of the custom text and search module positions.

2. Less text for titles and things is always better. More text in the custom text module risks long comment threads running into it on custom comment pages. Longer link list text risks running into entries/looking dumb.

3. You will need to move up the link list module at .module.typelist-module if you have a lot of custom links??? Spoiler it's been forever since I coded this.

4. The previous and next entry links are also designed for unicode characters. Have a cheat sheet. To change the text representing them, go to the Options section of the Text page. Look for "NAVIGATION" in the code to find where to adjust their CSS.

READ THE FAQ BEFORE COMMENTING.

last updated: 2/14/15, 12:24am CDT to remove fugly arrows.

Flat | Top-Level Comments Only

iyaaaaa this is lovely * u *

giving this a go on another journal and it's beautiful!

This feels like a terribly silly question but I am struggling to make the sidebar image thing show on the account i'm using this for. It shows up clearly on the live preview so I'm certain I am just not linking an image in the right place or clicking the right thing. If you can find the time and know how to make this show up, that'd be super appreciated.

(either way, the code is lovely.)

Nevermind! We got it. If anyone else has the same problem: The img html tag goes in the custom text field, before your text.

Layout: 02: Go Ask Alice

no subject

no subject

no subject

no subject