/* *********************************************/
/* Nonlinear Mobile Changes 
/* *********************************************/	

/**********************************/
/* New WETN Desktop Footer Layout 
/**********************************/
.wide-columns .callout img
{	
	width: auto;	
}
	

/* Fix for Safari where lead callout content was not spanning given space */
.home #lead-callouts div.inner
{
				width: 100%;
}

/* Set the width of the left hand footer information */
aside.center.vcard
{
				width: 200px;
				margin-left: 20px;
}

.sec-layout aside.vcard 
{
				margin-right: 20px;	
}

/* Put a top border on the first child */
aside.center.vcard .nav.links li:first-child
{
				border-top: 1px solid #306EA9;
}

/* Remove the float from the WETN links so they stack up nicely */
aside.center.vcard .nav.links li
{
				float: none;
				border-bottom: 1px solid #306EA9;
				padding: 6px 10px 6px 18px;
}

/* Remove the extra padding around the left hand footer anchor tags */
.sec-layout footer .center .nav.links a, .sec-layout footer .center .nav.links a:active, .sec-layout footer .center .nav.links a:visited
{
				padding: 0px;
}	

/* For Meet Your Counselor table we want to force 650px width */
/* even though it is in a content area of 475px */
table.full-width
{
				width: 650px;
}

footer nav li.graduate-school
{
				display: none;
}

nav.main li h6 span,
footer nav li h6 span
{
				display: none;
}

.directory .pagination .nav li
{												
				color: #C9C9C9;
}

.directory .pagination .nav li a
{
				color: #7A7A7A;
}

/* For some reason the global css forces tables to have a width of 85% */
/* Since we are removing widths from tables we don't want this */
table 
{
				width: 100%;	
}

/* Need to fix next arrow on giving rotator in desktop mode as the a.next tag inherits */
/* some features that we don't want for this icon */
.giving_feature .thumbnails .next
{				
				float: none;
				min-height: 0px;
				padding-left: 0px;
}

/* Fix to get comments back in lightbox photo galleries */
/* Example: Student-Life/Living-at-Wheaton/Campus-Dining */
#cboxContent p
{
				width: auto;				
}

/***********************************************/
/* Non-mobile Resolutions
/***********************************************/

@media (min-width: 650px)
{
				/* This should fix the missing content on iPad portrait */
				body
				{
								min-width: 950px;
				}

				.mobile-header
				{
								display: none;
				}

				/* Use new smaller, combined tagline, logo */
				#top a#brand 
				{				
								background:url(../img/css/logo-desktop.png) no-repeat 0 0;								
								margin: 5px 0 0 0px;
				}
				
				/* Move top links down a bit */
				nav.top-links
				{    
				    padding-top: 35px;
				}
				
				/* Move search box down a bit */
				fieldset.search
				{
								margin: 0 0 0 5px;
								padding-top: 32px;
				}		

				/* Move search box button down a bit */
				.search button.go
				{
								top: 35px;
				}

				/* Fix headers section on WETN pages */
				.sec-layout .top
				{
								z-index: 1;
				}

				.sec-layout #top a#brand
				{
								background:url(../img/css/logo-small.png) no-repeat 0 0;								
								margin: 10px 0 0 25px;
				}

				.sec-layout nav.top-links
				{    
				    padding-top: 10px;
				}
				
				.sec-layout fieldset.search
				{
								display: none;
				}

				/* Responsive Search Button - Hidden at non-mobile resolutions */
				.search-mobile 
				{
								display: none;				
				}

				/* Responsive Navigation Button - Hidden at non-mobile resolutions */
				.jumptonav 
				{
								display: none;				
				}				

				/* Don't show the toTop button or text at mobile resolutions */
				#toTop 
				{
								display: none;	
				}

				/* Set the width of the ul containing the slides to bigger then 720px * number of slides */
				.home .slides
				{
								left: -720px;
								width: 8640px;
				}				

				/* Make sure the side navigation shows at non-mobile resolutions */
				.content-wrapper aside.sec 
				{
								display: block;
				}				

				/* Don't display the side navigation mobile button at non-mobile resolutions */
				#mobile-side-navigation-button
				{
								display: none;
				}

				/* Don't show prev and next slide buttons at non-mobile resolutions */
				.prev-next
				{
								display: none;
				}

				/* Don't show the mobile lead callouts at non-mobile resolutions */
				#mobile-lead-callouts
				{
								display: none;
				}

				/* Don't show mobile giving buttons at non-mobile resolutions */
				.mobile-giving-button,
				.mobile-giving-buttons
				{
								display: none;
				}				

				/* Needed to fix an issue with the type1 and type3 slides showing the last image during a transition */
				.type1 .slides > li,
				.type3 .slides > li
				{
								opacity: 0;
				}

				.type1 .slides > li:first-child,
				.type3 .slides > li:first-child
				{
								opacity: 1;
				}
				
				/* Reset the opacity of type3 content panes */
				.type3 li .content
				{
								opacity: 0;
				}	

				.type3 li.current .content
				{
								opacity: 1;
				}

				/* Reset the .container values */
				.js .home #lead .container {
								margin: 0 auto;
								overflow: visible;
								width: 950px;
				}

				/* Do not show read more links for long content on Custom Pages at non-mobile resolutions */
				.mobile-show, .mobile-hide
				{
								display: none;
				}

				/* Don't show the content toggle button at non-mobile resolutions */
				#pnlToggleContent
				{
								display: none;
				}

				/* Always show the full content at non-mobile resolutions */
				#pnlUpperContentBottom 
				{
								display: block;	
				}

				/* Don't display home page mobile content at non-mobile resolutions */
				.home #secondary .mobile
				{
								display: none;
				}

				/* Allow normal images in right widgets to flex. Allows larger images that look good */
				/* at mobile resolutions to be used at desktop smaller widget sizes */				
				.callout img
				{
								max-width: 100%;
								width: 100%;
				}

				/* We are using smaller images for the home page rotator so that there isn't as much */
				/* space in them at mobile resolutions so we need to pad them to center them */
				.home #rotator .slides img
				{
								padding: 130px 0 0 80px;
				}

				/* Don't show the footer version of the giving button at non-mobile resolutions */
				.mobile-giving
				{
								display: none;
				}

				/* Centers and Institute footer links - don't show at non-mobile resolutions */
				.footer-nav #centers, .footer-nav #graduate-school
				{
								display: none;
				}

				/* Hide Audience links in footer at non-mobile resolutions */
				.mobile-audience
				{
								display: none;
				}

				/* Style the new map link */
				.contact.vcard .map
				{
								text-decoration: none;
								font-size: 1.085em;								
				}

				.contact.vcard .map:hover
				{
								text-decoration: underline;
				}

				/* Full Media Center News Page */
				.primary.left
				{
								width: 710px;
				}

				.media, .primary.left h2
				{
								clear: none;
				}

				.pagination .nav .next
				{
								background-image: none;
				}

				.mm-gallery .viewport ul
				{
								height: 335px;
				}

				/* Centers play icon on related video sections of Media Center */
				.filmstrip .viewport .overlay .icon.video
				{
								bottom: 45%;
								left: 45%;
								display: none; /* hiding the play icon because it's show for image galleries */
				}

				/* Fix to prevent photo gallery comments from being cut off */
				/* Example: Media-Center/Multimedia/Wheaton-Life/Image-of-the-Week */								
				.mm-gallery .viewport ul.gallery
				{
								height: auto;
				}					

				.jwplayer
				{
								height: 384px;
								width:512px;
				}				
				
				
				.box.grey p a, .box.grey a p {
					overflow:hidden; /* so text won't wrap around floated images */
}
}

/*******************************************/
/* Mobile Resolutions 
/*******************************************/

@media ( max-width: 360px )
{
				.tabs li:nth-child(3)
				{
								clear: both;
				}
}

