/*
 * FXR network style - common elements for node sites
 *
 * This layout reserves the vertical space required by loaded thumbnails to show the full page, so no annoying "growing" pages when you want to reach the bottom of the page.
 * Uses background images with fill to make pixel perfect filling and hover swap, since responsive CSS sprite techniques had some pixel shift at certain window sizes (math round).
 *
 * Responsive media queries: 320,480,992,1200 (xs, sm, md, lg)
 *
 * TOC
 * ===
 * General
 *   Full height with dynamic sticky footer
 * Header
 * Grid layout
 * Video player (fix duplication)
 * Network browse
 * Splash items
 *   Splash base
 *   Responsive splash base
 *   Logo splash
 *   Head splash
 *   Inter splash
 *   Footer splash
 *   Photo splash
 *   Join splash
 *   Elements of the join page
 * Login page
 * Enter page
 * Pager
 * Buttons
 * Footer
 *
 */

/* ==========================================================================
   General
   ========================================================================== */

a.fxr-plain-link,
a.fxr-plain-link:hover,
a.fxr-plain-link:focus,
a.fxr-plain-link:active,
a.fxr-plain-link.active {
  text-decoration: none;
  color: #FFFFFF;
}

.fxr-list-flat ul,
.fxr-list-flat li {
    list-style: none;
    padding: 0;
    margin: 0;
}

html.fxr-full-height,
.fxr-full-height body {
    height:100%;
    width: 100%;
}

.fxr-img-responsive {
    max-width: 100%;
    height: auto;
}

.fxr-text-wrap {
    white-space: normal;
}

/* Full height with dynamic sticky footer
   ========================================================================== */

.fxr-full-height body {
    display: table;
}

.fxr-full-height .fxr-container {
    height: auto;
}

.fxr-full-height .fxr-footer {
    display: table-row;
    height: 1px;
}

