/* DEFAULTS
----------------------------------------------------------*/

html, body {
	background-color: #8fa8c2 !important;
	/* Always show scroll bar */
	min-height: 101%;
}

body, textarea
{
    /*background: #b6b7bc;*/
    font-size: 14px;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

a:link, a:visited
{
    color: #034af3;
}

a:link:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:link:active
{
    color: #034af3;
}

a.disabled,
a.disabled:hover,
a.disabled:active {
	cursor: not-allowed;
	text-decoration: none;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}

input[type=text][disabled],
input[type=number][disabled],
input[type=text][readonly],
input[type=password][readonly],
input[type=number][readonly] {
	background-color: #eee;
	opacity: 1;
}


/* HEADINGS
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 10px;

}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 10px;
    font-weight: 600;
}

h2
{
    font-size: 1.5em;

}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/

.body-content
{
    background-color: #fff;
    min-height: 420px;
    border-left: 1px solid #496077;
    border-right: 1px solid #496077;
    }

.page
{
    width: 960px;
    background-color: #fff;
    margin: 0 auto;
    /*margin: 20px auto 0px auto;*/
    border-left:1px solid #496077;
    border-right: 1px solid #496077;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    /*background: #4b6c9e;*/
    background: #02284f;
    width: 100%;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    padding: 8px 0px 8px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
    border-left: 1px solid #496077;
    border-right: 1px solid #496077;
    border-bottom: 1px solid #496077;
    /*background: #4b6c9e;*/
    /*background:#02284f;*/
    /*background:#19284f;*/
    /*background:#66C2EB;*/
    background:#BCD367;

}
.footer, .footer a
{
    /*color: #f9f9f9;*/
    color:white;
}

.footer p
{
    text-align: inherit;
    margin-bottom:0px;
    }

.kickboard
{
    padding: 8px 0px 8px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
    /*background: #b6b7bc;*/
    background:#8fa8c2;
    }

table.layout {
	width: 100%;
}

table.layout td {
	vertical-align: top;
}

.border-box {
	box-sizing: border-box;
}

	.border-box *,
	.border-box *::before,
	.border-box *::after {
		box-sizing: inherit;
	}

/* BOOTSTRAP-LIKE CLASSES
----------------------------------------------------------*/
/* Forms */
.form-group {
	margin-bottom: 8px;
}

.form-group > label,
.form-group > input {
	display: block;
}

.form-group > label + input {
	margin-top: 4px;
}


/* BANNER
----------------------------------------------------------*/
/* NB: Keep (mostly) in sync with styles in theme2.css and bootstrap-custom.css */
.banner {
    height: 80px;
}

.banner .tenant-name-container,
.banner .tenant-logo {
    display: inline-block;
    height: 70px;
    margin: 5px 10px 0;
    vertical-align: middle;
}

.banner .tenant-name-container {
	font-size: 28px;
	font-weight: bold;
	line-height: 68px;
}

.banner .fm-in-conjunction {
    display: inline-block;
    padding: 10px 20px 0;
    vertical-align: top;
}

.banner .fm-in-conjunction > span {
    display: block;
    font-size: 1.5em;
    margin-top: 2px;
    text-align: right;
    width: 100%;
}

#base-user-header .free-modifier {
	position: absolute;
	top: 0;
	left: -340px;
}

.free-modifier {
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
}

.free-modifier,
.free-modifier:active,
.free-modifier:focus,
.free-modifier:hover {
	text-decoration: none;
}

.free-modifier > i {
	margin: 5px 0;
}

.free-modifier > i,
.free-modifier > span {
	display: block;
	color: white;
	transition: color 0.3s, text-shadow 0.3s;
}

.free-glow,
.free-modifier:hover > i,
.free-modifier:hover > span {
	background: linear-gradient(90deg, #fff 10%, #ffd700 30%, #fff 50%, #ffd700 70%, #fff 90%);
	background-size: 300% auto;
	background-clip: text;
	color: #222;
	text-shadow:
		0 0 10px #fff,
		0 0 20px #ffd700,
		0 0 30px #fff,
		2px 2px 15px #ffd700,
		-2px -2px 15px #fff,
		2px -2px 20px #ffd700,
		-2px 2px 20px #fff,
		0 0 40px #fff,
		0 0 60px #ffd700;
}


/* TAB MENU
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}


/* ADMIN: EDIT USER PAGE
----------------------------------------------------------*/
table.editUser {
    border: none;
    border-collapse: collapse;
    margin-bottom: 15px;
    width: 100%;
}
    table.editUser th,
    table.editUser td {
        height: 21px;
        padding: 1px 3px;
    }

    table.editUser:not(.noBorder) tbody th:first-child,
    table.editUser:not(.noBorder) tbody td:first-child {
        border-left: 1px solid lightblue;
    }
    table.editUser:not(.noBorder) tbody th:last-child,
    table.editUser:not(.noBorder) tbody td:last-child {
        border-right: 1px solid lightblue;
    }
    table.editUser:not(.noBorder) tbody tr:first-child th,
    table.editUser:not(.noBorder) tbody tr:first-child td {
        border-top: 2px solid lightblue;
    }
    table.editUser:not(.noBorder) tbody tr:last-child th,
    table.editUser:not(.noBorder) tbody tr:last-child td {
        border-bottom: 2px solid lightblue;
    }

    table.editUser tbody th {
        font-size: smaller;
        text-align: right;
    }

    table.editUser a {
        color: blue;
        text-decoration: underline;
    }
    table.editUser a:hover {
        cursor: pointer;
        text-decoration: none;
    }


table.table-form th:first-child,
table.table-form td:first-child {
    text-align: right;
}

table.table-form th:last-child,
table.table-form td:last-child {
    text-align: left;
}


/* GUIDE PAGES
----------------------------------------------------------*/
input.guide.btn-next {
    margin: 10px 0 0 10px;
}

table.guide {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0; /* 0 8px; */
    padding: 8px 0;
}
    table.guide a:not(.ui-button),
    table.guide a:not(.ui-button):link,
    table.guide a:not(.ui-button):visited {
        color: #696969;
    }
    table.guide a span span {
        text-decoration: underline;
    }
    table.guide a img:hover,
    table.guide a img:active,
    table.guide a span:hover img,
    table.guide a span:active img {
        opacity: 0.5;
    }
    table.guide a span:hover span {
        text-decoration: none;
    }

    table.guide td,
    table.guide th,
    table.guide img {
        vertical-align: middle;
    }

    table.guide > tbody > tr > td,
    table.guide > tbody > tr > th {
        padding: 5px;
        border: solid 1px;
        border-style: none;
        background-color: rgba(211,211,211,.33);
    }
        table.guide > tbody > tr > td:first-child,
        table.guide > tbody > tr > th:first-child {
            padding-left: 10px;
            border-left: solid 3px;
        }
        table.guide > tbody > tr > td:last-child,
        table.guide > tbody > tr > th:last-child {
            padding-right: 10px;
            border-right: solid 3px;
        }
    table.guide > tbody > tr:first-child > td,
    table.guide > tbody > tr:first-child > th {
        padding-top: 10px;
        border-top-style: solid;
    }
        table.guide > tbody > tr:first-child > td:first-child,
        table.guide > tbody > tr:first-child > th:first-child {
            border-top-left-radius: 15px;
        }
        table.guide > tbody > tr:first-child > td:last-child,
        table.guide > tbody > tr:first-child > th:last-child {
            border-top-right-radius: 15px;
        }
    table.guide > tbody > tr:last-child > td,
    table.guide > tbody > tr:last-child > th,
    table.guide > tbody > tr.lastVisibleRow > td,
    table.guide > tbody > tr.lastVisibleRow > th {
        padding-bottom: 10px;
        border-bottom-style: solid;
    }
        table.guide > tbody > tr:last-child > td:first-child,
        table.guide > tbody > tr:last-child > th:first-child,
        table.guide > tbody > tr.lastVisibleRow > td:first-child,
        table.guide > tbody > tr.lastVisibleRow > th:first-child {
            border-bottom-left-radius: 15px;
        }
        table.guide > tbody > tr:last-child > td:last-child,
        table.guide > tbody > tr:last-child > th:last-child,
        table.guide > tbody > tr.lastVisibleRow > td:last-child,
        table.guide > tbody > tr.lastVisibleRow > th:last-child {
            border-bottom-right-radius: 15px;
        }

    /* Toggle Row */
    table.guide > tbody > tr.toggleRowOff {
        visibility: hidden;
    }
        table.guide > tbody > tr.toggleRowOff > td {
            height: 0 !important;
            padding: 0;
        }
        table.guide > tbody > tr.toggleRowOff > td > div {
            height: 0;
            overflow: hidden;
            opacity: 0;
            transition: opacity .3s linear;
        }
    table.guide > tbody > tr.toggleRowOn {
        visibility: visible;
    }
        table.guide > tbody > tr.toggleRowOn > td {
            height: 40px;
            padding: 5px 10px 10px 10px;
        }
        table.guide > tbody > tr.toggleRowOn > td > div {
            height: auto;
            overflow: initial;
            opacity: 1;
        }

    /* Tables inside toggle row */
    table.guide#guideStart > tbody > tr.toggleRowOff > td table td {
        /*height: 35px; GM commented this out - problem with budget */
        height:auto;
        width: auto;
    }
    table.guide > tbody > tr.toggleRowOff > td table td,
    table.guide > tbody > tr.toggleRowOff > td table th {
        padding: 2px 3px;
    }
    table.guide > tbody > tr.toggleRowOff > td table td:first-child,
    table.guide > tbody > tr.toggleRowOff > td table th:first-child {
        padding-left: 0;
        text-align: left;
    }

    /* spacer <tr> between adjacent <tbody>s */
    table.guide > tbody.spacer > tr > td {
        height: 8px !important;
        line-height: 8px;
        padding: 0;
        margin: 0;
        background: none;
        border: none;
    }

    /* infoBox */
    table.guide div.infoBox {
        background-color: lightgray;
        padding: 15px;
        border-radius: 5px;
    }
        table.guide div.infoBox :first-child {
            margin-top: 0;
            padding-top: 0;
        }
        table.guide div.infoBox :last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }


