style_system | Jan. 25th, 2017

Hi everyone!

I made another layout for a community I recently created. The problem I have is not bieng able to relocate the previous and next links to where I want them to go. It doesn't help that the previous and next links overlap by 1px over the navigation/menu bar. I have no idea how to move them.

Here is the entire layout's css:

/* 
base style: blanket
layout name: windshield
6thirty.dreamwidth.org
*/
body { color: #010101; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 12pt; text-align: left; line-height: normal;
background: #010101 url('http://i.imgur.com/ZWtaVob.png') repeat; background-position: left bottom; background-attachment: fixed;
margin: 0; padding: 0; }

a, a:link, a:visited  {  color: #A3D0C8; text-decoration: none;
-webkit-transition: color 1s ease-in;
-moz-transition: color 1s ease-in; 
-o-transition: color 1s ease-in; }

a:hover, a:active:hover { color: #76B0A1; }

q { font-style: italic; }

b {}

strong {}

i {}

em {}

blockquote { color: #010101; font-family: Helvetica, Tahoma, sans-serif; font-size: 8pt; 
border-left: 6px solid #768fa3; border-right: 6px solid #768fa3; border-radius: 25px;
float: center; margin: 20px 20px 20px 20px; padding: 10px; width: 75%;
-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms; 
text-shadow: rgba(0,0,0,.2) 2px 6px 5px,rgba(255,255,255,.4) 0 -4px 30px; }

blockquote:hover { border-color: #dbe3ee; font-style: italic; 
padding-left:50px; }

input, textarea { color: #888888; line-height: 0px;
background-color: #ffffff; border: solid 1px #eeeeee;
padding: 5px; }

img { opacity: 0.1; }

img:hover { opacity: 1; }

#canvas { text-align: justify;
margin: 0 auto 3em; padding: 0; }

#content { margin: 0; padding: 0; }

#primary { margin: 0 auto; adding: 0; z-index: 0; }

/* contextual pop-up */
.contextualpopup { color: #010101; font-family: Helvetica, Tahoma, sans-serif;
background: #ffffff url('') no-repeat; background-position: left top; background-attachment: scroll;
margin: 0; padding: 0; }

.contextualpopup div.inner a, .contextualpopup div.inner a:link, .contextualpopup div.inner a:visited { color: #06273A; text-decoration: none;
-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;
transition: 0.5s; }

.contextualpopup div.inner a:active .contextualpopup a:hover { -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); }

.contextualpopup a, .contextualpopup a:link, .contextualpopup a:visited { color: #768fa3; }

.contextualpopup a:hover, .contextualpopup a:active { color: #dbe3ee; }

.contextualpopup .userpic { margin: .5em; padding: 0; }
    
.has-userpic .entry .userpic, .has-userpic .comment .userpic { float: right; }

.has-userpic .entry .header { margin-right: 135px; }

.has-userpic .comment .header { margin-right: 135px; }

/* control strip */
#lj_controlstrip { color: #010101; text-align: left; font-family: Helvetica, Tahoma, sans-serif; text-decoration: none;
background-color: #ffffff; background-image: none; 
opacity: 0.1; position: fixed; }

#lj_controlstrip:hover { opacity: 1;-webkit-transition: opacity 1s linear; }

#lj_controlstrip td { color: #010101; border-bottom: 1px solid #ffffff; }

#lj_controlstrip_statustext { color: #010101; }

#lj_controlstrip a, #lj_controlstrip a:link, #lj_controlstrip a:visited  { color: #76B0A1; }

#lj_controlstrip a:hover, #lj_controlstrip a:active:hover { color: #A3D0C8; }

#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic { color: #010101;
border-right: 1px solid #ffffff; }

#lj_controlstrip_login td { border-bottom: 0; }

#lj_controlstrip td td { border-bottom: 0; }

/* header, footer */
#header { background-color: #ffffff;
margin: 0 auto 2em; display: none; }

#header>.inner { border-left: 20px solid #f2ebd7;
padding: 4em 2em; }

