﻿/* 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, li, fieldset, form, label, legend, caption, tbody, tfoot, thead,{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; } /* remember to define focus styles! */
ins { text-decoration: none; } /* remember to highlight inserts somehow! */
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; margin-left: 20px; } /* tables still need 'cellspacing="0"' in the markup */



html {background-color: #411d14}

/* basic styles */

body { background: url(images/barbershop-bg.png) no-repeat center 0;  margin:0 auto; min-width:1020px;}
body, input, textarea { font-size: 16px; font-family: Arial, Helvetica, sans-serif; line-height: 20px; color: #fff4e1; }

h1, h2, h3, h4 { margin: 25px 10px 10px 10px;  font-weight: normal; line-height: 1.2; color: #f9af1c; }
h1 { font-size: 50px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 14px; }

p { margin: 10px 20px 10px 20px; }

a { font-weight: bold; color: #411d14; text-decoration: none; outline: none; }
a:hover, a:active { text-decoration: underline; }

ul, ol { margin: 0 0 10px; }

strong { font-weight: bold; }
em { font-style: italic; }

.group:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
* html .group { height: 1%; }
*:first-child+html .group { min-height: 1px; }

.clear { clear:both; }

#wrapper
{
	margin: 0px auto;
	width: 990px;
	height: 950px;
}

/* navigation */

#wrapper .navigation {
	width: 100%;
	height: 291px;

}

#wrapper .navigation {
	width: 100%;
	height: 291px;

}
#wrapper .holder {
	width: 100%;
	height: 320px;

}


.navigation #tableNav
{
	float: right;
	width:720; 
	height:291; 
	border:none;

}


/* navigation*/

a#home
 {
    display: block; width: 71px; height: 25px;
    background: url("images/Home.jpg") no-repeat 0 0;
    margin: 0 auto;
}
a#home:hover{ background: url("images/Home-alt.jpg") no-repeat 0 0;}

a#about
 {
	display: block; width: 130px; height: 28px;
    background: url("images/About-Us.jpg") no-repeat 0 0;
    margin: 0 auto;
}
a#about:hover{background: url("images/About-Us-alt.jpg") no-repeat 0 0;}

a#gallery
 {
	display: block; width: 108px; height: 23px; 
    background: url("images/Gallery.jpg") no-repeat 0 0;
    margin: 0 auto;
}
a#gallery:hover{  background: url("images/Gallery-alt.jpg") no-repeat 0 0;}

a#products
 {
	display: block; width: 127px; height: 25px; 
    background: url("images/Products.jpg") no-repeat 0 0;
    margin: 0 auto;
}
a#products:hover{ background: url("images/Products-alt.jpg") no-repeat 0 0;}

a#contact
 {
	display: block; width: 143px; height: 22px; 
    background: url("images/Contact-Us.jpg") no-repeat 0 0;
    margin: 0 auto;
}
a#contact:hover{ background: url("images/Contact-Us-alt.jpg") no-repeat 0 0;}


a .alt
{
	display:none;
}

/* content */



.homeGallery
{
	margin: 0 auto;
	width: 900px;
	height: 200px;
	padding-bottom: 20px;
}

.gallerySign
{
	width: 179px;
	height: 220px;
	margin: 0 0 0 75px;
	background: url(images/gallery-sign.png) no-repeat;
}

.homeGallery .galleryBox{

width: 185px;
height: 185px;
background-color: #a9bab3;
border-color:#5e917c;
border-width: 2px;
border-style: solid;
float: right;
margin: 5px 20px 0 10px;

}

.homeBottom
{	
	width: 870px;
	height: 375px;
	border-color:#7b5339;
	border-width: 3px;
	border-style: solid;
	margin: 0 0 0 50px;
}

.homeBottom-temp
{	
	width: 870px;
	height: 550px;
	border-color:#7b5339;
	border-width: 3px;
	border-style: solid;
	margin: 0 0 0 50px;
}


.contactBox
{	
	width: 870px;
	height: 575px;
	border-color:#7b5339;
	border-width: 3px;
	border-style: solid;
	margin: 20px 0 0 50px;
}

.contactLeft{
	height:100%;
	width: 60%;
	float: left;
	background-color:#c7653f;
}

.contactLeft p{

 color: #6f2711;
 font-size: 13px;
 font-weight: bold;
 margin: 10px 0 0 40px;
}



.tb10 {
	background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #d1c7ac;
	width: 400px;
	height: 15px;
	color:#333333;
	padding:3px;
	margin: 5px 0 5px 40px;
}
.tb1 {
	background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #d1c7ac;
	width: 400px;
	height: 100px;
	color:#333333;
	padding:3px;
	margin: 5px 0 5px 40px;
}

.but{
	background-image:url(images/messageButton.gif);
	width: 160px;
	height: 40px;
	border:0;
	margin: 5px 0 5px 40px;
}



.contactRight{
	height:100%;
	width: 40%;
	float: right;
	background-color:#9a4f31;
}


.redFull
{	
	width: 870px;
	height: 575px;
	border-color:#7b5339;
	border-width: 3px;
	border-style: solid;
	margin: 20px 0 0 50px;
	background-color:#c7653f;
}

.redFull .galleryBox{
width: 185px;
height: 185px;
background-color: #a9bab3;
border-color:#5e917c;
border-width: 2px;
border-style: solid;
float: left;
margin: 25px 12px 5px 15px;
}
.bottomLeft{
	height:100%;
	width: 70%;
	float: left;
	background-color:#c7653f;
}


.bottomRight{
	height:100%;
	width: 30%;
	float: right;
	background-color:#9a4f31;
}

.bottomLeftHeader{
width: 220px;
height: 60px;
background-color:#61341e;
margin: -3px;
}

.bottomRightHeader{
width: 220px;
height: 60px;
}

.bottomRightHeader img{
text-align: center;
padding: 10px 0 0 30px;

}

.bottomLeftHeader img{
text-align: center;
padding: 10px 0 0 30px;

}



/* page specific styles */

body.fill-in-your-profile #rightpage {
	padding-top: 43px;
}




body.page {
	background-image: url(images/barbershop-bg.png);
}
body.page #wrapper {
	
	width: 980px;
	height: 950px;
	margin: 0px 0px 0px 218px;
	position:fixed;
}
body.page h1 {
	margin: 20px 0 30px;
	padding: 0;
	font-size: 36px;
	text-align: center;
	color: #f9af1c;
	background: none;
}
body.page form p {
	padding-left: 34px;
	color: #7a0d0d;
}
body.page form p.button {
	padding: 26px 26px 0 0;
	background: none;
}
body.page form p.button a {
	width: 137px;
	text-align: center;
	background: url(images/btn-login.gif) no-repeat 0 0;
}


