/* CSS for Chesapeake Outdoor Kitchen Co */

/*Colors:

	Structural border color: #9a864a
	Brown: #78693c	
	Beige: #e5debd
	Gallery Image Border: #857749
	Other Borders: #998c62
	Quotation Marks: #d6bf51
	Pullquote From: #b3aa8e;
*/

/*
	All *-holder IDs are containers that hold dropshadows and the DIV containing the actual content
	All *-box IDs are DIVs for the content within these holder DIVs
	
	Please use PNGs for backgrounds as much as possible - browsers seem to interpret PNG colors different so if there are color shifts we would like to keep them consistant.
*/

* {
	margin: 0;
	padding: 0;
}
body {
	font: 80% georgia, geneva, sans-serif;
}
h1 {
	color: #1c1c50;
	/*color: #78693c; */
	font-size: 1.5em;
	margin: 0 0 10px 0;
}
h2 {
	/*color: #78693c; */
	color: #1c1c50;
	font-size: 1.3em;
	margin: 0 0 10px 0;
}
h3 {
	/*color: #78693c; */
	color: #1c1c50;
	font-weight: bold;
	font-size: 1.2em;
	margin: 0 0 10px 14px;
}




h4 {
	/*color: #78693c; */
	color: #1c1c50;
	font-weight: bold;
	font-size: 1em;
	margin: 0 0 10px 14px;
}
input { padding: 2px; }
option { padding: 1px 3px 1px 2px; }
ul { margin: 0 0 0 25px; }
p { margin: 0 0 10px 0; }

a img{ border: 0; }

.l { float: left; }
.r { float: right; }
.clear { clear: both; }

.m-tb-5 { margin: 5px 0; }
.m-tb-10 { margin: 10px 0; }
.m-t-10 { margin: 10px 0 0 0; }

.b { font-weight: bold; }
.no-b { font-weight: normal; }
.u { text-decoration: underline; }
.no-u { text-decoration: none; }
.i { font-style: italic; }
.no-i { font-style: normal; }
.small { font-size: .9em; }
.large{ font-size: 1.1em; }

.t-c { text-align: center; }
.t-l{ text-align: left; }
.t-r{ text-align: right; }

.d-b{ display: block; }

.brown{ color: #201933; }
.beige{ color: #fff; }
/*.brown{ color: #78693c; }
.beige{ color: #e5debd; }*/
.logo{ 
	margin: -1px 0 0 8px; 
	position: absolute;
	z-index: 100;
	}

#holder{
	width: 826px;
	background: url("/images/main-bg-index.png") repeat-y;
	margin: 0 auto;
}

#main{
	width: 802px;
	margin: 0 auto;
	border-bottom: 1px solid #9a864a;
}

#header{
	height: 96px;
	background: url("/images/header-bg.png") repeat-x;
}

#nav-holder{
	width: 790px;
	height: 85px;
	margin: 0 auto;
}

#nav-holder img.shadow-m { 
	margin: 9px 0 0 0; 
}

#nav-box{
	width: 760px;
	height: 85px;
	background: url("/images/nav-bg.jpg") repeat-x;
	float: right;
	display: inline;
	margin: 8px 0 0 0;

}

/*Nav styling */

.nav, .nav * {
	margin:0;
	padding:0;
}
.nav {
	margin: 20px 0 0 0;
	position: relative;
	left: 200px;
	font-size: 1.2em;
	letter-spacing: -.01em;
}
.nav ul {
	background: none; /*IE6 needs this*/
}
.nav li {
	float:left;
	list-style:none;
	position:relative;
	z-index:999;
}
.nav a {
	color: #fff;
	/*	color: #78693c; */
	display:block;
	float:left;
	text-decoration:none;
	margin: 15px 0 0 0;
}

.nav img{
	margin: 0 6px;
	display: inline;
}
.nav li ul {
	width: 14em;
	background: none;
	float:none;
	top:-999em;
	position:absolute;
	padding: 0;
	margin: 57px 0 0 -10px;
	border-bottom: 1px solid #998c62;
}

