dreamscapes | Line Up (TABULA RASA)

Theme || Layout: Line Up (Modernity) || Tabula Rasa
Author:

timeasmymeasure
Layout Submission Type: CSS layout based off Tabula Rasa

Image Preview: http://i52.tinypic.com/200wety.jpg

Image Info: No images

Additional Info: CSS currently only works with "2 column sidebar right" but please feel free to fix that and anything else that needs fixing/changing. The name for this particular color scheme is Modernity.

CSS:

/*-- Line Up (Tabula Rasa) --*/
/*--  select "2 Column (sidebar on right)" --*/
/*-- stylesheet by arobynsung @ visualwit for DW --*/

/*--- main ---*/

* {
		margin: 0px; 
		padding: 0px;
		}

BODY { 
		background-image: url(''); 
		background-color: #f0f0f0;
		color: #323232; 
		font-size: 1em; 
		margin: 30px 0px 0px 0px; 
		font-family: Franklin Gothic Book, sans-serif;
		}

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

a:hover {
		color: #2d2d2d;
		}

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

input, textarea {
		background-color: #FFFFFF;
		color: #2d2d2d;
		border: 1px solid #2d2d2d;
		}

::-moz-selection { 
		background-color: #ededed; 
		color: #2d2d2d; 
		}

q { 
		font-style: italic; 
		}

blockquote {
		margin: 10px 10px 10px 50px;
		padding: 5px;
		width: 88%;
		border-top: 5px solid #2d2d2d;
		border-bottom: 5px solid #db3f3f;
		}

ul {
		margin: 5px 0px 5px 15px;
		list-style: square;
		list-style-position: inside;
		}

ol li {
		margin: 5px 0px 5px 15px;
		list-style-position: inside;
		list-style: decimal;
		}

/*--- containers and things ---*/

#canvas { 
		width: 90%; 
		margin: 0px auto; 
		}

#primary { 
		float: right; 
		margin: 0px;   
		width: 76%; 
		}

/*--- titles ---*/

#header { 
		padding: 10px; 
		background-color: #FFFFFF;   
		margin: 0px 0px 15px 0px; 		
		border-top: 10px solid #db3f3f;
		}

h1#title { 
		font-weight: bold; 
		color: #2d2d2d; 
		font-size: 1.3em; 
		text-transform: uppercase;
		}

h2#subtitle { 
		color: #2d2d2d;
		font-size: 1.23em; 
		font-weight: lighter; 
		text-transform: lowercase;
		}

h2#pagetitle { 
		font-size: 1.21em; 
		display: none; 
		}

/*-- journal navigation --*/

div.module-navlinks { 
		font-size: 1.2em; 
		text-align: right;
		list-style: none; 
		}

div.module-navlinks ul.module-list { 
		text-transform: uppercase;
		}

/*--- sidebar options ---*/

.two-columns-right #secondary { 
		float: left; 
		width: 23%; 
		margin: 0; 
		}

.two-columns-right #tertiary { 
		clear: both; 
		}

.two-columns-right #tertiary .module { 
		float: left; 
		}

/*--- sidebar ---*/

.module { 	
		background-color: #FFFFFF;   
		margin: 0px 0px 15px 0px; 		
		border-top: 10px solid #2d2d2d;
		}

.module-content { 
		padding: 10px; 
		}

h2.module-header {
		background-color: #db3f3f;   
		padding: 3px; 
		margin: 0px 0px; 
		color: #ffffff; 
		font-size: 1.2em; 
		font-weight: normal; 
		text-transform: uppercase; 
		}

h2.module-header a { 
		color: #ffffff; 
		}

div.module-content div.userpic { 
		text-align: center; 
		}

div.module-content div.userpic img { 
		height: 70px;
		width: 70px;
		padding: 5px; 
		background-color: #2d2d2d;   
		border: 3px solid #db3f3f;
		}

div.journal-name {  
		text-transform: uppercase; 
		margin: 5px 0px 0px 0px; 
		text-align: center; 
 		}

