.clear {
	clear: both;
}
.template {
	display: none;
}
/* body is 800px + 1px border all around.
   gutters are 20px everywhere
   "hero" images are 800x230, except 800x265 on home page
*/
body {
	margin: 20px auto;
	width: 832px; /* 802 + 15x2 margin */
}
#header, #content, #footer {
	margin: 0 15px; /* don't let page get narrower than this */
	border: 1px solid white;
	position: relative;
}

#header {
	z-index: 2;
}

#header, #content {
	border-bottom: none;
}
#content, #footer {
	border-top: none;
}
#legal {
	position: relative;
}
/* =============== header, including big image =============== */
#header {
}
/* och logo is abs pos bg image, h1 header for seo */
#header h1 a {
	width: 160px;
	height: 160px;
	background: transparent url(../images/och_logo_160x160_corner.png) no-repeat;
	position: absolute;
	top: -10px;
	left: -30px;
	z-index: 99;
}
#header h1 a span {
	display: none;
}
#header .tag {
	background: transparent url(../images/hdr_tag_line.gif) no-repeat;
	width: 260px;
	height: 30px;
	position: absolute;
	top: 20px;
	left: 150px;
}
#header .tag span {
	display: none;
}
#header .header_tbd, #header form.search {
	margin: 8px 0 0 530px;
	height: 63px; /* 63+8= 71 = height orange band at top */
}

/* search forms elsewhere (locations pg) */
form.search p {
	line-height: 2; /* space between text & input */
}
form.search input {
	vertical-align: bottom; /* align button w/ text input */
}
/* === .main_nav: main nav on every page === */
/*
  Main nav bar: we have text inline for SEO and printing. We hide it and use
  background images for the web.
  Menus is a list of anchors, each of which contains a span:
  list for semantics. LIs are block, floated left, with defined sizes
  anchors because they're links. 'A' elems have the background
  span so that we can hide the text
*/
/* dropdowns! We work around the lack of child selector, so instead of
x>y { value } we get x y { value } AND x y y { un-value }
we work around no hover in ie by having x:hover, x.ieHover {} everywhere, and
using jQuery to add and remove the hover classes.
*/
/* need all 3 of these */
.main_nav, .main_nav li, /* .main_nav>li */ .main_nav li a { /* .main_nav>li>a */
	height: 37px;
}
.main_nav li li, .main_nav li li a {
	height: auto;
}
.main_nav, .main_nav li, .main_nav li a {
	display: block;
	text-decoration: none;
	position: relative;
}
.main_nav {
	padding-left: 139px;
	background: transparent url(../images/hdr_bg_nav.gif) repeat-x;
}
.main_nav li { /* this pair substitutes for .main_nav > li */
	float: left;
}
.main_nav li li {
	float: none;
}
.main_nav li ul { /* sub menu */
	position: relative; /* and it shows on top of the hero! */
	z-index: 120; /* to get above the rotating hero! */
	display: none; /* shows on hover */
	padding-bottom: 3px;
}
.main_nav li.ieHover ul, .main_nav li:hover ul { /* sub menu */
	display: block;
	position: relative;
	z-index:98;
}
.main_nav ul li {
	line-height: 11px;
	padding: 4px 12px;
}
.main_nav ul a {
	display: block;
	text-decoration: none;
}
.main_nav .nav_services {
	width: 102px;
	background: transparent url(../images/nav_new/nav_services.gif) no-repeat;
}
.main_nav .nav_locations {
	width: 118px;
	background: transparent url(../images/nav_new/nav_locations.gif) no-repeat;
}
.main_nav .nav_coupons {
	width: 134px;
	background: transparent url(../images/nav_new/nav_promotions.gif) no-repeat;
}
.main_nav .nav_company {
	width: 107px;
	background: transparent url(../images/nav_new/nav_company.gif) no-repeat;
}
.main_nav .nav_jobs {
	width: 72px;
	background: transparent url(../images/nav_new/nav_jobs.gif) no-repeat;
}
.main_nav .nav_giftcards {
	width: 123px;
	background: transparent url(../images/nav_new/nav_giftcards.gif) no-repeat;
}
.main_nav li.ieHover, .main_nav li:hover { /* ok to get the sub-menu li's too, they have no background img */
	background-position: 0 -37px;
}
/* when we're on a .services page (as determined by the body class),
   show the "current" version of the nav graphic
   and similarly for all other page types.
*/
.services .nav_services, .locations .nav_locations, .henryshints .nav_henryshints, .coupons .nav_coupons, .company .nav_company, .jobs .nav_servicejobs, .giftcards .nav_giftcards {
	background-position: 0 -74px;
}
.main_nav a span {
	display: none;
}
#header img {
	display: block;
	border-top: 1px solid white;
}
/* === .sub_nav on center pages (not strictly part of the header, but we treat it here) === */
/* sub_nav much like main_nav (above), except no images. */

