/*----------------------Header and Footer----------------------------*/


body {	padding: 0;   background:#eed;  text-align: justify;  font-family: Calibri, Arial, sans-serif;  width:1254px;  }

header { float: left;   width: 900px;   height: 90px;   font-size: 3.9em;   border: solid 2px #c1c1b1;   padding: 5px 30px 0 30px;   margin: 10px 0 22px 10px;  }
header a {  text-decoration: none;   font-weight: bold;   color: #5A66A5;   transition: color .8s ease;  }
header a:hover { color: #5fab63; }

footer {
	clear: both;	
        width: auto;
	padding: 5px 0 15px 0;
	border: 0;
	color: #777;
	font-size: 0.9em;
	text-align: center;
	line-height: 2.0em;
}

#year:after { content:"2023"; }

/*----------------------Buttons----------------------------*/

.button, .buttbig, .sbutton
{
	float:left;
	width: 160px;
	background: #eed;
	color: #555;
	border: solid 2px #aa9;
        border-radius: 6px;
        font-family: calibri, arial;
	text-align: center;
	font-size: 17px;	
	padding: 4px;
        margin: 20px 20px 20px 0;   
outline:none; 
cursor:pointer;}

.buttbig  { width: 220px; }

.sbutton { width: 30px; margin-right: 5px; }

.hvr-hollow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: background;
  transition-property: background;
  box-shadow: inset 0 0 0 3px #eed, 0 0 1px rgba(0, 0, 0, 0);

}
.hvr-hollow:hover, .hvr-hollow:focus, .hvr-hollow:active {
  background: #ccb;
}

/*----------------------Sidebar----------------------------*/

nav {  float: left;  width: 270px; border: solid 2px #c1c1b1; margin: 10px 0 8px 0; padding: 0; }
nav p, nav a { align:left; color:#818191;  text-decoration:underline; font-size:19px; transition:color .2s ease;}
nav p:hover, nav a:hover { color: #5a6; text-decoration:underline; }

ul { margin: 14px 0;  padding-left:22px;  border:0;  }

li {  display:block;   list-style: circle outside;   line-height: 152%;   padding-left:2px;   color:#888;  border:0;  letter-spacing: -0.04em;  }  
li p { margin:0; } 
li p.li { margin-bottom:2px; font-size:19px; color:#494; text-decoration:none;}

#i1:after { content:"Москва: главная страница"; }
#i2:after { content:"Московское метро"; }
#i3:after { content:"Московские пруды";}
#i4:after { content:"Разные места"; }
p#i5:after { content:"Случайные фотографии"; }
p#i5a:after { content:"Таблички и значки"; }
p#i5b:after { content:"Крышки люков"; }

p#i6:after { content:"Памятники людям"; }
p#i7:after { content:"Другие памятники"; }
p#i8:after { content:"Великая Отечественная война"; }
p#i9:after { content:"Мемориалы на предприятиях"; }
p#i10:after { content:"Мемориалы в поселках"; }
p#i11:after { content:"Мемориальные доски"; }
p#i12:after { content:"Государственные деятели";}
p#i13:after { content:"Великая Отечественная война";}
p#i14:after { content:"Исторические события"; }
p#i15:after { content:"Исторические места"; }
p#i16:after { content:"Барельефы и картины"; }
p#i17:after { content:"Имена улиц";}
p#i18:after { content:"Другие города и страны"; }
p#i19:after { content:"Города Московской области"; }
p#i20:after { content:"Мемориалы в Подмосковье";}
p#i21:after { content:""; }
p#i22:after { content:""; }
p#i23:after { content:"";}

p#i24:after { content:"Все разделы и фотографии";}
p#i25:after { content:"Крышки люков Москвы";}
p#i26:after { content:"Клейма литейных заводов";}

#me1:after { content:"1. Сокольническая"; }
#me2:after { content:"2. Замоскворецкая"; }
#me3:after { content:"3. Арбатско-Покровская"; }
#me4:after { content:"4. Филевская"; }
#me5:after { content:"5. Кольцевая"; }
#me6:after { content:"6. Калужско-Рижская"; }
#me7:after { content:"7. Таганско-Краснопресненская"; }
#me8:after { content:"8. Калининско-Солнцевская"; }
#me9:after { content:"9. Серпуховско-Тимирязевская"; }
#me10:after { content:"10. Люблинско-Дмитровская"; }
#me11:after { content:"11. Большая Кольцевая (БКЛ)"; }
#me12:after { content:"12. Бутовская"; }
#me15:after { content:"15. Некрасовская"; }

/* ----------------------------Page Content-------------------------------- */

.content, article {
	float: left;
	width: 900px;
	border: solid 2px #c1c1b1;
        padding: 0 30px 0 30px;
	margin: -12px 0 10px 10px;  }

.content h4, article h4 { font-family: Calibri, Arial, sans-serif; font-size:15px; color:#a85;  margin-bottom:0;}

.content p, article p { font-size: 18px; color:#779; padding-bottom:6px; line-height:22px;}
summary { font-size: 18px; color:#779; padding-bottom:6px; line-height:22px; cursor:pointer;}

.content p a, .im a, article p a { text-decoration: underline; color: #99a; transition:color .8s ease;}
.content p a:hover, .im a:hover, article p a:hover { text-decoration: underline; color: #5fab63; }

.content p.green, #boxn p.green, #boxn2 p.green, article p.green { 
        font-size: 20px;
	font-weight: bold;
        font-family: calibri, arial;
        line-height: 100%;
	color: #7fbb73; 
	margin: 15px 0 10px 0; }

.content p.name, article p.name { padding-top:10px;}

h1 { font-size: 29px; color: #7fbb73; padding:0; margin:20px 0 10px 0; }
article h2 { letter-spacing: -1px;   font-size:19px; color:#7a7; padding-bottom:8px; margin-top:-10px; font-weight:normal;}
article h3 { font-size: 19px; color: #a72; padding:0; margin:20px 0 10px 0;  font-weight:normal;}
article h3.stick { margin:32px 0 -10px 0;}

.content p.title, article p.title {   font-size: 19px;  font-weight: bold;  font-family: calibri, arial;  color: #b52;  margin: 5px 0 10px 0; }

.content img, article img { margin: 0;  border: solid 1px #666;}
p img.mr { margin-left: 12px;}

p.walk { font-size:19px; margin-top:-10px;}
p.walk img { margin: 14px 0 16px 0;}   /* design for text-image spacing in walks and towns pages*/

.box, #boxn_open, #boxn2_open, #boxn, #boxn2, #box_opentop {
	float: left;
	width: 900px;
	border: solid 2px #c1c1b1;
        padding: 0 30px 0 30px;
	margin: -2px 0 0 -32px;
        color:a9a9af;
        font-size: 18px;   }

#boxn p.green, #boxn2 p.green { padding-bottom: -5px; }

#boxn {	width: 418px; }
#boxn2 { float:right;  width: 420px;  margin-right: -32px; }

#boxn p, #boxn2 p, .box p { color:#aaa; }

#boxn a, #boxn2 a { color: #778; margin-bottom:5px;}
#boxn a:hover, #boxn2 a:hover { color: #5a6; }

.box p a { color: #778;}
.box p a:hover { color: #5a6; }


#boxn a.aux, #boxn2 a.aux { color: #d79; }
#boxn a.aux:hover, #boxn2 a.aux:hover { color: #5a6; }

.column, .column2 {
	float: left;
  	width: 290px;
	margin: 10px 0 30px 80px;
	border-left: solid 3px #c1c1b1;
        padding-left : 20px;
        text-align: left;
        font-size:18px; }

.column2 {
  	width: 200px;
        margin-left:30px; }

.column a, .column2 a { color:#888; text-decoration:none; }
.column a:hover, .column2 a:hover { color: #bbb; text-decoration:none; }


#boxn_open {
	width: 418px;
	border: 0;
	border-left: solid 2px #c1c1b1;
	border-right: solid 2px #c1c1b1;
}

#boxn2_open {
	float:right;
	width: 420px;
	margin-right: -32px;
	border-top: 0;
	border-bottom: 0;
}

#box_opentop {
	border-top: 0;
}

figure { text-align:justify; margin:0;}

/*----------------------Index Page Updates----------------*/

.updateframe {
	float: left;
	width: 920px;
	margin-bottom: 20px;
	margin-left: -10px;
	border: 0;
}

.time
{
        background:#e8d8aa;
        padding: 2px 20px;
        color: #676;
	margin-bottom: -18px;
        width: 220px;
        height: 20px;
        font-size: 0.97em;
}

.in, .in2, .in3 {
	float: left;
	width: 906px;
	height: 20px;
	border: solid 2px #bba;
	padding: 3px 0 5px 10px; 
	margin-top: -2px;
	margin-bottom: 0; 
        font-size: 1.00em;
}

.in a, .in2 a, .in3 a { color:#997744; }
.in2 { height: 40px; }
.in3 { height: 60px; }

.im {
	float: right;
	width: 724px;
        height:100%;
	border: solid 2px #bba;
	padding: 3px 10px 5px 12px; 
	margin: -5px -2px -2px 0;
        font-size: 0.96em;
        color:#778; 
}

.document-mos p {line-height:24px;}

.document-mos a, .document-mos a:visited, p.document-mos a, p.document-mos a:visited {
	color: #886;
	text-decoration: underline;  }

.document-mos a:hover, p.document-mos a:hover {
	color: #bb9;
	text-decoration: underline;  }