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

* { margin: 0; padding: 0;} /* Gör så att top diven går i kanterna. Ingen onödig margin eller padding tillkommer. */
body { background: #2D567C url('http://static.tumblr.com/im2itiw/qXyljsml5/bg.jpg') fixed; color: #ccc; font: 12px 'Droid Sans',Lucida Grande,Arial,Helvetica; 
background-position:top;
background-repeat: no-repeat;
}

a {color: #222; text-decoration:none;}
h2 { padding-bottom: 5px; font: 18px #5A8F00 'Droid Sans';letter-spacing: 5px;} 
h2 a { color: #222; padding-bottom: 5px; font-size: 17px; letter-spacing: 5px;} 
img {border:medium none; opacity: 0.8;}
a img:hover{opacity: 1;}

/***** CLASSES **/
.smallleft { float: left; font-size:8px;}
.small {font-size:8px;}
.tiny {font-size:5px;}
.redheart {color:#ff0000; font-size:8px;  }
.redheart:hover{color:#000; font-size:8px; }

.left{ float:left; }
.right{ float:right; }
.clear {clear:both; }

.image {border: none;}
.text {letter-spacing: 2px; font: 0.8em verdana; padding-top: 5px;}


/* Wraper */
#wrapper { width: 650px;  margin: 0 auto; margin-bottom: 20px;}

/* Sidebar */
#sidebar { position: fixed; top: 30px;  }
#sidebar .profile { background: #000;  padding: 5px; margin-bottom: 5px;    -moz-border-radius:5px; border-radius:5px;}
#sidebar .profile  img{ width: 200px; height: 130px;  margin: 0 auto; 
 }

#sidebar .bubble  a{ color: #2A93AA;}
#sidebar .bubble  .h2{ font-size: 20px;}
/* Sidebar */



/* Posts */
.entry {float:right; width: 450px; margin-bottom: 25px;}
.post { -moz-border-radius:5px; border-radius:5px;
float:right; background: #000;  width: 400px; min-height: 30px; margin: 10px 0 0 10px; padding:5px;  
list-style-type: none; position: relative; }/*url('repeater.png')*/
.post h2{ margin: 0;  padding:0; }
.post img{  padding:0; margin: 0; max-width: 400px;}
.post p { margin:0; }
.post p.link { letter-spacing: 2px; }
.post p.asker { }
.post p.asker a {color: #83C5BA;  }


.post a {  text-decoration: none;  color: #2A9397;}
.post a:hover {	cursor: pointer;}
.post a img { margin: 0;	border: none;	}
 .caption { display: none; margin-top: 3px; letter-spacing: 2px; background: black; }
.post .quote { letter-spacing: 2px; }
/* Posts */


/* Navigation */
.previous { position:fixed;right:10px;top:200px;font:normal 20px/25px arial; color: #222;}
.next  { position:fixed;left:10px;top:200px;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 */



/** ********************** ************** *********************** **/


ul { list-style-type:none;}
li { list-style-type:none; padding: 5px; background: #000; margin: 5px 0 5px 0;}

ul#likes { 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: 200px; padding: 5px;  list-style-type: none;  -moz-border-radius:5px; border-radius:5px;}

li.like_post img { max-width: 200px; 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; }



strong.odd {color: #83C5BA;}

ol.notes { padding: 0px; margin: 25px 0px; list-style-type: none;}
ol.notes li.note { border-top: 1px solid #83C5BA; padding: 10px;  }
ol.notes li.note img.avatar { 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;  }
ol.notes li.note blockquote { border-left:10px solid #ccc; margin:30px 10px 5px 15px; padding:.5em 10px; 
quotes:"\201C""\201D""\2018""\2019";   }
ol.notes li.note blockquote a { text-decoration: none;            }

blockquote { border-left:5px solid #ccc; margin:10px 10px 5px 15px; padding:.5em 10px; quotes:"\201C""\201D""\2018""\2019"; }
blockquote:before { color: #5A8F00; content:open-quote; font-size:4em;line-height:.1em; margin-right:.25em;vertical-align:-.4em;}
blockquote p { display:inline; margin-left: 15px;}

object {  margin-top: 30px; }



#info { 
position: absolute;  left: 74%;  padding: 5px 5px 5px 25px;
color:#fff;   font-size:10px;   letter-spacing: 1px; line-height:9px; 
display: none; width: 200px; 
}
#info a{color:#fff;}
.entry:hover #info, #me:hover #info1{ display: block;  }

#info1 {
position: absolute;  right: 110%;  
color:#fff;   font-size:9px;   letter-spacing: 1px; line-height:9px; 
width:250px; height:50px; 
display: none;
}

 

/* Bubble with an isoceles triangle
------------------------------------------ */
.bubble{
   position:relative;
   padding:15px;
   margin:1em 0 3em;
 
   background: #000;

   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top,  #000;);
   background:linear-gradient(top,  #000;);
}
.bubble:before {
	content:"";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-40px; /* value = - border-top-width - border-bottom-width */
	left:40px; /* controls horizontal position */
	width:0;
	height:0;
	
}

/* creates the smaller  triangle */
.bubble:after {
	content:"";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-26px; /* value = - border-top-width - border-bottom-width */
	left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	width:0;
	height:0;
	
}/* creates the larger triangle */
.bubble.left:before {
	top:-10px; /* controls vertical position */
	left:-20px; /* value = - border-left-width - border-right-width */
	bottom:auto;

}

/* creates the smaller  triangle */
.bubble.left:after {
	top:10px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	left:-20px; /* value = - border-left-width - border-right-width */
	bottom:auto;
	border-width:9px 21px 9px 0;
	border-style:solid;
	border-color:transparent #000;
}

/* creates the larger triangle */
.bubble.right:before {
	top:15px; /* controls vertical position */
	right:-30px; /* value = - border-left-width - border-right-width */
	bottom:auto;
    left:auto;
	
}

/* creates the smaller  triangle */
.bubble.right:after {
	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	right:-21px; /* value = - border-left-width - border-right-width */
	bottom:auto;
    left:auto;
	border-width:9px 0 9px 21px;
	border-style:solid;
	border-color:transparent #000;
}