/* This file contains BASE & LAYOUT styling necessary for functional website without any styling */
/*

This file is structured according to SMACSS approach.
See http://smacss.com/book/categorizing

All styles are on top of lib/bootstrap.css
*/

/* IMPORTANT: By mobile-first approach, phone view sets the base. If required, phone styles can be redefined for larger screen sizes below.*/


/* BASE */

.html, body {
  position: relative;
  height: auto;
}

label:after, fieldset.accessibility legend:after, .labelContent:after, .addressType:after, .telephoneType:after, .shoppingCartLabel:after, .labelWithColon:after, .bundleSectionLabel:after, .readonlyFieldLabel:after {
  content: ":"; 
}

.ms-drop ul > li label:after,
#appInstanceApplicationContent .labelContent:after,
#appInstanceApplicationContent label:after,
#appInstanceApplicationContent fieldset.accessibility legend:after,
#paymentMarketingQuestionContainer .labelContent:after,
#paymentMarketingQuestionContainer label:after,
#paymentMarketingQuestionContainer fieldset.accessibility legend:after,
#requestInformationMarkettingQuestions .labelContent:after,
#requestInformationMarkettingQuestions label:after,
#requestInformationMarkettingQuestions fieldset.accessibility legend:after,
.checkbox span.labelContent:after,
.checkbox label:after, .checkbox label.labelContent:after, .radio label:after, .radio label.labelContent:after, 
.noColonLabel:after, .noColonLabel .labelContent:after, fieldset.accessibility legend.noColonLabel:after {
  content: ""; 
}

.labelWithSeparator:after {
  content: " | "; 
}

#appInstanceApplicationContent .requiredFieldLabel:after,
#appInstanceApplicationContent fieldset.accessibility legend.requiredFieldLabel:after,
#appInstanceApplicationContent .checkbox label.requiredFieldLabel:after,
#appInstanceApplicationContent .radio label.requiredFieldLabel:after,
#paymentMarketingQuestionContainer .requiredFieldLabel:after,
#paymentMarketingQuestionContainer fieldset.accessibility legend.requiredFieldLabel:after,
#paymentMarketingQuestionContainer .checkbox label.requiredFieldLabel:after,
#paymentMarketingQuestionContainer .radio label.requiredFieldLabel:after,
#requestInformationMarkettingQuestions .requiredFieldLabel:after,
#requestInformationMarkettingQuestions fieldset.accessibility legend.requiredFieldLabel:after,
#requestInformationMarkettingQuestions .checkbox label.requiredFieldLabel:after,
#requestInformationMarkettingQuestions .radio label.requiredFieldLabel:after,
.requiredFieldLabel:after, fieldset.accessibility legend.requiredFieldLabel:after, .checkbox label.requiredFieldLabel:after, .radio label.requiredFieldLabel:after {
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #B5231D; 
    content: "\2a";
    font-size: 8px;
    vertical-align: 5px;
}

/* Used to allow a column to wrap on a responsive table */
.table-responsive > .table > tbody > tr > td.wrappedCol,
.table-responsive > .table > thead > tr > th.wrappedCol {
	white-space: normal;
}

/* This class is used to negate the .requiredFieldLabel when we need to remove the required label dynamically in JS.  Simply removing the .requiredFieldLabel class from the label will result in double colons. */
.noRequiredFieldLabel::after {
    content:"" !important;
}

#shoppingCartContent label:after {
    content: "";
}

a .help-block:before {
    content: ">>";
}

/* IE x button on text inputs fires no event, resulting in sub-optimal behaviour to the typeahead widget.  Suppress the x button */
input[type=text].typeahead::-ms-clear {
  display: none;
}

/* LAYOUT */
.externalPaymentIFrame {
    width: 100%; 
    height: 800px;
}

#externalPaymentWindow.CyberSourceSAPaymentProcessorManager {
    height: 1390px;
    overflow-y: scroll;
}

