@charset "utf-8";
/* CSS Document for Emma Nail and Beauty Care */
/* Copyright Zonua */


/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.5em;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* /CSS Reset */


body {
	font: normal 100%; 
	font-family: Oswald, Verdana, Arial, Helvetica, sans-serif;
	margin: 0; 
	padding: 0; 
	background: url(../images/bg/nail_and_beauty_care_bg.gif) center top repeat fixed #fff;
}


.center { text-align: center; }
img.center { display: block; margin-left: auto; margin-right: auto;}

#logohead { 
	background: url(../images/bg/emma-nails-blanchardstown.jpg) no-repeat right bottom #dbf0f1;
	position: relative;
	border-top: 2px solid #209c9a;
	border-bottom: 3px solid #209c9a;
	width: 100%;
	
	margin-top: 82px;
	
	
	
	}
#logohead.home {
	background: url(../images/bg/emma-nails-blanchardstown.jpg) no-repeat right bottom #dbf0f1;
}
#logohead.christmas { 
	background: url(../images/bg/christmas-beauty-gifts.jpg) no-repeat center bottom #dbf0f1;
}
#logohead.home, #logohead.christmas {
	
	height: 420px;
	}
div#menu { 
	position: fixed;
	top:0px;
	border-top: 2px solid #209c9a;
	border-bottom: 2px solid #fff;
	background: url(../images/bg/emma-fff-90.png) repeat; 
	width: 100%; 
	height: 78px;
	z-index: 2;
	color: #209c9a;
	
}
#menu ul { 
	/*position: relative; 
	list-style: none; display: inline;
	z-index: -1; */
}/*
#menu li { 
	display: inline; 
	margin-left: 3em;	
}*/
/*
#menu ul > li > a, .submenu li a { 
	color: #209c9a;
	text-decoration: none;	
	padding: 8px;
	transition: background .25s ease-in-out;
	-moz-transition: background .25s ease-in-out;
	-webkit-transition: background .25s ease-in-out;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
/*
#menu li a:hover{
	background-color: #209c9a;
	color: #fff;
	
} */
	
#menu li.services:hover ul{
	display: block;
}	

.no-touch #menu li.services:hover ul{
    z-index: 99;
    display: block;
}
/*
ul.submenu { 
	position: absolute;
	top: 2.8em;
	left: 9em;
	padding: 0;
	padding-right: 1em;
	padding-bottom: 0.5em;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	display: none;
	background: none;
	background: url(../images/bg/emma-fff-90.png) repeat;
}
.submenu li { 
	display: list-item;
	color: #209c9a;
	position: relative;
	margin-left: 1em;
	margin-bottom: 0.8em;

}


.submenu li a { 
	padding: 2px 8px;

}
*/

.christmas h1 { text-align: center; margin-top: 2em; color: #fff; display: block; font-size: 4em; font-family: 'Lobster'; line-height: 1.2em; text-shadow: 3px 3px 2px #209c9a;}

img#logo { 
	position: relative; 
	width: 250px;
	height: 259px;
	display: block;
	margin-top:3.2em;
	margin-left: 5%;
	z-index: 1; 
	}
img#logosmall{ 
	width: 66px; 
	height: 66px;
	margin: 6px;
	padding: 0;
	}
div.turquoisewide { 
	position: relative; 
	width: 80%; margin: 0; padding: 1em 10%;  background-color: #209c9a; color: #fff; 
}
div.turquoisewide.line { padding: 0 10%; }
	
.floatright { float: right; }
.floatleft { float: left; }
.inline { display: inline; }
a img { border: none; }	 /* Including this for IE8 blue line */
.huge { font-size: 1.7em; }


/* This is for the Paypal button */
form#everydayvoucher { position: fixed; top: 120px; right: 1%; z-index: 99; background: url(../images/bg/voucher_bg.png) repeat;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;}
form td{ text-align: center; }
form input {display: block; margin-left: auto; margin-right: auto;}
select { 
	color: #fff;
	font-family: Oswald, Verdana, Arial, Helvetica, sans-serif;
	border:2px solid #fff000;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 2px;
	background-color: #209c9a;}


div#prices, div#mainarea { 
	position: relative; min-height: 1050px; min-width: 260px; width: 82%; max-width: 1800px;
	display: block; margin: auto;
	background: url(../images/bg/nail_and_beauty_care_bg2.gif) center top repeat;
	-webkit-border-bottom-right-radius: 35px;
	-webkit-border-bottom-left-radius: 35px;
	-moz-border-radius-bottomright: 35px;
	-moz-border-radius-bottomleft: 35px;
	border-bottom-right-radius: 35px;
	border-bottom-left-radius: 35px;
 }
