/*  Admin Edit Site Structure
	===

	Container
	---
*/
	.content-container{
		max-width: 1000px;
		margin: auto;
	}


/*  Page Heading
	---

	<div class="page-heading-container">
		<h1 class="page-heading" />
	</div>
*/
	.page-heading-container{
		font-size: 1.12em;
	}
	.page-heading{
		margin: 0;
		padding: 0;
		line-height: normal;
		overflow: hidden;
	}


/*  Header
	---
*/
	.site-header-full-width{}

		.site-header-full-width img{
			display: block;
			width: 100%; /* Force header images to fill width. */
		}

	.site-header-logo-square{}

		.site-header-logo-square img{
			max-width: 200px;
			display: block;
		}

	.site-header-callout{
		max-width: 800px;
	}


/*  Footer
	---
*/
	#site-footer{
		margin: 1em 0;
		background-color: #FFF;
		line-height: 25px;
		min-height: 1em;
	}

	#site-footer-wrapper{
		padding: 10px;
	}

	/* Footer Copyright */
	#site-footer-copy{
		color: #888;
		font-size: 13px;
		margin-right: 1em;
	}

	/* Footer Navigation */
	#navigation-footer{
		margin: 0;
		max-width: 650px;
	}

	#navigation-footer .navigation-item-container{
		display: inline-block;
		border-left: 1px solid #AAA;
		padding: 0 6px 0 8px;
	}

		#navigation-footer .navigation-item-container:first-child{
			border-left: 0px;
		}

	#navigation-footer .navigation-item-container .navigation-item{
		font-size: 13px;
	}

	/* Footer Brand */
	#site-login-button{
		margin-left: 1em;
		margin-right: 1em;
	}