/* Getting Started page; Reports page; Modulators page
----------------------------------------------------------*/
table#guideStart {
}
table.guide#guideStart table#guideStartPlan td,
table.guide#guideStart table#guideStartBank td {
    height: 25px;
}
table#guideReports {
}
    #guideStart td {
        height: 40px;
    }
    #guideStart > tbody > tr > td:first-child {
        font-weight: bold;
        white-space: nowrap;
    }
    #guideStart > tbody > tr > td:nth-child(2) {
        width: 1px;
        /* use overlays instead */
        display: none;
    }
    #guideStart > tbody > tr > td:nth-child(3),
    #guideReports td:first-child {
        min-width: 360px;
    }
        #guideStart > tbody > tr > td:nth-child(3) > a,
        #guideReports td:first-child a:not(.ui-button) {
            font-weight: bold;
        }
        #guideStart td:nth-child(3) span,
        #guideReports td:first-child span {
            display: inline-block;
        }

        #guideStart td a span span:first-child,
        #guideReports td a span span:first-child {
            width: 75px;
            text-align: center;
        }
        #guideStart td a span span:nth-child(3),
        #guideReports td a span span:nth-child(2) {
            margin-left: 10px;
        }
    #guideStart td.sectionTitle > a {
        text-decoration: none;
    }
    #guideStart td.sectionTitle > img {
        margin-left: 5px;
    }

    #guideModulators p.modulatorList > span {
    display: block;
    margin: 8px;
}
    #guideModulators p.modulatorList > span > span:first-child {

    }
    #guideModulators p.modulatorList > span > span:nth-child(2) {
        padding-left: 5px;
        position: relative;
        top: -5px;
    }

/* Custom heading styles for guide pages */
.guideHeading {
    font-size: 16px;
    font-weight: bold;
    color: #696969;
    font-variant: normal;
}
h1.guideHeading {
    font-size: 18px;
}
    .guideHeading img {
        margin-right: 10px;
    }
    .guideHeading span:nth-child(2) {
        position: relative;
        top: -10px;
        font-size: 16px;
        font-weight: bold;
        color: #696969;
    }
        /* if heading is linked */
        a > .guideHeading span:nth-child(2) {
            text-decoration:underline;
        }
        a > .guideHeading:hover img {
            opacity: 0.5;
        }
        a > .guideHeading:hover span:nth-child(2){
            text-decoration: none;
        }
    /* subheading */
    .guideSubheading {
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    }

.smallRedText
{
    font-size:11px;
    line-height:16px;
    color:red;
    white-space:nowrap;
}

/* Planner page
----------------------------------------------------------*/
img.statusOverlay {
    background-color: transparent !important;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 58%;
    top: 48%;
    z-index: 2;
}
    img.statusOverlay:hover,
    img.statusOverlay:active {
        opacity: 1 !important;
    }

.mapList li > img.statusOverlay {
    left: 64%;
    top: 1px;
}
#guideStart .sectionTitle a.hasOverlay > span > span { position: relative; }
#guideStart .sectionTitle a.hasOverlay > span > span > img.statusOverlay { left: 55%; }

#mapHeader {
    overflow: hidden;
    height: 32px;
    padding: 0 10px;
}
    #mapHeader h1,
    #mapHeader h1 a {
        font: 16px Arial, Helvetica, "sans-serif ";
        color: #666666;
    }
    #mapHeader h1 {
        float: left;
        margin: 8px 0 0 0;
        font-weight: bold;
    }
    #mapHeader h1 span a {
        font-size: 12px;
    }

#mapContainer {
    position: relative;
    width: 100%;
}
	#mapContainer img.inactive,
	img.inactive {
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: gray; /* IE (no -ms- prefix yet) */
		filter: grayscale(100%);
	}
    #mapContainer a img:hover,
    #mapContainer a img:active {
        opacity: 0.5;
    }
    #mapContainer .mapTable table tr:hover,
    #mapContainer .mapTable table tr:active {
        /*cursor: pointer;*/
        background-color: rgba(138, 179, 41, 0.83);
        /*text-decoration: underline;*/
    }
    #mapContainer .mapTable table tr.empty:hover,
    #mapContainer .mapTable table tr.empty:active {
        /*cursor: initial;*/
        background-color: white;
        /*text-decoration: none;*/
    }

