/* CSS Document */

/* this is the stylesheet.css for Bates Paving & Sealing, Inc. */

@import url(normalize.css);


html {
	/*background-color: #666;*/
	background-image: url(photos/background.jpg);
}

body {
	width: 960px;
	margin: 4px auto 4px auto;
	font-family: Verdana, "Trebuchet MS", Tahoma, Arial, sans-serif;
	font-size: small;
	color: #000;
	background: #fff;
}
/*-----------------------------------------------*/
/* SBMH Simplified Box Model Hack, Edwardson Tan */
/* www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html */
* html body {
	font-size: x-small; /* for IE5/win */
	f\ont-size: small; /* for other IE versions */
}
/* for Opera browser */
html>body { 
	font-size: small;
}
/*------------------------------------------------*/

.body12 {  font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 12px}
.body12-bold {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px, font-weight: bold;}

h1 {
	font-family: Georgia, "Palatino Linotype", Garamond, OldCentury, "Times New Roman", serif;
	font-size: 160%;
	letter-spacing: 1px;
	color: #a58e63;
	margin: .4em 0 .6em 0;
	border-bottom: 1px solid #cfc2a1; 
}
h2 {
	font-family: Verdana, "Trebuchet MS", Tahoma, Arial, sans-serif;
	font-size: 130%;
	font-weight: normal;
	padding: 6px 12px;
}
h2.red	{
	color: #a5040b;
}
h2.black	{
	color: #000;
}

h3	{
	font-family: Georgia, "Palatino Linotype", Garamond, OldCentury, "Times New Roman", serif;
	font-size: 120%;
	margin-bottom: -18px;
	color: #a5040b;
}
h4	{
	font-family: Georgia, "Palatino Linotype", Garamond, OldCentury, "Times New Roman", serif;
	font-size: 14px;
	font-weight: bold;
	/*margin-bottom: -18px;*/
	color: #000000;
}

h5 {
	font-family: Georgia, "Palatino Linotype", Garamond, OldCentury, "Times New Roman", serif;
	font-size: 160%;
	letter-spacing: 1px;
	color: #131393;
	margin: .4em 0 .6em 0;
	border-bottom: 1px solid #cfc2a1; 
}

.clearBoth { clear: both; }

/* 
---------------------- link styles ---------------------------------*/
a { 
	color: #039; 
	text-decoration: underline;
}
a:visited { 
	color: #909; 
	text-decoration: underline;
}
a:hover { 	
	color: #a5040b; 
	text-decoration: underline;
}
a:active { 
	color: #039; 
	text-decoration: underline;
}								

/*
----------------------- banner --------------------------------------*/
#banner { 
	width: 100%;
	
}

/* 
---------------------- contentWrapper ---------------------------------*/
#contentWrapper {
	position: static;
	width: 540px;
	margin: -3px auto 0 auto; /* fix top alignment */
	padding: 0;
		
	border-right: 276px solid #ececec; /* width and color of rtSidebar */
	border-left: 144px solid #a58e63; /* width and color of leftContent */
	border-bottom: 1px solid #ececec; /* end of content; start of #footer */
	float: left;
	background: #fff;
}

#galleryWrapper {
	position: static;
	width: 796px;
	margin: -3px auto 0 auto; /* fix top alignment */
	padding: 0;
		
	border-right: 0px solid #ececec; /* width and color of right border */
	border-left: 144px solid #a58e63; /* width and color of leftContent */
	border-bottom: 1px solid #ececec; /* end of content; start of #footer */
	float: left;
	background: #fff;
}

/* A List Apart code sample 
   http://www.alistapart.com/articles/multicolumnlayouts*/
   
/*The HTML:
<div id="container">
  <div id="center">CENTER<br />COLUMN CENTER</div>

  <div id="leftRail">LEFT RAIL</div>
  <div id="rightRail">RIGHT RAIL</div>
</div>The CSS:
#container{
  background-color:#0ff;
  float:left;
  width:500px;
  border-left:150px solid #0f0; » 
  /* The width and color of the left rail */
 /* border-right:200px solid #f00; » 
  /* The width and color of the right rail */