/*  BPE
	===

	BPE has become a general term in our CSS to define
	any content section within admin_edit.


	BPE Structure
	---

	<div class="bpe">
		<div class="bpe-container">
			<div class="bpe-title" />
			<div class="bpe-content" />
			<div class="bpe-footer" />
		</div>
	</div>
*/
	.bpe{
		max-width: 1000px;
		position: relative;
		background: #fff; /* Temp Fix for BPE */
		margin: 0 0 10px;
	}

	.draggable .bpe{ margin: 0; } /* For draggable elements in edit mode */

	.bpe:before,
	.bpe:after{
		z-index: -1;
	}

	.bpe a{ color: #777; }
	.bpe a:hover,
	.bpe a:focus{
		color: #333;
	}

	/* All BPEs have a container with content and optional title. */
	.bpe-container{
		position: relative;
		padding: 10px;
		overflow: auto;
	}

	.bpe-content{
		position: relative;
	}

	.bpe-content ul{
		list-style: none;
		padding: 0px;
		margin: 0px;
	}


/*  BPE Title
	---

	<div class="bpe-container">
		<div class="bpe-title">
		   ...
		</div>
	</div>
*/
	.bpe-title{
		border-bottom: 3px solid;
		margin: 0 0 0.5em 0;
	}


/*  BPE Title Heading
	---

	Any heading can be used as a BPE title.

	<div class="bpe-title">
		<h2 class="bpe-heading" />
	</div>


	Including page headings.

	<div class="bpe-title">
		<h1 class="page-heading" />
	</div>
*/

	.bpe-heading,
	.bpe-title .page-heading{
		margin: 0 0 0.25em 0;
		line-height: normal;
	}

	.page-heading.pull-left{
		max-width: 80%;
	}

	/* Stats Widget Titles */
	/* Todo: after legacy migration, update stats widgets to use H2 */
	.bpe .statsWidget h3{
		border-bottom: 3px solid;
		margin: 0 0 0.25em 0;
		line-height: 1em; /* Set line-height to match H2 */
		font-size: 2.25em; /* Set font size to match H2 */
	}


/*  BPE Footer
	---

	<div class="bpe-container">
		<div class="bpe-footer">
			...
		</div>
	</div>
*/
	.bpe-footer{
		float: right;
	}

	.bpe-footer a{
		padding: 3px;
		text-transform: uppercase;
		background: #000000;
		text-decoration: none;
		color: #fff;
		font-size: 10px;
	}

	.bpe-footer a:hover{
		background: #666;
		color: #fff;
		text-decoration: none;
	}

	.bpe-footer i.fa{ margin-top: 0px; }

	.bpe-actions{
		text-align: center;
		padding-top: 10px;
	}





/*  BPE Types
	===
*/
	.bpe-content-block{}

	.bpe-code{}
	.bpe-code{ background: none; }
	.bpe-code .bpe-container{ padding: 0; }

	.bpe-single-photo{}
	.bpe-photo-album{}
	.bpe-photo-slider{}

	.bpe-document{}
	.bpe-document-link{ display: block; }
	.bpe-document-image{}
	.bpe-document-doc{}
	.bpe-document-pdf{}
	.bpe-document-archive{}
	.bpe-document-file{}

	.bpe-link{}
	.bpe-link a{ display: block; }

	.bpe-events-aggregator{}
	.bpe-flash{}
	.bpe-flash .bpe-content{ overflow: hidden; }
	.bpe-flash .bpe-content object{ max-width: 100%; }

	.bpe-transparent{
		background-color: transparent;
		margin: 0;
	}
	.bpe-transparent .bpe-container{ padding: 0; }


/*  BPEs in Global Header Content Area
	---
*/
	/* General. */
	.site-global-header-content-area .bpe{
		margin: 0px;
	}

	/* Remove BPE backgrounds. */
	.site-global-header-content-area .bpe-slider,
	.site-global-header-content-area .bpe-image{
		background: transparent;
	}

/*  BPE Divider
	---
*/
	.bpe-divider.bpe{
		background: none;
	}
	.bpe-divider hr{
		border-top: 2px solid #ccc;
		border-bottom: none;
		margin: 5px;
	}


/*  BPE News Aggregator (Rich Media)
	---
*/
	/* Reset Bootstrap Stylings. */
	.bpe-news-aggregator .carousel,
	.carousel-thumbs{
		margin: 0px;
	}


	/* Carousel Item Info (Title/Excerpt). */
	.bpe-news-aggregator .carousel-item-info-container{
		position: absolute;
		bottom: 0px;
		width: 100%;
	}

	.bpe-news-aggregator .carousel-item-info{
		overflow: hidden;
		padding: 10px;
		background-color: rgba(0, 0, 0, 0.9);
		color: #fff;
		cursor: pointer;
	}

	.carousel-item-info .article-title{
		text-transform: uppercase;
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		padding: 0;
		margin: 0;
		font-size: .5em;
		line-height: 1.4em;
		color: white;
	}

	.carousel-item-info .article-title:hover,
	.carousel-item-info .article-title:focus{
		color: inherit;
	}

	.carousel-item-info .article-summary{
		overflow: hidden;
		max-height: 2.4em;
		font-size: 1.2em;
		margin: 0;
		line-height: 1.2em;
		opacity: .8;
	}

	@media only screen and (max-width: 768px) {
		.carousel-item-info{
			font-size: .70em;
		}
	}


	/* Carousel Image and Date. */
	.bpe-news-aggregator .carousel-container{
		box-sizing: padding-box;
		padding: 0 2px;
	}

	.bpe-news-aggregator .article-image{
		display: block;
		/* max-height: 300px; */
		min-height: 225px;
		overflow: hidden;
		position: relative;
	}

	.bpe-news-aggregator .article-date-posted{
		text-transform: uppercase;
		font-size: 10px;
		line-height: .5em;
	}

	.bpe-news-aggregator .carousel .article-date-posted-news-agg{
		position: absolute;
		top: 0;
		right: 0;
		background: #000;
		padding: 5px 10px;
		opacity: 0.5;
		line-height: 1em;
		color: #FFF;
	}

	.bpe-news-aggregator .article-date-posted-news-agg:hover{ opacity: 1; }


	/* Carousel Controls. */
	.bpe-news-aggregator .carousel-control{
		text-decoration: none;
		border: none;
		top: 50%;
		color: white;
		opacity: 1;
		font-size: 36px;
		opacity: .9;
		background-color: rgba(0,0,0,.75);
		border-radius: 40px;
		-webkit-border-radius: 40px;
	}

	.bpe-news-aggregator .carousel-control:hover,
	.bpe-news-aggregator .carousel-control:focus{
		opacity: 1;
		color: white;
	}

	@media only screen and (max-width: 360px) and (orientation:portrait) {

		/* Adjust position of carousel controls. */
		.bpe-news-aggregator .carousel-control{
			top: 40%;
		}


		/* Hide summary and enable article title wrap. */
		.bpe-news-aggregator .carousel-item-info-container .carousel-item-info{
			height: 50px;
		}

		.bpe-news-aggregator .carousel-item-info-container .article-title{
			white-space: normal;
		}

		.bpe-news-aggregator .carousel-item-info-container .article-summary{
			display: none;
		}


		/* Stack article image and container info. */
		.bpe-news-aggregator .article-image{
			height: 175px;
			min-height: initial;
		}

		.bpe-news-aggregator .article-image img{
			width: auto;
			height: 100%;
		}

		.bpe-news-aggregator .carousel-item-info-container{
			position: relative;
		}


		/* Hide Thumbnails */
		.bpe-news-aggregator .carousel-thumbs{
			display: none;
		}
	}


	/* Thumbnails */
	.carousel-thumbs-list{
		width: 100%;
		margin: 5px 0 0 0;
		padding: 0;
	}

	.carousel .thumbnails{
		max-height: 50px;
		overflow: hidden;
	}

	.carousel .thumbnails > li{
		margin: 0 0 0 0px;
		display: inline-block;
	}

	.carousel a.thumbnail{
		border-radius: 0px;
		cursor: pointer;
		overflow: hidden;
		display: block;
		border: 0px solid #FFF;
		padding: 0 2px 0 2px;
		opacity: .75;
		max-height: 54px;
		box-shadow: none;
	}

	.carousel a.thumbnail:hover,
	.carousel a.thumbnail:focus{
		border: 0px solid #CCC;
		opacity: 1;
	}


	/* Disable Thumbnail Controls. */
	.carousel-thumbs .carousel-control{
		font-size: 2.0em;
		display: none;
	}


/*  BPE News Aggregator (Text)
	---
*/
	.bpe-news-aggregator-text{}

	.data-entry .newsThumb a{ display: block; }
	.data-entry .newsThumb img{ border-radius: 2px; }


/*  BPE Form
	---
*/
	.bpe-form{}

	.bpe-form .bpe-container{ }
	.bpe-form .bpe-title{ padding: 0px 10px; }
	.bpe-form form input,
	.bpe-form form textarea,
	.bpe-form form select{ max-width: 100%; padding: 2px 0px; }

	.bpe-form form .radio input[type="radio"],
	.bpe-form form .checkbox input[type="checkbox"] {
		width: auto;
	}

	.form-field input,
	.form-field select,
	.form-field textarea{ width: 100%; }
	.form-field {
		padding: 1em;
	}

	.bpeFormPub li{ list-style: none; }
	.bpeFormPub li:nth-child(2n+1){ background: #eeeeee; }


/*  BPE Table
	---
*/
	.bpe-table{}
	.bpe-table .pscms_interior_table{ table-layout: fixed; }


/*  BPE Registration Banner
	---
*/
	.bpe-ps-registration-snippet{}
	.bpe-ps-registration-banner{}

	.bpe-ps-registration-banner .registration-banner{
		display: block;
		background-color: #000;
		color: #fff;
		padding: 20px 0;
		text-align: center;
	}

	.bpe-ps-registration-banner .registration-banner:hover{
		background-color: #ddd;
		color: #333;
	}


/*  BPE Countdown
	---
*/
	.bpe_countdown-digit{
		text-align: center;
		font-weight: bold;
		text-transform: uppercase;
		width: 22%;
		display: inline-block;
	}

	.time-clock-digit{
		font-size: 44px;
		line-height: 1.5em;
	}

	.column-side-left-global .time-clock-digit,
	.column-side-left .time-clock-digit,
	.column-side-right-global .time-clock-digit{
		font-size: 18px;
		line-height: 1.5em;
	}

	.time-label{
		font-size: 11px;
	}

	.bpe-countdown .alert{
		background: none;
		border: none;
		text-shadow: none;
		color: inherit;
		padding: 10px;
	}


 /* Site Search BPE
	---

	<form id="search-site">
		<input type="search">
	</form>
 */

	#search-site input{
		height: 29px;
	}


/*  BPE Twitter Widget
	---

	Resets Twitter Widget.
*/
	.twtr-widget .twtr-doc,
	.twtr-widget .twtr-doc .twtr-timeline{
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		border-radius: 0px;
	}

	.twtr-widget .twtr-doc .twtr-timeline{}
	.twtr-widget .twtr-doc .twtr-hd{ border-bottom: 1px solid #666; background: transparent; }
	.twtr-widget .twtr-doc .twtr-hd h3,
	.twtr-widget .twtr-doc .twtr-hd h4{ }
	.twtr-widget .twtr-doc .twtr-ft{ border-top: 1px solid #666; }


/*  BPE Unstyled
	---
*/
	.bpe-countdown{}
	.bpe-twitter-feed{}
	.bpe-twitter-widget{}
	.bpe-youtube{}
	.bpe-ps-stats-snippet{}
	.bpe-ps-video-player{}





/*  BPE Styles
	===

	X-Up
	---

	Styling to display X number of
	items next to each other.
*/

	.bpe-slider-container{
		display: table;
		table-layout: fixed;
		width: 100%;
		white-space: nowrap;
	}

	.bpe-style-1up .cell{
		margin: 0.25em 0;
		padding: 0;
		width: 100%;
		clear: both;
	}

	.bpe-style-2up .cell{
		padding: 1%;
		max-width: 48%;
	}

	.bpe-style-3up .cell{
		padding: 1%;
		max-width: 31%;
	}

	.bpe-style-4up .cell{
		padding: 1%;
		max-width: 23%;
	}

	.bpe-style-10up .cell{
		padding: 1%;
		max-width: 8%;
	}

	.bpe-style-logo-bar .cell{
		display: table-cell;
		text-align: center;
		float: none;
	}

		.bpe-style-logo-bar .cell img{
			width: auto;
			max-height: 75px;
			margin: 0 auto;
			vertical-align: middle;
		}


	.full-width .cell{
		max-width: 100%;
	}

	.bpe-style-minimal{}
	.bpe-style-luxury{}
	.bpe-style-condensed{}
	.bpe-style-grid{}
	.bpe-style-list{}
	.bpe-style-full{}


/*  BPE Style Compact
	---
*/
	.bpe-style-compact {}
	.bpe-style-compact .data-entry,
	.bpe-style-compact.list-view .data-entry{
		padding: 5px 15px;
		height: 100%;
		box-sizing: border-box;
		margin-bottom: 0px;
	}

	.bpe-style-compact .data-entry p{
		display: none;
	}

	.bpe-style-compact .event-title,
	.bpe-style-compact .article-title{
		text-overflow: ellipsis;
		overflow: hidden;
		display: block;
		white-space: nowrap;
	}


	/* News Aggragator Specific*/
	.bpe-style-compact .newsThumb{
		display: none !important;
	}

	.bpe-style-compact .article-title:before{
		content: '\2022';
		position: relative;
		max-height: 0px;
		max-width: 0px;
		color: gray;
		top: -0px;
		position: relative;
		margin: 0 10px 0 6px;
	}

	.bpe-style-compact .container-margin{
		margin-left: 0 !important;
	}


	/* Events Aggragator Specific*/
	.bpe-style-compact .event-date,
	.bpe-style-compact .tags,
	.bpe-style-compact span:not(.nova-logo){
		display: none;
	}

	.bpe-style-compact .data-entry .header-container h5{
		font-weight: 100;
		overflow: hidden;
		white-space: normal;
		font-size: 1.0em;
		line-height: 1.8em;
	}

	.bpe-style-compact .event-date-container{
		line-height: 33px;
		width: 105px;
		white-space: nowrap;
	}

	.bpe-style-compact .event-date-compact{
		display: block;
		padding: 0 15px 0 0;
		min-width: 45px;
	}

	.event-date-compact{
		display: none;
	}





/*  Styles for different columns.
	---

	todo: replace with responsive patterns.
*/
	.span8 .data-entry .newsThumb,
	.span10 .data-entry .newsThumb{
		width: 110px;
		display: block;
	}

	.span8 .data-entry .container-margin,
	.span10 .data-entry .container-margin{
		margin-left: 125px;
	}

	.span8 .data-entry .text-container,
	.span10 .data-entry .text-container{
		margin: 0 0 0 0;
	}

	.span8 .data-entry .header-container,
	.span10 .data-entry .header-container{
		min-height: 65px;
	}

	.bpe-style-compact .data-entry .header-container{
		min-height: 0px;
	}


/*  Zebra Striping
	---
*/
	li.data-entry:nth-child(2n){ background: #f6f6f6; }
	li.data-entry:nth-child(2n+1){ background: #fff; }

	/* Anchored data block entries */
	.data-entry .data-link-block{
		display: block;
		height: 100%;
		position: relative;
	}

	.data-link-block h5{
		margin: 0;
		padding: 0;
		line-height: 1.3em;
	}


/*  Text Container
	----

	holds titles and summary.
*/
	.header-container h5{
		font-weight: bold;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 1.2em;
		line-height: 1.2em;
		margin-top: 5px;
		overflow: hidden;
	}

	.span8 .header-container h5,
	.span10 .header-container h5{
		white-space: normal;
	}

	.text-container p{
		margin: 8px 0 0 0;
	}

	.span8 .text-container p{
		margin: 0px;
	}

	/* Bootstrap icon Adjustment */
	.header-container .fa{
		opacity: .3;
	}

	.header-container .fa-time{
		height: 15px;
		background-position: -48px -23px;
	}


/*  Tags
	---

	Used for mutliday and recurring events.
	Todo: create component from this.
*/
	.tags{}

	ul.tags{
		margin: 5px 0px;
	}

	.tag,
	.tags li{
		display: inline;
		background-color: #eaeaea;
		border-radius: 2px;
		font-size: 10px;
		text-transform: uppercase;
		color: #777;
		padding: 2px 4px;
		margin: 0 2px 0 0;
		line-height: 22px;
		white-space: nowrap;
	}
	.tag-label{
		background: none;
		padding: 2px 0;
	}





/*  Components
	===

	Network Bar Component
	---

	<div class="network-container">
		<div class="network-ad-container" />
		<div class="network-info" />
	</div>
*/
	.network-container{
		padding: 5px;
		box-sizing: padding-box;
	}

	/* Network image and dropdown */
	.network-info{
		float: left;
		width: 250px;
	}
		.network-image{
			text-align: center;
			max-height: 68px;
			overflow: hidden;
			display: block;
		}
		.network-dropdown{
			margin: 5px 0 0 0;
			width: 100%;
			height: 22px;
		}

	/* Ad positioning. */
	.network-ad-container{
		float: right;
		height: 95px;
		margin-left: 5px;
		text-align: center;

		/* Responsive ads require defined width container. */
		width: calc(100% - 255px);

		/* Prevent ads from overflowing container. */
		overflow: hidden;
	}

	/* Vertically align content. */
	.network-ad-container:before{
		content: "";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

/*  Network Ad
	---

	Optimize network bar for different ad sizes.
*/
	.network-ad{
		display: inline-block;
		vertical-align: middle;
	}

	/* Increase ad area for tablets (768 x 90). */
	@media only screen and (max-width: 1000px) {
		.network-ad-container{
			width: calc(100% - 175px);
			height: 90px;
			margin-left: 0px;
		}
		.network-info{
			width: 175px;
		}
		.network-image{
			max-height: 48px;
		}
		.network-dropdown{
			height: 35px;
		}
	}

	/* Increase ad area for mobile (320 x 50). */
	@media only screen and (max-width: 940px) {
		.network-ad-container{
			width: calc(100% - 150px);
			height: 65px;
		}
		.network-info{
			width: 150px;
		}
		.network-image{
			max-height: 48px;
		}
		.network-dropdown{
			height: 22px;
		}
	}

	/* Stack ad on top of network image/dropdown. */
	@media only screen and (max-width: 528px) {
		.network-ad-container:before{
			display: block;
			height: auto;
		}
		.network-ad-container{
			width: 100%;
			height: auto;
			margin: 0 0 5px 0;
			overflow: visible;
		}
		.network-info{
			width: 100%;
		}
		.network-image{
			width: 110px;
			float: left;
			max-height: 28px;
		}
		.network-dropdown{
			margin: 0 0 0 5px;
			width: calc(100% - 115px);
			float: right;
			height: 28px;
		}
	}

	/* Overflow smallest ad unit. */
	@media only screen and (max-width: 385px) {
		.network-ad{
			overflow-x: scroll;
			width: 100%;
		}
	}


/*  Network Bar Full Width
	---

	Applies to container in layout.
*/
	.full-width-panel{
		width: 100%;
		background: #262626; /* Customizable */
	}

	/* Advertisement styles (deprecated) */
	#ad-container-top{
		width: 768px;
		height: 90px;
		/*
		left: 50%;
		margin-left: -274px;
		position: absolute;
		top: 170px;
		*/
	}
	#ad-container-bottom{}
	.ad-full-width-container{
		text-align: center;
		margin: 2em auto;
	}

	/* Network ad report */
	.networks.ad-report .fa-check { color: green; }
	.networks.ad-report .fa-exclamation { color: orange; }
	.networks.ad-report .fa-times { color: red; }


/*  News / Events Aggregator
	---

	CSS below is NOT used in FC ListView (see fullcalendar.css)

	Pattern used news and events aggregator.
*/
	.data-listing{
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	.data-listing li{
		margin: 10px 10px;
	}


/*  News Article Image
	---
*/
	.data-entry .newsThumb{
		width: 150px;
		background-color: #ccc;
		border-radius: 3px;
	}

	.data-entry .container-margin{
		margin-left: 165px;
	}


/*  Events Agg Date
	---

	Date Container
*/
	.event-date-container{
		float: left;
		width: 90px;
	}

/*  Grahpical Date
	---
*/
	.event-date{
		width: 80px;
		height: 37px;
		position: relative;
		text-align: center;
		font-size: 46px;
		padding-top: 43px;
		margin-right: 10px;
		background-color: #ddd;
		border-radius: 2px;
		line-height: 20px;
	}
	.event-date .month{
		height: 21px;
		width: 100%;
		position: absolute;
		top: 0px;
		background-color: #ccc;
		text-transform: uppercase;
		font-size: 12px;
		padding-top: 4px;
		font-style: normal;
		border-radius: 2px 2px 0 0;
	}
	.event-date-separator{
		float: left;
		position: relative;
		top: 32px;
		margin: 0 22px 0 12px;
		font-size: 16px;
	}


/*  Columns
	---

	Event listing on calendar page: 2 columns.
*/
	.list-view .data-entry{
		width: 49%;
		display: inline-block;
		vertical-align: top;
		padding: 10px;
		box-sizing: border-box;
		margin-bottom: 0px;
	}

		/* Full width at tablet breakpoint. */
		@media only screen and (max-width: 768px) {
			.list-view .data-entry{
				width: 100%;
			}
		}

/*  Event aggrgator BPE: 1 column.
	---
*/
	.bpe-events-aggregator .data-entry{
		width: 100%;
		padding: 5px;
	}

	/* Zebra Striping */
	.bpe-events-aggregator .list-view .data-entry:nth-child(2n){
		background: #f6f6f6;
	}

	/* Calendar Agg. Listing */
	#filter_result .bpe-container .bpe-content ul li{
		margin: 10px 0;
		padding: 15px 0;
		border-bottom: 1px dotted rgba(255,255,255,.2);
	}

	.bpe-content ul li:last-child{
		margin: 0px;
		border-bottom: none;
	}



/*  Pagination Component
	---

	Extends Bootstrap pagination.
*/
	.data-listing-control{
		background-color: #FFF;
		padding: 10px;
		margin: 10px 0;
	}

	.data-listing-control a{
		/* Set by Primary Color */
	}

	.data-listing-control .pagination li{
		display: inline-block;
		float: left;
		line-height: 35px;
		margin: 2px 0;
	}

	.data-listing-control .pagination li a,
	.paginate_button{
		border: 1px solid #dadada;
		margin: 0 3px 5px 3px;
		color: #777;
		line-height: 26px;
		height: 26px;
		display: inline-block;
		min-width: 26px;
		text-align: center;
		padding: 2px 4px;
		cursor: pointer;
	}

	.data-listing-control .pagination li a.active,
	.paginate_button.current{
		background: #dadada;
		border: 1px solid transparent;
		color: white;
	}

	.paginate_button.disabled,
	a.paginate_button.disabled:hover{
		border: 1px solid #dadada;
		color: #ccc;
		cursor: default;
	}


/*  Well Componnent
	---

	extends Bootstrap well.
*/
	.well{
		padding: 8px;
		margin-bottom: 10px;
		box-shadow: none;
		border: none;
		border-radius: 0px;
		min-height: auto;
	}


/*  Stylized Horizontal Ruler
	---

	Used on login page for Social Integration.

	<div class="separator">
		<span class="separator-text">
			Text
		</span>
	</div>
*/
	.separator{
	  text-align: center;
	  border-top: 1px solid #ccc;
	  margin: 25px 0;
	  height: 0px;
	}

	.separator-text{
	  background: url("/img/bg_noise.png") repeat scroll 0 0 #F5F5F5;
	  display: inline-block;
	  top: -12px;
	  padding: 2px 15px;
	  position: relative;
	  color: #999;
	  font-weight: bold;
	  text-transform: uppercase;
	}

	.hr-or{
		text-align: center;
		line-height: 1em;
	}

	.hr-or:after{
		content: 'OR';
		top: -0.50em;
		font-size: 1em;
		position: relative;
		background: #fff;
		padding: 0 1em;
	}

/*  Read more
	---

	Used for large contents that should be truncated for preview / excerpt.

	<div class="read-more-container limited post">
		{{content}}
	</div>
	<div class="separator read-more-control">
		<span class="separator-text">read more</span>
	</div>
*/
	.read-more-container{
		max-height: 100%;
		overflow: auto;
	}
	.read-more-container.limited{
		max-height: 150px; /* Can be overwritten for specific sizes */
		overflow: hidden;
	}
	.read-more-control{
		text-align: center;
		position: relative;
		z-index: 5;
		cursor: pointer;
	}

/*  PSCMS BPE loader
	---

	<div id="" class="bpe-loader">
		<div class="bpe-loader-icon">
			<!-- Preferred Icon -->
		</div>
		<div class="bpe-loader-text">Loading</div>
	</div>
*/
	.bpe-loader{
		text-align: center;
		padding: 10px 0;
		display: none; /* Hidden by default */
	}
	.bpe-loader-float{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255,255,255,.75);
		z-index: 10;
	}
	.bpe-loader-float .bpe-loader-content{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.bpe-loader-icon{}
	.bpe-loader-text{}


/*  Carousel Component
	---

	todo: setup default look and move to components sheet.
*/
	/* Indicator Colors */
	.carousel-indicators.dark li{
		background-color: rgba(0, 0, 0, .25);
	}

	.carousel-indicators.dark li.active{
		background-color: rgba(0, 0, 0, .50);
	}


/*  Modal Carousel Component
	---
*/
	/* Carousel Controls. */
	.carousel-modal .carousel-control{
		position: absolute;
		z-index: 100;
		color: #ddd;
		/* Resets */
		background: none;
		border: none;
		border-radius: 0;
		opacity: 1;
		width: auto;
	}
		.carousel-modal .carousel-control:hover,
		.carousel-modal .carousel-control:focus{
			color: #ddd;
		}

	/* Carousel Content */
	.carousel-modal .carousel-inner{
		position: relative;
		z-index: 50;
	}

	.carousel-modal .carousel-inner .item-container{
		padding: 0 75px; /* Allow space for carousel controls. */
		min-height: 390px;
	}

	/* Carousel Indicators - Navigation */
	.carousel-modal .carousel-indicators{
		top: auto; /* Reset */
		right: 50%;
		margin-right: -35px;
		bottom: 0;
		z-index: 150;
	}

	.carousel-modal .carousel-indicators li{
		cursor: pointer;
	}

	/* Create soft edges on modal */
	.carousel-modal .carousel-soft-edge{
		position: absolute;
		top: 0;
		bottom: 0;
		width: 75px;
		z-index: 75;
		background: rgba(255,255,255,0);
	}

	.carousel-modal .carousel-soft-edge.left{
		left: 0;
		background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
		background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
		background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
		background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
	}

	.carousel-modal  .carousel-soft-edge.right{
		right: 0;
		background: -moz-linear-gradient(left, rgba(255,255,255, 0) 0%, rgba(255,255,255,1) 100%);
		background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
		background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
		background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
	}

/* 	Color swatches
	---

	See swatchesGroup();

	<div class="swatches-container">
		<ul class="swatches-list">
			<li>
				<div class="swatch"></div>
			</li>
		</ul>
	</div>
*/
	.swatches-container{
		width: 225px;
	}
	.swatches-list li{
		display: inline-block;
		margin: 5px 5px 5px 0;
	}
	.swatch{
		width: 25px;
		height: 25px;
		background: grey;
		cursor: pointer;
	}
	.swatch.selected{
		box-shadow: inset 0px 0px 0px 2px black;
	}
	.swatches-container input{
		color: white;
	}
	.swatches-container input:-ms-input-placeholder{
		color: #555;
	}
	.swatches-container input::-moz-placeholder{
		color: #555;
	}


/*  Potato (Image Upload) Component
	===

	<div class="potato">
		<ul class="potato__list" />
	</div>

	<div class="potato">
		<div class="potato__dropzone" />
	</div>
*/
	.potato{}

	.potato__clickable{
		cursor: pointer;
	}

/*  Droppable UI
	---

	<div class="potato__dropzone potato__clickable">
		<div class="potato__dropzone-text" />
	</div>
*/
	.potato__dropzone{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.potato__dropzone--disabled{}
	.potato__dropzone--error{}
	.potato__dropzone--ready{
		border-radius: 15px;
		border: 2px dashed #eee;
		min-height: 250px;
	}

/*  Droppable Area Text
	---

	<div class="potato__dropzone-text">
		<span class="potato__dropzone-text" />
		<button class="potato__dropzone-button btn" />
	</div>
*/
	.potato__dropzone-text{}
	.potato__dropzone-tag{}
	.potato__dropzone-button{
		display: block;
		margin: 15px auto;
	}

/*  Potato List
	---

	<ul class="potato__list">
		<li class="potato__list-item" />
	</ul>
*/
	.potato__list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin: 0;
		list-style: none;
	}

/*  Potato List Item
	---

	<li class="potato__list-item">
		<div class="potato__header" />
		<div class="potato__image" />
		<div class="potato__status" />
	</li>
*/
	.potato__list-item{
		position: relative;
		margin: 4px;
		width: calc(25% - 8px);
	}

/*  Potato Header
	---

	<li class="potato__list-item">
		<div class="potato__header" />
	</li>
*/
	.potato__header{
		background-color: #e6e6e6;
		border-bottom:  3px solid #ccc;
		border-top: 1px solid #ddd;
		position: relative;
		height: 24px;
	}

/*  Potato Image
	---

	<li class="potato__list-item">
		<div class="potato__image" photo-id photo-order />
	</li>
*/
	.potato__image{
		background-size: cover;
		height: 150px;
	}
	.potato__image--contain{
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

/*  Potato List Item (Add Photo)
	---

	<li class="potato__list-item potato__list-item--add" />
*/
	.potato__list-item--add{
		display: none;
		background: #eee;
		cursor: pointer;
		height: 178px;
		order: 999; /* Force last item. */
	}
	.potato__list-item--add::after{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		content: "Add Photo";
	}

	/* Display in admin edit only. */
	.potato__list--has-images .potato__list-item--add{
		display: block;
	}


/*  Photo Image Error
	---
*/
	.potato__error{
		float: left;
		padding: 4px 6px;
	}
	.dz-error .potato__image{
		filter: grayscale(75%);
	}

/*  Potato Image Controls
	---

	<ul class="potato__commands">
		<li class="potato__control potato__control--edit">
			<i class="fa fa-pencil" />
		</li>
	</ul>
*/
	.potato__commands{
		padding: 0;
		margin: 0;
		list-style: none;
		float: right;
	}
	.potato__control{
		display: inline-block;
		cursor: pointer;
		padding: 4px 6px;
	}
	.potato__control:hover{
		background-color: rgba(0,0,0,.1);
	}

	/* Edit Control Dropdown Position */
	.potato__list-item .dropdown-menu{
		position: absolute;
		left: auto;
		right: 24px;
		min-width: auto;
		width: 100px;
		padding: 8px;
	}
	.potato__list-item .dropdown-menu select{
		height: 26px;
		margin: 0;
	}


/*  Control Types
	---
	Toggle visibility based on Dropzone JS parent classname.
*/
	.potato__control--edit{
		display: none;
	}
	.dz-success .potato__control--edit{
		display: inline-block;
	}



/*  Potato Status
	---

	<div class="potato__status">
		<span class="potato__status-bar" data-dz-uploadprogress />
	</div>
*/
	.potato__status{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 5px;
		opacity: 0;
		transition: opacity 0.5s ease-in-out;
	}

	.dz-processing .potato__status{ opacity: 1; }
	.dz-complete .potato__status{ opacity: 0; }

	.potato__status-bar{
		display: block;
		height: 5px;
		background: rgba(255,255,255,.75);
		border-radius: 4px;
		transition: width 0.5s ease-in-out;
	}



/*  Forms
	===

	Checkbox
	---

	<div class="checkbox">
		<input type="checkbox" id="my-checkbox" />
		<label class="checkbox-label" for="my-checkbox">
			<span class="checkbox-text">
				My Checkbox
			</span>
		</label>
	</div>
*/
	.checkbox{}


/*  Checkbox Labels
	---

	<label class="checkbox checkbox-label">
		<span class="checkbox-text">Checkbox Label</span>
	</label>
*/
	.checkbox-label{}


/*  Checkbox Label States
	---

	<label class="checkbox checkbox-label checkbox-disabled">
		...
	</label>
*/
	.checkbox-disabled  { color: #ccc; }
	.checkbox-checked   {}
	.checkbox-focused   {}


/*  Checkbox Group
	---

	<ul class="checkbox-group">
		<li>
			...
		</li>
	</ul>
*/
	.checkbox-group{
		list-style: none;
		margin: 0;
		display: inline-block;
	}


/*  Custom Icons
	===

	Icon Text
	---

	<i class="pscms-icon-text-container">Boxscore</i>
*/
	.pscms-icon-text-container{
		border: 2px solid black;
		border-radius: 3px;
		padding: 1px 4px;
		font-family: "Roboto", Arial, sans-serif;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 10px;
		color: #333;
		text-align: center;
		margin: 2px 0;
		cursor: pointer;
		text-decoration: none;
		width: auto;
		background: none;
	}

/*  Game Live
	---

	<i class="pscms-icon-gamelive"></i>
*/
	.pscms-icon-gamelive{
		display: block;
		background-image: url('/theme/EdMercury/img/icon-game-live.png');
		background-repeat: none;
		width: 92px;
		height: 16px;
		padding: 0px;
	}



/*  Photo Album Page
	===

	Album Listing
	---
*/
	.photo-album-listing{ padding: 0; margin: 10px 0 0 0; }

	.photo-album{
		background: white;
		position: relative;
		margin: 0 auto 10px;
	}

	.photoAlbum .widget_photoAlbum_thumb{
		text-align: center;
		width: 100%;
		overflow: hidden;
	}

	.photoAlbum .gallery-link{
		text-align: center;
		height: 100px;
		display: block;
	}

	.photoAlbum .gallery-link img{ width: auto; }

	.photoAlbum h3{
		margin: 0.25em 0 0 0;
		padding: 0;
	}

	/* Album Thumbnail */
	.photo-album-thumbnail{
		width: 100%;
		height: 150px;
		display: block;
		overflow: hidden;
		box-shadow: inset 0px 0px 0px 3px white;
		background-position: top center;
		background-size: cover;
	}

	.photo-album-thumbnail:hover{
		opacity: .85;
	}


	/* Album 'No Image' Placeholder */
	.photo-album-nophoto-frame{ height: 150px; text-align: center; }
	.photo-album-nophoto-frame img{ vertical-align: middle; }
	.photo-album-nophoto-helper{ display:inline-block; height:100%; vertical-align: middle;}


	/* Album Details */
	.photo-album-details{
		padding: 6px 10px 10px 10px;
	}

	.photo-album-details h4{
		padding: 0;
		margin: 0 0 0 0;
		min-height: 60px;
		max-height: 60px;
		overflow: hidden;
		color: #444;
		line-height: 1.2em;
		cursor: pointer;
	}

	.photo-album-details i{
		opacity: .5;
		margin: -2px 3px 0 0;
		font-size: 11px;
	}


/*  Calendar Page
	===

	Calendar Event Containers
	---

	.eventholder        Single Day / General Container
	.multidayholder     Multi Day
	.calendarGameHome   Stat Game (Home)
	.calendarGameAway   Stat Game (Away)
*/
	.event-container{
		padding: 2px 4px;
		font-size: 11px;
		font-weight: bold;
		font-size: normal;
		font-style: normal;
		margin: 5px 0 0 0;
		background: #bbb;       /* Customizable */
	}
	.event-container a{
		color: white;
		opacity: 0.9;
		display: block;
	}
	.event-container a:hover,
	.event-container a:focus{
		color: white;
		opacity: 1;
	}

	.event-container a[data-toggle="tooltip"]{
		cursor: help;
	}

	.event-game{}               /* Customizable */
	.event-game-alt{}           /* Customizable */


	/* Help cursor for events with tooltip. */
	.eventholder a[data-toggle="tooltip"],
	.multidayholder a[data-toggle="tooltip"]{
		cursor: help;
	}


/*  Calendar Legend
	---
*/
	.calendar-legend{
		width: 400px;
		margin: 0 auto;
	}

	@media only screen and (max-width: 768px) {
		.calendar-legend{
			margin: 0 0 0 20px;
		}
	}

	.calendar-legend i{
		text-align: center;
		display: block;
		margin-top: 6px;
	}

	@media only screen and (max-width: 768px) {
		.calendar-legend i{
			text-align: left;
		}
	}

	/* Legend Line */
	.calendar-legend-line{
		display: block;
		height: 5px;
		margin: 8px 20px 0 0;
		padding: 0;
		width: 25px;
		float: right;
	}

	@media only screen and (max-width: 768px) {
		.calendar-legend-line{
			float: left;
		}
	}

	/* Legend Square (For calendar list view). */
	.calendar-legend-square{
		display: inline-block;
		width: 13px;
		height: 13px;
		background: #eee;
		border-radius: 2px;
	}

/*  Calender (table) Style
	---
*/
	#eventsCalendar{
		border-collapse: collapse;
		width: 100%;
		table-layout: fixed;
		word-wrap: break-word;
	}
	.calenderHeaderRow{
		border: none;
	}
	#eventsCalendar tr{
		height: 90px;
	}
	#eventsCalendar tr td{
		border-collapse: collapse;
		border: 4px solid white;
	}
	#eventsCalendar tr td.day{
		height: 90px;
	}
	.calendarToday{
		background-color: #f7f7f7;
		box-shadow: inset 0px 0px 0px 1px #e7e7e7;
	}
	.calendarheight,
	.calendarDayRow{
		background-color: #eee;
	}
	.calendarDayRow{
		text-align: center;
	}
	.calendarheight div div:first-child{
		padding: 2px;
	}

/*  Unknown Calendar Style
	---
*/
	#calendar-trigger-postDate{ cursor: pointer; background: #fff url('../img/calendar.png') 97% 5px no-repeat; }

/*  Calendar Heasder
	---
*/
	.calendar-header{}
	.calendar-header__section{
		display: inline-block;
		float: left;
		width: 50%;
	}
	.calendar-header_separator{
		display: none;
	}

	@media only screen and (max-width: 690px) {
		.calendar-header__section{
			float: none;
		}
		.calendar-header__section{
			display: block;
			width: 100%;
		}
		.calendar-header__section--block .btn{
			width: 100%;
		}
		.calendar-header_separator{
			display: block;
		}
	}



/*  Search Page
	===
*/
	#page-search-result #cse-search-results iframe{
		width: 100% !important; /* Fix for Site Search result page having static iframe width */
	}




/*  Single Page (News / Events)
	===
*/
	.meta{
		background-color: #f3f3f3;
		padding: 10px;
		font-size: 12px;
		margin: 10px 0;
	}

	/* News Article Image */
	.news-article-image{
		width: auto;
		max-width: 100%;
	}

	.news-article-image-conatiner--right,
	.news-article-image-conatiner--left {
		max-width: 250px;
		margin: 0 10px 15px 10px;
	}

	@media only screen and (min-width: 992px) {
		.news-article-image-conatiner--right {
			float: right;
		}
		.news-article-image-conatiner--left {
			float: left;
		}
	}
	@media only screen and (max-width: 991px) {
		.news-article-image-conatiner--right,
		.news-article-image-conatiner--left {
			max-width: 100%;
			width: auto;
		}
		.news-article-image {
			width: auto !important;
			max-width: 100% !important;
			margin: 0 auto 15px auto !important;
			display: block;
		}
	}
/*  BPE Details
	---

	Display bordered detail area.

	<div class="bpe-details">
		<div class="bpe-details__item" />
	</div>

	With bootstrap grid:

	<div class="bpe-details bpe-details--inner-border row-fluid">
		<div class="bpe-details__item span12" />
		<div class="bpe-details__item span12" />
	</div>
*/
	.bpe-details{}
	.bpe-details__item{
		padding: 5px;
	}

	/* Inner border */
	.bpe-details--inner-border{
		border-bottom: 1px solid #eee;
	}
	.bpe-details--inner-border .bpe-details__item{
		border-right: 1px solid #eee;
	}
	.bpe-details--inner-border .bpe-details__item:last-child{
		border-right: none;
	}
	@media only screen and (max-width: 768px) {
		.bpe-details--inner-border .bpe-details__item{
			border-right: none;
			border-bottom: 1px solid #eee;
		}
		.bpe-details--inner-border .bpe-details__item:last-child{
			border-bottom: none;
		}
	}


/*  Aside Icon
	---

	Display an offset icon with text.

	<div class="aside-icon">
		<i class="aside-icon__icon fa fa-calendar"></i>
		<div class="aside-icon__text" />
	</div>
*/
	.aside-icon{
		position: relative;
	}
	.aside-icon__icon{
		position: absolute;
		color: #aaa;
		font-size: 18px;
	}
	.aside-icon__text{
		margin-left: 35px;
		font-size: 12px;
		line-height: 20px;
	}

/*  BPE Media
	---

	<div class="bpe-media bpe-media--fill">
		<img class="bpe-media__image bpe-media__image--fill" src="" />
	</div>
*/
	.bpe-media{
		margin: 0 0 20px;
		float: none;
	}

	@media only screen and (min-width: 361px) {
		.bpe-media--left{
			margin: 10px 15px 10px 0;
			float: left;
		}
		.bpe-media--right{
			margin: 10px 0 10px 15px;
			float: right;
		}
	}

	/* Fill Modifier */
	.bpe-media--fill{
		margin-left: -10px;
		margin-right: -10px;
	}
	.bpe-media--fill.bpe-media--left{ margin: 10px 15px 10px -10px; }
	.bpe-media--fill.bpe-media--right{ margin: 10px -10px 10px 15px; }

	/* Image */
	.bpe-media__image{
		max-width: 100%;
		display: block;
		margin: 0 auto;
	}


/*  News Details Page
	===
*/
	.news-title{
		margin-top: 0;
		line-height: 1.25em;
		text-transform: uppercase;
	}

	.news-title a{
		color: #444;
	}

	.news-meta{
		font-size: 13px;
		color: #999;
	}




/*  Stats Snippets Modal
	===
*/
	.manage-stats-snippet select {
		width: 220px;
	}

	.manage-stats-snippet #snippet-preview-container {
		position: absolute;
		right: 0px;
		width: 360px;
	}

	.manage-stats-snippet #snippet-preview {
		max-height: 235px;
		overflow: auto;
	}



