/* Замінник CSS теми YOOtheme Pinboard (summerschool.ssa.org.ua, 2009–2012): template.css.php, mootools,
   картинки шапки в Wayback не збереглися зовсім. Мінімальний макет під легасі-розмітку: шапка, горизонтальне
   меню з випадними підменю, ліва колонка «наліпок», основний текст, підвал. Підключається лише на сторінках
   з yoo_pinboard (static.extraCss у legacy.config.json). Кольори — з логотипа AACIMP 2015. */

body { margin: 0; background: #eef3f6; color: #333; font: 14px/1.6 "Segoe UI", Arial, Helvetica, sans-serif; }
a { color: #1f7db3; }
a:hover { color: #d0462f; }
img { max-width: 100%; height: auto; }
.wrapper { max-width: 1080px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
#absolute { display: none; }

/* шапка: картинок логотипа нема — назва текстом */
#page-header { background: #1f7db3; color: #fff; }
#header { position: relative; padding: 18px 0 0; }
#header img.correct-png { display: none; }
#logo a { display: inline-block; color: #fff; text-decoration: none; font-size: 26px; font-weight: 300; letter-spacing: .02em; }
#logo a::before { content: "AACIMP Summer School"; }
#logo { padding: 4px 0 12px; }
#toolbar, #headerbar { display: none; }

/* меню: верхній рівень у рядок, підменю — на наведення */
#menu { order: 2; }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu > ul.menu { display: flex; flex-wrap: wrap; gap: 2px; }
#menu > ul.menu > li { position: relative; }
#menu > ul.menu > li > a, #menu > ul.menu > li > span { display: block; padding: 10px 14px; color: #fff; text-decoration: none;
  text-transform: uppercase; font-size: 13px; letter-spacing: .04em; background: rgba(255,255,255,.08); }
#menu > ul.menu > li:hover > a, #menu > ul.menu > li:hover > span { background: #fff; color: #1f7db3; }
#menu li ul { display: none; position: absolute; z-index: 20; left: 0; top: 100%; min-width: 220px; background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.15); padding: 6px 0; }
#menu li li ul { left: 100%; top: -6px; }
#menu li:hover > ul { display: block; }
#menu li li { position: relative; }
#menu li li a, #menu li li span { display: block; padding: 5px 14px; color: #1f7db3; text-decoration: none; font-size: 13px; }
#menu li li span { color: #888; }
#menu li li:hover > a { background: #eef3f6; }

/* тіло: ліва колонка + текст */
#page-body { padding: 20px 0 0; }
#middle .background { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
#breadcrumbs { flex: 1 0 100%; font-size: 12px; color: #777; }
#breadcrumbs span + span::before { content: " › "; }
#left { flex: 0 0 240px; }
#main { flex: 1 1 500px; min-width: 0; background: #fff; padding: 20px 26px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
#left .module { background: #fffbe6; border-left: 4px solid #e8b400; padding: 12px 14px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
#left .mod-note .module { background: #fff; border-left-color: #1f7db3; }
#left h3.header { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #1f7db3; }
#left h3 .color { color: #d0462f; }
#left h5, #left h6 { margin: 8px 0 2px; font-size: 13px; }
#left ul { margin: 4px 0 !important; padding-left: 18px; }
#main h1.title { margin: 0 0 14px; font-size: 26px; font-weight: 400; line-height: 1.3; }
#main h1.title a { color: #222; text-decoration: none; }
#main h2, #main h3 { font-weight: 500; color: #1f7db3; }
#main table { border-collapse: collapse; max-width: 100%; }
#main td, #main th { padding: 4px 8px; vertical-align: top; }
#main object, #main embed, #main iframe { max-width: 100%; }

/* підвал */
#footer { clear: both; text-align: center; color: #666; font-size: 12px; padding: 24px 0 10px; }
#footer a.anchor { display: none; }

@media (max-width: 720px) {
  #left { flex-basis: 100%; order: 2; }
  #main { padding: 16px; }
  #menu li ul { position: static; box-shadow: none; }
}