/**
 * @file
 * Views Styling
 */


/*
 * Views' admin tabs
 *
 * The views admin tabs use the same classes as the secondary tabs. We prevent
 * some of our tab styling from bleeding into (and breaking) the Views admin
 * pages. If your sub-theme isn't used for admin pages, you can remove this
 * entire section.
 */

.views-displays .secondary li {
  float: none;
  margin: 0 6px 0;
}

.views-displays .secondary a:link,
.views-displays .secondary a:visited {
  text-shadow: none;
  padding: 2px 7px 3px;
}

.views-displays .secondary .open > a {
  -webkit-border-radius: 7px 7px 0 0;
  -moz-border-radius: 7px 7px 0 0;
  -ms-border-radius: 7px 7px 0 0;
  -o-border-radius: 7px 7px 0 0;
  border-radius: 7px 7px 0 0;
}

.views-displays .secondary .open > a:hover {
  color: #333;
}

.views-displays .secondary .action-list li {
  margin: 0;
}

.views-displays .secondary .action-list li:first-child {
  -webkit-border-radius: 0 7px 0 0;
  -moz-border-radius: 0 7px 0 0;
  -ms-border-radius: 0 7px 0 0;
  -o-border-radius: 0 7px 0 0;
  border-radius: 0 7px 0 0;
}

.views-displays .secondary .action-list li:last-child {
  -webkit-border-radius: 0 0 7px 7px;
  -moz-border-radius: 0 0 7px 7px;
  -ms-border-radius: 0 0 7px 7px;
  -o-border-radius: 0 0 7px 7px;
  border-radius: 0 0 7px 7px;
}
.not-front .view {
  overflow-x: auto;
}
.not-front .views-table {
  width: 100%;
}
@media all and (min-width: 768px) {
  .not-front .views-table .views-field-body {
    min-width: 250px;
  }
}
.not-front .views-field-body h1,
.not-front .views-field-body h2,
.not-front .views-field-body h3,
.not-front .views-field-body h4,
.not-front .views-field-body h5,
.not-front .views-field-body h6 {
  margin: 0 0 0.5em 0;
  font-weight: bold;
}
.not-front .views-table .views-field-field-image {
  min-width: 30px;
}
.views-table thead tr
.view .sticky-header thead {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#page .views-table thead tr,
#page .view .sticky-header thead tr {
  background: #2f518f;
}
.views-table td,
.views-table thead th,
.view .sticky-header thead th {
  padding: 10px;
}
.views-table thead,
.views-table thead a,
.view .sticky-header thead,
.view .sticky-header thead a {
  /*color: #c7dcf6 !important;*/
  color: white !important;
}
.views-table thead th,
.views-table thead th a,
.view .sticky-header thead th,
.view .sticky-header thead th a {
  font-weight: 300;
}
.views-table thead th,
.view .sticky-header thead th {
  padding: 0.4em 0.6em;
  border: 1px solid #FFF;
  min-width: 96px;
}
.views-table td,
.view .sticky-header td {
  border-right: 1px solid #fff;
  padding: 0.4em 0.6em;
  border: 1px solid #eee;
}
.views-table td.active,
.view .sticky-header td.active { border: 1px solid white !important; }
.view-event td.views-field-title,
.view-announcement td.views-field-title {width: 40%; max-width: 300px;}
.views-table tr,
.view .sticky-header tr {
  background-color: white;
}
.views-table tr:nth-child(even),
.view .sticky-header tr:nth-child(even) {
  background-color: whitesmoke;
}
.views-table thead th a img,
.view .sticky-header thead th a img {
  margin-left: 5px;
}
.views-table th.active a,
.view .sticky-header th.active a,
.views-table thead a:hover,
.view .sticky-header thead a:hover {
  color: #fff !important;
}
.views-table a {
  white-space: pre-line;
}
.date-display-single { white-space: nowrap; }
.views-field-field-external {
  max-width: 200px;
}
.views-field-field-external a {
  white-space: pre-line;
}

/**
 * Announcement View
 **/
.not-front .view-announcement .views-field-field-item-date {
  width: 100px;
}

/**
 * Dataset Highlight View
 **/
.not-front .view-highlight .views-field-field-image {
  width: 20%;
}

/**
 * Ocean Stories View
 **/
.not-front .view-ocean-stories .views-field-field-image {
  width: 20%;
}

/**
 * Images View
 **/
.not-front .view-images .item-list {
  float: left;
  width: 33%;
  margin-top: 10px;
  margin-bottom: 10px;
}
.not-front .view-images .item-list h3 {
  margin: 0;
  padding-left: 10px;
  padding-right: 10px;
}
.not-front .view-images .item-list ul,
.not-front .view-images .item-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.not-front .view-images .item-list ul {
  padding-left: 10px;
  padding-right: 10px;
  height: 80px;
  overflow: auto;
}
.not-front .view-images .views-field {
  padding-left: 10px;
  padding-right: 10px;
}
.not-front .view-images .views-field-title {
  font-weight: bold;
  font-size: 1.2em;
}
.not-front .view-images .views-field-field-date {
  font-style: italic;
}
.not-front .view-images .views-field-body {
  margin-top: 5px;
}
@media all and (min-width: 550px) and (max-width: 959px) {
  .not-front .view-images .item-list {
		width: 50%;
	}
}
@media all and (max-width: 550px) {
  .not-front .view-images .item-list {
    width: 100%;
  }
  .not-front .view-images .item-list ul {
    height: auto;
  }
}

/**
 * Animations View
 **/
.not-front .view-animations .views-row {
	float: left;
  width: 100%;
}
.not-front .view-animations .views-field-field-youtube {
	float: left;
	width: 40%;
	margin-right: 20px;
}
.not-front .view-animations .views-field-field-youtube .field-content {
	position: relative;
	width: 100%;
	height: 0;
	padding: 0 0 75% 0;
	margin: 0;
}
.not-front .view-animations .views-field-field-youtube iframe {
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
}
.not-front .view-animations .views-field-title {
	font-weight: bold;
	font-size: 1.3em;
	margin-bottom: 5px;
}
.not-front .view-animations .views-field-field-date {
	font-style: italic;
}
.views-animation-page-divider {
	float: left;
	width: 100%;
	clear: both;
}

@media all and (min-width: 550px) and (max-width: 959px) {
	.not-front .view-animations .views-field-field-youtube {
		width: 50%;
	}
}
@media all and (max-width: 550px) {
	.not-front .view-animations .views-field-field-youtube {
		margin-bottom: 10px;
		width: 100%;
	}
}