/*  CJHL Stats Pages
	===

	Custom stats widgets done for CJHL
	Hockey using datatables.js
*/
	.table-cjhl .bottom:after{
		clear: both;
		content: ".";
		height: 0;
		visibility: hidden;
	}

	.table-cjhl .dataTables_length{
		float: left;
		width: 150px;
	}

	.table-cjhl .dataTables_paginate{
		float: right;
		width: 150px;
		text-align: right;
		cursor: pointer;
	}

	.table-cjhl .paginate_disabled_previous,
	.table-cjhl .paginate_enabled_previous{
		margin: 0 10px 0 0;
	}

	.table-cjhl .sorting,
	.table-cjhl .sorting_asc,
	.table-cjhl .sorting_desc{
		cursor: pointer;
	}

	.table-cjhl .sorting_desc strong:after{
		content: "\f0d7";
		font-family: 'FontAwesome', serif;
		height: 20px;
		width: 10px;
		opacity: .4;
		display: inline-block;
		position: relative;
		top: 7px;
		margin-left: 2px;
		overflow: hidden;
	}

	.table-cjhl .sorting_asc strong:after{
		content: "\f0d8";
		font-family: 'FontAwesome', serif;
		height: 20px;
		width: 10px;
		opacity: .4;
		display: inline-block;
		position: relative;
		top: 7px;
		margin-left: 2px;
		overflow: hidden;
	}

	.table-cjhl .sorting_asc,
	.table-cjhl .sorting_desc{
		min-width: 46px;
	}



