/*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-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline}
/* remember to define focus styles! */
:focus {outline: 0}
body {line-height: 1}
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: "" ""}
/*handy*/
.right {float: right}
.left {float: left}
.center {text-align: center}
.none {display: none}
p {line-height: 18px; margin-bottom: 18px}
p.sml {font-size: 11px}
ul {padding-left: 3px}
li {position: relative; background: url(../images/bullet.gif) no-repeat; background-position: 0 5px;padding-left: 12px;line-height: 16px; margin-top: 2px}
.marginBase0 {margin-bottom: 0}
.clearboth {clear: both}
.border10 {border: 10px #292929 solid}
/*clearfix*/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/*links*/
a {text-decoration: none; color: #ff6600}
a:hover {text-decoration: underline; color: #0066cc}
a span {color: #0066cc}
a:hover span {color: #ff9900; text-decoration: none}
#contactLeft a {font-weight: bold}
/*structure*/
body {font: normal 12px arial,helvetica,sans-serif; background: #0c102c; color: #797f98}
#headerContainer {margin: 0 auto; height: 151px; background: #000 url(../images/header-tile.jpg) repeat-x}
#header {margin: 0 auto 0 auto; width: 900px}
#headerTop {float: left; width: 335px; height: 132px; padding-left: 46px}
#headerNav {position: relative; float: left; width: 519px; height: 150px; background: #000 url(../images/header-gloss.jpg) no-repeat right top}
ul#topNav {position: absolute; right: 70px; bottom: -1px; list-style: none; float: right}
#topNav li {float:left; background: none; margin:0; padding:0 0 0 6px}
#topNav a {float:left; display:block; background: none; padding:5px 13px 11px 8px; text-decoration:none; color:#daeafa; font: bold 1.5em myriad,arial,sans-serif; letter-spacing: 0}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#topNav a {float:none;}
/* End IE5-Mac hack */
#topNav a:hover {color:#ff6600}
#topNav #current {background:url(../images/button-left.gif) no-repeat left top}
#topNav #current a {background: url(../images/button-right.gif) no-repeat right top; color:#0066cc; padding-bottom: 11px}
#mainContainer {margin: 0 auto; background: #c8daed url(../images/bg-tile.jpg) repeat-x}
#mainContainerPortfolio {margin: 0 auto; background: #c8daed url(../images/bg-tile-portfolio.jpg) repeat-x}
#mainContainerContact {margin: 0 auto; background: #e0eaf4 url(../images/bg-tile-contact.jpg) repeat-x}
#main {margin: 0 auto; width: 761px; background: url(../images/bg-home.jpg) no-repeat; padding: 0 69px 0 70px}
#main.content {background: url(../images/bg-content.jpg) no-repeat; padding-top: 37px}
#mainPortfolio {margin: 0 auto; width: 761px; background: url(../images/bg-portfolio.jpg) no-repeat; padding: 37px 69px 0 70px}
#mainContact {margin: 0 auto; background: url(../images/bg-contact.jpg) no-repeat; padding: 37px 0 10px 70px; width: 830px; height: 431px}
#h1container {position: relative; height: 52px; padding: 37px 0 0 31px; background: url(../images/corner-left.jpg ) no-repeat}
#aboveFooterGrad {background: url(../images/grad-bottom.jpg) repeat-x bottom; padding-bottom: 1em}
#aboveFooter {background: url(../images/hr-home.jpg) no-repeat top; margin: 0 auto; width: 760px; padding-top: 30px}
#aboveFooterLeft {float: left; width: 340px; padding: 0 55px 0 0; background: url(../images/quoteLeft.gif) no-repeat right 8px}
#aboveFooterRight {float: left; width: 320px; padding: 0 40px 0 5px; background: url(../images/quoteRight.gif) no-repeat right 55px}
#aboveFooterLeft h2 {background: url(../images/h-contact-me.gif) no-repeat; width: 128px; height: 15px; display: block; margin-bottom: 8px}
#aboveFooterLeft h2 span {display: block; width: 128px; height: 15px; text-indent:-999em; overflow: hidden;}
#aboveFooterRight h2 {background: url(../images/h-testimonial.gif) no-repeat; width: 135px; height: 15px; display: block; margin-bottom: 8px}
#aboveFooterRight h2 span {display: block; width: 135px; height: 15px; text-indent:-999em; overflow: hidden;}
p.quoteCaption {font-size: 0.9em; font-style: italic; margin-top: -0.9em}
#footerContainer {background: url(../images/footer-grad.jpg) repeat-x; margin-top: 0}
#contentGrad {background: url(../images/grad-bottom.jpg) repeat-x bottom}
#contactGrad {background: url(../images/grad-bottom-contact.jpg) repeat-x bottom; padding-bottom: 95px}
#footer {margin: 0 auto; width: 780px; background: #0c102c url(../images/footer-gloss.jpg) repeat-x; color: #7c9cbd; font-size: 11px; padding: 37px 0 17px}
#footer p {padding: 5px 0 0 40px; height: 31px; background: url(../images/subFooter.gif) no-repeat;}
#photodiv {position: relative; background-repeat:no-repeat; float: left; width: 361px; height: 403px; margin: 37px 0 0 0}
#homeRight {float: right; width: 361px; margin-top: 37px}
#promoText {position: relative; width: 321px; background: url(../images/corner-right.jpg) no-repeat top right; margin: 0; padding: 35px 40px 0 0}
#promoText p.portfoliop {background: url(../images/h-subfusion.gif) no-repeat; width: 321px; height: 34px; display: block; margin: 0}
#promoText p.portfoliop span {display: block; width: 321px; height: 34px; text-indent:-999em; overflow: hidden;}
#promoText h1 {background: url(../images/h-freelance.gif) no-repeat; width: 321px; height: 26px; display: block}
#promoText h1 span {display: block; width: 321px; height: 26px; text-indent:-999em; overflow: hidden;}
#promoText p {margin-top: 3px}
#servicesText {clear: both; margin-top: 50px; float: left; width: 221px}
#servicesText h2 {background: url(../images/h-my.gif) no-repeat; width: 221px; height: 28px; display: block; margin-bottom: 8px}
#servicesText h2 span {display: block; width: 221px; height: 28px; text-indent:-999em; overflow: hidden;}
#servicesText ul {color: #333333}
#tvFlash {position: relative; float: right; margin: -12px -46px 0 0}
h1.portfolio {background: url(../images/h-web-design-portfolio.gif) no-repeat; width: 292px; height: 18px; display: block}
h1.portfolio span {display: block; width: 292px; height: 18px; text-indent:-999em; overflow: hidden;}
h1.contact {background: url(../images/h-contact.gif) no-repeat; width: 115px; height: 18px; display: block}
h1.contact span {display: block; width: 115px; height: 18px; text-indent:-999em; overflow: hidden;}
/*portfolio*/
#portfolioContainer {margin: 0 0 0 31px; width: 729px; padding-bottom: 50px}
div.portfolio {position: relative; clear: both; margin-top: 26px; color: #333; width: 729px; padding-bottom: 28px; background: url(../images/hr-home.jpg) no-repeat bottom}
div.portfolio.last {background: none}
div.portfolio.first {margin-top: 0; background: url(../images/hr-portfolio-top.jpg) no-repeat bottom}
.portfolioImage {background: #c7daed; padding: 1px; border: 10px #b2bdd0 solid; float: left; width: 447px}
/*.portfolioImage:hover {background: #c7daed; padding: 1px; border: 10px #fff solid; float: left; width: 447px}*/
#gallery ul, #gallery ul li {list-style-type: none; background: none}
#gallery ul li {display: inline; padding-left: 0; margin-top: 0; line-height: 0}
#gallery ul li img {background: #c7daed; padding: 1px; border: 10px #b2bdd0 solid; float: left; width: 447px; height: 331px; margin-left: -3px}
/*#gallery ul li img:hover {background: #c7daed; padding: 1px; border: 10px #fff solid; float: left; width: 447px; height: 331px; margin-left: -3px}*/
div.portfolioText {position: relative; float:left; width: 232px; padding: 10px 0 0 26px}
div.portfolio h2 {color:#666699; font-weight: bold; font-size: 18px; margin-bottom: 0}
div.portfolio p {margin-bottom: 12px}
div.portfolio ul {margin-bottom: 12px}
/*div.portfolio a.linkIcon {background: url(../images-v2/new-win.gif) no-repeat right; padding-right: 15px; padding-top: 1px}*/
/*bournemouth*/
h2.bournemouth {color:#99cc00; font-weight: bold; font-size: 18px; margin-bottom: 12px}
/*profile*/
#profileContainer {margin: 15px auto 0 auto; width: 860px; padding: 0 0 0 49px}
.profileCol {float: left; margin-right: 20px; width: 233px; padding: 15px 20px 8px 20px; background: url(../images/trans-white.jpg)}
.profileCol.right {float: right; margin-right: 0}
#profileContainer h3 {color:#99cc00; font-weight: bold; font-size: 14px; margin-bottom: 12px}
#profileContainer h2 {margin-bottom: 12px}
#profileContainer p {margin-bottom: 12px}
#profileContainer ul {margin-bottom: 12px}
img.top {margin-top: 5px}
#profileContainer.homepage .profileCol {height: 18.75em; padding: 15px 20px 8px 20px}
/*contact*/
#contactContainer {margin: 0 0 0 31px; width: 799px; padding-bottom: 0}
#contactLeft {float: left; width: 372px; padding-right: 21px; background: url(../images/bg-form-left.jpg) no-repeat right top; color: #333; padding-bottom: 100px}
#contactLeft p.sml {color: #797F98}
p.thanks {float: right; font-style: italic; margin-top: -18px}
span.contactColLeft {float: left; width: 115px}
span.contactColRight {float: left; margin-left: 115px}
#contactRight {float: left; width: 369px; margin-top: 2px; color: #333; padding: 0 0 0 20px; background: url(../images/bg-form-right.jpg) no-repeat right top}
#contactRightDone {float: left; width: 369px; margin-top: 0; color: #333; padding: 0 0 0 20px}
#contactRightDone h2 {color:#666699; font-weight: bold; font-size: 18px; margin-bottom: 0}
fieldset {text-align: left; margin-bottom: -10px}
legend {display:none}
form h2 {font-weight: bold; line-height: 18px;}
form h2 span {font-weight: normal}
form h2 span.error {font-weight: bold; color: #FF6600 }
label {clear: both; font-weight: normal}
label.contactError {font-weight: bold; color: #FF6600}
form .formText.contactError, form .formArea.contactError {border: 1px #FF6600 solid}
form .formText, form .formArea {width: 283px; background: #fff url(../images/fieldbg.jpg) no-repeat; border: 1px #b3bed0 solid; padding: 6px 5px; margin: 5px 0 14px; vertical-align: middle; font: normal 12px arial,helvetica,sans-serif}
form .formArea {height: 71px; vertical-align: middle; margin-bottom: 15px}
.formButton {margin: 0 0 10px 154px}