/* CSS for modal to display disclaimer
 * when linking to external non-"friendly" sites */
/* created by Steven Fries, edited for ncjrs.gov pages - April 2018 */

.modal {
  
	display: block;
	width: 180px;
	max-width: 100%;
	max-height: 100%;
	padding: 10px;
	position: fixed;
	z-index: 1000000000002;
	left: 50%;
	top: 50%;
	text-align: left;
	transform: translate(-50%, -50%);
	background: white;
	box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}

.closed {
  display: none;
}

.modal-overlay {
  /* use id below instead of class to avoid conflicts with non-modal classes */
}
#ojp-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000000000001;  
	background: rgba(0, 0, 0, 0.6);
}

.modal-guts {
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-wrap: break-word; /* wraps long URLs instead of horizontal scrolling */
}

.modal_ojp_logo{
	display: inline-block;	
}
figure#seal-container {
	margin: 0 auto;
	text-align: center;
	width: 180px;
	margin-bottom: 10px;
}
img#img_modal_ojp_logo {
	height: 75px;
	width: 75px;
}
.modal-guts h1, .modal-guts h2, .modal-guts p{
	color: black;
	font-family: Georgia, serif;	
}
.modal-guts h1, .modal-guts h2{
	text-align: center;
}
.modal-guts h1{
	margin-bottom: 5px;
	font-size: 1rem;
}
.modal-guts h2{
	margin-bottom: 10px;
	font-size: .75rem;
}
.modal-guts p{
	font-size:.75rem;
}
.modal-guts .link {		
	max-width: 170px;
	margin: 15px 0;	
	text-align: center;
	/* wraps long URLs instead of horizontal scrolling */
	overflow-wrap: break-word; 
	word-wrap: break-word;
	hyphens: auto;
}
.modal-guts .link #target-url {
	color: blue;	
	padding: 0 5px;
	font-size: .7rem;
}
.modal-guts p button {
	border: none;
	border-radius: 3px;
	background-color: rgba(230, 230, 230, 1);
	margin-right: 15px;
	padding: 10px 15px;
}
.modal-guts .close-btn {margin-right: -15px;}
.modal-guts p button:hover {
	background-color: lightgray;
}
.p_button_row {
	margin: 20px 0 0 10px;
	text-align: center;
}
/*  viewports minimum 240px width  ******************************/
@media only screen and (min-width: 240px){
	.modal {
		width: 190px;
	}
	.modal-guts h1{
		font-size: 1rem;
	}
	.modal-guts h2{
		font-size: .8rem;
	}
	.modal-guts p{
		font-size:.8rem;
	}
	.modal-guts .link {			
		max-width: 180px;
	}
	.modal-guts .link #target-url {
		font-size: .8rem;
	}
}
/*  viewports minimum 280px width  ******************************/
@media only screen and (min-width: 280px){
	.modal {
		width: 230px;
	}
	.modal-guts .link {		
	max-width: 220px;
	}
}
/*  viewports minimum 320px width  ******************************/
@media only screen and (min-width: 320px){
	.modal {
		width: 260px;
	}
	.modal-guts .link {		
		max-width: 250px;
	}
}
/*  viewports minimum 345px width  ******************************/
@media only screen and (min-width: 345px){
	.modal {
		width: 290px;
	}
	.modal-guts h2{
		font-size: .85rem;
	}
	.modal-guts p{
		font-size:.85rem;
	}
	.modal-guts .link {	
		max-width: 280px;
	}
	.modal-guts .link #target-url {
		font-size: .85rem;
	}
}
/*  viewports minimum 355px width  ******************************/
@media only screen and (min-width: 355px){
	.modal {
		width: 305px;
	}
	figure#seal-container {
		margin-bottom: 12px;
	}
	.modal-guts h2{
		margin-bottom: 12px;		
	}
	.modal-guts .link {		
		max-width: 295px;
	}
}
/*  viewports minimum 480px width  ******************************/
@media only screen and (min-width: 480px){
	.modal {
	width: 420px;
	}
	figure#seal-container {
		margin-bottom: 15px;
	}
	.modal-guts h2{
		margin-bottom: 15px;
		font-size: .9rem;
	}
	.modal-guts p{
		font-size:.9rem;
	}
	.modal-guts .link {	
		max-width: 410px;
	}
	.modal-guts .link #target-url {
		font-size: .9rem;
	}
}
/*  viewports minimum 551px width  ******************************/
@media only screen and (min-width: 551px){
	.modal {
		width: 500px;
	}
	.modal-guts h1{	
		font-size: 1rem;
	}
	.modal-guts h2{		
		font-size: .95rem;
	}
	.modal-guts p{
		font-size:.95rem;
	}
	.modal-guts .link {
		max-width: 490px;
	}
	.modal-guts .link #target-url {
		font-size: .95rem;
	}
}
/*  viewports minimum 580px width  ******************************/
@media only screen and (min-width: 580px){
	.modal {
		width: 540px;
	}
	.modal-guts h1{
		font-size: 1.15rem;
	}
	.modal-guts h2{		
		font-size: 1rem;
	}
	.modal-guts p{
		font-size:1rem;
	}
	.modal-guts .link {		
		max-width: 530px;
	}
	.modal-guts .link #target-url {
		font-size: 1rem;
	}
}
/*  Larger viewports  ******************************/
@media only screen and (min-width: 640px){
	.modal {
		width: 600px;
		max-width: 600px;
	}
	figure#seal-container {
		margin-top: 20px;
		margin-bottom: 20px;
	}	
	.modal, .modal-guts{
		height: 430px;
		width: 100%;
	}
	.modal-guts h1{
		font-size: 1.25rem;
	}
	.modal-guts h2{
		margin-bottom: 20px;
		font-size: 1rem;
	}
	.modal-guts p{
		font-size:1rem;
	}
	.modal-guts .link {		
		max-width: 590px;
	}
}