@charset "UTF-8";
body {
	font-family: Century Gothic, arial, sans-serif; font-size: .9em; font-weight: bold;
	background: #AFB5B5;
	margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0px;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #B8DFE2;
}

#mainContent {
	top: 20px;
	background-image: url(images/footer.jpg);
	margin: 0px;
	padding: 120px 0px 100px 0px;
	width: 836px;
	background-repeat: no-repeat;
	background-color: #614c32;
	background-position: 50% 100%;
	height: 100%;
}

h1 {
	font-style: bold;
	font-size: 18px;
	color: #674F2F;
}

#container {
	width: 836px;
	text-align: left;
	position: absolute;
	margin-left: -418px;
	left: 50%;
	top:0px;
}


#header {
	position: absolute;
	height: 143px;
	width: 836px;
	margin: 0px;
	padding: 0px;
	background-image: url(images/header.gif);
}


#index_header {
	position: absolute;
	height: 702px;
	width: 836px;
	margin: 0px;
	padding: 0px;
	background-image: url(images/index_image.jpg);
}

#menu {
	position:absolute;
	left: 570px;
	top: 35px;
}

ul#nav { background:url(images/navMenu.gif) }
ul#nav li { float:left; list-style-type:none }
ul#nav li a { height:32px; display:block; position:absolute; top:0; text-indent:-9999px; outline:none}

li#about a, li#work a, li#contact a { background:url(images/navMenu.gif) }

/*  
Measurements for the nav image replacement:

	The distance from the top to the...

	initial state = 0px
	rollover state = 32px
	selected state = 64px

	The distance from the far-left to the...

	about button = 0
	work button = 74px
	contact button = 142px

	The width of the...

	about button = 74
	work button = 68px
	contact button = 88px
*/

li#about a { background-position:0 0; width:74px; left:0; text-decoration: none;;}
li#about a:hover { background-position:0 -32px; text-decoration: none; }
body#pageAbout li#about a { background-position:0 -64px; text-decoration: none; }


li#work a { background-position:-74px 0; width:68px; left:74px; text-decoration: none; }
li#work a:hover { background-position:-74px -32px; text-decoration: none; }
body#pageWork li#work a { background-position:-74px -64px; text-decoration: none; }

li#contact a { background-position:-142px 0; width:88px; left:142px;  text-decoration: none;}
li#contact a:hover { background-position:-142px -32px;  text-decoration: none;}
body#pageContact li#contact a { background-position:-142px -64px;  text-decoration: none;}

#aboutImg {
	margin-bottom: 30px;
}

#video16by9 {
	width: 640px !important;
	height: 359px !important;
	text-align: justify;
	padding-right: 0px; /* the gap on the right edge of the image (not content padding) */
	margin: 30px auto; /* use to position the box */ 
}

#video4by3 {
	width: 640px !important;
	height: 456px !important;
	text-align: justify;
	padding-right: 0px; /* the gap on the right edge of the image (not content padding) */
	margin: 30px auto; /* use to position the box */ 
}

.firstcontainingbox{
	padding-top:30px;
	margin-left: 95px;
	margin-bottom: 20px;
	width: 650px;
}	

.containingbox{
	margin-left: 95px;
	margin-bottom: 20px;
	width: 650px;
}
		
#hist
{
	background: url('images/history.gif') no-repeat top right;
	float: left;
	width: 75px;
	height: 65px;
	margin-right: 15px;
}
	
#goals
{
	background: url('images/goals.gif') no-repeat top right;
	float: left;
	width: 75px;
	height: 65px;
	margin-right: 15px;
}

#servs
{
	background: url('images/services.gif') no-repeat top right;
	float: left;
	width: 75px;
	height: 50px;
	margin-right: 15px;
}

#title
{
	background: url('images/title.gif') no-repeat top right;
	float: left;
	width: 75px;
	height: 16px;
	margin-right: 15px;
}

#client
{
	background: url('images/client.gif') no-repeat top right;
	float: left;
	width: 75px;
	height: 16px;
	margin-right: 15px;
}

#desc
{
	background: url('images/desc.gif') no-repeat top right;
	float: left;
	width: 75px;
	height: 115px;
	margin-right: 15px;
}

#office
{
	background: url('images/office.gif') no-repeat top right;
	float: left;
	width: 75px;
	height: 130px;
	margin-right: 15px;
}

#rep
{
	background: url('images/agent.gif') no-repeat top right;
	float: left;
	width: 75px;
	height: 145px;
	margin-right: 15px;
}

/*.email{
	font-style: italic;
	font-weight: normal;
}*/


#workstripe
{
	padding-top:100px;
	margin-left:28px;
	background: url('images/workStripe.gif') no-repeat;
	width: 780px;
}

#worklinks
{	
	margin-left:70px;
	width:680px;
}

.piece
{
	width:190px;
	border:none;
	float:left;
	margin-right: 35px;
	margin-bottom: 35px;
	text-align:center;
}

.piece a:link{text-decoration: none; color:#B8DFE2;}
.piece a:visited{text-decoration: none; color:#B8DFE2;}
.piece a:active{text-decoration: none; color:#B8DFE2;}
.piece a:hover{text-decoration: none; color:#FFFFFF;}

.email a:link{text-decoration: none; color:#FFFFFF; font-style: italic; font-weight: normal;}
.email a:visited{text-decoration: none; color:#FFFFFF; font-style: italic; font-weight: normal;}
.email a:active{text-decoration: none; color:#FFFFFF; font-style: italic; font-weight: normal;}
.email a:hover{text-decoration: none; color:#B8DFE2; font-style: italic; font-weight: normal;}

a:link{text-decoration: none; color:#FFFFFF;}
a:visited{text-decoration: none; color:#FFFFFF;}
a:active{text-decoration: none; color:#FFFFFF; }
a:hover{text-decoration: none; color:#B8DFE2;}

.piece img
{
	border:none;
	margin-bottom: 5px;
}

.clearboth{
	clear:both;
}