/* Extra Styles */

/* Homepage: alert, tiles, news, social and events */

.collegeAlert, .deptAlert {
    background-color: #ccc;
    padding: 10px 0;
}

aside {
    background-color: #ccc;
    border: 2px solid #000; 
    font-size: 1.1rem; 
    margin: 10px 0; 
    padding: 10px;
}

.collegeContent {
    padding: 50px 0 40px 0;
}

.collegeNews {
    padding: 30px 0;
    background-color: #f3f3f3;
}

.news-events-btn, .news-events-btn a:link {
    border-radius: 0;
    border: 2px solid #8E6F3E;
    background-color: #8E6F3E;
    text-decoration: none !important;
    text-align: center;
}

.news-events-btn:hover, .news-events-btn a:active, .btn.active {
    background-color: #fff;
    color: #000;
    text-decoration: none;
    box-shadow: none;
    border-color: #8E6F3E;
}

.socialEvents {
    margin: 2rem 0;
}

.social-header {
    color: #555960;
    text-transform: uppercase; 
}

/* Instagram */

.gridpost-author-text span, .gridpost-author-timestamp span {
    text-shadow: none !important;
}

#collectionHolder {
    display: none !important;
}

.router_edit #collectionHolder {
    display: block !important;
}

.post-type-icon, .classic_v3PaginationView, .paginate-button-holder, .nextPost {
    height: 0;
    display: none !important;
    visibility: hidden;
}

/* Area underneath Instagram */

.follow {
    margin-bottom: 1rem;
}

.social-description {
    display: block;
    padding-top: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
}

@media (min-width: 768px) and (max-width: 991px) {

    .social_description {
        float: none;
        max-width: 100%;
        margin-bottom: .625rem !important;
        font-size: 1.625rem
    }
    
}

@media (max-width: 767px) {
    
    .social_description {
        float: none;
        max-width: 100%;
        margin-bottom: .9375rem !important;
        font-size: 1.375rem
    }

}

.event {
    padding: 10px 0;
}

#eventListing {
    margin-bottom: 1rem;
}

.event-bar {
    content: '';
	position: absolute;
	top: .25908rem;
	bottom: .25908rem;
	left: -1.55449rem;
	display: block;
	width: .77724rem;
	background-color: #c28e0e;
}

.event-title {
	font-size: 1.4rem;
}

.event-title p {
    padding-bottom: 0;
}

.event-detail {
	font-size: 1.125rem;
	display: inline-block;
	padding: 0;
	text-transform: initial;
}

/* Audience - Partial Layout */

.introContainer {
    background-position: top center;
}

.introContainer .shader {
    opacity: 0.7;
}

.introContainer .intro h1 {
    font-family: United Sans Condensed;
    font-style: normal;
    text-transform: initial;
}

.introContainer .intro .divider {
    display: none;
}

    @media (min-width: 768px) {
        .introContainer {
            padding-top: 200px;
        }
    }

.info-background {
    padding: 50px 0;
}

.info-background h2 {
    color: #000;
    font-family: United Sans Condensed;
    font-size: 2.5em;
    text-align: center;
}

.info-background p {
    font-size: 1.2em;
}


/* Sidenavigation - include in left nav */

.sidenav ul li.title {
    text-align:center;
    background-color:#555960;
    text-transform: uppercase;
    color: #fff;
}

.sidenav ul li.title a {
    background-color: #555960;
    color: inherit;
    border-left: none;
}

/* Related Links */

.relatedLinks {
    width: 33%;
    float: right;
    padding: 10px;
    margin: 0 0 10px 10px;
    background-color: #cfb991;
    border-radius: 10px;
    word-wrap: break-word;
}

@media (max-width: 767px) {
    
    .relatedLinks {
        width: initial;
        float: none;
        margin: 0;
    }

}

/* Related Links for Resources/Facilities pages */

.relatedLabs {
    width: 20%;
    float: right;
    padding: 10px;
    margin: 0 0 10px 10px;
    background-color: #cfb991 !important;
    border-radius: 10px;
    line-height: 1.6em;
}

