@font-face {
    font-family: corbel;
    src: url('http://www.ccgisc.org/fonts/corbel.ttf') url('http://www.ccgisc.org/fonts/corbel.eot'); /* IE9 */
}

@font-face {
    font-family: calibri;
    src: url('http://www.ccgisc.org/fonts/calibri.ttf') url('http://www.ccgisc.org/fonts/calibri.eot'); /* IE9 */
}

@media print {
    #headerGreen { display:none;}
    #headerBlue { display:none;}
    #logo { display:none;}
    #members { display:none;}
    #ccgisc { display:none;}
    #name { display:none;}
    #menu { display:none;}
	#FinacialHead  { display:none;}
    #contentWrapper { position:absolute; top:0 !important;}
    #content { padding: 0; }
    #footerGreen { display:none;}
    #selectDateDiv { display:none;}
}

/*** element styles ***/

a {
	color:#17375E;
}

a:hover, a:focus {
    color:maroon;
}

a.info span {
    position: absolute;
    top:-9999px;
    left:-9999px;
    color: #595959;
    background-color:#FFFFFF;
    padding:0px 5px;
    text-align: left;
    display: inline-block;
    text-decoration:none !important;
}

a.info:hover span, a.info:focus span {
    position:relative;
    top: 0px; 
    left: 10px; 
    z-index:10;
}

a.skip {
    position:absolute;
    top:0px;
    left:0px;
    z-index:-10;
}

a.skip:focus {
    position:absolute;
    top:0px;
    left:0px;
    z-index:10;
}

a[href^=tel], a[href^=fax], a[href^=geo] {
    color:inherit;
    text-decoration:none;
}

a[rel="external"]:hover,
a[rel="external"]:focus,
a[rel="external"]:active {
    z-index: 49;
}

a[rel="external"] .ol,
a[rel="external"]:link .ol {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;  
    z-index: 50;
    font-style:normal;
    text-decoration: none;
}

a[rel="external"]:focus .ol,
a[rel="external"]:hover .ol {
	float: right;
    color: #595959;
	background: #FFFFFF;
	width: auto;
	height: auto;
    white-space: nowrap;
	border: solid 1px #CCCCCC;
	margin-left: 10px;	
	margin-top: 5px;
	padding: 3px 5px;
	overflow: visible;
	-moz-border-radius: 0.5em; 
	-webkit-border-radius: 0.5em; 
	border-radius: 0.5em;
	box-shadow: 0.5em 0.5em 0.5em #CCCCCC;
	z-index:51;
}

body {
    padding:0px;
    margin:0px;
    width:100%;
    height:100%;
    border:0px;
    font-family:corbel;
    font-size:16px;
}

caption {
    position:absolute;
    top:-9999px;
    left:-9999px;
    height:1px;
    width:1px;
}

fieldset {
    border:1px solid #B7CE88;
}

h1 {
    color:#17375E;
    font-size:18px;
}


h2 {
    color:#404040;
    font-size:16px;
    padding:0px;
    margin-bottom:0px;
}

h3 {
    color:#17375E;
    background-color:#B7CE88;
    font-size:14px;
    padding:5px;
    padding-left:10px;
    margin-bottom:0px;
}

h4 {
    color:#000000;
    font-weight:400;
    font-style:italic;
    margin-top:10px;
    margin-bottom:0px;
}

hr {
    border-top:1px solid #595959;
    border-left:none;
    margin:2px;
}

hr.green {
    border:0;
    height:1px;
    background-image:linear-gradient(to right, rgba(183, 206, 136, 0), rgba(183, 206, 136, 0.75), rgba(183, 206, 136, 0));
}

img {
    border:none;
}

p {
    padding:0px;
    margin-top:0px;
}

p.zero {
    padding:0px;
    margin:0px;
}

table {
    border-spacing: 0px !important;
    border-collapse:collapse;
}

ul.admin1 {
    margin: 0 0 0 20px;
    padding: 0px;
    list-style: none;
    text-indent: 0px;
    list-style-type: none;
    font-style:italic;
}

ul.admin2 {
    margin: 0 0 0 30px;
    padding: 0px;
    list-style: none;
    text-indent: 0px;
    list-style-type: disc;
    font-style:normal;
}

ul.plain {
    margin: 0 0 0 20px;
    padding: 10px;
    list-style: none;
    text-indent: 0px;
    list-style-type: none !important;
}

ul.plainUL {
    margin: 0 0 0 20px;
    padding: 5px 0 0 0;
    list-style: none;
    text-indent: 0px;
    list-style-type: none !important;
}

