/* This file will hold styles for all layouts using the alpha grid (i.e. not the mobile layout). */

/*
	Font weights used:
	Light:		300
	Regular:	400
	Bold:		700
*/

#overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 12;
}

#section-mobile-menu {
	display: none;
}

body {
	font-size: 16px;
	line-height: 1;
}

/**********************
	=Branding Zone
***********************/

#zone-branding-wrapper {
	background: #ffffff; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkOGQ4ZDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 50%, #d8d8d8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#ffffff), color-stop(100%,#d8d8d8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#d8d8d8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#d8d8d8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#d8d8d8 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 50%,#d8d8d8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d8d8d8',GradientType=0 ); /* IE6-8 */
	padding: 0;
}

#region-branding {
	position: relative;
	float: 
}

/* illinois logo */

#i-mark {
	float: right;
}

/* student affairs branding */

.block-vcsa-branding {
	float: left;
	margin-left: 0;
}

.block-vcsa-branding a,
.block-oiir-branding a,
.vcsa-branding-on-oiir a {
	text-decoration: none;
	display: block;
}

/* oiir branding */

.block-oiir-branding {
	clear: none;
	float: left;
}

.block-oiir-branding #site-name {
	color: #F58220;
	text-transform: lowercase;
}

.block-oiir-branding .inclusion {
	display: block;
}

.block-oiir-branding .office-of {
	display: block;
	font-size: 13px;
	text-transform: uppercase;
}

.block-oiir-mark {
	float: right;
}

#oiir-mark {
	height: auto;
	margin-left: 0;
}

/* vcsa branding on oiir */

.vcsa-branding-on-oiir {
	float: left;
}

.oiir #zone-header {
	padding: 0;
}

/***************** 
	=Global menu
******************/

.global-menu {
	position: absolute;
	display: block;
	bottom: 0;
	right: 0;
}

.global-menu li {
	float: left;
	list-style: none;
}

.global-menu li a {
	color: #FFF;
	cursor: pointer;
	display: block;
	text-decoration: none;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	transition: all .3s ease-in;
	-webkit-transition: background-color 300ms linear;
    -moz-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

.front .vcsa .global-menu li a {
	font-weight: 400;
}

.front .vcsa .global-menu li a {
	border-top-width: 3px;
	border-top-style: solid;
}

/*******************
	=Pop-up Menus
********************/

#region-menu-hidden .menu-block-wrapper > .menu > li > ul > li:nth-child(4n+1),
#region-menu-hidden .views-row > .menu > li > ul > li:nth-child(4n+1) {
	clear: both;
}

#region-menu-hidden .block-menu-block {
	position: absolute;
	background: #FFF;
	color: #000;
	display: none;
	z-index: 100;
	overflow: hidden;
	padding: 20px 75px;
	margin: 0;
}

#region-menu-hidden .menu-block-wrapper > .menu > li,
#region-menu-hidden .views-row > .menu > li {
	display: none;
}

#region-menu-hidden .block-menu-block a {
	text-decoration: none;
	color: #0092ce;
}

#region-menu-hidden .menu-block-wrapper > .menu > li > a,
#region-menu-hidden .views-row > .menu > li > a {
	font-size: 36px;
	font-weight: 300;
	text-transform: lowercase;
	margin-bottom: 20px;
	text-decoration: none;
	cursor: text;
	color: #333;
	display: block;
}

#region-menu-hidden .menu-block-wrapper > ul > li > ul,
#region-menu-hidden .views-row > ul > li > ul {
	margin-left: -10px;
	overflow: hidden;
}

#region-menu-hidden .menu-block-wrapper > ul > li > ul > li > a,
#region-menu-hidden .views-row > ul > li > ul > li > a {
	color: #333;
	font-size: 20px;
	text-transform: lowercase;
}

#region-menu-hidden .menu-block-wrapper > ul > li > ul > li > ul,
#region-menu-hidden .views-row > ul > li > ul > li > ul {
	margin: 6px 0 20px;
}

#region-menu-hidden .menu-block-wrapper > ul > li > ul > li > ul > li,
#region-menu-hidden .views-row > ul > li > ul > li > ul > li {
	margin-bottom: 4px;
}

#region-menu-hidden .menu-block-wrapper ul li ul li ul li a:hover,
#region-menu-hidden .menu-block-wrapper ul li ul li ul li a:active,
#region-menu-hidden .menu-block-wrapper ul li ul li ul li a:focus,
#region-menu-hidden .views-row ul li ul li ul li a:hover,
#region-menu-hidden .views-row ul li ul li ul li a:active,
#region-menu-hidden .views-row ul li ul li ul li a:focus {
	text-decoration: underline;
}

