@charset "UTF-8";
@import url(style/css/reset.css);

/*
@import url(style/css/sifr.css);
@import "style/css/typography.css";
@import "style/css/layout.css";
*/

/*
Theme Name: Punk ass blues
Theme URI: http://www.alabamalovesnakes.com
Description: Custom theme for The Alabama Lovesnakes.
Version: 1.0
Author: Satto Productions
Author URI: http://www.satto.se/
Tags: custom header, fixed width
*/

/* COLOURS
Rubrik	 	#dd462d
BRÖDTEXT 	#1a1a1a
Background	#f8f8f8
*/

.wordtubear {float: right; margin-right: 40px;}

a {color: #1a1a1a; text-decoration: none;}

a:hover {text-decoration: underline;}

strong {font-weight: bold;}

p {margin:0 0 20px 0;}

h3 {font-size: 20px; margin: 2px 0 22px 0}

em {font-style:  italic;}

hr {color: #1a1a1a; height: 1px; background: #1a1a1a;}

p.oldernewer a {
	font-size: 14px;
	margin: 0 0 0 95px;
	width: 49%}

.postmetadata {font-size: 12px; text-align: right;}

p.postmetadata a {text-decoration: none;}

p.redigera a {text-decoration: none;}

body {
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 20px;
	background: #f8f8f8 /*url(img/grid.png) top center repeat-y*/;
	color: #1a1a1a;
}

#wrapper {
	position: relative;
	margin: 0 auto;
	width: 970px;
	height: auto;
	background: transparent;
	text-align: left;
}

#branding {
	margin: 55px auto 0 auto;
	width: 715px;
	height: 81px;
	text-indent: -9999px;
	background: transparent url(img/alabamalovesnakes.png)
}

#branding h1 a {
	height:81px;
	width: 715px;
	display: block;
}

#headcontent {
	position: relative;
	width:960px;
	height: 480px;
	background: transparent url(img/HeaderContent.png) 54% 100% no-repeat;
}

#spotifyplaylist {
	position: absolute;
	top: -60px;
	right: 16px;
	width: 60px;
	height: 32px;
	text-indent: -9999px;
	background: transparent url(img/spotify.png) top left no-repeat;	
}

#spotifyplaylist a {
	height: 32px;
	width: 60px;
	display: block;
}

#spotifyplaylist:hover {
	background: transparent url(img/spotify.png) bottom left no-repeat;	
}

.space {margin-bottom: 80px;}

/*#readmore {visibility: hidden;}*/

.entrycontent, .singelpost {
	width: 940px;
	float: left;
	margin: 0 0 40px 15px;
	clear: both;
}

.entrycontent h2, .singelpost h2 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 22px;
	line-height: 26px;
	color: #dd462d;
	padding-top: 15px;
	margin: 0 600px 18px 80px;
	width: 40.9%;
	float: left;
}

.singelpost h2 {margin-bottom: 0px;}