/*}
#leftRail{
  float:left;
  width:150px;
  margin-left:-150px;
  position:relative;
}
#center{
  float:left;
  width:500px;
  margin-right:-500px;
}
#rightRail{
  float:right;
  width:200px;
  margin-right:-200px;
  position:relative;
}
/* 

---------------------- mainContent ----------------------------------*/
#mainContent {
	float: left;
	width: 516px;
	margin-right: -516px;
	padding: 12px 12px 30px 12px;
}

#mainContent ul#services {
	float: left;
	width: 200px;
	margin: 12px 12px 0 60px;
	padding-bottom: 12px;
	list-style-image: url(img/arrowYellow2.gif);
	list-style-position: inside;
	font-size: 115%;
	line-height: 1.6em; 
}
#mainContent ul#about {
	float: left;
	width: 360px;
	margin: 12px 12px 0 60px;
	padding-bottom: 12px;
	list-style-image: url(img/arrowYellow2.gif);
	list-style-position: inside;
	font-size: 115%;
	line-height: 1.6em; 
}

#mainContent ul#photo {
	float: left;
	width: 360px;
	margin: 12px 12px 0 60px;
	padding-bottom: 12px;
	list-style-image: url(img/arrowYellow2.gif);
	list-style-position: inside;
	font-size: 115%;
	line-height: 1.6em; 
}

#mainContent ul#clients {
	float: left;
	width: 360px;
	margin: 12px 12px 0 60px;
	padding-bottom: 12px;
	list-style-image: url(img/arrowYellow2.gif);
	list-style-position: inside;
	font-size: 115%;
	line-height: 1.6em; 
}
#mainContent ul#target {
	float: left;
	width: 360px;
	margin: 12px 12px 0 60px;
	padding-bottom: 12px;
	list-style-image: url(img/arrowYellow2.gif);
	list-style-position: inside;
	font-size: 115%;
	line-height: 1.6em; 
}
#mainContent ul#affiliations {
	float: left;
	width: 360px;
	margin: 12px 12px 0 60px;
	padding-bottom: 12px;
	list-style-image: url(img/arrowYellow2.gif);
	list-style-position: inside;
	font-size: 115%;
	line-height: 1.6em; 
}

#mainContent p {
	line-height: 1.4em;
	padding-left: 12px;
	
}
#mainContent img.shiftRight {
	float: right; 
	border: 1px solid #a5040b;
	padding: 0;
	margin: 20px 30px 20px 20px; 
}
#mainContent img.shiftLeft {
	float: left; 
	border: 1px solid #a5040b;
	padding: 0;
	margin: 20px 20px 20px 30px; 
}
#mainContent img.shiftCenter {
	float: center; 
	border: 1px solid #a5040b;
	padding: 0;
	margin: 20px 20px 20px 30px; 
}

a.mainContent:link {color: #000000}
a.mainContent:visited {color: #003366}
a.mainContent ul#services:hover {color: #003366}

}

/*#mainContent a:link, a:visited, a:focus, a:active {
	color: #000; 
	text-decoration: underline;
	/*display: block;
	padding: 0 8px 0 0;
}
#mainContent a:hover { 	
	color: #003366; 
	text-decoration: underline;
}

/*
--------------------galleryContent ------------------------------------
picture gallery designed without rtSidebar element; only left border for
navigation elements; width div's for the right and left columns for images*/
#galleryContent {
	float: left;
	width: 770px;
	padding: 12px 12px 30px 12px;
}


/* 
--------------------- leftContent -------------------------------------- */
#leftContent { 
	float: left;
	width: 144px;
	margin-left: -144px;
	padding: 0 0 30px 0;  
}
#leftContent ul {
	width: 124px;
	margin: 12px 10px 30px 10px;
	padding: 0;
	list-style: none;
	color: #000;
	line-height: 1.5em;	
	
}
#leftContent ul li { 
	text-align: right; 
	padding: 4px 0;
}

/* requires the body id tag and list-item id tag to automatically designate the current page for the viewer; 
if you add more pages, be sure to add the id tags for each new page and add them to this CSS list below, comma separated */
#leftContent a:hover, body#home #linkHome a, body#about #linkAbout a, body#services #linkServices a, 
body#gallery #linkGallery a, body#contact #linkContact a, body#definitions #linkDefinitions a, body#photo #linkPhoto a{
	color: #f7da39;
	background: #a58e63;
}

