/* ==========================================================================
   Author's custom styles
   ========================================================================== */
@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham-Bold.otf);
}

@font-face {
  font-family: Gotham-Book;
  src: url(../fonts/Gotham-Book.otf);
}

body, .container, #primary {
  font-family: 'Gotham', sans-serif;
  overflow-x: hidden;
}
#primary{
  margin-top:50px;
}
.float-left{
  float: left;
}

.float-right{
  float: right;
}

.center {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  
}

.container{
  background-color: white;
  padding-left: 0px;
  padding-right: 0px;
}

header {
  text-align: center;
  margin-top: 10px;
}

#header-image{
  width: 30%;
}

#transcribe-count {
  font-size: 30px;
  font-weight:lighter ;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #2D154C;
}

#menu {
  background-color: #2D154C;
  list-style-type: none;
  text-transform: uppercase;
}

.menu-item {
  padding-left: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 24px;
}
.menu-link:hover {
  text-decoration: underline;
  color: white;
}

a {
  color: white;
}

a:hover {
  color: white;
}

#featured {
  width: 80%;
  height: 500px;
  border: 10px solid #7F055F;
  float: none;
  margin: 0 auto;
  margin-top: 25px;
  overflow: hidden;
}

#featured .float-left{
  overflow: hidden;
  padding:0px;
  height: 100%;
}
#featured .float-left img{
  width:100%;
}

#featured .float-right{
  padding:50px;
  height: 100%;
  text-align: center;
}

#featured-category-icon{
  height:20%;
  margin-bottom: 50px;
}

#featured-category-icon img{
  height: 100px;
}

#featured .float-right h2{
  color: #7F055F;
}

#history {
  margin: 0 auto;
  width: 80%;
  background-color: #2D154C;
  margin-top: 50px;
  margin-bottom: 30px;
  color: white;
  text-align: center;
  font-size: 48px;
  padding:10px;
}

#description {
  color: black;
  width: 80%;
  font-family: 'Gotham-Book', sans-serif;
  font-size: 36px;
  text-align: left;
  margin: 0 auto;
}

#topics{
  margin-top:50px;
}

.header {
  font-size: 48px;
  color: #2D154C;
  margin-bottom: 20px;
  text-transform: uppercase;
  text-align: center;
}

.topic {
  padding:50px;
  text-align: center;
  height: 300px;
  color: white;
  text-transform: uppercase;
}
.topic img{
  width: 40%;
}

#topics .col-md-6{
  padding: 15px;
}
#war-diaries .topic, .war-diaries{
  background-color: #26375E;
}

#early-ia .topic, .early-ia{
  background-color: #F18F01;
}

#univ-life .topic{
  background-color: #D33C1E;
}

#social-justice .topic{
  background-color: #086277;
}

#early-manuscript .topic{
  background-color: #08874D;
}

#keith-albee-collection .topic{
  background-color: #D81159;
}

#hevelin-fanzines .topic{
  background-color: #7F055F;
}

#szathmary .topic{
  background-color: #17A5C6;
}

/*Footer Css*/
#footer{
  height:225px;
  margin-top:50px;
  margin-left: auto;
  margin-right: auto;
  padding:50px;
}
#footer .float-right{
  width: 30%;
  height: 100%;
}
#footer .menu-item{
  float: right;
  padding: 0px;
  font-size: 36px;
}
#footer a{
  color: #2D154C;
}
footer hr{
  width: 40%;
  border-top: 1px solid #2D154C;
}
#ui-logo{
  height: 125px;
}
#rss-logo{
  height: 50px;
  margin-top: auto;
  margin-bottom:auto;
}
#twitter-logo {
  height: 50px;
}
#footer .container {
  padding-left: 15px;
  padding-right:15px;
}
#footer.container {
  overflow-y: hidden;
}
#footer-links.container {
  overflow: visible;
}

/*Category Page*/
#category-icon {
  width: 100%;
  text-align: center;
}

#category-icon img {
  height: 90px;
}

#war-letters-and-diaries .well {
  width: 210px;
  margin-left:20%;
}

#category-description {
  text-align: center;
  margin-top:25px;
  margin-bottom:25px;
}

/*Matt's Styles*/
.lower-third {
    background-color: #7F055F;
    color: white;
    text-transform: uppercase;
    height: 200px;
}
.caption{
  padding-top: 10px;
  height: 60%;
}

.well {
  padding: 0px;
  border: 4px solid #7F055F;
  background-color: #7F055F;
  text-align: center;
}

.collection-item, .item-item {
  width: 210px;
  border: #7F055F;
}

