/* 

    Reset
	Typography
	Table
	Forms
    Snippets (reused html)
	Layout
	Dialogs
    Header #hd
    Footer #ft
	Page specific items
	Hacks
	Unsorted CSS
*/



/* Reset ---------------------------------------------------------- */
/*
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}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
*/
body, p, ul, li, fieldset{ border: none; margin: 0; padding: 0;}
ul li{ list-style: none;}
h1, h2, h3, h4{ margin-top: 0;}



/* TYPOGRAPHY ---------------------------------------------------------- */

body, textarea, legend{ font-family:  "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 14px; }
p, td, th{ line-height: 1.5em;}

a:link, a:visited{ color: #36c; text-decoration: none;}
a:hover{ color: #d63; }
a:focus{ outline: none;}
a img{ border: none;}

h1, h2, h3, h4, h5{  font-weight: normal; line-height: 1.3em; }
h1{ font-size: 200%;  color: #007CBE; margin-bottom: 0; } 
h2{ font-size: 150%; margin-bottom: 0; }
h3{ font-size: 125%; margin-bottom: 0;}
h4{ font-size: 100%; margin-bottom: 0; font-weight: bold;  }
h5{ }

p, li{ padding-bottom: 1em; line-height: 1.4em;}
#bd ul li{ list-style: disc; margin-left: 40px;}

ol.upperRoman {list-style-type:upper-roman}

strong{ font-weight: bold;}
.help{ font-size: 90%;}
.disabled{ color: #777; }
input:disabled+label{color:#999;}
.big{ font-size: 150%;}
.secondary{  }
.required{ font-size: 90%;}
.arrow{ font-size: 150%; }
.hidden{ display: none;}

ul.linkList{ margin-top: 1em;}
ul.linkList li{ list-style-type: square; list-style-position: inside; padding-left: 10px; padding-bottom: .5em;}
ul.strong{ font-weight: bold;}


/* Table ---------------------------------------------------------- */

table{ margin: .5em 0; border-collapse:collapse; width: 100%;}
table a{ padding: .5em 0;}
td, th{ padding: .25em .5em; }
/*tr.even { background-color: #eef;}*/
thead tr th{
    background-color: #e5eeee;
    background-image: -moz-linear-gradient( top, #e5eeee, #e5eeee 80%, #d5dede);
}
tr.summary{
    background-color: #e5eeee;
    font-weight: bold;
}

td{ border-bottom: 1px solid #dde; }

table input[type="checkbox"] { margin: 0;}

.tableTopActions{ float: left;}

.view-all-icon-column {min-width: 90px} /* hack for first time it is displayed */
table td .view_all_status_icon {float: right}
table.viewAll .editIcon{ float: left;}
table.viewAll .deleteIcon{ float: right;}

/* former dataTables for viewAll */
.viewAll_wrapper table{ clear: both; table-layout: fixed;}
.viewAll_wrapper table tbody{ }
.viewAll_wrapper th,
.viewAll_wrapper td{ padding: .2em .4em;}
.viewAll_wrapper td{ border: 1px solid #cdd;}
.viewAll_wrapper th{ border: 1px solid #abb; }
.viewAll_wrapper th:hover{ background-color: #bedede; }

.viewAll_wrapper tr:last-child td {  border-bottom-color: #abb;}
.viewAll_wrapper tr td:first-child,
.viewAll_wrapper tr th:first-child { border-left-color: #abb; }
.viewAll_wrapper tr td:last-child,
.viewAll_wrapper tr th:last-child {  border-right-color: #abb; }

.viewAll_wrapper tbody tr:hover td{ background-color: #fff3b0;}

.viewAll_wrapper tr.checked td{ background-color: #fff9cf; }

/* dataTables, and view-all */
.dataTables_length { width: 40%; float: left;}
.dataTables_filter { width: 50%; float: right; text-align: right;}

.dataTables_wrapper table{ clear: both; table-layout: fixed;}
.dataTables_wrapper table tbody{ }
.dataTables_wrapper th,
.dataTables_wrapper td{ padding: .2em .4em;}
.dataTables_wrapper td{ border: 1px solid #cdd;}
.dataTables_wrapper th{ border: 1px solid #abb; }
.dataTables_wrapper th:hover{ background-color: #bedede; }

.dataTables_wrapper tr:last-child td {  border-bottom-color: #abb;}
.dataTables_wrapper tr td:first-child,
.dataTables_wrapper tr th:first-child { border-left-color: #abb; }
.dataTables_wrapper tr td:last-child,
.dataTables_wrapper tr th:last-child {  border-right-color: #abb; }

.dataTables_wrapper tbody tr:hover td{ background-color: #fff3b0;}

.dataTables_wrapper tr.checked td{ background-color: #fff9cf; }
 
.sorting_asc { background-image: url('../images/sort_asc.png'); background-position: center right; background-repeat: no-repeat;}
.sorting_desc {	background-image: url('../images/sort_desc.png'); background-position: center right; background-repeat: no-repeat;}

.hide_show_icon { width: 21px; height: 21px; outline: none !important; float: left; padding: 0 1em 0 0;}

.dataTables_info{ color: #477; padding-bottom: 1em;}

/* Forms ---------------------------------------------------------- */

form fieldset {
	clear: both;
    border-top: 1px solid #ccc;
    margin: 0 0 10px 0;
    padding: 3px 0 10px 0;
}

form fieldset legend {
  margin: 0 0 0 0;
  padding: 0 5px 0 5px;
  font-weight: bold;
}


input,
textarea,
select{ font-size: 16px; padding: .3em .3em .2em .3em; margin: 0 10px 0 0; border: 1px solid #999; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.sectionDialog input,
.sectionDialog textarea,
.sectionDialog select{ font-size: 12px; }
input[readonly='readonly'],
select[readonly='readonly'] { border: none;}


textarea{
    background-image: -moz-linear-gradient( top, #ddd, #fff 5%, #fff);
}

input[type="text"],
input[type="password"],
select{
    width: 150px;
    background-image: -moz-linear-gradient( top, #eee, #fff 20%, #fff);
}
input.short{ width: 75px;}
input.long{ width: 280px;}

input.medium{ width: 220px;}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus { border-color: #5bafee; }

input[type="radio"]{ border: none;}

input[type="radio"],
input[type="checkbox"] { width: 20px; margin-right: .25em; margin-top: .5em;}

input[type="radio"].multi,
input[type="checkbox"].multi{ margin-left: 1em;}

.button-to, .button-to * {
    display: inline !important;
    margin-right: 0 !important;
    }

.link_button {
    background:#fff;
    background-image: none !important;
    background-color: #fff !important;
    font-size: 1em;
    border:none;
    cursor:pointer;
    font-weight:normal !important;
    font-size: inherit !important;
    overflow:auto;
    width: auto;
    padding:0;
    text-decoration:underline !important; 
    white-space: normal; 
    text-align:left;
    color: blue !important;
    display: inline !important;
    }
.buttonRow{margin: 1em 0; }

.formNote{ padding-top: 1em; margin-top: 1em; border-top: 1px solid #ccc;}

.validStatus{ padding-left: 15px; color: #5bafee; }
.error input{ border-color: #ff4347;}
.error input:disabled {
    border: 1px !important;
    border-color: #ff4347 !important;
    color: #ff4347;
}
.error .validStatus{ color: #ff4347;}
.error .validMsg{ color: #ff4347;}

.cssLayout{ margin-top: .5em; }

.cssLayout input,
.cssLayout textarea,
.cssLayout select, .as_if_form_field { float: left;}
.cssLayout input:disabled { border: 0px }
 
.cssLayout div{ margin-bottom: .5em; clear: both; }

/* clear all .cssLayout divs */
 .cssLayout div:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.cssLayout div { display: inline-block;}
html[xmlns] .cssLayout div { display: block; }
* html .cssLayout div { height: 1%; }


.cssLayout div.fieldWithErrors{ clear: none; margin-bottom: 0;}
.cssLayout div.value{ clear: none; color: #000; font-size: 16px; padding-top: .5em;}
.cssLayout p { padding: .4em 0 0 0;}

.cssLayout label { width: 130px; padding: .3em 10px 0 0; line-height: 1.3em;  display: block; float: left; position: relative; text-align: right;}
.cssLayout .radioLabel { width: auto; text-align: left; padding-bottom: 10px; padding-top: 0; line-height: 2em;}
.cssLayout.wide label.radioLabel{ width: auto;}
.cssLayout div.noLabel,
.cssLayout div p{ margin-left: 140px; clear: left;}
.cssLayout div.errorExplanation p,
.cssLayout.wide div.errorExplanation p{ margin-left: 0;}


input[type="button"]{
    background-image: -moz-linear-gradient( top, #f3f3f3, #f3f3f3 50%, #d3d3d3);
}

input[type="button"].big{ font-size: 16px;}

input[type="submit"],
a.submit,
input.submit,
.submit_button {
    color: #333; font-weight: bold; border-color: #aaa #888 #888 #aaa; border-width: 1px;
    text-shadow: 1px 1px 0 #fff;
    padding-bottom: .3em;
    background-color: #f3f3f3;
    background-image: -moz-linear-gradient( top, #f3f3f3, #f3f3f3 50%, #d3d3d3);
}
input[type="submit"]:hover,
a.submit:hover,
input.submit:hover{ border-color: #444 #222 #222 #444; }

.cssLayout input[type="submit"]:disabled, .cssLayout input.submit:disabled{ color: #fff; background-color: #ccc; border: 1px solid #ccc; border-top-color: #ddd; border-left-color: #ddd; border-right-color: #bbb; border-bottom-color: #bbb;}

.cssLayout textarea{ width: 28em;}

.cssLayout h4{ margin-left: 140px; padding-left: 0;}
.cssLayout div.controlset div { margin-left: 170px; float: left; }
.cssLayout div.buttonRow { padding-left: 140px; }

.cssLayout .sectionStart{ border-top: 1px solid #ccc; margin-top: .8em; padding-top: .6em;}
.cssLayout .sectionEnd{ border-bottom: 1px solid #ccc; margin-bottom: .6em; padding-bottom: .8em;}
.cssLayout .sectionGap{ margin-top: 1.8em; }

/* Thin */
.cssLayout.thin div.nolabel, .cssLayout.thin div p{ margin-left: 100px; }
.cssLayout.thin label { width: 85px}
.cssLayout.thin h4{ margin-left: 100px;}
.cssLayout.thin div.controlset div { margin-left: 100px;}
.cssLayout.thin div.buttonRow { padding-left: 100px; }

/* Wide */
.cssLayout.wide div.nolabel, .cssLayout.wide div p{ margin-left: 200px; }
.cssLayout.wide label { width: 185px}
.cssLayout.wide h4{ margin-left: 200px;}
.cssLayout.wide div.controlset div { margin-left: 200px;}
.cssLayout.wide div.buttonRow { padding-left: 200px; }


/* Validation */
.errorExplanation,
.msgBox{ padding: 7px; margin: .5em 0 1em 0; position: relative;  border: 1px solid #cc9; background-color: #ffc; }
.msgBox.error{  border-color: #c75; background-color: #fa8; }
.msgBox.success{ border-color: #9c9;background-color: #e2f9e3;}
.dialog .errorExplanation h2,
.msgBox h2{ font-size: 100%; margin-bottom: 0; font-weight: bold; } 
.msgBox p{ padding-top: .25em; margin: 0;}
.errorExplanation ul li,
.msgBox ul li{ list-style: disc; list-style-position: inside; padding: .25em 0 0 .25em;}

.param_tag {
    color: red;
    font-size: x-small;
    }

/* Help */

.param_help { /* this fixes help on user edit/new, and part of help when after cssLayout on modals */
    float: none;
    display: inline; 
    margin-left: 1em;
    }

.param_help, .cssLayout .param_help {
    padding-left: 10px;
    float: left;
    clear: none;
    display: block;
    margin-top: 4px;
    width: 16px;
    height: 18px;
    background: url(../images/icons.png) no-repeat 0 -128px;
    margin-bottom: 0;
    position: relative;
    cursor: help;
    z-index: 24;
    }
.param_help span { display: none; }

.param_help { 
    float: none; 
    display: inline; 
    margin-left: 1em;
    } /* for outside of .csslayout */

.su_release_info span { 
    display: none;
    float: none;
    }
.su_release_info:hover span {
    display: block;
    position: relative;
    width: 500px;
    left: 0px;
    top: -2em;
    background: #ffffff;
    border: 3px solid #222;
    padding: 7px;
    font-size: medium;
    line-height: 1em;
    }

.parameter_form .param_help {
    display: inline;
    }

.param_help:hover span { 
    display: block;
    position: absolute;
    width: 180px;
    background: #ffffff;
    border: 3px solid #222;
    padding: 7px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    left: 0px; 
    top: 0px;
    z-index: 25; 
    background-position: 0 -160px;
    }
.cssLayout .param_grouping {
   text-align: left;
   font-weight: bold;
   font-size:120%;
   width: auto;
   }

.cssLayout .param_grouping_help {
    /* a "param grouping" displays help */
    float: left;
    margin-left: 140px;
    }
.hover_help {
padding-left: 16px; clear: none;
margin-top: 4px; width: 16px; height: 25px;
margin-left: .4em;
margin-bottom: 0; 
position: relative; 
cursor: help; 
z-index: 24;
background: url(../images/icons.png) no-repeat 0 -128px; 
}
.hover_help:hover{ z-index: 25; background-position: 0 -160px;}
.hover_help span{ display: none; }
.hover_help:hover span{ display: block; position: absolute; width: 180px; left: -90px; top: 18px; background: #ffffff; border: 3px solid #222; padding: 7px;  -moz-border-radius: 5px; -webkit-border-radius: 5px;}




/* Buttons -------------------------------------------------------- */

.button{ display: block; width: 303px; height: 40px; overflow: hidden; line-height: 9999px; background: url(../images/buttons.png) no-repeat;}
.button.newProject{ background-position: 0 0;}
.button.loadProject{ background-position: 0 -40px;}
.button.sampleProject{ background-position: 0 -80px;}

.buttonSection{ font-size: 90%; margin-bottom: 20px; }
.buttonSection p{ padding: 5px 10px; }



/* Icons -------------------------------------------------------- */
.file{ display: block; background: url(../images/icons.png) no-repeat; padding-left: 34px; height: 36px; }
.file.excel{ }
.file.pdf{ background-position: 0 -64px; }



/* Pagination -------------------------------------------------------- */

.pagination {
    padding: 11px;
    margin-left:25px;
  }
  .pagination a {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #36c;
    text-decoration: none;
    color: #36c;
  }
  .pagination a:hover, .pagination a:active {
    border: 1px solid #36c;
    color: #000;
  }
  .pagination span.current {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #36c;
    font-weight: bold;
    background-color: #36c;
    color: #FFF;
  }
  .pagination span.disabled {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #eee;
    color: #ddd;
  }





/* Layout -------------------------------------------------------- */

html, body { height: 100%;}
body { background: #1c1c1c url(../images/bg.jpg) -1000px 0;  text-align: center; /* for IE */  }
body #wrapper{ text-align: left; margin: 0 auto; max-width: 70em; }
body #wrapper2{ padding: 0 30px;  }

body.map{ overflow: hidden;}
body.map #wrapper{ margin: 0; max-width: none;}
body.map #wrapper2{ padding: 20px;  }
body.map .dialogWrapper{ text-align: left;}

.page{ overflow: hidden; position: relative; }

/* Columns */
.colContainer{ overflow: hidden;}
.mainCol{ float: left; width: 66%;  }
.sideCol{ float: right; width: 34%; }
.halfCol{ float: left; width: 48%; margin-right: 2%; }
.halfCol.lastCol{width: 50%; margin-right: 0%; }
.triCol{ float: left; width: 31%; margin-right: 2%; }
.triCol.lastCol{ width: 32%; margin-right: 0%; }



/* Dialogs -------------------------------------------------------- */

.dialog{
font-size: 12px; background: #333; color: #fff; border: 1px solid #333; padding: 5px;  -moz-border-radius: 5px; -webkit-border-radius: 5px; position: absolute; top: 40px; left: 20px;
background-color: #333;
background-image: -moz-linear-gradient( top, #444, #333 50px, #222);
}

.dialog{ width: 800px;}

.dialog h1{ font-size: 130%; }
.dialog h2{ font-size: 120%; }
.dialog h3{ font-size: 110%; }
.dialog .titleBar{ overflow: hidden; cursor: move;}
.dialog .titleBar h2{ float: left; padding: 2px 0 2px 3px; cursor: auto;}

.dialog .titleBar .issuesLink{ display: none; float: left; padding: 1px 6px; margin: 3px 0 0 10px; background: #666; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.dialog .titleBar .issues{ display: none; float: left; padding: 1px 6px; margin: 3px 0 0 10px; background: #666; color: #fff;}
.dialog .titleBar .issuesLink:hover{ background-color: #d18320; }
.dialog .titleBar .hasIssues{ display: block;}
.dialog .titleBar .hasNewIssues{ display: block; background-color: #d18320;}

.dialog .titleBar a.closeSectionBtn{
    color: #fff; float: right; padding: 0 6px 3px 6px; margin-bottom: 4px; font-size: 14px; border: 1px solid #666; border-top-color: #777; background-color: #444; -moz-border-radius: 3px; -webkit-border-radius: 3px; cursor: auto;
    background-image: -moz-linear-gradient( top, #666, #777 75%, #777);
}
.dialog .titleBar a.closeSectionBtn:hover{ color: #fff; background: #d18320; }
.dialog .actionBar{
    background-color: #666; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; overflow: hidden; 
    background-image: -moz-linear-gradient( top, #555, #666 25%, #666);
    border-top: 1px solid #666;
    }
.dialog .actionBar li{ float: left; padding-bottom: 0; line-height: 1em;}
.dialog .actionBar li a{ float: left; display: block; color: #fff; height: 17px; padding: 9px .8em 5px .8em; font-weight: bold;}
.dialog .actionBar li a:hover{ background-color: #d18320; }
.dialog .actionBar li.active a{ background-color: #fff; color: #d18320;
    background-image: -moz-linear-gradient( top, #eee, #fff 25%, #fff);
}

.dialog .actionBar .main{ float: left;}
.dialog .actionBar .main li a{  border-right: 1px solid #333;}
.dialog .actionBar .main li.first a{ -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; }
.dialog .actionBar .secondary{ float: right; font-size: 12px;}
.dialog .actionBar .secondary li a{ border-left: 1px solid #333;}
.dialog .actionBar .secondary li.last a{ -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 3px; }

.dialog .tabContentWrapper{ 
    background-color: #fff; color: #000; padding: 7px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px;  -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; overflow: auto;
    background-image: -moz-linear-gradient( top, #fff, #fff 75%, #eee);
    position: relative;
}
.dialog .tabContent{ }

.dialog .multiples_warning {
    background: #FF0;
    }

/* HEADER -------------------------------------------------------- */

#hd{ position: relative;}
#hd .masthead{ height: 69px;}
#hd h1{ float: left; overflow: hidden; margin: 18px 0 14px 20px; line-height: 9999px; }
#hd h1 a { display: block;  width: 245px; height: 34px; background: url(../images/C2RouteApp_183x34.jpg) no-repeat; line-height: 400px; overflow: hidden; }


/* USER NAV -------------------------------------------------------- */

#userNav{ color: #ccc; text-align: right; font-size: 12px; padding: 1em 20px 0 0; }
#userNav a{ color: #c2a95A; }
#userNav #account-nav{ float: right;}
#userNav #account-nav li{ float: left;}
#userNav #account-nav li a{ display: block; padding-left: .6em; margin-left: .6em; border-left: 1px solid #aaa; }
#userNav #account-nav li a:hover{ color: #ffe99A; }
#userNav #account-nav .username{ }


/* NAV -------------------------------------------------------- */

#navBar{
    background-color: #007CBE;
    background-image: -moz-linear-gradient( top, #101EC1, #007CBE 25%, #007CBE);
    border-top: 1px solid #007CBE;
    -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkitborder-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; overflow: hidden; -webkit-box-shadow: 5px -15px 15px #111; -moz-box-shadow: 5px -15px 15px #111; box-shadow: 5px -15px 15px #111; 
    }
#navBar li{ float: left; padding-bottom: 0; line-height: 1em;}
#navBar li a{ float: left; display: block; color: #fff; height: 17px; padding: 10px 1.5em 8px 1.5em; font-weight: bold; }
#navBar li a:hover{ background-color: #007CBE; }
#navBar li.active a{ background-color: #fff; color: #007CBE;}

#navBar .main{ float: left; font-size: 16px;}
#navBar .main li a{  border-right: 1px solid #101EC1;}
#navBar .main li.first a{ -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; }
#navBar .secondary{ float: right; }
#navBar .secondary li a{ border-left: 1px solid #101EC1;}
#navBar .secondary li.last a{ -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; }


/* BODY -------------------------------------------------------- */

#bd{ 
    background-color: #fff;
    background-image: -moz-linear-gradient( bottom, #eee, #fff 25%, #fff);
    -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;  -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-box-shadow: 5px 5px 15px #111; -moz-box-shadow: 5px 5px 15px #111; box-shadow: 5px 5px 15px #111; 
    border-bottom: 2px solid #999;
}

#bdPadder{ padding: 20px 20px 40px 20px;}
#bdBottom{ border-top: 1px solid #ccc; margin-top: 20px; padding-top: 20px;}



/* Map screens -------------------------------------------------------- */

.customMapControls{
    position: absolute; top: 220px; right: 36px; z-index: 10;
    -moz-opacity: .8;       /* mozilla, netscape */
    opacity: .8;           /* fx, safari, opera */
    }

.c2ralogo{
    position: absolute; top: 30px; left: 24px; z-index: 1;
       }

.appMsg{ z-index: 20; margin-top: 50px; font-size: 16px;}
.flowDiagram{ float: right; }
#silverlightControlHost { position:absolute; top:0; left:0; width:100%; height:100%; }

#toolbar .sectionBtn{ cursor: pointer;}

.sectionDialog{ display: none;}
.sectionDialog { width: auto; max-width: 700px; min-width: 500px }
.pop_menu_help_subtitle{ display: block; margin-bottom: 1em; }
.sectionDialog .pop_menu_help_subtitle, .sectionDialog .formNote { max-width: 500px; margin-right: 1em }

#mapNav {
    width: 100%; position: absolute; top: 0; left: 0; font-size: 12px; background: #333; color: #ccc; font-weight: bold; border: 1px solid #333; padding: 5px; overflow: hidden;
    opacity: .8;
    background-color: #333;
    background-image: -moz-linear-gradient( top, #444, #333 50px, #222);
}
#mapNav a{ color: #fff; font-weight: normal;}
#mapNav .projectNav{ float: left; padding-left: 20px;}
#mapNav .projectNav .projName{ font-weight: bold; display: block; float: left; padding-right: 12px; }
#mapNav .accountNav{ float: right; padding-right: 20px;}

.reportList{ margin-top: 5px;}
.reportList h3 { margin-bottom: 5px; }

a .addressLineTwo{ color: #333;}


/* FOOT -------------------------------------------------------- */

#ft{ padding: 15px 20px 40px 20px; color: #ccc; font-size: 12px; overflow: hidden; }
#ft a{ color: #c2a95A; }
#ft a:hover{ color: #ffe99A; }
#ft .devBy{ float: left;}
#ft .legal{ float: right; text-align: right;}



/* Page or section specific -------------------------------------------------------- */



/* Parameter forms ------------------------------------------- */

/* reset some stuff */
.parameter_form {
    /* line-height */
    /* font-size */
    /* text-align */
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif; /* reiterate */
    color: #000;
    }

.parameter_form h1 {
    color: #007CBE;
    }

.parameter_form .pop_menu_help_subtitle {
    max-width: none;
    margin: 0 0 0 0;
    }

.parameter_form .parameterdiv {
    margin-left: 0.5em;
    }

.parameter_form label {
    text-align: left;
    padding: 0 0 0 0;
    /* float? is left */
    }
.parameter_form p {
    padding: 0 0 0 0;
    }

.parameter_form input, .parameter_form textarea, .parameter_form select {
    background-image: none;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    /* border is messed up */
    }
/* actual css for global */

.parameter_form * {
    /* '*' because there's a ton of !important hanging around */
    /* "standard" sizes */
    font-size: 13pt;
    line-height: 1.65em; /* label/input line height */
    }

/* group marker */
    .parameter_form h2 {
        font-weight: normal; /* reset */

        font-size: 16pt;
        width: 16.43em; /* same as formfield, scaled for font-size */
        background-color: #F2F2F2;
        margin-top: 2px;
        }

    .parameter_form h2 .openclose {
        float: right;
        }
    .parameter_form h2 .openclose img {
        margin-top: 40%; /* doesn't work: vertical-align: middle; */
        width: 16pt; /* same as font-size */
        height: 16pt;
        }

.parameter_form p.help {
    font-size: 11pt;
    margin-left: 2em;
    color: #808080;
    }

.parameter_form .changedindicators {
    vertical-align: middle; /* FIXME: not centered anymore */
    margin-left: 9px;
    }

.parameter_form .changedindicators * {
    /* The <img> icons (which might be wrapped by a <a> */
    vertical-align: middle;
    }
.parameter_form .changedindicators img {
    margin-right: 4px;
    }

.parameter_form .label_default {
    color: #999999;
    }

    /* 2 column */
    .parameter_form .changedindicators {
        float: left;
        }

    .parameter_form .formfield {
        /* all form fields are this wide */
        width: 20.3em; /* basic column width */
        float: left;
        }

    .parameter_form .formfield.invalid {
        border: solid 1px red;
        }

    .parameter_form .formfieldline {
        margin-left: 0.5em;
        }

    .parameter_form .formfieldline:after {
        content: "";
        display: table;
        clear : both;
        }
        
/* inputs */
    .parameter_form input, .parameter_form select, .parameter_form select * { /* FIXME: and selects */
        line-height: initial; /* reset */
        font-size: 13pt; /* why do I have to repeat these? */
        width: 19.8em; /* basic column width 20.3 - left/right padding */
        text-align: left;
        padding: 0.2em 0em 0.2em 0.4em;
        }

    .parameter_form select {
        padding-top: 0.0em;
        padding-bottom: 0em;
        width: 20.3em; /* basic column width, + 2 border pixels sigh */
        /* line-height has no effect */
        }

    .parameter_form input.nonuniform, .parameter_form select.nonuniform, .parameter_form .radioLabel.nonuniform {
        /* was input[type="text"] w/grey and italic */
        font-style: italic;
        }
    .nonuniform {
        background-color: #FFFF00;
        }
        
    .parameter_form input.edited, .parameter_form select.edited, .parameter_form .radioLabel.edited {
        /* turn off non-uniform, even if not relevant */
        background-color: #FFFFFF;
        font-style: normal;
        /* mark as edited */
        }
    .parameter_form input.edited, .parameter_form select.edited {
        /* really just input-text, and select (not radio) */
        border: 2px solid black;
        }
    .parameter_form .radioLabel.edited {
        font-weight: bold;
    }

    .parameter_form input[type="radio"] {
        width: auto; /* text boxes are full width, but radios are native + label! */
        margin-right: 0.5em;
        }

    .parameter_form .submitbutton {
        border-color: black; /* reset */
        font-weight: bold;
        text-shadow: none;
        border: 0px none black;
        padding: 0.53em;

        background-color: black;
        color: white;
        }

.parameter_form .param_help {
    background: url(/images/icons/parameterform_help.png) no-repeat;
    background-position: center;
    }

/* param-help revealed on hover (override way up there) */
    .parameter_form .param_help:hover span, .parameter_form .param_help:hover span * { /* '*' because !important elsewhere */
        width: 35em; /* fixme: really, we want full width of modal: our parent parent div */
        line-height: 120%;
        font-size: 11pt;
        border: 0px;
        padding: 0px;
        background-color: black;
        color: white;
        }
    .parameter_form .param_help:hover span {
        /* esp. extra padding at bottom so default/suggested can be hit with mouse w/o losing hover */
        padding: 0.3em 0.4em 0.6em 0.4em;
        }
    .parameter_form .param_help:hover span * {
        padding: 0px 0px 0px 0px;
        position: relative; /* reset interior */
        display: initial; /* default */
        }

/* the default/suggested values in help */
    .parameter_form .param_help:hover .meta {
        font-style: italic;
        }
    .parameter_form .param_help:hover .copy_default, .parameter_form .param_help:hover .copy_suggested {
        border: 2px solid blue;
        padding-left: 0.1em;
        padding-right: 0.1em;
        }

/* CLEAR FIX ---------------------------------------------------------- */

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block;}
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }