spandexy | babby's first layout 2.0

live preview:

carapacing_02

so, i took my first layout, tweaked it, reordered some stuff, and removed most of the tacky stuff. i went less crazy here, and made something a bit cleaner! the code is still a mess though.

still, if you want it, follow the steps! you're also welcome to make as many edits as you see fit, take bits from it, whatever. do what you want

HOW TO INSTALL THIS LAYOUT

0. (optional) read through the CSS and edit the FUCK out of it

1. go to your journal customisation page

2. select any Tabula Rasa style

3. page setup: 2 Column (sidebar on the left)

4. go to advanced customisation

5. click Custom CSS

6. uncheck "Use layout's stylesheet(s)"

7. paste the "babby's first layout 2.0" CSS into the big box

/* BABBYS FIRST LAYOUT 2.0 by SMALLDEER */

/* --- HEADER --- */

/* this is how your Journal Title is displayed. it should appear above the circle icon on the left over the sidebar. */

#header {
	z-index: 2;
	position: fixed;
	margin-top: 20px;
	background: transparent;
	font-family: Calibri;
	font-size: 18px;
	color: #0e3343;
	width: 300px;
}

h1#title {			// this one is JUST for the big main journal header text at the top left
	width: 300px;
	text-align: center;
	display: block;
	font-size: 20px;
	line-height: 20px;
	font-family: 'Permanent Marker', Calibri;
	text-transform: uppercase;
	text-decoration: none;
	color: #000000;
	letter-spacing: 2px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-left: 10px;
	-webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

/* --- SIDEBAR --- */

/* this specifies the basics for the sidebar,
including the background and font */

div#secondary {
	display: inline;
	position: fixed;
	width: 300px;
	height: auto;
	margin-left: 0px;
	background-color: #ffffff;
	text-decoration: none;
	font-family: Calibri;
	font-size: 16px;
	overflow: visible;
	float: left;
}

/* this specifies what the sidebar userpic looks like.
feel free to turn it off with display: none; */

div#secondary .userpic img {
	display: block;
	position: relative;
	margin-left: 100px;
	margin-right: 100px;
	margin-top: 90px;
	z-index: 4;
	border-radius: 50px;
}

/* this is the journal username that appears on the sidebar */

div.journal-name {
	text-align: center;
	text-transform: uppercase;
	font-family: Calibri;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	text-shadow: 0 0 3px #000000;
	letter-spacing: 2px;
	padding-top: 5px;
}

/* this pads out the sidebar links */

h2.module-header a {
	color: #000000;
	display: none;
}

ul.module-list {
	padding: 5px;
	margin-top: 10px;
	display: block;
}

ul.module-list a, ul.module-list a:link, ul.module-list a:visited {
	display: block;
	color: #000000;
}

ul.module-list a:hover {
	text-shadow: 0 0 3px #000000;
}

/* these specify what the sidebar links look like */

.module-list-item, .module-list-item a {
	display: block;
	width: 100%;
	text-align: center;
	font-family: Calibri;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #000000;
}

.module-list-item a:hover {
	display: block;
	width: 100%;
	text-shadow: 0 0 3px #000000;
	color: #000000;
}

/* the rest of these are to do with the different modules
you can enable or disable in the journal customisation settings.
these aren't comprehensive of all of them, because i'm lazy */

div.module-navlinks.module {
	font-size: 20px;
}

div.module-tags_list.module {
	font-size: 14px;
	list-style: none;
}

.manage-link {
	display: block;
	text-align: center;
	font-size: 14px;
	margin-top: -10px;
}

div.module-typelist.module {
	background-color: #ff0000;
	display: inline;
}

div.module-typelist.module a {
	background-color: #ff0000;
	display: inline;
}

div.module-content {
	color: #000000;
}

div.module-calendar.module {
	margin-left: 30px;
}

div.module-customtext.module {
	padding: 10px;
}

div.module-powered.module {
	position: fixed;
	bottom: 20px;
	left: 20px;
	font-family: Calibri;
	font-size: 10px;
	text-transform: lowercase;
	color: #000000;
	background-color: rgba(255, 255, 255, 0.6);
}

div.module-time.module {
	position: fixed;
	bottom: 5px;
	left: 20px;
	font-family: Calibri;
	font-size: 10px;
	text-transform: lowercase;
	color: #000000;
	background-color: rgba(255, 255, 255, 0.6);
}

/* this is the little thing you can click to open
all the cut tags on a journal page at once */

