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