/* $Id:master.css 79 2009-07-09 17:50:23Z DragKng $ */
@charset "utf-8";/*
TABLE OF CONTENTS
ZERO OUT - Sets most everything to ZERO,so there's a clean slate to start with - set any defaults here (Lists especially)
BODY - sets the base font
POSITIONING - generic tags for positioning
LINKS - default and other link styling
#HEADER - Ontario logo,#arc,#search,#navbar (main menu/navigation),#banner
#right_column - Main content area (Many layouts - see style guide)
#left_column - .left_nav (left hand navigation group),.menu (menu list)
#FOOTER - #full_footer,Copyright,Site Map,Contact Us,Privacy Notices
*/
/* -ZERO OUT EVERYTHING - * ---------------------------------------------------------------- */
/* -this css sets all padding,margins,defaults to 0 - * ---------------------------------- */
/* tables still need 'cellspacing="0"' in the markup */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
html {
	height: 100%;
}
body {
	line-height: 1;
	height: 100%;
}
blockquote,q {
	quotes: none;
}
/* this is the behaviour for form fields when they are selected */
input:focus {
	outline: 1px solid #000
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none
}
del {
	text-decoration: line-through
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0
}
/* -ZERO OUT EVERYTHING - END * ---------------------------------------------------------------- */
/* ----------- ZERO OUT LISTS - set your default list styles here ---------------- */
ol,ul {/* this is the default style - change at will - */
	list-style:none;/* no bullets */
	margin-left:20px;/* indented from side */
	margin-bottom:20px /* space after */
}
/* BASELINE ** ADDITION ** REMOVES Margins from LISTS - nested lists have no top/bottom margins - remove to use default margins*/
/*ul ul,ul ol,ul dir,ul menu,ul dl,ol ul,ol ol,ol dir,ol menu,ol dl,dir ul,dir ol,dir dir,dir menu,dir dl,menu ul,menu ol,menu dir,menu menu,menu dl,dl ul,dl ol,dl dir,dl menu,dl dl {
	margin-top: 0;
	margin-bottom: 0;
}
*/
/* --------------------------------------------------------------- */
/* sets the base font to approx 10pt */
body {
	background-color: #FFF;
	color: #000;
	font-size: 62.5%;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	text-align: center
}
/* default sizing for standard elements -------------------------- */ /* SET text attributes here */
p {
	margin: 1em 0 1.5em /* sets default margins for all paragraphs */
}
/* -------- HEADERS --------- */
h1,h2,h3,h4 {
	font-weight: bold;
	line-height: 1.2em
}
/* must set explicitly,it is zeroed out above */
h1 {
	color: #000;
	font-size: 1.4em;
	margin: 0.5em 0 1em 0
}
h2 {
	color: #000;
	font-size: 1.2em;
	padding-bottom: 6px
}
h3 {
	color: #000;/* COLOUR CHANGE */
	font-size:1.1em;
	margin: 0.5em 0 /* default margins for h tags:in this order:top/bottom,right/left */
}
h4 {
	color: #000;
	margin: 0.5em 0 0.7em 0
}
img {
	border: 0
}
/* --------------------------------------------------------------- */
/* common/generic styles ------------------------------------------------- */
/* positioning */
.right {/* aligns - floats right */
	float:right;
	margin-left: 20px;
	text-align: right;
	margin-right: 0
}
.left {/* aligns - floats left */
	float:left;
	margin-right: 20px;
	margin-left: 0
}
.top {/* removes top margin */
	margin-top:0
}
.bottom {/* removes bottom margin */
	margin-bottom:0
}
.center {/* centers */
	text-align:center;
	margin-left: auto;
	margin-right: auto
}
.clear {/* to clear floats */
	clear:both
}
/* other */
.small {/* smaller text */
	font-size:.85em;
	line-height: 140%
}
.large {/* larger text */
	font-size:1.4em;
	margin-top: 20px;
	display: block
}
.indent {/* use to indent text in a pragraph */
	margin-left:2em
}
.label {
	display: block;
	width: 5em;
	float: left
}
/* SEARCH BAR - submit (go) button default */
.submit {/* styles the submit / GO button -- */
	background-color:#aa3d12;/* COLOUR CHANGE */
	color:#fff;
	font-weight: bold;
	border: none;
	float: left;
	width: 100%;
	border: 1px solid #000 /* when BGimages are turned off there is no search box visible - adding a border will make it visible - coloud also add a bgcolor instead */
}
hr {
	height: 1px;
	color: #bfbfbf;
	background-color: #bfbfbf;
	border: none;
	float: left;
	clear: both;
	width: 96%;
	margin: 1em 0
}
hr.thick {
	height: 3px;
	color: #666;
	background-color: #666
}
/* thicker separator line - change colour if desired for greater emphasis */
/* --------------------------------------------------------------- */
/* tables still need 'cellspacing="0"' in the markup - CSS2 does not yet have proper table support */
/* ---- LINKS ---------------------------------------------------- */
/* default link style */
a {
	text-decoration: none;
	color: #0e6789;;
	background-color: transparent
}
a:visited {
	color: #666
}
#language a,a:link,a:visited,a:active {
	text-decoration: none;
	color: #0e6789;/* COLOUR CHANGE */
	background-color:transparent
}
a:hover {
	text-decoration: underline;
	color: #000 /* COLOUR CHANGE */
}
/* default link style */
/* --- SITE HOLDER(wrapper) ---- */
#wrapper {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 1000px;
	margin-top: 10px
	
}