div.module-cuttagcontrols.module {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* --- BODY --- */

/* this specifies all the basic stuff. maybe don't mess with the text-align
as it applies to the WHOLE PAGE on a base level and will fuck everything up.

please, PLEASE re-save the background and upload it somewhere else,
or use a different background image (or none). if my photobucket bandwidth breaks
because everybody hotlinked, i'm not fixing it. */

body {
	background-color: #191919;
	background-attachment: fixed;
}

/* --- END OF BODY --- */

/* --- LINK STYLES --- */

/* these change all the normal hyperlinks on the page
from that ugly default blue colour. edit away! */

a, a:link, a:visited {
	color: rgba(0, 0, 0, 0.7);
	text-decoration: none;
}

a:hover {
	text-shadow: 0 0 3px #000000;
}

/* this one is for the weird dreamwidth user tag link! */

.ljuser a {
	color: rgba(0, 0, 0, 0.7);
}

.poster.entry-poster a {
	color: #ffffff;
}

.poster.entry-poster a:hover {
	text-shadow: 0 0 3px #ffffff;
}

/* --- END OF LINK STYLES --- */

/* --- IMPORTANT --- */

/* things you can probably safely mess with: color, font size, line height, text decoration
a personal note: petition to stop tiny fonts.... in the age of huge monitors with tiny pixels,
your tiny fonts are proving a huge accessibility issue. i don't even HAVE major vision issues
and tiny fonts strain the heck out of my eyes. please stick to at least 12px and above?
thanks. i love you. have fun out there, sport */

#inner {
	position: absolute;
	background-color: #ffffff;
	overflow: hidden;
	text-align: justify;
	color: #000000;
	font-family: Calibri;
	font-size: 16px;
	line-height: 16px;
	text-decoration: none;
}

/* --- ENTRIES --- */

/* this whole part applies to actual journal entries */

#primary {
	z-index: 3;
	border: none;
	border-radius: 20px;
	overflow: visible;
	height: auto;
	color: #000000;
	font-family: Calibri;
	font-size: 18px;
	text-decoration: none;
	position: absolute;
	margin-left: 300px;
	margin-top: 20px;
	margin-right: 200px;
	padding-left: 20px;
}

/* this stuff specifies the journal entry background!
the "wrapper" is basically the jacket the content wears */

.entry-wrapper {
	background-color: #ffffff;
	padding-bottom: 10px;
}

/* the header and footer are pretty self-explanatory.
they're the top & bottom "pieces" of the journal entry,
though these also become default for other headers & footers */

.header {
	text-align: center;
}

.footer {
	text-align: center;
}

/* this is for the date and time displayed on a journal entry */

span.datetime, .datetime a, .datetime a:hover {
	padding-top: -10px;
	color: rgba(0,0,0,0.7);
	text-shadow: none;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 12px;
	line-height: 12px;
}

/* ok this part is important. the entry-content is
basically the interior decorating of your journal entries.
feel free to experiment */

.entry-content {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	min-height: 150px;
	width: auto;
}

/* this part specifies the maximum size of images
within journal entries. 100% will limit images to the full
width of the entry itself, or you can specify a px value.
the "height: auto" part automatically matches
the height to the width, so images keep their aspect ratio */

.entry-content img, .comment-content img {
	max-width: 100%;
	height: auto;
}

/* the primary userpic is the one that floats beside journal entries.
you can turn this off by adding display: none;
or you can change the size or make it rounded or whatever */

div#primary .userpic img {
	float: right;
	margin-right: -150px;
	margin-top: -50px;
	border: 5px solid rgba(0, 0, 0, 0.9);
}

/* this bit shows the username of the person who posted
the entry. you can turn it off, tweak the aesthetics, etc.
having this visible is often useful for community journals */

span.entry-poster {
	margin-top: 60px;
	margin-right: -150px;
	text-align: center;
	float: right;
	width: 120px;
	font-family: Calibri;
	font-size: 16px;
}

/* all this tag stuff specifies what journal entry tags look like. */

span.tag-text {
	text-transform: uppercase;
}

.tag {
	padding-top: 10px;
	list-style: none;
}

.tag ul {
	display: inline;
	font-size: 16px;
	padding: 10px;
	line-height: 16px;
	list-style: none;
}

.tag ul li {
	display: inline;
	padding: 5px;
}

.tag ul li a {
	color: #000000;
	padding: 5px;
	letter-spacing: 1px;
}

