/*
Theme Name: Meerkat Homepage
Description: Theme for Williams College home & landing pages
Author: Williams WebOps
Template: meerkat
Version: 1
*/

/*------------------------------------------------------------------------------
 * UTILITY
 *------------------------------------------------------------------------------*/
#emergency-container {
 	padding: 10px 30px 10px 10px;
 	background-color: #FFFFE0;
 	border: 1px solid #C0C0C0;
 	margin-bottom: 3px;
 	color: #BF0000;
 	position: relative;
 	font-size: 120%;
}
#emergency-container div.msg-item {
	border-bottom: 1px solid #C0C0C0;
	padding-bottom: .5em;
	margin-bottom: .5em;
	line-height: 1.5;
}
#emergency-container div.msg-item > ul {
  margin-left: 15px;
}
#emergency-container div.msg-item:last-of-type {
	border: none;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
#emergency-container .close {
	background: url("../meerkat/img/icon_sprite.png") no-repeat scroll -352px -95px transparent;
	height: 20px;
	position: absolute;
	right: 5px;
	top: 5px;
	width: 20px;
	cursor: pointer;
}
.edit-me.edit-callout {
  bottom: 0;
  left: auto;
  top: auto;
}

/*------------------------------------------------------------------------------
 * HEADER
 *------------------------------------------------------------------------------*/
[class*="page-template-template-homepage-grid"] #header, 
.page-template-template-landing-php #header { 
	height: 290px; 
}

#header .wordmark { 
	bottom:0px; 
	display: block;
	left:20px; 
	position:absolute; 
} 
#site-name-block  { display:none; }
.big-w { 
	background:none; 
	border:none; 
	box-shadow:none; 
	width:0;
}
.big-w:hover { background:none; }
.big-w a { display: none; }

#main-menu table { width:100%; }
#main-nav table td { width:22%; }
#main-nav table td.menu-spacer { width:2%; }
#main-nav table td.menu-spacer:first-child { width:3%; }
#main-nav table td.menu-spacer:last-child { width:3%; }

/* alumni is purple */
.page-blue .main-menu-item.hover-blue a,
.main-menu-item.hover-blue:hover a { background:rgba(157, 133, 197,.4); } 
.main-menu-item.hover-blue a { border-color: #512698; } 

/*------------------------------------------------------------------------------
 * SIDEBAR
 *------------------------------------------------------------------------------*/
#sidebar { float:right; } 

/*------------------------------------------------------------------------------
 * FOOTER
 *------------------------------------------------------------------------------*/
#footer .dept_contact { display:none; }
.ipad #social-media .sprite { display:inline-block; }

/*------------------------------------------------------------------------------
 *  Home Grid Elements
 *------------------------------------------------------------------------------*/
[class*="page-template-template-homepage-grid"] #content-container,
.page-template-template-landing-php #content-container { 
	padding-top: 3px; 
}
#home-grid-container {
  height:529px;
  position:relative;
  overflow:hidden;
}
.grid-item {
	background-color: #000000;
	float:left;
	color: #FFFFFF;
	overflow: hidden;
	position: absolute;
}
.grid-title {
	position: absolute;
	font-size: 1.5em;
	top:5px; 
	left:5px; 
	text-align:left;
	color: #FFFFFF;
	font-weight: bold;
	line-height:1;
}
/* Special font size for Events/Williams Thinking/Daring Change */
.page-template-template-homepage-grid-7-php #grid-3 .grid-title,
.page-template-template-homepage-grid-6-php #grid-3 .grid-title,
.page-template-template-homepage-grid-10-php #grid-4 .grid-title,
#grid-9 .grid-title {
  font-size: 4em;
  font-weight: normal;
  line-height: .9;
  text-transform: lowercase;
}
.grid-item img {
  display: block;
  max-width: inherit;
}
.grid-item a {
  color: #FFFFFF;
  text-decoration: none;
}
.grid-item .grid-outer {
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 2;
}
.grid-item .grid-inner {
  font-size: 110%;
  line-height: 1.2;
  padding: 10px;
}

/*------------------------------------------------------------------------------
 *  Home Grid Variables
 *------------------------------------------------------------------------------*/
