/*
##########
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,font,img,ins,kbd,
q,s,samp,small,strike,strong,sub,sup,tt, var,b,u,i,center,dl,dt,dd,ol,ul, menu,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

ol, ul, menu { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
table { border-spacing: 0; }

input, button, select, textarea { font-size: 100%; }

/*
##########
GLOBAL
##########
*/

@font-face {
    font-family: 'FontinBold';
    src: url('../fonts/fontin-bold-webfont.eot');
    src: url('../fonts/fontin-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fontin-bold-webfont.woff') format('woff'),
         url('../fonts/fontin-bold-webfont.ttf') format('truetype'),
         url('../fonts/fontin-bold-webfont.svg#FontinBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FontinRegular';
    src: url('../fonts/fontin-regular-webfont.eot');
    src: url('../fonts/fontin-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fontin-regular-webfont.woff') format('woff'),
         url('../fonts/fontin-regular-webfont.ttf') format('truetype'),
         url('../fonts/fontin-regular-webfont.svg#FontinRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FontinSmallCapsRegular';
    src: url('../fonts/fontin-smallcaps-webfont.eot');
    src: url('../fonts/fontin-smallcaps-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fontin-smallcaps-webfont.woff') format('woff'),
         url('../fonts/fontin-smallcaps-webfont.ttf') format('truetype'),
         url('../fonts/fontin-smallcaps-webfont.svg#FontinSmallCapsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Sue Ellen Francisco';
	src: url('../fonts/SueEllenFrancisco-kRB.eot?') format('eot'),
	     url('../fonts/SueEllenFrancisco-kRB.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
}

html {
	width: 100%;
	height: 100%;
	text-align: center;
	background: #000 url(../images/wood.jpg) center top repeat-y;
}
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 10px !important;
	font-size: 62.5%;
    color: #bbb;
	text-align: left;
}
#container {
	margin: 0 auto -178px;
	padding: 0;
	width: 960px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
acronym {
	cursor: help;
	border-bottom: 1px dotted #ccc;
}
h1, h2, h3, p, form {
	margin: 0;
	padding: 0;
}
a:link {
    border-bottom: 1px dotted #999;
	color: #fff;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
a:visited {
    color: #bbb;
	text-decoration: none;
}
a:hover,
a:active {
	border-bottom: 1px solid #ccc;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 0 10px rgba(255,255,255,0.75);
}
.clear {
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
}
.cf:after,
#header:after, #container:after, #container2:after, #container3:after, #containerSec:after, #content:after, #footer:after
{ content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }

/*### BRANDING ###*/

#branding {
	position: relative;
	height: 153px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#branding h1 {
	position: absolute;
	left: 139px;
	top: 0;
	width: 682px;
	height: 153px;
	text-indent: -9999em;
	background: url(../images/charles-nicholas-logo.png) 0 0 no-repeat;
}
#branding h1 a {
	display: block;
	border: 0;
	width: 100%;
	height: 100%;
}
#branding p {
	position: absolute;
	top: 60px;
	right: 0;
	width: 400px;
	height: auto;
	font-size: 1.6em;
	text-align: right;
	color: #fff;
}
#branding p strong {
	font-size: 1.4em;
}

/*### NAVIGATION ###*/

#nav {
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}
#nav li {
	display: inline;
	border-left: 1px solid #363534;
	padding: 0 16px;
}
#nav li:first-child {
	border:  none;
}
#nav li a {
	border: 0;
	font-size: 1.6em;
	line-height: 2.5;
	color: #7a7a7a;
    text-shadow: 0 2px 2px #000;
}
#nav li a:hover,
#nav .current a {
	color: #fff;
	text-decoration: none;
    text-shadow: 0 0 10px rgba(255,255,255,0.75);
}

/*### CONTENT ###*/

