/*******************************************************************************
 * Registration UI: Shared on Media, mWeb
 *
 * Primary used by sign in and registration processes
 *
 * Sections
 *      1. Registration - includes grid overrides
 *      2. Registration Dialog
 *      3. Registration tab set
 *      4. Registration Social
 *      5. Media Queries
 *      6. Global Navigation Overrides
 *      7. Product Promo
 *
 ******************************************************************************/

/*******************************************************************************
 * 1. Registration
 * BEGIN custom registration templates and form processes UI
 ******************************************************************************/
#uRegContainer, .registrationPage {
    color:#232323;
    font-family: "proxima-nova-n4","proxima-nova",verdana,sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

/* Grid layout overrides - convert fixed pixel to percentages */
#gridContainer,
#gridContainer *,
#gridContainer *:after,
#gridContainer *:before {
    /* ensure width remain true even if padding or borders being applied */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#gridContainer.registrationPage .col-12 {
    padding: 0;
    width: 100%;
}

#gridContainer #uRegContainer.col-7 {
    border-right: solid 1px #a4b2ba;
    padding-right: 20px;
    width: 57%;
}

#gridContainer.registrationPage .col-5 {
    padding-left: 20px;
    width: 43%;
}

#uRegContainer.memberRegistration {
    padding-right: 20px;
}

#uRegContainer.memberRegistration.col-registration {
    padding-right: 0px;
}

#uRegContainer.memberRegistration.col-registration div.formLayout {
   margin-right: 20px;
}

/* All the various colors.... */
#uRegContainer a {
    color: #4484c5;
}

#registrationTools .tools a {
    color: #3399cc;
}

#uRegContainer .instructions,
#uRegContainer hr {
    border-color: #a4b2ba;
    color: #a4b2ba;
}
#uRegContainer .feedback {
    color: #2c8e47;
}

/* global CSS Media site button overrides
* FIX ME: get a handle on all the various button and anchor button selectors
*/
#uRegContainer input.formButton,
#uRegContainer input[type="submit"],
#uRegContainer a.button,
.registrationPage a.button,
#uRegContainer button,
.registrationPage button {
    background-color: #3787d9;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-bottom: 2px solid #005bb7;
    box-shadow: none;
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    height: 46px;
    margin-left: 20%;
    margin-right: 20%;
    padding: 0px;
    text-align: center;
    text-shadow: none;
    text-transform: uppercase;
    vertical-align: middle;
    width: 60%;
}

#uRegContainer input[type="submit"] {
    margin-bottom: 10px;
}

#uRegContainer a.button,
.registrationPage a.button {
    display: inline-block;
    font-family: "proxima-nova-n4","proxima-nova",verdana,sans-serif;
    line-height: 2.46em;
}

#uRegContainer button.exit {
    background-color: #ccc;
}

/* As rendered by the Login FORM.pm object HTML */
#uRegContainer table {
    border: 0;
    width: 100%;
}

#uRegContainer form {
    margin: 0;
}

#uRegContainer hr {
    margin: 0;
    padding: 0;
}

#uRegContainer.accountMaint {
    width: 70%;
}

/* Registration success page */
#uRegContainer.registrationConfirmation {
    height: auto;
    margin: 0 auto 20px 0;
    padding: 0px;
    position: relative;
    width: 100%;
}

#uRegContainer.registrationConfirmation > div {
    height: auto;
    margin: auto;
}

#uRegContainer.registrationConfirmation .message.success {
    background: #eafae6;
    font-size: 18px;
    padding: 20px 10px;
    width: 100%;
}

#uRegContainer.registrationConfirmation .message.success > div {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

#uRegContainer.registrationConfirmation .message.success img {
    vertical-align: middle;
}

#uRegContainer.registrationConfirmation .message.success em {
    font-weight: 700;
    font-style: normal;
}

#uRegContainer.registrationConfirmation h6 > * {
    font-weight: normal;
    vertical-align: middle;
}

#uRegContainer.registrationConfirmation .productPromo {
    color: #333;
    margin-bottom: 30px;
}

#uRegContainer.registrationConfirmation .productPromo h4 {
    font-size: 14px;
    margin: 0;
    padding: 0;
}

