/* basic elements */
@font-face {
    font-family: 'typewriter';
    src: url('../type/vtypewriter.eot');
    src: url('../type/vtypewriter.eot?#iefix') format('embedded-opentype'),
         url('../type/vtypewriter.woff') format('woff'),
         url('../type/vtypewriter.ttf') format('truetype'),
         url('../type/vtypewriter.svg#VeteranTypewriterRegular') format('svg');
    font-weight: normal;
    font-style: normal;
  }

h1, h2, h3, h4, h5, p, ul, ol, td, th { font-family: "typewriter", Georgia, serif;}

h1 { text-align: center;}

h4 { font-size:16px; font-weight: normal;}

hr { display: none;}

li { margin: 5px 0;}

body {
   background:  url('../style/parchment3.jpg')  #FFFFFF  0px  0px  repeat;
   color: #333333;
   font-size: 0.85em;
   letter-spacing: 0.2em;
}

.searchform { text-align: right;}

.photospread { text-align: center;}

.centertext { text-align: center;}

.sourcedetails { line-height: 7.7;}

.redtext { color:#DD2222;}

.graytext { color:#727272; font-size: 85%;}

.bigtext { font-size: 150%;}

.column4 { column-count: 4;}

.column3 { column-count: 3;}

.column2 { column-count: 2;}

.column1 { column-count: 1;}

.nobullet { 
      list-style-type: none; 
      margin-top: -5px;
      margin-left: 25px;
      margin-bottom: 0px;
}

.searchbar {
    width: 99%;
    position: fixed;
    top: 0px;
}

.mychart img {
  width: 100px;
  height: 75px;
  align: left;
  float: left;
  opacity: 0.7;
  filter: grayscale(100%);
  margin: 0px 20px 15px 20px;
  border: 1px solid #BFBFBF;
  box-shadow: 10px 10px 10px #cccccc;
      -webkit-transition: all 0.7s ease;
      -moz-transition:    all 0.7s ease;
      -ms-transition:     all 0.7s ease;
      transition:         all 0.7s ease;
}

.mychart img:hover {
      width: 400px;
      height: 300px;
      opacity: 1.0;
      filter: grayscale(0%);
}

div.polaroid {
  width: 100px;
  padding: 7px 7px 7px 7px;
  border: 1px solid #BFBFBF;
  background-color: white;
  box-shadow: 10px 10px 5px #aaaaaa;
}

div.tile {
    background-color: #fafafa;
    display: inline-block; /* needed to align tiles correctly */
    width: 112px;             /* 100%  */
    margin: 6px 20px 6px 20px; /* top, right, bottom, left */ 
    padding: 4px 0px 0px 0px;  /* top, right, bottom, left */
    border: solid 1px #bbbbbb;
    text-align: center;
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 4px 6px rgba(0,0,0,.5);
    -ms-box-shadow: 0 4px 6px rgba(0,0,0,.5);
    box-shadow: 0 4px 6px rgba(0,0,0,.5);
    z-index: 99;
    -webkit-column-break-inside: avoid;
}

.tile img {
  width:  100px;
  height: 122px;
  filter: grayscale(100%);
}

div.wrapper { 
     width:  660px;  /*  660  */
     margin: auto;
}

div.masonry { 
     column-count: 5; /* Set the column count */
     -webkit-column-count: 5;
     -moz-column-count: 5;
     -ms-column-count: 5;

     column-gap: 0.1; /* Set the gap between the columns */
     -webkit-column-gap: 0.1;
     -moz-column-gap: 0.1;
     -ms-column-gap: 0.1;

     width: 600px; /* total width of columns combined - 600 */
}

      .item:hover{
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      transform: scale(1.2);
      z-index: 10;
      -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
      -moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
      -ms-box-shadow: 0 10px 20px rgba(0,0,0,.7);
      box-shadow: 0 10px 20px rgba(0,0,0,.7);
      }

      .item:after{
      color: #333;
      font-size: 25px;
      content: attr(title);
      position: relative;
      top: 15px;
      }

      .item:before {
      content: '';
      position: absolute;
      z-index: -1;
      transition: all 0.40s;
      }

      .item:nth-of-type(2n+1) {
      transform: scale(0.8, 0.8) rotate(5deg);
      transition: all 0.35s;
      }

      .item:nth-of-type(2n+1) .polaroid:before {
      transform: rotate(6deg);
      height: 20%;
      width: 47%;
      bottom: 30px;
      right: 12px;
      box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
      }

      .item:nth-of-type(2n+2) {
      transform: scale(0.8, 0.8) rotate(-5deg);
      transition: all 0.35s;
      }

      .item:nth-of-type(2n+2) .polaroid:before {
      transform: rotate(-6deg);
      height: 20%;
      width: 47%;
      bottom: 30px;
      left: 12px;
      box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
      }

      .item:hover {
      filter: none;
      transform: scale(1, 1) rotate(0deg);
      transition: all 0.40s;
      }

      .item:hover .polaroid:before {
      content: '';
      position: absolute;
      z-index: -1;
      transform: rotate(0deg);
      height: 60%;
      width: 60%;
      bottom: 0%;
      right: 10%;
      box-shadow: 0 1rem 3rem rgba(0,0,0,0.2);
      transition: all 0.35s;
      }


a:link    {color:#444444;   text-decoration: none;    /* unvisited link  */
	   border-bottom-width: 1px;
	   border-bottom-style: dotted;
	   border-bottom-color: #CCCCCC;} 
a:visited {color:#444444;  text-decoration: none;} /* visited link    */
a:hover   {color:#111111;                        /* mouse over link */
	   border-bottom-width: 1px;
	   border-bottom-style: dotted;
	   border-bottom-color: #993300;} 
a:active  {color:#666666;}                        /* selected link   */