@charset "UTF-8";
/* CSS Document by */
/*  Ruth Martin ruth-a-martin.com ram@ruth-a-martin.com Febuary 2011
Awsome (Aaaaaaw - some) CSS Inline Media Queries and Grid System Courtesy of: Less Framework 3 by Joni Korpi http://lessframework.com	*/
/*	Resets*/
[dir="ltr"] { direction: ltr;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video 
	   { margin: 0; padding: 0; border: 0; }
article, aside, address, canvas, details, figure, figure img, figcaption, hgroup,
footer, header, nav, section, summary, audio, video 
	       				{ display: block; }
a img     				{ border: 0; }
figure     				{ position: relative; }
figure img 				{ width: 100%; }
img        				{ width: 100%; }
/*@font-face I am in love, take me, I'm yours!*/
@font-face 				{ font-family: 'ProximaNovaRegular'; src: url('../fonts/ProximaNova-Reg-webfont.eot?') format('eot'), url('../fonts/ProximaNova-Reg-webfont.woff') format('woff'), 
						    url('../fonts/ProximaNova-Reg-webfont.ttf') format('truetype'), 
						    url('../fonts/ProximaNova-Reg-webfont.svg#webfontZam02nTh') format('svg'); 
			          		font-weight: normal; font-style: normal; }
@font-face 				{/*ie*/font-family: 'Museo300'; src: url('../fonts/Museo300-Regular-webfont.eot'); }
@font-face 				{ font-family: 'Museo300'; src: url(//:) format('no404'), 
					  		url('../fonts/Museo300-Regular-webfont.woff') format('woff'), 
						    url('../fonts/Museo300-Regular-webfont.ttf') format('truetype'), 
						    url('../fonts/Museo300-Regular-webfont.svg#webfontym7mwT12') format('svg');
			 		  		font-weight: normal;font-style: normal; }
@font-face 				{/*ie*/font-family: 'Museo500'; src: url('../fonts/Museo500-Regular-webfont.eot'); }
@font-face 				{ font-family: 'Museo500'; src: url('../fonts/Museo500-Regular-webfont.eot?iefix') format('eot'),
							 url('../fonts/Museo500-Regular-webfont.woff') format('woff'),
							 url('../fonts/Museo500-Regular-webfont.ttf') format('truetype'),
							 url('../fonts/Museo500-Regular-webfont.svg#webfontQF7qPaga') format('svg');
							 font-weight: normal; font-style: normal; }
@font-face 				{/*ie*/font-family: 'Museo700'; src: url('../fonts/Museo500-Regular-webfont.eot'); }
@font-face 				{ font-family: 'Museo700'; src: url(//:) format('no404'), url('../fonts/Museo700-Regular-webfont.woff') format('woff'), 
					        url('../fonts/Museo700-Regular-webfont.ttf') format('truetype'), 
					        url('../fonts/Museo700-Regular-webfont.svg#webfont8A81E4hu') format('svg'); font-weight: normal; font-style: normal; }
body       				{ font: 18px/24px "ProximaNovaRegular", sans-serif; }
/*type*/
#banner h1          	{ font: 26px/40px 'Museo300', serif; margin:10px 0; width:100%; border:1px #999; 
					  	  border-style:solid none; padding:28px 0 28px 0; float:left; text-align:center; }
.project h1         	{ font: 22px/34px 'Museo700', serif; letter-spacing: -2px; } 
header .subnav a:hover	{ color:rgb(255,51,51); }
.lightgrey             	{ color:rgb(102, 102, 102);}
.darkgrey		    	{ color:rgb(51, 51, 51);}
.pink, .pink a, a:hover	{ color:rgb(255,51,51); text-decoration:none; cursor:pointer; }
.sans			        { font: 26px/40px 'ProximaNovaRegular', sans-serif;}
.indent			    	{ margin: 0 0 0 80px;}
/*text select*/
::selection 	 		{ background: rgb(255,102,102); }
::-moz-selection 		{ background: rgb(255,102,102); }
img::selection 			{ background: transparent; }
img::-moz-selection 	{ background: transparent; }
html 					{ border: 4px solid  rgb(51, 51, 51); margin:0; height:100%; background:rgb(51,51,51) url(../images/footer.jpg) repeat; }
body 					{ background: rgb(232,228,228); color:rgb(102, 102, 102);  }
.hidden, .fadein		{ display:none; }
/*	Default 8-column layout
	60 px columns, 24 px gutters, 60 px margins, 768 px total
	---------------------------------------------------------
	1     2      3      4      5      6      7      8     
	60px  144px  228px  312px  396px  480px  564px  648px	*/
#container 				{ background: rgb(232,228,228); padding: 50px 60px 0; width: 628px; -webkit-tap-highlight-color: rgb(255,102,102); margin: 0 auto 0 auto; }
/*header*/
.logocontainer			{ display:block; position:relative; width:260px; height:25px; float:left; margin:3px 0; }
.logo	            	{ display:block; float:left; width:261px; height:23px; background:url(../images/logos/logo8col.png) 0 -3px no-repeat; position:absolute; z-index:10; }
.logoreverse	        { width:261px; height:24px; background:url(../images/logos/logo8col.png) 0 -27px no-repeat; position:absolute; }
/* Main Nav -- on/active page state */ 
body.sectionwork #banner nav li.work a:visited, body.sectionwork #banner nav li.work a:hover, body.sectionwork #banner nav li.work a:visited,
body.sectionapp #banner nav li.app, body.sectionapp #banner nav li.app a:hover, body.sectionapp #banner nav li.app a:visited,
body.sectioncon #banner nav li.con, body.sectioncon #banner nav li.con a:hover, body.sectioncon #banner nav li.con a:visited { color:rgb(255,51,51); }
/* Main Nav*/
#banner nav				{ font-size: 16px; line-height:36px; height:40px; float:right; margin:0 -10px; }
#banner nav ul      	{ list-style: none; margin: 0 -10px;}
#banner nav li     		{ float: left; display: inline; margin: 0; }
#banner nav a:link, 
#banner nav a:visited 	{ color:rgb(51,51,51); display: inline-block; height: 30px; padding: 5px 20px; text-decoration: none; }
#banner nav a:hover	 	{ color:rgb(255,51,51); }
/*Content -- section id main*/
#main               	{ width:104%; display:inline-block; margin:12px 0 0 0; min-height:250px; }
.img_grid				{ width:197px; margin:0 19px 24px 0; float:left; }
.flush_left         	{ margin:0 0 24px 0; }
.bottom_rule, .bottom_rule2, .bottom_rule3         
                    	{ margin: 135px 0 15px 0; height:1px; width:630px; border-bottom: #ccc 1px solid; }
.bottom_rule2       	{ margin: 149px 0 15px 0; }
.bottom_rule3       	{ margin: 149px 0 15px 0; }
/*footer*/
footer              	{ margin:-40px auto 0 auto; font:12px/14px 'ProximaNovaRegular', sans-serif; height:250px; width:100%; background: url(../images/footer.jpg) repeat;}
.footer_container   	{ width:460px; margin:0 auto 0 auto; }
.contact a:link, 
footer a:visited, footer a:link { display:inline-block; color:rgb(232,228,228); text-decoration:none; }
.sitemap            	{ width:570px; margin:40px;}
.sitemap li         	{ display:inline-block; margin:-45px 0;}
.sitemap a:link, 
.sitemap a:visited  	{ text-align:center; color:rgb(232,228,228); text-decoration:none; margin-right:40px; }
.circle             	{ margin:30px 50px 0 0; height:115px; width:64px; background:url(../images/footerArrow.png) no-repeat;}
.contact            	{ margin:-10px 0 0 85px; text-align:center; height:45px; width:301px; }
.contact li, 
.contact a:link     	{ line-height:32px; margin:0; display:inline-block; }
.links           		{ font: 14px/5px 'Museo300'; margin:32px 0 0 140px;  width:220px; }
.links li	        	{ height:30px; display:inline-block; text-align:center; }
footer .htmllogo        { margin:0 85px; width:30%; }
.margincontact			{ padding-left:0; }
/*	13-column layout
	60 px columns, 24 px gutters, 72 px margins, 1212 px total (extra space for scrollbars)
	---------------------------------------------------------------------------------------
	1     2      3      4      5      6      7      8      9      10     11     12     13
	60px  144px  228px  312px  396px  480px  564px  648px  732px  816px  900px  984px  1068px	*/
@media only screen and (min-width: 1212px) {
	/*.hidden { display:hidden; }*/
	#container         { padding: 50px 72px 0; width: 1048px;}
	.logocontainer	   { position:relative; width:102%; height:100%; margin:0; float:left; }
	.logo	           { float:left; width:287px; height:28px; background:url(../images/logos/logo13col.png) 0 0 no-repeat; position:absolute; z-index:10; }
	.logoreverse	   { width:287px; height:31px; background:url(../images/logos/logo13col.png) 0 -28px no-repeat; position:absolute; }
	.sans, body, light { color:rgb(102, 102, 102);}
	.dark			   { color:rgb(51, 51, 51);}
	#banner h1         { font: 34px/52px 'Museo300', serif; margin:15px 0; width:850px; border:1px #999; 
						 border-style:solid none; padding:30px 100px 30px 100px; float:left; text-align:center; }
	.sans			   { font: 34px/52px 'ProximaNovaRegular', sans-serif;}
	.indent			   { margin: 0 0 0 100px;}
	.project h1 { font: 22px/34px 'Museo700', serif; letter-spacing: -2px;/*font-size: 76px;line-height: 84px;*/ }
	/* Main Nav */
	#banner nav        { font: 20px/38px 'ProximaNovaRegular', sans-serif; height: 40px; margin: 0 0 0 0; padding: 0; text-align: center; float:right; }
	#banner nav ul     { list-style: none; margin: 0 -30px;}
	#banner nav li     { float: left; display: inline; margin: 0;}
	#banner nav a:link, #banner nav a:visited 
				       { color:rgb(51,51,51); display: inline-block; height: 30px; padding: 5px 30px; text-decoration: none; }
	#banner nav a:hover, #banner nav a:active, #banner nav .active a:link, #banner nav .active a:visited 					   
					   { color:rgb(255,51,51); }   
	/*Content -- section id main*/
	#main              { width:105%; display:inline-block; margin:10px 0 0 0;  }
	.img_grid		   { width:330px; margin:0 30px 34px 0; float:left; }
	.flush_left        { margin:0 0 34px 0; }
	.bottom_rule, .bottom_rule2, .bottom_rule3         
                       { margin: 218px 0 15px 0; height:1px; width:1050px; border-bottom: #ccc 1px solid; }
	.bottom_rule2      { margin: 234px 0 15px 0; }
	.bottom_rule3      { margin: 234px 0 15px 0; }
}
/*	5-column layout
	60 px columns, 24 px gutters, 42 px margins, 480 px total
	---------------------------------------------------------
	1     2      3      4      5
	60px  144px  228px  312px  396px	*/
@media only screen and (max-width: 767px) and (min-width: 480px) {
	#container          { padding: 50px 42px 0 0; width: 350px; /* Prevents Mobile Safari from bumping up font sizes in landscape */-webkit-text-size-adjust: 100%; }
	.logocontainer	    { position:relative; width:102%; height:100%; margin:0 0 35px 50px; float:left; }
	.logo	            { float:left; width:287px; height:28px; background:url(../images/logos/logo13col.png) 0 0 no-repeat; position:absolute; z-index:10; }
	.logoreverse	    { width:287px; height:31px; background:url(../images/logos/logo13col.png) 0 -28px no-repeat; position:absolute; }
	#banner h1 		    { font: 24px/34px 'Museo300', serif; margin:5px auto 0 auto; width:90%; border:1px #999; text-align:center; 
						 border-style:solid none; padding:18px 32px 18px 32px; float:left; }
	.sans			    { font: 24px/34px 'ProximaNovaRegular', sans-serif; }
	.indent			    { margin: 0 0 0 0;}
	.project h1  		{ font: 22px/34px 'Museo700', serif; letter-spacing: -2px; }
	#banner nav         { font: 18px/36px 'ProximaNovaRegular', sans-serif; height:40px; width:88%; margin:12px 4px 0 0; }
	#banner nav a:link, #banner nav a:visited 
	                    { padding: 5px 20px; }	
	/*Content -- section id main*/
	#main               { width:115%; display:inline-block; margin:10px 0 0 0;  }
	.img_grid, .flush_left		   
					    { width:182px; margin:0 15px 15px 0; float:left; }
	.bottom_rule, .bottom_rule2, .bottom_rule3         
                        { display: none; }
	.bottom_sm_rule, .bottom_sm_rule2, .bottom_sm_rule3, .bottom_sm_rule4, .bottom_sm_rule5    
					    { margin: 120px 0 10px 0; height:1px; width:379px; border-bottom: #ccc 1px solid; }
	.bottom_sm_rule2    { margin: 130px 0 10px 0; }
	.bottom_sm_rule3    { margin: 130px 0 10px 0; }
	.bottom_sm_rule4    { margin: 130px 0 10px 0; }
	.bottom_sm_rule5    { margin: 130px 0 10px 0; }
	/*footer*/
	footer              { margin:-35px auto 0 auto; font:12px/14px 'ProximaNovaRegular', sans-serif; height:250px; width:100%; background: url(../images/footer.jpg) repeat;}
	.footer_container   { height:150px; width:380px; margin:0 auto 0 auto; }
	footer a:visited, footer a:link   
						{ display:inline-block; color:rgb(232,228,228); text-decoration:none; }
	.sitemap            { width:330px;}
	.sitemap a:link, 
	.sitemap a:visited  { text-align:center; color:rgb(232,228,228); text-decoration:none; margin-right:15px; }
	.circle             { margin:29px 20px 0 0; height:115px; width:64px; background:url(../images/footerArrow.jpg) no-repeat;}
	.contact            { margin:-15px 0 0 40px; text-align:center; height:30px; }
	.contact li, 
	.contact a:link     { line-height:35px; margin:-5px 0; display:block; }
	.links          	{ font: 14px/0px 'Museo300'; margin:45px 0 0 50px; width:280px;}
	.links li 	        { height:25px; display:inline-block; margin:0 0 0 45px;}
	footer .htmllogo    { margin:0 125px; width:23%; }
}
/*	3-column layout
	60 px columns, 24 px gutters, 46 px margins, 320 px total
	---------------------------------------------------------
	1     2      3
	60px  144px  228px	*/
@media only screen and (max-width: 479px) {
	#container          { padding: 38px 36px 0; width:210px; /* Prevents Mobile Safari from bumping up font sizes in landscape */ -webkit-text-size-adjust: 100%; }
    .logocontainer		{ position:relative; width:85%; height:100%; margin:0 0 30px -20px; }
	.logo	            { width:260px; height:23px; background:url(../images/logos/logo8col.png) 0 -3px no-repeat; position:absolute; z-index:10; }
	.logoreverse	    { display:block; width:260px; height:24px; background:url(../images/logos/logo8col.png) 0 -27px no-repeat; position:absolute; }
	#banner h1          { font: 20px/29px 'Museo300', serif; width:121%; margin:10px 0 0 -27px;  
						  border:1px #999; border-style:solid none; padding:15px 5px 15px 5px; float:left; }
	.sans	            { font: 20px/29px 'ProximaNovaRegular', sans-serif; }
	.indent	            { margin: 0; }
	.project h1 		{ font: 20px/32px 'Museo700', serif; letter-spacing: -2px; }
	#banner nav         { font: 16px/40px 'ProximaNovaRegular', sans-serif; /*font-weight:bold;*/ height: 40px; width:116%;
						  margin:5px -30px 0 0; }
	#banner nav a:link, #banner nav a:visited 
	                    { padding: 5px 26px 0 0; }
	/*Content -- section id main*/
	#main               { width:112%; display:inline-block; margin:20px 0 0 -2px;  }
	.img_grid, .flush_left		   
					    { width:262px; margin:0 0 13px -25px; padding-bottom:10px; float:left; border-bottom: #ccc 1px solid; }
	.bottom_rule, .bottom_rule2, .bottom_rule3         
                        { display: none; }
		/*footer*/
	.footer_container   { height:150px; margin:0 0 0 -33px; }
	footer a:visited, footer a:link   
						{ display:inline-block; color:rgb(232,228,228); text-decoration:none; }
	.sitemap            { width:313px;}
	.sitemap a:link, 
	.sitemap a:visited  { text-align:center; color:rgb(232,228,228); text-decoration:none; margin-right:15px; }
	.circle             { margin:29px 20px 0 0; height:115px; width:64px; background:url(../images/footerArrow.jpg) no-repeat;}
	.contact            { margin:-15px 0 0 35px; text-align:center; height:30px; }
	.contact li, 
	.contact a:link     { line-height:35px; margin:-5px 0; display:block; }
	.links          	{ font: 14px/0px 'Museo300'; margin:40px 0 0 60px; width:280px;}
	.links li 	        { height:25px; display:inline-block; text-align:center; margin:0 0 0 30px;}
	footer .htmllogo    { margin:0 115px; width:20%; }
}	
/*	Overrides for iPhone 4 
	and other high device-pixel-ratio devices
	-----------------------------------------	*/
/*@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
}*/