/*  Modals
	===

	extends Bootstrap modals.


	PSCMS Global Modal
	---
*/
	#pscms-global-modal{
		width: 920px;
		margin-left: -460px;
	}

	#pscms-global-modal-header{
		background-color: #2473b6;
		color: #fff;
		border-radius: 3px 3px 0px 0px;
		border-bottom: 1px dotted #464646;
	}

	#pscms-global-modal-title{
		font-size: 18px;
		font-weight: normal;
	}

/*  Responsive Modal

	Can remove code after upgrading to BS3+.
*/
	@media only screen and (max-width: 940px) {
		#pscms-global-modal{
			margin: 0 10px;
			width: calc(100% - 20px);

			/* Override BS positioning. */
			top: 65px;
			left: 0;
		}
		#pscms-global-modal-body{
			max-height: 300px;
		}
	}


/*  Presentation Modal
	---

	Modal for presenting new features. Utilizes larger,
	bolder font stylings from Landing page.
*/
	.modal-presentation{
		min-height: 375px;
	}

	.modal-presentation p{
		font-size: 14px;
		line-height: 24px;
		color: #777;
	}

/*  Photo Album Modal
	===

	Currently uses HTML5 sortables (http://farhadi.ir/projects/html5sortable/).
	Library now deprecated, convert to jQuery-UI sortable.
*/
	.album-list{}
	.album-list-item,
	.album-list .sortable-placeholder{
		float: left;
		width: 130px;
		height: 220px;
		margin: 0 24px 20px 0;
	}
	.album-list .sortable-placeholder{
		border: 1px dotted #CCC;
		box-sizing: border-box;
	}
	.album-list .handle{
		cursor: move;
	}


