@charset "utf-8";

body, html {
  width: 100%;
  margin: 0 0 0 0;
  padding: 10px 0 0 0;
  color: #727272;
  background-color: white;
}

body, td, input, select {
  font-family: Helvetica;
  font-size: 15px;
  font-weight: 500;
}

a { text-decoration: none; color: #62629E; }
a:hover { color: #62629E; text-decoration: underline; }
a:visited { color: #62629E; }

pre { font-size: 13px; }

a.eladr > span:nth-child(odd) { display: none; }


/*       Pages header
         ============
*/

#page-header {
  width: 100%;
  border-top: solid 10px white;
  height: 50px;
  overflow: visible;
  margin: 10px 0;
  background: linear-gradient(179deg, #F0F1F3 0%, #E7EAEB);
}

#page-header > div {
  max-width: 900px;
  min-width: 600px;
  margin: -10px auto;
  padding: 0 15px;
  border: solid 1px #90B9EB;
  height: 70px;
  background: linear-gradient(135deg, #E3F1FD 33%, #D4E3F3);
  box-shadow: 5px 8px 7px rgba(0,0,0,0.25), 2px 4px 3px rgba(0,0,0,0.22);
  position: relative;
}

#page-header > div > div:first-child {           /* Site title. */
  font-family: Verdana;
  font-size: 27px;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB,
               0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA,
               0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2);
}
#page-header > div > div:first-child span { /* "by Digi" */
  font-size: 13px;
  text-shadow: none;
  color: #90A0A0;
  vertical-align: bottom;
}

#page-header > div > div:nth-child(2) {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  color: #868686;
  text-shadow: 0 1px 0 #F2FAFE, 0 -1px 0 #BEDEFA;
}
#page-header > div > div:nth-child(2) a { color: #5A91C8; }
#page-header > div > div:nth-child(2) span:not(:first-child) {
  border-left: solid 2px #B6B8BA;
  margin-left: 7px;
  padding-left: 5px;
}

#page-header > div > div:nth-child(3) { /* "Powered by ..." */
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 13px;
}



/*       Pages footer
         ============
*/

#page-footer { /* Full page width container. */
  width: 100%;
  margin: 0;
  border-top: solid 20px white;
  background: linear-gradient(179deg, #F0F1F3 0%, #E7EAEB);
  clear: both;
}

#page-footer > div { /* Central container for the width of the content. */
  max-width: 900px;
  min-width: 600px;
  margin: 0 auto;
  padding: 15px 0;
  font-family: Arial, Tahoma, sans-serif;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}

#page-footer > div > div {
  display: flex;
  flex-direction: column;
}

#page-footer > div > div > div {
  margin: 4px 0;
}

#page-footer a { color: #5A5A5A; }
#page-footer a:hover { color: #303030; text-decoration: none; }

#page-footer a.os4logo {
  display: block;
  margin: 10px auto 0 auto;
}
#page-footer a.os4logo img {
  width: 110px;
  height: 46px;
}



/*       The middle (main) part of the pages
         ===================================
*/

#page-content {
  max-width: 850px;
  min-width: 600px;
  padding: 0 0 0 0;
  margin: 50px auto 0 auto;
}


/*       Left side block
         ---------------
*/

/* Product list */

#product-list { float: left; }
#product-list ul {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}
#product-list li a,
#product-list li span {
  display: block;
  padding: 7px 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  border-left: 10px solid #FEBE9E; 
  box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1), -2px -2px 5px 0 rgba(0,0,0,.1),
              2px 2px 5px 0 rgba(0,0,0,.1),  -2px 2px 5px 0 rgba(0,0,0,.1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #727272;
}
#product-list li a:hover {
  text-decoration: none;
  border-left: 10px solid #F2A475;
}
#product-list li a:visited { color: #727272; }
#product-list li span {
  color: #5A5A5A;
  border-left: 10px solid #F2A475;
  box-shadow: 2px -2px 5px 0 rgba(0,0,0,.2), -2px -2px 5px 0 rgba(0,0,0,.2),
              2px 2px 5px 0 rgba(0,0,0,.2),  -2px 2px 5px 0 rgba(0,0,0,.2);
}

/* Donate links under product list */

#product-list > div {
  width: 185px;
  text-align: center;
}
#product-list > div > div {
  margin-bottom: 15px;
  color: #766161;
}
#product-list > div > a {
  font-size: 13px;
  font-weight: 600;
  font-style: oblique;
  letter-spacing: 1px;
  display: block;
  margin: 5px 0;
  color: #662802;
}
#product-list > div > a:hover { text-decoration: none; letter-spacing: 1.5px; }
#product-list > div > a:hover:before,
#product-list > div > a:hover:after {
  content: "\2022"; /* Small black circle. */
  margin: 0 3px;
}


