/*
main.css
Author: Ryan Garcia
Date Modified: 2010-10-7
Description: Global layout styles called in from main.css
*/

/* -------------------
	BASE TYPOGRAPHY
---------------------- */
html 								{ font-size: 100%; }/* IE Smaller Text Fix */
body 								{ font: normal .75em 'arial','helvetica',sans-serif; } /* 16px * .75 = 12px */

	/* Links */
a:link, 
a:visited, 
a:active 							{ color:#333; }
a:hover 							{ color:#0000ff; }

	/* Headings */
#title h1							{ color:#fff; margin: 0 0 0 1em; padding-top:5px; font-size: 2em } /* px val = 24px */
h1,
h1.bodytitle 						{ font-size:1.666em; }	/* px val = 20px */
h2 									{ font-size: 1.333em }  /* px val = 16px */
h3 									{ font-size: 1.167em }	/* px val = 14px */
h4 									{ font-size: 1em }		/* px val = 12px */
h5 									{ font-size: .917em }	/* px val = 11px */ 
h6 									{ font-size: .833em }	/* px val = 10px */ 
h2,h4,h6 							{ font-style: italic }

	/* Paragraphs and Lists */
p 									{ margin:1em 0 ; }
p,li 								{ line-height:1.3; } 	/* for left-navigation */
#body-wrap p,
#body-wrap li 						{ line-height:1.5; }
p.copyright 						{ text-align:center; font:inherit; padding:1em }

/* Other */
pre,code 							{ font-size: 12px }

/* ---------------
	LAYOUT
------------------ */
body								{ background:#6E6E6E url("../../../images/global/body-texture.gif");min-width:768px;margin:0;padding:0}
	
	/* Header */
#header								{ background:#6E6E6E url("../../../images/global/bg-sprite.png") repeat-x 0px -10px; clear:both; width:100%;margin:0;padding:0;  }
#header .inner						{ width:768px;margin:0 auto;padding:0; overflow: hidden; position: relative }
#header h1							{ margin:0; padding:0}
#header h1 a						{ background: transparent url("../../../images/global/logo.gif") no-repeat top left; float:left;height:77px;margin:0 0 0 10px;padding:0; text-indent: -9000px; width:231px }
	
	/* Skip links */
#skip ul							{ margin: 0; padding: 0 }
#skip li							{ list-style: none }
#skip a:link, 
#skip a:hover, 
#skip a:visited						{ left:0px; height:1px; overflow:hidden; position:absolute; text-align: center; top:-500px; width:1px; }
#skip a:active, #skip a:focus		{ background: yellow; font-weight: bold; left: 0; margin: 0 auto; height:auto; padding: 5px; position: absolute; top: 0; right:0; width:17.5em; z-index: 5000 }

	/* Wayfind */				
#wayfind                            { background:#aaa url("../../../images/global/bg-sprite.png") repeat-x 0px -107px; border-right: 1px solid #777;border-left: 1px solid #777; display:inline; float:right; height: 77px; position: relative  }
#wayfind ul                         { list-style:none; clear:both; margin:0 10px; overflow: hidden; padding:12px 0 0}
#wayfind li                         { border-right: 1px dotted #777777; float:left; line-height: 1; }
#wayfind .myci                      { border: none; font-weight:700; }
#wayfind .myci em					{ font-family: Georgia,Cambria, Times, "Times New Roman", serif;}
#wayfind a:link,
#wayfind a:visited					{ color:#000; float: left;  margin: 0 3px; text-align:center; text-decoration:none; padding:4px 5px }
#wayfind a:hover,
#wayfind a:focus					{ background-color: #ffffff }
    
	/* Search Form - Will not need classes if I use button type */
#wayfind form			    		{ clear:both; margin:10px auto 0 auto; overflow:hidden; padding:0; position: absolute; bottom: 10px; right:17px; width:204px }
#wayfind fieldset					{ border: 0; margin: 0; padding: 0 }
#wayfind label                      { color: #666; font: bold italic 1em georgia; padding:4px 0 3px 7px }
#wayfind input,
#wayfind button						{ background: transparent url("../../../images/global/search-sprite.png") no-repeat }
#wayfind input						{ background-position: 0 0; border:none; height:15px; float:left; font-size:1em; margin:0; padding:3px 20px 3px 5px; width:140px;}
#wayfind input:focus				{ background-position:  0 -22px }
#wayfind button						{ background-position: -170px 0; border:none; cursor:pointer; height:22px; float:left; margin-left: 5px; width:33px;}
#wayfind button:hover,
#wayfind button:focus				{ background-position: -170px -22px; outline: none }
#wayfind button:active				{ background-position: -170px -44px; outline: none }
	
	/* jquery.searchgui.min.jes helper classes */
#wayfind .text-clear-button 		{ background: transparent url("../../../images/global/search-clear.gif") center center no-repeat; display:block;right:42px; margin:0; height:11px; padding:3px; position:absolute; top:3px; width:11px; z-index:2 }
	
	/* Global Navigation */	
.nav								{ background:#4B4B4B url("../../../images/global/bg-sprite.png") repeat-x 0px -204px;border-bottom:1px solid #333;border-top:1px solid #777;clear:both;float:left;margin:0;padding:0;width:100%}
.nav ul								{ color:#fff;list-style-type:none;margin:0;padding:0;text-align:center;width:100%}
.nav li								{ border-right:1px solid #777;display:inline;margin:0;padding:0}
.nav li.last, 
.nav abbr							{ border:none }
.nav a:link,.nav a:visited			{ color:#fff;line-height:2em;margin:0 .5em;padding:.165em .5em;text-decoration:none}
.nav a:hover,.nav a:focus			{ background-color:#fff;color:#000}

	/* Main Area Wrappers 
	- wraps entire section between header and footer */
#center-wrap						{ background:transparent url("../../../images/global/body-texture.gif");clear:both;float:left;margin:0;padding:0;width:100%}
#ghost								{ background:transparent;margin:0 auto;width:768px}
#wrap								{ clear:both;float:left;height:100%;margin:0 auto;width:768px}

	/* Footer */
#footer                    			{ background:transparent url("../../../images/global/body-texture.gif") 0 26px;clear:both;float: left;width: 100%}
#footer	.inner                		{ background:transparent;clear:both;margin:0 auto;width:768px;}
#footer p							{ padding: 1em; text-align: center }


/*------------------ 
	UTILITY CLASSES
--------------------*/

	/* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ */
.hidden 							{ position:absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } 
	/* [Note: change to ".ir" when moved to Echo CI - Avoid using till then. Current Search button is using it] use ".hidetext" for image replacement techniques */
.hidetext							{ display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat }
	/* Clear floats */
.group:after 						{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.group 								{ display: inline-block; }
.group 								{ display: block; }
	/* Apply .center to parent of element that needs centering */
.center 							{ text-align:center } 
	/* .img_noborder is a useless class. It is currently used on CI Home page and should be removed then fixed */		
.img_noborder 						{ border: 0 }
	/* Use to align elements left or right - Note: .frame-x deprecated for old pages don't use anymore. 
	Change/remove classes from old pages at migration. Use aling-x instead */
.align-left,
img.frame-left						{ float: left; margin: 0 10px 1em 0; }
.align-right,
img.frame-right						{ float: right; margin: 0 0 1em 10px;}	
	/* Use .frame class for images to add consistent border style - 
	Note: can be used in conjunction with align-x */
img.frame							{ margin-bottom: 1em}
img.frame,
img.frame-left,
img.frame-right 					{ background: #ffffff; border: 1px solid #cccccc; padding: 4px }
a:hover img.frame,
a:hover img.frame-left,
a:hover img.frame-right 			{ border-color: #0000FF }
	/* - Use .multi-frames to stack multiple images horizontally using common border style */
.multi-frames 						{ clear: both; padding: 0; overflow: hidden }
.multi-frames img 					{ clear: none; float: left; margin: 0 10px 0 0; background: #ffffff; border: 1px solid #cccccc; padding: 4px }
.multi-frames img.last				{ margin: 0 }
	/* - Instructions: Class should be applied to parent elements ONLY (e.g. <p class="multi-frames"><img><img>)
	Images should be contained with a parent element such as P or DIV tags.
	IMPORTANT: Add class ".last" to last image in grouping.
	Hint: IMAGES SHOULD BE OF EQUAL HEIGHT AND WIDTH, with at least 10px margin 
	in between. A 10px padding should be added in calculations of total width for each image. 
	Example of formula, per image, for content area of 520px -
	245px width + 10px padding = 255px * 2 images = 510 + 10px margin = 520px 
	*/
	/* - Captions - Use on "P" tags with captions immediately following images */
p.caption 							{ font-family: Georgia, "Times New Roman", Times, serif; text-align:center; font-style: italic }
p.caption span 						{ color: #666666;} /* Use for source */
	/*Table classes 
	The main table tag should include a "summary" and "cellspacing=0".*/
table.basic							{ border-collapse:separate;border-left:1px solid #cccccc;border-spacing:0;border-top:1px solid #cccccc;margin-bottom:1em}
table.basic caption					{ font-weight:700;line-height:1.8}
table.basic th,
table.basic td						{ border-bottom:1px solid #dddddd;border-right:1px solid #cccccc;padding:5px;text-align:left;vertical-align:baseline}

/*----------------
	ENRICHMENT
------------------*/

/* Border Radius */
#wayfind a:link,
#wayfind a:visited,
.nav a:hover 						{ border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;	}
	
/*------------------------------
	PATCHES
------------------------------*/

/* Firefox */
/* Remove inner focus outline from global search button */
#wayfind button::-moz-focus-inner	{ border: none }