@font-face {
    font-family: 'sansation';
    src: url('fonts/sansation_regular-webfont.eot');
    src: url('fonts/sansation_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sansation_regular-webfont.woff') format('woff'),
         url('fonts/sansation_regular-webfont.ttf') format('truetype'),
         url('fonts/sansation_regular-webfont.svg#sansationregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sansation';
    src: url('fonts/sansation_light-webfont.eot');
    src: url('fonts/sansation_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sansation_light-webfont.woff') format('woff'),
         url('fonts/sansation_light-webfont.ttf') format('truetype'),
         url('fonts/sansation_light-webfont.svg#sansationlight') format('svg');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: 'sansation';
    src: url('fonts/sansation_bold-webfont.eot');
    src: url('fonts/sansation_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sansation_bold-webfont.woff') format('woff'),
         url('fonts/sansation_bold-webfont.ttf') format('truetype'),
         url('fonts/sansation_bold-webfont.svg#sansationbold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'sansumi';
    src: url('fonts/sansumi-bold-webfont.eot');
    src: url('fonts/sansumi-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sansumi-bold-webfont.woff') format('woff'),
         url('fonts/sansumi-bold-webfont.ttf') format('truetype'),
         url('fonts/sansumi-bold-webfont.svg#sansumiregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
.sans { font-family: Sansation, 'Century Gothic', sans-serif; }
.sumi { font-family: Sansumi, 'Century Gothic', sans-serif; }
.seg { font-family: 'Segoe UI', Arial, sans-serif; }
.title { 
	font-size: 21px; 
	.sans;
	.pink { color: #ba0081; }
}
#menu {
	li {
		display: inline-block;
		margin: 0 0 0 19px;
	}
}
.ie7 #menu {
	li { *display: inline; }
}
.small {
	font-size: 90%; 
}
.fleft { float: left; }
.fright { float: right; }
.rounded (@radius)	{
	border-radius: @radius;
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
}
.shadow (@x: 0px, @y: 0px, @blur: 12px, @spread: -2px, @color: #444) {
	box-shadow: @arguments;
	-moz-box-shadow: @arguments;
	-webkit-box-shadow: @arguments;
}
.expanded { letter-spacing: 0.1em; }
.norm { letter-spacing: 0em; }
.condensed { letter-spacing: -0.05em; }
.upper { text-transform: uppercase; }
.small {
	font-size: 90%; 
}
.tdunder { text-decoration: underline; }
.tdnone { text-decoration: none; }

// ############### Colors
//@red: #BF001B;
@red: #ba001a;
@dred: #621313;
@ltgrey: #993434;
@ltergrey: #C2CCC3;
@grey: #9da19d;
@dgrey: #898989;
@pink: #EFA5A5;
@dpink: #726161;

// Overarching styles
body { 
	background-color: #fff;
	a { 
		color: @red;
		&:hover { color: @dgrey; }
	}
	.sans;
}
h1, h2, h3, h4, h5 { .sans; }
h1 { 
	
}
h2, .ie8 h2 { 
	font-weight: lighter;
	color: @red;
	font-size: 28pt;
	margin: 6px 0 10px; 
}
h3, .ie8 h3 { 
	font-weight: bold;
	font-size: 12pt;
	color: #808285;
	margin: 24px 0 12px;
}
h3.ptitle, .ie8 h3.ptitle { 
	font-size: 12pt;
	color: #444;
}
h4 { 
	margin: 6px 0 10px; 
	font-weight: bold;
	color: @red;
}
p { 
	margin: 0 0 9px;
	text-shadow: 0px 1px 0px #fff, 0px -1px 0px #CCC;
}

// Here we go!

footer {
	a, a:visited, a:active { color: @red;}
}
// #################### Header styles
header {
	.shadow(0px);
	overflow: auto;
	min-height: 125px;
	background: url(images/bg-main.png);
	#home-link { .tdnone; }
	.logo { 
		background-color: @red;
		font-size: 11pt;
		color: #fff;
		float: left;
		position: relative;
		right: 4px;
		padding: 36px 15px 10px;
/*		.clarite { 
			font-size: 42pt;
			border-bottom: 3px solid #fff;
			font-weight: normal;
			letter-spacing: -0.05em;
			text-shadow: 0px -1px 1px #ccc, 0px 1px 1px #666;
		}
		.health-beauty {
			.sumi;
		} */
	}
	.facebook {
		float: left;
		position: relative;
		top: 13px;
		left: 776px;
		img {
			width: 40px;
		}
	}
	.phone {
		.sans;
		color: @red;
		font-size: 26px;
		top: 61px;
		position: relative;
		float: right;
	}
	#menu { 
		.seg;
		padding-top: 101px;
		font-size: 14px;
		a { 
			color: #000;
			.tdnone;
			&:hover { .tdunder; }
		}
		.menu {
			border-top: 3px solid @grey;
			text-align: center;
			width: auto;
			margin: 0;
			.fleft;
			padding-top: 5px;
			ul.children {
				display: none;
				position: absolute;
				background: url(images/bg-main.png);
				z-index: 3;
				.rounded(3px);
				margin: 0 0 0 -9px;
				padding: 0 9px;
				li {
					text-align: left;
					position: relative;
					display: block;
					margin: 10px 0;
					height: 19px;
				}
			}
		}
	}
	.sup-menu { 
		.seg;
		font-size: 10pt;
		text-align: right;
		bottom: -8px;
		position: relative;
		.fright;
		a, a:visited { color: @grey; }
	}
}
.ie8, .ie7 {
	#menu .children {
	
	}
}
#content {
	.shadow(0px);
	background: url(images/bg-main.png);
	.seg;
	position: relative;
}
.fpage .banner-image .img { top: -280px; }
.banner-image {
	background: url(images/bg-banner.png);
	position: relative;
	z-index: -1;
	max-height: 300px;
	text-align: center;
	img {
		position: relative;
		.shadow(0px, 0px, 18px, -5px);
	}
}

