/*** Global Settings ****/
* {margin: 0; padding: 0}
body {background-color: #38005B; font : normal 12px Arial, Helvetica, sans-serif; color : #9E2B7A}
p {padding : 2px 0;}
h1 {padding : 20px 0 10px 0; font : bold 18px Arial, Helvetica, sans-serif;}
h2 {padding-bottom : 5px; font : bold 14px Arial, Helvetica, sans-serif;}
h3 {padding-bottom : 2px; font : bold 12px Arial, Helvetica, sans-serif;}
h4 {padding-top : 30px; font : bold 10px Arial, Helvetica, sans-serif; text-align: right;}
h5 {padding-bottom : 10px; font : bold 10px Arial, Helvetica, sans-serif;}
ul {padding: 10px 5px 10px 10px; margin:0 0 0 17px; list-style: square;}
ul li {padding: 6px}
em {margin : 10px 0; font : italic 12px Arial, Helvetica, sans-serif; text-align: left;}
table {table-layout: automatic;	width: 80%; border: none; text-align: left; font : normal 12px/1.6em Arial, Helvetica, sans-serif; color: #808080; }

/*** Layout ****/

#gallery{margin: 30px; width: 70%}
.clear{clear: both}
		
#wrapper {margin : 0 auto; width : 100%; clear : both; background: #9560B0 url(beauty-salon-gloucester-images/fleur-de-lis.png) repeat;}
#top{height: 32px; background: #007BD3 url(beauty-salon-gloucester-images/top-bg.gif) repeat-x; clear : both;} 
#header{background: #FFF url(beauty-salon-gloucester-images/bg.jpg) repeat; clear : both;} 

.hdrimg {margin-left: 26%}

#menu {width: 100%;  background: #007BD3 url(beauty-salon-gloucester-images/menu-bg.gif) repeat-x; float: left; padding: 6px 0; clear : both;}
#menu ul {margin: 0 0 0 17%; padding: 0; line-height: normal; border-style: none}
#menu ul li {margin: 2px; display: inline; float: left; padding: 0; padding-bottom: 2px; padding-left: 6em; list-style: none; border-style: none;  }
#menu ul li a {display: block; font-weight: bold; color: #FFF}
#menu ul li a:hover, #menu ul li a.active {text-decoration: none; color: #463970}
#main {margin : 0 auto; width: 80%; background-color: #FFF; padding-right: 6px }

.centre{margin: 10px 0 0 0; width: 464px; float: left; padding: 2px 0 0}
#right-column {margin: 0 20px; width: 200px; float: right; clear: both; background: #E0E0E0;}
#footer {width: 100%; padding: 10px 0; background: #007BD3 url(beauty-salon-gloucester-images/footer-bg.gif) 
	repeat-x; font : normal 1em Arial, Helvetica, sans-serif; text-align: center; color: #CCC; clear: both} 
.box {margin: 15px; width: 200px}
.box p {padding: 20px}
.boxR {margin: 10px 0 0 0; width: 208px; height: 208px; background: #CCC url(beauty-salon-gloucester-images/boxTR.jpg) no-repeat center}
.boxR p {text-align: center}
.testimonial {width: 150px; margin: 10px 0; padding: 10px; font : italic 16px Arial, Helvetica, sans-serif; text-align: right}
.img2{border-style: none; vertical-align:text-top;}
.img3{border-style: none; float: right}

#navbar {margin: 0; font-weight: bold; line-height: 1.5; text-align: center; position: fixed; bottom: 1%; left: auto; width: 19em; right: 2em; 
clear : both; background: url(beauty-salon-gloucester-images/navbarbg.png) repeat; }
#navbar p {margin: 0; padding: 0.3em 0.4em; background: #900; border: thin outset #FF1979;}
#navbar a, div.banner em { display: block; margin: 0 0.5em }
#navbar a, div.banner em { border-top: 2px groove #FF1979 }
#navbar a:first-child { border-top: none }
#navbar a:link, a:visited { text-decoration: none; color: #FF1979 }
#navbar a:hover {color: #9E2B7A; background: #D8D8D8 }

#footer a {font-weight: normal; color: #CCC}
#footer a:hover, #footer a.active {color: #FFF}
a:visited, a:link {font-weight: bold; color: #9E2B7A; text-decoration: none}
a:hover {color : #808080; text-decoration: none}
 
.hoverbox {margin: 0; float: left; cursor: default; list-style: none;}
.hoverbox a {cursor: default;}
.hoverbox a .preview {display: none;}
.hoverbox a:hover .preview {display: block; position: relative; top: -260px; left: -300px; z-index: 1;}
.hoverbox li{margin: 0; padding: 0; color: inherit; display: inline; float: left; position: relative; height: 200px; width: 196px; }
.hoverbox img{border: 0px;}

.hoverbox2 {margin: 0; float: left; cursor: default; list-style: none;}
.hoverbox2 a {cursor: default;}
.hoverbox2 a .preview {display: none;}
.hoverbox2 a:hover .preview {display: block; position: relative; top: -130px; left: -100px; z-index: 1;}
.hoverbox2 li{margin: 0; padding: 0; color: inherit; display: inline; float: left; position: relative; height: 80px; width: 100px; }
.hoverbox2 img{border: 0px;}