/*==========================================================================================
Filename:		campus.css
Purpose:		Provides basic column structure to web templates. Establishes default widths 
				and margins, default colors, typography and visual thematic elements
Created by:		Strategic Communications
Created:		12/05/10
Last Modified:	6/24/13 12:00 (mblyleven@fullerton.edu)
===========================================================================================*/

/*============================================
CHANGE LOG AT BOTTOM
============================================*/


/*============================================
TYPOGRAPHY
============================================*/

/*************************************************************************
* A note on using relative font sizes:                                   *
* -----------------------------------------                              *
* When setting the font-size for an element, assign the font-size        *
* attribute SPECIFICALLY TO THE ELEMENT that needs the custom font-size, *
* either by creating a class to hang directly on the element or          *
* by using the element's parent container as an additional specifier.    *
*                                                                        *
* Otherwise the font size modifiers will stack and the end result        *
* will end up being an odd multiplier of the original intended size.     *
* The key is to overwrite the original declaration, not inherit it.      *
*                                                                        *
* Example: Assuming 16px base size                                       *
*                                                                        *
* -DEFAULT TEMPLATE SETTING-                                             *
* p {font-size:87.5%;}                                                   *
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>Result: (16*.875=14px)          *  
*                                                                        *
* -BAD EXAMPLE-                                                          *
* .myContainer {font-size:75%;}                                          *  
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>Result: (16*.75*.875=10.5px)    *
*                                                                        *
* -GOOD EXAMPLE-                                                         *
* .myContainer p {font-size:50%;}                                        *
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>Result: (16*.5=8px)             *
*                                                                        *
* -GOOD EXAMPLE-                                                         *
* p.customFontSize {font-size:350%;}                                     *
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>Result: (16*3.5=56px)           *
*                                                                        *
*************************************************************************/

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	background:url("../images/CampusCSS/bg-body.jpg") top repeat-x;
	background-color:transparent;
	color:#000;}

a:link, a:visited {
	color:#06c;
	text-decoration:none;}
	
a:hover, a:focus {
	color:#f60;
	text-decoration:underline;}
	
a:focus {outline:thin dotted;}

h1 {
	margin-bottom:20px;
	font-family:"Times New Roman", Times, serif;
	font-size:262.5%;
	font-weight:normal;
	letter-spacing: -1px;
	line-height:40px;
	color: #333;}
	
h2 {
	font-size:112.5%;
	color:#222;}
	
h3 {
	font-size:100%;
	color:#222;}

h4 {font-size:87.5%;}

h5 {font-size:75%;}

h6 {font-size:68.75%}

ul {list-style:none;}

p, li{
	font-size:87.5%;
	line-height:1.6;
	color:#222;}
	li p {font-size:100%;}
	
blockquote {
	width:500px;
	padding:10px;
	border-color:#666;
	border-style:solid;
	border-width:2px 0;
	margin-top:30px; margin-bottom:30px;
	font-family:"Times New Roman", Times, serif;
	font-size:112.5%;
	line-height:1.8;
	text-transform:uppercase;
	color:#C60;}
	
b {font-weight:bold;}
i {font-style:italic;}

/*============================================
LAYOUT:	Aligns content areas to create a 1, 2 or 3 column layout
============================================*/

/* =A TEMPLATE: sidebar on left
---------------------------------------------*/
.templateA #main { /*margin-left = sidebar1 + 20px gutter */
	float:left;
	display:inline;
	width:750px;
	padding-top:10px;
	margin-left:210px;}
	
.templateA #sidebar1 { /*margin-left = -1 * (full grid width) */
	float:left;
	width:190px;
	padding-top:10px;
	margin-left:-960px;}
	
.templateA #sidebar2 {display:none}

/* =B TEMPLATE: sidebar on right 
---------------------------------------------*/
.templateB #main {
	float:left;
	display:inline;
	width:750px;
	padding-top:10px;}

.templateB #sidebar1 {/*margin-left = 20px gutter */
	float:left;
	width:190px;
	padding-top:10px;
	margin-left:20px;} 

.templateB #sidebar2 {display:none}

/* =C TEMPLATE: single column with no sidebars
---------------------------------------------*/
.templateC #main {
	float:left;
	width:960px;
	display:inline;
	padding-top:10px;}
	