#uRegContainer.registrationConfirmation .productPromo h3 {
    font-size: 20px;
    margin: 0 0 20px 0;
    padding: 0;
}

#uRegContainer.registrationConfirmation ul {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}

#uRegContainer.registrationConfirmation ul li,
.registrationPage ul li {
    text-align: left;
}

#uRegContainer.registrationConfirmation a.button {
    margin-bottom: 20px;
    min-width: 60%;
    width: auto;
}

#uRegContainer .message {
    display: inline-block;
    font-weight: inherit;
    margin: 10px 0;
    text-align: center;
    width: 100%;
}

#uRegContainer .message.success,
.progressIndText.success {
    color: #72c14a;
}

#uRegContainer .message.error {
    color: #cc0000;
}

#uRegContainer .promo {
    font-family: "jubilat-n4","jubilat",sans-serif;
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
}

#uRegContainer .promo h4 {
    font-family: "jubilat-n7","jubilat",sans-serif;
    font-size: 1.428em;
    font-style: normal;
    font-weight: 700;
}

#uRegContainer .promo.copy {
    font-family: "proxima-nova-n4","proxima-nova",verdana,sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

#uRegContainer .salutation {
    margin-bottom: 10px;
    text-align: center;
}

.privacy, #registrationTools {
    text-align: center;
}

/* LEGACY UReg/Settings: registration, login, forget id|password */
#uRegContainer h4,
#settingsContent h4 {
    font-size: 1.2em;
    margin: 0 0 10px 0;
}

#uRegContainer a.uregTool,
#settingsContent a.uregTool {
    font-size: 12px;
}

#uRegContainer .progressIndicatorContainer {
    display: none;
}

#uRegContainer p {
    margin-top: 0;
}

#uRegMessage {
    background-color: #F3F4F4;
    border: solid 1px #a7b1be;
    margin-bottom: 10;
}

#uRegMessage h4 {
    margin: 0;
}

#registrationTools > a {
    margin-right: 10px;
    padding: 0;
}

.registrationPage .uRegPromo {
    width: 80%;
    text-align: left;
    margin: auto;
    margin-right: 10px;
}
.registrationPage .uRegPromo > div {
    margin-bottom: 20px;
    text-align: center;
}

#socialMsgContainer {
    margin-bottom: 20px;
    padding: 0 15px;
}
#socialPhoto {
    float: left;
    height: 40px;
    width: 60px;
}

.newsletterOptin label {
    color: #232323;
    font-size: 13px;
}

/*******************************************************************************
 * 2. Registration Dialog
 *
 * Login/Registration: Modal
 *
 * SELECTORS
 *  .uRegDialog is the class on the jQuery UI tools Dialog widget parent DIV
 *  #uRegDialogContent is the child DIV of .uRegDialog.
 *  This element contains ALL content of the modal
 *
 *  MOVE TO jQUERY UI TOOLS CSS ????
 *
 ******************************************************************************/
.uRegDialog  {
    /* dialog  parent */
    background:none;
    border:none;
    height:100%;
}

.uRegDialog a:link {
    color:red;
}

.uRegDialog  .ui-dialog .ui-dialog-content {
    padding:0px;
}

/* suppress the title bar styles so it's transparent*/
.uRegDialog  .ui-dialog-titlebar {
    background-color:transparent;    
    display:none;
    padding:0px;
    z-index:1;
}

/* custom close button */
.uRegDialog  a.ui-dialog-titlebar-close {
    height: 50px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: -7px;
    top: -5px;
    width: 55px;
}

.uRegDialog  a.ui-dialog-titlebar-close {
    right: 0;
    top: 7px;
}

.uRegDialog  a.ui-dialog-titlebar-close.ui-state-hover {
    background: none;
    border: none;
}

.uRegDialog .ui-icon-closethick {
    background: url("/images/video/player/lightbox/btn_close_lightbox.png") repeat scroll 0 0 transparent;
    height: 50px;
    margin: 0;
    width: 52px;
}

