/* reset and basics */
html, body, div, form, fieldset, legend, label, ul, li { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { text-align: left; vertical-align: top; }
h1, h2, h3, h4, h5, h6, th, td, caption { font-weight: normal; }
img { border: 0; }
body { background: url(../images/normal/bg-page.jpg) #969696 fixed repeat; font: 62.5%/2.4em "Century Gothic", AppleGothic, Arial, sans-serif; color: #333; }
.clear { clear: both; }
.clearleft { clear: left; }
/* structure */
#container { margin: 0 auto; width: 1000px; z-index: 10; position: relative; }
#header { background: url(../images/bg-header-sprite.png) no-repeat 0px 0px; position: relative; height: 237px; z-index: 20; padding: 45px 35px 0 35px; }
#nav-header { background: url(../images/bg-title-bar-sprite.jpg) no-repeat 0px 0px; display: block; height: 88px; z-index: 10; }
.nav { margin: 0; }
#title { background: url(../images/bg-title-bar-sprite.jpg) no-repeat 0px -88px; display: block; height: 149px; z-index: 10; }
#main-wrap { background: url(../images/bg-main-wrap-sprite.png) repeat-y 0px 0px; padding: 0 35px; position: relative; z-index: 10; }
#main-inner-wrap { background: url(../images/normal/bg-main-inner-wrap.png) 0px 300px no-repeat; position: relative; z-index: 10; }
#main { background: url(../images/bg-main-sprite.png) no-repeat 0px 0px; position: relative; z-index: 10; }
#content { width: 540px; padding: 0px 0px 50px 80px; margin: 0; background: url(../images/normal/trailing-xs.png) no-repeat 0px 75px; }
#photo { background-position: 0% 100%; background-repeat: no-repeat; width: 930px; }
#nav-footer { background: url(../images/nav-sprite.png) no-repeat 0 -440px; height: 88px; position: absolute; bottom: 0px; width: 755px; }
#styleswitcher { position: absolute; float: right; top: 147px; right: 83px; width: 160px; }
.switcher-column { float: left; width: 80px; }
#downlink a { display: block; height: 180px; width: 220px; position: absolute; float: right; top: 20px; right: 34px; }
#uplink a { display: block; height: 70px; width: 70px; position: relative; left: 900px; top: 10px; }
#hiddenclue { position: fixed; width: 90px; left: 50%; top: 120px; z-index: 1; margin-left: 277px; }
#footer { background: url(../images/bg-footer-sprite.png) no-repeat 0px 0px; height: 110px; position: relative; z-index: 10; }
/* design */
p, td { margin: 0 0 16px 65px; font-size: 1.4em; }
td { height: 40px; }
strong { fo nt-size: 1.15em; font-fam ily: maxshmax-font-bold, "Arial Black", Gadget, sans-serif; color: #333; font-wei ght: normal; }
.bold { font-family: maxshmax-font-bold, "Arial Black", Gadget, sans-serif; }
#content ul { margin: 0 0 24px 12px; }
#content li { margin: 0 0 10px 85px; font-size: 1.4em; }
p.nextstep { margin-left: 140px; padding-top: 50px; }
#nextstepspan { display: block; width: 94px; height: 17px; text-indent: -9999px; background: url(../images/next_step.png) no-repeat; float: left; margin: 55px 0 0 38px; }
acronym { border-bottom: 1px dotted #515151; cursor: help; }
.subdued { font-size: 1.2em; color: #999; line-height: 1.6em; }
.right { text-align: right; }
.small-bottom-margin { margin-bottom: 8px; }
.hanging { text-indent: -0.7em; }
.center { text-align: center; }
.photo { padding: 4px; border: 1px solid #ddd; margin: 0 0 12px 65px; }
a#me { display: block; width: 465px; height: 310px; background: url(../images/me.jpg) no-repeat -465px 0px; cursor: default; }
a#me:hover, a#me:active { background-position: 0px 0px; }
.button-work { text-indent: -9999px; display: inline-block; zoom: 1; *display: inline; width: 150px; height: 25px; background: url(../images/buttons-work.png) no-repeat; }
#jhbc-old-site { background-position: 0px 0px; }
#jhbc-old-site:hover { background-position: 0px -25px; }
#jhbc-newsletter { background-position: -150px 0px; }
#jhbc-newsletter:hover { background-position: -150px -25px; }
/* headings */
h1, h2, h3, h4, h5, h6 { color: #222222; font-family: maxshmax-font-thin, "Century Gothic", AppleGothic, Arial, sans-serif; }
h1 { text-indent: -9999px; margin: 0; }
h2 { font-size: 36px; font-weight: normal; margin: 36px 0 0 0; display: block; background: url(../images/h2Xs.png) no-repeat; background-position: 0px 0px; padding: 0 0 0 28px; line-height: 75px; }
h2:first-child { background-position: 0px -150px; margin: 0; }
h2.sixty { background-position: 0px -75px; }
h3 { font-size: 2.4em; margin: 36px 0 12px 65px; line-height: 1.2em; text-indent: -20px; }
h2 + h3 { margin-top: 0; }
h4 { font-size: 2.4em; margin: 24px 0 24px 65px; line-height: 1.2em; }
/* fonts */
@font-face {
font-family: 'maxshmax-font-bold';
src: url('../fonts/maxshmax-font-bold-webfont.eot');
src: url('../fonts/maxshmax-font-bold-webfont.eot?iefix') format('eot'),
url('../fonts/maxshmax-font-bold-webfont.woff') format('woff'),
url('../fonts/maxshmax-font-bold-webfont.ttf') format('truetype'),
url('../fonts/maxshmax-font-bold-webfont.svg#webfontTgdrDfYc') format('svg');
font-weight: normal; font-style: normal; }
@font-face {
font-family: 'maxshmax-font-thin';
src: url('../fonts/maxshmax-font-thin-webfont.eot');
src: url('../fonts/maxshmax-font-thin-webfont.eot?iefix') format('eot'),
url('../fonts/maxshmax-font-thin-webfont.woff') format('woff'),
url('../fonts/maxshmax-font-thin-webfont.ttf') format('truetype'),
url('../fonts/maxshmax-font-thin-webfont.svg#webfontt4mDQd0P') format('svg');
font-weight: normal; font-style: normal; }
@font-face {
font-family: 'maxshmax-font-normal';
src: url('../fonts/maxshmax-font-normal-webfont.eot');
src: url('../fonts/maxshmax-font-normal-webfont.eot?#iefix') format('eot'),
url('../fonts/maxshmax-font-normal-webfont.woff') format('woff'),
url('../fonts/maxshmax-font-normal-webfont.ttf') format('truetype'),
url('../fonts/maxshmax-font-normal-webfont.svg#webfontm81ic51F') format('svg');
font-weight: normal; font-style: normal; }
/* nav */
a:link, a:visited { color: #333; text-decoration: underline; }
a:hover, a:active { color: #777; text-decoration: underline; }
#nav-header, #nav-footer { padding-left: 175px; }
ul.nav li { padding: 0; margin: 0; display: block; float: left; text-indent: -9999px; }
ul.nav li a { border: 0; display: block; height: 88px; background: url(../images/nav-sprite.png) no-repeat; }
li.liindex a { width: 73px; }
li.liindex a:link, li.liindex a:visited { background-position: -175px 0px; }
li.liindex a:hover, li.liindex a:active { background-position: -175px -88px; }
li.liwebdesign a { width: 97px; }
li.liwebdesign a:link, li.liwebdesign a:visited { background-position: -248px 0px; }
li.liwebdesign a:hover, li.liwebdesign a:active { background-position: -248px -88px; }
li.lidetails a { width: 65px; }
li.lidetails a:link, li.lidetails a:visited { background-position: -345px 0px; }
li.lidetails a:hover, li.lidetails a:active { background-position: -345px -88px; }
li.lipricing a { width: 66px; }
li.lipricing a:link, li.lipricing a:visited { background-position: -410px 0px; }
li.lipricing a:hover, li.lipricing a:active { background-position: -410px -88px; }
li.ligoogle a { width: 68px; }
li.ligoogle a:link, li.ligoogle a:visited { background-position: -476px 0px; }
li.ligoogle a:hover, li.ligoogle a:active { background-position: -476px -88px; }
li.liwork a { width: 58px; }
li.liwork a:link, li.liwork a:visited { background-position: -544px 0px; }
li.liwork a:hover, li.liwork a:active { background-position: -544px -88px; }
li.liabout a { width: 64px; }
li.liabout a:link, li.liabout a:visited { background-position: -602px 0px; }
li.liabout a:hover, li.liabout a:active { background-position: -602px -88px; }
li.licontact a { width: 89px; }
li.licontact a:link, li.licontact a:visited { background-position: -666px 0px; }
li.licontact a:hover, li.licontact a:active { background-position: -666px -88px; }
#nav-footer li.liindex a:link, #nav-footer li.liindex a:visited { background-position: -175px -176px; }
#nav-footer li.liindex a:hover, #nav-footer li.liindex a:active { background-position: -175px -352px; }
#nav-footer li.liwebdesign a:link, #nav-footer li.liwebdesign a:visited { background-position: -248px -176px; }
#nav-footer li.liwebdesign a:hover, #nav-footer li.liwebdesign a:active { background-position: -248px -352px; }
#nav-footer li.lidetails a:link, #nav-footer li.lidetails a:visited { background-position: -345px -176px; }
#nav-footer li.lidetails a:hover, #nav-footer li.lidetails a:active { background-position: -345px -352px; }
#nav-footer li.lipricing a:link, #nav-footer li.lipricing a:visited { background-position: -410px -176px; }
#nav-footer li.lipricing a:hover, #nav-footer li.lipricing a:active { background-position: -410px -352px; }
#nav-footer li.ligoogle a:link, #nav-footer li.ligoogle a:visited { background-position: -476px -176px; }
#nav-footer li.ligoogle a:hover, #nav-footer li.ligoogle a:active { background-position: -476px -352px; }
#nav-footer li.liwork a:link, #nav-footer li.liwork a:visited { background-position: -544px -176px; }
#nav-footer li.liwork a:hover, #nav-footer li.liwork a:active { background-position: -544px -352px; }
#nav-footer li.liabout a:link, #nav-footer li.liabout a:visited { background-position: -602px -176px; }
#nav-footer li.liabout a:hover, #nav-footer li.liabout a:active { background-position: -602px -352px; }
#nav-footer li.licontact a:link, #nav-footer li.licontact a:visited { background-position: -666px -176px; }
#nav-footer li.licontact a:hover, #nav-footer li.licontact a:active { background-position: -666px -352px; }
/* currents */
#index li.liindex a { visibility: hidden; }
#index li.liindex { background: url(../images/nav-sprite.png) no-repeat -175px -88px; }
#web-design li.liwebdesign a { visibility: hidden; }
#web-design li.liwebdesign { background: url(../images/nav-sprite.png) no-repeat -248px -88px; }
#details li.lidetails a { visibility: hidden; }
#details li.lidetails { background: url(../images/nav-sprite.png) no-repeat -345px -88px; }
#pricing li.lipricing a { visibility: hidden; }
#pricing li.lipricing { background: url(../images/nav-sprite.png) no-repeat -410px -88px; }
#google li.ligoogle a { visibility: hidden; }
#google li.ligoogle { background: url(../images/nav-sprite.png) no-repeat -476px -88px; }
#work li.liwork a { visibility: hidden; }
#work li.liwork { background: url(../images/nav-sprite.png) no-repeat -544px -88px; }
#about li.liabout a { visibility: hidden; }
#about li.liabout { background: url(../images/nav-sprite.png) no-repeat -602px -88px; }
#contact li.licontact a { visibility: hidden; }
#contact li.licontact { background: url(../images/nav-sprite.png) no-repeat -666px -88px; }
#index #nav-footer li.liindex { background: url(../images/nav-sprite.png) no-repeat -175px -264px; }
#web-design #nav-footer li.liwebdesign { background: url(../images/nav-sprite.png) no-repeat -248px -264px; }
#details #nav-footer li.lidetails { background: url(../images/nav-sprite.png) no-repeat -345px -264px; }
#pricing #nav-footer li.lipricing { background: url(../images/nav-sprite.png) no-repeat -410px -264px; }
#google #nav-footer li.ligoogle { background: url(../images/nav-sprite.png) no-repeat -476px -264px; }
#work #nav-footer li.liwork { background: url(../images/nav-sprite.png) no-repeat -544px -264px; }
#about #nav-footer li.liabout { background: url(../images/nav-sprite.png) no-repeat -602px -264px; }
#contact #nav-footer li.licontact { background: url(../images/nav-sprite.png) no-repeat -666px -264px; }
/* switchers */
#styleswitcher a { display: block; width: 80px; height: 92px; background: url(../images/switcher.png) no-repeat; }
a#firsthookleft { background-position: 0px 0px; }
a#firsthookright { background-position: -80px 0px; margin-top: 20px; }
a#fanged:link, a#fanged:visited { background-position: 0px -184px; } a#fanged:hover, a#fanged:active { background-position: -80px -184px; }
a#feelers:link, a#feelers:visited { background-position: 0px -276px; } a#feelers:hover, a#feelers:active { background-position: -80px -276px; }
a#fireworks:link, a#fireworks:visited { background-position: 0px -368px; } a#fireworks:hover, a#fireworks:active { background-position: -80px -368px; }
a#fireworks-day:link, a#fireworks-day:visited { background-position: 0px -460px; } a#fireworks-day:hover, a#fireworks-day:active { background-position: -80px -460px; }
a#flappers:link, a#flappers:visited { background-position: 0px -552px; } a#flappers:hover, a#flappers:active { background-position: -80px -552px; }
a#flappers-dark:link, a#flappers-dark:visited { background-position: 0px -644px; } a#flappers-dark:hover, a#flappers-dark:active { background-position: -80px -644px; }
a#flashes:link, a#flashes:visited { background-position: 0px -px; } a#flashes:hover, a#flashes:active { background-position: -80px -px; }
a#floaters:link, a#floaters:visited { background-position: 0px -736px; } a#floaters:hover, a#floaters:active { background-position: -80px -736px; }
a#flora:link, a#flora:visited { background-position: 0px -828px; } a#flora:hover, a#flora:active { background-position: -80px -828px; }
a#flora-dark:link, a#flora-dark:visited { background-position: 0px -920px; } a#flora-dark:hover, a#flora-dark:active { background-position: -80px -920px; }
a#flutter-bys:link, a#flutter-bys:visited { background-position: 0px -px; } a#flutter-bys:hover, a#flutter-bys:active { background-position: -80px -px; }
a#flyers:link, a#flyers:visited { background-position: 0px -1104px; } a#flyers:hover, a#flyers:active { background-position: -80px -1104px; }
a#foreshore:link, a#foreshore:visited { background-position: 0px -1380px; } a#foreshore:hover, a#foreshore:active { background-position: -80px -1380px; }
a#formations:link, a#formations:visited { background-position: 0px -px; } a#formations:hover, a#formations:active { background-position: -80px -px; }
a#frosties:link, a#frosties:visited { background-position: 0px -1012px; } a#frosties:hover, a#frosties:active { background-position: -80px -1012px; }
a#fungi:link, a#fungi:visited { background-position: 0px -1196px; } a#fungi:hover, a#fungi:active { background-position: -80px -1196px; }
a#furries:link, a#furries:visited { background-position: 0px -92px; } a#furries:hover, a#furries:active { background-position: -80px -92px; }
a#furries-dark:link, a#furries-dark:visited { background-position: 0px -1656px; } a#furries-dark:hover, a#furries-dark:active { background-position: -80px -1656px; }
/* my work image links */
a.myworkimg { display: block; width: 465px; height: 285px; }
a#realmconstructions { background: url(../images/work/realmconstructions.jpg) -465px 0px; }
a#realmconstructions:hover { background-position: 0px 0px; }
a#dreamclarity { background: url(../images/work/dreamclarity.jpg) -465px 0px; }
a#dreamclarity:hover { background-position: 0px 0px; }
a#yogawithin { background: url(../images/work/yogawithin.jpg) -465px 0px; }
a#yogawithin:hover { background-position: 0px 0px; }
a#ondenhams { background: url(../images/work/ondenhams.jpg) -465px 0px; }
a#ondenhams:hover { background-position: 0px 0px; }
a#perfex { background: url(../images/work/perfex.jpg) -465px 0px; }
a#perfex:hover { background-position: 0px 0px; }
a#diamondlambert { background: url(../images/work/diamondlambert.jpg) -465px 0px; }
a#diamondlambert:hover { background-position: 0px 0px; }
a#ljdcleaning { background: url(../images/work/ljdcleaning.jpg) -465px 0px; }
a#ljdcleaning:hover { background-position: 0px 0px; }
a#lunge { background: url(../images/work/lunge.jpg) -465px 0px; }
a#lunge:hover { background-position: 0px 0px; }
a#yogaforsurfers { background: url(../images/work/yogaforsurfers.jpg) -465px 0px; }
a#yogaforsurfers:hover { background-position: 0px 0px; }
a#southcoastmusicsociety { background: url(../images/work/southcoastmusicsociety.jpg) -465px 0px; }
a#southcoastmusicsociety:hover { background-position: 0px 0px; }
a#stcecilia { background: url(../images/work/stcecilia.jpg) -465px 0px; }
a#stcecilia:hover { background-position: 0px 0px; }
a#eagarbros { background: url(../images/work/eagarbros.jpg) -465px 0px; }
a#eagarbros:hover { background-position: 0px 0px; }
a#getzoned { background: url(../images/work/getzoned.jpg) -465px 0px; }
a#getzoned:hover { background-position: 0px 0px; }
a#englishwalkandtalk { background: url(../images/work/englishwalkandtalk.jpg) -465px 0px; }
a#englishwalkandtalk:hover { background-position: 0px 0px; }
a#gardenfunktion { background: url(../images/work/gardenfunktion.jpg) -465px 0px; }
a#gardenfunktion:hover { background-position: 0px 0px; }
a#tshitaki { background: url(../images/work/tshitaki.jpg) -465px 0px; }
a#tshitaki:hover { background-position: 0px 0px; }
a#jameshurtbuild { background: url(../images/work/jameshurtbuild.jpg) -465px 0px; }
a#jameshurtbuild:hover { background-position: 0px 0px; }