* {padding: 0; margin: 0;} body {font:0.7em Arial, helvetica, sans-serif; color:#567475; background-color:#5C2845;} A:link {color: #567475;} A:visited {color: #567475;} A:active {color: #567475;} A:hover {color: #000000;} /* Site Layout */ #wrapper {margin: 0 auto; width: 1024px; border:2px black solid; border-top:none; border-bottom:none;} #center {margin-bottom: 0px; overflow: auto; width: 100%; background-color:#AEDCE9;} #header {color: #333; width: 1024px; height:200px; background-image: url(header/header.jpg); background-position:top; background-repeat:no-repeat;} #navigation {float: left; height:24px; width:100%; background-color: #bdaec6; border:2px black solid; border-left: none; border-right:none; vertical-align:middle;} #search {float: left; color: #333; margin: 0px; padding: 0px; width: 590px; height:300px; display: inline; position:relative;} #columncontainer {margin-bottom: 0px; overflow: auto; width: 100%;} #topcontainer {float: left; color: #333; margin-left: 10px; margin-right: 10px; margin-bottom: 0px; margin-top: 10px; padding: 0px; width: 1000px; display: inline; position: relative; } #leftcolumn {float: left; width:69%; vertical-align:middle; color: #333; border:solid; border-color:#D889B8; border-width:thin; background-image: url(img/bg_large.gif); background-color:#bdaec6; padding: 5px;} #rightcolumn {float: right; width:27%; vertical-align:middle; color: #333; border:solid; border-color:#D889B8; border-width:thin; background-image: url(img/bg_small.gif); background-color:#bdaec6; padding: 5px;} #bottomcontainer {float: left; color: #333; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px; padding: 0px; width: 1000px; display: inline; position: relative; border:solid; border-color:#D889B8; border-width:thin; background-color:#bdaec6;} #bottomcolumn {float: left; color: #333; margin: 0px; padding: 10px; width: 980px; display: inline; position: relative; background-image: url(img/bg_huge.gif);} #bottomimages {margin: 0 auto;} #footer {width: 1024px; clear: both; color: #333; background: #bdaec6; margin: 0px 0px 0px 0px; padding-top:5px; padding-bottom:5px; border:2px black solid; border-left: none; border-right:none;} .clear {clear: both; background: none;} #fiftyleft {float: left; width:40%; vertical-align:middle;} #fiftyright {float: right; width:60%; vertical-align:middle; text-align:right;} div.contentcolumn {margin-left: auto; margin-right: auto; margin-bottom: 10px; width: 98%; border:solid; border-color:#D889B8; border-width:thin; background-color:#bdaec6; position:relative; padding-bottom:5px;} /* Search Page Style */ #searchcolumn {margin-left: auto; margin-right: auto; margin-top:40px; margin-bottom:10px; width: 95%; border:solid; border-color:#D889B8; border-width:thin; background-color:#bdaec6; position:relative; padding: 10px;} #searchcenterdiv {text-align: center; margin-left: auto; margin-right: auto;} #detailcolumn {margin-left: auto; margin-right: auto; margin-top:40px; margin-bottom:10px; min-height:352px; width: 97%; border:solid; border-color:#D889B8; border-width:thin; background-color:#bdaec6; position:relative; padding: 5px;} /* Submit Page Styling */ #submitcolumn {margin-left: auto; margin-right: auto; margin-top:40px; margin-bottom:10px; padding: 10px; width: 50%; border:solid; border-color:#D889B8; border-width:thin; background-color:#bdaec6; position:relative;} #leaf-left {float: right; vertical-align: bottom; min-width: 159px; min-height:105px; background-image: url(img/leaf-left.png); background-repeat:no-repeat;} /* Sub Headers */ #welcome {width: 101px; height:23px; background-image: url(img/subheaders/welcome.png); background-repeat:no-repeat; margin-bottom:5px;} #bodyfaradic {width: 135px; height:29px; background-image: url(img/subheaders/bodyfaradic.png); background-repeat:no-repeat; margin-bottom:5px;} #eyetreatments {width: 163px; height:29px; background-image: url(img/subheaders/eyetreatments.png); background-repeat:no-repeat; margin-bottom:5px;} #handsandfeet {width: 160px; height:23px; background-image: url(img/subheaders/handsandfeet.png); background-repeat:no-repeat; margin-bottom:5px;} #hollywoodlashes {width: 189px; height:29px; background-image: url(img/subheaders/hollywoodlashes.png); background-repeat:no-repeat; margin-bottom:5px;} #makeup {width: 99px; height:28px; background-image: url(img/subheaders/makeup.png); background-repeat:no-repeat; margin-bottom:5px;} #massage {width: 87px; height:29px; background-image: url(img/subheaders/massage.png); background-repeat:no-repeat; margin-bottom:5px;} #skintechmicrodermabrasion {width: 321px; height:23px; background-image: url(img/subheaders/skintechmicrodermabrasion.png); background-repeat:no-repeat; margin-bottom:5px;} #specialtreatments {width: 195px; height:28px; background-image: url(img/subheaders/specialtreatments.png); background-repeat:no-repeat; margin-bottom:5px;} #tanning {width: 207px; height:29px; background-image: url(img/subheaders/tanningtreatments.png); background-repeat:no-repeat; margin-bottom:5px;} #toothgems {width: 127px; height:23px; background-image: url(img/subheaders/toothgems.png); background-repeat:no-repeat; margin-bottom:5px;} #treatmentsformen {width: 207px; height:23px; background-image: url(img/subheaders/treatmentsformen.png); background-repeat:no-repeat; margin-bottom:5px;} #waxing {width: 85px; height:29px; background-image: url(img/subheaders/waxing.png); background-repeat:no-repeat; margin-bottom:5px;} #wellbeing {width: 119px; height:29px; background-image: url(img/subheaders/wellbeing.png); background-repeat:no-repeat; margin-bottom:5px;} #espaintensivefacials {width: 233px; height:23px; background-image: url(img/subheaders/espaintensivefacials.png); background-repeat:no-repeat; margin-bottom:5px;} #espamassage {width: 149px; height:29px; background-image: url(img/subheaders/espamassage.png); background-repeat:no-repeat; margin-bottom:5px;} #espaessentialbodytreatments {width: 333px; height:29px; background-image: url(img/subheaders/espaessentialbodytreatments.png); background-repeat:no-repeat; margin-bottom:5px;} #espaultimatebodywraps {width: 285px; height:29px; background-image: url(img/subheaders/espaultimatebodywraps.png); background-repeat:no-repeat; margin-bottom:5px;} #advancedspecialisedespafacials {width: 357px; height:28px; background-image: url(img/subheaders/advancedspecialisedespafacials.png); background-repeat:no-repeat; margin-bottom:5px;} #espaproducts {width: 155px; height:23px; background-image: url(img/subheaders/espaproducts.png); background-repeat:no-repeat; margin-bottom:5px;} #fakebakeproducts {width: 201px; height:23px; background-image: url(img/subheaders/fakebakeproducts.png); background-repeat:no-repeat; margin-bottom:5px;} #idbareescentuals {width: 193px; height:23px; background-image: url(img/subheaders/idbareescentuals.png); background-repeat:no-repeat; margin-bottom:5px;} #promotions {margin: 0 auto; width: 121px; height:23px; background-image: url(img/subheaders/promotions.png); background-repeat:no-repeat; margin-bottom:5px;} #howtofindus {width: 163px; height:23px; background-image: url(img/subheaders/howtofindus.png); background-repeat:no-repeat; margin-bottom:5px;} #contactus {width: 115px; height:23px; background-image: url(img/subheaders/contactus.png); background-repeat:no-repeat; margin-bottom:5px;} /* Forms Design */ .input {border: 1px solid #000000; background: #FFFFFF; font: 11px verdana, sans-serif; color:#443;} .input-searchbox {border: 1px solid #000000; background: #FFFFFF; font: 11px verdana, sans-serif; color:#443; margin-top: 5px; margin-bottom: 4px;} .login {border: 1px solid #000000; background: #FFFFFF; font: 11px verdana, sans-serif; color:#443;} .input:focus, input:hover, textarea:hover, select:hover {border:1px solid #EC008C; background: #FFFFFF;} .submit-btn {width: 77px; height: 20px; background: url(img/submitdouble.gif) no-repeat;} .submit-btn:hover {background: url(img/submitdouble.gif) no-repeat 0 -20px; border:0px; border:0px;} .search-btn {width: 77px; height: 20px; background: url(img/searchdouble.gif) no-repeat; vertical-align:top; margin-top:2px;} .search-btn:hover {background: url(img/searchdouble.gif) no-repeat 0 -20px; vertical-align:top; margin-top:2px; border:0px;} select {background-color:#FFFFFF; font: 11px verdana, sans-serif; border: 1px solid #000000;} textarea {background-color:#FFFFFF; font: 11px verdana, sans-serif; border: 1px solid #000000;} /* Ajax Form Submission */ #log_res {height:auto; padding:15px; margin:100px auto 20px auto; width:400px;} #log_res p {margin:0; padding:4px 0 4px 0;} #log_res.ajax-loading {background: url(img/spinner.gif) no-repeat center;} /* Site Styles */ div.bg {height:100%; border:none;} div.news {border:solid; border-color:#D889B8; border-width:thin; background-color:#bdaec6; padding: 5px; min-height: 100px;} div.login {margin-bottom:10px; border:solid; border-color:#D889B8; border-width:thin; background-color:#bdaec6;} div.search {border:solid; border-color:#D889B8; border-width:thin; background-color:#bdaec6;} h1 {} h2 {color:#000000; font-size: 2.0em;} h3 {color:#000000; font-size: 2.0em;} hr.black {width:90%; border-top:solid #000000 thin; vertical-align:middle; display: block;} td.black {border: 1px solid; border-color: #AAAAAA; text-align:center;} td img{display: block;} th.black {border: 1px solid; border-color: #AAAAAA; text-align:center;} .row1 {background-color:#FFFFFF;} .row2 {background-color:#E7E7E7;} #dlarrow {width:13px; height:13px; background-image: url(img/dlarrow.gif); background-repeat:no-repeat; display: inline;} #reportbutton {width:14px; height:14px; background-image: url(img/report.gif); background-repeat:no-repeat; display: inline;} p.success {color:#009933; font-weight:bold;} p.error {color:#CC0000; font-weight:bold;} /* Nav Bar Style */ .menu, .menu ul {margin: 0; padding: 0; border: 0; list-style-type: none; display: block;} .menu li {margin: 0; padding: 0; border: 0; display: block; float: left; /* move all main list items into one row, by floating them */ position: relative; /* position each LI, creating potential IE.win overlap problem */ z-index: 5; /* apply explicit z-index */ } .menu li:hover { z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */ white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present) see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */ } .menu li li {float: none;}/* items of the nested menus are kept on separate lines */ .menu ul {visibility: hidden; /* initially hide all submenus. */ position: absolute; z-index: 10; left: 0; /* while hidden, always keep them at the top left corner, */ top: 0; /* to avoid scrollbars as much as possible */ } .menu li:hover>ul {visibility: visible; /* display submenu them on hover */ top: 100%; /* 1st level go below their parent item */ } /* 2nd+ levels go on the right side of the parent item */ .menu li li:hover>ul {top: 0; left: 100%;} /* -- float.clear -- force containment of floated LIs inside of UL */ .menu:after, .menu ul:after {content: "."; height: 0; display: block; visibility: hidden; overflow: hidden; clear: both;} /* IE7 float clear: */ .menu, .menu ul {min-height: 0;} /* -- float.clear.END -- */ /* -- sticky.submenu -- it should not disappear when your mouse moves a bit outside the submenu YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly! if you do it, make sure you 110% know what you do */ .menu ul { /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */ background-image: url(empty.gif); padding: 10px 30px 30px 30px; margin: -10px 0 0 -30px; /* uncomment this if you want to see the "safe" area. you can also use to adjust the safe area to your requirement */ /*background: #f00;*/ } .menu ul ul {padding: 30px 30px 30px 10px; margin: -30px 0 0 -10px;} /* -- sticky.submenu.END -- */ /* - - - ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */ .menu, .menu ul li {color: #000000; background: #bdaec6;} .menu ul {width: 11em;} .menu a {text-decoration: none; color: #000000; padding: .4em 1em; display: block;} .menu a:hover, .menu li:hover>a {color: #000000; font-weight:bold;} /* create borders around each item */ .menu li li {border: 1px solid #ccc;} /* remove the top border on all but first item in the list */ .menu ul>li + li {border-top: 0;} /* inset 2nd+ submenus overlapping */ .menu li li:hover>ul {top: 5px; left: 90%;} /* special colouring for "Main menu:", and for "xx submenu" items */ .menu>li:first-child>a, .menu li + li + li li:first-child>a {color: #567;} /* -- Tab Content -- */ .shadetabs{ cursor: pointer; padding-left: 30px; padding-bottom: 3px; margin-left: 0; margin-top: 1px; margin-bottom: 0; font: bold 12px Verdana; list-style-type: none; text-align: left; /*set to left, center, or right to align the menu as desired*/ } .shadetabs li{ display: inline; margin: 0; } .shadetabs li a{ text-decoration: none; position: relative; z-index: 1; padding: 3px 7px; margin-right: 3px; border: 1px solid #778; color: #2d2b2b; background: white url(img/shade.gif) top left repeat-x; } .shadetabs li a:visited{ color: #2d2b2b; } .shadetabs li a:hover{ text-decoration: underline; color: #2d2b2b; } .shadetabs li a.selected{ /*selected main tab style */ position: relative; top: 1px; } .shadetabs li a.selected{ /*selected main tab style */ background-image: url(img/shadeactive.gif); border-bottom-color: white; } .shadetabs li a.selected:hover{ /*selected main tab style */ text-decoration: none; } .tabcontent{ display:none; } @media print { .tabcontent { display:block !important; } } .menutitle{ cursor:pointer; margin-left: 5px; margin-right: 5px; margin-top: 5px; background-color:#ECECFF; background-image: url(img/down_arrow.gif); background-position:bottom right; background-repeat:no-repeat; color:#000000; padding:2px; border:1px solid #000000; } .submenu{}