CSS for Wordpress On a Whim Theme

/*
css for Wordpress.com On a Whim Theme
by tess!

i think all of this should be pretty clear if you can deal with basic css, but shout at me if any of my commenting is so bad it’s incomprehensible.  but bear in mind, i can explain what i mean here, but i probably can’t fix any actual problems.

but go here, http://premium-themes.forums.wordpress.com/forum/on-a-whim for more help.

and don’t you hate ee cummings all-lower case typists in code. hah!
*/

/*
SITE-WIDE HOUSEKEEPING – LINKS, HOVER, VISITED LINKS, SPACING
*/

/* force visited links to stay the same color */
a:visited {
/* color: inherit; */
color: #AF5D62;
/* no, actually change to orange purplish */
}

/* force links to the pink-purple color of the theme */
a:link {
color: #996B8D;
text-decoration: none;
}

/* force hover to an orangey-purple highlight */
a:hover {
color: #b85b5a;
text-decoration: none;
}

/*
reduce paragraph spacing on body text
*/
#content p,
#content ul,
#content ol,
#content dd,
#content pre,
#content textwidget,
#content hr {
margin-bottom: 12px;
/* 12px makes half size, basically */
}

/*
SIDE WIDGETS
*/

/* set non-heart-box menu sidebar links to white – using both statements as some seems to be generated text rather than links? */
.widget-area .widget a {
color: #ffffff;
}
.widget-area .widget a:link {
color: #ffffff;
text-decoration: none;
}

/* then change text in the heart-box links to a slightly lighter shade because of the darker background */
.widget-area .widget:nth-child(2n+1) a:link, .widget-area .widget:nth-child(2n+1) a:visited {
color: #C48F92 !important;
text-decoration: none;
}
.widget-area .widget:nth-child(2n+1) a:hover {
color: #FFFFFF !important;
text-decoration: none;
}

/* side widget text box to a larger title font */
.wf-active .widget-title {
font-size: 1.9rem;
font-style: italic;
font-variant: small-caps;
letter-spacing: .03em;
margin-bottom: .938em;
text-transform: uppercase;
}

/*
HEADINGS – colors, fonts, text
*/

/*
tessmackenzie.com – use H1 for posts, in swirly font
don’t use H2 – seems to be locked somehow in htis theme
use H3 for book/story titles, in swirly font
*/

/* first change headings as needed – if hacking this, cut and paste this block, change h1 to h2 or h3, and make changes*/

/* change post and page – but not tessmackenzie header – to oranger purple */
#content h1 a, #content h1 a:visited {
text-decoration: none;
color: #B28487 !important;
font-size: .82em;
font-style: normal;
font-variant: normal;
text-transform: none;
}

#content h3 {
font-family: ff-market-web-1, ff-market-web-2, “Open Sans”, “Helvetica Neue”, Helvetica, sans-serif;
font-size: 1.8em;
font-style: normal;
color: #AF5D62;
font-variant: normal;
text-transform: none;
}

/*
OTHER BITS AND PIECES
*/

/* color of date on posts – change to same grey  as “posted on” text */
.entry-header .post-date a {
color: #625756;
}

/*
SITE HEADER, IMAGE, AND SITE LOGO
*/

/* not used any more – makes header box a bit smaller */
.site-header, .site-main {
padding: 0;
/* do not use in On a Whim, moves top header box down, which changes background image alignment at very top of page */
}

/* not used any more – for ‘tess mackenzie’ header text – but left in case need to revert and in case messes up formatting */
.site-branding {
position: relative;
left: 14px;
top: -22px;
height: 110px;
}

