/*

Style coded and design by Jason Merry December 2007



email: jason.merry@thebookpeople.co.uk, jasonmerry@blueyonder.co.uk

Copyright: The Book People Ltd

*/



*, a {

margin: 0px;

padding: 0px;

}



h1, hr, #skipLinks, #navigation span.heading, button span {

	display: none;

}



body {

margin: 0 10px;

font-family: Arial;

color: #666666;

font-size: 12px;

}



h2 {

color: #e20176;

margin-bottom: 15px;

font-size: 24px;

}



h3 {color: #e20176;margin-bottom: 15px;}



h4 {color: #e20176; font-size: 12px;margin-bottom: 15px;}



#top {

height: 103px;

display: block;

margin-bottom: 5px;

}



#logo {

float: left;

position: absolute;

}



#navigation li {display: inline;}



#navigation {

padding-top: 63px;

display: block;

}

#navigation ul {

height: 22px;

margin-left: 270px;

list-style: none;

width: 652px;

}

#navigation li a span {

visibility: hidden;

}



#navigation li a{

height: 22px;

text-decoration:none;

margin-right: 4px;

}



#navigation li.home a{float: left; width: 50px; background: url(images/tabs/home.gif) no-repeat left -24px;}

#navigation li.home a:visited{background: url(images/tabs/home.gif) no-repeat left -24px;}

#navigation li.home a:hover{background: url(images/tabs/home.gif) no-repeat 0px top;}

#navigation li.home a:active{background: url(images/tabs/home.gif) no-repeat 0px top;}

#home #navigation li.home {float: left; width: 50px; background: url(images/tabs/home.gif) no-repeat left 0px; height:22px; margin-right: 4px;}

#home #navigation li.home span {display: none;}



#navigation li.about a{float: left; width: 71px; background: url(images/tabs/aboutUs.gif) no-repeat left -24px;}

#navigation li.about a:visited{background: url(images/tabs/aboutUs.gif) no-repeat left -24px;}

#navigation li.about a:hover{background: url(images/tabs/aboutUs.gif) no-repeat 0px top;}

#navigation li.about a:active{background: url(images/tabs/aboutUs.gif) no-repeat 0px top;}

#aboutUs #navigation li.about {float: left; width: 71px; background: url(images/tabs/aboutUs.gif) no-repeat left 0px; height:22px; margin-right: 4px;}

#aboutUs #navigation li.about span {display: none;}



#navigation li.works a{float: left; width: 97px; background: url(images/tabs/howItWorks.gif) no-repeat left -24px;}

#navigation li.works a:visited{background: url(images/tabs/howItWorks.gif) no-repeat left -24px;}

#navigation li.works a:hover{background: url(images/tabs/howItWorks.gif) no-repeat 0px top;}

#navigation li.works a:active{background: url(images/tabs/howItWorks.gif) no-repeat 0px top;}

#howItWorks #navigation li.works {float: left; width: 97px; background: url(images/tabs/howItWorks.gif) no-repeat left 0px; height:22px; margin-right: 4px;}

#howItWorks #navigation li.works span {display: none;}



#navigation li.indexPeople a{float: left; width: 98px; background: url(images/tabs/indexPeople.gif) no-repeat left -24px;}

#navigation li.indexPeople a:visited{background: url(images/tabs/indexPeople.gif) no-repeat left -24px;}

#navigation li.indexPeople a:hover{background: url(images/tabs/indexPeople.gif) no-repeat 0px top;}

#navigation li.indexPeople a:active{background: url(images/tabs/indexPeople.gif) no-repeat 0px top;}

#indexPeople #navigation li.indexPeople {float: left; width: 98px; background: url(images/tabs/indexPeople.gif) no-repeat left 0px; height:22px; margin-right: 4px;}

#indexPeople #navigation li.indexPeople span {display: none;}



#navigation li.apply a{float: left; width: 95px; background: url(images/tabs/applyOnline.gif) no-repeat left -24px;}

