/*	conferenceboard.ca CSS Layout Stylesheet
	September 2006 - 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; }
div { border: solid 3px yellow; }
div.container#body { border: solid 2px blue; }
div.container#leftcol, #leftColumn { border: solid 2px aqua; }
div.container#maincol, #rightColumn { border: solid 2px green; }
div.container#rightcol { border: solid 2px lime; }
*/

/* 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%;
}

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('/lib/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;
}

div.container#maincol, #rightColumn {
	margin-left:16.5em;
	margin-right:1.5em;
}

div.container#rightcol {
	padding-left:100%;
	margin-left:-25em;
}
div.container#rightcol * {
	position:relative;
}

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

/* HEADER */

/* HEADER: banner */

.HEADER_BANNER {}

div.container#banner{
	width: 100%;
	background: #fff;
	background-image:url('/lib/img/cboc/design/bgs/web-banner.jpg');
	background-position: right top;
	background-repeat: repeat-y;
}

div.container#banner img {
	vertical-align:middle;
	margin:20px;
}

div.container#banner #links {
	float:right;
	vertical-align:top;
	text-align:right;
	white-space: nowrap;
	margin:20px;
}

div.container#topbar {
	z-index:0;
 	position:relative;
	overflow:visible;
	background: #000;
	width:100%;
	margin:0;
	padding:0;
}

div.container#breadcrumb {
	overflow: hidden;
	border: 0px none;
	background-color: #ccc;
	background-image:url('/lib/img/cboc/design/bullets/bread.gif');
	background-position: left center;
	background-repeat: no-repeat;
	width:100%;
	margin:0;
	padding:0;
}
div.container#breadcrumb p {
	margin: 0 6px 0 26px;
	padding: 0;
}

div.topbar-container {
	float:right;
	padding:.4em .6em;
}

/* WARNING! KLUDGE-CONTAMINATED AREA. PLEASE USE FULL WHMIS-APPROVED BIOHAZARD SUIT */
/* 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;
}

.FOOTER {}

/* FOOTER */

div.container#copyright {
	background-color: #f4f4f4;
	width:100%;
	margin: 0 -16px;
	padding: 8px;
}


/* 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;
}

/* 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;
}

	.newTextBox {
	background-color:White;
	border:solid 1px #d2d0d4;
	}

.button {
	font-size:100%;
	font-weight:bold;
	/*color:#58595B;*/
	margin-top:.8em;
	vertical-align:bottom;
	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 2em 0 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;
}

/* OTHER CLASSES */
/* INFOBOXES - used a lot in left- and right-hand columns,
   to display lists of links and various information */

div.info-container {
	position: relative;
	overflow: hidden;
	border-collapse: collapse;
	border-top: 0px none;
	border-left: 0px none;
	border-right: 0px none;
	border-bottom: 4px solid #ccc;
	margin: 0;
	padding: 0;
}
div.info-container#nobottom {
	border-bottom: 0px none;
}

/* INFOBOXES: info-spacer - adds space between infoboxes */

div.info-spacer {
	/* clear:both; */
	border-top: 2px solid #ccc;
	border-left: 0px none;
	border-right: 0px none;
	border-bottom: 0px none;
	/* height:0px; */
	line-height:0px;
	padding:4px;
}

/* INFOBOXES: info-tab - for special items on the home page (ie. about us/careers) */

div.info-tab {
	border-collapse: collapse;
	border-top: 1px solid #ccc;
	border-left: 0px none;
	border-right: 0px none;
	border-bottom: 0px none;
	background-color: #f4f4f4;
	margin: 0px;
	padding: 6px 8px;
}
div.info-tab p { padding: 0; margin: 0 }

div.info-tab#careers {
	background-image:url('/lib/img/cboc/design/bgs/bluegrad_3.jpg');
	background-color: #fff;
	background-position: 100% 50%;
	background-repeat: repeat-y;
	margin: 0px;
	padding-left:8px; padding-right:8px; padding-top:3px; padding-bottom:4px
}

/* INFOBOXES: info-title - grey box top */

div.info-title {
	background-color: #ccc;
	border-collapse: collapse;
	border: 0px none;
	margin-top:0;
	margin-bottom:1px;
	padding-left:8px; padding-right:8px; padding-top:3px; padding-bottom:3px
}
div.info-title p { padding: 0; margin: 0 }

/* INFOBOXES: info-title-feature - orange box top for feature items (ie. news, conferences) */