#overlay.cover {
	background: #000;
	background: rgba(0,0,0,0.75);
	z-index: 50;
}

.close-btn {
	position: relative;
	float: right;
	cursor: pointer;
	padding: 4px 34px 4px 10px;
	line-height: 1;
	color: #888;
}

.close-btn:after {
	content: "\00D7";
	font-size: 24px;
	font-weight: 700;
	background: rgb(167,167,167);
	color: #FFF;
	width: 24px;
	height: 24px;
	line-height: 1;
	border-radius: 100px;
	display: inline-block;
	text-align: center;
	position: absolute;
	margin-left: 10px;
	top: 0;
}

/************************************
	=Student Affairs Secondary menu
*************************************/

.vcsa-menu {
	display: block;
	font-size: 16px;
	text-transform: lowercase;
	position: relative;
	z-index: 20;
}

.vcsa-menu a {
	text-decoration: none;
}

.vcsa-menu .menu-block-wrapper > ul.menu > li {
	float: left;
}

.vcsa-menu .menu-block-wrapper > ul.menu > li > a {
	color: #6d6e71;
	display: block;
}

.vcsa-menu .menu-block-wrapper > ul.menu > li:hover > a,
.vcsa-menu .menu-block-wrapper > ul.menu > li:active > a,
.vcsa-menu .menu-block-wrapper > ul.menu > li:focus > a {
	color: #0091d3;
}

/* secondary sub-menus */

.vcsa-menu li.expanded li a {
	background-color: #323232; /* old browsers */
	background-color: rgba(50,50,50,0.9);
	color: #FFF;
	display: block;
	padding: 10px 13px;
	transition: background-color .35s ease-out, color .35s ease-out;
}

.vcsa-menu li.expanded li a:hover,
.vcsa-menu li.expanded li a:focus {
	background-color: #292929;
	color: #96d7e0;
}

/* inside pages - positioning context needs to be list items */

.vcsa-menu .menu-block-wrapper > ul.menu {
	margin-left: -13px;
}

.vcsa-menu ul.menu li.expanded {
	position: relative;
}

.vcsa-menu ul.menu li.expanded ul {
	position: absolute;
	left: -9999px;
	opacity: 0;
	transition: opacity .25s linear;
}

.vcsa-menu ul.menu li.expanded ul {
	min-width: 250px;
}

/* active trail */

.vcsa-menu .menu-block-wrapper > ul.menu > li.active-trail > a {
	color: #FFF;
	font-weight: 700;
	padding-top: 24px;
	padding-bottom: 16px;
	float: left;
	margin-bottom: -16px;
	position: relative;
	z-index: 10;
}

.not-front .vcsa-menu .menu-block-wrapper > ul.menu > li.active-trail ul.menu  {
	/* this rule is designed to make the largest possible active area on hover, while leaving 10px gap */
	margin-top: 38px;
	padding-top: 26px;
}

/******************************
	=Homepage: Shortcut Boxes
*******************************/

.default-state {
	color: #929292;
	position: relative;
	z-index: 15;
}

.default-state h2 {
	color: #444;
}

.default-state-content {
	display: block; /* to override global.css */
}

.active-state {
	position: absolute;
	left: -9999px;
	color: #FFF;
	top: 0;
	opacity: 0;
}

.active-state a {
	color: #FFF;
}

.clicked .default-state h2 {
	visibility: hidden;
}

.clicked .default-state h2:before {
	visibility: visible;
}

.clicked .active-state {
	left: -50px;
	top: -18px;
	z-index: 60;
	padding: 15px;
	padding-top: 18px;
	padding-left: 50px;
	padding-bottom: 23px;
	opacity: 1;
}

.view-homepage-highlight .active-state h2,
.view-homepage-highlight .active-state h3 {
	color: #FFF;
}

/* make sure the plus sign stays above the text box, but only the one for that box */

.view-homepage-highlight .views-row-odd {
	clear: left;
}

.view-homepage-highlight .views-row {
	position: relative;
	border: none;
}

.view-homepage-highlight .clicked:before {
	z-index: 10;
}

.view-homepage-highlight .default-state:hover {
	cursor: pointer;
}

