dusktilldawn | Layout: Let It Enfold You

Title: Let It Enfold You
Credit to:

dusktilldawn
Base style: Tabula Rasa
Type: Full layout, CSS
Best resolution: Variable width
Tested in: IE, Firefox
Features: Has custom comment pages. Fluid width entries, fixed width sidebar.

Now with tweaked version after feedback! Click the images for larger previews.


v1: Userpic outside, smaller content column	v2: Userpic inside, larger content column

v1: Userpic outside, smaller content column

v2: Userpic inside, larger content column

/* ---------------------------------------
/* theme: let it enfold you
/* author: sunrisetr @ dreamwidth
/* 
/* Based on the Plain Tabula Rasa theme.
/* Please credit sunrisetr @ dreamwidth
/* or dusktilldawn @ dreamwidth
/* somewhere on your journal or profile.
/* 
/* Resources: Pink Cotton
/* http://www.colourlovers.com/pattern/
/* 392256/Pink_Cotton
/*
/* Feel free to modify as you wish for
/* your personal use. Redistributing is
/* forbidden.
--------------------------------------- */

/* ---------------------------------------
	The basic stuff
--------------------------------------- */

body {
background:none repeat scroll 0 0 #F8F3E5;
color:#2D231C;
font-family:Helvetica,sans-serif;
font-size:0.875em;
line-height:1.2em;
margin: 60px 0;
}

hr {
color:#2D231C;
}

code, kbd, pre, tt {
font-family: monospace;
}

textarea {
background-color: #F8F3E5;
color: #2D231C;
font-family: monospace;
border: 1px solid #2D231C;
padding: 5px;
}

blockquote {
width: 70%;
border: 1px dashed #2D231C;
background-color: #F8F3E5;
color: #6B5344; 
margin: 15px 15px 15px 100px;
padding: 15px;
}

ul {
list-style: circle;
list-style-position: inside;
}

ol li {
list-style: lower-roman;
list-style-position: inside;
}

/* ---------------------------------------
	Page layout
--------------------------------------- */

#canvas {
margin:0 auto;
text-align:justify;
width:70%;
}

#primary {
background: #F8F3E5;
}

.two-columns-left #secondary, .three-columns-sides #secondary {
float:left;
margin-left:-15em;
width:15em;
background: #6B5344;
text-align: right;
}

.page-entry #primary .entry .header {
border-bottom: 2px dashed #EB6F6F;
}

#secondary > .inner:first-child {
padding:0;
}

#tertiary {
display: none;
}

/* ---------------------------------------
	Header and footer
--------------------------------------- */

#header {
background:url("http://imgur.com/PE2sr.png") repeat scroll 0 0 transparent;
border:2px dashed #2D231C;
height:40px;
text-align:right;
}

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

#footer {
background: #F8F3E5;
float: right;
text-align: right;
width: 77.3%;
}

#footer a {
text-transform: uppercase;
font-size: 12px;
}

#footer a, a:link, a:visited, a:active,
.footer .tag a, a:link, a:visited, a:active {
font-family: Helvetica !important;
font-style: normal;
}

/* ---------------------------------------
	Link styling
--------------------------------------- */

#primary a, a:link, a:visited, a:active {
font-style: normal;
}

#secondary a, a:link, a:visited, a:active {
font-family: Helvetica !important;
font-style: normal;
}

/* ---------------------------------------
	Recent entries view
--------------------------------------- */

h3.entry-title {
font-size: 25px;
letter-spacing: -1px;
text-transform: lowercase;
text-shadow: 1px 1px 1px #A79C8E;
line-height: 1.1em;
}

h3.entry-title a, a:link, a:active, a:hover, a:visited {
text-decoration: none;
color: #EB6F6F;
padding: 0;
text-transform: lowercase;
font-style: normal;
font-family: Georgia !important;
}

.entry .header {
border-bottom: 2px dashed #EB6F6F;
}

.datetime, .datetime .date a {
color: #2D231C;
font-family: Georgia !important;
font-size: 11px;
letter-spacing: -1px;
line-height: 1.5em;
}