div.info-title-feature {
	border-collapse: collapse;
	border-top: 1px solid #f60;
	border-left: 0px none;
	border-right: 0px none;
	border-bottom: 1px solid #f60;
	background-image: url('/lib/img/cboc/design/bgs/gradient.gif');
	background-color: #ffa060;
	background-position: left top;
	background-repeat: repeat-y;
	margin-top:0px;
	margin-bottom:1px;
	padding-left:8px; padding-right:8px; padding-top:4px; padding-bottom:4px
}

/* INFOBOXES: info-body - plain old blue background */

div.info-body {
	position: relative;
	border-collapse: collapse;
	border-top: 1px solid #ccc;
	border-left: 0px none;
	border-right: 0px none;
	border-bottom: 0px none;
	background-color: #d2e2ed;
	margin: 0;
	padding: 8px;
}
div.info-body * { position: relative } /* IE really likes this line */
div.info-body>ul, div.info-body>ol, div.info-body>p { width: 90% }
div.info-body ul, div.info-body ol { padding-right: 4px; margin: 0 }
div.info-body p { padding: 0; margin: 0 }

/* INFOBOXES: info-body#most - most downloaded has a special nifty background */

div.info-body#most {
	background-image: url('/lib/img/cboc/design/bgs/flamescreen.gif');
	background-position: 40% 0%;
	background-repeat: repeat-y;
}
div.info-body#most ol br { /* a hack to remedy silly ASP.net problem :P */
    line-height: 0;
    display: block;
}

/* INFOBOXES: info-body#home-search - search box for home page */

div.info-body#home-search {
	white-space: nowrap;	/* so that the search button doesn't wrap onto a second line */
}

div.info-body#home-search input#search-box {
	width:14em;
}

/* INFOBOXES: info-body#search - default search box without 2px border at bottom */

div.info-body#search {
	white-space: nowrap;
	border-bottom: 0px none;
	margin-bottom: 1px;
}

div.info-body#search input#search-box {
	width:14em;
}

/* INFOBOXES: info-body#menu - most downloaded has a special nifty background

div.info-body#menu {
	border-top: 8px solid #ccc;
} */

div.info-body#menuOrange01,
div.info-body#menuOrange02,
div.info-body#menuOrange03,
div.info-body#menuOrange04,
div.info-body#menuOrange05 {
	border-top: 8px solid #ccc;
	background-color:#fed5aa;
}

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

div.info-body ul {
	position: relative; /* IE really likes this line */
	text-indent: 0px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
div.info-body ol {
	position: relative; /* IE really likes this line */
	text-indent: 0;
	list-style: inside decimal;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
div.info-body ul li, div.info-body ol li {
	position:relative;
	line-height:130%;
	margin: 0 0 6px 0;
	padding:0;
}

/* 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('/lib/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('/lib/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 {	/* selected menu item */
	position:relative;
	font-weight: bold;
	list-style-image:url('/lib/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;
}























/* OLD STYLES - PLZ DELETE
   ***********************
   FIXME FIXME FIXME FIXME
   ***********************
   ***********************
   ***********************
   ***********************
   ***********************
   I DON'T LIKE THE FOLLOWING CLASSES, AND
   BILL DIDN'T MAKE THEM, SO I'M GOING TO
   CONDEMN THEM TO DEATH. SPEEDY DELETE */

.XXXX_FIXME_DELETE_THE_FOLLOWING_CLASSES { }

.bcrumbtable {
	background-color:#ccc;
}

.normalpage1 {
	margin-left:0;
	margin-top:0;
	margin-right:0;
	background-color:white;
	border-width:0;
}

.divider_vert_left {
	border-left: #ccc 1px solid;
	}

.divider_vert_right {
	border-right: #ccc 1px solid;
}

.divider_horiz {
	border-bottom: #ccc 1px solid;
}

.divider_horiz_top {
	border-top: #ccc 1px solid;
	}

.divider_horiz_bottom {
	border-bottom: #ccc 1px solid;
	}

.leftspacer {
	width: 25px;
}

/* NEDM */

.emailPg_h4 {
    color:#000000;
    display: block;
    font-size:0.8em;
    font-weight:normal;
    line-height:1em;
    margin:.6em 0 0 0;
    padding:0;
}

.emailPg_txt {
    color: #898A90;
    font-size:.6em;
    line-height:1.3em;
    margin:.6em 0 0 0;
    padding:0;
}
/* Design element: Please Note */
.plsNote {
border-left: 6px solid #ffa15c; /* orange */
color: #707070; /* grey */
display:block;
font-weight: bold;
padding-left: 11px;
}