@charset "UTF-8";
/* # Color Variable Definitions 因为我们都爱颜色，对吧？
================================================== */
/* 
 * For sake of convention, the color variables 
 * are initially defined as color, but in-code
 * implementation uses function specific aliases.
 * This is done to avoid confusing naming conflicts.
 *
 * Building an Instasite? No problem. override.scss
 * is mostly layed out for you, simply tweek the 
 * selectors & the aliases below - easy huh?. 
 */
/* # Structural Variable Definitions
================================================== */
/* # Imports
================================================== */
/* # Functions
================================================== */
/* # Mixins
================================================== */
aside.left h6 {
  text-transform: uppercase;
  margin-bottom: 8px !important;
  font-size: 1.5em;
}

aside .aside-image-link {
  margin-bottom: 10px;
  display: block;
}

.items {
  overflow: hidden;
}

.items h3.groupby-heading {
  font-size: 18px;
  margin-bottom: 15px;
}

.items article {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 10px 5px;
}

.items article.odd {
  background-color: #F1F1F1;
}

.items article.last {
  border: 0;
}

article .meta {
  width: 100%;
  padding: 42px 0 12px;
  font-size: 1.0em;
  line-height: 1.0em;
}

article .meta p {
  margin-bottom: 15px;
}

article .meta span {
  font-weight: bold;
  color: green;
}

article .meta a {
  text-decoration: none;
}

article .meta img {
  display: block;
  float: right;
  margin: 0 0 20px 20px;
}

article .highlight, aside ul[id*=list] .highlight, aside ul[class*=list] .highlight {
  border-radius: 3px;
}

article h3,
article span.time {
  float: left;
  margin: 6px 5px;
  line-height: normal;
}

article span.time {
  font-weight: normal;
  margin-right: 10px;
  font-family: 'Lato', sans-serif;
}

article h3 a {
  text-decoration: none;
  line-height: 1em;
  font-weight: bold !important;
}

article .media {
  float: right;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

article .media li {
  display: block;
  float: left;
  padding-left: 0 !important;
  width: 28px;
  margin-left: 8px;
  line-height: 28px;
  height: 28px;
  font-size: 1.2em;
  margin: 0px 7px !important;
  color: red;
  position: relative;
}
article .media li:hover {
  opacity: 0.9;
}

article .media li a {
  text-decoration: none;
  position: absolute;
  left: 0;
  top: 0;
  height: 28px;
  width: 28px;
  /*img replace hack*/
  display: block;
  text-indent: -999em;
  white-space: nowrap;
  overflow: hidden;
}

article.detail {
  border: 0;
}

article.detail .summary {
  font-size: 1.3em;
  line-height: 1.6em;
  margin-top: 25px;
}

#video-wrap {
  margin-bottom: 15px;
  overflow: hidden;
  background: url(/_img/ajax-loader.gif) no-repeat center center;
  width: 100% !important;
}

#video-player {
  width: 100%;
}

.paginate-label {
  float: left;
  padding-top: 10px;
  margin-left: 10px;
  font-size: 1.2em;
  font-weight: bold;
  margin-right: 24px;
}

/* Pagination (You may want to use this in your main stylesheet). */
#pagination {
	padding:10px;
	background-color:#f1f1f1;
}

#pagination a {
	padding:5px 8px;
	text-decoration:none;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	color:#555555;
	margin-right:3px;
}

#pagination a:hover {
	color:#ffffff;
}

#pagination a#current {
	color:#fffeff;
}

#pagination a#off {
	color:#cccccc;
}

#pagination a#off:hover {
	background-color:transparent;
	color:#cccccc;
}

#pagination a#next {

}

#pagination a#previous {

} 

/* Filter */
.filters {
  margin-bottom: 10px;
  overflow: hidden;
  padding: 15px 20px 10px 20px;
  position: relative;
  z-index: 1000;
  background: #F1F1F1;
  border: 1px solid #E5E5E5;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.filters h6 {
  float: none;
  margin-right: 20px;
  margin-bottom: 5px;
  margin-top: 0;
  padding-top: 6px;
  font-size: 1.4em;
  font-weight: normal;
  color: #999999;
}

