/* @override https://staff.washington.edu/aazarian/UWB-Homepage/styles/home.css */

@charset "utf-8";
/* 
 ==========================================
 |       Designed by Jason Beard          |
 |   University of Washington Bothell     |
 ==========================================

 ===== Homepage CSS Document =====
 -uses 5 column grid in base.css
 -overrides some properties in reset.css
 -in use for UW Bothell homeapge ONLY
 -Uses GalleryView pluging for rotating images
 
 ===== Element tree =====

#containerWrapper
	#container
		#headerwrapper
			#header.structuralSubElement
				#logo
				#campuslinks
 				.screenReaderLinks
				#search
		#globalNavigationWrapper
			.structuralSubElement
				.screenReaderLinks
				#globalNavigation
	#zoneMain
		#topSectionWrapper
			.extradiv [allows for the curve under the top section]
			.screenReaderLinks
			#topsection
				#topStoryWrapper
					#topStory.galleryview [galleryview plugon lives here]
						#gallery
							.panel (multiple) [list items; changed and updated as needed]
		#focusItemsWrapper
			#focusItems
				.screenReaderLinks				
				#focus1 [changed and updated as needed. can be merged to create multicolumn items; refer to base.css]
				#focus2
				#focus3
				#focus4
				#focus5
		#middleLinksWrapper
			#middleLinks
				#focusIconSet
					div [changed and updated as needed. can be merged to create multicolumn items; refer to base.css]
					div
					div
					div
					div
		siteMapNavigationWrapper
			.extradiv [allows for the curve above links]
			.screenReaderLinks
			.structuralSubElement
				#siteMapNavigation
					#column1
					#column2
					#column3
					#column4
					#column5
	#zoneFooter
		#footer
			.structuralSubElement
				.screenReaderLinks
				address
				#copyright
				#contact
*/


#container{

}

/* ============================================== Header ============================================== */

#header #campuslinks a{ /* Links to UW Seattle and UW Tacoma; listed only on homepage */
	color:#ffffff;
}

/* ============================================ Top Section ============================================ */

#topSectionWrapper{ background:#39275b; }

#topSectionWrapper .extradiv{ /* sits on top of #topsection and gives curve*/
	background: url(/uwbothell/media/templateimages/homepage/topSectionWrapperBackground.png) repeat-x center top;
	width:100%; height:50px;
	position:absolute;
	left:0; /*needed for ie7 to align to left margin*/
	top:350px;
	z-index:90;
}
#topSection{
	height:400px; /* height of top story images */
}

/* ---------------------------------- Top Story ------------------------------------ */

#topStoryWrapper{
	min-height:400px;
	max-height:400px;
}
#topStory { visibility: hidden; } /* Gallery*/

#topStory .gallery { background: #39275b; border: 0; padding: 0px;} /* Gallery Container */

#topStory .gallery h2{ /* hides the h2 to folks who can see the graphic */
	position:absolute;
	left:-5000px;
}
/*#topStory .panel h2{ 
	position:absolute;
	left:5000px;
}*/

#topStory .panel { /*  */
	overflow:hidden;

}

#topStory .panel p{
	color:#ffffff;
	width:536px;
	font-size:1.3em;
}