/* UReg Modal and Tab Group */
/* Modal container combines styles here and the jQuery ui-tools.css to override the default modal UI */
#uRegDialogContent {
    background: none;
    background-color:none !important;
    -moz-box-shadow: 0 6px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 6px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 6px 4px rgba(0, 0, 0, 0.4);
    color: #ccc;
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 450px;
}

#uRegDialogContent .progressInd {
    margin-bottom: 20px;
    margin-top: 20px;
    width: 100%;
}
#uRegDialogContent .progressIndText {
    font-weight: normal;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}

/*******************************************************************************
 * 3. Registration tab set
 ******************************************************************************/
#uRegTabs {
    font-size: 14px;
    width:100%;
}

#uRegTabs  img.uRegDialogHeader {
    float:left;
    clear:both;
    padding:8px 4px;
}

#uRegTabs ul {
    height:32px;
}

#uRegTabs.ui-tabs {
    padding:0px;
}

#uRegTabs.ui-tabs .ui-tabs-nav {
    padding:12px 0 0 0;
    margin: 0px;
}
#uRegTabs.ui-tabs .ui-tabs-nav li {
    background-color: #003399;
    border: none;
    color: #fff;
    float:right;
    font-weight: bold;
    margin: 0 10px 0 0;
    text-transform:uppercase;
    top: 0;
}

#uRegTabs.ui-tabs .ui-tabs-nav li.ui-state-active {
    background-color: #fff;
    border:none;
    font-weight: normal;
}

#uRegTabs.ui-tabs .ui-tabs-nav li.ui-state-active a {
    color:#003399;
}

#uRegTabs.ui-tabs .ui-tabs-nav li a {
    color:#eaeaea;
}

#uRegTabs .ui-widget-header {
    background-color:#003399;
}

#registrationFrame {
    height:100%;
}
#uRegFrame {
    border: none;
    height: 100%;
    width: 100%;
}

/*******************************************************************************
 * 4. Registration Social
 *
 * Sprite: Social Icons: Site Tools: Round UI
 * - contains CSS overrides for global Social buttons
 * /images/cbss/ui7/icons/social/facebook_30x30.png
 * /images/cbss/ui7/icons/social/facebook_retina_60x60.png
 * /images/cbss/ui7/icons/social/googleplus_30x30.png
 * /images/cbss/ui7/icons/social/googleplus_retina_60x60.png
 ******************************************************************************/
#uRegContainer .socialButtons {
    display: table;
    margin: auto;
    text-align: center;
}

#uRegContainer .socialButtons div {
    display: table-cell;
    padding-right: 10px;
    vertical-align: middle;
    color:#a4b2ba;
}

#uRegContainer .socialFacebookForm input[type='submit'],
#uRegContainer .socialGoogleForm input[type='submit'] {
    background-position: 0 0;
    border: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    cursor: pointer;
    display: inline-block;
    height: 30px;
    margin: 0;
    padding: 0;
    width: 30px;
    text-indent: -1000em;
}

#uRegContainer input[type='submit'].facebookButton {
    background: transparent url('/images/cbss/ui7/icons/social/facebook_30x30.png') no-repeat;
}

#uRegContainer input[type='submit'].googleButton {
    background: transparent url('/images/cbss/ui7/icons/social/googleplus_30x30.png') no-repeat;
}

#uRegContainer .socialFacebookForm input[type='submit']:focus,
#uRegContainer .socialGoogleForm input[type='submit']:focus {
    outline: none;
}

/*******************************************************************************
 * 5. Media Queries
 * !IMPORTANT: the order of the media queries is important as rules can be superceded
 *  if a rule down the chain matches a device width, pixel screen capability, type, or orientation
 *
 * For handheld devices accessing the Media site registration and login pages
 * This should only occur if the handheld device doesn't visit the mWeb version
 * of each page
 * max-width is the width of the viewport
 * max-device-width is the width of the device's viewport regardless of orientation
 *
 * The general change per viewport or device is to reset the parent container: #gridContainer
 *
 * ******************************************************************************/