@media (max-width: 640px)
{
				/* This should fix the missing content on iPad portrait */
				body
				{
								min-width: 320px;
				}

				/* Make main container flexible */
				.container 
				{				
								max-width: 950px;
								width: 100%
				}

				#top .borderradius .container
				{
								border-radius: 0px;
				}

				/* Don't display the non-mobile header */
				.non-mobile-header
				{
								display: none;
				}

				/* Display the mobile header */
				.mobile-header
				{
								display: block;
				}

				/* Using a table to properly position the buttons and logo in the header */				
				.mobile-header table
				{
								border: none;
								width: 100%;
				}

				.mobile-header td.m-left
				{
					width: 20%;
					border: 0px;
				}

				.mobile-header td.m-center
				{
					width: 60%;
					border: 0px;
				}

				.mobile-header td.m-right
				{
								width: 20%;
								border: 0px;
				}

				/* Overridding global table behaviour since the class .odd seems to get */
				/* appended, automatically, to the table through some jquery function */
				.mobile-header .odd td
				{
								background: inherit;
								padding: 0px;								
				}

				/* Center the Wheaton image and make it smaller */
				/* #top a#brand */
				#top a#logo
				{								
								/* background:url(../img/css/logo-mobile.png) no-repeat 0 0; */
								/* background-size: 200px 72px; */
								background: url(../img/css/WheatonCollege_Web400px.png) no-repeat;								
								background-size: 178px 68px;
								width: 178px;								
								height: 68px;								
								margin: 9px auto;								
								display: block;
								float: none;
								padding: 0px;
								text-indent: -9999em;								
				}

				/* Center the small Wheaton logo in the Centers pages */
				body.sec-layout #top a#brand 
				{
								/*
								background:url(../img/css/logo-small.png) no-repeat 0 0;
								width: 150px;
								*/
								background: url(../img/css/WheatonCollege_Web400px.png) no-repeat;								
								background-size: 150px 57px;
								width: 150px;
								height: 57px;
								left: 35%; 
								margin: 1px 0px 0px -25px;								
								display: block;																
								position: absolute;								
								float: none;
				}										

				/* Move the tagline under the smaller logo image */				
				header .tagline
				{
								position: static;
								margin-top: 42px;
				}

				header .container
				{
								background: url("../img/css/bg-stripes-header.gif") repeat scroll 0 0 rgba(0, 0, 0, 0);
				}		

				/**********************************************************************************/
				/* Wraps the primary and secondary columns in a div so we can make them flexible
				/**********************************************************************************/

				#page-columns
				{
								max-width: 950px;
								width: 100%
				}

				#primary 
				{	   
								max-width: 710px;
								width: 74.7368%;
				}

				.full #primary,
				.full.wetn #primary
				{
								max-width: 910px;
								width: auto;
								margin: 0px 10px;
								clear: both;
				}

				.full #primary .intro
				{
								padding: 0px;
				}

				.full #primary.left .content {
								max-width: 660px;
								width: 100%;				
				}

				.full #primary h1
				{
								margin-left: 10px;	
				}

				/*******************************************************************/
				/* All the directory classes are working with the A-Z type indexes 
				/*******************************************************************/

				.directory
				{
								display: block;
								padding: 0px;				
				}

				.directory .alphabet dt
				{
								width: 15%;
				}

				.directory .alphabet dd {
								max-width: 645px;
								width: 75%;
				}

				.directory .column
				{
								float: none;
								width: auto;
				}

				.directory .pagination .nav li
				{				
								padding: 11px;
								color: #C9C9C9;
				}

				.directory .pagination .nav li a
				{
								color: #7A7A7A;
				}

				.directory .pagination li:first-child
				{
								margin-left: 10px;
				}

				dd .button.top, .pagination .button.top
				{
								display: none;
				}

				.directory .prev-next
				{
								color: #fff;
								background-color: #03478C;
				}

				/********************************************/

				#secondary 
				{	
								/* max-width: 222px; */
								width: 23.3684%;
				}				

				.wide-columns #primary
				{
								/* max-width: 525px; */
								width: 55.2631%;
				}

				.wide-columns #secondary
				{
								/* max-width: 370; */
								width: 38.9743%;
				}

				article.content
				{ 
								/* max-width:475px; */
								width: 66.9014%;
				}				

				/**************************************/
				/* Side Navigation 
				/**************************************/

				/* Make the side navigation span the whole screen in mobile resolutions */
				.content-wrapper aside.sec 
				{								
								width: 100%;
								display: none;								
				}

				.content-wrapper aside.sec.open
				{								
								width: 100%;
								display: block;
				}

				/* Fix the padding of the side navigation links at mobile resolutions */
				.content-wrapper aside nav .nav
				{
								padding-right: 20px;
				}				 							

				/* Let the internal anchor tags in the side navigation flex at mobile resolutions */
				/* and put a border around the entire side navigation anchor at mobile resolutions */			 
				.borderradius aside .nav.sec a, 
				.borderradius aside .nav.sec a.on, 
				.borderradius aside .nav.sec a.on.opened,				
				.borderradius aside .nav.sec ul a, 
				.borderradius nav.main ul .dropdown a, 
				.borderradius aside .nav.sec ul li:last-child a
				{
								border-radius: 5px;
								width: 100%;
								padding: 9px 0px 9px 20px;
								margin: 0px;
				}				

				.content-wrapper aside .nav li li
				{
								padding-top: 1px;
								border: none;		
				}

				/* Display the mobile side navigation button */
				#mobile-side-navigation-button
				{								
								color: #333333;
								font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;								
								background-image: linear-gradient(to top, #E3E3E3, #F1F1F1);
								background-color: #E3E3E3;
								border-radius: 5px 5px 5px 5px;								
								padding: 9px 0;
								width: 100%;
								position: relative;					
				}							
				
				#mobile-side-navigation-button.open
				{								
								background-image: none;
								background-color: #ACACAC;
				}							
				
				#mobile-side-navigation-button + aside.sec + article.content
				{
								margin-top: 20px;
				}

				.mobile-side-navigation
				{								
								padding-left: 20px;
								position: relative;															
				}

				.mobile-side-navigation:after
				{																							
								content: "+";
								float: right;
								width: 20px;
								text-align: center;
								padding-right: 15px;
								font-size: 14px;								
				}

				.mobile-side-navigation.open:after
				{																							
								content: "-";																
				}

				/**************************************/

				/* Don't display anything in the aside section other then the navigation element (i.e. related links and such) */
				.content-wrapper aside.sec > *:not(nav)
				{
								display: none;
				}				

				/* Allow tabs in tab groupings to flex */
				.tab
				{
								width: auto;
				}				

				/*
				nav.tabs,
				.tabs ul
				{
					width: 100%;
				}
				*/

				.tabs li
				{
								margin: 2px 2px 0px 0px;
				}				

				.tabs li a
				{
								padding: 10px;
								/* padding: 8px 10px 6px 10px; */
				}

				/* Allow the very bottom link text in the footer to flex */
				p.links
				{
								padding-left: 10px;
								padding-right: 10px;    
								box-sizing: border-box;
								-moz-box-sizing: border-box;
				}

				/* Allow image tags to resize automatically. */
				img
				{
								max-width: 100%;
								border: 0;
								vertical-align: middle;
								height: auto;
				}

				/* Create fluid video containers */
				.video-container
				{
								position: relative;
								height: 0;
								overflow: hidden;
								padding-bottom: 56.25%;
								/* padding-top: 30px; */
				}

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

				/* Create fluid map containers */
				.map-container
				{
								position: relative;
								height: 320px;
								overflow: hidden;
								padding-bottom: 56.25%;
								width: 85%;
				}

				.map-container iframe
				{
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
				}					

				/* Allow the related links under the side navigation to flex */
				.content-wrapper aside .nav.links li
				{
								max-width:183px;
								width: 87.1428%;
				}

				/* Allow content in image and text box to flex */
				.box.grey div
				{
								float: none;
								width: auto;
				}

				/* Set the home secondary section max-width */
				.home #secondary
				{
								max-width: 230px;
				}

				/***************************************/
				/* Two Column Page Layout Changes
				/***************************************/

				/* On the Campus Map page this somehow prevents the map from showing */
				.two-column #pnlToggleContent
				{
								display: block;
				}

				.two-column #primary {
								width: 100%;
								max-width: none;
				}

				.two-column article.content
				{
								max-width: none;
				}

				/* On two column layouts give the content area 70% of the room (since there will be a side nav there as well) */
				.two-column .content
				{
								max-width: 685px;
								width: 70%;
				}

				/* Allow the side nav in two column mode to flex */
				.two-column .content-wrapper aside.sec 
				{
								/* width: 26%;	*/
				}

				/***************************************************************/
				/* Center the Media Center text and fix it's associated icon 
				/***************************************************************/

				.home .media h2
				{			
								float: none;								
								padding: 0px;
								max-width: 175px;
								width: 100%;						
				}
				
				.home .media h2 a.icon
				{								
								background: url("../img/css/icons-arrows-orange.png") no-repeat scroll 100% -100px rgba(0, 0, 0, 0);
								height: 25px;
								padding-right: 35px;								
				}

				.home .media h2 .icon
				{
								float: none;
								margin: 0;								
								display: inline;
				}

				/* Allows the Media Center bar above footer to flex */
				#content .media .container 
				{ 
								max-width:950px;
								width: 100%;
								box-sizing: border-box;
								-moz-box-sizing: border-box;
				}

				/* Allows Media Center H2 tag to flex */
				.media h2 
				{   
								max-width:175px;
								width: 100%;
				}

				/* Allows Media Center H2 tag to flex */
				.media h2 
				{   
								max-width:175px;
								width: 100%;
				}

				.media h2 a.icon
				{
								padding-right: 35px;								
				}
				
				/*****************************/
				/* Mobile Search Button 
				/*****************************/

				/* Float the search button left */
				#top .search-mobile
				{
								float: left;				
				}

				.search-mobile 
				{
								display: block;															
								/* background: #498FC2 url(../img/css/icons.png) no-repeat 14px 9px; */
								/* background: #117AE1 url(../img/css/icons.png) no-repeat 14px 9px; */
								/* background: #2465AC url(../img/css/icons.png) no-repeat 14px 9px; */
								/* background: #03478C url(../img/css/icons.png) no-repeat 14px 9px; */
								/* background: #2465AC url(../img/css/magnifyingglass.png) no-repeat 12px 4px; */
								background: #2465AC url(../img/css/Magnifyingglassicon.v2.png) no-repeat 12px 5px;
								background-size: 19px 20px;
								float: left;
								margin: 33px 0px 32px 15px;								
								height: 30px;
								width: 42px;				
				}

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

				/*****************************/
				/* Mobile Navigation Button 
				/*****************************/

				/* Float the jump to nav button right */
				#top .jumptonav
				{
								float: right;				
				}

				.jumptonav 
				{
								display: block;
								padding: 8px;
								float: right;
								margin: 33px 20px 32px 0px;
																
								/* background-color: #498FC2; */
								/* background-color: #117AE1; */
								background-color: #2465AC;
								/* background-color: #03478C; */
				}

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

				.jumptonav .icon-bar 
				{
								display: block;
								width: 22px;
								height: 2px;
								border-radius: 1px;
								background: #fff;
				}

				.jumptonav .icon-bar + .icon-bar 
				{
								margin-top: 4px;
				}

				/****************************************/
				/* Top Mobile Navigation
				/****************************************/
				
				/* Don't display the main navigation bar at the top of the page */
				nav.main
				{
								display: none;
				}				

				header#top
				{
								margin-bottom: 0px;
				}				

				nav.main
				{
								position: relative;
								height: auto;
								top: 0px;
								margin: 0 auto;
								width: 100%;
								box-sizing: border-box;
								z-index: 6;
				}				
				
				.main .container.group
				{
								border-radius: 0px;
								background-color: #12448E;
								height: auto;
								position: absolute;
								top: 0px;
								z-index: 9999;
								width: 100%;
								display: none;
				}				
				
				.main ul
				{					
								background: none;
								height: auto;								
								width: 100%;					
				}				
								
				nav.main ul .dropdown li,
				nav.main li
				{																	
								border-bottom: 1px solid #306ea9;
								float: none;
								width: auto;
								position: relative;													
				}				

				nav.main li li:first-child 
				{
								border-top: 1px solid #306ea9;
				}

				nav.main li .column li:first-child 
				{
								border-top: none;
				}

				nav.main ul li:hover 
				{
								background: #0852a4;
				}
				
				nav.main ul li h6
				{
								position: relative;
								margin: 0;
				}
				
				nav.main ul li h6:after
				/* nav.main ul li .clickable:after */
				{
        background: #0852a4;
        color: #fff;
        content: '+';
        display: block;
        font-size: 16px;
        font-weight: bold;
        line-height: 45px;
        position: absolute;
        text-align: center;
								top: 0; 
								right: 0; 
								bottom: 0;
								width: 45px;
    }				
				
				nav.main ul li h6.open:after
    {
        content: '-';
    }

				.main #about a,		
				.main #admissions a, 
				.main #academics a, 
				.main #student a, 
				.main #arts a, 
				.main #athletics a
				{								
								height: 100%;
								/* width: 100%; */
								padding: .8em .5em;
								font-family: Georgia, "Times New Roman", Times, serif;
								font-size: 16px;
								text-transform: none;
				}							
				 																						
				.main li a 
				{
								float: none;
								height: 100%;
				}				
												
				nav.main li a,
				nav.main li a:hover
				{				
								color: #fff;
								text-indent: 0px;
								background: none;																
								display: inline-block;
				}				
												
				nav.main ul ul
				{
								display: none;
				}

				nav.main .column ul
				{
								display: block;
				}

				nav.main ul ul, 
				nav.main ul #centers .dropdown
				{
								position: static;
								background: none;								
								margin: 0px;								
								padding: 0px;
				}
								
				.boxshadow nav.main ul ul,
				.boxshadow nav.main ul ul li
				{
								box-shadow: none;
				}

				.borderradius nav.main ul ul a
				{
								border-radius: 0px;
				}
				
				nav.main ul ul:first-child
				{
								border-top: 1px solid #306EA9;
				}

				nav.main ul ul li
				{
								border-bottom: 1px solid #306EA9;
				}

				.main #about li a, 
				.main #admissions li a, 
				.main #academics li a, 
				.main #student li a, 
				.main #arts li a, 
				.main #athletics li a
				{				
								width: 100%;
								margin: 0px;
								padding: 8px 0px 8px 20px;
								color: #C1D4F0;		
								font-family: "Lucida San Unicode", "Lucida Grande", sans-serif;
								font-size: 12px;	
				}

				.main #about:hover li a, 
				.main #admissions:hover li a, 
				.main #academics:hover li a, 
				.main #student:hover li a, 
				.main #arts:hover li a, 
				.main #athletics:hover li a
				{								
								color: #C1D4F0;
				}

				.cssgradients nav.main ul ul a
				{
								background: none;
				}

				/* Centers Drop Down */
				.cssgradients .dropdown.blue, .cssgradients .dropdown.blue:hover
				{
								background: none;
				}

				nav.main ul .dropdown a,
				nav.main ul .dropdown a:hover,
				.dropdown.blue:hover a
				{
								color: #fff;
								background: none;
				}

				.dropdown .column
				{
								float: none;
								width: 100%;
								margin: 0px;
				}
				.main #centers a
				{								
								padding: 0px;								
								font-size: 12px;
								text-transform: none;								
								padding: .8em .5em;
								font-family: Georgia, "Times New Roman", Times, serif;
								font-size:1.48em;								
				}

				.main #centers li:first
				{
								border-top: none;
				}

				.main #centers li a
								{
								width: 100%;
								margin: 0px;
								padding: 8px 0px 8px 20px;
								color: #C1D4F0;		
								font-family: "Lucida San Unicode", "Lucida Grande", sans-serif;
								font-size: 12px;	
								}

				.main #centers h6
				{
								height: 100%;
								margin: 0px;
								padding: 0px;					
				}

				nav.main ul #centers .dropdown
				{
								width: auto;
								height: 100%;
				}				

				.main .athletics .icon
				{
								display: none;
				}

				nav.main ul #centers:hover ul,
				nav.main ul #centers:hover .dropdown
				{
								left: 0px;
				}				

				/****************************************/
				/* Create ToTop bottom floating area	
				/****************************************/

				#toTop 				
				{
								/* Blue background closer to A-Z back to top buttons */								
								background-color: #03478C;
								color: #FFFFFF;
								border-color: #03478C;
								border-image: none;    
								border-radius: 5px;
								border-style: solid;    
								border-width: 5px;																								

								/* Grey text with breadcrumb type background */
								/* Doesn't seem to work very well on mobile device (transparent)
								/*
								background-image: -moz-linear-gradient(100% 59% 90deg, #E3E3E3, #FFFFFF);								
								color: #444;
								border-image: -moz-linear-gradient(100% 59% 90deg, #E3E3E3, #FFFFFF);																
								padding: 5px;																								
								*/

								font: 0.9175em/1.2 "Lucida Sans Unicode","Lucida Grande",sans-serif;
								text-transform: uppercase;
								cursor: pointer;																
								text-align: center; 																
								border-radius: 5px 5px 5px 5px;								
								box-shadow: -2px -1px 3px rgba(0, 0, 0, 0.1);
								transition: bottom 300ms ease-out 0s;
								position: fixed;
								right: 5px;
								bottom: -67px;
								width: 44px;
								z-index: 999;
				}

				/* Show ToTop bottom floating area when we are not at the top of the page */
				#toTop.showing {
								/*bottom: 4px;*/
				}		
										
				/***************************************************/
				/* Generic Mobile Changes for Rotator
				/***************************************************/
																														
				#rotator .banner
				{																
								width: auto;					
				}							
				
				#rotator .slides > li {
								display: none;
								position: static;
								height: auto;								
								width: 100%;
				}

				#rotator .slides > li.current {
								display: block;
								/* border-top: 2px solid #12448e; */
				}				
											
				#rotator .content
				{
								top: 0px;
								left: 0px;
								width: auto;
								position: relative;								
				}

				#rotator .banner .content:hover
				{
								background: url("../img/css/bg-slideshow-text.png") repeat scroll 0 0 rgba(0, 0, 0, 0);								
				}
				
				/***********************************************/
				/* Type1 Rotator Specific Changes
				/***********************************************/				

				#rotator.type1 .banner
				{
				}
				
				#rotator.type1 .slides > li {
								display: block;
								position: absolute;
								height: auto;
								width: 100%;
				}
				
				#rotator.type1 .banner .content
				{			
								border-radius: 0px;													
								padding-left: 40px;
								padding-right: 40px;								
								background-color: black;					
				}										

				/* Or stack the annoucement section under the rotator */
				.type1 #lead-callouts {
								width: auto;
								float: none;
								position: static;
								padding: 10px;								
								border-top: 1px solid;
								border-color: #55729C;								
				}

				/* Remove prev-next buttons for type1 banners */
				#rotator.type1 .prev-next 
				{								
								top: 3.5em;
								margin-left: -40px;
				}

				#rotator.type1 .pager
				{
								display: none;
				}				

				/***********************************************/
				/* Type3 Rotator Specific Changes
				/***********************************************/				

				#rotator.type3
				{
								padding: 0px;
								height: auto;
				}

				#rotator.type3 .banner
				{
								height: auto;
				}
				
				#rotator.type3 .banner .content
				{			
								border-radius: 0px;													
								padding-left: 45px;
								padding-right: 40px;																
								height: auto;
								background: url("../img/css/bg-slideshow-text.png") repeat scroll 0 0 rgba(0, 0, 0, 0);				
								background-color: black;
				}

				#rotator.type3 .prev-next
				{
								bottom: 4em;
				}
								
				/*
				.type1 .slides > li,
				.type3 .slides > li
				{
								opacity: 1;
				}
				*/

				.type3 li .content
				{
								opacity: 0;
				}	

				.type3 li.current .content
				{
								opacity: 1;
				}

				/***************************************/
				/* Giving Page Specific Rotator fixes 
				/***************************************/

				.giving_feature
				{								
								height: 100%;									
								width: 100%;
								position: static;
				}

				.giving_feature .text_backgrounds
				{								
								display: none;
				}

				.giving_feature .text_details
				{
								width: 100%;								
								position: relative;
								height: auto;
								padding: 0px;
								background-color: #000;
								padding-bottom: 10px;
								max-height: 600px;
				}								

				/* Trying to remove hover behaviour - doesn't seem to help */
				.giving_feature .text_details:hover
				{								
								background: url("../images/bg-slideshow-text.png");
								background-color: #000;
				}				

				.giving_feature .text_details > div
				{
								height: auto;								
								position: static;								
								width: auto;
								display: none;
								padding: 0 0 15px 0;					
				}

				.giving_feature .text_details > div.active 
				{
								display: block;
				}

				.giving_feature .text_details .prev-next
				{
								display: block;
								cursor: pointer;
								width: 100%;
								z-index: 1200;
								padding: 0px;
								margin: 0px;
								height: 30px;
								position: absolute;
								/* top: 75%; */
								top: auto;
								bottom: 3em;
				}

				.giving_feature .text_details div .inner
				{
								height: auto;
								width: 100%;
				}

				.giving_feature .text_details .video
				{
								height: auto;
								width: 100%;
								margin: 0px;
				}

				.giving_feature .text_details .video img, .giving_feature .text_details img
				{
								width: 100%;
								margin: 0px;
								float: none;								
				}

				.giving_feature .text_details img
				{
								padding-bottom: 10px;
				}

				.giving_feature .text_details .video span 
				{
								bottom: 40%;
								left: 45%
				}

				.giving_feature .inner h2
				{
								
								padding: 0px 40px;
								font-size: 1.335em;
				}

				.giving_feature .inner p
				{
								padding: 0px 40px;								
								font-style: normal;
				}
								
				.giving_feature .text_details a.more 
				{
								position: static;
								padding-left: 40px;											
				}

				.giving_feature .text_details a.right
				{
								float: right;
								padding-right: 40px;
				}

				/****************************************/
				/* Giving Landing Page Changes
				/****************************************/

				.icon_triplets, .icon_triplets .column
				{
								width: auto;
								padding: 20px 0px;
								margin: 0px;
				}

				.icon_triplets .column.first
				{
								padding-top: 10px;
				}

				.icon_triplets .column.middle
				{
								border-width: 1px 0px;
				}

				.full_callout 
				{
								width: auto;
				}

				.full_callout img
				{
								float: none;
								width: 100%;
				}

				.color_blocks
				{
								width: auto;
				}

				.color_blocks .color_block
				{
								width: auto;
								margin-bottom: 10px;
				}
								
				.mobile-giving-button,
				.mobile-giving-buttons
				{
								width: auto;
								margin: 0px 0px 20px 0px;								
				}

				.giving_button,
				.giving_buttons
				{
								display: none;
				}

				.blue_button
				{
								margin: 10px auto 0px auto;
				}

				.giving_buttons .divider,
				.mobile-giving-buttons .divider
				{
								margin: 10px auto 20px auto;
				}

				/*************************************/
				/* Giving Meet You Rep Changes
				/*************************************/

				.wide_content 
				{
								max-width: 680px;
								width: 100%;
				}

				#representative_map
				{
								width: auto;
								display: none;
				}

				.representative_profiles 
				{
								max-width: 630px;
								width: 100%;
				}
				
				#representative_managers .profile
				{
								width: auto;
								margin: 0px 0px 20px 0px;					
				}

				.representative_profiles .profile
				{
								display: block;
				}

				.representative_profiles .profile:first-child
				{
								display: none;
				}

				.representative_profiles .profile img
				{
								float: none;
				}

				.representative_profiles .contain
				{
								overflow: visible;
				}

				.column
				{
								float: none;
								width: auto;
				}

				#meet-your-counselor-map
				{
								/* display: none; */
								margin: 10px 0px 20px -20px;
				}				

				/*****************/
				/* World Rotator */
				/*****************/
				
				#world-rotator
				{
								display: none;
				}
				
				/*************************************/
				/* Home Page Specific Rotator fixes 
				/*************************************/

				.home #rotator 
				{
								height: auto;								
				}				

				.js .home #rotator 
				{    								
								width: 100%;																
				}

				.home .slides
				{
								position: static;
								width: auto;					
				}
				
				.thumbnails
				{
								display: none;
				}				
												
				.home .banner .content
				{								
								border-radius: 0px;
								padding-left: 45px;
								padding-right: 40px;							
				}				
				
				.home .banner .content h3 
				{
								font-size: 1.335em;
				}				
			
				/*********************************************/
				/* Home Page Moblile Slider Controls
				/*********************************************/
				
				/* #rotator */
				.mobile-prev
				{								
								background:url(../img/css/icons-arrows-orange.png) no-repeat 0 0;
								width: 30px;
								padding: 0px;
								margin: 0 0 0 3px;
								float: left;
								min-height: 2em;								
				}

				/* #rotator */
				.mobile-prev:hover 
				{
								background:url(../img/css/icons-arrows-orange.png) no-repeat 0 -50px;
				}

				/* #rotator */
				.mobile-next
				{					
								background:url(../img/css/icons-arrows-orange.png) no-repeat 0 -100px;
								width: 30px;
								padding: 0px;
								margin: 0px;
								float: right;
								min-height: 2em;			
				}

				/* #rotator */
				.mobile-next:hover 
				{
								background:url(../img/css/icons-arrows-orange.png) no-repeat 0 -150px;
				}
				
				.prev-next {								
								width: 100%;
								cursor: pointer;								
								z-index: 5;
								margin-left: -45px;
								position: absolute;								
								bottom: 5.25em;
								top: 5em;
				}

				/*****************************************/
				/* Home Page Lead Callouts Changes
				/*****************************************/
						
				.js .home #lead .container
				{    								
								width: 100%;																
				}

				.home #lead-callouts
				{
								display: none;	
				}

				.home #mobile-lead-callouts
				{								
								position: static;
								float: none;
								width: auto;
								height: auto;
								background-color: #fff;
								padding: 0px 10px;
				}
				
				.cssgradients .home #lead-callouts,
				.cssgradients .home #mobile-lead-callouts
				{			
								background: #fff none;
				}
				
				.home #lead-callouts .callout,
				.home #mobile-lead-callouts .callout
				{
								width: auto;
								background-color: #12448e;								
								background: -moz-linear-gradient(19% 75% 90deg, #12448E, #1A2F4E) repeat scroll 0 0 rgba(0, 0, 0, 0);
								margin: 10px 0;
								padding: 0;
								height: 105px;
								/* border-radius: 0 0 10px 10px; */
								border-radius: 5px;
				}
				
				.home #lead-callouts .callout:hover,
				.home #mobile-lead-callouts .callout:hover
				{
								background-color: #054faa;	
				}
				
				.home #lead-callouts .callout > a, 
				.home #mobile-lead-callouts .callout > a
				{
								padding: 20px 0;
								display: block;
				}
				
				.home #lead-callouts .callout h3, 
				.home #lead-callouts .callout p,
				.home #mobile-lead-callouts .callout h3, 
				.home #mobile-lead-callouts .callout p
				{
								color: white;
								margin-left: 50px;
				}

					.home #lead-callouts .callout h3 strong,
					.home #mobile-lead-callouts .callout h3 strong {
						display: block;
						line-height: 1.4;
				}
				
				.home #mobile-lead-callouts .callout.graduate {
					background-position: 14px 12px  ;
				} 
				.home #mobile-lead-callouts .callout.conservatory {
					background-position: 6px 12px;
				}
				.home #mobile-lead-callouts .callout.whywheaton {
					background-position: 20px 12px;
				}
				
				.home #lead-callouts .callout .inner,
				.home #mobile-lead-callouts .callout .inner
				{
								/* width: 230px; */
								width: auto;
								padding: 10px;								
								margin: 10px auto;								
				}		
				
				.home #lead-callouts img,
				.home #mobile-lead-callouts img
				{
								width: 100%;
				}					
				
				.home #lead-callouts .callout.video span.play, 
				.home #mobile-lead-callouts .callout.video span.play 
				{
								left: 40%;
					   top:40%;
				}						
				
				/* Remove the negative margin on the lead section of the page */				
				.home #lead
				{
								margin: 0px;
				}													
				
				/***************************************************/				
				/* End of Home Page Lead-Callout changes
				/***************************************************/
																		
				/* Remove the audience navigation bar from the middle of the home page */
				nav.secondary
				{
								display: none;
				}
				
				/* Remove all of the center callouts */
				.inner .wrap .callout
				{
								display:none;
				}
				
				/* Put the first center callout back */
				.inner .wrap .callout:first-of-type
				{
								display: block;
								float: none;
								margin: 0px;
								padding: 0px 0px 10px 0px;
								width: auto;
								height: auto;								
								border-radius: 5px;
				}
				
				/* Allow the image in the first callout to flex */
				.inner .wrap .callout:first-of-type img
				{
								width: 100%;
								border-radius: 5px;
				}
				
				/* Unfloat the primary section so content will stack */
				.home #primary
				{
								max-width: 640px;
								width: auto;
								float: none;
								background: #fff;								
								margin: 0px;
								padding: 10px 10px 0px 10px;
				}
				
				/* Unfloat the primary inner section so content will stack */
				.home .inner 
				{
								float: none;
				}
				
				/* Add some padding around the primary inner content */
				.home #content .container.group
				{
								padding-bottom: 0px;
								margin-bottom: 15px;
								border-radius: 5px;
								background-color: white;
				}
				
				/* Unfloat the secondary section so it's content will stack */
				.home #secondary
				{
								padding-top: 10px;
								max-width: 640px;
								width: 100%;
								float: none;
								background: #fff;
								box-shadow: 0 0 5px #AFAFAF;
								border-radius: 0 0 10px 10px;
								box-sizing: border-box;
								-moz-box-sizing: border-box;
								height: auto;																
				}							
				
				/* Put some space between the secondary callouts at mobile resolutions */
				.home #secondary .callout
				{
								background: #12448e;
								float: none;
								width: auto;
								border-radius: 10px;
								margin-bottom: 10px;
								height: auto;
								text-align: center;
				}
				
				/* We can't move the lead-callouts from the rotator area to the secondary column */
				/* so we need to duplicate them. However we only want this content to show up at */
				/* mobile resolutions */
				.home #secondary .mobile
				{
								display: block;
				}
				
				.home #secondary .callout.mobile .inner img
				{
								display: block;
				}
				
				.home #secondary .callout.mobile
				{
								width: auto;
								background-color: #054FAA;								
								background: -moz-linear-gradient(19% 75% 90deg, #12448E, #1A2F4E) repeat scroll 0 0 rgba(0, 0, 0, 0);
								margin: 0px;
								padding: 0px;
								height: auto;								
				}
				
				.home #secondary .callout.mobile .inner
				{
								width: 230px;
								margin: 10px auto;								
								padding: 20px;
				}							
				
				.home #secondary .callout.mobile.video span.play 
				{
								left: 110px;
								top: 80px;
				}
				
				/* Remove the bottom padding from the Media Center component */
				.home .media
				{
								margin-top: 0px;
								padding-bottom: 0px;
				}
				
				/* Center the Media Center text and fix it's associated icon */
				.home .media h2
				{								
								margin: auto;		
				}
				
				.home .media h2 .icon:hover
				{								
								background: url("../img/css/icons-arrows-orange.png") no-repeat scroll 100% -150px rgba(0, 0, 0, 0);
				}
											
				/* Change media center section to have same look as template pages - Just Media Center text and link */
				.events.media.group, .media .recent, .media .news
				{
								display: none;
				}												
	
				/**********************************/
				/* Start of accordion search area */
				/**********************************/
				
				/* Need to allow overflow when trying to show search accordion on home page */
				.home header .container
				{
								overflow: visible;
				}
				
				/* Reorganize the header section into a accordion style drop down */
				.search-mobile-div
    {
    				display: none;
								float: none;
    				width: 100%;    				 			
    				height: 100px;    				
    				box-sizing: border-box;
								-moz-box-sizing: border-box;
								padding: 0px;
								margin: 0px;
								z-index: 1000;
								clear: both;								
								/* background: url("../img/css/bg-header-glow.png") no-repeat scroll 50% 0 #172D4B; */
								background-color: #172D4B;
								/* background-color: #12448E; */
    }       
    
    /* We aren't going to show all of the top links in the mobile search section */
				#news-media, #calendar, #giving
				{
        display: none;
    }

				/* Mobile Giving button styling in footer */								
				a.mobile-giving 
				{
								display: block;
								padding: 10px;
								margin: auto;
								margin-bottom: 30px;
								width: 130px;
								height: 16px;
								text-align: center;
								border-radius: 5px;								
								background-color: #498fc2;								
								background: linear-gradient(to bottom, #498fc2, #2465ac);
								color: #fff;
								font-size: 14px;								
				}

				a.mobile-giving:hover
				{
								background: linear-gradient(to bottom, #498fc2, #2465ac);
				}
			        
    /* Try and center the remaining top links within the search area */       
    nav.top-links, .top nav.top-links
    {
    				float: none;    
    				margin: auto;
    				width: 150px;
    				padding: 10px 20px;
    }
    
    /* Try and center the search box within the search area */       
    fieldset.search
    {
    				float: none;    				
    				padding: 15px 0px 5px 0px;
    				margin: auto;
    				width: 220px;
    }

				.search input
				{
								width: 220px;
				}
              
    /* Need to realign the search magnifiying glass */
				.search button.go
				{
								margin-top: 15px;
								margin-right: 0px;
								right: 0px;
								top: 3px;
				}

				.sec-layout .top.open
				{
								z-index: 1000;
				}
      
    /********************************/  
    /* End of accordion search area */
    /********************************/        
    
    header#top
    {
    				min-width: 320px;
    				margin-bottom: 0px;
    				z-index: 3;
    }
    
    /* Decrease the size of the tagline so the header buttons fit */
				header .tagline
				{
								background-size: 75% 75%;
				}	
        
    /* Remove the nav spacing and move the image up */
				nav.main
				{
								height: 0px;
				}
	
				/* Remove the top banner */
				img.hero
				{
								display:none;								
				}
	
				/* Reduce the padding around the breadcrumb and media center section */
    .breadcrumbs
    {
								padding: 12px 0px;    
								margin-bottom: 12px;
    				position: static;
    				width: 100%;												
    } 

				.breadcrumbs ul
				{
								margin: 0px 15px;
				}
    
    /* Remove some of the bottom margin on the intro */
    .intro
    {    	
    				width: auto;    				
								margin: 0 1em 2em;
    }				
         
				/* Change the wrapper padding to accomodate the new screen resolution */
    .content-wrapper
				{																
    				display: block;
        margin-left: 10px;
        margin-right: 10px;        
    				width: auto;
    }     
    
    #content .container.group
    {
								padding-bottom: 25px;
    }			 
    
    /* Allow multiple columns with a tab group to stack */
    .tab .column
    {
    				width: auto;
    				float: none;
    }   

    /* Give the paragraph content a little right margin */
    .content .tab p, .content .tab ul
    {
    				margin-right: 10px;
    }
	
				/* Remove the float from the main content widgets and give them 100% width */
    article.content	{
        width: 100%;
        float: none;        
    }			
	
    article.content img {
    	float: none;
    }
	
				/* Take the float away from the primary and secondary columns so that the content stacks */
    #primary
				{
        float: none;
        width: auto;  
								margin-top: 0px;
    				/* position: relative; */
    				position: static;
    }
    
    /* On the faculty page we need to remove the margins */
    .full #primary.left
    {
    				margin: 0px;
    }
    
    /* Remove the images from the main content articles */
				/* We actually want to keep the pictures in some cases but remove in other but the same */
				/* control is being used in both cases in the middle column so ... ? */
    .box.grey img
    {
    				float: left;
    }
    
    /* Allow the grey box text to span the width of the container */
    .box.grey div
    {
    				width: 100%;
    }
    
    /* About -> Wheaton Worldwide has a different layout using the additional .wide-columns class */   
    .wide-columns #primary 
    {
    				float: none;
    				width: auto;
    				padding: 10px;
    				margin: 0px;
    }
    
    .wide-columns .content
    {
    				padding: 0px;
    				margin: 0px;
    }
    
    .wide-columns #secondary
    {
    				float: none;
								width: 100%	
    }

				/* Remove the max width from the secondary column and add padding */
				#secondary
				{
        float: none;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
								-moz-box-sizing: border-box;
								display: inline-block;
								margin: 0px;
        padding: 0 10px;
    }		
    
    /* Center the second column content */
    #secondary .callout
    { 
								width: auto;
    				margin: 10px auto;
    				/* padding-top: 1.7em; */
				}

				.borderradius #secondary .callout, 
				.borderradius .wide-columns #secondary .callout, 
				.borderradius #secondary .callout.box
				{
								border-radius: 5px;
				}

				#secondary .no_image
				{
								border-radius: 5px !important;
				}
    
    /* Remove the image of the secondary callout at mobile resolutions */
				/* And then we were told to put it back in so ... */
    #secondary .callout img
    {
    				width: 100%;
    				padding-bottom: 10px;
								border-radius: 5px;
    }    
    
    /* Add some extra space to the h6 secondary callout subtitle since the */
    #secondary .callout h6
    {
    				margin-bottom: 1em;
    }

				/* Center the play buttons on right column widgets in mobile mode */
				#secondary .callout .play
				{
								left: 45%;
								top: 30%;
				}
    
				/* Toggling read more option on Custom Pages */
				.non-mobile-show, .mobile-show
				{
								display: block;
				}

				.non-mobile-hide, .mobile-hide
				{
								display: none;
				}

				/* At mobile resolutions give the two column content area 100% of the room (no side nav) */
				.two-column .content 
				{								
								width: 100%;
				}				

    /* Show the content toggle button at non-mobile resolutions on Custom Pages*/
				#pnlToggleContent
				{
								display: block;
								clear: both;
				}
				
					#toggleUpperContentBottom
					{
									cursor: pointer;
					}
				
				/* Don't show the full content at non-mobile resolutions on Custom Pages*/
				#pnlUpperContentBottom 
				{
								display: none;
				}
    
    /* Remove some of the padding around the Media Center bar */
    #content .media .container.group
    {
    				margin: 0px;
    				padding: 8px 0px;
    }

				/* Image gallery fixes for mobile resolution - ex. Arts page*/
				ul.gallery li a 
				{
								margin: 0px 0px 0px 0px;
								padding: 0px 0px 0px 0px;
				}

				ul.gallery li .tags a
				{
								padding-right: 5px;
								margin-bottom: 7px;
								float: left;
				}				

				ul.gallery li
				{
								float: none;
								margin: 0px 5px 0px 0px;
								padding: 0px 0px 0px 0px;																
				}
    
    /* Remove the Share This and Feedback links from the Media Center footer */
    .addthis_toolbox, .feedback
    {
    				display: none;
    }
    
    /* Remove the float around the Media Center h2 text and center it */
    .media h2
    {
    				float: none;
    				margin: auto;
    				padding: 0px;
    }
    	
    /********************************/	
				/* Responsive Footer Navigation 
				/********************************/							

				/* Remove the float from the vcard so that it moves under the other footer information */
				aside.vcard 
				{
								float: none;
								width: auto;
								clear: both;
								padding-top: 20px;
								margin: auto;
				}		
				
				/* Increase the width of the social icon area */
				.social
				{
								width: 185px;
				}				

				/* Space out social icons a little more evenly in footer */
				.vcard .social .icon
				{
								width: 25%;
								height: 35px;
				}		
				
				/* Use the larger size of the social icons from the png file at mobile resolutions */
				.vcard .icon.tw
				{
								background-position: 0px -70px;								
				}

				.vcard .icon.fb 
				{
								background-position: 0px 0px;								
				}
						
				.vcard .icon.yt
				{
								background-position: 0px -35px;								
				}

				.vcard .icon.itunes
				{
								background-position: 0px -105px;								
				}

				/* Style the new map link */
				.contact.vcard .map
				{								
								text-decoration: none;
								font-size: 1.085em;
								font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
				}

				.contact.vcard .map:hover
				{
								text-decoration: underline;
				}
				
				/* Display the mobile search button */
				.search-mobile 
				{
								display: block;
				}

				/* Display the jump to navigation button */
				.jumptonav 
				{
								display: block;
				}
	
				/* Add some padding to the footer control */
				footer 
				{
								padding: 30px 25px 25px 20px;
				}
	
				/* Show the additional footer navigation links */
				.footer-top-links
				{
								display:block;
				}

				footer nav li.graduate-school
				{
								display: block;
				}
	
				/* Change the footer navigation css so that it becomes an accordion */				
				.footer-nav li
				{
								border-bottom: 1px solid #306ea9;
								float: none;
								width: auto;
								position: relative;
				}
				
				.footer-nav li:first-child 
				{
								border-top: 1px solid #306ea9;
				}
					
				.footer-nav li:hover 
				{
								background: #0852a4;
				}
				
				.footer-nav li h6
				{
								position: relative;
								margin: 0;
				}

				/* Need more contrast for footer sublinks and visited links */								
				.footer-nav li a 
				{
								float: none;								
								display: inline-block;
								color: #fff;								
				}
				
				footer[role="contentinfo"] h6 a
				{
								padding: .8em .5em;
				}
				
				footer .nav a, 
				footer .nav a:active, 
				footer .nav a:visited
				{
								color: #C1D4F0;				
								font: 1.165em/1 Georgia,"Times New Roman",Times,serif;
								padding: 0.8em 0.5em;
				}	
				
				footer .nav li li
				{
								padding: 4px 0px;
				}

				footer .nav li li a,
				footer .nav li li a:active,
				footer .nav li li a:visited
				{
								font: 0.9175em/1.2 "Lucida Sans Unicode","Lucida Grande",sans-serif;
				}			
				
				.footer-nav li span
				{
								float: right;
								width: auto;
								cursor: pointer;
								font-size: 18px;        
        line-height: 35px;
								display: block;
				}

				/* .footer-nav li h6:after				*/
				.footer-nav li span:after				
				{
        background: #0852a4;
        color: #fff;
        content: '+';
        display: block;
        font-size: 18px;
        font-weight: bold;
        line-height: 35px;
        position: absolute;
        text-align: center;
								top: 0; 
								right: 0; 
								bottom: 0;
								width: 45px;
								cursor: pointer;
    }				
    				    
				.footer-nav li h6.open span:after				
    {
        content: '-';
    }
				
				.footer-nav li > ul 
				{
								display: none;
				}

				/* Fixes for the centers and institute mobile footer navigation items */
				.borderradius .dropdown.blue 
				{
								border-radius: 0px;
								background-color: #12448E;
								margin: 0px;
								padding: 0px;
								width: 100%;
				}

				.dropdown.box 
				{
								display: none;	
				}
				
				.dropdown.blue:hover, .cssgradients .dropdown.blue:hover, .blue.dropdown a:hover
				{
								background-color: #0852A4;
								color: #C1D4F0;
				}				

				.dropdown.blue:hover a 
				{
								color: #C1D4F0;
				}				

				.dropdown .column 
				{
								width: 100%;
								margin: 0px;
								padding: 0px;
				}

				.dropdown li
				{
								border: none;
				}

				.footer-nav #centers li
				{
								border-bottom: 1px solid #306EA9;
				}

				.footer-nav #centers .column.first
				{
								border-top: 1px solid #306EA9;
				}				

				.footer-nav .column li:first-child
				{
								border-top: none;
				}

				/* Show the graduate school mobile navigation link */
				.footer-nav #graduate-school
				{
								display: block;
				}

				/* Show the mobile audience links at mobile resolutions */
				.mobile-audience
				{
								display: block;
								margin-top: 30px;								
								width: auto;
								padding: 0px 10px;
								height: 100%;
				}				

				.mobile-audience ul
				{
								width: auto;
								height: 100%;
								text-align: center;
				}
				
				.mobile-audience li
				{
								display: inline-block;
								padding: 3px 0px;
								font-size: 14px;
								float: none;
				}

				.mobile-audience li:after
				{
								content: "|";
								color: #C1D4F0;
								padding: 0px 10px;
				}

				.mobile-audience li:last-child:after
				{
								content: "";
				}

				.mobile-audience a
				{
								color: #C1D4F0;
				}
				
				/*****************************/
				/* End Responsive Navigation */
				/*****************************/
				
				/* Make social navigation just a list of icons */
				.social.nav h4, .social.nav p
				{
								display: none;								
				}							
				
				/* Remove line before first li */
				.vcard .social li:first-child 
				{
								border-top: 0;
				}				
								
				/* Remove line after each li */
				.vcard .social li 
				{
								border-bottom: 0;
				}
										
				/* Remove padding from the li */
				.social li 
				{								
								padding: 0;
				}	
								
				/* Give the contact information a width so we can center it */
				.contact.vcard
				{								
								width: 165px;
				}				
								
				/* Take some of the top margin off the final footer links */
				p.links
				{
								margin-top: 20px;
				}

				/*******************************************/
				/* Image Gallery Changes
				/*******************************************/

				.img.gallery.group
				{
								margin: 15px 0px;
				}

				.img.gallery.group li
				{
								margin-bottom: 5px;
				}

				/********************************************/
				/* Responsive Tables
				/********************************************/							

				table.full-width
				{
								width: 610px;
				}
								
				table
				{
								margin: 0;
								border-collapse: collapse;
				}

				td, th
				{
								padding: .5em 1em;
								border: 1px solid #999;
				}				

				.table-container
				{
								width: 99%;
								overflow-y: auto;
								_overflow: auto;
								margin: 0 0 1em;					
				}

				.table-container::-webkit-scrollbar
				{
								-webkit-appearance: none;
								width: 14px;
								height: 14px;
				}

				.table-container::-webkit-scrollbar-thumb
				{
								border-radius: 8px;
								border: 3px solid #fff;
								background-color: rgba(0,0,0,.3);
				}

				.table-container-outer { position: relative; }

				/*
				.table-container-fade
				{								
								position: absolute;
								right: 0;
								width: 0px;
								height: 100%;
								background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,.5),#fff);
								background-image: linear-gradient(90deg,rgba(255,255,255,.5),#fff);																				
				}
				*/

				/******************************************/
				/* Media Center Changes
				/******************************************/

				.primary.left
				{
								max-width: 700px;
								width: auto;
								margin: 0px 10px;
								float: none;	
				}				

				.media-center.full .content
				{
								float: none;
								max-width: 475px;
								width: 100%;
								margin: 30px 0px 0px 0px;
				}

				.features li img
				{
								margin: 0px;
								width: 100%;
				}

				.media-center.full .news,
				.media-center.full .media .news,				
				.media-center.full .events.media.group
				.media-center.full .news.media.group
				.media-center.full .column-2 .news.media.group ul
				{
								display: block;
								width: 100%;
								float: none;
								margin: 0px;
								padding: 0 0 10px 0;
				}				

				.media-center.full .column-2 ul
				{
								width: 100%;
				}

				.media-center.full .next,
				.pagination .next
				{
								background: none;
								width: auto;
								padding: 0px;
								min-height: 1em;
				}

				.media-center.full .content.media h2, .media-center.full .news.media h2
				{
								max-width: none;
								width: 100%;
				}

				.media-center .content-wrapper.three-col #primary, 
				.media-center.full .content-wrapper 
				{
								max-width: 710px;
								width: auto;
								margin: 0px;
				}
				
				.media-center.full #primary
				{
								float: none;
								max-width: 690px;
								width: auto;
								margin: 25px 20px;
				}				

				ul.four-column
				{
								margin: auto;
								width: 100%;
								/* width: 300px; */
				}

				.features.gallery.four-column li {
								width: 100%;								
								float: none;
				}

				.features.four-column li:nth-child(4n)
				{
								margin-left: 0px;
				}
								
				.gallery li a,
				.gallery li a img
				{								
								float: none;					
				}				
				
				.gallery a:hover img 
				{
								margin: 0px;
				}

				.gallery a:hover
				{
								border: none;
				}
				
				.icon.video, .icon.audio {
					display: none;
				}
				
				.features.gallery a:hover .icon.video
				{
								bottom: 5px;
								left: 5px;	
				}

				/* Media Gallery carousel */
				#primary.mm-gallery {
					position: relative;
				}
				
				.mm-gallery li:not(.current)
				{
								display: none;
				}
				
				.mm-gallery .filmstrip.media-gallery 
				{
								margin: 20px 0px 60px 0px;
								padding: 60px 0px 0px 0px;
				}

				.mm-gallery .media-gallery .viewport
				{
								width: auto;
								margin: 0px;
								padding: 0px;
								height: auto;
				}
				
				.mm-gallery .media-gallery .viewport .viewer li
				{
								width: 100%;
				}

				.mm-gallery .media-gallery .pager
				{
								right: 0px;
								width: 100%;
								text-align: center;
								top: -78px;
				}

				.mm-gallery .prev-next
				{
								margin: 0px;
								bottom: auto;								
								height: 48px;
								width: 100%;
								top: 72px;
				}				

				.mm-gallery .prev-next:hover
				{
								cursor: inherit;
				}

				.mm-gallery .prev-next .mobile-prev, .mm-gallery .prev-next .mobile-next
				{
								background: transparent url("../img/css/bg-multimedia-gallery-nav.png") 0 0 no-repeat;
								height: 48px;
								width: 48px;
				}

				.mm-gallery .prev-next .mobile-prev:hover
				{								
								background-position: 0 -48px;
				}

				.mm-gallery .prev-next .mobile-next
				{								
								background-position: -48px 0px;
				}

				.mm-gallery .prev-next .mobile-next:hover
				{								
								background-position: -48px -48px;
				}

				.mm-gallery .filmstrip.group.IX_filmstrip
				{
								display: none;
				}				

				.media-gallery .filmstrip-utility .prev
				{
								display: none;
				}

				/* Changing behavior of custom select */
				.custom-select-display {
					margin:0 0 1em;
				}
				
				.select-top {
					float: none;
				}
				
					.select-top a.select {
						margin: 0;
					}
				
				.custom-select-list-wrapper {
					max-height: 0;
					max-width: none;
					position: static;
					width: auto;
					-webkit-transition: all 0.5s;
					-moz-transition: all 0.5s;
					-o-transition: all 0.5s;
					transition: all 0.5s;
				}
				
					.custom-select-list-wrapper .inner {
						border-top-right-radius: 0 !important;
						float:none;
					}
				
					.select-top.open .custom-select-list-wrapper {max-height: 9999px;}

					.custom-select-list-wrapper .column {
						width: auto;
					}
					
					.custom-select-list-wrapper .column li a {
						padding: 7px;
					}
						

				/*****************************************/
				/* WETN Site Changes 
				/*****************************************/

				/* For now we will remove the additional top links from these pages as well */
				.sec-layout #a-z, .sec-layout #directory
				{
        /* display: none; */
    }

				.sec-layout #content,
				.sec-layout.full #content
				{								
								padding-top: 0px;
								margin-top: 0px;
				}

				.sec-layout .top
				{
								height: 57px;								
				}

				.sec-layout header 
				{
								margin: 0px;
								height: 30px;	
				}	
				
				.sec-layout .top .container 
				{
								height: 57px;	
				}			

				/* Change margins on search button */
				.sec-layout .search-mobile 
				{
								margin: 12px 0 10px 20px;	
				}

				/* Change margins on logo */
				.sec-layout #top a#brand
				{
								margin: 8px 0 0 -25px;
				}

				/* Change margins on jump to nav button */
				.sec-layout .jumptonav
				{
								margin: 12px 20px 10px 0px;	
				}

				/* Allow primary column in WETN template to flex */
				#primary.column-2, .full #primary.column-2
				{
								max-width: 690px;
								width: auto;
								float: none;
								margin-top: 20px;
				}

				/* Use the width value here to control where the whether the video's span */
				/* the entire usable space (100%) but look stretch or set a certain width */
				/* to increase size but center images */
				.column-2 ul
				{
								/* width: 100%; */								
								width: 300px;
								margin: auto;								
				}

				/* Remove margin in li's in 2 column template at mobile resolution */
				.column-2 ul li
				{
					margin: 0px;
				}

				/* Remove float and left margin from li's in 2 column template at mobile resolution */
				.features li, .features.gallery li
				{
								float: none;
								margin-left: 0px;
				}

				/* Set the li width to be 100% in 2 column template at mobile resolution */
				/* This allows the .column ul css above to control the width of the components */
				.features.three-column li
				{
								width: 100%;
				}

				/* Fixes an issue with the div losing height because of the floated elements inside */
				.custom-select-display
				{
								zoom: 1;
				}

				/* Give WETN media category selection buttons a little top margin incase they wrap */
				.select-top
				{
								margin-top: 5px;
				}

				/* Set the a and img width to be 100% in 2 column template at mobile resolution */
				/* This allows the .column ul css above to control the width of the components */
				.column-2 .gallery a,
				.column-2 .gallery a img
				{
								width: 100%;
				}

				/* Reset the a tags for icons to be 25px */
				.column-2 .gallery a.icon
				{
								width: 25px;
				}

				/* Remove some of the space between the WETN footer title and the Media center section header */
				.sec-layout aside.center.vcard
				{
								margin: 0px;
								padding-top: 0px;
				}		

				/* Change the layout of the table on the WETN-TC Schedule page to be 100% at mobile resolutions */
				.sec-layout.wetn .content table
				{
								width: 100%;
				}

				/* Add some extra space to the Wheaton College text in the footer */
				.sec-layout aside.contact.vcard:first-child + aside.contact.vcard
				{
								margin: 0px;
								width: 250px;
								padding-top: 30px;
				}

				/* Add a caret to the Wheaton College text to show that it is a link */
				.sec-layout aside.contact.vcard:first-child + aside.contact.vcard h3:after
				{
								color: white;
								content: ">";
				}

				/* Remove all of the Wheaton College address information from the footer on WETN pages */
				.sec-layout aside.contact.vcard:first-child + aside.contact.vcard .adr
				{
								display: none;
				}

				/* WETN All Media Changes */
				.custom-select-wrapper + .custom-select-wrapper
				{
								display: none;
				}

				.jwdisplayIcon 
				{
								margin-left: 25% !important;			
				}

				/* Show only mobile widgets on WETN site when in mobile view  */
				.wetn .callout.box.green {
					display: none;
				}
				
				.wetn .callout.box.green.mobile-widget {
					display: block;
				}
				
				.read-more {
					margin-bottom: 2em;
					overflow: hidden;
				}
				
					.read-more p {
						font-size: 1.1em;
						line-height: 1.367;
						margin-bottom: 1.29em;
					}
				
				.read-more-show {
					clear: both;
					display: block;
					font-size: 1.4em;
					margin-bottom: 2em;
				}
				
					.read-more-show i {
						display: inline-block;
						vertical-align: middle;
					}
				
				.arrow-up {
					width: 0; 
					height: 0; 
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;	
					border-bottom: 5px solid #b8510c;
				}
				
				.arrow-down {
					width: 0; 
					height: 0; 
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;	
					border-top: 5px solid #b8510c;
					}
				
				
				/*********************************************************/					
}

/*************************************************************/					
/* Request Information Form Changes
/*************************************************************/
/* The request information form is an iframe with source
/* http://www2.wheaton.edu/forms/admissions/requestinfo.html
/* 
/* The css file that is references in that file is 
/* http://www2.wheaton.edu/forms/admissions/admiss-forms.css
/*
/* We either need to make the following addition to that
/* or add the same directly to the <head> section of the 
/* html file using <style> tags. Also recommend splitting 
/* up city and state fields (just add <p> tag around state
/*************************************************************/

@media (min-width: 640px)
{
				#inforequest input[type="text"], #inforequest select, #inforequest textarea { width: 98%; }
}