/*
 * Zakladni Styl FI MUNI
 * Autor: Jan Rezac - Filosof
 *
 */
/*========== [mobil] ========================================================*/

@media only screen and (max-width : 600px) {

  div#header #fimunilogo {
    display: none;
  }

  .mobileOnly {
    display: block;
  }

  .mobileHide {
    display: none;
  }

  div#innerSearch input.txt {
    margin-bottom: 3px;
  }
  div#innerSearch input.ss {
    float: left;
  }

  body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address, body, table, th, td, div.appl  {
    font-size: 13px;
  }
  h1 {
    font-size: 18px;
  }
  h2 {
    font-size: 15px;
      padding-bottom: 0;

  }
  h3 {
    font-size: 13px;
  }



  body {
    background: #fff;
  }
  div#mWrap {
    background: #fff;
  }
  div#main {
    width: 100%;
  }
  div#header {
    height: 62px;
  }
    div#logo {
      top: 8px;
      left: 9px;
    }
    div#isLinks {
      display: none;
    }
    div#logo {
      width: 65%;
      max-width: 225px;
      position: relative;
      top: auto; left: auto; right: auto; bottom: auto;
      height: 61px;
      margin-left: 9px;
    }
      div#logo span {
        width: auto;
        background: url(../images2013/new/logo-fi-small.png) 0 50% no-repeat;
        background-size: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: auto;
      }
    div#header::after {
      display: none;
    }
    div#altNav a[href="#mm"] {
    position: absolute;
    left: auto;
    right: 9px;
    top: 10px;
    width: 40px;
    height: 40px;
    background-color: yellow;
    text-indent: -9000px;
    background: url(../images2013/new/ico/mobileMenu.png) 0 0 no-repeat;
    z-index: 100000;
    }
    .themeImage {
      margin-top: 0;
    }

  div#innerText {
    padding: 10px 10px 10px 10px;
  }
  div.appl {
    display: none;
  }
  div.info, div.bread {
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 0;
  }
  div#wrapper {
    background: #fff;
  }

  div#text {
   float: none;
   width: auto;
  }
    .withBorder {
      padding: 8px 0 0 0;
      background: none;
      position: relative;
    }
    .withBorder:before {
      display: block;
      content: "";
      width: 100%;
      height: 13px;
      padding: 0 10px 0 10px;
      position: absolute;
      top: -2px;
      left: -10px;
      background: red;
      background: url(../images2013/new/bg/mobileSection.png) 0 0 repeat-x;
    }
    .withBorder:before * {
      position: relative;
      z-index: 100;
    }
  div#nav {
   float: none;
   width: auto;
  }
    .navigationHeader {
      padding: 5px 10px 10px 10px;
    }
      .navigationHeader .column1 {
        width: 40%;
        float: left;
      }
      .navigationHeader .column2 {
        width: 40%;
        float: right;
        text-align:  right;
      }
      .backToMain {
        position: relative;
        padding-left: 17px;
      }
      .backToMain:before {
        display: block;
        content: "";
        width: 13px;
        height: 13px;
        background: url(../images2013/new/ico/circleArrowTop.png) 0 0 no-repeat;
        position: absolute;
        top: 2px;
        left: 0;
      }
    ul#mm a, ul#mm a:link, ul#mm a:visited {
      padding: 6px 10px 7px 10px
    }
    #innerNav div.contact {
      display: none;
    }
    #innerNav div.adv {
      display: none;
    }

  .subHeader .slidesList {
    width: 100% !important;
    padding-bottom: 42.5%; 
  }
  .subHeader .slidesList .slideItem {
    width: 100% !important;  
    height: 100%;
  }
  .subHeader .slidesList .slideItem .column2 {
    width: 100% !important;  
    float: none;
    height: auto;
    max-height: 257px;
  }
    .subHeader .slidesList .slideItem .column2 img {
      max-height: 257px;
      max-width: 100%;
    }
  .subHeader .slidesList .slideItem .column1 {
    width: 100% !important;  
    height: auto;
    float: none;
    padding-bottom: 25px;

    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .subHeader .slidesPaginator .item {
    width: 15px;
    height: 15px;
    margin-left: 10px;
  }
  .subHeader .slidesList .slideItem .column1 .inner {
    padding: 5px 10px 15px 10px;
  }
  .subHeader .slidesList .slideItem .column1 .row1 {
    font-size: 1.1em;
    margin-bottom: 0;
  }
  .subHeader .slidesList .slideItem .column1 .row2 {
    font-size: 1.0em;
  }
  
  
  .subHeader .slidesPaginator {
    bottom: 11px;
    left: 10px;
  }

  .HPBottomSection .columns .column2 .slidesPaginator .item {
    width: 15px;
    height: 15px;
    margin-left: 5px;
  }

  div.bread, div.nav1 {
    display: none;
  }
  div#footer {
    font-size: 0.8em;
    padding-left: 10px;
    padding-right: 10px;
    position: static;
  }
    div.f0 { 
      display: block;
    }
    div.f1 {
      display: none;
     float: none;
     margin-bottom: 20px; 
    }
    div.f2 {
     float: none;
     text-align: center;
    }
      div#footer .socialButtons a.twitter {
        margin-left: 0;
      }

    div#footer .muniLogo {
      width: auto;
      height: auto;
      background: #FCFCFC;
      position: static;
      margin-left: 0;
      text-align: center;
    }
      div#footer .muniLogo img {
        margin: 20px auto 30px auto;
      }

    div#sl {
      position: static;
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
      padding: 0 10px 0 10px;
    }
    div#innerSearch {
      margin-bottom: 15px;
    }
    div#innerSearch input.txt {
      display: block;
      width: 100%;
      float: none;
    }
    div#innerSearch input.ss {
      display: block;
      width: 100%;
      text-align: center;
      float: none;
    }
    div#lang {
      clear: both;
      position: static;
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
    }
      div#lang a, div#lang a:link, div#lang a:visited {
        display: block;
        padding: 5px 6px 7px 6px;
        cursor: pointer;
        text-align: center;
        overflow: hidden;
        text-decoration: none;
        color: #1f1a17;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        height: 32px;
        border: 1px solid #C7C7C7;
        -moz-box-shadow: 0 0 2px rgba(0,0,0,.14), inset 0 2px 0 rgba(255,255,255,.59);
        -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .14), inset 0 2px 0 rgba(255, 255, 255, .59);
        box-shadow: 0 0 2px rgba(0, 0, 0, .14), inset 0 2px 0 rgba(255, 255, 255, .59);
        background: #F9F9F9 url(../images2013/new/bg/input-ss.png) 0 0 repeat-x;
        background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .05) 0.5%, rgba(255, 255, 255, .05) 99.5%);
        background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .05) 0.5%, rgba(255, 255, 255, .05) 99.5%);
        background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .05) 0.5%, rgba(255, 255, 255, .05) 99.5%);
        background-image: linear-gradient(bottom, rgba(0, 0, 0, .05) 0.5%, rgba(255, 255, 255, .05) 99.5%);
      }



    div.div1 {
      background: none;
    }
    div.col1 {
      float: none;
      width: auto;
      margin: 0 0 20px 0;  
    }
    div.col2 {
      margin: 0 0 0 0;
    }


    .HPSection {
      background: none;
    }
    .HPLinks .header .tabs {
      float: none;
      width: 100%;
      text-align: left;
      position: static;
      bottom: auto;
      margin-bottom: 15px;
    }
      .HPLinks .header .tabs  a {
        display: block;
        border-color: #ddd;
      }
      .HPLinks .header .tabs  a:first-child {
        margin-bottom: -1px;
      }
      .HPSection .header h2 {
        margin-bottom: 5px;
      }
      .HPLinks .header h2 {
        float: none;
        margin-bottom: 5px;
      }
      .HPNews .bottom {
        padding: 0;
      }
      .HPLinks .columns .column1,
      .HPLinks .columns .column2,
      .HPLinks .columns .column3 {
        width: auto;
        float: none;
        margin: 0;
      }
      .HPLinks .columns .column1 a,
      .HPLinks .columns .column2 a,
      .HPLinks .columns .column3 a{
        margin: 5px 0 5px 0;
      }
      .HPNews .bottom .column1 {
        width: auto;
        float: none;
        margin: 0 0 10px 0;
      }
      .HPNews .bottom .column2 {
        width: auto;
        float: none;
        margin: 0 0 0 0;
        text-align: left;
      }
      .HPBottomSection .columns .column1 {
        width: auto;
        float: none;
        margin: 0 0 20px 0;
      }
      .HPBottomSection .columns .column2 {
        width: auto;
        float: none;
        margin: 0 0 20px 0;
      }


      ul#mm ul a, ul#mm ul a:link {
        font-size: 13px;
        padding-left: 25px;
        padding-top: 3px;
        padding-bottom: 3px;
      }
        ul#mm ul a.active::before {
          left: 14px;
          top: 10px;
        }

        ul#mm ul ul a, ul#mm ul ul a:link {
          font-size: 11px;
          padding-left: 35px;
        } 
        ul#mm ul ul a.active::before {
          left: 25px;
          top: 4px;
        }


}


@media only screen and (max-width : 440px) {

  div.wrap3 div.lhalf, div.wrap3 div.rhalf, div.wrap4 div.lhalf, div.wrap4 div.rhalf {
    width: auto;
    float: none;
    margin-bottom: 10px;
  }

  div.lhalf {
    width: auto;
    float: none;
  }
  div.rhalf {
    width: auto;
    float: none;
  }
  div.wrap1 {
    background: none;
  }
  div.wrap2  {
    background: none;
  }
  div.wrap2 div {
    float: left;
    width: auto;
    margin-right: 0;
  }

}
