/*
Theme Name: FallSeason
Theme URI: http://wpthemepark.com
Description: Zenlike by nodethirtythree , FallSeason WordPress Theme by WP ThemePark
Version: 1.2
Author: Sadish
Author URI: http://wpthemepark.com
*/
/*
zenlike1.0 by nodethirtythree design
http://www.nodethirtythree.com
*/
*
{
padding: 0em;
margin: 0em;
}
/*
Took out: url(images/bg.gif) repeat fixed
Took out: background: #141;
Was: background: white url(images/bg.jpg) repeat;
*/
body
{
background: black url(images/green_hatch_gray3.gif) repeat fixed;
padding: 35px 0px 35px 0px;
font-size: small;
font-family:Verdana, Tahoma, Arial, Serif;
color: #333333;
font-size:0.8em;
}
p
{
line-height: 1.6em;
margin: 0 0 0.5em;
}
/*
#B96D00 is the gold color of the more... links and other links.
*/
a
{
color: #B96D00;
text-decoration: none;
border-bottom:#B96D00 1px dashed;
}
a:hover
{
text-decoration: none;
border-bottom:#B96D00 1px solid;
}
h1,h2,h3,h4,h5,h6
{
font-family:Georgia, Verdana, Arial, Serif;
}
h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: left;
line-height:1.6em;
}
/*
Below I removed the little squares from h3 and h4.
*/
h3
{
font-size: 1.7em;
}
h4
{
font-size: 1.4em;
}
h3 span
{
font-weight: normal;
font-size:60%;
color:#999;
}
h5
{
font-weight:normal;
font-family:Verdana, Arial, Serif;
font-size:1em;
}
.contentarea
{
padding-top: 1.3em;
}
dl
{
margin:1em 0px;
}
dt
{
font-weight:bold;
}
dd
{
margin:0.5em 1em;
padding:0;
}
/*
Was a colored border. I made it black. Also took out the padding.
*/
img
{
border: solid 1px black;
padding: 0;
}
/*
Changed this from left to alignleft. Put in margins on three sides.
Put in the border. This is to make her pictures float to the left.
And the margins make it so that the text doesn't rub right up against
the picture. For an example, look at the picture in "For God’s Sake, Bow"
where you can easily see the border.
*/
img.alignleft
{
position: relative;
float: left;
margin: 1.8em 1.8em 1.4em 0em;
border: solid 1px black;
padding: 0;
}
/*
Also had to put this in. Should have come with the theme.
*/
img.aligncenter
{
position: relative;
margin: 1em 1em 1em 1em;
border: solid 1px black;
padding: 0;
}
img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}
img.profile
{
position: relative;
float: left;
margin: 0.5em;
padding:3px;
}
ul, ol
{
margin:1em;
padding:0;
}
li
{
margin:0 1em;
padding:0.15em;
}
#contentarea ul li
{
list-style-image: url(images/db3.gif);
}
/*
blockquote
{
margin:1em;
padding:0 0 0 40px;
color:#666;
background:url(images/blockquote.gif) no-repeat left top;
}
*/
/*
Below we floated the blockquote right and gave it a width of 30%.
Previously it had top and bottom borders, but not side borders. On your front page
you can see that the boxes in the sidebar have a gradient color from top to bottom but
no side borders. Compare with the box on Jan's site in "God Is a Mother Rabbit."
It's the same box except it has side borders. Note that the box occupys 30% of the
window and it floats to the right of the text. Now shrink the window to half size
and look. It still occupys 30% and it still floats right. Note that the text wraps both
inside the box and beside that box. Almost the same thing can be done with tables,
but the code is not pretty. Anyone could read the code below and figure out what's
going on.
*/
blockquote
{
background: #FDFCF6 url(images/boxbg.gif) repeat-x;
padding: 1.5em;
border-top: 4px solid #E1D2BD;
border-bottom: 1px solid #E1D2BD;
border-left: 1px solid #E1D2BD;
border-right: 1px solid #E1D2BD;
margin-bottom: .7em;
margin-left: .7em;
text-align:left;
width: 30%;
float: right;
}
fieldset
{
border:none;
}
.divider1
{
position: relative;
background: #fff url(images/border2.gif) repeat-x;
height: 14px;
margin: 2.0em 0em 1.5em 0em;
clear: both;
}
.post
{
border-bottom: solid 1px #eaeaea;
margin: 2em 0;
}
/*
The titles of the posts were green, #141. We made 'em black, #000000.
*/
.post h4 a
{
text-decoration:none;
color:#000000;
border:none;
}
/*
See below: Paragraphs within posts need to be intented.
Jan wanted her paragraphs to be indented, but the theme didn't come
that way. Had to make this little fix.
*/
.post p
{
line-height: 1.6em;
margin: 0 0 0.5em;
text-indent: 2.5em;
}
/*
This below is to get the indent out of the blockquote.
That is not supposed to be indented.
*/
.post blockquote p
{
text-indent: 0;
}
.post .details
{
position: relative;
top: -1.5em;
font-size: 0.86em;
color: #787878;
margin:0;
padding:0;
}
.post .details .user
{
background:url(images/user.png) no-repeat left center;
padding-left:15px;
}
.post .details .date
{
background:url(images/date.gif) no-repeat left center;
padding-left:15px;
margin:0 0 0 1em;
}
#outer .post ul.controls
{
clear: both;
margin:0;
padding:1em 0;
background:#fcfcfc;
color: #787878;
}
.post ul.controls li
{
display: inline;
font-size: 0.86em;
margin:0;
padding: 0em 1.0em 0em 15px;
}
.post ul.controls li.comments
{
background: url(images/icon-comments.gif) no-repeat left center;
}
.post ul.controls li.more
{
background: url(images/icon-more.gif) no-repeat left center;
}
/*
We made this a solid box with borders all around.
This is for use where we need a box that is not part of a blockquote.
*/
.box
{
background: #FDFCF6 url(images/boxbg.gif) repeat-x;
padding: 1.5em;
border-top: 4px solid #E1D2BD;
border-bottom: 1px solid #E1D2BD;
border-left: 1px solid #E1D2BD;
border-right: 1px solid #E1D2BD;
margin-bottom: 1.0em;
text-align:left;
}
ul.linklist
{
list-style: none;
}
ul.linklist li
{
line-height: 2.0em;
}
#outer
{
z-index: 2;
position: relative;
/*
The width value below controls the overall width of the design. By default it's set to 82%
(so it'll take up 82% of the browser window's width). You can set it to a different percentage
value (70%, 90%, etc.) or even a pixel value (760px, 800px, etc.) to enforce a fixed width.
*/
width: 775px;
border: solid 4px #9F9030;
background-color: #fff;
margin: 0 auto;
}
/*
Took this out: url(images/topbg.gif) repeat-x and put in a black background,
#080808. We did that so the black would stand out against our header image.
Also the hight was 9em. We made it 7 to save a little space.
*/
#header
{
position: relative;
width: 100%;
height: 7em;
background: #080808;
margin-bottom: 2px;
}
#headercontent
{
position: absolute;
bottom: 0em;
padding: 0em 2.0em 1.3em 2.0em;
}
#headercontent h1
{
font-weight: normal;
font-size: 2.5em;
}
#headercontent h1 a:link, #headercontent h1 a:visited
{
color:#9F9030;
text-decoration:none;
border:none;
}
#headercontent h1 a:hover, #headercontent h1 a:active
{
text-decoration:none;
color:#fff;
border:none;
}
#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}
/*
Had to move this closer to the top, because the header was made shallower.
Fritz, this is a good example of absolute positioning. The searchbox
is positioned in relation to it's container. For example, top:3m; means
put me 3m down from the top. And if the search box were not positioned
properly, it would look like hell. Compare your site with hers to see
how I made that header block shallower. And darker, by the way. Makes
her title stand out just a bit more.
Was top:6.5em;
*/
#search
{
position: absolute;
top: 3em;
right: 2.0em;
padding-right: 0.0em;
color:#aaa;
}
#search input.text
{
margin-right: 0.5em;
vertical-align: middle;
border: solid 1px #f0f0f0;
padding: 0.1em;
width: 10.0em;
background:#fff url(images/button_bg.gif) repeat-x top;
}
#search input.submit
{
background: #8f4008;
border: solid 1px #9F9030;
font-weight: bold;
padding: 0.25em;
font-size: 0.8em;
color: #F2F3DE;
vertical-align: middle;
}
/*
blayney_92.jpg is the header picture trimmed and sized in Picasa.
It's 177 X 1024. Of course, that was previously the fall park bench scene.
Was: height: 160px; Is now: height: 120px;
*/
#headerpic
{
position: relative;
height: 160px;
background: #fff url(images/blayney_92.jpg) repeat-x top left;
margin-bottom: 2px;
}
/*
Took this out: url(images/menubg.gif) repeat-x top left.
#466313 is the green navigation menu block.
*/
#menu
{
position: relative;
background: #466313;
height: 3.5em;
padding: 0 1.0em;
margin: 0 0 2px;
}
#menu ul
{
padding:1em 0 0 0;
margin:0;
}
#menu ul li
{
position: relative;
display: inline;
padding:0;
margin:0;
}
#menu ul li a:link, #menu ul li a:visited
{
color: #fff;
padding: 0.5em 1.0em 0.9em 1.0em;
text-decoration: none;
border:none;
}
/*
Added: #menu ul li.current-cat a down below.
*/
#menu ul li a:hover, #menu ul li a:active, #menu ul li.current_page_item a, #menu ul li.current-cat a
{
background: #7F8400 url(images/menuactive.gif) repeat-x top left;
border:none;
}
#menubottom
{
background: #fff url(images/border1.gif) repeat-x;
height: 14px;
margin-bottom: 1.5em;
}
/*
Was 2.0em left and right. Made it 3.0em. For shorter text lines.
*/
#content
{
padding: 0 3.0em 0 3.0em;
}
/*
Was: margin-right: -18.0em;
This fix was related to getting rid of the sidebar.
I still don't know why it was a negative margin.
*/
#primarycontainer
{
float: left;
margin-right: 0;
width: 100%;
}
/*
Below is where we did the fix to get rid of the sidebar. Was 1.5em 22em 0 0;
Notice how we document what it was in case something unexpected happens and
we need to put it back.
*/
#primarycontent
{
margin: 1.5em 0 0 0;
}
#sidebar
{
margin: 0;
float: right;
width: 18.0em;
}
#sidebar ul
{
list-style:none;
margin:0.5em 0 0;
}
#sidebar li
{
margin:1em 0;
padding:0.5em;
}
#sidebar li li
{
margin:0;
padding:0.5em;
background:none;
}
#sidebar li li li
{
margin:0;
padding:0.5em 0 0 1em;
}
#sidebar ul.feeds li
{
background:url(images/feed.png) no-repeat left center;
margin:1em 0;
padding:0 1.5em;
}
#footer
{
position: relative;
height: 4.8em;
clear: both;
padding-top: 4.0em;
background: #fff url(images/border2.gif) repeat-x 0 2.5em;
font-size: 0.86em;
}
#footer .left
{
position: absolute;
left: 2em;
}
#footer .right
{
position: absolute;
right: 2.0em;
}
/*comments and their styles*/
#comments, #respond{
margin: 2em 0 0 5px;
}
#commentform
{
margin:10px;
padding:10px;
}
#outer .commentlist {
margin: 0;
padding: 0;
}
.commentlist li
{
list-style:none;
margin: 2em 0;
padding: 0.5em;
border-bottom:#ddd 1px dashed;
background:#fcfcfc url(images/border2.gif) repeat-x top;
}
.commentlist li .cmtinfo
{
font-family:Trebuchet MS,Verdana, Tahoma, Serif;
font-size:0.9em;
padding:5px;
margin-bottom: 10px;
position:relative;
}
.commentlist li .cmtinfo em
{
margin:0;
padding:0 1em;
text-align:right;
font-style:normal;
color:#999;
}
.commentlist li cite
{
font-style:normal;
font-weight:bold;
}
.commentlist li.alt
{
background:#fcfcf9 url(images/border2.gif) repeat-x top;
}
textarea{
width: 90%;
padding:5px;
height: 20em;
border: 1px solid #ccc;
background:#f9f9f9 url(images/button_bg.gif) repeat-x top;
font:1em Verdana, Arial, Serif;
}
#outer input.text
{
background:#f9f9f9 url(images/button_bg.gif) repeat-x top;
border:#ccc 1px solid;
padding:2px;
font:1em Verdana, Arial, Serif;
}
.post h5 em
{
font-style:normal;
float:right;
font-weight:normal;
}
#header, #content, #sidebar, #footer, .widget {
overflow: hidden;
}
/*
These last three styles were necessary in order to make the event table look nice.
And even though it's supposed to be bad form to use tables for positioning, still
I had to use one to get the look that I wanted. Oh well...
*/
table
{
border: 2px solid gray;
}
table td
{
padding: 1em;
text-indent: 0;
}
.post table td p
{
line-height: 1.3em;
text-indent: 0;
}