@import url(//fonts.googleapis.com/css?family=Open+Sans);
@import url(//fonts.googleapis.com/css?family=Grand+Hotel);
@import url(//fonts.googleapis.com/css?family=Roboto+Condensed);

html {
	font-size: 13px;
	webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	-o-box-sizing: inherit;
	box-sizing: inherit;
	}

body {
	font: 1em/150% Arial, Helvetica, sans-serif !important;
	background-color: transparent !important;
	padding: 0px !important;
	margin: 8px !important;
	background:url(/images/bg_squared_metal.png) !important;
	}

body:before {
	content: "";
	position: fixed;
	top: -10px;
	left: 0px;
	width: 100%;
	height: 10px;
	z-index: 100;
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
	box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0.500em !important;
	}

p {
	overflow: hidden !important; 
	}

a {
	color: #669;
	text-decoration: none;
	}

a:hover {
	border-bottom: 0.100em dashed red;
	}

h1 {
	font: bold 36px/100% Arial, Helvetica, sans-serif !important;
	}

quote {
	margin: 0.000em 1.500em;
	font-style: italic;
	color: green;
	display: block;
	}

img {
/*	width: 94.5%; 
	width: 96%; */
	width: 100%; 
	height: auto;
	margin: 0.500em;
	}

figure,
figcaption,
section figure,
figure img {
	margin: 0px;
	padding: 0px;
	text-align: center;
	}

/*
figure img {
	width: auto !important;
	}
*/
/* style for responsive figure element */

section figure {
	position: relative;
	}

section figure img {
	max-width: 100% !important; /* to overrule other style */
 	}

section figure span{
	display: inline-block;
	position: relative;
	}

#phpInclude,
pre {
	margin: 0.000em 0.500em;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAFPHaXXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTBCQzhBRTIzQTRCMTFFMEEzRUNCRjJCOUUyN0FBQkQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTBCQzhBRTMzQTRCMTFFMEEzRUNCRjJCOUUyN0FBQkQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MEJDOEFFMDNBNEIxMUUwQTNFQ0JGMkI5RTI3QUFCRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MEJDOEFFMTNBNEIxMUUwQTNFQ0JGMkI5RTI3QUFCRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp7YTNoAAAAiSURBVHjaYsg9/00IIIAY/v//zwAQQGCCiQEIAAIMwUIQAEIjC0S04QNsAAAAAElFTkSuQmCC);
	border: 0.100em dotted #dcdcdc;
	background-color: #f5f5dc;

	}

#phpInclude p,
pre {
	padding: 0.500em;
	font-size: 0.900em;
	}

code {
	font-size: 1.000em;
	color: navy;
/*	border-bottom: 0.100em dotted green; */
	}

pre {
	overflow: hidden;
	}

/*
video,
.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}
*/

.article {
	width: 100%;
	padding: 0.000em;
	margin: 0.500em 0.000em;
	clear: both;
/*	border-top : 0.100em solid #dcdcdc;
	border-bottom : 0.100em solid #dcdcdc;
	background-color: orange; */
}

.column {
	padding: 0.300em;
	
	column-gap: 30px;
	-moz-column-gap: 30px;
	-webkit-column-gap: 30px;

	column-rule: 1px dotted #ccc;
	-moz-column-rule: 1px dotted #ccc;
	-webkit-column-rule: 1px dotted #ccc;

	font-family: 'Open Sans';
	font-size: 0.900em;
	color: grey;
	text-align: justify;

	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	}

.col2 {
	column-count: 2;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	}

.col3 {
	column-count: 3;
	-moz-column-count: 3;
	-webkit-column-count: 3;
}

.column {
	column-count: 3;
	-moz-column-count: 3;
	-webkit-column-count: 3;
	}

#dateuP {border: none; border-top: 0.100em dotted #dcdcdc; clear: both;}
.dateu {font-size: x-small; color: #aaaaaa}
.dateuToTop {float: right; font-size: 1.500em; overflow: auto;}

/*******************************************************
STRUCTURE
********************************************************/

#pagewrap {
	padding: 5px !important;
	max-width: 1050px !important;
	margin: 5px auto !important;
	}

#header {
/*	height: 180px; */
	height: 5.400em !important;
	padding: 0.500em !important;
	background: url(/images/iceshelf_01.jpg) 50% 50% no-repeat;
	color: navy;
	text-shadow: 0.100em 0.100em #ffffff;
	}

#header h1,
#header p {
	margin: 0.000em !important;
	padding: 0.000em !important;
	}

#content {
	width: 74%;
	float: left;
	position: relative;
	}