.collection-image {
  width: 130px;
  margin-left: auto;
  margin-right:auto;
}

#collection-row {
  margin-left: 10%;
  margin-right: 10%;
}

.progress {
  margin-left: 10px;
  margin-right: 10px;
  height: 15px;
  background-color: #7F055F !important;
  border: 2px solid white;
}

.progress-bar {
  background-color: white !important;
  height: 115%;
}

.img-thumbnail {
  padding: 0px;
}

.primary {
  padding: 10px;
}

.collection-title {
  color: #7F055F;
}

.collection-progress {
  margin-left: auto;
  margin-right:auto;
  width: 35%;
  height: 25px;
  background-color: white !important;
  border: 2px solid #7F055F;
}

#collection-progressbar {
  background-color: #7F055F !important;
  height: 105%;
}

#number-complete {
  text-align: center;
  color: #7F055F;
  text-transform: uppercase;
  font-family: 'Gotham', sans-serif;
  font-size: 18px;
  margin-bottom: 25px;
}


#searchbox {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  height: 25px;
  background-color: white !important;
}

#submit_search {
  background-color: #2D154C !important;
  border-top: 2px solid #2D154C;
  border-bottom: 1px solid #2D154C;
  border-right: 2px solid #2D154C;
  height: 110%;
  margin: -2px;
}

.input-group {
  border: 2px solid #2D154C;
  border-radius: 0 !important;
}

.glyphicon-search {
  color: white !important;
}

.item-item {
  width: 210px;
}

.item-well {
  padding: 0px;
  border: 0px solid #7F055F;
  text-align: center;
}

.item-lower {
  background-color: black;
  color: white;
  text-transform: uppercase;
  height: 100px;
}

.lower-item-status {
  background-color: red;
  color: white;
  text-transform: uppercase;
}

.complete {
  background-color: red;
  color: white;
  text-transform: uppercase;
}

.not-started {
  background-color: green;
  color: white;
  text-transform: uppercase;
}

.started {
  background-color: #f7b842;
  color: white;
  text-transform: uppercase;
}

#collection-subheading a {
  font-size: 18px;
  color: #7F055F;
}
#collection-subheading.row{
  text-align: center;
}
.user-title {
  font-family: 'Gotham-Book', sans-serif;
  font-size: 36px;
  text-align: center;
  text-transform: uppercase;
}

.userbox {
  border: 4px solid #2D154C;
  width: 35%;
  margin: auto;
  padding: 60px;
}

.input-block-level {
  width: 80%;
  border: 3px solid #2D154C !important;
  margin-bottom: 30px;
  height: 40px;
  border-radius: 0 !important;
}

.textinput {
  width: 80%;
  border: 3px solid #2D154C !important;
  margin-bottom: 30px;
  height: 300px;
  border-radius: 0 !important;
}

.user-labels {
  text-transform: uppercase;
  margin-left: -28px;
  font-size: 21px;
}

#remember-checkbox {
  margin: -15px;
}

.checkbox {
  border: 2px solid #2D154C !important;
}

.optional {
  text-transform: uppercase;
}

.submit {
  background-color: #2D154C;
  color: white;
  border-radius: 0 !important;
  text-transform: uppercase;
  margin-left: -28px;
  margin-top: 15px;
}

.submit:hover {
  color: #2D154C;
  background-color: white;
  border: 1px solid #2D154C;
}

#forgot-password {
  margin-left: -28px;
  padding-top: 25px;
}

#forgot-password a {
  color:  #2D154C;
  font-family: Gotham;
  font-size: 12px;
  text-decoration: underline;
}

#register-link {
  margin-left: -28px;
  margin-top: 15px;
}

#register-link a {
  color:  #2D154C;
  font-family: Gotham;
  text-decoration: underline;
}

.simple-page-paragraph {
  font-family: Gotham-Book;
  font-weight: 200;
}

.simple-page-paragraph a {
  color: #2D154C;
  text-decoration: underline;
}

