/*::::::::::::::	Cascading Style Sheet for SBW Consulting web site
::::::::::::::::	www.sbwconsulting.com
::::::::::::::::	by Jeff Jansen, Modest Systems
::::::::::::::::
::::::::::::::*/

/*::::::::::::::	TABLE OF CONTENTS
::::::::::::::::
::::::::::::::::

(search for MK??? to jump there)

MK010	Color palette
MK015	Layout Dimensions
MK020	Eric Meyer's CSS reset code
MK050	Layout div definitions
MK060	Overall styles
MK070	LOGO id div
MK080	HEADER id div
MK090	NAVBRANCH id div
MK100	FOOTER id div
MK110	CONTENT id div
MK130	Headings
MK140	Links
MK150	List tags
MK160	Tables
MK170	Special classes
MK180		p.linktotop
MK190		SIDEBAR class div
MK200		FIGURE class div
MK210		STAFFMEMBER class div
MK220		COLUMNS class div
MK230		.padpage
MK240		.hidden

*/

/*:::::::::MK010	Color palette
::::::::::::::::

Color palette
blue background		= rgb(000,124,195)
blue headings		= rgb(000,105,166)
green background	= rgb(000,153,051)
green headings		= rgb(000,135,045)
light green			= rgb(153,255,204)
green on blue 		= rgb(184,219,124)
content text		= rgb(051,051,051)
gray background		= rgb(204,204,204)

*/

/*:::::::::MK015	Layout Dimensions
::::::::::::::::

VarName       Dim    Description
----------  -----    ------------------------------------
wpage       960px    width of page <div> including wlmargin, wlcolumn, wgutter, wcontent, wrmargin
wlmargin      8px    width of margin to left of logo and navigation
wlcolumn    144px    width of the left column with logo and navigation
wgutter       8px    width of gutter between left column and main right column
wcontent    792px    width of main right column containing header and content
wrmargin      8px    width of margin to right of header and content
wsidebar    300px    overall width of sidebars and figures
htmargin      8px    height of margin above logo and header
hheader     144px    height of header and logo
htgutter      8px    height of top gutter between header and content
hbgutter      8px    height of bottom gutter between "consulting" and navigation
htitle       32px    height of "consulting" and content title

*/

/*:::::::::MK020	Eric Meyer's CSS reset code - BEGIN
::::::::::::::::
::::::::::::::::
::::::::::::::::
::::::::::::::*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, a:link, a:visited, a:hover, a:active, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

body {
	line-height: 1;
	background: none;
}

ol, ul {
	list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

/*::::::::::::::	Eric Meyer's CSS reset code - END
::::::::::::::*/

/*:::::::::MK050	Layout div definitions
::::::::::::::::
::::::::::::::::
::::::::::::::::
::::::::::::::*/

/* PAGE : wrapper just inside the body tag */
#page {
	width: 960px; /* wpage */
	padding-bottom: 152px; /* htmargin + hheader : needed to push the background image to bottom of page (why?)  */
	background-image: url(../images/navbranch-bkgd.gif); /* background for branch navigation */
	background-position: 8px 200px; /* wlmargin : htmargin + hheader + htgutter + htitle + hbgutter */
	background-repeat: no-repeat;
	margin-bottom: 8px;
}

/* LOGO : logo in upper left */
#logo {
	position: absolute;
	left: 8px;			/* wlmargin */
	top: 8px;			/* htmargin */
	width: 144px;		/* wlcolumn */
	height: 184px;		/* htmargin + hheader + htgutter + htitle */
	padding: 0;
	margin: 0;
}

/* HEADER : top of page - included navutil, tag line, and navsite */
#header {
	color: white;
	position: absolute;
	left: 160px;	/* wlmargin + wlcolumn + wgutter */
	top: 8px;		/* htmargin */
	width: 792px;	/* wcontent */
	height: 144px;	/* hheader */
	padding: 0;
	margin: 0;
	background-image: url(../images/seattle-skyline-banner2.png);
}