.tag ul li a:hover {
	text-shadow: 0 0 3px #000000;
}

/* entry management links are the ones you click to edit an entry
or to add it to your memories etc. */

ul.entry-management-links {
	color: #000000;
	font-family: Calibri;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

ul.entry-management-links li {
	display: inline;
	padding: 5px;
}

ul.entry-management-links.text-links {
	padding: 0px;
}

/* the metadata is basically all the stuff like current mood, location, music, etc */

.metadata ul {
	display: inline block;
	list-style: none;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 10px;
}

.metadata-item-location, .metadata-item-music, .metadata-item-mood {
	color: #000000;
}

/* this part changes what blockquotes look like.
same rules for the photobucket links, please! aka host
your own you bandwidth-sucking varmints */

blockquote {
	font-size: 14px;
	line-height: 1.3;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	background-color: #bababa;
	border-radius: 10px;
}

/* this is for when you use the html textarea tag
to show some copy-pasteable code or whatever */

textarea {
	background: #191919;
	color: #ffffff;
}

/* --- TITLES AND HEADERS --- */

/* ok, there are basically a bunch of different "h" html tags
for varying sizes and styles of header text so that users can
organise their posts into sections with nice-looking titles.

feel free to experiment with these, just be aware that certain parts
of your journal's building blocks are set up to use the header tags,
so it's important to make sure they match.

if you still don't understand what these are, try using a h2
or whatever in a journal post and previewing it with a few different numbers! */

h1 {
	color: #000000;
	left: 20px;
}

h2 {
	width: auto;
	font-size: 20px;
	line-height: 20px;
	font-family: Calibri;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(0, 0, 0, 0.7);
	letter-spacing: 5px;
	position: relative;
	left: 20px;
	display: block;
}

h3 {
	margin-bottom: 0px;
	color: #6a6a6a;
}

h3.entry-title a {
	padding-top: 15px;
}

h3.entry-title a {
	display: inline-block;
	font-size: 20px;
	font-family: 'Permanent Marker' Calibri;
	text-transform: uppercase;
	letter-spacing: 5px;
	color: #000000;
	text-shadow: none;
	text-align: center;
	padding-top: 20px;
	width: 80%;
	margin-bottom: 0px;
}

h4 {
	margin-top: 5px;
	color: #6a6a6a;
}

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

/* this specifies what commenters' userpics look like. */

.comment .userpic img {
	float: left;
	height: 70px;
	width: 70px;
	border: 5px solid rgba(0, 0, 0, 0.9);
}

/* this is what the body text of comments looks like */

.comment-content {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: justify;
}

/* the management and interaction links are the ones
you click to edit and delete comments and reply to comments */

ul.comment-management-links {
	display: inline;
	padding: 5px;
	font-size: 14px;
	list-style-type: none;
}

ul.comment-management-links li {
	display: inline;
	list-style-type: none;
}

ul.comment-interaction-links {
	display: inline;
	padding: 5px;
	font-size: 14px;
}

ul.comment-interaction-links.text-links, ul.entry-interaction-links {
	display: inline;
	padding: 5px;
	font-size: 14px;
	text-transform: uppercase;
}

ul.comment-interaction-links.text-links a, ul.entry-interaction-links a {
	color: rgba(0, 0, 0, 0.7);
}

ul.comment-interaction-links.text-links a:hover, ul.entry-interaction-links a:hover {
	color: #000000;
	text-shadow: 0 0 3px #000000;
}

ul.comment-interaction-links li, ul.entry-interaction-links li {
	display: inline;
	padding: 5px;
	margin-bottom: 5px;
}

/* the comment title is the subject line of a comment */

h4.comment-title {
	background-color: transparent;
	margin-bottom: 0px;
}

h4.comment-title a {
	font-size: 16px;
	font-family: Calibri;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: #000000;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}

/* this specifies where the date and time stuff of a comment goes */

#comments .inner {
	text-align: center;
}

/* this is for displaying a commenter's username and ip address.
i have it set to hide the "From:" and "IP:" text and just show the info */

span.comment-from-text, span.comment-ip-text {
	display: none;
}

span.comment-poster, span.poster-ip {
	padding: 10px;
}

/* this is the little piece of text that appears when you post
a comment that tells you the comment was successfully posted */

div.comment-posted {
	text-align: center;
	color: #000000;
	text-shadow: 0 0 3px #000000;
	text-transform: uppercase;
	font-weight: bold;
}

/* this specifies where the comments go on the page.
the margin-left thing i wrote here makes a top-level comment
indent about 20px from the left hand side of the entry width.
if you're still confused, change it to 200px, refresh the page
and watch what happens to the comments. */

#comments { margin-left: 20px; }

/* the wrapper is the jacket the comments wear, in this case
the white translucent background. */

.comment-wrapper {
	background-color: rgba(255, 255, 255, 0.8);
	padding: 10px;
}

/* these are the "flat" "top level comments only" links */

/* this is the "Flat | Top-Level Comments Only" bit */

div.comment-pages {
	background: #ffffff;
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 1px;
	font-color: #ffffff;
}

/* --- COMMENTS SECTION ENDS HERE --- */

/* --- MISC ---*/

/* these are for the link you click to go forward or back a page of entries */

div.inner li.page-back {
	list-style-type: none;
	background-color: transparent;
	display: inline;
}

li.page-forward {
	list-style-type: none;
	background-color: transparent;
	text-align: right;
	padding-right: 40px;
}

/* this is the post box thing for posting comments and such */

form#postform {
	background-color: rgba(0, 0, 0, 0.9);
	border-radius: 10px;
}

