/*   
Theme Name: Creatif Blog
Theme URI: http://superpreviewer.com/creatifblog
Description: For the book "How to Be a Rockstar WordPress Designer!"
Author: Collis Ta'eed & Harley Alexander
Author URI: http://rockablepress.com
Version: 1.1
.
This theme can be used for commercial or non-commercial use so long as it is not redistributed or resold in any way.
.
*/

/* 
	Background-Styles 
*/
* { 
    margin: 0; 
    padding: 0; 
}

html, body, #bg, #bg table, #bg td, #main {
    height:100%;
    width:100%;
    overflow:hidden;
}

#bg { 
    position: fixed; 
}

#bg div {
    height:200%;
    left:-50%;
    position:absolute;
    top:-50%;
    width:200%;
}

#bg td {
    text-align:center;
    vertical-align:middle;
}

#bg img {
    margin:0 auto;
    min-height:50%;
    min-width:50%;
}

#main {
    position:absolute;
    top:0;left:0;
    z-index:70;
    overflow:auto;
}


#focus-stealer      { position: absolute; left: -9999px; }




body {
	background-color:#000000;
	margin:0px; padding:0px;
	font-family: Georgia;
        color:#7f7d78;
	font-size:13px;
	line-height:19px;
}
#main {
	
	padding-bottom:0px;
}
#main .container {

}
#footer {background-image:url(images/f_middle.png);
	background-repeat:repeat-y;
        background-color: transparent;
	padding:40px;
	position:relative;
	top:0px;
	min-height:250px;
}
.container {
	width:950px;
	margin-left:0px;
	position:relative;
}

a img {
border: none
}


/* 
	Header-Styles 
*/

#header {
	padding-top:20px;
	padding-bottom:0px;
        height:0px;
        margin-top:-20px;
        border-bottom:0px dashed #32312f;
}

#logo h1, #logo small {
	margin:0px;
	display:block;
	text-indent:-9999px;
}
#logo {
	background-image:url(images/logo.jpg);
	background-repeat:repeat;
	width:650px;
	height:183px;
}
ul#menu {
	margin-left: 0; padding-left: 0; 
	float: left;
        margin-top: 55px;
        margin-left: 15px;
}
ul#menu li {
	display:inline;
	
}
ul#menu li a {
	text-decoration:none;
	color:#716d6a;
	font-family: Georgia;
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;
	margin-right: 0.5em; 
	padding: 0.3em 2em;
	background:#c4c0bf url(images/button_bg.jpg) repeat-x;
        
        
}
ul#menu li a:link{color: #ffffff;}
ul#menu li a:visited{color: #ffffff;}
ul#menu li a:hover{background: #de478c;}


ul#menu li.current_page_item a { background: #000; color: #fff; }
ul#menu li.current_page_item a:hover { background: #fff; color: #000; }


#top{
	padding-top:0px;
	padding-bottom:0px;
        height:60px;
        background: #000000;
}


/* 
	Block-Styles 
*/

.block {
	border:0px solid #a3a09e;
	background-color:transparent;
	margin-bottom:20px;
	position:relative;
}
.ribbon {
	position:absolute;
	top:-3px;
	right:-3px;
}
.block_inside { 
	display:block; 
	border:0px solid #ffffff;
	background: transparent;	
	padding:30px;
	overflow:auto;
}
.image_block {
	border:1px solid #b5b5b5;
	background-color:#d2d2d2;
	padding:5px 5px 1px 5px;
	float:left;
}
.image_block img {
	border:1px solid #b5b5b5;
}
.text_block {
	float:left;
	width:430px;
	margin-left:30px;
	padding-top:30px;
}

#block_featuredblog .text_block { padding-top:5px }


/*
	Portfolio-Home-Styles
*/

#block_portfolio {
	overflow:auto;
	margin-bottom:20px;
}
#portfolio_items {
	width:615px;
	margin-right:25px;
	float:left;
	min-height:100px;
	padding-top:3px;
}
#text_column {
	float:right;
	width:310px;
}
#text_column img { margin-bottom:20px; position:relative; left:-3px;}
#text_column h2#text_title { 
	text-indent:-9999px;
	background-image:url(images/creatif.jpg);
	background-repeat:no-repeat;
	width:310px;
	height:129px;
}

.mini_portfolio_item {
	border:1px solid #a3a09e;
	margin-bottom:10px;
	position:relative;
}
.mini_portfolio_item .block_inside { 
	background:none; background-color:#e2dddc; 
	padding:25px 30px 15px 30px; 
}
.mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }


/*
	Block-Content-Styles
*/

