body {
	font-family: "Verdana", sans-serif;
	font-size: 13px;
}

.articleHeader{
	display: block;
}

.collapsible {
    background-color: #000066;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible:hover {
    background-color: #000099;
}

.linker{
	display: inline-block;
	font-size: 16px;
}

figure>iframe{
	display: block;
	margin:auto;
}

.sidenav {
    height: 100%;
    width: 260px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #113;
    overflow-x: hidden;
    padding-top: 20px;
	color: #818181;
}

a.fref {
	text-decoration: underline dotted;
	font-weight: bold;
}

a.tref {
	text-decoration: underline dotted;
	font-weight: bold;
}

a.iref {
	text-decoration: underline dotted;
	font-weight: bold;
}

a.side {
    padding: 1px 2px 1px 2px;
    text-decoration: none;
    color: #818181;
    display: block;
	font-size: small;
}

a.side:hover {
    color: #f1f1f1;
}

div.main{
	margin-left: 260px;
	max-width: 900px;
}

figure {
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	max-width: 700px;

}

figcaption {
	margin-top: 5px;
	text-align: left;
	font-size: smaller;

}

figcaption::before {
	content: attr(data-content); 
	font-weight: bold;
	float: left;
	margin-right: 5px;
}

blockquote{
	margin:20px;
}

.contact-block{
	display:inline-block;
	vertical-align: top;
}

figure>img {
	display: block;
	margin: auto;
	max-height: 500px;
	max-width: 640px;
}

img.single{
	max-width: 400px;
}

.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

@media only screen
{
	.body{
		background-color:#eef;
	height:100vh;
	overflow:auto;
	scroll-behavior:
	smooth !important;
	}
}

button>a
{
	visibility: hidden;
}
button:hover>a{
	visibility: visible;
}

h3>a
{
	visibility: hidden;
}
h3:hover>a{
	visibility: visible;
}

h4>a
{
	visibility: hidden;
}
h4:hover>a{
	visibility: visible;
}

.content {
    padding: 0 18px;
    overflow: hidden;
	height: 0;
    transition: height 0.2s ease-out;
    background-color: #eef;
}

a>i{
	color: #00f;
}

a>i:hover{
	color: inherit;
}

.notransition{transition: none !important;}

footer {
    background-color: #e6f2ff;
	padding: 18px;
}

.header {
    padding: 0 60px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
	background-color: #000066;
    color: white;
	font-size: smaller;
}

p {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  }

article>h3 {
	font-size: 18px;
	font-weight: bold;
	
	}
article>h4{
	font-size: 16px;
	font-weight: bold;
}
article>h4:after{
	/*content: attr(data-time);*/
	float: right;
	font-weight: normal;
}
article.subject>h3{
	padding: 5px;
	background-color: #eef;
}

iframe {
	border-style: none;
	float: none;
}

.l2 {
    background-color: #fff;
}
.l3 {
    background-color: #eef;
}

.l4 {
    background-color: #fff;
}

.collapsible2:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}



.collapsible2 {
    background-color: #000066;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

div.contact{
	display:inline-block;
	padding:10px;
}

.active, .collapsible2:hover {
    background-color: #000099;
}

.collapsible3:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.collapsible3 {
    background-color: #000066;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible3:hover {
    background-color: #000099;
	
}

.collapsible4:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}



.collapsible4 {
    background-color: #000066;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible4:hover {
    background-color: #000099;
}


.old{
	border-right:6px solid #f00;
}
.pending{
	border-right:6px solid #ff0;
}

.proof{
	border-right:6px solid #008080;
}

.approved{
	border-right:6px solid #0f0;
}

.active:after {
    content: "\2212";
}


div#toc ul {
  list-style-type: none;
  padding-left: 10px;
}


.printtoc{
	display:none;
}

.printtoc ul{
	list-style-type: none;
}
.blankpage{
	display:none;
}

button:target {
  animation: highlight 1s ease;  
}


/* Style all font awesome icons */
.fa {
    padding: 5px;
    font-size: 12px;
    width: 22px;
    text-align: center;
    text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
    opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
    background: #3B5998;
    color: white;
}

/* Twitter */
.fa-twitter {
    background: #55ACEE;
    color: white;
}


@keyframes highlight {
  0% { background-color: orange; }
  100% { }
}