div.journal-website-name { 
		text-transform: uppercase; 
		text-align: center; 
		}

ul.userlite-interaction-links { 
		margin: 5px 0px 0px 0px; 
		list-style: none; 
		text-align: center; 
		}

ul.userlite-interaction-links li { 
		margin: 0px auto; 
		display: inline; 
		list-style: none; 
		text-align: center; 
		}

ul.module-list { 
		list-style: none; 
		}

ul.module-list li { 
		padding: 0px 0px 0px 5px; 
		list-style: none; 
		}

ul.module-list-item { 
		list-style: none; 
		}

ul.module-list-item li { 
		padding: 0px 0px 0px 5px; 
		list-style: none; 
		}

div.manage-tags-link { 
		margin: 10px 0px 0px 0px;
		text-transform: uppercase; 
		text-align: right; 
		}

div.module-calendar table { 
		text-align: center; 
		margin: auto; 
		width: 55%; 
		}

div.module-calendar th { 
		text-transform: uppercase; 
		background-color: #FFFFFF;
		border: 1px solid #2d2d2d; 
		}

div.module-calendar td.empty-day { 
		text-transform: uppercase; 
		background-color: #FFFFFF; 
		border: 1px solid #2d2d2d; 
		}

div.module-calendar td.entry-day { 
		text-transform: uppercase; 
		background-color: #FFFFFF; 
		border: 1px solid #db3f3f; 
		}

/*--- navigation (for entries) ---*/

.navigation { 
		text-align: center; 
		padding: 5px; 
		background-color: #2d2d2d;   
		margin: 0px 0px 15px 0px; 		
		border-top: 10px solid #db3f3f;
		font-size: 1.2em; 
		text-transform: uppercase;
		}

.navigation a{ 
		color: #ffffff;
		}

.page-separator { 
		padding: 10px; 
		}

div.navigation ul { 
		display: inline; 
		}

div.navigation li { 
		display: inline; 
		list-style: none; 
		}

li.page-back, li.page-forward {
		display: inline; 
		list-style: none; 
		}

/*--- entries ---*/

div.entry { 
		margin: 0px 0px 15px 0px;
		background-color: #db3f3f;   
		border-top: 10px solid #2d2d2d;
		}

div.entry div.userpic { 
		float: right; 
		margin: 0px 8px 20px 20px; 
		}

div.entry div.userpic img { 
		padding: 5px; 
		background-color: #FFFFFF;   
		border: 5px solid #2d2d2d;
		}

.userpic {
		min-width: 120px;
		}

div.entry-content { 
		background-color: #FFFFFF;  
		padding: 15px; 
		padding-top: 30px; 
		margin: 0px; 
		margin-right: 140px; 
		margin-top: -10px; 
		}