/*  Bootstrap Overrites
	===

	General
	---
*/

	/*  Remove 'active' and 'focused' link decoration. */
	a:hover, a:active, a:focus{
		text-decoration: none;
	}

	/* Adjust minimum height for .span* inside .row-fluid. */
	.row-fluid [class*="span"]{ min-height: 1em; }

	/* Strip bottom margin from inputs when inside .control class. */
	.controls input{
		margin-bottom: 0px;
	}

	/* Fix Caret Margins */
	.btn-small .caret,
	.btn-medium .caret{
		margin-top: 5px;
	}

	/* Remove bottom margin on <form> */
	form{
		margin-bottom: 0px;
	}

	/* Table text alignment */
	.table td.text-center,
	.table th.text-center{
		text-align: center;
	}
	.table td.text-right,
	.table th.text-right{
		text-align: right;
	}


/*  Bootstrap Extensions
	---

	New class for left aligning form labels within .form-horizontal.

	<div class="control-group">
		<label class="control-label control-label-left">Form Label</label>
		<div class="controls">
			...
		</div>
	</div>
*/
	.control-group .control-label-left{
	  text-align: left;
	}




/*  Typography
	===

	User Post Styles
	---

	User generated content:
	- News Articles
	- Events
	- Content Block
*/
	.post{}

	.post p{
		/* Use Bootstrap */
		/* margin: 0 0 0.65em; */
	}

	.post h1,
	.post h2,
	.post h3,
	.post h4{
		line-height: 2.0em;
	}

	.post h1{ font-size: 2em; }
	.post h2{ font-size: 1.5em; }
	.post h3{ font-size: 1.25em; }
	.post h4{ font-size: 1.15em; }
	.post h5{ font-size: .85em; }
	.post h6{ font-size: .75em; }

	.post ol,
	.post ul{
		list-style: roman outside;
		margin: 20px 0 20px 20px;
	}

	.post ul{
		list-style: outside disc;
	}

	.post li{
		left: 15px;
		padding-right: 25px;
		position: relative;
	}


	/* A post with a map in it, like an Events page. */
	/* Remove from .post and create component. */
	.post #map_canvas {
		width: 100%;
		height: 325px;
	}




