/* striped css for spayce.net (also accessible from spayce.com) */ /* ? copyright 2004 all rights reserved - alison harrison december 2004 */ /* The designer asserts the right to ownership of the design of this site */ /* The layout, look and feel, style and css may not be copied in entireity */ /* Feel free to use this code for experimentation and educational purposes however */ /* Design created in Adobe Illustrator CS, sliced in Photoshop/ImageReady CS */ /* Site created in goLive, although coding and css is hand written in source mode. Actually I think I prefer Dreamweaver */ /* Did you find that interesting?? */ /* general elements */ body { font-family: "trebuchet MS", verdana, sans-serif; font-size: small; } a { color: #000000; text-decoration: none; font-weight: bold; } h1, h2, h3, h4, h5, h6 { margin: 0px; font-weight: normal; position: relative; } span { position: relative; } h2 { font-size: medium; } h4 { font-size: small; } a img { border: 0px; } p { margin: 0px; padding: 0px;} .clear { clear: both; } .text { line-height: 24px; clear: none; display: inline;} /* generic contents */ td, tr, th, table, table.normal { padding: 0px; border: 0px; } .title { font-size: large; margin: 0px 0px 0px 0px; display: block; } input, select { border: 1px solid #000000; background: #ffffff; margin: 0px; padding: 0px;} /* background elements (on white outer area) */ #logo { height: 60px; background: #ffffff url(/style/images/logos/spaycelogo.png) no-repeat 50% 50%; text-align: center; } /* main div */ #main { width: 760px; margin: auto; } /* navigation (down side) */ #nav { width: 18px; float: left; } img.nav { float: left; } /* navigation down left side */ #home { background: url(/style/images/mainnav/homeon.gif) top left no-repeat; width: 26px; height: 49px;} #homeoff { background: url(/style/images/mainnav/homeoff.gif) top left no-repeat; width: 26px; height: 49px;} #prepre { background: url(/style/images/mainnav/preon.gif) top left no-repeat; width: 26px; height: 77px;} #preport { background: url(/style/images/mainnav/portoff.gif) top left no-repeat; width: 26px; height: 76px;} #preleft { background: url(/style/images/mainnav/leftoff.gif) top left no-repeat; width: 26px; height: 91px;} #portpre { background: url(/style/images/mainnav/preoff.gif) top left no-repeat; width: 26px; height: 77px;} #portport { background: url(/style/images/mainnav/porton.gif) top left no-repeat; width: 26px; height: 76px;} #portleft { background: url(/style/images/mainnav/leftoff.gif) top left no-repeat; width: 26px; height: 91px;} #leftpre { background: url(/style/images/mainnav/preoff.gif) top left no-repeat; width: 26px; height: 77px;} #leftport { background: url(/style/images/mainnav/portoff.gif) top left no-repeat; width: 26px; height: 76px;} #leftleft { background: url(/style/images/mainnav/lefton.gif) top left no-repeat; width: 26px; height: 91px;} /* holds the content and meaty part */ #content { padding-left: 40px; background: #000000 url(/style/images/style01/mainnavtitle/titleportfolio.gif) -1px 200px no-repeat; margin-left: 26px;} #preamble #content { padding-left: 40px; background: #000000 url(/style/images/style01/mainnavtitle/titlepreamble.gif) -1px 200px no-repeat; margin-left: 26px;} #leftovers #content, #photography #content { padding-left: 40px; background: #000000 url(/style/images/style01/mainnavtitle/titleleftovers.gif) -1px 200px no-repeat; margin-left: 26px;} #new #content, #antiblog #content { padding-left: 40px; background: #000000 url(/style/images/style01/mainnavtitle/titlehomepage.gif) -1px 200px no-repeat; margin-left: 26px;} /* suff is the inner part of content, in which images/style01 are placed as wallpaper. */ #stuff { border: solid #000000; border-width: 12px 8px 12px 0px; background: #141B2D url(/style/images/style01/backgrounds/striped.gif); padding: 10px; } #icons { float: right; width: 13px; text-align: right; } #icons img { margin-top: 8px; display: block} #icons ul { margin-left: 0px; } #icons img { background: none ! important; padding: 0px ! important; } /* positions of content boxes */ #box1 { float: left; width: 280px; position: relative; } #box2 { float: left; width: 330px; position: relative; margin-left: 10px; margin-top: 18px; border: solid #000000; border-width: 0px 5px 5px 1px;} /* box12 is the full width box (ie, box 1 plus 2, not box twelve!! */ #box12 { float: left; width: 640px; position: relative; } /* box3 is the style switcher box */ #box3 { float: right; width: 20px; position: relative; margin-top: 100px; clear: right; } .rss { margin-top: 10px; } /* hidden links for non css layout */ .hiddentitle, .hiddenlink, .hidden { display: none; } /* contents of box 1 and box12 */ #box1 .middle { border: solid #000000; border-width: 0px 5px 0px 1px; background-color: #979AAE; padding: 16px 8px 16px 16px; position: relative; height: auto;} #box12 .middle { border: solid #000000; border-width: 0px 5px 0px 1px; background-color: #979AAE; padding: 16px 8px 16px 12px; position: relative; height: auto;} #box1 .tail, #box12 .tail { border: solid #000000; border-width: 0px 5px 5px 1px; background-color: #979AAE; padding: 4px 8px 4px 16px; position: relative;} .newthumb, .newthumb img, .snapthumb { position: relative; } ul { margin: 0px 0px 0px 20px; padding: 0px; } li { display: inline; margin: 0px; padding: 0px 0px 0px 0px;} li.arrow { width: 20px; height: 17px; } .top li { font-family: verdana, sans-serif; font-size: x-small; font-weight: bold; text-align: left; } /* on tab with no tabs on right */ .ontab { background: url(/style/images/style01/tabbednav/ontabmain.gif) no-repeat right top; padding: 1px 18px 3px 8px; border-left: 1px solid #000000; border-bottom: 1px solid #979aae; } /* on tab, where there is an offtab to the right of the ontab */ .ontaboff { background: url(/style/images/style01/tabbednav/ontab.gif) no-repeat right top; padding: 1px 18px 3px 8px; border-left: 1px solid #000000; border-bottom: 1px solid #979aae; } /* offtab with ONTAB on right and no tab on left*/ .offtabon { background: url(/style/images/style01/tabbednav/offtabmain.gif) no-repeat right top; padding: 1px 9px 3px 8px; border-left: 1px solid #000000; border-bottom: 1px solid #000000; } /* offtab with OFFtab on right and no tab on left*/ .offtaboff { background: url(/style/images/style01/tabbednav/offtabmiddle.gif) no-repeat right top; padding: 1px 18px 3px 8px; border-left: 1px solid #000000; border-bottom: 1px solid #000000; } /* off tab with OFFtab on the right AND any tab on left */ .offtabmiddleoff { background: url(/style/images/style01/tabbednav/offtabmiddle.gif) no-repeat right top; padding: 1px 18px 3px 0px; border-bottom: 1px solid #000000; } /* off tab with ONtab on the right AND any tab on left */ .offtabmiddleon { background: url(/style/images/style01/tabbednav/offtabmain.gif) no-repeat right top; padding: 1px 9px 3px 0px; border-bottom: 1px solid #000000; } /* off tab where there is no other tabs on the right and any tab on left*/ .offtablast { background: url(/style/images/style01/tabbednav/offtab.gif) no-repeat right top; padding: 1px 18px 3px 0px; border-bottom: 1px solid #000000; } /* image thumbnails on various pages */ .thumbnail { float: left; margin: 0px 5px 5px 0px; width: 73px; height: 73px; } .thumbnail img { width: 72px; height: 72px; border: 1px solid #000000; } .thumbnail p { margin: 0px; display: inline; padding: 0px; position: relative; } /* ------------------------------------------ */ /* contents of box 2 */ #box2, #floatbox .middle { background-color: #979AAE; background-image: url(/style/images/style01/decoration/box2_bg.gif) } #box2 .top, #floatbox .top { background: url(/style/images/style01/decoration/box2_header.gif) no-repeat; height: 14px; margin: 0px; font-size: 2px;} #box2 .middle, #floatbox .middle {padding: 6px 16px 16px 10px; font-size: small; font-family: "trebuchet MS"; line-height: 24px;} #box2 .tail { padding: 4px 0px 4px 0px; text-align: center; position: relative; } /* text that appears inside box2 (like mouseover excepts on main page, etc */ #intro, .mo { position: absolute; left: 10px; top: 20px; width: 250px; font-size: small; font-family: "trebuchet MS"; line-height: 24px;} .mo img { width: 300px;} /* positions of excerpts on main page are set on that page using MTEntryTitle */ /* ------------------------------------------ */ /* contents of box 3 */ #box3* .top{ background: url(/style/images/style01/decoration/colpalette_header.gif) no-repeat; height: 8px; margin: 0px; font-size: 2px; } #box3 img { margin: 3px 1px 0px 0px; float: right; border: 0px;} #box3 .middle { border: 0px; } .minheight {float: right; height: 341px; width: 1px; position: relative; } .minheight1 {float: right; height: 265px; width: 1px; position: relative;} /* ------------------------------------------ */ /* SEARCH BOX */ /* search box appears floating over all pages */ #searchbox { position: absolute; left: 35%; top: 200px; width:160px; border: 1px solid #000000; background: #cccccc; z-index: 50; visibility: hidden; } #searchbox .top { background: url(/style/images/style01/decoration/box2_header.gif) no-repeat; height: 14px; margin: 0px; font-size: 2px; text-align: right; } #searchbox .middle { padding: 8px; } /* ------------------------------------------ */ /* SEPARATE PAGE ELEMENTS */ /* main page (what's new) */ .newthumb img { width: 300px; height: 220px; border: 1px solid #000000; margin: 4px 0px; position: relative; } h4.newdetail { margin-top: 5px; position: relative; } .newleftover { margin-top: 8px; } .newthumb .excerpt { display: none; } #new h1, #new h2, #new h4 { margin-top: 0px;} #new #box2 .middle { padding-top: 10px;} /* PREAMBLE PAGE */ h2.title { margin-top: 10px; } #preamble .floatbox { float:right; margin: 0px 10px 20px 20px; border: 1px solid #000000 } #preamble .floatbox img { margin-right: 0px; } #preamble #box2 .middle { padding-top: 5px; } ul.summary { margin-left: 0px; } /* PHOTOGRAPHY PAGES */ .polaroid { margin-top: 10px; background: #ffffff; padding: 8px; border: #000000 solid; border-width: 1px 2px 2px 1px; width: 560px; display: block; } #jump { float: right; } #calendar { width: 550px;} #calendar td { width: 60px; height: 60px; vertical-align: top; text-align: left; border: 1px solid #000000; background: #ffffff; padding: 4px; background: #ffffff center; } #snapshots .thumbnail p { margin: 5px 0px 5px 0px; display: inline; padding: 0px; } .snapthumb { border: solid #000000; border-width: 1px 2px 2px 1px; width: 100px; height: 100px; margin: 0px 10px 10px 0px; float: left;} .photopage .polaroid { float: left; margin-right: 20px; margin-top: 0px; width: 300px; } .photopage .polaroid img { width: 300px; height: 370px; } .polaroidpage .polaroid { float: left; margin-right: 10px; margin-bottom: 10px; width: 250px; } .polaroidpage .polaroid img { width: 250px; height: 300px;} .entry img { margin-bottom: 8px; border: 1px solid #aaaaaa; } .floaticon {position: absolute; top: 110px; right: 20px; width: 140px;} .floaticon img { margin-bottom: 4px; border: 0px; } .floatbox form { margin: 0px; padding: 0px; display: inline; height: 25px; vertical-align: middle;} /* PORTFOLIO PAGES - formatting elements for text on detail pages */ .title br, .detailthumb br { display: none; } .date { font-style: italic; margin: 0px 0px 0px 0px; } .detailthumb img { margin: 0px 0px 0px 0px; border: 1px solid #000000; width: 300px; height: 200px; display: block; } .detailthumb p {margin-bottom: 10px; } .mo h2 { margin-top: 0px;} .mo img { border: 1px solid #000000; } .backforth { text-align: left; padding: 0px 0px 0px 0px; position: absolute; left: 12px; top: 4px; } .backforth2 { text-align: right; padding: 0px 8px 0px 0px; position: absolute; right: 0px; top: 4px; } #webdesign h2 { margin-top: 0px; } #links .title, #links .date { display: none; } .floatbox {float: right; margin-right: 20px; display: inline; } .floatbox img { margin-right: 8px; float: left; } /* ------------------------------------------ */ /* THIS IS NOT A WEBLOG (or the anti weblog) */ #floatbox { float: right; width: 285px; border: solid #000000; border-width: 1px 5px 5px 1px; margin: 0px 0px 40px 10px; display: inline; position: relative; } #floatbox .middle { border-width: 0px 0px 0px 0px; height: auto; } #floatbox .tail { display: none; } #antiblog .title { width: 300px;} .appear { position: absolute; right: 20px; top 20px; width: 260px } /* ------------------------------------------ */ /* footer and copyright */ #footer { color: #999999; letter-spacing: 3px; text-align: center; line-height: 32px; } #footer img { margin: 20px auto 0px auto; } #powered { text-align: center; color: #dddddd; } #powered a { color: #dddddd; } /* testing */ #latestwork, #latestnews, #latestphot { position: relative;} span.workthumb { width: 190px ! important; height: 190px ! important; margin-right: 10px ! important; position: relative ! important; float: left; } #latestphot img { margin-top: 8px; } .mainthumb img { width: 190px ! important; height: 150px ! important; border: 3px double #000 ! important; margin-top: 8px; } #latestphot { float: left; } * html #latestphot { float: right; } #latestphot .mainthumb img { height: 243px ! important; width: 182px ! important; } #latestnews { float: left; width: 390px; margin-right: 10px; } h2.mainpg { color: #000; border-bottom: 1px solid #000; margin-bottom: 10px; } h2.short { margin-right: 10px; } h4.mainpg { margin-top: 10px ! important;} .newleftover .inner {height: 223px ! important; } .newleftover .inner { padding: 10px; } #latestwork em, #latestnews em, #latestphot em, #latestwork em a, #latestnews em a, #latestphot em a { font-style: normal; color: #000; font-size: .9em } .divider { clear: both; height: 40px;} #floatbox.portfolio, #floatbox.print, #floatbox.joomla { width: 320px ! important; margin-right: 15px; margin-left: 0; } #latestphot { width: 230px ; } #latestnews { float: left; width: 360px; } .mepic { margin: 0 0 20px 20px;}