ul.centerUL {
    margin: 0px;
    padding: 5px 0 0 0;
    list-style: none;
    text-indent: 0px;
    list-style-type: none !important;
}

ul.centerUL li {
    display: inline-block;
}

ul.diamond {
    margin: 0 0 0 20px;
    padding: 10px;
    list-style: none;
    text-indent: -22px;
    *text-indent: 0;
    *list-style-type: disc;
}

ul.diamond.li {
    margin: 0 0 0 10px;
}

ul.diamond li:before {
    content: "\2666 \a0 \a0 \a0";
}

ol.plainTxt,  ol.plainTxt li {
    margin:0 0 0 0 !important;
    padding:0 0 0 0 !important;
    list-style:none !important;
    list-style-type: none !important;
    text-indent:0px !important;
}

/*** id styles ***/

#bitstripAlbum {
    position:relative;
    float:right;
    top:-60px;
    left:300px;
    width:448px;
    height:328px;
    background-color:#17375E;
    border:10px solid #17375E;
    box-shadow: 0px 0px 50px -5px #17375E;
    transform:rotate(5deg);
    -ms-transform:rotate(5deg); /* Internet Explorer */
    -moz-transform:rotate(5deg); /* Firefox */
    -webkit-transform:rotate(5deg); /* Safari and Chrome */
    -o-transform:rotate(5deg); /* Opera */
    overflow:hidden;
}

#ccgisc {
    position:relative;
    top:-210px;
    left:575px;
    width:300px;
    font-family:calibri;
    font-size:48px;
    line-height:52px;
    text-align:center;
}

#content {
    padding:10px 50px;
    min-height:600px;
}

#contentWrapper {
    position:relative;
    top:145px;
    box-shadow: 0px 15px 50px -20px #17375E;
    -ms-box-shadow: 0px 15px 50px -20px #17375E;
    -moz-box-shadow: 0px 15px 50px -20px #17375E;
    -webkit-box-shadow: 0px 15px 50px -20px #17375E;
}

#footerGreen {
    position:relative;
    top:145px;
    height:150px;
    color:#17375E;
    background-color:#B7CE88;
}

#headerGreen {
    position:absolute;
    top:0px;
    height:110px;
    width:100%;
    color:#17375E;
    background-color:#B7CE88;
}

#headerBlue {
    position:absolute;
    top:112px;
    height:34px;
    width:100%;
    color:#FFFFFF;
    background-color:#17375E;
}


#leftNav {
    position:relative;
    float:left;
    height:auto !important;
    width:175px;
    text-align:center;
    color:#595959;
    padding-top:45px;
    padding-right:20px;
    line-height:24px;
    z-index:999;
}

#leftNav a {
    color:#595959;
    text-decoration:none;
}

#leftNav a:hover, #leftNav a:focus {
    color:#595959;
    background-color:#EBEBEB;
    text-decoration:none;
}

#leftNav table tr td {
    border-bottom:solid 1px #595959;
}

#leftNav, #rightContent {
    display: table-cell;
}

#rightContent {
    position:relative;
    width:800px;
}

#logo {
    position:relative;
    left:55px;
    width:114px;
    height:100px;
    z-index:9999 !important;
}

#members {
    position:relative;
    top:-105px;
    left:150px;
    width:200px;
    font-size:12px;
    line-height:12.5px;
}

#menu {
    position:relative;
    height:34px;
    left:190px;
    width:680px;
    font-size:16px;
    z-index:999;
}

#menu ul {
    list-style-type: none;
    margin: 0;
    padding: 2px 0 0 0;
}

#menu li {
    display: inline;
}

#name {
    position:relative;
    top:-205px;
    left:575px;
    width:300px;
    color:#FFFFFF;
    font-style:italic;
    font-size:16px;
    text-align:center;
}

#page2 {
    page-break-before:always;
}

#photoAlbum {
    position:relative;
    float:right;
    top:20px;
    left:75px;
    width:350px;
    height:225px;
    background-color:#17375E;
    border:10px solid #17375E;
    box-shadow: 0px 0px 50px -5px #17375E;
    transform:rotate(5deg);
    -ms-transform:rotate(5deg); /* Internet Explorer */
    -moz-transform:rotate(5deg); /* Firefox */
    -webkit-transform:rotate(5deg); /* Safari and Chrome */
    -o-transform:rotate(5deg); /* Opera */
    overflow:hidden;
}

#slideshowPanel {
    background-color:#17375E;
}

/*** class styles ***/