.templateC #sidebar1 {display:none}

.templateC #sidebar2 {display:none}

/* =D TEMPLATE: main content area with left and right sidebars
---------------------------------------------*/
.templateD #main { /*margin-left = sidebar1 + 20px gutter */
	float:left;
	display:inline;
	width:540px;
	padding-top:10px;
	margin-left:210px;} 

.templateD #sidebar1 { /*margin-left = -1 * (sidebar1 + 20px gutter + main) */
	float:left;
	width:190px;
	padding-top:10px;
	margin-left:-750px;}  

.templateD #sidebar2 {
	float:left;
	width:190px;
	padding-top:10px;
	margin-left:20px;}
	
/* =E TEMPLATE: sidebar on left, main column divided into 3 separate editable content regions
---------------------------------------------*/	
.templateE #main { /*margin-left = sidebar1 + 20px gutter */
	float:left;
	display:inline;
	width:750px;
	padding-top:10px;
	margin-left:210px;}
	
.templateE #sidebar1 { /*margin-left = -1 * (full grid width) */
	float:left;
	width:190px;
	padding-top:10px;
	margin-left:-960px;}
	
.templateE #sidebar2 {display:none}

.templateE .leftCol, .templateE .rightCol {width:365px; float:left;}

.templateE .leftCol {margin-right:20px;}

/* =F TEMPLATE: modification of Template D that adds two content regions to the top of div#main: div#banner and div#spotlights 
				the layout is functionally identical to Template D
---------------------------------------------*/				
.templateF #main {
	float:left;
	display:block;
	width:540px;
	margin-left:210px;}
	
.templateF #sidebar1 {
	float:left;
	display:block;
	width:190px;
	margin-left:-750px;}
	
.templateF #sidebar2 {
	float:left;
	display:block;
	width:190px;
	margin-left:20px;}

#spotlights {
	float:left;
	margin-top:10px;}
	#spotlights p {
		float:left;
		margin-right:15px;}
		#spotlights p.last {margin-right:0;}

/* =G TEMPLATE: Emulates campus homepage (as of 3/2010). 5 main content regions, div#banner, div#bannernav, div#columnOne, div#columnTwo, div#columnThree
---------------------------------------------*/
.templateG #bannerMain {
	float:left;
	display:block;
	width:750px;
	margin-left:210px;}
	
.templateG #bannerNav {
	float:left;
	display:block;
	width:190px;
	margin-left:-960px;}

.templateGColumn {
	float:left;
	width:310px;
	margin-top:15px;
	margin-right:15px;}
	#columnThree.templateGColumn {margin-right:0;}

/* =R TEMPLATE: modification of Template G that adds a slideshow with editable elements, with a lower page constructed from Template D
---------------------------------------------*/				
.templateR #bannerMain {
	float:left;
	display:block;
	width:750px;
	margin-left:210px;}
	
.templateR #bannerNav {
	float:left;
	display:block;
	width:190px;
	margin-left:-960px;}

.templateR #main {
	clear:left;
	float:left;
	display:block;
	width:540px;
	margin-left:210px;}
	
.templateR #sidebar1 {
	float:left;
	display:block;
	width:190px;
	margin-left:-750px;}
	
.templateR #sidebar2 {
	float:left;
	display:block;
	width:190px;
	margin-left:20px;}
	
/* =K TEMPLATE: a css class modification to templates A/B/C/D/E that adds padding for a background image on div#main 
---------------------------------------------*/
.modK #content .gutter {padding-top:200px}

/* =COLUMNS: classes that can be added to block-level elements to create equally-sized and spaced columns
---------------------------------------------*/
.columnQuarter {float:left; margin:10px; width:220px;}
	.columnQuarter.shadowed, .columnQuarter.dotted {margin-left:7px; margin-right:7px;}
.columnHalf {float:left; margin:10px; width:460px;}
	.columnHalf.shadowed, .columnHalf.dotted {margin-left:7px; margin-right:7px;}

.columnThird {float:left; margin:10px; width:300px;}
	.columnThird.shadowed, .columnThird.dotted {margin-left:7px; margin-right:7px;}