#content {
	position: relative;
    padding: 0 0 178px;
}
.aboutWrap #content,
.straighteningWrap #content {
    padding-bottom: 218px;
}
h2 {
	position: relative;
    margin: 0px 0 20px;
    font: normal 3em/1 "FontinBold", Trebuchet, Arial, sans-serif;
    text-shadow: 0 4px 3px #000;
    color: #666;
}
h2:after {
	position: absolute;
	top: 0;
	left: 0;
	color: rgba(255,255,255,0);
}
#history h2:after {
	content: "Hairdresser History";
	text-shadow: -1px -2px 0 #ddd;
}
#services h2:after {
	content: "Hairdresser Services";
	text-shadow: 0px -2px 0 #ddd;
}
#news h2:after {
	content: "News";
	text-shadow: 1px -2px 0 #ddd;
}
#vision h2:after {
	content: "Vision Statement";
	text-shadow: -1px -2px 0 #ddd;
}
#mission h2:after {
	content: "Mission Statement";
	text-shadow: 1px -2px 0 #ddd;
}
#team h2:after {
	content: "Our Lead Stylist";
	text-shadow: -1px -2px 0 #ddd;
}
#dreadlocksFAQ h2:after {
	content: "Dreads FAQ";
	text-shadow: 1px -2px 0 #ddd;
}
#dreadlocksMain h2:after {
	content: "Dreads & Maintenance";
	text-shadow: -1px -2px 0 #ddd;
}
#extensionsMain h2:after {
	content: "Hair Extensions";
	text-shadow: -1px -2px 0 #ddd;
}
#extensionsFAQ h2:after {
	content: "Extensions FAQ";
	text-shadow: 1px -2px 0 #ddd;
}
#visit h2:after {
	content: "Visit Our Salon";
	text-shadow: -1px -2px 0 #ddd;
}
#socialMedia h2:after {
	content: "Join Us Online";
	text-shadow: -1px -2px 0 #ddd;
}
#call h2:after {
	content: "Text/SMS For Appointments";
	text-shadow: -1px -2px 0 #ddd;
}
#wigsMain h2:after {
	content: "Wigs & Hair Pieces";
	text-shadow: -1px -2px 0 #ddd;
}
#wigsFAQ h2:after {
	content: "Wigs FAQ";
	text-shadow: 1px -2px 0 #ddd;
}
#straighteningMain h2:after {
	content: "Hair Straightening";
	text-shadow: -1px -2px 0 #ddd;
}
#straighteningFAQ h2:after {
	content: "Straightening FAQ";
	text-shadow: 1px -2px 0 #ddd;
}
#cutsColoursMain h2:after {
	content: "Hair Cuts & Colours";
	text-shadow: -1px -2px 0 #ddd;
}
#cutsColoursFAQ h2:after {
	content: "Cuts & Colours FAQ";
	text-shadow: 1px -2px 0 #ddd;
}
#barberingMain h2:after {
	content: "Barber & Cut-throat Shaves";
	text-shadow: -1px -2px 0 #ddd;
}
#barberingFAQ h2:after {
	content: "Barbering FAQ";
	text-shadow: 1px -2px 0 #ddd;
}


.buttonWrap {
	margin: 0;
	font-size: 1em;
}
a.button {
    border: 1px solid #2c2b2a;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	margin: 0;
	padding: 10px;
	font: normal 1.5em/1 "FontinSmallCapsRegular", Trebuchet, Arial, sans-serif;
	background: url(../images/btn-bg.png) 0 0 repeat-x;
	color: #b9b9b9;
	text-decoration: none;
    text-shadow: 0 2px 2px #000;
	box-shadow: 0px 2px 2px rgba(0,0,0,0.25);
}
a.button:hover {
    border: 1px solid #333;
	color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.75);
}

/*### HISTORY ###*/

#history {
	float: left;
    width: 286px;
}
#history .buttonWrap {
    margin: 10px 0 0;
}

/*### SERVICS ###*/

#services {
	float: left;
	margin: 0 54px;
	width: 280px;
}
#services a {
}
#services ul {
	margin: 0 0 30px;
	padding: 0 0 0 20px;
	list-style-image: url(../images/scissors.png);
}
#services ul li {
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 1.5em;
	font-family: "FontinRegular", Arial, sans-serif;
}
#services ul li strong,
#services ul li a {
	font-family: "FontinBold", Arial, sans-serif;
	font-weight: normal;
}

/*### NEWS ###*/

#news {
	float: right;
	width: 280px;
}
#news ul {
	margin: 0 0 35px;
}
#news ul li {
	margin-bottom: 20px;
	font-size: 1.2em;
    line-height: 1.5;
    text-align: left;
}
#twitter_update_list li span {
	display: block;
	margin: 0 0 5px;
}
#twitter_update_list a[style*="85%"] {
	font-size: 0.8em !important;
	color: #666;
	text-decoration: none;
	border-top: 1px solid #000;
	border-bottom: 1px solid #333;
	border-radius: 5px;
	padding: 1px 5px 2px;
	background: rgba(0,0,0,0.25)
}
#twitter_update_list a[style*="85%"]:hover {
	color: #999;
	text-shadow: none;
}

/*### GALLERY ###*/

