﻿/*DK: added START */

body {
    background: url('https://cdn.elca.org/idmngmnt/mosaic1.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}


.btn-primary:hover {
    background-color: #ffffff !important;
    border-radius: 0;
    border-color: #EFBF45;
    color: #EFBF45;
}

.lrn-more:hover {
    background-color: #ffffff !important;
    border-radius: 0;
    border-color: #EFBF45;
    color: #EFBF45;
}



/*DK: added END */

@font-face {
    font-family: 'ProximaNova-Light';
    src: url('Fonts/ProximaNova-Light.woff') format('woff');
}
/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/*/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/

header {
    margin-bottom: 3%;
}

nav.navbar.navbar-expand-md.navbar-dark.fixed-top.bg-dark {
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 13px;
    font-weight: 600;
    line-height: 13px;
    font-family: ProximaNova-Light;
}

#navbarCollapse > ul > li.nav-item.active > a {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 24px;
    background-color: white;
    color: #000;
    font-family: ProximaNova-Light;
}

#navbarCollapse > ul > li.nav-item > a {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 24px;
    color: #FFF;
    font-family: ProximaNova-Light;
}

.profile-navbar {
    margin-bottom: 2%;
}

.lrn-more {
    background-color: #EFBF45;
    border-radius: 0;
    color: #ffffff;
}

.elca-primary-bg {
    background-color: #4A90E2;
}

.tab-pane {
    padding-top: 2%;
    padding-bottom: 2%;
}

.email:first-of-type {
        padding-top: 3%;
        margin-top: 1%;
}


.bio {
    background-color: rgb(238,238,238);
    padding: 3%;
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 1%;
    margin-top: 1%;
}

ul#myTab {
    margin-bottom: 2%;
}

#phone {
    background-color: #eee;
}

.hide-phone,.hide-email,.hide-address {
    display: none;
}
.phone {
    background-color: rgb(238,238,238);
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 5%;
    margin-top: 1%;
}
.phone-container {
    padding: 1.6em;
    padding-top:5%;
}
.delete-phone,.delete-email,.delete-address,.delete-email {
    margin-top:1em;
}

#address,#email {
    background-color: #eee;
}

.address,.email {
    background-color: rgb(238,238,238);
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 1%;
    margin-top: 1%;
}
.address-container, .email-container {
    padding: 1.6em;
    padding-top: 5%;
}

element.style {
    min-height: 270px;
}

footer {
    background: #EEEEEE;
    padding: 60px 0 0 0;
    font-size: 16px;
    margin-top: 50px;
}

.footer-column {
    border-right: 1px solid #DDDDDD;
    box-shadow: 1px 0px 0px 0px #FFFFFF;
    min-height: 300px;
    padding: 0 10px 0 20px;
    margin-bottom: 20px;
}
footer ul > li > a {
    color: #333;
}

.footer-column * {
    font-family: "ProximaNova-Light";
}
footer ul li a {
    color: #333;
}
footer .btn-lg, .btn-group-lg > .btn {
    padding: 11px 12px 9px;
}
.btn-primary {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.25px;
    text-transform: uppercase;
}
.btn {
    text-shadow: 0px 1px 0px rgba(0,0,0,0.20);
    border-radius: 6px;
}
footer .footer-column {
    border-right: 1px solid #DDDDDD;
    box-shadow: 1px 0px 0px 0px #FFFF;
    padding: 0 10px 0 20px;
    margin-bottom: 20px;
}
footer label {
    font-weight: bold;
}

.list-inline > li {
    display: inline-block;
}
.validation-summary-valid span {
    display: none;
}

footer {
        position: absolute;
        width:100%;

}

.form-group.required .control-label:after {
    color: #d00;
    content: "*";
    position: absolute;
    margin-left: 8px;
    font-size: 24px;
}
h3.summary-heading {
    padding-bottom: 1.5%;
}
label.add-phone-description, label.add-address-description, label.add-email-description {
    border: 0px transparent;
    border-image-width: 0px;
    outline: none;
}
button.addPhoneBtn.valid, button.addAddressBtn.valid {
    border: none;
    background-color: transparent;
    outline: none;
}
button.delete-phone, button.delete-address, button.delete-email {
    float: right;
    border: none;
    margin-top: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
}
    button.delete-phone:focus, button.delete-address:focus, button.delete-email:focus {
        outline: none;
    }
div .delete-container {
    display: block;
    margin-bottom: 2%;
    font-size: 2em;
}
button#add-phone > *:hover, button#add-address > *:hover, button#add-email > *:hover {
    cursor: pointer;
}
button.delete-phone > svg, button.delete-address > svg, button.delete-email > svg {
    display: block;
}

/* Add and Delete Address css*/
label.add-address-description {
    border: 0px transparent;
    border-image-width: 0px;
    outline: none;
}

button.addAddressBtn.valid {
    border: none;
    background-color: transparent;
    outline: none;
}

button.addEmailBtn.valid {
    border: none;
    background-color: transparent;
    outline: none;
}
label.add-email-description {
    border: 0px transparent;
    border-image-width: 0px;
    outline: none;
}

div.tip {
    display: inline-block;
    margin-top: 5px;
    width: calc(100% - 42px);
}
div.delete-tip {
    font-size: large;
    text-align: center;
}

div.delete-tip:before {
        content: "*";
        color: red;
}