* {
	margin: 0px;
	padding: 0px;
}
ul, ol {
	margin-left: 3em;
}
body {
	background: transparent url(../images/Background.gif) top left repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#container {
	width: 850px;
	margin: auto;
}
#container  #logoarea {
	width: 525px;
	height: 306px;
	float: left;
}
#container #logoarea #logo {
	background: transparent url(../images/HairLoom-Logo.gif) top left no-repeat;
	width: 525px;
	height: 306px;
	text-indent: -3333px;
}
#container #taglinearea {
	width: 325px;
	float: right;
	height: 98px;
}
#container #taglinearea #tagline {
	background: transparent url(../images/Carlos-Allure-Salon.gif) top right no-repeat;
	text-indent: -3333px;
	width: 325px;
	height: 98px;
}
#container #buttonarea {
	width: 325px;
	float: right;
}
#container #buttonarea .button {
	width: 325px;
	height: 55px;
	padding: 4px 0 0 0;
	background: transparent url(../images/Button-Bg.gif) top left no-repeat;
}
#container #buttonarea .button a {
	width: 163px;
	height: 46px;
	display: block;
	margin: 0 auto;
}
#container #buttonarea .button span {
	text-indent: -3333px;
	display: block;
}
#container #buttonarea #button-about-carlos a {
	background: transparent url(../images/Button-About-Carlos.gif) no-repeat top left;
}
#container #buttonarea #button-contact-me a {
	background: transparent url(../images/Button-Contact-Me.gif) no-repeat top left;
}
#container #buttonarea #button-specials a {
	background: transparent url(../images/Button-Specials.gif) no-repeat top left;
}
#container #maincontent #mainphoto {
	float: left;
	width: 366px;
	height: 338px;
}
#container #maincontent #contactdetails {
	float: right;
	width: 484px;
	text-align: center;
	margin: 15px 0 0 0;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
#container #sections {
	border-top: solid black 4px;
}

#container #maincontent #contactdetails h3 {
	font-size: 24pt;
	font-weight: bold;
}
#container #maincontent #contactdetails p {
	font-size: 18pt;
}
#container #sections {
}
#container #sections div {
	float: left;
	width: 250px;
	height: 234px;
	text-align: center;
	margin: 10px 0 0 25px;
}
#container  #sections div p {
	width: 250px;
	height: 234px;
	display: block;
}
#container #sections div p a {
	width: 250px;
	height: 234px;
	display: block;
}
#container #sections div span {
	display: block;
	text-indent: -3333px;
}
#container #sections #services p {
	background: transparent url(../images/Sections-Services.jpg)
}
#container #sections #about p {
	background: transparent url(../images/Sections-About.jpg)
}
#container #sections #gallery p {
	background: transparent url(../images/Sections-Gallery.jpg)
}


#container #footer {
	text-align: center;
	padding: 20px 0 20px 0;
	color: #cccccc;
	font-size: 10pt;
	font-style: italic;
}
#container #footer a, #container #footer a:link, #container #footer a:visited, #container #footer a:active, #container #footer a:hover {
	color: #cccccc;
}


#container  #logosmall {
	width: 260px;
	height: 146px;
	float: left;
}
#container #logosmall #logo {
	background: transparent url(../images/HairLoom-Logo-Small.gif) top left no-repeat;
	width: 260px;
	height: 146px;
	text-indent: -3333px;
}
#container #pagenamearea {
	clear: right;
	float: right;
	width: 325px;
	text-align: center;
	font-size: 22pt;
}
#container #maincontentfull {
	width: 830px;
	margin: 20px 10px 0 10px;
}
#container #maincontentfull h2 {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 22pt;
	margin: 0 0 1em 0;
}
#container #maincontentfull p {
	margin-bottom: 1em;
}
#container #maincontentfull ul {
	margin: 1em 0 1em 3em;
}
#container #nav {
	float: left;
	width: 250px;
	height: 146px;
}
#container #nav ul {
	list-style-type: none;
	margin: 10px 0 0 100px;

}
#container #nav ul li {
	width: 93px;
	height: 25px;
	background: transparent url(../images/Button-Small.gif) no-repeat top left;
	margin: 0 0 5px 0;
	line-height: 25px;
	overflow: hidden;
	text-align: center;
}
#container #nav ul li a {
	width: 93px;
	height: 25px;
	line-height: 25px;
	display: block;
}
#container #nav ul li a:link, #container #nav ul li a:visited {
	color: black;
	text-decoration: none;
}
#container #nav ul li a:hover, #container #nav ul li a:active {
	color: black;
	text-decoration: underline;
}
.photo {
	float: left;
	margin: 4px;
	background: white;
	border: 1px solid black;
}
.photo img {
	width: 250px;
	height: 325px;
	margin: 4px;
}

.widephoto {
	float: left;
	margin: 4px;
	background: white;
	border: 1px solid black;
}
.widephoto img {
	width: 786px;
/*	height: 505px;*/
	margin: 4px;
}

.clear { clear: both; }
.red {
	color: #ff0000;
}