/* custom.css � custom styles for Cutline that YOU define ------------------------------------------------------ This stylesheet will allow you to futureproof your changes against future releases and upgrades. I know you work hard on your modified styles, and I don't want you to feel like every upgrade is a total drag! Instructions: Modifying existing Cutline styles to your liking is a breeze with this handy stylesheet. The tag within the header.php file has been appended with a CSS class called "custom," and thanks to this, you now have the ability to override ANY style that's declared in the original Cutline stylesheet. In practice, you simply need to copy the CSS for the element that you want to change (from style.css) and then paste it here. Prefix the new CSS declaration with .custom, and then make your tweaks as necessary. Here's an example: To change the default color of unvisited links from blue to red (#c00) and remove the default underline, this is what you would do: .custom a { color: #c00; text-decoration: none; } Cool? Now get to hackin! */ /* add page background image */ body { background: #fff url('images/bk_bk7.jpg'); background-attachment: fixed; color: #333; font: 62.5% Verdana, Tahoma, Arial, sans-serif; text-align: center; } /*---:[ global elements ]:---*/ /* smaller font size */ p.unstyled { font-size: 1.3em; } /*---:[ headlines ]:---*/ h1, h2, h3 { font-weight: bold; font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif; color: #000; } h2 { font-size: 1.4em; } h4 { font: 1.2em Verdana, Tahoma, Arial, sans-serif; color: #888; } /*---:[ core layout elements ]:---*/ /* sticks white background to top so no page background shows */ #container { width: 700px; margin: 0 auto 0 auto; } /* white background color + background image behind posts and sidebar */ #content_box { width: 700px; background: #fff url('images/bk_content9a.gif') no-repeat; text-align: left; float: left; clear: both; } /* 30 px padding at top of content - makes up for 3.0 em margin removed (used 30 px in stead of 3.0 em so at larger text sizes it can't drop down and make sidebar image look unalinged 20 px of padding on left and right so text isn't squished up against page background content and sidebar width adjusted to allow for padding */ #content { width: 410px; padding: 30px 40px 0 20px; float: left; } #sidebar { width: 210px; padding: 30px 20px 0 0; float: left; } /* white background for footer + 20px padding right and left */ #footer { width: 660px; background: #fff; padding: 1.2em 20px 0 20px; border-top: 2px solid #ccc; float: left; clear: both; } /*---:[ header styles ]:---*/ /* white background + image for masthead */ #masthead { width: 700px; height: 100px; background: #fff url('images/bk_logo3.gif') no-repeat; } #masthead a { display: block; width: 770px; height: 100px; } /* eeeed1 background color + background image for nav area */ ul#nav { list-style: none; width: 660px; height: 40px; padding: 0 20px 0 20px; background: #eeeed1 url('images/bk_nav.gif') no-repeat; border-bottom: none; float: left; clear: both; } /* change nave to float right - then have to switch "0" and "40px" padding */ ul#nav li { padding: 13px 0 0 40px; font: 1.1em Verdana, Tahoma, Arial, sans-serif; text-transform: uppercase; float: right; } /* removes blank area just below rotating header image area because it's a margin and can't be made white */ #header_img { position: relative; margin: 0; border-bottom: 1px solid #000; background: #fff; float: left; clear: both; } /*---:[ content styles ]:---*/ /* change font size and line height */ .entry { font-size: 1.3em; line-height: 1.55em; } /* change width and font size */ .navigation { width: 410px; font-size: 1.3em; float: left;} .clear { width: 410px; height: 1px; margin: 0 0 5.0em 0; clear: both; } /* change image margins */ .entry img.left { padding: 3px; margin: 0 10px 0 0; border: 3px double #bbb; float: left; clear: left; } .entry img.right { padding: 3px; margin: 0 0 0 10px; border: 3px double #bbb; float: right; clear: right; } .entry img.center { display: block; padding: 3px; margin: 0 auto 1.5em auto; border: 3px double #bbb; float: none; clear: both; } .entry img.border { padding: 3px; margin: 0 auto 1.5em auto; border: 3px double #bbb; float: none; clear: both; } /* images with no borders */ .entry img.leftplain { padding: 3px; border: none; float: left; clear: left; } .entry img.rightplain { padding: 3px; margin: 0 0 0 10px; border: none; float: right; clear: right; } .entry img.centerplain { display: block; padding: 3px; margin: 0 auto 1.5em auto; border: none; float: none; clear: both; } /* float add comment to left rather than right and change left padding from 20px to 0 */ .add_comment { display: block; padding: 0; font-weight: bold; float: left; } /*---:[ sidebar styles ]:---*/ /* reduce width of sidebar dividers */ ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 210px; margin: 0 0 2.5em 0; font-size: 1.3em; line-height: 1.4em; float: left; } /* image in sidebar */ img.right-sidebar { padding: 0; margin: 0.5em 0 0.5em 0.5em; border: none; float: right; clear: right; } /*---:[ footer styles ]:---*/ #footer p { margin: 0 0 0.923em 0; font-size: 1.3em; color: #888; text-align: center; } /*---:[ comment styles ]:---*/ /* reduce width of comments */ #comments { width: 410px; float: left; clear: both; } /* reduce width of comment lists */ ul#comment_list li.comment { width: 410px; padding: 1.2em 0 0 0; border-bottom: 1px dotted #bbb; float: left; } ul#comment_list li.trackback { width: 380px; padding: 1.2em 15px 0 15px; background: url('images/trackback_bg.gif'); } /*---:[ comment form styles ]:---*/ /* reduce width of comment form */ #comment_form { width: 410px; padding: 1.0em 0 0 0; float: left; } /* smaller font sizes */ #comment_form .text_input { width: 191px; padding: 3px; color: #444; font: normal 1.3em Verdana, Tahoma, Arial, sans-serif; border-top: 2px solid #999; border-left: 2px solid #999; border-right: 1px solid #fff; border-bottom: 1px solid #fff; } #comment_form .form_submit { padding: 0.4em 4px; background: url('images/submit_bg.gif'); border: 3px double #999; border-top-color: #ccc; border-left-color: #ccc; font: bold 1.3em Verdana, Tahoma, Arial, sans-serif; cursor: pointer; } #comment_form p.subscribe-to-comments { font-size: 1.3em; } /*---:[ search form styles ]:---*/ /* reduce search form width to fit in sidebar; change font names and sizes */ #search_form .search_input { width: 200px; padding: 3px; color: #090; font: normal 0.9em Verdana, Tahoma, Arial, sans-serif; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; } li.widget .search_input { font-size: 0.9em !important; }