@import url(//fonts.googleapis.com/css?family=Open+Sans);

body {
  padding: 20px;
  padding-top: 0px;
}

/* Schedule */
#schedule {
  width: 100%;
  font-family: 'Open Sans';
}

div.icons {
  float: right;
  width: 300px;
}

.printerIcon {
  margin-right: 10px;
}

div.menu {
  margin-bottom: 10px;
}

div.selections {
  margin-top: 10px;
}

div.selections select {
  margin-bottom: 5px;
}

.messageText {
  margin-bottom: 20px;
}

div.top_info_message {
  margin-bottom: 10px;
}

ul.day {
  width: 13.4%;
  float: left;
  list-style: none;
  padding: 0px;
  margin: 0px;
  margin-right: 1%;
}

ul.day:last-child {
  margin-right: 0%;
}

ul.day li.header {
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

ul.day li {
  margin: 0px;
  padding: 0px;
  clear: both;
  margin-bottom: 5px;
}
ul.day li:last-child div.right {
  /*border-bottom: 0px;*/
}

ul.day.dimmed,ul.day li.dimmed {
  opacity: 1.0;
}

ul.day li.cancelled {
  opacity: 0.5;
}


div.left {
  border-right-width: 0px;
  border-bottom-width: 5px;
  border-bottom-style: solid;
  padding: 3px;
}
div.activity {
  font-weight: bold;
  font-family: Arial;
}
div.instructor {
  /*color: #999;*/
}
div.right {
  width: 100%;
  background-color: white;
  padding: 3px;
  padding-left: 1%;
  padding-right: 1%;
}

div.clock {
  padding: 2px;
  margin-bottom: 0px;
}

span.available {
  float: right;
  text-align: center;
  width: 21px;
  height: 21px;
  margin-right: 1px;
  font-size: 12px;
  padding-top: 1px;
  margin-top: 0px;
  /*color: rgb(0, 167, 61);*/
  border-radius: 25%;
  background-color: white;
  border: 0px;
}

span.available a:hover {
  background-color: #eaeaea;
}

span.available.not_logged_in {
  padding-top: 2px;
}

span.available a {
  border-radius: 50%;
  background-color: white;
  display: block;
  height: 100%;
  width: 100%;
  color: rgb(0, 167, 61);
  font-size: 12px;
  padding-top: 1px;
}

span.available.admin a {
  border-radius: 0px;
  background-color: transparent;
}

span.available img {
  width: 23px;
  height: 23px;
  position: relative;
  top: -3px;
  left: -2px;
}

span.available.full {
}
span.available.waitlist a {
}
span.available a {
  border: 0px solid rgba(255,255,255,0);
}
span.available.is_available a{
  border: 0px solid rgb(0, 167, 61);
}

span.available.available_full a > span.available_number, span.available.waitlist a > span.available_number {
  color: rgb(255, 93, 102);
}
span.available a:hover {
  text-decoration: none;
}

span.available > span.available_number,div.available > span.available_number {
  color: rgb(0, 167, 61);
}

span.available.available_full > span.available_number,div.available.available_full > span.available_number {
  color: red;
}

span.available.is_available a span.available_number,div.available.is_available a span.available_number {
  display: inline;
}

button {
  width: auto;
  margin-bottom: 5px;
}

/* Forms */
#forms {
  width: 100%;
  max-width: 350px;
  margin: 0px auto;
  text-align: center;
  font-family: 'Open Sans';
}


/* Reservation */

#reservation {
  width: 100%;
  max-width: 300px;
  margin: 0px auto;
  margin-top: 20px;
  text-align: center;
  font-family: 'Open Sans';
}

#reservation h1 {
  font-weight: normal;
  font-size: 26px;
}

#reservation p.instructor {
  color: #b0b0b0;
}

#reservation p.capacity {
  color: rgb(115,194,119);
}

#reservation span.instructorIcon img{
  width: 22px;
  height: 22px;
  top: 0px;
  margin-right: 5px;
  position: relative;
  vertical-align: text-bottom;
}

#reservation .order {
}

#reservation .order input[type='submit'] {
  background: none;
  border: none;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 0px;
  font-size: 20px;
  cursor: pointer;
  font-family: 'Open Sans';
}

#reservation p.cancel {
  margin-top: 20px;
}

#forms input[type="text"],input[type="password"] {
  width: 100%;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px;
  font-size: 14px;
  text-align: center;
  font-family: Arial;
}

#helpTextLink {
  margin-left: 5px;
}

a.admin-link {
  position: relative;
  top: 18px;
  left: 1px;
}