.view-homepage-highlight .views-row h2:before {
	content: "+";
	position: absolute;
	font-size: 22px;
	font-weight: 700;
	width: 22px;
	height: 22px;
	text-align: center;
	border-radius: 100px;
	color: #FFF;
	line-height: 1;
	margin-left: -30px;
}

.view-homepage-highlight .views-row h2 {
	font-size: 24px;
	font-weight: 300;
	padding-bottom: 12px;
	padding-left: 30px;
	margin-left: -30px;
}

/* -- homepage: image rotator -- */ 

#region-home-content {
	padding-top: 60px;
}

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

#zone-title-wrapper {
	color: #FFF;
	position: relative;
}

#page-title {
	font-size: 40px;
	font-weight: 300;
	text-transform: lowercase;
}

.breadcrumb a {
	color: #FFF;
	font-size: 16px;
	font-weight: 400;
}

/* -- basic page -- */

.node .field-name-body h2 {
	font-size: 36px;
}

/***************
	=Sidebar
****************/

.not-front #region-sidebar-first {
	padding-top: 20px;
}

.front .vcsa-sidebar {
	padding-top: 50px;
}

.not-front .oiir #region-sidebar-second {
	margin-top: 20px;
}

.center-home .field-name-body #region-sidebar-second {
	float: right;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: -40px;
	padding-top: 0;
}

/*********************
	=Sidebar Menu
**********************/

.interior-menu {
	margin: 0 10px 20px -10px;
	font-size: 15px;
	font-weight: 300;
}

.interior-menu a {
	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

.interior-menu .menu > li > ul {
	margin-left: 10px;
	border-left: 2px solid #DFDFDF;
}

.interior-menu li.expanded ul li.active-trail a.active-trail {
	background: #8F8F8F;
}

/**********************
	=Related Links
***********************/

.related-links {
	background: #555;
	margin: 0 10px 20px -10px;
	padding: 10px;
	text-transform: lowercase;
	display: block;
}

.related-links h2 {
	color: #84d1db;
	font-weight: 700;
	margin-bottom: .5em;
}

.related-links a {
	color: #FFF;
	display: block;
	padding: .25em 0;
	text-decoration: none;
	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

.related-links a:hover,
.related-links a:active,
.related-links a:focus {
	color: #84d1db;
}

/* inside page banner */

.field-name-field-top-banner img {
 	width:100%;
 	height:auto;
 	padding-bottom: 20px;
}

/* inside page styles */

.field-name-body h2 {
	text-transform: lowercase;
}

.field-name-body p {
	line-height: 22px;
	margin-bottom: 20px;
}

#block-system-main {
	padding-bottom: 20px;
}

#page-title {
	margin-top: 5px;
	margin-left: -2px;
	padding-bottom: 13px;
}

.not-front .global-menu li {
	-webkit-box-shadow: 0px -3px 10px rgba(50, 50, 50, 0.4);
	-moz-box-shadow:    0px -3px 10px rgba(50, 50, 50, 0.4);
	box-shadow:         0px -3px 10px rgba(50, 50, 50, 0.4);
}

/* home page styles */

#section-footer p {
	padding: 10px 0px;
}

#block-views-homepage-highlight-block .default-state-content {
	line-height: 21px;
	font-weight: 300;
}

#block-views-homepage-highlight-block .active-state h3 {
	padding-bottom: 10px;
	font-size: 19px;
	font-weight: 300;
	line-height: 1.2;
}

#block-views-homepage-highlight-block .active-state p {
	line-height: 23px;
	font-weight: 300;
	margin-bottom: 10px;
}

/*********************
	=Main Content
**********************/

.not-front #region-content,
.not-front #region-narrow-content {
	padding-top: 20px;
}

/*****************
	=Slideshow
******************/

.view-homepage-image-rotator .views-field-field-slider-image img {
	width: 100%;
	height: auto;
	display: block;
	position: relative;
}

.view-homepage-image-rotator .views-row {
	position: relative;
}

.view-homepage-image-rotator .views-row .views-field-field-link-url {
	position: absolute;
	bottom: -2px; /* to fix weird gap below slideshow */
	left: 0;
	background: #FFF;
	text-align: right;
	font-weight: 400;
}

.view-homepage-image-rotator .views-field-field-link-url a {
	text-decoration: none;
	display: block;
}

.view-homepage-image-rotator .views-field-field-link-url a:hover,
.view-homepage-image-rotator .views-field-field-link-url a:active,
.view-homepage-image-rotator .views-field-field-link-url a:focus {
	text-decoration: underline;
}