#content100 {
/*	width: 99%; */
	position: relative;
	}

#content hr,
#content100 hr {
	margin: 0.300em 0.500em 1.000em 0.500em;
	border: none;
	border-bottom: 0.100em solid #dcdcdc;
	clear: both;
}

#menu {
	font-size: 1.200em;
	font-weight: bold;
	color: green;
	}

#menu a {
	color: green;
	text-decoration: none;
	}

#menu a:hover {
	color: green;
	}

#sidebar,
#sidebar_1,
#sidebar_2,
#sidebar_3 {
	width: 25%;
	float: right;
	clear: right;
	}

#sidebar img,
#sidebar_1 img,
#sidebar_2 img,
#sidebar_3 img {
	width: 94%;
	}

#footer {
	clear: both;
	padding: 0.500em;
	}

/*******************************************************
MEDIA QUERIES
********************************************************/
@media screen and (max-width: 1024px) {
	html {
		font-size: 16px;
	} 
}	

/* for 980px or less */

@media screen and (max-width: 900px) {
	
	#pagewrap {
/*		width: 95%; */
	}
	#content {
		width: 69%;
	}
	#sidebar,
	#sidebar_1,
	#sidebar_2,
	#sidebar_3 {
		width: 29%;
	}

}

/* for 700px or less */
@media screen and (max-width: 700px) {

	#pagewrap {
		margin: 5px auto !important;
	}

	#content {
		width: auto;
		float: none;
	}

	#header {
		background: url(/images/sahara-desert.jpg) 50% 50% no-repeat;
		color: white;
text-shadow: none;
	}


	#header,
	#menu {
		height: auto;
	}

	h1 {
		font-size: 30px !important;
	}

	#sidebar,
	#sidebar_1,
	#sidebar_2,
	#sidebar_3 {
		width: auto;
		float: none;
	}

	.column {
		column-count: 2;
		-moz-column-count: 2;
		-webkit-column-count: 2;
	}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	#menu {
		height: auto;
		text-align: center;
	}

	#header {
		display: none;
	}

	#sidebar,
	#sidebar_1,
	#sidebar_2,
	#sidebar_3 {
		display: none;
	}

	.column {
		column-count: 1;
		-moz-column-count: 1;
		-webkit-column-count: 1;
	}
}

/* for 320px or less */
@media screen and (max-width: 340px) {

	#menu {
		text-align: center;
	}

}

/* border & guideline (you can ignore these) */

#content,
#content100,
#menu {
	background: #f8f8f8;
}

#sidebar,
#sidebar_1,
#sidebar_2,
#sidebar_3 {
	background: #f0efef;
}

#header,
#menu,
#content,
#content100,
#sidebar,
#sidebar_1,
#sidebar_2,
#sidebar_3 {
	margin-bottom: 5px;
}

#pagewrap,
#header,
#menu,
#content,
#content100,
#sidebar,
#sidebar_1,
#sidebar_2,
#sidebar_3,
#footer {
	border: solid 0.100em navy;
}

#pagewrap {
	-moz-border-radius: 0.200em;
	border-radius: .200em;
	box-shadow:1px 1px 5px black;
	background: url(/images/bg_old_moon.png);
}

a[href^="http"]::after,
a[href^="https://"]::after,
a[href^="./"]::after {
	content: "";
	width: 11px;
	height: 11px;
	margin-left: 4px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}