/* TODO: Need to move page navbar css to separate file and include (php framework) on a per page basis. */

body {
	background: #ffffff url(http://www.approachengineering.com/gfx/navbar/header-bkgnd.jpg) repeat-x;
	color: #202020;
	font: small/130% "Lucida Grande", Arial, Helvetica, sans-serif;
	text-align: left;
}

h1,h2,h3,h4 {
  padding-top: 10px;
	padding-left: 25px;
	padding-bottom: 20px;
}

img { border: 0px; }

* { margin: 0; padding: 0; }

fieldset { border: 0; }

form {
	font-size: small;
	padding-left: 25px;
	text-align: left;
}

textarea, select, input { margin: 0 0 5px; }

/* Classes and form elements
============================ */

.address       { padding-top: 260px; }
.bold          { font-weight: bold; }
.center        { align: center; }
.clearLeft     { clear: left; }
.clearRight    { clear: right; }
.clearBoth     { clear: both; }
.clearNone     { clear: none; }
.contactstitle { color: #82B490; font-size: 11pt; font-weight: bold; }
.disclaimer    { color: #999999; font-size: 9pt; font-weight: normal;}
.data          { color: #606060; }
.imgLeft       { float: left; }
.imgRight      { float: right; padding: 0px 0px 5px 16px; }
.next-p        { padding-top: 18px; /* border: 1px solid #FF0000; */ }
.spacer-p      { padding-top: 8px; /* border: 1px solid #FF0000; */ }
.last-p        { background: transparent url(http://www.approachengineering.com/gfx/navbar/contentbg-bottom.jpg) bottom left no-repeat;
	               padding-top: 12px; }
.left          { align: left; }
.m25l          { margin-left: 25px; }
.listtitle     { color: #020202; font-size: 10pt; font-weight: bold; }
.right         { align: right; }
.title         { color: #006699; font-size: 12pt; padding: 2px 0px 8px 0px; }
.warning       { color: #669966; }

/* Website Specific Typography
==================== */
#contentwrapper { clear: both; /* border: 1px solid #FF0000; */ }

#contentbox {
	/* border: 1px solid #FF0000; */
	background: #fff url(http://www.approachengineering.com/gfx/navbar/contentbg.jpg) top left repeat-y;
	float: left;
	width: 600px;
}

#contentbox p {
	/* padding-left: 25px; color: #3A3A3A; */
	margin-left: 25px; color: #3A3A3A;
}

#header {
	float: left;
	width: 800px;
	padding: 0px 0px 20px 0px;
}
/*
#topborder {
  position: absolute;
	left: 0px;
	top: 0px;
	width: 25px;
	height: 50px;
	background: #ffffff;
}
*/

#leftColumn { float: left; width: 200px; /* border: 1px solid #FF0000; */ }

#photoTable { margin-left: 25px; }

/* Featured Items [index]
========================= */

#indexFeaturedItems {
  position: relative;
	float: left;
	width: 580px;
	padding-top: 0px;
	padding-left: 25px;
}

.featured {
	float: left;
	width: 580px;
	padding-top: 0px;
	padding-left: 25px;
}

#featuredItems {
  position: absolute;
	top: 0px;
	left: 0px;
	padding-top: 0px;
	padding-left: 25px;
}

.mask {
  float: left;
	position: relative;
	z-index: 100;
}


/* Main Navigation
================== */
#navcontainer { float: left; width: 200px; }

/* start unordered lists
======================== */

#navcontainer ul {
	font-size: 9pt;
	font-weight: bold;
	color: #505050;
	list-style-type: none;
	margin-left: 25px;
}

#navcontainer li { /* controls nav line color */
  border-left: 1px solid #AEACA3; /* #9a9890 dk grey */;
	border-bottom: 1px solid #AEACA3;
}

/* graphics have not been uploaded to ./dev/gfx/navbar yet, try straight css */
#navcontainer li#active {
  background: #FFC57A url(http://www.approachengineering.com/gfx/navbar/navactivebg.gif) repeat-x;
	/* #FFA734,#FF9001,#7c8ba0 */
	color: #020202; /* #F0F0F0 */
	padding: 4px 0 4px 8px;
}

#navcontainer li#sectionHeader {
	/* background: #F0F0F0; */
	background: #F0F0F0 url(http://www.approachengineering.com/gfx/navbar/sectionHeader-bkgnd.jpg) repeat-y;
	padding: 4px 0 4px 8px;
}

/* was 707070, */
#navcontainer a {
	color: #909090;
	display: block;
	padding: 4px 0 4px 8px;
	text-decoration: none;
	width: 160px;
}

