/*
oscc.css: home stylesheet
ver. 2.1.0
Part of Open Chamber of Commerce
Web application for organizations

(C) 2005 Richard H. Nilsson
   Waters Gulch Digital
http://watersgulchdigital.com

Released under the GNU General Public License
The GPL can be reviewed in many languages
at http://www.gnu.org/copyleft/gpl.html
*/

/* set default page attributes 
   uses "em" sizing so pages respect user's browser
   defaults; it's an accessibility thing...
*/
body {
	font: .8em/1.3 Verdana, "New Century Schoolbook", serif;
	background:#ffffcb;
	color: #000;
	padding: 0;
	margin: 5;
	height: 100%;
	}
img {
  border: 0;
  }
#create input, #create textarea, #create select,
#edit input, #edit textarea, #edit select {
  border: 1px solid #aaa;
  }
p {
  margin: .25em 0 .75em 0;   /* t r b l */
  }
/* define anchor look and feel */
a, a:visited {
	font-weight:500;
	color:#000099;
	}
/* uncomment if you like borders around linked images */
/*
a img {
  border: 2px solid #473;
  }
*/
h1 a {
  }
h1 {
	font: 2em/1.0 verdana,arial,helvetica,sans-serif;
	font-weight:700;
	color:#261f7f;
	}
h2 {
	font: 1.5em/1.0 verdana,arial,helvetica,sans-serif;
	font-weight:700;
/*	color:#693;  */
    color:#261f7f;

	margin: 1em 0 0 0;  /* t r b l */
	}
dl {
  margin: 0 0 0 2em;
  }
dt {
  font-weight: 700;
  margin: 1em 0 0 0;
  }
#docs {
  list-style-image: url(../i/doc.gif);
  }
.dropcap {
	float: left;
	padding: 2px;
	margin:0 4px 0 0;  /* t r b l */
	font: 50px/.75 Verdana,Arial,Helvetica,sans-serif;
	font-weight: 700;
	color: #261f7f;
	}

/* Major block construction rules (except for #mainnavs, below) 
   widths based on a standard of 16pixels/em @ 96ppi video rez   */
#masthead {
	position: relative;
	top: 0;
	left: 0;
	width: auto;
	height: 306px;
	background-image: url(../i/mastbackY2.jpg);
	}
#masthead2 {
  position: relative;
	top: 0;
	left: 0;
	width: auto;
	height: 306px;
	background-image: url(../i/mastbackY2.jpg);
	}
#today_date {
  position: relative;
  left: 10%;
  top: -39px;
  margin-top: 0;
  font-family: helvetica,arial,sans-serif;
  font-style: normal;
  color: #143648;  
  }
#powered_by {
  position: absolute;
  top: 132px;
  left: 80%;
  font-family: helvetica,arial,sans-serif;
  font-style: italic;
  color: #aa6;
  }
.pb_ococ {
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  color: #dd9 !important;
  text-decoration: none;
  }
#logo {
  position: relative;
  top: 20px;
  margin: 0;
  padding: 0;
  width: 65%;
  border-bottom: 2px dotted #f2f2cd;
	font: 2em/1.0 verdana,arial,helvetica,sans-serif;
	font-weight:700;
	color:#261f7f;
	margin: 1em 0 0 7%;  /* t r b l */
  }
#logo2 {
  position: relative;
  top: 20px;
  margin: 0;
  padding: 0;
  width: 65%;
  border-bottom: 2px dotted #f2f2cd;
  font: 2em/1.0 verdana,arial,helvetica,sans-serif;
  font-weight:700;
  color:#261f7f;
  margin: 1em 0 0 7%;  /* t r b l */
  text-decoration: none;
  }
#cities { 
  display: none;
  }
#homelnk {  /* page-top link to home page (index page) */
  position: absolute;
  display: block;
  top: 8em;
  left: 7%;
  Margin: 0 auto;
  font: .9em/1.0 helvetica,arial,sans-serif;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  }