.columnTwoThirds {float:left; margin:10px; width:620px;}
	.columnTwoThirds.shadowed, .columnTwoThirds.dotted {margin-left:7px; margin-right:7px;}

.columnThreeQuarters {float:left; margin:10px; width:700px;}
	.columnThreeQuarters.shadowed, .columnThreeQuarters.dotted {margin-left:7px; margin-right:7px;}
	
.columnFullWidth {float:left; margin:10px; width:938px;}
	.columnFullWidth.shadowed, .columnFullWidth.dotted {margin-left:7px; margin-right:7px;}	
	
.shadowed {box-shadow:0 0 3px 3px #eee; padding:2px; border:1px solid #e5e5e5;}
.dotted {border:1px dotted #000;}


/*
<ul> nav menu with thumbnails;
Designed to be used as a child element of .columnQuarter/Half/Third/TwoThirds
---------------------------------------------*/
ul[role="navigation"].thumbs li {
	float:left;
	background-image:none;
	padding-left:10px;
	clear:both;}
	.thumbs li a {float:left;}

	.columnQuarter .thumbs li {width:200px;}
	.columnQuarter .thumbs li a + a {max-width:120px;}
	.columnThird .thumbs li {width:280px;}
	.columnThird .thumbs li a + a {max-width:200px;}
	.columnHalf .thumbs li {width:440px;}
	.columnHalf .thumbs li a + a {max-width:360px;}
	.columnTwoThirds .thumbs li {width:620px;}
	.columnTwoThirds .thumbs li a + a {max-width:440px;}

	
.eventIcon + p {clear:none;}
.eventIcon {float:left; margin:0 0 10px 10px; clear:both;}

.eventIcon span 
{   float:left; 
    clear:left; 
    border:1px solid #ccc; 
    text-align:center; 
    min-width:34px; 
    padding:1px;}
    
.eventIcon .eventMonth 
{text-transform:uppercase; font-size:62.5%; border-bottom:none; background-color:#c60; color:#fff; 
 border-top-left-radius:4px; border-top-right-radius:4px; padding-top:2px; padding-bottom:2px;}

.eventIcon .eventDay 
{border-top:none;
  background:url("../images/CampusCSS/gradient-calendarIcon.png") bottom repeat-x; color:#666; font-weight:bold; border-bottom-left-radius:4px; border-bottom-right-radius:4px; padding-top:4px; padding-bottom:4px; font-size:87.5%}


/* =CONTENT: forces a white background for the primary content area, allowing a darker background for the header and footer
			in order to comply with accessibility guidelines
---------------------------------------------*/
#content {background-color:#fff;}

/* =WRAP: Assigns fixed width and centers layout. Background images on body will appear behind content contained within a .wrap
			Elements not contained within a wrap will fill the browser window, e.g. default footer
---------------------------------------------*/
.wrap {
	/*width:980px;*/
	margin:0 auto;}
	#content.wrap {
		/*width:1000px;*/
		background:url("../images/CampusCSS/bg-shade.png") no-repeat top transparent;}

/* =GUTTER: Creates 10px #fff gutter between the page background and the primary page content 
---------------------------------------------*/
.gutter {
	/*width:960px;*/
	margin:0 auto;}
	#content .gutter {
		padding-bottom:10px;
		background-color:#fff;}
		
/*============================================
=MACROBAR
============================================*/
#macrobar {
	min-height:35px;
	color:#fff;
	background-color:#002e5b;}
	#macrobar .wrap {background-color:transparent;}
	#macrobar .gutter {position:relative;}
	#macrobar h3 {
		overflow:hidden;
		float:left;}
#macronav {
	float:right;
	padding-top:8px;
	padding-right:15.25em;}	
	#macronav li {
		display:inline;
		float:left;
		font-size:75%;}	
		#macronav li a {
			padding:0 8px;
			border-right:solid 1px #fff;
			text-decoration:none;
			text-transform:uppercase;
			color:#fff;
			background-image:none;}
			#macronav li.last a {border-right:none;}
			#macronav li a:hover, #macronav li a:focus, #macronav li a:active {
				text-decoration:underline;}

/* =WORDMARK: CSUF identifier and link to campus homepage;
---------------------------------------------*/
/* The following code creates an ADA-compliant image that will swap out for an <h#> tag when images or css are disabled */