/* NAVBRANCH : navigation for current branch of site */
#navbranch {
	color: white;
	position: absolute;
	left: 8px;		/* wlmargin */
	top: 200px;		/* htmargin + hheader + htgutter + htitle + hbgutter */
	padding: 8px;	/* offset all edges of all content in the div */
	width: 128px;	/* wlcolumn - padding-left - padding-right *//* NOTE: background-color provided by background-image of #page div */
	}

/* CONTENT : main page content */
#content {
	position: relative;
	left: 160px;		/* wlmargin + wlcolumn + wgutter */
	top: 160px;			/* htmargin + hheader + htgutter */
	width: 780px;		/* wcontent - padding-left - padding-right */
	padding: 0 0 0 12px;
	margin: 0;
	color: rgb(051,051,051); /* body text */
}

/* FOOTER : footer at the bottom of every page */
#footer {
	position: relative;		/* follows #content within #page */
	left: 160px;			/* wlmargin + wlcolumn + wgutter */
	top: 152px; 			/* htmargin + hheader : offset for relative position */
	width: 792px;			/* wcontent */
	margin-top: 2.0em;
	background-color: rgb(204,204,204);
}

/*:::::::::MK060	Overall styles
::::::::::::::::
::::::::::::::::
::::::::::::::::
::::::::::::::*/

html *, p, blockquote, cite, ol, ul, li, form, table, caption, th, td {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: small;
}

body {
	text-align: left;
	background-color: white;
}

/*:::::::::MK070	LOGO id div
::::::::::::::::	logo in upper left
::::::::::::::::
::::::::::::::::
::::::::::::::*/

/*	p: text = SBW Consulting - present for search engines, hidden for display */
#logo p {
	font-size: 100%;
	font-weight: bold;
	position: absolute;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-right: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-right: 0;
	visibility: hidden;
}

/*:::::::::MK080	HEADER id div
::::::::::::::::	top of page - included navutil, tag line, and navsite
::::::::::::::::
::::::::::::::::
::::::::::::::*/

/*	The tag line at the top of every page	*/
#header p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 150%;
	position: absolute;
	top: 48px;
	right: 12px;
	text-align: right;
	color: rgb(184,219,124); /* green on blue */
	letter-spacing: 0.03em;/*border: white dotted 1px;*/
	}

/*	All ULs in header div are for navigation	*/
#header ul {
	margin: 0;
	padding: 0;
}

#header li {
	color: rgb(184,219,124); /* green on blue */
	display: inline;
	padding: 0 6px;
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
}

/*	utility navigation menu	*/
#header ul.navutil {
	position: absolute;
	right: 0px;
	top: 0px;
	text-align: right;
	margin: 4px 6px 0 0;
}

#header ul.navutil li {
	font-size: 85%;
}

/*	site-wide navigation menu	*/
#header ul.navsite {
	position: absolute;
	bottom: 0px;
	left: 0px;
	text-align: left;
	margin: 0 0 4px 6px;
}

#header a, 
#header a:link, 
#header a:visited, 
#header a:active {
	color: white;
	text-decoration: none;
	font-family: inherit;
}

#header a:hover {
	color: rgb(184,219,124); /* green on blue */
}

/*:::::::::MK090	NAVBRANCH id div
::::::::::::::::	navigation for current branch of site
::::::::::::::::
::::::::::::::::
::::::::::::::*/

#navbranch * {
	font-family: Arial, Helvetica, Helv, sans-serif;
}

/*	name of site branch	*/
#navbranch h2 {
	color: white;
	font-size: 133%;
	padding-bottom: 0.5em;
	padding-top: 0px;
}

/*	list of navigation items - applies to all levels	*/
#navbranch ul {
	margin-left: 0;
	list-style: none;
}

/*	applies to all list items	*/
#navbranch li {
	padding-top: 3px;
	padding-bottom: 3px;
	color: rgb(184,219,124); /* green on blue */
	font-weight: bold;
	line-height: 1.0em;
}