#top_b4nner_4d { /* top_banner_ad (using 4's defeats ad blockers) */
  text-align: center;
  font-size: 10px;
  font-family: helvetica, arial, sans-serif;
  color: #999;
  padding: 1px;
  margin: 1em 0 2em 0;  /* t r b l */
  width: 80%; /* if border is not used, set to 80% */
  border: 1px solid #ddc;
  }
#side_b4nner_4d { /* side_banner_ad (using 4's defeats ad blockers) */
  position: relative;
  left: -9px;
  float: right;
  top: 2em;
  margin: 0;
  /*
  border: 1px solid #473;
  border-right: 2px solid #063;
  border-bottom: 2px solid #063;
  */
  width: 22%;
  height: auto;
  text-align: center;
  color: #261f7f;
  }
#main, #pbody {  /* contains all but masthead and mainnavs */
  position: relative;
  top: 15px;
  left: -5px;
  margin: 0;
  width: 99%;
  padding-top: 1em;
  }
#news, #bottom { /* shared styles for content blocks */
  position: relative;
  top: 0;
  left: -30px;
  margin: 0;
  width: 99%;      
  padding: 0 0;    /* t/b l/r */
  clear: left;
  height: auto;
  }
#news2 { /* PGS styles for ad blocks */
  position: relative;
  top: 0;
  left: -30px;
  margin: 0;
  width: 80%;      
  padding: 0 0;    /* t/b l/r */
  clear: left;
  height: auto;
  }
#newsright { /* PGS styles for ad blocks */
  position: relative;
  top: 0;
  left: -30px;
  margin: 0;
  width: 80%;      
  padding: 0 0;    /* t/b l/r */
  clear: left;
  height: auto;
  }
#promo2 { /* PGS promo in left column */
  position: relative;
  top: +10px;
  left: 30px;
  /* float: left; */
  width: 65%;
  margin: 0 1% 1em 0; /* t r b l */
  }
#brk, #com, #cha, #promo { /* index.php only - news and events blocks */
  position: relative;
  left: -30px;
  float: left;
  width: 38%;
  margin: 0 4% 1em 0; /* t r b l */
  }
#optional {  /* home page (index.php) only, optional section block */
  position: relative;
  left: -30px;
  float: left;
  width: 74%;
  margin: 0 1% 1em 0; /* t r b l */
  }
#com2 {  /* home page (index.php) only, optional section block */
  position: relative;
  float: left;
  width: 22%;
  margin: 0 1% 1em 0; /* t r b l */
  }
.newstab a {  /* home page only - decorative titles for news blocks */
  margin: 0 0 0 0;
  font: 1.5em/1.0 helvetica,arial,sans-serif;
  font-weight: 700;
  color: #261f7f;
  text-decoration: none;
  padding: 2px 1em 2px 2px;
  background-image: url(../i/news-arw-grn-sh.gif);
  background-image: url(../i/sub-arw-grn.gif);
  background-repeat: no-repeat;
  background-position: 100% 50%;
  border-bottom: 1px dotted #261f7f;
  display: block;
  width: 80%;
  }
.newstab a:visited {
  font-weight: 700;
  color: #261f7f;
  }
#optional p.newstab a {
  display: block;
  width: 90%;
  }
#dirq {  /* non-index page body-content section */
  position: relative;
  top: -15px;
  float: left;
  left: -30px;
  width: 72%;
  margin-right: 2%;
  height: auto;
  padding: 0;
  }
#botnav {  /* footer navigation and email stuff */
  position: relative;
  margin: 1em auto 0 auto;
  width: 480px;
  left: -20x;
  height: auto;
  padding: 0;
  text-align: center;
  clear: left;
  }
#botnav a {  /* footer navigation link style */
  font-family: helvetica,arial,sans-serif;
  color: #090;
  }
