body {
background: #052f39 url(/images/body-bg.jpg);
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
font: normal 12px Arial, Helvetica, sans-serif;
line-height: 160%;

}


/*===================
LAYOUT STYLES
=====================*/

.clearBoth {
clear: both;
}
.clearLeft {
clear: left;
}


#topContainer { /* containers phone number etc at very top */
background: #052f39 url(/images/top-dark-blue-bg.jpg);
margin: 0px auto;
padding: 0px;
width: 100%;
height: 61px;
position: relative;
}

#topContainer #topTextWrapper {
width: 900px;
background: transparent;
margin: 0px auto;
}

#topContainer #topTextWrapper p#left {
background-color: transparent;
font: italic bold 16px "Times New Roman", Times, serif;
width: 560px;
float: left;
text-align: left;
color: #d2a84f;
margin: 20px 0px 0px 0px;
}
#topContainer #topTextWrapper p#right {
background-color: transparent;
font: italic bold 16px "Times New Roman", Times, serif;
width: 300px;
float: right;
text-align: left;
margin: 20px 0px 0px 0px;
color: #d2a84f;
text-align: right;
}
#topContainer #topTextWrapper a {
font: italic normal 16px "Times New Roman", Times, serif;
color: #d2a84f;
}

#container { /* outer box with stripy glowy backgroundy */
background: #052f39 url(/images/container-glow-bg.jpg);
margin: 0px auto;
padding: 0px;
width: 900px;
position: relative;
}

#container #topNavWrapper {
width: 900px;
background: transparent url(/images/top-nav-bg.jpg) no-repeat;
width: 900px;
height: 41px;
margin-top: 51px;
margin-left: auto;
margin-right: auto;
position: relative;
}

#topNavWrapper ul {
width: 880px;
list-style-type: none;
background-color: transparent;
height: 30px;
padding: 0px;
margin: 0 auto;
font: italic 14px "Times New Roman", Times, serif;
color: #06313b;
position: relative;
top: 5px;
}

#topNavWrapper ul li {
font-weight: bold;
color: #06333e;
padding: 3px 7px 0px 7px;
margin: 0px;
display: block;
float: left;
}
#topNavWrapper ul li.lastLI {
font-weight: bold;
color: #06333e;
padding: 3px 0px 0px 7px;
margin: 0px;
display:block;
float: left;
}

#topNavWrapper ul a {
display: block;
text-decoration: none;
background-color: transparent;
color: #06313b;
padding: 3px 0px 3px 0px;
}

#topNavWrapper ul a:hover {
display: block;
text-decoration: none;
background-color: transparent;
color: #217895;
padding: 3px 0px 3px 0px;
}


#container #headerGraphicLeft {
float: left;
background: url(/images/hair-transplant-uk-logo.jpg) no-repeat;
width: 300px;
height: 187px;
margin: 0px;
padding: 0px;
position: relative;
}

#container a.video-button {
display: inline-block;
border-top: 1px solid #d78f57;
border-bottom: 1px solid #d78f57;
text-decoration: none;
}

#container .video-button:hover {
display: inline-block;
border-top: 1px solid #d78f57;
border-bottom: 1px solid #d78f57;
text-decoration: none;
color: #979731
}

#headerGraphicLeft img#hair-transplant-uk-logo {
width: 257px;
height: 44px;
background-color: #999933;
position: absolute;
top: 43px;
left:21px;
border: none;
}
#container #headerGraphicMid {
float: left;
background: url(/images/header-graphic-mid.jpg) no-repeat;
width: 300px;
height: 187px;
margin: 0px;
padding: 0px;
}
#container #headerGraphicRight {
float: left;
background: url(/images/header-graphic-right.jpg) no-repeat;
width: 300px;
height: 187px;
margin: 0px;
padding: 0px;
position: relative;
z-index: 300;
}


#headerGraphicRight a#locations {
background: #d99865 url(/images/locations-button.jpg) no-repeat;
height: 27px;
width: 207px;
float: right;
position: absolute;
top: 132px;
right: 0px;
text-align: left;
padding-left: 50px;
padding-top: 6px;
color: #000;
text-decoration: none;
}

#headerGraphicRight a#locations:hover {
background: #d99865 url(/images/locations-button-over.jpg) no-repeat;
height: 27px;
width: 207px;
float: right;
position: absolute;
top: 132px;
right: 0px;
text-align: left;
padding-left: 50px;
padding-top: 6px;
color: #000;
text-decoration: none;
z-index: 200;
}

ul#locations-list {
width: 183px;
position: absolute;
top: 164px;
left: 77px;
margin: 0px;
padding: 0px;
color: #fff;
list-style-type: none;
background: #333333 url(/images/locations-list-bottom-curve.jpg) no-repeat;
background-position: bottom left;
font-size: 11px;
padding-bottom: 14px;
display: none;
z-index: 400;
height: 250px;
}

ul#locations-list li {
padding: 5px 12px 5px 12px;
}



ul#locations-list li.smallText {
color: #CC9933;
text-align: center;
font-size: 11px;
line-height: 120%;
padding:14px 14px 8px 14px;
}

/* wraps around #introLeft and #consultPhoneRight */
#container #topWhiteWrapper {
background-color: #fff;
width: 900px;
}
#container #introLeft {
width: 550px;
background-color: #fff;
float: left;
text-align: left;
padding-left: 50px;
padding-right: 20px;
}

#introLeft h1, #introLeft h2 {
font: bold 20px "Times New Roman", Times, serif;
color: #147792;
margin-top: 20px;
margin-bottom: 10px;
}
#introLeft p {
margin-top: 14px;
}
#introLeft strong {
color: #12778F;
}

