/* Custom CSS overrides */


/* Fixes for the contact us form */

.page-node-18709 input.form-text,

/* Contact us form */

.page-node-57269 input.form-text,

/* dev econnect newsletter - delete when dbs are synced */

.page-node-57273 input.form-text,

/* econnect newsletter signup */

.page-node-57270 input.form-text,

/* dev - bhl newsletter - delete when dbs are synced */

.page-node-57274 input.form-text
/* bhl newsletter signup */

{
  clear: left;
  display: block;
}

.page-node-18709 select.form-select,

/* Contact us form */

.page-node-57269 select.form-select,

/* dev econnect newsletter - delete when dbs are synced */

.page-node-57273 select.form-select,

/* econnect newsletter signup */

.page-node-57270 select.form-select,

/* dev - bhl newsletter - delete when dbs are synced */

.page-node-57274 select.form-select
/* bhl newsletter signup */

{
  clear: left;
  display: block;
}

select {
  height: 40px !important;
}

.view-subject-guides {
  margin-left: 40px;
}

.view-subject-guides p {
  margin-bottom: 0px;
}

.views-exposed-widget.views-submit-button,
.views-exposed-widget.views-reset-button {
  margin-top: 5px;
}


/* PLM 3/17/2016 - adding simple text over image overlay on hover for views */

ul.img-list {
  /* width: 640px; */
  /* height: 425px; */
  width: 100%;
  height: 100%;
  margin: 0 0;
  padding: 0 0;
  list-style-type: none;
}


/* Set the list items to 100%. Set the overlay to 100%, make it transparent and only opak on hover */

ul.img-list li {
  display: block;
  position: relative;
  float: left;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}


/* Place the link in the middle of the box and style it */

span.text-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 0.7); */
  background: rgba(255, 255, 0, 0.7);
  opacity: 0;
  transition: opacity 500ms;
}


/* ul.img-list li:hover */

span.text-content:hover {
  opacity: 1;
}


/* Place the link in the middle of the box and style it */

span.text-content a {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-45%);
  margin-left: auto;
  margin-right: auto;
  color: #a5a5a5;
  text-align: center;
  text-decoration: none;
  font: 2em sans-serif;
}

span.text-content a:hover {
  color: #fff;
  text-decoration: underline;
}


/* adjust the css and have the images smaller and next to each other */

ul.img-list {
  width: 100%;
  margin: 0 0;
  padding: 0 0;
  list-style-type: none;
}

ul.img-list li {
  display: block;
  position: relative;
  float: left;
  /* width: 40%; */
  height: auto;
  /* margin: 0 5%; */
}

ul.img-list img {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
}


/* REV 2 */


/* Place the link in the middle of the box and style it */

span.text-content2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  /* background: rgba(255, 255, 0, 0.7); */
  opacity: 0;
  transition: opacity 500ms;
}


/* ul.img-list li:hover */

span.text-content2:hover {
  opacity: 1;
}


/* Place the link in the middle of the box and style it */

span.text-content2 {
  display: block;
  /* position: relative; */
  /* top: 50%; */
  /* transform: translateY(-50%); */
  margin-left: auto;
  margin-right: auto;
  color: #a5a5a5;
  text-align: center;
  text-decoration: none;
  font: 1.25em sans-serif;
}

span.text-content2:hover {
  color: #fff;
  text-decoration: underline;
}


/* ============================================================================================================================
== RECTANGLE-BORDER STYLE WITH CURVE
** ============================================================================================================================ */

.rectangle-speech-border {
  position: relative;
  padding: 50px 15px;
  margin: 1em 0 3em;
  border: 10px solid #5a8f00;
  text-align: center;
  color: #333;
  background: #fff;
  /* css3 */
  border-radius: 20px;
}


/* creates larger curve */

.rectangle-speech-border:before {
  content: "";
  position: absolute;
  z-index: 10;
  bottom: -40px;
  left: 50px;
  width: 50px;
  height: 30px;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: #5a8f00;
  background: transparent;
  /* css3 */
  -webkit-border-bottom-right-radius: 80px 50px;
  border-bottom-right-radius: 80px 50px;
  /* reduce the damage in FF3.0 */
  display: block;
}


/* creates smaller curve */

.rectangle-speech-border:after {
  content: "";
  position: absolute;
  z-index: 10;
  bottom: -40px;
  left: 50px;
  width: 20px;
  height: 30px;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: #5a8f00;
  background: transparent;
  /* css3 */
  -webkit-border-bottom-right-radius: 40px 50px;
  border-bottom-right-radius: 40px 50px;
  /* reduce the damage in FF3.0 */
  display: block;
}


/* creates a small circle to produce a rounded point where the two curves meet */

.rectangle-speech-border> :first-child:before {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 45px;
  width: 10px;
  height: 10px;
  background: #5a8f00;
  /* css3 */
  border-radius: 10px;
}


/* creates a white rectangle to cover part of the oval border*/

.rectangle-speech-border> :first-child:after {
  content: "";
  position: absolute;
  bottom: -10px;
  /* left:76px; */
  /* width:24px; */
  left: 70px;
  width: 20px;
  height: 15px;
  background: #fff;
}


/* Altering width for responsive share buttons within colorbox */

.rrssb-buttons.tiny-format {
  width: 335px;
}


/* Changing Label Display to block instead of inline-block */

label {
  display: block;
}


/* PLM 3/11/2016 */


/* Experimenting with Bootstrap Grid layout with zero padding/margin */


/*
#views-bootstrap-grid-1 .row [class*="col-"] {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 !important;
}
*/


/* PLM 4/22/2016 */


/* Share library stories - draggable queue list - set table width */

.views-form-smithsonian-libraries-user-stories-gallery-page-1 table {
  max-width: 550px;
}

.draggableviews-table-smithsonian-libraries-user-stories-gallery-page-1 table {
  max-width: 550px;
}

.views-table sticky-enabled cols-4 draggable tabledrag-processed tableheader-processed sticky-table {
  max-width: 550px;
}


/* PLM 7/18/2016 */


/* Set table width for views */

.fix-width-10 {
  width: 10%;
}

.fix-width-20 {
  width: 20%;
}

.fix-width-25 {
  width: 25%;
}

.fix-width-30 {
  width: 30%;
}

.fix-width-33 {
  width: 33%;
}

.fix-width-40 {
  width: 40%;
}

.fix-width-50 {
  width: 50%;
}

.fix-width-60 {
  width: 60%;
}

.fix-width-66 {
  width: 66%;
}

.fix-width-70 {
  width: 70%;
}

.fix-width-75 {
  width: 75%;
}

.fix-width-80 {
  width: 80%;
}

.fix-width-90 {
  width: 90%;
}

.tutorial table caption {
  caption-side: top;
  font-family: 'PT Sans', sans-serif;
  text-align: left;
  margin: 20px 10px 10px 10px;
  font-size: 30px;
  font-weight: 700;
  color: #0592A5;
  line-height: 120%;
  padding: 0;
}

.field-name-field-image1 {
  float: inherit;
}

.feed-icon img {
  display: none;
}

.field-resize-100 {
  font-size: 100%;
}

.field-resize-125 {
  font-size: 125%;
}

.field-resize-150 {
  font-size: 150%;
}

.center-image img {
  display: block;
  margin: 0 auto;
}

td.center-image {
  vertical-align: middle;
}


/* PLM 6/20/2017 */


/* Set grid 50/50 width for collection terms page list views */

.collection-terms .dams-image img {
  margin: 0 0;
}

.collection-terms .row {
  float: left;
}

.collection-terms .node-teaser img {
  max-width: 100%;
}