@charset "utf-8";
/* File: pnwvhfs.css for responsive design */
/* Site: www.pnwvhfs.org   */
/* Author: barry@k7bwh.com */

/* ----- entire page default appearance ----- */
body {
	font: Arial, Helvetica, sans-serif;
	font-size: 87.5%;	/* 14px / 16px default */
	font-weight: normal;
	color: white;
	background-color: black;
	text-align: left;
}
body.conference {
	background-image: url("/img/zertxtr.gif");
}
img {
	max-width: 100%;	/* flexible banner size */
}
main { }
header { }
img.banner {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
footer {
	clear: both;
	margin-top: 2.0em;
	color: #aaa;	/* same as #cssmenu */
	background-color: #2b2f3a;	/* same as #cssmenu */
}
.container {
	/* responsive size to fit page */
	/*width: 92%;	/* assume 960px */
	max-width: 960px;
	margin: 0 auto;
	padding: 0 0;
}
.leftnav {
	width: 16.45833333333333%;	/* 158px / 960 container */
	float: left;
	min-width: 100px;
	/*border: 1px dotted yellow;	/* debug */
}
.content  {
	/*width: 83.125%;	/* 798px / 960px container */
	/*float: right; */
	/*border: 1px dotted green;	/* debug */
}
article {
	position: relative;	/* provide anchor for positioning enclosed div's */
	padding: 1em 1em;
}
/* ----- navigation box in corner of page ----- */
div.shortcutnav {
	/* use this to overlay: */
		/*position: absolute;
		right: 12px;
	/* use this to be in page flow: */
		float: right;
	padding: 0 0.5em;
	-webkit-box-shadow: 0 0px 8px rgba(200, 200, 200, .5);
	-moz-box-shadow: 0 0px 8px rgba(200, 200, 200, .5);
	box-shadow: 0px 0px 8px rgba(200, 200, 200, .6);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-size: 12px;
	background-color: black;
}
.shortcutnav p {
	margin: 0;
	padding: 0;
}
.content ul.navbox {
	margin: 0;
	padding-left: 12px;
}
.content ul.navbox li {
	margin: 0;
	padding-bottom: 0;
}

/* ----- heading ---------------------- */
header {
	background-image: url(../logos/banner_background.jpg);
	background-repeat: repeat-x;
}
/* ----- default paragraph styles ----- */
p { padding-bottom: 1em; }
td { vertical-align: top; }
ol { list-style-type: decimal; margin-left: 2em; margin-bottom: 1em; }
ol li { padding-bottom: 1em; }

/* ----- default link colors ----- */
a { color: yellow; text-decoration: none; }
a:link    { }
a:visited { }
a:hover   { color: #FC0; text-decoration: underline; }
a:active  { }

/* ----- horizontal top nav -------------------- */
nav.horizontal {
	max-width: 960px;	/* same width as .container */
	margin: 0 auto;
}
.topnav {
	width: 100%;
	font-weight: normal;
	font-size: 0.9375em;	/* 15px / 16px body */
	/*border: 1px dotted red;	/* debug */
}
.topnav ul {
	margin: 0;
}
.topnav li {
	display: inline-block;
	list-style: none;
	padding: 0 0.8em;
	/* border: 1px dotted green;	/* debug */
}
.topnav .top-level li a {
	text-decoration: none;
	color: #c0c0c0;		/* light gray (was white) */
}
.topnav .top-level li a:hover {
	color: #ffcc00;
	text-decoration: underline;
}
span.active,
.topnav li.active span {
	color: black;
	background-color: #ffcc00;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 0.15em 0.8em;		/* add space between text and oval background */
}
.topnav li.active {
	position: relative;
	top: 0.5em;
}
.topnav li.active a {
	color: black;
}
.topnav ul.sub-level li {
	border-top: 1px solid #ffcc00;
}
.topnav ul.sub-level li.active {
	position: relative;
	top: 0;
}
.topnav .sub-level li a {			/* for nested nav inside active topic */
	color: #c0c0c0;
}

/* ----- vertical sitenav list positioning ----- */
nav.vertical {
	/*display: none;*/
}
div.leftnav {
	border: 1px dotted red;	/* debug */
}
.top-level {
	padding: 0;
}
.top-level li {
	list-style: none;
	padding-top: 0.5em;	/* = 8px / 16px */
	padding-bottom: 0.5em;
}
ul .sub-level {
	display: block;
	/* padding-left: 10px; */
	padding-left: 1.5em;	/* = 24px / 16px */
}
.sub-level li {			/* for nested nav inside active topic */
	padding-bottom: 0px;
}
ul .sub-level-hide {	/* for nested nav items, inactive topics */
	display: none;
	/* padding-left: 12px; */
}

/* ----- sitenav link coloring ----- */
.leftnav li.active span {
	color: black;
	background-color: #ffcc00;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 0 5px;		/* add space between text and oval background */
	margin-left: -5px;	/* same as padding-right, to return text to matching indentation */
}
.leftnav .top-level li a {
	text-decoration: none;
	color: #c0c0c0;		/* light gray (was white) */
	font-weight: normal; /* bold; */
	font-size: 0.9375em;	/* 15px / 16px body */
}
.leftnav .top-level li a:hover {
	color: #ffcc00;
	text-decoration: underline;
}
.leftnav li.active a:hover {
	color: black;
	background-color: #FC0;
	text-decoration: none;
}
.leftnav .sub-level li a {
	color: #c0c0c0;
	font-size: 0.9375em;	/* 15px / 16px body */
	background-color: black;
}
.leftnav .sub-level li a:hover {
	color: #ffcc00;
	background-color: black;
	text-decoration: underline;
}
.leftnav .sub-level .active a {
	color: black;
	background-color: #ffcc00;
	border-radius: 5px;
	-moz-border-radius: 5px;
}
/* ----- main content ----- */
article { line-height: 150%; }

h1 {	/* for page titles, normally only a single <h1> at top of page */
	font-size: 1.5em;	/* 24px / 16px body = 150% = 1.5em */
	font-weight: bold;
	line-height: 140%;
	color: #ffcc00;	/* gold */
	text-align: center;
	/*line-height: 1.5em;*/
	padding-top: 0.3em;	/* 24px / 16px body = 150% = 1.5em */
	padding-bottom: 0.2em;	/* 16px / 16px body */

	text-decoration: none;
	/*border: 1px dashed red;	/* debug */
}
h2 {	/* for main subtopics under <h1> */
	font-size: 1em;	/* 16px / 16px body = 1.0em */
	color: #ffcc00;	/* gold */
	text-decoration: underline;
	text-align: center;
	padding-bottom: 0.75em;	/* 12px / 16px */
}
h3 {	/* for sections INSIDE an <h2> */
	color: #ff9933;	/* orange */
}
h4 {	/* for introducing sections in a table */
	color: #cc9900;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-style: italic;
}
/* ----- title bar ----- */
.titlebar {
	position: relative;
	/*margin-top: 1.25em;*/
	padding: 0 15px;
	background-color: #2b2f3a;
	/*border: 1px dotted yellow;	/* debug */
}
.prevnext {
	display: inline-block;
	padding-right: 12px;
	/*border: 1px dotted yellow;	/* debug */
}
.prevnext button {
	color: white;
	background-color: #777;
	/* http://stackoverflow.com/questions/710089/how-do-i-make-an-html-link-look-like-a-button */
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border-width: thin;
	margin-top: 2px;
	padding: 2px 5px;
	text-decoration: none;
}
.next {
	margin-left: 6px;
}
.breadcrumb {
	display: inline-block;
	padding: 0;
	/*border: 1px dotted green;	/* debug */
}
.breadcrumb a { color: #f22; }
.breadcrumb a:hover { color: #fc0; }
.lastupdate {
	display: inline-block;
	float: right;
	padding: 0;
	color: #e11;
	/*border: 1px dotted blue;	/* debug */
}
a.register {
	background-color: #009900; /* Green */
	border: 1px solid #aaa;
	border-radius: 4px;
	color: white;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
}

/* ----- Conference Proceedings ----- */
.timetravelbar {
	position: relative;
	margin-top: 4px;
	padding: 4px 0px 4px 32px;
	background-color: #2b2f3a;
	/*border: 1px dotted yellow;	/* debug */
}
.timetravelbar a {
	color: white;
}
.groupphoto {
	/* container div to center image, which is possibly nudged left by the shortcutnav box */
	width="100%";
	text-align: center;
}
.conferencedate {
	color: #00ff00;	/* same as .brightgreen */
	font-size: 20px;
	font-weight: normal;
	text-decoration:none;
}
.conference article {
	background-color: black;
}
.conference p {
	clear: both;
}
.conference .photo {
	margin-bottom: 1.5em;
}
.awards h3 {
	clear: both;
	color: #00ff00;
	font-weight: normal;
	font-size: 16px;
	padding-top: 0.1em; } */

}
dl.conference dt {
	clear: both;
	margin-left: 4em;	/* same as <ul> indentation */
	width: 17em;
	float: left;
	/*border: 1px dotted yellow;	/* debug */
}
dl.conference dd {
	padding-left: 10em;
	padding-bottom: 0.5em;
	/*border: 1px dotted green;	/* debug */
}
/* <hr> rule style from http://css-tricks.com/examples/hrs/ */
hr {
	border: 0;
	height: 1px;
	background: #333;
	background-image: -webkit-linear-gradient(left, #333, #aaa, #333);
	background-image: -moz-linear-gradient(left, #333, #aaa, #333);
	background-image: -ms-linear-gradient(left, #333, #aaa, #333);
	background-image: -o-linear-gradient(left, #333, #aaa, #333);
}
div.captionbox {
	display:inline-block;
	width: 10em;	/* 160px / 16px body */
	text-align: center;
}
p.caption { }
blockquote { color: #ff9933; font-weight: bold; }

.caption { color: white; font-size: 12px; padding-left: 4px; }
.codeexample { font: "Courier New", Courier, monospace; color: #00ff00; }
.bold    { font-weight: bold; }
.italic  { font-style: italic; }
.center  { text-align: center; }
.centerdiv { margin-left: auto; margin-right: auto; }
.larger  { font-size: 15px; }

.white   { color: white; }
.gold    { color: #FC0; }
.darkgold { color: #a80; }
.orange  { color: #ff9933; }
.cyan    { color: #0CF; }
.blue    { color: #33CCFF; }
.brightgreen { color: #00ff00; }
.green   { color: #66FF99; }
.purple  { color: #96F; }
.kahki   { color: #FFFFCC; }
.red     { color: #aa0000; }
.review { color: #aa0000; font-style: italic; }
.grey    { color: #777; }

.floatleft { float: left; margin-right: 0.75em; }
.floatright { float: right; margin-left: 0.75em; }
.clearall { clear: both; }

blockquote { margin-left: 4em; padding-bottom: 1em; }

.content ul li {
	margin-left: 16px;
	padding-bottom: 0.5em;
	list-style-type: disc;
	list-style-position: outside;
}
.content ul li li { list-style-type: circle; }
.warning { color: #0e0; font-size: 12px; }
.error   { color: #ff2222; background-color: #006; font-weight: bold; }

/* ----- home page ----- */
.frontpageimage2 {
	position: relative;		/* allows inner <p> to be positioned relative to this div */
	background-color: #222;
	border: 1px solid #444;	/* debug */
}
.frontpagenews2 {
	position: relative;		/* allows inner <p> to be positioned relative to this div */
	background-color: #222;
	border: 1px solid #444;	/* debug */
}
.frontpageimage2 p { background-color: #222; }
.frontpageimage2 p a { background-color: #222; }
.frontpagenews2 p { background-color: #222; padding-left: 4px; }
.frontpagenews2 p a { background-color: #222; }
.date { color: #FC0; background-color: #222; }
.seemore {
	/* show box under image+caption, and under news */
	background-color: #222;
	width: 98%;
	text-align: center;
	position: absolute;
	bottom: 0; 
	padding: 0;
	margin: 0;
	border-top: 1px dotted #666;
}
.seemore a { background-color: #222; }
.seemore2 {
	/* show box under image+caption, and under news */
	background-color: #222;
	/*width: 98%;*/
	text-align: center;
	/*position: absolute;
	bottom: 0; 
	padding: 0;
	margin: 0;*/
	border-top: 1px dotted #666;
}
.seemore2 a { background-color: #222; }

/* ----- officers, directors, and staff ----- */
.staff b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

/* ----- membership roster ----- */
table.roster-table {
	margin-top: 12px;
	margin-bottom: 24px;
}
.roster-table th {
	color: #ff9900;	/* orange */
	font-weight: bold;
}
.roster-table td {
	padding-right: 8px;
}

/* ----- beacons ----- */
.doubleline {
	border: double;
	padding: 16px;
}
table.thinline th {
	color: #ff9900;	/* orange */
	vertical-align: bottom;
	padding: 2px 8px 2px 8px;
}
table.thinline td {
	border: 1px solid #222;
	padding: 2px 0.8em 2px 0.8em;
}
table.thinline h2 {
	/*color: #96F;*/
	text-align: left;
	padding: 0;
	margin: 0;
	text-decoration: none;
}
table.thinline .name { font-weight: bold; }
table.thinline .freq { text-align: center; }

table.noline td {
	padding: 2px 16px 2px 0px;
}

/* ----- news ----- */
div.post {
	clear: both;
	margin-top: 16px;
	padding-top: 4px;
	border-top: 1px solid #088;
}
div.post h2 {	/* h2 = date */
	font-size: 16px;
	text-decoration: none;
	float: right;
	padding-bottom: 0;
}
div.post h3 {	/* h3 = author */
	font-size: 12px;
	font-style: normal;
	text-decoration: none;
	padding-left: 60px;
	padding-bottom: 1em;
	clear: both;
	float: right;
}
div.post h4 {	/* h4 = storytitle */
	font-size: 16px;
	color: #0FF;
}
div.post p {
}

/* ---------- scores ------------------------------------ */
td.score { text-align: right; }
.footnote {
	font-size: 13px;
	color: #0b0;
}
table.band-designators {
/*	width: 75%; */
	text-align: center;
}
table.band-designators td { color: gold; }
table.band-designators td.freq { padding: 0 2px 0 18px; text-align: right; }
table.band-designators td.band { padding: 0 18px 0 2px; text-align: left; }

/* ---------- a very simple image presentation ---------- */
/* example:                                               */
/*   <a href="pic1.jpg"><img src="thumb/pic1.jpg" /></a>  */
/*   <a href="pic2.jpg"><img src="thumb/pic2.jpg" /></a>  */

.imagegrid img { margin: 4px; }
.imagegrid a img { border: 1px solid #860; }

/* ---------- join online form ---------- */
.rounded-corners {
	padding: 20px 14px 20px 32px;
	width: 610px;
	background-color: #222;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-khtml-border-radius: 15px;
	border-radius: 15px;
}
.req { color: #ff4444; }	/* required input form data */
.input_title {
	text-align: right;
	vertical-align: top;
	padding-top: 1px;
	padding-right: 12px;
}
.input_data input {
	margin-bottom: 6px;
	color: black;
}

/* ----- footer ----- */
.copyright {
	padding: 1.0em 3em 1.0em 3em;
	font-size: 12px;
	text-align: center;
	color: #aaa;	/* same as #cssmenu */
}
.copyright a { color: #808080; text-decoration: none; }
.copyright a:hover { color: yellow; }

@media print {
	.leftnav { display: none; }
	h1, h2, h3, h4 { color: #004; }
	div.post h4 { color: #004; }
	.gold, .darkgold { color: #004; }
	.green, .brightgreen { color: #040; }
	.date { color: #400; font-weight: bold; }
	a { color: #004;}
	blockquote { color: #663300; }
	.icon { display: none; }

}