// ######################### Main page layout/formatting

.page {
	margin-top: 20px;
	h2.p-title {
		color: #fff;
		background: @red;
//		border-bottom: 6px solid @dgrey;
		padding: 5px 8px;
		.fleft;
		width: auto;
		text-shadow: 0px -1px 1px #CCC, 0px 1px 1px #666;
		.rounded(9px);
		box-shadow: 0px 3px 1px -1px #999, 0px 3px 6px 0px #999;
	}
	.page-nav {
		.sans;
		margin: 30px 0;
		li { 
			font-size: 14pt;
			display: inline;
			a { 
				color: #000; .tdnone;
				text-shadow: 0px -1px 0px #CCC, 0px 1px 1px #666;
				&:hover { 
					border-bottom: 2px solid @dgrey;
					.tdnone;
				}
			}	
			margin-right: 3%;
		}
		.current_page_item { border-bottom: 2px solid @dgrey; }
	}
	.main-content {	// ############## Main content styles
		padding: 10px 0;
		min-height: 200px;
		h1 {
			min-width: 231px;
			position: relative;
			color: @red;
			width: 33%;
			font-size: 21pt;
			font-weight: normal;
			.fright;
			text-shadow: 0px 1px 1px #eee, 0px -1px 0px #ccc;
		}
		h2 {
			font-size: 18pt;
		}
		p {
		width: 60.5%;
		min-width: 266px;
		}
		img.alignleft {
			.fleft;
		}
		img.alignright {
			.fright;
		}
//		.wpcf7 {
//			float: right;
//			margin: 0 5%;
//		}
	}
}
// ######################### Blog/posts formatting
.sidebar {
	padding-bottom: 30px;
	ul { 
		border-left: 1px solid @ltergrey;
		padding-left: 10px; 
	}
	li { 
		list-style: none;
		margin: 5px 0 0;
		a { 
			color: @dgrey;
			.tdnone;
			&:hover { 
				color: @grey;
				.tdunder;
			}
		}
		h2 { 
			margin: 15px 0 0px;
			color: @dgrey;
			font-size: 19pt;
		}
	}
}
.next-p {
 text-align: right;
 .fright;
}
// ######################### Front Page formatting
.ie8 {
	.fpage .content {
		ul {
			li {
					h2 {
					font-size: 28pt;
					right: 15%;
					top: 5px;
				}
			}
		}
	}
}
.ie7 {
	.fpage .content {
		ul {
			li {
					h2 {
					right: 0;
					top: -46px;
					right: -33px;
					clear: both;
					font-size: 28px;
				}
			}
		}
	}
}
	.fpage {
		.banner-image img {
			top: -380px;
		}
		#blurb {
			position: relative;
			z-index: 1;
			top: 90px;
			font-size: 20pt;
			color: white;
			max-width: 1033px;
			margin: auto;
			overflow: auto;
			top: 160px;
			font-weight: normal;
			div {
				display: block;
				clear: both;
				text-align: left;
			}
			#ln1, #ln2, #ln3 {
				float: left;
				width: auto;
				position: relative;
				background: rgb(122, 15, 35);
				background: rgba(122, 15, 35, 0.7);
				padding: 0 10px;
				margin: 0 0 0 20px;
			}
		}
	}