.background-purple {background-color: #492F92;}
.background-orange {background-color: #EC881D;}
.background-mustard {background-color: #C3B730;}
.background-green {background-color: #8AB840;}
.background-blue {background-color: #512698;}
.title-uppercase { font-weight: normal; text-transform: uppercase; }
.title-position-top-right {left: inherit; right:10px; text-align:right;}
.title-position-bottom-left {top:inherit; bottom:5px; left:10px;}
.title-position-bottom-right {top:inherit; bottom:5px; left:inherit; right:10px; text-align:right;}
.type-color .grid-title { font-size: 1.5em; left: 10px; text-align: left; top: 10px; width: 94%;}
.type-color .grid-title.title-position-bottom-right {top:inherit; left:inherit; text-align:right;}
.type-image .grid-title {font-size: 16px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);}
.type-image .grid-title.dark-title { color: #222; text-shadow: 0 0 3px rgba(255, 255, 255, 0.5); }

/*------------------------------------------------------------------------------
 *  Home Grid Architecture
 *------------------------------------------------------------------------------*/
.width-1 {width:19.8245%;}
.width-2 {width:39.9122%;}
.width-3 {width:60%;}
.width-4 {width:79.7368%;}
.width-5 {width:100%;}

.height-1 {height:130px}
.height-2 {height:263px}
.height-3 {height:396px}
.height-4 {height:529px}

.col-1 {left:0px;}
.col-2 { left: 20.0877%; }
.col-3 { left: 40.1754%; }
.col-4 { left: 60.2632%; }
.col-5 { left: 80.3509%; }

.row-1 {top:0px;}
.row-2 {top:133px;}
.row-3 {top:266px;}
.row-4 {top:399px;}

/* hide fancybox title for popup */
.fancybox-title { display:none; }

/*------------------------------------------------------------------------------
 *	Transitions
 *------------------------------------------------------------------------------*/
.grid-item {
  	-webkit-transition: all .03s ease-in-out;
	-moz-transition: all .03s ease-in-out;
    -ms-transition-duration: 0.3s;
	-o-transition: all .03s ease-in-out;
	transition: all .03s ease-in-out;
}

/*------------------------------------------------------------------------------
 *	Landing Pages
 *------------------------------------------------------------------------------*/
.page-template-template-landing-php .landing-col {
    float: left;
    margin-right: 0.363158%;
    text-align: right;
}
.page-template-template-landing-php .landing-col img {
	display: block;
	width: 100%;
}
.page-template-template-landing-php .omega {
  margin-right: 0;
}
.page-template-template-landing-php .col-skinny {
  width: 19.0228%;
}
.page-template-template-landing-php .col-medium {
  width: 292px;
}
.page-template-template-landing-php .col-wide {
  width: 34.5614%;
}
.page-template-template-landing-php .landing-grid-item {
  margin-bottom: 3px;
  margin-right: 0.8%;
  position: relative;
}
.page-template-template-landing-php .omega .landing-grid-item {
	margin-right: 0;
}

/*
* NAV MENU HEADERS
*/
/* 
.page-template-template-landing-php .menu > li > a,
 */
.page-template-template-landing-php h3,
.page-template-template-landing-php .title,
.page-template-template-landing-php #meerkat_localist .title
{
  background-color: rgba(0,0,0,.6);
  /*border-bottom-width: 7px;*/
  border-bottom-width: 1px;
  border-bottom-style: solid;
  color: #FFFFFF;
  display: block;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  padding-bottom: 0.3em;
  padding-right: 3.38%;
  padding-top: 0.4em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  width: 96.65%;
}
.page-template-template-landing-php.page-orange h3,
.page-template-template-landing-php.page-orange #meerkat_localist .title {
	background-color: #EC881D;
}
.page-template-template-landing-php.page-yellow h3,
.page-template-template-landing-php.page-yellow #meerkat_localist .title {
	background-color: #C3B730;
}
.page-template-template-landing-php.page-green h3,
.page-template-template-landing-php.page-green #meerkat_localist .title {
	background-color: #8AB840;
}
.page-template-template-landing-php.page-blue h3,
.page-template-template-landing-php.page-blue #meerkat_localist .title {
	background-color: #512698;
}
.page-template-template-landing-php .menu {
  list-style: none outside none;
}
.page-template-template-landing-php .menu li {
	list-style: none;
}
.page-template-template-landing-php .landing-col .sub-menu {
  margin-bottom: 3px;
}
.page-template-template-landing-php .menu li a,
.page-template-template-landing-php .menu-calendar li a  {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-style: #FFFFFF;
	color: #404040;
	display: block;
	font-weight: bold;
	line-height: inherit;
	padding-bottom: 5px;
	padding-right: 10px;
	padding-top: 5px;
	text-decoration: none;
	font-size: inherit;
	text-transform: none;
}
.page-template-template-landing-php .menu li:last-child a,
.page-template-template-landing-php .menu-calendar li:last-child a {
	border-bottom: none;
}
.page-template-template-landing-php.page-orange .menu li a,
.page-template-template-landing-php.page-orange .menu-calendar li a {
	background-color: #FFFFFF;
  	border-bottom-color: #EFCEAA;
}
.page-template-template-landing-php.page-yellow .menu li a,
.page-template-template-landing-php.page-yellow .menu-calendar li a {
	background-color: #FFFFFF;
  	border-bottom-color: #C3B730;
}

.page-template-template-landing-php.page-green .menu li a,
.page-template-template-landing-php.page-green .menu-calendar li a {
	background-color: #FFFFFF;
  	border-bottom-color: #8AB840;
}
.page-template-template-landing-php.page-blue .menu li a,
.page-template-template-landing-php.page-blue .menu-calendar li a {
	background-color: #FFFFFF;
  	border-bottom-color: #7C5CB2;
}
.page-template-template-landing-php #content-container .menu > li > a,
.page-template-template-landing-php #content-container .menu-calendar li a{
	-webkit-transition: all .03s ease-in-out;
	-moz-transition: all 0.2s ease;
    -ms-transition-duration: 0.2s;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.page-template-template-landing-php.page-orange #content-container .menu > li > a:link:hover,
.page-template-template-landing-php.page-orange #content-container .menu li a:hover,
.page-template-template-landing-php.page-orange #content-container .menu-calendar li a:hover {
  background-color: #F1A656;
  color: #303030;
}
.page-template-template-landing-php.page-yellow #content-container .menu > li > a:link:hover,
.page-template-template-landing-php.page-yellow #content-container .menu li a:hover,
.page-template-template-landing-php.page-yellow #content-container .menu-calendar li a:hover {
  background-color: #D0C75F;
  color: #303030;
}
.page-template-template-landing-php.page-green #content-container .menu > li > a:link:hover,
.page-template-template-landing-php.page-green #content-container .menu li a:hover,
.page-template-template-landing-php.page-green #content-container .menu-calendar li a:hover {
  background-color: #B1CE7E;
  color: #303030;
}
.page-template-template-landing-php.page-blue #content-container .menu > li > a:link:hover,
.page-template-template-landing-php.page-blue #content-container .menu li a:hover,
.page-template-template-landing-php.page-blue #content-container .menu-calendar li a:hover {
  background-color: #B6A4D4;
  color: #303030;
}
.page-template-template-landing-php .title .title-inner {
	display: block;
}
.page-template-template-landing-php a.landing-link {
	text-decoration: none;
}
.page-template-template-landing-php.page-orange a.landing-link:hover .title {
	background-color: #EC881D;
}
.page-template-template-landing-php.page-yellow a.landing-link:hover .title {
	background-color: #C3B730;
}
.page-template-template-landing-php.page-green a.landing-link:hover .title {
	background-color: #8AB840;
}
.page-template-template-landing-php.page-blue a.landing-link:hover .title {
	background-color: #512698;
}
.page-template-template-landing-php #meerkat_localist {
  margin-bottom: 0;
  font-size: 12px;
}
.page-template-template-landing-php #meerkat_localist img {
	width: auto;
}
.page-template-template-landing-php #meerkat_localist .title {
  position: relative;
  z-index: 1;
}
.page-template-template-landing-php #meerkat_localist .widget-insides {
   border-top: none;
}
.page-template-template-landing-php #column-1 {
  padding-right: 0.701754%;
}
.page-template-template-landing-php.page-orange #column-1 {
	color: #EC881D;
}
.page-template-template-landing-php.page-yellow #column-1 {
	color: #C3B730;
}
.page-template-template-landing-php.page-green #column-1 {
	color: #8AB840;
}
.page-template-template-landing-php.page-blue #column-1 {
	color: #512698;
}
.page-template-template-landing-php #column-1 h2 {
  font-size: 2.4em;
  line-height: 1;
  margin-bottom: 0.5em;
}
.page-template-template-landing-php #column-1 p {
  color: #4F4F4F;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 1em;
}
.page-template-template-landing-php #column-3 {
  margin-right: 0;
}
.page-template-template-landing-php #column-3 .width-wide_full {
  float: left;
  width: 99%;
}
.page-template-template-landing-php #column-3 .width-wide_half {
  float: left;
  width: 49.1%;
}
.page-template-template-landing-php #column-4 .width-medium {
  width: 100%;
}
/* Don't show shadows when selecting text */
::-moz-selection { background: #D2E4F8; color: inherit; text-shadow: none; }
::-webkit-selection { background: #D2E4F8; color: inherit; text-shadow: none; }
::selection { background: #D2E4F8; color: inherit; text-shadow: none; }

/**
* BLURB ON RIGHT
**/
.page-template-template-landing-php #column-1 {
  padding-left: 0.701754%;
  padding-right: 0;
  text-align: left;
}
.page-template-template-landing-php #column-1 h2 {
	display: none;
}
.page-template-template-landing-php #column-1 p {
	color: inherit;
}

/*
 * CES google map css fixes
 */
#map_canvas img {
	max-width: none;
}
/*
 * CES end google map css fixes
 */

/*
 * CES: temporary for mockup only. 11/1/2012
 */
.page-template-template-landing-php .landing_nav_menu > ul:first-child 
{
	padding-top: 0.7em;
}
.page-template-template-landing-php .landing_nav_menu > ul > li > a
{
	/* 
	display: none;
	 */
}
/* 
 * Fudge a space before grad programs on Admission and aid page for now.
 * DRM - why not just separate the last two items and make another menu?
*/
.menu-item-8361 {
	border-bottom: medium none;
	margin-bottom: 7em;
}
/*
 * END temporary stuff
 */

/* ========== 320 ========== */
@media only screen and (min-width: 320px) and (max-width: 1024px) {
	
	.type-color .grid-title { font-size: 1em; }
	#grid-4 .grid-title {
	  font-size: 3em;
	  font-weight: normal;
	}
	#grid-9 .grid-title {
	  font-size: 2.5em;
	  font-weight: normal;
	}
	
}
@media only screen and (max-height: 768px){
	[class*="page-template-template-homepage-grid"] #header, .page-template-template-landing-php #header {
		height: 200px;
	}
}