/*  Buttons
	===

	PSCMS
	---

	extends Bootstrap .btn class.
*/
	.btn{}
	.btn-themed{
		padding: 6px 9px;
		text-transform: uppercase;
		color: white;
		font-size: 12px;
		display: inline-block;
		border: none;
	}





/*  Carousel Typography
	---

	todo: remove this when proper patterns have been created for
	site settings. These styles expand the landing page styling.

	note: the styles are borrowed from landing page styling. we
	need the ability to have nicer typography on site settings.
*/
	#modal-carousel h1{
		color: #50555a;
	}

	#modal-carousel p{
		line-height: 20px;
	}

/*  Badge
	---

	todo: consolidate with .badge inside default.css and with
	bootstreak badge. Make patterns from these.
*/
	.badge.badge-large{
		background-color: #2f76b6;
		padding: 0px;
		border-radius: 20px;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
	}

/*  Old Fixes & Hacks
	===


	Responsive Grid Hack (deprecated).
	---

	Old attempts to fix responsive functionality.
	See: https://van.devpsi.com/confluence/display/SITE/Building+Responsive+Elements
*/

	/* Removes negative margin */
	.row-fluid .row{ margin-left: 0px; }

	/* Temporary Solution */
	.row-fluid .row .span1{ width: 30px;  }
	.row-fluid .row .span2{ width: 70px;  }
	.row-fluid .row .span3{ width: 110px; }
	.row-fluid .row .span4{ width: 150px; }
	.row-fluid .row .span5{ width: 190px; }
	.row-fluid .row .span6{ width: 230px; }
	.row-fluid .row .span7{ width: 270px; }
	.row-fluid .row .span8{ width: 310px; }


/*  Icon Adjumstments
	---
*/

	/* Icons */
	.filter_control .fa-remove{
		cursor: pointer;
		opacity: .8;
	}

	.filter_control .fa-remove:hover{ opacity: 1; }

	/* Icon Validation */
	.fa.fa-success{
		color: #468847;
	}

	.fa.fa-error{
		color: #b94a48;
	}


/*  Other
	---
*/

	/* Apply to any .bpe to force proper margins */
	.bpe_margin_fix{ margin-bottom: 10px !important; }
	.bpe_margin_fix:last-child{ margin-bottom: 0px !important; }


	/* Used by LinkGenHelper and Bpe.ctp for alignment */
	.align-left{ text-align: left; }
	.align-center{ text-align: center; }
	.align-right{ text-align: right; }


/*  Alerts
	New style flash message.
	---
*/

	.floating-alert {
		position: relative;
		z-index: 1000;
		text-align: center;
		width: 400px;
		left: 50%;
		margin-top: 5px;
		margin-left: -200px;
	}
	.floating-alert.fixed {
		position: fixed;
	}
	.floating-alert .alert {
		box-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
	}
	.alert .close {
		top: -6px;
	}

		@media only screen and (max-width: 450px) {
			.floating-alert {
				width: 100%;
				left: 0;
				margin-top: 50px;
				margin-left: 0;
			}
		}


/*  Print Styles
	===

	General Print
	---
*/
	@media print{

		/* Dev */
		#debug-kit-toolbar{
			display: none;
		}

		/* Hide site elements. */
		.network_bar,
		#scoreboard,
		#navigation-dropdown,
		#navigation_topMenu,
		#site-footer{
			display: none;
		}

		/* Page Layout */
		.column-side-left-global,
		.column-side-right-global,
		.column-side-left-global{
			display: none !important; /* Override .row-fluid display property. */
		}

		/* Prevent full URL from displaying. */
		a:link:after{
			content: "";
		}
	}

	/* Page margins. */
	@page{
		margin: 10mm 0 5mm 0;
	}