div#prices { padding-bottom: 1em; }

div#prices ul { list-style: none; margin-top: 2em; }
#prices li { line-height: 2em; }
div#mainarea {
	width: 78%;
	padding: 2%;	
	height: auto;
}
#mainarea a { text-decoration: none; color: #333333;}
#mainarea a:hover { text-decoration: underline;}
#mainarea a:visited {  color: #676767;}
#mainarea h2 { font-family: 'Lobster'; font-weight: normal; font-size: 1.3em;}
#mainarea.contact h3 { font-size: 1.1em; }
#mainarea > p { padding: auto 2%; }

.testimonial { font-family: 'Lobster'; font-size: 1.1em; font-weight: normal;}
.testimonial a { color: #fff; text-decoration: none; }
.testimonial a:hover { color: #d9d9d9; }

.quotemark { font-size: 2em; line-height: 1.1em; }
#prices div { 
	width: 28.1%;  min-width: 260px;  max-width: 800px;  
	margin: 1.5%; 
	min-height: 420px;
	padding:  1%; 
	padding-bottom: 3.5em;

	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	border-radius: 35px;	
	display: inline-block;
	background-color: #fff;
	transition: background .25s ease-in-out;
	-moz-transition: background .25s ease-in-out;
	-webkit-transition: background .25s ease-in-out;
	color: #000;
	-moz-box-shadow: 1px 1px 5px #ededed;
	-webkit-box-shadow: 1px 1px 5px #ededed;
	box-shadow: 1px 1px 5px #ededed;
	vertical-align: top;
}
#prices > .fullwidth { width: 90%; height: auto; min-height: 50px; 
	background: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none; 
	display: block; margin: auto; max-width: none;
	font-size: 1.1em; 
	
	}

#mainarea.packages > div { 
	width: 50%; height: auto; 
	min-height: 50px; 
	min-width: 240px;
	margin: 1.5%; 
	padding:  3%; 
	

	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	border-radius: 35px;	
	display: inline-block;
	background-color: #fff;
	transition: background .25s ease-in-out;
	-moz-transition: background .25s ease-in-out;
	-webkit-transition: background .25s ease-in-out;
	color: #000;
	-moz-box-shadow: 1px 1px 5px #ededed;
	-webkit-box-shadow: 1px 1px 5px #ededed;
	box-shadow: 1px 1px 5px #ededed;
	vertical-align: top;
	display: block; margin-left: auto; margin-right: auto;
	
}
.packages h2 { font-size: 1.5em; padding-bottom: 0.2em;}
.packages h3 { font-family: 'Lobster'; font-size: 1.2em;  padding-bottom: 0.2em;}
.packages p.center { font-style: italic; }
.packages ol { 
	margin-left: 1em; 
	}



div.wax {background: url(../images/pictures/warm_waxing.jpg) no-repeat center top; }
div.waxspecial {background: url(../images/pictures/waxing.png) no-repeat right top;}
div.nail {background: url(../images/pictures/manicure_pedicure.png) no-repeat center top; }
div.nailenhance {background: url(../images/pictures/emma_nail_enhancement.jpg) no-repeat right top; }
div.face {background: url(../images/pictures/semi_permanent_eyelashes.png) no-repeat center top; }
div.tan {background: url(../images/pictures/emma_tanning.jpg) no-repeat center bottom; }

#prices div:hover { background: url(../images/icons/nail_and_beauty.png) no-repeat bottom center; background-color: #209c9a;  color: #fff;}

#prices h2, #mainarea h1 { font-family: Lobster; text-transform: lowercase; font-weight: normal; text-align: center; font-size: 1.6em;  background-color: #fff; color: #000; 
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding-bottom: 0.2em;
	-moz-box-shadow: 1px 1px 2px #333;
	-webkit-box-shadow: 1px 1px 2px #333;
	box-shadow: 1px 1px 2px #333;
	}
#mainarea h1 { margin-bottom: 1em; }
#prices h2 a { text-decoration: none; color: #000; }
#prices h2 a:hover { text-decoration: none; color: #209c9a; }
	