.simple-page-row {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.star-list a {
  font-family: Gotham-Book;
  font-weight: 200;
  text-align: left;
  color: #2D154C;
  text-decoration: underline;
}

.star-list li {
  margin-bottom: 15px;
}

.smallHeader a {
  margin: 0px;
  padding: 5px;
  font-family: Gotham;
  font-size: 18px;
  color: #2D154C;
}

/*Media Queries below*/
@media only screen and (max-width: 320px) {
  #home-page.container, #topics.container, #menu.container, #footer.container{
    width: 100%;
    padding:0px;
    margin: 0px 0px 50px 0px;
  }

  .header {
    font-size: 24px;
  }

  tr {
    display: table;
    width: 60%;
  }
  td {
    display: table-row;
  }

  .smallHeader {
    display: none;
  }

  #featured {
    display: none;
  }

  #header-image{
    width: 80%;
  }
  .collection-item, .item-item{
    width: 175px;
  }
  #collection-subheading a {
    font-size: 14px;
  }
  #footer.container{
    padding: 25px;
  }
  #footer .menu-item{
    font-size: 24px;
  }
  #footer img{
    padding-left:10px;
    padding-right: 10px;
  }
  #footer-links .row{
    margin-right: 40px;
    z-index: 1000;
  }
  #ui-logo{
    width: 100px;
  }
  #rss-logo{
    margin-top:65px;
  }
  #twitter-logo{
    margin-top:65px;
  }

  .userbox {
    width: 100%;
    padding: 20px;
  }

  .input-block-level {
    width: 100%;
  }

  .user-labels {
    font-size: 12px;
  }

  #description {
    font-size: 18px;
  }

}

@media only screen and (min-width: 321px)
and (max-width: 424px) {
  #home-page.container, #topics.container, #menu.container, #footer.container{
    width: 100%;
    padding:0px;
    margin: 0px 0px 50px 0px;
  }

  #featured {
    display: none;
  }

  tr {
    display: table;
    width: 60%;
  }
  td {
    display: table-row;
  }

  .smallHeader {
    display: none;
  }

  #header-image{
    width: 80%;
  }
  .collection-item, .item-item{
    width: 200px;
  }
  #footer.container{
    padding: 50px;
  }
  #footer .menu-item{
    font-size: 18px;
  }

  #description {
    font-size: 18px;
  }
}

@media only screen and (min-width: 425px) and (max-width: 767px) {
  #home-page.container, #topics.container, #menu.container, #footer.container{
    width: 100%;
    padding:0px;
    margin: 0px 0px 50px 0px;
  }

  tr {
    display: table;
    width: 60%;
  }
  td {
    display: table-row;
  }

  .smallHeader {
    display: none;
  }

  #header-image{
    width: 80%;
  }
  .collection-item, .item-item{
    width: 225px;
  }
  #footer.container{
    padding: 50px;
  }
  #footer .menu-item{
    font-size: 18px;
  }

  #description {
    font-size: 24px;
  }
}

@media only screen and (min-width: 768px)
and (max-width: 1023px) {
  #home-page.container, #topics.container, #menu.container, #footer.container{
    width: 100%;
    padding:0px;
    margin: 0px 0px 0px 0px;
  }

  #description {
    font-size: 36px;
  }

  #header-image{
    width: 50%;
  }
  .collection-item, .item-item{
    width: 195px;
  }
  #footer.container{
    padding: 50px;
  }
  #footer .menu-item{
    font-size: 24px;
  }
  #searchbox {
    width: 55%;
  }

  .userbox {
    width: 80%;
    padding: 40px;
  }

  .input-block-level {
    width: 80%;
  }

  .textinput {
    width: 80%;
  }

  .user-labels {
    font-size: 18px;
  }
}

@media only screen and (min-width: 0px)
and (max-width: 767px) {
  #searchbox {
    width: 55%;
  }

  #header-image{
    width: 80%;
  }

  .userbox {
    width: 100%;
    padding: 20px;
  }

  .input-block-level {
    width: 100%;
  }

  .textinput {
    width: 100%;
  }

  .user-labels {
    font-size: 12px;
  }
}

@media only screen and (min-width: 1024px)
and (max-width: 1439px) {

  .userbox {
    width: 60%;
    padding: 40px;
  }

  #description {
    font-size: 36px;
  }

  #header-image{
    width: 40%;
  }

  .input-block-level {
    width: 80%;
  }

  .textinput {
    width: 80%;
  }

  .user-labels {
    font-size: 18px;
  }

  #submit {
    margin-left: 0px;
  }

}

@media only screen and (min-width: 1440px)
and (max-width: 2559px) {

  .userbox {
    width: 40%;
    padding: 40px;
  }

  #description {
    font-size: 18px;
  }

  .input-block-level {
    width: 80%;
  }

  .textinput {
    width: 80%;
  }

  .user-labels {
    font-size: 21px;
  }

}

@media only screen and (min-width: 2560px)
and (max-width: 5000px) {

}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}

@media all and (-ms-high-contrast: none),
       (-ms-high-contrast: active) {
    /*IE10+ CSS styles go here*/

}