@media only screen and (min-width: 40em) { #primary, #header, #secondary, .page-top { width: 60%; }

#footer { clear: both; display: block; }

.page-top { text-align: right; text-transform: uppercase;
margin: 0 auto; display: none; }

.navigation { text-align: left; text-transform: uppercase; }

li.page-back, li.page-forward { font-size: 10pt; 
background: #ffffff;
display: block; margin: 0; padding: 25px; float: right; opacity: 0.1; }

li.page-back:hover, li.page-forward:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

li.page-back { display: block; width: 355px; left: 25px; }

li.page-forward { display: block;width: 355px; right: 25px; }

li.page-separator { display: none; }

.navigation ul { display: inline; margin: 0 0 150px 0; padding: 0; }

.navigation li { display: inline; }

/* header */
#header h1#title { color: #aaaaaa; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 1.25em; font-weight: normal; text-transform: uppercase; letter-spacing: 0;
margin: 0; padding: 0; }

#header h2#subtitle { color: #aaaaaa; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 1em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px;
margin: 0; padding: 0; }

#header h2#pagetitle { color: #c8c8c8; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 1em; font-weight: normal; text-transform: uppercase; letter-spacing: 1px;
margin: 1em 0 0; padding: 0; }

/* navigation */
.module-navlinks { color: #000000;
background-color: #ffffff;
bottom: 0; margin: 0 auto; padding: .75em; position: fixed; width: 100%; z-index: 100; opacity: 0.1; }

.module-navlinks:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.module-navlinks a, .module-navlinks a:link, .module-navlinks a:visited { color: #76B0A1; text-decoration: none;
-webkit-transition: color 1s ease-in;
-moz-transition: color 1s ease-in;
-o-transition: color 1s ease-in; }

.module-navlinks a:hover, .module-navlinks a:active { color: #A3D0C8 }

.module-navlinks ul.module-list { letter-spacing: -0.5px; text-transform: none;
display: inline; margin: 0 0 0 2em; padding: 0; }

.module-navlinks ul.module-list li { display: inline; margin: 0 1em 0 0; padding: 0 .5em 0 0; }

/* modules */
#secondary { color: #888888;
background-color: #ffffff;
margin: 0 auto; padding: 0; z-index: 0; display: none; }

#secondary>.inner { border-left: 20px solid #f2ebd7;
padding: 4em 2em; }

#secondary .module { float: left; margin: 2em 1em; }

#secondary .module-header, #secondary .module-header a { color: #099aaf; }

#secondary .module-header { font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; }

#secondary .separator-after { clear: both; }

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

#secondary a:hover, #secondary a:active {  }

.module-tags_cloud { border-bottom: 1px solid #eeeeee; border-top: 1px solid #eeeeee;
float: none; margin: 3em 0; width: 100%; }

.module-tags_cloud .module-content { padding: 0 3em 1em; }

.module-tags_cloud li, .tags_cloud li { display: inline; }

#secondary .module-content { text-align: left; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; }

#secondary .module-content ul { list-style: outside; margin-left: 1em; padding-left: 0; }

#secondary .module-content li { margin: .5em 0; }

ul.userlite-interaction-links.icon-links { margin-left: 0; padding-left: 0; }

ul.userlite-interaction-links.icon-links li { display: inline; padding: 0 .20em; }

.module-calendar td a { display: block; padding: 2px; }

.module-credit .category-title { font-weight: bold;
margin-right: .5em; }

.module-search .search-form { margin: .2em auto; }

.module-search .search-box { max-width: 100%; margin: .2em; }