.loader { background: #39275b url(/uwbothell/media/templateimages/homepage/loader.gif) center center no-repeat; } /* LOADING BOX */

/* ----- Gallery Panels (big pictures)----- */

/* Panel Overlay */
.panel .panel-overlay, .panel .overlay-background { /* .panel-overlay holds text, overlay-background is semitransparent background */
	top:240px; 
	left:0px; 
	height: 4em; 
	padding: 0 1em;}
	
.panel .overlay-background { /* overlay-background is semitransparent background */
	background: #39275b; 
	/* opacity is set in javascript */
}
.panel .panel-overlay { color: #ffffff; font-size: 0.7em; }
.panel .panel-overlay p a { color: #ffffff; text-decoration: underline; font-weight: bold; }

/* Panel No-Show:  */
.panel .panel-noshow p a { /* defaults to the whole frame size, minus the height of the curve (50px) */
	position:absolute; 
	top:0; 
	left:0;
	height:350px; 
	width:560px; 
	display:block; 
	background:url(x);
}
.panel .panel-noshow p a span{ /* for text inside link */
	color: #ffffff; 
	text-decoration: underline; 
	font-weight: bold; 
	position:absolute; left:-5000px;
}

/* Panel No-Show:  */
.panel .panel-alert p a { /* defaults to the whole frame size, minus the height of the curve (50px) */
	position:absolute; 
	top:0; 
	left:0;
	height:350px; 
	width:560px; 
	display:block; background:url(x);
	text-decoration:none;
}
.panel .panel-alert p a span {
	color:#FFFFFF;
	display:block;
	font-size:12px;
	height:115px;
	left:0;
	line-height:14px;
	margin-left:45px;
	position:absolute;
	top:135px;
	width:475px;
}


/* Gallery Filmstrip - This is unused in current website */
.filmstrip { margin: 5px; } /* 'margin' will define top/bottom margin in completed gallery */
.frame {} /* FILMSTRIP FRAMES (contains both images and captions) */
.frame .img_wrap { border: 1px solid #aaa; }/* WRAPPER FOR FILMSTRIP IMAGES */
.frame.current .img_wrap { border-color: #fff; }/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */
.frame img { border: none; }/* FRAME IMAGES */
.frame .caption { font-size: 11px; text-align: center; color: #888; }/* FRAME CAPTION */
.frame.current .caption { color: #000; }/* CURRENT FRAME CAPTION */
.pointer { border-color: #000; }/* POINTER FOR CURRENT FRAME */
*html .pointer { filter: chroma(color=pink); }/* TRANSPARENT BORDER FIX FOR IE6 : NOTE - DO NOT CHANGE THIS RULE */



/* ------------------------------ Audience Based Navigation ------------------------------- */

#audienceList{ /* this is a ul */
	margin:0;
	float:left;
	padding-top: 8px;
}
.audienceName{ /* top items*/
	float:left;
	display:block;
	height:50px;
	width:360px;
	padding-bottom: 8px;
}
.audienceName a, .audienceName a:visited{ /* 1st and 2nd level items */
	line-height: 1em;
	font-size:1.5em;
	color:#ffffff;
	text-decoration:none;
}
.audienceName a:hover{
	color: #A39150;
}
.audienceName .audienceListItems{ /* these are ULs of the subitems*/
	margin:0;
	list-style-type:none;
}

.audienceName:hover .audienceListItems{
	display:block;
}
.audienceName .audienceListItems li{/* subitems */
	float:left;
	height:1.2em;
}
.audienceName .audienceListItems li a{ 
	padding:0 12px 0 0;
	line-height: 12px;
	font-size:12px;
}

/* =========================================== Focus Items =========================================== */
#focusItemsWrapper{
	z-index:95; 
}
#focusItems{
	margin-top:10px;
	position:relative;
}
.focusItem{
	padding: 0 8px 8px 8px;
	min-height:370px;
	background: url(/uwbothell/media/templateimages/homepage/focusItemBackground2.jpg) center bottom no-repeat; /* 1/8/10 */
	/*background: url(/uwbothell/media/templateimages/homepage/focusItemBackground.jpg) center bottom no-repeat;*/
	margin-bottom:20px;
}
.focusItem.span_2{
	background: url(../uwbothell/media/templateimages/homepage/focusItemBackground2col2.jpg) center bottom no-repeat; 
}

/* ------------------------ News Items ------------------------- */
/* ------------------------ Columns 1-4 ------------------------ */

.focusItem h4{
	color:#39275b;
	margin: 0 ;
	padding: .2em 4px .2em 4px;
	font-weight:bold;
}
.focusItem.span_2 h4{/* .focusDescription heading for a wider box */
	padding: 0 10px;
	font-size: 16px;
	line-height: 20px;	
}
.focusImageWrapper {
	position:relative;
}
.focusImageWrapper img{ /* focus items must be 176px by 132px if they're one colun wide. There is a template in the Images folder */
	width:176px; 
	height:132px;
	display:block; /* 1/8/10 */
	padding-top:6px; /* 1/8/10 */
}
.focusItem p{ /* .focusDescription */
	padding: 0 4px;
}
.focusItem.span_2 p{/* .focusDescription for a wider box */
	padding: 0 10px;	
}

.focusItem ul{ /* .focusDescription */
	list-style:none;
	margin:.5em 0 .5em 0;
	padding:0 4px 0 4px;
}
.focusItem a{
	color: #39275b;
}
.focusItem a:hover{
	color: #A48957;
}


/* ------------------------ Info Sessions ------------------------ */
/* --------------------------- Column 5 ------------------------- */
#focus5{
	padding-top:0;
	background: url(/uwbothell/media/templateimages/homepage/focusItemInfosessionsBackground4.jpg) bottom center no-repeat;
}
#focus5 h3{
	font-size: 1.5em;
}
#focus5 h3 span{
	position:absolute;
	left:-3000px;
}
#focus5 p{
	color:#333333;
}
#focus5 #infoSessions{ /* this is a DL */
	border-top:0;
	padding:70px 8px 0px 8px;
	line-height:1.2em
}
#focus5 #infoSessions dt{
	color:#39275b;
}
#focus5 #infoSessions dd { 
	margin-left:0;
	padding-bottom:.8em;
}
#focus5 #infoSessions dd a,#focus5 #infoSessions dd a:visited{
	color:#39275b;
}
#focus5 #infoSessions dd a:hover{
	color:#C7B164;
}