.sub_nav {
	height: 33px;
	border-top: 1px solid white;
}
.sub_nav, .sub_nav li, .sub_nav li a {
	display: block;
}
.sub_nav li {
	float: left;
	border-left: 1px solid white;
	text-align: center;
	font-weight: 600;
}
.sub_nav .sn_center {
	border-left: none;
	text-align: left;
}
/* we want the 'a's full height so the whole tab is clickable */
.sub_nav li a {
	padding-top: 9px;
	height: 24px; /* padding-top + height = 33 */
}
.sub_nav .sn_center a {
	padding-left: 15px;
	padding-top: 3px;
	height: 30px; /* padding-top + height = 33 */
}
/* widths adjusted so can have center 'Hillsboro-2505 SE TV Hwy, OR' at +1 font size w/o wrapping
   total 795+ 5 1px borders = 800
*/
.sub_nav .sn_center {
	width: 325px;
}
.sub_nav .sn_aboutus {
	width: 90px;
}
.sub_nav .sn_services {
	width: 90px;
}
.sub_nav .sn_coupons {
	width: 90px;
}
.sub_nav .sn_community {
	width: 100px;
}
.sub_nav .sn_comments {
	width: 100px;
}
/* =============== content =============== */
/* 40 px space at top of content... below the sub-nav if we have one, otherwise top of content. Can't be part of the header, that's the wrong color */
.home #content { /* except above the content wells */
	padding-top: 7px;
}
#content, .locations #content.search { /* search is the non-center locations page */
	padding-top: 40px;
}
.locations #content {
	padding-top: 0;
}
.sub_nav {
	margin-bottom: 40px;
}
h2 {
	padding-bottom: 10px;
}
h3 { /* giftcards.html only so far */
	padding-bottom: 10px;
}
p {
	padding-bottom: 10px;
}
/* === .well: content wells on home pages === */
/* this is a link <a> so that the whole thing is clickable. This means that it
can't contain any block elements (div, h4, p, etc.) */
.well {
	width: 200px; /* 4 in our 800 */
	height: 215px;
	float: left;
	background: transparent url(../images/well_shadow.gif) no-repeat;
}
.well span {
	display: block;
}
.well .well_title, .well .well_content {
	width: 183px;
	border: 1px solid;
	margin-left: 7px; /* center in the outer well */
}
.well .well_title {
	border-bottom: none;
}
.well .well_more {
	width: 168px; /* less because of 15px padding */
	border: 1px solid;
	margin-left: 7px; /* center in the outer well */
	border-top: none;
	height: 15px;
	background: transparent url(../images/arrow_right_orange.gif) no-repeat 7px 2px;
	padding-left: 15px;
}
.well .well_title {
	text-align: center;
	padding: 4px 0;
}
.well .well_content {
	height: 164px;
}
.well .well_ro { /* rollover well images live here */
	display: block;
	height: 91px;
	width: 182px;
}
.one .well_ro {
	background: transparent url(../images/wells/well_1.jpg) no-repeat 1px 0;
}
.two .well_ro {
	background: transparent url(../images/wells/well_2.jpg) no-repeat 1px 0;
}
.three .well_ro {
	background: transparent url(../images/wells/well_3.jpg) no-repeat 1px 0;
}
.four .well_ro {
	background: transparent url(../images/wells/well_4.jpg) no-repeat 1px 0;
}
.well:hover .well_ro {
	background-position: 1px -91px;
}
.well .h4 {
	padding: 3px 7px 0;
}
.well .p {
	padding: 0 7px;
}
.well .well_more {
}
/* === .main_copy: 1 col copy on home page === */

