/* -------------------------------------------------------------------------------- * Basic stuff and typography * -------------------------------------------------------------------------------- */ body, form, p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } /* Base font */ body { font-size: 62.5%; } html>body { font-size: 10px; } html body { font: 11px/14px 'Lucida Grande', Geneva, Arial, sans-serif; } /* Body text */ .desc p, .desc li { font: 12px/16px Times, 'Times New Roman', serif; } .description, .note { font: 11px/12px Times, 'Times New Roman', serif; } /* Text color */ body, a, h1 a:hover { color: #2c2c2c; } /* Headers */ h1, h2, h3, h4, h5 { font-weight: normal; font-size: 11px; line-height: 14px; letter-spacing: normal; } h1 #title { border-bottom: 1px solid #000; } h1 a { text-decoration: none; } h3 { font-size: 9px; } h5 { font-weight: bold; } /* Links */ a:focus { outline: none !important; } a img { border: none; } a:hover { color: #000; } #current_order { text-decoration: underline; } #current_order:hover, .project .desc a:hover, .assets p.description a:hover, .assets .contents a:hover, .assets .permalink a:hover, #footer a:hover { color: red; } /* Body text */ .assets .desc p.first, .assets .contents p.first { margin-top: 0; } .assets .desc p, .assets .contents p { margin-top: 1em; } .assets .desc .line-start { padding-left: 17px; } .assets .contents .line-start { padding-left: 1em; } /* Other */ /* Other */ em { font-style: italic; top: auto; text-align: center; vertical-align: text-top; } strong { font-weight: bold; } pre { font-size: 12px; } sup { font-size: 9px; } /* Lists */ div.desc ul, div.desc ol, div.desc li { padding-left: 0; margin: 0; } div.desc ul, div.desc ol { margin-left: 17px; } /* -------------------------------------------------------------------------------- * Page * -------------------------------------------------------------------------------- */ body { padding: 41px 0 27px 96px; } h1 { cursor: hand; cursor: pointer;} #loading { display: block; position: absolute; left: 200px; top: 45px; } img.preloading { position: absolute; left: -9999px; top: -9999px; } /* -------------------------------------------------------------------------------- * All Projects * -------------------------------------------------------------------------------- */ #projects, #projects li.project { list-style-type: none; margin: 0; padding: 0; } #projects { margin: 1px 0 0 1px; } #projects h2 { width: 600px; height: 22px; margin-top: 6px; cursor: pointer; cursor: hand; background-repeat: no-repeat; } #projects.by-cat-no h2 { background-position: -2px 0; } #projects.by-name h2 { background-position: 0 -22px; } #projects.by-type h2 { background-position: -1px -44px; } #projects.by-year h2 { background-position: -1px -66px; } #projects h2 a { display: block; width: 100%; height: 100%; text-indent: -999px; } #projects h2 a:hover, #projects .active h2 a { height: 15px; width: 630px; } #projects .viewed h2 { opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); } /* -------------------------------------------------------------------------------- * Each Project * -------------------------------------------------------------------------------- */ .assets { padding-top: 12px; } /* Shared */ .assets .desc, .assets .images, .assets .extras, .assets .permalink { margin-bottom: 17px; position: relative; } .assets .images { margin-bottom: 10px; } .assets img.indicator { display: block; margin: 30px 0; } /* Header */ .assets h3 { position: absolute; left: -52px; top: 0; text-align: right; width: 40px; } .assets .desc h3, .assets .permalink h3 { top: 1px; } html.win.gecko .assets .desc h3, .assets .permalink h3 { top: 2px; } html.safari .assets .desc h3 { top: 2px; } html.safari .assets .permalink h3 { top: 1px; } /* Description */ .assets .desc { width: 350px; } .assets .desc p.shop { padding-left: 16px; border-left: 1px solid #2C2C2C; } /* Assets */ .assets ul.asset-list { list-style-type: none; display: table; margin: 0; padding: 0; } .assets ul.asset-list.with-last-description { padding-right: 100px; } /* This style is also set in Safari 2 by Project#showLoadingIndicators to make them unique */ .assets div.loading { height: 73px; background: url('http://managementfordoctors.org/robportfolio/Xu/Images/indicator.gif') no-repeat; } html.js ul.asset-list li { vertical-align: bottom; display: table-cell; margin: 0; padding: 0; } .assets div.wrap { position: relative; margin-right: 3px; } html.js .assets p.description { position: absolute; right: -110px; top: 5px; width: 80px; padding: 10px 20px 0 0; background: url('http://managementfordoctors.org/robportfolio/Xu/Images/arrow-left.gif') no-repeat top left; } html.js.gecko .assets p.description { top: 7px; } .assets img.loading { background: #000 url('http://managementfordoctors.org/robportfolio/Xu/Images/indicator_black.gif') center center no-repeat; cursor: default; } /* Assets -- Text */ .assets .enlarged { border-right: 3px solid #fff; border-bottom: 3px solid #fff; padding-top: 1px; } .text img { cursor: pointer; cursor: hand; } html.js .text h4, html.js .text p.close { position: absolute; top: -30px; } .text h4 { left: 15px; text-decoration: underline; } .text p.close { left: 198px; } .text .contents { width: 201px; height: 207px; overflow: auto; } html.js .text .contents { margin: 47px 12px 20px 15px; padding-right: 9px; } html.js li.text .contents p { margin: 0 2px 10px 0; } /* Assets -- Notes */ .assets .note ul { display: block; list-style-type: none; margin: 0 3px 3px; padding-left: 3px; } .assets .note ul li { display: list-item; } /* URL/Permalink */ .assets .permalink { margin-bottom: 24px; } /* -------------------------------------------------------------------------------- * Footer * -------------------------------------------------------------------------------- */ #footer { margin-top: 55px; width: 570px; } html.js #footer.fixed { position: absolute; bottom: 0; padding-bottom: 33px; } html.js #footer.static { position: static; bottom: 0; margin-bottom: 6px; } #footer #last-modified { margin-right: 12px; } /* -------------------------------------------------------------------------------- * Navigation (sort-on menu and it's alternatives) & show/hide all * -------------------------------------------------------------------------------- */ #navigation, #sort_on_menu { list-style-type: none; margin: 0; padding: 0; } #navigation li { float: left; margin: 0; padding: 0; margin-right: 24px; } #navigation li#feed, #navigation li ul li { margin-right: 0; } /* Since #navigation>li wont work in IE */ #navigation .delimeter { padding: 0; } #navigation #sort_on { position: relative; cursor: pointer; cursor: hand; } #navigation #sort_on_menu { margin: -65px 0 0 4px; position: absolute; background: #fff; z-index: 200; } #navigation #sort_on_menu li { float: none; } #navigation #sort_on_menu a { display: block; width: 58px; height: 16px; padding-left: 2px; background-color: #fff; margin-bottom: 1px; } #navigation #sort_on_menu a:hover { color: red; } /* -------------------------------------------------------------------------------- * Clearfix * -------------------------------------------------------------------------------- */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ .blog #overlay { background: white; opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); } body.blog { overflow: hidden; } html.ie6 #blog_outer { position: absolute; left: 24px; top: 24px; z-index: 150; } html.ie6 #blog_middle { width: expression((document.body.clientWidth - 24 * 2) + 'px'); height: expression((document.documentElement.clientHeight - 24 - 78) + 'px'); } #blog_outer { position: fixed; left: 24px; top: 24px; bottom: 24px; right: 24px; } html.opera #blog_outer, html.ie #blog_outer { z-index: 150; } #blog_middle { background: #000; position: absolute; z-index: 200; left: 0; top: 0; bottom: 0; right: 0; overflow: auto; } #blog_inner { margin: 43px 60px 34px; } #blog_nav { list-style-type: none; padding: 0; margin: 0; } #blog_nav li { float: left; display: block; width: 20%; margin: 0; padding: 0; } #blog_nav #blog_date { text-align: center; width: 59%; } /* #blog_nav #blog_close, #blog_nav #blog_url, #blog_nav #blog_about { text-align: right; width: 7%; }*/ #blog_nav #blog_close, #blog_nav #blog_url { text-align: right; width: 10%; } #blog_nav li a:hover { color: red; } /* :hover { color: red; }*/ #blog_nav #blog_close { float: right; } #blog_nav li, #blog_nav li a { color: #656565;} #blog_header { margin: 20px 0; } #blog_previous, #blog_post_title, #blog_next { display: block; float: left; } #blog_previous, #blog_next { width: 10%; } #blog_post_title { text-align: center; width: 80%; } #blog_post_title.loading { background: url('http://managementfordoctors.org/robportfolio/Xu/Images/indicator_black.gif') center center no-repeat; } #blog_post_title a { color: white; text-decoration: none; } #blog_previous { width: 10%; } #blog_next { text-align: right; float: right; } #blog_previous a, #blog_next a { text-decoration: none; } #blog_previous a:hover, #blog_next a:hover { color: red; } #blog_previous a.not-linked, #blog_next a.not-linked { color: #656565; } #blog_previous a.not-linked:hover, #blog_next a.not-linked:hover { cursor: text; color: #656565; ej di} #blog_previous a, #blog_next a, #blog_post_title, #blog_contents { font: 18px/22px Arial; color: #fff; } #blog_contents { padding-bottom: 21px; } #blog_contents a { text-decoration: underline; color: white; } #blog_contents a:hover { color: red;} #blog_contents p { margin-bottom: 1em; } #blog_contents hr { margin: 1em 0; background-color: #656565; color: #656565; height: 1px; border: none; }