#content_area {
	width:390px;
	float:left;
        margin-top:15px;
        margin-left:15px;
}
#content_area .block_inside {
	min-height:400px;
}

#content_area .block_inside h2 {
	font-size: 3.5em;
	color: #ffffff;
	font-weight: normal;

}


#sidebar {
	float:left;
	width:381px;
	position:relative;
	left:-1px;
	margin-top:15px;
        margin-left: 10px;
	background-color:transparent;
	border:0px solid #a3a09e;
}
#sidebar .block_inside {
	background:none;
	background-color:transparent;
}

#sidebar .block_inside h2, #sidebar .block_inside h3 {
	font-size:16px;
	line-height:33px;
}

#sidebar .block_inside h1 {
	font-size: 3.5em;
	color: #de478c;
	font-weight: normal;
        line-height:63px;
}

#sidebar .block_inside h2 {
	font-size: 3.5em;
	color: #ffffff;
	font-weight: normal;
}

#sidebar .block_inside h2.top-space {
	margin-top: 20px;	
}

#sidebar .block_inside h3 {
	font-size: 1.2em;
	font-weight: normal;
	color: #666;
}

#sidebar .block_inside h4 {
	font-size: 1.3em;
	font-weight: normal;
	color: #666;
	line-height: 1.3em;
	margin-bottom: 5px;
}




#sidebar ul { margin:10px 0px 30px 0px; padding:0px; }
#sidebar ul li { list-style:none; margin:0px 0px 5px 0px; padding:0px; }
#sidebar ul li a { color:#7f7d78; }
#sidebar ul li a:hover { color:#0172dd; text-decoration:none; }


#content_area h2 { font-size: 3.5em; line-height:32px; }

#content_area .separator {
	border-top:1px solid #e3e3e3;
	margin-top:0px;
	padding-top:20px;
}
#content_area .biggap {
	border-top:1px solid #e3e3e3;
	margin-top:40px;
	padding-top:40px;
}

#content_area .small {
	border-top:0px solid #e3e3e3;
	margin-top:10px;
	padding-top:20px;
}

/* widget-style
------------------------------------------------ */

#recentcomments td, #recentcomments th 
{
font-size:1em;
border-bottom:1px dotted #000000;
padding-top:5px;
padding-bottom:10px;
padding-right:5px;
background-color:transparent;
vertical-align: top;
}

------

.widget_pages ul li { 
    padding: 6px 0 6px 21px; 
    border-bottom: 1px dotted #000000; 
    background: url(images/ico_hotpost.gif) no-repeat top left; 
    background-position: 3px 4px; 
    font-size: 90%; 
}


.widget_recent_entries ul li { 
    padding: 6px 0 6px 21px; 
    border-bottom: 1px dotted #000000; 
    background: url(images/ico_hotpost.gif) no-repeat top left; 
    background-position: 3px 4px; 
    font-size: 90%; 
}

.widgettitle { 
margin-top:30px;
    font-size: 120%; 
    font-weight: normal; 
    border-bottom: 3px solid #000000; 
    padding: 0  0 5px 3px; 
}

.tdomf_category_checklist ul li { 
    border-bottom: 0px dotted #000000; 
display: inline; 
margin-right:10px;
}



/* DATE-STYLES
------------------------------------------------ */
.posttime {
	height:52px;
	width:42px;
	float:left;
	text-align:center;
	padding-top:0px;
	margin-right:10px;
	margin-top:0px;
}

.posttime .m {
	color:#ffffff;
        background-color: #de478c;
	font-size:16px;
	padding:0px 0px 2px 0;
        height:16px;
}

.posttime .d {
	color:#fff;
	font-size:30px;
	line-height:30px;
	padding:1px 0 0 0;
}


.post-foot { 
border-bottom:dashed 2px #32312f;
overflow:hidden; 
padding:0px 0px 0px 0px; 
font-size:11px; 
line-height:10px; 
background-color:#; 
margin-top:20px; 
}

.post-foot a { color:#de478c; }

.post-comments { 
font-weight:bold; 
float:right; 
font-size:13px;
padding:0px 10px 0px 0px; 
}

.post-comments-link { 
display:block; 
background-image:url(images/comment.gif);  
background-repeat:no-repeat;
padding:2px 0px 0px 18px; 
margin:0px 0px 8px 10px; 
}


/* Get-social
------------------------------------------------ */

ul#social {
	margin-left: 0; padding-left: 0;
	float: left;
        margin-top: 0px;
}
ul#social li {
	display:inline;
	
}
ul#social li a {
	text-decoration:none;
	color:#de478c;
	font-family: Georgia;
	font-size:8px;
	font-weight:bold;
	text-transform:uppercase;
	margin-right: 0.5em; 
	padding: 0.3em 2em;
	background: #de478c;    
}
ul#social li a:link{color: #ffffff;}
ul#social li a:link{background: #de478c;}
ul#social li a:visited{color: #ffffff;}
ul#social li a:hover{background: #fc147e;}
ul#social li a#current{background: #000000;} 

