matthiasm@6: /* General layout */
matthiasm@6: 
matthiasm@6: * {
matthiasm@6:   font-size: 100.01%;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: html {
matthiasm@6:   font-size: 10px;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: * + html {
matthiasm@6:   font-size: 62.5%;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: * html {
matthiasm@6:   font-size: 62.5%;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: body {
matthiasm@6:   background-color: #DCDBD9;
matthiasm@6:   margin: 0;
matthiasm@6:   padding: 0;
matthiasm@6:   font-family: "Lucida Sans", "Lucida Grande", sans-serif;
matthiasm@6:   color: #444;
matthiasm@6:   background-image: url("http://cdn.last.fm/blog/images_layout/body_bg.jpg");
matthiasm@6:   background-position: center top;
matthiasm@6:   background-repeat: repeat-x;
matthiasm@6:   background-attachment: fixed;
matthiasm@6:   font-style: normal;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#outerWrapper {
matthiasm@6:   background-image: url("http://cdn.last.fm/blog/images_layout/wrapper_bg.png");
matthiasm@6:   background-position: center top;
matthiasm@6:   background-repeat: repeat-y;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: * + html div#outerWrapper {
matthiasm@6:   width: 868px;
matthiasm@6:   padding: 0 20px;
matthiasm@6:   margin: 0 auto;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#wrapper {
matthiasm@6:   width: 868px;  
matthiasm@6:   margin: 0 auto;
matthiasm@6:   padding: 0;
matthiasm@6:   background-image: url("http://cdn.last.fm/blog/images_layout/header_bg.jpg");
matthiasm@6:   background-position: center top;
matthiasm@6:   background-repeat: no-repeat;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#main {
matthiasm@6:   margin-top: 60px;
matthiasm@6:   width: 525px;
matthiasm@6:   margin-left: 50px;
matthiasm@6:   float: left;
matthiasm@6:   display: inline;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#sidebar {
matthiasm@6:   width: 184px;
matthiasm@6:   float: right;
matthiasm@6:   display: inline;
matthiasm@6:   margin-right: 25px;
matthiasm@6:   min-height: 200px;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* the header */
matthiasm@6: 
matthiasm@6: div#header {   
matthiasm@6:   height: 97px;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#header h1 {
matthiasm@6:   display: block;
matthiasm@6:   height: 95px;
matthiasm@6:   width: 380px;
matthiasm@6:   margin: 0;
matthiasm@6:   padding: 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#header h1 a {   
matthiasm@6:   display: block;
matthiasm@6:   height: 95px;
matthiasm@6:   width: 380px;
matthiasm@6:   font-size: 0;
matthiasm@6:   line-height: 0;
matthiasm@6:   text-indent: -9999px;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* the articles */
matthiasm@6: 
matthiasm@6: div.hentry {
matthiasm@6:   padding: 0 0 50px 0;
matthiasm@6:   position: relative;
matthiasm@6:   zoom: 1;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div.entry-content {
matthiasm@6:   width: 370px;
matthiasm@6:   float: left;
matthiasm@6:   overflow: hidden;
matthiasm@6:   margin-bottom: 0.8em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: a {
matthiasm@6:   color: #7F7153;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: a:hover {
matthiasm@6:   color: #7F7153;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: h2,
matthiasm@6: h3,
matthiasm@6: h4,
matthiasm@6: h5,
matthiasm@6: h6 {
matthiasm@6:   color: #444;
matthiasm@6:   font-family: Georgia, serif;
matthiasm@6:   font-weight: normal;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: h2 a,
matthiasm@6: h3 a,
matthiasm@6: h4 a,
matthiasm@6: h5 a,
matthiasm@6: h6 a {
matthiasm@6:   text-decoration: none;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: h2 a:hover,
matthiasm@6: h3 a:hover,
matthiasm@6: h4 a:hover,
matthiasm@6: h5 a:hover,
matthiasm@6: h6 a:hover {
matthiasm@6:   text-decoration: underline;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: h2 {
matthiasm@6:   font-size: 1.8em;
matthiasm@6:   margin: 1.5238em 0 0.7619em 0;
matthiasm@6:   color: #7F7153;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: h3 {
matthiasm@6:   font-size: 1.8em;
matthiasm@6:   margin: 1.1666667em 0 0.7777em 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: h4 {
matthiasm@6:   font-size: 1.6em;
matthiasm@6:   margin: 1.5em 0 1em 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: h5 {
matthiasm@6:   font-size: 1.4em;
matthiasm@6:   margin: 1.7142em 0 1.1428em 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: h6 {
matthiasm@6:   font-size: 1.4em;
matthiasm@6:   margin: 1.6em 0 0.8em 0;
matthiasm@6:   color: #AAA;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: p {
matthiasm@6:   font-size: 1.1em;
matthiasm@6:   line-height: 1.7em;
matthiasm@6:   text-indent: 0;
matthiasm@6:   margin: 0 0 0.8em 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* captions for images */
matthiasm@6: 
matthiasm@6: p.caption {
matthiasm@6:     color: #999;
matthiasm@6:     margin-top: -1em;
matthiasm@6:     line-height: 1.3em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: p.caption a {
matthiasm@6:     color: #999;
matthiasm@6:     text-decoration: none;
matthiasm@6:     border-bottom: solid 1px #DDD;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: p.caption a:hover {
matthiasm@6:     text-decoration: none;
matthiasm@6:     border-bottom: solid 1px #AAA;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: abbr,
matthiasm@6: img {
matthiasm@6:   border: none;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: img.right {
matthiasm@6:     float: right;
matthiasm@6:     display: inline;
matthiasm@6:     margin: 0 0 0 10px;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: img.left {
matthiasm@6:     float: left;
matthiasm@6:     display: inline;
matthiasm@6:     margin: 0 10px 0 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* quotes */
matthiasm@6: 
matthiasm@6: blockquote {
matthiasm@6:   font-family: Georgia, serif;
matthiasm@6:   font-style: italic;
matthiasm@6:   color: #777;
matthiasm@6:   margin: 0 1.6em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: blockquote p {
matthiasm@6:   font-size: 1.5em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* code and irc stuff */
matthiasm@6: 
matthiasm@6: code {
matthiasm@6:   font-size: 1.0909091em;
matthiasm@6:   background-color: #E5E5E5;
matthiasm@6:   color: #444;
matthiasm@6:   padding: 0 0.1em;
matthiasm@6:   line-height: 1.5833333em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: ol.code {
matthiasm@6:   list-style-type: none;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: ol.code li {
matthiasm@6:   margin: 0;
matthiasm@6:   padding: 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: ol.code li code {
matthiasm@6:   background: transparent;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: pre {
matthiasm@6:     overflow: auto;
matthiasm@6:     background: #E5E5E5;
matthiasm@6:     color: #444;
matthiasm@6:     padding: 0.5em;
matthiasm@6:     border: solid 1px #CCC;
matthiasm@6:     width: 355px;
matthiasm@6:     margin: 0 0 0.8em 0;
matthiasm@6:     font-size: 1.1em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: blockquote.irc {
matthiasm@6:     font-family: monospace;
matthiasm@6:     font-style: normal;
matthiasm@6:     font-size: 1em;
matthiasm@6:     color: #444;
matthiasm@6:     margin: 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: blockquote.irc p {
matthiasm@6:     font-size: 1.1em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* lists */
matthiasm@6: 
matthiasm@6: ul,
matthiasm@6: ol {
matthiasm@6:   margin: 0.8em 0;
matthiasm@6:   padding: 0;
matthiasm@6:   font-size: 1.1em;
matthiasm@6:   line-height: 1.7em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: li {
matthiasm@6:   margin: 0 0 0.4em 1.6em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: ol li *,
matthiasm@6: ul li * {
matthiasm@6:   font-size: 1em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: h2.entry-title {
matthiasm@6:   margin: 0;
matthiasm@6:   font-weight: normal;
matthiasm@6:   border-top: solid 1px #D7D7D7;
matthiasm@6:   padding: 0.333333em 130px 0 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: h5.subhead {
matthiasm@6:   font-size: 1.2em;
matthiasm@6:   margin: 0.25em 0 1em 0;
matthiasm@6:   color: #888;
matthiasm@6:   font-weight: normal;
matthiasm@6:   font-style: italic;
matthiasm@6:   padding-bottom: 0.5em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: h6.details {
matthiasm@6:   width: 130px;
matthiasm@6:   float: right;
matthiasm@6:   display: inline;
matthiasm@6:   margin: 0;
matthiasm@6:   font-family: "Lucida Sans", "Lucida Grande", sans-serif;
matthiasm@6:   font-size: 1.1em;
matthiasm@6:   color: #7F7153;
matthiasm@6:   line-height: 1.7em;
matthiasm@6:   font-weight: normal;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: h6.details a.photo_wrapper {
matthiasm@6:   position: absolute;
matthiasm@6:   top: 1px;
matthiasm@6:   right: 80px;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: h6.details img.photo {
matthiasm@6:   width: 50px;
matthiasm@6:   height: 50px;
matthiasm@6:   border: none;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: p.meta {
matthiasm@6:   color: #888;
matthiasm@6:   font-weight: normal;
matthiasm@6:   font-size: 1.4em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: p.meta a {
matthiasm@6:   color: #888;
matthiasm@6:   text-decoration: none;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: p.comments-link {
matthiasm@6:   clear: both;
matthiasm@6:   font-size: 1.2em;
matthiasm@6:   color: #888;
matthiasm@6:   font-style: italic;
matthiasm@6:   font-family: Georgia, serif;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: p.comments-link a {
matthiasm@6:   color: #888;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* next/previous page links */
matthiasm@6: 
matthiasm@6: ul#pagelinks,
matthiasm@6: ul#pagelinks li {
matthiasm@6:   list-style-type: none;
matthiasm@6:   margin: 0 0 1em 0;
matthiasm@6:   padding: 0;
matthiasm@6:   overflow: hidden;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: ul#pagelinks {
matthiasm@6:     clear: both;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: ul#pagelinks li#next {
matthiasm@6:   width: 48%;
matthiasm@6:   float: right;
matthiasm@6:   display: inline;
matthiasm@6:   text-align: right;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: ul#pagelinks li#previous {
matthiasm@6:   width: 48%;
matthiasm@6:   float: left;
matthiasm@6:   display: inline;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: ul#pagelinks li a {
matthiasm@6:   text-decoration: none;
matthiasm@6:   color: #999;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: ul#pagelinks li strong {
matthiasm@6:   text-decoration: underline;
matthiasm@6:   font-weight: normal;
matthiasm@6:   color: #7F7153;
matthiasm@6:   font-style: normal;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* the footer */
matthiasm@6: 
matthiasm@6: div#footer {
matthiasm@6:   height: 106px;
matthiasm@6:   padding: 100px 50px 0 275px;
matthiasm@6:   background-image: url("http://cdn.last.fm/blog/images_layout/footer_bg.jpg");
matthiasm@6:   background-position: left top;
matthiasm@6:   background-repeat: no-repeat;
matthiasm@6:   clear: both;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* the sidebar */
matthiasm@6: 
matthiasm@6: div#sidebar * {
matthiasm@6:   color: #999;
matthiasm@6:   font-family: "Lucida Sans", "Lucida Grande", sans-serif;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#sidebar h2 {
matthiasm@6:   border-top: solid 1px #CCC;
matthiasm@6:   margin: 0 0 0.363636em;
matthiasm@6:   padding: 1em 0 0 0;
matthiasm@6:   font-size: 1.1em;
matthiasm@6:   font-weight: bold;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#sidebar ul,
matthiasm@6: div#sidebar ul li {
matthiasm@6:   margin: 0;
matthiasm@6:   padding: 0;
matthiasm@6:   list-style-type: none;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#sidebar div#quilt,
matthiasm@6: div#sidebar div#go-cam {
matthiasm@6:   margin: 2em 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#sidebar div#quilt h2,
matthiasm@6: div#sidebar div#go-cam h2 {
matthiasm@6:   margin-bottom: 1.272727em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#sidebar a {
matthiasm@6:   text-decoration: none;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#sidebar a:hover {
matthiasm@6:   text-decoration: underline;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* comments */
matthiasm@6: 
matthiasm@6: div#comments {
matthiasm@6:   clear: both;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments h2 {
matthiasm@6:   margin-bottom: 0.5em
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments div.comments-wrapper h2 {
matthiasm@6:   border-bottom: solid 1px #D7D7D7;
matthiasm@6:   padding-bottom: 0.5em;
matthiasm@6:   margin-bottom: 1em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments ol {
matthiasm@6:   margin: 0 0 4em 0;
matthiasm@6:   padding: 0;
matthiasm@6:   list-style-type: none;
matthiasm@6:   overflow: hidden;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments ol li {
matthiasm@6:   border-top: solid 1px #D7D7D7;
matthiasm@6:   margin: 0 0 1.7em 0;
matthiasm@6:   width: 370px;
matthiasm@6:   padding: 1em 155px 0 0;
matthiasm@6:   overflow: hidden;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments ol li.own {
matthiasm@6:     background-color: #eee;
matthiasm@6:     border-top-width: 5px;
matthiasm@6:     margin-bottom: 0;
matthiasm@6:     padding-bottom: 1.7em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments ol li.own div.entry-content {
matthiasm@6:     padding-left: 15px;
matthiasm@6:     width: 355px;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments ol li.own h6,
matthiasm@6: div#comments ol li.own h6 a,
matthiasm@6: div#comments ol li.own h6 span.date {
matthiasm@6:     color: #252525;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments ol li.own h6 a:hover {
matthiasm@6:     color: #151515;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments h6 {
matthiasm@6:   font-size: 1em;
matthiasm@6:   margin-right: -155px;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments h6 a {
matthiasm@6:   border-bottom: solid 1px #DADADA;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments h6 a:hover {
matthiasm@6:   border-bottom: solid 1px #AAA;
matthiasm@6:   text-decoration: none;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments h6 span.date a {
matthiasm@6:     border: 0;
matthiasm@6:     cursor: text;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments a.entry-title {
matthiasm@6:   display: none;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* comment form */
matthiasm@6: 
matthiasm@6: div#comments ul {
matthiasm@6:   margin: 0;
matthiasm@6:   padding: 0;
matthiasm@6:   list-style-type: none;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments ul li {
matthiasm@6:   margin: 0 0 1em 0;
matthiasm@6:   padding: 0 0 0 7em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments ul label {
matthiasm@6:   float: left;
matthiasm@6:   display: inline;
matthiasm@6:   margin-left: -7em;
matthiasm@6:   width: 6em;
matthiasm@6:   text-align: right;
matthiasm@6:   font-style: italic;
matthiasm@6:   color: #999;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments ul input,
matthiasm@6: div#comments ul textarea {
matthiasm@6:   font-size: 1.181818em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments ul textarea {
matthiasm@6:   width: 28em;
matthiasm@6:   height: 16em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: p#smallStuff {
matthiasm@6:   padding-left: 7em;
matthiasm@6:   margin-top: 3em;
matthiasm@6:   color: #999;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: p#smallStuff input {
matthiasm@6:   font-size: 10px;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: p#smallStuff a {
matthiasm@6:   color: #999;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* comments errors */
matthiasm@6: 
matthiasm@6: div#comments div#cpreview {
matthiasm@6:   margin: 3em -10px 0 -10px;
matthiasm@6:   padding: 10px;
matthiasm@6:   background: #ECEBEB;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments h3 {
matthiasm@6:   margin-top: 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments div.error h3 {
matthiasm@6:   color: #D10F3C;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments h3 em {
matthiasm@6:   color: #7F7153;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments h5.subhead {
matthiasm@6:   margin: -0.5em 0 1em 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div#comments div#cpreview ol {
matthiasm@6:   margin: 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* feed link */
matthiasm@6: 
matthiasm@6: a#feedlink {
matthiasm@6:     background-image: url("http://cdn.last.fm/blog/images_layout/feedicon_sidebar.gif");
matthiasm@6:     background-position: left center;
matthiasm@6:     background-repeat: no-repeat;
matthiasm@6:     padding-left: 16px;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: /* stuff */
matthiasm@6: 
matthiasm@6: * html .clearit {
matthiasm@6:   height: 1%; /* IE5-6 */
matthiasm@6: }
matthiasm@6: 
matthiasm@6: * + html .clearit {
matthiasm@6:   display: inline-block; /* IE7xhtml*/
matthiasm@6: }
matthiasm@6: 
matthiasm@6: div.hentry:after,
matthiasm@6: .clearit:after {
matthiasm@6:   content: ".";
matthiasm@6:   display: block;
matthiasm@6:   height: 0;
matthiasm@6:   clear: both;
matthiasm@6:   visibility: hidden;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: body#archive dl {
matthiasm@6:   margin: 0;  
matthiasm@6:   padding: 0;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: body#archive dl dt {
matthiasm@6:   margin: 1.5em 0 0.5em 0;
matthiasm@6:   padding: 0;
matthiasm@6:   font-size: 1.8em;
matthiasm@6:   font-family: Georgia, serif;
matthiasm@6:   color: #888;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: body#archive dl dd {
matthiasm@6:   margin: 0 0 1em 0;
matthiasm@6:   padding: 0;
matthiasm@6:   font-size: 1.1em;
matthiasm@6:   color: #888;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: body#archive dl dd span {
matthiasm@6:   font-family: Georgia, serif;
matthiasm@6:   font-size: 1.0909091em;
matthiasm@6: }
matthiasm@6: 
matthiasm@6: body#archive dl dd span.rssCmntCnt {
matthiasm@6:     font-family: "Lucida Sans", "Lucida Grande", sans-serif;
matthiasm@6:     font-size: 1em;
matthiasm@6: }