/* палитра 'BlueGray'
	 50 => #ECEFF1 ,
	100 => #CFD8DC/*BG100*
	200 => #B0BEC5/*BG200*
	300 => #90A4AE/*BG300*
	400 => #78909C/*BG400*
	500 => #607D8B/*BG500* <==
	600 => #546E7A/*BG600*
	700 => #455A64/*BG700*
	800 => #37474F/*BG800*
	900 => #263238/*BG900*
 */


/* каркас */

	* { box-sizing:border-box; white-space:normal; transition: background-color 1s; }

	body { padding:0; margin:0; font-size:16px; font-family:Roboto;  }
	
    a { color:#2962FF; }
	h1, h2, h3, h4 {color:#455A64}
		h1 { font-size:28px; margin:1.8em 0 1em; } h1:first-child { margin-top:1em;}
		h2 { font-size:24px; margin:1.8em 0 1em; } h2:first-child { margin-top:1em;}
		h3 { font-size:20px; margin:2.0em 0 1em; }

		h1 a, h2 a, h3 a, h4 a { text-decoration:none; }

	body > header {
		position:fixed; width:100%; z-index:20;
		background-color:#607D8B; /*BG500*/
		color:white; padding:0 15px; height:50px; overflow:hidden;
	}
	body > header h1 { font-size:20px; line-height:20px; padding:15px 0; margin:0; display:inline-block; color:inherit; font-weight:normal; }
	body > header a  { color:inherit; text-decoration:none; }



	aside {
		position:fixed; 
		top:50px; bottom:0;
		overflow-x:hidden;
		overflow-y:auto;
	}

	main {
		z-index:2;
		width:100%;
		padding: 15px;
		padding-top:50px;
		padding-left:270px;
	}
		main>article { max-width:900px; }

	aside {
		z-index:10;
		left:0; width:250px; 
		border-right:1px solid #607D8B/*BG500*/; 
		background-color:#CFD8DC/*BG100*/;
	}


/* боковое меню */

	/* каркас */
		aside a { 
			display:block; 
			text-decoration:none; 
			width:100%; 
			padding:.5em 15px; color:#37474F/*BG800*/;
			border-bottom:1px solid #B0BEC5/*BG200*/; 
		}

		aside > ul > a { 
			background-color:#B0BEC5 /*BG200*/; 
			font-weight:bold; 
			color:#37474F/*BG800*/; 
		}
		aside > ul > a, 
		aside > ul li:last-child a { 
			border-bottom:1px solid #90A4AE/*BG300*/; 
		}

		aside a:hover { background-color:#B0BEC5/*BG200*/; }
		aside > ul > a:hover { background-color:#90A4AE/*BG300*/; }
		
		aside ul { margin:0; padding:0; }
		aside li { list-style:none; }

		.menu-overlay { 
			position:fixed; 
			z-index:9; 
			width:100%; 
			top:50px; 
			bottom:0; 
			background-color:rgba(0,0,0,.7); 
			display:none; 
		}

	/* кнопка */
		.menu-button {
			position:absolute;
			width:32px; height:35px;
			left:7px; top:7px;
			/*margin:-10px -5px;*/
			cursor:pointer;
			display:none;
			/*border:1px dotted red;*/
		}
		.menu-button:before, .menu-button i:before,
		.menu-button:after,  .menu-button i:after {
			display:inline-block;
			position:absolute;
			width:15px; height:3px;
			content:'';
			background-color:white;
			top:16px; left:5px;
			transition:.5s ;
			transition-delay: top .3s;
			transform-origin: 1px center;
		}
		.menu-button i:before { top:10px; }
		.menu-button i:after  { top:22px; }

		.menu-button.transform:before { transition-delay:.3s; transform:rotate(-45deg); width: 12px; left:8px; }
		.menu-button.transform:after  { transition-delay:.3s; transform:rotate( 45deg); width: 12px; left:8px; }
		.menu-button.transform i:before { top:16px; opacity:0; }
		.menu-button.transform i:after  { top:16px; opacity:0; }
	
	/* поведение */

		@media all and (max-width: 900px) { 
			aside { width:220px; } 
			main { padding-left:235px;; }
		}
		@media all and (max-width: 800px) { 
			aside { width:200px; } 
			main { padding-left:210px;; }
		}

		@media all and (max-width: 700px) { 
			aside { margin-left:-300px; width:250px; padding-bottom:200px; } 
			main  { padding-left:20px;; }
			body > header { padding-left:35px; }
			.menu-button { display:inline-block; }
		}

		@media all and (max-width: 380px) { 
			body > header { padding-left:45px; }
			body > header h1 { font-size:18px; margin-top:-10px; width:250px; }
		}


/* элементы */
	
	pre, code { color:#1A237E; font-weight:600; font-size:inherit; white-space:pre-wrap; font-weight:normal; }
	pre {
		white-space:pre-wrap;  font-size:14px; /* blue */ overflow-x:hidden;
		border:1px solid lightgray; background-color:#f5f5f5; padding:1em;
	}
	@media all and (max-width: 500px) { 
		pre {font-size:12px;} 
	}

	pre u    { color:firebrick; text-decoration:none; }
	pre mark { color:green; background-color:transparent; }
	pre i { color:black; font-weight:300; font-style:normal; padding:0 .3em; }

	dt { font-family:monospace; font-size:17px; font-weight:bold; margin:1em 0 0; color:#1A237E; }
		dt i { font-weight:normal; padding:0 .3em; }
		dt a { font-size:inherit; text-decoration:none; font-family:inherit; } dt a:hover { text-decoration:underline; }
	dd { /*border:1px dotted blue;*/ margin:.5em 0 1.5em 2em;  }
		dd p { margin:.5em 0 0; text-indent:0; }


	red { color:#FF8A80; }


/* .tileset */

	.tileset:after { content:''; display:table; clear:both; }

		.tileset > div, 
		.tileset.screenshots > div  {
				
				width:30%; min-height:200px; 
				margin:1.5%;
				/*border:1px solid lightgray; */
				float:left; 

				background-repeat:no-repeat;
				background-size:cover;
				background-position: left top;
			}



			.tileset.single-row {
				/*position:relative;
				min-height:200px;*/
			}
			.tileset.single-row > div {
			    border:none;
				/*position:relative;
				height:100%;*/
			}



			.tileset.overlay-caption * { 
				color:inherit; font-weight:inherit; text-decoration:none; 
				}

			.tileset.overlay-caption > div { 
				position:relative; 
				overflow:hidden; 
				font-weight:normal;
				}
				.tileset.overlay-caption > div .caption {
					position:absolute; 
					left:0; right:0; bottom:-100%;
					margin:0; 
					transition: bottom 1s;
					text-align:center;

					line-height:2em; 
					min-height:6em;

					padding:.75em 1em;

					background-color:rgba(0,0,0,.75);
					color:white;

					}
				.tileset.overlay-caption > div:hover .caption { bottom:0; }

			
	@media all and (max-width: 550px) { 
		.tileset.single-row > div { width:100%; margin:2.5% 0; min-height: 50px; } 
	}

	@media all and (max-width: 700px) { 
		.tileset.overlay-caption > div { width:48%; height:25%; min-height:180px; margin:1%; }
	}

	@media all and (max-width: 400px) { 
		.tileset.overlay-caption > div { width:100%; height:25%; min-height:250px; margin:1% 0; }
	}


	/* pad:1024x704; xperia:320x415;  */


/* кнопки */

	.staff-button {
		position:fixed; 
		width:25px; line-height:22px; 
		right:25px; bottom:10px; 
		color:#BF360C; background-color:#FFD180; 
		border:1px solid #BF360C; border-radius:100%; 
		text-align:center; z-index:10;
		font-weight:bold;
		cursor:pointer; opacity:.3;
		transition:opacity .5s;
	}
	.staff-button:hover { opacity:.75; }


	.flat-button {
		float:right; 
		font-size:1em; 
		padding:1em;
		min-width:200px; 
		background-color:#448AFF /* blue A700 */;
		color:white; 
		text-decoration:none;
	}
	.flat-button:hover { background-color:#0D47A1 /* blue 900 */; }