/*
THEME NAME: Trusted Waters
THEME URI: http://davidtcarson.com/
DESCRIPTION: a customization built on the Sandbox Theme
VERSION: 1.6.1
AUTHOR: David Carson & Julien Fillion
AUTHOR URI:
*/
/* Two-column with sidebar on left from the /examples/ folder */
@import url('examples/2c-l.css');
/* Let's start by defining the width of the content column, then overriding the left margin carried over from the css import above. */
div#content {
width: 580px;
margin:0 0 0 443px;
}
/* Not sure what to do with the footer, but this keeps it consistent for now. And let's hide it until we have a purpose for it. */
div#footer {
width: 580px;
margin:0 0 0 443px;
display: none;
}
/* Here's a little trick to allow us to sneak in a sidebar */
div#container {
margin:0 0 0 -443px;
}
/* We won't need the default horizontal menu across the top or that pesty access link */
div#menu, div#access {
display: none;
}
/* A nice background image never hurt anyone */
body {
background: #FFFFFF url('images/bg.jpg') no-repeat fixed top left;
position:absolute;
font-family:"lucida grande", "lucida sans unicode", geneva, arial, sans-serif;
}
/* We need about a 157 pixels of "white-space" above the fold. You'll see why in the very next declaration. */
div#wrapper {
margin-top:157px;
}
/* This is experimental. I haven't tested it across browsers. But this should give us a fixed header image that will act as a "cover" when the main content is scrolled. */
div#topper { height: 157px; position:fixed; margin: 0; left:0; top: 0; display: block; background: url('images/bg-top.jpg') no-repeat top left; width: 100%; }
div#socialfiller { position: absolute; left: 440px; top: 115px; }
div#socialfiller ul { padding: 0 10px; width: 100%; }
div#socialfiller ul li { float: left; display: block; margin: 0 10px; width: 87px; height: 19px; position: relative; }
div#socialfiller ul li.youtube {width: 67px; }
div#socialfiller ul li a { width: 87px; height: 19px; }
div#socialfiller ul li a#facebook { background: url('images/facebook.png') no-repeat top left; position: relative; padding: 0 5px; position: absolute; text-indent: -9999px; }
div#socialfiller ul li a#facebook:hover { background: url('images/facebook-hover.png') no-repeat top left; }
div#socialfiller ul li a#twitter { background: url('images/twitter.png') no-repeat top left; position: relative; padding: 0 5px; position: absolute; text-indent: -9999px; }
div#socialfiller ul li a#twitter:hover { background: url('images/twitter-hover.png') no-repeat top left; }
div#socialfiller ul li a#youtube { background: url('images/youtube.png') no-repeat top left; position: relative; padding: 0 5px; position: absolute; text-indent: -9999px; width: 67px; }
div#socialfiller ul li a#youtube:hover { background: url('images/youtube-hover.png') no-repeat top left; }
div#socialfiller ul li a#vimeo { background: url('images/vimeo.png') no-repeat top left; position: relative; padding: 0 5px; position: absolute; text-indent: -9999px; }
div#socialfiller ul li a#vimeo:hover { background: url('images/vimeo-hover.png') no-repeat top left; }
div#socialfiller ul li a#rss { background: url('images/rss.png') no-repeat top left; position: relative; padding: 0 5px; position: absolute; text-indent: -9999px; }
div#socialfiller ul li a#rss:hover { background: url('images/rss-hover.png') no-repeat top left; }
/* Define a width for the header, push it over to the left and we'll need to z-index it to be above the negative margin of the #container defined earlier */
div#header {
width: 430px;
float: left;
position:fixed;
top:90px;
z-index:10;
}
/* Replace the site title with a nice logo. And we're using a CSS trick to push the original text off screen but maintain the text for search engines and handicapped folks */
h1#blog-title span a {
width: 430px;
height: 130px;
background: url('images/logo.png') no-repeat top left;
text-indent: -9999px;
display: block;
}
/* We're not showing the description, but you should enter one - go to your "Settings" page from your blog dashboard */
div#blog-description {display: none; }
/* This will put the vertical widget-ready vertical menus in the right spot */
div.sidebar {
margin-left: 240px;
text-align:right;
font-family:"lucida grande", arial, "lucida sans unicode", geneva, sans-serif;
}
div.sidebar ul li ul li {margin: 0; padding: 0; line-height: 13px; }
div.sidebar h3 {font-size: 12px; color: #b84b63; text-transform: lowercase; margin-bottom: 0; }
div.sidebar a {color: #000000; text-decoration: none; font-size: 12px; text-transform: uppercase; font-weight: bold; }
div.sidebar a:hover {color: #b84b63; text-decoration: none; }
div.sidebar ul {padding: 0; }
/* Get rid of default discs for list and their items */
ul {list-style-type: none; }
div#primary {margin-top: 120px;position: fixed; }
div.textwidget ul#links a {text-transform: lowercase; }
div#secondary {display: none; }
div.sidebar ul li#text-3 a {font-weight: normal; }
div.entry-content p {font-size: 12px; }
div.entry-meta {display: none; }
div#comments {display: none; }
div.navigation {display: none; }
div.entry-date {background: url('images/bg-date.png') no-repeat top left; height: 50px; width: 130px; padding-top: 16px; padding-left: 22px; letter-spacing: -1px;}
div.entry-date .published {font-size: 14px; font-weight: bold; color: #8f9693; border-bottom: 0;margin: 0;}
body.home h2.entry-title, body.category h3.entry-title {width: 440px; float: right; margin-top: 5px; margin-bottom: 0; }
div#content div.post {margin: 10px 0 20px; padding-bottom: 20px; background: url('http://www.trustedwatersmusic.com/pics/line.png') no-repeat bottom center; }
h2.entry-title, h2.entry-title a {color: #003884; text-decoration: none; font-family: helvetica, arial, sans-serif; font-size: 20px; }
a {color: #003884; text-decoration: none; }
.tagline {width: 440px; float: right; margin-top: 0;color: #000; text-decoration: none; font-family: arial, sans-serif; font-weight: bold; font-size: 14px; letter-spacing: -1px; }
body.single .tagline {width: 580px; }
h4 {margin-bottom: 0; }
h5 {margin-top: 0; }
/* FlickrRSS */
.entry-content a img {border: 5px solid #eeeeee; margin: 14px;height: 75px; width: 75px; overflow: hidden; }
.entry-content a img:hover {border: 5px solid #c8e8f9; }