/* COLOR REFERENCE 

background: #fff
gray: #f5f1f2
light blue: #248dce
dark blue: #2C2C2C

*/

*{box-sizing: border-box;}  
*:after, *:before {
    font-family: 'font-family',san-serif;
    vertical-align: middle;
    font-size: 80%;
    
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'font-family',san-serif;
    speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


@media only screen and (min-width: 1em) {

    /* ===== fix normalize.css ==== */
    dd, dl {margin:0; padding: 0;}
    h1 {margin-top: 0;}

	/* ===== universal styles ===== */

	/*body {background: #3569A3;}*/
    body {background:  #F6F6F6;font-size: 90%;}
	p, ul, ol, dl, label, .label {/*font-family: "pt-serif";*/}
	ul, ol {list-style: square;}
	a, a:visited {color: #00396b;}
    a:focus {text-decoration: underline !important;}
	li {display: block;}
	h1, h2, h3, h4, h5, h6 {
		font-weight: normal; 
        font-size: 80%;
		letter-spacing: 0;
		margin: .35em 0;
	}
	h1 {font-size: 2em;}
	h2 {font-size: 1.7em;}
	h3 {font-size: 1.5em;}
	p {margin: 0 0 1em 0;}
	/*#content a:hover,*/ dl.portlet a:hover {color: #2C2C2C;}
	#content ul, #content ol {margin-bottom: 1em;}
	h1.title,
    h1.smalltitle {
        text-align: center;
        margin-top: 0;
        min-height: 5.5rem;
        padding-top: 1.35rem;}
	h1.documentFirstHeading, h2.tileHeadline {margin-bottom: 0;}
	#portal-breadcrumbs {font-size: .8em;}
    
    
    /* don't float images in mobile */
	img.image-right, 
	img.image-left {
		float: none;
		display: block;
		text-align: center;
	}
	
	.hide {height: .01em; position: absolute; margin-left: -9999px;}
	.show {height: auto; position: relative; margin-left: 0;}
	.large {font-size: 110%;}
	.bottom-nav-container nav a {margin: 0; padding: 0;}	
	.index-main-container {margin-top: 1em;}
	
	/* Accessibility Skip to Content*/
    
    #skiptocontent a{
        position: absolute; top: -2em; left: 0; z-index: 9999;
        background: transparent;
        -webkit-transition: top .1s ease-out, background .5s linear;
        transition: top .1s ease-out, background .5s linear;
        }
    #skiptocontent a:focus {
        position: absolute; top: 0; left: 0; z-index: 9999;
        background: #000099;
        padding: 1em;
        color: #FFF;
        display: block;
        border: solid #FFF;
        border-width: 0 0.125em 0.125em 0;
        border-bottom-right-radius: 8px;
        -webkit-transition: top .1s ease-in, background .5s linear;
        transition: top .1s ease-in, background .5s linear;
        }
    
    .main {/*background: #FFF;*/}
    #main-column,
    #index-main-column{
        background: #FFF;
        overflow:auto;
        padding: 1em;}
	
	#content {clear: none; font-size: 100%; margin:0;}

	#content .pullquote {
		font-weight: normal;
		font-size: 1.45em;
		letter-spacing: 0;
		font-style: italic;
		border-left: 3px solid #2C2C2C;
		padding-left: 0.5em;
		color: #2C2C2C;
	}
	
	/**** content well portlets fix ****/
	
	.managePortletsBelowTitleLink {clear: none;}
	
	/**** social media icons ****/

	a.twittericon {background: url("twitter.png") no-repeat; height: 2.25em; width: 2.25em;}
	a.facebookicon {background: url("facebook.png") no-repeat; height: 2.25em; width: 2.25em;}
	
    /**** searchbox ****/

    header #search {position: absolute; right:0; top: .75rem; z-index: 2;}
    
	/**** columns ****/
	
    #content {float: left; width: 100%;}
	.main #left-column, .main #right-column {display: none;}
    .main #left-column #right-column {margin: 0;}
	#bottom-menu #left-column, #bottom-menu #right-column {display: block; }
    .template-folder_contents #right-column {display: none;}
	
	/**** portlets ****/

	dl.portlet {font-size: 100%; background: none;}
	dl.portlet ul {list-style: none;}
	dl.portlet dt {background: transparent;}

	/**** editing ****/

	#edit-bar {position: relative; padding-top: 0; z-index: 500;}
	#edit-bar ul {margin: 0; padding:0;}
	#edit-bar ul li {display: inline;}
	.documentEditable #edit-bar {display: none;}
	ul.formTabs {background: #f5f1f2; padding: .5em;}
	ul.formTabs li {display: inline;}
	ul.formTabs li a {padding: .5em;}
	ul.formTabs li a:hover {background: #f5f1f2;}
    
    /**** Login Button and Menu ****/
    /*.footer-login{padding: .5em .75em;}*/
    #portal-personaltools {float:left;}
	#portal-personaltools-wrapper ul {margin: 0; padding: 0;}
	#portal-personaltools dd {margin-top: -10.6em;}
	#portal-personaltools,
	#portal-personaltools dl.actionMenu.activated dd ,
    #portal-personaltools .actionMenuContent{
		border-radius:.5em /.5em;
    	-webkit-border-radius:.5em /.5em;
		-moz-border-radius: .5em /.5em;
        background: #595858;
        color: #FFF;
	}
    #portal-personaltools a, #portal-personaltools a:hover {color: #FFF}
    #portal-personaltools .actionMenuContent a:hover {background: #A29E9E;}
    
	dl.portalMessage {clear: none;}
	.template-folder_contents #left-column {display: none;}
	.template-usergroup-userprefs .listing {font-size: .75em; line-height: 1.1em;}

	/**** site header ****/
	
    header.wrapper {position: relative;}
	#site-title {position: relative;}
    #site-title img {max-width: 100%;}
	#site-title h1.small-title {display:none;}
	
	/**** site navigation ****/

	nav#topnav {
	    display:block;
		text-align:center;
	    width: 100%;
		text-align: center;
        background: #D5D5D5;
	}

	nav#topnav ul {display: none;}
	nav#topnav div.small {display: inline;}
	nav#topnav.nav-collapsed {height: 2.5em; overflow: hidden;}
	nav#topnav li a, nav#topnav div.small a {
		background: none;
		padding: .6em .7em;
		margin: 0;
		width: auto;
        color: #2C2C2C;
	}
	nav#topnav div.small a {
        margin-right: 1em;
        display: block;
		height: 1.35em;
		text-align:right; 
		background: url("../img/menu-icon-blue.png") no-repeat center right;
	}
	
	nav#topnav li a:hover {
		text-decoration: none;
		color: #248dce;		
	}
	nav#topnav li.selected a {
		color: #0043e7;
	}
	

	/**** side navigation ****/
	
	dl.portletNavigationTree {
        background: #FFF;
        display: none;
        }
	dl.portletNavigationTree#site-navigation {display: block;}
	
	dl.portlet dt.portletHeader,
    dl.portlet .portletHeader.hiddenStructure + dd ul.navTree li.navTreeTopNode,
    dl.portlet .portletHeader.hiddenHeader + dd ul.navTree li.navTreeTopNode{
		text-transform: uppercase;
		padding: 1rem;
	}
	dl.portlet dt.portletHeader,
	dl.portlet dt.portletHeader a {
		color: #FFF; 
	}

	dl.portletNavigationTree ul.navTree {padding: 0; margin: 0;}
	dl.portlet ul.navTreeLevel0 > .navTreeItem {
		padding: 0;
		margin: 0;
		border: 0;
		line-height: 1.3em;
	}
	dl.portlet ul.navTree li a {
    	padding: .65em .25em .65em 1em;
	}
    dl.portlet ul.navTree li + li a {border-top: 0.0825rem dotted #2C2C2C;}
	dl.portlet ul.navTree li a:hover {
		background: #2C2C2C;
		color: #fff;
	}
    dl.portlet .portletHeader.hiddenStructure + dd ul.navTree li.navTreeTopNode a{padding: 0;}
    .portlet .navTree .navTreeCurrentItem {font-weight: bold;}
    /*Menu Sublevel Styles*/
    /* General Settings */
    .portlet .navTree .navTreeCurrentItem {
    background-color: transparent;}
    
    dl.portlet ul.navTree.navTreeLevel1 {
		padding: 0;
	}
    
    dl.portlet ul.navTree.navTreeLevel1 li.navTreeItem{
		padding: 0;
		line-height: 1.3em;
		margin: 0;
	}
    
    dl.portlet ul.navTree.navTreeLevel1 li.navTreeItem a{padding: .45rem 0.25rem .45rem 2rem;}
    dl.portlet ul.navTree.navTreeLevel1 li.navTreeItem + li a{border: 0; padding-left: 2rem;}

    
    /* Menu Colors*/
    dl.portlet ul.navTree.navTreeLevel0 > li.navTreeCurrentNode,
    dl.portlet ul.navTree.navTreeLevel0 > li.navTreeItemInPath{
        background: #DDD;}
    dl.portlet ul.navTree.navTreeLevel1 li.navTreeCurrentItem.navTreeCurrentNode  {background:transparent;font-weight: bold;}
    dl.portlet ul.navTreeLevel1{
        background: #cecece;}

	dl.portlet ul.navTree.navTreeLevel1 a.navTreeCurrentItem:hover {
		color: #fff;
	}
    dl.portlet ul.navTree.navTreeLevel2 {background: #A1A1A1;}
    dl.portlet ul.navTree.navTreeLevel3 li.navTreeItem{background: #717171;}
    dl.portlet ul.navTree.navTreeLevel3 li.navTreeItem a{color: #FFF}
        
    dl.portlet ul.navTree.navTreeLevel1  li.navTreeItemInPath{background: #BDBDBD;}
    /* Hides Navigation portlet's portletHeader if Top node included*/
    .portletHeader.hiddenHeader{position: absolute;visibility: hidden;}
    /* If no portletheader and top node include, make topnav look like portlet header */
    dl.portlet dt.portletHeader,
    dl.portlet .portletHeader.hiddenStructure + dd ul.navTree li.navTreeTopNode,
    dl.portlet .portletHeader.hiddenHeader + dd ul.navTree li.navTreeTopNode{background: #1E407C;}
    dl.portlet .portletHeader.hiddenStructure + dd ul.navTree li.navTreeTopNode + li > a,
    dl.portlet .portletHeader.hiddenHeader + dd ul.navTree li.navTreeTopNode + li > a {border:0;}
    
    dl.portlet dt.portletHeader a,
    dl.portlet .portletHeader.hiddenStructure + dd ul.navTree li.navTreeTopNode a,
    dl.portlet .portletHeader.hiddenHeader + dd ul.navTree li.navTreeTopNode a{
        background: transparent;
        color: #FFF;
        font-weight: bold;
        padding: 0;
        }
	
	
	/*** bottom menu ***/
	
	#bottom-menu a {text-align:left;}
	
	/**** directory ****/
	
	#content .facultyStaffDirectory {float: left; width: 100%;}
    /*#content .facultyStaffDirectory .standardView .classificationListing {overflow: hidden;}*/
	#content .facultyStaffDirectory ol.classificationList {display: none;}
	#content .facultyStaffDirectory .standardView .classificationListing h2 {background: #f5f1f2;}
	#content .facultyStaffDirectory .standardView .classificationListing h2 a {color: #2C2C2C; padding: .5em;}
	#content .facultyStaffDirectory #directory-photo {float: left;}
	#content .facultyStaffDirectory #directory-listing {margin-left: 7.5em;}
	#content .facultyStaffDirectory .listing,
    .template-listing_summary_view{padding: 1em 0; margin: 0;}
	#content .facultyStaffDirectory .listing h3,
	#content .facultyStaffDirectory .listing p {margin: 0;}
	#hcard p, ul, ol {margin: 0; padding: 0;}
	#hcard .biography p {margin-bottom: 1em;}
	#hcard .headshot {float: right;}
	#hcard h2 {margin: 0.75em 0 0.15em;}
	
	
	/**** news and events ****/
	
	.template-newsitem_view #parent-fieldname-description {display: none;}
	.template-summary_view_event #content,
	.template-event_view #content,
	.template-all_content.section-news .item {float: left; width: 100%;}
	.template-all_content.section-news .item .description {display: none;}
    
    .newsImageContainer .discreet {background-color: #efefef;}
    
    .section-news .tileItem +.tileItem {border-top: 0.0825em solid #b5b5b5}
	
	#content .eventDetails {
		float: none; 
		width: 100%; 
		border: 0;
		border-left: 3px solid #2C2C2C; 
		color: #2C2C2C; 
		margin: 1em 0 10px 0; 
		padding: 0px 10px; 
		line-height: 1.5em;
	}
	#content .eventDetails p {margin: 0;}

	.portaltype-event #content .eventDetails p strong, 
	.portaltype-event #content .eventDetails p b,
	.portaltype-event #content .eventDetails a,
	.portaltype-event #content .eventDetails a:link,
	.portaltype-event #content .eventDetails a:visited {color: #2C2C2C;}
	.portaltype-event #content #parent-fieldname-description {display: none;}
	
	#viewlet-below-content #category {display: none;}

	.event-wrapper {border-top: 1px dashed #f5f1f2;}
	
	/*.template-summary_view_event .tileItem {
		margin: 1em 0;
		border-bottom: 0.0825rem dotted #2C2C2C;
	}*/
	#event-date-info {
		text-align: center; 
		font-size: 1.3em; 
		width: 6em; 
		float: left; 
		margin: 0 0 1em 0;
		line-height: 1.2em; 
		background: #f5f1f2;
		padding: .5em 0;
	} 
	
	#event-date-info p {margin:0; padding:0;}
	#event-date-info abbr {border: none;}
	
	#event-text {
		margin: 0 0 1em 9em;
	}
	textarea#event-text {margin-left: 0}
	
	/**** twitter box ****/
	
	dl.portletTwitter dd.portletItem {
		padding: 0 0 0 1em;
		background: none;
	}
	
	dl.portletTwitter .portletFooter {
		text-align: center;
		background: #eee;
		padding-top: .1em;
	}
	
	a.twitterfooter {
		background: #009;
		color: #fff;
		display: inline-block;
		padding: .3em 1em;
		font-size: .9em;
	}
	
	a.twitterfooter:hover span.text,
	a.twitterfooter span.text:hover {
		color: #fff;
	}
	
	a.twitterfooter span.twitterbird {
		background: url("twitter-bird-white.png");
		background-size: 130%;
		display: inline-block;
		height: 1.3em; width:1.3em;
		margin-right: 0.5em;
	}
	a.twitterfooter span.text {line-height: 1.3em;}
	a.twitterfooter {padding: .05em 1em .3em;}
	


	/**** footer****/

	.footer-container footer {
		background: #f5f1f2;
		width: 90%;
		margin: 1em auto 0;
		padding: 1em 0;
	}
	footer p {
		padding: 0 1em;	
	}
    
    footer img#cla-logo {
        float: right;
        margin-right: 2em;
        margin-left: .5em;
    }
    
    .header-content #header-extras {margin-left: 14em;} 
    
    #portlets-below-content #portlet-success-stories .portletItem {
        overflow: auto;
        padding: .7em;
        width: 350px;
        float: left;
        background: white;
        height: 290px;
        border: black;
        border-style: solid;
        border-width: 1px;
        margin: 5px;
    }
    
    #portlets-below-content #portlet-success-stories .portletItem img{
        float: left;
        margin: 0 1em 4em 0;
        max-width: 130px;
        height: auto;
        border: none;
    }
    
    #portlets-below-content #portlet-success-stories .portletFooter {
        display: none;
    }
    
}

/* =====  breakpoint ===== */

@media only screen and (min-width: 34em) {
    
   .header-content #header-extras {margin-left: 3em;}
	
	#searchGadget {
		width: 12em;
	}

	img.image-right {float: right;} 
	img.image-left {float: left;}
}


/* =====  breakpoint ===== */
@media only screen and (min-width: 44em) {
	
	/**** site header ****/
	
    body {font-size: 100%;}
    
	nav#topnav {
		padding-bottom: 0;
	}
	nav#topnav ul {display: block;}
	nav#topnav div.small {display: none; }
	
    .main #left-column, .main #right-column {display: block; width: 14em;}
    #bottom-menu #left-column {display: none;}
	.main #left-column {
		float: left;
		margin: 0 1.5em 1em 0;
	}
    .main #right-column {
    	float: none;
		margin: 0 0 1em 1.5em;
	}

	#main-column.hasleftcol {margin-left: 16em;}

	dl.portlet dd.portletItem.hide {height: auto; position: relative; margin-left: inherit;}
	dl.portletNavigationTree {display: block;}
	
	#botnav {display: none;}
	
	/* ===== IE Fixes ===== */

	nav#topnav ul li {display: inline-block;}
	.oldie nav#topnav a {margin: 0 0.7%;}
    
}

/* ===== breakpoint ===== */

@media only screen and (min-width: 55em) {
    #right-column {float: right;}
	.main #right-column {
        float: right;
	}
}

/* ===== breakpoint ===== */

@media only screen and (min-width: 61em) {	

    .wrapper,
    #footer-panels .panel .row{
        max-width: 70em;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 43.999em) {
        .row div.cell, .row div.cell,
        #container .row div.cell .portletWrapper{
        margin: 1em auto;
        width: auto;
        display: block;
        float: none;
        position: static;
    }
    div#psu-icon{
        position: relative;
        float: none;
        }
    #content .facultyStaffDirectory #directory-photo {
        display: block;
        float: none;
        }
    #content .facultyStaffDirectory #directory-listing {margin: auto;}
}

/* CSS hack-fix for forms QuickEdit display errors */
    .qefield {
        width: 100% !important;
        height: auto !important;
    }
    
    #pfgWidgetWrapper {
        position: relative !important;
    }