/*
Description: A website built on xhtml & css
Author: Mathias Eriksson
Author URI: http://iammath.com
*/
* { 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: #bbb;
background-position:top;
background-repeat: no-repeat;
}
/* me */
#me { position: fixed; top: 30px; left:400px; }
#me .profile { background: #000; padding: 5px; margin-bottom: 5px; -moz-border-radius:5px; border-radius:5px;}
#me .profile img{ width:128px; height: 128px; }
#me .bubble a{ color: #2A93AA;}
#me .bubble .h2{ font-size: 20px;}
#me:hover #info{ display: block; }
#info {
position: absolute; top:-10px; right: 120%;
color:#fff; font-size:13px; letter-spacing: 1px; line-height:9px;
width: 250px; height:50px;
display: none;
}
/* FoOter */
#footer { border-top: 1px solid #111; clear:both; width: 395px; margin-bottom: 25px;
min-height: 30px; margin: 0 0 0 235px; padding:5px 5px 5px 0; list-style-type: none; }
#footer a { color: #fff; }
#following ul{
width: 450px;
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; }
a { text-decoration:none; color: #CC3333; font-weight: bold;}
img {border:none; opacity: 0.7;}
img:hover {border:none; opacity: 0.9;}
/***** CLASSES **/
.left{ float:left; }
.right{ float:right; clear:right;}
.clear {clear:both; }
/* Wraper */
#wrapper { width: 650px; margin: 30px auto; }
/* Posts */
.entry { float:right; width: 420px; min-height: 30px; margin: 0px 0 0 130px; padding:5px;
list-style-type: squre; position: relative; -moz-border-radius:5px; border-radius:5px; }
.entry ol{ margin-left: 30px; }
/* ASK POSTS *************************/
.ask { background: #fff; padding: 5px 0 20px 20px;}
.ask h2{ font-family: 'BP Pong', verdana; font-size: 30px;}
.ask p{ padding: 0; margin: 0;}
p.who { padding:20px;}
p.who a{ text-decoration: underline; color: #222;}
span.thequestion { color: #666; font-size: 15px;}
span.thequestion a{ text-decoration: underline; color: #222;}
.answer{ color: #001;}
/* TEXT POSTS *************************/
.textpost { padding: 5px 20px 0px 20px; background: #000; }
.textpost p { padding:5px 0; margin: 0; }
.textpost ul { padding: 10px 0; margin-left: 25px; list-style-type: square;}
.textpost li { list-style-type: squre; }
.textpost blockquote { border-left:thin solid #81C0FE; margin: 10px 0 10px 20px; font-size: 12px; padding-left: 10px; }
.textpost blockquote img{ max-width: 360px; }
/* PHOTO POSTS *************************/
.photopost { padding: 5px; background: #000; }
.photopost a img{ margin:0; padding:0; }
/* PHOTOSET POSTS *************************/
.photosetpost { padding: 5px; background: #000; }
.photosetpost a img{ margin:0; padding:0; }
/* QUOTE POSTS *************************/
.quotepost { background: #000; padding: 5px 0 0 20px;font-size:12px; font-family: 'Droid Serif', arial, serif; letter-spacing: 2px; fletter-spacing: 5px; }
.quotepost .author{ text-align:right; margin-top: 5px; padding-right: 10px;}
.quotepost p{ margin-top: 10px; padding:0; line-height:1em;}
.quotepost p:first-letter{ font-weight: bold; text-transform: uppercase;}
.quotepost blockquote{ border: none; margin-top: 5px; padding:0; line-height:1.6em;}
/* CHAT POSTS *************************/
.chatpost { padding: 0; background: #000; padding: 5px 0 10px 20px; }
.chatpost ul { list-style-type:none; }
.chatpost li { list-style-type:none; display:block; max-width: 390px; padding: 5px; background: #111; margin: 5px 0 5px 0; }
/* LINK POSTS *************************/
.linkpost { padding: 0; background: #000; font-family: 'BP Pong'; font-size: 25px; padding: 5px 0 5px 20px;}
/* VIDEO POSTS *************************/
.videopost { padding: 5px;margin:0; background: #000; }
.videopost object { margin-top: 30px; border-radius: 10px; }
/* AUDIO POSTS *************************/
.audiopost { padding: 0; background: #000; padding: 5px 0 10px 20px; }
.audiopost p { font-size: 9px; }
/* CAPTIONS */
.caption { position:relative; padding:0px 15px 5px 10px; margin: 0; color:#333; background:#fff; }
.caption p {font-size:11px;margin: -2px 0 0 10px; padding: 10px 0; line-height:1em; }
.caption blockquote p{ border-left:thin solid #81C0FE; margin: 0 0 0 30px; font-size: 11px; padding-left: 5px; } /* Blockquote */
/* sTyle */
.ask, .textpost, .photopost, .photosetpost, .quotepost, .chatpost, .linkpost, .videopost, .audiopost, .hover {-moz-border-radius:5px; border-radius:5px; padding:10px;}
.hover2{ position: absolute; top:-5px; right:-73%; padding: 0 5px 5px 25px;
color:#fff; font-size:13px; letter-spacing: 1px; line-height:9px;
display: none; width: 300px; }
.hover2:first-letter { text-transform:uppercase;}
.hover2 p { margin: 3px 0;}
.hover2 blockquote p{ border-left:thin solid yellow; margin: 7px 0 7px 30px; font-size: 15px; padding: 3px; } /* Blockquote */
.entry:hover .hover2 {display:block; }
/** NOTES & Like Posts! **/
strong.odd {color: #CC3333;}
strong.even {color: #065DB0;}
/*
ul { margin:0; padding: 0; }
li { margin:0; padding: 0; } */
ul#likes { list-style-type: none; margin: 0; padding: 0;}
li.like_post {
width: 128px; padding: 5px 5px 0 5px; list-style-type: none; margin-bottom: 5px; background: #000; -moz-border-radius:5px; border-radius:5px;}
li.like_post img { max-width: 128px; 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: 400px;padding: 0px; margin: 5px 0 -1px 0; }
ol.notes li.note { display:block; background: transparent; list-style-type: square; padding: 0; margin: 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; }
/* Bubble with an isoceles triangle
------------------------------------------ */
.bubble{
position:relative;
padding:15px;
margin:1em 0 3em;
background: #000;
height: 100%;
/* 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:-1px; /* 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:-10px; /* 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;
}