/***************************************************************************************************************
GENERAL STYLES
****************************************************************************************************************/
body {
	margin-left: 0px;
	margin-top: 0px;
	font: 12px Georgia, "Times New Roman", Times, serif;	
	line-height:1.5em;
}

img {
    border: none;
}

a {
	color:#000000;
}

h2 {
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

h3 {
    font-size: 20px; 
    color: #990000; 
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

p a {
   color: #990000; 
}

p a:hover {
   font-weight: bold;
    color: #990000; 
}

.disabledLink {
	color:#999999
}

.footNoteReference {
	color: #F00;
	vertical-align:super;
	font-size:10px;
	font-weight:bold;
}

.footNotes{
	color:#999999;
	font-size:10px;
}

.logo {
    text-decoration: none !important;
}

.board-member-links {
    color: #990000;
}

.board-member-links:hover {
    font-weight: bold;
    color: #990000;
}

.main.container {
    border-right: #990000 thin solid;
    border-left: #990000 thin solid;
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer .container {
    line-height: 30px;
	font-family: 12px Georgia, "Times New Roman", Times, serif;
	color:#000000;
	text-align:center;
	background-color:#cccccc;
    border-right: #990000 thin solid;
    border-left: #990000 thin solid;
    border-bottom: #990000 thin solid;
	
}
.footer a {
	color:#000000;
}

.footer a:hover {
	color:#990000;
}

/***************************************************************************************************************
NAVBAR STYLES - the styles below control navigation menu located in the header of each page
The navigation menu is controlled primarily by the default bootstrap framework styles 
****************************************************************************************************************/
.navbar-custom {
   border-bottom: 10px solid #990000;
   background-image: linear-gradient(to bottom, #aaa, #eee);
    font-family:verdana,geneva,arial,helvetica,sans-serif;
	font-size:12px;
	font-weight:bold !important;
}

.dropdown-menu {
  margin-top: 0px;
}
          
.custom-toggler.navbar-toggler { 
    border-color: #990000; 
    border-width: 2px;
} 
          
.custom-toggler .navbar-toggler-icon { 
            background-image: url( 
"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(153, 0, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); 
} 

.dropdown-menu {
    top: 100% !important; /*value greater than 100% will break the JS controling the onhover effect for the navigation menu*/
    background: #e0e0e0;
    border-left: 2px solid #a80329;
    border-right: 2px solid #a80329;
    border-bottom: 2px solid #a80329;
    border-top: 2px solid #a80329;
}

.dropdown-item {
    text-align: left !important; 
    font-size: 12px !important;
    font-weight: bold !important;
}

.dropdown-item:hover{
    background: #949494;
    color: #000000;
}

.active {
    background-color: #990000;
}

.active .nav-link{
    color: #FFF !important;
}

.navbar .nav-item:not(:last-child) {
    margin-right: 10px;
}

/***************************************************************************************************************
SIDEBAR STYLES - the styles below control the sidebar located on the right side of each page
****************************************************************************************************************/
.sidebar {
    background: #E1E1E1;
    border-radius: 10px;
}

.title-bar {
    background-color: #990000;
    color: #FFF;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    font-size: 14px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#sidebarItems{
	padding-left: 8px;
	padding-right: 3px;
}

#sidebarItems  a { 
	font: normal 11px Georgia, "Times New Roman", Times, serif;
	text-decoration: underline;
	color: black;
	/*padding: 0px 0;*/
	padding-left: 0px;
	padding-right: 3px;
}

#sidebarItems  a:hover{ 
	font: normal 11px Georgia, "Times New Roman", Times, serif;
	text-decoration: underline;
	color: black;
	padding-left: 0px;
	padding-right: 3px;
	font-style:italic;
}

/***************************************************************************************************************
ACCORDIAN STYLES - the styles below are used to customize the JQueryUI accordian 
that is used on the FAQ and US Enrollment Data pages
****************************************************************************************************************/
.custom-accordian {
    background-image: none !important;
    margin-left: 5px;
    margin-right: 5px;
}

.ui-accordion-header {
    cursor: pointer;
    margin: 2px 0 0 0 !important;
    padding: .5em .5em .5em .7em !important;
}

.ui-accordion-header-active {
    background: #aaaaaa !important;
    border: 1px solid #999 !important;
}

.ui-accordion-content {
    padding: .5em .5em .5em .7em !important;
}

/***************************************************************************************************************
D3.js STYLES - the styles below control data visualizations created using D3.js (i.e. regulations world and US maps)
****************************************************************************************************************/
.state {
    stroke: #fff;
    stroke-linejoin: round;
  }

 .country {
    stroke: #fff;
    stroke-linejoin: round;
  }

.clickable {
    cursor: pointer;
}
    
div.d3-tooltip {	
    position: absolute;			
    text-align: center;			
    padding: 5px;				
    font: 12px sans-serif;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;			
}

#map {
    background-color: rgb(124, 185, 232, 1);
    display: inline-block;
}

#link-list ul li {
    display: block;
    width: 25%;
    float: left;
}
/***************************************************************************************************************
MEDIA QUERIES - the styles below make adjustments to the layout according to the size of the device being used.
Most of the adjustment is done with the Bootstrap framework, these styles are here to help with deviations from
the framework.
****************************************************************************************************************/
/* Medium and smaller devices (991px and smaller)*/
@media (max-width: 991px) { 
    .navbar-collapse {
        margin-top: 10px;
    }
    
    #link-list ul li {
        width: 25% !important;
    }
}

/* Small devices (767px and smaller)*/
@media (max-width: 767px) { 
    .navbar-collapse {
        margin-top: 10px;
    }
    
    #link-list ul li {
        width: 50% !important;
    }
}

/* Extra Small devices (576px and smaller)*/
@media (max-width: 576px) { 
    #link-list ul li {
        width: 100% !important;
    }    
    
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
    .navbar-custom {
        font-size: 12px !important;
    }
    
    .navbar .nav-item:not(:last-child) {
        margin-right: 10px;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 

    .navbar-custom {
        font-size: 14px !important;
    }  
    
    .navbar .nav-item:not(:last-child) {
    margin-right: 15px;
    }
}

/***************************************************************************************************************
The following styles may no longer be in use. I have not found them on the site - Matt 6/29/2020
***************************************************************************************************************
#header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;	
}

#header-container {
	height: 90px;
	background: url(../images/header-bg.png) repeat-x left bottom;
}

#header {
	width: 940px;
	margin: 0 auto;
	position: relative;
}


#footer-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;	
}

#box
{
	width: 150px;
	height: 150px;
	background: #FFF;
	border: red dotted 5px;
	text-align: center;
	position: absolute;
	margin-left: -75px;
	margin-top: -75px;
	left: 50%;
	top: 50%;
	z-index: 20;
	display: none;
}

#screen
{
	position: absolute;
	left: 0;
	top: 0;
	background: #000;
}

***************************************************************************************************************/