.filters #article-search {
  float: right;
}

/* @group Select Menus */
.ui-selectmenu {
  display: block;
  float: left;
  position: relative;
  height: 34px;
  width: 150px;
  text-decoration: none;
  overflow: hidden;
  margin-right: 5px;
  margin-bottom: 5px;
  background: #dddddd;
  padding: 0;
}

#content a.ui-selectmenu:hover {
  text-decoration: none;
}

.ui-selectmenu-icon {
  position: absolute;
  right: 6px;
  margin-top: -8px;
  top: 50%;
}

.ui-selectmenu-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  z-index: 1001;
  top: 0;
  visibility: hidden;
  overflow: auto;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #F1F1F1;
  height: 200px;
  width: 200px !important;
}

.ui-selectmenu-open {
  visibility: visible;
}

.ui-selectmenu-menu-popup {
  margin-top: -1px;
}

.ui-selectmenu-menu-dropdown {
  margin: 0;
  padding: 0;
  width: 100% !important;
  height: 200px !important;
  overflow: auto;
}
.ui-selectmenu-menu-dropdown li {
  margin: 0;
  padding: 0;
}
.ui-selectmenu-menu-dropdown li a {
  padding: 3px 0;
}

.ui-selectmenu-menu li {
  padding: 0;
  margin: 0;
  display: block;
  border-top: 1px dotted transparent;
  border-bottom: 1px dotted transparent;
  border-right-width: 0 !important;
  border-left-width: 0 !important;
  font-weight: normal !important;
}

.ui-selectmenu-menu li a, .ui-selectmenu-status {
  line-height: 1.4em;
  display: block;
  padding: .3em 1.5em .3em 1em;
  outline: none;
  text-decoration: none;
  font-size: 11px;
  color: #333333;
}

.ui-selectmenu-menu li.ui-selectmenu-hasIcon a, .ui-selectmenu-hasIcon .ui-selectmenu-status {
  padding-left: 20px;
  position: relative;
  margin-left: 5px;
}

.ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon {
  position: absolute;
  top: 1em;
  margin-top: -8px;
  left: 0;
}

.ui-selectmenu-status {
  line-height: 24px;
  height: 24px;
  overflow: hidden;
  font-size: 0.9em;
  color: red;
  position: relative;
}
.ui-selectmenu-status span.icon-sort-updown {
  font-size: 0.9em;
  position: absolute;
  right: 10px;
  top: 10px;
}

.ui-selectmenu-open li.ui-selectmenu-item-focus a {
  background: rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}

.ui-selectmenu-menu li span, .ui-selectmenu-status span {
  display: block;
  margin-bottom: .2em;
}

.ui-selectmenu-menu li .ui-selectmenu-item-header {
  font-weight: bold;
}

.ui-selectmenu-menu li .ui-selectmenu-item-footer {
  opacity: .8;
}

/*for optgroups*/
.ui-selectmenu-menu .ui-selectmenu-group {
  font-size: 1em;
}

.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label {
  line-height: 1.4em;
  display: block;
  padding: .6em .5em 0;
  font-weight: bold;
}

.ui-selectmenu-menu .ui-selectmenu-group ul {
  margin: 0;
  padding: 0;
}

/* =Override
---------------------------------------------------------------------
*/
.content {
  width: 70%;
  padding: 0;
  float: right;
  font-size: 1.2em;
}

aside.left {
  float: left;
  width: 27%;
}

#sermons aside h4 {
  font-size: 1.4em;
  margin-bottom: 1.4em;
}

/* Small Break */
@media (max-width: 37.5em) {
  .content {
    width: 100%;
    float: none;
  }

  aside.left {
    float: none;
    width: 100%;
  }

  article .time {
    display: block;
    float: none;
  }

  article h3 {
    display: block;
    float: none;
    margin: 5px 0;
  }

  article .media {
    float: none;
    margin: 5px 0;
  }

  article .meta img {
    float: none;
    width: 100%;
    margin-left: 0;
  }

  aside.left img {
    width: 100%;
  }

  #sermons aside h4 {
    margin-top: 25px;
  }
}