#mapCanvas,
#legendCanvas {
    /*border: 1px dotted;*/
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
}

#map {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
}

    #map div.column,
    #map div.columnSpacer {
        display: inline-block;
        float: left;
        height: 100%;
    }
    #map div.columnSpacer {
        width: 20px;
    }

    #map div.columnHeader {
        background: #EEE;
        margin-bottom: 8px;
        padding: 5px 0;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
    }

    #map div.group {
        border: 2px solid #eee;
        border-radius: 4px;
    }

    #map div.group > div.columnGroupContent > div.column {
        margin: 0 16px;
    }
    #map div.group > div.columnGroupContent > div.column:first-child {
        margin-left: 8px;
    }
    #map div.group > div.columnGroupContent > div.column:last-child {
        margin-right: 8px;
    }

    #map div.column > div.cell {
        display: inline-block;
        float: left;
        /*width: 100%;*/
        text-align: center;
    }
    #map div.column:not(.noInnerCellPadding) > div.cell {
        margin: 10px 0px;
    }
    #map div.column > div.cell:first-child {
        margin-top: 5px;
    }
    #map div.column > div.cell:last-child {
        margin-bottom: 5px;
    }

	#map div.column.columnCalcs .mapIcon > a {
		height: 44px;
	}

		#map div.column.columnCalcs .mapIcon > a > img {
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		}

.mapIcon,
.mapIconOnly {
    position: relative;
    width: 100px;
    height: 95px;
}
#guideHelper .mapIcon {
    display: inline-block;
    vertical-align: top;
    text-align: center;
}
.mapBox {
    position: relative;
    border: 1px solid black;
    background-color: #F1FFCF !important;
    width: 175px;
    height: auto;
    padding: 9px 0;
}
    .mapBox > span,
    #map .mapBox > span.caption {
        width: 100%;
        background-color: transparent;
        position: relative;
    }
    a .mapBox span {
        color: #696969;
    }
    a:hover .mapBox span,
    a:active .mapBox span {
        text-decoration: underline;
    }
.mapIcon > a,
.mapIconOnly > a,
#guideStart .sectionTitle a.hasOverlay {
    display: inline-block;
    position: relative;
}
.mapIcon img,
.mapIconOnly img {
    background-color: white;
}
#guideHelper .mapIcon img {
    background-color: transparent;
}
.mapIconOnly {
    height: 73px;
    padding-top: 22px;
}

#map span.caption {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 13px; /*1.1em;*/
    line-height: 15px;
    font-weight: bold;
    background-color: white;
}

#map ul + span.caption {
    margin-top: 8px;
}

#map span.annotationN,
#map span.annotationS,
#map span.annotationE,
#map span.annotationW {
    /*border: 1px dotted;*/
    position: absolute;
    width: 100px;
    font-size: 1em;
    font-weight: normal;
    background-color: white;
}
#map span.annotationN,
#map span.annotationS {
    text-align: center;
    margin-left: -50px;
}
#map span.annotationN {
    margin-top: -30px;
}
#map span.annotationS {
    /*margin-top: 10px;*/
}
#map span.annotationE,
#map span.annotationW {
    margin-top: -50px;
}
#map span.annotationE {
    text-align: left;
    margin-left: 24px;
}
#map span.annotationW {
    text-align: right;
    margin-left: -125px;
}