.alert {
    color:maroon;
    font-style:italic;
}

.archiveBody, .archiveBody th, .archiveBody tr td  {
    padding:2px 10px 2px 10px;
    border:none;
}

.archiveBody tr td table {
    color:maroon;
    font-family:calibri;
    font-size:18px;
    font-weight:600;
}

.archiveHead {
    color:#17375E;
    background-color:#B7CE88;
}

.backshade {
    padding: 5px;
    background-color: #F5F5F5;
    border-radius:5px;
    box-shadow:inset 0 2px 3px rgba(255,255,255,0.3), inset 0 -2px 3px rgba(0,0,0,0.3), 0 1px 1px rgba(255,255,255,0.9);
}

.blank_row {
    height: 5px !important; /* overwrites any other rules */
    background-color: #CCCCCC;
}

.bold {
    font-weight:bold !important;
}

.borderbottom {
    border-bottom:solid 1px #595959 !important;
}

.borderbottomWhite {
    border-bottom:2px solid #FFFFFF;
}

.bordertop {
    border-top:solid 1px #595959 !important;
}

.bordertop-white {
    border-top:solid 1px #FFFFFF !important;
}

.bordertoplt {
    border-top:solid 1px #cccccc !important;
}

.borderbottomlt {
    border-bottom:solid 1px #cccccc !important;
}

.center {
    text-align:center;
}

.centerDiv {
    margin-left:auto;
    margin-right:auto;
    width:500px;
    min-width:500px;
    max-width:500px;
}

.centerPage {
    margin-left:auto;
    margin-right:auto;
    width:900px;
    min-width:900px;
    max-width:900px;
}

.clear { 
    clear: both; 
}

.contactBorder {
    border-right: 2px solid #17375E;
    border-left: 2px solid #17375E;
}

.contactGray {
    color:#535353;
    font-size:12px;
}

.contactGray a {
    color:inherit;
}

.contractual {
    color: #606060;
    font-variant: small-caps;
    font-weight: 600;
}

.cpanelHeader {
    color:#17375E;
    font-weight:bold;
    text-decoration:underline;
}

.displayNone {
    display:none;
}

.ddFont {
    font-size:14px;
}

.dkGray {
    color:#404040;
}

.esriControlsBR {
    display:none !important;
    visibility: hidden !important;
}

.fadein { 
    position:relative; 
    width:350px; 
    height:225px; 
}

.fadein img { 
    position:absolute; 
    left:0; 
    top:0; 
}

.fadein2 { 
    position:relative; 
    width:448px; 
    height:328px; 
}
.fadein2 img { 
    position:absolute; 
    left:0; 
    top:0; 
}

.failureText {
    color: #990000;
}

.floatLeft {
    float:left;
}

.floatRight {
    float:right;
}

.footerHead {
    font-size:16px;
    text-align:center;
    font-weight:bold;
}

.greenBack {
    background-color:#B7CE88;
}

.gridHead {
    font-size:16px;
    color:#595959;
}

.gridItem {
    font-weight:normal;
    font-size:16px;
    color:#000000;
}

.hidden {
    position:absolute;
    top:-9999px;
    left:-9999px;
    height:1px;
    width:1px;
}

.hideThis {
    display:none !important;
}

