#layout
{
min-width: 985px;
/*max-width: 1400px;*/

behavior: expression(
	( eBody = document.getElementsByTagName( 'body' )[0] ) & ( eMin = document.getElementById( 'min-width' ) )
	& (
		eMin && ( window.iWidth != eBody.clientWidth || window.iEM != eMin.clientHeight )
		?
			( iWidth = eBody.clientWidth ) & ( iEM = eMin.clientHeight ) & ( iMin_width = eMin.offsetWidth )
			& (
				iWidth < iMin_width
				?
					( this.style.width = iMin_width + 'px' )
				:
					( iMax_width = document.getElementById( 'max-width' ).offsetWidth )
					& (
						iWidth > iMax_width
						?
							( this.style.width = iMax_width + 'px' )
						:
							( this.style.width = '100%' )
					)
			)
		:
			''
	)
);
}


div#content { margin: 0;}
.gallery_previews { margin: 0 4% 1.5em 4%;}

body {font-family: georgia, serif; font-size: 0.95em;}
.black div#content {margin-bottom: 0.7em;}
.sketch {background: #f9f1e1 url('bkg_sketch.jpg');}
.black {background: black url('bkg_black.jpg');}
.figures {background: black url('bkg_black_figures.jpg');}
.bat {background: white;}
div#header {padding-top: 8px; width: 100%; }

div#header_common {height: auto; background: white; overflow: visible; position: static; }

div#header_extra {
position: absolute;
	font-size: 0.85em;
	top: 41px; 
	left: 71%;
	color: black;
	font-family: Times,serif;
}

p#museum_logo {
	float: left;
	margin: 0 -100% 0 15%;
}

p#museum_logo img {
margin: 4px 12px 8px 12px;}


.entry {font-size: 1.05em;}
table.details {width: 70%;}
table.details td span {background: #F6F5ED;}
#start_game div.caption {font-size: 0.75em; margin:0 0 1em 18px; font-family: Verdana,sans-serif;}
/*.gallery_previews {margin:0 4%;}*/
.gallery_previews h3 {font-size: 130%; margin-bottom: 0.7em; font-weight: normal; font-family: Georgia, serif; }

h2 {margin-bottom: 0.6em;}

div#header_common a, div#header_common p#home_link a {color: white;}
div#header_common a:hover, div#header_common p#home_link a:hover {color:#edd784 !important;}

p#logo { position: absolute; top: 20px; left: 28%; z-index: 2;}

#main {margin-left: 4%; margin-bottom: 10px;}
p.head_text {margin-top: 39px;}
p#home_link {position: absolute; left: 4%; top: 38px;}

.logo-container {text-align: center; padding-top: 20px;}

div#copyright {
	float: left;
	margin-right: 2%;
	width: 68%;
	position: relative; 
	z-index: 2;
}

div#copyright p {
	float: left;
	width: 45%;
	margin-right: 30px;
	max-width: 400px;
}

div#copyright p.comment {
	margin-right: 0;
	max-width: auto;
}
#navigation b, #navigation span { padding: 0 2%; font-style: italic; font-size: 105%;}
#navigation b { font-weight: normal;}

#navigation {width: 70%; margin: 0 15%; border-top: 1px solid #999999; padding-top: 12px; margin-top: 13px; z-index: 66;}
.homepage #navigation {width: 100%; padding-top: 13px; margin: 13px 0 0 0; border: none;}

.sketch #navigation {background: url('bottom_line.gif') left top repeat-x; padding-bottom: 20px;}
.figures #navigation {position: relative;}


#navigation .left_nav b, #navigation .left_nav span {padding: 0 4% 0 0; margin: 0;}
#navigation .right_nav b, #navigation .right_nav span {padding: 0 0 0 17%; margin: 0;}
.left_nav {position: relative; left: 4%; width: 47%;  z-index: 5;}
.right_nav {position: relative; left: 52%; width: 20%; padding-left: 250px; top: -1.4em; z-index: 5;}

/*переключение бит*/

.sport .sport_bat, .common .common_bat {display: block;}
.sport .common_bat, .common .sport_bat {display: none;}

