/*
Description: A website built on xhtml & css
Author: Mathias Eriksson
Author URI: http://iammath.com
version: 1.1

reblog - http://static.tumblr.com/im2itiw/ayZldskp9/reblog.png
tag    - http://static.tumblr.com/im2itiw/xzgldskq9/tag.png
css    - http://static.tumblr.com/im2itiw/bxbldvsho/4.css
*/


* { margin: 0; padding: 0;} /* Gör så att top diven går i kanterna. Ingen onödig margin eller padding tillkommer. */
body { background: #E7E7E5 url('http://static.tumblr.com/ybdgkw4/ffzkxsss6/bg-400-paper2.jpg') repeat; color: #000; font: 12px Arial,Helvetica; }

a { text-decoration:none; color: silver; font-weight: bold;} 
img {border:medium none; opacity: 0.8;}
a img:hover{opacity: 1;}


/***** CLASSES **/
.left{ float:left; }
.right{ float:right; clear:right;}
.clear {clear:both; }

/* Wraper */
#wrapper { width: 750px;  margin: 0 auto; }

/* Header */
#header { 
	width: 480px; 
	 min-height: 15px;
	 margin: 3px 0 30px 135px;  
	
	 padding: 5px 0 10px 20px;
	 position:relative;
	background:#fff; /* default background for browsers without gradient support */
	/* css3 */
	
}
#header:after {
	content:"";
	position:absolute;
	bottom:-15px; /* value = - border-top-width - border-bottom-width */
	left:50px; /* controls horizontal position */
	border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}
#header .title {  margin: 5px 5px 5px 0; font-family: 'Reenie Beanie', arial, serif; font-size: 45px; color:silver;}
#header .title:hover {  color:#cdcdcd;}
#Hicons { background: transparent; margin: 18px 0 5px 135px; }
#description, #toggleShow, #search{ display: none; background-color: #fff; margin: 0 0 10px 10px; }



/* FoOter */
#footer {border-top: 1px solid #111; clear:both; width: 495px; margin-bottom: 25px; 
 min-height: 30px; margin: 10px 0 0 135px; padding:5px 5px 5px 0; list-style-type: none; }

