/*
 * Hitra mobilna prilagoditev profesorji.net (ne prenova izgleda).
 *
 * Portal je bil narejen s fiksnimi širinami v pikslih (#wrapper 950px,
 * #left_column 180px + #menu-layout 770px itd.). Tu teh postavitev ne
 * spreminjamo -- spodnja pravila veljajo IZKLJUČNO znotraj @media za ozke
 * zaslone, zato je izgled na namizju popolnoma nespremenjen.
 *
 * Cilj: uporabnost na telefonu (brez vodoravnega drsenja, berljiv tekst,
 * dovolj velike tipke), ne redizajn.
 *
 * Ta datoteka se naloži ZADNJA (za common/index/plain/main/moderation), zato
 * v večini primerov zadošča enaka ali višja specifičnost; !important je
 * uporabljen le tam, kjer izvorno pravilo uporablja ID selektor.
 */

@media screen and (max-width: 700px) {

  /* --- Osnove --- */

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-size: 14px;
    background-image: none;
    background-color: #333;
  }

  /* Ovojnica: iz fiksnih 950px v polno širino zaslona. */
  #wrapper {
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    background-image: none !important;
    background-color: #fff !important;
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    -webkit-border-bottom-left-radius: 0 !important;
    -webkit-border-bottom-right-radius: 0 !important;
  }

  /* --- Glava strani --- */

  /*
   * Logotip in iskalnik ostaneta v isti vrsti: logotip levo, iskalno polje
   * poravnano desno in široko 40 % glave.
   */
  #header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: auto !important;
    overflow: visible !important;
    padding: 8px 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #header #logo {
    float: none !important;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0 !important;
    padding-top: 3px;
    height: 24px;
    font-size: 16px;
  }

  #header #search-form {
    float: none !important;
    -webkit-flex: 0 0 40%;
    flex: 0 0 40%;
    margin: 0 0 0 auto !important;
  }

  /* Naslovnica nima #header -- tam je iskalni obrazec sam rdeča glava. */
  #logo {
    padding-top: 3px;
    font-size: 16px;
  }

  /*
   * 16px prepreči, da iPhone ob dotiku polja poveča celo stran.
   * Ozadje search_box.png je slika fiksne širine (~150px) s ponavljanjem,
   * ki se na polni širini vidi kot več belih kvadratkov -- zato tu
   * uporabimo navadno belo polje z obrobo.
   */
  #search-form input {
    width: 100% !important;
    height: 38px !important;
    padding: 0 8px !important;
    font-size: 16px !important;
    background: #fff !important;
    border: 1px solid #832100 !important;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  /*
   * Naslovnica nima #header -- iskalni obrazec je sam rdeča glava strani.
   * Iskanje je tu glavno dejanje strani, zato ostane čez celo širino,
   * logotip pa nad njim ob levem robu (#content sicer vse centrira).
   */
  #wrapper > #content > #search-form {
    padding: 10px;
    height: auto;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #wrapper > #content > #search-form #logo {
    display: block;
    top: 0;
    padding: 0 0 6px 0;
  }

  /* --- Postavitev z levim stolpcem (fakulteta / program) --- */

  /*
   * Seznam profesorjev je v kodi pred vsebino, ker je na namizju levi stolpec.
   * Na telefonu bi na vrhu zakrival vsebino, zato ovojnico prevedemo v
   * navpični flex in seznam z `order` potisnemo na konec -- brez posega v HTML.
   */
  #wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  #left_column {
    -webkit-order: 99;
    order: 99;
  }

  #left_column,
  #menu-layout {
    float: none !important;
    width: auto !important;
  }

  #left_column {
    font-size: 15px;
    border-top: 1px solid #ddd;
    padding-bottom: 8px;
  }

  #profesorji {
    float: none !important;
    margin: 8px 0 0 0 !important;
  }

  /* Večje tipke za dotik. */
  #profesorji li {
    padding: 9px 10px !important;
    border-bottom: 1px solid #eee;
  }

  #profesorji li a {
    display: block;
  }

  a#addprof {
    display: inline-block;
    margin: 8px 0 0 10px;
    font-size: 13px;
  }

  #predmeti {
    float: none !important;
    width: auto !important;
  }

  #predmeti ul {
    width: auto;
    font-size: 13px;
  }

  /* --- Vsebina --- */

  #content {
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #content h3.profesor {
    font-size: 22px;
  }

  h1 {
    font-size: 15px;
    padding: 6px 8px;
  }

  /* Tabele so tu uporabljene za postavitev v stolpce -- zložimo jih. */
  #content table,
  #content table tbody,
  #content table tr,
  #content table td {
    display: block;
    width: auto !important;
    margin: 0 !important;
  }

  #content table td {
    padding: 0 !important;
  }

  #content table.catlist td ul {
    margin-bottom: 0;
  }

  .catlist li,
  #content ul li {
    padding: 7px 0;
    line-height: 1.35;
  }

  table.last_subjects,
  table.top_professors,
  table.worst_professors {
    margin: 0 !important;
  }

  table.last_subjects td,
  table.top_professors td,
  table.worst_professors td {
    font-size: 15px;
    padding: 7px 0 !important;
  }

  /* --- Obrazci --- */

  form select,
  form input,
  form textarea,
  textarea {
    width: 100% !important;
    max-width: 100%;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  form input[type="text"],
  form input[type="email"],
  form input[type="password"],
  form select {
    height: 40px;
    padding: 0 8px;
  }

  form input[type="submit"] {
    width: 100% !important;
    height: 44px;
    font-size: 16px;
  }

  form input[type="checkbox"],
  form input[type="radio"] {
    width: auto !important;
    height: auto;
  }

  /* Zvezdice za ocenjevanje ostanejo kot so. */
  form input.professor-rating-star {
    width: auto !important;
    height: auto;
  }

  textarea {
    height: 130px;
  }

  #content table input,
  #content table select {
    width: 100% !important;
  }

  #error_explanation,
  .error_messages {
    width: auto !important;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #comment_description {
    width: auto;
    text-align: left;
  }

  /* --- Komentarji --- */

  .comment {
    width: auto !important;
    margin-left: 0 !important;
    margin-top: 14px;
  }

  .comment .chead {
    height: auto;
    overflow: visible;
    padding: 5px 6px;
    background-image: none;
    background-color: #fef5a6;
  }

  .comment .chead .name,
  .comment .chead .comment_rating {
    float: none;
    display: block;
    margin: 0;
  }

  .comment .text {
    background-image: none;
    background-color: #ffc;
    padding: 8px;
    line-height: 1.4;
  }

  .comment .stars {
    float: none;
    font-size: 34px;
    height: auto;
    padding-top: 0;
  }

  img.last-comment-photo {
    margin: 10px 10px 0 0;
  }

  /* --- Predstavitve (video / dokument) --- */

  #presentation_video,
  #presentation_scribd {
    float: none;
    width: auto;
    margin: 12px 0 0 0;
  }

  #presentation_video iframe,
  #presentation_video object,
  #presentation_video embed,
  #presentation_scribd iframe {
    max-width: 100%;
  }

  /* --- Slike --- */

  img {
    max-width: 100%;
    height: auto;
  }

  /* Zvezdice in logotip so ozadja fiksne velikosti -- pustimo jih pri miru. */
  #stars,
  #stars #active,
  #stars_c,
  #stars_c #active,
  .icon-novo,
  #downvote_treshold span.down {
    max-width: none;
  }

  /*
   * --- Pojavno okno (facebox) ---
   * facebox.js postavitev izračuna za namizje in jo zapiše kot inline slog,
   * zato je pri levem robu potreben !important. Vsebina okna je sicer fiksnih
   * 370px in na telefonu gleda čez desni rob zaslona.
   */

  #facebox {
    left: 0 !important;
    width: 100%;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #facebox .popup,
  #facebox table {
    width: 100%;
  }

  #facebox .body {
    width: auto;
  }

  #facebox-content {
    font-size: 14px;
  }

  /* --- Noga --- */

  #footer {
    padding: 12px 10px;
    font-size: 11px;
    line-height: 1.5;
  }

  /* --- Administracija --- */

  #content td {
    border: 0 !important;
    border-bottom: 1px solid #ddd !important;
    padding: 6px 0 !important;
  }
}

