@charset "utf-8";

/* CSS Document */





@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* @import url('https://fonts.googleapis.com/css?family=Fjalla+One');*/

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');





	

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }



body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

  margin: 0;

  padding: 0;

}

html {

	/*background-color: #666;*/

	font-family: Open Sans, Arial, Helvetica, sans-serif;

}

body{

	color:#222;

	

}

body.dark{

	background:#03242d;

	color:#ddd;

}

.wrapper{

	display: grid;

	width:100%;

	max-width:960px;

	grid-template-rows: auto;

	grid-template-columns:291px 1fr;

	display: -ms-grid;

	-ms-grid-rows: auto;

	-ms-grid-columns:291px 1fr;

	justify-items:center;

	margin-left:auto;

	margin-right:auto;

}

.header{

	background:#000 url('../images/squall-banner.png') left top no-repeat;

	max-width:960px;

	min-height:123px;

	padding:110px 0 0 0;

	font-family: Open Sans, Arial, Helvetica, sans-serif;

	font-weight:800;

	font-size:14px;

	color:#fff;

	width:100%;

	position:relative;

}



/*	HEADER IMAGE WITH LOGO ON TOP */

	.header_background_image

	{

		position: relative;

		top: 0;

		left: 0;

		width:100%;

		height:auto;

		max-width:960px;

	}

	.header .logo{ /*header logo on all other pages*/

		position: absolute;

		top: 10px;

		left: 9px;

	}

	.header .logo img{

		width: 290px;

		height:auto;

	}

	.header_logo/* this is homepage only*/

	{

		position: absolute;

		top: 153px;

		left: 15px;



	}

	

	.photo_text/* this is homepage only*/

	{

	position: absolute;

		top: 570px;

		left: 800px;

	}

	.header_text

	{

		position: absolute;

		top: 245px;

		left: 25px;

		z-index: 1;

		color: white;

		font-size: 15pt;

		line-height: 140%;

		/*-webkit-text-stroke: 2px black;*/

		/*text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);*/

		text-shadow: -1px 1px 0 #000,

					  1px 1px 0 #000,

					  1px -1px 0 #000,

					 -1px -1px 0 #000;

		/*background-color: rgba(0,0,0,.5);*/			 

	}

#carousel-container{

	margin-top:-80px;

}

.header{

	grid-column-start: 1;

	  grid-column-end: 3;

	  grid-row-start:1;

	  grid-row-end:1;

	  -ms-grid-column: 1;

	  -ms-grid-column-span: 2;

	  -ms-grid-row:1;

	  -ms-grid-row-span:1;

}

.home .header{

	padding:0;

	padding-bottom:80px;

}



/* BANNERS */



/* Features - Blue */

.f .header{

	background:#000 url('../images/squall-banner_f.jpg') left top no-repeat;

}



/* Frontline Communique - Tan */

.fc .header{

	background:#000 url('../images/squall-banner_fc.jpg') left top no-repeat;

}



/* Underground Update - Green */

.uu .header{

	background:#000 url('../images/squall-banner_uu.jpg') left top no-repeat;

}



/* State It's In - Teal */

.sii .header{

	background:#000 url('../images/squall-banner_sii.jpg') left top no-repeat;

}



/* Resources - Purple */

.r .header{

	background:#000 url('../images/squall-banner_r.jpg') left top no-repeat;

}



/* Factual Reports - Grey */

.grey .header{

	background:#000 url('../images/squall-banner_grey.jpg') left top no-repeat;

}



/* Orange Banner */

.orange .header{

	background:#000 url('../images/squall-banner_orange.jpg') left top no-repeat;

}



/* Red Banner */

.red .header{

	background:#000 url('../images/squall-banner_red.jpg') left top no-repeat;

}



/* Yellow Banner */

.yellow .header{

	background:#000 url('../images/squall-banner_yellow.jpg') left top no-repeat;

}



.header .necessity{

	padding-left:16px;

	padding-bottom:4px;

}

.header .menu-button {

    display:none;

}

.necessity{

    display: inline-block;

	vertical-align:middle;

	font-weight:600;

}

