/* CSS - Master style sheet for kaptery.com, 2015  */

/* Browser Reset - Eric Meyer ===================================================== */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, blockquote, pre,
/* 18 Oct - I need to understand the difference between native and reset for the Hs and Ps - I should reset and redefine */
/*h1, h2, h3, h4, h5, h6, p,*/ 
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
/* I don't like to reset lists - set definitions in classes if resets are needed */
/* dd, dl, dt, li, ol, ul, */ 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
/*	font: inherit; */
	vertical-align: baseline;
}
/* ol, ul { list-style: none; } */ /* I don't like to reset lists */

a img, :link img, :visited img { border: 0; } /* This one is very useful - should it expand to incude :hover? */
a { outline: none; } /* Removes annoying IE behavior */
table { border-collapse: collapse; border-spacing: 0; }

q:before, q:after,
blockquote:before, blockquote:after { /* 18 Oct - I don't understand this one */
	content: "";
}
/* Fastie Systems' Overides */
em { font-style:italic; }
strong { font-weight: bold; }
/* Fastie Systems' Additional very generic classes */
.underline { text-decoration: underline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
/* Browser Reset - End ============================================================= */

/* YUI values - px to % ============================================================ 
**   10 -> 77      15 -> 116       20 -> 153.9     25 -> 189
**   11 -> 85      16 -> 123.1     21 -> 161.6     26 -> 197
**   12 -> 93      17 -> 131       22 -> 167       27 -> 205 (wf)
**   13 -> 100     18 -> 138.5     23 -> 174       28 -> 212 (wf)
**   14 -> 108     19 -> 146.5     24 -> 182       29 -> 220 (wf)
** YUI values - End =============================================================== */

/* SiteCommander Styles ============================================================ */
/* Styles for debugging messages (duplicate of that contained in admin.css) */
.echo-debug-message { 
	padding: 3px 5px; 
	background-color: #ffc; 
	border: 1px dashed red; 
	font-family: Consolas, "Courier New", Courier, monospace;
	color: black;
}
.echo-debug-heading { 
	font-weight: bold;
	text-decoration: underline;
	color: red; 
}
/* SiteCommander Styles - End ====================================================== */

/* Generic Styles ================================================================== */
.clearboth { clear: both; }
.centerme { text-align: center; }
.fineprint  { font-size: 77%; font-style: italic; }
.smallprint { font-size: 85%; font-style: italic; }
/* Generic Styles - End ============================================================ */

/*  Important Colors
		#F8F4C4 - viewport background
		#F8F4C4 - content & sidebar background
		#FAF7D6 - sidebar background (not used, from original design)
		#303030 - main menu background
*/

body { position: relative;
	background-color: #F8F4C4;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.3;
/*	font-size: 108%;*/
	font-size: 100%;
	color: black;
}

.banner-bg { position: absolute;
	left: 0; top: 0;
	height: 188px;
	width: 100%;
	background-color: #303030;
	background-image: url('../img/Kaptery-Banner.jpg');
	background-position: center top;
	background-repeat: no-repeat;
}
.top-menu-bg { position: absolute; 
	left: 0; top: 188px; /* right below the top banner, see #menu-container */
	width: 100%;
	height: 35px;
	background-color: #303030;
}
/* body p { line-height: 1.3; } */ /* experimental - removing line-height from the reset allows inheritance from body */

/* Standard Headers ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-family: Junction, Lato, Georgia, serif; 
	color: black;
  font-weight: normal;
	padding-bottom: 0;
	margin-bottom: 0;
}
/* Page header */

/* Control the spacing with H1 styles */
h1+p { margin-top: 0px; padding-top: 0; }
h1+ul { margin-top: 0px; padding-top: 0; }
/* Other headers */
h1 { font-size: 200%; text-align: center; } 
h2 { font-size: 170%; }
h3 { font-size: 140%; } 
h4 { font-size: 130%; font-style: italic; } 
h5 { font-size: 110%; font-style: italic; text-decoration: underline; } 
h6 { font-size: 100%; font-weight: bold; }
h2+p, h3+p, h4+p, h5+p, h6+p { margin-top: 4px; padding-top: 0; }
h2+ul, h3+ul, h4+ul, h5+ul, h6+ul { margin-top: 4px; padding-top: 0; }

/* Temporary handling of h3 tags containing a link */
h3 a, h3 a:visited {
	text-decoration: none;
	color: #352a22;
}
h3 a:hover, h3 a:visited:hover {
	text-decoration: underline;
	color: maroon;
}

p+ul { margin-top: -12px; padding-top: 0; }

ul ul { list-style-type: disc; } /* recursive - causes ALL nested uls to use disc */
ul li { line-height: 1.30; }
ol li { line-height: 1.30; }

/* Everyday Links */
a         { color: #000099; } /* blue */
a:hover   { color: maroon; } /* purple */
a:visited { color: #000099; } /* blue */
a:visited:hover   { color: maroon; } /* purple */
/* Also see .cms-article .readmore */
a.readmore { 
  background: url('img/dart-blue.png') no-repeat left center;  /* blue #000099 */
  padding-left: 17px; /* padding-top: 2px; */
  font-style: italic; text-decoration: none;; 
}
a.readmore:hover   { color: maroon; background-image: url('img/dart-maroon.png'); }
a.readmore:visited { color: #000099; } /* blue */
a.readmore:visited:hover   { color: maroon; } 

/* Layout Containers */
.centering-container {
	margin: 0 auto;
	width: 980px;
/*	border: 1px black solid; border-top: 0;*/
	margin-bottom: 10px;
}
.outer-container {
}
.inner-container {
	background-color: #F8F4C4;
}
.top-banner { position: relative;
/*	background-image: url(/img/Kaptery-Banner.jpg);
	background-repeat: no-repeat;*/
	background-image: url(/img/Kaptery-Logo.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 188px;
}

}
/* Body */
.content-container {

}

/* Bottom Menu & Footer Area */
/* Bottom */
.body-bottom {
	padding: 4px 30px 30px 30px;
	font-family: "PT Sans", Tahoma, Geneva, sans-serif;
	color: #666;
	font-size: 93%;
}
.body-bottom a, .body-bottom a:visited {
	font-family: "PT Sans", Tahoma, Geneva, sans-serif;
	color: #666;
	text-decoration: none;
}
.body-bottom a:hover, .body-bottom .a:visited:hover {
	color: black;
}
/* Site Menu Map */
.bottom-site-map {
	/*font-size: 93%;*/
	margin-top: 4px;
}
.bottom-site-map td {
	padding-right: 40px;
}
.bottom-site-map td ul {
	list-style-type: none;
	padding: 0;
}
.bottom-site-map td li {
	list-style-type: none;
	font-family: "PT Sans", Tahoma, Geneva, sans-serif;
}

/* Footer */
.footer { position: relative;
	height: 40px;
	padding-top: 0px;
	color: #666;
}
.footer-menu-container {
	position: absolute;
	width: 980px;
	top: -20px;
	left: 0;
}
.footer .menu {
	margin: 0;
	padding: -10px;
	text-align: center;
	font-size: 85%;
	font-style: normal;
}
.footer a, .footer a:visited {
	color: #666;
	text-decoration: none;
}
.footer a:hover, .footer .a:visited:hover {
	color: black;
}
.footer .copyright {
	margin: 0;
	padding: 1px;
	text-align: center;
	font-size: 75%;
	font-style: italic;
}
/* Menu - Top Navigation*/
#menu-container { position: relative;
	width: 100%;
	height: 35px;
	background-color: #303030;
	color: white;
}
#menu-container a, #menu-container a:visited {
	display: inline-block;
	height: 25px;
	padding: 6px 10px 4px 10px;
	font-size: 18px;
	font-family: "PT Sans", Tahoma, Geneva, sans-serif;
	color: white;
	font-weight: bold;
	background-color: transparent;
	text-decoration: none;
}
#menu-container a.nav-highlight_sale, #menu-container a.nav-highlight_sale:visited {
	color: #ff4400; /* orange */
}
#menu-container a:hover, #menu-container a:visited:hover,
#menu-container a.nav-highlight_sale:hover, #menu-container a.nav-highlight_sale:visited:hover {
	background-color: black;
	color: yellow;
}
.nav-top-right { float: right;
	display: inline-block;
	height: 35px;
}
/* ---------- Matthew James Taylor's Holy Grail 2-column Layout ---------- */
/* column container */
.colmask {
	position: relative;	/* This fixes the IE7 overflow hidden bug */
	clear: both;
	float: left;
	width: 100%;			/* width of whole page */
	overflow: hidden;		/* This chops off any overhanging divs */
	/* wf - adjustments to fit inside the actual space */
	margin: 0; 
}
/* common column settings */
.colright,
.colleft { 
	float: left;
	width: 980px;
	position: relative;
}
.colleft {  }
.col-main,
.col-sidebar {
	float: left;
	position: relative;
	padding: 0;
	overflow: hidden;
}
/* 2 Column (right stack) settings */
.rightstack {
	/*background-color: #FAF7D6;*/ /* darker yellow */
	background-color: #F8F4C4; /* lighter yellow */
/*	 background-image: url('../img/parchment_bg.jpg');*/
}
.rightstack .colleft {
	right: 300px;			/* right column width */
	/*background-color: #FAF7D6;*/ /* darker yellow */
	/*background-color: #F8F4C4;*/ /* lighter yellow */
}
.rightstack .col-main {
	width: 680px;			/* left column content width (left column width minus left and right padding) */
	left: 300px;			/* (right column width) plus (left column left padding) */
}
.rightstack .col-sidebar { 
	width: 300px;			/* right column content width (right column width minus left and right padding) */
	left: 300px;			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
/* ---------- Matthew James Taylor's Holy Grail 2-column Layout End ---------- */

/* Type specifications for normal text in the body area */
.content-main { /* background-color: #fcc; */
	color: black;
	margin: 10px 15px 30px 15px; /* makes the maximum interior width 648 - 50 = 598  for narrow pages or 930 for wide pages */
	/* padding: 10px 20px 15px 20px; */
}
.content-sidebar { 
	font-size: 85%; /* temporary */
	line-height: 1.2;
	margin: 10px 10px 10px 10px;	/* padding: 10px; */
}
.content-single { /* full-width body */
}


/* Generic styles */
.clearboth { clear: both; }
.clearleft { clear: left; }
.clearright { clear: right; }
.centerme { text-align: center; }
.strikethru { text-decoration: line-through; }
.boldme { font-weight: bold; }
.underscore { text-decoration: underline; }

.fineprint { font-size: 77%; font-style: italic; }
.smallprint { font-size: 85%; font-style: italic; }
.sup { vertical-align: super; font-size: 75%; }
.hfvis { display: none; visibility: hidden; }
.markred, .mark-red, .mark-critical, .mark-error { color: red; color: #dd0000; }
.mark-notice { color: maroon; }
.markgreen, .mark-green, .mark-special, .mark-ok, .mark-okay { color: #006600; }
.markgray, .mark-gray { color: #999; color: #666; }
.mark-expired { background-color: #ffc8c8; } 
.nospacing { margin:0; padding:0; }
.nobottom { margin-bottom: 0; padding-bottom: 0; }
.nounderscore { text-decoration: none; }
.nowrap { white-space: nowrap; }
.req-fld { font-weight: bold; color: maroon; }
.indentme { padding-left: 3em; }  
.monospace { font-family: "Courier New", Courier, monospace; }

/* Signature */
.signature {
	font-family: "Homemade Apple", "Monotype Corsiva", "Brush Script MT", cursive;
	font-size: 131%;
	color: darkblue;
}

/* Copy EXACTLY to TinyMCE's CSS ----------------------------------------------------------------- */
/* Image Handling */
.image-border { border: 1px solid #222 !important; }
.image-no-border { border: 0; }
.inline { float: none; }

.image-left {
	float: left;
	margin: 2px 15px 0 0;
}
.image-right { 
	float: right; 
	margin: 2px 0 0 15px;
}
.image-left, .image-right {
	padding: 0;
	border: 1px solid #222 !important;
}

/* Table-based image-caption system */
.image-caption-left {
	float: left;
	margin: 2px 15px 10px 0px;
/*	border: 1px #333 solid;*/
	background-color: transparent;
}
.image-caption-right {
	float: right;
	margin: 2px 0px 10px 15px;
/*	border: 1px #333 solid;*/
	background-color: transparent;
}
.image-caption-center {
	margin: auto auto;
}
.image-caption-left td, .image-caption-right td, .image-caption-center td {
	vertical-align: top;
	text-align: center;
	color: #222;
	font-size: 93%;
	font-style: italic;
	line-height: 1.1;
}
.image-caption-left td img, .image-caption-right td img, .image-caption-center td img {
	display: block;
	border: 1px solid #222 !important;
	border: 0;
}
.image-caption-left td.image-caption, .image-caption-right td.image-caption, .image-caption-center td.image-caption {
	padding: 3px;
	padding-bottom: 5px;
	text-align: left;
}
.image-caption-center td.image-caption {
	text-align: center;
}
.image-caption-left td p, .image-caption-right td p, .image-caption-center td p {
	margin: 3px;
	padding: 3px;
	color: #222;
	font-size: 93%;
	line-height: 1.1;
}
/* ------------------------------------------------------------------------------------------------------- */

/* These styles are empty but they are listed so they will show up in EW's lists */
.png-fix {  }

/* Home page slider container */
.home-page-slider-container {
	width: 600px;
	height: 400px;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
}
/* Styling for cycle-slideshow, especially to enable the nav buttons */
.cycle-slideshow {
	position: relative;
}
.my-cycle-pager-outside {
	text-align: center; width: 100%; z-index: 500; overflow: hidden; 
	margin-top: -10px; /* push up closer under the show */
}
.my-cycle-pager-inside { position: absolute; bottom: 10px;
	text-align: center; width: 100%; z-index: 500; overflow: hidden; 
}
.my-cycle-pager-outside span, .my-cycle-pager-inside span { 
	font-size: 50px; width: 16px; height: 16px; display: inline-block; color: #ADE1FA; padding: 0; 
}
.my-cycle-pager-outside span.cycle-pager-active, .my-cycle-pager-inside span.cycle-pager-active {	
	color: #9F0A0F;
}
.my-cycle-pager-outside > *, .my-cycle-pager-inside > * { 
	cursor: pointer;
}

/* Articles */
.cms-article {
	color: #352a22;
}
.cms-article .title, .cms-article h2, .cms-article h2.cms-heading {
	font-family: Junction, Lato, Georgia, "Times New Roman", Times, serif;
	color: #352a22;
	font-size: 170%; /* same as native h2 */
	margin-top: 0; padding-top: 0;
}
.cms-article .title a, .cms-article .title a:visited,
.cms-article h2 a, .cms-article h2 a:visited
.cms-article h2.cms-heading a, .cms-article h2.cms-heading a:visited {
	text-decoration: none;
	color: #352a22;
}
.cms-article .title a:hover, .cms-article .title a:visited:hover,
.cms-article h2 a:hover, .cms-article h2 a:visited:hover
.cms-article h2.cms-heading a:hover, .cms-article h2.cms-heading a:visited:hover {
	text-decoration: underline;
	color: maroon;
}
.cms-article .subtitle {
	font-size: 108%;
	font-style: italic;
}
.cms-article .cms-byline {
	font-family: Junction, Lato, Georgia, "Times New Roman", Times, serif;
	font-family: Arial;
	font-size: 77%;
}
.cms-article .readmore, .cms-article .readmore:visited {
	color: #000099;/* blue */
	text-decoration: none;
	padding-left: 17px;
	font-size: smaller;
	font-style: italic;
	background-image: url('img/dart-blue.png');
	background-repeat: no-repeat;
	background-position: left center;
}
.cms-article .readmore:hover, .cms-article .readmore:visited:hover {
	color: maroon; 
	background-image: url('img/dart-maroon.png');
}

/* Product Related Styles */
/* Basic 3-across presentation used by products and product categories pages */
.product-box, .product-box:visited {
	float: left;
	width: 260px; width: 258px; /* for testing the border thing below... */
	margin-right: 15px;
	margin-bottom: 15px;
	padding: 20px;
	background-color: #ffc; background-color: white; background-color: ivory; background-color: burlywood; background-color: #ffc974;
	background-color: transparent;
	border: 1px transparent solid;
	border-radius: 30px;
}
.product-box:hover, .product-box:visited:hover {
	background-color: white; background-color: burlywood; background-color: ivory; background-color: #ffdb72;  background-color: #FBE89E;
/*	border: 1px gray solid;*/
	border: 1px #FFDB72 solid;
	cursor: pointer;
}
.product-box .product-thumbnail {
	display: block;
	border: 1px black solid;
	margin: 5px auto 0 auto;
}
.product-box .product-title {
	font-size: 125%;
	color: maroon;
	text-align: center;
}
.product-box .product-price {
	font-size: 108%;
	color: maroon;
	text-align: center;
}
.product-box .current-price {
	color: maroon;
}
.product-box .current-price-sale {
	color: #ff4400;
	font-weight: bold;
}
.product-box .list-price { /* for when item is on sale */
	color: darkgray;
	text-decoration: line-through;
}
.product-box .product-shipping {
	text-align: center;
	font-size: 85%;
	font-style: italic;
}
.product-box .product-description {
	
}
/* Styles for the individual product page */
.product-container {
	margin-top: 5px;
}
.product-container .product-price {
	font-size: 116%;
	color: maroon;
	font-weight: bold;
	margin-top: 0;
}
.product-container .current-price {
	color: maroon;
}
.product-container .current-price-sale {
	color: #ff4400;
}
.product-container .list-price { /* for when item is on sale */
	color: darkgray;
	text-decoration: line-through;
}
.product-container .pricing-box { overflow: hidden;
	margin-top: 5px; /* must match margin of product gallery table */
	border: 1px #555 solid;
	padding: 4px 6px;
	background-color: #cfc; background-color: #FAF79D; /* yellow */ background-color: #EBDFB1; /* blended to tan */
}
/* Styling for a PayPal embed */
.paypal-payment-embed {
	line-height: 1.2;
	margin-bottom: 5px;
}
.paypal-payment-embed input[name=submit] {
	margin-top: 10px;
	margin-bottom: 3px;
}
div.paypal-view-cart-menu-button {
	display: inline-block;
	vertical-align: middle;
	margin: 7px 0 0 4px;
}

/* Link container for product boxes */
.product-link, .product-link:visited, .product-link:hover, .product-link:visited:hover {
	text-decoration: none;
	color: black;
} 
/* Container for product boxes */
.products-container {
	margin-top: 15px;
}

/* Product Gallery Table */
.product-gallery-table { float: left;
	margin: 0 15px 10px 0;
	border-collapse: collapse;
/*	border: 1px #333 solid;*/
}
.product-gallery-table th {
/*	border-bottom: 1px #333 solid;*/
}
.product-gallery-table td, .product-gallery-table th {
	padding: 1px;
}
.product-gallery-table td img, .product-gallery-table th img {
	display: block;
/*	margin: 1px;*/
	border: 1px #555 solid;
}
.product-gallery-table td img:hover, .product-gallery-table th img:hover {
	border: 1px white solid;
}

/* Widgets */
/* Product Categories */
.widget-product-categories {
	width: 210px;
	width: 217px;
	margin: 10px auto;
	padding: 5px 10px 5px 10px;
	background-color: burlywood;
	border-radius: 10px;
	text-align: center;
}
.widget-product-categories-menu { float: right;
/*	width: 208px;*/
	width: 215px;
	border: 1px gray solid;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	background-color: #FAF7D6;
}
.widget-product-categories-menu a, .widget-product-categories-menu a:visited {
	display: block;
	height: 25px;
	padding: 6px 10px 4px 10px;
	font-size: 18px;
	font-family: "PT Sans", Tahoma, Geneva, sans-serif;
	color: white; color: black;
/*	font-weight: bold;*/
	background-color: transparent;
	text-decoration: none;
}
.widget-product-categories-menu a:hover, .widget-product-categories-menu a:visited:hover {
	background-color: black;
	color: yellow;
}
.widget-product-categories-menu .heading {
	border-bottom: 1px gray solid;
	font-weight: bold;
}
/* Recent Articles */
.widget-recent-articles { float: right;
	width: 215px;
	border: 1px gray solid; border-bottom: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: left;
	background-color: #FAF7D6;
}
.widget-recent-articles a, .widget-recent-articles a:visited {
	display: block;
	padding: 6px 10px 6px 10px;
	border-bottom: 1px gray solid;
	font-size: 100%;
	font-family: "PT Sans", Tahoma, Geneva, sans-serif;
	color: black;
	background-color: transparent;
	text-decoration: none;
}
.widget-recent-articles a:hover, .widget-recent-articles a:visited:hover {
	background-color: black;
	color: yellow;
}
.widget-recent-articles .heading { /* div */
	border-bottom: 1px gray solid;
	font-weight: bold;
	text-align: center;
	font-size: 18px;
	padding: 6px 10px 6px 10px;
}

/* Shipping Information */
.widget-shipping-information { float: right;
/*	width: 188px;*/ /* 210 - borders - padding */
	width: 195px; /* 217 - borders - padding */
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 5px 10px 5px 10px;
	background-color: #FAF7D6;
	border: 1px gray solid;
	font-size: 85%;
}
.widget-shipping-information h3 {
	padding-top: 0;
	margin-top: 0;
	text-align: center;
}

/* Twitter for the sidebar */
.twitter-widget-sidebar {
	float: right;
	width: 210px; /* depends on actual width of twitter widget */
	margin-top: 3px;
	padding-left: 5px;
	border: 1px gray solid;
	background-color: #FAF7D6;
}

/* Site Alert Widgets */
.site-alert {
	background-color: maroon;
	padding: 3px;
	margin-bottom: 3px;
}
.site-alert-title {
	text-align: center;
	font-size: 108%;
	color: white;
	font-weight: bold;
	padding-bottom: 3px;
}
.site-alert-content {
	background-color: white;
	color: black;
	padding: 1px 6px;
}
/* Featured Video */
.featured-video-widget {
	width: 302px;
	margin: 0 auto;
}
.featured-video-heading h3 {
	text-align: center;
	padding: 0;
	margin: 0;
}

/* Zone Widgets - new 24 Mar 2015 */
.widget-zone-sidebar-top { float: right;
	width: 217px;
	margin-top: 10px;
	margin-bottom: 10px;	
}




/* Miscellaneous */

/* Search Box - for articles, includes search button */
#search-box { /* containing form - format as needed for a given site */
	margin: 0 5px 0 5px;
	padding: 0;
	display: inline-block;
	/* for KAPtery - adjust so it fits in menu bar */
	vertical-align: top;
	margin-top: 5px;
}
#search-box input { 
	height: 22px;
	line-height: 1;
	border: 1px #aaa solid; /* custom */
	background-color: white;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	outline: none;
}
#search-box input[type=text] { width: 194px; /* custom */
	color: #222;
	padding: 1px 4px;
	height: 20px;
}
#search-box input[type=image] {
	border-left: 0;
	width: 22px;
	background-color: #eee;
}
#search-box input[type=image]:hover {
	background-color: #ffc;
}