/*london then and now*/


.spacer{
    background: #309091;
    height: 2em;
}
.push{
    height:20%;
}

/*next and back buttons for index pages*/
#navButtons{
  width:100%;
  display:inline-block!important;
  text-align: center;
}

#navButtons a{
  display:inline-block!important;
}


#nextButton{
  background: url("../../images/nextIcon.png")no-repeat ;
  height:33px;
  width:33px;
  cursor:pointer;
  margin:1%;
}

#backButton{
  background: url("../../images/backToIcon.png")no-repeat ;
  height:33px;
  width:33px;
  cursor:pointer;
}


#nextButton:hover, #backButton:hover {
  background-position: 0px -35px; 
  cursor: pointer;
}


/*slideshow*/

.containerP,
.navbar-static-top .containerP,
.navbar-fixed-top .containerP,
.navbar-fixed-bottom .containerP{
  width: 940px;
}


 /* SlidesJS Optional: If you'd like to use this design */

    #slidesTitle, #slidesTitle1, #slidesTitle2 {
     font-family: 'Lobster', helvetica, arial!important;
      margin-top: 2%;
      text-align: center;
      font-size: 3em;
      line-height: 1.3em;
      color:#333;
      position: relative;
    }

    #slidesTitle:after {
        content : 'American Revolution 1775 - 1783';
        color: #333;
        text-shadow: 0 1px 0 white;
    }

     #slidesTitle1:after{
        content : 'French Revolution 1787 – 1799';
        color: #333;
        text-shadow: 0 1px 0 white;
    }

   #slidesTitle2:after {
        content : 'Napoleonic Wars 1803 - 1815';
        color: #333;
        text-shadow: 0 1px 0 white;
    }

 


 #slidesTitle3{
    margin:1% auto;
    margin-top: 5%;
    background:url("../images/banner.png")no-repeat;
    height:250px;
    width: 800px;
 }
      
  	#slides p {
       font-family:'Montserrat', sans-serif!important;
    	font-size: .9em;
      line-height: 1.5em;
      text-align: center;
    }

    img{
      width:100%;
      height:auto;
    }

     .containerP{
      margin: 0 auto;
    }

    #slides {
      cursor: default;
      display: none
    }

    #slides .slidesjs-navigation {
      margin-top:5px;
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-image: url(../images/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-right:5px;
    }

    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
      width:15px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
      width:18px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
      background-position: -41px -18px;
    }

    .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(../images/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }

    .navbar {
      overflow: hidden
    }


  	/*slideshow END*/
  	/*End SlidesJS Optional*/



.copyright {
  font-size: .6em!important;
  line-height: 0.8em;
}


    /*SlidesJS Required: media queries for slideshow */
  
    #slides {
      display: none
    }

    .containerP {

     margin-top:2%;
    }


/*audio*/
#music, #music1, #music2, #music3{
  text-align: center;
  margin:1%;
}


  /*media queries*/

@media only screen and (max-width: 1024px){
.containerP {
        margin-top:2%;
        width: 700px;
      }

      .slidejs-container{
        height:auto;
      }

}

@media only screen and (max-width: 768px){

.containerP {
        margin-top:2%;
        width: 700px;
      }

.slidejs-container{
        height:auto;
      }

#nextButton{
  margin:2%;
}

#backButton{
 margin:4%;
}





}
/*for laptops*/

@media only screen and (max-height: 768px){

      .containerP {
        margin-top:2%;
        width: 600px;
      }

      .slidejs-container{
        height:auto;
      }
}


@media only screen and (max-width: 560px){

      .containerP {
        margin-top:2%;
        width: 400px;
      }

        .slidejs-container{
        height:auto;
      }
}

           