/* custom.css � custom styles for any WordPress theme that YOU define ------------------------------------------------------------------ This stylesheet will allow you to futureproof your CSS changes against future releases and upgrades on ANY WordPress theme. I know you work hard on your modified styles, and I don't want you to feel like every theme upgrade is a total drag! Also, if you're a designer who makes use of GPL themes in your work, you'll find this incredibly handy! You can come up with a set of core modifications for any WordPress theme, and by isolating these mods in a separate stylesheet, you'll be better able to track the changes that you make and their associated effects. Best of all, when the theme's designer releases a new version, you won't have to go back through and make all your changes anew. Plus, this is *definitely* the smartest way to scale out sites if you find yourself using one or two theme frameworks consistently. Instructions: Modifying existing theme styles to your liking is a breeze with this handy stylesheet. In order to turn on the CSS styles that you define here, you'll need to append the tag (usually found within the header.php file) with a CSS class called "custom". Thanks to this, you now have the ability to override ANY style that's declared in the theme's original 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 the tag (let's say you want to make them a cherry red [#c00]) and to remove the default underline, this is what you would do: .custom a { color: #c00; text-decoration: none; } Oh, but remember, none of these changes will work unless you call custom.css from wihtin your header file! Cool? Now get to hackin! */ /* Style Overrides Changes to existing styles from style.css ... all definitions should start with .custom !! */ .custom #masthead { text-indent: 10px; } /* Override text indenting to allow for site logo in front of banner text */ .custom #rotating_image img { display: block; border-top: 5px solid #eee; border-left: 10px solid #eee; border-right: 10px solid #eee; border-bottom: 10px solid #eee; } /* Custom Image display overrides */ .custom p img {padding: 0;} .custom p img[alt="an image"] {float: left; margin: 0 7px 2px 0;} .custom img.alignright {padding: 4px; margin: 0 0 2px 7px; display: inline;} .custom img.alignleft {padding: 4px; margin: 0 7px 2px 0; display: inline;} .custom .center {display: block; margin-left: auto; margin-right: auto;} .custom .alignright {float: right;} .custom .alignleft {float: left;} .custom .images {width: 95%; text-align: center;} .custom .images img {float: left; clear: both; margin: 0 auto;} /* End Images */ .custom .format_text a { text-decoration: underline; } .custom .format_text a:visited { color: #339966; background: none; text-decoration: underline; } .custom .format_text a:hover { text-decoration: underline; } /* New Styles Additions to styles from in the main style.css sheet. Make *sure* any code includes this style sheet */ /* #twocol styles allow the use of a custom 2-column page form added to the neoclassical theme */ #twocol_content_box { width: 865px; padding: 0 10px; background: url('images/2col_content_bg.gif') 205px 0 repeat-y; text-align: left; } #twocol_left_box { width: 865px; float: left; } #twocol_content { width: 663px; padding: 0 1px; float: right; } #twocol_content_inner { width: 645px; padding: 0 9px; } #twocol_content_box:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* page_logo styles allow the positioning of the site logo before the banner text */ #page_logo { width: 75; height: 75; float: left; } #page_logo a { display: block; width: 75px; height: 75px; outline: none; } /* Shop4Scouts styles format link, image and text in the Shop For Scouts pages */ .shop4scouts { display: table; } .shop4row { display: table-row; border: none; } .shop4img { display: table-cell; float: left; width: 25%; vertical-align: top; padding: 10px 0px; } .shop4txt { display: table-cell; width: 70%; text-align: left; vertical-align: top; } /* Suckerfish Menu Structure #suckerfishnav { background:#eee ; font-size:12px; font-weight:bold } #suckerfishnav, #suckerfishnav ul { float:left; list-style:none; line-height:20px; padding:0; border:0px solid #FFFFFF; margin:0 0 0 0; width:100% } #suckerfishnav a { display:block; color:#000000; text-decoration:none; padding:0px 20px } #suckerfishnav li { float:left; padding:0 } #suckerfishnav li ul { position:absolute; left:-999em; height:auto; width:150px; font-weight:normal; margin:0; line-height:1; -moz-opacity:0.80; opacity:0.80; khtml-opacity:0.80 } #suckerfishnav li li { padding-right:1px; width:150px; border-bottom:1px solid #aaa } #suckerfishnav li li a { padding:4px 10px } #suckerfishnav li ul li { font-weight:bold; } #suckerfishnav li ul li a { font-size:12px; color:#ddd } #suckerfishnav li:hover ul li a { color:#ddd } #suckerfishnav li ul ul { margin:-18px 0 0 150px } #suckerfishnav li ul li:hover { background:#eee } #suckerfishnav li ul li:hover a { color:#000000 } #suckerfishnav li ul li:hover li a { color:#ddd } #suckerfishnav li ul li li:hover a { color:#000000 } #suckerfishnav li ul li ul li:hover ul li a { color:#ddd } #suckerfishnav li ul li ul li:hover ul li:hover a { color:#000000 } #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul { left:-999em } #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul { left:auto; background:#444 } #suckerfishnav li:hover, #suckerfishnav li.sfhover { background:#000000 } #suckerfishnav li:hover a, #suckerfishnav li.sfhover a { color:#FFFFFF } */