/* 
	Text-Styles   
*/
h1 {
	font-size: 3.5em;
	color: #de478c;
	font-weight: normal;
        line-height:63px;
}


h2, h2 a{
	 margin:10px 0px 5px 0px;
	font-size: 13px;
	line-height:30px;
	font-family: Georgia;
        font-weight: normal;
	color:#de478c;
}


h3, h3 a{
        margin:10px 0px 5px 0px;
	font-size: 13px;
	line-height:30px;
	font-family: Georgia;
        font-weight: normal;
	color:#de478c;
}
h4 {
	color:#de478c;
	margin:0px 0px 0px 0px;
}

h5, h5 a{
	margin:0px 0px 3px 0px;
	font-size:30px;
	font-family: Georgia;
	color:#de478c;
	line-height:39px;
	letter-spacing:-1px;
        text-transform: uppercase;
}

h6, h6 a{
	margin:0px 0px 3px 0px;
	font-size:12px;
	font-family: Georgia;
	color:#ffffff;
	line-height:3px;
	letter-spacing:-1px;
        text-transform: uppercase;
}

small {
	color:#595856;
	font-weight:bold;
	font-size:11px;
	display:block;
	margin-bottom:25px;
        line-height:3px;
}
a {
	color:#de478c;
	text-decoration:none;
}
small a {
	color:#de478c;
}
a:hover {
	text-decoration:underline;
	color:#de478c;
}
h2 a:hover {
	color:#de478c;
	text-decoration:underline;
}
p { margin: 0px 0px 15px 0px; }

a.button {
	background:#32312f url(images/button_bg.jpg) repeat-x;
	padding:5px 10px 5px 10px;
	margin-top: 25px; 
	color: #ffffff;
	text-decoration: none;
	border:1px solid #32312f;
	text-transform:uppercase;
	font-size:9px;
	line-height:25px;
}

a.button_ljudbild {
	background:#32312f url(images/button_bg.jpg) repeat-x;
	padding:5px 9px 5px 9px;
	margin-top: 25px; 
	color: #ffffff;
	text-decoration: none;
	border:1px solid #32312f;
	text-transform:uppercase;
	font-size:15px;
	line-height:25px;
}

a.button_awsome {
	background: #000 url(/images/alert_overlay.png) repeat-x;
        display: inline-block;
        padding: 25px 35px 25px 35px;
        color: #fff;
        text-decoration: none;
        font-size:19px;
        line-height:25px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-box-shadow: 0 0px 0px #999;
        -webkit-box-shadow: 0 1px 3px #999;
        text-shadow: 0 -1px 1px #222;
        border-bottom: 1px solid #222;
        position: relative;
        cursor: pointer;
}

#block_featuredblog a.more-link {
	background:#32312f url(images/button_bg.jpg) repeat-x;
	padding:2px 10px 2px 10px;
	margin-top: 25px; 
	color: #ffffff;
	text-decoration: none;
	border:1px solid #32312f;
	text-transform:uppercase;
	font-size:9px;
	line-height:20px;
	display:block;
	float:left;
	
}

a.button:hover {
	background:#007de2 url(images/button_bg_o.jpg) repeat-x;
	border-color:#007de2;
}


a.button_ljudbild:hover {
	background:#007de2 url(images/button_bg_o.jpg) repeat-x;
	border-color:#007de2;
}

a.button_awsome:hover { 
	background: #292929 url(/images/alert-overlay.png) repeat-x;
        display: inline-block;
        padding: 25px 35px 25px 35px;
        color: #fff;
        text-decoration: none;
        font-size:19px;
        line-height:25px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-box-shadow: 0 1px 3px #999;
        -webkit-box-shadow: 0 1px 3px #999;
        text-shadow: 0 -1px 1px #222;
        border-bottom: 1px solid #222;
        position: relative;
        cursor: pointer;
}


#block_featuredblog a.more-link:hover {
	background:#007de2 url(images/button_bg_o.jpg) repeat-x;
	border-color:#007de2;
}


/*
	Footer-Styles
*/