#externalPaymentWindow.CyberSourceSASOPPaymentProcessorManager {
    height: 350px;
    overflow-y: scroll;
    border: none;
}

/* MODULE */

.readOnlyFormValue {
    display: block;
}

#studentMenu.affix, .scrollSpyMenu.affix {
    position: fixed;
    top: 0;    
    width: inherit;
}

#studentMenu.affix-bottom, .scrollSpyMenu.affix-bottom {
    position: fixed;    
    width: inherit;
}

.portalMenu .nav .nav {
    margin-left: 10px;
}

.desktopPopupDialog {
    display: none;
}

.mobilePopupDialog {
    display: inline;
}

.feeDescriptionContainer {
    display: inline;
}

.modal img { 
    display: block;
    max-width: 100%;
    height: auto;
}


.conferenceModule .customizableBlockContainer img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* This is for spinning the "loading" icon */
.spin {
    -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    font-size: 30px; 
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
  }
  to {
      -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
  }
  to {
      -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

#ajaxLoadingModal .modal-dialog {
    width: 90%;
    height: 90%;
    color: #C0C0C0;
    font-size: 40pt;
}

#ajaxLoadingModal .modal-content {
    height: 100%;
    background-color: transparent;
    border: initial;
    box-shadow: none;
}

#ajaxLoadingModal .modal-content .loadingIndicatorWrapper {
    margin-top: 25%;
}

#ajaxLoadingModal .modal-content .loadingIndicatorWrapper .spin {
    font-size: 40pt;
}
/* End - spinning the "loading" icon */

.tableGridContainer ul.nav li {
    float: right;
}

.tableGridTabPaneList table>tbody>tr,
.tableGridTabPaneList table>tbody>tr>td {
    border: none;
}

.tableGridTabPaneGrid ul {
    padding-left: 0;
    list-style: none;
    position: relative;
    margin-left: -15px;
}

.tableGridTabPaneGrid ul li {
    float: left;
    width: 25%;
    padding-left: 15px;
    margin-bottom: 30px;
    position: relative;
}

.tableGridTabPaneGrid .hiddenOnTabPaneGrid {
    display: none;
}

.catalogSearchResults .tableGridTabPaneList .featuredImage {
    float:left;
    width: 135px;
    height: 75px;
    margin-right: 10px;
}

.catalogSearchResults .tableGridTabPaneGrid .featuredImage {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.catalogSearchResults .tableGridTabPaneGrid .featuredImage.noImage {
    height: 50%;
}

.catalogSearchResults .courseName,
.catalogSearchResults .certificateName {
    display: block;
}

.catalogSearchResults .courseCode,
.catalogSearchResults .courseDescription,
.catalogSearchResults .courseCampuses,
.catalogSearchResults .courseDelivery {
    display: block;
}

.catalogSearchResults .tableGridTabPaneGrid .courseAvailability {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
}

.studentEnrollmentHistory .featuredImage {
    display: block;
    float:left;
    margin-right: 10px;
    width: 135px;
    height: 75px;
}

.studentEnrollmentHistory .courseName {
    display: block;
}

.academicHistoryRequest .courseName {
    display: block;
}

.academicHistoryRequest.transfer .courseName {
    text-align: inherit;
}

#paymentInfoContainer span {
    display: block;
}

/* This is to make video responsive */
.featuredVideo .video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.featuredVideo .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.featuredVideo .video video {
    width: 100%    !important;
    height: auto   !important;
}

.featuredVideo .video object,
.featuredVideo .video embed  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sectionMaterial .element:after {
    content: ",";
}

.sectionMaterial .element:last-of-type:after {
    content: "";
}

.sectionMaterial .materialIsbn .elementLabel:after {
    content: ":";
}

.catalog .panel table .indent1 {
    margin-left: 20px;
}

.catalog .panel table .indent2 {
    margin-left: 40px;
}

.catalog .panel table .indent3 {
    margin-left: 60px;
}

.catalog .panel table .indent4 {
    margin-left: 80px;
}