div#prices.contact {

}
#prices.contact h2 {
	
}
.price { font-family: Lobster; font-weight: normal; font-size: 1.2em; opacity: 0.8;}


div#socialmedia { min-width: 260px; height: 74px; margin: auto; padding-top: 0.3em; }
#socialmedia img {
	height: 60px;
	width: 60px;
	padding: 4px 5px 5px 4px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	border-radius: 35px;

	}
#socialmedia img:hover {
background-color: #209c9a;
background: none\9;
}

#slogan h2, #contact h2 {
	font-family: Lobster;  font-weight: normal; text-align: center; font-size: 1.6em; 
	color: #333333;	
	padding-bottom: 0.2em;
	clear: both;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	
}
#slogan h2 { margin-top: 1em; margin-bottom: 1em;}
#slogan h2 a { 
	 
	background-color: #ff7e34; color: #fff;	text-decoration: none; text-decoration: blink;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	padding: 8px;
	
}
#slogan h2 a:hover {  background-color: #B24101; }

div.info { width: 320px;  margin: 25px; display: inline-block; vertical-align: top; }
.info li { margin-bottom: 0.3em; }
.info h3 { font-weight: normal; display: inline;  font-size: 1.1em;}
.info li p{ font-family: 'Lobster'; font-weight: normal; font-weight: normal; margin: auto;  font-size: 1em; color: #333333;}


.pic {
  border: 10px solid #209c9a; 
  display: inline-block;
  height: 320px;
  width: 320px;
  margin: 15px;
  overflow: hidden;
   
	-webkit-box-shadow: 5px 5px 5px #111;
	  box-shadow: 5px 5px 5px #111; 
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.gallery img { 
	height: 320px;
	width: 320px;
	
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
	 
}

.gallery img:hover {
	width: 400px; height: 400px;  
	cursor: move;
	
	
}
.pic:hover {
	border-color: #36a6a4; /* turquoise at 90% */
}



p.asterix { font-style: italic; font-size: 0.8em; text-align: center; }
	
#contact { 
	position: relative; 
	background-color: rgba(32,156,154, 0.9); 
	color: #ccc;
	width: 98%;
	min-width: 240px;  
	min-height: 3.2em;
	font-family: Cambria, Georgia, serif;
	padding: 1em 1% 1em 1%;
	}

#contact h2 { color: #fff; }

#contact p, #contact ul { 
	
	text-align: center;
	background-color: rgba(255,255,255, 0.1); 
	font-size: 1.4em;
	color: #000; 
	padding: 1em 1% 1em 1%;
	border: 1px solid #fff;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	border-radius: 35px;
}
	
	 
#contact a { color: #000; text-decoration: none;  }
#contact a:hover { color: #fff; }

#contact ul { 
	font-size: 1em;
	position: relative; top: 2; 
	list-style: none; width: auto;
	background: url(../images/bg/nail_and_beauty_care_bg.gif) center top repeat fixed #fff;
 margin: 0 auto;
 }
#contact li { margin-top: 0.2em; margin-bottom: 0.2em; }
#contact ul a { color: #209c9a; }
#contact ul a:hover { color: #333; }
#contact ul:before { content: "Services"; font-size: 1.2em; font-family: 'Lobster'; color: #209c9a; } 	



#zonuafooter {
	position: relative; 
	float: right;
	font-size: 0.8em;
	background-color: #fff;
}

p.zonua { text-align: center; margin-right: 8px; }


#zonuafooter img{
	height: 17px;
	width: 69px;
	position: relative;
	top: 0.2em;
	margin-left: 0.1em;
	border: none;
}

#zonuafooter a{
	color: #000;
	text-decoration: none;
}

	
/* Now this is where we do the breakpoint stuff */

@media screen and (max-width: 1800px) {

}


/* Now this is where we do the breakpoint stuff */


@media screen and (max-width: 1480px) {

#prices div { 
/*	width: 29.5%;  min-width: 260px;  max-width: 800px;  
	margin: 1%; 
	min-height: 333px;
	padding-bottom: 3.4em; */
/*	width: 29.5%; */
}
}

@media screen and (max-width: 1452px) {
	#mainarea >div { }
	div.info, .pic { margin: 10px;
	}


}