div.entry div.userpic {
display: block;
float: right;
margin: 0 -100px 0 0;
}

div.entry div.userpic img { 
width: 70px; 
height: 70px; 
border: 5px solid #6B5344; 
}

.entry-content {
padding: 15px 0px 20px;
border-top: 2px dashed #F1BBBA;
font-size: 12px;
}

.entry-content .ljuser a:hover {
border-bottom: 0px;
}

.entry-content a, a:link, a:visited, a:active {
text-decoration: none;
font-family: Helvetica !important;
color: #EB6F6F;
}

.entry-content a:hover {
border-bottom: 1px dotted #EB6F6F;
}

#primary .separator-after {
background: url("http://i.imgur.com/T4iE2.png");
width: 400px;
margin: 0 auto 20px auto;
height: 2px;
border: 1px dashed #2D231C;
}

.entry-management-links {
text-align:center;
}

.entry-interaction-links {
text-align:right;
}

.entry-interaction-links .entry-permalink {
display:none;
}

ul.entry-interaction-links a {
font-family: Georgia !important;
font-size: 16px;
font-style: italic !important;
}

ul.entry-interaction-links a:hover {
border-bottom: 1px dotted;
}

.metadata {
font-family:Helvetica;
font-size: 10px;
line-height:1em;
}

.metadata .metadata-label {
font-weight:bold;
}

.footer .tag, .footer .tag a {
font-family:Helvetica;
font-size:10px;
font-weight:bold;
line-height:1em;
}

.footer .tag a:hover {
border-bottom: 1px dotted;
}

/* ---------------------------------------
	Sidebar
--------------------------------------- */

h2.module-header {
color:#F1BBBA;
font-family:Helvetica;
font-size:13px;
font-weight:lighter;
letter-spacing:1px;
text-align:center !important;
text-transform:uppercase;
border-bottom: 1px dashed !important;
}

h2.module-header a {
color:#F1BBBA;
font-family:Helvetica;
font-size:13px;
font-weight:lighter;
letter-spacing:1px;
text-align:center;
text-transform:uppercase;
}

/* ---------------------------------------
	Sidebar main browsing
	links styling
--------------------------------------- */

div.module-navlinks ul.module-list { 
padding: 0; 
margin: 0; 
list-style: none;
color: #F1BBBA;
}

div.module-navlinks ul.module-list li {
border:2px outset #2D231C;
color:#F1BBBA;
line-height:1.2em;
list-style:none outside none;
margin:0;
padding:5px 10px;
}

div.module-navlinks ul.module-list a {
color:#F1BBBA;
font-family:Helvetica;
letter-spacing:1px;
text-transform:uppercase;
font-size: 12px;
}

div.module-navlinks ul.module-list li:hover {
border: 2px outset #857D71;
color:#EB9F9F;
background: #A79C8E;
}

div.module-navlinks ul.module-list li:hover a {
color:#EB6F6F;
font-family:Helvetica;
letter-spacing:1px;
text-transform:uppercase;
font-weight:500;
}

/* ---------------------------------------
	Other sidebar modules
--------------------------------------- */

.module-calendar, .module-tags_list, .module-pagesummary, .module-userprofile, .module-syndicate,
.module-customtext, .module-typelist {
border:2px outset #2D231C;
padding: 5px 10px;
font-family: Helvetica;
font-size: 12px;
}

.module-tags_list .module-content, .module-pagesummary .module-content, .module-userprofile .module-content, .module-syndicate .module-content, .module-customtext .module-content, .module-typelist .module-content {
padding: 5px 10px;
}

.module-tags_list .module-content .manage-tags-link {
display: none;
}

.module-tags_list ul, .module-pagesummary ul, .module-typelist ul {
text-align: left;
list-style-type: circle;
}

.module-calendar .module-content a:hover, .module-tags_list ul a:hover, .module-pagesummary ul a:hover,
.module-typelist ul a:hover  {
border-bottom: 1px dotted;
}