@media (max-width: 767px) {
    
    .relatedLabs {
        width: initial;
        float: none;
        margin: 0;
    }

}

/* Internships section */

.columnContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.columnBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex: 1 1 200px;
}

.box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.participant {
    border: 1px solid #000;
    float: right;
    margin: 0 0 10px 10px;
}

/* Last Updated */

#lastupdate {
    text-align: right;
    color: #333;
    margin-top: 1em;
}

/* Other styles */

figure, figcaption {
    margin: 0 0 1rem;
}

.figure {
    display:inline-block;
    border: 1px solid #000;
}

.figure-caption {
    font-size: 90%;
    color: #636c72;
    padding:10px;
}

/* Dropdown panels for Research and CODO pages */

.areas .panel {
    background-color: white;
    border: 1px solid #444;
    margin: 15px 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
}

.areas .panel-heading.active, .research .panel-heading:hover {
    background-color: #ddd;
}

.areas h2.panel-title, .areas h3.panel-title {
    color: #8E6F3E;
    cursor: pointer;
    font-size: 20px; 
    font-weight:bold;
    padding: 5px 5px 5px 0;
    width: 100%; 
}

.areas .panel-title a:after {
    color: #6F727B;
    content: "\2796"; 
    float: right;
    font-size: 1em;
    margin-left: 5px;
}

.areas .panel-title a.collapsed:after {
    content: '\02795';
}

.areas .panel.show {
    max-height: none;
    opacity: 1;
}

pre {
    margin: 1.5em 0;
    white-space: pre;
    border: 1px solid #ddd;
}

pre, code, tt {
    font: 1em 'andale mono','lucida console',monospace;
    line-height: 1.5;
}

/* People Directory styling */

#directoryview {
    display: block;
    float: right;
    color: #5B6870;
    text-decoration: none;
}

#directoryview:hover {cursor: pointer;}

.areaindex .list-group-item:hover {
    color: #000;
    background-color: #90BCD9;
}

.area {width: 345px;}

.photoboard {display: none;}

.biophoto {
    float: right;
    margin-bottom: 1em;
}

/* Print stylesheet */

@media print {
    .navbar {
        display: none;
    }
    
    .breadcrumb {
        display: none;
    }
    
    .footer {
        display: none;
    }
    
    .maincontent {
        font: 12pt Georgia, "Times New Roman", Times, serif !important;
        line-height: 1.3;
        margin: 0;
        padding: 0;
        float: none !important;
        width: 100%;
    }
    
    .logo {
        width: 100%;
    }
    
    .top a:after {
        display: none;
    }
    
    .logo img {
        display: none;
    }
    
    .logo:after {
        content: "Purdue Department of Computer Science";
        font-size: 24pt;
        color: #000000;
        font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    
    .department {
        display: none;
    }
    
    img {
        /*min-width: 200px;*/
        max-width: 500px;
        border: 0;
    }
    
    h1 {
        font-size: 24pt !important;
    }
    
    p a {
        color: #000000;
        text-decoration: none !important;
    }
    
    ul li a {
        color: #000000;
        text-decoration: none !important;
    }
    
    .sidenav {
        display:none;
    }
    
    table {
        width: 100%;
        table-layout: auto;
        border: 0;
    }
    
    td {
        word-break: break-all;
        overflow: hidden;
    }
    
      
    /*a[href]:after {
        content: "";
    }
    
    a[href^="http://"]:after, a[href^="https://"]:after {
        content: " (" attr(href) ")" !important;
        font-size: 90%;
        word-wrap: break-word;
    }  */  
    
    /* videos */
    /* http://www.noupe.com/design/css-perfect-print-stylesheet-98272.html */
    iframe {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        line-height: 0pt !important;
        white-space: nowrap;
    }
    
    /* home page */
    .tiles {
        position: relative !important;
        page-break-before: always;
        overflow: auto;
        -webkit-region-break-before: always;
    }
    
    .tile {
        border-style: solid !important;
        border-width: medium !important;
        height: 100px !important;
        width: 100%;
        margin: 0;
        padding: 0;
    }
     
    .panel-body .spotlight {
        position: relative;
        margin-top: 10px;
    }
    
}