/* Common */

body,
button,
input,
select,
textarea {
	font-family: "Helvetica", BlinkMacSystemFont, -apple-system,
		"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
		"Fira Sans", "Droid Sans",
		"Helvetica Neue", "Arial", sans-serif;
	}

html {
	background-color: #4a4a4a;

	font-size: 16px; /*12px*/
	min-width: 200px;
	overflow-x: hidden;
	overflow-y: scroll;
/*	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;*/
/*	text-rendering: optimizeLegibility;*/
	}


/* 'Gazette' post style (Temp) */

@font-face {
	font-family: 'BeckettRus';
	src: url('static/Beckett-Rus.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'Willamette';
	src: url('static/WillametteSF.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	}

.link_post {
	text-decoration: none;
	color: initial;
	}

.link_post:hover {
	background-color: #d7dbc7;
	}

.gazette .post {
	position: relative;
	padding: 0.4rem;
/*
	border-color: gray;
	border-width: 3px;
	border-style: solid;
	border-image: url("static/border-20171215-04.png") 9 9 repeat;
	border-image-width: 9px;
*/

/*	background: #fff1d6;*/
	visibility: visible;
	}

.gazette .headerpost {
	min-width: 10rem;
	text-align: center;
	}

.gazette .p_supertit {
/*	font-family: BeckettRus;*/
	font-family: Helvetica;
	font-size: 2.5rem;
	line-height: 90%;
	margin: 0.8rem 0 0.5rem;
	}
	.gazette .p_supertit > div {
		padding: 0 0.5rem 0 0.5rem;
		display: inline;
		}
	@media (max-width: 768px) {
		.___ {}
		.gazette .p_supertit > div {
			display: block;
			}
		}

.gazette .headerpost .p_supertit {
	font-family: Willamette;
/*	font-size: 8.0rem;*/
	font-size: 6.0rem;
	line-height: 74%;
	}


.gazette .p_tit {
/*	font-weight: 400;*/
/*	text-transform: uppercase;*/
	font-family: Helvetica;
	font-size: 1.5rem;
	line-height: 90%;
	margin: 0.4rem 0 0.2rem;
	}

.gazette .headerpost .p_tit {
/*	font-family: BeckettRus;*/
	font-family: Willamette;
	font-size: 3.0rem;
	line-height: 74%;
	}

.gazette .post_cat {
/*	font-size: .8rem;*/
	color: #4a4a4a;
	text-transform: capitalize;
	text-decoration: underline;
	/* */
	position: absolute;
	bottom: 0.4rem;
	right: 0.4rem;
	}

.gazette .post_perm {
	color: #4a4a4a;
	text-decoration: underline;
	position: absolute;
	bottom: 0.4rem;
/*	left: 1rem;*/
	}


.gazette .post_cont {
/*	font-size: 1.3rem;*/
/*	margin-bottom: 1.6rem;*/
	text-align: justify;
/*	font-family: Willamette;
	font-size: 1.6rem;
	line-height: 80%;
	font-weight: normal;*/
	}

.gazette .post_cont p {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	}

.gazette .footer_post {
	margin-bottom: 0rem;
	text-align: right;
	}


/* Styles for row container which can (somewhat) reorder its items on resize
 * (3 stages) using flex.
 * My version without flex fails miserably.
 */

.rcontainer {
	position: relative;
	max-width: 960px;
	margin: 0px auto 0px auto;
/*	background: #fff1d6;*/
/*	background: #f7fbe7;*/
	background: rgb(247,251,231);
	background: rgba(247,251,231,0.9);
	}

/* row and column containers */
.row,
.col {
/*	-ms-box-orient: horizontal;*/
	display: flex;
	flex-wrap: wrap;
	flex-basis: 0;
	flex-grow: 1;
	flex-shrink: 1;
	align-items: stretch;
	min-height: min-content;
	vertical-align: top;
	}

.row {
	flex-direction: row;
/*	width: 100%;*/
	}

.col {
	flex-direction: column;
/*	height: 100%;*/
/*	margin: 0px !important;*/
	}


.ritem { /* item inside 'row' */
/*	display: flex;*/
	margin: 0px !important;
	padding: 0px !important;
	}
	.ritem > div
	,.col > div
	{
		/* older browsers need, lest long blank spaces at the end */
		max-width: 100%;
		max-height: 100%;
		flex: auto;
		}
	/* on stage 0 (and 1) be that width */
	.ritem.F1 {	width: 10%;		}
	.ritem.F2 {	width: 20%;		}
	.ritem.F25{	width: 25%;		}
	.ritem.F3 {	width: 30%;		}
	.ritem.F33{	width: 33.333333%;	}
	.ritem.F5 {	width: 50%;		}
	.ritem.F99{	width: 100%;		}

	/* Stage 1: Full width */
	@media (min-width: 769px) {
		.___ {} /**/
		.ritem.FL {	order: 1;	} /* lean left */
		.ritem.FR {	order: 3;	} /* lean right */
		.ritem.FM {	order: 2;	} /* stay in the middle */
		}

	/* Stage 2: Narrow but probably not mobile. Prompt to set two rows */
	@media (max-width: 768px) {
		.___ {} /**/
		/* this items must come first and fill row 1 */
		.ritem.NT {	order: 1;	} /* stay in row 1 */
		/* this items must come after .NT */
		.ritem.NL {	order: 2;	} /* row 2 and lean left */
		.ritem.NR {	order: 3;	} /* row 3 and lean right */
		/* be that width */
		.ritem.N1 {	width: 10%;		}
		.ritem.N2 {	width: 20%;		}
		.ritem.N25{	width: 25%;		}
		.ritem.N3 {	width: 30%;		}
		.ritem.N33{	width: 33.333333%;	}
		.ritem.N5 {	width: 50%;		}
		.ritem.N99{	width: 100%;		}
		.ritem.F1,
		.ritem.F2,
		.ritem.F25,
		.ritem.F3,
		.ritem.F33,
		.ritem.F5,
		.ritem.F99{				}
		/* (Older) Firefox plays dumb on flex-wrap,
		 * do column early */
		@-moz-document url-prefix() {
			.___ {} /**/
			.row {
				display: block;
				max-width: 640px;
				}
			.ritem {
				/* if line below is active,
				 * it seems that it affects other parts */
				/* display: block;*/
				float: none;
				}
			.ritem.N1,
			.ritem.N2,
			.ritem.N25,
			.ritem.N3,
			.ritem.N33,
			.ritem.N5,
			.ritem.N99{	width: 100%;		}
			}
		}
	
	/* Stage 3: Narrowest, probably mobile. Be one column. */
	@media (max-width: 512px) {
		.___ {} /**/
		.ritem.NL, .ritem.NR, .ritem.NT,
		.ritem.FL, .ritem.FR, .ritem.FM {
			display: block;
			flex: none;
			order: 0;
			width: 100%;
			float: initial;
			}
		}
	
	/* Stage 99: For older browsers ignoring @media and still trying
	 * to apply its contents. So they get these last.
	 * Helps very little, just slightly less ugly. */
	@media (max-width: 1px) {
		.___ {} /**/
		.ritem.FL, .ritem.FR, .ritem.FM,
		.ritem.NL, .ritem.NR, .ritem.NT,
		.ritem.F1, .ritem.F2, .ritem.F25,
		.ritem.F3, .ritem.F33,.ritem.F5, .ritem.F99,
		.ritem.N1, .ritem.N2, .ritem.N25,
		.ritem.N3, .ritem.N33,.ritem.N5, .ritem.N99{
			display: block;
			width: 100%;
			float: none;
			}
		.row, .col {
			max-width: 640px;
			}
		}


/* Other */

.clearfix { /* we use old fix because we like old things */
	clear: both;
	}

/* Work in progress */

/* Static body bg for Edge and other special children */
/* Also default when no JS */
#page_top {
	background: #fff url('static/bg_images/7634_12_52_52.jpg') top left;
	background-attachment: fixed;
	background-position: top center;
	background-size: 100%;
	background-repeat: no-repeat;
/*	width: 100%;
	height: 100%;*/
	}

/* Parallax body bg (jitters on Edge etc) */
#body_bg_image {
	background: #fff url('static/bg_images/7634_12_52_52.jpg') top left;
	background-attachment: scroll;
	background-position: top center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
	position: fixed;
	top: 0;
	width: 100%;
	height: 120%;
	z-index: -1;
	max-height: none; max-width: none;
	margin: 0px; padding: 0px; border: none;
	}


/* temporary styles for coloring */
	.green {	background: green;	color: white;		}
	.brown {	background: brown;	color: white;		}
	.cyan {		background: cyan;				}
	.pink {		background: pink;				}
	.magenta {	background: magenta;				}
	.yellow {	background: yellow;				}


/* Style for yandex map */

#yandex_map {
	width: 100%;
	height: 300px;
/*	min-height: 300px;
	height: 100%;*/
	padding: 0;
	margin: 0;
	background-color: #808080;
	position: relative;
	}
	/* Make "vertical" (just longer) for Stage 3. */
	@media (max-width: 512px) {
		.___ {} /**/
		#yandex_map {
			height: 600px;
			}
		}
	/* Older broswers who know @media but fuck it up - revert again. */
	@media (max-width: 1px) {
		.___ {} /**/
		#yandex_map {
			height: 300px;
			}
		}

#yandex_map p {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	display: block;
	height: 70px;
	margin: -35px 0 0 -25%;
	}

.yandex_map_icon {
	font-size: 16px;
	position: relative;
	padding-left: 36px;
	margin: 0 0 0.4em 0;
	}

.yandex_map_icon i {
	min-width: 24px;
	text-align: center;
	position: absolute;
	top: .133em;
	left: 0;
	}


/* Misc styles */

.padding_top {
	padding-top: 30px;
	}

.padding_bot {
	padding-bottom: 30px;
	}

.nowrap {
	white-space: nowrap;
	}

img {
	max-width: 100%;
	}

ul {
	list-style-type: disc;
	padding-left: 1.5rem;
	}