/* ====================PSYCH-SPECIFIC STYLES ONLY==================== */


/* ==========BANNER=========== 
==== MENU TOGGLE - HOMEPAGE ONLY */

#banner .menu a {
	color: white;
	}

#banner .menu a:hover {
    color: #c0f115;
    }

#banner ul.description {
    padding: 0 0 5px 0;
    }

#banner .description li {
    padding: 4px 0;
    }

#banner .toggle {
    padding: 7px 5px 7px 12px;
    margin-top: 20px;
    margin-bottom: 0px;
	font-size: 16px; font-size: 1rem;
	position: relative;
    }

#banner p.toggle:hover {
    color: #c0f115;
    }

/*give submenu items a bkgd opacity wo. affecting text opacity*/

#banner .toggle::after {
    content: "";
    background-color: #1772c3;
    opacity: 0.8;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -200;   
    font-family: 'FontAwesome';
    font-size: 20px; font-size: 1.25rem;
	text-align: right;
	padding: 7px 5px;
  	}

#banner .toggle.opened:after {
    content: "\f056";
    color: #cde7ff;
    }

#banner .toggle.closed:after {
    content: "\f055";
    color: #66ccff;
    }

#banner ul.description {
    list-style-type: none;
    padding-left: 12px;
    position: relative;
    display: block;
    margin-bottom: 10px;
    font-size: 13px; font-size: 0.8125rem;
    z-index: 750;   
    }

#banner .menu ul.description li {
    margin: 0;
    }

/*give submenu items a bkgd opacity wo. affecting text opacity*/

#banner .menu ul.description::after {
    content: "";
    background-color: #3fa4fe;
    opacity: 0.7;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
    }

/* instructions on opacity bg wo effecting text on top:
1. parent div has to have position: relative
2. child div with opacity bg has to have position: absolute, opacity, content, z-index;
3. outer most parent div has to have z-index
*/

#callout {
    float: right;
    padding: 15px 30px 5px 30px;
    margin-top: 235px;
	margin-bottom: 40px;
    }

#callout::after { 
    background-color: #034077;
    opacity: 0.8;
    }

#callout a:hover {
    color: #3fa4fe;
    }

#callout p:last-child {
    color: #cde7ff;
    }

#callout .title {
	margin: 0;
    text-transform: capitalize;
    font-size: 26px;
    font-family: 'Noto Sans', sans-serif;
	color: white;
    }

/* === READ MORE === */

.more {
    position: relative;
    background: #cde7ff;
    padding: 5px 10px;
    display: inline;
    z-index: 50;
    font-style: italic;
    font-weight: 600;
    }

.more:hover {
    color: #1772c3;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
    cursor: pointer;
    }

a.read-more {
    color: #1772c3;
    font-style: italic;
	}

a.read-more:hover {
	color: #66ccff;
	}

/*caret on hover*/