/* Map List and Flyout Menus */
/* NB: Supporting touch devices
    Add :active version of selection rule _after_ any :hover selection
    e.g.
        li:hover,
        li:active {
            [styles]
        }
*/
/* resets */
.mapList,
.mapList > ul,
.mapList > ul > li,
.mapFlyout > ul,
.mapFlyout > ul > li {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.mapList > ul {
    position: relative;
    z-index: 2;
    width: 208px;
    border: 1px solid green;
}
    .mapList > ul > li,
    .mapFlyout > ul > li {
        min-height: 1px;
        line-height: 1em;
        vertical-align: middle;
        position: relative;
        margin: 4px 0;
        background-color: #B0CC6F;
        background-repeat: no-repeat;
        background-position-y: center;
        background-size: 8px
    }
    .mapList > ul > li.gray,
    .mapList > ul > li.gray li,
    .mapFlyout > ul > li.gray,
    .mapFlyout > ul > li.gray li {
        background-color: lightgray;
    }
    .mapList > ul > li.gray:hover,
    .mapList > ul > li.gray:active,
    .mapList > ul > li.gray li:hover,
    .mapList > ul > li.gray li:active,
    .mapFlyout > ul > li.gray:hover,
    .mapFlyout > ul > li.gray:active,
    .mapFlyout > ul > li.gray li:hover,
    .mapFlyout > ul > li.gray li:active {
        background-color: #b2b2b2;
    }
    .mapList > ul > li:first-child,
    .mapFlyout > ul > li:first-child {
        margin-top: 0;
    }
    .mapList > ul > li:last-child,
    .mapFlyout > ul > li:last-child {
        margin-bottom: 0;
    }

    .mapList > ul > li.empty {
        background: none;
    }
    .mapList > ul > li.empty:hover,
    .mapList > ul > li.empty:active {
        background: none;
        text-decoration: none;
    }
    .mapList > ul > li.empty a:hover,
    .mapList > ul > li.empty a:active {
        cursor: default;
    }
        .mapList > ul > li a,
        .mapFlyout > ul > li a {
            font-weight: bold;
            font-size: 12px;
            line-height: 12px;
            display: block;
            padding: 7px 10px;
        }
        .mapList > ul a,
        .mapList > ul a:link,
        .mapList > ul a:visited,
        .mapFlyout > ul a,
        .mapFlyout > ul a:link,
        .mapFlyout > ul a:visited {
            color: black; /*#696969;*/
            text-decoration: none;
        }
        .mapList > ul a:hover,
        .mapList > ul a:active,
        .mapFlyout > ul a:hover,
        .mapFlyout > ul a:active {
            color: black; /*#696969;*/
        }
        .mapFlyout > ul > li a {
            font-weight: normal;
        }
        .mapFlyout > ul > li > a:first-child {
            padding-right: 37px;
        }
    .column .cell.mapList > ul > li.disabled,
    .column .cell.mapIcon div.mapFlyout > ul > li.disabled {
        background-color: lightgray;
        cursor: not-allowed !important;
    }
        .mapList > ul > li.disabled:hover,
        .mapList > ul > li.disabled:active,
        .column .cell.mapIcon div.mapFlyout > ul > li.disabled:hover,
        .column .cell.mapIcon div.mapFlyout > ul > li.disabled:active {
            text-decoration: none !important;
        }
        .column .cell.mapList > ul > li.disabled a span,
        .column .cell.mapIcon div.mapFlyout > ul > li.disabled a span {
            color: #797979;
        }
        .column .cell.mapList > ul > li.disabled a.mapListInsetGray span,
        .column .cell.mapIcon div.mapFlyout > ul > li.disabled a.mapListInsetGray span,
        .column .cell.mapList > ul > li.disabled a.mapListInsetRed span,
        .column .cell.mapIcon div.mapFlyout > ul > li.disabled a.mapListInsetRed span,
        .column .cell.mapList > ul > li.disabled a.mapListInsetYellow span,
        .column .cell.mapIcon div.mapFlyout > ul > li.disabled a.mapListInsetYellow span {
            background-color: darkgray;
            color: lightgray;
            border-color: black;
        }

.mapFlyout {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0s linear 0.5s, opacity 0.3s linear;
    -moz-transition: visibility 0s linear 0.5s, opacity 0.3s linear;
    -ms-transition: visibility 0s linear 0.5s, opacity 0.3s linear;
    -o-transition: visibility 0s linear 0.5s, opacity 0.3s linear;
    transition: visibility 0s linear 0.5s, opacity 0.3s linear;
    z-index: 3;
    position: absolute;
    padding: 20px; /* so it doesn't disappear if mouse is just off element */
    /* some padding on flyout list side is swapped for margin (below) */
    top: -21px;
}

    .mapFlyout > ul,
    .mapFlyout > ul ul {
        width: 175px;
        border: 1px solid green;
        background: #fff;
    }
    .mapList > ul > li.indicateSubListL .mapFlyout {
        left: -201px;
    }
    .mapIcon.indicateSubListL .mapFlyout,
    .sectionTitle > .indicateSubListL .mapFlyout {
        left: -180px;
        padding-right: 8px;
        margin-right: 12px;
    }
    .mapIcon.indicateSubListR .mapFlyout,
    #guideStart .sectionTitle > .indicateSubListR .mapFlyout {
        left: 63px;
        padding-left: 8px;
        margin-left: 12px;
    }
    .mapBox.indicateSubListR .mapFlyout {
        left: 83px;
    }
    .sectionTitle > .indicateSubListR .mapFlyout {
        left: 43px;
    }
    .sectionTitle > .indicateSubListL,
    .sectionTitle > .indicateSubListR {
        position: relative;
    }

    .mapIcon li.indicateSubListL .mapFlyout,
    .sectionTitle li.indicateSubListL .mapFlyout {
        left: -180px
    }
    .mapIcon li.indicateSubListR .mapFlyout,
    .sectionTitle li.indicateSubListR .mapFlyout {
        left: 159px;
    }
    .mapIcon.indicateSubListL,
    .sectionTitle > .indicateSubListL {
        background: url('../images/icons/map/caret-left-grey.png') no-repeat 20% 0%;
        background-size: 8px;
    }
    .mapIcon.indicateSubListR,
    .sectionTitle > .indicateSubListR {
        background: url('../images/icons/map/caret-right-grey.png') no-repeat 80% 0%;
        background-size: 8px;
    }
    .mapBox.indicateSubListR {
        background: url('../images/icons/map/caret-right-grey.png') no-repeat 97% 10%;
        background-size: 8px;
    }
    .mapIcon li.indicateSubListL,
    .sectionTitle li.indicateSubListL,
    .mapList li.indicateSubListL {
        background-image: url('../images/icons/map/caret-left-grey.png');
        background-position-x: left;
    }
    .mapIcon li.indicateSubListR,
    .sectionTitle li.indicateSubListR,
    .mapList li.indicateSubListR {
        background-image: url('../images/icons/map/caret-right-grey.png');
        background-position-x: right;
    }
    .mapList li.indicatePageLink {
        background-image: url('../images/icons/map/double-chevron-right-grey.png');
        background-position: 97% 50%;
    }

    .mapList ul > li.hover,
    .mapList ul > li:hover,
    .mapList ul > li:active,
    .mapFlyout ul > li.hover,
    .mapFlyout ul > li:hover,
    .mapFlyout ul > li:active {
        z-index: 4;
        cursor: default;
        background-color: #76BAE7;
        text-decoration: underline;
    }
        /* Inset links */
        ul > li a.mapListInsetGray,
        ul > li a.mapListInsetRed,
        ul > li a.mapListInsetYellow {
            display: inline-block;
            position: absolute;
            top: 6px;
            right: 6px;
            padding:0;
        }
        ul > li a.mapListInsetGray span,
        ul > li a.mapListInsetRed span,
        ul > li a.mapListInsetYellow span {
            display: inline !important;
            padding: 3px 4px 4px 4px;
            font-size: 0.8em;
            /*line-height: 6px;*/
            vertical-align: middle;
        }

            ul > li a.mapListInsetGray span {
                border: 1px solid #696969;
                color: #696969;
                background-color: lightgray;
            }
            ul > li a.mapListInsetRed span {
                border: 1px solid #9c0006;
                color: #9c0006;
                background-color: #ffc7ce;
            }
            ul > li a.mapListInsetYellow span {
                border: 1px solid #9c6500;
                color: #9c6500;
                background-color: #ffeb9c;
            }
            ul > li a.mapListInsetGray span:hover,
            ul > li a.mapListInsetGray span:active {
                background-color: #b2b2b2;
            }
            ul > li a.mapListInsetRed span:hover,
            ul > li a.mapListInsetRed span:active {
                background-color: #ff6b7d;
            }
            ul > li a.mapListInsetYellow span:hover,
            ul > li a.mapListInsetYellow span:active {
                background-color: #ffd840;
            }

    /* :active versions of these selectors are in a separate rule
        so that we can have 0 transition-delay for touch devices */
    .mapList ul > li:hover > div.mapFlyout,
    .mapIcon:hover > div.mapFlyout,
    .mapIcon li:hover > div.mapFlyout,
    .mapBox:hover > div.mapFlyout,
    .sectionTitle > .indicateSubListL:hover > div.mapFlyout,
    .sectionTitle > .indicateSubListR:hover > div.mapFlyout,
    .sectionTitle > .indicateSubListL li:hover > div.mapFlyout,
    .sectionTitle > .indicateSubListR li:hover > div.mapFlyout {
        visibility: visible;
        opacity: 1;
        -webkit-transition-delay: 0.5s;
        -moz-transition-delay: 0.5s;
        -ms-transition-delay: 0.5s;
        -o-transition-delay: 0.5s;
        transition-delay: 0.5s;
    }
    .mapList ul > li:active > div.mapFlyout,
    .mapIcon:active > div.mapFlyout,
    .mapIcon li:active > div.mapFlyout,
    .mapBox:active > div.mapFlyout,
    .sectionTitle > .indicateSubListL:active > div.mapFlyout,
    .sectionTitle > .indicateSubListR:active > div.mapFlyout,
    .sectionTitle > .indicateSubListL li:active > div.mapFlyout,
    .sectionTitle > .indicateSubListR li:active > div.mapFlyout {
        visibility: visible;
        opacity: 1;
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
    }

    /* .subListAlt */
    .mapFlyout > ul > li.subListAlt {
        background-color: #89B22E;
    }
    .mapFlyout > ul > li.gray.subListAlt,
    .mapFlyout > ul > li.gray li.subListAlt {
        background-color: lightgray;
    }
    .mapFlyout > ul > li.subListAlt a {
        font-weight: bold;
    }
        .mapFlyout > ul > li.subListAlt:hover,
        .mapFlyout > ul > li.subListAlt:active {
            background-color: #3498DB;
        }
        .mapFlyout > ul > li.gray.subListAlt:hover,
        .mapFlyout > ul > li.gray.subListAlt:active,
        .mapFlyout > ul > li.gray li.subListAlt:hover,
        .mapFlyout > ul > li.gray li.subListAlt:active {
            background-color: #b2b2b2;
        }

