/*
    This file is part of Workout Manager

    Workout Manager 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.

    Workout Manager 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 Workout Manager. If not, see <http://www.gnu.org/licenses/>.
*/

/**************************************************************
 *
 * This file contains custom classes and styles for the mobile version
 *
 **************************************************************/

body {
  background-color: white;
  padding-top: 50px;
}

/*
 * Set the sizes for the background where the muscles are shown on the exercise view page
 */
div.muscle-background {
  width: 150px;
  height: 276px;
  background-size: 150px;
  background-repeat: no-repeat;
}

/**************************************************************
 * Muscle overview
 **************************************************************/
.muscle-list,
.exercise-overview {
  padding-left: 0;
}

/**************************************************************
 * Headers
 **************************************************************/
h1 {
  font-size: 220%;
}

h2 {
  font-size: 180%;
}

h3 {
  font-size: 150%;
}

h4 {
  font-size: 133.33%;
}

h5 {
  font-size: 116.67%;
}

h6 {
  font-size: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
  font-weight: 300;
}

/**************************************************************
 * Header
 **************************************************************/

/*
 * Add a shadow to the application name
 */
header h1 {
  text-shadow: 2px 3px 3px #292929;
  font-family: "Open Sans Bold", Arial, Helvetica, sans-serif;
  font-weight: 300;
}

/**************************************************************
 * Form errors
 **************************************************************/
.form-error,
input.form-error {
  color: rgb(136, 0, 0);
}

.form-error .ui-input-text {
  border-color: rgb(136, 0, 0);
}

/**************************************************************
 * Success, info and other alert boxes
 **************************************************************/
.success {
  background: #b7f774;
}

.warning {
  background: rgb(252, 175, 62);
  text-shadow: none;
}

/**************************************************************
 * Other classes
 **************************************************************/
.float-left {
  float: left;
  display: inline;
}

.align-right {
  text-align: right;
}

/**************************************************************
 * Gym mode pages
 **************************************************************/
div#timer-container ul,
div#timer-container h2 {
  padding: 0;
  margin: 0;
}

div#timer-container a.wide_link {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  width: 95%;
}

div#timer-container ul#workout-timer li {
  float: left;
  list-style: none;
  position: relative;
}

div#timer-container {
  padding: 13px;
  clear: both;
  overflow: hidden;
  margin: 0 auto;
  display: block;
}

div#timer-container canvas,
div#timer-container div.filler_div {
  height: 150px;
  margin-top: 1em;
  margin-bottom: 30px;
}

div#timer-container canvas {
  width: 150px;
}

div#timer-container div.sub_header {
  position: absolute;
  bottom: 65px;
  width: 95%;
}

div#timer-container div.sub_header a {
  width: 90%;
}

div#timer-container div.sub_header h2 {
  font-size: 300%;
}

div#timer-container .bottom_buttons {
  position: absolute;
  bottom: 12px;
  width: 100%;
}

div#timer-container a.bottom_button {
  position: absolute;
  bottom: 12px;
}

div#timer-container div.progress-bar {
  position: absolute;
  bottom: 0;
  width: 99%;
  height: 6px;
  border-radius: 3px;
  background-color: #eeeeec;
  border: 1px solid gray;
}

div#timer-container div.progress-bar span {
  height: 6px;
  border-radius: 3px;
  border: 1px solid gray;
  position: absolute;
  bottom: -1px;
  left: -1px;
  background-color: #204a87;

  /* background-color: rgb(170, 170, 170); */
}