#following ul{
width: 550px;
margin: 15px 0;
padding: 0;
list-style-type: none;
}
#following ul li { display: inline;  list-style-type: none; margin:0; padding:0; }
#following ul li a{  list-style-type: none; margin:0; padding:0; }
/* Navigation */
.previous { position:relative;font:normal 20px/25px arial; color: #222;}
.next  { position:relative;font:normal 20px/25px arial; color: #222;}

.previous a, .next a {  padding: 0; line-height: 25px; }
.previous  a:hover, .next a:hover {display:block; }
/* Navigation */
/* FoOter */




.tag:hover { background: #ccc; }


/* Posts */
.entry { width: 500px; margin-bottom: 25px; 
 min-height: 30px; margin: 10px 0 0 130px; padding:5px;  
list-style-type: none; position: relative; }

/* ASK POSTS *************************/
.ask { background: #fff; padding: 5px 0 20px 20px;}
.ask p{ padding: 0; margin: 0;}
.who { background: #fff; padding: 5px 0 20px 20px;}
.answer{  color: #D5D6E3;}

/* TEXT POSTS *************************/
.textpost { padding: 5px 20px 0px 20px; background: #fff;}
.textpost p { padding:3px 0; margin: 0; }
.textpost blockquote { margin: 5px 0 5px 11px; padding-left: 10px; 	border-left: 1px solid; }
.textpost ul { padding: 10px 0; margin-left: 25px; 	list-style-type: square;}
.textpost li { list-style-type: squre; }
.textpost h2 { padding-bottom: 5px; font-size: 20px; color: silver; font-family: 'arial'; letter-spacing: 5px;} 
.textpost h2 a {  padding-bottom: 5px; fletter-spacing: 5px;}

/* PHOTO POSTS *************************/
.photopost { padding: 0; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; }
.photopostCap { position:relative;  padding:0px 15px 5px 10px; margin: 0 0; color:#333; background:#fff; }
.photopostCap p {font-size:15px; margin: -10px 0 0 10px; padding: 10px 0; line-height:1em; }
.photopostCap.squre { position:relative; padding:15px 15px 0 15px; margin: -5px 0 0; color:#333; background:#fff;}
.photopostCap.squre :before { content:""; display:block; /* reduce the damage in FF3.0 */  position:absolute;
	top:0px; left:0; width:155px; height:36px; }
.photopostCap.squre :after { 	content:"";	display:block; /* reduce the damage in FF3.0 */ position:absolute;
	top:-30px; 	left:50px; 	width:0; height:0;  border:15px solid transparent; 	border-bottom-color:#fff; }
	
/* QUOTE POSTS *************************/
.quotepost { background: #fff; padding: 5px 0 0 20px; font-family: 'Droid Serif', arial, serif;  letter-spacing: 2px; fletter-spacing: 5px; }

/* CHAT POSTS *************************/
.chatpost ul { list-style-type:none; }
.chatpost li { list-style-type:none; display:block; max-width: 450px;padding: 5px; background: #eee; margin: 5px 0 5px 0; }
.chatpost { padding: 0; background: #fff; padding: 5px 0 10px 20px; }

/* LINK POSTS *************************/
.linkpost { padding: 0; 	background: #fff;  padding: 5px 0 5px 20px;}

/* VIDEO POSTS *************************/
.videopost { padding: 0; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; 	}
.videopost object {  margin-top: 30px; border-radius: 10px;  }

/* AUDIO POSTS *************************/
.audiopost { padding: 0; background: #fff; padding: 5px 0 10px 20px; }
.audiopost blockquote p{ padding: 0 0 0 20px; }

/* CAPTIONS */
.caption { position:relative;  padding:0px 15px 5px 10px; margin: 0 0; color:#333; background:#fff; }
.caption p {font-size:15px;margin: -10px 0 0 10px; padding: 10px 0; line-height:1em; }


#icons { color:#333; background:#fff; padding:10px 15px 6px 15px; margin: 0  0 0.5em;}
/* Posts */



/** NOTES & Like Posts! **/

strong.odd {color: #AFB1B4;}

/*
ul { margin:0; padding: 0; }
li { margin:0; padding: 0; } */


ul#likes { float:left; list-style-type: none; margin: 0 0 0 0; padding: 0 0 0 0;}
li.like_post { /* Should match the width specified in the Likes tag */
width: 100px; padding: 5px; float:left; border: 1px solid red; list-style-type: none;  -moz-border-radius:5px; border-radius:5px;}

li.like_post img { max-width: 100px; margin: 0; list-style-type: none;}
li.like_post blockquote {   display:none;  }
li.like_post p {   display:none;  }
li.like_post ol, li.like_post ul {
margin: 0 0 0 15px;
padding: 0; }
li.like_post .like_link a { font-weight: bold; }
li.like_post .like_title { font-weight: bold; }
li.like_post .post_info_bottom {  margin: 0; display:none; }

ol.notes { float: left; width: 500px;padding: 0px; margin: 5px 0 -1px 0; list-style-type:none; }
ol.notes li.note {  display:block; background: #fff;   padding: 5px; margin:  0; border-bottom: 1px solid #000; padding: 10px;  }
ol.notes li.note a:link, li a:visited { padding-left:3px; color:silver;}
ol.notes li.note  li a:hover,  li a:focus,  li a:active {   margin:  0; border: 1px solid #000;  }
ol.notes li.note img.avatar { display: none; vertical-align: -4px; margin: 0 10px 0 0; width: 16px; height: 16px;  }
ol.notes li.note span.action { font-weight: bold; }
ol.notes li.note .answer_content { font-weight: normal; margin:0; padding:0;  }
ol.notes li.note blockquote { border-left:10px solid #ccc; margin:10px 10px 5px 15px; padding:.5em 10px; 
quotes:"\201C""\201D""\2018""\2019";   }
ol.notes li.note blockquote a { text-decoration: none;     }

blockquote{border-left:1px solid #d3d3d3;margin: 5px 0 0 11px; padding-left: 10px;line-height:1.6em;}
/* blockquote:before{content:open-quote;font-size:x-large;color:silver;font-family:arial;}
blockquote:after{content:""; font-size:x-large;color:silver;font-family:arial;} */
blockquote p { display:inline; margin-left:5px;}



//* ----------------------------------------------------------------------------------------------------------------------------
== ICONS STYLES
** ---------------------------------------------------------------------------------------------------------------------------- */

#icons ul, #Hicons ul{
    padding:0;
    margin:0;
}

#icons li, #Hicons li {
    position:relative;
    z-index:1;
    overflow:hidden;
    list-style:none;
	display:inline;
    padding:0;
    margin:0;

}

#icons li a:link, #Hicons li a:link, 
#icons li a:visited, #Hicons li a:visited {
    display:inline;
    border:0;
    padding-left:28px;
    color:silver;
}

#icons li a:hover, #Hicons li a:hover, 
#icons li a:focus, #Hicons li a:focus, 
#icons li a:active, #Hicons li a:active {
    color:#001;
    background:transparent;
}

#icons li:before, #Hicons li:before, 
#icons li:after, #Hicons li:after,
#icons li a:before, #Hicons li a:before, 
#icons li a:after, #Hicons li a:after {
    content:"";
    position:absolute;
    top:50%;
    left:0;
}

#icons li a:before, #Hicons li a:before, 
#icons li a:after, #Hicons li a:after {
    margin:-8px 0 0;
    background:#silver;
}

#icons li a:hover:before, #Hicons li a:hover:before, 
#icons li a:focus:before, #Hicons li a:focus:before, 
#icons li a:active:before, #Hicons li a:active:before {
    background:#cdcdcd;
}

/* Not links */

.player,
.headphones,
.ribbon,
.views,
.location,
.info,
.help,
.pie,
.success,
.success-alt,
.warning,
.denied {
    padding-left:28px;
}

/* PERMALINK
------------------------------------------------------------------------------------------------------------------------------- */

#icons .permalink a:before, 
#icons .permalink a:after, 
#icons .permalink:after {
    left:4px;
    width:6px;
    height:4px;
    border:2px solid silver;
    background:transparent;
    /* css3 */
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

#icons .permalink a:after{
    left:12px;
    margin-top:-0px;
}

#icons .permalink:after {
    left:7px;
    width:10px;
    height:2px;
    border:1px solid #fff;
    margin-top:-2px;
    background:#silver;
}

#icons .permalink a:hover:before,
#icons .permalink a:focus:before,
#icons .permalink a:active:before,
#icons .permalink a:hover:after,
#icons .permalink a:focus:after,
#icons .permalink a:active:after {
    border-color:#cdcdcd;
    background:transparent;
}

#icons .permalink:hover:after {
    background:#cdcdcd;
}


/* RETWEET
------------------------------------------------------------------------------------------------------------------------------- */

#icons .retweet:before, 
#icons .retweet a:before {
    border-style:solid;
    border-color:transparent;
    background:transparent;
}

#icons .retweet:before {
    z-index:-1;
    left:12px; 
    margin-top:2px; 
    border-width:5px 5px 0;
    border-left-color:#fff;
    border-top-color:silver;
}

#icons .retweet a:before {
    left:-1px; 
    margin-top:-7px; 
    border-width:0 5px 5px;
    border-right-color:#fff;
    border-bottom-color:silver;
}

#icons .retweet a:after{
    z-index:-2;
    left:3px;
    width:10px;
    height:6px;
    margin-top:-6px;
    border:3px solid silver;
    background:transparent;
}

#icons .retweet:hover:before {
    border-top-color:#cdcdcd;
}

#icons .retweet  a:hover:before, 
#icons .retweet  a:focus:before, 
#icons .retweet  a:active:before {
    border-bottom-color:#cdcdcd;
    background:transparent;
}

#icons .retweet  a:hover:after, 
#icons .retweet  a:focus:after, 
#icons .retweet  a:active:after {
    border-color:#cdcdcd;
}



/* TAGS
------------------------------------------------------------------------------------------------------------------------------- */

#icons .tags a:before {
	float:right; 
    left:6px; 
    width:9px; 
    height:15px; 
    margin-top:-8px;
    background:silver;
    /* css3 */
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -moz-border-radius:3px 3px 0 0;
    border-radius:5px 5px 0 0;
    -webkit-transform:rotate(-40deg);
    -moz-transform:rotate(-40deg);
    -o-transform:rotate(-40deg);
    transform:rotate(-40deg);
}

#icons .tags a:after {
    left:7px;
    width:3px;
    height:3px;
    margin-top:-4px;
    background:#fff;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}


/* LIKE
------------------------------------------------------------------------------------------------------------------------------- */

#icons .likes a:before, 
#icons .likes a:after {
    width:14px;
    height:9px;
    margin-top:-6px;
    background:silver;
    /* css3 */
    -webkit-border-top-left-radius:8px;
    -webkit-border-bottom-left-radius:8px;
    -moz-border-radius:6px 0 0 6px;
    border-radius:6px 0 0 6px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg); 
}