.module-calendar table {
margin:5px auto;
text-align: right !important;
}

.module-calendar table td {
padding: 2px;
}

.module-content img {
border:5px solid #A79C8E;
}

.module-content ul img {
border:0px;
}

.journal-name {
color:#EB6F6F;
}

.module-customtext {
text-align:left;
}

.module-userprofile {
text-align:center;
}

/* ---------------------------------------
	Single-entry page view
	and comment settings
--------------------------------------- */

.page-entry .entry-content {
border-top: 0px !important;
}

.page-entry .entry .contents {
border-top: 2px dashed #F1BBBA;
padding-top: 10px;
}

#comments .separator { 
display:none; 
}

.comment .header {
padding-bottom: 5px;
}

.comment-title a {
font-size: 16px;
font-weight: bold;
font-family: Georgia !important;
}

.comment-title a:hover {
border-bottom: 1px dotted;
}

.comment .userpic {
display: block; 
float: left; 
padding-bottom: 10px;
padding-right: 10px; 
}

.comment .userpic img { 
width: 70px; 
height: 70px; 
border: 5px solid #6B5344;
background: #F8F3E5;
}

.comment-content {
padding-top: 10px;
border-top: 1px dashed #6B5344;
font-size: 12px;
padding-bottom: 20px;
}

ul.comment-management-links {
display:inline;
text-align:left;
}

ul.comment-interaction-links {
display:block;
text-align:right;
}

ul.comment-interaction-links a {
font-style:italic !important;
font-family: Georgia !important;
}

ul.comment-interaction-links a:hover {
border-bottom: 1px dotted;
}

div#entries.hfeed .topnav {
display:none;
}

.page-top {
display:none;
}

div.navigation {
text-align:center;
}

div.navigation ul a {
font-family:Helvetica !important;
text-transform:uppercase !important;
color:#EB6F6F !important;
}

div.navigation ul a:hover {
border-bottom: 1px dashed;
}

/* ---------------------------------------
	Various archive views
--------------------------------------- */

div#archive-year .separator {
display:none;
}

table.month { 
border-top: 1px dashed #EB6F6F;
padding-top: 16px;
}

table.month td, table.month th { 
border: none;
padding: 3px !important;
vertical-align:top;
text-align:left;
}

.month caption { 
display: none; 
}

.month-wrapper .header {
text-align:center;
color: #EB6F6F;
text-transform:uppercase;
}

.month-wrapper .footer {
text-align:center;
margin-top:0px;
margin-bottom:20px;
font-size:11px;
}

.month-wrapper .footer a {
font-style:italic !important;
font-family:Georgia !important;
}

h3.day-date {
text-transform:uppercase;
}

/* ---------------------------------------
	Tags view
--------------------------------------- */

.tags-container h2 {
color: #EB6F6F;
text-transform: uppercase;
border-bottom: 1px dashed;
font-size: 16px;
}

.tags-container ul {
list-style: circle;
}

.tags-container ul a {
font-family: Helvetica !important;
color: #2D231C;
font-size: 12px;
}

.tags-container ul a:hover {
border-bottom: 1px dotted;
}

.tags-container h2 {
color: #EB6F6F;
text-transform: uppercase;
border-bottom: 1px dashed;
}

.tags-container .manage-tags-link a {
font-size: 11px !important;
font-style: italic !important;
font-family: Georgia !important;
}

/* ---------------------------------------
/* theme: let it enfold you
/* author: sunrisetr @ dreamwidth
/* 
/* Based on the Plain Tabula Rasa theme.
/* Please credit sunrisetr @ dreamwidth
/* somewhere on your journal or profile.
/* 
/* Resources: Pink Cotton
/* http://www.colourlovers.com/pattern/
/* 392256/Pink_Cotton
/*
/* Feel free to modify as you wish for
/* your personal use. Redistributing is
/* forbidden.
/*
/* Edited to use inline userpics instead
/* of a column.
--------------------------------------- */

/* ---------------------------------------
	The basics
--------------------------------------- */