/* Title: Web Address Author: Timo Brimhall (www.timodesign.com) Updated: 11/21/2008 Notes: TimoDesign.com ---------------------------------------------------------------------------------------------- Index: Links Colors: Body Background #0b0e11 Mass Reset Main Text #c7c9ca Common Elements Links #7cc7ef Layout Header Background #181d21 Header Content Background #1f262c Content Divider Lines #30373c Footer Forms Misc IE Browser Hacks ---------------------------------------------------------------------------------------------- */ /* Mass Reset ----------------------------------------------- */ /* Thanks to Eric for this reset http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ */ html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, iframe, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} ins {text-decoration: none;} del {text-decoration: line-through;} table {border-collapse: collapse; border-spacing: 0;} /* tables still need 'cellspacing="0"' in the markup */ a img, :link img, :visited img {border:none;} /* Common Elements ----------------------------------------------- */ body,ul,ol,dl,td,th,caption,pre,p,blockquote,input,textarea { /* Sets the main font-family, line-height and color. Font size is set by the and #container. */ color: #c7c9ca; font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; line-height: 1.6em; } body { margin: 0; padding: 0; text-align: center; background: #0b0e11 url(../images/body-bg.gif) repeat-x 0 -270px; } /* Links ----------------------------------------------- */ a:link { color: #7cc7ef; text-decoration: none; } a:visited { color: #4e778e; text-decoration: none; } a:hover, a:active { color: #b2e4ff; text-decoration: underline; } p { margin: 1em 0 1em; padding: 0; } h1 { position: absolute; top: 35px; left: 17px; width: 260px; height: 24px; color: #bdd2dd; font-family: Georgia, "Times New Roman", Times, serif; font-size: 190%; font-weight: normal; line-height: 1em; text-transform: uppercase; margin: 0 0 1em 0; padding: 0; text-indent: -10000px; } h2 { color: #a3b6c0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 140%; font-weight: normal; line-height: 1em; margin: .5em 0 1em 0; padding: 0 0 0/*.25em*/ 0; } h3 { color: #a3b6c0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 140%; font-weight: normal; line-height: 1em; margin: 1.2em 0 1em 0; padding: .2em 0 0/*.25em*/ 0; } h4 { color: #a3b6c0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 130%; font-weight: normal; line-height: 1em; margin: 1.2em 0 .75em 0; } h5 { color: #86969f; padding: 0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 120%; font-weight: normal; line-height: 1em; margin: 1em 0 .75em 0; } blockquote { margin: 1.25em 0; padding: 0 0 1.25em; border-bottom: 1px solid #30373c; } blockquote em { display: block; padding-top: 15px; } blockquote strong { padding-right: 10px; font-style: italic; } abbr, acronym { font-style: normal; cursor: help; border-bottom: 1px dotted #bbb; } em { font-style: italic; } strong { font-weight: bold; } del { color: #999; text-decoration: line-through; } hr { color: #DDDBC7; height: 1px; margin: 1.5em 0 1.5em 0; border: 0; background-color: #DDDBC7; } /* Layout ----------------------------------------------- */ #container { } #header, #content, #footer { position: relative; width: 960px; margin: 0 auto; text-align: left; } #header { height: 127px; background: transparent url(../images/banner.jpg) 0 0 no-repeat; } #logo { position: absolute; top: 21px; left: 74px; width: 200px; height: 70px; } #logo a { display: block; width: 200px; height: 70px; } #logo img { display: none; } #content { padding-top: 15px; padding-bottom: 60px; border-top: 1px solid #1f262c; } #content-wrapper { background-color: #1f262c; text-align: center; } #content #intro { margin: 0 20px; padding-top: 1px; /* hack for IE to display intro paragraph top margin */ } #content #intro p { margin-left: 313px; } #content #main { float: right; width: 607px; margin: 0 20px; } #content #secondary { float: left; width: 275px; } #footer { clear: both; color: #E0F1DC; font-size: 80%; padding: 40px 0 0 0; background: transparent url(../images/bar-footer-bg.gif) 0 0 repeat-x; } /* Header ----------------------------------------------- */ /* -- Nav -- */ ul#nav { position: absolute; top: 65px; right: 20px; height: 39px; width: 525px; margin: 0; padding: 0; } body#home ul#nav { background: transparent url(../images/nav-tabs.gif) no-repeat 0 0; } body#work ul#nav { background: transparent url(../images/nav-tabs.gif) no-repeat 0 -39px; } body#about ul#nav { background: transparent url(../images/nav-tabs.gif) no-repeat 0 -78px; } body#contact ul#nav { background: transparent url(../images/nav-tabs.gif) no-repeat 0 -117px; } body#links ul#nav { background: transparent url(../images/nav-tabs.gif) no-repeat 0 -156px; } ul#nav li { margin: 0; padding: 0; height: 0; line-height: 0; width: 0; display: inline; } ul#nav li a { position: absolute; top: 0; display: block; text-indent: -9000px; text-decoration: none; overflow: hidden; /* trims the long outlines from the text-indent in Firefox */ background: transparent url(../images/nav-tabs.gif) no-repeat; height: 39px; width: 124px; /*border: 1px solid yellow;*/ } body#home li#hom a { background-position: 0 0; width: 138px; left: 0; } body#home li#hom a:hover { background-position: 0 0; } body#home li#wor a { background-position: -138px -156px; left: 138px; } body#home li#wor a:hover { background-position: -138px 0px; } body#home li#abo a { background-position: -262px -156px; left: 262px; } body#home li#abo a:hover { background-position: -262px 0; } body#home li#con a { background-position: -386px -156px; width: 139px; left: 386px; } body#home li#con a:hover { background-position: -386px 0; } body#work li#hom a { background-position: 0 -195px; width: 138px; left: 0; } body#work li#hom a:hover { background-position: 0 -39px; } body#work li#wor a { background-position: -138px -39px; left: 138px; } body#work li#wor a:hover { background-position: -138px -39px; } body#work li#abo a { background-position: -262px -156px; left: 262px; } body#work li#abo a:hover { background-position: -262px 0; } body#work li#con a { background-position: -386px -156px; width: 139px; left: 386px; } body#work li#con a:hover { background-position: -386px 0; } body#about li#hom a { background-position: 0 -156px; width: 138px; left: 0; } body#about li#hom a:hover { background-position: 0 -78px; } body#about li#wor a { background-position: -138px -195px; left: 138px; } body#about li#wor a:hover { background-position: -138px -78px; } body#about li#abo a { background-position: -262px -78px; left: 262px; } body#about li#abo a:hover { background-position: -262px -78px; } body#about li#con a { background-position: -386px -156px; width: 139px; left: 386px; } body#about li#con a:hover { background-position: -386px 0; } body#contact li#hom a { background-position: 0 -156px; width: 138px; left: 0; } body#contact li#hom a:hover { background-position: 0 -78px; } body#contact li#wor a { background-position: -138px -156px; left: 138px; } body#contact li#wor a:hover { background-position: -138px 0px; } body#contact li#abo a { background-position: -262px -195px; left: 262px; } body#contact li#abo a:hover { background-position: -262px -117px; } body#contact li#con a { background-position: -386px -117px; width: 139px; left: 386px; } body#contact li#con a:hover { background-position: -386px -117px; } body#links li#hom a { background-position: 0 -156px; width: 138px; left: 0; } body#links li#hom a:hover { background-position: 0 -78px; } body#links li#wor a { background-position: -138px -156px; left: 138px; } body#links li#wor a:hover { background-position: -138px 0px; } body#links li#abo a { background-position: -262px -156px; left: 262px; } body#links li#abo a:hover { background-position: -262px 0; } body#links li#con a { background-position: -386px -156px; width: 139px; left: 386px; } body#links li#con a:hover { background-position: -386px 0; } /* - Links Tab - */ body#links ul#nav li#lin a { background: transparent url(../images/nav-tab-links.gif) no-repeat 0 -74px; } ul#nav li#lin { position: absolute; top: -65px; right: 6px; width: 104px; height: 37px; } ul#nav li#lin a { position: absolute; width: 104px; height: 37px; top: 0; right: 20px; background: transparent url(../images/nav-tab-links.gif) no-repeat 0 0; } ul#nav li#lin a:hover { background-position: 0 -37px; } /* Content ----------------------------------------------- */ /* -- home -- */ body#home { /* Layout */ background: #0b0e11 url(../images/body-bg.gif) repeat-x 0 0; } #home #header { /* Layout */ height: 397px; background: transparent url(../images/banner-home.jpg) 0 0 no-repeat; } #home #logo { /* Layout */ display: none; } #home #content #intro p { /* Layout */ margin-left: 0; } #home #content #main { /* Layout */ width: auto; float: none; } #home ul#nav { /* Navigation */ position: absolute; top: 335px; } #home ul#nav li#lin { /* Navigation */ top: -335px; } #home ul#nav li#lin a { /* Navigation */ background: transparent url(../images/nav-tab-links-home.gif) no-repeat 0 0; } #home ul#nav li#lin a:hover { /* Navigation */ background-position: 0 -37px; } #home h1 { display: none; } #home h2 { height: 21px; text-indent: -10000px; background: url(../images/h2highlightedwork.gif) 2px 0 no-repeat; margin-top: 10px; margin-bottom: 25px; } #home #timo { width: 290px; float: left; color: #fff; } #home #do { width: 600px; float: right; } #home #high-work { list-style: none; margin: 0; padding: 0; } #home #high-work li { float: left; margin-left: 20px; width: 290px; color: #b6bdc5; } #home #high-work li h3 { margin: -.25em 0; padding: 0; } #home #high-work li div { padding-left: 5px; } #home #high-work li.first { margin-left: 0; } #home #high-work li a img { border: 5px solid #0b0e11; } #home #high-work a:hover img { border: 5px solid #f60; } #home #high-work li p, #home #high-work li em { color: #7a8188; font-family: Arial, Helvetica, sans-serif; font-size: 90%; } #home #high-work p a { font-size: 125%; } #home #high-work li .year { color: #b6bdc5; font-style: normal; } #home #high-work li .description { font-size: 85%; margin: -.5em 0 .25em 0; } #home #high-work .skills { color: #4d545a; font-size: 85%; } /* -- work -- */ #work h1 { background: url(../images/h1work.gif) 0 0 no-repeat; width: 110px; } #work #content #main { /* Layout */ width: auto; float: none; font-family: Arial, Helvetica, sans-serif; font-size: 90%; color: #7a8188; } #work #sites { margin: 10px 0 60px 153px; } #work #sites ul { margin: 0 40px 0 0; padding: 0 0 0 20px; list-style: none; border-left: 1px solid #363c42; float: left; font-family: Arial, Helvetica, sans-serif; line-height: 1.3em; font-size: 90%; } #work #sites ul.logos { margin-right: 0; } #work #sites ul li { margin: 15px 0; } #work #sites ul li.selected a { font-weight: bold; color: #bdd2dd; } #work #sites em { font-style: normal; color: #7a8188; font-size: 90%; display: block; } #work #sites ul span { color: #565d63; } #work #sitename { width: 230px; float: left; margin: 0; padding: 0 0 10px 5px; } #work #sitename h2 { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #bdd2dd; } #work #sitename h2 a { padding-right: 20px; background: transparent url(../images/ico-external.gif) 98% 50% no-repeat; color: #bdd2dd; } #work #sitename h2 a:hover { background: transparent url(../images/ico-external-o.gif) 98% 50% no-repeat; } #work #sitename em { font-style: normal; } #work #sitename span { color: #565d63; } #work #sitedescription { width: 670px; float: right; margin: 0; padding: 0 0 15px 0; line-height: 1.5em; } #work #sitedescription em { color: #4d545a; } #work #main img { border: 5px solid #0b0e11; display: block; margin-bottom: 30px; } #work #main a:hover img { border: 5px solid #f60; } #work #main img.main { margin-bottom: 350px; } /* -- about -- */ #about h1 { background: url(../images/h1about.gif) 0 0 no-repeat; width: 121px; } #about h2 { height: 30px; text-indent: -10000px; border-bottom: 1px solid #30373c; margin-bottom: 25px; margin-top: 25px; } #about h2.h-rr { background: url(../images/h2recommendedreading.gif) 0 0 no-repeat; } #about h2.h-fmq { background: url(../images/h2favoritemoviequotes.gif) 0 0 no-repeat; height: 40px; } #about h2.h-fp { background: url(../images/h2funphotos.gif) 0 0 no-repeat; } #about #content { /* Layout */ background: url(../images/pic-timokid.gif) 135px 10px no-repeat; } #about #books { border-bottom: 1px solid #30373c; padding-bottom: 20px; } #about #books a img { border: 3px solid #0b0e11; } #about #books a:hover img { border: 3px solid #f60; } #about #books img { margin: 0 3px 3px 0; } #about #secondary h5 { padding-left: 15px; } #about #secondary img { border: 6px solid #0b0e11; margin-bottom: 20px; } /* -- contact -- */ #contact h1 { background: url(../images/h1contact.gif) 0 0 no-repeat; width: 166px; } #contact h2 { height: 20px; text-indent: -10000px; background: url(../images/h2email.gif) 0 0 no-repeat; margin-top: 23px; margin-bottom: 10px; } #contact #secondary { /* Layout */ padding-top: 53px; } #contact #content ul { border-top: 1px solid #30373c; margin: 0; padding: 0; } #contact #content ul li { border-bottom: 1px solid #30373c; padding: 3px 10px 4px 10px; } #contact #content ul li em { font-size: 80%; color: #838e94; padding-left: 55px; } #contact .ico-email a { padding-left: 22px; background: transparent url(../images/ico-email.gif) 0 80% no-repeat; } #contact .ico-pdf a { padding-left: 20px; background: transparent url(../images/ico-pdf.gif) 0 50% no-repeat; } #contact .ico-doc a { padding-left: 20px; background: transparent url(../images/ico-word.gif) 0 50% no-repeat; } /* -- links -- */ #links h1 { background: url(../images/h1links.gif) 0 0 no-repeat; width: 108px; } #links h2 { height: 20px; text-indent: -10000px; background: url(../images/h2linkcategories.gif) 0 0 no-repeat; margin-top: 40px; margin-bottom: 10px; } #links #content #main { /* Layout */ float: none; width: auto; } #links #link-categories { border-top: 1px solid #30373c; border-bottom: 1px solid #30373c; padding: 5px 0 6px 0; margin-bottom: 2.5em; } #links #link-categories ul { list-style: none; float: left; margin: 0 0 0 65px; padding: 0; } #links #link-categories ul#links-first { margin-left: 0; } #links #link-categories li { padding: 4px 0 4px 5px; background: transparent url(../images/ico-arrow-down.gif) 8px 55% no-repeat; } #links #link-categories li a { padding-left: 21px; } #links .link-section { width: 440px; float: left; } #links .link-section.right-links { margin-left: 40px; } #links .link-section ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #30373c; font-size: 90%; } #links .link-section ul li { background: transparent url(../images/ico-link.gif) 4px 50% no-repeat; border-bottom: 1px solid #30373c; } #links .link-section ul li.sweet { background: transparent url(../images/ico-link-highlight.gif) 4px 50% no-repeat; } #links .link-section ul li a { display: block; background: transparent url(../images/ico-external.gif) 98% 50% no-repeat; margin-left: 22px; padding: 3px 24px 4px 6px; border-left: 1px solid #293036; } #links .link-section ul li a:hover { background: #113e57 url(../images/ico-external-o.gif) 98% 50% no-repeat; text-decoration: none; border-left: 1px solid #2a3943; } #links .link-section ul li.sweet a:hover { background: #34670e url(../images/ico-external-o.gif) 98% 50% no-repeat; border-left: 1px solid #34670e; color: #d2f88e; } .top a { padding-left: 12px; background: url(../images/ico-backtotop.gif) 0 3px no-repeat; font-size: 75%; color: #4e778e; } .top a:hover { background-position: 0 -27px; } /* Footer ---------------------------------------------- */ #footer-wrapper #footer { background: url(../images/logo-lion.gif) 50% 22px no-repeat; } #footer-wrapper { background: url(../images/footer-top.gif) 50% 0 repeat-x; } #footer-wrapper #copy { background: url(../images/footer-bottom-bg.gif) 0 0 repeat-x; color: #3b4855; font-size: 80%; text-align: center; height: 60px; margin-top: 2em; padding-top: 4em; } #footer h4 { color: #647077; padding-left: 8px; font-size: 140%; text-indent: -10000px; height: 18px; } #footer h4.h-ia { background: url(../images/h4interestingarticles.gif) 0 0 no-repeat; } #footer h4.h-rs { background: url(../images/h4recommendedsites.gif) 0 0 no-repeat; } #foot-sites { width: 330px; float: right; margin-right: 5px; } #foot-articles { width: 330px; float: left; margin-left: 5px; } #foot-articles a span { color: #354c59; font-style: italic; } #footer ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #1b2228; line-height: 1.2em; font-size: 100%; } #footer li { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #1b2228; } #footer #foot-sites ul { float: left; width: 155px; } #footer #foot-sites ul.alt { margin-left: 20px; } #footer a { color: #699ab4; display: block; padding: 7px 8px; } a:visited { color: #4e778e; } #footer a:hover { color: #7cc7ef; background-color: #1b2228; text-decoration: none; } /* Forms ----------------------------------------------- */ label { color: #696861; font-weight: bold; margin-right: 8px; } .input { margin: 3px 12px 10px 0; padding: 3px 4px 3px 4px; border: 1px solid #AD9A7C; background-color: #FAFAF7; } /* Misc ----------------------------------------------- */ .float-l { float: left; } .float-r { float: right; } .clear { clear: both; height: 0; } .clear-l { clear: left; height: 0; } .clear-r { clear: right; height: 0; } .hide { display:none; } /* IE Browser Hacks ----------------------------------------------- */ .example-element { background: #00F; /* all browsers including Mac IE */ *background: #F00; /* IE 7 and below */ _background: #F60; /* IE 6 and below */ }