/*******************************/
/* REPORTS TEMPLATE STYLESHEET */
/*******************************/

html, body {
	margin:0;
	padding:0;
}

html {
	font-size:17px;
}

body {
    font-size:1rem;
	font-family: Arial, Helvetica, san-serif;
	color: #222;
	background-color: #222;
	background-image: url('https://www.citizeninvestigationteam.com/1/CC/Pentagon-bg9.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size: cover;
}


/************************/
/*     HEADER + NAV     */
/************************/

header {
	position:fixed;
	top:0px;
	/* background-color:#000;
	opacity:0.85;
	filter:Alpha(opacity=85); */
	background-color:rgba(0,0,0,1);
	color:#fff;
	width:100%;	
	text-align:center;
	z-index:999;
}

header nav {
	display:block;
	font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1rem;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	max-width:840px;
}

header nav #banner-lg {
	float:left;
	font-size:1.4rem;
	color:red;
	margin-top:2px;
	font-style:italic;
	max-width:400px;
}

header nav #banner-lg span {
	float:left;
	margin-right:15px;
	margin-left:10px;
}

header nav #banner-sm {
	display:none;
	float:left;
	font-size:2rem;
	color:red;
	margin-top:0px;
	font-style:italic;
}

header nav #banner-sm span {
	float:left;
	margin-right:20px;
	margin-left:20px;
}

/*----Menu Button-----*/
header #menu-button {
	display: none;
	float: right;
	margin:5px 20px 5px;
	cursor:pointer;
	font-size:2rem;
	color:#fff;
	transition:color 0.4s;
}

header #menu-button:hover {
	color:#777;
}

/*----Menu Items----*/
header nav ul  {
	float:right;
	margin:0;
	padding:0;
}

header nav ul li {
	list-style: none;
	float:left;
}

header nav ul li a {
	display:block;
	padding:5px 12px 5px 12px;
	margin:0;
	transition:color 0.4s;
	text-decoration:none;
}

header nav ul li a:visited,
header nav ul li a:link  {
	color: white;
}

header nav ul li a:active,
header nav ul li a:hover {
	color: #777;
}


/********************************/
/*  MAIN WRAPPER + CONTENT AREA */ 
/********************************/

div#main-wrapper {
	max-width: 750px;
	min-height:750px;
	border-radius:20px;
	background-color:#fff;
	padding:10px 45px 45px 45px;
	margin:60px auto 25px;
	font-size:1rem;
}


article#content {
	margin-top:1.5rem;
}
article#content p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}


h1 { /* main headline */
  font-size: 2.0rem;
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  font-weight: bold;
  display:block;
  color:#111;
  line-height:1.25em;
  margin-top:0px;
  margin-bottom:5px;
  padding-bottom:6px;
  /* border-bottom:3px solid #111; */
}

h2 { /* subheading */
  font-size: 1.5rem;
  font-weight: bold;
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  display:inline-block;
  margin-top:0px;
  margin-bottom:5px;
  line-height:1.2em;
  color:#111;
}

h3 { /* underlined subheading */
  font-size: 1.5rem;
  font-weight: bold;
  color:#000;
  width:100%;
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  line-height:110%;
  padding:5px 0 2px 0px;
  display: inline-block;
  margin-bottom:5px;
  border-top: 1px black transparent;
  border-bottom:1px #999 solid;
  
}

h5 { /* forum post header */
  background-color:#000;
  color:#fff;
  padding:5px 7px;
  margin-top:50px;
  font-size:0.8rem;
  font-weight:bold;
  border-radius:3px;

}

h6 { /* small grey dateline */
  font-family:'Oswald';
  font-size:0.85rem;
  color: #999;
  display:block;
  margin-top:5px;
  margin-bottom:30px;
  font-weight:normal;
  text-transform:uppercase;
  text-align:left;
  padding:3px;
}
h6 a,
h6 a:hover,
h6 a:active,
h6 a:link,
h6 a:visited {
	font-weight:normal;
	transition:color 0.3s;
}
h6 a:link, h6 a:visited {
	color:#999;
}
h6 a:hover {
	color:#666;
	border-bottom:none;
}

.imgleft {
  float: left;
  vertical-align: text-top;
  padding: 5px;
  margin: 0 20px 5px 0px;
  width: auto;
  height: auto;
  border: 1px #CCC solid;
  text-align: center;
  font-size:80%;
  font-weight: bold;
  color: black;
}

.imgright {
  float: right;
  vertical-align: text-top;
  padding: 8px;
  margin: 0 0px 5px 20px;
  width: auto;
  height: auto;
  background-color: auto;
  border: 1px #CCC solid;
  text-align: center;
  font-size:80%;
  font-weight: bold;
  color: black;
}

.dateline {
  font-size:80%;
  color: #666;
 }
  

#status {
	display:none;
	background-color:#000;
	color:#fff;
	text-align:center;
	width:50px;
	height:auto;
	font-size:1rem;
	position:fixed;
	top:100px;
	right:0px;
}


/********************************
/*        MEDIA QUERIES        */
/*******************************/

@media screen and (max-width: 840px) {

	div#main-wrapper {
		border-radius:0px;
		margin-top:80px;
	}
	
	/* Change Citizen Investigation Team to CIT */
	header nav #banner-lg {	display:none; }
	header nav #banner-sm { display:block; }
	
	/* Fix menu alignment since CIT logo is larger */
	header nav ul li a {
		padding: 12px 12px;
	}

}

@media screen and (max-width: 600px) {

	div#main-wrapper {
		padding:10px 25px 15px 25px;
		border-radius:0px;
		margin-top:40px;
		margin-bottom:
	}
	
	h1 {
		margin-bottom:3px;
	}
	h6 {
		margin-top:0px;
		margin-bottom:20px;
	}
	
	header nav ul.nav-expanded {
		display:block;
	}
	
	/* Show the menu button, which is hidden on larger screens */
	header #menu-button {
		display: block;
	}
	
	/* Hide the nav menu until the menu button is tapped */
	header nav ul {
		display:none;
	}
	
	/* Increase nav menu size for easier viewing and make 100% width */
	header nav ul {
		font-size:1rem;
		margin:0;
		width:100%;
		border-width:1px 0px 0px 0px;
		border-color:#333;
		border-style:solid;
	}
	
	/* Give new format to menu items - two col, block, float left */
	
	header nav ul li {
		display:block;
		/* width:49.5%; */
		float:none;
		margin:0;
		border-bottom:1px solid #333;
	}
	
	header nav ul li a {
		font-size: 17px;
		font-weight: normal;
		padding:17px 0;
	}
	
	header nav ul li:nth-child(odd) {
		/* border-right:1px solid #333; */
	}
	
	header nav ul li:nth-child(7) {
		border-bottom:none;
	}
	
	header {
		/* position:relative; */
		top:0px;
		overflow:auto;
		border:none;
	}	
	
}

@media screen and (max-width: 540px) {

	/* Fix proportionality and readability on small screens */
		
	div#main-wrapper { 
		padding:5px 22px 8px 22px;
		border-radius:0px;
	}
	
	h1 {
		font-size:1.6rem;
	}

	html {
		font-size:16px;
	}
	
}