@import url("reset.css");

/* -------- Melanie Sarah  ---------- **/
/* ----------------- by SJJ ---------------- */


* { font-family:  Tahoma, Arial, Verdana, Helvetica, sans-serif;  color: #4b3927;  }
body { background: #ffffff url(../img/bg/background2.jpg) 0px 290px repeat-x; font-size: 75%; line-height: 140%; }

hr { text-align: right; width: 100%;  height: 1px; color: #b7c0c9; border: none; margin-bottom: 15px; clear: both;} /* For Internet Explorer */
html>body hr { margin-right: 0; width: 100%; height: 1px; background-color: #b7c0c9; border: none; } /* For Gecko-based browsers */
html>body hr { margin-right: 0; width: 100%; height: 1px; background-color: #b7c0c9; border: 0px solid #b7c0c9; } /* For Opera and Gecko-based browsers */

div.wrapper {width: 982px; margin-left: auto; margin-right:auto; clear: both; overflow:hidden; height:1%; position: relative;}
div.wrapper div.leftcol {width: 256px; float: left; margin-right: 16px;}


/* ----------------- Header  ---------------- */
#header {overflow: hidden; height: 97px;  position: relative;}
#header a.logo { height:80px; width:399px; display: block; text-indent: -9999px; position: absolute; left: 2px; top: 17px; background: url(../img/bg/logo.jpg) top left no-repeat;}
#header p.phone {text-indent: -9999px; position: absolute; top: 34px; left: 832px; background: url(../img/headings/phone.gif) top left no-repeat; display: block; height: 12px; width: 139px; }
#header a.twitter {text-indent: -9999px; position: absolute; top: 59px; left: 830px; background: url(../img/buttons/twitter.gif) 0px 0px no-repeat; display: block; height: 23px; width: 24px; }
#header a.twitter:hover {background-position: 0px -23px;}
#header a.blog {text-indent: -9999px; position: absolute; top: 59px; left: 859px; background: url(../img/buttons/blog.gif) top left no-repeat; display: block; height: 24px; width: 115px; }
#header a.blog:hover {background-position: 0px -24px;}

#nav {height: 48px; margin-bottom: 6px; padding: 0px 1px;}
#nav ul {height: 48px;}
#nav ul li {height: 48px; float: left;}
#nav ul li a {height: 48px; display: block; background-image: url(../img/bg/nav.gif); text-indent: -9999px; background-repeat: no-repeat;}
#nav ul li.home a {background-position: 0px 0px; width: 70px;}
#nav ul li.home-active a, #nav ul li.home a:hover {background-position: 0px -48px; width: 70px;}
#nav ul li.aboutme a {background-position: -70px 0px; width: 90px;}
#nav ul li.aboutme-active a, #nav ul li.aboutme a:hover  {background-position: -70px -48px; width: 90px;}
#nav ul li.howiwork a {background-position: -160px 0px; width: 100px;}
#nav ul li.howiwork-active a, #nav ul li.howiwork a:hover {background-position: -160px -48px; width: 100px;}
#nav ul li.services a {background-position: -260px 0px; width: 182px;}
#nav ul li.services-active a, #nav ul li.services a:hover {background-position: -260px -48px; width: 182px;}
#nav ul li.benefits a {background-position: -442px 0px; width: 105px;}
#nav ul li.benefits-active a, #nav ul li.benefits a:hover {background-position: -442px -48px; width: 105px;}
#nav ul li.cosmetics a {background-position: -547px 0px; width: 214px;}
#nav ul li.cosmetics-active a, #nav ul li.cosmetics a:hover {background-position: -547px -48px; width: 214px;}
#nav ul li.contact a {background-position: -761px 0px; width: 98px;}
#nav ul li.contact-active a, #nav ul li.contact a:hover {background-position: -761px -48px; width: 98px;}
#nav ul li.testimonials a {background-position: -859px 0px; width: 121px;}
#nav ul li.testimonials-active a, #nav ul li.testimonials a:hover {background-position: -859px -48px; width: 121px;}

/*------------ Main ----------*/
#mainimage {height: 371px; padding-top: 11px; background: url(../img/bg/mainimage.gif) top left no-repeat; margin-bottom: 20px; }
#mainimage div.leftcol {padding-top: 20px; padding-right: 6px; width: 250px;}
#mainimage div.leftcol h2 {height: 21px; background-position: top left; background-repeat: no-repeat; margin: 0px 0px 10px 22px; padding: 0px 5px 10px 5px; text-indent: -9999px; border-bottom: 1px solid #5A4530;}
#mainimage div.leftcol h2.iss {background-image: url(../img/headings/image-styling-services.gif);}

#mainimage div.leftcol ul {margin-left:22px; }
#mainimage div.leftcol ul li a {color: #f0eec0; font-weight: bold; background: url(../img/icons/nav-bullet.gif) 0% 50% no-repeat; text-decoration: none; padding-left: 15px; margin-bottom: 18px; display: block;}
#mainimage div.leftcol ul li a:hover {color: #ffffff; background-image: url(../img/icons/nav-bullet-hover.gif);}
#mainimage div.leftcol ul li.active a {color: #1ecbde; background-image: url(../img/icons/nav-bullet-active.gif);}
#mainimage div.image {width: 700px; float: left;  height: 360px; background: url(../img/headerpics/home.jpg) top left no-repeat; }
#mainimage div.image blockquote {text-indent: -9999px;}
#mainimage div.janeiredale {background-image: url(../img/headerpics/jane-iredale.jpg);}
#mainimage div.aboutme {background-image: url(../img/headerpics/about-me.jpg);}
#mainimage div.howiwork {background-image: url(../img/headerpics/how-i-work.jpg);}
#mainimage div.services {background-image: url(../img/headerpics/image-styling-services.jpg);}
#mainimage div.shopping {background-image: url(../img/headerpics/personal-shopping.jpg);}
#mainimage div.wardrobe {background-image: url(../img/headerpics/wardrobe-management.jpg);}
#mainimage div.cabsp {background-image: url(../img/headerpics/cabsp.jpg);}
#mainimage div.vouchers {background-image: url(../img/headerpics/vouchers.jpg);}
#mainimage div.jewellery {background-image: url(../img/headerpics/jewellery.jpg);}
#mainimage div.hair {background-image: url(../img/headerpics/hair.jpg);}
#mainimage div.contact {background-image: url(../img/headerpics/contact.jpg);}
#mainimage div.accessories {background-image: url(../img/headerpics/accessories.jpg);}
#mainimage div.benefits {background-image: url(../img/headerpics/benefits.jpg);}
#mainimage div.makeup {background-image: url(../img/headerpics/makeup.jpg);}
#mainimage div.testimonials {background-image: url(../img/headerpics/testimonials.jpg);}
#mainimage div.forhim {background-image: url(../img/headerpics/forhim.jpg);}
#mainimage div.forher {background-image: url(../img/headerpics/forher.jpg);}


#maincontent {margin-bottom: 20px; overflow: hidden; height: 1%;} 
#maincontent div.leftcol {margin-right: 12px;}
#maincontent div.maincol {width: 714px; float: left; overflow: hidden; height: 1%; background: url(../img/bg/maincol-bg.gif) top left repeat-y; }
#maincontent div.maincol div.top {background: url(../img/bg/maincol-top.gif) bottom left no-repeat; height: 10px; clear: both; font-size: 1px; }
#maincontent div.maincol div.bottom {background: url(../img/bg/maincol-bottom.gif) top left no-repeat; height: 10px; clear: both; font-size: 1px;}
#maincontent div.maincol div.content {width: 440px; float: left; margin: 10px 0px 20px 24px; padding-top: 10px;}
#maincontent div.maincol div.rightcol {width: 200px; float: left;  margin: 10px 0px 20px 32px; } 
#maincontent div.maincol div.content.signature {background: url(../img/bg/signature.jpg) 175px bottom no-repeat; padding-bottom: 60px;}

#maincontent div.leftcol a.banana { width: 258px; height: 118px; display: block; position: relative; background-position: top left; background-repeat: no-repeat; position: relative; margin-bottom: 10px;text-indent: -9999px;}
#maincontent div.leftcol a.banana span {height: 24px; width: 31px; display: block; background:  url(../img/buttons/go.gif) 0px 0px no-repeat; display: block; position: absolute; top: 84px; left: 218px;  }
#maincontent div.leftcol a.banana:hover span {background-position: 0px -24px;}
#maincontent div.leftcol a.forhim {background-image: url(../img/bananas/forhim.jpg);} 
#maincontent div.leftcol a.forher {background-image: url(../img/bananas/forher.jpg);} 
#maincontent div.leftcol a.janeiredalelogo {display: block; width: 258px; height: 161px; background: url(../img/bananas/jane-iredale.gif) top left no-repeat; text-indent: -9999px; margin-bottom: 10px;}
#maincontent div.leftcol a.janeiredale {display: block; width: 258px; height: 138px; background: url(../img/bananas/jane-iredale.jpg) top left no-repeat; text-indent: -9999px; margin-bottom: 10px;}

#maincontent div.maincol div.content h1 {height: 25px; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 2px solid #7d6041; background-position: top left; background-repeat: no-repeat; text-indent: -9999px;}
#maincontent div.maincol div.content h1.mspis {background-image: url(../img/headings/ms-personal-image-stylist.gif);}
#maincontent div.maincol div.content h1.aboutme {background-image: url(../img/headings/about-me.gif);}
#maincontent div.maincol div.content h1.howiwork {background-image: url(../img/headings/how-i-work.gif);}
#maincontent div.maincol div.content h1.services {background-image: url(../img/headings/image-styling-services-large.gif);}
#maincontent div.maincol div.content h1.cabsp {background-image: url(../img/headings/cabsp.gif);}
#maincontent div.maincol div.content h1.accessories  {background-image: url(../img/headings/accessories.gif);}
#maincontent div.maincol div.content h1.wardrobe  {background-image: url(../img/headings/wardrobe.gif);}
#maincontent div.maincol div.content h1.shopping {background-image: url(../img/headings/shopping.gif);}
#maincontent div.maincol div.content h1.makeup  {background-image: url(../img/headings/makeup.gif);}
#maincontent div.maincol div.content h1.jewellery  {background-image: url(../img/headings/jewellery.gif);}
#maincontent div.maincol div.content h1.hair {background-image: url(../img/headings/hair.gif);}
#maincontent div.maincol div.content h1.vouchers {background-image: url(../img/headings/vouchers.gif);}
#maincontent div.maincol div.content h1.benefits {background-image: url(../img/headings/benefits.gif);}
#maincontent div.maincol div.content h1.testimonials {background-image: url(../img/headings/testimonials.gif);}
#maincontent div.maincol div.content h1.janeiredale {background-image: url(../img/headings/jane-iredale.gif);}
#maincontent div.maincol div.content h1.contactme {background-image: url(../img/headings/contact-me.gif);}
#maincontent div.maincol div.content h1.forhim {background-image: url(../img/headings/for-him.gif);}
#maincontent div.maincol div.content h1.forher {background-image: url(../img/headings/for-her.gif);}

#maincontent div.maincol div.content h2 {color: #4b3927; margin-bottom: 20px; font-size: 120%;}
#maincontent div.maincol div.content h3 {margin-bottom: 15px; background: url(../img/bg/h3.gif) top left no-repeat; color: #82f0fc; padding: 6px 10px; font-size: 120%; height: 18px; width: 425px; } 
#maincontent div.maincol div.content p {margin-bottom: 20px;}
#maincontent div.maincol div.content p em {color: #029ba7; font-weight: bold; font-style: normal;}
#maincontent div.maincol div.content a {text-decoration: underline;}
#maincontent div.maincol div.content a:hover {text-decoration: none;}
#maincontent div.maincol div.content ul {margin-bottom: 20px;}
#maincontent div.maincol div.content ul li {background: url(../img/icons/bullet.gif) 0px 5px no-repeat; padding-left: 20px; margin-bottom: 3px;}
#maincontent div.maincol div.content blockquote {padding-top: 10px; padding-left: 12px; background: url(../img/bg/highlight-top-left.jpg) top left no-repeat; margin-bottom: 20px;}
#maincontent div.maincol div.content blockquote p {margin-bottom: 0px; padding-bottom: 10px; padding-right: 10px; background: url(../img/bg/highlight-bottom-right.jpg) bottom right no-repeat; font-weight: bold; color: #8a7259;}
#maincontent div.maincol div.content p.price {background-color: #bee9f2; color: #3d2514; font-size: 110%; padding: 5px 10px; font-weight: bold; }
#maincontent div.maincol div.content p.price span {font-weight: normal;}
#maincontent div.maincol div.content table {margin-bottom: 20px; width: 100%;}
#maincontent div.maincol div.content table tr td {background-color: #bee9f2; color: #3d2514; font-weight: bold; border: 1px solid #ffffff; padding: 5px 10px;}

#maincontent div.maincol div.rightcol div.contact {background: url(../img/bg/contact-bottom.gif) bottom left no-repeat; width: 158px; padding: 10px 21px 15px 21px; margin-bottom: 10px;}
#maincontent div.maincol div.rightcol div.contacttop {background: url(../img/bg/contact-top.gif) bottom left no-repeat; width: 200px; height: 6px;}
#maincontent div.maincol div.rightcol div.contact h2 {margin-bottom: 15px; background: url(../img/headings/free-telephone-consultation.gif) top left no-repeat; height: 41px; text-indent: -9999px;}
#maincontent div.maincol div.rightcol div.contact p {margin-bottom: 10px; font-size: 95%; line-height: 120%;}

#maincontent div.maincol div.rightcol div.contact ul.form {overflow: hidden; height: 1%;}
#maincontent div.maincol div.rightcol div.contact ul.form li {margin-bottom: 5px; clear: both;}
#maincontent div.maincol div.rightcol div.contact ul.form li input {width: 144px; border: 1px solid d4b89b; color: #08a2ae; font-size: 95%; padding: 3px 5px; }
#maincontent div.maincol div.rightcol div.contact ul.form li.button input {width: auto; float: right; background: url(../img/buttons/submit.gif) 0px 0px no-repeat; height: 23px; width: 82px; border: none; text-indent: -9999px; font-size: 0px; cursor: pointer; cursor: mouse; }
#maincontent div.maincol div.rightcol div.contact ul.form li.button input:hover {background-position: 0px -23px;}
#maincontent div.maincol div.rightcol div.contact ul.form li.error {color: #ff0000; padding-top: 5px;}
#maincontent div.maincol div.rightcol div.contact ul.form li.error span {font-weight: bold;}
#maincontent div.maincol div.rightcol div.contact ul.form li.message {font-weight: bold; padding-top: 5px;} 
#maincontent div.maincol div.rightcol div.testimonial {margin-bottom: 30px;  overflow: hidden;}
#maincontent div.maincol div.rightcol div.testimonial p {font-style: italic; margin-bottom: 10px; color: #7d6041; text-align: justify; padding: 0px 6px; }
#maincontent div.maincol div.rightcol div.testimonial strong {color: #4b3927; font-weight: bold; width: 125px; display: block; float: left; font-size: 95%; padding-left: 5px;  }
#maincontent div.maincol div.rightcol div.testimonial a {float: right; display: block; width: 60px; padding-right: 5px; text-align: right; text-decoration: underline; font-size: 95%; color: #7D6041;}
#maincontent div.maincol div.rightcol div.testimonial a:hover { text-decoration: none;}
#maincontent div.maincol div.rightcol img {margin-bottom: 15px; margin-top: 10px;}

/* ----------------- Footer  ---------------- */
#footer {background: #070606 url(../img/bg/footer-background.jpg) top left repeat-x; overflow: hidden; height: 45px; padding: 20px 0px 10px 0px; }
#footer div.wrapper {height: 55px;}
#footer div.left {width: 700px; float: left; }
#footer div.right {width: 275px; float: right;}
#footer div.right p {text-align: right;}
#footer p {color: #ffffff; margin-bottom: 5px; font-size: 90%; line-height: 110%;}
#footer p.contact {color: #00e1ff;}
#footer a {color: #00e1ff; text-decoration: underline; }
#footer a:hover {color: #ffffff; text-decoration: none;}