#wordmark {text-indent:-100em;}
#wordmark, #wordmark span {
	width:350px;
	height:35px;
	background-image: url("../images/CampusCSS/wordmark-navy.png");
	background-repeat: no-repeat;}
	
#wordmark span {
	display:block;
	position:relative;
	margin-bottom:-35px;
	z-index:1;}

#wordmark:hover, #wordmark:focus, #wordmark span:hover, #wordmark span:focus {background-position:0 -35px; cursor:pointer;}

#wordmark a {color:#fff;}

/* Original, text-only wordmark. The typography renders poorly, so an image-based solution was implemented.
#wordmark {	padding:10px 0;	font-family:"Times New Roman", Times, serif; font-size:87.5%; font-weight:400; letter-spacing:1px; text-transform:uppercase;}
#wordmark a {color:#fff;}
*/

/* =SEARCH
---------------------------------------------*/
#search {
	position:absolute;
	top:0;
	right:0;
	float:right;
	min-height:50px;
	padding:6px 12px 12px;
	line-height:1;
	background:url("../images/CampusCSS/bg-search.png") transparent top repeat-x;}
	
	#search label span {
		position:absolute;
		top:-300px;
		display:block;}
	#search #searchCSUF {
		display:inline-block;
		float:left;
		border:1px solid #999;
		color:#333;
		background-color:#fff;}
	#search button {
		border:1px solid #fff;
		margin-left:4px;
		vertical-align:middle;
		color:#fff;
		background-color:#444;}
	#search button:hover {
		cursor:pointer;
		background-color:#f60;}


#searchRadioBtns {
	position:absolute;
	top:34px;
	left:6px;}
	#searchRadioBtns label {
		float:left;
		margin-top:3px;
		font-size:75%;
		text-transform:uppercase;}
	#searchRadioBtns input {
		float:left;}

/*============================================
=HEADER
============================================*/

#header {clear:both;}
	#header.wrap {background-color:#0F3C73;}
	#header .gutter {background:url("../images/CampusCSS/bg-header.jpg") top no-repeat;}

/* =BRANDING: Contains primary site name and unit identification
---------------------------------------------*/
#branding {float:left;margin:8px 0;}
	#branding a {color:#fff;background-image:none;}
		#branding a:focus, #branding a:hover {text-decoration:underline;}

#unit {font-family:"Times New Roman", Times, serif;}

#sitename {
	font-family:"Times New Roman", Times, serif;
	font-size:200%;
	line-height:1.5;}

/* =SITENAV: #sitenav denotes primary site navigation
.navbar class can be applied to any parent div to create a horizontal navigation bar
---------------------------------------------*/
.navbar {
	clear:both;
	float:left}
	.navbar ul {
		display:inline;
		float:left;
		padding-left:0;
		color:#fff;}	
		.navbar ul li {display: inline}	
			.navbar ul li a {
				display:block;
				float:left;
				padding:8px 12px;
				margin-right:1px;
				text-decoration:none;
				text-transform:uppercase;
				color:#fff;
				background:url("../images/CampusCSS/bg-navbar-tab.png") top transparent;}
				.navbar ul li.last a {
					border-right:none;}
			.navbar ul li a:focus, .navbar ul li a:hover {
				text-decoration:underline;
				color:#666;
				background-color:#fff;
				background-image:none;}	


/* =PAGETOOLS: Font size-switcher, print view, "ShareThis" button (when enabled & configured), breadcrumb
---------------------------------------------*/
#pagetools {
	padding:6px 0;
	margin-bottom:5px;
	background-image:url("../images/CampusCSS/bg-pagetools.jpg");
	background-repeat:no-repeat;}
	#pagetools p {
		display:inline-block;
		float:right;
		padding:0 10px;
		margin:0; 
		font-size:75%;
		color:#666;}
	#pagetools a, #pagetools a:visited {color:#666;}
	#pagetools a:active, #pagetools a:hover {color:#f60;}
	#pagetools li {
		display:inline;
		margin-right:15px;}
	#pagetools span {
		float:left;
		margin-right:10px;}

#btn-print {
	padding-left:17px;
	background:url("../images/CampusCSS/icon-print.gif") no-repeat left;}

