@charset "utf-8";

/*
Theme Name: Stretch Internet
Author: Summit Athletic Media (www.summitathletics.com)
*/




/* ---------- Admin Section ---------- */
.manage-event-section {
	display: inline-block;
	width: 100%;
	margin: 5px 3px 5px 3px;
}

.manage-event-pane {
	display: inline-block;
	width: 420px;
	vertical-align: top;
}

.slider-bg {
	background: url("../images/bg-fader.gif") no-repeat scroll 5px 0 transparent;
}

body  {
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #666;
	background-color: #202c42;
	font-family: Overpass, Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
}

h1 {
    font-size: 18px;
}

.link-wrapper {
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.active {
	background-color: #202c42
}
.link {
	margin-left: 40px;
	color: #FFF;
	font-size: 15px;
	text-transform: capitalize;
	text-decoration: none;
	padding-right: 10px;
	font-family: Overpass, Arial, Helvetica, sans-serif;
	line-height: 2em;
}
.link:hover {
	color: #FC0;
}
.sidebarAccent {
	background-color: #D10B0B;
	width: 24px;
	height: 100%;
}

.pageLink {
	color: black;
	text-transform: none;
	padding-left: 3px;
	padding-right: 3px;
}

.pageLink:hover{
	color: #FC0;
}

.oneColFixLt #container {
	/*
	width: 525px;
	*/
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 25px;
	margin-right: 25px;
	margin-bottom: 0px;
	margin-left: 25px;
	/*
	background-image: url(../images/admin_bg.jpg);
	background-repeat: repeat-y;
	*/
	background-color: white;
}
.oneColFixLt #templateContent {
    font-size: 12px;
    float:left;
    padding-top: 0px;
    padding-left: 35px;
    width:150px;
    color: black;
}




.twoColFixLt #container,
.twoColFixLt #container2 {
	/* width: 1140px; */
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-image: url(../images/admin_bg.jpg);
	background-repeat: repeat-y;
	display: flex;
}

.loginContainer {
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	display: flex;
	justify-content: center;
	background-color: #202c42;
}

.loginMainContentContainer {
	width: 1110px;
}

.loginContainer #loginContent {
	flex-basis: 32%;
	background-color: #fff;
	padding: 3rem;
	flex-grow: 1;
}

.loginPrestoLogoHeader {
	justify-content: center;
}
.loginContainer .loginHeader {
	text-align: center;
	font-size: 22px;
	color: #000;
}

.loginContainer .d-column {
	display: flex;
	flex-direction: column;
}