.search-container{

	position: relative;

	height: 45px;

	background-color: #000;

	display:inline-block;

	padding-left:16px;

	vertical-align:middle;

	padding-top:5px;

}

.nav .search-container{

	display:none;

}

.header .search-container{

	display:inline-block;

}

#searchsquall{

	height:30px;

	width:200px;

	border-radius:3px;

	background:#eee;

	border:none;

	box-shadow: inset 3px 2px 5px 0px rgba(50, 50, 50, 0.7);

	padding-left:10px;

}

.search-button{

	width: 30px;

	height: 30px;

	color: #666;

	background:#666 url('../images/search.png') center center no-repeat;

	background-size:20px;

	border:none;

	display:inline-block;

	vertical-align:middle;

	margin-left:5px;

	border-radius:3px;

}

.nav{

	/*

	width:291px;

	padding:18px;

	margin:18px;

	margin-left:0;

	float:left;

	border-right:1px solid #c4c4c4;

	padding-top:0;*/

	grid-column-start: 1;

	  grid-column-end: 1;

	  grid-row-start:2;

	  grid-row-end:5;

	  -ms-grid-column: 1;

	  -ms-grid-column-span: 1;

	  -ms-grid-row:2;

	  -ms-grid-row-span:5;

	  padding:18px;

	margin:18px;

	margin-left:0;

	border-right:1px solid #c4c4c4;

	padding-top:0;

}



.nav p {

	font-size: 0.98em;

	line-height: 1.4em;

}



.nav ul{

	list-style:none;

	font-size: 0.98em;

	padding:0;

}



.nav ul li {

	margin-bottom: 0.7em;

	line-height: 1.4em;

	margin-left: 8px;

}







.lights.on, .dark .lights.off{

	display:none;

}

.dark .lights.on{

	display:inline;

}

.twitter-timeline{

	min-height: 200px;

	border: 1px solid #c4c4c4 !important;

}

.twit.d, .dark .twit.l{

	display:none;

}

.dark .twit.d, .twit.l{

	display:block;

}

.socials{

    padding-top:10px;

    text-align:center;

    margin-left:-10px;

}

.socials a{

    padding:10px;

}

#notes {

   	font-size: 0.8em;

	line-height: 70%;

/*	margin-left: 15px; */

	margin-bottom: 20px;



}

a, .style2 {

/*	color: #FF3300;  */

	color: #205aa4;

	text-decoration: none;

	font-weight: 700;

	letter-spacing:-0.03em;

}



/* mouse over link */

a:hover {

/*  color: #FFAFA2;   */

	color: #8dbffe;

	text-decoration: none;

}	

.nav a, .dark .nav a {

	color: #FF3300;

}

.nav a:hover, .dark .nav a:hover {

	color: #FFAFA2;

}

.dark a, .dark .style2 {

	color: #8dbffe;

	text-decoration: none;

	font-weight: 800;

}

.dark a:hover {

/*  color: #FFAFA2;   */

	color: #8dffff;

	text-decoration: none;

}





.article{

	background:#ffffff;

	max-width:650px;

	padding:20px;

	margin:18px 0;

	padding-top:0;

	grid-column-start: 2;

	  grid-column-end: 2;

	  grid-row-start:2;

	  grid-row-end:5;

	  -ms-grid-column: 2;

	  -ms-grid-column-span: 1;

	  -ms-grid-row:2;

	  -ms-grid-row-span:5;

}

.dark .article{

	background:#03242d;

}



p, ul, ol, td {

	padding-top:7px;

	padding-bottom:7px;

	font-size: 1em;

	line-height:170%;

	font-kerning: normal;

	letter-spacing: -0.01em;

}

p + ul {

    margin-top: -1px;

}

p.style2{padding-bottom:0;}

h6, h4{

	padding-top:5px;

	padding-bottom:5px;

}



/* FORMATTING FOR ARTICLES */

/* date of publication */

.style3 {

	border-bottom: 0.02px solid lightgrey;

	border-top: 0.02px solid lightgrey;

	font-family: 'Inter', sans-serif;

	letter-spacing: -0.01em; 

	font-size: 0.8em;

	margin-top: 3px;

	margin-bottom: 10px;

}

/* photo caption */

