@font-face {
  font-family: 'tradegothic';
  src: url('https://www.ohiocoal.com/fonts/tradegothic/trade-gothic-bold-cond-20.eot'); /* IE9 Compat Modes */
  /* src: url('https://www.ohiocoal.com/fonts/tradegothic/trade-gothic-bold-cond-20') format('embedded-opentype'),; /* Chrome */
  src: url('https://www.ohiocoal.com/fonts/tradegothic/trade-gothic-bold-cond-20.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.ohiocoal.com/fonts/tradegothic/trade-gothic-bold-cond-20.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.ohiocoal.com/fonts/tradegothic/trade-gothic-bold-cond-20.woff') format('woff'), /* Pretty Modern Browsers */
       url('https://www.ohiocoal.com/fonts/tradegothic/trade-gothic-bold-cond-20.otf')  format('opentype'), /* Safari, Android, iOS */
       url('https://www.ohiocoal.com/fonts/tradegothic/trade-gothic-bold-cond-20.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* THEN use like you would any other font */  
.tradegothic { font-family:"tradegothic", helvetica, arial, verdana, sans-serif;}  


#navWrap {background: #fff url('https://www.ohiocoal.com/images/template/body-bg.png') repeat-x top left; top: 0; left: 0; margin:0; width:100%; } 
#navContent {width: 1011px; padding: 0; z-index: 4; text-align: left; margin: 0 auto; min-height:65px;}

#subnavWrap {width: 212px; padding: 0; margin:0; text-align: left;}

.navElements {width:1011px; margin: 0 auto; padding:0;}

.navButtons{position:relative;}

.navButtons ul{
font: normal 14px/18px tradegothic, Helvetica, Arial, Verdana, sans-serif;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
text-decoration: none;
margin:0;
padding:36px 0 0 0;
}

.downArrow { font: normal 14px/18px tradegothic, Helvetica, Arial, Verdana, sans-serif; color: #97999c; padding:0 0 2px 6px;}
.memberArrow { font: normal 14px/18px tradegothic, Helvetica, Arial, Verdana, sans-serif; color: #263271; text-align:right; padding:0 20px 0 0; position:relative;}

/* ========== STANDARD STRUCTURE & TYPE STYLES ========== */

.navButtons li{
font:normal 14px/18px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
display: inline;
color: #3E4D91;
padding: 0 12px;
}

.navButtons li a{
text-decoration: none;
text-transform:uppercase;
color: #3E4D91;
}

.navButtons li a:hover{
text-decoration: none;
color: #1d2765;
margin:0;
text-transform:uppercase;
}


/* ========== PRIMARY NAV BUTTONS THAT HAVE DROP-DOWN MENUS ========== */
.navButtons li.selected{}

.navButtons li.selected a{ /*selected main tab style */
text-decoration: none;
color: #3E4D91;
}

.navButtons li.selected a:hover{ /*selected main tab style */
text-decoration: none;
color: #1d2765;
}


/* ========== ACTIVE PAGE STATES ========== */
#active a {
font:normal 14px/18px tradegothic, Helvetica, Arial, Verdana, sans-serif;
color:#3E4D91;
background: url('https://www.ohiocoal.com/images/template/nav-on-arrow.gif') no-repeat top center;
padding:12px 0 0 0;
}

#active a:hover {
text-decoration: none;
color: #1d2765;
margin:0;
}

#active.selected a{ /*selected main tab style */
font:normal 14px/18px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-decoration: none;
color: #3E4D91;
margin:0;
}

#active.selected a:hover{ /*selected main tab style */
font:normal 14px/18px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-decoration: none;
color: #1d2765;
margin:0;
}


/* ######### DROP-DOWN MENU ######### */



.dropmenu {
position:absolute;
top:0;
margin: 11px 0 0 -21px;
font:normal 14px/24px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
z-index:100;
background-color: #d4cfb3;
width: 200px;
visibility: hidden;
/* for IE */
filter:alpha(opacity=90);
/* CSS3 standard */
opacity:0.90;
}


.dropmenu a{
width: auto;
display: block;
text-indent: 12px;
padding:5px 10px;
text-decoration: none;
color: #3E4D91;
margin: 0 0 1px 0;
}

* html .dropmenu a{ /*IE only hack*/
width: 100%;
}

.dropmenu a:hover{ /*THEME CHANGE HERE*/
background-color: #c2bb9a;
color: #1d2765;
margin: 0 0 1px 0;
}

.dropmenuLearning {
position:absolute;
top:0;
margin: 11px 0 0 -21px;
font:normal 14px/24px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
z-index:100;
background-color: #d4cfb3;
width: 250px;
visibility: hidden;
/* for IE */
filter:alpha(opacity=90);
/* CSS3 standard */
opacity:0.90;
}