.loginContainer .loginField {
	padding: 7.5px 0;
}
.loginField > input {
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	color: #495057;
	line-height: 1.5;
	margin-top: 10px;
	padding: .375rem .75rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.loginField > input:focus {
	color: #495057;
	background-color: #fff;
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.stretchLogo {
	background-image: url(../images/Stretch-Live-Logo-Black-Green.png);
	width: 135px;
	height: 100%;
	margin-left: 12px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.loginContainer .actions {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
}

.loginHeaderContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
}

.loginHeaderContainer > h1 {
	margin: 0;
}

.loginMainContent {
	display: flex;
	justify-content: center;
	max-width: 1110px;
	padding: 0 !important;
}

.login-page {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-basis: 59%;
	text-align: center;
	height: 517px;
}

.button-group {
	display: flex;
	flex-basis: 10%;
	background-color: #e6e6e6;
	justify-content: space-evenly;
	align-items: center;
	padding: 20px 25%;
	height: 102px;
}

.login-page .banner-sec {
	color:#fff;
	background:url(../images/Banner_Streaming.png) no-repeat 50% 0 #000;
	background-size:cover;
	flex-basis: 66%;
	padding: 3rem 3rem 2rem 3rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;;
}

.banner-sec {
	position: relative;
}
.banner-sec:before {
	background-color: black;
	height: 100%;
	width: 100%;
	content: "";
	opacity: 0.5;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
}
/* make any immediate child elements above our darkening mask */
.banner-sec > * {
	position: relative;
}

.stretch-cast-title-container {
	display: flex;
	justify-content: center;
}

.stretch-cast-title {
	margin: 0;
	border-bottom: 1px red solid;
	font-size: 10px;
	padding-bottom: 5px;
}

.login-page .banner-sec > p,h2 {
	margin: 0;
}

.login-page .banner-sec > p {
	font-size: 0.9rem;
}

.login-page .banner-sec h2 {
	margin-top: 8%;
	font-size: 2em;
}

.login-page .discover-more-container {
	margin-bottom: 15px;
}

.btn-firsthand {
	border: 1px solid white;
	padding: 10px 15px;
	border-radius: 20px;
	text-transform: uppercase;
	text-decoration: none;
	color: white;
	margin: 10px;
}

.btn-firsthand:hover {
	background-color: white;
	color: black;
}

.btn-secondary {
	border: 1px solid white;
	padding: 10px 15px;
	border-radius: 20px;
	text-transform: uppercase;
	text-decoration: none;
	color: white;
	background-color: #202c42;
	margin: 10px;
}
.btn-secondary:hover {
	background-color: white;
	color: #202c42;
}

.loginContainer .actions .psPrimaryAction {
	background-color: #D10B0B;
	border: 1px solid #fff;
	padding: 10px 20px;
	border-radius: 20px;
	color: white;
	cursor: pointer;
}

.loginContainer .actions .psPrimaryAction:hover {
	background-color: #fff;
	color: #D10B0B;
	border-color: #D10B0B;
}


#header1,
#loginPrestoLogoHeader,
.twoColFixLt #header2 {
	height: 80px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 60px;
	padding-right: 60px;
	background-color: #202c42
}

#loginPrestoLogoHeader {
	justify-content: center;
	text-align: center;
	margin-top: 1.6rem;
	padding: 0 15px;
}

#loginPrestoLogoHeader .logoContainer,
#header1 .logoContainer,
#header2 .logoContainer {
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

#loginPrestoLogoHeader .logoContainer #logo {
	margin-right: 20px;
	max-width: 300px;
	vertical-align: middle;
	border-style: none;
}

#header1 .logoContainer #logo,
#header2 .logoContainer #logo {
	height: 60px;
	margin-right: 20px;
}

#header1 .logoContainer,
#header2 .logoContainer {
	margin-left: -37px;
}

#header1 .logoContainer #logo,
#header2 .logoContainer #logo {
	height: 80px;
	width: 80px;
}

#header1 .logoutMenu .logoutLink,
#header2 .logoutMenu .logoutLink {
	text-decoration: none;
	color: #fff;
}

#header1 .header-actions-container,
#header2 .header-actions-container {
	display: flex
}

#header1 .header-actions-container div,
#header2 .header-actions-container div {
	padding: 0px 10px
}

.twoColFixLt #sidebar1 {
	background-color: #6f737e;
	flex-basis: 20%;
}
.twoColFixLt #sidebar1_content,
.twoColFixLt #sidebar2_content {
	padding-bottom: 20px;
	padding-top: 1px;
	padding-right: 1px;
}
.calendar-container {
	display: flex;
	align-items: center;
	justify-content: center;
}
.twoColFixLt #mainContent {
	margin-top: 0;
	margin-right: 40px;
	margin-bottom: 0;
	margin-left: 250px;
	padding-top: 0;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
}
.twoColFixLt #templateContent {
    font-size: 12px;
    /* float:left; */
    padding-top: 15px;
    /* width:870px; */
	padding-left: 10px;
	flex-basis: 80%;
	background-color: #fff;
}