.nav li ul li{ 
  /*
	background: #fef7d9;
  */
	background: #1c1c50;
	}

.nav li ul li a{
	margin: 0;
	padding: 2px;
	border-left: 1px solid #998c62;
	border-right: 1px solid #998c62;
}

.nav li li:hover,
.nav li li.sfHover,
.nav li li a:focus, .nav li li a:hover, .nav li li a:active {
	/*background: #fff;*/
	background: #ca5a19;
}
.nav li:hover ul, /* pure CSS hover is removed below */
ul.nav li.sfHover ul {
	left:0;
	top:0;
}

.nav li:hover li ul,
.nav li.sfHover li ul {
	top:-999em;
	z-index: 1000;
}
/*.nav li li:hover ul, /* pure CSS hover is removed below */
ul.nav li li.sfHover ul {
	left:0;
	top:0;
	width:0;
	z-index: 1000;
}
/*following rule negates pure CSS hovers
so submenu remains hidden and JS controls
when and how it appears*/
.superfish li:hover ul,
.superfish li li:hover ul {
	top:-999em;
}
.nav li li {
	background:#AABDE6;
	float:none;
	width:14em;
}
.nav li li a {
	float:none;
	padding-right:0;
}
*html .nav li li {
	margin-bottom:-3px;
}
*html .nav li li li {
	margin-bottom:-1px;
}
*+html .nav li li {
	margin-bottom:-3px;
}
*+html .nav li li li {
	margin-bottom:-1px;
}


#index-top{
	height: 279px;
	background: url("/images/index-top-bg.png") repeat-x;
}
#call-us{
	display: inline;
	margin: 90px 0 0 15px;
	width: 193px;
	border-top: 1px solid #998c64;
	border-bottom: 1px solid #998c64;
}
#holder.index #call-us{
	margin: 0;
	width: 193px;
	height: 154px;
	position: relative;
	top: 103px;
	left: 15px;
	border-top: 1px solid #998c64;
	border-bottom: 1px solid #998c64;
}
#call-us .small { font-size: 1.1em; }
#call-us .medium { font-size: 1.45em; }
#call-us .large { 
	font-size: 2.25em;
	margin: 1px 5px 7px 15px; 
	font-weight: bold;
	letter-spacing: -.0425em;
	line-height: 1em;
}
#call-us a { color: #78693c;
	display:block;
	float:left;
	font-style:oblique;
	text-decoration:none;
	margin: 15px 0 0 0; }

#holder.index #call-us p{ 
	margin: 35px 0 0 3px; 
	padding: 0 5px;
	font-size: .85em;
	line-height: 1.625em;
}
#call-us p{ 
	margin: 15px 0 15px 3px; 
	padding: 0 5px;
	font-size: .85em;
	line-height: 1.625em;
}

#flash-holder{
	width: 597px;
	height: 278px;
	margin: 2px 4px 0 0;
	float: right;
	display: inline;
}
#flash-holder img.shadow-m { margin: 2px 0 0 0; }

#flash-box{
	width: 577px;
	height: 278px;
	float: right;
	background: url("/images/flash-bg.png") repeat-x;
}
#flash-box .flash-m{ margin: 12px 0 0 0; }

#left-col{
	width: 220px;
	float: left;
	background: url("/images/left-col-bg.png") top left repeat-x;
	background-color: #e46c00;
	padding: 0 0 60px 0;
	margin: 0 0 8px 0;
	border-bottom: 1px solid #998c62; 
}

#holder.index #left-col{
	width: 223px;
	background: none;
	padding: 0;
	border: none;
}

#gallery-holder{
	width: 196px;
	height: 171px;
	margin: 17px 0 14px 10px;
}

#gallery-box{
	width: 188px;
	height: 171px;
	margin: 0 0 0 4px;
	background: url("/images/gallery-bg.png") repeat-x;
}

#gallery-box img{
	border: 1px solid #857749;
	margin: 10px 2px 0 10px;
}
#gallery-box img.toprow{
	margin: 15px 2px 0 10px;
}