/* BREADCRUMB STYLES ------------------------------------------- */

#breadcrumb {
width: 980px;
display: block;
float: left; }

.bread {
margin-bottom: 10px; } 

#breadcrumb .trail, #breadcrumb a {
color:#000000;
background:#b8d3e6;
font-weight:bold;
font-family:Geneva,Verdana,Helvetica,Arial,sans-serif;
text-decoration:none; }

#breadcrumb .trail{
font-size:100%; }

#breadcrumb a:hover {
color:#cd3300;
text-decoration:underline; }

/* BOLD LINK --------------------------------------------- */

#bold_link {
	text-decoration: none;
	font-weight: bold;
	color: #0e6789;;
	background-color: transparent }

/* LEFT NAV STYLES --------------------------------------------- */
#left_column {/*width:260px;*/
	width:250px;
	display: inline;
	float: left;/*margin-right:20px;*/
	margin-right:30px;
	margin-left: 0;
	font-size: 1.2em;/* STANDARDIZE */
	line-height:160% /* STANDARDIZE */
}
#left_column ul {
	margin: 0;
	padding: 0
}
.leftnav {
	width: 100%;
	overflow: hidden;
	margin-bottom: 10px
}
/* -- First colour of Header bar for Menu titles -- */
.leftnav .header {
	width: 100%;
	height: 100%;
	border-bottom: 1px solid #000;/* ncs may 29/09 - added top border call */
	border-top:1px solid #000;
	float: left;
	position: relative;
	background: #4a1910 url(../images/arc_left.gif) no-repeat;/* COLOUR CHANGE header BG image match #colour to bottom half of arc graphic */
	display:block;
	font-size: 100%;/* ncs jun2/09 added font-sizing - for backwards compatibility */
	font-size:1.1em /* ncs jun2/09 added font-sizing - for backwards compatibility */
}
.leftnav .header a {
	color: #333;
	font-weight: bold;
	display: block;
	padding: 4px 5px 6px /* ncs jun2/09 moved all padding to this selector for backwards compatibility */
}
.leftnav .header img,.downarrow {
	position: absolute;
	left: 235px;
	top: 7px
}
/* -- Second colour of Header bar for Menu titles -- */
.leftnav .mycolour .header {
	background: #1d2d43 url(../images/arc_left.gif) top left no-repeat /* COLOUR CHANGE header BG image match #colour to bottom half of arc graphic */
	/* may 29 - removed bottom border call */
}
.leftnav .mycolour .header a {
	color: #333;/* COLOUR CHANGE update font to contrast w BG color (above in .leftnav .mycolour .header) */
	font-weight:700
}
/* -- Standard MY GOVERNMENT colour of Header bar for Menu titles -- */
.leftnav .mygovt .header {
	background-color: #4a1910;/* STANDARD COLOUR - DO NOT EDIT */
	background-image:url(../images/arc_left_red.gif);
	background-repeat: no-repeat
}
.leftnav .mygovt .header a {
	color: #fff;/* COLOUR CHANGE update font to contrast w BG color (above in .leftnav .mycolour .header) */
	font-weight:700
}
.leftnav h2 {/* ncs jun2/09 removed font-size,moved to to .leftnav .header for backwards compatibility */ padding-bottom:0
}
/* EXPANDING MENU STYLES --------------------------------------------- */
.menu {
	width: 100%;
	float: left
}
.menu li {
	display: inline
}
.menu a,.menu a:link,.menu a:visited,.menu a:active {
	color: #000;
	font-weight: bold;
	display: block;
	padding: 8px 4px 10px 24px;/* this creates the size of the menu item box - last value is the distance of the text from the side */
	border-bottom:1px dotted #666;
	background: #f4f4f4 url(../images/triangle_right.gif) no-repeat 12px 13px /* COLOUR CHANGE */
}
.menu li li a,.menu li li a,.menu li li a:link,.menu li li a:visited,.menu li li a:active {/* sub menu styling - positions the arrow graphic in a bit more - EDIT ncs jun2/09 added pseudo selectors for specificity*/
	font-size:.9em;
	padding: 8px 4px 8px 36px;
	background: #FFF url(../images/triangle_right.gif) no-repeat 23px 13px
}
/* MENU - Current item colour - USE to DESIGNATE THE CURRENT PAGE - add this id to the appropriate li in the menu */
#current {
	background-color: #fff
}
/* ------------ END LEFT NAV ------------------------ */
/* ------------ HEADER - ONTARIO LOGO / BANNER FLASH / SEARCH / NAV -------------------- */
#header {
	width: 980px;
	position: relative
}
/* HEADER LAYOUT STYLES --------------------------------------------- */
#arc {
	width: 100%;
	height: 92px;
	float: left;
	background: #dff0f7 url(../images/header_arc.gif) no-repeat
}
#arc form {/* search form */
	float:right;
	margin: 40px 0 0 0;
	padding-right: 20px
}
#searchBox {/* search box */
	width:250px;
	height: 1.5em;
	padding: 3px;
	border: 0;
	background-color: #fff;
	border: 1px solid #dff0f7
}
#searchBox:hover {
	border: 1px solid #fff
}
#submit {/* submit (go) button */
	border:0;
	color: #fff
}
#submit:hover { /*submit (go) button hover state */
	border:1px solid #fff
}
/* -- top nav -- */
#textlinks a.last,#navbar p a.last {
	border: none;
	padding-right: 0
}
#textlinks {
	position: absolute;
	right: 0;
	top: 5px;
	text-align: right;
	margin-right: 0 /* added jun2/09 */
}
#textlinks a {
	padding: 0 1em 0 .75em;
	border-right: 1px solid #999
}
a#skipNav:link,a#skipNav:visited,a#skipNav:hover {
	color: #FFF;
	border: none
}
a#skipNav:active,a#skipNav:focus {
	color: #17397d;
	border-right: 1px solid #999
}
#navbar {/* the main nav bar */
	width:100%;
	height: 2.75em;
	float: left;
	border-bottom: 10px solid #FFF;
	background-color: #1d2d43 /* COLOUR CHANGE - replace Background colour with your colour that matches the graphic */
}
#home #navbar {/* the main nav bar */
	border-bottom:8px solid #FFF
}
#navbar p {
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	padding: 7px 0;
	margin: 0;
	overflow: hidden
}
#navbar p a {/* links in navbar */
	color:#FFF;/* COLOUR CHANGE - MAKE SURE CONTRAST IS VERY HIGH */
	padding:0 10px 0 8px
	/*border-right:2px solid #FFFFFF;ncs removed border call to leave only in changeme - for older layouts (so they can remove it) */
}
/* -- END topnav --*/
#banner {/* holds flash banner or static banner */
	width:980px;
	height: 185px;
	overflow: hidden;/* Necessary for IE6 */
	clear:left;
	margin-bottom: 10px;
	border-bottom: 4px solid #453617
}
/* END flash banner or static banner */
/* SPLASH STYLES */
#container,#splash_page #container {
	width: 720px;
	text-align: center;
	margin: 0 auto
}
#splash {
	margin-top: 50px;
	float: left;
	padding-bottom: 80px;
	font-size: 1.3em;
	text-align: left;
	background: url(../images/header_arc.gif) no-repeat bottom left;
	border: 1px solid #8d2f0e;
	border-bottom: 2em solid #8d2f0e
}
#splash .two_cols {
	background: url(../images/splash_line.gif) no-repeat top center;
	float: left;
	width: 100%;
	text-align: center;
	padding-top: 3em
}
.button {
	margin: 20px auto;
	width: 210px
}
#splash .two_cols .column .button {
	margin: 20px auto;
	width: 210px
}
#splash .two_cols .column .arrow {
	vertical-align: middle
}
#splash h2 a {
	font-size: 110%;
	font-weight: bold;
	color: #000;
	text-transform: uppercase;/* COLOUR CHANGE - match if you like */
}
/* -- RIGHT COLUMN / CONTENT --*/
#right_column {/* content area */
	width:700px;
	float: right;
	margin-right: 20px;
	font-size: 1.3em;/* STANDARDIZE */
	line-height:1.3em;/* STANDARDIZE */
	display:inline;
	overflow: hidden
}
body#onecol div#right_column {/* content area for one column layouts */
	width:980px;
	float: right;
	margin-right: 20px;
	font-size: 1.3em;/* STANDARDIZE */
	line-height:1.3em;/* STANDARDIZE */
	overflow:hidden
}
/* -- AD BANNER --*/
#ad_banner {/*padding-bottom:1em;*/
	clear:both;
	border: 1px solid #ccc;
	background-color: #30F;
	margin-bottom: 20px;
	width: 698px;
	overflow: hidden;
	height: 87px
}
#ad_banner div {
	margin: -1px 0 0 -4px
}
#footer {
	clear: both;
	width: 980px;
}
.row {/* a style to contain other elements on the page - gives a dotted border at the bottom of the area */
	width:720px;
	float: left;
	display: inline;
	margin-right: -3px;/* IE 6 duplicate text fix */
	margin-bottom:20px;
	border-bottom: 1px dotted #ccc;
	overflow: hidden
}
body#onecol .row {/* a style to contain other elements on the page - gives a dotted border at the bottom of the area */
	width:1000px
}
.row p {
	margin-right: 20px
}
.two_cols {
	background: url(../images/two_cols.gif) repeat-y;
	background-position: -5px 0
}
.three_cols {
	background-image: url(../images/three_cols.gif);
	background-repeat: repeat-y;
	background-position: -4px -50px
}
.two_cols .column {/* when a .column is placed inside a two_cols row you get 2 equal columns of 340px that fill the right_column */
	width:340px
}
.three_cols .column,.box .column,.two_thirds .other {/* when a .column is placed inside a three_cols row you get 3 equal columns of 220px that fill the right_column */
	width:220px
}
.two_thirds .column {/* use in combination with a photo,or to create a layout that splits the screen into 2 sections one twice as big as the second */
	width:460px
}
/* FOOTER STYLES ------------ */
#footer {/* changed from orginal to make the footer span the whole bottom area */
	border-top: 1px solid #7f7f7f;
        margin: 1em 0;
	width: 100%;
 	float: left;
}
#footer p {
	font-weight: bold;
	text-transform: uppercase;
	color: #666;
	font-size: .9em
}
#footer p.right {
	margin-right: 0
}
#footer a {
	color: #666
}
/* --- TITLE BARS --- */
.row .header {/* a full length header that spans all columns -USE:wrap .header in a .row */
	width:700px;
	height: 100%;
	position: relative;
	border-top: 3px solid #666;
	border-bottom: 1px solid #999;
	background-color: #e0e0b7; /* COLOUR CHANGE the background colour to your site's colour scheme */
	background-image:url(../images/arc_right_main.gif);
	background-repeat: no-repeat;
	margin-right: 20px;
        display: block;
}

