/* 
This contains the extra css only needed for the new design based on @Media instead of on-the-fly tables.
*/

div.picFrame {
  max-width: 740px;
  text-align: center;
  margin: auto;
  border: solid 0px black;
  background-color: white;
}

div.pic {
  display: inline-block;
  border: solid 0px black;
  position: relative;
  height: 170px;
  width: 180px;
  background-color: white;
}

div.pic2 {
  display: inline-block;
  border: solid 0px black;
  position: relative;
  height: 170px;
  width: 320px;
  background-color: white;
}

div.pic3 {
  display: inline-block;
  border: solid 0px black;
  position: relative;
  height: 170px;
  width: 220px;
  background-color: white;
}

img.pic {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

img.floatLeft {
  float: left;
}

img.floatRight {
  float: right;
}

img.hIconSize {
  width: 160px;
  height: 120px;
}

img.vIconSize {
  width: 111px;
  height: 148px;
}

.showLarge {
  display: block;
}

.hideLarge {
  display: table-cell;
}

.showMedium {
  display: none;
}

.hideMedium {
  display: table-cell;
}

.showSmall {
  display: none;
}

.hideSmall {
  display: table-cell;
}

@media screen and (max-width: 760px) {

  div.picFrame {
    max-width: 560px;
    text-align: center;
    margin: auto;
    border: solid 2px rgba(255, 000, 255, 0.0);
    background-color: white;
  }
  
 div.pic2 {
  display: inline-block;
  border: solid 0px black;
  position: relative;
  height: 170px;
  width: 250px;
  background-color: white; 
  }
  
 div.pic3 {
  display: inline-block;
  border: solid 0px black;
  position: relative;
  height: 170px;
  width: 180px;
  background-color: white; 
  }
    
  .showMedium {
    display: block;
  }

  .showLarge {
    display: none;
  }

  .hideLarge {
    display: none;
  }

}

@media screen and (max-width: 580px) {

  div.picFrame {
    max-width: 380px;
    text-align: center;
    margin: auto;
    border: transparent 2px;
    background-color: white;
  }

  .hideMedium {
    display: none;
  }
  
 div.pic2 {
  display: inline-block;
  border: solid 0px black;
  position: relative;
  height: 170px;
  width: 180px;
  background-color: white;
}

}

@media screen and (max-width: 390px) {

  div.picFrame {
    text-align: center;
    margin: auto;
    border-top: 0px;
    border-bottom: 0px;
    border-left: solid 0px rgba(000, 000, 255, 0.0);
    border-right: solid 0px rgba(000, 000, 255, 0.0);
    padding: 0px;
    max-width: 320px;
    background-color: white;
  }

   div.pic {
    display: inline-block;
    border: solid 0px black;
    position: relative;
    height: 120px;
    width: 144px;
    background-color: white;
  } 
  
   div.pic2 {
    display: inline-block;
    border: solid 0px black;
    position: relative;
    height: 120px;
    width: 144px;
    background-color: white;
  } 
  
   div.pic3 {
    display: inline-block;
    border: solid 0px black;
    position: relative;
    height: 120px;
    width: 144px;
    background-color: white;
  }   

  .hideSmall {
    display: none;
  }

  img.hIconSize {
    width: 132px;
    height: 99px;
  }

  img.vIconSize {
    width: 81px;
    height: 108px;
  }

}