.entrycontent h2 a, .singelpost h2 a {color: #dd462d;}
.entrycontent h2 a:hover, .singelpost h2 a:hover {text-decoration: none;}

em.infodate {
	font-style:  italic;
	font-size: 12px;
	margin: 0 0 0 80px;
	}

.text {
	width: 380px;
	float: left;
	margin-right: 20px;
	overflow: hidden;
}

.text a {text-decoration: underline;}
.text a:hover {color: #666; text-decoration: none;}

.text_page {
	width: 780px;
	min-height: 300px;
	margin-left: 80px;
	float: left;
}

#flashplayer {
	color: #f8f8f8;
	position: absolute;
	top: 291px;
	left: 175px;
	width: 295px;
	height: 181px;
	background: #202020;
}
#flashplayer a { color: #f8f8f8;}

.imgwrapper {
	float: left;
	width: 380px;
	min-height: 227px;
	margin: 5px 0 10px 0;
	background: #202020 url(img/wrapperbg.png) 50% 50% no-repeat;
	overflow: hidden;
}

.imgwrapper img {border: none; margin: 0; padding; 0;}

 /*IMG*/
.alignleft, img.alignleft {float:left; padding-right: 10px;}
.alignright, img.alignright {float:right; padding-left: 10px;}
.aligncenter, img.aligncenter {margin-left:auto; margin-right:auto; display: block;clear: both;}

/*WORPRESS DEFAULT IMG
.entry-content img {margin: 0 0 18px 0; max-width:100%;}
.wp-caption {text-align: center; margin-bottom:18px;}
.wp-caption img {margin: 0; padding: 0; border: 0 none;}
.wp-caption p.wp-caption-text {margin: 0; padding:5px;}
.gallery img {margin:0;}*/
.wp-smiley { /* Prevent the smileys from breaking line-height */
	max-height:12px;
	margin:0 !important;
}


/*PREV O NEXT NAVIGATION */
div.navigation a {
	float: left;
	width: 380px;
	height: 20px;
	color: #f8f8f8;
	padding: 4px 0 6px 0;
	text-align: center;
	margin-left: 95px;
}
div.navigation a:hover {color: #dd462d; text-decoration: none;}
div.navigation .entriesalignleft a, div.navigation .entriesalignright a {
	float: left;
	width: 140px;
	height: 30px;
	padding: 5px 0;
	background: transparent url(img/btn_entries.png) top left no-repeat;
	}

#siteinfo {
	float: left;
	width: 970px;
	margin: 40px 0 40px 15px;
	font-size: 14px;
}

#siteinfo a {color: #1a1a1a; text-decoration: none;}
#siteinfo a:hover {color: #dd624d; text-decoration: none;}

#siteinfo h3 {font-size: 20px;color: #dd462d; margin-bottom: -5px;}

#siteinfo p, #siteinfo ul {margin-top: 10px; margin-bottom: 0px; line-height: 16px;}

#siteinfo div.columns {
	float: left;
	margin-right: 20px;
	width: 220px;
	position: relative;
}


/* TWITTER */

div.inside {
	padding-top: 6px;
	margin-top: 10px;
	background: transparent url(img/bubbla_top.png) top left no-repeat;
}

div.twittbotten {background: transparent url(img/bubbla_bottom.png) bottom left no-repeat;}

div.twitterfollow {
	position: absolute;
	top: -20px;
	right: -10px;
}

.tweet {
	width: 210px;
	padding: 0px 10px 5px 10px;
	background: transparent;
}

.tweet p a {
	display: block;
	margin-bottom: 0px;
	padding: 10px 10px 10px 5px;
}

.tweet p a:hover {
	color: #dd462d;
	text-decoration: none;
}

.last {margin-right: -20px;}

.rss, .twitter, .facebook, .flickr {padding: 5px 0 5px 28px;}
.rss {background: url(img/feed-24x24.png) no-repeat 0% 50%;}
.twitter {background: url(img/Twitter-24x24.png) no-repeat 0% 50%;}
.facebook {background: url(img/FaceBook-24x24.png) no-repeat 0% 50%;}
.flickr {background: transparent url(img/Flickr-24x24.png) no-repeat 0% 50%;}

