/*	NATCON Layout Stylesheet
	August 2008 - Daniel Jones
	Floating, fluid 3-column layout with header and footer  */

/* MAIN */

.MAIN {}

body {
	border-width: 0;
	margin: 0;
}

/* table {   border: solid 2px red; }
td { border: dotted 1px red; }
span { border: double 3px orange; background: #ffe0cc; }
div { border: solid 3px yellow; background: lightyellow; }
p { border: solid 3px aliceblue; background: aliceblue; }
div.container#body { border: solid 2px blue; background: none; }
div.container#leftcol, #leftColumn { border: solid 2px aqua; background: none; }
div.container#maincol, #rightColumn { border: solid 2px green; background: none; }
div.container#rightcol { border: solid 2px lime; background: none; }
ol, ul { border: 1px solid black; background: #ddd; }
li { border: dotted 3px magenta; background: pink; } */

/* MAIN: div.container */

.MAIN_DIV_CONTAINER {}

div.container {
	border-collapse: collapse;
	border: 0px none;
	margin: 0;
	padding: 0;
}

div.container#topwrapper {
	width:100%;
}

div.container#wrapper {
	width:100%;
	min-width:750px;
}

div.container#header {
	z-index:1;
	position: relative;
	overflow: visible;
	width:100%;
}

div.container#body {
	z-index:0;
	float:left;
	overflow:hidden;
	width:100%;
	display:inline;
	/* background-color: #d2e2ed;
	background-image: url('../img/cboc/design/bgs/maincol.gif');
	background-repeat:repeat-y;
	background-position: 15em 0;*/
	margin-left:0em;
}

div.container#leftcol, #leftColumn {
	float:left;
	display:inline;
	width:15em;
	background: #fff;
	margin-left:0em;
}
#leftcol table, #leftcol tr, #leftcol td, { padding: 0; margin: 0; border-collapse:0 }

div.container#maincol
{
	margin-left:16.6em;
	margin-right:1.6em;
	margin-top:-6px;
	zoom:1;
}

rightColumn
{
	margin-left:16.6em;
	margin-right:1.6em;
}


div.container#rightcol {
	/* hacked to display better with IE6 (yuck) */
	/* to return to previous specs, uncomment the next four lines and comment the rest of the code below them */
		/* padding-left:100%; 
		margin-left:-25em;
		margin-right:1.5em;
		margin-top:-2px; */
	width: 23.5em;
	float: right;
	padding-right:1.5em;
	margin-top:-2px;
}
div.container#rightcol * {
	position:relative;
}

div.container#footer {
	z-index:0;
	clear:both;
}

/* HEADER */

/* HEADER: banner */

.HEADER_BANNER {}

div.container#banner{
	width: 100%;
    background: #4f8b71;
    border-collapse: collapse;
    border: 0px none;
	/* background-image:url('../img/CBoC-Web-Header.png');
	background-position: right 30%;
	background-repeat: repeat-y; */
	padding:0;
	margin:0;
}
div.container#banner table, tr, td, img {
    border-collapse: collapse;
    border: 0px none;
	padding:0;
	margin:0;
}

div.container#topbar {
	z-index:0;
 	position:relative;
	overflow:visible;
	background: white url('../img/NatCon-shadow.png') repeat-x top left;
	width:100%;
	height:9px;
	margin:0;
	padding:0;
}

div.container#breadcrumb {
	overflow: hidden;
	border: 0px none;
	/* background-color: #ccc;
	background-image:url('../img/bread.gif');
	background-position: left center;
	background-repeat: no-repeat; */
	width:95%;
	margin:0 0 0 1.2em;
	padding:0 0 1px 0;
}
div.container#breadcrumb p {
	margin: 0 0 0 17px; /* lines up with first item of top menu bar */
	padding: 0;
}
div.container#breadcrumb a,div.container#breadcrumb a:visited {
	color: #4d93be;
}

div.topbar-container {
	float:right;
	padding:0;
}