#icons .likes a:after {
    left:4px;
    /* css3 */
    -webkit-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    -o-transform:rotate(135deg);
    transform:rotate(135deg);
}
#icons .likes li:before, 
#icons .likes li:after,
#icons .likes li a:before, 
#icons .likes li a:after {
    content:"";
    position:absolute;
    top:50%;
    left:0;
}

#icons .likes a:hover:after, 
#icons .likes a:focus:after, 
#icons .likes a:active:after {
    background:red;
}
#icons li.likes a:hover:before, 
#icons li.likes a:focus:before, 
#icons li.likes a:active:before  {
    background:red;
}


/* ----------------------------------------------------------------------------------- */





/* HOME
------------------------------------------------------------------------------------------------------------------------------- */

#Hicons .home a:before {
    left:1px;
    border-style:solid;
    border-color:transparent;
    border-width:8px 7px;
    border-bottom-color:silver;
    margin-top:-16px;
    background:transparent;
}

#Hicons .home a:after {
    left:3px; 
    width:2px; 
    height:4px; 
    border-style:solid;
    border-color:silver silver transparent;
    border-width:3px 4px 0;
    margin-top:0;
    background:transparent;
}

#Hicons .home a:hover:before, 
#Hicons .home a:focus:before, 
#Hicons .home a:active:before {
    border-bottom-color:#cdcdcd;
    background:transparent;
}