/* Large desktop */
@media (min-width: 1200px) {
  ul.day {
    font-size: 16px;
  }
  span.available {
    margin-top: 1px;
  }
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 999px) {
  ul.day {
    font-size: 12px;
  }
  ul.day li.header {
    font-size: 13px;
  }
  span.available {
    float: right;
    text-align: center;
    width: 18px;
    height: 18px;
    margin-right: 1px;
    margin-top: 0px;
    padding-top: 1px;
    padding-left: 0px;
    color: rgb(0, 167, 61);
  }

  span.available a {
    padding-top: 0px;
    font-size: 11px;
  }

  div.left {
    padding: 1px;
  }

  span.available.not_logged_in {
    padding-top: 0px;
  }
    span.available > span.available_number {
      font-size: 11px;
      border-radius: 50%;
      border: 0px solid rgba(255, 255, 255, 0);
    }
    span.available.is_available a {
      border: 0px solid rgb(0, 167, 61);
    }
    span.available img {
      width: 19px;
      height: 19px;
      position: relative;
      top: -3px;
      left: -1px;
    }
  button.links {
    width: auto;
    margin-bottom: 5px;
  }
  div.instructor {
    font-size: 10px;
  }
  a.admin-link {
    position: relative;
    top: 14px;
  }
}
 
@media (max-width: 535px) {
  div.icons {
    display: none;
  }
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  ul.day {
    width: 100%;
    margin-bottom: 30px;
  }
  ul.day li {
    margin-bottom: 0px;
    border-bottom: 1px solid #eaeaea;
  }
  ul.day li:last-child {
    border-bottom: 0px;
  }
  ul.day li.header {
    width: 100%;
    border-bottom: 0px solid #eaeaea;
  }
  ul.day.dimmed {
    display: none;
  }
  div.left {
    float: left;
    margin-top: 0px;
    width: 30%;
    color: black;
    height: 100%;
    border-bottom-width: 0px;
    border-bottom-style: none;
  }
  div.right {
    float: right;
    width: 70%;
    background-color: white;
    padding-left: 3%;
    padding-top: 5px;
    padding-bottom: 5px;
    border-left-width: 3px;
    border-left-style: solid;
    border-bottom-width: 0px;
    border-bottom-style: solid;
  }
  div.clock {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin-top: 0px auto;
    margin-bottom: 0px auto;
  }
  div.available {
    float: right;
    margin-top: 2px;
    margin-right: 2px;
    text-align: center;
      width: 28px;
      height: 28px;
      color: rgb(0, 167, 61);
    }

    div.available a {
      display: block;
      width: 28px;
      height: 28px;
      padding-top: 4px;
      border-radius: 25%;
      color: rgb(0, 167, 61);
    }
    div.available.admin a {
      border: 0px;
    }

    div.available.is_available a {
      background-color: white;
      border: 0px;
    }

    div.available img {
      width: 28px;
      height: 28px;
      position: relative;
      top: -3px;
      left: 2px;
    }


    div.available.confirmed {
    }

    div.available.full {
    }

    div.available.available_full a, div.available.waitlist a {
      color: rgb(255, 93, 102);
    }
    div.available a:hover {
      text-decoration: none;
    }

  button.links {
    width: auto;
    margin-bottom: 5px;
  }
  select {
    width: auto;
    margin-bottom: 5px;
  }

  a.admin-link {
    position: relative;
    top: -3px;
    left: -1px;
  }
  a.admin-link img {
    width: 18px;
    height: 18px;
  }
}
 
/* Landscape phones and down */
@media (max-width: 450px) { 
  button.links {
    width: 100%;
  }
  select {
    width: 100%;
    margin-bottom: 5px;
  }
  #helpTextLink {
    display: none;
  }
}



/* Admin stuff */

/* reservation table */
.resTable {
  width:649px;
  margin:1px;
  font-family:serif;
  padding-top:1px;
}
.resTable td{
  padding:0px
}
.resError {
  font-size:20px;
  font-weight:bold;
  color:red;
  padding-bottom:5px;
  text-align:left;
}
.resHeader {
  text-align:center;
  margin-bottom:10px;
}
.resHeader input {
  width:90px;
}
.resHeader span {
  display:inline-block;
  width:469px;
  font-size:34px;
  font-weight:bold;
  float:left;
}
.resTitle {
  font-size:20px;
  margin-bottom:2px;
  width:216px;
  float:left;
}
.resTitle span {
  display:block;
  text-align:right;
  float:left;
  width:50px;
  padding-right:3px;
  font-weight:bold;
  font-size:18px;
}
.resImage {
  float:right;
  width:216px;
  height:100px;
}
.resImage img {
  height:100px;
  float:right;
}
.resForm {
  margin-top:10px;
  clear:both;
  border:1px solid #AAAAAA;
}
.resForm form{
  margin:0px;
  padding:3px;
}
.resList {
  border-top:0px solid black;
  margin-top:5px;
}
.resList div#left{
  width:323px;
  float:left;
  border-right:1px solid black;
  border-left:1px solid black;
  border-bottom:1px solid black;
}
.resList div#right{
  width:323px;
  float:right;
  border-right:1px solid black;
  border-left:0px solid black;
  border-bottom:1px solid black;
}
.resList div#left.noshow{
  width:647px;
  border-right:1px solid black;
  border-left:1px solid black;
  border-bottom:0px solid black;
}
.resList div#right.noshow{
  width:647px;
  border-right:1px solid black;
  border-left:1px solid black;
  border-bottom:1px solid black;
}
.resItem {
  font-size:24px;
  width:323px;
  border-bottom:1px solid #CCCCCC;
  clear:left;
}
.resList div.noshow .resItem {
  width:647px;
}
.resItem span {
  display:block;
  float:left;
}
.resItem #nr{
  width:28px;
  padding-left:3px;
}
.resItem #name{
  width:267px;
  border-right:1px solid #CCCCCC;
  border-left:1px solid #CCCCCC;
  padding-left:3px;
}
.resList div.noshow .resItem #name{
  width:487px;
}
.resItem #status{
  text-align:center;
  width:100px;
}
.resItem .noshow_status{
  width:110px;
  height:25px;
  font-size:16px;
}
.resItem #del{
  text-align:center;
  width:20px;
}
.resItem #del a{
  text-decoration:none;
  color:black;
}
.sendSMS{
  float:left;
  margin-left:3px;
}
.resStatusSave{
  float:right;
  margin-right:10px;
}