#gallery {
	position: absolute;
	left: 0;
	top: -426px;
	width: 100%;
    height: 376px;
}
#content {
	padding-top: 476px;
}
/*.gallery img[layout=portrait] {
  padding: 50px 59px 68px;
  background: url(../images/photo-frame-portrait.png) 0 0 no-repeat;
}
.gallery img[layout=landscape] {
  padding: 49px 59px 69px;
  background: url(../images/photo-frame-landscape.png) 0 0 no-repeat;
}*/
.gallery img {
    box-shadow: 0 10px 20px rgba(0,0,0,0.75);
}
#galleryTemp {
	position: absolute;
	left: 0;
	top: 60px;
	width: 100%;
    height: 376px;
}
.barberingWrap #galleryTemp .img01 {
	position: absolute;
	left: 20px;
	top: 0;
	width: 220px;
	height: 286px;
}
.homeWrap #galleryTemp .img01 {
	position: absolute;
	left: 0;
	top: 0;
	width: 220px;
	height: 286px;
}
.barberingWrap #galleryTemp .img02,
.homeWrap #galleryTemp .img02 {
	position: absolute;
	left: 292px;
	top: 0;
}
.barberingWrap #galleryTemp .img03 {
	position: absolute;
	left: 720px;
	top: 0;
	width: 220px;
	height: 286px;
}
.homeWrap #galleryTemp .img03 {
	position: absolute;
	left: 740px;
	top: 0;
	width: 220px;
	height: 286px;
}
.barberingWrap #content {
    padding-top: 380px !important;
}
.homeWrap #content {
    padding-top: 410px !important;
}
.straighteningWrap #content {
	padding-top: 40px !important;
}

.cutsColoursWrap #galleryTemp,
.wigsWrap #galleryTemp,
.extensionsWrap #galleryTemp,
.dreadlocksWrap #galleryTemp {
	position: absolute;
	left: 0;
	top: 60px;
	width: 100%;
    height: 376px;
}
.cutsColoursWrap #galleryTemp .img01,
.wigsWrap #galleryTemp .img01,
.extensionsWrap #galleryTemp .img01,
.dreadlocksWrap #galleryTemp .img01 {
	position: absolute;
	left: 0;
	top: 0;
}
.cutsColoursWrap #galleryTemp .img02,
.wigsWrap #galleryTemp .img02,
.extensionsWrap #galleryTemp .img02,
.dreadlocksWrap #galleryTemp .img02 {
	position: absolute;
	left: 335px;
	top: 0;
}
.cutsColoursWrap #galleryTemp .img03,
.wigsWrap #galleryTemp .img03,
.extensionsWrap #galleryTemp .img03,
.dreadlocksWrap #galleryTemp .img03 {
	position: absolute;
	left: 670px;
	top: 0;
}
.cutsColoursWrap #content,
.wigsWrap #content,
.extensionsWrap #content,
.dreadlocksWrap #content {
    padding-top: 460px !important;
}

/*### DREADLOCKS ###*/

.contentHalfLeft {
    float: left;
    margin: 0 40px 0 20px;
    padding: 30px 0 0;
    width: 440px;
}
.contentHalfRight {
    float: right;
    margin: 0 20px 0 0;
    padding: 30px 0 0;
    width: 440px;
}
h3 {
    margin: 0 0 10px;
    font: normal 1.5em/1.5em "FontinBold", Arial, Helvetica, Geneva, sans-serif;
}
p {
    padding: 0 0 20px;
    font-size: 1.2em;
    line-height: 1.5;
    text-align: justify;
}

.faq dl dt {
	padding: 0 0 0 20px;
	background: url(../images/scissors.png) left center no-repeat;
}
.faq dl dd {
/*    display: none;*/
}
.faq dl dd p {
    margin: 0 0 10px;
    padding: 0 0 0 20px;
}
.faq dl dd p:last-child {
    margin: 0 0 20px;
}
.faq dl dd ol,
.faq dl dd ul {
    margin: 0 0 20px 20px;
    padding-left: 20px;
    font-size: 1.2em;
    list-style: decimal;
}
.faq dl dd ul {
    list-style: disc;
}
.faq dl dd ol li,
.faq dl dd ul li {
	margin: 0 0 10px;
	line-height: 1.5;
}

