/* kamtent-msk.ru: one outer frame for every page of every layer (tools/kamtent-msk.ru/steps/10_layout.py).
   Header band (with the menu and search), crumbs placeholder, content container, footer with the year line.
   The layers (tent, news, "Еда+", appliance repair, price lists) keep their own inner design inside the container.
   Written by the step; do not edit by hand. The rules use ids only, so they work for the table frame and for
   the div frame of the standalone price lists, and they do not depend on images/styles.css. */

/* ---- base ---- */
html { height: 100%; }
body.kt { height: 100%; margin: 0; padding: 0; background: #fff; color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
table#main { width: 100%; height: 100%; border-collapse: collapse; border: 0; margin: 0; padding: 0; }
#head, #content_container, #footer, #footer table, #footer td { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; line-height: normal; text-align: left; white-space: normal; border: 0; margin: 0; }
#footer table { border-collapse: collapse; }

/* ---- header band: identical on every page ---- */
#head { height: 321px; background: #03A4E1; padding: 0; vertical-align: top; }
#head_fon { position: absolute; top: 0; left: 0; display: block; height: 267px; width: 100%; background: #0DA6E6 url(/images/head_fon.png) top repeat-x; z-index: 1; }
#head_fon2 { position: absolute; top: 267px; left: 0; display: block; height: 54px; width: 100%; background: #0DA6E6 url(/images/head_fon2.gif) top repeat-x; z-index: 2; }
#head_1 { position: absolute; top: 210px; right: 0; display: block; height: 72px; width: 162px; background: url(/images/head_1.png) right top no-repeat; z-index: 4; }
#head_2 { position: absolute; top: 90px; right: 20%; display: block; height: 195px; width: 385px; background: url(/images/head_2.png) right top no-repeat; z-index: 3; }
#head_3 { position: absolute; top: 180px; left: 5%; display: block; height: 136px; width: 274px; background: url(/images/head_3.png) right top no-repeat; z-index: 5; }
#head_4 { position: absolute; top: 211px; left: 0; display: block; height: 60px; width: 79px; background: url(/images/head_4.gif) no-repeat; z-index: 2; }
#head_5 { position: absolute; top: 77px; left: 20%; display: block; height: 190px; width: 365px; background: url(/images/head_5.png) right top no-repeat; z-index: 2; }
/* the wordmark is a picture; the line under it is real text (the picture has it painted out) */
html > body #logo, #logo { position: absolute; top: 0; left: 0; display: block; height: 236px; width: 413px; background: url(/images/logo_head.png) right top no-repeat; z-index: 2; }
#tagline { position: absolute; top: 132px; left: 8px; z-index: 6; margin: 0; padding: 0; white-space: nowrap; color: #333; font: bold 29px/34px "Arial Narrow", "Liberation Sans Narrow", "Nimbus Sans Narrow", "Roboto Condensed", Arial, sans-serif; letter-spacing: 0; transform: scaleX(.63); transform-origin: 0 50%; }
#menu_container { position: absolute; top: 0; right: 0; display: block; height: 250px; width: 270px; z-index: 6; }
ul#menu { list-style-type: none; margin: 30px 0; padding: 0; height: 100px; width: 270px; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-size: 11px; }
ul#menu li { width: 135px; height: 20px; display: block; float: left; background: url(/images/menu_li.gif) no-repeat 0 3px; padding: 0; margin: 0; }
ul#menu li a { color: #fff; padding-left: 15px; text-decoration: underline; font-weight: normal; }
ul#menu li a:hover { text-decoration: none; }
#search_container { position: absolute; top: 285px; right: 0; display: block; z-index: 6; }
#search_container form { display: inline; margin: 0; padding: 0; text-align: right; }
#search_container input { width: 205px; height: 16px; font-size: 11px; color: #909090; border: 0; padding: 0 0 0 5px; margin: 1px; display: inline; background: #fff; box-sizing: content-box; font-family: Arial, Helvetica, sans-serif; }
#search_container input#b1 { width: 14px; height: 14px; vertical-align: middle; padding: 0; margin: 0 16px 0 3px; background: none; }

/* ---- content container (the layers put their own markup inside) ---- */
#content_container { background: #fff; padding: 28px 11px 20px 20px; vertical-align: top; }
/* placeholder of the breadcrumb line: empty on pages without crumbs (no height), filled by steps/30_breadcrumbs.py */
.crumbs { margin: 0; padding: 0; font: 11px/16px Arial, Helvetica, sans-serif; color: #666; }
.crumbs:not(:empty) { padding: 0 0 10px 6px; }
.crumbs a:link, .crumbs a:visited { color: #006; text-decoration: underline; }
.crumbs a:hover { color: #009; text-decoration: none; }
.crumbs ul, .crumbs ol { display: inline; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline; margin: 0 5px 0 0; padding: 0; background: none; }
.crumbs h1, .crumbs h2 { display: inline; font: inherit; margin: 0; padding: 0; background: none; color: inherit; }
.crumbs .arrow:before { content: " \2192 "; }

/* ---- footer with the year line: identical on every page ---- */
#footer { height: 54px; background: #52B104 url(/images/footer.jpg) bottom right; padding: 0; vertical-align: top; }
#footer table { width: 100%; height: 54px; background: url(/images/copyright.jpg) top right repeat-y; color: #fff; }
#footer td { vertical-align: middle; color: #fff; }
#footer td.f-note { padding: 0 0 0 40px; font-size: 10px; }
#footer td.f-note p { margin: 0; padding: 0; }
#footer td#copyright { height: 54px; width: 249px; padding: 0 0 0 40px; font-size: 11px; }
#footer a:link, #footer a:visited { color: #fff; text-decoration: underline; }
#footer a:hover { text-decoration: none; }

/* ---- standalone price lists (Excel exports) inside the frame ---- */
.layer-price { position: relative; overflow-x: auto; }
/* the two banners of the price lists were pictures with a title and a subtitle; now they are text */
.price-banner { position: relative; box-sizing: border-box; display: block; border: 2px solid #039; background: #fff; font-family: Arial, Helvetica, sans-serif; color: #333; }
.price-banner:before { content: ""; position: absolute; left: 18px; top: 20%; width: calc(var(--h) * .6); height: calc(var(--h) * .6); background: #03A4E1; clip-path: polygon(0 100%, 50% 0, 100% 100%, 62% 100%, 50% 55%, 38% 100%); }
.price-banner b { position: absolute; left: calc(38px + var(--h) * .6); top: 28%; transform: translateY(-50%); white-space: nowrap; color: #039; font: 900 calc(var(--h) * .2)/1 "Arial Black", Arial, Helvetica, sans-serif; }
.price-banner span { position: absolute; left: calc(38px + var(--h) * .6); top: 62%; transform: translateY(-50%); white-space: nowrap; color: #333; font: normal calc(var(--h) * .12)/1 Arial, Helvetica, sans-serif; }

/* ---- small screens (the frame follows the viewport; the header keeps the wordmark, the tagline, the menu and the search) ---- */
@media (max-width: 760px) {
  table#main { table-layout: fixed; }
  #head { height: auto; padding: 0 0 6px; background: linear-gradient(#0a9de0, #0DA6E6 55%, #0692d6); }
  html > body #head_fon, html > body #head_fon2, html > body #head_1, html > body #head_2, html > body #head_3, html > body #head_4, html > body #head_5 { background: none; width: 0; height: 0; }
  html > body #logo, #logo { position: relative; display: block; width: 100%; max-width: 413px; height: 0; padding-bottom: 42%; background-position: 0 0; background-size: 100% auto; }
  #tagline { position: relative; top: auto; left: auto; display: block; margin: 4px 0 0 12px; font-size: 24px; line-height: 28px; transform: none; white-space: normal; }
  #menu_container { position: static; width: auto; height: auto; }
  ul#menu { width: auto; height: auto; margin: 10px 12px 4px; overflow: hidden; }
  ul#menu li { width: 50%; height: 24px; box-sizing: border-box; background-position: 0 6px; }
  #search_container { position: static; padding: 6px 12px 4px; }
  #search_container form { display: block; text-align: left; }
  #search_container input { width: calc(100% - 52px); box-sizing: border-box; height: 24px; padding: 3px 5px; }
  #search_container input#b1 { width: 20px; height: 20px; margin: 0 0 0 8px; padding: 0; }
  #content_container { padding: 14px 10px 14px; }
  .crumbs:not(:empty) { padding-left: 2px; }
  /* tent and news: the two columns stack */
  #content, #content > tbody, #content > tbody > tr, #content > tbody > tr > td#text, #content > tbody > tr > td#block_right { display: block; width: auto; box-sizing: border-box; }
  #content td#text, #content td#block_right { padding: 0 12px 10px; overflow-x: auto; }
  #content td#text h1, #content td#block_right div.h1, #content td#text div.h1 { margin-left: -12px; margin-right: -12px; }
  #content td#text img, #content td#block_right img { max-width: 100%; height: auto; }
  #content td#block_right { margin-top: 10px; }
  #content td#block_right table { width: auto !important; height: auto !important; }
  #footer { height: auto; }
  #footer table, #footer tbody, #footer tr, #footer td { display: block; width: auto; height: auto; background-image: none; }
  #footer table { padding: 6px 0; }
  #footer td.f-note { padding: 4px 12px 0; }
  #footer td#copyright { width: auto; padding: 4px 12px 6px; }
  .price-banner { max-width: 100%; }
}