.hrBlue {
    width:100%;
    height:2px;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(23,55,94,1) 50%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(50%, rgba(23,55,94,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(23,55,94,1) 50%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(23,55,94,1) 50%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(23,55,94,1) 50%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(23,55,94,1) 50%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
    border: none !important;
}

.hrGreen {
    width:100%;
    height:2px;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(183,206,136,1) 50%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(50%, rgba(183,206,136,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(183,206,136,1) 50%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(183,206,136,1) 50%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(183,206,136,1) 50%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(183,206,136,1) 50%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
    border: none !important;
}

.h1Class {
    color: #17375E;
    font-size: 18px;
}

.h2Class {
    color:#404040;
    font-size:16px;
    padding:0px;
    margin-bottom:0px;
}

.h2label {
    display:inline;
}

.italic {
    font-style:italic;
}

.justify {
    text-align:justify;
}

.largeRed {
    font-size:16px;
    color:red;
}

.left {
    text-align:left;
}

.loginStyle td {
    padding:5px;
}

.LoginTitle {
    background-color: #17375E;
    color:#FFFFFF;
    font-weight:600;
}

.ltGray {
    color:#595959;
}

.members {
    padding-left:80px;
}

.menuStyle a {
    color:#FFFFFF;
    text-decoration:none;
    line-height:28px;
    z-index:999;

}

.menuStyle a:visited {
    color:#FFFFFF;
    text-decoration:none;
    line-height:28px;
    z-index:999;
}

.menuStyle a:hover, .menuStyle a:focus {
    color:#B7CE88;
    text-decoration:none;
    line-height:28px;
    z-index:999;
}

.normal {
    font-weight:normal;
}

.numFont {
    font-family:calibri !important;
}

.pad2 {
    padding:2px;
}

.pad5 {
    padding:5px;
}

.padLeft0 {
    padding-left:10px !important;
}

.padLeft1 {
    padding-left:20px !important;
}

.padLeft2 {
    padding-left:40px !important;
}

.padRight2 {
    padding-right:40px !important;
}

.padLeft3 {
    padding-left:30px !important;
}

.pagerRow {
    color:#FFFFFF;
    background-color:#17375E;
    padding:5px;
}

.panBox {
	padding:0px;
	margin:0px;
	line-height:16px;
	width:18px;
}

.right {
    text-align:right !important;
}

.shipto {
    font-size:14px;
    color:#595959;
}

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

.smFont {
     font-size:13px;
}

.stacked {
    position:relative;
    left:0;
    top:0;
}

.tableTop td { 
  display: table-cell !important;
  vertical-align: top !important;
}

.tableBorderLeft, .tableBorderLeft th, .tableBorderLeft tr td  {
    padding:0px 20px 0px 20px;
    border:1px solid #CCCCCC;
}

.tablePlainLeft, .tablePlainLeft th, .tablePlainLeft tr td  {
    padding:0px 20px 0px 0px;
    border:none;
}

.tablePlainCenter, .tablePlainCenter th, .tablePlainCenter tr td  {
    padding:0px 20px 0px 20px;
    border:none;
}

.tableTextLeft, .tableTextLeft th, .tableTextLeft td {
    padding:0px 0px 0px 5px;
    border:none;
    text-align:left !important;
}

.top {
    vertical-align:top;
}

.txtFont {
    font-family:corbel !important;
}

.txtBlack {
    color:#000000;
}

.txtGrey {
    color:#CCCCCC;
}

.txtBlue {
    color:#004DA8;
}

.txtRed {
    color:#A80000;
}

.underline {
    text-decoration:underline;
}

.validator {
    width:10px;
    text-align:left;
    display:inline;
    line-height:24px;
}

.WhiteOnBlue {
    color:#FFFFFF;
    background-color:#17375E;
}

.widthAll {
    width:100%;
}

.widthHalf {
    width:50%;
}

.width35 {
    width:35px;
}

.width65 {
    width:65px;
}

.width75 {
    width:75px;
}

.width100 {
    width:100px;
}

.width110 {
    width:110px;
}

.width120 {
    width:120px;
}

.width125 {
    width:125px;
}

.width135 {
    width:135px;
}

.width150 {
    width:150px;
}

.width165 {
    width:165px;
}

.width200 {
    width:200px;
}

.width300 {
    width:300px;
}

.width350 {
    width:350px;
}

.width400 {
    width:400px;
}

.width450 {
    width:450px;
}

.width500 {
    width:500px;
}

.width525 {
    width:525px;
}

.width600 {
    width: 600px;
}

/********************/
/* set login styles */
/********************/

#accountDiv {
    position: relative;
    width:450px;
    top: 50px;
    margin-left:auto;
    margin-right:auto;
    color: #17375E;
    background-color:#FFFFFF;
    padding: 5px;
    font-size: 16px;
    border:2px solid #17375E;
}


#loginDiv {
    position: relative;
    width:270px;
    top: 50px;
    margin-left:auto;
    margin-right:auto;
    color: #17375E;
    background-color:#FFFFFF;
    padding: 5px;
    font-size: 16px;
    border:2px solid #17375E;
}

#createDiv {
    position: relative;
    width:305px;
    top: 50px;
    margin-left:auto;
    margin-right:auto;
    color: #17375E;
    background-color:#FFFFFF;
    padding: 5px;
    font-size: 16px;
    border:2px solid #17375E;
}

#LoginID {
    width:280px;
    border:1px solid #17375E;
}

#CreateID {
    width:315px;
    border:1px solid #17375E;
}

#CreateLoginID {
    width:310px;
    border-bottom:1px solid #17375E;
    border-spacing:0px;
}

#LoginID td, #CreateID td, #CreateLoginID td {
    padding: 5px;
}

#loginFooter {
    position:absolute;
    bottom:0px;
    height:20px;
    width:100%;
    background-color: #17375E;
    color:#FFFFFF;
}

