/*
Description: Grey & Simple Theme For Tumblr.
Author: Mathias Eriksson
Author URI: http://iammath.com
*/
@import url(http://fonts.googleapis.com/css?family=Droid+Sans&v2);
@import url(http://fonts.googleapis.com/css?family=Reenie+Beanie&v2);
@import url(http://fonts.googleapis.com/css?family=Istok+Web&v2);
@import url(http://fonts.googleapis.com/css?family=Nixie+One&v2);
@import url(http://fonts.googleapis.com/css?family=Lora&v2);
@import url(http://fonts.googleapis.com/css?family=PT+Sans&v2);

* { 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: 14px 'PT Sans', Arial,Helvetica; }

a { text-decoration:none; 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: 'Nixie One', arial, serif;  font-size: 35px; color:silver;}
#header .title:hover {  color:#cdcdcd;}
#header-icons { background: transparent; margin: 18px 0 5px 135px; }
#description, #toggleShow, #search{ display: none; background-color: #fff; margin: 0 15px 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; }
#footer a { color: #111;}
#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 */
.post { width: 500px; margin-bottom: 25px; 
 min-height: 30px; margin: 10px 0 0 130px; padding:5px;  
list-style-type: none; position: relative; }

/* ASK POSTS - */
.answer{  padding: 5px 0 10px 20px; }
.who {  padding:40px 0 7px 17px;}
.thequestion { 	-webkit-border-radius:2px; -moz-border-radius:2px; 	border-radius:2px; position:relative; top:20px; bottom:10px; max-width:450px; padding:7px; background:#eee; opacity:0.8; }
.thequestion:after { content:""; position:absolute; bottom:-10px; left:20px; border-width:10px 10px 0; border-style:solid; border-color:#eee transparent; opacity:0.8; display:block;  width:0; }/* creates triangle */
.thequestion a{ text-decoration: underline; color: #222;}

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

/* PHOTO POSTS *************************/
.photo { 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;  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; }
	
.photoset 			{ background:transparent !important; margin-top:-3px; }

/* QUOTE POSTS *************************/
.quote {  padding-top: 5px; font-family: 'Droid Serif', arial, serif;  letter-spacing: 2px; fletter-spacing: 5px; }
.quote .author		{ text-align:right; padding: 5px 10px 5px 0; }
.quote .author p 		{ font-size: 12px;}

/* LINK POSTS *************************/
.link { padding: 0;font-size: 25px;   padding: 5px 0 5px 20px;}
.link a				{ background:white; opacity:0.9; }

/* CHAT POSTS *************************/
.chat ul { }
.chat li { list-style-type:none; display:block; max-width: 450px; margin: 5px 0 5px 0; padding: 5px; background: silver; opacity:0.8;  }
.chat { padding: 0;  padding: 5px 0 10px 20px; }
strong.odd {color: pink;}

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

/* AUDIO POSTS *************************/
.audio { padding: 0;  padding: 5px 0 10px 20px; }
.audio blockquote p{ padding: 0 0 0 20px; }

/* CAPTIONS */
.caption { position:relative;  padding:7px 15px 5px 10px; margin-top: -3px; color:#333; background:#fff; }
.caption p {font-size:14px;margin: -10px 0 0 10px; padding: 10px 0; line-height:1em; }
.caption img { max-width: 460px; }
.caption blockquote img { max-width: 440px; }

#icons { color:#333; background:#fff; padding:10px 15px 6px 15px; margin: 0  0 0.5em;}
li.tags { max-width: 7px; }

.answer, .text, .quote, .chat, .link, .audio  {  background: #fff; opacity:0.9; }
ol.notes li.note a:link, li a:visited, a { color: #ccc;}

/* :hover photo posts */
.photo_notes { font-family: 'Lora', arial, serif; font-size:50px;  letter-spacing: 2px; visibility:hidden;  opacity:0;  position:absolute; width:500px; opacity:0; text-align: center; z-index:1000 !important; text-shadow: 0 0 0.1em rgba(0,0,0,0.65), 0 0 0.1em rgba(0,0,0,0.65),0 0 0.1em rgba(0,0,0,0.65); transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; -o-transition-duration: 1s;  }				
.post:hover .photo_notes { visibility:visible; opacity:1; margin-top: 20%; display: block; }
.photo_notes, .photo_notes a { color:#fff; }




/*
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 15px 135px; list-style-type:none; }
ol.notes li.note {  display:block; background: #fff;   padding: 5px; margin:  0; border-bottom: 1px solid silver; padding: 10px;  }
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, #header-icons ul{
    padding:0;
    margin:0;
}

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

}

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

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

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

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

#icons li a:hover:before, #header-icons li a:hover:before, 
#icons li a:focus:before, #header-icons li a:focus:before, 
#icons li a:active:before, #header-icons 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
------------------------------------------------------------------------------------------------------------------------------- */

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

#header-icons .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;
}

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

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

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

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

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

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

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

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

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

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




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

#header-icons .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;        
}

#header-icons .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;
}

#header-icons .profile a:hover:after,
#header-icons .profile a:focus:after,
#header-icons .profile a:active:after {
    background:#cdcdcd;
}