#gallery-box p { margin: 25px 0 0 0; }

#pullquote{
	width: 193px;
	margin: 0 0 0 12px;
	border-top: 1px solid #998c62;
	padding: 16px 0 0 0;
	font-size: 1.125em;
}

#pullquote p{ 
	margin: -2px 0 0 15px; 
	line-height: 1.13em; 
	letter-spacing: 0em
}

#pullquote p.top-p { margin-top: -19px; }
.quot-color{ 
	color: #d6bf51; 
	position: relative;
	top: 2px;
	font-weight: bold;
	font-size: 1.2em;
}
#pullquote .open-quot{ position: relative; left: 6px; top: 1px;}
#pullquote .close-quot { font-size: 1.1em; margin-left: 1px; }
#pullquote .from-color{ 
	color: #e5debd; 
	font-size: .85em;
	margin: 4px 6px 0 0;
}
#watermark{
	height: 116px;
	width: 177px;
	background: url("/images/ar-watermark.png") top left no-repeat;
	position: absolute;
	margin: -319px 0 0 212px;
}

#right-col{
	width: 521px;
	margin: 0 0 30px 0;
	padding: 19px 0 20px 14px;
	float: left;
	/*color: #78693c;*/
	color: #1c1c50;
}
#holder.index #right-col{
	margin: 0 0 11px 14px;
	padding: 19px 0 0 14px;
}

#right-col p{
	line-height: 1.98em;
	margin: 0 10px 15px 14px;
	font-size: .95em;
}
#right-col p.bottom-b{ 	
	border-bottom: 1px solid #998c62; 
	padding-bottom: 22px;
}

#right-col ul{
	margin: 0 15px 15px 25px;
	/*background: #e5debd;*/
	background: #feddc0;
	border: 1px solid #998c62;
	display: block;
}

#right-col ul.image-col{
	margin: 0 85px 15px 25px;
	
	background: #feddc0;
	border: 1px solid #998c62;
	display: block;
}

#right-col ul.bottom-b{ 	
	margin-bottom: 25px;
}

#right-col ul  li{ 	
	margin: 10px 10px 10px 25px;
}

#right-col ul li a{
	/*color: #857749;*/
	color: #323285;
}

#right-col ul li a:hover{
	text-decoration: none;
}

#right-col img.int-image{
	margin: -19px 0 20px -14px;
}

#right-col p .b, #products p .b{
	font-weight: bold;
	font-size: 1.2em;
}

#image-col{
	width: 100px;
	margin: 0 -35px 0 15px;
}

#image-col img{
	margin: 0 0 5px 0;
}


#products{
	width: 209px;
	float: left;
}

#products p{ 
	margin: 0 0 0 28px;
	/*color: #78693c; */
	color: #1c1c50;
	font-size: .86em;
}
#products p .b{
	font-weight: bold;
	font-size: 1.32em;
}


#products ul{
	margin: -3px 0 0 50px;
	padding: 10px 0 0 0;
	/*color: #78693c; */
	color: #1c1c50;
	font-size: .86em;
	list-style-image: url("/images/product-bullet.gif");
	border-right: 1px solid #d7d3c6;
}
#products ul li{
	color: #78693c;
	font-size: 1.3em;
	margin: -1px 0 0 0;
	position: relative;
	top: 3px;
}
#products ul li a{
	position: relative;
	top: -2px;
	left: -1px;
	text-decoration: none;
	/*color: #78693c;*/
	color: #323285;
}

#br-boxes{
	float: left;
	padding: 12px 0 0 0;
}

.br-link{
	width: 97px;
	float: left;
	margin: 0 5px 0 9px;
	font-size: .83em;
	text-align: center;
	
}

.br-link p{
	margin: 8px 0 0 0;
	font-weight: bold;
	color: #78693c;
	text-align: center;
}

.br-link p a{
	/*color: #78693c;*/
	color: #323285;
	text-decoration: none;
	border: none;
}
	