#logout {
    position:absolute;
    top:5px;
    right:10px;
    color: #17375E;
    z-index:9999;
}

#LoginDiv {
    position:absolute;
    top:5px;
    right:10px;
    color:#17375E;
	z-index:9999;
}


/* urgent notice splash screen */

.splash_button {
    padding:5px 10px;
    border:2px outset;
    text-decoration:none;
}

.splash_black {
    position: fixed;
    display: block;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #17375E;
    z-index: 10001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
}

.splash_white {
    position: fixed;
    display: block;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 15px;
    border: 15px solid #B7CE88;
    background-color: white;
    z-index: 10002;
    overflow: auto;
}


/* notification overlay screens */

.black_overlay {
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #17375E;
	z-index:10001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}

.white_content {
	display: none;
	position: fixed;
	top: 300px;
	left: auto;
    right: auto;
	width: 200px;
	height: 150px;
    margin-left:270px;
	padding: 15px;
	border: 15px solid #B7CE88;
	background-color: white;
	z-index:10002;
	overflow: auto;
}

.white_content2 {
	display: none;
	position: fixed;
	top: 300px;
	left: auto;
    right: auto;
	width: 200px;
	height: 150px;
    margin-left:150px;
	padding: 15px;
	border: 15px solid #B7CE88;
	background-color: white;
	z-index:10002;
	overflow: auto;
}


/* fake table style layouts */

.tableView {
    display:table;
}

.tableRow {
    display: table-row;
}

.tableCell {
    display: table-cell;
}


/* Google custom search styles */
.search-box {
    height: 20px;
    width: 175px;
    margin: 2px;
}

.search-button {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #17375E;
    border: none;
    height: 25px;
    width: 75px;
    margin: 2px;
}

.smallPipe {
    display: none;
}

.top25 {
    margin-top:25px;
}





#network {
    width: 800px;
    height: 600px;
    border: 1px solid lightgray;
}
table.legend_table {
    border-collapse: collapse;
    width:100%;
}
table.legend_table td,
table.legend_table th {
    border: 1px solid #d3d3d3;
    padding: 5px;
    text-align: center;
}
/* Dropdown Combobox Styles */
.dropDiv {
    position:relative;
    top:-2px;
    z-index:9999;
    height:0px;
    overflow:visible;
    display:none;
    background-color: #FFFFFF;
}
.dropdown_style {
    background-image:url(../images/arrow_down.png);
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:20px;
    border:1px solid #CCCCCC;
}
/* Accordion Styles */
ul.accordion-container {
    list-style: none outside none;
    margin: 0 !important;
    padding: 0 !important;
}
button.accordion {
    border: none;
    width: 100%;
    margin: -3px !important;
    padding: 0 !important;
    font-family: corbel;
    color: #17375E;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    background-color:#FFFFFF;   
}
button.accordion:hover {
    background-color: #B7CE88;
}
button.accordion:after {
    content: ' Expand \25BC';
    font-size:14px;
}

button.accordion.active:after {
    content: ' Collapse \25B2';
}
/* Style the accordion panel. Note: hidden by default */
div.panel {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease-in-out;
    opacity: 0;
}
div.panel div {
	display:none;
}
/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
    opacity: 1;
    max-height: 999999px;
}
div.panel.show div {
	display:block;
}




/* 
@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
    
    #contentWrapper, #rightContent, .centerPage {
        position:relative;
        margin-left: unset;
        margin-right: unset;
        max-width: unset;
        min-width: unset;
        width: 100%;
        padding:unset;
        margin:unset;
    }

    #content {
        padding:5px;
        margin:unset;
    }

    #logo {
        position:relative;
        left: 5px;
    }

    #ccgisc, #name, #LoginDiv, #leftNav, #photoAlbum, #seal, #members, .footerHead {
        display:none;
    }

    #menu {
        display:none;
    }

    #menu .active {
        position:relative;
        display:normal;
        left:0px;
        width: 100%;
    }

    #menu li {
        display: block;
        background-color: #17375E;
        text-align:center;
    }

    #menu li img {
        display: none;
    }

    footer .tableView {
        background-color: #B7CE88;
    }

    .tableView, .tableRow, .tableCell {
        display: block;
        width: 100%;
        text-align: center;
    }

    .tableCell {
        padding-top: 10px;
    }

    .contactBorder {
        border: none;
    }

    .smallPipe {
    display:inline-block;
    }

    .top25 {
        margin-top:0px;
    }
}

    */