.more:before  {
    content: '';
    position: absolute;
    left: 100%;
    top: 30%;
    display: block; 
    border-left: 6px solid #cde7ff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    }

/* slide out */

.slideout {
    position: absolute;
	margin-top: -36px;
    margin-left: 92px;
    background: #3fa4fe;
    padding: 4px 9px 5px 12px;
	/* Commented out in case it needs to be added back since the above change broke the elegant slideout*/
    /*margin-top: -27px;
    margin-left: 92px;
    background: #3fa4fe;
    padding: 0px 12px 1px 12px;*/
    list-style-type: none;
    z-index: 2;
    }

.slideout a {
    color: white; 
    }

.slideout a:hover {
    color: #c0f115; 
    }

.slideout li {
    display: inline;
    border-left: 1px solid #FFF;
    padding: 0 8px;
    font-size: 12px;
    }

.slideout li:first-child {
    border: none;
    }

table img {
	max-width: inherit;
	}

main .top a.scroll,  main .top a.scroll:visited {
    color: white;
	}	

main .top {
	-ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
	}

.news .unit p a {
	color: #fb8247;
	}

.news .unit p a:hover {
	color: #df3f1a;
	}

.news p {
    margin: 10px 0;
	}

.news ul {
    margin: 0 0 0 30px;
	}

.news ul li a {
	color: #fb8247;
	}

.news ul li a:hover {
	color: #df3f1a;
	}


/* sitemap */

ul.sitemap {
	columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
	}
/*
iframe[name='faculty-list'] {
    height: 1600px;
}*/


.event-item {
    margin-bottom: 25px;
}

.event-item p {
    margin: 0;
}

p.more {
    margin: 10px 0 0 0;
    display: inline-block;
}

p.more a {
    color: #083258;
}

p.more a:hover {
    color: #1772c3;
}


/* links https://cmsdev1.pmacs.upenn.edu/psychiatry/collaborations.html */

main a {
    color: #3678c2;
}

main a:hover {
    color: #74000e;
}

/* Subpage */

/* Breadcrumb  https://cmsdev1.pmacs.upenn.edu/psychiatry/history.html */

/* Figcaption https://cmsdev1.pmacs.upenn.edu/psychiatry/history.html */

/* Back to top  https://cmsdev1.pmacs.upenn.edu/psychiatry/history.html */




/*  MEDIA QUERIES 
==================================================*/

/*============= IPAD PORTRAIT ====================*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

    /* === READ MORE === */

    .more {
        font-size: 12px;
        padding: 5px 5px 6px 5px;
        }

    .more:hover {
        color: #1772c3;
        -ms-transition: .3s;
        -moz-transition: .3s;
        -webkit-transition: .3s;
        transition: .3s;
        cursor: pointer;
        }

    /*caret on hover*/

    .more:before  {
        content: '';
        position: absolute;
        left: 100%;
        top: 30%;
        display: block; 
        border-left: 6px solid #cde7ff;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        }

    /* slide out */

    .slideout {
        margin-left: 77px;
        }

    .slideout li {
        padding: 0 4px;
        font-size: 10px;
        line-height: 18px;
        }

    .slideout li:first-child {
        border: none;
        }

}

/*======================= IPAD MINI =======================*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  {

    #callout {
        padding: 15px 30px 5px 30px;
        margin-top: 260px;
        }

}

/*  #MOBILE
=================================================== */
@media only screen and (max-width: 767px) { 
        
        .home #banner {
            padding-top: 10px;
            height: 100%;
            }
       
        #banner .menu, #banner .unit.two-thirds {
            padding: 10px;
            }
        
        #banner .toggle {
            margin-top: 10px;
            }
        
        #banner ul.description {
            margin-bottom: 0px;
            }
        
        #callout {
            width: 100%;
            margin-top: 0px;
            z-index: 700;
            padding: 0px;
            float: none;
            }
        
        #callout .title {
            padding: 15px 15px 5px 15px;
            }
        
        #callout p {
            padding: 0px 15px 15px 15px;
            line-height: 20px;
            }
        
        #banner .grid .unit {
            float: none;
            }

        /* read more - slide out*/
        
        .slideout {
            position: relative;
            margin-top: -32px;
            margin-left: 92px;
            margin-bottom: 0;
            background: #3fa4fe;
            padding: 0px 12px 1px 12px;
            list-style-type: none;
            z-index: 2;
            }
        
        .slideout li {
            display: block;
            border-left: none;
            border-top: 1px solid #CCE0F3;
            line-height: 18px;
            padding: 5px;
            margin: 5px 0 0 0;
            }
        
        .slideout li:first-child {
            padding-top: 7px;
            }

        /* home news 3 columns */
        
        .news.grid .unit > .unit {
            padding: 0;
            }
        
        .grid.news .unit.whole {
            padding: 10px 20px;
            }
        
        .news hr {
            margin-top: 0;
            }

		ul.sitemap {
			columns: 2;
    		-webkit-columns: 2;
    		-moz-columns: 2;
			}
        
    }

@media screen and (max-width: 568px) {

	.whole aside.one-quarter {
    	padding: 0;
	}

	ul.sitemap {
			columns: 1;
    		-webkit-columns: 1;
    		-moz-columns: 1;
			}

}

/*======================= IPHONE 6 PLUS =======================*/
/* iPhone 6 Plus Landscape */
    @media only screen
    and (min-device-width : 414px)
    and (max-device-width : 736px)
    and (orientation : landscape) {
                
        #banner .grid .unit {
            float: left;
            }
        
        #banner #callout {
            margin-top: 65px;
            }

    }