/*	list item separated from those above it	*/
#navbranch li.sep {
	border-top: 1px solid #ccc;
	margin-top: 0.5em;
}

/*	applies to 2nd level	*/
#navbranch ul ul {
	margin-left: 8px;
	padding-top: 3px;
	padding-bottom: 0;
}

/*	applies to 2nd-level items	*/
#navbranch ul ul li {
	font-size: 90%;
}

/*	Links: no visited or active evidence, only hover 	*/
#navbranch a, #navbranch a:link, #navbranch a:visited, #navbranch a:active {
	color: white;
	text-decoration: none;
}

#navbranch a:hover {
	color: rgb(184,219,124); /* green on blue */
}

/*:::::::::MK100	FOOTER id div
::::::::::::::::	footer at the bottom of every page
::::::::::::::::
::::::::::::::::
::::::::::::::*/

#footer * {
	font-family: Arial, Helvetica, sans-serif;
}

#footer p {
	font-size: 85%;
	padding: 0.5em 0;
	margin: 0;
	text-align: center;
	line-height: 1.5em;/* border-bottom: 8px white solid; */
	}

/*:::::::::MK110	CONTENT id div
::::::::::::::::	main page content
::::::::::::::::
::::::::::::::::	These are defined without the div ID since this is the "main" div.
::::::::::::::*/

p, 
blockquote, 
ol, 
ul, 
li {
	line-height: 1.5em;
}

p {
	margin-bottom: 0.5em;
}

em {
	font-style:italic;
}

strong {
	font-weight: bold;
	font-family: inherit;
	font-size: inherit;
}

/*::::::::::MK130	Headings
:::::::::::::::::
:::::::::::::::*/

/*	H1: main title of an individual page */
h1 {
	font-family: "Arial Black", sans-serif;
	font-weight: normal;
	color: rgb(000,105,166); /* blue heading */
	height: 28px; /* 32px minus top and bottom border minus top padding */
	width: 772px; /* 792 - lborder - rborder - lpad - rpad */
	border: 1px solid #666;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 8px;
	margin-left: -12px; /* undo left padding of content div */
	padding-top: 2px;
	padding-right: 6px;
	padding-bottom: 0;
	padding-left: 12px;
	line-height: 26px;
}

h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, Helv, sans-serif;
	font-weight: bold;
	color: rgb(000,135,045); /* green headings */
	padding-top: 0.25em;
	padding-bottom: 0.5em;
}

h1 {
	font-size: 150%;
} /* Main title of content div AND title of branch navigation */

h2 {
	font-size: 150%;
} /* Next-level heading in content div */

h3 {
	font-size: 133%;
} /*  */

h4 {
	font-size: 115%;
} /*  */

h5 {
	font-size: 100%;
} /*  */

h6 {
	font-size:  85%;
} /*  */

/*::::::::::MK140	Links
:::::::::::::::::
:::::::::::::::*/

a, 
a:link, 
a:active {
	color: rgb(000,105,166); /* blue heading */
	text-decoration: underline;
}

a:visited {
	color: black;
	text-decoration: underline;
}

a:hover {
	color: rgb(000,135,045); /* green heading */
	text-decoration: underline;
}


/* hide links in headings except on hover */
h2 a, 
h2 a:link, 
h2 a:active,
h2 a:visited {
	color: inherit;
	text-decoration: none;
}
h2 a:hover {
	color: inherit;
	text-decoration: underline;
}
h3 a, 
h3 a:link, 
h3 a:active,
h3 a:visited {
	color: inherit;
	text-decoration: none;
}
h3 a:hover {
	color: inherit;
	text-decoration: underline;
}


/*:::::::::MK150	List tags
::::::::::::::*/

/* spacing for both ULs and OLs */
ul, ol {
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 2.0em; /* space for bullet or number */
	list-style-type: none;
	list-style-position: outside;/*border: 3px solid red;*/
	}