/* Dashboard Box (for Gauges page) */
#map span.dashboardBox {
    border: 2px solid black;
    background: #55BF3B; /* same as gauge fill color */
    color: black;
    display: inline-block;
    padding: 5px;
    position: relative;
    vertical-align: middle;
    width: 150px;
}
    #map span.dashboardBox.centerLineL:before,
    #map span.dashboardBox.centerLineR:after {
        content: "";
        position: absolute;
        border: 1px solid black;
        width: 60px;
    }
        #map span.dashboardBox.centerLineL:before {
            left: -62px;
            top: 48%;
        }
        #map span.dashboardBox.centerLineR:after {
            left: 100%;
            top: 48%;
        }
    #map span.dashboardBox span.caption {
        background: inherit;
        color: inherit;
        display: block;
        float: none;
        font-size: 12px;
        font-weight: normal;
    }
    #map span.dashboardBox span.dashboardBoxValue {
        display: block;
        font-size: 18px;
        font-weight: bold;
        padding-top: 5px;
    }


/* FORM ELEMENTS
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline
{
    display: inline;
}

legend
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/* checkout page */ /*
#checkoutButton {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image:    -moz-linear-gradient(top, #3498db, #2980b9);
    background-image:     -ms-linear-gradient(top, #3498db, #2980b9);
    background-image:      -o-linear-gradient(top, #3498db, #2980b9);
    background-image:         linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    border: none;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
}

#checkoutButton:hover,
#checkoutButton:active {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image:    -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image:     -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image:      -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image:         linear-gradient(to bottom, #3cb0fd, #3498db);
    cursor: pointer;
    text-decoration: none;
}*/

#payment-form {
    display: table;
}
    #payment-form .form-row {
        display: table-row-group;
    }
    #payment-form .form-row label {
        display: table-row;
    }
    #payment-form .form-row label input,
    #payment-form .form-row label span {
        display: table-cell;
    }
    #payment-form .form-row label span:first-child {
        font-weight: bold;
        padding: 4px 8px;
        text-align: right;
        width: 100px;
    }

td.highInput,
span.highInput {
    color: red;
}
div.highInput,
input.highInput {
    border: 2px solid red;
}

/* CHOOSE MODE PAGE
----------------------------------------------------------*/
table.colorTable {
    border-collapse: collapse;
}
table.colorTable > tbody > tr > th {
    font-size: large;
    font-weight: bold;
    padding: 5px 8px;
}
    table.colorTable > tbody.green > tr > th {
        background-color: #BCD367;/*#ABC74F;*/
        color: white;
    }
    table.colorTable > tbody.blue > tr > th {
        background-color: #66C2EB; /*#0093DD;*/
        color: white;
    }
    table.colorTable > tbody.red > tr > th {
        background-color: #F67656;/*#DA251D;*/
        color: white;
    }

table.colorTable td {
    background-color:#F7F7F7; /*#EEF2CC;*/
    font-size: 15px;
    padding: 5px 8px 5px 30px;
}
    table.colorTable > tbody.blue.blueData td {
        background-color: #F7F7F7;/* #DDDAF2;*/
    }

table.colorTable tr:last-child > td {
    border-bottom: 5px solid white;
}

table.colorTable td.modeChoice {
    padding: 5px 15px 15px;
    text-align: right;
}
table.colorTable td.modeChoice a {
    font-weight: bold;
    font-size: large;
    color: #696969;
}


/* MISC
----------------------------------------------------------*/

.clear
{
    clear: both;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}


div.auto_centre
{
    width: 380px;
    margin: 0 auto;

}



/* simple horizontal nav bar http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/#.UYxpgspGNzU */
#nav {
	width: 100%;
	float: left;
	margin: 0 0 0em 0;
	padding: 0;
	list-style: none;
	background-color: #69f;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc; }
#nav li {
	float: left; }
#nav li a
{
    background: url(/images/icons/right-arrow-next.png) no-repeat right center;
	display: block;
	padding: 8px 35px 8px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #ffffff;
	 }
#nav li:last-child a {background-image: none !important; padding-right: 15px;} /* remove last icon */
#nav li a:hover {
	color: #e17009;
	background-color: #fff; }

/* extended for icon */
#nav li a img {height:15px;}



/* drop-down horizontal nav bar http://www.cssnewbie.com/easy-css-dropdown-menus/#.UYxxXcpGNzU */

#navbar {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #f2f2f2;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	}
#navbar li {
	list-style: none;
	float: left;
	}
#navbar li a {
	display: block;
	padding: 8px 15px;
	font-weight: bold;
    background-color: #f2f2f2;
	color: #069;
	text-decoration: none;
	border-right: 1px solid #ccc;
	/*height:30px;*/}
#navbar li ul {
	display: none;
	width: 10em; /* Width to help Opera out */
	/*background-color: #69f;*/
	background-color: #418CD6;
	z-index:1000}
#navbar li a:hover {
	/*color: #e17009;*/
	color: #389819;
	background-color: #fff; }
#navbar li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
#navbar li:hover li {
	float: none; }
#navbar li:hover li a {
	/*background-color: #69f;*/
	background-color: #418CD6;
	border-bottom: 1px solid #fff;
	color: #ffffff; }
#navbar li li a:hover {
	background-color: #8db3ff; }
#navbar li li a {
	height: auto; }
a img {border:0;}


/* Button Nav Bar */
#navButtons {
    height: 30px;
    padding: 0 5px 5px;
    text-align: center;
}

#navButtons div.navButtonsGroup {
    display: inline-block;
    margin: 0 10px;
    padding-top: 7px;
}

#navButtons div.navButtonsGroup > a {
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    margin: 0 2px;
    padding: 8px 10px;
    text-decoration: none;
}

