@charset "UTF-8";
/* CSS Document */

/*  ------ University of Illinois at Urbana-Champaign: home page layout ------

DOCUMENT ORGANIZATION: 
	1 - html/body basics
	2 - top of page: container, i-mark branding, text-only link, flash imagery, main navigation
	3 - middle of page: 
		> column 1 (giving/brilliant futures logo, announcements) 
		> column 2 (colleges & schools, a minute with, community feature/images of illinois)
		> column 3 (resourses for)
		> column 4 (campus highlights, more news and events, featured resources) 

LAST UPDATED: 07.22.2008 vlt */


/* ------------------- 1 - HTML/BODY BASICS ------------------- */
html {
	background: #fff url(../images/homepage/bg_homepage.jpg) top center no-repeat;
	top: 0;
	left: 0;
	height: 100%;
}

body {
	width: 1010px;
	margin: 0 auto;
	position: relative;
	min-height: 100%;
}

/* ------------------- 2 - LAYOUT FOR TOP OF DESIGN: SEARCH BAR - ILLINOIS MARK ------------------- */
div#container_top {
	position: relative;
	width: 1010px;	
	height: 447px;
}

/* --- I-MARK --- */
span#branding {
	position: absolute;
	top: 368px;
	left: 736px;
	height: 68px;
	width: 255px;
	background-color: #fff;
	padding: 11px 0 0 19px;
	z-index: 9;
}

span#branding a {
	background: url(../images/homepage/i-mark.gif);
	position: absolute;
	height: 58px;
	width: 45px;
}

span#branding a:hover, span#branding a:focus {
	background-position: -45px;
}

/* --- TEXT-ONLY LINK --- */
div#text-only {
	position: absolute;
	top: 39px;
	right: 20px;
	z-index: 20;
	float: left;
}

div#text-only a {
	font-size: 0.7em;
	background: #fff;
	padding: 0 2px;	
	border: 1px solid #666;
	opacity:.50;
	color: #333;
	text-decoration: none;
}

div#text-only a:hover, div#text-only a:focus {
	font-size: 0.7em;
	background: #fff;
	padding: 0 2px;	
	opacity:1;
	color: #333;
}

/* --- BIG ROTATING FLASH IMAGE --- */
h1 object#flash /* change img to object when flash piece is ready */ {
	position: relative;
	top: 31px;
	left: 0;
	z-index: 11;
}

/* --- MAIN NAVIGATION --- */
#main_nav {
	background: url(../images/homepage/main-nav_bg.jpg) top left no-repeat;
	position: absolute;
	top: 0;
	left: 736px;
	width: 270px;
	height: 307px;
	min-height: 307px;
	padding: 61px 15px 0 20px;
	z-index: 10;
}

/* ------------------- 3 - LAYOUT FOR MIDDLE OF DESIGN: COLUMNS 1 - 4 ------------------- 
					coded in left to right order according to columns' content			*/

div#container_middle {
	position: relative;
	width: 1010px;
	background: url(../images/homepage/reflection.jpg) top left no-repeat;
}

/* ------ COLUMN ONE ------ */

/* --- GIVING (BRILLIANT FUTURES) LOGO --- */
img#column_one_top {
	position: absolute;
	top: 62px;
	left: -9px; /* -22px with original layout - logo broke out further past left edge */
	z-index: 6;
}

/* --- ANNOUNCEMENTS --- */
div#column_one_bottom {
	position: absolute;
	top: 173px;
	left: 0;
	background-color: #ebeff6;
	width: 197px;
	min-height: 23em;
	padding: 5px 20px 20px 20px;	
	z-index: 6;
}

/* ------ COLUMN TWO ------ */

/* --- COLLEGES + SCHOOLS DROP-DOWN MENU --- */
ul.column_two_top {
	background: url(../images/homepage/outline_blue.gif) top left no-repeat;
	position: absolute;
	top: 60px;
	left: 252px;
	z-index: 8;
}

ul.column_two_top ul /* repositions hidden list off page */ {
	z-index: 500;
	position: absolute;
	top: -2000em;
	left: -2000em;
}

ul.column_two_top li h3 {
	background: url(../images/homepage/outline_blue.gif) bottom left no-repeat;
	height: auto;
	width: 190px;
	display: block;
}

ul.column_two_top li:hover ul  {
	top: 57px;
	left: 0;
	width: 209px;
	/*border: 1px solid #aabcda;
	border-top: 0;*/
}
	
ul.column_two_top li:hover ul.list_left {
	margin: -13px 0 0 10px;
	float: left;
	display: block;
	background: #5074b5;  
}

ul.column_two_top li:hover ul.list_right {
	margin: -13px 0 0 219px;
	display: block;
	background: #6d8dc0;
}

ul.column_two_top ul.list_left li:first-child {
	border-top: 0;
}

/* --- A MINUTE WITH --- */
div.column_two_bottom /* top of shadowed-box */ {
	position: absolute;
	top: 121px;
	left: 252px;
	/*width: 199px;*/
	height: auto;
	z-index: 4;
}

div.column_two_bottom h3 {
	background: url(../images/homepage/outline_green.gif) top left no-repeat;	
	padding: 15px 15px 5px 15px;
	width: 199px;
	min-height: 65px;
}

div.column_two_bottom h3 img {
	float: left;
	padding-right: 10px;
}

.edu-il-ws-72-GE1C-description {
background: url(../images/homepage/outline_green.gif) bottom left no-repeat;
padding: 5px 15px 15px 15px;
width: 199px;
left: 0;
min-height: 75px;

}

/*div.column_two_bottom p  {
	background: url(../images/homepage/outline_green.gif) bottom left no-repeat;
	padding: 5px 15px 15px 15px;
	width: 199px;
	left: 0;
	min-height: 75px;
}*/

/* --- COMMUNITY FEATURE: HERE + NOW: IMAGES OF ILLINOIS --- */
div#community_feature  {
	background: url(../images/homepage/communityfeature.jpg) top left no-repeat;
	position: relative;
	width: 468px;
	margin-top: 15px;
	min-height: 171px;
	z-index: 2;
	overflow: visible;
}


/* ------ COLUMN THREE ------ */

/* --- RESOURCES FOR: AUDIENCE-SPECIFIC NAVIGATION --- */
div#column_three  {
	background: #fff7d1;
	position: absolute;
	top: 65px;
	left: 496px;
	width: 220px;
	height: auto;
	z-index: 5;
	padding-bottom: 10px;
}

#column_three li {
	position: relative;
}

#column_three ul ul {
	position: absolute;
	top: 0;
	left: 220px;
	width: 220px;
}

div#column_three ul ul {
	display: none;
}

div#column_three ul li:hover ul {
	display: block;
	margin-top: -10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

div#column_three ul ul {
	display: none;
}

div#column_three ul li:hover ul {
	display: block;
}

/* ------ COLUMN FOUR ------ */

/* --- CAMPUS HIGHTLIGHTS, NEWS, FEATURED RESOURCES --- */ 
div#column_four {
	background: url(../images/homepage/bg_highlights.jpg) top left no-repeat;
	position: relative; /* relative so that clearing js will work */
	top: 0;
	left: 736px;
	width: 274px;
	min-height: 29em;
	padding: 42px 0 30px 0;
	z-index: 4;
}