/*
Theme Name: Patrik Spathon
Theme URI: http://spathon.se
Description: Spathon
Version: 1.0
Author: Patrik Spathon
Author URI: http://patrikspathon.com

Links:    #3C98C9
visited:  #76A7BC

title:    "Century Gothic", "Gill Sans", Arial, sans-serif
body:     Arial, 'Helvetica Neue', Helvetica, sans-serif

*/
/* RESET */
/* ----------------------------------------- */
/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE's blue borders */

/* TYPOGRAPHY */
/* ----------------------------------------- */

/* This helps to identify headings at the initial build stage, so I thought it'd be useful to have it */
h1, h2, h3, h5, h5, h6 { font-weight:bold; text-shadow: 1px 1px 1px #111;} 


/* LAYOUT */
/* ----------------------------------------- */

/* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left; margin:0 10px 10px 0;}
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

/* You might find the following useful */
br.dirtyLittleTrick { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
.hidden{display: none;}


/*===   GENERAL   ===*/

html{background: #111 url(images/lorem.jpg) center top;}
body{
    background: url(images/bg2.jpg) no-repeat center 25px;
    color: #eee;
    font: normal 13px/1.2 Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

a {text-decoration: none; color: #3C98C9; text-shadow: 0 0 2px #3C98C9;}
a:visited {color: #aaa; text-shadow: 0px 0px 1px #999;}
a:hover { /*background: #444; #76A7BC*/ text-shadow: 0 0 2px #222222;}
a:active {outline: 1px dashed #444}

p {padding: 0 0 10px}

h1{font-size: 24px;}
h2{font-size: 20px;}
h3{font-size: 20px;}
h4{font-size: 15px;}

::-moz-selection{ background:#000; color:#49f; }
::selection { background:#000; color:#49f; }


#mainWrapper {width: 900px; margin: 0 auto;}


/*===   Header   ===*/
#header {height: 300px; position: relative;}


/* Logo */
#logo a{position: absolute; top: 210px; left: 20px; color: #333; font: bold 30px "Century Gothic", "Gill Sans", Arial, sans-serif; text-shadow: 0 0 1px #222222;}
#logo a:hover{background: none; color: #111}


/* Nav */
#mainNav {width: 100%; padding: 12px 0; position: relative;}
#mainNav li {float: left; padding: 0px;}
#mainNav li.page_item a{ display: block; color: #fff; text-transform: uppercase; position: relative; z-index: 10;
						font: bold 14px/1.2 Arial, 'Helvetica Neue', Helvetica, sans-serif; padding: 5px 10px; text-shadow: none;}
#mainNav li.current_page_item a, #mainNav li li.current_page_item a, #mainNav li.current_page_ancestor a{
	color: #fff; 
	background: #555; 
	-moz-border-radius: 10px; 
	-khtml-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px;
	text-shadow: 0 0 4px white;
}
#mainNav li.page_item a:hover ,#mainNav li.page_item li.page_item a:hover{ 
	color: #fff; 
	background: #555;  
	-moz-border-radius: 10px; 
	-khtml-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px;
}
#mainNav li.page_item li a:hover{ background: #555; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
#mainNav ul {
	display: none; 
	position: absolute; 
	background: #222;
	-moz-border-radius: 10px; 
	-khtml-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px;
}
#mainNav ul li{display: block; float: none}
#mainNav li:hover ul{display: block;}

#mainNav li.back {
	background: #555;
	-moz-border-radius: 10px; 
	-khtml-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px;
	height:27px;
	position:absolute;
	width:1px;
	z-index:1;
}


/* Soek */
#topSok {position: absolute; right: 0px; top: 13px; width: 165px; height: 25px;}
#topSok .topS {background: none; border: none; color: #333; width: 140px; position: absolute; top: 4px; left: 0px;}
#topSok .topS:focus, #topSok form:hover .topS {color: #FFFFFF;}
#topSok .topSkicka {background: url(images/all.png) no-repeat 0px -74px; border: none; color: #333; width: 25px; height: 24px; 
                    cursor: pointer; position: absolute; top: 0px; right: 0px;}
#topSok form:hover .topSkicka, #topSok form .topS:hover .topSkicka {background: url(images/all.png) no-repeat 0px -49px;}


/*===   Content   ===*/
#content {
    width: 580px; 
    background: #333;
    border: 2px solid #111; 
    float: left; 
    min-height: 450px;
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px;
}

/* post-title */
.post-title{position: relative;}
.post-title h2 {display: block; width: 489px; font-size: 24px; padding: 0 0 5px;}
.post-title h2 a{display: block;}
.post-title h2 a:hover{background: none; color: #fff; text-shadow: 0 0 2px #ffffff}
.post-title .speech {position: absolute; top: 5px; right: 0px;}
.post-title .speech a{
    display: block;
    width: 41px;
    height: 30px;
    text-align: center;
    font: 12px/24px Arial; 
    background: url(images/all.png) no-repeat 0px -151px;
    text-shadow: 0 0 0px #222222;
}
.post-title .speech a:hover{background-position: 0px -106px}
.post-title .post-date{padding: 3px 0 10px 18px; font-size: 9px; color: #999; background: url(images/all.png) no-repeat; height: 14px;}

#content .post, #content .page{padding: 20px; padding-bottom:70px; margin-bottom: 10px; background: url(images/paddle.png) no-repeat center bottom;}

#content .post h1, #content .post h2, #content .post h3, #content .post h4 {padding: 0 0 10px;}

#content .post img{border: 1px solid #ddd; background: #eee; padding: 4px;}
#content .post a img:hover{opacity: 1.7; border-color: #222; background: #222}
#content .post a img{opacity: 1;}
#content .post .alignnone {margin: 2px 0}

#content .post .wp-smiley { border: none; padding: 0px; background: none;}


.entry ul, .entry ol  {
list-style:disc outside none;
margin:0 0 10px;
padding:0 0 0 20px;
}
.entry li {
list-style: decimal outside none;
margin:0;
padding:0px 0;
}



.navigation{padding: 0 20px 20px;}

/* single & page */
.psEdit {padding: 0 20px;}
.single .post-title h2 {width:540px;}
/*.single .post {padding-bottom: 10px;}*/

/* blog */
.blog .post {padding-bottom:60px; background: url(images/paddle.png) no-repeat center bottom;}
.postmetadata {font-size: 9px; color: #999;}

.n td {padding: 1px 15px 1px 0; vertical-align: top;}

/*===   Sidebar   ===*/
#sidebar {
    width: 290px; 
    padding: 20px 0 0px;
    background: #333; 
    border: 2px solid #111; 
    float: right; 
    margin: 90px 0 0 0;
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px;
}
/* level 1 widget */
#sidebar li {padding: 0 20px 20px;}
#sidebar li li {padding: 0px;}
#sidebar h2 {font-size: 24px; padding: 0 0 4px; border-bottom: 1px dotted #444;}
#sidebar a {display: block; padding: 1px 0; border-bottom: 1px dotted #444}
/* level 2 */
#sidebar li li li a {padding-left: 10px;}
/* level 3 */
#sidebar li li li li a {padding-left: 20px;}

/*===   Footer   ===*/
#footer{width: 900px; margin: 20px auto;color: #555;}
#footer .botten {width: 540px; padding: 0 21px 30px}
#footer a {color: #225E7D; text-shadow:none;}
#footer a:hover {text-shadow: 0 0 2px #000;}

#footer a.rss{ padding: 0 0 0 15px; background: url(images/all.png) no-repeat 0px -214px}
#footer a.rss:hover{background: url(images/all.png) no-repeat 0px -195px}

/*   Kommentarer   */

#respond {padding: 0 20px}

#respond li{padding: 3px 0;}
#respond code, #respond small {font-size: 10px; color: #999}

#commentform input, #commentform textarea {padding: 2px; font: 13px Arial, 'Helvetica Neue', Helvetica, sans-serif;}
#commentform input {width: 150px;}
#commentform textarea {width: 538px; height: 100px}
#commentform label {display: block; width: 100px; float: left; padding: 5px 0 0;}
#commentform small {}
#commentform #submit {border: 0px solid #999; margin: 0 0 20px; background: none; color: #3C98C9; width: 140px; cursor: pointer; text-align: left; padding: 0;}
#commentform #submit:hover {color: #fff;}

#comments {padding: 10px 20px 0;}
ol.commentlist { list-style:none; margin:0 0 10px; padding:0; text-indent:0; border-top:1px dashed #222;}

ol.commentlist li.comment { border-bottom:1px dashed #222; padding:10px 20px; position: relative; }
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {font: normal 20px/1.3 "Century Gothic", "Gill Sans", Arial, sans-serif;}
ol.commentlist li.comment div.vcard cite.fn { font-style:normal; }
ol.commentlist li.comment div.vcard cite.fn a.url {text-decoration: none;}
ol.commentlist li.comment div.vcard img.avatar { border:1px solid #555; background: #444; float:left; padding:2px; margin: 0 7px 0 0;}
ol.commentlist li.comment p { clear: both; margin: 0px 0 0 0;}
ol.commentlist li.comment div.comment-meta { font-size:9px; padding: 0 0 10px}
ol.commentlist li.comment div.comment-meta a { color:#999; background: none;}
ol.commentlist li.comment div.comment-meta a:hover { color:#777; background: none;}

ol.commentlist li.comment div.reply {text-align: right; position: absolute; top: 5px; right: 20px;}
ol.commentlist li.comment div.reply a { font: bold 9px/20px Tahoma;}
ol.commentlist li.comment:hover .reply a{ color: #999;}
ol.commentlist li.comment .reply a:hover{ color: #fff;}

ol.commentlist li.comment ul.children { list-style:none; margin:10px 0 0; text-indent:0; }
ol.commentlist li.comment ul.children li.depth-2 { border-left:0px solid #666; margin:0 0 0px 0px; }
ol.commentlist li.comment ul.children li.depth-3 { border-left:0px solid #999; margin:0 0; }
ol.commentlist li.comment ul.children li.depth-4 { border-left:0px solid #bbb; margin:0 0; }
ol.commentlist li.comment ul.children li.depth-5 { border-left:0px solid #ddd;}

ol.commentlist li.even { background:#333; }
ol.commentlist li.odd { background:#444; }
ol.commentlist li.bypostauthor {background: #111;}
ol.commentlist li.parent { border-left:0px solid #444; }
/*
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}

ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}

ol.commentlist li.comment ul {}

ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}

ol.commentlist li.comment ul.children li.odd {}

ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}
*/



/* slide */
#ps_slide {width: 540px; height: 250px; margin: 10px 0; overflow: hidden;}
#content #ps_slide img{
	padding: 0px;
	border: none;
	width: 540px;
	height: 250px;
}


/*===   Mallar   ===*/



/*   L�nkar   */
#linkNav{width: 100%; clear: both; float: left; margin: 10px 0 10px; padding: 0 0 10px; border-bottom: 1px solid #555;}
#linkNav li{float: left;}
#linkNav li a{float: left; display: block; margin: 0 20px 0 0; padding: 0px;}
#linkNav li a:hover{background: none; color: #fff;}
.ui-tabs-hide{display:none;}
.tab_lankar{width: 29%; padding-right: 2%; float: left;}
.tab_lankar a{ display: block}
#lankarna .tab_lankar a:hover{ background: none; color: #fff}
.tab_lankar img.no_img{ background: none; border: none; padding: 2px 0 0; margin: 0;}
.rad_2{padding: 0 2%; border-left: 1px solid #555; border-right: 1px solid #555;}
.rad_3{ padding: 0 0 0 2%;}




/*   Javascript aktiverat   */
.jsOn #mainNav li.page_item a:hover, .jsOn #mainNav li.current_page_item a, .jsOn #mainNav li.current_page_ancestor a{
	background: none;
}

/* Cufon */
.cufon-loading #sidebar h2, .cufon-loading h2, .cufon-loading #logo a, .cufon-loading , 
.cufon-active #sidebar h2 {font-size: 30px;}
.cufon-active h2 {font-size: 30px;}
.cufon-active h1 {font-size: 40px; line-height: 1.0;}
.cufon-active h4 {font-size: 20px;}
.cufon-active #logo a {font-size: 50px; color: #fff;}


/* IE of course */
#dropIe{display: none;}
#dropIe{
    background: #111;
    width: 900px;
    position: absolute;
    top: 90px;
    left: 10%;
    padding: 10px;
    z-index: 200;
    opacity: .7;
    filter: alpha(opacity=70);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
#dropIe strong {color: #f00; font-size: 15px; display: block;}
#dropIe img {float: right}