div.lang {
	padding:0 2px 0 100%;
	margin-left:-24.75em;
	margin-right:1.5em;
	margin-top:-2px;
	margin-bottom: 4px;
}
div.lang * {
	position:relative;
	padding: 0;
	margin: 0;
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXX WARNING! KLUDGE-CONTAMINATED AREA. PLEASE USE FULL WHMIS-APPROVED BIOHAZARD SUIT XXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXX THIS WILL BE DEPRECATED ONCE WE GET THE NEW TOP MENU FILLED IN, SO PLZ DELETE!!! XXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* BEGIN kludge */

/* HEADER: global menu bar */

.HEADER_GLOBAL_BAR {}

#nav, #nav ul {
	list-style:none;
	white-space: nowrap;
	margin:0;
	padding:0;
}

#nav li {
	float:left;
	background: #000;
}

#nav a {
	display:block;
	padding:4px 6px;
}

#nav li ul {
	position:absolute;
	overflow:hidden;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-top: 0px none;
	border-bottom: 1px solid black;
	width: 28em;
	left: -999em;
	margin-left: -1px;
	speak:none;
}

#nav li ul li {
	display: block;
	width: 28em;
}

#nav li:hover ul, #nav li.sfhover ul {
	left:auto;
	speak:normal;
}

#nav li:hover, #nav li.sfhover {
	background: #666;
	position: static;
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXX WARNING! KLUDGE-CONTAMINATED AREA. PLEASE USE FULL WHMIS-APPROVED BIOHAZARD SUIT XXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXX THIS WILL BE DEPRECATED ONCE WE GET THE NEW TOP MENU FILLED IN, SO PLZ DELETE!!! XXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* END of kludge */



.FOOTER {}

/* FOOTER */

div.container#copyright {
	/* background-color: #fff; */
	width:98%;
	/* margin: 0 -16px; */
	padding: 8px;
}

div.container#copyright p {
	margin: 5px;
}

/* MAIN COLUMN */
/* div.container#alerts - grey alert box */

.MAINCOL {}

/* 
fff0e5 - light orange (10% S)
ffcca7 - light-med orange (35% S)
ffb580 - med orange (50% S)
ff8f40 - deep orange (75% S)
ff6900 - full orange (100% S)
*/

div.container#alerts {
	border: 1px dotted #ffb580;
	border-collapse: collapse;
	background-color: #fff0e5;
	margin: 0 0 1.5em 0;
	padding: 8px;
}

/* div.main-section - section within main column */

div.main-section {
	clear: right;
	/* border-top: 1px solid #d2e2ed; */
	border-collapse: collapse;
	margin: .5em 0 1em 0;
	padding: 0 0 0 0;
}
div.container#story p {
	padding: 0 0 .5em 0;
}

/* MAIN COLUMN: Login boxes */

.MAINCOL_LOGIN {}

#login-wrapper {
}

#login-top {
    clear: both;
    speak:normal;
}

#login-left {
    float: left;
    display: inline;
    width: 47.5%;
    margin-left: 0;
    margin-right: 1.5em;
    padding: 0;
    speak:normal;
}

#login-right {
	background-color:#E9F1F6;
	border:solid 1px #ccc;
    margin-left: 50%;
    margin-right: 0;
    padding: 0;
    speak:normal;
}

#login-bottom {
	border-top:solid 1px #999;
	padding-top:16px;
    clear: both;
    speak:normal;
}

/* LISTS */

.MAINCOL_LIST {}

div.container#maincol ul {
    margin-left:3px;
    padding-left:12px;
}
div.container#maincol ol {
    margin-left:8px;
    padding-left:12px;
}
div.container#maincol ul li, div.container#maincol ol li {
    padding-left:0;
    margin-left:0;
}

/* FORM ITEMS */

.MAINCOL_FORM {}

form {
    margin:0;
    padding:0;
}

.MAINCOL_FORM_TITLE {}