/*  WTT Print
	---

	These throw-away styles affect WTT pages only.
*/
	@media print{

		/* Hockey PRO */
		#content-block-wtt-main .addthis_toolbox,
		#content-block-wtt-main > div > table:first-of-type,
		#content-block-wtt-main .subButton,
		#content-block-wtt-main .subButtonOn{
			display: none;
		}

		/* Hockey AM */
		#content-block-wtt-main #google_ads_div_Stats_Hockey_Am_Top_ad_wrapper,
		#content-block-wtt-main #google_ads_div_Stats_Hockey_Am_Middle_ad_wrapper{
			display: none;
		}

		/* Baseball Specific */
		#content-block-wtt-main #psbb_top_menu,
		#content-block-wtt-main #psbb_scoreboard,
		#content-block-wtt-main #google_ads_div_Stats_Baseball_Top_ad_wrapper{
			display: none;
		}

		/* Visible WTT Page Headings */
		#content-block-wtt-main .pageHeader,
		#content-block-wtt-main .scoreboardHeader,
		#content-block-wtt-main .headerCell,
		#content-block-wtt-main .psbb_page_regular_header{
			color: black;
		}
	}


/*  Stats Components
	===

	@author nathan@pointstreak
	@url 	https://van.devpsi.com/confluence/display/SITE/Stats+Component+Patterns
	@date 	Aug 18, 2015

	1. Table Container
	2. Responsive Table
	3. Table Filter
	4. Link Row
	5. Team/League Logo
	6. Team Information Block
	7. Versus Icon
	8. Score Display
	9. Featured Player


	Table Container
	---

	<div class="table-container">
		<!-- Table Header -->
		<!-- Responsive Table Pattern -->
		<!-- Table Footer -->
	</div>
*/
	.table-container{}


/*	Responsive Table
	---

	<div class="table-responsive">
		<table />
	</div>
*/

	@media screen and (max-width: 1000px) {
		.table-responsive {
			border: 1px solid #ccc;
			margin-bottom: 15px;
			overflow-x: auto;
			overflow-y: hidden;
			width: 100%;
		}
		.table-responsive table th, .table-responsive table td {
			white-space: nowrap;
		}
		.table-responsive table:last-child{
			margin-bottom: 0px;
		}
	}

/*  Table Header
	---

	Note the order of the markup.

	<header class="nova-table-header clearfix">
		<div class="nova-table-header__filter pull-right" />
		<div class="nova-table-header__season" />
	</header>
*/
	.nova-table-header{}
	.nova-table-header__season{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 6px; /* Align with filter label. */
		line-height: 1.25em;
		font-size: 13px;
	}
	.nova-table-header__filter{
		width: auto;
		text-align: right;
	}

/*  Table Filter
	---

	Options:
	- Use .text-right to right-align filter options.

	<div class="nova-table-filter">
		<label class="nova-table-filter__label">
			Label Text:
			<select class="nova-table-filter__select" data-filter="value" />
		</label>
	</div>
*/
	.nova-table-filter{}
	.nova-table-filter__label{
		display: inline-block;
		font-size: 13px;
	}
	.nova-table-filter__select{ margin: 0px; }

/*  Table Footer
	---

	<footer class="nova-table-footer">
		<!-- Nova Link Row -->
	</footer>
*/
	.nova-table-footer{
		margin: 10px 0 10px;
	}
	.nova-table-footer:last-of-type{
		margin: 10px 0 0 0;
	}

	/* Modifiers */
	.nova-table-footer.nova-table-footer--hr{
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #eee;
	}

/*  Link Row
	---

	<ul class="nova-link-row">
		<li class="list-item" />
	</ul>
*/
	.nova-link-row{
		margin: 0;
	}
	.nova-link-row .list-item{
		list-style: none;
		display: inline-block;
		padding: 0px;
		margin: 0 10px 0 0;
	}
	.nova-link-row .list-item::after{
		content: "|";
		margin: 0 0 0 10px;
		display: inline-block;
	}
	.nova-link-row .list-item:last-child::after{
		content: "";
	}


/*  Team/League Logo
	--

	Add additional sizes as needed.

	.nova-logo-32
	.nova-logo-64
	.nova-logo-128
	.nova-logo-256

	<div class="nova-logo nova-logo-32">
		<img class="nova-logo__img" src="" />
	</div>
*/
	.nova-logo{
		display: table-cell;
		vertical-align: middle;
	}

	.nova-logo__img{
		display: block;
		margin: 0 auto;
		max-height: 100%;
		max-width: 100%;
	}

	/* Sizes */
	.nova-logo-32{
		height: 32px;
		width: 32px;
	}
		.nova-logo-32 .nova-logo__img{ max-width: 32px; }

	.nova-logo-64{
		height: 64px;
		width: 64px;
	}
		.nova-logo-64 .nova-logo__img{ max-width: 64px; }

	.nova-logo-128{
		height: 128px;
		width: 128px;
	}
		.nova-logo-128 .nova-logo__img{ max-width: 128px; }

	.nova-logo-256{
		height: 256px;
		width: 256px;
	}
		.nova-logo-256 .nova-logo__img{ max-width: 256px; }


/*  Team Information Block
	---

	Options:
	- Add class .text-right on container to align right.
	- Add class .nova-team-info--row on container to display team logo and info inline.

	<div class="nova-team-info">
		<div class="nova-team-info__logo">
			<!-- Nova logo component -->
		</div>
		<ul class="nova-team-info__list">
			<li class="list-item">Home Team</li>
			<li class="list-item">Anchorage Bucs</li>
			<li class="list-item">(06-11-12)</li>
		</ul>
	</div>
*/

	.nova-team-info__logo,
	.nova-team-info__list{
		vertical-align: top;
	}

	/* Stack (default) */
	.nova-team-info > div{
		display: block;
	}
	.nova-team-info .nova-team-info__logo{
		margin: 0 0 15px 0;
	}

	/* Display as row */
	.nova-team-info.nova-team-info--row{
		overflow: hidden;
	}
	.nova-team-info.nova-team-info--row > .nova-team-info__logo{
		float: left;
		margin: 0 15px 0 0;
	}
	.nova-team-info.nova-team-info--row > .nova-team-info__logo{
		overflow: hidden;
	}

	/* Right alignment */
	.nova-team-info.text-right .nova-logo{
		float: right;
	}
	.nova-team-info.text-right.nova-team-info--row > .nova-team-info__logo{
		float: right;
		margin: 0 0 0 15px;
	}

	/* Team Info List */
	.nova-team-info__list{
		font-size: 12px;
		padding: 0px;
		margin: 0px;
	}
	.nova-team-info__list .list-item{
		line-height: 20px;
		list-style: none;
		font-size: 1em;
	}


/*  Versus Icon
	---

	Will center itself in any container.

	<div class="nova-versus">
		<span class="nova-versus__icon nova-text-display"></span>
	</div>
*/
	.nova-versus {
		margin: 0 auto;
		position: relative;
		width: 50px;
	}
	.nova-versus__icon {
		line-height: 2em;
	}
	.nova-versus__icon::before {
		position: absolute;
		content: "v";
		left: 0px;
		top: -5px;
	}
	.nova-versus__icon::after {
		position: absolute;
		content: "s";
		right: 0px;
		top: 5px;
	}

/*  Score
	---

	Options
	- Align text with text-alignment helper classes.

	<div class="nova-score">
		<div class="nova-score__text nova-text-display">4</div>
	</div>
*/
	.nova-score{ position: relative; }
	.nova-score__text{ line-height: 1.2em; }


/* 	Last Game Snippet Grid
	---

	Todo: replace with Bootstrap 3 grid.

	<div class="nova-last-game">
		<div class="nova-last-game__team" />
		<div class="nova-last-game__score" />
	</div>
*/
	.nova-last-game{
		margin-top: 10px;
		width: 100%;
	}
	.nova-last-game__team{
		width: 75%;
		display: inline-block;
		vertical-align: top;
	}
	.nova-last-game__score{
		width: 23%;
		display: inline-block;
		vertical-align: top;
	}


/* 	Next Game Snippet Grid
	---

	Todo: replace with Bootstrap 3 grid.

	<div class="nova-next-game">
		<div class="nova-next-game__team pull-left" />
		<!-- Versus component -->
		<div class="nova-next-game__team pull-right" />
	</div>
*/
	.nova-next-game{
		margin-top: 10px;
		width: 100%;
		clear: both;
	}
	.nova-next-game__team{
		width: 50%;
		display: inline-block;
	}

		/* Styles for BPE in right column. */
		.column-side-right .nova-next-game__team{
			max-width: 125px;
		}
		@media screen and (max-width: 768px) {
			.column-side-right .nova-next-game__team{
				max-width: none;
			}
		}