/*
 * Vmesna stopnja: tablice in ožja okna brskalnika (701-1000px). Portal je
 * zasnovan za 950px, zato bi se sicer pojavilo vodoravno drsenje. Postavitve
 * z dvema stolpcema tu NE zlagamo -- samo raztegnemo jo čez razpoložljivo
 * širino.
 */

@media screen and (min-width: 701px) and (max-width: 1000px) {
  #wrapper {
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    -webkit-border-bottom-left-radius: 0 !important;
    -webkit-border-bottom-right-radius: 0 !important;
  }

  /* Desni stolpec naj zapolni preostanek ob levem (ki ostane 180px). */
  #menu-layout {
    float: none !important;
    width: auto !important;
    overflow: hidden;
  }

  #content table td {
    width: auto !important;
  }

  table.last_subjects {
    margin-left: 20px !important;
  }

  table.last_subjects td {
    width: auto !important;
  }

  .comment {
    width: auto !important;
    margin-right: 20px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  textarea,
  #comment_description,
  #error_explanation,
  .error_messages {
    max-width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #presentation_video,
  #presentation_scribd {
    max-width: 100%;
  }

  #presentation_video iframe,
  #presentation_scribd iframe {
    max-width: 100%;
  }
}

/* Zelo ozki telefoni. */
@media screen and (max-width: 400px) {
  #content h3.profesor {
    font-size: 19px;
  }

  .comment .stars {
    font-size: 28px;
  }
}