#navcontainer a:visited {
	color: #678E72;  /* #82B490,#606060 */
	text-decoration: none;
}

/* med steel blue 7c8ba0, darkest steel blue in header 6a7c92, darker 576678 */
#navcontainer a:hover {
	background: url(http://www.approachengineering.com/gfx/navbar/navrollbg.gif) repeat-x;
	color: #495564;
}

/* Horizontal Product Navbar - color coded to product color key
============================

/* AP102 Cobra #ABB482, AP100 Apache #82B490, AP103 Apache #82B0B4, AP101 Cobra #8298B4, AP200 Adapter #82B490 */
/* padding: 3px 0px 4px 0px; -> IE, Mozilla needs padding: 5px 0xp 4px 0px; implement a browser sniffer to override the differences. */
#horizNavAP100,#horizNavAP105 {
	background-color: #82B490; color: #909090;
	margin-left: 25px; padding: 3px 0px 4px 0px; width: 580px; border-top: 1px solid #505050;
	border-bottom: 1px solid #505050; font-family: arial, helvetica, geneva, sans-serif;
}
#horizNavAP101 {
  background-color: #8298B4; color: #909090;
	margin-left: 25px; padding: 3px 0px 4px 0px; width: 580px; border-top: 1px solid #505050;
	border-bottom: 1px solid #505050; font-family: arial, helvetica, geneva, sans-serif;
}
#horizNavAP102 {
  background-color: #ABB482; color: #909090;
	margin-left: 25px; padding: 3px 0px 4px 0px; width: 580px; border-top: 1px solid #505050;
	border-bottom: 1px solid #505050; font-family: arial, helvetica, geneva, sans-serif;
}
#horizNavAP103 {
  background-color: #82B0B4; color: #909090;
	margin-left: 25px; padding: 3px 0px 4px 0px; width: 580px; border-top: 1px solid #505050;
	border-bottom: 1px solid #505050; font-family: arial, helvetica, geneva, sans-serif;
}
#horizNavAP104 {
  background-color: #B4AE82; color: #909090;
	margin-left: 25px; padding: 3px 0px 4px 0px; width: 580px; border-top: 1px solid #505050;
	border-bottom: 1px solid #505050; font-family: arial, helvetica, geneva, sans-serif;
}
#horizNavAP200, #horizNavAP201 {
  background-color: #82B490; color: #909090;
	margin-left: 25px; padding: 3px 0px 4px 0px; width: 580px; border-top: 1px solid #505050;
	border-bottom: 1px solid #505050; font-family: arial, helvetica, geneva, sans-serif;
}

  .AP100, .AP105 { background-color: #82B490; color: #577578; }
  .AP101 { background-color: #8298B4; color: #577578; }
  .AP102 { background-color: #ABB482; color: #577578; }
  .AP103 { background-color: #82B0B4; color: #577578; }
  .AP104 { background-color: #B4AE82; color: #577578; }
  .AP200, .AP201 { background-color: #82B490; color: #577578; }

  .horizNavOff   { padding: 4px 20px 4px 20px; margin: 0em; border-left: 1px solid #505050; }

  .horizNavOn    { padding: 4px 20px 4px 20px; margin: 0em; border-left: 1px solid #505050;  /* padding: 3px 20px */
                   background-color: #EFEFEF; }

  .horizNavFillerOff { padding: 4px 20px 4px 20px; border-left: 1px solid #505050; }

  /* Horizontal navbar hyperlinks
	=============================== */
  #horizNavAP100 a:link,
  #horizNavAP101 a:link,
  #horizNavAP102 a:link,
  #horizNavAP103 a:link,
  #horizNavAP104 a:link,
  #horizNavAP105 a:link,
  #horizNavAP200 a:link,
  #horizNavAP201 a:link { color: #EFEFEF; font-weight: bold; text-decoration: none; }

  #horizNavAP100 a:active,
  #horizNavAP101 a:active,
  #horizNavAP102 a:active,
  #horizNavAP103 a:active,
  #horizNavAP104 a:active,
  #horizNavAP105 a:active,
  #horizNavAP200 a:active,
  #horizNavAP201 a:active  { color: #EFEFEF; font-weight: bold; text-decoration: none; }

  #horizNavAP100 a:visited,
  #horizNavAP101 a:visited,
  #horizNavAP102 a:visited,
  #horizNavAP103 a:visited,
  #horizNavAP104 a:visited,
  #horizNavAP105 a:visited,
  #horizNavAP200 a:visited,
  #horizNavAP201 a:visited { color: #EFEFEF; font-weight: bold; text-decoration: none; }

  #horizNavAP100 a:hover,
  #horizNavAP101 a:hover,
  #horizNavAP102 a:hover,
  #horizNavAP103 a:hover,
  #horizNavAP104 a:hover,
  #horizNavAP105 a:hover,
  #horizNavAP200 a:hover,
  #horizNavAP201 a:hover { color: #EFEFEF; font-weight: bold; text-decoration: underline; }

/* Main Events
============== */
#eventscontainer { float: left; width: 200px; padding-top: 10px;}

#eventscontainer ul {
	font-size: 9pt;
	font-weight: bold;
	color: #505050;
	list-style-type: none;
	margin-left: 25px;
	border-left: 1px solid #9a9890;
}

#eventscontainer li#active {
  background: #909090;
	color: #F0F0F0;
	padding: 4px 0 4px 8px;
}

#eventscontainer li#sectionHeader {
	/* background: #F0F0F0; */
	background: #F0F0F0 url(http://www.approachengineering.com/gfx/navbar/sectionHeader-bkgnd.jpg) repeat-y;
	padding: 4px 0 4px 8px;
	border-top: 1px solid #9a9890;
}

#eventscontainer li#event {
  border-bottom: 1px solid #9a9890;
	color: #909090;
	display: block;
	padding: 4px 0 4px 8px;
}

/* Product Feature List
======================= */
#featurelist { float: left; width: 100%; padding-top: 10px; /* border: 1px solid #9a9890; */ }

#featurelist ul {
	font-size: 9pt;
	font-weight: normal;
	color: #3A3A3A;
	list-style-type: disc;
	margin-left: 25px;
	padding-left: 25px;
}

.endlist { list-style-type: none; }

/* start ordered lists
====================== */
#faqlistquestions { float: left; width: 100%; padding-top: 10px; /* border: 1px solid #9a9890; */ }

#faqlistquestions ol {
	font-size: 9pt;
	font-weight: normal;
	color: #1B1464; /* #557C98, #1B1464 */
	list-style-type: decimal;
	margin-left: 25px;
	padding-left: 25px;
}

.faqanswer { color: #999999; /* #999999, #576678, #FFC57A */ }
/* end ordered lists */


#manuals { float: left; width: 100%; padding-top: 10px; /* border: 1px solid #9a9890; */ }

#manuals ul { list-style-type: none; }

#manuals ul a {
	font-size: 10pt;
	font-weight: normal;
	color: #3A3A3A;
	list-style-type: none;
	text-decoration: none;
	margin-left: 25px;
	padding-left: 25px;
}

#manuals ul a:hover {
  text-decoration: underline;
}

#manuals li { vertical-align: middle; padding-bottom: 6px; }
.imgManual  { vertical-align: middle; }

/* image browser application
============================ */

#imgBrowser {
  background-color: #FFFFFF;
  font-family: arial, helvetica, geneva, sans-serif;
  font-size: 10pt;
  color: #020202;
}

  #imgBrowser td .big {
    font-family: times, courier, serif;
    font-size: 9pt;
	}

  #imgBrowser td .index { font-size: 10pt; text-align: center; }

	#imgBrowser a:link    { color: #0069B3; text-decoration: none; }
	#imgBrowser a:visited { color: #BB66BF; text-decoration: none; }
	#imgBrowser a:hover   { color: #0069B3; text-decoration: none; }
	#imgBrowser a:active  { color: #0069B3; text-decoration: underline; }

	#imgBrowser .noLink { color: #DFDFDF; }

/* Contact Form Confirmation Page
================================= */

#confirmContent {
  position: relative;
	float: left;
	padding-top: 0px;
	padding-left: 25px;
}

#confirmTitle {
	font-weight: bold;
	/* border: 1px solid #ff0000; */
}

#confirmData  {
  position: absolute;
	left: 125px;
	top: 0px;
	width: 350px;
	/* border: 1px solid #ff0000; */
}

/* Footer
========= */
#footer {
	background: #76879b url(http://www.approachengineering.com/gfx/navbar/footer-bkgnd.jpg) repeat-x;
	border-bottom: 3px solid #000;
	clear: both;
	color:#eaeaea;
	font-size: 85%;
	font-weight: bold;
	float: left;
	padding: 20px 0 15px 0;
	margin-top: 35px;
	width: 100%;
	height: 8%;
}

#contactinfo {
	float: left;
	width: 225px;
}
#footernav {
	float: left;
	width: 600px;
}

.div {
  color: #bebebe;
}

/* Footer Text Links
==================== */
#footer p { padding-left: 25px; }
#footer a, #footer a:visited { color: #b8d3f2; text-decoration: none; }
#footer a:hover { color: #fff; text-decoration: underline; }
#footer a:active { color: #b8d3f2; text-decoration: none; }