/* ====================================================================================	*/
/* ========================= CAS SharePoint 2013 Template CSS =========================	*/
/* =================================== Home Page ======================================	*/
/* ====================================================================================	*/

	/* The Button Style Used Throughout the Home Page */
	.homePageButton { display: inline-block; padding: 0 30px; font-size: 15px; font-weight: 700; line-height: 42px; text-transform: uppercase; color: #003976; font-family: 'Montserrat', 'Tahoma', sans-serif; }
	.homePageButton:after { color: #003976; content: " "; display: inline-block; height: 9px; width: 5px; position: relative; top: -1px; left: 8px; background: url("/code/core/images/arrowIcons.png") no-repeat scroll -19px -4px transparent; }
	#pageContent.home a.homePageButton, #pageContent.home a.homePageButton:link, #pageContent.home a.homePageButton:visited { color: #003976; }
	#pageContent.home a.homePageButton:hover, #pageContent.home a.homePageButton:active { color: #003976; }

	/* ====================================================================================	*/
	/* ---------- The Home Page Rotator
	/* ====================================================================================	*/
		.hprTile { height: 337px; width: 970px; overflow: hidden; display: none; }
		.hprTile img { width: 600px; float: left; }
		.rotatorContent {width: 340px; height: 300px; max-height: 300px; overflow: hidden; float: right; padding: 0 15px; position: relative; }
		.rotatorTitle { max-height: 60px; line-height: 30px; overflow: hidden; text-align: center; text-transform: uppercase; font-size: 18px; font-weight: 700; color: rgba(0, 0, 0, 0.85); }
		.rotatorText { padding-top: 10px; height: 170px; max-height: 170px; overflow: hidden; font-size: 14px; line-height: 150%; color: rgba(16, 16, 48, 0.65); }
		.rotatorText p { padding: 10px 0; }
		.hprTile .homePageButton { position: absolute; right: 10px; bottom: 15px; } 

		#hprControls { float: right; width: 370px; text-align: center; height: 0; } 
		.hprControlPip { display: inline-block; height: 8px; width: 8px; border-radius: 5px; margin: 0 8px; cursor: pointer; position: relative; top: -10px; background-color: rgba(0, 0, 0, .15); }
		.hprControlPip.selected { background-color: rgba(0, 0, 0, .6); }

	/* ====================================================================================	*/
	/* ---------- The Home Page Rotator v2 { height:466px; width:970px;}
	/* ====================================================================================	*/
		.hprv2Tile { height: 466px; width: 970px; overflow: hidden; display: none; position: relative; }
		.hprv2Tile img { width: 970px; float: left; }

		.rotatorV2Content { padding: 20px 0; position: absolute; margin-bottom: 6px; }
		.rotatorV2Title { max-width: 590px; overflow: hidden; font-weight: 300; max-width: 485px; background-color: rgba(0, 56, 118, 0.7); color: #FFFFFF; text-transform: uppercase; font-size: 18px; line-height: 18px; padding: 8px 16px; margin-bottom: 5px; display: inline-block; }
		
		.rotatorV2TextOuter {  background-color: rgba(0, 0, 0, 0.7); padding: 8px 16px; }
		.rotatorV2TextInner { max-width: 590px; display: block; max-height: 64px; overflow: hidden; }
		.rotatorV2TextInner span { color: #FFFFFF; font-weight: 700; font-size: 26px; line-height: 32px; }

		/*Alignment*/
		.rotatorV2Content { bottom: 0; left: 0; text-align: left; position: absolute; }
		.topRight .rotatorV2Content { top: 55px; right: 0; text-align: right; }
		.topLeft .rotatorV2Content { top: 55px; left: 0; text-align: left; }
		.botLeft .rotatorV2Content { bottom: 0; left: 0; text-align: left; }
		.botRight .rotatorV2Content { bottom: 0; right: 0; text-align: right; }
		.botRight .rotatorV2Title,
		.topRight .rotatorV2Title,
		.botRight .rotatorV2TextOuter,
		.topRight .rotatorV2TextOuter { float: right; clear: right; }
		.botLeft .rotatorV2Title,
		.topLeft .rotatorV2Title,
		.botLeft .rotatorV2TextOuter,
		.topLeft .rotatorV2TextOuter { float: left; clear: left; }

	/* ====================================================================================	*/
	/* ---------- JASPR Panel Stacks    (JASPR: Javascript Advanced SharePoint Resource)
	/* ====================================================================================	*/

		/* The Home Page's Panel Stacks are layered areas (windows/panels) that have a row	*/
		/* of tabs above said panels. Clicking on a tab will bring the corresponding panel	*/
		/* to the top of the stack, while the rest of the panels in the stack remain hidden	*/
		/* (below) the current/top/active panel. The JASPR Tabs DOM hierarchy is:			*/
		/* 	div.jasprTabbedStatic															*/
		/*		div.jasprTabStaticHeaderStack												*/
		/*			span.jasprTabActive, span.jasprAuxActiveTab								*/
		/*		div.jasprTabStaticPanelStack												*/
		/*			div.jasprTabActive, div.jasprAuxActiveTab								*/	
		.jasprTabbedStatic { margin-top: 42px; width: 470px; min-height: 450px; float: left; }
		#rightPanel.jasprTabbedStatic { margin-left: 30px; }

		.jasprTabStaticHeaderStack { margin-bottom: 25px; height: 42px; line-height: 42px; text-align: center; background-color: rgb(0, 0, 0); font-size: 0; }
		.jasprTabStaticHeaderStack span { padding: 0 10px; margin-right: 1px; cursor: pointer; display: inline-block; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); font-family: 'Montserrat', 'Tahoma', sans-serif; font-size: 14px; }
		.jasprTabStaticHeaderStack .jasprTabActive { background-color: rgba(255, 255, 255, 0.25); }
		.jasprTabStaticHeaderStack span:hover, .jasprTabStaticHeaderStack .jasprTabActive:hover { background-color: rgba(255, 255, 255, 0.45); }

		.jasprTabStaticPanelStack > div { display: none; }
		.jasprTabStaticPanelStack > div.jasprTabActive { display: block; }
		.jasprTabbedStatic .empty { display: none; }

		/* These are the defaults for the panel headers, they should be overridden in the site's home-custom.css file */
		#HomePageVideoHeader:after { content: "Our Video"; }
		#profileAlumnusHeader:after { content: "What can you do with your degree?"; }
		#gettingStartedHeader:after { content: "Getting Started"; }

		/* Forcing the Home Page Video to 470 Wide x 352 Tall */
		#HomePageVideoBody iframe { width: 470px; height: 352px; }

	/* ====================================================================================	*/
	/* ---------- Home Page News Featurette
	/* ====================================================================================	*/

		.newsArticle { width: 470px; height: 95px; padding: 0 0 20px; overflow: hidden; }
		.newsArticle img { width: 150px; height: 95px; margin-right: 10px; float: left; }
		.newsTitle { position: relative; top: -2px; font-size: 15px; font-weight: 700; text-transform: uppercase; color: rgba(0, 0, 0, 0.85); }
		.newsText { max-height: 52px; overflow: hidden; margin-top: 2px; text-align: justify; font-size: 11px; color: rgba(0, 0, 0, 0.5); }
		.newsLink { position: relative; font-weight: 700; text-transform: uppercase; top: 3px; left: 12px; font-size: 10px; color: rgba(0, 0, 0, 0.7); }
		.newsLink:after { content: " "; display: inline-block; height: 7px; width: 4px; position: relative; left: 5px; opacity: 0.5; background: url("/code/core/images/arrowIcons.png") no-repeat scroll -20px -23px transparent; }
		.newsLink:hover { color: rgba(0, 0, 0, 0.25); }
		.newsLink:hover:after { opacity: 0.25; }
		#newsReadMoreButton { float: right; margin-right: 25px; }

	/* ====================================================================================	*/
	/* ---------- Home Page Events Featurette
	/* ====================================================================================	*/

		.event { width: 470px; padding: 0 0 20px; min-height: 50px;}
		.eventDate { font-weight: 600; max-width: 190px; overflow: hidden; }
		.eventTitle { font-weight: 600; max-width: 190px; overflow: hidden; }
		.eventLocation { clear: left; display: inline-block; font-weight: 600; }
		.eventEllipsis { font-weight: 600; }
		#eventsReadMoreButton { float: right; margin-right: 25px; }

	/* ====================================================================================	*/
	/* ---------- Announcements
	/* ====================================================================================	*/
		.announcementItem { position: relative; overflow: hidden; margin-bottom: 10px; } /*max-height: 430px; */
		.announcementItem .announcementTitle { font-size: 18px; font-weight: 700; text-transform: uppercase; width: 100%; padding-bottom: 10px; color: rgba(0, 0, 0, 0.88); }
		.announcementItem img.ms-rtePosition-1 { margin: 10px 10px 10px 2px; } /* Left-Aligned Image */
		.announcementItem img.ms-rtePosition-1 { margin: 10px 2px 10px 10px; } /* Right-Aligned Image */
		.announcementItem, .announcementItem p, .announcementItem div, .announcementItem span, .announcementItem a:not(.homePageButton) { color: rgba(0, 0, 0, 0.75); line-height: 160%; } 
		.announcementItem a.homePageButton { margin-top: 15px; }

	/* ====================================================================================	*/
	/* ---------- 'Getting Started' Links
	/* ====================================================================================	*/

		/* The 'Tabbed Links' is a derivative of the JASPR Panel Stacks, configured to take	*/
		/* CQWP (<ul>) Output instead of simple/tailored HTML (<div>) objects. The Tabbed	*/
		/* DOM hierarchy is:																*/
		/* 	ul.TabbedLinks																	*/
		/*		div.jasprTabCQWPHeader (div.jasprTabCQWPHeaderActive)						*/
		/*			div.jasprTabCQWPPanel													*/
		.TabbedLinks { position: relative; }
		.TabbedLinks .jasprTabCQWPHeader { width: 230px; text-transform: uppercase; color: rgba(0, 0, 0, 0.85); }
		.TabbedLinks .jasprTabCQWPHeader:hover, .TabbedLinks .jasprTabCQWPHeader.jasprTabCQWPHeaderActive { background-color: rgba(0, 0, 0, 0.08); }
		.TabbedLinks li:nth-of-type(2) .jasprTabCQWPHeader { left: 240px; }

		.TabbedLinks .GettingStartedRow { padding: 8px 0; border-bottom: 2px solid rgba(0, 0, 0, 0.08); }
		.TabbedLinks .jasprTabCQWPPanel li:last-of-type .GettingStartedRow { border-bottom: none; }
		.TabbedLinks .GettingStartedTitle { display: inline-block; width: 150px; margin-right: 10px; font-weight: bold; }
		.TabbedLinks .GettingStartedDescription { display: inline-block; width: 310px; color: rgba(0, 0, 0, 0.5); }

		.TabbedLinks .jasprTabCQWPPanel { margin-top: 45px; }
		.TabbedLinks .jasprTabCQWPPanel a, .TabbedLinks .jasprTabCQWPPanel span { font-size: 11px; color: rgba(0, 0, 0, 0.75); line-height: 160%; vertical-align: middle; }
		.TabbedLinks .jasprTabCQWPPanel a:hover { color: rgba(0, 0, 0, 0.3); }

	/* ====================================================================================	*/
	/* ---------- What Can You Do With a XYZ Degree? (A.K.A. 'Alumni Profiles')
	/* ====================================================================================	*/
		#profileAlumnusBody { position: relative; }

		.profileAlumnusItem { display: none; margin-bottom: 10px; max-height: 430px; overflow: hidden; }
		.profileAlumnusItem.showAlum { display: block; }
		.profileAlumnusName { font-size: 18px; font-weight: 700; text-transform: uppercase; width: 100%; color: rgba(0, 0, 0, 0.75); }
		.profileAlumnusJobTitle { border-bottom: 3px solid rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.35); font-size: 10px; margin-bottom: 12px; padding-bottom: 8px; }
		.profileAlumnusPicture { float: left; clear: left; padding: 6px 15px 10px 0; }
		.profileAlumnusText { max-height: 375px; }
		.profileAlumnusText, .profileAlumnusText p, .profileAlumnusText div, .profileAlumnusText span, .profileAlumnusText a { font-size: 13px; color: rgba(0, 0, 0, 0.75); line-height: 160%; } 
		#profileAlumnusBody .homePageButton { margin-top: 15px; } 

	/* ====================================================================================	*/
	/* ---------- Security Trimming
	/* ====================================================================================	*/

		/* We don't want regular users to be checking out the home page, but they still need 	*/
		/* access to root-level items, so we create a group called 'HomePageEditors', put our 	*/
		/* IT staff in that group, and then use that group to hide the various ribbon buttons	*/
		/* that would allow someone to make changes to the home page. */
		body:not(.HomePageEditors) #Ribbon\.WikiPageTab\.EditAndCheckout,
		body:not(.HomePageEditors) li#Ribbon\.WikiPageTab\.Manage,
		body:not(.HomePageEditors) a#mp1_0_3_Anchor,
		body:not(.HomePageEditors) a#mp1_0_4_Anchor,
		body:not(.HomePageEditors) a#mp1_0_5_Anchor,
		body:not(.HomePageEditors) a[id*="PageStateActionButton"]
			{display:none;}

	/* ====================================================================================	*/
	/* ---------- The 'Edit Stuff on this Page' Ribbon Addition
	/* ====================================================================================	*/

		/* Users have had a very hard time, historically, understanding that pages with web	*/
		/* parts on them have data that cannot be modified through the standard OmniPage	*/
		/* page layout. They continually check out the page accidentally and then just 		*/
		/* leave it checked out which is problematic in a number of ways, the most pressing	*/
		/* of which is that some cached web parts to not update their cache if they or 		*/
		/* the page they are living on is checked out. Users begin to see old data on the 	*/
		/* homepage and cannot understand why. So, we add a drop-down box to the SharePoint	*/
		/* Ribbon that provides users with a quick and easy way to get to the data being 	*/
		/* displayed on any given page. */
		#hpListEditMenuHolder, #hpListEditMenuBody { display: none; }
		#hpListEditMenu:hover #hpListEditMenuBody, #hpListEditMenuBody:hover { display: inline-block; }
		#hpListEditMenu { margin-right: 15px; position: relative; }
		#hpListEditMenuHeader .fa { font-size: 16px; margin-right: 5px; position: relative; top: 2px; }
		#hpListEditMenuHeader span { text-transform: uppercase; }
		#hpListEditMenuBody { position: absolute; top: 30px; }

/* ====================================================================================	*/
/* ---------- CAS In the Media on Dept Sites Home Pages
/* ====================================================================================	*/
	.HOME_CASintheMedia { margin-bottom: 20px; margin-right: 20px; }
	.HOME_CASintheMedia-Title { border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding-bottom: 2px; margin-bottom: 5px; font-size: 16px; font-weight: 600; text-transform: uppercase; }
	.HOME_CASintheMedia-CITMPublicationDate { font-weight: 600; }