.fxr-full-height-cover {
/*
    background-color: #222;
*/
    background: #000 no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


/* Full height filling container with dynamic sticky footer
   ========================================================================== */
html.fxr-fill-height,
.fxr-fill-height body {
    height:100%;
    width: 100%;
}

.fxr-fill-height .fxr-container {
    background: #fff;
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    box-shadow: 6px 0px 5px -5px #333, -6px 0px 5px -5px #333;
}
.fxr-fill-height .fxr-content {
    display: table-row;
    height: 99%;
}
.fxr-fill-height .fxr-footer {
    display: table-row;
    height: 1%;
}

/* ==========================================================================
   Header
   ========================================================================== */

body {
    padding-top: 36px; /* Required padding for .navbar-fixed-top (Note: also update #menu when changing this value). */
    background-color: #222; /* Same as footer. Less glitch when using full screen browsing in android firefox */
    background: linear-gradient(to top, #222 50px, #ffffff 0px); /* Still allowing for fill height effect body be white */
}

/*
.fxr-network-nav {
    max-width: 1452px;
    margin: 0 auto;
}
*/

/* bootstrap overrides: adjust brand position */
.navbar-brand {
	padding: 3px 2px;
	height: 36px;
}

.navbar-inverse {
/*
	background-color: rgba(34,34,34,0.8);
*/
	border-color: #222222;
}

.navbar-fixed-top {
	border-width: 0;
}

.navbar-header button,
.navbar-header a {
    margin-left: 4px;
    margin-right: 4px;
}

    @media (min-width: 480px) {
        .navbar-header button,
        .navbar-header a {
            margin-left: 8px;
            margin-right: 8px;
        }
    }

.navbar-header button:first-child,
.navbar-header a:first-child {
    margin-left: 0;
}

.navbar-header button:last-child,
.navbar-header a:last-child {
    margin-right: 0;
}

.navbar-header.fxr-network-nav-inline {
    float: none;
    text-align: center;
}

.navbar-header.fxr-network-nav-filter {
    float: none;
    text-align: center;
}

    @media (min-width: 480px) {
        .navbar-header.fxr-network-nav-filter {
            text-align: right;
        }
    }


.fxr-network-nav-inline a {
    margin-top: 4px;
    margin-bottom: 4px;
}

    @media (min-width: 480px) {
        .fxr-network-nav-inline a {
            margin-top: 8px;
            margin-bottom: 8px;
        }
    }

/* Show navbar in 2 rows for very small screens */
.fxr-navbar-logo,
.fxr-navbar-buttons {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    float: none;
}
.fxr-navbar-buttons {
    margin-top: 4px;
}

    @media (min-width: 640px) {
        .fxr-navbar-logo {
            float: left;
            margin-left: 0;
            margin-right: 0;
        }
        .fxr-navbar-buttons {
            float: right;
            margin-left: 0;
            margin-right: 0;
            margin-top: 0;
        }
    }


/* ==========================================================================
   Grid layout
   ========================================================================== */

.fxr-color-bg {
    background-color: #fff;
}

/* Gradient background for thumb tables */
.fxr-bg {
    background: #e5e5e5;
    background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 9%);
    background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 9%);
    background: linear-gradient(to bottom, #e5e5e5 0%,#ffffff 9%);
    padding-bottom: 10px;

}

/* Make thumbs show 1:1 on wide enough displays for 480px wide thumbs, counting padding too. */
.container-fluid  {
    max-width: 1452px;
}

/* class assigned to the container of grid thumb tables */
.fxr-thumbnails {

}

/* add space between thumbs */
.no-gutter > [class*='col-'] {
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-top: 2px;
}

/* niche site header in network site */
.fxr-network-site {
    padding-top: 10px;
}
.fxr-network-site p {
    font-size: 1.3em;
}

.fxr-network-site-desc p {
    font-size: 1.3em;
}

.fxr-network-site-desc h3 {
    margin-top: 0;
    margin-bottom: 40px;
    font-size: 18px;
}

    @media (min-width: 480px) {
        .fxr-network-site-desc h3 {
            font-size: 16px;
        }
    }
    @media (min-width: 992px) {
        .fxr-network-site-desc h3 {
            font-size: 20px;
        }
    }
    @media (min-width: 1200px) {
        .fxr-network-site-desc h3 {
            font-size: 22px;
        }
    }

.fxr-tn-wrapper {
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	position: relative;
/*
	background: white;
    background-image: url('../img/loading.png');
*/
    background-repeat: no-repeat;
    background-size: cover;
}


.fxr-tn-32-9 {
    padding-bottom: 28.125%; /* 32:9 */
}

.fxr-tn-24-9 {
    padding-bottom: 37.5%; /* 24:9 */
}

.fxr-tn-16-9 {
    padding-bottom: 56.25%; /* 16:9 */
}

.fxr-tn-3-2 {
	padding-bottom: 66.66%; /* 3:2 */
}

.fxr-tn-4-3 {
	padding-bottom: 75%; /* 4:3 */
}

.fxr-tn-1-1 {
	padding-bottom: 100%; /* 1:1 */
}

.fxr-tn-2-3 {
	padding-bottom: 150%; /* 2:3 */
}

/*
.fxr-tn-wrapper:hover {
    background-image: url('../img/B.png');
}
*/

/* bg thumb image containers */
.fxr-tn-img {
	position: absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: cover;
    display: none;
}

.fxr-tn-img-01 {
    display: block;
}

.fxr-tn-wrapper:hover .fxr-tn-img-02 {
    display: block;
}

.fxr-tn-text {
	position: absolute;
	bottom: 0;
    left: 0;
    right: 0;
	color: white;
	font-size: 1.2em;
    background-color: rgba(120,120,120,0.5);
    padding: 2px 4px;
}

.fxr-tn-text-hidden {
    display: none;
}

.fxr-tn-2-3 .fxr-tn-text,
.fxr-tn-4-3 .fxr-tn-text {
    text-align: center;
}

/* Show hidden text on hover */
.fxr-tn-wrapper:hover .fxr-tn-text-hidden {
    display: block;
}

/* apply to text containers to truncate visible text dynamically client side */
.fxr-truncate {
/*
    display: inline-block;
*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
/*
    width: 100%;
*/
}

/* icons to overlay on top of thumbnails */
.fxr-tn-icons {
	position: absolute;
	top: 6px;
    right: 6px;
	color: white;
	font-size: 1.2em;
    line-height: 1.2em;
    font-weight: bold;
	text-align: right;
    background-color: rgba(120,120,120,0.5);
/*
    padding: 3px 9px 1px 10px;
*/
    padding: 2px 10px;
}

.fxr-tn-wrapper-sites .fxr-tn-icons {
    top: 8px;
    right: 8px;
}

.fxr-tn-buttons {
	position: absolute;
	top: 0;
    left: 0;
    right: 0;
	color: red  ;
    padding-top: 8px;
    padding-left: 8px;
}

.fxr-tn-buttons a {
	position: relative;
    z-index: 1001;
}

/* overlay to display on top of thumbnails */
.fxr-tn-overlay {
	position: absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	color: white;
	font-size: 24px;
	text-align: center;
/*
    background-color: pink;
*/
    display: none;
}

.fxr-tn-overlay-visible {
    display: block;
}

.fxr-tn-link-target,
.fxr-tn-link-target a {
	position: absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.fxr-tn-link-target a {
    display: block;
    z-index: 1000;
}
/* ==========================================================================
   Video player
   ========================================================================== */

.fxr-slider-combo {
    background-color: black;
}

.fxr-slider-container {
    padding: 0;
}

    @media (orientation: landscape) {
        .fxr-slider-container {
            padding: 0 12%;
        }
    }
    @media (min-device-width: 992px) and (orientation: landscape) {
        .fxr-slider-container {
            padding: 0;
        }
    }

.fxr-slider-title {
    color: #fff;
    padding-top: 8px;
}

/* ==========================================================================
   Videos page
   ========================================================================== */

.fxr-controls-container {
    background-color: #7F7F7F;
    color: #eee;
    min-height: 36px;
}

/* ==========================================================================
   Video player
   ========================================================================== */

.fxr-player-combo,
.fxr-player-combo .fxr-tn-wrapper {
    background-color: black;
}

.fxr-player-container {
    padding: 0;
}

    @media (orientation: landscape) {
        .fxr-player-container {
            padding: 0 12.5%;
        }
    }
    @media (min-device-width: 992px) and (orientation: landscape) {
        .fxr-player-container {
            padding: 0 17%;
        }
    }

.fxr-player-title {
    color: #fff;
    padding-top: 8px;
}

.fxr-player-extras-container {
    background-color: #222;
}

.fxr-player-extras {
    height: 36px;
    color: #eee;
}

.fxr-table-container {
    display: table;
    width: 100%;
    height: 100%;
}

.fxr-table-content {
    display: table-cell;
    vertical-align: middle;
}

.fxr-player-login {
    background-color: rgba(0,0,0,0.5);
    color: #fff;
}

    @media (min-width: 480px) {
        .fxr-player-login {
            max-width: 80%;
        }
    }

.fxr-player-login a {
    display: block;
}


/* ==========================================================================
   Network browse
   ========================================================================== */
#browse:before {
    display: block;
    content: "";
    height: 36px; /* same as body padding-top */
    margin: -36px 0 0;
}

.fxr-browse-container-header {
    background-color: #fff;
}

.fxr-browse-container {
    background-color: #ccc;
}

.fxr-browse-container .navbar {
    margin-bottom:0;
}

/* ==========================================================================
   Splash items
   ========================================================================== */

/* Splash base
   ========================================================================== */
.fxr-splash {
    background-color: #F54A91;
}

.fxr-splash h3 {
    font-size: 3em;
    color: #fff;
}

.fxr-splash h4 {
    color: #fff;
}

/* Responsive splash base
   ========================================================================== */
.fxr-splash-responsive {
    padding: 20px 0;
}

    @media (min-width: 480px) {
        .fxr-splash-responsive {
            padding: 40px 0;
        }
    }
    @media (min-width: 992px) {
        .fxr-splash-responsive {
            padding: 60px 0;
        }
    }
    @media (min-width: 1200px) {
        .fxr-splash-responsive {
            padding: 80px 0;
        }
    }


/* Logo splash
   ========================================================================== */

.fxr-splash-logo {
    padding: 10px 0;
}

.fxr-logo img {
    max-width: 100%;
    height: auto;
    padding: 0 20px;
}

/* Head splash
   ========================================================================== */

.fxr-splash-head {
    padding: 10px 0;
    margin-bottom: 2px;
}

/* Inter splash
   ========================================================================== */

.fxr-splash-inter {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Footer splash
   ========================================================================== */

.fxr-splash-footer { }


/* Photo splash
   ========================================================================== */

.fxr-photo-splash {
    padding: 10px 0;
    background-color: #fdcc52;
    color: #fff;
    background: url(../img/FXR/splash/join.jpg) no-repeat center center;
    background-size: cover;
}

/* Join splash - independent for join page mobility so far.
   ========================================================================== */

.fxr-join-splash {
    background: #222 no-repeat center center;
    background-size: cover;
}

.fxr-join-background {
    background-image: url("../img/FXR/splash/join.jpg");
}

.fxr-form-splash {
    padding: 10px 0;
    color: #fff;
}

.fxr-form-splash .fxr-join-form {
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

    @media (min-width: 480px) {
        .fxr-form-splash .fxr-join-form {
            margin-bottom: 10px;
            padding-left: 20px;
            padding-right: 20px;
        }
    }

    @media (min-width: 992px) {
        .fxr-form-splash .fxr-join-form {
            margin-bottom: 20px;
            padding-top: 44px;
        }
    }

    @media (min-width: 1200px) {
        .fxr-form-splash .fxr-join-form {
            margin-bottom: 30px;
            padding: 114px 20px 20px;
        }
    }

.fxr-form-splash .fxr-join-form p {
    color: #ccc;
}

.fxr-form-splash .fxr-options-form {
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

    @media (min-width: 480px) {
        .fxr-form-splash .fxr-options-form {
            margin-bottom: 10px;
            padding-left: 20px;
            padding-right: 20px;
        }
    }

    @media (min-width: 992px) {
        .fxr-form-splash .fxr-options-form {
            margin-bottom: 20px;
        }
    }

    @media (min-width: 1200px) {
        .fxr-form-splash .fxr-options-form {
            margin-bottom: 30px;
        }
    }



/* Elements of the join page
   ========================================================================== */

.fxr-form-item {
    margin-top: 16px;
    margin-bottom: 16px;
}

h3.fxr-form-separator {
    overflow: hidden;
    text-align: center;
}

h3.fxr-form-separator:before,
h3.fxr-form-separator:after {
    background-color: #FFF;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

h3.fxr-form-separator:before {
    right: 0.5em;
    margin-left: -50%;
}

h3.fxr-form-separator:after {
    left: 0.5em;
    margin-right: -50%;
}

.fxr-jumbotron {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.fxr-jumbotron h1 {
    margin-top: 0;
    font-size: 2.5em;
}

.fxr-jumbotron p {
    font-size: 1.3em;

}

    @media (min-width: 480px) {
        .fxr-jumbotron {
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 10px;
            padding-top: 20px;
        }

        .fxr-jumbotron h1 {
            font-size: 4em;
        }

        .fxr-jumbotron p {
            font-size: 1.5em;
        }

    }

    @media (min-width: 992px) {
        .fxr-jumbotron {
            padding-top: 30px;
            margin-bottom: 20px;
        }

        .fxr-jumbotron h1 {
            font-size: 6em;
        }

        .fxr-jumbotron p {
            font-size: 1.7em;

        }
    }

    @media (min-width: 1200px) {
        .fxr-jumbotron {
            padding: 100px 20px 20px;
            margin-bottom: 30px;
        }

        .fxr-jumbotron h1 {
            font-size: 6em;
        }

        .fxr-jumbotron p {
            font-size: 1.7em;

        }

    }

.container-fluid.fxr-network {
    max-width: 900px;
    margin-bottom: 20px;
}

.fxr-network h2 {
    font-size: 2em;
}

    @media (min-width: 480px) {
        .container-fluid.fxr-network {
            margin-bottom: 20px;
        }

        .fxr-network h2 {
            font-size: 2.6em;
        }

    }

    @media (min-width: 992px) {
        .container-fluid.fxr-network {
            margin-bottom: 50px;
        }

        .fxr-network h2 {
            font-size: 4em;
        }

    }

    @media (min-width: 1200px) {
        .container-fluid.fxr-network {
            margin-bottom: 100px;
        }

        .fxr-network h2 {
            font-size: 4em;
        }

    }

/* end of join page styles */

/* ==========================================================================
   Login page
   ========================================================================== */

.fxr-login-splash {
    background: #222 no-repeat center center; /* Same as footer. Less glitch when using full screen browsing in android firefox */
    background-size: cover;

}

.fxr-login-background {
    background-image: url("../img/FXR/splash/login.jpg");
}

/* ==========================================================================
   Enter page
   ========================================================================== */

.fxr-enter-background {
    background-image: url("../img/FXR/splash/login.jpg");
}

.fxr-enter-splash {
    padding: 10px 0;
    color: #fff;
}

.fxr-enter-splash .fxr-enter-cnt {
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

    @media (min-width: 480px) {
        .fxr-enter-splash .fxr-enter-cnt {
            margin-bottom: 10px;
            padding-left: 20px;
            padding-right: 20px;
        }
    }

    @media (min-width: 992px) {
        .fxr-enter-splash .fxr-enter-cnt {
            margin-bottom: 20px;
            padding-top: 44px;
        }
    }

    @media (min-width: 1200px) {
        .fxr-enter-splash .fxr-enter-cnt {
            margin-bottom: 30px;
            padding: 114px 20px 20px;
        }
    }

.fxr-enter-splash .fxr-enter-cnt p {
    color: #ccc;
}

.fxr-prenav-text {
    color: #333;
}

/* ==========================================================================
   Pager
   ========================================================================== */

/* bottom pager in niche sites only */
.fxr-pager {
    padding-top: 20px;
}

.fxr-pager-network {
    padding-top: 10px;
    background-color: #fff;
}

.fxr-pager ul {
    padding-left: 0;
}

.fxr-pager li {
    display: inline-block;
    padding-left: 4px;
    padding-right: 4px;
}

    @media (min-width: 480px) {
        .fxr-pager li {
            padding-left: 8px;
            padding-right: 8px;
        }
    }

.fxr-pager ul li:first-child {
    padding-left: 0;
}

.fxr-pager ul li:last-child {
    padding-right: 0;
}

.fxr-pager .btn-danger.fxr-active {
    background-color: #c9302c;
}

/* ==========================================================================
   Buttons
   ========================================================================== */


.fxr-btn {
    padding: 5px;
    margin-bottom: 10px;
    font-size: 2em;
}

    @media (min-width: 480px) {
        .fxr-btn {
            padding: 6px;
        }
    }
    @media (min-width: 992px) {
        .fxr-btn {
            padding: 8px;
        }
    }
    @media (min-width: 1200px) {
        .fxr-btn {
            padding: 10px;
            font-size: 3em;
        }
    }

.fxr-btn-network {
    background-color: #f54a91;
    text-align: center;
}
.fxr-btn-network:hover {
    background-color: #D43778;
    border-color: #D43778;
}

.fxr-btn-nav {
    padding-left: 4px;
}

    @media (min-width: 480px) {
        .fxr-btn-nav {
            padding-left: 8px;
        }
    }


/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  background-color: #222222;
  color: #A3A3A3;
  text-align: center;
}
footer a {
  color: #D2D2D2;
}

footer p {
  font-size: 1em;
  margin: 0;
}
footer ul {
  margin-bottom: 8px;
  margin-top: 8px;
}
footer ul li a {
  font-size: 1.1em;
  color: #D2D2D2;
}
footer ul li a:hover,
footer ul li a:focus,
footer ul li a:active,
footer ul li a.active {
  text-decoration: none;
  color: #D2D2D2;
}

.fxr-footer-container {
    padding: 25px 0;
}

.fxr-footer-logo {
    padding-bottom: 6px;
}

.fxr-footer-logo img {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   Notices
   ========================================================================== */

.fxr-notice {
	position: fixed;
	bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
	color: white;
	font-size: 1.2em;
    background-color: rgba(120,120,120,0.75);
    padding: 6px;
    text-align: center;
    display: none;
}

.fxr-notice-session {
	position: fixed;
	bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
	color: white;
	font-size: 1.2em;
    padding: 6px;
    text-align: center;
    display: none;
}

.fxr-notice-session img {
    max-width: 100%;
    height: auto;
}

.fxr-notice-session a,
.fxr-notice-session a:hover {
    text-decoration: none;
}


/* EOF */