/* this changes what selections look like, aka when you highlight
some text on the page with your mouse */

*::selection {
	background: #000000;
	color: #ffffff;
}

::-moz-selection {
	background: #000000;
	color: #ffffff;
}

/* this is a universal thing for lists? the bullet-pointed kind.
but, uh, lists are also used for a lot of other things on dreamwidth
pages, so be careful when you tweak it and preview as you go.

right now it's just set to indent lists a little bit from the left. */

ul {
	padding-left: 15px;
}

/* --- EXTRA PAGES --- */

/* look, if you've gotten this far, you've probably figured out
the basics on what all the css bits and pieces refer to. and the
thing is, i hate styling the extra pages and i'm feeling lazy right now.
so there'll be no more comments from now on. i'm, like, mega bored
and by now you should have already gotten the basic gist lmao sorry */

/* TAGS PAGE */

div.tags-container {
	background-color: rgba(0, 0, 0, 0.9);
	border-radius: 10px;
	padding: 10px;
	list-style: none;
}

ul.ljtaglist.tags_multilevel {
	display: inline block;
	list-style: none;
	width: 500px;
	padding-top: 50px;
	padding-bottom: 50px;
	margin-bottom: 0px;
}

li.visibility-public {
	margin-top: 5px;
}

/* ARCHIVE PAGE */
div#archive-year {
	background-color: rgba(0, 0, 0, 0.9);
	border-radius: 10px;
	padding: 10px;
	list-style: none;
	text-align: center;
	width: 250px;
}

div.month {
	text-align: center;
}

table.month {
	text-align: center;
	width: 240px;
	height: 240px;
}

caption {
	display: none;
}

span.label {
	height: 20px;
}

li.active {
	list-style: none;
}

/* this is the little bar at the bottom where the number of comments,
the reply button and the mass comment action buttons go */

div.bottomcomment {
	background-color: #ffffff;
}

div.bottomcomment label {
	display: block;
}

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

/* you can make these visible if you're curious,
but i don't advise it unless you feel like having a learning experience.

i'll admit, most of these are invisible because i'm either being a lazy bum,
or they seemed important to have just in case but i couldn't figure out what they were.
so, uh, it might be worth playing around a bit.

sorry my code is such a mess, you guys.
the majority of the time i have no idea what i'm doing.
you're welcome. */

ul.userlite-interaction-links.icon-links {
	display: none;
	padding: 10px;
}

ul.userlite-interaction-links.icon-links li {
	display: inline;
	padding: 10px;
}

ul.userlite-interaction-links.text-links {
	display: none;
	padding: 10px;
}

.bottomcomment ul.entry-management-links.text-links { display:none; }

h2#pagetitle, h2#subtitle {
	display:none;
}

li.page-separator { display: none; }

div.separator.separator-after { display: none; }

hr.above-entry-interaction-links { display: none; }

hr.below-reply-container { display: none; }

div.page-top { display: none; }

li.link.link_next { display: none; }

li.link.link_prev.first-item { display:none; }

div.navigation.bottomnav { display:none; }

/* --- END OF HIDDEN STUFF --- */

bonus, released as of 06/01/2025: nicer version (what i'm using over at

goodmode)

/* BABBYS FIRST LAYOUT 2.0 by SMALLDEER */

