/*
 * @(#) mediaqueries.css Algem Web App 1.6.2 08/05/17
 *
 * Copyright (c) 2015-2017 Musiques Tangentes. All Rights Reserved.
 *
 * This file is part of Algem Web App.
 * Algem Web App is free software: you can redistribute it and/or modify it
 * under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Algem Web App 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 Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Algem Web App. If not, see <http://www.gnu.org/licenses/>.
*/
/*
    Created on : 11 avr. 2016, 15:04:00
    Author     : <a href="mailto:jmg@musiques-tangentes.asso.fr">Jean-Marc Gobat</a>
*/
@font-face {
  font-family: 'PT Sans Narrow';
  src: url('../fonts/ptn57f-webfont.eot');
  src: url('../fonts/ptn57f-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/ptn57f-webfont.woff2') format('woff2'),
    url('../fonts/ptn57f-webfont.woff') format('woff'),
    url('../fonts/ptn57f-webfont.ttf') format('truetype'),
    url('../fonts/ptn57f-webfont.svg#pt_sans_narrowregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@media only screen
and (min-width : 1600px)
{
  .schedule_col {width: 120px}
  #title_col p {width: 121px}
  .centered {width: 40%}
}
/*smartphones*/
@media only screen
and (max-device-width : 1024px)
{
  .header-top {height: 7%}
  /*#grid, #canvas, #title_col {top: 7%}*/
  #planning{top: 7%}
  .schedule_col {width: 80px}
  #title_col p {width: 81px}
  #datepicker, .week-date {width: 5.5em;font-size: small}
  #previous:link, #previous:visited, #previous:hover, #previous:active, #next:link, #next:visited, #next:hover, #next:active{font-size: 2em}
}
@media only screen
and (max-width : 1280px)
and (max-height : 800px)
{
  .header-top {height: 8%}
  #planning{top: 8%}
  /*#grid, #canvas, #title_col {top: 8%}*/
}
@media only screen
and (max-width : 600px)
and (orientation : portrait) {
  .header-top {height: 65px}
  .header-top > nav {padding:0.5em 0}
  /*#grid, #canvas, #title_col {top: 65px}*/
  #planning{top: 65px}
  h1 {font-size: 1.6em;text-align: left;line-height: 1em;width: 90%;}
  .schedule_col {width: 48px}
  #title_col p {width: 49px}
  .labels {font-size: 0.65em}
  table.mobile {
    overflow-x: auto;
    display: block;
  }
  .centered {width: 100%}
  #canvas, .title_col, #title_col p {font-family: 'PT Sans Narrow';}
  .closing-bar a.close-link {
    font-size: 1.45em;
    padding: 0 0.5em;
  }
  #info-bar .close-link > .fa-close,
  #help-panel .close-link > .fa-close,
  #login-panel .close-link > .fa-close {
    padding: 0;
    font-size: 1.45em;
  }
  #help-menu { float: none; width:100%;}
  .help-content{margin-left: 0}
  #bars {padding: .15em .1em .15em 0;}
}

@media only screen
and (max-width : 480px)
and (orientation : portrait) {
  .option-panel {display: block}
}

@media only screen
and (max-width : 320px)
and (orientation : portrait) {
  .header-top {height: 60px}
  /*#grid, #canvas, #title_col {top: 60px}*/
  #planning{top: 60px}
  .header-top > nav {padding:0.5em 0;}
  body {font-size: 0.9em}
  h1 {font-size: 1.6em;text-align: left;line-height: 1em}
  h2 {font-size: 1.35em}
  h3 {font-size: 1.3em}
  h4 {font-size: 1.2em}
  h5 {font-size: 1.1em}
  h6 {font-size: 1em}
  .schedule_col {width: 45px}
  #title_col p {width: 46px}
  .schedule {
    font-size: xx-small;
    line-height: 1em;
  }
  .labels {font-size: 0.65em;}
  .closing-bar a.close-link {font-size: 1.4em}
  #info-bar .close-link > .fa-close,
  #help-panel .close-link > .fa-close,
  #login-panel .close-link > .fa-close {
    font-size: 1.4em;
  }
  #help-menu { float: none; width:100%;}
  .help-content{margin-left: 0}
}
@media only screen
and (max-width : 800px)
and (orientation : landscape) {
  .header-top {height: 60px}
  /*#grid, #canvas, #title_col {top: 60px}*/
  #planning{top: 60px}
  .schedule_col {width: 65px;}
  #title_col p {width: 66px}
  #canvas, .title_col, #title_col p {font-family: 'PT Sans Narrow';}
  h1 {font-size: 1.8em;text-align: left;line-height: 1em}
  h2 {font-size: 1.5em;}
  h3 {font-size: 1.4em;}
  h4 {font-size: 1.3em;}
  h5 {font-size: 1.2em;}
  h6 {font-size: 1em;}
  table.mobile {
    overflow-x: auto;
    display: block;
  }
  .centered {width: 100%;}
  #help-menu { float: none; width:100%;}
  .help-content{margin-left: 0}
}
@media only screen
and (max-height : 700px)
and (orientation : landscape) {
  .header-top {height: 60px}
  #planning{top: 60px}
}
@media only screen
and (max-width : 480px)
and (orientation : landscape) {
  .header-top {height: 60px}
  /*#grid, #canvas, #title_col {top: 60px}*/
  #planning{top: 60px}
  .schedule_col {width: 60px;}
  #title_col p {width: 61px }
  h1 {font-size: 1.8em;text-align: left;line-height: 1em}
  h2 {font-size: 1.5em;}
  h3 {font-size: 1.4em;}
  h4 {font-size: 1.3em;}
  h5 {font-size: 1.2em;}
  h6 {font-size: 1em;}
  table.mobile {
    overflow-x: auto;
    display: block;
  }
  .centered {width: 100%;}
  #help-menu { float: none; width:100%;}
  .help-content{margin-left: 0}
  .option-panel {display: block}
}