.fpage .content {
	ul {
		float: left;
		margin-left: 2%;
		margin-right: 4%;
		width: 27%;
		min-width: 258px;
		position: relative;
		left: 23px;
		top: 30px;
	}
	li {
		list-style: none;
		float: left;
		h2 {
			-webkit-transform: rotate(-90deg); 
			-moz-transform: rotate(-90deg);
			-o-transform: rotate(-90deg);
			-ms-transform: rotate(-90deg);
			display: inline-block;
			position: relative;
			right: 56%;
			top: 102px;
			color: @pink;
			font-size: 29pt;
			font-weight: lighter;
			text-shadow: -1px 1px 0px #eee, 1px -1px 0px #fff;
		}
		h3 {
			width: 97%;
			position: relative;
			bottom: 76px;
			left: 10px;
			text-transform: none;
			font-size: 18pt;
			font-weight: normal;
			color: #fff;
			background-color: @ltgrey;
			padding: 2%;
			text-shadow: 0px -1px 0px #eee, 0px 1px 0px #444;
			box-shadow: -1px -1px 1px 0px #999, 1px 1px 0px 0px #fff;
			-moz-box-shadow: -1px -1px 1px 0px #999, 1px 1px 0px 0px #fff;
			-webkit-box-shadow: -1px -1px 1px 0px #999, 1px 1px 0px 0px #fff;
		}
		h4 {
			.seg;
			width: 97%;
			bottom: 83px;
			left: 10px;
			position: relative;
			font-weight: normal;
			color: @dgrey;
			padding: 2%;
			text-shadow: 0px 1px 0px white, 0px -1px 0px #DDD;
		}
		h5 {
			position: relative;
			bottom: 86px;
			float: right;
			background: @red;
			padding: 8px;
			.shadow(0px, 3px, 13px, -3px);
			&:hover {
				box-shadow: -1px -1px 2px 0px #dab7bc, 2px 2px 2px 1px #fff;
			}
			a {
				color: #fff
			}
		}
	}	
}
footer {
	background: url(images/bg-footer.png);
	overflow: auto;
	padding-top: 20px;
	.seg;
	.f-title {
		font-size: 23pt;
		color: #fcfcfc;
		text-shadow: 0px -1px 1px #ccc, 0px 1px 1px #444;
	}
	.grid_4 { 
		min-width: 220px;
		p {
			text-shadow: 0px 1px 1px #eee, 0px -1px 1px #ccc;
		}
		a {
			.tdnone;
			&:hover { .tdunder; }
			h2 {
				font-size: 14pt;
				font-weight: lighter;
			}
		}
	}
	.sub-footer {
		margin: 20px 0;
	}
	#footer-links {
		margin: 20px 0;
		text-align: center;
		li {
			display: inline;
			margin: 0 5px;
			a {
				text-shadow: 0px 1px 1px #EEE, 0px -1px 1px #CCC;
				font-size: 10pt;
				.tdnone;
				color: @dgrey;
				&:hover {
					text-shadow: 0px -1px 0px #ccc, 0px 1px 1px #444;
				}
			}
		}
	}
}