table.prices {
	border-top: 2px solid #555;
    border-right: 1px solid #555;
    border-bottom: 2px solid #222;
    border-left: 2px solid #222;
    border-radius: 3px;
    margin: 0 0 -5px -10px;
    padding: 5px;
    width: 450px;
    font-family: "Sue Ellen Francisco", Arial, sans-serif;
    background: rgba(255,255,255,0.1);
    box-shadow: 0px 2px 2px #000;
    -webkit-transform: rotate(-0.5deg);
    -moz-transform: rotate(-0.5deg);
    -ms-transform: rotate(-0.5deg);
    -o-transform: rotate(-0.5deg);
}
table.prices td {
/*     border-top: 1px solid rgba(0,0,0,0.2); */
    padding: 0 5px;
    font-size: 2.4em;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-shadow: 0px 1px 2px #000;
}
table.prices tr:first-child td {
    border: none;
}
table.prices td em {
    font-size: 0.8em;
    font-style: normal;
    color: #777;
}

.productsAside li {
    margin: 0 0 5px;
    font-size: 1.2em;
}
.productsAside .buttonWrap {
    padding: 20px 0 0 0;
}


/*### ABOUT US ###*/

.aboutWrap #content {
    padding-top: 30px;
}
#vision {
	margin-right: 20px;
}
#vision,
#mission {
	width: 450px;
}
#vision p,
#mission p {
	padding-bottom: 0;
}

#team {
    clear: both;
    margin: 0 20px;
    padding: 30px 0 0;
}
#team {
    /* margin-left: 20px; added when Casey left -- remove after adding Jackie */
}
.homeWrap #team h2,
#team dt {
	display: none;
}
#team dd {
	position: relative;
	/*float: left;
	width: 215px;*/
	padding: 0 0 0 235px;
	margin: 0 20px 0 0;
}
#team dd:last-child {
	margin-right: 0;
}
.homeWrap #team dd .photo {
	margin: 0 0 -5px;
	padding: 0;
}
#team dd a {
	border: 0 !important;
}
#team dd img {
	box-shadow: 0 2px 2px rgba(0,0,0,0.75);
	border-radius: 2px;
  float: left;
  margin-left: -235px;
	width: 215px;
	height: 255px;
}
#team .nick img {
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(1deg);
	-o-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
}
#team .sonya img {
	-webkit-transform: rotate(1.5deg);
	-moz-transform: rotate(1.5deg);
	-o-transform: rotate(1.5deg);
	-ms-transform: rotate(1.5deg);
}
#team .jess img {
	-webkit-transform: rotate(-1.5deg);
	-moz-transform: rotate(-1.5deg);
	-o-transform: rotate(-1.5deg);
	-ms-transform: rotate(-1.5deg);
}
#team .ian img {
	-webkit-transform: rotate(0.5deg);
	-moz-transform: rotate(0.5deg);
	-o-transform: rotate(0.5deg);
	-ms-transform: rotate(0.5deg);
}

/*### CUTS & COLOURS ###*/

.cutsColoursWrap table.prices {
	width: 960px;
	margin-left: 0;
}
.cutsColoursWrap table td:first-child table {
	border-right: 1px solid #777;
}
.cutsColoursWrap table table td {
	font-size: 1em;
}

/*### CONTACT US ###*/

.contactWrap #content {
    padding-top: 30px;
}
.mapWrap {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #cdd0db;
	border-radius: 2px;
	padding: 10px;
	width: 418px;
	background: #f1f2f6;
	box-shadow: 0px 2px 3px #000;
}
.mapWrap iframe {
	border-bottom: 1px solid #e0e1e8;
	border-radius: 2px;
}
.mapWrap .mapEnlarge {
	margin: 5px 0;
	text-align: center;
}
.mapWrap .mapEnlarge a {
	margin: 10px 0;
	font: normal 1.5em/1 "FontinSmallCapsRegular", Trebuchet, Arial, sans-serif;
	color: #444;
}

/*### FOOTER ###*/

#footer {
	height: 178px;
	background: url(../images/hearth.png) center top no-repeat;
}
#footer,
.push {
	clear: both;
}

p.details br {
	display: none;
}
p.details {
    padding: 90px 0 37px;
    font: normal 3.2em/1 "FontinBold", Trebuchet, Arial, sans-serif;
    text-align: center;
    color: #ddd;
}
p.details .adr,
p.details .tel {
    color: #000;
    position: relative;
    text-shadow: 0 1px 0 rgba(255,255,255,0.25);
    display: inline-block;
	opacity: 0.7;
}
p.details .spacer {
	font-size: 0.8em;
	color: #000;
	text-shadow: 0px 1px 0px rgba(255,255,255,0.25);
	opacity: 0.7;
}

/*### LEGAL ###*/

#legal {
	text-align: center;
	color: #333;
    text-shadow: 0 2px 2px #000;
    font-size: 1em;
}
#legal a:link {
	color: #333;
	border: 0;
}
#legal a:hover {
	color: #fff;
}