.formTitle {
	font-weight: bold;
	font-size: 135%;
	font-family: arial, verdana, helvetica;
	border-bottom: solid 1px #999; /* black */
	line-height: 14pt;
	display:block;
	margin-bottom:15px;
}

.MAINCOL_FORM_BOX {}

.formBox {
    margin-bottom:10px;
    width:95%;
}
.formBox .formBox 
{
    margin-bottom:0;
    width:100%;
}

.MAINCOL_FORM_LABEL {}

.fieldLabel {
    position: relative;
	display:-moz-inline-box; /* HACK: for mozilla support. Do not remove! */
	display:inline-block;
	cursor:help;
	vertical-align:top;
	line-height:140%;
	font-weight: bold; 
	font-size: 100%; 
	font-family: arial, verdana, helvetica;
	color: #000; /* black */ 
	width:30%;
	padding-left:.1em;
}

.MAINCOL_FORM_HINT {}

.fieldHint {
    position: relative;
	/* display:-moz-inline-box;  HACK: for mozilla support. Do not remove! 
	display:inline-block;        COUNTER-HACK: I've removed this because it was causing the */
	display: block;         /*   event reg forms to break in moz.  the hints don't seem to be affected. */
	vertical-align:top;
   	font-weight: normal; 
	font-size: 85%;
	font-family: arial, verdana, helvetica;
	color:#999; 
	margin-bottom: 6px;
	margin-left: 30.3%;  /* .7em;*/
}

.MAINCOL_FORM_CONTENTBOX {}

.contentBox {
	border: outset 1px black;	
    margin-bottom:10px;
   	width:550px;
   	padding: 2px 2px 2px 2px;
}

.MAINCOL_FORM_ALERTBOX {}

.alertBox {
	border: outset 1px black;		
    margin:10px 0px 10px 0px;
   	width:95%;
   	height:100%;
   	padding: 2px 2px 2px 2px;
   	background-color:White;
}

.MAINCOL_FORM_TEXTBOX {}

.textBox {
	border: solid 1px black;
	font-size: 100%; 
	color: #000000; /* black */ 
	font-family: arial, verdana, helvetica;
	display:-moz-inline-box; /* HACK: for mozilla support. Do not remove! */
	display:inline-block;
	position:relative;
	margin-right:2px;
	margin-bottom:2px;
	width:60%;
}
.textBoxShort
{
	border: solid 1px black;
	font-size: 100%; 
	color: #000000; /* black */ 
	font-family: arial, verdana, helvetica;
	display:-moz-inline-box; /* HACK: for mozilla support. Do not remove! */
	display:inline-block;
	position:relative;
	margin-right:2px;
	margin-bottom:2px;
	width: 50%;
}

.MAINCOL_FORM_TEXTAREA {}

.textArea {
	border: solid 1px black;
	font-size: 100%; 
	color: #000000; /* black */ 
	font-family: arial, verdana, helvetica;
	display:-moz-inline-box; /* HACK: for mozilla support. Do not remove! */
	display:inline-block;
	position:relative;
	margin-right:2px;
	margin-bottom:2px;
	width:99%;
}

/* .linkgroup: a group of hyperlinks. */

.MAINCOL_FORM_LINKS {}

.linkGroup {
	display:block;
	text-align:right;
	margin-right:1%;
	margin-top:5px;	
	font-size: 100%; 
	font-family: arial, verdana, helvetica;
}

.MAINCOL_FORM_BUTTONS {}

.buttonGroup {
	display:block;
	text-align:right;
	margin-top:8px;	
	padding-top:2px;
	border-top: solid 1px #999;
}

.button {
	font-weight: bold; 
	font-size: 100%; 
	vertical-align:bottom;
	margin-top:5px;
	width:8em;
}
.button-long {
	font-weight: bold; 
	font-size: 100%; 
	vertical-align:bottom;
	margin-top:5px;
	width:16em;
}

.MAINCOL_FORM_CHECKBOXES {}

