/* Custom CSS for Identity Server */

/* Fix labels for forms to be bold*/
label {
    font-family: TheSans-SemiBold;
    font-weight: bold;
}

/* Fix button behavior on login page */
a.btn.btn-default.ng-binding {
    color: #333333;
    border: 1px solid #cccccc;
}
a#login-without-netid {
    border-bottom: 1px solid #ccc;
}

/* Fix Yale Logo in footer */
.YaleLogo {
    font-family: 'YaleDesign Medium';
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
}

/* Fix input form height */
select, input[type='text'], input[type='password'], input[type='datetime'], input[type='datetime-local'], 
input[type='date'], input[type='month'], input[type='time'], input[type='week'], input[type='number'], 
input[type='email'], input[type='url'], input[type='search'], input[type='tel'], input[type='color'], .uneditable-input {
    height: 30px;
}

/* Hide the Local Login boxes from view on load */
#local-login-left,
#local-login-right {
    display: none;
}

/* 
    For some reason, style.min.css calls for the first list item
    in the external providers section to have 5px of padding.  WTF.
    Override that.
*/
.page-login .external-providers li:first-child {
    padding-left: 0px;
}

/* 
    For some other reason, style.min.css calls for <ul> items
    in the external providers section to have 5px of padding,
    too.  WTF, x2.  Override that.
*/
.page-login .external-providers li {
    padding: 0px;
}

/* 
    bootstrap.css calls for .container to have 15px of padding
    whereas .container-fluid gets 20px.  20px in .container-fluid
    places the Yale logo 17px inside what would otherwise be
    the flush-left margin.  37px brings the margin of the page
    inline with the Yale logo.
*/
.container {
    padding-right: 37px;
    padding-left: 37px;
}

/* 
    Override the bootstrap.css component that moves lists to
    the left by 5 px.  This affects the login buttons.
*/
.panel-body .list-inline {
    margin-left: 2px;
}

/* Remove left margin from de-styled lists */
#login-links {
    margin-left: 0px;
}
#visible-login-links {
    margin-left: 0px;
}

/* Fix header and footer in mobile view */
@media screen and (max-width: 480px) {
    .container-fluid {
        width: 100%;
        padding: 0px;
    }
    .container {
        padding: 0px;
        margin: 0px 10px;
    }
}

/* Removes "forgot your password" from visible box */
#visible-login-links>.ng-scope:nth-child(2) {
    display: none;
}

/* Tigthen spacing in form */
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    /* margin-bottom: 0px; */
}

/* Give .containder-fluid auto margins so it self-centers */
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    *zoom: 1;
}

/* 
   Override .row properties to remove negative left and right margins.
   Otherwise the interior of the page overhangs the header and footer
   and looks goofy.
*/
.row {
    margin-left: 0px;
    margin-right: 0px;
}

/* Style the h1 appropriately */
h1 {
    font-family:  "TheSans-Light", Arial, Helvetica, sans-serif, Arial, sans-serif;
    font-weight: 200;
    color: #9b2621;
    font-size: 3em;
    letter-spacing: normal;
    line-height: 1.05;
    margin-top: 0.6875em;
    margin-bottom: 0.22916667em;
    font-style: normal;
}

/* Tighten top header/nav bar */
.navbar-inverse {
    padding-left: 18px;
    padding-right: 18px;
}

/* Tighten top header/nav bar and square it vertically */
.navbar-header {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 9px;
}

/* 
   Modify the color of links in the nav bars so they're white instead of red
   (body default)
*/
.navbar-header a {
    color: #ffffff;
}
.navbar-header a:hover {
    color: #ffffff;
}

/* Remove margin on "small icons" in the footer */
.sm-icons {
    margin: 11px 0 11px 0;
}

/* 
    Remove padding in the footer and set "overflow: hidden" so that it
    sizes appropriately vertically (otherwise we have to specify a hard
    value for its height).
*/
.footer {
    padding: 0px;
    overflow: hidden;
}

/* Hard set the margin of the footer links, kissinger.css specifies % */
#footer-links {
    margin-left: 18px;
    margin-top: 11px;
    margin-bottom:  11px;
}

/*
    Get rid of the padding in the footer links (both footer and sm-icons),
    because only Chrome/Safari obey the margin-before/margin-after, which
    causes rendering problems in Firefox.
*/
#footer-links a,
.sm-icons a {
    padding: 0px;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-padding-start: 0px;
    margin-right: 13px;
}
/* 
    Get rid of hover color on footer links and make similar changes to above
    so that the hover doesn't realign things.
*/
#footer-links a:hover,
.sm-icons a:hover {
    background-color: transparent;
    padding: 0px;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-padding-start: 0px;
    margin-right: 13px;
}

/* Adjust spacing of footer links */
#footer-links span {
    margin-right: 10px;
}

/* 
    Remove corrective padding from Yale logo (only necessary when the 
    background changes color, which we defeated above).
*/
span.YaleLogo a:hover {
    padding: 0px;
}

/*
    Add a class for messages on the SSO home page.  Used for promotions and
    other messages that aren't errors/warnings.  The link color also needs to be changed.
*/
.message a {
    color: #0a4d92;
    text-decoration: underline;
}
.message {
    background: #eeffee;
    border: 1px solid #009900;
    margin-bottom: 10px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 7px;
}

/* Remove corrective padding for when the screen size is less than 768px */
@media screen and (max-width: 768px) {
    #ng-app {
        padding-left: 0px;
        padding-right: 0px;
    }
    .col-md-6.col-sm-6 {
        padding-left: 0px;
        padding-right: 0px;
    }
    .footer {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }

    /* Remove top margin of footer links */
    #footer-links span {
        margin-top: 0px;
    }

    /* Remove padding in navbar header */
    .navbar-header {
        padding: 0px;
    }
    .container {
        padding-left: 0px;
        padding-right: 0px;
    }
}

/* 
    Match container-fluid (top header and footer) to page 
    width for mid-sized browsers and for wide browsers.
*/
@media (max-width: 979px) and (min-width: 768px) {
    .container-fluid {
        width: 724px;
    }
}

@media (max-width: 1199px) and (min-width: 980px) {
    .container-fluid {
        width: 940px;
    }
}

@media (min-width: 1200px) {
    .container-fluid {
        width: 1170px;
    }
}