/* SlackPack
 * Copyright (c) 2006-2023 Georgi D. Sotirov, gdsotirov@gmail.com
 *
 * This program is free software; you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
 # the Free Software Foundation; either version 2 of the License, or
 # (at your option) any later version.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU General Public License
 # along with this program; if not, write to the Free Software
 # Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 *
 * DESCRIPTION:
 * General styles for the web interface of SlackPack
 * Media: screen, print
 */

@media all {
  * {
    box-sizing: border-box;
  }

  aside#LeftBar ul, aside#RightBarNews ul, ul#HeaderMenu, ul.share-buttons {
    list-style-image: none;
    list-style-type: none;
  }
}

/* Phones */
@media only screen and (max-width: 600px) {
  a, a:link {
    text-decoration: none;
  }

  aside#LeftBar, aside#RightBar, aside#RightBarNews,
  main > section, main > section.News, main > section#Package {
    width: 100%;
  }

  aside#LeftBar li, ul#HeaderMenu li {
    padding: 1em;
    text-align: center;
  }

  aside#LeftBar ul, ul#HeaderMenu {
    padding-left: 0;
  }

  div#Head h1 {
    height: 80px;
    margin: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

  ul.share-buttons, ul.share-buttons li {
    display: inline;
  }
}

/* Tablets */
@media only screen and (min-width: 600px) {
}

@media screen, print {
  a, a:link {
    background-color: inherit;
    color: #00f;
  }

  a:visited {
    background-color: inherit;
    color: #639;
  }

  acronym:hover, abbr:hover, acronym[title], abbr[title] {
    border-bottom: 1px dotted #000;
    font: inherit;
  }

  blockquote:lang(en), q:lang(en) {
    quotes: '"' '"' "'" "'";
  }

  body {
    background: #eee;
    color: #000;
    font: normal normal normal 1em Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
  }

  blockquote, q {
    font-style: italic;
  }

  blockquote:lang(bg), q:lang(bg) {
    quotes: '\201E' '\201C' '\2019' '\2018';
  }

  blockquote:lang(en), q:lang(en) {
    /*quotes: '"' '"' "'" "'";*/
    quotes: '\201C' '\201D' '\2018' '\2019';
  }

  blockquote:before, q:before {
    content: open-quote;
  }

  blockquote:after, q:after {
    content: close-quote;
  }

  section#MirrorList h3 {
    text-align: center;
  }

  section#MirrorList table thead tr {
    background-color: #cce;
    color: inherit;
  }

  section#MirrorList table tr.even {
    background-color: #eee;
    color: inherit;
  }

  section#MirrorList td.last {
    background-color: #ddd;
    color: inherit;
  }

  div.row span.label, div.row span.input {
    float: left;
    margin: 0.2em;
    padding: 0.1em;
    width: 45%;
  }

  div.row span.label {
    clear: left;
    text-align: right;
  }

  img {
    border: none;
  }

  legend {
    font-weight: bold;
    font-style: italic;
  }

  h1 {
    font-size: 1.5em
  }

  h2 {
    font-size: 1.2em;
  }

  h3 {
    font-size: 1.1em;
  }

  p.copyright {
    background-color: inherit;
    color: #ddd;
    text-align: center;
  }

  p.text {
    text-align: justify;
  }

  table#DstrbtnByArch, section#MirrorList table {
    margin-left: auto;
    margin-right: auto;
  }

  table#DstrbtnByArch, section#MirrorList table {
    border-spacing: 0;
  }

  table#DstrbtnByArch caption {
    font-size: large;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0.5em;
    text-align: center;
  }

  table#DstrbtnByArch td, section#MirrorList table td {
    padding: 0 1em;
    text-align: center;
  }

  section#Donate p {
    margin: 0.5em;
  }

  section#MirrorList table td {
    padding: 0.5em 1em;
  }

  section#MirrorList table th {
    padding: 0.1em 1em;
  }

  /* Error: Pseudo element :last-child is CSS 3! */
  table#DstrbtnByArch td:last-child {
    text-align: right;
  }

  table.donate {
    border-collapse: collapse;
    float: left;
    height: 22em;
    margin: 0.5em;
    width: 18em;
  }

  table.donate td {
    border: 1px solid #00c;
    padding: 0.5em;
    vertical-align: top;
  }

  table.donate th {
    background-color: #00c;
    border: 1px solid #00c;
    color: #fff;
    height: 2em;
  }

  table.list {
    border-collapse: collapse;
    width: 100%;
  }

  table.list th {
    background-color: #ccc;
    color: inherit;
    margin: 0;
    padding: 0.1em 0.5em;
    text-align: left;
  }

  table.list tr.security_fix {
    background-color: #f99;
  }

  table.list td {
    margin: 0;
    padding: 0.1em 0.5em;
  }

  .error {
    background-color: #f00;
    color: #fff;
    font-weight: bold;
    padding-top: 2em;
    padding-bottom: 2em;
  }

  .warn_box {
    background-color: #f93;
    color: inherit;
    padding: 1em;
    border: 1px dashed #f00;
  }

  .sec_fix_box {
    background-color: #f99;
    color: inherit;
    padding: 1em;
    border: 1px dashed #f66;
  }

  .warn {
    background-color: inherit;
    color: #f93;
  }

  .info {
    background-color: inherit;
    color: #009;
  }

  .correct {
    background-color: inherit;
    color: #090;
  }

  .wrong {
    background-color: inherit;
    color: #900;
  }

  .left {
    text-align: left;
  }

  .center {
    text-align: center;
  }

  .right {
    text-align: right;
  }
}