.checkBoxGroup {
	font-size: 9pt; 
	color: #000000; /* black */ 
	font-family: arial, verdana, helvetica;
	display:block;
	position:relative;
	padding-left:30%;
	width:88%;
	margin-bottom:2px;
}

.checkBoxList {
	font-size: 100%; 
	color: #000000; /* black */ 
	font-family: arial, verdana, helvetica;
	height:9.25em;
	overflow:auto;
	display:block;
	position:relative;
	padding:0;
}

.checkBoxList input { /* if these two are needed, does that mean we don't need the equivalent checkBox class anymore? */
	position: relative;
	float:left;
	left:0;
	width:1.5em;
	margin:0 -2.25em 0 0;
	padding:0;
}
.checkBoxList label { /* if these two are needed, does that mean we don't need the equivalent checkBox class anymore? */
	position:relative;
	left: 1.75em;
	padding:0;
}

.checkBoxListVariable {
	font-size: 100%; 
	color: #000000; /* black */ 
	font-family: arial, verdana, helvetica;
	overflow:none;
	display:block;
	position:relative;
	margin:0;
	padding:0;
}

.checkBoxListVariable input { /* if these two are needed, does that mean we don't need the equivalent checkBox class anymore? */
	position: relative;
	float:left;
	left:0;
	width:1.5em;
	margin:0 -2.25em 0 0;
	padding:0;
}
.checkBoxListVariable label { /* if these two are needed, does that mean we don't need the equivalent checkBox class anymore? */
	position:relative;
	display:block;
	left: 1.75em;
	width: 95%;
	padding:0;
}

.checkBox {
	font-size: 100%; 
	color: #000000; /* black */ 
	font-family: arial, verdana, helvetica;
	display:-moz-inline-box; /* HACK: for mozilla support. Do not remove! */
	display:inline-block;
	margin-left:0;
	padding-left:0;
}

.MAINCOL_FORM_RADIO {}

.radioButton {
	font-size: 110%; 
	font-family: arial, verdana, helvetica;
	display:-moz-inline-box; /* HACK: for mozilla support. Do not remove! */
	display:inline-block;
	position:relative;
	margin-right:5px;
}

.MAINCOL_FORM_DROPDOWN {}

.dropDown {
	border: solid 1px #000;
	font-size: 100%; 
	color: #000000; /* black */ 
	font-family: arial, verdana, helvetica;
	display:-moz-inline-box; /* HACK: for mozilla support. Do not remove! */
	display:inline-block;
	position:relative;
	margin-right:2px;
	width:60%;
	margin-bottom:2px;
}

.MAINCOL_FORM_SIDEMENU {}

.sideMenu {
	border-right:solid 1px #ccc;
	display:block;
	vertical-align:top;
	padding-right:5px;
}

/* .menuItem: Bill's funky menu buttons. */

.MAINCOL_FORM_MENUITEMS {}

.menuItem {
	display:-moz-inline-box; /* HACK: for mozilla support. Do not remove! */
	display:inline-block;
	border: solid 1px #999;
	background-color:#aaa;
	color:White;
	font-size: 88%;
	font-family: arial, verdana, helvetica;
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	text-decoration:none;
	white-space: nowrap;
	margin-bottom:10px;
	padding-right:6px;
	padding-left:6px;
}

.menuItem:hover {
	color:Black;
	background-color:White;
}

.menuItem:active {
	font-weight:bold;
}

.MAINCOL_FORM_FIELDSET {}

.fieldSet {
	width:94%;
	margin-bottom:.5em;
}

.fieldSetLegend {
	font-weight: bold; 
	font-size: 100%; 
	line-height:140%;
	padding-left:1%;
	color: #000000; /* black */ 
	font-family: arial, verdana, helvetica;	
}

.fieldSetHint {
	font-weight: normal; 
	font-size: 85%;
	padding-left:1%;
	color:Olive; 
	font-family: arial, verdana, helvetica;		
}