#navButtons div.navButtonsGroup > a:hover,
#navButtons div.navButtonsGroup > a:active {
    cursor: pointer;
    text-decoration: none;
}
#navButtons div.navButtonsGroup > a.blue:hover, #navButtons div.navButtonsGroup > a.blue:active,
#navButtons div.navButtonsGroup > a.green:hover, #navButtons div.navButtonsGroup > a.green:active,
#navButtons div.navButtonsGroup > a.purple:hover, #navButtons div.navButtonsGroup > a.purple:active,
#navButtons div.navButtonsGroup > a.red:hover, #navButtons div.navButtonsGroup > a.red:active {
    background: #34d3d9;
    background-image: -webkit-linear-gradient(top, #34d3d9, #26a7ab);
    background-image:    -moz-linear-gradient(top, #34d3d9, #26a7ab);
    background-image:     -ms-linear-gradient(top, #34d3d9, #26a7ab);
    background-image:      -o-linear-gradient(top, #34d3d9, #26a7ab);
    background-image:         linear-gradient(to bottom, #34d3d9, #26a7ab);
}

/* SELECTED */
#navButtons div.navButtonsGroup > a.blue.selected,
#navButtons div.navButtonsGroup > a.green.selected,
#navButtons div.navButtonsGroup > a.purple.selected,
#navButtons div.navButtonsGroup > a.red.selected {
    /*border: 3px solid cyan;*/
    background: #34d3d9;
    background-image: -webkit-linear-gradient(top, #34d3d9, #26a7ab);
    background-image:    -moz-linear-gradient(top, #34d3d9, #26a7ab);
    background-image:     -ms-linear-gradient(top, #34d3d9, #26a7ab);
    background-image:      -o-linear-gradient(top, #34d3d9, #26a7ab);
    background-image:         linear-gradient(to bottom, #34d3d9, #26a7ab);
}

/* DISABLED */
#navButtons div.navButtonsGroup > a.disabledNav {
    background-position: 0% 0%;
    background-color: darkgray !important;
    background-image: -webkit-linear-gradient(top, #darkgray, #d1d1d1) !important;
    background-image:    -moz-linear-gradient(top, #darkgray, #d1d1d1) !important;
    background-image:     -ms-linear-gradient(top, #darkgray, #d1d1d1) !important;
    background-image:      -o-linear-gradient(top, #darkgray, #d1d1d1) !important;
    background-image:         linear-gradient(to bottom, darkgray, #d1d1d1) !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
}
#navButtons div.navButtonsGroup > a.disabledNav:hover {
    cursor: not-allowed;
}

/* BLUE */
#navButtons div.navButtonsGroup > a.blue {
    background: #4eacdd;
    background-image: -webkit-linear-gradient(top, #4eacdd, #47a0cc);
    background-image:    -moz-linear-gradient(top, #4eacdd, #47a0cc);
    background-image:     -ms-linear-gradient(top, #4eacdd, #47a0cc);
    background-image:      -o-linear-gradient(top, #4eacdd, #47a0cc);
    background-image:         linear-gradient(to bottom, #4eacdd, #47a0cc);
    color: #ffffff;
}
/* GREEN */
#navButtons div.navButtonsGroup > a.green {
    background: #bad967;
    background-image: -webkit-linear-gradient(top, #bad967, #8da351);
    background-image:    -moz-linear-gradient(top, #bad967, #8da351);
    background-image:     -ms-linear-gradient(top, #bad967, #8da351);
    background-image:      -o-linear-gradient(top, #bad967, #8da351);
    background-image:         linear-gradient(to bottom, #bad967, #8da351);
    color: #ffffff;
}
/* PURPLE */
#navButtons div.navButtonsGroup > a.purple {
    background: #7480b7;
    background-image: -webkit-linear-gradient(top, #7480b7, #6873a3);
    background-image:    -moz-linear-gradient(top, #7480b7, #6873a3);
    background-image:     -ms-linear-gradient(top, #7480b7, #6873a3);
    background-image:      -o-linear-gradient(top, #7480b7, #6873a3);
    background-image:         linear-gradient(to bottom, #7480b7, #6873a3);
    color: #ffffff;
}
/* RED */
#navButtons div.navButtonsGroup > a.red {
    background: #dc3531;
    background-image: -webkit-linear-gradient(top, #dc3531, #cc2f2d);
    background-image:    -moz-linear-gradient(top, #dc3531, #cc2f2d);
    background-image:     -ms-linear-gradient(top, #dc3531, #cc2f2d);
    background-image:      -o-linear-gradient(top, #dc3531, #cc2f2d);
    background-image:         linear-gradient(to bottom, #dc3531, #cc2f2d);
    color: #ffffff;
}


/* Page tips*/
#pageTips {

}

/* NB: the crumbs styles are copied in AppPlan.master and should be kept in sync there */
/* Breadcrumb http://line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css */
/* .mapCrumbs rules are tweaks for Map mode navigation
   .crumbsAlt rules reverse the arrow directions
   .crumbsFlatL/R rules make arrow/arrow-receiver flat edges
*/
#crumbs {
	text-align: left;
    margin-top: 0;
}
#crumbs.mapCrumbs {
    margin-left: 40px;
}

	#crumbs ul {
		list-style: none;
		display: inline-table;
        padding-left: 0;
	}
    #crumbs.mapCrumbs ul {
        margin: 3px;
    }
		#crumbs ul li {
			display: inline;
		}

		#crumbs ul li a {
			display: block;
			float: left;
			height: 23px;
			background: #3498db;
			text-align: center;
			padding: 7px 20px 0 40px; /*30px 40px 0 80px;*/
			position: relative;
			margin: 0 6px 0 0;
			font-weight: bold;
			font-size: 12px;
			text-decoration: none;
			color: #fff;
		}
            #crumbs ul li.crumbsAlt a {
                padding: 7px 40px 0 20px;
                margin: 0 0 0 6px;
            }
		#crumbs ul li:not(.crumbsAlt) a:after,
        #crumbs ul li.crumbsAlt a:before {
			content: "";
			border-top: 15px solid transparent;
	 		border-bottom: 15px solid transparent;
	  		border-left: 15px solid #3498db;
			position: absolute; right: -15px; top: 0;
			z-index: 1;
		}
            #crumbs ul li.crumbsAlt a:before {
                right: 0;
                border-left: none;
                border-right: 15px solid #d4f2ff;
                z-index: 0;
            }
        #crumbs.mapCrumbs ul li a {
            padding: 7px 10px 0 25px;
            font-size: 14px;
			line-height: 17px;
        }
            #crumbs.mapCrumbs ul li.crumbsAlt a {
                padding: 7px 25px 0 10px;
            }
        #crumbs.mapCrumbs ul li:first-child a {
            padding-left: 12px;
        }
        #crumbs.mapCrumbs ul li:last-child a {
            padding-right: 12px;
        }

		#crumbs ul li:not(.crumbsAlt) a:before,
        #crumbs ul li.crumbsAlt a:after {
			content: "";
			border-top: 15px solid transparent;
	  		border-bottom: 15px solid transparent;
	  		border-left: 15px solid #d4f2ff;
			position: absolute; left: 0; top: 0;
		}
            #crumbs ul li.crumbsAlt a:after {
                left: -15px;
                border-left: none;
                border-right: 15px solid #3498db;
                z-index: 1;
            }

        #crumbs.mapCrumbs ul li.crumbsFlatR a {
            margin-right: 2px;
            padding-right: 14px;
        }
            #crumbs.mapCrumbs ul li:not(.crumbsAlt).crumbsFlatR a:after {
	  		    border-left: none;
            }
            #crumbs.mapCrumbs ul li.crumbsAlt.crumbsFlatR a:before {
	  		    border-right: none;
            }
        #crumbs.mapCrumbs ul li.crumbsFlatL a {
            margin-left: 2px;
            padding-left: 14px;
        }
            #crumbs.mapCrumbs ul li:not(.crumbsAlt).crumbsFlatL a:before {
                border-left: none;
            }
            #crumbs.mapCrumbs ul li.crumbsAlt.crumbsFlatL a:after {
                border-right: none;
            }

		#crumbs ul li:first-child a {
			border-top-left-radius: 6px; border-bottom-left-radius: 6px;
		}
		#crumbs ul li:first-child:not(.crumbsAlt) a:before,
        #crumbs ul li:first-child.crumbsAlt a:after {
			display: none;
		}

		#crumbs ul li:last-child a {
			padding-right: 30px;/* 80px;*/
			border-top-right-radius: 6px; border-bottom-right-radius: 6px;
		}
		#crumbs ul li:last-child:not(.crumbsAlt) a:after,
        #crumbs ul li:last-child.crumbsAlt a:before {
			display: none;
		}

		#crumbs ul li a:hover {
			background: #63BB48/* #fa5ba5;*/
		}
		#crumbs ul li:not(.crumbsAlt) a:hover:after {
			border-left-color: #63BB48/* #fa5ba5;*/
		}
        #crumbs ul li.crumbsAlt a:hover:after {
			border-right-color: #63BB48/* #fa5ba5;*/
        }

	    #crumbs ul li a.selected {
			background: #63BB48/* #fa5ba5;*/
		}
		#crumbs ul li:not(.crumbsAlt) a.selected:after {
			border-left-color: #63BB48/* #fa5ba5;*/
		}
        #crumbs ul li.crumbsAlt a.selected:after {
			border-right-color: #63BB48/* #fa5ba5;*/
        }

        #crumbs.mapCrumbs ul li.disabledNav a,
        #crumbs.mapCrumbs ul li.disabledNav a:before {
            background-color: darkgray;
        }
        #crumbs.mapCrumbs ul li:not(.crumbsAlt).disabledNav a:after {
            border-left-color: darkgray;
        }
        #crumbs.mapCrumbs ul li.crumbsAlt.disabledNav a:after {
            border-right-color: darkgray;
        }
        #crumbs.mapCrumbs ul li:not(.crumbsAlt).disabledNav a:before {
            border-left-color: #ECECEC;
        }
        #crumbs.mapCrumbs ul li.crumbsAlt.disabledNav a:before {
            border-right-color: #ECECEC;
        }
        #crumbs.mapCrumbs ul li.disabledNav a:hover {
            cursor: not-allowed;
        }

