/*
Description: A website built on xhtml & css
Author: Mathias Eriksson
Author URI: http://iammath.com
*/
@import url(http://fonts.googleapis.com/css?family=Terminal+Dosis:200,300);
@import url(http://fonts.googleapis.com/css?family=Lora&v2);
@import url(http://fonts.googleapis.com/css?family=Istok+Web&v2);

/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}


* { margin: 0; padding: 0;} /* Gör så att top diven går i kanterna. Ingen onödig margin eller padding tillkommer. */
body { 
font:13px 'Istok Web'; color: #111;
overflow: auto; }

h1, h1 a	{ padding-bottom: 5px; font: 25px 'Lora'; font-weight: normal; letter-spacing: 1px; fletter-spacing: 3px;} 
h1 a:hover { color: #1AA9E5; } 
p		{ margin: 0; padding: 0; }
a 		{ text-decoration:none; color: #111; font-weight: bold; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease;	transition: all 1s ease; }
a:hover	{ color:#1AA9E5; }	
li a 		{ margin:0; padding:0;}
img 		{ border:medium none; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease;	transition: all 1s ease;}


/* CLASSES */
.left{ float:left; }
.right{ float:right;  }
.clear {clear:both; }
.pink { color:#FF3399; } 
.blue { color:#1AA9E5; } 


/* Title */
p.title a { position:fixed; top: 25px; left: 195px; background:transparent; color: #222;font: 50px Helvetica; padding: 5px; font-weight: bold; opacity: 0.5;}
p.title a:hover { background: #bae9fb; padding: 5px; }
/* About */
#about { float:left; position: fixed; top:105px; left:200px; width: 128px;  }

#about  p{ background: white; margin-top: -6px; padding: 7px; font: 11px Helvetica;}
#about  ul{ width: 128px; margin:0; padding:0; list-style-type: none; }
#about   li{ background: white;  margin:0; padding-left: 17px; color: #111; font-size: 10px; list-style-type: square;}

#about #menu ul{ width: 128px; margin: 10px 50px 0 0;   }
#about #menu li{ background: white; padding: 7px; margin:2px 0; color: #111;  list-style-type: none;}
#about #menu li:hover{ background:#FF3388;  opacity: 0.1; }



#about .meta { margin: 5px auto; text-align: center;}

/* Navigation */
#about  #nav {  position:relative; padding:10px 0; width:128px;  text-align:center; color:#000; }
#about  #nav a:hover{  color: #1aa9e5; }

/* Logo */ 
p.logo { position:fixed; bottom:22px; right: 20px;font-family: "Terminal Dosis", Helvetica, Arial, "Lucida Grande", sans-serif; font-size:48px; color: black;}
p.website { position:fixed; bottom:10px; right: 20px; font: bolder 20.5px Tahoma, Verdana, Helvetica, Arial, Sans-Serif; text-transform: uppercase; color: black; }
p.website a {color:#000;}

/* FoOllow */
#about .following ul{ float:left; width: 128px; margin:0; padding: 0; list-style-type: none; }
#about .following ul li { display: inline; background:transparent; list-style-type: none; margin:0; padding:0; }
#about .following ul li a{  list-style-type: none; margin:0; padding:0; }
/* About ----- */





ul, li  { margin:0; padding: 0; }
#like { background: #fff; width: 210px; float:right; padding: 5px;  margin: 105px 320px 0 0;  }
#like h1{  margin: 0 0 -7px 10px; color: #111; }

ul#likes {  width: 200px; list-style-type: none; margin: 0; padding: 0;}
li.like_post {  width: 200px; margin:5px;   height:100%;    list-style-type: none;  }
/* Image */
li.like_post img {  max-width: 200px;  list-style-type: none; -moz-border-radius:2px; border-radius:2px;}
/* Display none */
li.like_post ol, li.like_post ul , li.like_post p, .like_text_post, .like_note_post, .like_link , .like_title, .like_quote, .like_source, .like_left_quote, .post_info_bottom, .like_caption   { margin: 0; display:none; }


ol.notes {   width: 400px; margin: 5px 0 -1px 335px; padding:0;   }
ol.notes li.note {  display:block; background: transparent; list-style-type: square; margin-left: 328px;  padding-bottom:3px; margin:2px 0; border-bottom: 1px solid #000;  }
ol.notes li.note a:link, li a:visited { padding-left:0px; color: white;}
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:1px solid #000; margin:10px; padding:.5em 10px; 
quotes:"\201C""\201D""\2018""\2019";   }
ol.notes li.note blockquote a { text-decoration: none;     }



/* Wraper */
#wrapper { width:430px; float:left; margin:  100px 0 0 30px; }

/* Posts */
.post { width: 400px; position: relative; margin-left: 328px; padding:5px;  list-style-type: squre;  }
.post ol,ul { margin-left: 30px; }

/* ASK POSTS - */
.answer{  padding: 5px 0 10px 20px; margin: 5px 0 20px 0;}
.who {  padding:40px 0 7px 17px;}
.thequestion { width: 90%; -webkit-border-radius:2px; -moz-border-radius:2px; 	border-radius:2px; position:relative; top:20px; bottom:10px; 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:5px 0; margin: 0; }
.text ul				{ padding: 10px 0; margin-left: 25px; 	list-style-type: square;}
.text li 				{ list-style-type: squre; }
.text blockquote 		{ border-left:thin solid #81C0FE; margin: 10px 0 0 20px; font-size: 12px;  padding-left:10px; } 
.text blockquote img,
.text img, .text a	{ max-width: 340px; } 

/* PHOTO POSTS */
.photo				{ padding: 5px 20px 0px 20px; padding: 0;  }
.photoset 			{  margin:0; padding:0;}

/* QUOTE POSTS  */
.quote 				{ padding: 5px 10px 0 20px;font-size:12px; font-family:  arial, serif;  letter-spacing: 1px; fletter-spacing: 3px; }
.quote .author		{ text-align:right; padding: 5px 10px 5px 0; }
.quote .author p 		{ font-size: 12px;}
.quote p				{ margin-top: 10px; padding:0; line-height:1em;}
.quote p:first-letter{ font-weight: bold; text-transform: uppercase;}
.quote blockquote		{ border: none; margin-top: 5px; padding:0; line-height:1.6em;}

/* CHAT POSTS - */
.chat 				{ padding: 0;  padding: 5px 0 10px 20px; }
.chat ul 				{ list-style-type:none; margin:0;}
.chat li 				{ list-style-type:none; display:block; max-width: 360px; margin: 2px 0; padding: 2px;   }
.chat .odd 			{ background: #fff;  opacity:0.8;}
.chat .odd strong		{ color: #1AA9E5; opacity:0.8;}

/* LINK POSTS */
.link 				{ padding: 0; font-size: 25px; padding: 5px 0 5px 20px;}

/* VIDEO POSTS */
.video 				{ padding: 5px 20px 0px 20px; padding:0; }

/* AUDIO POSTS */
.audio 				{ padding: 0; padding: 5px 0 10px 20px; }
.audio p 			{ font-size: 9px; }

/* CAPTIONS */
.caption 			{   padding:7px 15px 5px 10px; margin-top:-7px; color:#333; z-index:1000 !important;}
.caption p 			{ font-size:13px;margin: -2px 0 0 10px; padding: 5px 0; line-height:1em; }
.caption blockquote p 	{ border-left:thin solid black; margin-left: 30px; font-size: 11px; padding-left: 5px; } /* Blockquote */

/* sTyle */
.answer, .text, .quote, .chat, .link, .video, .audio, .caption { background: #fff; }

.photo_notes { font-family: 'Lora', arial, serif; font-size:50px; 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);
letter-spacing: -7px; display:none; position:absolute; color:#fff; width:400px; opacity:0; text-align: center; z-index:1000 !important; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear;
}
.photo_notes a {color:#fff;}				
.post:hover .photo_notes { opacity:1; margin-top: 20%; display: block; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear;  -o-transition: all 0.3s linear;}
.post:hover .photo_notes:hover{ opacity:1; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear;}


/* Reblogged? PermaLink? Notes/likes? Tags? */
#icons { color:#333; background:#fff; padding:15px 15px 6px 15px; margin: -6px 0 0.5em;}




/* EndRibbon
------------- */
/* Shared styles */
.drop-shadow { position:relative; width: 370px; padding:2%; }
.drop-shadow:before,
.drop-shadow:after { content:""; position:absolute; z-index:-2; }
.drop-shadow p { font-size:16px; font-weight:bold; }

      /* Lifted corners */
.lifted:before,
.lifted:after { 
bottom:15px; left:10px;
width:50%; height:20%; max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 1); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 1); box-shadow:0 15px 10px rgba(0, 0, 0, 1);
-webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg);
}
.lifted:after {
right:10px; left:auto;
-webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg);
}


/* ----------------------------------------------------------------------------------------------------------------------------
== ICONS STYLES
** ---------------------------------------------------------------------------------------------------------------------------- */
.right{ float:right; margin: 1px -35px 0 0;padding:0; }
#icons ul{ padding:0; margin:0; }

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

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

#icons li a:hover, 
#icons li a:focus, 
#icons li a:active {
    color:#1AA9E5;
    background:transparent;
}

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

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

#icons li a:hover:before, 
#icons li a:focus:before, 
#icons li a:active:before {
    background:#1AA9E5;
}


/* Not links */
.ribbon { padding-left:28px; }

/* ADD  */
#icons .add-alt a:before {
    left:-3px; 
    width:3px; 
    height:13px; 
    margin-top:-7px;
    background:#1AA9E5;
}

#icons .add-alt a:after {
    left:-8px; 
    width:13px; 
    height:3px; 
    margin-top:-2px; 
    background:#1AA9E5;
}

#icons .add-alt a:hover:after, 
#icons .add-alt a:focus:after, 
#icons .add-alt a:active:after {
    background:#1AA9E5;
}

/* 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:#1AA9E5;
}

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

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

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

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

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



/* Like
------------------------------------------------------------------------------------------------------------------------------- */
#icons .likes { margin-right:10px; padding-left:15px;  color:#111; }
#icons .likes:before, 
#icons .likes:after {
    width:12px;
    height:8px;
	margin-left:-5px;
    margin-top:-4px;
    background:#ff0000; 
    /* 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: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{
    content:"";
    position:absolute;
    top:50%;
    left:0;
}