@charset "utf-8";
/* Community Informatics Initiative common stylesheet 
/* Modified by Jeff Ginger 02.04.2009
/* The styles used in this sheet are common to all CII webpages.
/* They account for the background, page frame, footer, and banner.

/* This style sheet and the associated graphics are set up to be fairly modular.  
You should be able to alter the colors and graphics here to fundamentally change 
the website color scheme without hurting the layout */

/* Font embedding */
/* Different versions of the Calibri font are packed in the .eot files under the stylesheets directory.  
When a user visits the page they should be able to make use of these fonts, which generally ensures that
the website will look similar (or the same) for all visitors.  Calibri is the new standard Microsoft font
and looks similar to Arial and Verdana.  It seems to display at a different size on Windows XP vs. Vista/OSX.
It can also make use of font anti-aliasing (smoothing).  The .eot files were put together with Microsoft
WEFT, a free downloadable font-embedding solution.*/

@font-face {
font-family:"Calibri";
src: url(CALIBRI3.eot);
}

/* Global styles (apply to everything) */
/* pagebg.jpg is the very tall, thin page background. */

body{
margin:0;
background:url(../../CIMA/pics/pagebg.jpg) repeat-x #FFF;
color:#222222;
font-family:"Calibri",Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
}

/* Headers */
/* We've decided to follow the h1 = static page title convention, 
which in this case is the main banner title of the website. The
h2's will change by page and over time (and from within the php
content files. We want to keep our h1 consistent.*/

h1 {
/* empty, modified within the banner section */
}

/*Section titles and other pertinent items */
h2{
font-size:140%;
font-weight: bold;
margin:0;
}

/*Sub-section titles and important items */
h3{
margin-bottom:0;
font-size: 120%;
font-weight: bold;
}

/* Floats an item to the left and gives it a little margin. 
Good for pictures and divs. */
.left{
float:left;
margin:2px 8px 0 0;
}

/* Floats an item to the right and gives it a little margin. 
Good for pictures and divs. */
.right{
float:right;
margin:2px 0 0 8px;
}

/* Container is the main div that holds the webpage, it sits 
on top of the background and provides a frame for the site. */
#container{
width:990px; /* slightly too big for 1024, the right-side drop shadow appears out of view)*/
margin:0 auto;
padding:0px 16px 0px 16px;
background:url(../../CIMA/pics/containerbg.png) repeat-y;
}

/* The banner for the website, outside of the page title this is consistent between all CII pages */
#banner{
background:url(../../CIMA/pics/banner_littlemen.jpg) 420px no-repeat #FEBC17;
height:100px;
width:990px;
}

	/* To prevent link borders */
	#banner a{
	text-decoration:none;
	border:0;
	}
	
	/* The label box just to the left of the I-mark in the upper right.  
	Make sure it doesn't get closer than 16px to the I-mark. 
	The text in this background file is displaced, see below.*/
	#banner .illinoisinformatics{
	float:right;
	margin:18px 1px 12px 0;
	width:174px;
	height:65px;
	background:url(../../CIMA/pics/IllinoisInformatics.jpg) no-repeat;
	}
	
	/* This block situates the I-mark in the upper right. Do not remove it.
	The margin or padding must be at least 16px.
	The icon is not a background file and must be actively inserted to 
	the page and linked to http://www.illinois.edu */
	#banner .icon{
	float:right; 
	margin:18px 21px 18px 18px;
	border:0;
	padding:0;
	}
	
	/* This div contains the background file for the main title in the banner */
	
	/***
	/* IMPORTANT: The title graphic for the page should be named 'banner_title.png'
	***/
	
	#banner .title{
	margin:0;
	padding:0;
	background:url(../../CIMA/pics/banner_title.png) left no-repeat;
	width:398px;
	height:50px;
	}
	
	/*This div frames the title graphic and gives color to that section of the banner */
	#banner .titleframe{
	float:left;
	width:398px;
	height:79px;
	padding:21px 0 0 22px;
	background:#F38B12;
	}
	
	/* Header 1 and the banner paragraph are displaced by background graphics */
	/* This is for accessibility.  A person who disables graphics or uses a screen 
	reader will be able to navigate by header to these.  Otherwise they will not 
	appear on the page*/
	#banner h1, #banner p{
	position:absolute;
	top:-1200px;
	height:0;
	width:0;
	}
	
/* Though the search box may be placed in different spots on different CII template 
pages it should always look the same, therefore the below styles*/

#search{
height:36px;
}
	
	#search form{
	margin:10px 0 0 0;
	}
	
	#search .gobutton{
	background:url(../../CIMA/pics/gobutton.jpg);
	margin:0 8px 0 0;
	padding:0;
	width:30px;
	height:25px;
	float:right;
	border:0;
	}
	
	#search .searchbox{
	border:1px solid #F38B12;
	background:#EBEFF6;
	float:right;
	height:19px;
	width:158px;
	padding:2px;
	margin:0 0 0 8px;
	font-size:14px;
	}
	
	#subpage .searchbox{
	background:#FFF;
	}
	
/* The 'tray' or footer area at the bottom of the webpage that contains 
information about copyright and university ties */

#footer{
clear:both;
padding:20px 0px 0px 0px;
width:1022px;
margin:0 auto;
text-align:center;
font-size:13px;
color:#000;
background:url(../../CIMA/pics/footer_bg.png) top no-repeat;
}

	#footer p{
	margin:0;
	}
	
	/* For linked icon graphics, no fluffy border */
	#footer img{
	border:0;
	}
	
	/* Colors and styling for links within the footer area only */
	#footer a:link, #footer a:visited{color:#000;font-weight:bold;text-decoration:underline;}
	#footer a:active, #footer a:hover{text-decoration:none;}