#foot { /* top and bottom parts of footer, respectively */
  position: relative;
  float: left;
  margin: 2em auto 0 auto;
  height: auto;
  left: -2%;
  width: 80%;
  font-family: helvetica,arial,sans-serif;
  font-size: .85em;
  text-align: center;
  clear: all;
  }
#footp { /* top and bottom parts of footer, respectively */
  position: relative;
  float: left;
  margin: 2em auto 0 auto;
  height: auto;
  left: -8%;
  width: 80%;
  font-family: helvetica,arial,sans-serif;
  font-size: .85em;
  text-align: center;
  clear: all;
  }
#foot a {  /* footer links */
  color: #261f7f;
  }
.foothr {  /* footer horizontal rule */
  position: relative;
  width: 100%;
  font: 0px/0.0 sans-serif;  /* weird, but needed for IE to collapse the block */
  clear: both;
  margin: -10 auto;
  border-top: 2px solid #261f7f;
  border-bottom: 1px solid #999;
  }
#titlesubs {    /* non-index page subtitle and subnav block */
  position: relative;
  float: left;
  top: 1em;
  margin: 0;
  border: 1px solid #261f7f;
  border-right: 2px solid #261f7f;
  border-bottom: 2px solid #261f7f;
  width: 25%;
  height: auto;
  text-align: center;
  background-image: url(../i/ococ-grn2.gif);
  background-position: 50% 95%;
  background-repeat: no-repeat;
  }
.title {  /* page subnav column title */
  margin: 0;
  padding: .5em;
/*  background: #693;  */
  background: #261f7f; 
  background: transparent;
  font: 1.2em/1.0 helvetica,arial,sans-serif;
  font-weight: 700;
  color: #261f7f;
  border-bottom: 1px dotted #261f7f;
  }
#titlesubs ul {  /* subnav link list style */
  list-style: none;
  margin: 0 0 0 0;
  padding: 0;
  padding: .5em;
  font: .85em/2.0 helvetica,arial,sans-serif;
  }
#titlesubs a {
  text-decoration: none;
/*   color: #063;  */
  color: #261f7f; 
  }
#search_blank {
  position: relative;
  left: 57%;
  width: 43%;
  top: -34px;
  margin-top: 0;
  font:10px/1.0 helvetica,arial,sans-serif;
  color: #386386;
  }
#search_blank_term {
  font-size:10px !important;
  background: #ffffff;
  color: #000;
  border: 0px solid #ddc !important;
  }
#search_blank form {
  margin: 0;
  }
.about_searching {
  font: 9px/1.0 helvetica,arial,sans-serif;
/*  color: #f6a921 !important; */
  color: #386386 !important; 
  text-decoration: none;
  }
/* control size and spacing of browsing lists */
#browse { 
  width: 100%;
  border-spacing: 0 .5em;
  }
td.browse {
  vertical-align: top;
  margin: .5em 0;
  padding: 0 .5em;
  border-right: 1px solid #090;
  }

/* buttons for editors to click on */
.button {
  background: #9c3;
  color: #fff;
  font: 10px/1.2 helvetica,arial,sans-serif !important;
  font-weight: 700;
  font-style: italic;
  padding: .2em .3em .1em .1em;   /* t r b l */
  text-decoration: none;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
  }
.button, .button:visited {
  color: #fff;
  }
.editbut {
	font: 10px/1.0 helvetica,arial,sans-serif !important;
	font-weight: 700 !important;
	color: #666 !important;
	padding: 0 2px;
	background: #faa;
	border: 2px solid #fc6;
	border-right: 2px solid #a66;
	border-bottom: 2px solid #a66;
	text-decoration: none;
  }
.editnotbut {
	font:9px/1.0 helvetica,arial,sans-serif;
	font-weight:500;
	color:#999;
	padding: 0 2px;
	background: #faa;
	border: 2px solid #fc6;
	border-right: 2px solid #a66;
	border-bottom: 2px solid #a66;
  text-decoration: line-through;
  }