/* DATAGRID */

.MAINCOL_FORM_DATAGRID { }

.gridHeader {
	background-color:#ccc;
	font-size: 100%; 
	font-family: arial, verdana, helvetica;
	margin-left:3px;
}

.gridRow {
	background-color:#fff;
	font-size: 100%; 
	font-family: arial, verdana, helvetica;
	margin-left:3px;
}

.gridRowAlt {
	background-color:#f4f4f4;
	font-size: 100%; 
	font-family: arial, verdana, helvetica;
	margin-left:3px;
}

.CBOCBOX {}

/* CBOCBOX - the default box template, as defined by March '08 redesign */

div.cbocBoxTitle {
    border-top: solid 1px #c9d8be;
    border-left: solid 2px #c9d8be;
    background: #2f7d53;
    color:#fff;
    font: 11pt arial;
    text-transform:uppercase;
    line-height: 8pt;
    padding:12px 0px 0 11px;
    margin:0 0 0 0;
}

div.cbocBoxBody {
    border-left: solid 2px #c9d8be;
    margin: 0 0 16px 0;
    padding: 8px 5px 5px 6px;
}

.PollBox fieldset
{
    border:0px none; padding:0; margin:0;
}

.PollBox ol li div
{
    padding:0; margin:0;
}

div.cbocBoxBody .RadioButtonListCssClass
{
    position:relative;
    list-style: none url('');
    text-indent: 0px;
    margin: 3px 0 0 -15px;
    padding: 0 0 0 16px;
}

div.cbocBoxBody .RadioButtonListCssClass li
{
    line-height:110%;
    list-style: none url('');
    margin: 0 0 5px -5px;
    padding: 1px 0 0 0;
}

div.cbocBoxBody .CheckBoxListCssClass
{
    position:relative;
    display: block;
    list-style: none url('');
    text-indent: 0px;
    margin: 4px 0 0 3px;
}

div.cbocBoxBody .CheckBoxListCssClass input
{
    line-height:110%;
    list-style: none url('');
    vertical-align: middle;
}

div.cbocBoxBody p, div.cbocBoxBody div 
{
    position:relative;
    margin: 0;
    padding: 0 0 0 6px;
}

div.cbocBoxBody ul, div.cbocBoxBody ol 
{
    position:relative;
    list-style: url('../img/bullet.gif');
    text-indent: 0px;
    margin: 3px 0 0 -5px;
    padding: 0 0 0 16px;
}

div.cbocBoxBody ul li, div.cbocBoxBody ol li
{
    line-height:110%;
    margin: 0 0 5px -5px;
    padding: 1px 0 0 0;
}

.CBOCCENTREPAGE {}

/* CBOCBOX - the default box template, as defined by March '08 redesign */

table.cbocCentrePage {
    margin-bottom: 12px;
}

table.cbocCentrePage img {
    margin-right: 12px;
}

table.cbocCentrePage td+td
{
    border-bottom: 1px solid rgb(210, 218, 231);
    padding-bottom: 5px;
}

table.cbocCentrePage h2   /* corresponds to cbocItemTitle (cboc-text.css) */
{
    text-transform: none;
    color: #e36f1e;
    font: 110% arial;
    border: 0px none;
    margin:-3px 0 0;
    padding:0px
}

table.cbocCentrePage p {
    margin: 0 0 5px 0;
    padding: 0;
}

/* OTHER CLASSES */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXX WARNING - WARNING - DEPRECATED CLASSES FOLLOW - DELETE AT EARLIEST CONVENIENCE   XXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* INFOBOXES - used a lot in left- and right-hand columns,
   to display lists of links and various information */