div.entry div.header { 
		padding: 5px 10px 5px 10px; 
		margin: 0px 0px 5px 0px; 
		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

.entry-poster { 
		background-color: #FFFFFF;  
		padding: 5px;
		margin-top: -5px; 
		float: right; 
		}

h3.entry-title { 
		color: #2d2d2d; 
		text-transform: uppercase; 
		font-weight: normal; 
		}

h3.entry-title a { 
		color: #2d2d2d; 
		}

.datetime {  
		text-transform: uppercase; 
		color: #db3f3f; 
		font-size: 0.75em; 
		}

.datetime a {  
		color: #db3f3f; 
		}

/*--- currents and tags ---*/

.metadata { 
		font-size: 0.85em; 
		padding: 10px 15px 5px 15px; 
		margin: 0px;  
		text-transform: uppercase; 
		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

div.metadata ul { 
		padding: 0px; 
		margin: 0px; 
		}

div.metadata ul li { 
		list-style: none; 
		padding: 0px; 
		margin: 0px; 
		}

span.metadata-item-location, span.metadata-item-music, span.metadata-item-mood, div.tag ul  { 
		color: #db3f3f;
		text-align: right; 
		text-transform: uppercase; 
		display: inline; 
		}

.metadata img {
		display: none;
		}

div.tag { 
		font-size: 0.85em; 
		padding: 15px; 
		text-transform: uppercase;
		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

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

div.tag ul li { 
		text-align: right; 
		display: inline; 
		list-style: none; 
		font-weight: normal; 
		margin: 5px 5px 0px 0px; 
		}

ul.entry-management-links {
		padding: 2px; 
		list-style: none; 
		text-align: center;
		margin: 0px; 
 		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

ul.entry-management-links li { 
		margin: 0px auto; 
		display: inline; 
		list-style: none; 
		text-align: center; 
		}

ul.entry-interaction-links { 
		padding: 2px; 
		text-align: center; 
		margin: 0px; 
		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

ul.entry-interaction-links li { 
		display: inline; 
		list-style: none;  
		font-weight: normal; 
		font-size: 1.152em; 
		color: #2d2d2d; 
		text-transform: uppercase; 
		margin: 0px 5px 0px 0px;
		padding: 0px; 
		}

ul.entry-interaction-links a { 
		color: #2d2d2d; 
		}

li.active { 
		list-style: none; 
		display: inline; 
		margin: 10px; 
		}

/*--- archive page ---*/

.month { 
		padding: 20px; 
		background-color: #FFFFFF; 
		margin: 0px 0px 15px 0px; 		
		border-top: 10px solid #2d2d2d;
		}

table.month { 
		border: 0px solid #db3f3f;
		}

.month table { 
		width: 100%; 
		margin: auto; 
		}

.month caption { 
		display: none; 
		}

.month h3 { 
		color: #2d2d2d; 
		font-size: 1.2em; 
		font-weight: normal;
		text-transform: uppercase; 
		}

.month th { 
		background-color: #2d2d2d; 
		color: #ffffff; 
		margin: 0px 2px; 
		padding: 5px 2px; 
		font-size: 1.15em; 
		font-weight: normal; 
		text-transform: uppercase; 
		border: 1px solid #db3f3f; 
		}

.month td.day { 
		border: 1px solid #db3f3f; 
		font-weight: normal; 
		}

td.day { 
		padding: 10px;
		}

.month td.day-has-entries {
		background-color: #ffffff; 
		font-weight: normal; 
		}

.month td.day-has-entries p { 
		font-size: 1.14em; 
		font-weight: bold; 
		padding: 0px 0px 0px 5px; 
		}

/*--- tags page ---*/

.page-tags .tags-container { 
		background-color: #FFFFFF;
		margin: 0px 0px 10px 0px; 
		border-top: 10px solid #2d2d2d;
		}

.page-tags h2 { 
		padding: 5px 10px 5px 10px; 
		font-size: 1.2em; 
		color: #2d2d2d;
		font-weight: normal; 
		text-transform: uppercase; 
		}

.page-tags .ljtaglist { 
		padding: 10px; 
		}

.manage-tags-link { 
		padding: 10px; 
		}

/*--- comments ---*/

.comment { 
		margin: 0px 0px 15px 0px;
		background-color: #db3f3f;   
		border-top: 10px solid #2d2d2d;
		}

.bottomcomment { 
		background-color: #FFFFFF; 
		padding: 10px; 
		margin: 0px; 
		border-top: 10px solid #2d2d2d;
		}

.comment-content {
 		background-color: #FFFFFF;  
		padding: 15px; 
		padding-top: 30px; 
		margin: 0px; 
		margin-right: 140px; 
		margin-top: -10px; 
		}

div.comment div.header { 
		padding: 5px 10px 5px 10px; 
		margin: 0px 0px 5px 0px; 
		margin-right: 140px; 
		background-color: #FFFFFF;   
		color: #2d2d2d; 
		text-transform: uppercase; 
		}

div.comment div.header a {  
		font-weight: lighter;  
		font-size: 1.15em; 
		color: #2d2d2d; 
		}

.comment-poster { 
		background-color: #FFFFFF;  
		padding: 5px;
		margin-top: -5px; 
		float: right; 
		}

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

textarea.textbox  { 
		width: 80% !important; 
		color: #2d2d2d;
		border: 1px solid #2d2d2d;
		}

.poster-ip { 
		background-color: #FFFFFF;
		float: right; 
		}

div.comment div.userpic { 
		float: right; 
		margin: 0px 8px 20px 20px; 
		}

div.comment div.userpic img { 
		padding: 5px; 
		background-color: #FFFFFF;   
		border: 5px solid #2d2d2d;
		}

div.comment div.footer { 
 		margin-right: 140px; 
		background-color: #FFFFFF; 
		padding: 0px 10px 0px 10px; 
		font-weight: bold; 
		color: #2d2d2d; 
		text-transform: uppercase; 
		}

.comment-management-links ul, .comment-interaction-links ul {
		list-style: none; 
		}

ul.comment-management-links { 
		padding: 2px; 
		text-align: center; 
		margin: 0px; 
		background-color: #FFFFFF;  
		}

ul.comment-management-links li { 
		margin: 0px auto; 
		display: inline; 
		list-style: none; 
		text-align: center; 
		}

ul.comment-interaction-links { 
		padding: 2px; 
		text-align: center; 
		margin: 0px; 
		background-color: #FFFFFF;  
		}

ul.comment-interaction-links li { 
		display: inline; 
		list-style: none;  
		font-weight: normal; 
		font-size: 1.152em; 
		color: #2d2d2d; 
		text-transform: uppercase; 
		margin: 0px 5px 0px 0px;
		padding: 0px; 
		}

ul.comment-interaction-links a { 
		color: #2d2d2d; 
		}

#qrform table { 
		border: 0!important; 
		}
		
		.comment-poster {  
		text-transform: uppercase; 
		}

table.talkform { 
		background-color: #FFFFFF; 
		margin: 0px 0px 10px 0px; 
		padding: 10px; 
		}

/*--- contextual pop-up ---*/

div.ContextualPopup {
		margin: auto;
 		text-align: left; 
		width: 300px;
		text-transform: uppercase;
		font-family: Tahoma, Arial, sans-serif;
		}

div.ContextualPopup div.Inner {
		background-color: #FFFFFF; 	
		color: #2d2d2d!important;
		border: 1px solid #2d2d2d;
		}

div.ContextualPopup .Userpic {
		padding: 3px;
		margin:  5px;
		background-color: #db3f3f;
		border: 2px solid #2d2d2d;
		}

div.ContextualPopup .Content {
		background-color: #FFFFFF; 
		border: 0px solid #2d2d2d;
		margin: auto;
		}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:link {
		text-decoration: none !important;
		color: #db3f3f!important;
		}

div.ContextualPopup .Relation {
		text-transform: uppercase;
		color: #2d2d2d;
		}

/*--- navigation bar ---*/

table#lj_controlstrip td {
		background-color: #FFFFFF; 
		border: 0px solid #FFFFFF;
		border-top: 5px solid #2d2d2d;
		color: #323232;
		text-transform: uppercase;
		font-family: Tahoma, Arial, sans-serif;
		}

#lj_controlstrip input {
		background-color: #FFFFFF;
		padding: 0px 5px 0px 5px;
		color: #323232;
		text-transform: uppercase;
		border: 1px solid #2d2d2d;
		}

#lj_controlstrip a  {
		color: #db3f3f;
		}

Originally posted over here.

Flat | Top-Level Comments Only

i don't think you've ever made a css layout that i didn't think was completely awesome, but i absolutely love how beautifully balanced this design is. even the blockquote. maybe especially the blockquote.

(we have a thing about good blockquotes in layouts. probably because we use it so much in posting, so we see it all the time.)

Aww, thank you! I'm really glad you like it (and I do have a special place in my css heart for good blockquotes, so I'm really happy you like these) =DD

Line Up (TABULA RASA)

no subject

no subject