#navigation li.apply a:visited{background: url(images/tabs/applyOnline.gif) no-repeat left -24px;}

#navigation li.apply a:hover{background: url(images/tabs/applyOnline.gif) no-repeat 0px top;}

#navigation li.apply a:active{background: url(images/tabs/applyOnline.gif) no-repeat 0px top;}

#applyOnline #navigation li.apply,#applyThanks #navigation li.apply,#applyError #navigation li.apply {float: left; width: 95px; background: url(images/tabs/applyOnline.gif) no-repeat left 0px; height:22px; margin-right: 4px;}

#applyOnline #navigation li.apply span,#applyThanks #navigation li.apply span,#applyError #navigation li.apply span {display: none;}



#navigation li.video a{float: left; width: 49px; background: url(images/tabs/video.gif) no-repeat left -24px;}

#navigation li.video a:visited{background: url(images/tabs/video.gif) no-repeat left -24px;}

#navigation li.video a:hover{background: url(images/tabs/video.gif) no-repeat 0px top;}

#navigation li.video a:active{background: url(images/tabs/video.gif) no-repeat 0px top;}

#video #navigation li.video {float: left; width: 49px; background: url(images/tabs/video.gif) no-repeat left 0px; height:22px; margin-right: 4px;}

#video #navigation li.video span {display: none;}



#navBase {

height: 18px;

background: #e20176 url(images/navBaseRight.gif) no-repeat right top;

display: block;



}

#navBase span.first {

background: url(images/navBaseLeft.gif) left top;

}

#mainSurround {



}

#content {

margin-left: 290px;

}



#content ul {

margin: 10px 0px;

margin-left: 50px;

}



#content p {

margin: 15px 0px;

}

p.distributor {clear: both;}

button {

border: 0px;

}



button.findOutMore {

width: 110px;

height: 22px;

background: url(images/buttons/findOutMore.gif) no-repeat;

margin-bottom: 10px;

}



button.findOutMore:hover {

background: url(images/buttons/findOutMoreHover.gif) no-repeat;

}



button.apply {

width: 99px;

height: 22px;

background: url(images/buttons/applyOnline.gif) no-repeat;

}





button.apply:hover {

background: url(images/buttons/applyOnlineHover.gif) no-repeat;

}



fieldset {border: 0px;

margin: 10px 0px;

padding: 10px;}

legend {border: 0px; font-weight: bold; margin: 0px; padding: 0px;}



fieldset p {

margin-top: 0px;

margin-bottom: 15px;

}



.required { color: #FF0000;}



dl {}

dt {float: left;

width: 12em;

text-align:right;

margin-right: 2px;

margin-bottom: 10px;}

dd {margin-bottom: 10px;}



.testimonial {border-top: 1px solid #00a0af;

display: block;

padding-bottom: 30px;}



.testimonial img {

float: left;

margin: 20px 20px 20px 0px;

border: 1px solid #00a0af;

}





#left {

float: left;

width: 270px;

margin-right: 22px;

padding-top: 143px;

background: #ffffff url(images/mainImage.jpg) no-repeat left top;

}

#left img {

margin-bottom: 5px;

}











#footer {

clear: both;

font-size: 11px;

}

p.contact {

margin-top: 5px;

}

div.copy {

height: 18px;

background: #00a0af url(images/footerLeft.gif) no-repeat left top;

display: block;

color: #ffffff;

font-size: 10px;

padding-left: 5px;

}



div.copy p {

background: url(images/footerRight.gif) no-repeat right top;

height: 14px;

padding: 2px 0px;

}



ul#footerNavigation {margin-top: 5px; border-top: 1px dotted #666666; padding-top: 5px;}

#footerNavigation li {display: inline; padding-right: 5px; padding-top: 10px;}

#footerNavigation a { text-decoration: none; color: #666666; }

#footerNavigation a:visited { text-decoration: none;color: #666666;}

#footerNavigation a:hover { text-decoration:underline;color: #333333;}

#footerNavigation a:active { text-decoration: none;color: #666666;}