.style4 {

	font-size: 0.7em;

	line-height:130%;

}

/* subhead - first paragraph */

.style5 {

	font-size: 1em;

	font-weight:500;

	line-height:170%;

}

/* article strapline */

.style6 {

	/*padding-top:5px;*/

	padding-bottom:17px;

	font-size: 1.15em;

	font-weight:500;

	/* letter-spacing: -0.02em; 

	font-kerning: normal;*/

	line-height:170%;

	font-family: 'Open Sans', sans-serif;

}



/* blurb strapline - or second part of a headline */

.style8 {

	font-size: 1.25em;

	font-family: 'Inter', sans-serif;

	letter-spacing: -0.04em; 

	line-height:150%;

	font-weight: 600;

	padding-bottom:6px;

	/*padding-top:5px;*/

}

/* Med-Small font for secondary/ancilliary menuing */

.style7 {

	font-size: 0.82em;

	line-height:170%;

}



/* article pre-category - eg - news & busyness */

.style9 {

	border-bottom: 0.02px solid lightgrey;

	font-weight: 600;

	font-style: italic;

	font-size: 1.1em;

	font-family: 'DM Serif Text', serif;

	margin-bottom: 20px;

	/*padding-left: 10px;*/



}



.style_used_link {

	color:#8dbffe;

	font-weight: 700;

	

}



/* Links Div */

.links {

	margin-top:25px;

	line-height: 155%;

}



/* Links Div - Paragraph Tag formatting */

.links p {

	margin-left:25px;

	font-size: 0.9em;

	margin-bottom: 0px;

	letter-spacing: normal;

	

}





/* Links Div - Styling for "Related Articles & Links" Title */

.links .style10 {

	font-family: 'Inter', sans-serif;

	font-weight: bold;

	letter-spacing: -0.01em; 

	font-size: 1em;

	padding-left: 9px;

	background-color: #EBF5FB;

	/*letter-spacing: 1px;*/

  	line-height: 160%; 

	color: black;

	padding-top:4px;

	padding-bottom:2px;

	border-bottom: 1px solid #3a89d2;

	margin-left:0px;

	margin-bottom: 4px;

	margin-top: 7px;

}



/* Wayback Machine Text in Links */

.links .wbm 	{

	/*margin-top: -10px;*/

	font-size: 0.8em;

	font-weight: bold;

	font-style: italic;

	color: red;

}



/* Wayback Machine Text in Article */

.wbm2 	{

	/*margin-top: -10px;

	font-size: 0.70em;

	font-style: italic;*/

	font-weight: bold;

	color: red;

}



/* Footer Div */

.footer {

border-top: 0.5px solid black;

margin-top:28px;

}





/* FORMATTING FOR SQ&A */

.questions {

	margin-top: 10px;

	color: #A0000B;

}



.answers {

	margin-left: 20px;

}



blockquote-sqa { 

	display: block;

	margin-top: 1.1em;

	margin-bottom: 1.1em;

	margin-left: 45px;

	margin-right: 45px;

	font-weight:400;

	font-size: 1.2em;

	line-height:150%;

	font-family: 'Inter', sans-serif;

	letter-spacing: -0.01em;

	padding: 10px 0;

	border-bottom: 1px solid black;

	border-top: 1px solid black;

}



/* Indent Paragraph */

.tab30 { 

	margin-left: 30px;

 }

.tab60 { 

	margin-left: 60px;

 }



/* H STYLES */

h1 {

	font-size: 2.2em;

	font-family: 'Inter', sans-serif;

	letter-spacing: -0.04em; 

	font-weight: 600;

	line-height:150%;

	padding-bottom:7px;

}

h2 {

    font-size: 1.5em;

    font-family: 'Inter', sans-serif;

	letter-spacing: -0.03em; 

	/*font-weight: 900;*/

	font-weight: 600;

	line-height:150%;

    padding-bottom:10px;

    padding-top:8px;

}

h3 { 

	font-size: 1.3em;

    font-family: 'Inter', sans-serif;

	letter-spacing: -0.03em; 

	font-weight: 600;

	line-height:150%;

	padding-bottom:5px;

    padding-top:8px;

}