@media screen {
  div#Logo {
    float: left;
    margin: 0;
    padding: 0.5em;
  }

  header.Page {
    background-color: #00c;
    border-bottom: 2px solid #000;
    color: #fff;
  }

  ul#HeaderMenu li {
    background-color: #ccc;
    color: #333;
    font-size: large;
    font-weight: bolder;
  }
}

/* Desktops */
@media only screen and (min-width: 768px) {
  a acronym:hover, a abbr:hover a acronym[title], a abbr[title] {
    cursor: pointer;
  }

  acronym:hover, abbr:hover, acronym[title], abbr[title] {
    cursor: help;
  }

  a:hover, a:focus {
    background-color: #eef;
    color: inherit;
  }

  a:active {
    background-color: inherit;
    color: #e00;
  }

  footer {
    clear: both;
    margin: 3em 0.5em 0.5em 0.5em;
  }

  div#Foot {
    background-color: #ddf;
    border-top: 1px solid #00f;
    border-bottom: 1px solid #00f;
    color: inherit;
    padding: 0 0.5em;
  }

  header.Page {
    height: 85px;
    margin: 0;
    padding: 0;
  }

  header.Page h1 {
    margin: 0;
    margin-bottom: 0.7em;
    padding: 0.5em;
  }

  header.Page p {
    margin: 0.1em;
  }

  aside#LeftBar {
    float: left;
    width: 16.5%;
  }

  aside#LeftBar section {
    border: 1px solid #00c;
    margin-bottom: 1em;
  }

  aside#LeftBar h2:first-child {
    margin-top: 0;
  }

  aside#LeftBar h2, aside#RightBar h2, aside#RightBarNews h2 {
    background-color: #00c;
    color: #fff;
    padding: 0.1em;
  }

  aside#RightBarNews h2 {
    margin: 0;
  }

  aside#LeftBar ul {
    margin: 0.5em;
    padding-left: 0;
  }

  div#Head h1 {
    float: left;
  }

  div#Logo {
    float: left;
    margin: 0;
    padding: 0.5em;
  }

  main {
    display: block; /* For IE 11 and older */
    padding: 0.5em 0.5em 0.5em 0.5em;
  }

  main h2:first-child {
    margin-top: 0;
  }

  main > section {
    float: left;
    padding-left: 0.5em;
    width: 82%;
  }

  main > section.News {
    padding-right: 0.5em;
    width: 65%;
  }

  main > section#Package {
    width: 57%;
  }

  article p {
    text-align: justify;
  }

  aside#RightBarNews {
    float: left;
    width: 16.5%;
  }

  aside#RightBarNews section {
    border-left: 1px solid #00c;
    margin-bottom: 1em;
  }

  aside#RightBarNews ul {
    margin: 1em 0;
    padding: 0 0 1em 1em;
  }

  aside#RightBar {
    float: left;
    padding-left: 0.5em;
    width: 25%;
  }

  div.row {
    clear: right;
  }

  table.list tr:hover {
    background-color: #ddd;
  }

  table.list tr.security_fix:hover {
    background-color: #f66;
  }

  td.matching_contents {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 300px;
    white-space: nowrap;
  }

  td.matching_contents:hover {
    overflow: visible;
    white-space: normal;
  }

  ul#HeaderMenu {
    margin: 0;
    padding: 0 0.2em;
    position: absolute;
    right: 1em;
    top: 0;
    width: auto;
  }

  ul#HeaderMenu a, ul#HeaderMenu a:link, ul#HeaderMenu a:visited {
    background-color: inherit;
    color: inherit;
    padding: 0.1em 0.2em;
    text-decoration: none;
  }

  ul#HeaderMenu a:hover, ul#HeaderMenu a:focus {
    background-color: #eee;
    color: inherit;
  }

  ul#HeaderMenu li {
    background-color: #ccc;
    color: #333;
    font-size: large;
    font-weight: bolder;
    float: left;
    margin: 0 0.1em;
  }

  ul.share-buttons {
    padding: 0;
    margin: 1px;
  }

  ul.share-right {
    float: right;
  }

  ul.share-buttons li {
    display: inline;
  }

  ul.share-buttons img {
    width: 16px;
  }

  .float-clear-right {
    float: right;
    clear: right;
  }
}

@media print {
  aside#LeftBar, aside#RightBarNews {
    display: none;
  }

  nav, p.nav, .syn-links {
    display: none;
  }

  table {
    border-top: 1px solid #000;
    border-right-style: none;
    border-bottom-style: none;
    border-left: 1px solid #000;
  }

  table.list tr.security_fix {
    color: #f00;
    background-color: inherit;
  }

  th, td {
    border-top-style: none;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left-style: none;
  }

  ul.share-buttons {
    display: none;
  }
}