/*===============================================================*/
/*= style.css											   	=*/
/*===============================================================*/
/*= 1: Elements													=*/
/*= 2: Typography												=*/
/*= 3: Containers												=*/
/*= 4: Sections													=*/
/*= 5: Page														=*/
/*= 6: Media queries											=*/
/*===============================================================*/

/*===============================================================*/
/*= 1: Elements													=*/
/*===============================================================*/
html
{
	font-size: 62.5%;
	background: url(../images/sunrays.png) no-repeat center center fixed;
	background-size: cover;
}

body
{
	font-family: 'Open Sans', sans-serif;
	color:       #0b0c0c;
	line-height: 2.6em;
}

/*===============================================================*/
/*= 2: Typography												=*/
/*===============================================================*/

.font-light
{
	font-weight: 300;
}

small,
.font-small
{
	font-size: 1.4rem;
}

/*===============================================================*/
/*= 3: Containers												=*/
/*===============================================================*/

.site-super-container
{
	font-size: 1.8rem;
	min-height: 100%;  
}

.site-container
{
	max-width: 960px;
  	width:     100%;     

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;

	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;

	min-height: 100vh;
}

.page-content
{
  	background-color: white;

	-webkit-box-flex: 1;
	-webkit-flex: auto 1;
	    -ms-flex: auto 1;
	        flex: auto 1;

	padding: 0 1.8rem 1.8rem;

	overflow-wrap: break-word;
	overflow: hidden;
}

.page-content article
{
	overflow: hidden;
	max-width: 100%;
}

.page-content article:first-of-type
{
	margin-top: 1.8rem;
}

/*===============================================================*/
/*= 4: Sections													=*/
/*= 4.1: Site Header											=*/
/*===============================================================*/
.site-header
{
	background-color: black;
	/*position: fixed;
	min-width: 960px;*/
}

.site-header-nav
{
	color: white;
	font-size: 1.6rem;
}

.site-header-mnav
{
	display: none;
}

.nav-element
{

	-webkit-box-flex: 1;
	-webkit-flex: 1 11rem;
	    -ms-flex: 1 11rem;
	        flex: 1 11rem;
	min-height: 6.3rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	text-align: center;
}