h4 { 

	font-size: 1.2em;

	font-family: 'Inter', sans-serif;

	letter-spacing: -0.03em; 

	font-weight: 600;

	line-height:150%;

	padding-bottom:5px;

	padding-top:8px;

}



h5 {  font-size: 0.7em;

}



h6 {  font-size: 0.7em;

}



/* -- PHOTO PLUS CAPTION -- */



.imageHolder {

	float:right;

	margin: 0px 0px 10px 15px;

	display: inline-table;

	border: 1px solid gray;

	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);

}

.imageHolder img{

	display:block;

}



.imageHolder .caption {

	font-family: 'Tight', sans-serif;

	font-size: 0.8em;

	text-align:left;

	padding: 7px;

	line-height:150%;

	letter-spacing: -0.02em; 

	caption-side: bottom;

	background-color: #FFF;

	border: 1px solid gray;

	/*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);*/

}



.imageHolder-full-width {

	/*float:right;*/

	margin: 0px 0px 20px 0px;

	display: block;

	border: 1px solid gray;

	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);

}

.imageHolder-full-width img{

	display:block;

}



.imageHolder-full-width .caption {

	font-family: 'Inter', sans-serif;

	font-size: 0.8em;

	text-align:left;

	letter-spacing: -0.02em; 

	padding: 7px;

	line-height:150%;

	caption-side: bottom;

	background-color: #FFF;

	/*border: 0.5px solid gray;

	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);*/

}





.imageHolderShadowBorder {

	float:right;

	margin-left:15px;

	margin-bottom: 5px;

	border:1px solid black;

	box-shadow:5px 5px 5px gray;

}

f

 .imageHolderShadowBorder .caption {

	font-size: 0.7em;

	text-align:center;

	margin-left:10px;

	line-height:130%;

	/*margin-bottom:5px;*/

} 



/* IMAGES USING 'FIGURE' */



/*

figure {

float: right;

display: block;

/*display: inline-table;*/

border: 1px solid gray;

margin: 0;

box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);

font-size: 0.7em;

line-height:130%;

} 



/*

figcaption {

display: table-caption;

caption-side: bottom;

font-size: 0.7em;

line-height:130%;



}

*/



/* BACK ISSUE LIST DIVS */



.backissue1 {

	border-bottom: 1px solid black;

	padding: 20px 20px;

	margin: 20px 0px;

}



.imageHolderIssue {

	float:right;

	margin-left:10px;

	border:1px solid black;

	box-shadow:5px 5px 5px grey;

}



 .imageHolderIssue .caption {

	font-size: 0.7em;

	text-align:center;

	margin-left:10px;

	/*margin-bottom:5px;*/

} 



.imageHolder160 {

	float:right;

	margin-left: 15px;

	margin-bottom: 10px;

	border:1px solid black;

	box-shadow:5px 5px 5px grey;

}





/* -- Horizontal Line -- */

hr {

border-top: 0.1px solid #C4C4C4;

}



/* BOX AND BLOCKQUOTE FORMATTING */



blockquote { 

	display: block;

	margin-top: 1.1em;

	margin-bottom: 1.1em;

	margin-left: 45px;

	margin-right: 45px;

	font-weight:400;

	font-size: 1.2em;

	line-height:150%;

	font-family: 'Inter', sans-serif;

	letter-spacing: -0.02em;

	padding: 10px 0;

	border-bottom: 1px solid black;

	border-top: 1px solid black;

}





.textbox {

	width: 100%;

	border: 1px solid #C4C4C4;

	/*background-color:#F2F2F2;*/

	padding: 10px 25px 0px 25px;

	margin: 15px 0px 15px 0px;

	box-shadow: 5px 5px 3px #DBDBDB;

	float: left;

}



.textbox2 {

	width: 100%;

	border: 1px solid black;

	/*background-color:#F2F2F2;*/

	padding: 15px 25px 15px 25px;

	margin: 20px 0px 20px 0px;

	float: left;

}



.textbox3 {

	width: 100%;

	border-left: 1px solid #E8E8E8;

	border-top: 1px solid #E8E8E8;

	/*background-color:#F2F2F2;*/

	padding: 10px 12px;

	margin: 15px 0px;

	float: left;

}