#fontsizeswitcher a {
	display:block;
	position:relative;
	float:left;
	width:23px;
	height:23px;
	margin-right:5px;
	background:no-repeat 0 0;}
	#fontsizeswitcher a:hover, #fontsizeswitcher a:active {background-position:0 -23px;}
	#fontsizeswitcher a span {
		position:absolute;
		top:0;
		left:0;
		margin-top:-2000px;}

a#smallText {background-image:url("../images/CampusCSS/icon-fontSmall.gif");}
a#mediumText {background-image:url("../images/CampusCSS/icon-fontMed.gif");}	
a#largeText {background-image:url("../images/CampusCSS/icon-fontLarge.gif");}	

#breadcrumb {clear:both;color:#666; margin-bottom:30px;}
#breadcrumb ul {margin:0; list-style:none;}
#breadcrumb li {display:inline;float:left; line-height:1; margin:0; font-size:75%;}

#breadcrumb a {
	padding-right:26px;
	text-decoration:none;
	background-image:url("../images/CampusCSS/breadcrumb.gif"); 
	background-position:right;
	background-repeat:no-repeat;}
	#breadcrumb a:hover, #breadcrumb a:focus {text-decoration:underline;}	

/*============================================
=CONTENT
============================================*/

/*
=MAIN
---------------------------------------------*/