.main_copy {
	padding: 20px 50px 30px 50px;
}
/* 2 col layouts:
   800 px wide
   columns: 740 useable (3 gutters), divided:
   280/460
   460/280
   185/555 - accordian side menu (default)
   ^^ with 20px margins&gutter vv 40 px margins & gutter
   800-(3*40) = 680 usable
   155/525 - default (nav)
   220/460 - center_coupons
   250/430 - center-services, center_comments
   400/280 - center_aboutus, center_community
   =====
   50 px margins, 40px gutter:
   800-(2*50)-40 = 660 usable
   155/505 - default (nav)
   200/460 - center_coupons
   240/420 - center-services, center_comments
   380/280 - center_aboutus, center_community
   
   
  col1 is float left & has the left gutter
  col2 left margin has center gutter, col 1 has right gutter
  bottom padding is ad-hoc.
*/
/* === .col1: left side content === */
.col1 {
	width: 155px;
	float: left;
	padding-left: 50px;
	clear: both; /* we're first after sub-nav with its floats */
}
.col2 {
	width: 505px;
	padding-right: 50px;
	float: right;
}
.search .col1, .center .col1, .center_services .col1, .center_comments .col1 {
	width: 240px;
	padding-bottom: 30px; /* 10px from bottom P */
}
.search .col2, .center .col2, .center_services .col2, .center_comments .col2 {
	width: 420px;
}
.center_coupons .col1 {
	width: 200px;
	padding-bottom: 30px; /* 10px from bottom P */
}
.center_coupons .col2 {
	margin-top: -14px;
	width: 460px;
}
.center_aboutus .col1, .center_community .col1 {
	width: 380px;
}
.center_aboutus .col2, .center_community .col2 {
	width: 280px;
}
.content_nav {
	padding-bottom: 37px; /* 3px from bottom A + 37 = 40 */
}
/* === .col2: right side content === */
.col2 {
	padding-bottom: 30px; /* + 10px from bottom P */
}
.center_coupons .col2, .center_comments .col2 {
	padding-bottom: 30px;
}
/* === .content_nav: accordion menu === */

.content_nav li {
	padding-left: 10px; /* arrow lives here */
}
.content_nav .hide {
	background: transparent url(../images/arrow_right_orange.gif) no-repeat 0 3px;
}
.content_nav .hide ul {
	display: none;
}
.content_nav .show {
	background: transparent url(../images/arrow_down_orange.gif) no-repeat 0 2px;
}
.content_nav a {
	display: block;
	padding-bottom: 3px;
}
/* === col1 for various pages === */
.center col1 h3 {
	padding-top: 20px;
}
.center_coupons .col1 .save {
	text-decoration: none;
	line-height: 0;
}
.center_coupons .col1 .save:hover {
	text-decoration: underline;
}
#results a {
	color: #d95936; /*changed to orange - jh - 020810 */
	font-weight: bold;
	/*  color: black; */
  text-decoration: none;
}
#results a:hover {
	text-decoration: underline;
}
/* === col2 various pages === */