/* FEATURE BOXES AT TOP OF /f/index.html */



.feature_box {

  width: 190px;

  border: 1px solid #000;

  /*background-color:#F2F2F2;*/

  padding: 10px 10px;

  margin: 15px 5px;

  box-shadow: 5px 5px 3px #DBDBDB;

  float: left;

  

}



.feature_box-image {

	max-height: 100%;

    max-width: 100%;

	



}



@media (min-width: 1001px){

	/* RESPONSIVE */

	.imageHolder .caption {

		 display: table-caption;

	 }

	.necessity{

		width: 680px;

	}

}

@media (max-width: 768px){

	.wrapper{

		display: grid;

		width:100%;

		max-width:100%;

		grid-template-rows: auto;

		grid-template-columns:1px 1fr;

		display: -ms-grid;

		-ms-grid-rows: auto;

		-ms-grid-columns:1px 1fr;

		justify-items:center;

	}

	.header{

		grid-column-start: 2;

		grid-column-end: 2;

		grid-row-start:1;

		  grid-row-end:1;

		  -ms-grid-column: 2;

		  -ms-grid-column-span: 1;

		  -ms-grid-row:1;

		  -ms-grid-row-span:1;

	}

	.header .menu-button {

		position: absolute;

		bottom:13px;

		right: 10px;

		display: block;

		width: 33px;

		height: 21px;

		background-image: url(../images/menu.png);

		background-size: contain;

	}

	.header .menu-button.shown {

		background-image: url(../images/closemenu.png);

	}

	.necessity{

		line-height:40px;

		width: auto;

	}

	.search-container{

		position:relative;

		width: 100%;

		position: relative;

		height: 30px;

		background-color: #000;

		display:block;

		padding-left:16px;

	}

	@keyframes slide-menu {

	  0%   {width:0;}

	  50%  {width:80%;}

	  100% {width:90%}

	}

	@keyframes slide-menu-close {

	  0%   {width:90%;}

	  50%  {width:10%;}

	  100% {width:0}

	}

	.nav{

		position:absolute;

		display:none;

		width:90%;

		margin:0;

		top:146px;

		float:none;

		border-right:none;

		animation-name: slide-menu;

		animation-duration: 0.5s;

		overflow-x:hidden;

		z-index:2;

		background:#aaa;

		box-shadow: 3px 1px 5px 0px rgba(50, 50, 50, 0.7);

		border-top-right-radius:5px;

		border-bottom-right-radius:5px;

		margin-top:10px;

		grid-column-start: 2;

		grid-column-end: 2;

		grid-row-start:1;

		grid-row-end:2;

		-ms-grid-column: 2;

		-ms-grid-column-span: 1;

		-ms-grid-row:2;

		-ms-grid-row-span:1;

	}

	.dark .nav{

		background:#666;

	}

	.nav.shown{

		display:block;

		width:90%;

	}

	.nav ul li{

		/*display:inline;*/

		padding-right:18px;

	}

	.twitter-timeline{

		display:none !important;

	}

	.article{

		margin:0;

		width:94%;

		/*max-width:94%;*/

		min-width:0;

		padding:3%;

		grid-column-start: 2;

	  grid-column-end: 2;

	  grid-row-start:3;

	  grid-row-end:3;

	  -ms-grid-column: 2;

	  -ms-grid-column-span: 1;

	  -ms-grid-row:3;

	  -ms-grid-row-span:1;

	}

	.imageHolder {

		float:none;

		margin-left:0;

		display: block;

		border: none;

		box-shadow: none;

	}

	.imageHolder img{

		display:block;

		width:100%;

		height:auto;

	}

	.header .search-container, #carousel{

		display:none;

	}

	.nav .search-container{

		display:block;

		background:none;

		padding-left:0;

		padding-top:10px;

		height:auto;

	}

	.header_logo {

		top: 143px;

	}

}

@media (max-width: 480px){

.nav{

		top:180px;

	}

	.home .nav{

		top:330px;

	}

}

/*old mobiles*/

@media (max-width: 320px){

	.header_logo {

		top: 133px;

		width:80%;

		height:auto;

	}

	.necessity {

		font-size:13px;

	}

}