/*.copy is a div wrapped around the main editable content region. it contains additional typographic styles */
.copy a {text-decoration:underline;}
.copy ul {
	margin-left:15px;
	margin-bottom:15px;
	list-style:disc;
	color:#222;}
.copy li {
	margin-bottom:5px;
	line-height:1.4;}
.copy p {margin-bottom:20px;}
.copy h2, .copy h3, .copy h4 {margin-bottom:10px;}

.subhead1 {
	font-size:100%;
	text-transform:uppercase;
	color:#326781;}
	
.subhead2 {
	font-family:"Times New Roman", Times, serif;
	font-size:100%;
	font-style:italic;
	font-weight:bold;
	color:#222;}
	
.small-headline {
	margin-bottom:0;
	font-size:68.75%;
	font-weight:bold;
	letter-spacing:2px;
	text-transform:uppercase;
	color:#666;}

/* arrow-list replaces default UL bullet with a small grey arrow */
ul.arrow-list {
	margin-left:15px;
	margin-bottom:15px;
	list-style:none;
	list-style-image:url("../images/CampusCSS/arrow-list.png");}
	ul.arrow-list li {
		margin-bottom:5px;
		line-height:1.4;}

.photobox {
	float:right;
	width:300px;
	padding:3px;
	border:1px solid #ccc;
	margin-left:15px;}
	.photobox p {
		font-size:68.75%;
		line-height:1.2;
		color:#555;}

.blockquoteCitation {
	display:block;
	text-align:right;
	text-transform:none;
	color:#000;
	font-style:italic;
	font-size:87.5%;}
		
/* =SIDEBAR
---------------------------------------------*/

/*------------------------------------------------------------
the following classes set up background gradients for sidebars
------------------------------------------------------------*/
.templateA #sidebar1,
.templateD #sidebar1,
.templateE #sidebar1 {background:url("../images/CampusCSS/bg-sidebar1.jpg") repeat-y;}

.templateB #sidebar1,
.faculty #sidebar2 {background:url("../images/CampusCSS/bg-sidebar2.jpg") repeat-y;}

.sidebarfade { /* transitions sidebar background gradient from grey to solid white */
	display:block;
	width:190px;
	height:140px;
	background:url("../images/CampusCSS/bg-sidebar1-fade.jpg") no-repeat;}
	.templateB #sidebar1 .sidebarfade,
	#sidebar2 .sidebarfade {background:url("../images/CampusCSS/bg-sidebar2-fade.jpg") no-repeat;}

/* sectionnav styles each folder's _navigation.inc file */
.sectionnav {margin-bottom:16px;}
	.sectionnav li {
		border-bottom:1px solid #fff;
		font-size:81.25%;}
	.sectionnav a {
		display:inline-block;
		width:186px;
		padding:4px 0 4px 4px;
		border-bottom:1px solid #eaeaea;
		font-weight:bold;}
	.sectionnav li.heading {
		border:none; 
		font-weight:bold;
		padding:6px 0 4px 4px;}
	.sectionnav li.sub a {
		padding-left:16px;
		width:174px;}
/*
		.sectionnav .heading p {
		border-bottom:1px solid #eaeaea;
		padding:4px 0 4px 4px;}
*/
/* .sideblock is a containing div for each editable region in the sidebar */
.templateA #sidebar1 .sideblock,
.templateD #sidebar1 .sideblock,
.templateE #sidebar1 .sideblock,
.faculty #sidebar1 .sideblock {padding-right:10px;}

.templateB #sidebar1 .sideblock,
.templateB #sidebar1 .sectionnav,
.faculty #sidebar2 .sideblock {padding-left:10px;}

/* the faculty template sidebars are both given background gradients, as well as have additional typographical modifications */
.faculty .sideblock p, .faculty .sideblock li {font-size:75%;} 
	
/* sidebarBox1 has a grey header and transparent background */
.sidebarBox1 {
	padding:0 10px 10px;
	border:1px solid #ccc;
	border-top-width:3px;
	margin-bottom:20px;
	background-color:#fff;
	background-image:url("../images/CampusCSS/bg-sidebarBox.jpg");
	background-position:top;
	background-repeat:repeat-x;}
	.sidebarBox1 h2 {
		padding:5px;
		margin-bottom:10px;
		font-size:81.25%;
		font-weight:normal;
		text-transform:uppercase;
		color:#555;
		background-color:#ccc;}
	.sidebarBox1 p {
		font-size:75%;
		line-height:1.2;
		color:#555;}
	.sidebarBox1 li {
		margin-bottom:3px;
		font-size:75%;}

/* sidebarBox2 is built to have a solid background color with a triangular notch in the bottom right */
.sidebarBox2 {
	padding-bottom:16px;
	margin-bottom:20px;
	background:url("../images/CampusCSS/bg-corner-white.png") no-repeat bottom right;}
	.sidebarBox2 h2 {
		padding:8px 10px;
		margin-bottom:0;
		font-size:81.25%;
		text-transform:uppercase;}
	.sidebarBox2 p {
		padding:10px 10px 20px;
		font-size:75%;
		line-height:1.2;
		color:#444;}
	.sidebarBox2 ul {margin:10px 25px;}
	.sidebarBox2 li {font-size:75%;}

/* the following classes are designed to color sidebarBox2 */
.blue {background-color: #D6EFF4;}
	.blue h2 {background-color:#B1D3DC;}
.beige {background-color:#EFEBE0;}
	.beige h2 {background-color:#DFDBD1;}
.gray {background-color:#E1E1E1;}
	.gray h2 {background-color:#96938E; color:#fff;}

/* the button ("btn") class is applied to a <div> 
containing an <a> element, making it appear as a button.
Using a DIV is preferred over LI and P because 
<li> and <p> have additional typographic styles 
associated with them */
.btn a {
	display:block;
	width:168px;
	height:32px;
	margin:0 auto;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:400;
	line-height:32px;
	text-align:center;
	text-transform:uppercase;
	color:#fff;}
.btn a:hover, .btn a:focus {
	text-decoration:underline;
	background-position:0 -32px;}

a.btn-blue {background-image:url("../images/CampusCSS/btn-blue.gif");}
a.btn-orange {background-image:url("../images/CampusCSS/btn-orange.gif");}

/*============================================
=FOOTER
============================================*/
#footer {background:url("../images/CampusCSS/bg-footer.jpg") top repeat-x #00172f;}
	#footer .wrap {background-color:transparent;}
	#footer .gutter {padding:15px 0;}
.logo {
	float:left;
	padding-right:15px;
	border-right:1px solid #ccc;}
.disclaimer {
	float:left;
	padding:4px 0 0 15px;
	font-size:75%;
	color:#999;}
.disclaimer a {
	text-decoration:underline;
	color:#999;}

/*--------------------------------------------
FOOTER NAVIGATION
--------------------------------------------*/
.footerNavigation {
	background-color:#444;
	background-image:url(../images/CampusCSS/bg-footer-navigation.jpg);
	background-repeat:no-repeat;
	background-position:center bottom;
	padding:10px 0;}
.footerNavigation a:link, .footerNavigation a:visited {color:#e4e4e4; font-size:87.5%;}
.footerNavigation a:hover, .footerNavigation a:active {color:#f60;}
.footerNavigation h4 {color:#f60; margin-bottom:.5em;}
.footerNavigation li {color:#e4e4e4; padding:4px 0;}
.footerNavigation li.sub {list-style:square; list-style-position:inside; padding-left:5px;}
.footerNavTitle {text-align:center; color:#f60; margin:.5em; font-size:87.5%; text-transform:uppercase;}

/*============================================	
=FACULTY: the faculty profile template
============================================*/
.faculty #content h1 {margin-bottom:5px;}
.faculty #content h2 {font-family:"Times New Roman", Times, serif; font-weight:200; font-size:87.5%; text-transform:uppercase; letter-spacing:1px; margin-bottom:50px;}
.faculty #content h3 {margin-top:30px;}
.faculty #content p {margin-bottom:0px;}
.faculty #content .subhead1 {color:#444; font-size:87.5%;}

.announcement {padding:10px; border:1px solid #ccc; background:url("../images/CampusCSS/bg-sidebarBox.jpg") repeat-x top; margin-bottom:30px;}
.faculty #content .announcement h3 {margin-top:15px;}

#facultyTitle {line-height:1.25}
.faculty-portrait {padding:5px; background-color:#efefef; border:1px solid #ccc;} /*to be removed after next design.xsl update*/
.profilePic img  {padding:5px; background-color:#efefef; border:1px solid #ccc;}

.im {float:left; margin-right:5px;}

/*============================================
=UTILITY
============================================*/
.floatL {float:left;}
.floatR {float:right;}

/*
.hide is used to provide additional text for users of assistive technology while at the same time obfuscating it from standard users.
Example:The word "CAPTION" prefacing an image caption will allow screen reader users to better associate an image with a nearby block of text,
but the class will hide the otherwise redundant word for visual users.
<p><img src="foo.jpg" alt="A foo in the wild"/><span class="hide">CAPTION:</span>Green-tailed foos such as... (etc)</p>
USE SPARINGLY - This technique is often used in Black Hat SEO and can incur penalties from search engines.
*/
.hide {position:absolute; margin-left:-2000em;}

/*--------------------------------------------
TABLE STYLES
--------------------------------------------*/
.tableHoriz, .tableVert {max-width:540px; margin-bottom:20px;}
.tableHoriz thead, .tableVert thead {border:1px solid #000; background-color:#A8C7E5}
	.tableHoriz thead td, .tableVert thead td {border:1px solid #000;}
.tableHoriz tbody, .tableVert tbody {border:1px solid #000;}
.tableHoriz tbody tr {border:1px solid #000;}
.tableVert tbody td {border-style:solid; border-color:#000; border-right-width:1px; border-left-width:1px;}
.tableHoriz tbody tr:nth-child(odd), .tableVert tbody td:nth-child(odd) {background-color:#dfefff;}
.tableHoriz p, .tableVert p {margin-bottom:0;}
.tableHoriz td, .tableVert td {font-size:87.5%; text-align:center;}
	.tableHoriz td {padding:15px 10px 15px 10px;}
	.tableVert td {padding:10px 15px 10px 15px;}


/*--------------------------------------------
=SOCIAL MEDIA BAR
--------------------------------------------*/
#socialMediaBar {
	padding:20px 0 12px;
	background:url("../images/CampusCSS/shadow-960-top.png") #444 no-repeat top;}

#socialMediaBar p {
	float:left;
	margin-right:8px;
	border:1px solid #000;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;}
	
#socialMediaBar a {
	float:left;
	min-width:90px;
	line-height:26px;
	border-top:1px solid #666;
	border-bottom:1px solid #000;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	padding:4px 5px;
	background-color: #333;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#111)); 
	background-image: -webkit-linear-gradient(top, #333, #111); 
	background-image:    -moz-linear-gradient(top, #333, #111); 
	background-image:     -ms-linear-gradient(top, #333, #111); 
	background-image:      -o-linear-gradient(top, #333, #111); 
	background-image:         linear-gradient(top, #333, #111);	}

	#socialMediaBar .directory {
		border:none;} 	
	#socialMediaBar .directory a {
		min-width:inherit;
		border-top:1px solid #333;
		border-left:1px solid #333;
		border-right:1px solid #666;
		border-bottom:1px solid #666;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#444)); 
		background-image: -webkit-linear-gradient(top, #222, #444); 
		background-image:    -moz-linear-gradient(top, #222, #444); 
		background-image:     -ms-linear-gradient(top, #222, #444); 
		background-image:      -o-linear-gradient(top, #222, #444); 
		background-image:         linear-gradient(top, #222, #444);		}
		#socialMediaBar .directory a:hover, #socialMediaBar a:active {
			background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#444)); 
			background-image: -webkit-linear-gradient(top, #222, #444); 
			background-image:    -moz-linear-gradient(top, #222, #444); 
			background-image:     -ms-linear-gradient(top, #222, #444); 
			background-image:      -o-linear-gradient(top, #222, #444); 
			background-image:         linear-gradient(top, #222, #444);		}

#socialMediaBar a:link, #socialMediaBar a:visited {color:#e4e4e4; font-size:87.5%;}
#socialMediaBar a:hover, #socialMediaBar a:active {color:#f60;}
#socialMediaBar a:hover {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); 
	background-image: -webkit-linear-gradient(top, #444, #222); 
	background-image:    -moz-linear-gradient(top, #444, #222); 
	background-image:     -ms-linear-gradient(top, #444, #222); 
	background-image:      -o-linear-gradient(top, #444, #222); 
	background-image:         linear-gradient(top, #444, #222);}
	
#socialMediaBar a:active {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#555)); 
	background-image: -webkit-linear-gradient(top, #333, #555); 
	background-image:    -moz-linear-gradient(top, #333, #555); 
	background-image:     -ms-linear-gradient(top, #333, #555); 
	background-image:      -o-linear-gradient(top, #333, #555); 
	background-image:         linear-gradient(top, #333, #555);}

#socialMediaBar a img {float:left; margin-right:6px;}


/*--------------------------------------------
Event Calendar
--------------------------------------------*/


/* Clear Floated Elements
---------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {clear: both;display:block;overflow:hidden;visibility: hidden;width:0;height:0}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
.clearfix {display:inline-block}
* html .clearfix {height:1%}
.clearfix {display:block}

/*============================================
CHANGE LOG
============================================*/
/*
6/21/12
fixed: dimensions on .threeQuarters column

6/18/12
added: CSS styling for a "social media bar": a horizontally-aligned list of buttons
added: new column class for 3/4 width column
fixed: .dotted sizing class declarations were incorrectly referring all to .columnQuarter

6/13/12
added: two style options for <table> elements: one for horizontally-organized data and one for vertically-organized data

5/17/12
added: CSS classes to divide content into evenly divided columns, along with variations on border styles (.columnQuarter, .columnThird, .columnTwoThirds, .columnFullWidth)
added: .columnX complementary nav menu w/thumbnails
added: "Event Calendar" CSS: heavy use of html elements, but creates a text-based calendar "icon" for the date of an event

3/29/12
added: additional font color declarations on #wordmark links to fix accessibility scan failures and a transparent background color on body

3/19/12
added: styling for section navigation to have "headings" that segment and separate links; ("sub" and "heading" classes on .sectionnav li elements, with headings being inside a <p>)

3/16/12
added: Template R: Alternate "homepage" template that has a slideshow with content that is easier to edit and update via MultiEdit
added: default blockquote styling, with citation styling using the .blockquoteCitation class
added: cleaner, default styling for faculty profile pictures on Template I (see class .profilePic); using this will require a small modification to design.xsl

3/15/12
added: body {color:#000;} Latest round of automatic accessibility scans have been having problems with the default bgcolor of #fff but no default "foreground" color.

2/10/12
removed: font-size declaration on "li". It was creating an inheritance problem when a <p> was inside a <li>.
added: default width to templateC's #main div element. The div was collapsing to the width of its content in some browsers.
added: Event Calendar styling
added: <b> and <i> styling.


6/24/2013
removed: any links to image files that were pointing to the main campus core folder.  
updated: links now point to a local file which is found in the _resources folder.

*/