.button-continue {background: url(/images/buttons/continue.png) no-repeat left center; margin: 20px 0px 20px 0px;}
.button-continue a {display:block;}
.button-continue, .button-continue a { width: 161px; height: 51px;}

.button-save-continue {background: url(/images/buttons/save-and-continue.png) no-repeat left center; margin: 20px 0px 20px 0px;}
.button-save-continue a {display:block;}
.button-save-continue, .button-save-continue a { width: 254px; height: 51px;}

.tooltip {
	background:transparent url(/images/tools/tooltip/black_arrow.png);
	height:70px;
	width:160px;
}
.tooltip-big {
	background:transparent url(/images/tools/tooltip/black_arrow_big.png);
	height:164px;
	width:319px;
}
.tooltip, .tooltip-big {
	display:none;
	font-size:12px;
	padding:25px;
	color:#fff;
}

input.longString {width:250px; text-align:left;}
input.string {width:140px; text-align:left;}
input.shortString {width:60px; text-align:left;}
input.number, div.number {width:88px; text-align:right;}
input.smallNumber, div.smallNumber {width:60px; text-align:right;}
input.smallerNumber, div.smallerNumber {width:50px; text-align:right;}
input.tinyNumber {width:45px; text-align:right;}
input.error {
	/*border: 1px solid red;*/
	border-color: red;
	background-color: #FDC;
}
label.error {
	/*display: block;*/
	color: red;
	/*font-size: 0.8em;*/
}
span.error {background-color: yellow;}
input.highlight, tr.highlight {background-color: lightgreen;}
span.noDisplay {display: none !important;}

.negative {color:Red; }  /* Used to highlight -ve modulator values*/
.positive {color:Blue;} /* Used to highlight +ve modulator values*/
.percentage {color:green;}  /* Used to highlight % values*/
.positiveStandard {color:inherit;}

.total {
    font-weight: bold;
    background-color: lightgray;
}
.balance {
    font-weight: bold;
    background-color:lightgray;
}
.balanceHeader {
    /*text-align: center;
    font-size: 36px;*/
    font-weight: bold;
    background-color: navy;
    color:white;
}
.subTotal {
    font-weight: bold;
}
.rollupTotal {
    font-weight: bold;
}
.yearNavigation {
    height: 50px;
}

