/* Master Stylesheet for fastie.com
   Conversion to HTML 5 and MJT's equal columns layout, December 2011
   Copyright ©2009-2011 Will Fastie. All Rights Reserved. 
*/
/* Fastie Systems CSS Reset - modified from Eric Meyer's Browser Reset v2, April 2007
   Don't forget to set a foreground and background color on the 'html' or 'body' element! 
*/
html, body, div, span, applet, object, iframe, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, 
/* 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, */ 
/* 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	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; }
/* ----------------------------------------------- */

/* Site Layout */
/* All styles will be attached to classes. IDs will only be used when needed for JS or
   some other important reason. This should prevent problems with IDed elements overiding class-based
   rules. Discipline is required to have only one class for those elements that must appear only once.
*/

body {
	background: #ccc url('../img/body-slice.jpg') repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	color: #000; /* black */
	font-size: .8em; 
}
body p { line-height: 1.4; }

/* Standard Headers */
h1, h2, h3, h4, h5, h6 { font-family: Georgia, "Times New Roman", Times, serif; color: black;
  font-weight: normal;
	padding-bottom: 0;
	margin-bottom: 0;
}
h1 { font-size: 2.5em; text-align: center; } /* A+ header - reserved for special use */
h2 { font-size: 1.7em; color: #062a5e; }     /* A header */
h3 { font-size: 1.4em; }                     /* B header */
h4 { font-size: 1.3em; font-style: italic; } /* C header */
h5 { font-size: 1.1em; font-style: italic; text-decoration: underline; } /* D header */
h6 { font-size: 1.0em; 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; }

/* ------------------------------------------------------------------------------------------ */
/* Styles for debugging messages (duplicate of that contained in admin.css) */
.echo-debug-message { padding: 3px; background-color: #ffc; border: 1px dashed red; color: #009; font-family: monospace; font-weight: bold; }
.echo-debug-heading { color: red; }

/* ------------------------------------------------------------------------------------------ */
.page-header { margin-top: 0; padding-top: 0; } /* use for any header that is first on page */

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

/* Centering, Outermost Container - holds the outer container and the footer */
.cc { 
  width: 984px;
  margin: 0 auto;
  padding-bottom: 16px;
}
/* Outer Container */
.oc { 
  width: 984px;
  background-image: url('../img/oc-slice-984.gif'); background-repeat: repeat-y;
}
/* Inner Container - holds the bulk of the site */
.ic { /* overflow: hidden; */ position: relative; 
	width: 974px; margin: 0; margin-left: 5px;
	padding: 0;
}
/* Top Banner, contains nav */
.tb { position: relative; height: 124px; margin: 0px; z-index: 100;  /* IE7 */ }
.tb-fastiesystems { background-image: url('../img/Top-Banner-FS.jpg'); }
.tb-willscorner { background-image: url('../img/Top-Banner-WF.jpg'); }
.tb-corner { position: absolute; top: 0; right: 0; }

/* This is a two-level horizontal dropdown */
.nav { position: absolute; height: 34px; right: 0; bottom: 1px;
  background-image: url('../img/Nav-bg.jpg'); background-repeat: repeat-x;
  color: white;
}

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li { float: left; display: block; position: relative; }
.nav ul li ul { display: none; }
.nav ul li:hover ul { 
  position: absolute; top: 34px; left: -5px;
  width: 150px;
  z-index: 100;
  display: block;
  padding-bottom: 5px;
  background-color: #056170;
}
.nav ul li:hover ul li { float: none; }
.nav ul li:hover ul li a { text-align: left;
  margin: 0;
  padding: 5px 6px;
  font-size: 1.2em;
}

.nav a { /* float: left; */
  display: block; 
  margin: 10px 0 0 0;
  padding: 0 15px 7px 0;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1.3em;
  text-decoration: none;
}
.nav a, .nav a:visited { color: white; }
.nav a:hover { color: yellow; }
.nav a.rss-icon { padding: 0 5px 0 0; margin: 5px 0 0 0; }

/* Page Banner - need one for home page and one for other pages */
.pb { position: relative; 
  background-image: url('../img/Page-Banner-bg.jpg'); background-repeat: repeat-x;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1.8em; color: #086471;
}
.pb-home { height: 171px; }
.pb-page { height: 65px; }
.pb-page p { margin: 0; padding: 0; }
.pb-page p.pb-heading { padding-left: 20px; padding-top: 8px; }
.pb-page p.pb-dateslug { padding-left: 22px; font-size: .6em; font-style: italic; }
.pb-show { width: 684px; height: 171px; 
/*	padding-top: 15px; padding-left: 20px; */
	visibility: hidden; /* needs to be hidden until run_marketing_quotes.js completes, which makes this visible */
}
.pb-show div.show-item { width: 669px; height: 170px; /* max height for image 155px */
  padding: 10px 0 0 15px; 
	background-image: url('../img/Page-Banner-bg.jpg'); background-repeat: repeat-x; 
}
.pb-show p { line-height: 1.2;  margin: 0; padding: 0; }
.pb-show-credit { text-align: right; font-size: .75em; font-style: italic; padding-right: 1em; }
.pb-show-image { float: left; margin: 0 10px 0 0; border: 1px solid black;  }

.pbr { position: absolute; top: 0; right: 0;
  width: 255px;
  padding: 0;
  background-image: url('../img/Page-Banner-Stripe.jpg'); background-repeat: no-repeat;
}
.pbr-home { height: 171px; }
.pbr-page { height: 65px; }
.pbr-content { padding: 2px; padding-left: 18px; }
.pbr-content.sc-logo { text-align: center; margin-top: 5px; }
.pbr-heading { padding-left: 16px; padding-top: 21px; font-size: .85em; text-align: center; }
.pbr-ad { 
	text-align: center;
	padding-left: 10px;
	padding-top: 8px;
}
.pbr-ad-copy { font-size: 80%; }
.pbr-ad a img { padding-top: 8px; }

/* Content Container */
.ct { 
  margin: 0; border: 0; 
  padding: 0; 
  background-image: url('../img/Content-Top-Edge.jpg'); background-repeat: repeat-x; /*need top edge slice */
  background-color: white;
}
.ct p {  } /* <-- when margin-top is set to 0, the gap does not appear. */

/* Matthew James Taylor equal height columns, right sidebar
** My version does not use MJT's tricks to set the padding. Instead, I use additional containers.
** The code below is for MJT's liquid layouts, but because the whole thing is contained by .ct, there
** is no liquid effect.
*/
.colmask {
	position: relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	clear: both;
	float: left;
	width: 100%;			 /* width of whole page */
	overflow: hidden;	 /* This chops off any overhanging divs */
}
/* 2 column right menu settings */
/* MJT called this "rightmenu" but I renamed it to "right-column" */
.right-column {
	/*background:#fff;*/
}
.right-column .colleft {
	float: left;
	width: 200%;
	margin-left: -252px; /* width of sidebar */
	position: relative;
	right: 100%;
	/*background:#fff;*/
}
.right-column .col1wrap {
	float: left;
	width: 50%;
	position: relative;
	left: 50%;
	padding-bottom: 1em;
}
.right-column .col1 {
	margin: 0 0 0 252px; /* width of sidebar */
	overflow: hidden;
}
.right-column .col2 {
	float: right;
	width: 252px; /* width of sidebar */
	position: relative;
	left: 252px;  /* width of sidebar */
}
/* end MJT ------------------------------------------------ */

.content { width: 684px; 
  padding: 0 5px 10px 20px; 
  padding-top: 1px;  /* <-- Setting this to a positive value closes the gap. See Meyer's blog.  */
  border-top: 1px red solid;
  border: 0;
  min-height: 358px;
}
.content-wide { width: 934px; 
  padding: 10px 20px 10px 20px; 
 /* padding-top: 1px;*/  /* <-- Setting this to a positive value closes the gap. See Meyer's blog.  */
  border: 0;
  min-height: 358px;
}
.sidebar-container { 
  width: 252px;
  background-image: url('../img/Sidebar-bg.jpg'); background-repeat: repeat-x;
}
.sidebar { min-height: 358px;
  background-image: url('../img/Sidebar-Stripe.jpg'); background-repeat: no-repeat; 
  padding: 6px 7px 0px 16px;
  font-size: .9em;
}

.sidebar-special { height: 358px;
  background-image: url('../img/Sidebar-Stripe.jpg'); background-repeat: no-repeat; 
  padding: 6px 5px 0px 16px;
  text-align: center; 
}


/* Everyday Links */
a         { color: #0000ff; } /* blue (standard) */
a:visited { color: #800080; } /* purple (standard) */
a:hover   { color: #008000; } /* green */
a.readmore { 
  /* background: url('dart-blue-left.gif') no-repeat left center; */
  background: url('dart-blue.png') no-repeat left center;
  padding-left: 17px; /* padding-top: 2px; */
  font-style: italic; text-decoration: none;; 
}
a.readmore:hover   { color: #008000; background-image: url('dart-green.png'); } /* green */
a.readmore:visited:hover   { color: #008000; } /* green */
a.readmore:visited { color: #000099; } /* blue (standard) */

.content hr { background-color: #888; border: 0; height: 1px; width: 80%;  }

.mktg-boxes-3up { float: left; margin: 0; margin-top: 10px; }
.mktg-box { float: left; width: 208px; 
  padding: 4px;
	margin: 0 10px 0 0;
	font-size: .95em; line-height: 1.1;
}
.mktg-box h2 { margin: 0; }
.mktg-special { background-color:#D6F3B6; 
	border: 1px #086471 dashed;
}
.home-page-horiz-sep { clear: both; }

/* Article & Content Management ----------------------------- */
/* Container for the main article on the article.php page */
.cms-article { margin-top: 15px; }
/* Related articles list for bottom of article.php */
.cms-related-articles {  }
/* Recent articles list for sidebar */
.cms-recent-list {  }
.cms-recent-list ul { margin-left: 0; padding-left: 20px; 
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	font-size: 1.15em;
}
.cms-recent-list li { margin-left: 0; margin-bottom: 4px; padding-left: .0; }
.cms-recent-list li.cms-readmore-sidebar { font-style: italic; font-weight: bold;  }
.cms-recent-list li.cms-sticky { font-weight: bold; list-style-type: circle; }
.cms-recent-list a { text-decoration: none; }
.cms-recent-list a, .cms-recent-list a:visited { color: #086471; }
.cms-recent-list a:hover { color: #800080; }
.cms-recent-list h2 { text-align: left; padding-left: 5px; }

.cms-article-list-entry { margin: 0; padding: 0; padding-bottom: 2px; }

.tag-cloud { margin-bottom: 5px; 
	padding: 4px;
	/* border: 1px #086471 solid; */
	/* background-color: #FFFFCC; */
	text-align: center;
}
.tag-cloud a { 
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	text-decoration: none;
	margin-right: 4px;
}
.tag-cloud a, .tag-cloud a:visited { color: #086471; color: #009; }
.tag-cloud a:hover { color: #800080; }
.tg-smallest { font-size: x-small; }
.tg-small    { font-size: small; }
.tg-medium   { font-size: medium; }
.tg-large    { font-size: large; }
.tg-largest  { font-size: x-large; }

/* Container for widgets in the right stack */
.widget-stack { 
	margin-bottom: 10px;
}
.widget-stack .widget h6 {
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	font-size: 20px;
	text-align: center;
	color: #018383; /* SiteCommander Teal */
	margin-top: 10px;
}
.widget-stack .widget {
	margin-bottom: 5px;
}

/* Notice Box (ala Post-It) */
.notice-box {
	margin-top: 10px; margin-right: 10px;
	border: 1px dashed maroon;
	background-color: #ffc;
	padding: 5px 8px;
}

/* Key To Success Box */
.keytosuccess { float: right; width: 200px;
	margin-left: 10px; margin-top: 0px; 
	padding: 3px; 
	background-color: #CCFFCC; color: #114; 
	border: 1px black solid; 
}

/* Footer (in cc) ---------------- */
.ft { position: relative;
  background: #ccc url('../img/oc-bottom-edge.gif') no-repeat;
  background: #ccc url('../img/oc-bottom-edge-984.gif') no-repeat;
  font-size: .75em; color: #666;
} 
/* Footer layout rules */
.ft p { padding: 0; margin: 0; }
.ft-content { position: absolute; top: 0; padding-top: 8px; }
.ft-menu {  left: 0; padding-left: 6px; }
.ft-copyright { right: 0; padding-right: 6px; text-align: right; }
.ft a, .ft a:visited { color: #666; text-decoration: none; }
.ft a.temp, .ft a.temp:visited { color: red; }
.ft a:hover, .ft a.temp:hover { color: black; }
/* Footer        ---------------- */


.top-container { position: relative; 
  height: 185px;
}
/* This is the original text-only menu, blue against the wood */
.hovereffect { }

.clearfix { display: inline-block; clear: both; }
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Generic utility styles */
.ileft  { float: left;  margin-right: 15px; margin-bottom: 5px; }
.iright { float: right; margin-left:  15px; margin-bottom: 5px; }
.inline { float: none; }
.img-tl { float: left; padding: 0; margin: 0 10px 3px 0; }
.img-tr { float: right; padding: 0; margin: 0 0 3px 10px; }
.image-left, .img-l { float: left; padding: 0; margin: 0 10px 0 0; }
.image-right, .img-r { float: right; padding: 0; margin: 5px 0 5px 10px; }
.img-border { border: 2px #062a5e solid; }
.img-border1 { border: 1px #062a5e solid; }

.fineprint { font-size: .7em; font-style: italic; }
.smallprint { font-size: .9em; font-style: italic; }
.sup { vertical-align: super; font-size: 75%; }
.bb  { font-weight: bold; color: #009; }
.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; } 
.clearboth { clear: both; }
.clearleft { clear:left; }
.centerme { text-align: center; }
.nospacing { margin:0; padding:0; }
.nobottom { margin-bottom: 0; padding-bottom: 0; }
.nowrap { white-space: nowrap; }
.req-fld { font-weight: bold; color: maroon; }
.indentme { padding-left: 3em; }  
.monospace { font-family: "Courier New", Courier, monospace; }
.strikethru { text-decoration: line-through; }
.tooltip-definition {  border-bottom-width: 1px; border-bottom-style: dashed; }

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

/* A generic, simple table, primarily for use with articles */
.table-simple { margin: 10px 10px 10px 0;  border: 1px solid black; border-collapse:collapse;}
.table-simple td { padding: 2px 5px; text-align: center; border: 1px solid black; }
.table-simple th, .table-simple tbody th { padding: 2px 5px; text-align: center; border: 1px solid black; }
.table-simple td { background-color: #f1fcd9; }
.table-simple th, .table-simple tbody th { background-color: #5Fc7d4; font-weight: bold; font-size: 85%; font-style: italic;  }

/* A generic, NVP-style table, primarily for lists */
.table-simple-nvp { width: 80%; margin: 10px auto;
	border: 1px solid black; 
	border-collapse:collapse;
}
.table-simple-nvp td, .table-simple th { padding: 3px 5px; text-align: left; border: 1px solid black; vertical-align: top; }
.table-simple-nvp td { background-color: #f1fcd9; }
.table-simple-nvp th { background-color: #5Fc7d4; font-weight: bold; font-size: 85%; font-style: italic;  }

/* A generic table, primarily for feature comparison */
.table-compare { border-collapse: collapse;
	border: 1px solid black;
	margin: 3px 5px;
}
.table-compare th, .table-compare tbody th { padding: 2px 5px; text-align: center; border: 1px solid black; }
.table-compare td { padding: 2px 5px; text-align: center; border: 1px solid black; }
.table-compare th, .table-compare tbody th { padding: 2px 5px; text-align: center; border: 1px solid black; }
.table-compare td.criterion { background-color: #f1fcd9; text-align: left; font-size: 93%; font-style: italic; }
.table-compare td { background-color: white; }
.table-compare th, .table-compare tbody th { background-color: #5Fc7d4; font-weight: bold; font-size: 85%; font-style: italic;  }


/* A generic, simple table, primarily for use with articles */
.table-features { margin: 10px 10px 10px 0;  border: 1px solid black; border-collapse: collapse;}
.table-features td { padding: 2px 5px; text-align: left; border: 1px solid black; background-color: white; }
.table-features th { padding: 2px 5px; text-align: left; border: 1px solid black; background-color: #f1fcd9; }
.table-features th.legend { font-weight: bold; font-size: 90%; font-style: italic; background-color: #5Fc7d4; }

/* Events Display -------------------------------------- */
.table-events { margin: 10px 10px 10px 0;  border: 1px solid black; border-collapse:collapse;}
.table-events td { padding: 2px 5px; text-align: left; border: 1px solid black; }
.table-events th, .table-events tbody th { padding: 2px 5px; text-align: left; border: 1px solid black; }
.table-events td { background-color: #f1fcd9; }
.table-events th, .table-events tbody th { background-color: #5Fc7d4; font-weight: bold; font-size: 85%; font-style: italic;  }

/* A checklist table*/
.checklist-green { border-collapse: collapse; width: 80%; margin-left: 50px; margin-bottom: 10px; 
	border: 1px solid silver;
	background-color:#EBFFEA
}
.checklist-green td, .table-simple th {
	text-align: left; vertical-align: middle; 
	padding: 3px 5px; 
	border: 0; border-bottom: 1px solid silver;
}

/* For sidebar items */
.image-captioned { text-align: center;
	padding-bottom: 0; margin-bottom: 0;
}
.image-caption { text-align: center;
	font-style: italic;
	font-size: 85%;
	padding-top: 0; margin-top: 0;
}

/* For Experience page */
.experience-title { font-style: italic; font-weight: bold; font-size: 85%; margin-bottom: 0; padding-bottom: 0; }

/* for essays */
.subtext { font-size: 80%; font-style: italic; }
.note-aside { color: green; font-style: italic; font-size: .9em; }
.bottomcopyright { /* display: block; */ color: #009; font-size: .8em;  text-align: center; padding-top: 0; margin-top: 0;  }
.divider-684, .divider-article { text-align: center; padding: 0; margin: 0; border: 0; }

/* For various banjo pages */
.builder-name { font-weight: bold; }

/* for Spoecial Widgets */
.widget-end-of-xp {
	border: 1px gray solid;
	background-color: #ffc;
	border-radius: 6px;
}

/* Special styles for Shadowbox */
#sb-body-inner { background-color: white; } /* v3 */ /* does not appear to be needed */

/* Styles for the Bing search box */
#WLSearchBoxDiv {  
	position: absolute; top: 5px; right: 100px;
}
#WLSearchBoxDiv table {  width:200px; height:32px;
	border-collapse: collapse;
}
#WLSearchBoxDiv td.WLSearchBoxInput {  
	width:100%; /* border:solid 1px #cccccc; */ border-right-style:none; padding-left:10px; padding-right:7px; vertical-align:middle;
}
#WLSearchBoxDiv input#WLSearchBoxInput {  
	background-image:url(http://www.bing.com/siteowner/s/siteowner/searchbox_background_k.png); 
	background-position:right; background-repeat:no-repeat; 
	font-family:Arial; font-size:14px; 
	color:#000000; width:100%; border:none 0 transparent;
}
#WLSearchBoxDiv td.WLSearchBoxButton {  
	/* border:solid 1px #cccccc; */ border-left-style:none; padding-top: 7px; padding-left:0px; padding-right:3px;
}
#WLSearchBoxDiv input#WLSearchBoxButton {  
	border:none 0 transparent; /* height:24px; width:24px; */ height:18px; width:18px; vertical-align:bottom;
}