/************************** Jon Cattapan Style Sheet Author: Michael Palmer (mike@stroke7.com) Created: Jan 10, 2008 ***************************/ /* Eric Meyer CSS reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* Site rules */ body { background: #a6c5cc; text-align: center; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; line-height: 15px; margin: 0; } .clear { clear: both; } .inline { display: inline; } .img-left { float: left; padding-right: 10px; } .left { float: left; } .right { float: right; } a { outline: none;} a:link { color: #1D5F9F; } a:visited { color: #ff0000; } a:hover { color: #ff0000; } a:active { color: #ff0000; } em { font-style: italic;} /***************************** wrapper ******************************/ div#wrapper { margin: 0 auto; width: 835px; text-align: left; padding-top: 25px; position: relative;} body#home div#wrapper { width: 751px; padding-top: 180px;} /***************************** header ******************************/ #header { width:835px; margin: 0 auto; position: relative;} #header p { background: transparent url(../gui/main_bg.gif) no-repeat 0 0; } #header p a { display: block; width: 274px; height: 29px; text-indent: -999em;} /***************************** nav ******************************/ #nav { position: absolute; left: 297px; top: 31px; z-index: 500;} #nav li{ float: left; } #nav li a { display: block; height: 23px; text-indent: -999em; text-decoration: none; background: #a6c5cc url(../gui/main_menu.gif) no-repeat 0 -23px; } #nav li#link-about a { width: 83px;} #nav li#link-works a { width: 77px;} #nav li#link-publications a { width: 114px;} #nav li#link-news a { width: 128px;} #nav li#link-contact a { width: 98px;} #nav li#link-about a:link, #nav li#link-about a:visited { background-position: 0 -23px; } #nav li#link-works a:link, #nav li#link-works a:visited { background-position: -83px -23px; } #nav li#link-publications a:link, #nav li#link-publications a:visited { background-position: -160px -23px; } #nav li#link-news a:link, #nav li#link-news a:visited { background-position: -274px -23px; } #nav li#link-contact a:link, #nav li#link-contact a:visited { background-position: -402px -23px; } body#about #nav li#link-about a, #nav li#link-about a:hover, #nav li#link-about a:active { background-position: 0 0; } body#works #nav li#link-works a, #nav li#link-works a:hover, #nav li#link-works a:active { background-position: -83px 0; } body#publications #nav li#link-publications a, #nav li#link-publications a:hover, #nav li#link-publications a:active { background-position: -160px 0; } body#news #nav li#link-news a, #nav li#link-news a:hover, #nav li#link-news a:active { background-position: -274px 0; } body#contact #nav li#link-contact a, #nav li#link-contact a:hover, #nav li#link-contact a:active { background-position: -402px 0; } /***************************** sub nav ******************************/ ul.sub-nav { position: absolute; top: 25px; } #nav ul.sub-nav li { height: 21px;} #nav li ul.sub-nav li a { height: 21px; background: #a6c5cc url(../gui/sub_menu.gif) no-repeat 0 -22px;} /* publications sub menu */ #nav li#link-publications ul.sub-nav li#link-books a { width: 150px; } #nav li#link-publications ul.sub-nav li#link-articles a { width: 133px; } #nav li#link-publications ul.sub-nav li#link-books a:link, #nav li#link-publications ul.sub-nav li#link-books a:visited { background-position: -76px -22px; } #nav li#link-publications ul.sub-nav li#link-articles a:link, #nav li#link-publications ul.sub-nav li#link-articles a:visited { background-position: -226px -22px; } body.book#publications #nav li#link-publications ul.sub-nav li#link-books a, #nav li#link-publications ul.sub-nav li#link-books a:hover, #nav li#link-publications ul.sub-nav li#link-books a:active { background-position: -76px 0; } body.articles#publications #nav li#link-publications ul.sub-nav li#link-articles a, #nav li#link-publications ul.sub-nav li#link-articles a:hover, #nav li#link-publications ul.sub-nav li#link-articles a:active { background-position: -226px 0; } /* about sub menu */ #nav li#link-about ul.sub-nav li#link-bio a { width: 47px; } #nav li#link-about ul.sub-nav li#link-video a { width: 97px; } #nav li#link-about ul.sub-nav li#link-bio a:link, #nav li#link-about ul.sub-nav li#link-bio a:visited { background-position: -442px -22px; } #nav li#link-about ul.sub-nav li#link-video a:link, #nav li#link-about ul.sub-nav li#link-video a:visited { background-position: -489px -22px; } body.bio#about #nav li#link-about ul.sub-nav li#link-bio a, #nav li#link-about ul.sub-nav li#link-bio a:hover, #nav li#link-about ul.sub-nav li#link-bio a:active { background-position: -442px 0; } body.video#about #nav li#link-about ul.sub-nav li#link-video a, #nav li#link-about ul.sub-nav li#link-video a:hover, #nav li#link-about ul.sub-nav li#link-video a:active { background-position: -489px 0; } /* works sub menu */ #nav li#link-works ul.sub-nav li#link-works1 a { width: 35px; } #nav li#link-works ul.sub-nav li#link-works2 a { width: 41px; } #nav li#link-works ul.sub-nav li#link-works1 a:link, #nav li#link-works ul.sub-nav li#link-works1 a:visited { background-position: 0 -22px; } #nav li#link-works ul.sub-nav li#link-works2 a:link, #nav li#link-works ul.sub-nav li#link-works2 a:visited { background-position: -35px -22px; } body.works1#works #nav li#link-works ul.sub-nav li#link-works1 a, #nav li#link-works ul.sub-nav li#link-works1 a:hover, #nav li#link-works ul.sub-nav li#link-works1 a:active { background-position: 0 0; } body.works2#works #nav li#link-works ul.sub-nav li#link-works2 a, #nav li#link-works ul.sub-nav li#link-works2 a:hover, #nav li#link-works ul.sub-nav li#link-works2 a:active { background-position: -35px 0; } /***************************** home rules ******************************/ body#home { background: #69c;} #home #header { width: 751px;} #home #header p { width: 751px; height: 311px; background: transparent url(../gui/home.gif) no-repeat 0 0; } #home #nav { position: static;} #home #nav li{ height: 43px; float: left; } #home #nav li a { display: block; height: 43px; text-indent: -999em; text-decoration: none; background: #69c url(../gui/home.gif) no-repeat 0 -311px; } #home #nav li#link-about a { width: 76px;} #home #nav li#link-works a { width: 80px;} #home #nav li#link-publications a { width: 111px;} #home #nav li#link-news a { width: 110px;} #home #nav li#link-contact a { width: 104px;} #home #nav li#link-about a { background-position: 0px -311px; } #home #nav li#link-works a { background-position: -76px -311px; } #home #nav li#link-publications a { background-position: -156px -311px; } #home #nav li#link-news a { background-position: -267px -311px; } #home #nav li#link-contact a { background-position: -391px -311px; } /***************************** content ******************************/ #content { background: #a6c5cc url(../gui/main_bg2.gif) no-repeat 0 0; position: relative; width: 715px; min-height: 465px; clear: both; padding: 45px 60px; z-index: 100;} #content p { margin-bottom: 2.0em; letter-spacing: 0.1em; } #content ul { list-style-type: disc; margin-top: 0.3em; } #content li { margin-left: 1.5em; padding: 0.2em; } /***************************** contact / hCard rules ******************************/ dl.vcard { font-size: 14px; letter-spacing: 1px; } dl.vcard dt, dl.vcard dd { margin-bottom: 20px;} dl.vcard dd { float: left; line-height: 21px; margin-right: 50px;} /***************************** gallery ******************************/ div.gallery { width: 596px; margin: 15px auto 0;} div.gallery a { text-decoration: none; color: #000; letter-spacing: 1px; font-size: 11px; text-align: left; } div.thumb { width: 130px; margin: 22px 0 15px 25px; float: left;} div.thumb img { margin-bottom: 7px;} div.thumb.first { clear: both; margin-left: 0;} hr.gallery-divider { clear: both; height: 1px; color: #000; background: #000; border: 0;} /***************************** headings ******************************/ h1 { font-size: 20px; color: #f60; margin-bottom: 1.0em; } #content p.date { color: #69c; font-size: 85%; margin: 5px 0 10px 0; text-transform: uppercase; } /***************************** news rules ******************************/ #news #content p.post-date { color: #666; text-transform: uppercase; font-size: 11px; margin-bottom: 25px;} #news h2 { color: #666; font-size: 1.4em; } #news #content p { margin-bottom: 10px; } /***************************** video link ******************************/ div.video-item p.img { width: 207px; float: left; padding: 0;} div.video-item p { padding-top: 75px; } div.video-item strong { font-size: 20px;} div.video-item a { color: black; text-decoration: none; } /***************************** footer ******************************/ #footer { width: 835px; font-size: 11px; background: #a6c5cc url(../gui/main_bg.gif) no-repeat left bottom; height: 61px; margin-bottom: 20px; } #footer p { text-indent: -999em; } /***************************** Slimbox rules ******************************/ #lbOverlay { position: absolute; left: 0; width: 100%; background-color: #000; cursor: pointer; z-index: 900; } #lbCenter, #lbBottomContainer { position: absolute; left: 50%; overflow: hidden; background-color: #fff; z-index: 910; } .lbLoading { background: #fff url(../gui/loading.gif) no-repeat center; } #lbImage { position: absolute; left: 0; top: 0; border: 10px solid #fff; background-repeat: no-repeat; z-index: 920;} #lbPrevLink, #lbNextLink { display: block; position: absolute; top: 0; width: 50%; outline: none; } #lbPrevLink { left: 0; z-index: 930; } #lbPrevLink:hover { background: transparent url(../gui/prevlabel.gif) no-repeat 0% 15%; } #lbNextLink { right: 0; z-index: 940; } #lbNextLink:hover { background: transparent url(../gui/nextlabel.gif) no-repeat 100% 15%; } #lbBottom { font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; font-size: 10px; color: #666; line-height: 1.4em; text-align: left; border: 10px solid #fff; border-top-style: none; } #lbCloseLink { display: block; float: right; width: 66px; height: 22px; background: transparent url(../gui/closelabel.gif) no-repeat center; margin: 5px 0; } #lbCaption, #lbNumber { margin-right: 71px; } #lbCaption { font-weight: bold; }