p.error input {border:1px solid red; background-color:#FFFF99;}
p.error span {color:Red; font-size: 0.8 em;}

div.error input {border:1px solid red; background-color:#FFFF99;}
div.error span, div.error div {color:Red; font-size: 0.8 em;}

table.tight th, table.tight td {
	padding: 2px 4px 2px 4px;
}

table.nowrap{table-layout:fixed;}
table.nowrap tr th, table.nowrap tr td{white-space: nowrap;}

table.basic {
	/*font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;*/
}
table.basic th, table.basic td {
	/*border-width: 1px;*/
	padding: 2px 8px 2px 8px;
}
table.basic th {
	/*border-style: solid;
	border-color: #666666;
	background-color: #dedede;*/
}
table.basic td {
	/*border-style: solid;
	border-color: #666666;
	background-color: #ffffff;*/
}
table.extra-right-padding th, table.extra-right-padding td {
	/*border-width: 1px;*/
	padding: 2px 25px 2px 7px;
}

table.extra-right-padding td.tick {
    background-image:url('/images/icons/check.png'); background-position:right; background-repeat:no-repeat;
}

table.text-align-right th {
    text-align: right;
}
table.text-align-right td {
	text-align: right;
}

table.text-align-left th {
    text-align: left;
}
table.text-align-left td {
	text-align: left;
}
table.modulatorButtons {
    border-spacing: 0;
}
table.modulatorButtons td {
    padding: 0 2px;
}
table.modulatorButtons tr.modulatorList td {
    padding-top: 6px;
}
table.modulatorButtons tr.modulatorList td:first-child {
    padding-left: 30px;
    padding-right: 8px;
    width: 50px;
}

.rowSeparator {
    width:100%; border-top: 1px solid #B3D9FF;}

.rowSeparatorRollup {
    width:100%; border-top: 1px dashed #B3D9FF;}

.sub-menu {
    display: inline-block;
    margin: 0 5px;
}

.work-area-full,
.work-area-full-edit,
.work-area-inline {
    background-color:#F3F9FF;
    border:1px solid #B3D9FF;
    padding: 0 10px 10px;
    margin-bottom: 10px;
}
.work-area-inline {
    display: inline-block;
}
.padded {
    padding: 10px;
}

.work-area-top-4,.work-area-top-8, .work-area-top-10, .work-area-top-12, .work-area-top-13, .work-area-top-14 {
    /*border-right: 1px solid white;*/
    height: 21px;
    /*margin-top: 10px;*/
    text-align: left;
}
.work-area-content-4,.work-area-content-8, .work-area-content-10, .work-area-content-12, .work-area-content-13, .work-area-content-14 {
    padding: 0 15px;
    margin-top:0px;
    text-align: left;
}
/* stop heading creating gap between top curved bit and content */
.work-area-content-4 h2,.work-area-content-8 h2, .work-area-content-10 h2, .work-area-content-12 h2, .work-area-content-13 h2, .work-area-content-14 h2 {
    margin-top:0px;
}

.work-area-bottom-4,.work-area-bottom-8, .work-area-bottom-10, .work-area-bottom-12, .work-area-bottom-13, .work-area-bottom-14 {
    height: 21px;
    margin-bottom: 10px;
    text-align: left;
}

.work-area-top-4,.work-area-content-4,.work-area-bottom-4{
    width: 220px;
    }
.work-area-top-4 {
    background: url("/images/layout/work-area/top-4.png") no-repeat scroll 0 0 transparent;
}
.work-area-content-4 {
    background: url("/images/layout/work-area/middle-4.png") repeat-y scroll 0 0 transparent;
}
.work-area-bottom-4 {
    background: url("/images/layout/work-area/bottom-4.png") no-repeat scroll 0 0 transparent;
}

.work-area-top-8,.work-area-content-8,.work-area-bottom-8{
    width: 460px;
    }
.work-area-top-8 {
    background: url("/images/layout/work-area/top-8.png") no-repeat scroll 0 0 transparent;
}
.work-area-content-8 {
    background: url("/images/layout/work-area/middle-8.png") repeat-y scroll 0 0 transparent;
}
.work-area-bottom-8 {
    background: url("/images/layout/work-area/bottom-8.png") no-repeat scroll 0 0 transparent;
}


.work-area-top-10,.work-area-content-10,.work-area-bottom-10 {
    width:580px;
}
.work-area-top-10 {
    background: url("/images/layout/work-area/top-10.png") no-repeat scroll 0 0 transparent;
}
.work-area-content-10 {
    background: url("/images/layout/work-area/middle-10.png") repeat-y scroll 0 0 transparent;
}
.work-area-bottom-10 {
    background: url("/images/layout/work-area/bottom-10.png") no-repeat scroll 0 0 transparent;
}

.work-area-top-12,.work-area-content-12,.work-area-bottom-12 {
    width:700px;
}
.work-area-top-12 {
    background: url("/images/layout/work-area/top-12.png") no-repeat scroll 0 0 transparent;
}
.work-area-content-12 {
    background: url("/images/layout/work-area/middle-12.png") repeat-y scroll 0 0 transparent;
}
.work-area-bottom-12 {
    background: url("/images/layout/work-area/bottom-12.png") no-repeat scroll 0 0 transparent;
}

.work-area-top-13,.work-area-content-13,.work-area-bottom-13 {
    width:760px;
}
.work-area-top-13 {
    background: url("/images/layout/work-area/top-13.png") no-repeat scroll 0 0 transparent;
}
.work-area-content-13 {
    background: url("/images/layout/work-area/middle-13.png") repeat-y scroll 0 0 transparent;
}
.work-area-bottom-13 {
    background: url("/images/layout/work-area/bottom-13.png") no-repeat scroll 0 0 transparent;
}

.work-area-top-14,.work-area-content-14,.work-area-bottom-14 {
    width:820px;
}
.work-area-top-14 {
    background: url("/images/layout/work-area/top-14.png") no-repeat scroll 0 0 transparent;
}
.work-area-content-14 {
    background: url("/images/layout/work-area/middle-14.png") repeat-y scroll 0 0 transparent;
}
.work-area-bottom-14 {
    background: url("/images/layout/work-area/bottom-14.png") no-repeat scroll 0 0 transparent;
}

/* CSS implementation of work-area */
.work-area-css,
.work-area-css-auto {
    background: #f3f9ff;
    border: 1px solid #b3d9ff;
    border-radius: 20px;
    margin-bottom: 10px;
    padding: 20px;
}

.work-area-css-auto {
    display: table;
}

.work-area-css > :first-child,
.work-area-css-auto > :first-child {
    margin-top: 0;
}

.work-area-css > :last-child,
.work-area-css-auto > :last-child {
    margin-bottom: 0;
}


/* Styles for Year x Account navigation */
.yearNavigationChild {
            width: 130px;
            text-align:left !important;
            }
.yearNavigationChild .ui-button{

            }

 #YearNavigation .ui-accordion-content {
            padding: 0px 0px 25px 25px;
        }

/* styles for help navigation */
.helpNavigationChild {
            width: 190px;
            text-align:left !important;
            }
.helpNavigationChild .ui-button{

            }

#helpNavigation .ui-accordion-content {
            padding: 0px 0px 25px 25px;
        }

/*div.inlineHelp h1 {display:inline;}
div.inlineHelp p {display:inline;}*/
div.inlineHelp h1, div.inlineHelp h2, div.inlineHelp h3{margin-bottom:-10px;}
div.inlineHelp strong {color:blue}
div.inlineHelp em {color:green; font-weight:bold; font-style:normal;}
div.inlineHelp code {color:Red; font-weight:bold;}

.placeholder {color:#999999}

.graphContainer {
    width : 940px;
    height: 200px;
    margin: 8px auto;
 }

.graphContainerHigh {
    width : 940px;
    height: 350px;
    margin: 8px auto;
}

.graphContainerSmall {
    width : 700px;
    height: 200px;
    margin: 8px auto;
}

.graphContainerSmaller {
    width: 600px;
    height: 200px;
    margin: 8px auto;
}

.graphContainerWithSub {
    position: relative;
    width: 940px;
    height: 250px;
    margin: 8px auto;
}

.graphLegendContainer {
    width:150px;
    margin-bottom:20px;
}

.graphContainerHalf {
    width : 470px;
    height: 200px;
    margin: 8px auto;
}

.pleaseSavePlaceholder {font-style:italic; font-size:12px;}

/* jQuery UI tweaks */
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon.ui-icon-anti-box,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon.ui-icon-anti-box {
    background-image: url("images/ui-icons_e0fdff_256x240.png");
    width: 16px;
    height: 16px;
    border: none
}

/* legal list styles */
#legal-list ol,li{
  margin:0;
  padding:0;
}
#legal-list {
  counter-reset: section;
}
#legal-list h2:before {
  counter-increment: section;
  content: counter(section) ". ";
  margin: 0 0.5em 0 0;
}
#legal-list ol {
  counter-reset: clause;
  list-style: none outside none;
  /*text-indent: -2em;
   extra bit */
  display:table;
}
#legal-list ol li {
  counter-increment: clause;
  /* extra bit */
  display:table-row;
}
#legal-list ol li:before {
  content: counter(section) "." counters(clause, ".") ". ";
  /* margin: 0 0.5em 0 0.5em;
  extra bit */
  display:table-cell;
  text-align:right;
  padding-right:.3em;
}