/* entry */
.entry { color: #010101; font-size: 12pt;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 150px 0 150px 0; padding: 25px; opacity: 0.1; }

.entry:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.entry-content { margin: 1em 0 0; }

.entry a, .entry a:link, .entry a:visited { color: #76B0A1; text-decoration: none;
 -webkit-transition: color 1s ease-in;
 -moz-transition: color 1s ease-in;
 -o-transition: color 1s ease-in; }

.entry a:hover, .entry a:active { color: #A3D0C8 }

.entry img { opacity: 0.1; }

.entry img:hover { opacity: 1;-webkit-transition: opacity 1s linear; }

.header { margin: 0 0 1em; padding: 0; }

h3.entry-title { color: #010101; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 20pt; font-weight: normal; letter-spacing: -0px; text-transform: uppercase;
margin: 0; padding: 0; }

h3.entry-title a, h3.entry-title a:link, h3.entry-title a:visited { color: #76B0A1; }

h3.entry-title a:hover, h3.entry-title a:active { color: #A3D0C8; }

.no-subject .entry .entry-title { background: none; }

.datetime { color: #010101; font-size: 9pt; font-weight: normal; letter-spacing: 1px; text-transform: uppercase;
padding: 0; }

.datetime a, .datetime a:link, .datetime a:visited { color: #76B0A1; }

.datetime a:hover, .datetime a:active { color: #A3D0C8; }

.entry .userpic img { border-top: 10px solid #76B0A1; border-bottom: 10px solid #76B0A1; border-left: 10px solid #A3D0C8; border-right: 10px solid #A3D0C8;
opacity: 0.1; }

.entry .userpic img:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.poster { color: #010101; font-size: 10pt; font-weight: normal; letter-spacing: 1px; text-transform: uppercase;
padding: 0; }

.poster a, .poster a:link, .poster a:visited { color: #76B0A1; }

.poster a:hover, .poster a:active { color: #A3D0C8; }

.page-recent .entry-poster { display: none !important; }

.page-entry .entry-poster { display: none !important; }

/* ensure comment content stretches out horizontally so it's readable */
.comment-content:before { content: ""; display: block; overflow: hidden; width: 10em; }
.comment-content { border-top: 1px transparent solid; } /* for firefox */

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li, .comment-content li { list-style-position: inside; }

/* To constrain the width and prevent layout breaking */
.entry-content img, .comment-content img { max-width: 100%; height: auto; }

@media only screen and (min-width: 64em) { .entry-content img, .comment-content img { max-width: none; } }

.metadata { margin: 2em 0 0; }

.metadata.top-metadata { margin: 1em 0 2em; }

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

.metadata ul li { color: #c8c8c8; font-size: .9em; font-weight: normal; letter-spacing: 0; text-transform: lowercase;
padding: 0; }

.metadata-label-location, .metadata-label-mood, .metadata-label-music { display: none; }

.metadata-item-location, .metadata-item-mood, .metadata-item-music { padding: 0 0 0 1.3em; }

.tag-text { display: none; }

.tag ul { display: inline; margin: 0; padding: 0 0 0 1.3em; }

.tag ul li { color: #c8c8c8; font-size: .9em; font-weight: normal; letter-spacing: 0; text-transform: lowercase;
display: inline; padding: 0; }

ul.entry-management-links { margin: 2em 0 0; padding: 0; }

ul.entry-management-links li { color: #c8c8c8; font-size: .9em; letter-spacing: 0; text-transform: lowercase;
display: inline; padding: 0 5px 0 0; }

ul.entry-interaction-links { text-align: center;
border-bottom: 1px solid #eeeeee;
margin: 1em 0 0; padding: 0 0 .5em; }

ul.entry-interaction-links li { color: #c8c8c8; font-size: .9em; font-weight: normal; letter-spacing: 0; text-transform: uppercase;
display: inline; padding: 0 5px 0 0; }

/* comments */
.comment-wrapper { margin: 2em 0; padding: 0; min-width: 15em; }

.comment { color: #010101; font-size: 12pt;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 0 0 150px 0; padding: 25px; opacity: 0.1; }

.comment:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.comment a, .comment a:link, .comment a:visited { color: #76B0A1; text-decoration: none;
 -webkit-transition: color 1s ease-in;
 -moz-transition: color 1s ease-in;
 -o-transition: color 1s ease-in; }

.comment a:hover, .comment a:active { color: #A3D0C8 }

.comment .userpic img { border-top: 10px solid #76B0A1; border-bottom: 10px solid #76B0A1; border-left: 10px solid #A3D0C8; border-right: 10px solid #A3D0C8;
opacity: 0.1; }

.poster-ip { font-size: 9pt; }

.comment .userpic img:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.comment img { opacity: 0.1; }

.comment img:hover { opacity: 1;-webkit-transition: opacity 1s linear; }

.comment .poster { color: #010101; font-size: 10pt; font-weight: normal; letter-spacing: 1px; text-transform: uppercase;
padding: 0; }

.comment .admin-poster { color: #010101;
background-color: #ffffff; }

.comment-title { font-size: 20px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; text-trasform: uppercase;
margin: 0; }

.no-subject .comment .comment-title { background: none; }

.comment-posted { font-weight: normal; }

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

textarea.textbox { width: 100% !important; }

.bottomcomment { color: #010101; font-size: 12pt;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 0 auto 2em; padding: 25px; opacity: 0.1; }

.bottomcomment:hover { opacity: 1; -webkit-transition: opacity 1s linear; }

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; }

.comment-management-links li, .comment-interaction-links li { display: inline; }

#qrform table { border: 0 !important; opacity: 0.1; }

/* archive */
li.active { color: ##010101; text-align: center; text-transform: uppercase;
display: none; }

.month { color: #888888;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 150px 0 150px 0; padding: 25px; opacity: 0.1; }

.month:hover { opacity: 1; }

.month h3 { color: #76B0A1; font-size: 20pt; font-weight: normal; letter-spacing: 1px; text-align: left; text-transform: uppercase;
margin: 0; padding: 0;}

.month th { color: #ffffff;  font-size: 8pt; font-weight: normal; text-align: center; text-transform: uppercase;
background-color: #76B0A1;
padding: 5px; }

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

.month caption { display: none; }

td.day { border: .1em solid #76B0A1;
padding: .5em; }

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

.month td.day-has-entries p { font-size: 1.14em; font-weight: b; text-align: left; }

.month td.day-has-entries p a, .month td.day-has-entries p a:link, .month td.day-has-entries p a:visited { color: #76B0A1; }

.month td.day-has-entries p a:hover, .month td.day-has-entries p a:active { color: #A3D0C8; }

.month dl, .month dt, .month dd { margin: 0; padding: 0; }

/* tags */
.page-tags .tags-container { color: #010101; text-align: left; font-size: 12pt;
background-color: #ffffff; border-top: 12px solid #76B0A1; border-bottom: 12px solid #76B0A1; border-left: 12px solid #A3D0C8; border-right: 12px solid #A3D0C8;
margin: 150px 0 150px 0; padding: 25px; opacity: 0.1; }

.page-tags .tags-container:hover { opacity: 1; }

.page-tags .tags-container a, .page-tags .tags-container a:link, .page-tags .tags-container a:visited { color: #76B0A1; }

.page-tags .tags-container a:hover, .page-tags .tags-container a:active { color: #A3D0C8; }

.page-tags .tags-container h2 { color: #76B0A1; font-size: 20pt; font-weight: normal; letter-spacing: 1px; text-align: left; text-transform: uppercase;
margin: 0; padding: 0; }

.page-tags .tags-container ul { list-style: none; margin: 1em; padding: 0; }

.page-tags .tags-container ul li { margin: 0 0 0 1em; padding: 0; }

/* icons */
.icons-container { color: ##010101;
background-color: #ffffff; border-left: 20px solid #f2ebd7;
margin: 0 auto 2em; padding: 4em 2em; }

.icons-container a, .icons-container a:link, .icons-container a:visited  { color: ; }

.icons-container a:hover, .icons-container a:active { color: ; }

.icons-container h2 { color: #099aaf; font-size: 1em; font-weight: normal; letter-spacing: 1px; text-align: right; text-transform: lowercase;
margin: 0; padding: 0; }
    
.sorting-options ul { text-align: right;
padding-left: 0; }

.sorting-options ul li { display: inline; }

.icons-container .icon { margin: 1em 0; }

.icon-image { float: left; clear: left; margin-bottom: .25em; min-width: 100px; padding-right: 1em; }

.icon-info { min-height: 100px; }

.icon-info span { font-weight: bold; }

.icon-info .default { text-decoration: underline; }

.icon-keywords ul { display: inline; margin: 0; padding: 0; }

.icon-keywords ul li { display: inline; padding: 0; }

.userpic { float: left; margin: 0 10px 10px 0; }

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Dreamwidth style system discussion

Jan. 25th, 2017

Jan. 25th, 2017

I want to know how to fix the previous 10 and next 10 links

Profile

September 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags