/* -------------------------------------------------- *\ Lifestream StyleSheet by Vincent Pickering 2009 Hello! By all means have a look around, learn how things are done and pass on the knowledeg but please dont steal anything, it just wouldnt be very nice. --------------------------------------------------- General Setup \* -------------------------------------------------- */ body { font-family:Tahoma, Helvetica, Verdana, Sans-Serif; font-size: 62.5%; background: #f6f6f6 url("../images/lifestream_bg2.png") right 20px no-repeat; } #container { margin:auto; width:960px; border-bottom:6px solid #000000; } #header { border-bottom: 6px solid #000000; } .clear { clear:both; } a img { border:none; } /* -------------------------------------------------- *\ Typography \* -------------------------------------------------- */ .date { line-height:14px; } .date h2 { font-weight:normal; } .entryInner a { text-decoration: underline; } .entryInner a:hover { text-decoration: none; } .lastfm .entryInner a { font-size:1.2em; } .twitter .entryInner p { font-size:1.4em; line-height:1.4em; } #disclaimer { text-align:center; } .copyText h2 { font-size:2em; color:#333333; } .copyText p, .copyText h3 { font-size:1.3em; line-height: 1.2em; color:#333333; } /* -------------------------------------------------- *\ Header \* -------------------------------------------------- */ #header { position:relative; } #header a { display:block; } h1 a { width:482px; height:54px; background:transparent url("../images/logo.png") no-repeat; } h1 span { position:absolute; left:-9999px; } #lifestreamExplanation { position:absolute; top:12px; right:169px; } #lifestreamExplanation a span { position:absolute; left:-9999px; } #lifestreamExplanation a:link, #lifestreamExplanation a:visited { width:143px; height:30px; background:transparent url("../images/buttons/lifestream_blog_explanation.png") left 0 no-repeat; } #lifestreamExplanation a:hover { width:143px; height:30px; background:transparent url("../images/buttons/lifestream_blog_explanation.png") left -60px no-repeat; } #lifestreamExplanation a:active { width:143px; height:30px; background:transparent url("../images/buttons/lifestream_blog_explanation.png") left -30px no-repeat; } #aboutAuthor { position:absolute; top:12px; right:0; } #aboutAuthor a span { position:absolute; left:-9999px; } #aboutAuthor a:link, #aboutAuthor a:visited { width:149px; height:30px; background:transparent url("../images/buttons/about_author.png") left 0 no-repeat; } #aboutAuthor a:hover { width:149px; height:30px; background:transparent url("../images/buttons/about_author.png") left -60px no-repeat; } #aboutAuthor a:active { width:149px; height:30px; background:transparent url("../images/buttons/about_author.png") left -30px no-repeat; } /* -------------------------------------------------- *\ Main Container \* -------------------------------------------------- */ #main { margin:20px 0 0 0;} /* -------------------------------------------------- *\ Lifestream Explanation Page \* -------------------------------------------------- */ #lifestreamPic { float:left; } .mePic { background:transparent url("../images/me.jpg") bottom left no-repeat; } #lifestream { float:left; margin:0 0 0 20px; width:600px; } .copyText h2, .copyText h3 { margin-top:0; } .copyText a:link, .copyText a:active, .copyText a:visited { text-decoration:none; border-bottom:1px dotted #248cdc; color:#248cdc; } .copyText a:hover { border-bottom:none; color:#248cdc; } /* -------------------------------------------------- *\ About Explanation Page \* -------------------------------------------------- */ #about { margin-left:300px; width:600px;} /* -------------------------------------------------- *\ Lifestream Setup \* -------------------------------------------------- */ .dateEntry { float:left; clear:left; width:960px; margin:0 0 10px 0; } .date { float:left; clear:left; margin:10px 0 10px 5px; padding:0 0 0 10px; width:70px; height:35px; color:#ffffff; background-color:#04acea; } .entry { float:left; position:relative; margin:0 10px 10px 0; width:230px; height:230px; overflow:hidden; } /* -------------------------------------------------- *\ Last FM \* -------------------------------------------------- */ .lastfm { background:transparent url("../images/canvas/lastfm_entry_bg.png") no-repeat; } .lastfm .entryInner { position:absolute; bottom:0; left:0; margin:0 8px 8px 8px; color:#ffffff; background-color:#000;} .lastfm .entryInner p { min-height:30px; width:207px; padding:0 2px 0 5px; } .lastfm .entryInner a:link, .lastfm .entryInner a:active, .lastfm .entryInner a:visited { text-decoration:none; border-bottom:1px dotted #ffffff; color:#ffffff; } .lastfm .entryInner a:hover { border-bottom:none; color:#ffffff; } /* -------------------------------------------------- *\ Twitter \* -------------------------------------------------- */ .twitter { background:transparent url("../images/canvas/twitter_entry_bg.png") no-repeat; } .twitter .entryInner { position:absolute; top:10px; left:25px; } .twitter .entryInner p { color:#333333; width:180px; overflow:hidden; } .twitter .entryInner a:link, .twitter .entryInner a:active, .twitter .entryInner a:visited { text-decoration:none; border-bottom:1px dotted #248cdc; color:#248cdc; } .twitter .entryInner a:hover { border-bottom:none; color:#248cdc; } /* -------------------------------------------------- *\ Tumblr \* -------------------------------------------------- */ .tumblr { background:transparent url("../images/canvas/entry_bg.png") no-repeat; } .tumblr .entryInner { position:absolute; top:5px; left:6px; width:219px; height:219px; overflow:hidden; } .post { position:absolute; left:-30%; top:-30%; z-index:1; } .inspiredBy { position:absolute; right:0; top:0;width:141px; height:84px; background:transparent url("../images/inspiration_banner.png") no-repeat; z-index:99; } /* -------------------------------------------------- *\ flickr \* -------------------------------------------------- */ .flickr { background:transparent url("../images/canvas/entry_bg.png") no-repeat; } .flickr .entryInner { position:absolute; top:5px; left:6px; width:219px; height:219px; overflow:hidden; } /* -------------------------------------------------- *\ Social Link Icons \* -------------------------------------------------- */ #footer { float:left; clear:both; } #SocialLinkIcons { float:left; margin:20px 0 0 224px; } #SocialLinkIcons a { height: 33px; } #SocialLinkIcons a span { position:absolute; left:-9999px; } #twitterLink { float:left; margin:0; } #twitterLink a { display:block; width:137px; background:transparent url("../images/social_links/twitter.png") left 0 no-repeat; } #twitterLink a:hover { width:137px; background:transparent url("../images/social_links/twitter.png") left -33px no-repeat; } #lastfmLink { float:left; margin:0 0 0 20px; } #lastfmLink a { display:block; width:34px; background:transparent url("../images/social_links/last_fm.png") left 0 no-repeat; } #lastfmLink a:hover { width:34px; background:transparent url("../images/social_links/last_fm.png") left -33px no-repeat; } #tumblrLink { float:left; margin:0 0 0 20px; } #tumblrLink a { display:block; width:113px; background:transparent url("../images/social_links/tumblr.png") left 0 no-repeat; } #tumblrLink a:hover { width:113px; background:transparent url("../images/social_links/tumblr.png") left -33px no-repeat; } #linkedinLink { float:left; margin:0 0 0 20px; } #linkedinLink a { display:block; width:32px; background:transparent url("../images/social_links/linkedin.png") left 0 no-repeat; } #linkedinLink a:hover { width:32px; background:transparent url("../images/social_links/linkedin.png") left -33px no-repeat; } #flickrLink { float:left; margin:0 0 0 20px; } #flickrLink a { display:block; width:106px; background:transparent url("../images/social_links/flickr.png") left 0 no-repeat; } #flickrLink a:hover { width:106px; background:transparent url("../images/social_links/flickr.png") left -33px no-repeat; } #disclaimer { clear:left; width:960px; padding:10px 0 20px 0; text-align:center; color:#9a9a9a; }