/*  

Version: 1.0
Author: RATIO Architects
Author URI: http://www.ratioarchitects.com  |  http://www.communitycollaborate.com
Copyright © 2009-2010, RATIO Architects. All Rights Reserved.

*/

@media screen, projection {

/* BODY, FONTS AND LINKS: =body
--------------------------------------------------------- */
	*		{ margin: 0; padding: 0; }
	body		{ font-family: Arial, Helvetica, sans-serif; }
	
/* CONTAINERS: =container-*
--------------------------------------------------------- */
	#outer-wrapper	{ width: 980px; margin: 0 auto; }
	
/* HEADER: =container-header
--------------------------------------------------------- */
	#container-header	{ margin: 61px 0 9px 0; height: 80px; position: relative; border-bottom: 1px solid #D1D1D4; }
	
	img.ratio	{ position: absolute; top: 3px; left: 0; }
	img.cc	{ position: absolute; top: 13px; left: 68px; }
	div.sep	{ width: 1px; height: 42px; background: url(../images/logo-sep.gif) no-repeat; position: absolute; top: 10px; left: 53px; }
	
	/* Search */
	fieldset#search	{ position: absolute; top: 0; right: 0; }
	input.searchfld	{ color: #999999; padding: 2px 3px 2px 3px; font-size: 11px; margin-right: 7px; }
	input.searchbtn	{ font-size: 11px; padding: 0 5px; }
	
/* NAVIGATION:
--------------------------------------------------------- */
	ul#nav			{ list-style-type: none; position: absolute; top: 35px; right: 0; }
	ul#nav li			{ font-size: 11px; text-transform: uppercase; float: left; margin-left: 14px; }
	ul#nav li a		{ color: #999999; text-decoration: none; }
	ul#nav li a:hover	{ color: #77AE9A; }
	ul#nav li.active a	{ color: #77AE9A; }

/* CONTENT:
--------------------------------------------------------- */
	.styleOne #container-content		{ background: url(../images/styleOne-bg.gif) repeat-y; }
	.styleTwo #container-content		{ background: url(../images/styleTwo-bg.gif) repeat-y; }
	.styleThree #container-content	{ padding-bottom: 20px; }
	.styleFour #container-content		{ background: url(../images/styleFour-bg.gif) repeat-y; }
	
	.styleOne #container-left	{ width: 690px; float: left; }
	.styleOne #container-right	{ width: 280px; float: left; margin-left: 10px; }
	
	.styleTwo #container-left	{ width: 170px; float: left; }
	.styleTwo #container-middle	{ width: 616px; float: left; margin-left: 25px; }
	.styleTwo #container-right	{ width: 144px; float: left; margin-left: 25px; }
	
	.styleThree #container-left	{ width: 400px; float: left; }
	.styleThree #container-middle	{ width: 230px; float: left; }
	.styleThree #container-right	{ width: 350px; float: left; }
	
	.styleFour #container-project-header	{ width: 980px; }
	.styleFour #container-left			{ width: 154px; float: left; }
	.styleFour #container-middle			{ width: 575px; float: left; padding-bottom: 20px; }
	.styleFour #container-right			{ width: 241px; float: left; margin-left: 9px; }
	
	/* Slideshow */
	#slideshow	{ height: 302px; border-bottom: 1px solid #D1D1D4; margin-bottom: 20px; padding-bottom: 9px; }
	
	/* Left */
	#body		{ font-size: 12px; color: #999999; padding-bottom: 20px; }
	#body h2		{ margin: 0 0 15px 0; }
	#body h3		{ color: #77AE9A; font-weight: bold; font-size: 13px; margin-bottom: 7px; }
	#body p		{ line-height: 17px; padding-bottom: 16px; }
	#body p.guide	{ margin-top: 5px; }
	
	#body ul		{ margin-bottom: 16px; }
	
	#body a		{ color: #77AE9A; font-weight: bold; text-decoration: none; }
	#body a:hover	{ text-decoration: underline; }
	
	.bodyOne		{ width: 420px; float: left; }
	.bodyTwo		{ width: 690px; }
	
	div#cta	{ width: 270px; float: right; text-align: center; }
	
	/* Team */
	ul#team			{ margin-top: 17px; }
	ul#team li		{ width: 345px; display: block; float: left; margin-bottom: 40px; font-size: 11px; line-height: 17px; }
	ul#team li a	{ font-weight: normal; }
	
	ul#team li .fn			{ color: #77AE9A; font-size: 14px; }
	ul#team li .nickname	{ color: #747576; margin-bottom: 1px; font-size: 11px; }
	
	ul#team li img			{ margin: 0 0 1px 4px; }
	
	/* Team Member */
	.styleTwo h2		{ margin-top: 11px; }
	
	ul#contact			{ list-style-type: none; width: 170px; margin-top: 15px; }
	ul#contact li			{ display: block; height: 25px; text-align: right; text-transform: uppercase; font-size: 10px; margin-bottom: 9px; color: #999999; }
	ul#contact li a		{ font-weight: normal; color: #77AE9A; text-decoration: none; }
	ul#contact li a:hover	{ text-decoration: underline; }
	ul#contact li img		{ vertical-align: middle; margin-left: 11px; }
	
	div#currentProjects		{ width: 260px; float: right; margin: 0 0 10px 10px; border-top: 1px solid #D1D1D4; border-right: 1px solid #D1D1D4; border-left: 1px solid #D1D1D4; }
	div#currentProjects h4	{ border-bottom: 1px solid #D1D1D4; padding: 11px 0 0 10px; }
	
	div#currentProjects ul			{ list-style-type: none; margin-bottom: 0; }
	div#currentProjects li			{ border-bottom: 1px solid #D1D1D4; padding: 14px 10px 14px 11px; }
	div#currentProjects li a		{ font-weight: normal; color: #747576; }
	div#currentProjects li a:hover	{ text-decoration: none; }
	
	ul#teamList				{ list-style-type: none; margin-top: 14px; }
	ul#teamList li			{ font-size: 10px; text-transform: uppercase; margin-bottom: 11px; padding: 5px 5px 5px 0; }
	ul#teamList li a		{ color: #999999; text-decoration: none; }
	ul#teamList li a:hover	{ color: #77AE9A; }
	ul#teamList li.current	{ background-color: #E4EEEB; padding-left: 9px; }
	
	.bodyThree ul		{ list-style-type: none; }
	.bodyThree ul li	{ background: url(../images/li-green.gif) no-repeat 5px 6px; padding: 0 0 4px 15px;}
	
	#container-right h4		{ margin-top: 5px; margin-bottom: -12px; }
	
	/* Contact */
	.styleThree #container-left h2	{ margin: 20px 0 0 0; }
	
	.contactForm form		{ margin-top: 16px; }
	
	.contactForm fieldset		{ margin-bottom: 18px; }
	.contactForm fieldset.submit	{ margin-top: -8px; }
	
	.contactForm label		{ font-size: 12px; color: #999999; display: block; margin-bottom: 3px; }
	
	.contactForm input.field				{ font-size: 13px; width: 280px; }
	.contactForm textarea				{ font-size: 11px; font-weight: normal; width: 350px; }
	.contactForm input.field, textarea		{ border: 1px solid #D1D1D4; color: #7C7C7C; padding: 3px 4px; }
	
	.contactForm p.note	{ color: #999999; font-size: 11px; }
	
	ul#studios				{ margin-top: 85px; list-style-type: none; }
	ul#studios li			{ margin-bottom: 20px; font-size: 12px; color: #999999; line-height: 17px; }
	ul#studios li a			{ color: #77AE9A; text-decoration: none; font-size: 11px; }
	ul#studios li a:hover	{ text-decoration: underline; }
	
	ul#studios li img		{ margin: 0 0 1px 4px; }
	
	.contactForm p.success	{ margin-top: 32px; font-size: 12px; color: #999999; }
	
	#map	{ margin-top: 90px; }
	
	/* Right */
	.box				{ margin-left: -1px; padding: 12px 0 12px 11px; background: #77AE9A; }
	.box h3				{ color: #FFFFFF; text-transform: uppercase; font-size: 13px; }
	ul#projects			{ list-style-type: none; padding-bottom: 10px; }
	ul#projects li		{ display: block; border-bottom: 1px solid #D1D1D4; padding: 14px 5px 13px 10px; width: 265px; }
	
	span.title, span.locale	{ display: block; }
	span.title				{ font-size: 15px; margin-bottom: 3px; }
	span.title a			{ color: #747576; text-decoration: none; }
	
	span.locale			{ font-size: 11px; color: #999999; }

/* PROJECTS: =
--------------------------------------------------------- */
	
	/* Header */
	#container-project-header			{ border-bottom: 1px solid #D1D1D4; position: relative; }
	#container-project-header h2			{ margin-top: 15px; width: 700px; }
	#container-project-header p.location	{ padding-bottom: 8px; width: 700px; }
	
	/* Left Navigation */
	ul.projNav			{ list-style-type: none; margin-top: 9px; }
	ul.projNav li			{ font-size: 10px; text-transform: uppercase; margin: 0 9px 11px 0; padding: 5px 0 5px 0; text-align: right; }
	ul.projNav li a		{ color: #999999; text-decoration: none; }
	ul.projNav li a:hover	{ color: #77AE9A; }
	ul.projNav li.active	{ background-color: #E4EEEB; padding-right: 9px; }
	
	ul#projOpt			{ margin-top: 28px; }
	
	/* Content */	
	#section-header				{ border-bottom: 1px solid #D1D1D4; position: relative; padding: 10px 0 5px 11px; }
	#section-header h3				{ width: 450px; }
	#section-header p.date			{ width: 450px; }
	#section-header img				{ float: left; display: block; margin-right: 5px; }
	#section-header img.two			{ padding-top: 9px; }
	#section-header .float			{ display: block; float: left; }
	
	#section-header p.return			{ position: absolute; top: 9px; right: 9px; }
	#section-header p.return a
	{ display: block; text-transform: uppercase; padding: 5px 10px 3px 10px; color: #FFFFFF; font-size: 9px; text-decoration: none; background-color: #77AE9A;  }
	#section-header p.return a:hover	{ text-decoration: underline; }
	
	.projectBody			{ font-size: 12px; padding: 15px 15px 0 15px; margin-bottom: 10px; color: #999999;}
	.projectBody p			{ line-height: 17px; padding-bottom: 20px; }
	.projectBody a			{ color: #77AE9A; text-decoration: none; }
	.projectBody a:hover	{ text-decoration: underline; }
	
	.projectBody ul			{ list-style-type: none; margin-bottom: 10px; }
	.projectBody li			{ background: url(../images/li-green.gif) no-repeat 5px 6px; padding: 0 0 4px 15px; }
	
	.project-links				{ margin-bottom: 30px; }
	.project-links h4			{ display: block; border-bottom: 1px solid #D1D1D4; padding: 0 0 0 15px; }
	.project-links ul			{ margin-top: 12px; padding: 0 15px; list-style-type: none; }
	.project-links li			{ background: url(../images/li-green.gif) no-repeat 0 6px; font-size: 12px; margin-bottom: 6px; padding-left: 7px; }
	.project-links li span		{ color: #747576; }
	.project-links li a			{ color: #77AE9A; text-decoration: none; }
	.project-links li a:hover	{ text-decoration: underline; }
	
	/* Updates */
	li.update				{ border-bottom: 1px solid #D1D1D4; display: block; padding: 15px 0 15px 0; }
	li.update div.icon		{ float: left; width: 43px; text-align: center; margin-left: 15px; }
	li.update div.details	{ float: left; width: 492px; margin-left: 15px; }
	
	li.update .details h4			{ font-size: 13px; color: #77AE9A; margin-bottom: 2px; }
	li.update .details h4 span.date	{ color: #999999; }
	
	li.update .details p		{ font-size: 11px; color: #999999; line-height: 14px; }
	li.update .details p.link	{ font-size: 10px; text-transform: uppercase; margin: 10px 0 10px 0; }
	li.update .details p.date	{ font-size: 10px; color: #AFAFAF; }
	
	li.update .details p a			{ color: #77AE9A; text-decoration: none; }
	li.update .details p a:hover	{ text-decoration: underline; }
	li.update .details p.link a		{ color: #77AE9A; text-decoration: none; }
	
	li.update .details p.status	{ margin-top: 10px; color: #CC0006; }
	
	#activity				{ padding: 15px; }
	#activity p				{ font-size: 11px; }
	#activity p a			{ color: #77AE9A; text-decoration: none; }
	#activity p a:hover		{ text-decoration: underline; cursor: pointer; }
	#activity img			{ margin: 0 0 2px 5px; }
	
	.directions				{ margin: 20px 0 15px 0; }
	.directions span		{ line-height: 17px; }
	
	#font p.status			{ font-size: 12px; float: left; padding: 5px 0 0 15px; color: #CC0006; }
	
	/* Project Form */
	
	.project-form form		{ padding: 0 15px; margin-top: 12px; }
	.project-form fieldset	{ margin-bottom: 10px; }
	.project-form label		{ color: #999999; font-size: 12px; margin-bottom: 3px; display: block; }
	.project-form p			{ color: #999999; font-size: 12px; padding-bottom: 10px; }
	.project-form a			{ color: #77AE9A; text-decoration: none; }
	.project-form a:hover	{ text-decoration: underline; }
	
	.project-form input.field,
	.project-form textarea.field	{ border: 1px solid #D1D1D4; color: #7C7C7C; padding: 3px 4px; }
	.project-form input.field		{ font-size: 12px; width: 300px; }
	.project-form textarea.field	{ font-size: 11px; width: 535px; }
	
	.project-form input.check	{ display: block; float: left; margin-right: 10px; }
	.project-form label.check	{ display: block; float: left; }
	
	.project-form p.req			{ color: #999999; font-size: 11px; margin-top: 20px; }
	
	.project-form p.success		{ margin: 10px 0 0 15px; }
	
	/* Right Actions */
	.cta		{ margin: 10px 0 20px 0; }
	
	#committee						{ background: #77AE9A; margin-bottom: 26px; }
	div#committee_login				{ height: 40px; cursor: pointer; }
	fieldset.submit input			{ cursor: pointer; }
	fieldset.submit					{ padding-bottom: 7px; }
	#committee fieldset				{ width: 220px; margin: 0 10px 10px 10px; }
	#committee label				{ display: block; font-size: 11px; color: #FFFFFF; }
	#committee input.textfield		{ width: 212px; padding: 3px; color: #999999; font-size: 11px; border: 1px solid #FFFFFF; }
	
	#committee fieldset.error input.textfield	{ border: 1px solid #CC0006; background-color: #F2BFC1; color: #000000; }
	#committee fieldset span.error			{ padding: 5px; background: #CC0006; }
	#committee fieldset span.error img			{ display: block; float: left; margin-right: 5px; }
	#committee fieldset span.error span		{ display: block; font-size: 11px; color: #FFFFFF; }
	
	#committee fieldset.submit		{ position: relative; }
	#committee fieldset.submit input	{ float: left; }
	#committee fieldset p.password	{ float: right; font-size: 11px; padding-top: 5px; }
	p.password a					{ color: #FFFFFF; text-decoration: none; }
	p.password a:hover				{ text-decoration: underline; }
	
	#logged				{ padding: 0 10px 5px 10px; }
	#logged p			{ font-size: 12px; color: #FFFFFF; margin-bottom: 5px; }
	#logged p span		{ color: #CEEAE0; }
	#logged p a			{ color: #FFFFFF; text-decoration: none; }
	#logged p a:hover	{ text-decoration: underline; }
	
	ul.leaders				{ margin: 6px 0 30px 0; list-style-type: none; }
	ul.leaders li			{ font-size: 11px; color: #999999; margin-bottom: 25px; line-height: 16px; }
	
	ul.leaders div.fn		{ color: #77AE9A; font-size: 11px; font-weight: bold; text-transform: uppercase; }
	ul.leaders li a			{ color: #77AE9A; text-decoration: none; }
	ul.leaders li a:hover	{ text-decoration: underline; }
	
	ul.leaders li img		{ margin: 0 0 1px 4px; }
	
	.meeting-details		{ margin-top: 10px; }
	.meeting-details img	{ margin: 0 0 1px 1px; }
	
/* FOOTER: =container-footer
--------------------------------------------------------- */
	#container-footer		{ border-top: 1px solid #D1D1D4; margin-top: 9px; padding: 9px 0 40px 0; }
	#container-footer p		{ color: #D1D1D4; font-size: 11px; }
	p.tagline				{ float: left; }
	p.copyright				{ float: right; }
	
/* PAGING: =
--------------------------------------------------------- */
	.paging		{ border-bottom: 1px solid #D1D1D4; padding: 5px; font-size: 10px; font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; }
	
	.paging ol	{ list-style-type: none; }
	.paging li	{ display: block; float: left; }
	
	.paging li a		{ display: block; text-decoration: none; border: 1px solid #D1D1D4; background-color: #FFFFFF; color: #999999; padding: 2px 6px 2px 6px; margin-left: 5px; }
	.paging li a:hover	{ border: 1px solid #999999; background-color: #999999; color: #FFFFFF; }
	
	.paging li.current a	{ border: 1px solid #77AE9A; background-color: #77AE9A; color: #FFFFFF; }
	
	.paging span.records	{ color: #999999; font-size: 11px; margin-top: 3px; display: block; float: left; }
	
/* NOTICES: =notice
--------------------------------------------------------- */

	div.error		{ margin-top: 5px; }
	div.error img	{ display: block; float: left; margin-right: 5px; }
	div.error p	{ display: block; float: left; font-size: 11px; color: #CC0006; }

	label.error    { border-width: 1px; border-style: solid; padding: 7px; font-size: 11px; display: block; color: #CC0006; margin-left: 130px; margin-top: 5px; }
	
/* PROJECT SELECT BOX: =.styledSelect
--------------------------------------------------------- */

	#projectSelect			{ position: absolute; top: 7px; right: 0; cursor: pointer; }

	.styledSelect 		{ width: 251px; font-size: 11px; font-weight: bold; margin: 0; padding: 0; position: relative; }
	.styledSelect ul	{ list-style-type: none; position: absolute; top: 0; left: 0; width: 100%; }
	.styledSelect ul li	{ border: 1px solid #C0C0C0; }
	
	.styledSelect ul li.closed			{ background: #FFFFFF url(../images/project-arrow-off.gif) no-repeat top right; color: #77AE9A; }
	.styledSelect ul li.closed:hover	{ background-color: #F7F6F6; }
	#projectSelect .open ul li.first	{ background: #EBF2F0 url(../images/project-arrow-on.gif) no-repeat top right; border-top: 1px solid #77AE9A; color: #77AE9A; }
	
	.styledSelect ul li.closed,
	#projectSelect .open ul li.first	{ padding: 7px 7px 0 7px; height: 21px; }
	
	#projectSelect .open ul li		{ background-color: #77AE9A; border: 1px solid #77AE9A; border-top: none; color: #FFFFFF; padding: 3px 7px 3px 7px; }
	#projectSelect .open ul li:hover	{ background-color: #EBF2F0; color: #77AE9A; }
	
/* FONT SIZE: =div#font
----------------------------------------------- */
	
	#font			{ padding: 9px 9px 0 0; }
	#font ul		{ list-style-type: none; float: right; }
	#font ul li		{ font-size: 11px; float: left; margin-left: 5px; }
	#font ul li a	{ text-decoration: none; display: block; width: 21px; height: 19px; text-indent: -9999px; border-width: 1px; border-style: solid; }
	
	li a.decreaseFont 		{ background: url(../images/font-size.gif) no-repeat 0 0; border-color: #D1D1D4; }
	li a.increaseFont 		{ background: url(../images/font-size.gif) no-repeat -21px 0; border-color: #D1D1D4; }
	li a.decreaseFont:hover	{ background: url(../images/font-size.gif) no-repeat 0 -19px; border-color: #77AE9A; }
	li a.increaseFont:hover	{ background: url(../images/font-size.gif) no-repeat -21px -19px; border-color: #77AE9A; }

/* SUBSCRIBE: =subscribe
----------------------------------------------- */

	.subscribe h2				{ margin: 29px 0 15px 0; }
	.subscribe p				{ color: #999999; font-size: 12px; margin-bottom: 15px; }
	.subscribe input.field		{ width: 350px; }
	
	.subscribe fieldset.check	{ margin: 0; padding-bottom: 5px; }
	
	.subscribe input.check		{ float: left; display: block; margin-right: 5px; margin-top: 1px; }
	.subscribe label.check		{ float: left; }
	
	.subscribe fieldset.submit	{ margin-top: 5px; }
	
	.subscribe p a				{ color: #77AE9A; text-decoration: none; }
	.subscribe p a:hover		{ text-decoration: underline; }
	
/* SEARCH: =searchResults
----------------------------------------------- */
	
	.searchResults li.update	{ border-bottom: none; }
	.searchResults p.results	{ font-size: 11px; color: #999999; margin-top: -10px; margin-bottom: 5px; }
	
/* MISC: =misc
----------------------------------------------- */

	textarea	{ font-family: Arial, Helvetica, sans-serif; }
	
	.mtten		{ margin-top: 10px; }
	
	.mbfive		{ margin-bottom: 5px; }
	.mbten		{ margin-bottom: 10px; }
	.mbtwenty	{ margin-bottom: 30px; }

	.hover			{ background: none !important; }
	.hover:hover	{ background: #EBF2F0 !important; cursor: pointer; }

	hr 			{ display: none; }
	input:focus	{ outline: none; }
	fieldset	{ border: none; }
	
	a			{ outline: none; }
	a img		{ border: none; }

	/* 
	* Image replacement using the Gilder/Levin IR technique 
	* http://www.ryznardesign.com/pages/web_page_coding/gilder_levin_ir_mac/gilder_levin_ir_mac_2.html
	*/		

	.replace { 
	position: relative;
	/* hide overflow: hidden from mac ie5 \*/
	overflow: hidden;
	font-size: 1.2em; /* reset to desired font size for good browsers for CSS on/images off situations*/
	/* end hide from mac ie5 */
	}
	.replace span { display: block; position: absolute; top: 0px; left: 0px; z-index:1; /*for Opera 5 and 6*/ }

	.replace a { display:block; cursor: pointer; }
	a.replace { cursor: pointer; }

	/*
	* "How To Clear Floats Without Structural Markup" -
	* http://www.positioniseverything.net/easyclearing.html
	*/
	.clearfix:after 	{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	.clearfix 		{ display: inline-block; }  

	/* Holly Hack Targets IE Win only \*/
	* html .clearfix {height: 1%;}
	.clearfix {display: block;}
	/* End Holly Hack */
	
}