.br-box{
	margin: 0 0 0 1px;
	width: 97px;
	height: 97px;
	background: url("/images/br-bg.png");
}

.br-box a img{ 
	border: 1px solid #857749;
	margin: 11px 0 0 0px;
}

.br-box a img.solo{ 
	border: 1px solid #857749;
	margin: 11px 0 0 0;
}


.contact { 
	line-height: 1.98em;
	margin: 0 10px 15px 14px;
	font-size: .95em;
	color: #666;
} 

.contact input.field { 
	display: block; 
	width: 300px;
	margin: 10px 0;
	border: 1px solid #857749;
}
.contact input.sm-field { 
	display: block; 
	float: left;
	width: 59px;
	margin: 0 0 10px 10px;
	border: 1px solid #857749;
}
.contact input.m-field { 
	display: block; 
	float: left;
	width: 150px;
	margin: 0 0 10px 0;
	border: 1px solid #857749;
}
.contact textarea { 
	display: block; 
	width: 302px;
	margin: 1px 0;
	padding: 2px 0 0 2px;
	border: 1px solid #857749;

	font-size: 1em;
}

input.sub{ 
	display: block; 
	width: 75px;
	margin: 1px 0;
	border: 1px solid #857749;
}
input.sub:hover , input.sub.sfhover {
	background: #857749;
	color: #fff;
}

#footer-holder{
	height: 23px;
	width: 802px;
	background: url("/images/footer-bg-main.png") repeat-x bottom;
}

#holder.index #footer-holder{
	height: 74px;
	/*margin: -8px 0 0 0;*/
	margin: 20px 0 0 0;
	background: url("/images/footer-bg.png") repeat-x;
}
#footer-box{
	width: 760px;
	height: 74px;
	background: url("/images/footer-box-bg.jpg") repeat-x;
	display: inline;
	margin: -77px 0 0 23px;
	position: absolute;
}/*
#holder.index #footer-box{
	width: 760px;
	height: 74px;
	background: url("/images/footer-box-bg.png") repeat-x;
	display: inline;
	margin: 0px 0 0 24px;
	position: absolute;
}*/

#footer-box-sides{
	width: 790px; 
	margin: -77px 0 0 8px; 
	position: absolute;
	display: inline;
}

#footer-box p{
	margin: 4px 0 0 11px;
	/*color: #78693c;*/
	color: #fff;
	text-align: center;
	font-size: .85em;
}
#footer-box p.bottom-nav{
	margin: 21px 0 0 5px;
	font-size: .91em;
	letter-spacing: -.02em;

}
#footer-box p a{
/*	color: #78693c;  */
	color: #78693c;
	text-decoration: none;
}
#footer-box p.bottom-nav a{
	margin: 0 11px;
	/*color: #78693c;*/

	color: #fff;
	text-decoration: none;
}

#footer-box a.bwm{ font-size:1em; 
color: #fff;}
#footer-box a.bwm:hover{ 
	color: #4a8ecb; 
	text-decoration: underline; 
	
}
#footer-box p.bottombottom {
color:#201933;
}

.pipespacer{ margin: 0 9px; }

.img-group{
	margin: 10px 0px 0px 10px;
}
.img-group img{
	margin: 1px;
	float: left;
}
.img-group a{
	border: 1px solid #78693c;
	display: block;
	width: 45px;
	height: 45px;
	margin: 7px;
	float: left;
  padding: 1px;
}
.img-group a:hover{
	border:1px solid #C0B8A1;
	padding: 1px;
  
  /*border:1px solid #C0B8A1;
	padding: 1px;
	position: relative;
	top: -1px;
	left: -1px;
	margin-bottom: 0;
	margin-right: 5px;*/
}
.divider{
	border-top: 1px solid #C0B8A1;
	margin: 5px 0px 10px 14px;
}

.front-page ul {
	margin: 0 5px 5px 25px;
	/*background: #e5debd;*/
	background: #feddc0;
	border: 1px solid #998c62;
	display: block;
}