.newbutton {
	font: 10px/1.0 helvetica,arial,sans-serif !important;
	font-weight: 700 !important;
	color: #666 !important;
	padding: 0 2px;
	background: #ae6;
	border: 2px solid #ce6;
	border-right: 2px solid #6a6;
	border-bottom: 2px solid #6a6;
	text-decoration: none;
  }

/* Control look of content article elements */
.headline {
  font-size: 1.3em;
  }
.deck {
  font-size: 1em;
  font-style: italic;
  font-weight: 500;
  }
.cbody {
  font-size: 1em;
  height: auto;
  margin: 0;
  }
.byline {   /* style of article byline date invoked by {BYLINE} */
  font: .85em/1.0 helvetica,arial,sans-serif;
  font-style: italic;
  color: #090;
  }
.pdate {   /* style of article posted date invoked by {DATE} */
  font: .85em/1.0 helvetica,arial,sans-serif;
  font-style: italic;
  color: #090;
  }
td.capt, p.capt {   /* article image caption style */
  font: .85em/1.0 helvetica,arial,sans-serif;
  font-style: italic;
  }
.show1 {
  clear: both;
  }

/* Use these to float images in text blocks */
.floatr {
  float: right;
  margin: 0 0 0 .5em;   /* t r b l */
  }
.floatl {
  float: left;
  margin: 0 .5em 0 0;   /* t r b l */
  }

/* treatment of form required entries */
.req {
  font-weight: 700;  /* bold */
  }

/* color of recurring event dates */
.recur {
  color: #090;
  }

/* How the calendar looks on event pages */
#calendarBox {
/*
  border-top: 1px solid #393;
  border-bottom: 1px solid #393;
*/
  }
.calendarToday {
  color: #fff;
  background: #393;
  }
.calendarHeader {
  font-family: helvetica,arial,sans-serif;
  font-size: .9em;
  font-weight: 500;
  color: #261f7f;
  }
.calendarDay  {
  margin: 0;
  }
.calendarToday a, .calendarDay a {
  text-decoration: underline !important;
  }

/* not used in this style */
#mainmenuname {
  display: none;
  }

/* styles for member listings */
.higher, .higher a, .preferred, .preferred a {
  font-weight: 700;
  }
.preferred {
  font-style: italic;
  }

/*             P O P O U T  C S S                    */
/*      Makes lists into navs with CSS pop-outs      */
#mainnavs {
  position: relative;
  top: -0px;
  left: 20px;
  width: 14em;
  height: auto;
  font: .9em/1.0 helvetica,arial,sans-serif;
  background: #2f5170;
  padding: 3;
  border: 2px solid #68b7d8;
  z-index: 7;  /* make sure navs are on top of all other content */
  }
#mainnavs a:visited {
  color: #ffffff;
  }
#mainnavs ul { /* all lists */
	margin: 0;
	list-style: none;
  }
#mainnavs>#nav {      /* non-IE browsers only */
  padding-left: 0;
  }
#mainnavs li { /* all list items */
  padding: 0;
  margin: 0 0 1em 0;
  display: block;
  font-weight: 700;
/*	border: 0px solid #fff; */
  }
#mainnavs li ul { /* second-level lists */
	display: none;
	position: absolute;
	background: #2f5170;
	border: 2px solid #2f5170;
	left: 14em;       /* offset of submenu block from li -- IE only */
	margin: -1.7em 0 0 0;
	padding: 3;
	width: 11em;
  z-index: 8;  /* make sure navs are on top of all other content */
  }
#mainnavs li ul li { /* all sub list items */
  padding: 0;
  margin: 0;
  display: block;
  font-weight: 700;
	border: 0px solid #fff;
  }
#mainnavs li > ul { /* to override top and left in browsers other than IE */
	top: auto;
	left: 10.75em;       /* offset of submenu block from li */
	margin: -1.7em 0 0 0;
  }