#leftContent ul a:link, a:visited, a:focus, a:active {
	text-decoration: none;
	display: block;
	color: #000;
	padding: 0 8px 0 0; 
}
#leftContent a:hover { 	
	background: #f7da39; 
	color: #a58e63;
}
#leftContent p {
	margin: 20px 10px;
	font-size: 85%;
	line-height: 1em;
}
#leftContent p.textJustified {
	text-align: justify;
}		
#leftContent p.textLeft {
	text-align: left;
	
}	
#leftContent p.textRight {
	text-align: right;
}	
/* 
----------------------------- rightSidebar ----------------------------- */
#rtSidebar {
	float: right;
	width: 256px;
	margin: 10px -266px 10px 10px;
	padding: 0 0 30px 0;	 
}

#rtSidebar p {
	margin: 20px 10px;
	font-size: 85%;
	line-height: 1.1em;
}
#rtSidebar p.textJustified {
	text-align: justify;
}		
#rtSidebar p.textLeft {
	text-align: left;
	font-style: italic;
}	
#rtSidebar p.textRight {
	text-align: right;
}

#rtSidebar p.img img { 
	text-align: center;
	border: 2px solid #f7da39; 
	
}

#rtSidebar p#email a { 
	font-size: small;
	padding: 4px; 
}
#rtSidebar p#email a, #rtSidebar p#email a:visited, #rtSidebar p#email a:active {
	color: #039; 
	text-decoration: underline;
}
#rtSidebar p#email a:hover {
	color: #a5040b;
	text-decoration: underline;
}
	

/* 
------------------------- footer  -------------------------------------*/
#footer {
	clear: both;
	/*width: 540px;*/
	width: 615px;
	margin: 0 276px 4px 144px;
	
}
#footer ul.nav_line {
	float: left; 	/* using the float to stretch the navigation horizontally*/
	margin: 4px 12px;
	list-style: none;
	font-size: 80%;

	
}
#footer ul.nav_line li {
	float: left; 	/* using the float to stretch the navigation horizontally*/
	display: inline;
	padding: 4px 12px 4px 0;
	
}
#footer ul.nav_line li a { 
	color: #039;
	text-decoration: none; 
	
}

#footer ul.nav_line li a:hover { 
	color: #a5040b; 
	text-decoration: underline; 
	
} 

/* requires the body id tag and list-item id tag to automatically designate the current page for the viewer; 
if you add more pages, be sure to add the id tags for each new page and add them to this CSS list below, comma separated */
#footer a:hover, body#home #nav_home a, body#about #nav_about a, body#services #nav_services a, 
body#gallery #nav_gallery a, body#contact #nav_contact a, body#definitions #nav_definitions a, body#photo #nav_photo a  {
	color: #8c8a73;
	text-decoration: none;
}

/* 
------------------------ copyright  ------------------------------------*/
#copyright {
	clear: both;
	width: 100%;
	align: left;
	color: #8c8a73;
	margin: 4px 12px 12px 12px;
	font-size: 80%;
}

/* 
--------------------------photo gallery --------------------------------*/

#bates {
	float: left;
	width: 730px;
	padding: 10px 20px;
}
#bates dl {
	float: left;
	width: 690px;
	margin: 10px 20px;
	padding: 0;
	display: inline; /* fixes IE/Win double margin bug */
}
#bates dt {
	float: right;
	width: 690px;
	margin: 0;
	padding: 0;
	font-size: 110%;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #a5040b;
}

#bates dd {
	margin: 0;
	padding: 0;
	font-size: 85%;
	line-height: 1em;
	color: #039;
}
#bates dd.img img {
	float: left;
	margin: 0 8px 0 0;
	padding: 4px;
	border: 2px solid #f7da39;
}

#bates .alt dt {
	float: left;
}
#bates .alt dd.img img {
	float: right;
	margin: 0 0 0 8px;
}

.body9-italic { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-style: italic }
.list A:link {text-decoration: underline; color: #131393; }
.list A:visited {text-decoration: underline; color: #131393;}
.list A:active {text-decoration: underline; color: #131393;}
.list A:hover {text-decoration: underline; color: #131393;}