@media screen and (max-width: 1420px) {
	
	#mainarea >div {  margin: auto; }
	div.info, .pic { margin: 1%;
	}

	div.info { width: 300px; }
	.pic {
	  height: 300px;
	  width: 300px;
	}
	.gallery img { 
		height: 300px;
		width: 300px;
	}


}


@media screen and (max-width: 1350px) {
	#mainarea >div { width: 875px;  }
	div.info, .pic { margin: 1%;
	}

	div.info { width: 250px; }
	.pic {
	  height: 250px;
	  width: 250px;
	}
	.gallery img { 
		height: 250px;
		width: 250px;
	}
	#prices div { 
/*	width: 29.5%;  min-width: 260px;  max-width: 800px;  
	margin: 1%; 
	min-height: 333px;
	padding-bottom: 3.4em; */
/*	width: 29.5%;
	min-height: 440px;
*/
}
}

@media screen and (max-width:1155px) {
	#mainarea >div { width: 680px;  }
	div.info, .pic { margin: 8px;
	}

	div.info { width: 300px; }
	.pic {
	  height: 300px;
	  width: 300px;
	}
	.gallery img { 
		height: 300px;
		width: 300px;
	}
	/*div#prices {min-height: 1600px; width: 72%; }*/
	#prices div { 
		margin: 3.3%;
		width: 41.2%;
		
	}

	img#homemademap { max-width: 800px; width: 90%; height: auto; float: none; display: block; margin: auto;}

}
@media screen and (max-width:1000px) {
	div#prices { padding-top: 2em;}

	#prices div { 
		height: 5em;
		width: 91.2%;
		max-width: 580px;
		display: block;
		margin: 0 auto 2em auto;
	}


}
@media screen and (max-width:890px) {
	#logoheadhome { background-position: center bottom; }
	#mainarea >div { width:580px;  }
	div.info, .pic { margin: 8px;
	}

	div.info { width: 250px; }
	.pic {
	  height: 250px;
	  width: 250px;
	}
	.gallery img { 
		height: 250px;
		width: 250px;
	}
}

@media screen and (max-width:760px) {
	div.info, .pic { margin: 4px;
	}
}

@media screen and (max-width:740px) {
	#mainarea >div { width:90%;  }
	div.info, .pic { margin: 1em auto;  display: block;
	}

	div.info { width: auto; }
	.pic {
	  height: 320px;
	  width: 320px;
	}
	.gallery img { 
		height: 320px;
		width: 320px;
	}
}


@media screen and (max-width: 600px) {
	
	img#logo { margin-left: auto; margin-right: auto; }
/*	#menu > ul { 
		padding: 10px;
	}
	#menu > ul >li { 
		margin-left: 0.5em;	
	}
	#menu > ul > li:first-child { margin-left: 2em;}
	ul.submenu { 
		left: 5em;

	}
*/
	#mainarea >div { width:100%;  }
	#mainarea.packages > div{ margin-bottom: 1.5em; width: 60%; padding: 5%;}
	div.turquoisewide { width:80%; }
	form#everydayvoucher { position: relative; 
		width: 110px; 
		display: block; margin: auto;
		padding-left: 2em; padding-right: 2em;}
	.pic {
	  height: 250px;
	  width: 250px;
	}
	.gallery img { 
		height: 250px;
		width: 250px;
	}
}

@media screen and (max-width: 550px) {
	#logoheadhome.services , #logoheadhome.contact { 
		height: 150px; background: url(../images/bg/emma-nails-blanchardstown.jpg) no-repeat center -50px #dbf0f1;
	}
	#logoheadhome.services img#logo, #logoheadhome.contact img#logo { display: none; }
div#socialmedia { height: auto; }

.christmas h1 { text-align: center; margin-top: 1em; color: #fff; display: block; font-size:3.5em; font-family: 'Lobster'; }



div#prices, div#mainarea{ background: none; }

#socialmedia img { padding: 2px;}
.submenu li:first-child { padding-top: 1em; }

}


@media screen and (max-width:500px) {
div#socialmedia { height: auto; }
/*
#menu { font-size: 0.9em; }
	#menu > ul { 
		padding:10px;
	}
	#menu > ul >li { 
		margin-left: 0.2em;	
	}
	#menu > ul > li:first-child { margin-left: 2em; }
	ul.submenu { 
		left: 5em;

	}

*/
div#prices, div#mainarea{ background: none; }

#socialmedia img { padding: 2px;}


}