/*  
Theme Name: The Daily Jim Template
Theme URI: http://www.thedailyjim.com/
Description: The TJD Theme
Version: 1.0
Author: Jeff Drury
Author URI: http://www.jeffdrury.com/

*/

* {
margin: 0;
padding: 0;
}

body {
font: 12px/18px Georgia, "Times New Roman", Times, serif;
color: #000;
background: #fff url(images/bg-body.jpg) repeat-y center center;
text-shadow: 1px 1px 0 #ffffff;
}

a {
color: #ff0000;
}

h1 {
font: 36px/48px helvetica,arial,sans-serif;
text-transform: uppercase;
letter-spacing: .03125em;
font-weight: bold;
margin-top: 10px;
margin-bottom: 10px;
}

h2 {
font: 16px/20px Georgia, "Times New Roman", Times, serif;
}

h3 {
font: 18px/20px Georgia, "Times New Roman", Times, serif;
margin-top: 7px;
margin-bottom: 12px;
}

p {
margin-bottom: 20px;
}


/* masthead */

#masthead {
position: relative;
width: 1000px;
height: 430px;
margin: 0 auto;
background: transparent url(images/bg-masthead.jpg) no-repeat top left;
}

a#masthead-link {
position: absolute;
display: block;
width: 420px;
height: 150px;
top: 100px;
left: 280px;
text-decoration: none;
text-indent: -9999px;
background: transparent url(images/bg-masthead-link.png) no-repeat top left;
outline: 0;
}

a:hover#masthead-link {
background-position: bottom left;
}

p#slogan {
position: absolute;
width: 540px;
height: 30px;
line-height: 30px;
top: 320px;
left: 40px;
text-transform: uppercase;
color: #666;
}

p#thedate {
position: absolute;
width: 300px;
height: 30px;
line-height: 30px;
top: 320px;
left: 660px;
text-transform: uppercase;
text-align: right;
font-family: arial, verdana, sans-serif;
color: #666;
}


/* main column divisions */


#wrapper {
position: relative;
width: 1000px;
margin: 0 auto;
background: transparent url(images/bg-wrapper.jpg) no-repeat bottom left;
}

#content {
position: relative;
width: 1000px;
margin: -63px auto 140px auto;
background: transparent url(images/bg-content.gif) repeat-y top left;
}

#content-wide {
position: relative;
width: 1000px;
margin: -63px auto 140px auto;
}

#main {
float: left;
width: 440px;
margin-left: 40px;
margin-right: 20px;
}

#main p.intro {
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
}

#side1 {
float: left;
width: 200px;
margin-right: 20px;
margin-left: 20px;
}

#side2 {
float: left;
width: 200px;
margin-right: 40px;
margin-left: 20px;
}

#footer {
position: relative;
width: 1000px;
height: 800px;
margin: 0 auto;
}


/* recent posts */

#recentposts {
color: #333;
}

#recentposts h2 {
padding-top: 10px;
border-top: 5px solid #ccc;
}

#recentposts h3 a {
color: #333;
}

#recentposts h3 a:hover {
color: #000;
}

#recentposts ul {
margin: 1em 1em 1.5em 1em;
}


/* dailies */

#dailies {
text-align: center;
font-size: 14px;
}

#dailies p {
margin-bottom: 12px;
}

#dailies h2 {
margin-bottom: 12px;
margin-top: -2px;
background: transparent url(images/bg-side2-cap.png) no-repeat top left;
padding-top: 61px;
text-transform: uppercase;
color: #ff0000;
}


/* gentleman */

#gentleman {
background: transparent url(images/bg-gentleman.png) no-repeat center center;
text-align: center;
font-size: 14px;
}

#gentleman h2 {
margin-bottom: 12px;
margin-top: -2px;
background: transparent url(images/bg-side2-cap.png) no-repeat top left;
padding-top: 61px;
text-transform: uppercase;
color: #ff0000;
}

#gentleman ul {
list-style-type: none;
padding-bottom: 61px;
background: transparent url(images/bg-side2-cap.png) no-repeat bottom left;
}

#gentleman ul li {
margin-bottom: 16px;
}


/* zombies */

#zombies {
position: absolute;
top: 10px;
left: 20px;
width: 960px;
height: 430px;
margin: 0 auto;
color: #fff;
text-shadow: 1px 1px 0 #333;
}

