/*---- STYLES APPLIED TO ALL HTML ----*/

@import 'common.css';

/*---- STYLES APPLIED TO LIBRARY.HTML ----*/

div#wrapper #content {
  top: 0;
  ;
}

div.titlePic {
  background: transparent url(../images/library_sm.png) no-repeat center;
  ;
}

#intro {
  position: relative;
  width: 80%;
  margin: 0 10%;
  ;
}
  p.copy {
    font-size: 1.2em;
    text-align: justify;
    line-height: 1.1em;
    ;
  }
  .noJS {
    font-size: 150%;
    text-align: center;
    width: 70%;
    margin: -40px 15% 4em;
    ;
  }

#center {
  position: relative;
  width: 100%;
  margin: 0;
  border: none;
  ;
}

#navigation {
  width: 50%;
  margin-left: 10%;
  ;
}
  #navigation a {
    text-decoration: none;
    width: auto;
    ;
  }
  #navigation a img {
    width: 114px;
    height: 85px;
    padding: 0;
    ;
  }

ul {
  list-style: none;
  font-size: 1.2em;
  font-weight: bold;
  margin-left: -2.5em;
  ;
}
  li {
    position: relative;
    background: transparent;
    padding: 0;
    ;
  }
  li#last {
    padding-bottom: 0.25em;
    ;
  }
  li a {
    color: #000;
    width: 114px;
    height: 85px;
    ;
  }
  li:hover {
    background: transparent;
    color: #c4c6ff;
    ;
  }

.bigPic {
  float: right;
  background: transparent url(../images/library/001-lg.png) no-repeat center;
  width: 640px;
  height: 480px;
  margin: -12.5em 10% 0 0;
  border: 10px ridge #dd0076;
  ;
}

/******************************** Styles that apply when JS is on ********************************/

div.intro {
  width: 90%;
  margin: 0 5%;
  ;
}

.animate {
  list-style-type: none;
  width: 239px;
  height: 373px;
  margin-top: 7.5em;
  padding: 3px;
  border: 2px solid #dd0076;
  ;
}
.IEanimate {
  list-style-type: none;
  overflow: none;
  width: 116px;
  height: 634px;
  padding: 3px;
  border: 2px solid #dd0076;
  ;
}
  .animate ul {
    margin: 0;
    padding: 0;
    ;
  }
  .animate ul li {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    ;
  }
  .animate img {
    padding-bottom: 3px;
    border: 1px solid black;
    ;
  }

.sizeable {
  text-align: center;
  ;
}

.picWrap {
  float: right;
  width: 660px;
  height: 536px;
  margin-top: -35em
  ;
}
.IEpicWrap {
  margin-top: -49em;
  ;
}

.placeHolder {
  visibility: visible;
  width: 640px;
  height: 480px;
  border: 10px ridge #dd0076;
  ;
}

.description {
  font-size: 1.5em;
  margin: 0 0 6px;
  ;
}

div.footer {
  margin-top: 2em;
  ;
}

/* Styles for viewports < 890px wide */
#s0Intro {
  width: 97%;
  margin: 0 1.5%;
  ;
}

#s0Nav.animate {
  width: 127px;
  height: 353px;
  overflow: auto;
  margin: 8em 0 0 0.5em;
  padding-right: 3px;
  ;
}
.IEanimate#s0Nav {
  margin: 0 0 0 0.5em;
  ;
}

#s0Pic.picWrap {
  margin-right: -8em;
  ;
}
#s0Pic.IEpicWrap {
  margin-right: -14em;
  ;
}

/* Styles for viewports >= 890px && < 958px wide */
#s1Nav.animate {
  width: 127px;
  height: 353px;
  overflow: auto;
  margin: 8em 0 0 2em;
  padding-right: 3px;
  ;
}
.IEanimate#s1Nav {
  margin: 0 0 0 2em;
  ;
}

#s1Pic.picWrap {
  margin-right: 2em;
  ;
}
#s1Pic.IEpicWrap {
  margin-right: -16em;
  ;
}

/* Styles for viewports >= 958px && < 1004px wide */
#s2Nav.animate {
  width: 127px;
  height: 353px;
  overflow: auto;
  margin: 8em 0 0 4em;
  padding-right: 3px;
  ;
}
.IEanimate#s2Nav {
  margin: 0 0 0 4em;
  ;
}

#s2Pic.picWrap {
  margin-right: 4em;
  ;
}
#s2Pic.IEpicWrap {
  margin-right: -19em;
  ;
}

/* Styles for viewports >= 1004px && < 1100px wide */
#s3Nav.animate {
  margin-left: 2em;
  ;
}
.IEanimate#s3Nav {
  margin: 0 0 0 2em;
  ;
}

#s3Pic.picWrap {
  margin-right: 2em;
  ;
}
#s3Pic.IEpicWrap {
  margin-right: -24em;
  ;
}

/* Styles for viewports >= 1100px && < 1188px wide */
#s4Nav.animate {
  margin-left: 5em;
  ;
}
.IEanimate#s4Nav {
  margin: 0 0 0 5em;
  ;
}

#s4Pic.picWrap {
  margin-right: 5em;
  ;
}
#s4Pic.IEpicWrap {
  margin-right: -24em;
  ;
}

/* Styles for viewports >= 1188px && < 1280px wide */
#s5Intro {
  width: 70%;
  margin: 0 15%;
  ;
}

#s5Nav.animate {
  margin-left: 8em;
  ;
}
.IEanimate#s5Nav {
  margin: 0 0 0 10em;
  ;
}

#s5Pic.picWrap {
  margin-right: 8em;
  ;
}
#s5Pic.IEpicWrap {
  margin-right: -24em;
  ;
}

/* Styles for viewports >= 1280px wide */
#s6Intro {
  width: 70%;
  margin: 0 15%;
  ;
}

#s6Nav.animate {
  margin-left: 10em;
  ;
}
.IEanimate#s6Nav {
  margin: 0 0 0 10em;
  ;
}

#s6Pic.picWrap {
  margin-right: 10em;
  ;
}
#s6Pic.IEpicWrap {
  margin-right: -26em;
  ;
}

div.noJSfooter {
  margin: 0 15%;
  padding: 3em 0 1em;
  ;
}