/*       Main area for the current page content
         --------------------------------------
*/

#main-area {
  margin-left: 230px; /* Space for the left side block. */
  line-height: 1.5;
}

/* Updates in right side block on the home page. */
#main-area div:first-child {
  float: right;
  border-left: solid 1px #727272;
  margin-left: 10px;
}
#main-area div:first-child h2 { margin-top: 0px; margin-left: 15px; }

#main-area #flags {
  display: block;
  padding: 5px;
  width: 100%;
  text-align: center;
}

#main-area #flags img {
  height: 81px;
  width: 130px;
  margin: 0 1em;
  border: solid 1px #C0C0C0;
}

/* Product page title */
#main-area h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  border-bottom: 1px solid #AAAAAA;
  margin: 0 0 25px 0;
  padding: 0 0 5px 0;
  position: relative;
}
#main-area h1:before, #main-area h1:after {
  content: '';
  border-right: 20px solid #FFFFFF;
  border-top: 15px solid #AAAAAA;
  bottom: -15px;
  position: absolute;
  left: 25px;
}
#main-area h1:after {
  border-top-color: #FFFFFF;
  border-right-color: transparent;
  bottom: -13px;
  left: 26px;
}

#main-area h2 { /* Product page sub-titles */
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 600;
  margin: 8px 0;
  padding: 0;
}

#main-area h3 { /* Product page sub-titles */
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  letter-spacing: 1.5px;
  margin: 8px 0 6px 0;
  padding: 0;
}

#main-area p { padding: 0; margin: 10px 0; }

#main-area ul { margin: 0; padding: 10px 0 10px 30px; }
#main-area li { margin: 0; padding: 0; }

/* Gallery */

#main-area .gallery {
  user-select: none;
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

#main-area .gallery > a img {
  margin: 1px;
  border: solid 1px #AAAAAA;
  cursor: zoom-in;
  max-width: 100%;
}

#main-area .galleryFullsizeImg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.4);
  z-index: 5;
  display: none;
/*  pointer-events: none;*/
}

#main-area .galleryFullsizeImg:target { /* for links like .../product.html#pic.jpg */
  display: block;
/*  pointer-events: auto;*/
}

#main-area .galleryFullsizeImg a { cursor: default; }

#main-area .galleryFullsizeImg img {
  display: block;
  max-width: 95%;
  position: relative;
  margin: 3% auto;
  box-shadow: 0px 0px 40px rgba(0,0,0,1), 0px 0px 15px rgba(0,0,0,0.4)
}


/* File/product Lists */

#main-area ul.news {
  list-style: none;
  padding: 0;
  margin: 16px 0 16px 15px;
}
#main-area ul.news li {
  margin: 4px 0;
  font-size: 13px;

  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
#main-area ul.news span { /* File date/product update date. */
  font-family: "DejaVu Sans Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: #5A5A5A;
}
#main-area ul.news a {
  font-family: "DejaVu Sans Mono", monospace;
  margin: 0 17px;
  flex: 0 0 auto; /* flex-grow and flex-shrink is 0 - no warp */
}


/* "Become a Patron!" link on the main page */

div.patron {
  text-align: center;
  display: block;
  margin: 60px 0;
}

div.patron a {
  background-color: rgb(232, 91, 70);
  font-family: sans-serif;
  font-weight: 500;
  text-align: center;
  color: rgb(255, 255, 255) !important;
  font-size: 0.875rem !important;
  border-radius: 9999px;
  border: solid 1px rgb(232, 91, 70);
  padding: 0.46875rem 1rem;
  text-decoration: none;
  transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
div.patron a:hover { background-color: #E7513B; }

/* Yandex donation on the main page */

form.yandex {
  font-size: 13px;
  color: #766161;
  text-align: center;
  margin: 60px 0;
}
form.yandex span.currency-unit { /* Ruble symbol. */
  color: #727272;
  margin-right: 15px;
  font-size: 15px;
  font-weight: 700;
}
form.yandex input[type="text"] {
  font-size: 13px;
  color: #727272;
  border: solid 1px #766161;
  width: 50px;
  margin: 0 4px 0 10px;
  padding: 0 0 0 4px;
  border-radius: 4px;
}
form.yandex input[type="submit"] {
  font-size: 12px;
  font-weight: 700;
  font-style: oblique;
  margin: 0 0 0 15px;
  padding: 0 7px !important;
  border: solid 1px #FAAC11;
  border-radius: 7px;
  background: #FFD403 linear-gradient(#FFD403, #F89D17);
}
form.yandex input[type="submit"]:active { /* Pressed submit button */
  padding: 0 6px 0 8px !important;
  border-top: solid 2px #FAAC11 !important;
  border-left: solid 1px #FAAC11 !important;
  border-right: solid 1px #FAAC11 !important;
  border-bottom: 0 !important;
}