/* ============= Middle Links ============= */

#middleLinksWrapper{
	padding-top:30px;

}
#middleLinks{
	height:90px;
}
.focusIconSet { 
	margin: 0 -8px; /* overrides the 8px gutter to allow shadows of the images to use this space, while still appearing to the eye to be only one column wide */
}
.focusIconSet .icon a{
	display:block;
	width:192px;
	height:76px;
}
.focusIconSet .icon a span{
	position:absolute;
	left:-5000px;
}
.focusIconSet #apply a{ background:url(../uwbothell/media/homepage/icons/iconSetApplyWI10.png) center top no-repeat; }
.focusIconSet #visit a{ background:url(../uwbothell/media/homepage/icons/iconSetVisit.png) center top no-repeat; }
.focusIconSet #advisor a{ background:url(../uwbothell/media/homepage/icons/iconSetAdvisor.png) center top no-repeat; }
.focusIconSet #h1n1 a{ background:url(../uwbothell/media/homepage/icons/iconSetDirections.gif) center top no-repeat; }
.focusIconSet #gift a{ background:url(../uwbothell/media/homepage/icons/iconSetGift.gif) center top no-repeat; height:76px;}
.focusIconSet #alert a{ background:url(../uwbothell/media/homepage/icons/iconSetAlert.gif) center top no-repeat; height:76px;}
.focusIconSet #century a{ background:url(../uwbothell/media/homepage/icons/iconSet21stcentury.gif) center top no-repeat; height:76px;}
.focusIconSet #sns { background:none; }


#socialNetworkLinks{ /* unordered list */
	list-style-type:none;
	margin:0;
	float:left;
	background:url(../uwbothell/media/homepage/icons/socialNetworkIcons.gif) center top no-repeat;
	width:100%;
	margin-left: 5px;
}
#socialNetworkLinks li{
	float:left;
	display:block;
	margin: 33px 0 0 3px;
}
#socialNetworkLinks #youtube{ margin-right:0; } /* YouTube link is last in the list doesn't need a margin*/

#socialNetworkLinks li a{
	display:block;
	width:31px;
	height:31px;
}
#socialNetworkLinks li a span{ /* for accessibility */
	position:absolute;
	left:-5000px;
}


/* ============= SiteMap Navigation ============= */


#siteMapNavigationWrapper {
	background: #ffffff url(/uwbothell/media/templateimages/homepage/siteMapNavigationBackground.png) repeat-x center top;
	z-index:1;
}
#siteMapNavigationWrapper .extradiv{ /* sits on top of #siteMapNavigation and gives curve */
	background: url(/uwbothell/media/templateimages/homepage/siteMapNavigationExtradiv.png) repeat-x center top;
	width:100%; height:70px;
	position:absolute;
	top:0px;
	left:0; /*needed for ie7 to align to left margin*/
	z-index:90;
}

#siteMapNavigation{ }

#siteMapNavigationWrapper h2{
	color:#ffffff;
	display:none;
}

#siteMapNavigation h3{
	color:#39275b;
	margin-top:70px;
	margin-bottom:.2em;
	border-bottom:1px solid #61517e;
	font-weight:bold;
}

#siteMapNavigation ul{
	list-style:none;
	padding-left:0;
	margin-left:0;
}
#siteMapNavigation li{
	line-height:1.2em;
	padding-bottom:.5em;
}
#siteMapNavigation a{
	color: #39275b;
	text-decoration:none;
}
#siteMapNavigation a:hover{
	text-decoration:underline;
}

#footer{
	background: #39275b url(/uwbothell/media/templateimages/base/footerBackground-white.jpg) repeat-x center top; /* overrides base.css style */
	/* other footer styles are in base.css */
}

/* A.A. Styles */


span.alertNotification strong.alertheader{
	font-size: 22px;
}
strong.alertheader{
	margin-bottom: 20px;
	display: block;
	font-size: 24px;
	line-height: 28px;
	text-align: center;
	font-size: 16px;
	color: #ffe775 !important;
	
}

.panel .panel-alert p a span {
	height:210px;
	top:85px;
	width:520px;
	padding: 15px;
	margin-left:0px;
	font-size: 13px;
	line-height: 19px !important;

}
.panel .panel-alert p a span.alertNotification {
	height:240px;
	top:85px;
	width:500px;
	padding: 15px 25px;
	margin-left:0px;
	font-size: 13px;
	line-height: 20px;

}