#footer {
	font-family: Georgia;
	font-size:10px;
}
.footer_column {
	float:left;
	width:50px;
	margin-right:30px;
        margin-bottom: 30px;
        padding-top:40px;
        padding-left:50px;
}

.footer_column_right {
	float:right;
	width:20px;
        margin-bottom: 30px;
        padding-top:40px;
        padding-left:20px;
        margin-left: 0px
}

#footer_column .long {
	width:750px;
}

#footer h3 {
	color:#e2dddc;
	text-transform:uppercase;
	font-size:10px;
}
.footer_column ul li, .footer_column ul {
	list-style:none;
	margin:0px;
	padding:0px;
}

/*
	Comment-Styles
*/

#comments_template {
	border-top:0px solid #e3e3e3;
	margin-top:10px;
	padding-top:10px;	
}
ol#comments {
	margin:0px;
	padding:0px;
	margin-top:20px;
}
ol#comments li {
	margin:0px;
	padding:0px;
	position:relative;
	padding-left:60px;
	list-style:none;
	padding-bottom:20px;
	margin-bottom:20px;
	border-bottom:1px solid #e5e5e5;
}
ol#comments .avatar {
	position:absolute;
	top:0px;
	left:0px;
}
ol#comments small a {
	font-weight:normal;
	color:#999999;
}



ul.commentlist {
	margin:20px 0px 20px 0px;
	padding:0px;
	border:0px solid #dedede;
}
ul.commentlist li {
	margin:0px;
	padding:10px 0px 20px 80px;
	position:relative;
	list-style:none;
	border:0px solid #dedede;
	border-bottom:0px;
	background:transparent;
	background-position:1px 1px;
        width: 490px;
}
ul.commentlist .avatar {
	position:absolute;
	top:10px;
	left:10px;
	border:0px solid #dedede;
}
ul.commentlist .commentmetadata {
	display:inherit;
}
ul.commentlist ul  {
	margin:20px 0px 20px 0px;
	padding:0px;
}
ul.commentlist ul li {
	border:0px;
	background-color:#ffffff;
	overflow:auto;
	background-image:none;
	padding-bottom:0px;
}

/* Facebook Connect Styles */

.facebook-connect{ /* I added this div wrapper myself, was not part of the plugin */
  position: relative;
  float: none;
  width: 300px;
  margin-top: 5px;
  text-align: left
}

.facebook-connect a,  /* you probably won't need this css */
.facebook-connect a:hover,
.facebook-connect a img,
.facebook-connect a:hover img{
  border: 0
}

.facebook-connect .fbc_connect_button_area { /* This is the button container for your comment form */
  border: 0;
  float:right;
  margin:0;
  padding:0
}

body .fbc_profile_header { /* I added body to override the CSS from Facebook Connect's default CSS */
  background:#000000 url("images/quote-bg-repeat5.jpg") repeat-x;
  border:1px solid #3d3e3d;
  border-right: 0;
  padding:10px 5px 5px 10px;
  position:fixed; top: 0%; right:0;
  text-align:left;
  width:220px
}

body .fbc_profile_header a.logout{ /* this is a custom class I added to  the HTML in fbconnect.php */
  font-size: .9em;
  color: #999
}


#twc_connect{
  border: 0;
  float:left;
  margin-left:-6px;
margin-top:-30px;
margin-left:175px;
}


/* 
	Miscellaneous-Styles   
*/


.block_inside blockquote {
	border-top:1px solid #acc7da;
	border-bottom:1px solid #acc7da;
	background-color:#ebf1f6;
	margin:0px;
	padding:20px;
	padding-bottom:13px;
	margin-bottom:20px;	
	color:#465c6b;
	font-family: Georgia;
	font-style:italic;
}
.block_inside pre.code {
	border-top:1px 0
}


#twitter-status { }
    #twitter-status  h2 span { font-size:13px; color:#ccc; }
    #twitter-status div.body {
      /*background-color:#fffe95; color:#685c00;
      border-radius:9px; -webkit-border-radius:9px; -moz-border-radius:9px;*/
      border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;
      border-left:0px solid #ddd;
      padding:0px;
      margin:0px 0px;
    }
      /*#twitter-status div.body:hover { border-color:#666; cursor:pointer; }*/
      #twitter-status div.body > a { display:inline-block; width:40px; 
        vertical-align:top; }
      #twitter-status div.body > p { display:inline-block; max-width:250px; 
        vertical-align:top; margin:-5px 15px 0 0px; text-wrap:unrestricted;
        overflow:hidden; text-overflow:ellipsis; }
      #twitter-status div.body > p > span.loading { color:#ccc; font-size:13px; }
  