#zombies h2 {
width: 580px;
height: 60px;
text-indent: -9999px;
background: transparent url(images/bg-zombies.png) no-repeat top left;
margin-left: 20px;
}

#zombies ul {
list-style-type: none;
}

#zombies ul li {
float: left;
width: 140px;
margin: 0 20px;
}

#zombies h3 a {
color: #ccc;
}

#zombies h3 a:hover {
color: #fff;
}


/* colophon */

#colophon {
position: absolute;
bottom: 110px;
left: 240px;
width: 520px;
height: 160px;
margin: 0 auto;
text-align: center;
}

#colophon h2 {
padding-top: 24px;
margin-bottom: 12px;
}


/* social links */

#social-links {
position: absolute;
bottom: 0;
left: 390px;
width: 220px;
height: 130px;
margin: 20px auto 0 auto;
background: transparent url(images/bg-colophon.png) no-repeat top center;
}

#social-links ul {
list-style-type: none;
padding-top: 70px;
}

#social-links ul li {
display: inline;
}

li#social-facebook a,
li#social-flickr a,
li#social-lastfm a,
li#social-rss a,
li#social-twitter a {
display: block;
float: left;
width: 32px;
height: 32px;
margin-right: 10px;
text-decoration: none;
text-indent: -9999px;
outline: 0;
}

li#social-facebook a {
background: transparent url(images/bg-social-facebook.png) no-repeat top left;
}

li#social-flickr a {
background: transparent url(images/bg-social-flickr.png) no-repeat top left;
}

li#social-lastfm a {
background: transparent url(images/bg-social-lastfm.png) no-repeat top left;
}

li#social-rss a {
background: transparent url(images/bg-social-rss.png) no-repeat top left;
}

li#social-twitter a {
background: transparent url(images/bg-social-twitter.png) no-repeat top left;
}

li#social-facebook a:hover,
li#social-flickr a:hover,
li#social-lastfm a:hover,
li#social-rss a:hover,
li#social-twitter a:hover {
background-position: bottom left;
}


/* carousel */

.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 720px;
padding: 0;
margin: 20px 0 0 20px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width:  720px;
height: 300px;
}

.jcarousel-skin-tango .jcarousel-item {
width: 180px;
height: 300px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
background: #fff;
color: #000;
}


/* carousel buttons */

.jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
top: 100px;
right: -30px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(images/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
top: 100px;
left: -30px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(images/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}


/* this <div> element is wrapped by jCarousel around the list and has the classname "jcarousel-container". */

.jcarousel-container {
position: relative;
}

.jcarousel-clip {
z-index: 2;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
}

.jcarousel-list {
z-index: 1;
overflow: hidden;
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
float: left;
list-style: none;
/* We set the width/height explicitly. No width/height causes infinite loops. */
width: 180px;
height: 300px;
}


/* the buttons are added dynamically by jCarousel before the <ul> list (inside the <div> described above) */

.jcarousel-next {
z-index: 3;
display: none;
}

.jcarousel-prev {
z-index: 3;
display: none;
}


/* helpers */

.metadata {
margin-top: 20px;
border-top: 1px solid #ccc;
padding-top: 10px;
color: #666;
}

.clr {
clear: both;
}

textarea#comment {
width: 400px;
}

#aus {
width: 160px;
margin: 0 auto;
}

/* archive display */

div.post {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}

/* sign up box */

#signupbox {
position: relative;
width: 1000px;
height: 30px;
margin: 0 auto;
padding: 0;
background-color: #000;
text-shadow: none;
}

#signupbox form {
float: right;
width: 400px;
height: 30px;
}

#signupbox p#sub-text {
float: left;
margin: 0 0 0 20px;
pading: 0;
text-transform: uppercase;
font: normal 10px/30px helvetica, arial, sans-serif;
color: #fff;
}

#sub-enter {
float: left;
height: 16px;
margin: 5px 0 0 10px;
padding: 2px 4px;
border: 0;
}

#sub-submit {
float: left;
height: 20px;
margin: 5px 0 0 5px;
padding: 0 5px;
border: 0;
font: normal 10px/20px helvetica, arial, sans-serif;
text-transform: uppercase;
background-color: #333;
color: #999;
}