/*---------------------------------------------------------------------------------------------------- (c) 2008 Copyright - PearShapedCode.com - All Rights Reserved. ----------------------------------------------------------------------------------------------------*/ html, body { margin: 0px; padding: 0px; font-family: Helvetica, Arial, sans-serif; text-align: justify; } body { background: black url('background/greenstrip.jpg') left top repeat-x; outline: 0; } a img { border: 0px; outline: 0px; } #container1 { position: relative; width: 950px; margin-left: auto; margin-right: auto; } #container2 { position: relative; } /* thanks to the joys of CSS being dodgy with 100% height, will have to use JavaScript to make sure the height is resized depending on pure doc height (inc scroll bars) */ #container3 { position: relative; display: block; width: 948px; border-right: 1px solid white; border-left: 1px solid white; background: #16330d url('background/greenpear.jpg') left top no-repeat; } #leftstrip { position: absolute; left: -24px; width: 23px; height: 100%; border-right: 1px solid #abe11c; background: black url('background/leftstrip.jpg') left top no-repeat; } #rightstrip { position: absolute; right: -24px; width: 23px; height: 100%; border-left: 1px solid #abe11c; background: black url('background/rightstrip.jpg') left top no-repeat; } #container3 #pscextra4 { position: absolute; top: 0px; left: 0px; background: url('background/greenpear-blink.jpg') top left no-repeat; width: 563px; height: 316px; z-index: 5; display: none; } #content { position: relative; width: 900px; padding: 25px 25px 0px 25px; padding-bottom: 175px; } #content p { color: white; font-stretch: condensed; } #content p.intro { display: none; } #pscextra6 { display: none; z-index: 0; } /*---------------------------------------------------------------------------------------------------- HEADER ----------------------------------------------------------------------------------------------------*/ #header { width: 100%; height: 125px; position: relative; z-index: 15; } #header #intro { width: 100%; height: 52px; padding-bottom: 2px; border-bottom: 1px solid white; } #header #toplogo img { display: none; } #header #title { float: left; background-position: left bottom; background-repeat: no-repeat; height: 51px; } #header #title h1 { display: none; } #header #lines { float: left; width: 88px; height: 51px; background: url('header/linesanim.gif') left bottom no-repeat; } #header #strapline { float: left; background-position: left bottom; background-repeat: no-repeat; margin-top: 34px; height: 15px; } #header #strapline h2 { display: none; } #header #strapline h3 { display: none; } /*---------------------------------------------------------------------------------------------------- CUSTOM HEADERS ----------------------------------------------------------------------------------------------------*/ body#pagehome #header #title { width: 152px; background-image: url('header/title-home.png'); } body#pagehome #header #strapline { width: 600px; background-image: url('header/strapline-home.png'); } body#pageabout #header #title { width: 175px; background-image: url('header/title-about.png'); } body#pageabout #header #strapline { width: 500px; background-image: url('header/strapline-about.png'); } body#pageblog #header #title { width: 134px; background-image: url('header/title-blog.png'); } body#pageblog #header #strapline { width: 482px; background-image: url('header/strapline-blog.png'); } body#pagegallery #header #title { width: 220px; background-image: url('header/title-gallery.png'); } body#pagegallery #header #strapline { width: 464px; background-image: url('header/strapline-gallery.png'); } body#pageportfolio #header #title { width: 277px; background-image: url('header/title-portfolio.png'); } body#pageportfolio #header #strapline { width: 418px; background-image: url('header/strapline-portfolio.png'); } body#pagecontact #header #title { width: 225px; background-image: url('header/title-contact.png'); } body#pagecontact #header #strapline { width: 566px; background-image: url('header/strapline-contact.png'); } body#pagelinks #header #title { width: 148px; background-image: url('header/title-links.png'); } body#pagelinks #header #strapline { width: 524px; background-image: url('header/strapline-links.png'); } /*---------------------------------------------------------------------------------------------------- MENU ----------------------------------------------------------------------------------------------------*/ #header #menuholder { position: relative; width: 100%; height: 52px; border-top: 1px solid #abe11c; } #header #menuholder ul#menu { position: absolute; right: 0px; display: block; list-style-type: none; margin: 0px; padding: 0px; } #header #menuholder ul#menu li { display: block; float: left; margin: 0px; padding: 0px; } #header #menuholder ul#menu li a { display: block; height: 25px; background-repeat: no-repeat; background-position: top center; margin: 0px; padding: 0px; outline: 0; } #header #menuholder ul#menu li a span { display: none; } #header #menuholder ul#menu li.selected { height: 67px; background: url('header/menulines-anim.gif') bottom center no-repeat; } #header #menuholder ul#menu li#home a { width: 57px; background-image: url('header/menu/home.png'); } #header #menuholder ul#menu li#about a { width: 67px; background-image: url('header/menu/about.png'); } #header #menuholder ul#menu li#blog a { width: 54px; background-image: url('header/menu/blog.png'); } #header #menuholder ul#menu li#gallery a { width: 79px; background-image: url('header/menu/gallery.png'); } #header #menuholder ul#menu li#portfolio a { width: 97px; background-image: url('header/menu/portfolio.png'); } #header #menuholder ul#menu li#contact a { width: 81px; background-image: url('header/menu/contact.png'); } #header #menuholder ul#menu li#links a { width: 56px; background-image: url('header/menu/links.png'); } #header #menuholder ul#menu li a:hover { background-position: bottom center; } #header #menuholder ul#menu li.selected a { background-position: bottom center; } /*---------------------------------------------------------------------------------------------------- SCROLLER ----------------------------------------------------------------------------------------------------*/ #scroller { position: relative; left: 15px; width: 870px; height: 240px; /* border: 1px solid #abe11c; outline: 1px solid white; */ overflow: hidden; z-index: 11; } #itemholder { position: absolute; left: -220px; height: 210px; } #itemholder .item { position: absolute; top: 25px; width: 180px; height: 180px; clear: both; } #itemholder .item p { display: none; } #itemholder .item a { position: absolute; display: block; width: 180px; height: 180px; border: 1px solid white; color: black; text-align: center; font-size: 16pt; background-position: center bottom; background-repeat: no-repeat; text-decoration: none; } #itemholder .item a:hover { top: -15px; left: -10px; width: 200px; height: 200px; } #itemholder .item a span { position: relative; top: 0px; width: 100%; text-transform: uppercase; padding: 3px 0px; font-size: 9pt; font-weight: bold; text-align: left; text-indent: 5px; border-bottom: 1px solid white; overflow: hidden; display: none; } #itemholder .item a:hover span { background: #386b1f url('scroller/link-background.gif') bottom left repeat-x; color: white; display: block; } #itemholder .itemshadow { position: absolute; bottom: -42px; left: 1px; z-index: -1; width: 180px; height: 35px; background-position: top center; background-repeat: no-repeat; opacity: 0.50; } #itemholder #item00 { left: 0px; } #itemholder #item01 { left: 220px; } #itemholder #item02 { left: 440px; } #itemholder #item03 { left: 660px; } #itemholder #item04 { left: 880px; } #itemholder #item05 { left: 1100px; } #itemholder #item06 { left: 1320px; } #itemholder #item07 { left: 1540px; } #scroller #leftcover { position: absolute; left: 0px; top: 0px; width: 25px; height: 240px; background: url('scroller/leftcover.png') 0px -12px no-repeat; } #scroller #rightcover { position: absolute; right: 0px; top: 0px; width: 25px; height: 240px; background: url('scroller/rightcover.png') 0px -12px no-repeat; } #scroller #leftcover #leftarrows { position: absolute; left: 5px; top: 90px; width: 115px; height: 43px; z-index: 13; background-position: left top; background-repeat: no-repeat; opacity:0.70; } #scroller #rightcover #rightarrows { position: absolute; right: 5px; top: 90px; width: 115px; height: 43px; z-index: 13; background-position: left top; background-repeat: no-repeat; opacity:0.70; } #leftarrow1, #leftarrow2, #leftarrow3, #leftarrow4, #leftarrow5 { width: 23px; height: 43px; float: right; margin-left: -4px; background: url('scroller/leftarrow-1.gif') right top no-repeat; display: none; } #rightarrow1, #rightarrow2, #rightarrow3, #rightarrow4, #rightarrow5 { width: 23px; height: 43px; float: left; margin-right: -4px; background: url('scroller/rightarrow-1.gif') left top no-repeat; display: none; } #leftarrow2 { background-image: url('scroller/leftarrow-2.gif'); } #rightarrow2 { background-image: url('scroller/rightarrow-2.gif'); } #leftarrow3 { background-image: url('scroller/leftarrow-3.gif'); } #rightarrow3 { background-image: url('scroller/rightarrow-3.gif'); } #leftarrow4 { background-image: url('scroller/leftarrow-4.gif'); } #rightarrow4 { background-image: url('scroller/rightarrow-4.gif'); } #leftarrow5 { background-image: url('scroller/leftarrow-5.gif'); } #rightarrow5 { background-image: url('scroller/rightarrow-5.gif'); } /*---------------------------------------------------------------------------------------------------- GENERAL CONTENT ----------------------------------------------------------------------------------------------------*/ #pagecontent { position: relative; overflow: auto; z-index: 10; outline: 0px; } #pagecontent p a, #pagecontent li a { color: #f7fbe9; text-decoration: none; border-bottom: 1px dotted #f7fbe9; } #pagecontent p a:hover, #pagecontent li a:hover { color: white; border-bottom-style: solid; } #pagecontent a img { border: 0px solid transparent; outline: 0px; } #pagecontent .column { /* border: 1px solid #386b1f; */ float: left; margin-right: 25px; padding: 5px; outline: 0px; } #pagecontent .column p:first-child { margin-top: 0px; padding-top: 0px; } #pagecontent .column h2 { margin-bottom: 0px; padding-bottom: 0.20em; margin-top: 0px; color: #bfe67c; font-variant: small-caps; } #pagecontent .column h2:first-child, #pagecontent .column h2.first { margin-top: 0px; padding-top: 0px; color: #386b1f; } #pagecontent .column h3 { margin-bottom: 0px; padding-bottom: 0.20em; margin-top: 0px; color: #bfe67c; font-variant: small-caps; } #pagecontent .column h3:first-child, #pagecontent .column h3.first { margin-top: 0px; padding-top: 0px; color: #386b1f; } #pagecontent .column h4 { margin-bottom: 0px; padding-bottom: 0.20em; margin-top: 0px; color: #bfe67c; font-variant: small-caps; } #pagecontent .column ul { margin-top: 0px; padding-top: 0px; padding-left: 1.2em; } #pagecontent .column ul li { margin-left: 0px; padding-top: 0.1em; list-style-image: url('pagecontent/li-animarrows.gif'); list-style-type: square; } #pagecontent .column ul li a { text-align: left; } #pagecontent .column ul.indent { padding-left: 3em; } #pagecontent .column ol { color: #dff3bc; } #pagecontent .column img { margin-bottom: 20px; } #pagecontent .darken { background: url('background/green33.png') left top repeat; } #pagecontent .lefthalf { width: 420px; } #pagecontent .righthalf { width: 420px; margin-right: 0px; } #pagecontent .leftthird { width: 272px; } #pagecontent .rightthird { width: 272px; margin-right: 0px; } #pagecontent .lefttwothird { width: 565px; } #pagecontent .righttwothird { width: 565px; margin-right: 0px; } #pagecontent .leftquarter { width: 195px; } #pagecontent .rightquarter { width: 195px; margin-right: 0px; } #pagecontent .leftthreequarter { width: 640px; /* margin-right: 20px; */ } #pagecontent .rightthreequarter { width: 640px; margin-right: 0px; } #pagecontent .leftblog { width: 155px; } #pagecontent .rightblog { width: 680px; margin-right: 0px; } /*---------------------------------------------------------------------------------------------------- BLOG ----------------------------------------------------------------------------------------------------*/ #pagecontent .column .blogentry { border-left: 1px solid white; outline-left: 2px solid #abe11c; padding-left: 24px; } #pagecontent .column .blogentry h2 { color: white; } #pagecontent .column .blogentry h4.time { font-size: 10pt; color: #386b1f; } #pagecontent .column .blogarchive { } #pagecontent .column .blogarchive p, #pagecontent .column .blogarchive span { font-size: 10pt; } /*---------------------------------------------------------------------------------------------------- PORTFOLIO ----------------------------------------------------------------------------------------------------*/ #pagecontent .column .portfoliointro { overflow: auto; } #pagecontent .column .portfoliointro img { float: right; margin-left: 8px; margin-bottom: 8px; } #pagecontent .column .portfoliointro p { padding-top: 0px; margin-top: 0px; } #pagecontent .column .portfoliointro a { padding-left: 16px; background: url('pagecontent/li-animarrows.gif') 0px 4px no-repeat; } /*---------------------------------------------------------------------------------------------------- GALLERY ----------------------------------------------------------------------------------------------------*/ #pagecontent .column #galleryalbum { margin-left: 35px; width: 850px; margin-top: 10px; } #pagecontent .column #galleryalbum h3 { display: none; } #pagecontent .column #galleryalbum .galleryalbumitem { float: left; display: block; margin-right: 25px; margin-bottom: 25px; border: 1px solid white; color: black; padding: 0px; } #pagecontent .column #galleryalbum .galleryalbumitem img { margin: 0px; padding: 0px; } #pagecontent .column #galleryalbum .galleryalbumitem a { background: #a6cb4e url('scroller/link-background.gif') top left repeat-x; height: 202px; color: white; display: block; text-decoration: none; padding-bottom: 0px; margin-bottom: 0px; } #pagecontent .column #galleryalbum .galleryalbumitem a span { position: relative; top: 0px; width: 100%; display: block; text-transform: uppercase; padding: 3px 0px; font-size: 9pt; font-weight: bold; text-align: left; text-indent: 5px; border-bottom: 1px solid white; overflow: hidden; } /* */ #pagecontent .column #galleryimage { width: 100%; overflow: hidden; } #pagecontent .column #galleryimage img.portrait { margin-left: 80px; } #pagecontent .column #gallerythumbnails { } #pagecontent .column #gallerythumbnails .thumb { float: left; width: 56px; height: 56px; margin-right: 5px; margin-bottom: 5px; padding: 2px; outline: 1px solid #bfe67c; overflow: hidden; } #pagecontent .column #gallerythumbnails .thumb:hover { outline-color: white; background-color: #386b1f; } #pagecontent .column #gallerythumbnails .selected { outline-color: white; outline-style: dotted; background-color: /*#386b1f*/ black; } #pagecontent .column #gallerythumbnails .selected:hover { outline-color: white; outline-style: dotted; } #pagecontent .column #gallerythumbnails .thumb img { margin: 0px; width: 56px; height: 56px; } /*---------------------------------------------------------------------------------------------------- FOOTER ----------------------------------------------------------------------------------------------------*/ #footerback { width: 948px; height: 200px; position: fixed; bottom: 0px; left: 50%; margin-left: -474px; background: transparent url('background/footerback.png') center bottom repeat-x; z-index: 10; } #footer { width: 948px; height: 200px; position: fixed; bottom: 0px; left: 50%; margin-left: -474px; background: transparent url('background/footer.gif') center bottom no-repeat; z-index: 11; } #logo { position: absolute; bottom: 25px; right: 25px; width: 291px; height: 90px; background: url('logo/logo-white-blackmatte.gif') right bottom no-repeat; } #copyright { position: absolute; bottom: 25px; left: 25px; color: #386b1f; font-size: 8pt; } #siteaddress { display: none; } #nojavascript { position: absolute; top: 200px; left: 50%; width: 500px; margin-left: -250px; height: 125px; background: transparent url('misc/nojavascript.gif') center center no-repeat; z-index: 15; } /*---------------------------------------------------------------------------------------------------- CUSTOM SCROLLERS ----------------------------------------------------------------------------------------------------*/ #itemholder #item-owl .item a { background-image: url('scroller/items/owls.jpg'); } #itemholder #item-owl .itemshadow { background-image: url('scroller/items/owls-mirror.gif'); } #itemholder #item-badby .item a { background-image: url('scroller/items/badby.jpg'); } #itemholder #item-badby .itemshadow { background-image: url('scroller/items/badby-mirror.gif'); } #itemholder #item-browns .item a { background-image: url('scroller/items/browns.gif'); } #itemholder #item-browns .itemshadow { background-image: url('scroller/items/browns-mirror.gif'); } #itemholder #item-farkducks .item a { background-image: url('scroller/items/fark-ducks.jpg'); } #itemholder #item-farkducks .itemshadow { background-image: url('scroller/items/farkducks-mirror.gif'); } #itemholder #item-scanclean .item a { background-image: url('scroller/items/scanclean.jpg'); } #itemholder #item-scanclean .itemshadow { background-image: url('scroller/items/scanclean-mirror.gif'); } #itemholder #item-lambo .item a { background-image: url('scroller/items/lambo.jpg'); } #itemholder #item-lambo .itemshadow { background-image: url('scroller/items/lambo-mirror.gif'); } #itemholder #item-plough .item a { background-image: url('scroller/items/plough.jpg'); } #itemholder #item-plough .itemshadow { background-image: url('scroller/items/plough-mirror.gif'); } #itemholder #item-djrak .item a { background-image: url('scroller/items/djrak.jpg'); } #itemholder #item-djrak .itemshadow { background-image: url('scroller/items/djrak-mirror.gif'); } #itemholder #item-wjo .item a { background-image: url('scroller/items/wjo.jpg'); } #itemholder #item-wjo .itemshadow { background-image: url('scroller/items/wjo-mirror.gif'); } /*---------------------------------------------------------------------------------------------------- CUSTOM CONTENT ----------------------------------------------------------------------------------------------------*/ #pagecontent .column img#facebook { margin-left: 65px; padding: 1px; border: 1px solid #bfe67c; } #pagecontent .column img#em { margin-left: 10px; margin-top: 15px; } #pagecontent .column #brownsflash { width: 220px; height: 220px; margin-left: 25px; margin-bottom: 10px; } #pagecontent .column #signatureflash { width: 272px; height: 137px; margin-bottom: 10px; }