/* CSS Document new styles */

/* Extra small devices (phones, 600px and down) */


*, a {
	font-size: 16px; 
	 box-sizing: border-box;
	} 
	
img.round8px { border-radius: 8px; }
	
a { color: #ee0000; }
a:visited { color:Brown   ; }	

.menu {
  width: 25%;
  max-width: 300px;
  float: left;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
	text-align: left;
  padding: 8px;
  margin-bottom: 7px;
      border-radius: 8px;

  background-color :whitesmoke;
  color: black;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,0.12), 0 3px 4px rgba(0,0,0,0.24);
}

.main {
  width: 75%;
  float: left;
}
	
	
	
body { 
	background: #eeeeee;
    width:100%;
  font-family: "Lucida Sans", sans-serif;
  text-align: center;
	border: 0px red solid;
	padding: 0;
	margin:0;

}  
 
h1 { text-align: center; font-size: 1.5rem; margin: 0px;}
h2, h3 { text-align: center; font-size: 1.2rem;  margin: 0px;}
p.text { color: black; background-color: white; text-align: justify; padding: 3px; margin: 3px;}

.body01 {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	background: #eeeeee;
	
}
	
.body01_header {
		color: black;
		background: white;
		background-image: linear-gradient(#999999, #cccccc);
	
}

.body01_bottom {
		color: black;
		background-image: linear-gradient(#cccccc, black);
	
}


.body01_top_nav {
	background-color: black;
	color: whitesmoke; 
	text-align: center;
	font-size: 1.3em; 
	margin: auto;
	width: 100%;
	z-index: 10;
	overflow: hidden;

	
}
/* Style the links inside the navigation bar */
.body01_top_nav a {
    float: left;
    color: #f2f2f2;
	background-color: black;
    text-align: center;
    padding: 9px 12px;
    text-decoration: none;

}

/* Change the color of links on hover */
.body01_top_nav  a:hover {
    background-color: #dddddd;
    color: black;
}


.categ_blocks { /* место где расположены кубики категорий */
	text-align: center;
	margin: 0 auto;
	width: 100%;
}

.categ_blocks a {
	color: black; 
	text-align: center;
	font-size: 1em; 

}

.categ {
  display: inline-block;
  padding: 8px;
  outline: 0px grey solid;
  width: 180px;
  margin: 8px;
  text-align: center;
  vertical-align: center;
  	background-color: white;
      border-radius: 8px;

}




.categ_blocks a:hover {
	outline: 1px grey dotted;
	color: black; 
}






	



@font-face {
    font-family: body_font; /* Имя шрифта */
    src: url(zhizn_regular.otf); /* Путь к файлу со шрифтом */
   }
   
@font-face {
    font-family: text_font; /* Имя шрифта */
    src: url(MuseoSansCyrl.otf); /* Путь к файлу со шрифтом */
   }

   






.tbl_art {

	text-align: justify;
	background-color: white;
	border: 1px gray solid;
	display: table;
	
}

.p_item {
	max-width: 400px;
	display: inline-block;
	vertical-align: top;
	font-size: 1em;
	
}

.item_price {
    margin: 0px;
    font-size: 1em;
    color: #237117;
    background-color: #ffffe6;
}


.tbl_admin { /* table for admin use */
	max-width: 800px;
	color: #000; background-color: #FFF;
	text-align: center ;
	border: 1px gray solid;
	padding: 8px;
	margin: auto;
	border-collapse: collapse;
}
.tbl1, .tbl1 td { /* main table style */
	max-width: 800px;
	color: #000; background-color: #FFF;
	text-align: center ;
	border: 1px gray solid;
	padding: 8px;
	margin: auto;
	border-collapse: collapse;
}

.tbl_box { /* table box style */
	color: black; background-color: white;
	text-align: center ;
	border: 2px gray solid;
	padding: 0px;
	margin: auto;
	border-collapse: collapse;
}

.tbl_box td { 
	border: 1px gray solid; 
}



/* Add a black background color to the top navigation */
.topnav {
	outline: 0px blue solid;
	text-align: center;
	font-size: 1.3em; 
	background-color: black;
	overflow: hidden;
	margin: auto;
	width: 100%;
	z-index: 10;
	
}

/* Style the links inside the navigation bar */
.topnav a {
	outline: 0px green solid;

    float: left;
    color: #f2f2f2;
		background-color: black;

    text-align: center;
    padding: 9px 12px;
    text-decoration: none;

}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}


.article_picture {
	position: relative; 
	width: 350px; 
	display: inline-block; 
	margin: 8px auto; 
	box-shadow: 5px 5px 5px grey;
}

.article_picture_label {
	position: absolute; 
	top:0; 
	color:white; 
	text-align: center;
	width:100%; 
	margin: 0px; 
	padding:0px; 
	background: rgba(0,0,0,0.5);
	
}
.article_picture_label.text_out {
	font-size: 0.8rem;
}

@media only screen and (orientation: portrait) {
  body {
    background-color: whitesmoke;

  }
  
  *, a {
	  		font-size: 16px; 
  }
}