#personProfileExistingAddresses .addressType, #personProfileExistingTelephones .telephoneType,
#personProfileExistingAddresses .address, #personProfileExistingTelephones .telephone, #personProfileExistingEmails .email {
    padding-right: 5px;
}

#formLoginExistingEmbedded > .buttons,
#formLoginExistingEmbedded.form-inline > .form-group {
    display: inline-block;
    vertical-align: middle;
}

#formLoginExistingEmbedded > .retrieveCredentialsLinksContainer {
    display: inline-block;
}

#personProfileMainContent .panel-heading, .clickableDiv {
    cursor: pointer;
}

.modalWithoutHeader {
    border-bottom-style: none;
}

#pageEmailCourseInfo #courseProfileJumpToSections,
#pageEmailCourseInfo #courseProfileSections #sectionEnrollmentHeader,
#pageRemindMe #courseProfileJumpToSections,
#pageRemindMe #courseProfileSections #sectionEnrollmentHeader,
#pageStudentEnrolledCourseProfile #courseProfileSections #sectionEnrollmentHeader,
#pageInstructorAssignedCourseProfile #courseProfileSections #sectionEnrollmentHeader,
#pageStudentEnrolledCourseProfile #courseProfileSections #courseApplication,
#pageInstructorAssignedCourseProfile #courseProfileSections #courseApplication{
    display: none;
}

table.sectionDeliveryOptions,
table.sectionTuitionProfiles,
table.sectionSpecialRequests {
    width: 100%;
}

table.sectionDeliveryOptions .sectionDeliveryOptionName,
table.sectionTuitionProfiles .tuitionProfileName,
table.sectionSpecialRequests .specialRequestName{
    width: 55%;
}

table.sectionDeliveryOptions .sectionDeliveryOptionFee,
table.sectionTuitionProfiles .tuitionProfileFees,
table.sectionSpecialRequests .specialRequestFees {
    width: 25%;
}

table.sectionTuitionProfiles .tuitionProfileRestrictions,
table.sectionSpecialRequests .specialRequestMandatory{
    width: 25%;
}

.hiddenHook {
    display: none;
}

.panel table.table-striped {
    margin-bottom: 0;
}

.poweredByDestinyOneWrapper {
    min-height: 50px;
}

.poweredByDestinyOne {
    position: absolute;
    bottom: 0;
    left: 15px;    
}

.poweredByDestinyOne img {
    height: 50px;
}

#pageHeader h1 .section {
    display: block;
}

/* Ensures that a minimum of 2 characters show on the select */
#portalInstructorAttendanceDetailsTable select.attendanceStatusSelect {
    min-width: 65px;
}

.oneceBookbird {
  background: no-repeat url("../../images/header/book_bird_logo.png") 5px 0px;
  width: 50px;
  height: 28px;
  float: left;
}

.headerTextInfo {
  line-height: 34px;
}

#selectMembersContainer input[type="radio"], #selectMembersContainer input[type="checkbox"] {
  opacity: 1;
}

#memberProfileContainer #preferredContactTimeContainer {
	display: none;
}

.cellMemberEmail {
    word-wrap: break-word;
    word-break: break-all;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#logoutLinkWrapper:before, .conferenceLogoutButtonWrapper:before {
  content: "| ";
}

#loginNameWrapper {
  float: left;
  width: 65%;
}

#logoutLinkWrapper {
  float: left;
  width: auto;
  max-width: 35%;
  padding-right: 5px;
  padding-left: 2px;
}

.soldOutLabel {
	color:#b5201e;
	font-style:italic;
}

.confAmount {
  font-weight: bold;
}

.total {
  font-weight: bold;
}

.amountCol {
    text-align: right;
}


/* Conference Branding */

.overlayAlert {
    display: none;  
    position: fixed;
    left:50%;
    top:0px;
    z-index:2;
    width: 500px;
    margin-left:-250px;
    text-align: center;
}

.customizationMode .customizableBlockContainer:hover {
    border: 1px solid #C0C0C0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;    
}

