@charset "utf-8";
@import url(fonts.css);
/* CSS Document */

/* $Id: changeme.css 44 2009-07-03 21:12:13Z DragKng $ */

/*
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, 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; - commented out - October 18/09 - with Krista's approval */
}

html {
    height: 100%;
}

body {
    line-height: 1;
    height: 100%;
    background-color: #fff; /* sj */
}

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;
    margin-bottom: 1.5em;
}

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

h2 {
    color: #000;
    font-size: 1.2em;
    padding-bottom: 6px;
}

h3 {
    color: #000; /* COLOUR CHANGE */
    font-size: 1.1em;
    margin: .5em 0; /* default margins for h tags: in this order: top/bottom, right/left */
}

h4 {
    color: #000;
    font-size: 1.0em;
    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;
    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;
    font-weight: bold;
    color: #0e6789; /* COLOUR CHANGE */
    /*background-color: transparent; sj*/
}

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: 980px; /* ORIGINAL 1000px */
    margin-top: 10px;
}

/* 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: #273d48 url('/images/arc_left.gif') no-repeat;  COLOUR CHANGE header BG image match #colour to bottom half of arc graphic */
    display: block;
    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.noShowHide {
    color: #fff;
    padding: 4px 5px 6px;
}

.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: #333; /* STANDARD COLOUR - DO NOT EDIT */
    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: #f7f7ef 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 #ontario_header,
#header #ministry_header {
    margin-left: 10px;
}

#header #ministry_header {
    font: 700 1rem Raleway, sans-serif;
    line-height: 1.1rem;
    margin-top: 7px;
    margin-bottom: 0.7em;
}

/* HEADER LAYOUT STYLES --------------------------------------------- */

#arc {
    width: 100%;
    height: 45px;
    float: left;
    background-color: #c0c0c0;
}

#arc form { /* search form */
    float: right;
    padding-right: 20px;
}

#searchBox { /* search box */
    width: 300px;
    height: 1.5em;
    padding: 3px;
    background-color: #fff;
    border: 1px solid #dff0f7;
}

#searchBox:hover {
    border: 1px solid #fff;
}

#submit { /* submit (go) button */
    border: 1px;
    color: #fff;
}

#submit:hover { /* submit (go) button hover state */
    border: 1px solid #fff;
    margin: -1px;
}

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

#navbar { /* the main nav bar */
    width: 100%;
    height: 2.75em;
    float: left;
    background-color: #333; /* STANDARD COLOUR - DO NOT EDIT */
}

.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: 60px;
    font-family: Raleway, sans-serif;
    font-size: 1.3em;
    text-align: left;
    border: 1px solid #8d2f0e;
    border-bottom: 2em solid #8d2f0e;
}

#splash #ontario_header {
    margin-top: 0;
    margin-bottom: 25px;
}

/*#splash h2#ministry_header {*/
/*    font-weight: 700;*/
/*    font-size: 1.5em;*/
/*    line-height: 1.3rem;*/
/*    transform: none;*/
/*}*/

#splash .two_cols {
    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 h3 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: 0; /* ORIGINAL 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: 0; /* ORIGINAL 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;
    padding-top: 20px;
}

.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: 980px; /* ORIGINAL 1000 px */
}

.row p, .row li {
    margin-right: 20px;
}

.two_cols {
    background: url('/images/two_cols.gif') repeat-y -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 ------------ */

#full_footer { /* changed from orginal to make the footer span the whole bottom area */
    border-top: 1px solid #7f7f7f;
    padding-bottom: 1em;
    width: 100%;
}

#footer p {
    font-weight: bold;
    text-transform: uppercase;
    color: #666;
    margin-top: 0.7em;
    font-size: .9em;
}

#footer p.right {
    margin-right: 0;
    margin-left: 0;
}

#footer a, #footer a:link, #footer a:visited, #footer a:active {
    color: #666;
    text-decoration: underline;
}

/* --- list of links footer - new nov2009 ---- */
#footer ul.right {
    width: 490px;
    margin-top: 0.7em;
}

#footer ul.left {
    width: 470px;
    margin-left: 0;
}

#footer ul {
    font-weight: bold;
    text-transform: uppercase;
    color: #666;
    font-size: .9em;
    padding-left: 0;
    display: inline;
    margin: 0 0 1.0em;
}

#footer ul li {
    margin-left: 0;
    margin-top: 0.7em;
    padding: 0 10px;
    border-left: 1px solid #000;
    list-style: none;
    display: inline;
}

#footer ul li.noborder {
    border: 0 none;
}

#footer ul.left li {
    float: left;
}

#footer p.last-mod {
    text-transform: none;
    clear: right;
    float: right;
    width: 490px;
    text-align: right;
    margin: 0 10px 0 0;
}

/* --- list of links footer - new nov2009 ---- */

/* --- ACCESSIBILITY ---- ncs EDITED nov4/09 (bug fix, add h2) use to hide h1s or h2s you don't want visible to the sighted, but would like to have read by screen readers */
h1.accessible, h2.accessible, h3.accessible {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- TITLE BARS --- */

.row .header {
    width: 700px;
    float: left;
    clear: both;
    margin: 0 0 0.5em 0;
    border-top: 3px solid #666;
    border-bottom: 1px solid #999;
    /*background-color: #e0e0b7;
    background-image: url('/images/arc_right_main.gif');*/
    background-repeat: no-repeat;
}

/* ---- 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: #333;
    margin: 5px 10px 0 10px;
    padding: 0 0 5px 0;
    font-size: 1.2em;
    float: left;
}

.header h2 {
    color: #fff;
    margin: 5px 10px 0 10px;
    padding: 0 0 5px 0;
    font-size: 1.1em;
    float: left;
}

.header h3 {
    color: #333;
    margin: 5px 10px 0 10px;
    padding: 0 0 5px 0;
    font-size: 1.1em;
    float: left;
}

.more, .more2 { /* style for the more> links pulls the more out 30px from the right side of the block */
    float: right;
    margin: 0.5em 0.5em 0 0;
    font-size: .8em;
    font-weight: bold;
    text-transform: uppercase;
}

.more a {
    color: #000;
    line-height: 1.9em;
}

/* coloured box */
/*the width changed by shakker from 720 to 700 because of the lockup regisration pages.*/
.box {
    float: left;
    width: 700px;
    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: none outside 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, sans-serif;
    margin: 0 !important;
}

#pageActions .email a {
    margin: 0;
    padding: 0 0 0 15px;
}

#pageActions li.print {
    background: url('/images/icon_print.gif') no-repeat 1px 1px !important;
    font-size: .8em;
    font-family: arial, sans-serif;
    margin: 0 !important;
}

#pageActions .print a {
    margin: 0;
    padding: 0 0 0 15px;
}

#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, sans-serif;
}

#pageActions .accessibility a {
    margin: 0;
    padding: 0 0 0 26px;
}

#pageActions li.share {
    background: url('/images/icon_accessible.gif') no-repeat 5px 1px !important;
    padding: 0;
    margin: 0 !important;
    font-size: .8em;
    font-family: arial, sans-serif;
}

#pageActions .share a {
    margin: 0;
    padding: 0 0 0 26px;
}

/* --- 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% October 9 2009 kj */
}

#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 {
    padding: 0;
    margin: 10px 0 20px;
}

/* this is a fix for google chrome � it floats the first bullet */
div.content ul li, div.column ul li {
    clear: left;
}

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