/*page 2*/
.buttonlink {
  font-family: 'Open Sans', sans-serif;
    border: 0;
    outline: 0;
    outline-width: 0;
    outline-style: none;
    border-radius: 5px;
    background: #32343a;
    box-shadow: none;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    padding: .5%;
}
.buttonlink:hover{
background-color: #ed564b;
color: #fff;
}
p {
    font-weight: bold;
    color: #fff;
}

.hintsBtn, .imageCopyrightsBtn, .buttonlink {

    margin: 1%;
    float: left;
}
.hintsBtn a{
  
}

img {
    width: 100%;
    height: auto;
}
#hintList{
  display: none;
}

.hints {
    /*display: none;*/
    background: #ed564b;
    border-radius: 5px;
    padding: 1%;
    margin-bottom: 2%;
        text-align: center;
}

.hints li {
    background-color: #fff;
    margin: 1%;
    padding: 1%;
    display: inline-block;
    border: dotted #ed564b 1px;
    border-radius: 5px;
}

.imageDetails {
    display: none;
    height: 25%;
}
.ui-widget-header{
  height: 2em;
  cursor: move;
}
.ui-dialog-content, .ui-widget-header{
      background-color: #ed564b;
}

.ui-dialog-titlebar button{
  float: right;
  margin: 1% 2% 0 0;
      padding: 0.3em;
}
.ui-dialog-titlebar button:hover{
  background-color: #fff;
  color: #32343a;
}

/*ACTIVITY 7A,B,C,D
*/

.maincontent{
  height: 85%;
  padding: 1.5% 0 0 0;
      margin-bottom: 2%;
}

.annotatePosterImage{
  height: 80%;
  width: auto;
  display: block;
  margin: auto;
}
.annotatePosterImageLandscape{
  height: auto;
  width: 45%;
  display: block;
  margin: auto;
}
.singlecopyright{
  position: absolute;
  bottom: 0;
}

/* ----------- Large Display ----------- */

@media screen and (min-width: 1920px) and (min-height: 1080px) {
    /* Styles */
    .annotatePosterImageLandscape{
  width: 45%;
}

}


/* ----------- Laptop HiDPI screen ----------- */

@media screen and (min-width: 1440px) and (min-height: 900px) {
    /* Styles */
    .annotatePosterImageLandscape{
  width: 45%;
}
}


/* ----------- Laptop ----------- */

@media screen and (min-width: 1366px) and (min-height: 768px) {
    /* Styles */
}


/* ----------- Laptop MDPI screen ----------- */

@media screen and (min-width: 1280px) and (min-height: 800px) {
    /* Styles */
}


/* ----------- iPad ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* Styles */
}


/* ----------- iPhone 5 ----------- */

@media only screen and (min-device-width: 568px) and (min-device-height: 320px) {
    /* Styles */
}