@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: url('images/Background.jpg') repeat;
	margin: 0;
	padding: 0;
	color: #000;
}

td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
/* ~~ Element/tag selectors ~~ */

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 15px;
	padding-left: 35px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:visited {
	text-decoration: none;
}
a:link {
	text-decoration: none;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
	width: 950px;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

.wrapper { 
	margin: 0 auto;
	padding: 0 auto;
	background: #FFF;
	width: 950px;
}

.header {
	float: left;
	margin: 0px auto;
	background: url('images/wrapper-bg.jpg') repeat-y;
	width:100% ;
}
.headerimage {
	float: right;	
}
.top-frame {
	float:left;
	margin:0 auto;
	padding:10px 0 0;
	width:100%;
	background:url('images/top-frame.jpg') top center no-repeat;
	}	

.bottom-frame {
	float:left;
	margin:0 0 0px;
	padding:0 0 10px;
	width:100%;
	background:url('images/bottom-frame.jpg') bottom center no-repeat;
	}

.content {
	font-family: Georgia, "Times New Roman", Times, serif;
	float: left;
	padding: 15px auto 15px 300px;
	margin: 0px auto;
	background: url('images/wrapper-bg.jpg') repeat-y;
	width: 100%;
}

/* ~~ The footer ~~ */
.footer {
	float: left;
	margin: 0px auto;
	background: url('images/wrapper-bg.jpg') repeat-y;
	width:100% ;
}
.title {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:34px;
	padding:10px;
	font-weight: bold;
	font-variant:small-caps;
	color: #88aa3f;
}
.SubTitle {
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:0 0 18px 0;
	font-size: 16px;
	padding: 0 0 0 38px;
	font-style:italic;	
	color:#457a8b;
}
.EpochTitle {
	font-family: "Lucida Console", Monaco, monospace;
	margin:0 0 18px 0;
	font-size: 12px;
	padding: 0 0 0 52px;
	font-style:italic;	
	color:#8b0d04;
}
.FootTitle {
	font-family:Georgia, "Times New Roman", Times, serif;
	margin: 5px;
	text-align:center;
	font-size: 16px;
	width: 100%;
	font-style:italic;	
	color:#457a8b;
}
.break {
	margin: 0px auto;	
	padding: 0px auto;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
h1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;	
}
h1.center {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;
	text-align:center;
}
.image1 {
	width:640px;
	height:428px;
	float: left;
	padding-left: 50px;
	margin:0 0 10px;	
}
.MainTable {
	width: 100%;	
	padding: 5px 20px 5px 20px;
}
.TableImage1 {
	background: url(images/custom%20kitchen%20woodwork.png) no-repeat;
	width: 250px;
	height: 250px;
}
.TableImage2 {
	background: url(images/custom%20kitchen%20detailed%20woodwork.png) no-repeat;
	width: 250px;
	height: 250px;
}
.TableImage3 {
	background: url(images/kitchen%20woodwork%20closeup.png) no-repeat;
	width: 250px;
	height: 250px;
}
.MenuL {
	float: left;
	background: url(images/left_arrow.png) no-repeat;
	width: 120px;
	height: 30px;
}
.MenuM {
	float: left;
	background: url(images/middle.png) no-repeat;
	width: 120px;
	height: 30px;
}
.MenuMLong {
	float: left;
	background: url(images/middle1.png) no-repeat;
	width: 160px;
	height: 30px;
}
.MenuR {
	float: left;
	background: url(images/right_arrow.png) no-repeat;
	width: 135px;
	height: 30px;
}
.MenuTextL {
	float: left;
	padding: 0px 0px 0px 35px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight: bolder;
	font-size:22px;
	color: #000;
}
.MenuTextM {
	float: left;
	padding: 0px 0px 0px 15px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight: bolder;
	font-size:22px;
	color: #000;
}
.MenuTextR {
	float: left;
	padding: 0px 0px 0px 10px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight: bolder;
	font-size:22px;
	color: #000;
}
.micro {
	font-size: 10px;	
}
.gallery {
	border-width: 2px;
	border-spacing: 2px;
	border-color: gray;
	padding: 5px;	
}