

* {padding: 0; margin: 0;}


/**************************************************************************************************************************/
/* redifined tags */
/**************************************************************************************************************************/
body {background-color:#000; margin: 0px 0px 0px 0px;}

a {color:#EB0061;}
a:visited {color:#EB0061;}
a:hover {color:#FFFF00;}
 
h1 {font-family:Arial, Helvetica, sans-serif; font-size:25px; color:#FFFFFF;  margin-bottom:10px;}
h2 {font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#FFFFFF;  margin-bottom:20px;}
.h2-arrow {background-image:url(../images/arrow-red.gif); background-repeat:no-repeat; padding-left:27px; background-position: 0px 3px;}

h3 {font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#FFFFFF;  margin: 0px 0px 10px 20px; }
 
/**************************************************************************************************************************/
/* template structure */
/**************************************************************************************************************************/

.center {margin:20px auto 10px; padding:0px 0px 0px 0px; width:859px; clear:both; text-align:left; background-color:#000000; background-image:url(../images/footer-logo.gif); background-repeat:no-repeat; background-position:bottom right;}

.topbanner {width:859px; height:120px; float:left; margin-bottom:20px;}
.logo {float:left; height:120px; width:241px;}

.banner-right {float:left; height:120px; width:594px; }
#topnav {padding: 0px 0px 0px 0px; margin: 16px 3px 0px 0px; float:right;}


.call {float:right; width:550px; margin:20px 0px 0px 0px;}
.call p {font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:27px; color:#FFFFFF; text-align:right; padding:15px 10px 0px 0px;}
.contact-yellow {color:#FFFF00; font-size:16px;}


.clear {clear:both; height:1px;}

.top-img {width:859px; margin: 0px 0px 0px 0px;}

.body-content {margin:30px 0px 0px 36px; width:788px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF;}

.body-content ul {margin:0px 0px 20px 0px;}
.body-content li {margin:0px 0px 0px 20px; }

.divider {background-image:url(../images/divider-dots.gif); background-repeat:repeat-x; margin:30px 0px 25px 0px; width:492px; height:2px; line-height:1px;}

.red {color:#F70267; font-weight:normal;}
.head-yellow {color:#FFFF00; font-weight:normal;}


.content-para {font-size:13px; color:#CCCCCC; line-height:18px; margin-bottom:20px; width:475px;}
.content-para-bold{font-size:16px; color:#FFF; line-height:1.5em; margin-bottom:20px; width:475px;}
.content-heading { font-size:1.3em; color:#FFFFFF; margin: 0px 0px 20px 0px;}

.content-para-wide {font-size:0.8em; color:#CCCCCC; line-height:1.4em; margin-bottom:20px;}

.content-list {margin:0px; padding:0px 0px 12px 0px; font-size:0.8em; color:#CCCCCC; list-style-type:square; }

.textcta {padding:20px 0px 0px 0px; margin:20px 0px 50px 0px; font-size:13px; width: 475px; background-image:url(../images/divider-dots.gif); background-repeat:repeat-x; line-height:18px; color:#CCCCCC;}

.job {width:481px; background-color:#111111; color:#FFF; font-size:0.8em; padding:0px 0px 0px 20px; border-left:solid #3A3A3A 1px; border-right:solid #3A3A3A 1px; margin:0px 0px 0px 0px;}

.gallery {width:481px; background-color:#111111; color:#FFF; font-size:0.8em; padding:0px 0px 0px 20px; border-left:solid #3A3A3A 1px; border-right:solid #3A3A3A 1px; margin:0px 0px 0px 0px;}

.gallery-footer {width:483px; height:33px; background-image:url(../images/gallery-footer-bg.gif); background-repeat:no-repeat;  padding:15px 20px 0px 0px; margin-bottom:30px;}
.gallery-footer p {font-size:11px; text-align:right;}

.yellow{color:#FE9109;}
.grey {color:#666666;}

.right {width:263px; float:right; margin: 0px 0px 0px 22px;}

#googlemap {width:355px; height:275px; margin:40px 0px 0px 0px; padding:0px 0px 0px 0px; border: 1px solid #CCCCCC; color:#000000; font-size:0.8em;}

.stop-press{color:#CCCCCC;}

.price-card-small {font-size:0.7em; color:#CCCCCC;}

.faq {color:#00A0E4;}


/*******************************************************************************************************************/
/* SOCIAL MEDIA */
/*******************************************************************************************************************/
.socialbar { width:497px; padding:0px 0px 0px 3px; margin:0px 0px 20px 0px; }




/**************************************************************************************************************************/
/* Bottom Border */
/**************************************************************************************************************************/

.bottom-border{height:85px; margin-top:20px;}
.bottom-border p {font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#FFF; font-weight:bold; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 35px; line-height:27px;}
.dark-red {color:#FFFFFF;}

.copyright {width:820px; margin:20px auto 20px; text-align:center; }
.copyright p {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#999999; margin-bottom:10px;}
.copyright a {color:#999999;}


/**************************************************************************************************************************/
/* Homepage Box */
/**************************************************************************************************************************/

.services { width:488px; margin-bottom:30px;}
.services-para {padding: 0px 10px 0px 100px; font-size:13px; color:#CCCCCC; margin:0px 0px 0px 0px; line-height:18px;}
.services-header {font-size: 20px; padding: 0px 0px 5px 100px;}
.services-header a {color:#FFFFFF;}

.services-red{color:#E02239;}


.supermums {background-image:url(../images/supermums-bg.jpg); background-repeat:no-repeat; height:450px; width:469px; margin: 0px 0px 0px 0px; padding: 37px 0px 0px 20px;}

.voucher {background-image:url(../images/voucher-bg.jpg); background-repeat:no-repeat; width:469px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color:#000;}

/**************************************************************************************************************************/
/* Contact Form */
/**************************************************************************************************************************/

form {background: #111111; border-left: 1px solid #3D3D3D; border-right: 1px solid #3D3D3D; width: 261px; margin:0px; padding:0px;}
form fieldset {background: #111111; border: none; margin-left: 8px; padding:0px; }
form legend {display: none; }
form label {display: block; margin: 7px; font-weight: bold;  font-size:0.7em; color:#333333;color:#fff;}
/*Button:*/ 
form input.button {margin: 0px 0px 0px 5px;}
form input.text, form textarea.text { width: 220px; display: block; padding: 2px; font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#ccc;}
form input.text { width: 220px; }



/**************************************************************************************************************************/
/* Lightbox */
/**************************************************************************************************************************/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


/**************************************************************************************************************************/
/* dropdown navigation */
/**************************************************************************************************************************/



/*
.clearboth{clear:both; height:0px; line-height:0px; font-size:0px;}
*/
/*
ul.horizontalNav .dropdown{ background-image:url(../images/template/menu-drop-down.gif);  background-repeat:no-repeat;  padding-right:20px; }
*/



/* entire navigation */

ul.horizontalNav  {
	     
	padding: 0px;           
	cursor: default;             
	margin: 0px;            
	font-size:16px;	
	clear: left; 
	list-style-type: none;
	padding: 0px 0px;
}

/* entire drop down lists */

ul.horizontalNav ul {
	background-color: #000;                      
	font-size:16px;
	clear:both;	
	margin-top: 14px;
	margin-left:0px;
	padding-top: 5px;
}

/* each item in top level navigation - normal and drop downs*/

ul.horizontalNav li {
	list-style-type: none;  
	margin: 1px;             
	position: relative;          /* makes the menu blocks be positioned relative to their parent menu item the lack of offset makes these appear normal, but it will make a difference to the absolutely positioned child blocks */
	color: #999; 
	float: left;
	padding:6px 11px;
	border-bottom: 5px solid #B4B496;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:16px;

}


/* each item in drop down lists*/

ul.horizontalNav li ul li{
	margin: 0px;    
	list-style-type: none;            
	position: relative;      
	border-bottom: 5px solid #000;
	width:110px;
}



/* orange rollover colour on bottom border */
ul.horizontalNav li:hover {border-bottom: 5px solid #EB0061;}
 
ul.horizontalNav li:hover > ul {    /* one of the most important declarations - the browser must detect hovering over arbitrary elements the > targets only the child ul, not any child uls of that child ul */
	display: block;              /* makes the child block visible - one of the most important declarations */
}

 
/* top level links*/
ul.horizontalNav li a { color: #999; display: block; width:auto; text-decoration: none; }
 
ul.horizontalNav li a:hover { color: #FFF; }


/* drop down link text */
ul.horizontalNav li ul li a { color:#999; display: block; width:110px; text-decoration: none; /*padding:4px 10px;*/}

ul.horizontalNav li ul li a:hover { color: #FFF; }


/* drop down link */
ul.horizontalNav li ul li:hover {border-bottom: 5px solid #000;}


ul.horizontalNav ul {  
	display: none; position: absolute; top: 21px; left: 0px;
}




/**************************************************************************************************************************/
/* navigation - CSS non-flicker - not used*/
/**************************************************************************************************************************/

/*

.menu {height:31px; width:528px; margin:0px 0px 0px 0px; padding:0; font-size:0.7em;}
ul.menu {display:inline; list-style:none; margin: 0px 0px 0px 0px;}
ul.menu li {display:inline; list-style:none; margin: 0px 0px 0px 0px;}
ul.menu li a {float:left; height:31px; overflow: hidden; text-indent: -1000px;}
ul.menu li a:hover {background-position:left bottom;}

.menu-pos {width:528px; height:31px;float:right; margin: 28px 36px 0px 0px; display:block;}

a.home {width:58px; background-image:url(../images/nav-home.gif);}
a.salon {width:85px; background-image:url(../images/nav-salon.gif);}
a.hair {width:46px; background-image:url(../images/nav-hair.gif);}
a.stylists {width:60px; background-image:url(../images/nav-stylists.gif);}
a.products {width:80px; background-image:url(../images/nav-products.gif);}
a.gallery {width:68px; background-image:url(../images/nav-gallery.gif);}
a.news {width:55px; background-image:url(../images/nav-news.gif);}
a.contact {width:76px; background-image:url(../images/nav-contact.gif);}

*/