/* ---- V1.2 code for early adopters --- */
.two_thirds .column .header {/* use in combination with a photo,or to create a layout that splits the screen into 2 sections one twice as big as the second */
	width:460px
}
.two_cols .column .header {/* 2 seperate headers - USE:class="row two_cols" nest .content div inside,then nest .header div inside that */
width:340px
}
.three_cols .column .header,.two_thirds .other .header {/* 3 seperate headers - USE:class="row three_cols" nest .content div inside,then nest .header div inside that */
width:220px
}
.two_cols .split_lrg .content {
	padding: 0 0 0 2px
}
.two_cols .split_lrg .content img {
	float: left
}
.two_cols .split_lrg h3,.two_cols .split_lrg .content ul,.two_cols .split_lrg .content p {
	float: left;
	width: 160px;
	padding: .8em 0 0 10px
}
.row .splt_lrg .header {
	margin-bottom: 0
}
.two_cols .split_lrg .content p {
	padding-top: .5em
}
/* overwrites prev statement to set the spacing back to default at the top */
.column,.two_cols .column,three_cols .column,.two_thirds .column,.box,.two_thirds .other {
	display: inline;
	float: left;
	overflow: hidden;
	margin-left: 0;
	margin-right: 19px
}
/* ---- END V1.2 code for early adopters --- */
/* ------ HEADERS MORE ------ */
.header h1 {
	color: #494627;
	margin: 5px 10px 0 10px;
	padding: 0 0 5px 0;
	font-size: 1.2em;
	float: none
}
.header h2 {
	color: #494627;
	margin: 5px 10px 0 10px;
	padding: 0 0 5px 0;
	font-size: 1.1em;
	float: none
}
.more {/* style for the more> links pulls the more out 30px from the right side of the block */
	right:26px;
	float: right;
	position: relative;
	top: 5px;
	padding: 0 0 0 30px;
	font-size: .8em;
	font-weight: bold;
	text-transform: uppercase
}
.more img {/* positions the chevron/arrow after the MORE link */
	position:absolute;
	top: 5px;
	right: -15px
}
.more a {
	color: #000;
	line-height: 1.9em
}
/* coloured box */
.box {
	float: left;
	width: 720px;
	background-color: #f8f6d7;
	border-bottom: 1px solid #666;
	margin: 10px 0 20px 0;
	overflow: hidden
}
.box h3,.box p,.box ul,.box table {
	margin-left: 20px;
	margin-right: 20px
}
.box table td {
	border-top: 1px dotted #666
}
.box .more {
	right: 46px;
	padding-left: 40px
}
/* ---- PAGE ACTIONS (email,print,accessibility ) ----*/
#pageActions {
	margin: 0 !important;
	padding: 0;
	float: right;
	text-transform: uppercase
}
#pageActions a:hover {
	text-decoration: underline
}
ul#pageActions,#pageActions ul {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	padding: 2px 0 0
}
#right_column #pageActions li {
	list-style-type: none;
	float: left;
	font-weight: bold
}
#pageActions li.email {
	background: url(../images/icon_email.gif) no-repeat 1px 1px !important;
	font-size: .8em;
	font-family: arial;
	margin: 0 !important
}
#pageActions .email a {
	margin: 0;
	padding: 0 10px
}
#pageActions li.print {
	background: url(../images/icon_print.gif) no-repeat 1px 1px !important;
	font-size: .8em;
	font-family: arial;
	margin: 0 !important
}
#pageActions .print a {
	margin: 0;
	padding: 0 5px 0 10px
}
#pageActions li.accessibility {
	background: url(../images/icon_accessible.gif) no-repeat 5px 1px !important;
	padding: 0;
	margin: 0 !important;
	font-size: .8em;
	font-family: arial
}
#pageActions .accessibility a {
	margin: 0;
	padding: 0 0 0 26px
}
#pageActions li.share {
	background: url(../images/icon_share.gif) no-repeat 5px 1px !important;
	padding: 0;
	margin: 0 !important;
	font-size: .8em;
	font-family: arial
}
#pageActions .share a {
	margin: 0;
	padding: 0 0 0 18px
}
/* --- Photo/Nav Tops and Bottoms (decoration) -- */
img.photo {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	width: inherit;
	float: left
}
.column img.photo,.content img.photo {
	width: 210px;
	margin-left: 5px
}
.photocap {
	background-repeat: no-repeat;
	height: 6px;
	line-height: 1px;
	font-size: .1em;
	clear: left;
	margin-left: 5px
}
/* used for the left floated series of images - you can put a caption below - this styles that caption */
#left_column .photocap {
	margin-left: 0
}
.photo_top {
	width: 210px;
	background-image: url(../images/corner_photo_top.gif);
	background-position: top left;
	margin-left: 5px;
	margin-top: 10px
}
.photo_bottom {
	width: 210px;
	background-image: url(../images/corner_photo_bottom.gif);
	background-position: bottom left;
	margin-left: 5px
}
.nav_top {
	background-image: url(../images/corner_nav_top.gif);
	background-position: top left
}
.nav_bottom {
	background-image: url(../images/corner_nav_bottom.gif);
	background-position: bottom left
}
#left_column .photolink {/*width:260px;*/ width:250px
}
.photolink {
	width: 125px;
	float: left
}
.photolink a {
	font-weight: bold
}
.photolink .text {
	float: left;
	padding: 5px 0 0 5px;
	color: #FFF /* set colour of link text under photos/ministers photo here */
}
.icon_top {
	width: 125px;
	background-image: url(../images/corner_icon_top.gif);
	background-position: top left
}
.icon_bottom {
	width: 125px;
	background-image: url(../images/corner_icon_bottom.gif);
	background-position: bottom left
}
.icon {
	width: 125px;
	float: left;
	padding-bottom: 20px
}
.icon .photolink,.icon .photocap {
	padding-right: 0;
	margin-left: 0
}
.spacer {
	float: left;
	width: 40px
}
.half_spacer {
	float: left;
	width: 19px
}
.mini_spacer {
	float: left;
	width: 5px
}
/* -- COLOURS --*/
.grey {
	background-color: #868686
}
.mycolour {
	background-color: #000
}
.red {
	background-color: #F30
}
/* --- CONTENT AREA LISTS --- */
#right_column ul li {
	list-style-type: disc;
	color: #000;
	margin-left: 20px;
	padding-left: 5px;
	line-height: 150%
}
#right_column ul li {
	color: #566d1b /* text color for lists in content area */
}
.column li a,.content li a {
	font-size: 90%
}
.column ul,.content ul {
	margin: 0;
	padding: 0;
	margin-bottom: 20px;
	margin-top: 10px
}
/* ------ GRID - ------------ */
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_8plus,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16 {
	display: inline;
	float: left;
	border-right: 1px dotted #ccc;
	overflow: hidden;
	margin-left: 0;
	padding-right: 9px;
	margin-right: 10px
}
/*.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16 {
	background-color: #CCFFFF;
	border: 1px dotted green;
}
*/ /* For planning,testing debugging */
/* widths WIDER THAN THE #right_column NAV GRID BOXES */
#wrapper .grid_16,.grid_16 .header {/* whole page minus 20px (nav extra space) */ width:960px
}
#wrapper .grid_15,.grid_15 .header {
	width: 880px
}
#wrapper .grid_14,.grid_14 .header {
	width: 820px
}
#wrapper .grid_13,.grid_13 .header {
	width: 760px
}
/* END widths WIDER THAN THE #right_column NAV GRID BOXES */
#wrapper .grid_12,.grid_12 .header {/* whole right_column */ width:700px
}
#wrapper .grid_11,.grid_11 .header {
	width: 640px
}
#wrapper .grid_10,.grid_10 .header {
	width: 580px
}
#wrapper .grid_9,.grid_9 .header {
	width: 520px
}
#wrapper .grid_8plus,.grid_8plus .header {/* for layouts w no left nav - transitional */ width:500px
}
#wrapper .grid_8,.grid_8 .header {/* two thirds of right_column */ width:460px
}
#wrapper .grid_7,.grid_7 .header {
	width: 400px
}
#wrapper .grid_6,.grid_6 .header {/* half of right_column */ width:340px
}
#wrapper .grid_5,.grid_5 .header {
	width: 280px
}
#wrapper .grid_4,.grid_4 .header {/* one third of right_column */ width:220px
}
#wrapper .grid_3,.grid_3 .header {/* a quarter of right_column */ width:160px
}
#wrapper .grid_2,.grid_2 .header {
	width: 100px
}
#wrapper .grid_1,.grid_1 .header {
	width: 40px
}
/* ------ GRID - ------------ */
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_8plus,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16 {
	display: inline;
	float: left;
	border-right: 1px dotted #ccc;
	overflow: hidden;
	margin-left: 0;
	padding-right: 9px;
	margin-right: 10px
}
.grid_6plus,.grid_7plus,.grid_9plus,.grid_10plus,.grid_11plus,.grid_12plus,.grid_13plus,.grid_14plus,.grid_15plus,.grid_16plus {
	display: inline;
	float: left;/*border-right:1px dotted #ccc;*/overflow:hidden;
	margin-left: 0;
	padding-right: 9px;
	margin-right: 10px
}
/* *******-- grid_#plus<--- ******* whole page FOR CURRENT 980px width - adapted grid adds 20px to accomodate the first round of templates */
#wrapper .grid_16plus,.grid_16plus .header {
	width: 980px
}
#wrapper .grid_16,.grid_16 .header {/* whole page minus 20px (nav extra space) */width:960px
}
#wrapper .grid_15plus,.grid_15plus .header {
	width: 900px
}
#wrapper .grid_15,.grid_15 .header {
	width: 880px
}
#wrapper .grid_14plus,.grid_14plus .header {
	width: 840px
}
#wrapper .grid_14,.grid_14 .header {
	width: 820px
}
#wrapper .grid_13plus,.grid_13plus .header {
	width: 780px
}
#wrapper .grid_13,.grid_13 .header {
	width: 760px
}
/* END widths WIDER THAN THE #right_column NAV GRID BOXES */
#wrapper .grid_12plus,.grid_12plus .header {
	width: 720px
}
#wrapper .grid_12,.grid_12 .header {
	width: 700px
}
/* width of whole right_column WITH NAV */
#wrapper .grid_11plus,.grid_11plus .header {
	width: 660px
}
#wrapper .grid_11,.grid_11 .header {
	width: 640px
}
#wrapper .grid_10plus,.grid_10plus .header {
	width: 600px
}
#wrapper .grid_10,.grid_10 .header {
	width: 580px
}
#wrapper .grid_9plus,.grid_9plus .header {
	width: 540px
}
#wrapper .grid_9,.grid_9 .header {
	width: 520px
}
/* for layouts w no left nav - transitional */
#wrapper .grid_8plus,.grid_8plus .header {
	width: 500px
}
#wrapper .grid_8,.grid_8 .header {
	width: 460px
}
/* two thirds of right_column WITH NAV */
#wrapper .grid_7plus,.grid_7plus .header {
	width: 420px
}
#wrapper .grid_7,.grid_7 .header {
	width: 400px
}
#wrapper .grid_6plus,.grid_6plus .header {
	width: 360px
}
#wrapper .grid_6,.grid_6 .header {
	width: 340px/* half of right_column WITH NAV */
}
#wrapper .grid_5,.grid_5 .header {
	width: 280px
}
#wrapper .grid_4,.grid_4 .header {
	width: 220px
}
/* one third of right_column WITH NAV */
#wrapper .grid_3,.grid_3 .header {
	width: 160px
}
/* a quarter of right_column WITH NAV */
#wrapper .grid_2,.grid_2 .header {
	width: 100px
}
#wrapper .grid_1,.grid_1 .header {
	width: 40px
}
/* -- USEFUL for NESTING grid items -- remove last margin in set */
.nomargin {
	margin: 0
}
/* removes all margins */
.noborder {
	border: 0
}
/* removes all borders */
.borderboth {
	padding-left: 9px;
	border-right: 1px dotted #ccc;
	border-left: 1px dotted #ccc
}
/* --------- CLEARING ------------*/
html body div.clear,html body span.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0
}
* html .clearfix {
	height: 1%
}
.clearfix {
	display: block
}
/* clearfix */
.clearfix:after,.row:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden
}
.clearfix,.row {
	display: inline-block
}
/*Those two .clearfix have to be separate!)*/
.clearfix,.row {
	display: block
}
/* CHANGE-ABLE */
#right_column .content .nobulletlist li {
	margin: 0;
	padding: 0;
	list-style-type: none
}