@charset "utf-8";
body {

/************** Make default font, etc changes here this will apply to complete website****************/
    width: 1024px;
	height: auto;
	background-image:url(/images/tgcsides.jpg);
	background-position:top center;
	background-repeat:repeat-x;
	min-width:600px;
	background-color:#ffffff;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */ padding:0;
	font-family: Tahoma, Geneva, sans-serif;
    	color:#442622;
	font-size: 18px;
	line-height:1.6em;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	vertical-align: middle;
	text-align:center;
	clear:both;
}

.main {	/* ~~ this fixed width container surrounds the other divs ~~ */

	background-position:top center;
	width:100%;
	background-repeat:no-repeat	
    overflow: hidden;
}
/********** header **********/
.header {
background-image:url(/images/tgcheaderwithbar.jpg);
	background-position:top center;
	height: 10px;
/***Keeping this height static keeps menu alignment; this needs to change if background photo changes****/
	clear:both;
	width:100%;
}.header_container {

}
/****** logo *****/
.logo {
	margin:0;
	width:auto;
	float:left;
}
/****info_container  holds contact info, etc****/
.contact_info {
	width:auto;
	height: auto;
	float: right;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 35px;
	margin-right: 50px;
  	color:#444444;
	text-decoration:none;
	font-size: 20px;
	font-style:normal;
	font-variant: normal;
	font-weight:400;
	line-height: normal;
	text-align:center;
	vertical-align:middle;
}

/***************MENU ******************/

.menu_container {
/***when we add a menu then we need to add alignment stuff here as well as other nested Divs**29.5 outside lines*  19.5 is inside*/

	}
	
/*************** BODY ****************/
.body {
	width:100%;
	padding: 0;
    	margin-top: 5px;
	margin-bottom: 10px;
	height: auto;
	clear: both; /******** Clear: both; aligns the shading correctly******/
}


.body_container {
  width:960px;

}

.body h1 {

	margin: 0px;
	font-size: 22px;
	font-weight: normal;
	font-style:normal;
	font-variant: normal;
}

.body h2 {

	margin: 0px;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
}
.body h3 {

	margin: 0px;
	font-size: 18px;
	font-weight: bold;
	font-style: normal;
	font-variant: normal;
}
.body h4 {

	margin: 0px;
	font-size: 16px;
	font-weight: bold;
	font-style: normal;
	font-variant: normal;
}
.body h5 {

	margin: 0px;
	font-size: 14px;
	font-weight: bold;
	font-style: normal;
	font-variant: normal;
}
.body h6 {  /****Red Highlights uppercase *****/
	color:#A60000;
	margin:0;
    text-transform:uppercase;
	font-size: 16px;
	font-weight: bold;
}


.body img {
    overflow: hidden;
	
}
.body img.floated {
	float:left;
	padding:0;
	margin:10px 15px;
	}
.body p {

	margin: 0px;
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
}

.body a {
    text-decoration:none;
	color:#442622; 
	line-height:1.8em; 
	font: normal 14px Tahoma, Geneva, sans-serif;
}

.body ul {
	list-style:none;
	list-style-type:square;}
	line-height:1.8em;
}
.body li { padding:0; margin:0; } /**Llists***/
.body li a {
	color:#333333;
	text-decoration:none;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
.body li a:hover { color:#111111; font-weight: bold;
}



.main_photo {
	clear: both; /*************** Clear: both; aligns the footer shading correctly***************/
     	overflow: hidden;
	vertical-align:middle;
}


.main_photo img {
	width: auto;
	height: auto;
	margin-left: auto;
   	margin-right: auto;
	display:block;
	padding-top: 2px;
	padding-bottom: 5px;
		}
		
.body_middle {
	width: auto;
	height: auto;
	min-height: 180px;

		display:block;
}

.body_left {
	width: 500px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	margin-top:5px;
	margin-left: 60px;
    margin-right: auto;
	clear: both;
    overflow: hidden;
	text-align:left;

}

.body_right {
	width: 400px;
	height: inherit;
	margin-top:-30px;
	margin-left: auto;
	margin-right: auto;
	float: right;
	display:block;
	padding-top: 0px;
	padding-bottom: 0px
	clear: both; /*************** Clear: both; aligns the footer shading correctly***************/
    	overflow: hidden;
	vertical-align:middle;
	}

.body_right img {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display:block;
}

/*************footer*******************************/

.footer {	
	height: 35px;
	border-top:ridge;
	border-color: #442622;
	width: auto;
	clear: both; /******** Clear: both; aligns the shading correctly******/
    font-size: 10px;
	padding 0px:
    vertical-align: middle;	
}

.footer_container {	
	padding-left: 50px;
	padding-right: 50px;

	}	


.footer_left {
	float: left;
    	text-align:left;
    	vertical-align: middle;
}

.footer_right {
    width: auto;
    height: auto;
 	float:right;
    text-align:right;
    vertical-align: middle;
}

.footer p {
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
	
.footer a {
	font:bold 10px;
	color:#a2a2a2;
	text-decoration:none;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
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: 15px; /* 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:link {
	color: #42413C;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
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;
}

.container {
	position: relative;
	width: auto;
        height: auto;

}
.container div {
	height: 300px;
}

.column-left {
	width: 33%;
	left: 0;
	background: #FFFFFF;
	position: absolute;
}
.column-center {
	width: 34%;
	background: #FFFFFF;
	margin-left: 33%;
	position: absolute;
}
.column-right {
	width: 33%;
	right: 0;
	position: absolute;
	background: #FFFFFF;
}