/* --- HEADER --- */

/* this is how your Journal Title is displayed. it should appear above the circle icon on the left over the sidebar. */

#header {
	z-index: 2;
	position: fixed;
	margin-top: 20px;
	background: transparent;
	font-family: 'Sniglet', Calibri, sans-serif;
	font-size: 18px;
	color: #0e3343;
	width: 300px;
}

h1#title {			// more details
	width: 300px;
	text-align: center;
	display: block;
	font-size: 20px;
	line-height: 20px;
	font-family: 'Sniglet', Calibri, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 800;
	color: #fff;
	margin-left: 20px;
	margin-top: 20px;
	letter-spacing: 2px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 10px;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #fff;
}

h1#title a, a:visited {
	color: #fff;
	-webkit-margin-before: 0px;
        -webkit-margin-after: 0px;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #000;
}

h1#title a:hover {
	text-shadow: 0 0 3px #000000;
}

/* --- LINK STYLES --- */

/* these change all the normal hyperlinks on the page
from that ugly default blue colour. edit away! */

a, a:link, a:visited {
	color: #3e3e3e;
	text-decoration: none;
}

a:hover {
	text-shadow: 0 0 3px #000000;
}

/* --- SIDEBAR --- */

/* this specifies the basics for the sidebar,
including the background and font */

div#secondary {
	display: block;
	position: fixed;
	width: 300px;
	height: auto;
	margin-left: 10px;
	margin-top: 10px;
	background-color: #131527;
	background-image: url("https://i.imgur.com/QxPfTcG.png");
	text-decoration: none;
	font-family: Calibri;
	font-size: 16px;
	overflow: visible;
	float: left;
	border-radius: 20px 20px 20px 20px;
}

/* this specifies what the sidebar userpic looks like.
feel free to turn it off with display: none; */

div#secondary .userpic img {
	display: block;
	position: relative;
	margin-left: 100px;
	margin-right: 100px;
	margin-top: 90px;
	z-index: 4;
	border-radius: 50px;
	text-align: center;
}

/* this is the journal username that appears on the sidebar */

div.journal-name {
	text-align: center;
	text-transform: uppercase;
	font-family: Calibri;
	font-size: 1.3em;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 3px #fff;
	letter-spacing: 2px;
	padding-top: 5px;
}

/* this pads out the sidebar links */

h2.module-header a {
	color: #000;
	display: none;
}

ul.module-list {
	padding: 5px;
	margin-top: 10px;
	display: block;
}

ul.module-list a, ul.module-list a:link, ul.module-list a:visited {
	display: block;
	color: #fff;
}

ul.module-list a:hover {
	text-shadow: 0 0 3px #fff;
}

/* these specify what the sidebar links look like */

.module-list-item, .module-list-item a {
	display: block;
	width: 100%;
	text-align: center;
	font-family: Calibri;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
}

.module-list-item a:hover {
	display: block;
	width: 100%;
	text-shadow: 0 0 3px #fff;
	color: #fff;
}

div.journal-website-name a {
	display: block;
	width: 100%;
	text-align: center;
	font-family: Calibri;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #000;
}

div.journal-website-name a:hover {
	text-shadow: 0 0 3px #fff;
}

/* the rest of these are to do with the different modules
you can enable or disable in the journal customisation settings.
these aren't comprehensive of all of them, because i'm lazy */

div.module-navlinks.module {
	font-size: 20px;
}

div.module-tags_list.module {
	font-size: 14px;
	list-style: none;
}

.manage-link {
	display: block;
	text-align: center;
	font-size: 14px;
	margin-top: -10px;
}

div.module-typelist.module {
	background-color: #ff0000;
	display: inline;
}

div.module-typelist.module a {
	background-color: #ff0000;
	display: inline;
}

div.module-calendar.module {
	margin-left: 30px;
}

div.module-customtext.module {
	padding: 20px;
	background-color: #FFFFFF;
	color: #000000;
}

div.module-customtext.module h2 {
	background-image: url("https://i.imgur.com/QxPfTcG.png");
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: center;
	font-family: Calibri;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 3px #fff;
	letter-spacing: 2px;
}

/* this is the little thing you can click to open
all the cut tags on a journal page at once */