.dropmenuLearning a{
width: auto;
display: block;
text-indent: 12px;
padding:5px 10px;
text-decoration: none;
color: #3E4D91;
margin: 0 0 1px 0;
}

* html .dropmenuLearning a{ /*IE only hack*/
width: 100%;
}

.dropmenuLearning a:hover{ /*THEME CHANGE HERE*/
background-color: #c2bb9a;
color: #1d2765;
margin: 0 0 1px 0;
}



/* ========== SUB NAV ========== */

#subnavWrap {
width: 310px;
border-top: 6px solid #3e4d91;
margin:0 0 40px 0;
}

.subnavTitle{ font-family: Helvetica, Arial, Verdana, sans-serif;font-weight: 100; font-size: 16px; line-height: 24px; color: #3e4d91;}

.subnavButtons ul{
	
font: normal 14px/18px tradegothic, Helvetica, Arial, Verdana, sans-serif;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
text-decoration: none;
margin:0;
padding:0;
}

.subnavButtons li{
font:normal 14px/34px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
display: inline;
color: #3e4d91;
background-color: #ece9dd;
border-top: 1px solid #F7F6F1;
border-bottom: 1px solid #F7F6F1;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}

.subnavButtons li a{
font:normal 14px/34px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
display: inline;
color: #3e4d91;
padding: 0 0 0 22px;
text-decoration: none;
}

.subnavButtons li a:hover{
font:normal 14px/34px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
display: inline;
color: #1d2765;
background-color: #dfdbc9;
padding: 0 0 0 22px;
text-decoration: none;
display: block;
}

#subnav-active a { 
font:normal 14px/34px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
display: inline;
color: #3e4d91;
background: url('https://www.ohiocoal.com/images/template/sub-nav-bg.gif') no-repeat top left; width:310px; height:34px; padding:0;margin: 0;
display: block;
padding: 0 0 0 22px;
margin: 0;
}

#subnav-active a:hover { 
font:normal 14px/34px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
display: inline;
color: #1d2765;
background: url('https://www.ohiocoal.com/images/template/sub-nav-bg.gif') no-repeat top left; width:310px; height:34px; padding:0;margin: 0;
display: block;
padding: 0 0 0 22px;
margin: 0;
}

/* ========== TERT NAV ========== */


.tertnavButtons ul{
	
font: normal 14px/18px tradegothic, Helvetica, Arial, Verdana, sans-serif;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
text-decoration: none;
margin:0;
padding:0;
}

.tertnavButtons li{
font:normal 14px/34px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
display: inline;
color: #3e4d91;
background-color: #ece9dd;
border-top: 1px solid #F7F6F1;
border-bottom: 1px solid #F7F6F1;
text-decoration: none;
margin: 0 0 0 20px;
padding: 0;
display: block;
}

.tertnavButtons li a{
font:normal 14px/34px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
display: inline;
color: #3e4d91;
padding: 0 0 0 22px;
text-decoration: none;
}

.tertnavButtons li a:hover{
font:normal 14px/34px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
display: inline;
color: #1d2765;
background-color: #dfdbc9;
padding: 0 0 0 22px;
text-decoration: none;
display: block;
}

#tertnav-active a { 
font:normal 14px/34px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
display: inline;
color: #3e4d91;
background: url('https://www.ohiocoal.com/images/template/sub-nav-bg.gif') no-repeat top left; width:310px; height:34px; padding:0;margin: 0;
display: block;
padding: 0 0 0 22px;
margin: 0;
}

#tertnav-active a:hover { 
font:normal 14px/34px tradegothic, Helvetica, Arial, Verdana, sans-serif;
text-transform:uppercase;
display: inline;
color: #1d2765;
background: url('https://www.ohiocoal.com/images/template/sub-nav-bg.gif') no-repeat top left; width:310px; height:34px; padding:0;margin: 0;
display: block;
padding: 0 0 0 22px;
margin: 0;
}



/* ========== MEMBER LINKS ========== */

.memberButtons li{
font: bold 14px/37px tradegothic, Helvetica, Arial, Verdana, sans-serif;
background: #3e4d91 url('https://www.ohiocoal.com/images/members-button-bg.gif') no-repeat top left;
display: block;
text-transform:uppercase;}

.memberButtons li a{
font: bold 14px/37px tradegothic, Helvetica, Arial, Verdana, sans-serif;
color: #c7c8c9;
border-top: 2px solid #c7c8c9;
border-right: 5px solid #c7c8c9;
border-bottom: 3px solid #c7c8c9;
border-left: 5px solid #c7c8c9;
text-decoration: none;
margin: 0;
padding: 0 0 0 22px;
display: block;
}

.memberButtons li a:hover{
text-decoration: none;
color: #263271;
margin:0;
}