.nav-element > span,
.nav-link > a
{
	-webkit-box-flex: 1;
	-webkit-flex: 1 10rem;
	    -ms-flex: 1 10rem;
	        flex: 1 10rem;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: center;
	-webkit-justify-content: center;
  	-ms-flex-pack: center;
  	justify-content: center;

	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.nav-link
{
	-webkit-transition: background 0.2s ease;
	        transition: background 0.2s ease;
	background: transparent;
}

.nav-element-active
{
	background-color: white;
	color: black;
	/*-webkit-box-ordinal-group: 2;
	-webkit-order: 1;
	    -ms-flex-order: 1;
	        order: 1;*/
}

.nav-link:hover
{
	background: orange;
	color: black;
}

#site-logo
{
	text-shadow: 0 0.2rem 0 rgba(255, 255, 255, 0.5);
	font-weight: 700;
	font-size: 2.4rem;
}

#site-logo::before
{
	margin-right: 0.9rem;
	content: url("../favicon-32x32.png");
}

/*===============================================================*/
/*= 4.2: Page Header											=*/
/*===============================================================*/


.page-header
{
	margin-top: 0.9rem;
}

.page-breadcrum
{
	font-size: 1.4rem;
	margin-bottom: 1.8rem;
	padding: 0.45rem;
	border-bottom: 1px solid rgb(244, 244, 244);
}

.page-breadcrum > ul 
{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.page-breadcrum > ul >li::after
{
	content: "\a0\bb\a0";
}

.page-breadcrum > ul >li:last-child::after
{
	content: none;
}


/*===============================================================*/
/*= 4.3: Site Footer											=*/
/*===============================================================*/

.site-footer
{
	border-top: 0.1rem dotted gray;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.82);
	padding: 0.9rem;
	color: rgb(131, 131, 131);
	line-height: 2.0rem;
}

.site-footer a
{
	-webkit-transition: border-bottom 0.2s ease;
	        transition: border-bottom 0.2s ease;
	-webkit-transition: top 0.2s ease;
	        transition: top 0.2s ease;

	position: relative;
	top: 0;

	color: #d8262d;
	border-bottom: 0.1rem solid rgba(216, 38, 45, 0.23);
}

.site-footer a:hover,
.site-footer a:active
{
	/*-webkit-transition: all 0.2s ease;
	        transition: all 0.2s ease;*/

	position: relative;
	top: -0.3rem;

	border-bottom: 0.4rem solid rgba(216, 38, 45, 0.23);
}

.site-footer a::after
{
	content: '\00a0\2192';
}

/*===============================================================*/
/*= 5: Page 													=*/
/*===============================================================*/
.page-content div.index-box
{
	-webkit-transition: all 0.3s ease;
	        transition: all 0.3s ease;
	-webkit-box-flex: 1;
	-webkit-flex: 1 100px;
	    -ms-flex: 1 100px;
	        flex: 1 100px;
	border: 0.1rem solid rgb(215, 215, 215);
	margin: 0.9rem;
	padding: 0.9rem;
}

.page-content div.index-box:hover
{
	-webkit-box-flex: 1;
	-webkit-flex: 1 150px;
	    -ms-flex: 1 150px;
	        flex: 1 150px;
}

.page-content h3
{
	font-size: 2.0rem;
	font-weight: 300;
}

.page-content a
{
	-webkit-transition: border-bottom 0.2s ease;
	        transition: border-bottom 0.2s ease;
	-webkit-transition: top 0.2s ease;
	        transition: top 0.2s ease;

	position: relative;
	top: 0;

	color: #d8262d;
	border-bottom: 0.1rem solid rgba(216, 38, 45, 0.23);
}

.page-content a:hover,
.page-content a:active
{
	/*-webkit-transition: all 0.2s ease;
	        transition: all 0.2s ease;*/

	position: relative;
	top: -0.3rem;

	border-bottom: 0.4rem solid rgba(216, 38, 45, 0.23);
}

.page-content a::after
{
	content: '\00a0\2192';
}

.page-content p,
.page-content h2,
.page-content div.table-container
{
	margin-bottom: 1.8rem;
}

.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6
{
	margin-bottom: 0.45rem;
}

.page-content div,
.page-content pre,
.page-content fieldset
{
	overflow: auto;
}

.page-content div.table-container
{
	box-shadow:         inset 0px 0px 21px 0px rgba(50, 50, 50, 0.33);
}

.page-content pre
{
	background-color: rgba(147,128,108,.1);
	padding: 1.8rem;
	word-wrap: normal;
}

.page-content fieldset
{
	border: 0.3rem solid rgba(147,128,108,.4);
	word-wrap: normal;
}

.page-content fieldset > div
{
	margin-bottom: 0.9rem;
}

.page-content fieldset > div:last-child
{
	margin-bottom: 0;
}

.page-content fieldset span
{
	-webkit-box-flex: 0;
	-webkit-flex: 0 1 100px;
	    -ms-flex: 0 1 100px;
	        flex: 0 1 100px;
    font-size: 1.4rem;
    padding: 0 0.9rem;
}

.page-content textarea
{
	resize: vertical;
	width: 10rem;
}

.page-content fieldset input,
.page-content fieldset textarea
{
	padding: 0.9rem;
	border: 0.2rem solid rgba(147,128,108,.1);
	background-color: rgba(147,128,108,.1);
	outline: none;
	-webkit-box-flex: 1;
	-webkit-flex: 1 0 auto;
	    -ms-flex: 1 0 auto;
	        flex: 1 0 auto;
    font-size: 100%;
    font-family: 'Open Sans', sans-serif;
}

.page-content fieldset input:hover,
.page-content fieldset input:active,
.page-content fieldset input:focus,
.page-content fieldset textarea:hover,
.page-content fieldset textarea:active,
.page-content fieldset textarea:focus
{
	padding: 0.9rem;
	border: 0.2rem solid gray;
	background-color: white;
	outline: none;
}

.page-content fieldset button
{
	-webkit-transition: all 0.2s ease;
	        transition: all 0.2s ease;

	padding: 0.9rem;
	border: 0.2rem solid orange;
	background-color: transparent;
	color: orange;
	font-size: 100%;
	outline: none;
}

.page-content fieldset button:hover,
.page-content fieldset button:active,
.page-content fieldset button:focus
{
	padding: 1.4rem;
	border: 0.2rem solid orange;
	background-color: orange;
	color: white;
	cursor: pointer;
	font-size: 110%;
}

.page-content table
{
	width: 100%;
	background-color: rgba(147,128,108,.1);
	/*margin-bottom: 1.8rem;*/
}

.page-content table tbody > tr
{
	border-bottom: 0.2rem solid white;
	border-top: 0.2rem solid white;
}

.page-content table tbody > tr:nth-child(odd)
{
	background-color: rgba(147,128,108,.1);
}

.page-content table tbody > tr:first-child
{
	border-top: none;
}

.page-content table tbody > tr:last-child
{
	border-bottom: none;
}

.page-content table tr
{
	height: 5rem;
}

.page-content table td
{
	vertical-align: baseline;
}

.page-content table th,
.page-content table td
{
	border-left: 0.2rem solid white;
	border-right: 0.2rem solid white;
	min-width: 20rem;
	padding: 0.45rem;
	
}

.page-content table td.f-row
{
	border: none;
}

.page-content table tbody > tr th:first-child,
.page-content table tbody > tr td:first-child
{
	border-left: none;
}

.page-content table tbody > tr th:last-child,
.page-content table tbody > tr td:last-child
{
	border-right: none;
}

.page-content table p
{
	margin: 0;
}

.page-content .gdt-cr,
.page-content .gdt-rp
{
	font-family: "Lucida Console", Monaco, monospace;
	padding: 0.45rem;
}

.page-content .gdt-cr
{
	background-color: orange;
}

.page-content .gdt-cr::after
{
	content: '\a0 cr.';
}

.page-content .gdt-rp
{
	background-color: mediumaquamarine;
}

.page-content .gdt-rp::after
{
	content: 'RP';
}

.page-content .gdt-effect
{
	color: green;
	border: 0.1rem solid rgba(0, 128, 0, 0.33);
	padding: 0.2rem;
	margin: 0.1rem;
}

.page-content article ul,
.page-content article ol
{
	list-style: inside;
	margin-left: 1.8rem;
	margin-right: 1.8rem;
}

.page-content img
{
	width: 100%;
}

.page-content table img
{
	width: inherit;
}

/*===============================================================*/
/*= 6: Media queries											=*/
/*===============================================================*/

@media all and (max-width: 960px)
{
	html
	{
		background: none;
	}

}

@media all and (max-width: 480px)
{
	.nav-element
	{
		-webkit-box-flex: 1;
		-webkit-flex: 1 0 100%;
		    -ms-flex: 1 0 100%;
		        flex: 1 0 100%;
		border-top: 0.1rem solid rgba(255, 255, 255, 0.3);
		min-height: 4.2rem;
	}

	.nav-link-hide
	{
		display: none;
	}

	.nav-link > a
	{
		display: block;
	}

	.nav-link > a::after
	{
		display: block;
		content: attr(title);
		font-size: 1.2rem;
	}

	.nav-element:first-child
	{
		border-top: none;
		cursor: pointer;
	}

	.nav-element:first-child::after
	{
		content: attr(data-content);
		font-size: 1.4rem;
		margin-right: 0.9rem;
		position: relative;
		color: rgba(255, 255, 255, 0.7);
	}
}