@media only screen and (max-width: 768px),
    only screen and (max-device-width: 768px) {
    /* Mobile header to be inline to address OS6/7 bug when softkeyboard opens on screen */
    #cbsHeader {
        position:relative !important;
    }

    .cbsMenuContainer {
        top:0px !important;
    }

    div#cbsSectionContainer {
        width:100%;
    }

    /* Sign In/Registration: modify display of login page login form and registration display and content
    * - Stack log in form on top of registration call to action (CTA)
    */
    #gridContainer {
        width:100%;
    }

    #gridContainer .row {
        padding:10px;
    }
    
    #gridContainer #uRegContainer.col-7,
    #gridContainer.registrationPage .col-5,
    #gridContainer.registrationPage .col-12 {
        float: none;
        width: 100%;
    }

    #gridContainer #uRegContainer.col-7,
    #gridContainer.registrationPage .col-5 {
        margin-right: 0;
        padding: 0;
    }

    #gridContainer #uRegContainer.col-7 {
        border-right: none;
    }

    #regFormContainer, #regFormContainer div.formLayout {
        width: 100%;
    }

    .registrationPage .memberLogin {
        margin-right: 0;
    }

    #registrationTools a {
        margin: 0 10px 10px 0;
        padding: 0;
    }

    .memberRegistration .registerButton {
        text-align:center;
    }

    .registrationPage .uRegPromo {
        font-weight:600;
        display:block;
        margin: 0 0 10px 0;
        text-align:center;
        width:auto;
    }

    .registrationPage .uRegPromo div {
        margin-bottom:10px;
        text-align:center;
    }

    .registrationPage .uRegPromo ul,
    .registrationPage .uRegPromo p {
        display:none;
    }

    .registrationPage  div a.button {
        margin-bottom: 0;
        padding: 0 20px;
        width:auto;
    }

    /* reset width to accomodate mobile viewport width when adjacent to fieldWidget */
    .cbsiForm #password {
        width: 55%; 
    }

    .cbsiForm #togglePassword {
        margin-right: 5px; 
    }

    /* show field widget for mobile password fields */
    .cbsiForm input[type='password'] + div.fieldWidget {
        display:inline;
    }

    .cbsiForm .fieldWidget input[type="checkbox"] {
        border: 1px solid #bbb;
        -webkit-border-radius: 22px;
        -moz-border-radis: 22px;
        border-radius: 22px;
        -webkit-transform: scale(1.4,1.4);
    }
}

@media only screen and (max-width: 524px) {
    /* for ALL viewports smaller than this size...
    - stack the registration get id and get pass anchors
    - set form buttons to be full viewport width
    */
    #registrationTools a {
        display: block;
        padding: 0;
    }

    #uRegContainer input.formButton,
    #uRegContainer input[type="submit"] {
        margin-left: 15px;
        margin-right: 15px;
        width: 90%;
    }
}

@media only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {
    /* Retina icons */
    #uRegContainer input[type='submit'].facebookButton {
        background-size:30px 30px !important;
        background: transparent url('/images/cbss/ui7/icons/social/facebook_retina_60x60.png') no-repeat;
        height:30px;        
        width:30px;
    }

    #uRegContainer input[type='submit'].googleButton {
        background-size:30px 30px !important;
        background: transparent url('/images/cbss/ui7/icons/social/googleplus_retina_60x60.png') no-repeat;
        height:30px;        
        width:30px;
    }
}

/*******************************************************************************
 * 5. Global Navigation overrides
   NOTE: THIS CAN BE REMOVED AFTER 2016-03-01 after the new masthead goes live
*******************************************************************************/
/* The global navigation font is not displaying properly on auth.cbssports.com
*   hence less space must be defined around each anchor
*/
a.globalMainCategory {
    padding: 10px 12px 14px;
}

/*******************************************************************************
 * 6. Product Promo
 ******************************************************************************/
.productPromo {
    align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    box-sizing: border-box;
    color: #232323;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    border: solid 1px #5badfe;
    border-radius: 2px;
    margin: 0 0 20px 0;
    padding: 10px;
    width: 100%;
}
.productPromo img {
    display: block;
    margin-right: 10px;
}
.productPromo div.promoText {
    letter-spacing: normal;
    line-height: 1.44;
    font-family: "proxima-nova-n4","proxima-nova",verdana,sans-serif;
    font-size: 18px;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
}
.productPromo.loginPage {
    margin-bottom: 10px;
    margin-top: 10px;
}