/*  Featured Player
	---

	Todo: replace container structure with BS3 grid.
	Todo: update classes to BEM when CMS-3397 merged to DEV.

	<div class="nova-featured-player">
		<img class="nova-featured-player__image" />
		<div class="nova-featured-player__info">
			<!-- Nova logo components -->
			<div class="nova-featured-player__name">
				Firstname Lastname
				<span class="nova-featured-player__jersey">#16</span>
			</div>
			<div class="nova-featured-player__team">Team Name</div>
			<hr class="nova-featured-player__hr" />
			<ul class="nova-featured-player__list">
				<li class="list-item">
					<strong>Hometown:</strong> Surrey, B.C.
				</li>
			</ul>
		</div>
	</div>
*/
	.nova-featured-player-container{
		overflow: hidden;
	}
	.nova-featured-player-image{
		float: left;
		margin: 0 10px 0 0;
	}
	.nova-featured-player-info-block{
		overflow: hidden;
	}
		.nova-player-name{}
		.nova-player-team{}
		.nova-feauted-player-seperator{
			margin: 5px 0 15px;
		}

	/* Featured Player Info List */
	.nova-player-info-list{
		padding: 0px;
		margin: 0px;
	}
	.nova-player-info-list .list-item{
		display: inline-block;
		list-style: none;
		width: 49%;
		padding: 3px 0;
	}
	.nova-player-info-list .list-item .item-label{
		font-weight: bold;
	}

		/* Column Specific */
		.column-side-right .nova-player-info-list .list-item{
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.column-side-right .nova-player-info-list .list-item .item-label,
		.column-side-right .nova-player-info-list .list-item .item-value{
			display: inline;
		}
		.column-side-right .nova-logo-container{ display: none; }

	@media screen and (max-width: 480px) {
		.nova-featured-player-image{
			text-align: center;
			float: none;
			margin: 0 0 10px 0;
		}
	}

/*  Featured Player Styling
	---
*/
	.nova-player-name{
		font-size: 18px;
		color: #333;
		line-height: 1.2em;
	}
	.nova-player-number{
		font-size: 14px;
		color: #999;
	}
	.nova-player-team{
		line-height: 26px;
		font-size: 14px;
	}

		/* Styles for BPE in right column. */
		.column-side-right .nova-featured-player-container .nova-logo{
			display: none;
		}
		@media screen and (max-width: 768px) {
			.column-side-right .nova-featured-player-container .nova-logo{
				display: table-cell;
			}
		}



/*  Helpers
	===

	Todo: create multiple sizes.
*/
	.nova-text-display{
		color: #555;
		font-family: "Roboto", Arial, san-serif;
		font-size: 48px;
		font-weight: bold;
	}



/* 	Right Column Table Settings
	===

	Prevent stats tables from overflowing their container.

	League Level
	---
*/

	/* League Standings (hockey, baseball) */
	.column-side-right .snippet_league_standings .stats-col-overtime_wins,
	.column-side-right .snippet_league_standings .stats-col-shootout_wins,
	.column-side-right .snippet_league_standings .stats-col-overtime_losses,
	.column-side-right .snippet_league_standings .stats-col-shootout_losses,
	.column-side-right .snippet_league_standings .stats-col-streak{
		display: none;
	}

	/* League Batting Leaders (baseball) */
	.column-side-right .snippet_league_batting_leaders .stats-col-hits,
	.column-side-right .snippet_league_batting_leaders .stats-col-runs{
		display: none;
	}

	/* League Pitching Leaders (baseball) */
	.column-side-right .snippet_league_pitching_leaders .stats-col-innings_pitched,
	.column-side-right .snippet_league_pitching_leaders .stats-col-walks{
		display: none;
	}

	/* Division Standings (hockey) */
	.column-side-right .snippet_division_standings .stats-col-overtime_losses,
	.column-side-right .snippet_division_standings .stats-col-shootout_losses,
	.column-side-right .snippet_division_standings .stats-col-overtime_wins,
	.column-side-right .snippet_division_standings .stats-col-shootout_wins,
	.column-side-right .snippet_division_standings .stats-col-win_pct{
		display: none;
	}

	/* Display styles again at breakpoint. */
	@media screen and (max-width: 768px) {
		.column-side-right .snippet_league_standings .stats-col-overtime_wins,
		.column-side-right .snippet_league_standings .stats-col-shootout_wins,
		.column-side-right .snippet_league_standings .stats-col-overtime_losses,
		.column-side-right .snippet_league_standings .stats-col-shootout_losses,
		.column-side-right .snippet_league_standings .stats-col-streak,
		.column-side-right .snippet_league_batting_leaders .stats-col-hits,
		.column-side-right .snippet_league_batting_leaders .stats-col-runs,
		.column-side-right .snippet_league_pitching_leaders .stats-col-innings_pitched,
		.column-side-right .snippet_league_pitching_leaders .stats-col-walks,
		.column-side-right .snippet_division_standings .stats-col-overtime_losses,
		.column-side-right .snippet_division_standings .stats-col-shootout_losses,
		.column-side-right .snippet_division_standings .stats-col-overtime_wins,
		.column-side-right .snippet_division_standings .stats-col-shootout_wins{
			display: table-cell;
		}
	}

/* 	Team Level
	---
*/
	/* Team Roster */
	.column-side-right .snippet_team_roster .stats-col-player_height{
		display: none;
	}

	/* Display styles again at breakpoint. */
	@media screen and (max-width: 768px) {
		.column-side-right .snippet_team_roster .stats-col-player_height{
			display: table-cell;
		}
	}


/*  Stats Table Styling
	===

	@author nathan@pointstreak.com
	@date   Oct 5, 2015

	Table General

	<table class="table table-stats" />
	---
*/
	.table-stats{}
	.table-stats a{
		text-decoration: underline;
	}


/* 	Table Header
	---

	Remove <abbr> underline.
*/
	.table-stats abbr[title] {
		border-bottom: 0 none; /* Firefox */
		text-decoration: none; /* Chrome */
	}


/*  Table Column Widths
	---

	Used on stats sections.

	<table class="table table-stats">
		<tr>
			<td class="column-narrow">
				...
			</td>
		</tr>
	</table>
*/
	.table-stats .column-tiny   { width: 50px; }
	.table-stats .column-narrow { width: 25px; }
	.table-stats .column-wide   { width: 75px; }


/*  Sorted Column (column highlight)
	---

	Selector must be stronger than Bootstrap zebra striping.
*/
	.table.table-stats td.highlight{
		background-color: #eee;
	}


/*  Table Column Types
	---

	.stats-text
	.stats-number
*/
	.table-stats .stats-text{}
	.table-stats .stats-number{
		width: 8%;
		text-align: center;
	}



/*  Table Sort
	===

	<table class="table table-sort" />
*/
	.table-sort{}


/*  Table Sort <thead>
	---

	Create space for sorting icons.
*/
	.table-sort th{
		line-height: 28px;
		padding-bottom: 5px;
		position: relative;
	}

	/* Indicate that column is sortable. */
	.table-sort th.sorting,
	.table-sort th.sorting_desc,
	.table-sort th.sorting_asc{
		cursor: pointer;
	}


/*  Sort icons
	---

	Datatables applied classes:;

	.sorting
	.sorting_asc
	.sorting_desc
*/
	.table-sort th.sorting:after{}
	.table-sort th.sorting_desc:after,
	.table-sort th.sorting_asc:after{
		font-family: 'FontAwesome', serif;
		font-size: 15px;
		position: absolute;
		right: 5px;
		opacity: 0.5;
	}

	/* Centered aligned headers */
	.table-sort th.text-center.sorting_desc:after,
	.table-sort th.text-center.sorting_asc:after{
		display: block;
		position: relative;
		height: 0;
		top: -16px;
		right: auto;
		font-size: 13px;
	}

	/* Apply Icons */
	.table-sort th.sorting:after{
		/* No default sort icon. */
	}
	.table-sort th.sorting_desc:after{
		content: "\f0d7";
	}
	.table-sort th.sorting_asc:after{
		content: "\f0d8";
	}


/*  Sorted Column (Datatables)
	---

	Datatables applied classes.

	.sorting_1
	.sorting_2
	..etc
*/
	/* Strong selector to override Bootstrap zebra-striping .*/
	.table-sort tbody > tr > td.sorting_1,
	.table-sort thead > th > td.sorting_1{
		background-color: #eee;
		font-weight: bold;
	}


/*  Datatables Length
	---

	Select box for displaying # of table rows.
*/
	.dataTables_length{
		width: 25%;
		display: inline-block;
		height: 45px;
	}
	.dataTables_length label{}
	.dataTables_length select{
		margin: 0 5px 4px 0;
	}


/*  Datatables Filter (search)
	---

	Input field with label for searching a table.
*/
	.dataTables_filter{
		width: 74%;
		display: inline-block;
		text-align: right;
		height: 45px;
	}
	.dataTables_filter label{}
	.dataTables_filter input{
		margin: 0 0 0 5px;
	}
	@media screen and (max-width: 600px) {
		.dataTables_length,
		.dataTables_filter{
			width: 100%;
			text-align: center;
		}
	}