.customizableBlockContainer {
    border: 1px solid transparent;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;    
}

.customizableBlockHelpText {
    background-color:  #C0C0C0;
    z-index:2;
    padding: 5px;    
}

.timeDisplay {
    white-space: nowrap;
}

.customizableButtonLabelContainer {
    cursor:text;  
}

.form-group .customizableMessageContainer, .customizableButtonLabelContainer {
    display: inline-block;
}

.customizableButtonLabelContainer .glyphicon:before {
    padding-left: 10px;
}

.customizableBlockHelpText {
    font-size: 10pt;
    font-weight: 400;
}

/* End conference Branding */

.shippingAddress:after {
  content: ")"; 
}

.shippingAddress:before {
  content: "("; 
}

.testLicenseWatermark {
  background-image:url("../../../../images/testlicense_watermark.png");
  background-repeat: repeat-y;
  background-position: center; 
}


/* Breakpoints:
xs: < 768px
sm: < 992px
md: < 1200px
lg: 1200px+
These values should always match Bootstrap edges or responsive behaviour is unpredictable.
 */

/* Extra small devices ONLY, up to 767px */
@media ( max-width : 767px) {
  p {
        word-wrap:break-word;  
  }

  .btn-default {
      white-space: normal;
  }

  .catalogSearchResults.tableResponsive {
      border: none;
  }

  .studentEnrollmentHistory .table-responsive .courseTitle {
      white-space: normal;
  }

  .tableGridContainer .nav {
      display: none;
  }

  .tableGridContainer .tab-content>.active {
      display: block;
      visibility: visible;
  }
  .tableGridTabPaneGrid ul li {
      float: none;
      display: block;
      width: 100%;
  }

  .footer2 .poweredByDestinyOne {
    position: inherit;
    margin-top: 5px;
    text-align: center;
  }

  #buttonAddCapMember {
    width: 100%;
  }

}
/* Small devices and larger (tablets, 768px and up) */
@media ( min-width : 768px) {
    .mobilePopupDialog,.mobilePopupDialog .help-block {
        display: none;
 }
 .desktopPopupDialog {
     display: inline;
 }
}
/* Small devices ONLY (768px - 991px)*/
@media ( min-width : 768px) and (max-width: 991px) {
    .tableGridTabPaneGrid ul li {
        float: left;
        width: 50%;
        padding-left: 15px;
        margin-bottom: 30px;
        position: relative;
    }

    #buttonAddCapMember {
      width: 100%;
    }

}
/* Medium devices and larger (desktops, 992px and up) */
@media ( min-width : 992px) {

    .displayOnLargeDevice {
        display: block;
  }

}
/* Medium devices ONLY */
@media ( min-width : 992px) and (max-width: 1199px) {

    .sr-only-md {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
}

}
/* Large devices and above (large desktops, 1200px and up) */
@media ( min-width : 1200px) {

    .sr-only-lg {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

}

/* Printer-friendly CSS */
@media print {
    /* Global printing settings */
    .quickSearch,
    .cartInfo,
    .loginInfo,
    .headerCarousel,
    .newsletter {
        display: none;
    }

    /* Course profile page */
    .courseProfileActions,
    #courseSectionsAccordion .panel-heading .panelHeaderIcon,
    .courseSectionEnrollmentActions,
    #courseProfileFeaturedVideo,
    #courseProfileSections .sectionHeader{
        display: none;
    }

    #courseProfileJumpToSections {
        display: none !important;
    }

    #courseProfileSections {
        margin-top: 20px;
    }

    #courseSectionsAccordion .panel .panel-collapse.collapse { /*unfold all sections*/
        display: block;
        height: auto;
    }

    .poweredByDestinyOne {
        position: relative;
        display: block;
        text-align: center;
    }
    
    #pageConferenceSelectedSessionPrint .container {
        border: none;
    }
    
    
    .sessionSelectionTable a[href]:after {
        display:none; 
    }
}