/* add padding-top to nested lists to reproduce padding-bottom of LIs  */
ul ul, ol ol, ol ul, ul ol {
	padding-top: 0.5em; /* set = to padding-bottom of LIs */
}

/* spacing for LIs for ULs and OLs */
li {
	text-indent: 0px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0.5em; /* spacing between list items */
	padding-left: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;/*border: green 3px solid;*/
	}

/* spacing for Ps within LIs for ULs and OLs */
li p {
	/* move padding from bottom to top because of nesting within LI */
	padding: 0;
	padding-top: 0.5em;  /* set = to padding-bottom of LIs */
	margin: 0 0 0 0;/*border: 3px blue solid;*/
	}

/* list styles for two levels of ULs and OLs */
ul {
	list-style-image: url(../images/bullet1.png);
}

ul ul {
	list-style-image: url(../images/bullet2.png);
}

ul ul ul {
	list-style-image: url(../images/bullet1s.png);
}

ol {
	list-style-type: decimal;
}

ol ol {
	list-style-type: lower-alpha;
}

/* styles for lists of links */
ul.link {
	list-style-image: url(../images/bullet-link.gif);
}

/*	Apply to any LI that contains a nested UL or OL.
	This fixes double, end-of-item vertical spacing. */
li.with-nested-list {
	padding-bottom: 0;
}

/*::::::::::MK160	Tables
:::::::::::::::::
:::::::::::::::*/

table {
	border-collapse: collapse;
	margin: 0.5em 0 1em 0;
	border-top: 2px solid #ccc;
	border-bottom: 1px solid #ccc; /* 1px gets added to the 1px for the last row bottom */
}

table.captioned {
	/* class required to avoid a FF3.5 bug where margin-top 
	for <table> is applied between caption and first row */
	margin-top: 0;
}

th, td {
	padding: 0.1em 0.5em;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	border-top: none;
	line-height: 1.25em;
}

th p, td p {
	line-height: 1.25em;
}

th {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}

caption {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	text-align: center;
	color: rgb(000,135,045);
}

/*:::::::::MK170	Special Classes
::::::::::::::::
::::::::::::::::
::::::::::::::::
::::::::::::::*/

.rjustify {
	text-align: right;
}

.cjustify {
	text-align: center;
}

/*:::::::::MK180	p.linktotop
::::::::::::::::	for "Back to top" of page links
::::::::::::::::
::::::::::::::*/

p.linktotop {
	font-size: 9px;
	margin-top: 18px;
	padding: 0;
}

p.linktotop a:link, 
p.linktotop a:active, 
p.linktotop a:visited {
	text-decoration: none;
	/*color: #CC7933;*/
	border: 1px dotted #CCC;
	padding: 1px 3px;
}

p.linktotop a:hover {
	text-decoration: none;
	border: 1px solid rgb(000,153,051);
}

/*:::::::::MK190	SIDEBAR class div
::::::::::::::::	sidebars within content div
::::::::::::::::
::::::::::::::*/

/*	desired visible width = 300px	*/
.sidebar {
	width: 274px; /* wsidebar minus L&R border minus padding L&R  */
	float: right;
	margin: 0 0 1em 1em; /* set apart from surrounding text */
	padding: 12px;
	background-color: rgb(232,255,232);
	border: 1px solid #ccc;
}

/*	main heading for sidebar	*/
.sidebar h2 {
	color: white;
	padding: 6px 0.25em 8px 0.25em;
	font-size: 115%;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	margin: -13px -13px 0.5em -13px;
	background-color: rgb(000,135,045);
	text-align: center;
}

.sidebar p, .sidebar li {
	line-height: 150%;
	font-size: 90%;
	font-family: Arial, Helvetica, Helv, sans-serif;
	letter-spacing: 0.03em;
}

.sidebar ul, .sidebar ol {
	margin-left: 1.5em; /* space for bullet or number */
}

.sidebar ul {
	list-style-image: url(../images/bullet3.png);
}