.copy {width: 940px; float: left; margin-top: 10px; padding: 5px; text-align: center;}
.copy a:hover {text-decoration: none; color: #dd462d;}

.moretext {color: #dd462d;}

.clear {clear:both}

/* BLOG COMMENTS */

#comment_respond {
	float: left;
	width: 940px;
	height: 50px;
	margin: 0 0 20px 15px;
	border-top: 1px solid #1a1a1a;
}

/* REPLAY TAB */
.tabreplay {
	position: relative;
	top: 0px;
	display: block;
	width: 60px;
	text-align: center;
	float: left;
	margin: 0 20px 0 0;
	padding: 10px 0 5px 0;
	background: #424242 url(img/tab_bg.gif) repeat-x;
	color: #f8f8f8;
	font-family: helvetica, arial, sans-serif;
	line-height: 1.0;
}
.tabreplay  .date {
	color: #f2f2f2;
	font-size: 16px;
	text-transform: uppercase;
	display: block;
	padding: 0 0 2px 0;
	font-weight: bold;
	letter-spacing: -0.05em;
}
.tabreplay  .month {
	color: #e7e7e7;
	text-transform: uppercase;
	display: block;
	padding: 0 0 2px 0;
	font-size: 18px;
	font-weight: bold;
}
.tabreplay  .year {
	display: block;
	padding: 0 0 5px 0;
	color: #e7e7e7;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: -0.05em;
}

h3.respond {margin: 20px 0 0 0;}

h3.respond em {
	font-style:  italic;
	font-size: 14px;
	margin: 0px 0 0 0px;
}

.commentlist {margin: 20px 80px 40px 95px;}
.commentlist li {position: relative; width: 757px; padding: 10px; border: 1px solid #ccc;}
.commentlist cite {font-weight: bold;}
	
h2#comments {color: #dd462d; font-size: 24px; margin: 20px 0 0 95px;}

h2#comments span {color: #1a1a1a; padding-left: 30px;}
	
.alt {background: #ededed; margin-bottom: 10px;}

/* FORMS LAYOUT */

form {margin-left: 95px;}

div.info {float: left; margin-right: 50px;}

div.message {float: left; margin-bottom: 10px; display: inline;}

input, textarea {
	padding: 5px;
	background-color: #f8f8f8;
	border: 1px solid #1a1a1a;
	font-size: 14px;
	font-family: Helvetica, Arial, sans-serif;
	}

input {margin: 5px 15px 5px 0; width: 208px;}

textarea {width: 290px; margin: 0 0 10px 0;}

.submitcomment {background: #f8f8f8; cursor: pointer; margin-left: 0; width: 140px; font-family: Helvetica, Arial, sans-serif; padding-top: 8px;}
.submitcomment:hover {color: #dd462d; background: #424242 url(img/btn_bg.gif) 50% 70%;}
	
.allowedtags {
	font-size: 10px;
	width: 370px;
	line-height: 12px;
	margin-top: 10px;
}
	

/* DATE TAB */

.tab, .tabcomments {
	position: relative;
	top: 3px;
	display: block;
	width: 60px;
	text-align: center;
	float: left;
	margin: 0 20px 0 0;
	padding: 7px 0 5px 0;
	background: #424242 url(img/tab_bg.gif) repeat-x;
	color: #f8f8f8;
	font-family: helvetica, arial, sans-serif;
	line-height: 1.0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

.tabcomments {position: absolute; top: 0; left: -80px;}

.tab .date, .tabcomments .date {
	color: #f8f8f8;
	font-size: 35px;
	display: block;
	font-weight: bold;
}
.tab .month, .tabcomments .month {
	color: #f8f8f8;
	text-transform: uppercase;
	display: block;
	padding: 0 0 1px 0;
	font-size: 11px;
}
.tab .year, .tabcomments .year {
	display: block;
	border-top: 1px solid #a6a6a6;
	padding: 3px 0 0 0;
	color: #f8f8f8;
	font-size: 11px;
}

.tab a, .tabcomments a {color: #f8f8f8;}
.tab a:hover, .tabcomments a:hover {text-decoration: none;}

/* KNAPPAR */

.btn {
	width: 875px;
	height: 60px;
	float: left;
	text-align: right;
}

button.submitcomment {margin: 5px 15px 0 0;}

button.hidden {visibility: hidden}

button.readmore, button.totop {
		width: 154px;
		height: 60px;
		border: 0;
		cursor: pointer;
		background: transparent url(img/btn_readmore.png) 100% 0% no-repeat;	
		font: 135% helvetica, arial, sans-serif;
		color: #fff;
	}
	
button.totop {background: transparent url(img/btn_backtotop.png) 100% 0% no-repeat;}
button:hover.totop {background: transparent url(img/btn_backtotop.png) 0% 100% no-repeat;;}

button:hover.readmore {background: transparent url(img/btn_readmore.png) 0 100% no-repeat;}