/* INFOBOXES: div.info-body ul.float - non-bulleted, floated list

div.info-body ul.float { float:left; }

/* INFOBOXES: div.info-body ul.tight - non-bulleted list with no extra spacing

div.info-body ul.tight li, div.info-body ol.tight li { margin: 0; }

/* INFOBOXES: div.info-body ul.boxblt - spaced bulleted list using box icon as bullet

div.info-body ul.boxblt {
	position:relative; 
	padding-left: 20px;
	list-style-image:url('../img/cboc/design/bullets/blublt.gif');
}
div.info-body ul.boxblt li {
	position:relative;
}

/* INFOBOXES: div.info-body ul.feedblt - spaced bulleted list using rss feed icon as bullet

div.info-body ul.feedblt {
	position:relative;
	margin-left:3px;
	padding-left:20px;
	list-style-image:url('../img/cboc/design/buttons/feed-icon_s.gif');
}
div.info-body ul.feedblt li {
	position:relative;
	margin:0 0 0 0px;
	padding:0 0 6px 6px;
}
div.info-body ul.feedblt li a {
	position:relative;
	vertical-align:super;
	padding:0; margin:0;
}

/* INFOBOXES: div.info-body#menu ul - menu-formatted list */

/*div.info-body#menu ul {
	 position:relative; 
	width: 80%;
	margin-left: 20px;
}
div.info-body#menu ul li {
	position:relative;
}
div.info-body#menu ul li.selected {
	position:relative;
	font-weight: bold;
	list-style-image:url('../img/cboc/design/bullets/arrow.gif');
} */

/* INFOBOXES: ul li.spacer - sometimes you just need some extra space

ul li.spacer {
	display:inline;
	line-height:4px;
	margin:0px;
	padding:0px;
}

/* INFOBOXES: ul.info-list li div.info-list-col - when we need multi-column list items (ie. RSS button...) */

/* div.info-body ul li div.info-list-col {
	float:left;
	margin-right:.4em;
	padding:0px;
}

div.info-body ul li.stacked {
	float:left;
	margin: 0 .3em 0 0;
	padding:0px;
} */

.HIDDEN {}

/* HIDDEN BOXES: for text-only browsers, etc. */

div.hidden {
	position:absolute;
	left: -999em;
}

.SPACERS {}

/* MISCELLANEOUS */

div.spacer:after {
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
div.spacer { display: inline-block; }
/* Hides from IE5/Mac \*/
* html div.spacer {height: 1px;}
div.spacer {display: block;}
/* End hide from IE5/Mac */
div.info-body div.spacer { }

/* MISC: line-spacer - adds a decorative line offset 1px below */

div.line-spacer {
	clear:both;
	border-bottom:1px solid #ccc;
	padding-top:1px;
}

/* MISC: tall-spacer - adds 14px of vertical space (7px + 7px) */

div.tall-spacer {
	clear:both;
	padding: 7px;
}

/* MISC: main-spacer - clears right */

div.main-spacer {
	position:relative;
}

/* MISC: vertical-prop - 250px of vertical space (prop-clear) */

div.vertical-prop {
    height:200px;
    position:relative;
    float: right;
    width:1px;
    margin:0;
}

.MISC {}

/* MISC: hr.feature - orange line for home page */

hr.feature {
	border-top: 1px solid #f60;
	border-left: 0px none;
	border-right: 0px none;
	border-bottom: 0px none;
	height: 1px;
	margin: 4px 0 4px 0;
	padding: 0;
}

hr.menu {
	border-top: 1px solid #999;
	border-left: 0px none;
	border-right: 0px none;
	border-bottom: 0px none;
	height: 1px;
	margin: 6px 0 6px 0;
	padding: 0;
}

.clearing {
	height:0;
	clear:both
}

input {
}

img {
	border: 0px none;
}

/* MOAR */

.textBoxUpperCase {
     text-transform: uppercase; 
     border: solid 1px black;
     font-size: 100%; 
     color: #000000; /* black */ 
     font-family: arial, verdana, helvetica;
     display:-moz-inline-box; /* HACK: for mozilla support. Do not remove! */
     display:inline-block;
     position:relative;
     margin-right:2px;
     margin-bottom:2px;
     width:60%;
}