.sidebar a, 
.sidebar a:link, 
.sidebar a:visited, 
.sidebar a:active {
	color: rgb(000,153,051);
	font-family: inherit;
}

.sidebar a:visited {
	color: #333333;
	font-family: inherit;
}

.sidebar a:hover {
	color: rgb(000,124,195);
	font-family: inherit;
}

/*:::::::::MK200	FIGURE class div
::::::::::::::::	figure sidebars within content div
::::::::::::::::
::::::::::::::*/

/*	Explanation:
	The <div> contains an <img> and an optional <p> which is the caption.
	If the <img> is enlargeable, wrap an <a> around it and link to the larger image.
	The <a> link includes styling that displays the small magnifying glass in the lower right corner.
	If there is no <a>, the <p> replaces that padding. 
*/

.figure {
	width: 100%;
	margin: 1em 0 1em 0;
}

.figure img {
/*display: block;*/ 
	}

.figure a {
	display: table-cell; /* table-cell prevents <a> wrapper from being bigger than <img> */
	padding-bottom: 13px; /* make room for background image */
	background-image: url(../images/magnify.png);
	background-repeat: no-repeat;
	background-position: bottom left;
	width: auto;
}

.figure a:hover {
	background-image: url(../images/magnify-hover-text.png);
}

/*	The <p> within the <div> is the caption	*/
.figure p {
	margin-top: 0px;
	font-size: 90%;
	font-family: Arial, Helvetica, Helv, sans-serif;
	font-weight: bold;
	padding-bottom: 0px;
	line-height: 1.25em;
	color: rgb(000,135,045);
}

.figure img + p {
	/* replace <a> padding when there is no <a> (<p> will follow <img>); 
	make this the same as <a> padding-bottom */
	margin-top: 13px;
}

/*::::::::::::::	Add 'side' class to 'figure' to make it a floated sidebar
*/
/*	desired visible width = 300px	*/
.figure.side {
	width: 300px; /* wsidebar */
	float: right;
	margin: 0 0 16px 16px; /* set apart from text on left and bottom */
}

/*:::::::::MK210	STAFFMEMBER class div
::::::::::::::::	contains the bio for a single staff member
::::::::::::::::
::::::::::::::*/

/*	Explanation:
	The <div> should contain an <img> then an <h3> (staff name) then a <table> of information.
*/

div.staffmember {
	margin-left: 3em;
	margin-bottom: 1em;
	border-top: #ccc 3px solid;
}

div.staffmember img {
	float: right;
	margin-left: 1em;
}

/* Staff member name */
div.staffmember h3 {
	color: rgb(000,105,166);
	font-size: 115%;
}

div.staffmember table {
	border-collapse: collapse;
	margin: 0 0 0 2em;
	border: none;
}

div.staffmember th,
div.staffmember td {
	padding: 0.1em 0.25em;
	vertical-align: top;
	border-top: none; /*  1px solid #fff; */
	border-bottom: none;
	line-height: 1.25em;
}

div.staffmember th {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	white-space: nowrap;
	font-size: 85%;
	color: rgb(000,135,045);
}

div.staffmember ul {
	margin-left: 1.25em;
}
div.staffmember ul li {
	padding-bottom: 0;
}

/*:::::::::MK220	COLUMNS class div
::::::::::::::::	for displaying misc content in two or more columns
::::::::::::::::
::::::::::::::*/

/*	Explanation:
	TBW
*/

div.column1of2 {
	float: left;
	width: 390px;
	padding: 0;
	margin: 0 2em 0 0;
}

/*:::::::::MK230	.padpage
::::::::::::::::	for padding the bottom of a page
::::::::::::::::	uwsually for "coming soon" pages
::::::::::::::*/

.padpage {
	padding-bottom: 12em;
}

/*:::::::::MK240	.hidden
::::::::::::::::	for padding the bottom of a page
::::::::::::::::	uwsually for "coming soon" pages
::::::::::::::*/

.hidden {
	display:none;
}

.fineprint {
	font-size: 85%;
	font-family: inherit;
}