#mainnavs li a { /* un-hovered menu item appearance */
  display: block;
  font-weight: 700;
	padding: 2px .6em;
  text-decoration: none;
  color: #ffffff;
  margin: 0;
  }
#mainnavs li ul a { /* un-hovered 2nd level item appearance */
  display: block;
  font-weight: 700;
  padding: 8px .7em;
  text-decoration: none;
  margin: 0;
  }

/* additional sub-menu levels in the next 2 blocks. (For up to 5 levels of drop menus) */
/* first turn lower ones off... */
#nav li:hover ul ul,              
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul,
#nav li:hover ul ul ul ul ul {
  display:none;
  }

#nav a {
  border: 0px solid #fff;
  }
/* highlight the hovered element */
#nav a:hover, #nav li:hover {
	/* border: 1px solid #ccc; */
  }
#nav li>a:hover {
	border: 1px solid #68b7d8;
  }

/* now turn hovered one on... */
#nav li:hover ul,
#nav ul li:hover ul,
#nav ul ul li:hover ul,
#nav ul ul ul li:hover ul,
#nav ul ul ul ul li:hover ul {
  display:block;
  }
/*              end of dropdowns CSS             */

/* highlight the current page nav */
.here {
  background-image: url(../i/news-arw-grn-sh.gif);
  background-repeat: no-repeat;
  background-position: 100% 50%;
  border-bottom: 1px dotted #090;
  color: #555 !important;
  }

.sub {  /* arrow denotes child menu here */
  background-image: url(../i/sub-arw-grn.gif);
  background-repeat: no-repeat;
  background-position: 95%;
  }

form.eform {
  z-index:20;
  border:2px solid #900;
  background:#fff;
  padding:.5em;
  width: 95%;
}
form.eform, .symform label {
  font-family: sans-serif;
  font-size: 12px !important;
  }
form.eform input {
  border: 1px solid #aaa;
}

/*
+---------------------------------------------------------------
|  Styling to eliminate the need for tables to pretty up forms
+---------------------------------------------------------------
*/
/*
  This stylesheet is used primarily by the block/contact.php
  info-request form. It produces a more semantically-correct
  table-less form for design purists.
  If you find it unsuitable for the browsers your clientele
  use, you can rename the contact.php to something else,
  and then rename contact-orig.php to contact.php

	In the following section, many of the values must be changed 
	in reference to another.Items labeled as 'subjective' are not 
	dependent and may be easily changed as you see fit.
*/
form.symform {
  margin: 0 0 0 0;  /* t r b l */
  width: 100%;
  }
form.symform label { 
	width: 110px; /* label width *//* label margin = (input left margin) - (label width) */
	margin-right: 10px; /* label margin */
}
form.symform label.long, form.symform p.label {
	margin-left: 120px; /* subjective */
	width: 290px; /* (textarea width) + (label width) + (label margin) - (left margin) */
}
form.symform label span {
	color: #900; /* color of 'required' asterisk */
}
form.symform input, form.symform textarea, form.symform select {
	margin-left: 120px; /* (label width) + (label margin) */
	width: 200px; /* subjective */
}
form.symform p.desc {
	margin-left: 110px; /* (label width) + (label margin) */
}
form.symform .checks label {
	margin-left: 120px; /* (label width) + 2(label margin) */
}
form.symform .checks input {
	margin-left: 110px; /* (label width) + (label margin) */
}

/*
	The following makes Internet Explorer 6.x play nicely. 
	These fix the double float margin bug.
*/
* html form.symform .checks input { 
	margin-left: 50px;  
}
* html form.symform .checks label { 
	margin-left: 120px; 
	height: 1em; 
}

form.symform label {
	/* 
		A label must precede the form element in the HTML
		You must keep the top padding for some browsers to keep the label and the form element looking on the same line
	*/
	float: left;
	text-align: left;
	padding-top: 0.2em;
	font-size: 1em;
}