#container #consultPhoneRight {
width: 280px;
background-color: #fff;
float: left;
text-align: left;
position: relative;
height: 178px;
}
#container #consultPhoneRight #orangePhoneBox {
width: 215px;
height: 89px;
padding: 7px 10px 0px 20px;
background: #bad6de url(/images/contact-phone-right.jpg);
float: right;
text-align: left;
position: relative;
top: 43px;
color: #000;
}

#consultPhoneRight #orangePhoneBox span#phoneNum {
font: bold 20px "Times New Roman", Times, serif;
color: #999933;
}
#consultPhoneRight #orangePhoneBox p {
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
line-height: 90%;
}
#orangePhoneBox span.smallText {
font: normal 11px "Times New Roman", Times, serif;
font-weight: bold;
color: #06333e;
}

#container #curvedBoxBottom {
background: transparent url(/images/curve-box-bottom.jpg);
width: 900px;
height: 41px;
}

#container #leftMain {
background: transparent;
width: 537px;
float: left;
text-align: left;
padding: 0px 70px 300px 50px;
color: #fff;
line-height: 190%;
}



#container #leftMain a {
color: #a0c7d4;
}
#container #leftMain a:hover {
color: #fff;
}

/* pull box contact info */

#container #leftMain ul#pullQuoteActionsBox {
list-style-type: none; 
float: left;
width: 210px;
border: 1px solid #0E6C80; 
color:white;
background-color:transparent;
padding: 10px; 
margin: 10px 24px 10px 0px;
}

/* pull box photos */
#container #leftMain img.pullImage {
display: block;
float: left;
width: 341px;
border: 1px solid #0E6C80; 
color: white;
background-color:transparent;
padding: 10px; 
margin: 10px 24px 10px 0px;
}

#container #leftMain h2,#container #leftMain h1 {
background: url(/images/h1-squiggly-bg.jpg) no-repeat;
background-position: bottom left;
font: normal 22px "Times New Roman", Times, serif;
color: #97c0cc;
padding-left: 80px;
height: 24px;
margin-top: 25px;
}



#container #leftMain h3 {
font: normal 18px "Times New Roman", Times, serif;
color: #97c0cc;
margin-top: 30px;
}

/* min-height is unpredictable so we'll use the following 1px wide float hack to give the leftMain div a min height */
div.propOpen {
width: 1px;
height: 500px;
background: transparent;
float: left;
}


/*right nav bottom main */

#container #rightMain {
background: transparent url(/images/right-nav-bg.jpg) repeat-y;
float: left;
width: 216px;
z-index: 100;
position: relative;
text-align: center;
}

#rightMain h2 {
font: normal 18px "Times New Roman", Times, serif;
color: #fff;
margin-top: -30px;

width: 216px;
text-align: center;
}

#rightMain p {
color: #fff;
font-size: 11px;
margin-top:26px;
margin-bottom: 20px;
}

/* rss formatting. this formats the video-feed.xml*/

#rightMain div.videoItem {
background-color: transparent;
margin: 4px 0px 4px 10px;
padding-bottom: 5px;
margin: 0px auto;
width: 116px;
position: relative;
left: 5px;
}

#rightMain div.videoItem strong {
display: none;
}

#rightMain div.videoItem div.videoDate {
display: none;
}

#rightMain div.videoItem a {
padding-bottom: 2px;
color: #0099ff;
text-align: center;
margin: 0px auto;
display: block;
}
#rightMain div.videoItem a:visited {
padding-bottom: 2px;
color: #0099ff;
text-align: center;
margin: 0px auto;
display: block;
}
#rightMain div.videoItem a:hover {
padding-bottom: 2px;
color: #0099ff;
text-align: center;
margin: 0px auto;
display: block;
}


/* remove br from rss */
#rightMain div.videoItem p {
float: left;
width: 240px;
margin: 0px 0px 0px 7px;
display: none;
}
/* end left column rss formatting */

#rightMain #rightBottom {
background: transparent url(/images/right-nav-bottom.jpg);
float: left;
width: 216px;
height: 136px;
z-index: 100;
position: relative;
text-align: center;
}


#rightBottom a.moreVideos {
display: block;
margin-left: 10px; 
margin-top: 4px;
}


#footerContainer {
background: #052f39 url(/images/footer-bg.jpg);
margin: 0px auto;
padding: 20px 0px 0px 0px;
width: 100%;
height: 69px;
position: relative;
text-align: center;
color: #378090;
font-size: 11px;
}

#footerContainer ul {
width: 800px;
margin: 0px auto;
padding: 0px;
color: #378090;
list-style-type: none;
font-size: 11px;
text-align: center;

}
#footerContainer ul li {
display: block;
float: left;
padding: 0px 10px 0px 10px;
text-align: center;
}

#footerContainer ul li a {
color: #378090;
}

#footerContainer ul li a:hover {
color: #fff;
}

#footerContainer ul.bottomLocations1,#footerContainer ul.bottomLocations2 {
width: 610px;
list-style-type: none;
background-color: transparent;
padding: 0px;
margin: 0px auto;
font-size: 11px;
color: #06313b;
text-align: center;
height: 16px;
}

#footerContainer ul.bottomLocations2 {
width: 550px;
}

#footerContainer ul.bottomLocations1 li,#footerContainer ul.bottomLocations2 li {
color: #06333e;
padding: 0px 24px 0px 24px;
margin: 0px;
display: block;
float: left;
text-align: center;
}

a {
color: #0099CC;
background: transparent;
}




/*===================
TEXT STYLES
=====================*/