.pseudo {color: #00778c; border-bottom: 1px dashed #00778c; cursor: pointer;}
.pseudo:hover {color: #cc0000; border-bottom: 1px dashed #cc0000;}

.sketch p#logo {margin-left: 50%; left: -223px;}
.black p#logo {/*margin-left: 6%; left: -223px;*/ left: 34%; }
.figures p#logo {display: block; position: absolute; margin-left: 0; top: 20px;  left: 28%;}

div.head_link { display: block; position: absolute; z-index: 2; top: 30px; left: 82%; font-family: Arial,sans-serif; font-size:0.8em; margin-right:4%;}
div.head_link img {position: absolute; left: -42px;  top: 0%;}
.figures div.head_link a {color: white;}

.black h1, .black h2 {color: #d5b22e;}
.black a {color: #edd784;}
.black p#home_link a {color: #f7da99;}

.black a:hover {color: red;}
.black * {color: #d3d2d2;}


div.columns {margin-top: 10px;}
.bat div.columns {margin-bottom: 70px;}
.sketch div.columns, .black div.columns  {margin-top: 48px;}

div.bottom_columns {margin-top: 20px;}
div.column_1,
div.column_2,
div.column_3 {float: left; /display: inline; }
div.column_1 {width: 36%; margin-left: 4%;}
/*for main*/
div.column_2 {width: 57%; margin-left: 2%;}
div.column_3 {width: 20%; margin-left: 4%;}


.black div.column_1 {width: 26%; font-family: georgia, serif; font-size: 0.95em;}
.black div.column_2 {width: 62%; margin-left: 8%; font-size: 0.95em; }

.figures .bottom_line {padding-top: 60px; background: url('white_line.jpg') 30% bottom no-repeat; margin-bottom: 50px;}

.figures .columns_merged {float: left; width: 65%; /width: 64%; margin-left: 4%; max-width: 1100px;}
.figures div.columns {margin-bottom: 20px; margin-top: 0;}
.figures .columns_merged div.column_1 {width: 45%; margin-left: 0;}
.figures .columns_merged div.column_2 {width: 48%; margin-left: 6%; }

.figures div.column_1 {width: 27%; margin-left: 4%; padding-top: 1em; margin-top: 30px; }
.figures div.column_2 {width: 32%; margin-left: 2%; margin-top: -20px;}
.figures div.column_3 {width: 28%; margin-right: 4%; margin-left: 2%;  margin-top: 30px; position: relative; z-index: 2; }
.figures .column_1 h2 {font-size: 125%; margin-bottom: 0.85em;}

.figures div#header {margin-bottom: 1em;}
.figures .navigation {padding: 16px 0 30px 0; z-index: 2; text-align: center; }
.figures .navigation div {position: relative; /*display: inline;*/ height: 202px; }
.figures .navigation .frame {position: absolute; left: 50%; top: -9px; margin-left: -334px; /*left: -17px; bottom: -28px; /bottom: 0px; */z-index: 3;}
.figures .navigation .figures { position: relative; z-index: 4; }

.corner_picture  {/*overflow-x: hidden;*/ position: relative; font-size: 1px;}
.corner_picture div {position: absolute; /*overflow: hidden;*/ top: -200px;}

.corner_picture div.cannon {background: url('/f/5/figures/cannon/cannon_p.png') no-repeat; left: 78%; width: 22%; height: 265px;}
.corner_picture div.star {background: url('/f/5/figures/star/star_p.png') no-repeat; left: 74%; width: 26%; height: 358px;}
.corner_picture div.well {background: url('/f/5/figures/well/well_p.png') no-repeat; left: 82%; width: 18%; height: 225px;}
.corner_picture div.artileria {background: url('/f/5/figures/artillery/artileria_p.png') no-repeat; left: 79%; width: 21%; top: -440px; height: 552px;}
.corner_picture div.nest {background: url('/f/5/figures/nest/nest_p.png') no-repeat; left: 77%; width: 23%; height: 219px;}
.corner_picture div.sentinels {background: url('/f/5/figures/sentinels/sentinels_p.png') no-repeat; left: 82%; width: 18%; height: 463px;}
.corner_picture div.tir {background: url('/f/5/figures/tir/tir_p.png') no-repeat; left: 71%; width: 29%; height: 269px;}
.corner_picture div.fork {background: url('/f/5/figures/fork/fork_p.png') no-repeat; left: 76%; width: 24%; height: 399px; top: -310px;}
.corner_picture div.arrow {background: url('/f/5/figures/arrow/arrow_p.png') no-repeat; left: 78%; width: 22%; height: 394px; top: -300px;}
.corner_picture div.crankshaft {background: url('/f/5/figures/crankshaft/crankshaft_p.png') no-repeat; left: 82%; width: 18%; height: 522px;}
.corner_picture div.rocket {background: url('/f/5/figures/racket/rocket_p.png') no-repeat; left: 81%; width: 19%; height: 321px;}
.corner_picture div.crawfish {background: url('/f/5/figures/crawfish/crawfish_p.png') no-repeat; left: 80%; width: 20%; height: 472px; top: -300px;}
.corner_picture div.serp {background: url('/f/5/figures/sickle/serp_p.png') no-repeat; left: 66%; width: 34%; height: 461px; top: -380px;}
.corner_picture div.airplane {background: url('/f/5/figures/airplane/airplane_p.png') no-repeat; left: 82%; width: 18%; height: 350px; top: -270px;}
.corner_picture div.letter {background: url('/f/5/figures/letter/letter_p.png') no-repeat; left: 80%; width: 20%; height: 169px; top: -80px;}


.bat .column_2 .caption {max-width: 300px;}

.figure_container p.caption {margin-left: 50%; width: 13em; text-align: left; font-family: Arial,sans-serif; font-size: 75%; line-height: 1.6em; color: #959595;}
.figure_container p {text-align: center;}
#figure_grid {background: url('figures_grid.gif') center top no-repeat; }

.bat div.column_1 {width: 60%; font-family: georgia, serif; font-size: 0.95em; margin-top: 25px;}
.bat div.column_2 {width: 26%; margin-left: 7%; font-size: 0.95em;}

#main .bat_picture {margin-left: -19px; width: 100%; height: auto;}
#main .bat_picture img {width: 100%; height: auto;}

.sketch .column_1 {width: 41%; margin-left: 4%; position: relative;}
.sketch .column_2 {width: 47%; margin-left: 66px; position: relative;}

.left-sketch, .right-sketch {position: relative; margin-top: 20px;}
.left-sketch {float: right; }

div.entry h1 {float: left; font-size: 1em; font-weight: bold; position: relative; top: -0.05em; margin: 0 0.3em 0 0; }

div.subcol {float:left; font-size: 95%; width:50%; }
div.subcol p {margin-top: 1em;}



div.image {margin-top: 1em; margin-bottom: 40px; }
div.main-image h3, div.image h3 {font-size: 0.95em; font-weight: normal; font-family: georgia,serif; margin-top: 0.2em;}
div.image h3 {font-style: italic;}
div.see_also {width: 90%; font-family: Arial, serif; font-size: 0.8em; margin-top: 2em; line-height: 1.2em; }
div.see_also h3 {font-size: 1.3em; font-weight: normal; font-family: georgia,serif;}
div.see_also img {position: relative; left: -7px; margin-top: 6px;}
div.see_also p {zoom: 1; margin-top: 0.75em; font-size: 0.95em; color: #bbbbbb;}

div#start_game { margin: 30px 0 1.2em 0;}




.machine-container {position: relative; width: 90%;}
.machine-container div.caption, .sketch div.caption, .main_picture div.caption, .bat div.caption, .figures .bottom_line div.caption {position: absolute; }
.bat_picture {position: relative; }
div.sport_bat, div.common_bat {margin-top: 30px; height: auto;}
.bat_picture img {margin-bottom: 4em;}
.machine-container div.caption {font-size: 0.85em;}
div.caption h3 {font-size: 1.4em;  font-family: Arial,sans-serif; margin-bottom:0.5em;}
div.caption { font-family: Arial,sans-serif; }
.sketch .caption h3{font-size: 1.1em;}
.black .caption h3 {font-size: 1.2em; color: white;}
.sketch .caption {text-align:right;}
.black .caption p {color: #bbbbbb; font-size: 1.1em;}
.sketch div.caption_15, .sketch div.caption_16,
.sketch div.caption_17, .sketch div.caption_18,
.sketch div.caption_19 {text-align: left;}
.sketch_container {position: relative; text-align: center; }
.sketch .description {position: relative; margin: 78px 0 50px 45%; left: -110px; margin-top: 78px;}
div.caption h3.note {font-size: 1em; color: #61615e; margin-top: 0.3em;}
.machine-container div.caption img.icon {position: absolute; right: 100%; top: 3px;}
div#machine {  top: -98px;  width: 443px; height: 820px; position: relative; }
.bat div.caption {color: #7f7f7f;}

.bat .column_2 .caption {position: static; margin-left: 1%}
.bat .column_2 .caption p {font-size: 1.2em; margin-top: 1em; margin-right: 5%;}

div.caption_01 {left: -18%; top: 150px; width: 13em; padding-left: 10px;}
div.caption_02 {left: -24%; top: 298px; width: 14em;}
div.caption_03 {left: -18%; top: 460px; width: 14em;}
div.caption_03 h3,
div.caption_04 h3,
div.caption_06 h3  {font-size: 1em;}
div.caption_04 {left: -50px; top: 570px; width: 15em;}
div.caption_05 {left: 310px; top: 667px; width: 35%; }
div.caption_05 ins {left: 0; width: 33%; height: 50px; top: -45px;}
div.caption_05 h3 {margin-left: 35%;}
div.caption_06 {left: 320px; top: 475px; width: 48%;}
div.caption_06 .text-container {margin-left: 37%;}
div.caption_07 {left: 280px; top: 240px; width: 57%;}
div.caption_07 .text-container {margin-left: 40%;max-width: 250px;  }
div.caption_07 ins {left:0; top: 39px; height: 90px; width: 44%; }

.caption ins { text-align: left; }

.sketch div.caption {font-size: 0.75em;}

.not-active {color: #AAAAAA;}

/*левая сторона схемы автомата*/
div.caption_08 {right: 170px; top: -20px; width: 57%; }
div.caption_08 .text-container {margin-right: 23%;}
div.caption_08 ins {right: 0; width: 20%; height: 40px; top: 15px;}

div.caption_09 {right: 175px; top: 60px; width: 61%;}
div.caption_09 .text-container {margin-right: 44%;}
div.caption_09 ins {right: 0; width: 41%; height: 35px; top: 10px;}

div.caption_10 {right: 160px; top: 145px; width: 63%;}
div.caption_10 .text-container {margin-right: 50%;}
div.caption_10 ins {right: 0; width: 45%; height: 20px; top: 10px;}

div.caption_11 {right: 160px; top: 250px; width: 62%; }
div.caption_11 .text-container {margin-right: 51%;}
div.caption_11 ins {right: 0; width: 47%; height: 40px; top: -30px;}

div.caption_12 {right: 97px; top: 345px; width: 66%; }
div.caption_12 .text-container {margin-right: 72%;}
div.caption_12 ins {right: 0; width: 70%; height: 115px; top: -110px;}

div.caption_13 {right: 75px; top: 407px; width: 77%; }
div.caption_13 .text-container {margin-right: 54%;}
div.caption_13 ins {right: 0; width: 50%; height: 90px; top: -85px;}

div.caption_14 {right: 140px; top: 485px; width: 50%; }
div.caption_14 .text-container {margin-right: 50%;}
div.caption_14 ins {right: 0; width: 46%; height: 56px; top: -50px;}

/*правая сторона схемы автомата*/
div.caption_15 {left: 140px; top: -20px; width: 50%;}
div.caption_15 .text-container {margin-left: 50%;}
div.caption_15 ins {left: 0; width: 47%; height: 73px; top: 10px;}

div.caption_16 {left: 267px; top: 160px; width: 40%;}
div.caption_16 .text-container {margin-left: 38%;}
div.caption_16 ins {left: 0; width: 33%; height: 18px; top: 10px;}

div.caption_17 {left: 185px; top: 245px; width: 60%;}
div.caption_17 .text-container {margin-left: 60%;}
div.caption_17 ins {left: 0; width: 57%; height: 45px; top: 10px;}

div.caption_18 {left: 180px; top: 390px; width: 63%; }
div.caption_18 .text-container {margin-left: 49%;}
div.caption_18 ins {left: 0; width: 46%; height: 42px; top: -35px;}

div.caption_19 {left: 180px; top: 500px; width: 55%; }
div.caption_19 .text-container {margin-left: 40%;}



.black .main_picture {height: 640px; position: relative; top:-14px;}
.black .main_picture img {position: absolute; left: -45px;}
.bottom_block {margin-left: 4%;}

.sketch .bottom_block {margin: 0 4%; padding-top: 15px; font-size: 0.9em; }
.sketch .bottom_block .see_also {float: left;  margin: 0 1.6%; /margin: 0 1.5%}

.sketch #footer {padding-top: 22px; background: url('bottom_line.gif') 0 0 repeat-x; }


div.caption_20 {left: 126px; top: 40px; width: 60%; }
div.caption_20 .text-container {margin-left: 60%;}
div.caption_20 ins {left: 0; width: 57%; height: 80px; top: 15px;}

div.caption_21 {left: 163px; top: 210px; width: 65%;}
div.caption_21 .text-container {margin-left: 60%;}
div.caption_21 ins {left: 0; width: 57%; height: 55px; top: 10px;}

div.caption_22 {left: 100px; top: 430px; width: 30%;}
div.caption_22 .text-container {margin-left: 30%; margin-top: 200px;}
div.caption_22 ins {left: 0; width: 30%; height: 190px; top: 0;}
.black .main_picture .see_also {left: 400px; top: 520px; width: 18em; position: absolute; }
.black .main_picture div.see_also p { font-size: 1em; color: white;}



.bottom_block .instr {float: left; margin-right: 3%; font-family: arial, sans-serif; font-size: 80%;}
.bottom_block .instr_1 {width: 11%;}
.bottom_block .instr_2 {width: 17%;}
.bottom_block .instr_3 {width: 17%;}
.bottom_block .instr_4 {width: 17%;}
.bottom_block .instr_5 {width: 22%; margin-right: 0;}


div.caption_23 {left: 25%; top: 20%; height: 65%; width: 12em;}
div.caption_23 ins {width: 20px;}
div.caption_24 {left: 62%; top: 20%; height: 65%; width: 14em;}
div.caption_24 ins {width: 20px;}
div.caption_25 {left: 3%; top: 20%; height: 65%;; width: 10em; }
div.caption_25 ins {width: 20px;}
div.caption_26 {left: 25%; top: 20%; height: 65%; width: 13em; }
div.caption_26 ins {width: 20px;}
div.caption_27 {left: 56%;top: 20%; height: 65%; width: 17em;}
div.caption_27 ins {width: 20px;}
div.caption_28 {left: 90%; top: 20%; height: 65%; width: 8em; }
div.caption_28 ins {width: 20px;}

div.caption_29 { width: 50%; left: 170px; /left: 160px; top: -360px; /top: -330px; z-index: 2; position: absolute;}
div.caption_29 .text-container {margin-left: 30%;}
div.caption_29 ins {left: 0; width: 28%; height: 15px; top: 15px;}

div.top_text {margin: 0 2% 0 15%; position:relative; z-index:2;}
div.top_text p {margin-left: 60%; font-size: 90%;}

.figures .bottom_line {position: relative;}
.figures .bat_block { position: relative;  height: 0px; width: 40%; margin-left: 60%;}
.figures .bottom_bat {position: absolute; top: -430px; height: 430px; left: -300px;  width: 700px; background: url('/f/5/global/bottom_bat.png') no-repeat; /top: -400px; /height: 400px; /left: -310px;}
.figures #footer {position: relative; /display: inline-block;}
.figures div#content {padding-bottom: 250px;}
.figures .footer {position: absolute; bottom: 0; width: 100%; }


/**/
.caption ins {position: absolute;  }

.bat #main .caption ins {top:0px; height: 6em; max-height: 120px;}
.bat #main .caption p {position: absolute; top: 6em;}
.bat .caption ins.bl-tr {margin-left: 15px;}


div.animation {
	position: relative;
}

div.animation .image {
	position: relative;
	height: 197px;
	width: 197px;
	overflow: hidden;
	margin-bottom: 0;
}
div.animation .image img {
	position: absolute;
	top: 0px;
	left: 0px;
}
div.animation .controls {
	position: absolute;
	top: 115px;
	left: 220px;
}
div.animation .controls p {
	float: left;
	clear: left;
	color: #00778c;
	border-bottom: 1px dashed;
	margin: 0 0 6px 12px !important;
	padding-top: 4px;
	cursor: pointer;
}
div.animation .controls p.active {
	color: white;
	background: #f1c300;
	border-bottom: none;
	padding: 4px 12px 3px 12px;
	margin-left: 0 !important;
	cursor: default;
}


#throw-start {
	float: left;
	color: #00778c;
	border-bottom: 1px dashed;
	cursor: pointer;
}
#throw-start.active {
	color: #cccccc;
	border-bottom-color: white;
	cursor: default;
}
div#throw {
	width: 336px;
	height: 68px;
	overflow: hidden;
	position: relative;
	margin-bottom: 1.2em;
}
#throw img {
	position: absolute;
	top: 0px;
	left: 0px;
}