/* app css stylesheet */

body {
  /*padding-top: 20px; */
}

/* .navbar classes largely from nuzzel.com */

.navbar {
  /* background-color: #2E3D4B;  Old navbar color */

  /* This is reportedly the closest color to Pantone 286.
      This is the color of the blueline on a hockey rink according to USA Hockey.
      Colors: Red PMS 186, Blue PMS 286, Goal Crease Blue PMS 298,
      http://assets.ngin.com/attachments/document/0040/7085/Official_USA_Hockey_Ice_Markings_2013_2017_2.pdf

      Blue PMS 286 = #0033AB, rgb(0, 51, 171) or rgba(0, 51, 171, 1.0)
      Red PMS 186 = #CC0C2F, rgb(204, 12, 47) or rgba(204, 12, 47, 1.0) 
  */
  
  /* background-color: #0033ab; */
  background-image: url("/img/RA-background.jpg");
  border: none;
  border-radius: 0px !important;
  margin-bottom: 0px;
}

.navbar a {
  color: #0033ab;
  text-decoration-color: #0033ab;
}

.navbar .navbar-brand {
  padding: 10px 15px;
}

.navbar-logo {
  height: 30px;
  width: 44px;
  z-index: 50;
}

/* Bootsnip "alert", based on http://bootsnipp.com/snippets/7llNl */

#note {
/*    position: absolute; */
    z-index: 6001;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden; 
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

.top-ad, div#top-ad.ng-scope, .rink-map {
  clear: both;
  overflow: hidden;
  width: 728px;
  margin: 5px auto 0px;
}

div.row { margin-top: 5px; }

/* div.story classes largely from nuzzel.com */

div.story { margin-bottom: 10px; }
div.story { border-top: 1px solid #D2D2D2; padding-top: 20px; padding: 10px;}
div.story.first { border-top: none; padding-top: 10px; }
div.story.bad { opacity: .40; filter: alpha(opacity=40); }

.rinks, .services {
  list-style: none;
}

.thumb {
  float: left;
  margin: -0.5em 1em 1.5em 0;
  padding-bottom: 1em;
  height: 100px;
  width: 100px;
}

.rinks li {
  clear: both;
  height: 115px;
  padding-top: 15px;
}

.services li {
  clear: both;
  height: 150px;
  padding-top: 10px;
}

/** Detail View **/

.jumbotron {
    color: #ffffff;
    background-size: cover;
    font-style: italic;
    padding-top: 5em;
    position: relative; /* This sets us up so we can position .jumbotron h1 as we wish when we define it. */
}

.jumbotron h1 {
  text-shadow: 2px 2px 4px black;
  text-align: right;  /* Default alignment should be to the right. */
  position: absolute;
  bottom: 0.25em;      /* h1 text should be positioned 0.25em above the .jumbotron baseline. */
  right: 0.85em;      /* h1 text should end (in left-to-right languages 50px/0.85em from the right edge
                           of the jumbotron. */
}

@media (min-width:480px)
{
  .jumbotron {
    height: 400px;
  }

  img.rink {
    float: left;
    margin-right: 3em;
    margin-bottom: 2em;
    background-color: inherit; /* white; */
    padding: 2em;
    height: 400px;
    width: 400px;
    display: none;
  }

  .rink-images, .service-images {
    background-color: inherit; /* white; */
    width: 450px;
    height: 450px;
    overflow: hidden;
    position: relative;
    float: left;
    margin-top: 5px;    
  }

  .address-block {
    margin-left: 50px;
  }

}

@media (max-width:479px)
{

  .jumbotron {
    height: 300px;
  }

  img.rink {
    float: left;
    margin-right: 3em;
    margin-bottom: 2em;
    background-color: inherit; /* white; */
    padding: 2em;
    height: 300px;
    width: 300px;
    display: none;
  }

  .rink-images, .service-images {
    background-color: inherit; /* white; */
    width: 450px;
    height: 300px;
    overflow: hidden;
    position: relative;
    float: left;
  }

  .address-block{
    margin-left: 0px;
  }

  h1 {
    font-size: x-large;
  }

  h1, p {
    margin-left: 10px;
  }  

}

img.rink:first-child, img.service:first-child {
  display: block;
}

div.services {
  margin-top: 25px;
  padding: 10px;
  border: 1px solid #DDDDDD;
}

ul.rink-thumbs, ul.service-thumbs {
  margin: 0;
  list-style: none;
}

ul.rink-thumbs li,
ul.service-thumbs li {
  border: 1px solid #DDDDDD;
  display: inline-block;
  margin: 1em;
  background-color: white;
}

ul.rink-thumbs img,
ul.service-thumbs img {
  height: 100px;
  width: 100px;
  padding: 1em;
}

ul.rink-thumbs img:hover,
ul.service-thumbs img:hover {
  cursor: pointer;
}


ul.specs {
  clear: both;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.specs > li{
  display: inline-block;
  width: 200px;
  vertical-align: top;
}

ul.specs > li > span{
  font-weight: bold;
  font-size: 1.2em;
}

ul.specs dt {
  font-weight: bold;
}

h1 {
  border-bottom: 1px solid gray;
}

.rinkmap {
  margin-bottom: 10px;
}

@media (min-width:480px)
{
  ul.copyright {
    margin-top: 10px;
  }
}
@media (max-width:479px)
{
  ul.copyright {
    margin-top: 70px;
  }
}