div.module-cuttagcontrols.module {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* --- BODY --- */

/* this specifies all the basic stuff. maybe don't mess with the text-align
as it applies to the WHOLE PAGE on a base level and will fuck everything up.

body {
	background-color: #131527;
	background-attachment: fixed;
	background-repeat: repeat;
	background-image: url('https://i.imgur.com/6puJt3u.png');
	background-size: 300px;
	background-position: right bottom; 
}

/* --- END OF BODY --- */

/* this one is for the weird dreamwidth user tag link! */

.ljuser a {
	color: rgba(0, 0, 0, 0.7);
}

.poster.entry-poster a {
	color: rgba(0, 0, 0, 0.7);
}

.poster.entry-poster a:hover {
	text-shadow: 0 0 3px #000;
}

/* --- END OF LINK STYLES --- */

/* --- IMPORTANT --- */

/* --- ENTRIES --- */

/* this whole part applies to actual journal entries */

/* this stuff specifies the journal entry background!
the "wrapper" is basically the jacket the content wears */

.entry-wrapper {
	background-color: #ffffff;
	padding-bottom: 10px;
}

/* the header and footer are pretty self-explanatory.
they're the top & bottom "pieces" of the journal entry,
though these also become default for other headers & footers */

.header {
	text-align: center;
}

.footer {
	text-align: center;
}

/* this is for the date and time displayed on a journal entry */

/* ok this part is important. the entry-content is
basically the interior decorating of your journal entries.
feel free to experiment */

.entry-content {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	min-height: 150px;
	width: auto;
}

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

/* the primary userpic is the one that floats beside journal entries.
you can turn this off by adding display: none;
or you can change the size or make it rounded or whatever */

div#primary .userpic img {
	float: right;
	margin-right: -150px;
	margin-top: -50px;
	border: 5px solid #fff;
}

/* this bit shows the username of the person who posted
the entry. you can turn it off, tweak the aesthetics, etc.
having this visible is often useful for community journals */

span.entry-poster {
	margin-top: 60px;
	margin-right: -150px;
	text-align: center;
	float: right;
	width: 120px;
	font-family: Calibri;
	font-size: 16px;
}

/* all this tag stuff specifies what journal entry tags look like. */

span.tag-text {
	text-transform: uppercase;
}

.tag {
	padding-top: 10px;
	list-style: none;
}

.tag ul {
	display: inline;
	font-size: 16px;
	padding: 10px;
	line-height: 16px;
	list-style: none;
}

.tag ul li {
	display: inline;
	padding: 5px;
}

.tag ul li a {
	color: #000000;
	padding: 5px;
	letter-spacing: 1px;
}

.tag ul li a:hover {
	text-shadow: 0 0 3px #000000;
}

/* entry management links are the ones you click to edit an entry
or to add it to your memories etc. */

ul.entry-management-links {
	color: #000000;
	font-family: Calibri;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

ul.entry-management-links li {
	display: inline;
	padding: 5px;
}

ul.entry-management-links.text-links {
	padding: 0px;
}

/* the metadata is basically all the stuff like current mood, location, music, etc */

.metadata ul {
	display: inline block;
	list-style: none;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 10px;
}

.metadata-item-location, .metadata-item-music, .metadata-item-mood {
	color: #000000;
}

/* this part changes what blockquotes look like.
same rules for the photobucket links, please! aka host
your own you bandwidth-sucking varmints */

blockquote {
	font-size: 14px;
	line-height: 1.3;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	background-color: #bababa;
	border-radius: 10px;
}

/* this is for when you use the html textarea tag
to show some copy-pasteable code or whatever */

textarea {
	background: #191919;
	color: #ffffff;
}

/* --- TITLES AND HEADERS --- */

/* ok, there are basically a bunch of different "h" html tags
for varying sizes and styles of header text so that users can
organise their posts into sections with nice-looking titles.

feel free to experiment with these, just be aware that certain parts
of your journal's building blocks are set up to use the header tags,
so it's important to make sure they match.

if you still don't understand what these are, try using a h2 or h3 or whatever in a journal post and previewing it with a few different numbers! */

h1 {
	color: #000000;
	left: 20px;
}

h3 {
	margin-bottom: 0px;
	color: #6a6a6a;
}

h3.entry-title a {
	padding-top: 15px;
}

h3.entry-title a {
	display: inline-block;
	font-size: 20px;
	font-family: 'Sniglet' Calibri;
	text-transform: uppercase;
	letter-spacing: 5px;
	color: #000000;
	text-shadow: none;
	text-align: center;
	padding-top: 20px;
	width: 80%;
	margin-bottom: 0px;
}