ul.bullet {
	list-style-type: square;
	padding-left: 1em;
}
p.nogap {
	padding-bottom: 0;
	margin-bottom: 0;
}
.col2 ul.slideshow {
	padding-bottom: 10px; /* + 10 from .col2 = 20 */
}
#map {
	width: 100%; /* full width col2 */
	height: 350px; /*tbd*/
	margin-bottom: 10px;
}
#map a { /* attempt to get at the info window */
	color: black;
	font-weight: normal;
	text-decoration: underline;
}
/* ===== pop up printable coupon ===== */
body.print_coupon {
	width: auto;
}
.print_coupon .coupon {
	margin: 0 auto;
}
.print_coupon a {
	display: block;
	text-align: center;
}
/* === center_coupons page === */
.printLink {
	padding-bottom: 2px;
	display: block;
	text-align: center;
	text-decoration: none;
}
.printLink span {
	background: transparent url(../images/print_icon_transparent.gif) no-repeat 0 0;
	padding-left: 20px;
}
.printLink span:hover {
	text-decoration: underline;
}
.coupon {
	width: 460px;
	position: relative;
	background: transparent url(../images/coupon/border_side.gif) repeat-y 0 0;
}
/* === coupon generator === */
.coupon_generator {
	width: 600px;
	position: relative;
	background: transparent url(../images/coupon/border_side.gif) repeat-y 0 0;
}
.coupon_border_top, .coupon_border_bottom {
	height: 10px;
	background: transparent url(../images/coupon/border.gif) no-repeat 0 0;
}
.coupon_border_bottom {
	background-position: 0 -10px;
}
.coupon_och_logo {
	position: absolute;
	left: 20px;
	top: 20px;
}
.coupon_product {
	display: block;
	float: right;
	padding: 10px 20px 0 0;
}
.coupon_save {
	display: inline-block;
	/*  float: right; */
  padding-top: 3px;
	padding-left: 50%;
	margin-left: -60px;
}
.coupon_addr {
	clear: both;
	font-size: 12px;
	text-align: center;
	padding: 0 20px 0 20px;
}
.coupon_center {
	font-weight: bold;
}
.coupon_legal {
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 14px; /* + 6 px .coupon_border_bottom */
}
.coupon_code {
	display: block;
	position: absolute;
	bottom: 9px;
	right: 10px;
	background-color: white;
	border: 1px solid black;
	padding: 1px 10px;
}
/* === center_comments page === */
.center_comments .req {
	color: red;
	font-weight: bold;
}
.center_comments table {
	font-size: 10px;
}
.center_comments td, .center_comments th {
	padding-top: 5px;
	vertical-align: top;
}
.center_comments th {
	text-align: right;
	padding-right: 5px;
	width: 120px;
}
.center_comments .buttons, .center_comments .captcha {
	text-align: right;
	padding: 10px 60px 0 0;
}
/* general slideshow settings */
/* slideshow images all max 280x280 */
.slideshow {
	position: relative;
	width: 280px;
	height: 304px; /* measures to 20 px botom */
	text-align: center;
}
.slideshow img {
	max-width: 280px;
	max-height: 280px;
}
.slideshow li {
	visibility: hidden;
	position: absolute; /* make them all overlap */
	top: 0;
	left: 0;
	width: 280px;
	height: 300px; /* 280 + caption */
}
.slideshow li.active {
	visibility: visible;
}
/* typical caption:
  <div class="caption">
    <div class="arrow left"></div>
    <div class="text">nominate sign<br/>about which we have quite a lot to say</div>
    <div class="arrow right"></div>
  </div>
*/
.slideshow .caption {
	height: 12px;
	text-align: center;
	position: relative;
}
.slideshow .caption .text {
	position: absolute;
	top: 0;
	left: 20px;
	width: 240px;
}
.slideshow .caption .arrow {
	width: 12px;
	height: 12px;
}
/* inactive & hover arrows done in js */
.slideshow .caption .left {
	background: transparent url(../images/arrow_left_gray_sprite.gif) no-repeat 0 0;
	position: absolute;
	top: 0;
	left: 4px;
}
.slideshow .caption .right {
	background: transparent url(../images/arrow_right_gray_sprite.gif) no-repeat 0 0;
	position: absolute;
	top: 0;
	right: 0;
}
/* center_services dl */
.center_services dl {
}
.center_services dt {
	font-weight: bold;
	display: block;
	padding-left: 10px;
	background: transparent url(../images/arrow_right_gray.gif) no-repeat 0 4px;
}
.center_services dt.hover {
	color: #666;
	background: transparent url(../images/arrow_right_black.gif) no-repeat 0 4px;
}
.center_services dt.active {
	color: #666;
	background: transparent url(../images/arrow_down_gray.gif) no-repeat 0 4px;
}
.center_services dd {
	display: none;
	padding-left: 10px;
}
.center_services dd.active {
	display: block;
}
/* === giftcards page === */
table.merch {
	margin-top: 10px; /* tables don't have padding */
}
.merch th {
	width: 220px; /* inc gutter */
	vertical-align: top;
	text-align: left;
}
.merch td {
	vertical-align: top;
}
.merch li {
	padding-top: 20px;
}
.merch li img {
	width: 200px;
	float: left;
}
.merch li form {
	width: 335px; /* col2 555 - 200(img) -20(gutter) */
	float: right;
}
/*
"lightbox" divs.
lightbox looks like: <div id="boxOverlay><div><div id="box">...stuff...</div>
The boxOverlay grays out absolutely everything, and the box sits on top of that.
Have the js add the boxOverlay before the box. Have the js position the box
*/
#boxOverlay {
	opacity: 0.5;
	background-color: #666;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}
