/*

Title:      Beaux Mondes Salon & Spa
Author:     Daniel Marino
Revised:		January 2010

*/


/* Basic Elements
----------------------------------------------------------------------------------------------------*/

a {
	color: #533b57;
}

body {
	background: #fff url(../img/background.png) top repeat-x;
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 10px;
	line-height: 1.5;
}

em {
	display: inline-block;
	font-style: italic;
}

h2 {
	font-size: 28px;
	margin-bottom: 30px;
}

h3 {
	color: #432652;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 0px;
	text-transform: uppercase;
}

h4 {
	color: #432652;
	margin-bottom: 5px;
	text-transform: uppercase;
}

h5 {
  margin-bottom: 20px;
  text-transform: capitalize;
}

h5 em {
  font-weight: normal;
}

p, ol, ul {
	margin-bottom: 15px;
}

p.change {
	font-size: 10px !important;
	margin-left: 10px !important;
	margin-top: 4em !important;
}

ul ul {
	margin: 0 0 0 15px;
}

/* Header
----------------------------------------------------------------------------------------------------*/

.header {
	background: url(../img/text-yourlife.png) 401px 10px no-repeat;
	height: 121px;
	position: relative;
}

.logo {
	background: #b7b798;
	height: 121px;
	line-height: 121px;
	text-align: center;
}

.logo img {
	vertical-align: middle;
}

.specials-link {
	height: 30px;
	position: absolute;
	right: 10px;
	top: 0;
	width: 122px;
}

.specials-link a {
	background: url(../img/button-specials.png) no-repeat;
	display: block;
	height: 30px;
	overflow: hidden;
	text-indent: -5000px;
	width: 122px;
}

.specials-link a:hover {
	background-position: bottom;
}


/* Navigation
----------------------------------------------------------------------------------------------------*/

.nav {
	margin-top: 100px;
}

.nav ul {
	float: right;
	list-style: none;
	margin-bottom: 0;
}

.nav li {
	border-left: 2px solid #fff;
	display: inline;
	float: left;
	margin-left: 20px;
	padding-left: 20px;
}

.nav li.first {
	border: 0;
}

.nav a {
	background-position: top;
	display: block;
	height: 9px;
	overflow: hidden;
	text-indent: -5000px;
}

#nav-salon { background-image: url(../img/nav-salon.png); width: 58px; }
#nav-spa { background-image: url(../img/nav-spa.png); width: 32px; }
#nav-bridal { background-image: url(../img/nav-bridal.png); width: 67px; }
#nav-contact { background-image: url(../img/nav-contact.png); width: 120px; }
#nav-home { background-image: url(../img/nav-home.png); width: 50px; }

.nav a:hover,
.nav li.on a {
	background-position: bottom;
}


/* Secondary Navigation
----------------------------------------------------------------------------------------------------*/

.secondary-nav {
	border-bottom: 5px solid #432652;
	padding-bottom: 10px;
}

.secondary-nav ul {
	float: right;
	list-style: none;
	margin-bottom: 0;
}

.secondary-nav li {
	border-left: 1px solid #533b57;
	display: inline;
	float: left;
	line-height: 1;
	margin-left: 7px;
	padding-left: 7px;
}

.secondary-nav a {
	color: #533b57
	font-family: "Gill Sans", arial, helvetica, sans-serif;
	font-size: 11px;
	line-height: 1;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	top: -2px;
}

.secondary-nav a:hover {
	text-decoration: underline;
}

.secondary-nav li.first {
	border: 0;
}


/* Article Header
----------------------------------------------------------------------------------------------------*/

.article-header {
	border-bottom: 5px solid #e2e2d6;
	margin-bottom: 20px;
	height: 55px;
	padding: 4px 10px;
}

.article-header img {
	float: right;
	margin-right: -10px;
	margin-top: -9px;
}

.article-header p {
	line-height: 12px;
	margin-bottom: 5px;
}


/* Content
----------------------------------------------------------------------------------------------------*/

#content {
	height: 405px;
	margin-bottom: 25px;
	overflow: auto;
}

.content {
	background: url(../img/background-aside.png) 10px top repeat-y;
}

.content-pad {
	padding: 12px 0 25px 20px;
}

.content .lastsection {
	margin-bottom: 0px !important;
}

.content .section {
	margin-bottom: 35px;
	padding: 0 10px;
}

.package-details {
  border-bottom: 1px solid #ccc;
  margin-bottom: 35px;
  padding: 0 0 10px 30px;
}

.services {
	float: left;
	margin-right: 1%;
	width: 49%;
}

.section li {
	margin-bottom: 5px;
	text-transform: capitalize;
}

.specials h2 {
	color: #432652;
	font-size: 17px;
	line-height: 21px;
	margin: 20px 0px 0px 10px;
}

.specials h2.line {
	border-top: 1px solid #000000;
	padding-top: 20px;
}

.specials p {
	font-size: 12px;
	margin: 5px 0px 0px 10px;
}


/* Home Page
----------------------------------------------------------------------------------------------------*/

body.home .content {
	font-size: 14px;
	line-height: 2;
}

body.home .content .content-pad {
	padding: 125px 0 125px;
}

.facebook {
	margin-bottom: 0px;
	margin-top: -5px;
}

.facebook a {
	background: url(../img/icon-facebook.png) no-repeat;
	color: #000;
	display: block;
	padding-left: 30px;
	text-decoration: none;
}

.text-welcome {
	background: url(../img/text-welcome.png) no-repeat;
	display: block;
	height: 77px;
	margin: 0 0 30px -45px;
	overflow: hidden;
	text-indent: -5000px;
	width: 290px
}


/* Aside
----------------------------------------------------------------------------------------------------*/

.aside {
	background: url(../img/aside-home.png) 0px 30px no-repeat;
	min-height: 594px;
	text-indent: -5000px;
}

.aside p {
	background: url(../img/phone.png) no-repeat;
	height: 30px;
	margin: 0px;
	width: 219px;
}

.salon .aside { background-image: url(../img/aside-salon.png); }
.nails .aside { background-image: url(../img/aside-nails.png); }
.cosmetics .aside { background-image: url(../img/aside-cosmetics.png); }
.spa .aside { background-image: url(../img/aside-spa.png); }
.bridal .aside { background-image: url(../img/aside-bridal.png); }
.contact .aside { background-image: url(../img/aside-contact.png); }
.specials .aside { background-image: url(../img/aside-specials.png); }


/* Footer
----------------------------------------------------------------------------------------------------*/

.footer {
	background: transparent url(../img/background-footer.png) bottom repeat-x;
	font-size: 10px;
}

.footer img {
	display: block;
	float: left;
}

.footer p {
	font-size: 11px;
	line-height: 42px;
	margin: 0;
	white-space: nowrap;
}


/* Misc
----------------------------------------------------------------------------------------------------*/

.f-left {
	float: left;
}

.f-right {
	float: right;
}

.no-float {
	float: none;
}

.r-align {
	text-align: right;
}

.sm {
  font-size: 8px;
  position: relative;
  top: -3px;
}