.campainsTable {
  width:100%;
  margin-bottom:20px;
  font-family: arial, sans-serif;
}
.campainsTable th {
  text-align:left;
  padding:2px;
  padding-top:10px;
  padding-bottom:10px;
  background:#efefef;
  font-size;24px;
  font-weight:bold;
  color:#3a3a3a;  
}
.campainsTable td {
  padding-bottom:5px;
  padding-top:5px
  font-size:16px;
}

/* Mypage */
#mypage_container {
  width: 90%;
  max-width: 700px;
  margin: 0px auto;
  background-color: #f8f8f8;
  border: 1px solid #eaeaea;
  -webkit-box-shadow: #e8e8e8 0px 0px 50px 4px;
  padding: 20px;
  margin-top: 20px;
}

#mypage_container .logo {
  float: right;
  max-width: 700px;
  margin: 0px auto;
  margin-bottom: 10px;
  text-align: right;
}

#mypage_container h1 {
  font-weight: bold;
  font-size: 32px;
  line-height: 36px;
  margin: 0px 0px 20px 0px;
  font-family: Arial;
}

#mypage_container h2 {
  font-size: 20px;
  margin-bottom: 5px;
}

#mypage_container a.button {
  display: block;
  /*background: #F9E4BE; /* Old browsers */
  /*border: 1px solid #FBC971;*/
  background: #eee;
  border: 1px solid #ccc;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: black;
  font-size: 14px;
  font-family: Helvetica;
  margin: 0px auto;
  margin-bottom: 10px;
  cursor: pointer;
  margin-top: 5px;
  padding: 5px;
  text-decoration: none;
  font-weight: normal;
}
#mypage_container a.button:hover {
  background: #eee;
  border: 1px solid #999;
}
#mypage_container a.button span {
  display: block;
  width: 100%;
  padding-left: 30px;
  background-repeat: no-repeat;
  background-position: 5px center;
}
#mypage_container a.button.logout span {
  background-image: url(/img/mypage/back.png);
}
#mypage_container a.button.back span {
  background-image: url(/img/mypage/back.png);
}
#mypage_container a.button.facebookConnection span {
  background-image: url(/img/mypage/facebook.png);
}
#mypage_container a.button.visitsgraph span {
  background-image: url(/img/mypage/visitsgraph.png);
}
#mypage_container a.button.adminPlayers span {
  background-image: url(/img/mypage/medspillere.png);
}
#mypage_container a.button.editPersonalInfo span {
  background-image: url(/img/mypage/personopplysninger.png);
}
#mypage_container a.button.showups span {
  background-image: url(/img/mypage/showups.png);
}
#mypage_container a.button.payments span {
  background-image: url(/img/mypage/payments.png);
}
#mypage_container a.button.changePassword span {
  background-image: url(/img/mypage/passord.png);
}
#mypage_container a.button.buy span {
  background-image: url(/img/mypage/cart.png);
}
#mypage_container a.button.voucher span {
  background-image: url(/img/mypage/klippekort.png);
}
#mypage_container a.button.children span {
  background-image: url(/img/mypage/barnepass.png);
}

.reservationsTable {
  width: 100%;
  margin-bottom: 30px;
  margin-top: 10px;
  border: 1px solid #eaeaea;
  border-collapse: collapse;
}
.reservationsTable tr td,.reservationsTable tr th {
  padding: 5px;
}
.reservationsTable tr th {
  background-color: #e8e8e8;
  color: black;
}
.reservationsTable tr.alternating {
  background-color: #f1f1f1;
}

@media print {
  .booking-selects,.available,.available.visible-desktop {
    display: none !important;
  }
}