#box {
	display: none;
	position: absolute;
	padding: 5px;
	border: 3px solid black;
	background-color: #f6eee1; /* std beige */
	z-index: 100;
}
.slide img {
	display: block;
}
.slide span {
	display: block;
	text-align: center;
	width: 400px;
}
/* === Things entered through CMS === */
#cmsContent ul {
	list-style-type: square;
	padding-bottom: 10px;
	padding-left: 1em;
}
#cmsContent li {
	padding-left: 5px;
}
#cmsContent h3 {
	padding-bottom: 0;
}
#cmsContent .right {
	float: right;
}
#cmsContent .fields {
	margin: 0px;
	padding: 3px;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: top;
	background: transparent;
}
.jobs #cmsContent ul {
	list-style-type: none;
	padding-bottom: 10px;
	padding-left: 1em;
}
/* =============== footer =============== */

#footer {
	height: 30px;
	padding: 5px;
	border-top: 1px solid;
	clear: both;
	background: url(../images/footer_hank_bg.gif) no-repeat 0 0;
}
.social {
	display: block;
	float: left;/* background: transparent url(../images/footer_icons_sprite.gif) no-repeat 0 0; */
}
.newsletter {
	width: 208px;
	padding-left: 0;
	text-align: right;/*  background: transparent url(../images/footer_icons_sprite.gif) no-repeat 190px 0;
  background-position: 0 -2px; */
}
.email {
	width: 23px;
	padding: 4px 0 0 7px;
}
.facebook {
	width: 23px;
	padding: 3px 0 0 40px;/*  background-position: 0 -33px;*/
}
.twitter {
	width: 23px;
	padding: 4px 0 0 20px;/*  background-position: 0 -64px;*/
}
.foot_castrol {
	display: block;
	/* .social widths = 560. Balance margin & padding so we get the right clickable area */
  margin-left: 685px;
	padding: 1px 0 00;
}
/*  =============== legal =============== */
#legal {
	clear: both;
	text-align: center;
	padding-top: 18px;
}
#legal li {
	display: inline;
	border-left: 1px solid;
	padding-left: 5px;
}
#legal li.first {
	border-left: none;
}