/* this block to add white tess mackenzie logo from books, and
to hide the existing side title */
/* USE 130×602 pixel IMAGE */
.site-title {
background: url(‘http://tessmackenzie.files.wordpress.com/2013/09/website-name3.jpg’) no-repeat !important;
background-color: #F0B49E;
background-attachment: fixed;
width: 602px;
height: 130px;
left: 0;
top: 0;
}

/* hide main site header “tess mackenzie” text.  First color to same as bckgnd peach, then move sideways – this keeps clicky link in place */
.site-title, .site-title a, .site-title a:visited, .site-title a:hover {
font-size: 100%;
display: block;
/* next four lines to make clickable link from http://ran.ge */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
color: #F0B49E;
text-decoration: none;
/* old shade was richer version of bckgrnd color: #724567; */
}

/* was using to force main site header “tess mackenzie” not to change color on hover – LEFT IN CASE USEFUL FOR ANYONE ELSE */
/*
.site-title, .site-title a:hover {
color: #724567;
text-decoration: none;
}*/

/* WAS USING TO MOVE GRAVATAR IMAGE LOGO AROUND.  LEFT IN CASE USEFUL FOR ANYONE ELSE */
/*
.site-description {
position: relative;
left: -40px;
top: -40px;
}
.site-logo {
position: relative;
left: -40px;
top: -40px;
} */

/*
This section draws the white circle around the image, and inserts the logo image.  There’s a big version and a small version, so comment out which isn’t being used.  I haven’t decided which looks better.
USE A 190X190 pixel IMAGE FOR THE LARGE VERSION, AND A 145X145 pixel IMAGE FOR THE SMALL ONE
*/

/* bigger version */
/*
.site-logo {
background: url(“http://tessmackenzie.files.wordpress.com/2013/09/silhouette200_for_wp1.jpg”) no-repeat !important;
background-color: #F0B49E;
position: relative;
width: 200px;
height: 200px;
left: -56px;
top: -51px;
color: #F0B49E;
}*/

/* smaller version */
.site-logo {
background: url(‘http://tessmackenzie.files.wordpress.com/2013/09/silhouette150_for_wp.jpg’) no-repeat !important;
background-color: #F0B49E;
position: relative;
width: 150px;
height: 150px;
left: -40px;
top: -35px;
color: #F0B49E;
}

/* not COMPLETELY sure about this, but seems to be needed to hide the gravatar and stop it overlaying the higher-res image */
.site-header img, .entry-content img, img.size-full, .widget img, .entry-media img {
display: none;
}

/* hide site description “i’m tess, i write smut” or it bumps
the content down too far */
/* not ideal – prob affects SEO and other such shit but works */
.site-description {
display: none;
}

/*
NOT USED AT MOMENT, IN CASE ANYONE WANTS TO SEE HOW, HIDES TEXT AND LOGO WITH GRAPHIC.
*/
/*
.site-title {
display: none;
}
.site-logo {
display: none;
}
.site-description {
display: none;
}
*/

/* end of block to do title area and logos */

/*
TOP MENU BAR
*/

/* from here down to next marker like this is all top menu bar colors and layout */
.navigation-main li.current-menu-item a {
color: #AF5D63;
}

/* spacing and color of bullets in top menu */
/* inherit needed to force submenu to white */
.navigation-main ul > li a:after {
color: inherit;
content: “•”;
display: inline-block;
font-size: 1.8rem;
padding-left: .78em;
vertical-align: -7%;
}

/* PRETTY SURE INHERIT IN THIS PART IS BREAKING THE DOTS AND CAUSING THEM TO CHANGE COLOR – NEEDS THE INHERIT TO KEEP DIFFERENT COLOR ON SUBMENU, SO LEAVE FOR NOW */
.navigation-main a {
display: block;
font-family: “Open Sans”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 1.2rem;
font-weight: 800;
padding: .5em 0 0 1.25em;
text-decoration: none;
text-transform: uppercase;
}

/* force visited links in header menu to different color */
.navigation-main a:visited {
/* color: inherit; */
/* was color.inherit, but actually change to this color instead */
color: #89537D;
}

/* force nav bar links to pink-purple color of theme */
.navigation-main a:link {
color: #89537D;
text-decoration: none;
}

/*
POP-UP SUBMENU
*/

/* pop-up orange nav submenu colors */
.sub-menu a {
color: #FFFFFF;
}
.sub-menu a:link {
color: #FFFFFF;
text-decoration: none;
}
.sub-menu a:visited {
color: #FFFFFF;
text-decoration: none;
}

/* top menu ends here */

/*
BOTTOM MENU AND OLDER/NEXT/PREV POSTS BUTTONS
*/

/* bottom menu and older posts button */

/* first change all wordpress links to everyone favorite roman-numberish grey – other link colors will change otherwise */
.navigation-footer a, .navigation-footer a:link, .navigation-footer a:visited {
color: #CCCCCC;
text-decoration: none;
}
.site-footer a, .site-footer a:link, .site-footer a:visited {
color: #CCCCCC;
text-decoration: none;
}

/* change color of older posts button */
#infinite-handle span {
background: none repeat scroll 0 0 #D56D54 !important;
}

/* change color of previous and next buttons on post pages to white text on orange background like “older posts” above – if you’re hacking this, #FFFFFF is white, #D56D54 is orange, change to suit your colors */
.nav-previous a, .nav-next a, #infinite-handle span {
background: none repeat scroll 0 0 #D56D54;
color: #FFFFFF;
text-decoration: none;
}

/* DONE.  THANKS FOR PLAYING! */