/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Filename: screen.css * Version: 1.0.1 (2008-02-28) * Website: http://www.moose56.com * Author: David Madden * Description: Handles all site styles. == STRUCTURE: =========================================== * Page width: 699 px blog img 237 x 181 flickr img 240 x 181 projects img 240 x 181 ========================================================= == COMMENTS: ============================================ * The basic layout of the file is: * 1. Imports to the boilerplate CSS styles taken from http://code.google.com/p/css-boilerplate/ (This version is used insted of BluePrint as I do not require lagre amounts of the BluePrint code) * 2. The custom styles for the site. (Inspiration and help have been credited withing the comments, hopefully) ========================================================= == CREDITS: ============================================ * The #links and logo image replacement technique * impliments the Gilder/Levin Method. Details can be found * here: * http://www.mezzoblue.com/tests/revised-image-replacement/#gilderlevin. * Some of the other styles for the #links and * #recent-activity sections are adapted from * Veerle Pieters at: http://veerle.duoh.com/ * and talked about here: * http://www.smileycat.com/miaow/archives/000230.php * The basic stles for the #recent-activity ol were * adapted from the Rollover list writen by Russ Weakley * and can be found on the listamatic web stite here: * http://css.maxdesign.com.au/listamatic/vertical08.htm ========================================================= == INDEX: =============================================== _boilerplate : BoilerPlate Imports _general : General layout and centering _branding : Style the header _links : Style the web page links _recent : Style the recent activity links _credits : Style the copyright and footer _blogroll : Style the blogroll page ========================================================= */ /* _boilerplate ==========================================*/ @import "lib/reset.css"; @import "lib/typography.css"; /*@import "lib/forms.css"; @import "lib/plugins.css";*/ /* _general ==========================================*/ body { min-width: 751px; } #wrap { margin:0 auto;width:699px; } /* _branding ==========================================*/ #branding { width: 699px;height: 400px;position: relative;clear: both; } #branding h1 { font-size: 2.3em;width: 272px;height: 76px;position: absolute;left: 0px;top: 200px;overflow: hidden; padding-top: 5px; } #branding h1 span#header-image { position: absolute;width: 100%;height: 100%; background: url(../img/title.jpg) no-repeat; } #branding h1 span#sub{ display: block;font-size: 60%;color: #767676; } #branding img#venice { position: absolute;top: 174px;right: 256px; } #branding img#mull { position: absolute;top: 174px;right: 128px; } #branding img#iona { position: absolute;top: 174px;right: 0px; } /* _links ==========================================*/ #links { width: 699px;float: left; } #links h2 { display: none; } #links ul { display: inline;list-style:none;width: 699px;float:left;margin: 0px; } #links ul li { padding: 0px;margin: 0px;float: left;width: 233px;height: 90px;display: inline;overflow: hidden; } * html #links ul#sections li a { width: 233px; } #links ul#sections li a { width: 233px;height: 90px;padding: 0px;text-decoration: none;display: block;position: relative;font-size: 100%;color: #c7c7c7;} #links ul#sections a em { display: block;margin-bottom: .5em;font-weight: bold;} #links ul#sections a span, div#links ul#sections a:hover span { position: absolute;width: 100%;height: 100%; } /* section link style */ #links ul#sections li#my-blog a span { background: url(../img/blog.jpg) no-repeat -2px -1px; } #links ul#sections li#my-flickr a span { background: url(../img/flickr.jpg) no-repeat -5px -1px; } #links ul#sections li#my-twitter a span { background: url(../img/twitter.jpg) no-repeat -5px -1px; } /* hover styles*/ #links ul#sections li#my-blog a:hover span { background: url(../img/blog.jpg) no-repeat -2px -90px; } #links ul#sections li#my-flickr a:hover span { background: url(../img/flickr.jpg) no-repeat -5px -90px; } #links ul#sections li#my-twitter a:hover span { background: url(../img/twitter.jpg) no-repeat -5px -90px; } /* _recent ==========================================*/ #recent-activity { width: 699px;float: left;margin-bottom: 40px;position: relative; } #recent-activity #blog { padding-left: 7px; } #recent-activity #flickr { padding-left: 12px; } #recent-activity #twitter { padding-left: 13px; } #recent-activity div.link-list { width: 220px;margin: 0;padding: 0; float: left; } #recent-activity div.link-list h3 { display: none; } #recent-activity div.link-list ol { width: 220px; margin: 0;padding: 0;list-style-type: none;font-family: Arial, Helvetica, sans-serif; } #recent-activity div.link-list ol li { width: 220px; margin: 0;padding: 0;} #recent-activity div.link-list li a { padding: .5em 0;margin: 0;display: block;width: 220px;border-bottom: 1px solid #eee;text-decoration: none;color: #c7c7c7; } #recent-activity div.link-list li a:hover { color: #767676; } #recent-activity div.link-list li a span { color: #d0d0d0;display: block;font-size: 80%;font-style: italic; } /* the background image is hidden 400px out of view but will be loaded */ #recent-activity div#flickr.link-list a { background: url(../img/flickr_link_bg.jpg) no-repeat right 400px; } #recent-activity div#blog.link-list a { background: url(../img/blog_link_bg.jpg) no-repeat right 400px; } #recent-activity div#twitter.link-list a { background: url(../img/twitter_bg.jpg) no-repeat right 400px; } /* the background image is mooved into view */ #recent-activity div#flickr.link-list a:hover { background: url(../img/flickr_link_bg.jpg) no-repeat right center; } #recent-activity div#blog.link-list a:hover { background: url(../img/blog_link_bg.jpg) no-repeat right center; } #recent-activity div#twitter.link-list a:hover { background: url(../img/twitter_bg.jpg) no-repeat right center; } /* _credits ==========================================*/ #credits { clear: both; color: #ccc;width: 699px;clear: both;padding: 0;margin-bottom: 30px; } #credits h3 { display: none; } #credits ul { list-style: none;padding: 0;margin: 0;text-align: center;font-size: 75%; } #credits ul li { padding: 0;margin: 0;line-height: 1.4; } #credits ul li a { color: #ccc; text-decoration: underline; } #credits ul li a:hover { color: #787878; text-decoration: underline; } /* _blogroll ==========================================*/ body#blogroll { min-width: 750px; } body#blogroll #wrap { margin:0 auto;width:750px; } body#blogroll #blogroll-container { width: 750px;text-align: center; } body#blogroll #blogroll-container h1 { display: none; } body#blogroll #blogroll-container p#intro { width: 750px;color: #4b4b4b;margin: 30px auto 40px;font-size: 1.8em;line-height: 1.2em;text-align: center; } body#blogroll #blogroll-container p#blog-links { width: 750px;font-size: 1.6em;line-height: 1.5em; } body#blogroll #blogroll-container p#blog-links a { color: #777;white-space: nowrap; } body#blogroll #blogroll-container p#blog-links a:hover { border-bottom: 3px solid #777; text-decoration: none;} body#blogroll #blogroll-container p#blog-links a.alt { color: #d3d3d3; } body#blogroll #blogroll-container p#blog-links a.alt:hover { border-bottom: 3px solid #d3d3d3; }