#Hicons .home a:hover:after, 
#Hicons .home a:focus:after, 
#Hicons .home a:active:after {
    border-color:#cdcdcd #cdcdcd transparent;
}

/* HISTORY
------------------------------------------------------------------------------------------------------------------------------- */

#Hicons .history a:before,
#Hicons .history a:after {
    left:2px;
    width:13px;
    height:13px;
    border:2px solid silver;
    margin-top:-8px;
    background:transparent;
}

#Hicons .history a:before {
    /* css3 */
    -webkit-border-radius:18px; 
    -moz-border-radius:18px; 
    border-radius:18px;
}

#Hicons .history a:after {
    left:10px; 
    width:4px; 
    height:5px; 
    border-width:0 0 2px 2px; 
    margin-top:-5px; 
    background:transparent;
}

#Hicons .history a:hover:before,
#Hicons .history a:focus:before,
#Hicons .history a:active:before,
#Hicons .history a:hover:after,
#Hicons .history a:focus:after,
#Hicons .history a:active:after {
    border-color:#cdcdcd;
    background:transparent;
}
/* COMMENT
------------------------------------------------------------------------------------------------------------------------------- */

#Hicons .comment a:before {
    width:16px;
    height:10px;
    margin-top:-6px;
	background:silver;
    /* css3 */
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px; 
}

#Hicons .comment a:after {
    left:8px;
    border:2px solid transparent;
    border-top-color:silver;
    border-left-color:silver;
    margin-top:4px;
    background:transparent;
}

#Hicons .comment a:hover:after, 
#Hicons .comment a:focus:after, 
#Hicons .comment a:active:after {
    border-top-color:#cdcdcd;
    border-left-color:#cdcdcd;
}




/* PROFILE
------------------------------------------------------------------------------------------------------------------------------- */

#Hicons .profile a:before {
    left:4px;
    width:16px;
    height:5px;
    margin-top:1px;
	background:silver;
    /* css3 */
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
    -moz-border-radius:5px 5px 0 0;
    border-radius:5px 5px 0 0;        
}

#Hicons .profile a:after {
    left:9px;
    width:6px;
    height:10px;
    margin-top:-7px;background:silver;
    /* css3 */
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-right-radius:5px 10px;
    -webkit-border-bottom-left-radius:5px 10px;
    -moz-border-radius:5px 5px 5px 5px / 5px 5px 10px 10px;
    border-radius:5px 5px 5px 5px / 5px 5px 10px 10px;
}

#Hicons .profile a:hover:after,
#Hicons .profile a:focus:after,
#Hicons .profile a:active:after {
    background:#cdcdcd;
}