.twoColFixLt #footer {
	width: 100%;
	color: white;
	display: flex;
	justify-content: center;
	background-color: #202c42;
}
.loginFooter {
	display: flex;
	flex-direction: column;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.social-network {
	display: flex;
	justify-content: center;
}

.social-network > a {
	font-size: 24px;
	text-decoration: none;
}

.loginFooter .social-network .i-facebook {
	margin-right: 20px;
}




.loginFooter .footer-text .footer-elm {
	padding: 0 .25rem;
}

.loginFooter a:hover {
	text-decoration: none;
	opacity: 0.6;
}

.loginFooter .social-network > a {
	text-decoration: none;
}

.loginFooter a {
	color: #fff;
	text-decoration: underline;
}

.twoColFixLt #footer2 {
	background-image: url(../images/admin_footer_bg2.jpg);
	background-repeat: no-repeat;
	height: 37px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 270px;
}
.twoColFixLt #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

#light_footer {
	width: 820px;
	float: left;
	padding-top: 15px;
	font-size: 10px;
}
.footer {
	color: #c5c5c5;
	text-transform: uppercase;
	font-size: 14px;
	border: none;
	text-decoration: none;
}

td {
padding: 4px 4px 4px 4px;
}
th {
padding: 4px 4px 4px 4px;
}

.error, .errors {
	color: red;
	font-size: 12px;
}

#audioErrors, #videoErrors {
	color: red;
	display: inline;
}

table.clientManager {
	width: 850px;
}

table.clientManager th {
	width: 35%;
	text-align: right;
	vertical-align: top;
}

table.clientManager td {
	width: 65%;
	text-align: left;
}

 .rowEmph {
	background-color: #ccc;
 }

 .admin-home-container {
 	font: 12px Arial, Helvetica, sans-serif;
	 /*padding-left: 10px;*/
	background-color: #fff;
 }

 #prompt {
			border-color:#D7D6D2;
			border-style:solid;
			width: 350px;
			padding-left:5px;
		}

		#headerText {float:left; font-weight: bold;}
		.eventsContainer {clear: both; padding-bottom:5px; width: 860px;}
		.eventContainer {clear: both; padding-bottom:5px; width: 860px;}
	    .AV {float: left; width: 50px; padding-right: 5px;}
	    .numListener, .numViewer{float: left; width: 30px; padding-right: 5px;}
	    .editDeleteEvent{float: left;width: 230px;padding-right: 5px;}
	    .clientName, .audioEvent{float: left; width: 60px; padding-right: 5px; overflow:hidden}
	    .eventId, .clientNotes, .startTime{float: left;width: 50px; padding-right: 5px;}
	    .clientNotesHover{position:absolute; border-style: solid; background-color: white; padding: 5px;}
	    .audioFree, .videoFree{float: left;width: 40px;padding-right: 5px;}
	    .videoEvent{float: left;width: 80px;padding-right: 5px;}

	    .admin-drawer {width: 100%; background-color:#ECECEC;}
	    .admin-row-separator {background-color:#ececec; height: 1px;}

        /* styling of the container. */
        a.myPlayer {
            display:block;
            width: 320px;
            height:240px;
            text-align:center;
            margin:0 15px 15px 0;
            float:left;
            border:1px solid #999;
        }

        /* play button */
        a.myPlayer img {
            margin-top:70px;
            border:0px;
        }

        /* when container is hovered we alter the border color */
        a.myPlayer:hover {
            border:1px solid #000;
        }

        .alt {
        	background: cornsilk;
        }

#legend, .legend-list {margin: 0; padding: 2px}
.admin-key:before {
	content:'\ffed';
	margin-right:0.5em;
}
.legend-list ul, .legend-list li {
	display: inline;
	margin: 0;
	padding-right: 8px;
}
/*.show-all-filter {display: none; visibility: hidden;}*/

.admin-add-event {
	float: left; width: 60%
}
.admin-email-alerts {
	float: left; width: 20%
}
.admin-page-load {
	float: left; width:20%
}

.help-box {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 4px 4px 4px 4px;
    margin: 15px 0;
    padding: 39px 19px 14px;
    position: relative;
}

.help-box:after {
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #9DA0A4;
    content: "Information";
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    padding: 3px 7px;
    position: absolute;
    top: -1px;
}