.view-homepage-image-rotator .views-field-field-link-url h2 {
	font-size: 27px;
	font-weight: 400;
}

/* overrides to make slideshow responsive */

#zone-rotator .home-slideshow {
	width: 100%;
	float: left;
}

#zone-rotator .views-slideshow-cycle-main-frame {
	width: 100% !important;
}

#zone-rotator .views-slideshow-cycle-main-frame-row {
	width: 100% !important;
	height: auto;
}

#zone-rotator .field-slideshow,
#zone-rotator .field-slideshow-slide {
	max-width: 100%;
	width: 100%;
}

#zone-rotator .field-slideshow img {
	max-width: 100%;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

/*********************
	=Calendar 
**********************/

.block-calendar {
	padding: 18px;
	margin-bottom: 20px;
	position: relative;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	z-index: 9;
}

.block-calendar a:hover {
	text-decoration: underline;
}

.block-calendar .more {
	margin-top: 28px;
	margin-bottom: 0;
}

.block-calendar .view-footer {
	margin-top: 20px;
}

/*****************************
	=Photo Gallery
******************************/

/* landing page */

#block-system-main .view-photo-galleries .views-row {
	float: left;
	text-transform: lowercase;
	margin-right: 20px;
	margin-bottom: 20px;
	width: 200px;
}

#block-system-main .view-photo-galleries .views-row a {
	text-decoration: none;
}

#block-system-main .view-photo-galleries .views-row img {
	margin: 0;
}

/* page */

.field-name-field-photo .field-item {
	float: left;
	margin-right: 10px;
	margin-bottom: 20px;
}

.node-photo-gallery .field-name-body {
	background: #58595B;
	margin-bottom: 20px;
	padding: 10px;
	color: #FFF;
	display: none;
}

/* block on homepage */

.block-photo-galleries {
	margin: 0;
}

.block-photo-galleries .view-content {
	overflow: hidden;
}

.block-photo-galleries .view-footer {
	margin: 10px 0 20px;
}

.block-photo-galleries .view-footer a {
	text-decoration: none;
	font-size: 16px;
}

.block-photo-galleries .view-footer a:hover {
	text-decoration: underline;
}

/***********************
	=Social Media
************************/

/* twitter */

.block-twitter-embed {
	padding: 10px 18px;
	margin-bottom: 20px;
}

/* facebook */

.block-facebook {
	padding: 18px;
	margin-bottom: 20px;
}

/***************************
	=Basic Styles
****************************/

#region-content a {
	color: #0091D3;
}

.center-home #region-content .block-calendar a {
	color: #FFF;
}

#region-content h3 {
	font-size: 20px;
	margin-bottom: 6px;
	font-weight: bold;
}

#region-content ul,
#region-content ol {
	margin-bottom: 20px;
}

#region-content ol li,
#region-home-content ol li {
	list-style: decimal;
	margin-bottom: 6px;
	list-style-position: outside;
	margin-left: 40px;
}

#region-content ul li,
#region-home-content ul li {
	list-style: disc;
	margin-bottom: 10px;
	list-style-position: outside;
	margin-left: 40px;
}

#region-content table {
	margin-bottom: 20px;
	font-size: 14px;
}

#region-content table tr,
#region-narrow-content table tr {
	border-bottom: 1px solid #DFDFDF;
}

#region-content table th,
#region-narrow-content table th {
	font-weight: 700;
}

#region-narrow-content table td,
#region-narrow-content table th,
#region-content table td,
#region-content table th {
	padding: 6px;
}

#region-content .intro {
	line-height: 1.5;
	margin-bottom: 16px;
	font-weight: 300;
}

.field-name-field-image img {
	margin-bottom: 16px;
	max-width: 100%;
	height: auto;
}

/********************
	=Page title
********************/

#region-title {
	padding-top: 32px;
	padding-bottom: 16px;
}

#region-title #page-title {
	margin: 0;
}

.oiir-menu .external-link:hover,
.oiir-menu .external-link:active,
.oiir-menu .external-link:focus,
.vcsa-menu .external-link:hover,
.vcsa-menu .external-link:active,
.vcsa-menu .external-link:focus {
	background: url("images/external-site-small.png") no-repeat right center;
}


/******************
	=Footer
*******************/

#zone-footer-wrapper {
	padding: 0;
}

.mobile-interior-menu {
	display: none;
}


/*******************
	=Expanding Page
********************/