form.symform label:after { 
	/* 
		Creates a ":" after LABELs. This only works in some browsers 
	*/
	content: ": "; 
}

form.symform label.long {
	/*
		If your label text does not fit in the left-hand side, consider this class
	*/
	float: none;
	display: block;
	text-align: left;
}

form.symform label.long:after {
	content: "";
}

form.symform input, form.symform textarea, form.symform select {
	/*
		These items must immediately follow the LABEL item associated with it 
		and followed by a BR (see below).
		The following width must be 10pixels wider than the width of the LABEL.
	*/
	display: block;
	margin-bottom: -0.5em;
}
form.symform select[multiple="multiple"] {
	/*
		Mozilla has some weird concept of how to display multiple select boxes.
		For some reason, display: block; does not affect it.
		For more information, see https://bugzilla.mozilla.org/show_bug.cgi?id=342531
		This fixes that problem. DON'T FORGET YOUR BR TAG AFTER SELECT!
	*/
	margin-left: 0px;
}
form.symform br { 
	/* 
		Always include a BR tag at the end of a line of items -- generally immediately following one of an INPUT, SELECT or TEXTAREA.
		Within div.checks, include the BR after the LABEL
	*/
	clear: left;
} 

form.symform .dates {
  margin-left: 0;
  width: auto;
  padding: 0;
  }

form.symform label.no_colon:after {
  content: "";
  }

form.symform input[type="radio"], form.symform input[type="checkbox"], 
form.symform input[type="hidden"] { 
	/* 
		Keeps Mozilla browsers (and others) from making the RADIO and CHECKBOXES too wide and/or tall.
		Also removes unnecessary borders from these browsers (They don't respond as expected) 
	*/
	width: auto; 
	height: 1em; 
	border: 0;
}

form.symform input[type="button"], form.symform input[type="submit"] {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
  }
form.symform input {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
  }
form.symform .sec_col {
  margin: 0 0 0 120px;   /* t r b l */
  }

form.symform input[type="hidden"] {
	/*
		Firefox doesn't want to make them actually hidden, so I'll force it.
	*/
	display: none;
}

form.symform p.desc {
	/*
		Use this immediately following an item that needs a longer description than can be handled by the LABEL.
		The left margin should be the same as INPUT, TEXTAREA and SELECT objects.
	*/
	display: block;
	margin-top: -0.4em;
	margin-bottom: 1em;
	font-style: italic;
	font-size: 0.9em;
}

/* 
	The following section is for reversing the display of CHECKBOX and RADIO INPUTs.
	It is highly recommended to use FIELDSET over DIV when there are multiple items.
	In the section, the INPUT precedes the LABEL and the BR comes last (after the label).
*/
form.symform .checks label {
	/*
		Overrides for previously defined stuff and changes.
		Left margin must be 10pixels more than "form.symform input, 
		form.symform select" etc.
	*/
	float: left;
	width: auto;
	clear: none;
	text-align: left;
	height: 2em;
	padding-top: 0;
	margin: 0 1em -1em 0;  /* t r b l */
}
form.symform .checks label:after { 
	/* 
		Makes the ":" not generated after the LABEL. 
	*/
	content: ""; 
} 
form.symform .checks input {
	/*
		Left margin is the same value as "form.symform input, form.symform select" etc.
	*/
	margin: 0;
	float: left;
	text-align: right;
	width: auto;         /* for !@#* IE */
}
/*  End reverse checks/radios section */


/*
	This fixes the
	"IE sucks, so it redraws the top border 
	all over the fieldset like a jerk bug."
*/
* html form.symform input, * html form.symform textarea, * html form.symform select,
* html form.symform .checks input, * html form.symform .checks label, 
* html form.symform p.desc {
	margin-top: 0;
	margin-bottom: 0;
}
* html form.symform br {
	/*
		Hooray! We have a fix!
		For some crazy reason, IE lets me style its BR tag.
	*/
	line-height: 0.5em;
	font-size: 0.5em;
}