@charset "UTF-8";



	#home #contact {
		/*right:auto;
		left:65%;
		margin-left:111px;*/
		float:right;
		margin-top:-8px;
		margin-right: 5px;
	}
	
	#home #line {
    	margin-left: 2px;
	}
	
	#home .mainNav, #home header {	
		width:837px;
		margin-left:auto;
		margin-right:auto;
	}
	
	.studioLinks img {
		width:24px;	
	}




@media screen and (max-width: 1032px) {    /*orig wrapper width + 12px for  scrollbar */

	#wrapper, #home #wrapper {
		max-width: 100%;
	}
	
	#stage  {
		max-width:100%;
	}
	#home #line {
		/*max-width:68%;*/
		
		/*top:113px;
		margin-left:60px;*/
		
	}
	#home .mainNav {
		max-width: 98%;
		margin-left:auto;
		margin-right:auto;
	}
	#home .slideable {
	max-width: 100%;
	}
	.topNav {
	margin-left: 10px;
	}
	
	#home footer {
		width:837px;
		margin-left:5%;
		margin-right:5%;	
	}
	
	
	
}

/*Viewport smaller than 982 - decrease margins before going to 1 column layout*/
@media screen and (max-width: 1005px) {    /*magenta*/

	#wrapper {
		/*max-width: 100%;*/
	}
	#home .mainNav {
		/*max-width:100%;*/
		
	}
	.topNav {
	margin-right:16px;
	margin-left: 10px;
	}

	#content {
		margin-right:17px;
	}

	aside {
		margin-left:90px;
	}
	
	/*footer {
		width:auto;
		margin-left:93px;
		margin-right:10px;
	}*/
	
	#address {
		right:10px;
		
	}
	
	
}



/*Viewport Smaller Than 940px (One-Column Layout)*/
@media screen and (max-width: 940px) {  

	header {
		height: auto;
		width:547px;
		margin: 0 auto 10px auto;
		
	}
	#wrapper {
		margin-top:0;
		width:auto;
		padding:0 5px;
	}
	
	#logoWrapper {
		width:auto;
		margin-left:3px;
		padding-right:0;
		background-position:61px bottom;
	}
	a#logoSm {
		margin-left:0px;	
		
	}
	#home #contact {
		/*top:103px;*/
	}
		
	#home #line {
		/*display:none!important;*/
	}	
		
		
	.topNav {
	width: 550px;
	margin-top: 10px;
	margin-right: 0;
	margin-left: 3px;
	white-space: nowrap;
	clear: left;
	float: left;
	}
	
	.topNav li {
	/*margin-right: 34px;	*/
	}
	
	.topNav li.last {
	float:left;
	}
	
	.topNav li a {
		line-height:45px;
	}
	
	#address {
		margin: 0;
		position: static;
		float:right;
		width:200px;
	}
	
	a#logoSm {
		margin-top:10px;	
	}
	
	#content {
		float: none;
		margin-top:10px;
		padding-top:20px; /*for space above the h2 ('has layout' gone now that it's not floating)*/
	}
	#content #foot {
		margin-top:0px;
		width:100%;
		margin-bottom:-19px;
		float:left;
		clear:both;
	}
	
	aside {
	  overflow: hidden;
	  padding: 0;
	  background: url(images/velum_content550.png) left top no-repeat;
	  float: none;
	  height: auto;
	}
	
	aside.padTop {
		padding-top:10px; /*decrease*/	
	}
	.descrip {
		margin: 3px 15px 8px 18px;
		font-size:14px;
	}
	.larger {font-size: 16px;}
	
	aside nav ul.secondary {
	overflow: hidden;
	padding: 0;
	margin: 10px 15px 5px 18px;
	}

	
	aside ul.secondary li {
	float: left;
	margin-right: 20px;
	margin-bottom: 5px;
	}
	
	ul.secondary li a {
		padding-left:24px;
	}
	/******/
	ul.secondary.studioLinks {
		width:auto;
		margin-top:3px;
	}
	
	/*.studioLinks li a {
		height:32px;
		margin-bottom:0;
	}
	.studioLinks li a:hover, .studioLinks li a.current {	
	}
	.studioLinks img {
		width:24px;	
	}*/
	
	/*********/
	
	.studioLinks li {
		width:135px;
	}
	
	.studioLinks li a {
		background: url("images/frameset_tiny.png") no-repeat left top;
		height:20px;
		margin-bottom:0;
		padding-left:24px;
	}
	.studioLinks li a:hover, .studioLinks li a.current {
    	background: url("images/frameset_tiny.png") no-repeat left bottom;
	}
	.studioLinks img {
		display:none;
	}
	
	/*********/

	h2 {
		color: black;
		/*background-image: url(images/velum_ribbon.png);*/
		background-image:url(images/velum_aside260.png);
		background-size:cover;
		padding: 0 4%;
    	width: 92%;
	}

	/*********/
	
	#seriesLabel {
	}
	
	#seriesLabel {
		font-size:12px;
		letter-spacing:1px;
		padding:8px 6px 10px 6px;
		/*margin-left:10px;*/
		margin-bottom:0px; /*because the ul right below it has a margin-top applied*/
		/*background:url(images/velum_curved.png) left bottom no-repeat;*/ /*Bug in Safari mobile picking the wrong bg image*/
		background-image:none;
		background-color:rgba(0,0,0,1);
		color:#fff;
		text-shadow:none;
		width:400px;
	
	}
	#seriesLabel.first {
		margin-top:10px;
	}
	/*****/
	
	
	
	aside, #content, footer, #content.wide, #content #foot {
		width:550px;
		max-width:100%;
		margin-left: auto;
		margin-right:auto;
	}
	
	.rightNote {
		padding-right:43px;
		padding-top:25px;
	}

	#content h2 {
		margin-top:0;
	}
	
	#content.wide #thumbWrapper {
    margin-left: 10px;
    margin-right: 20px;
	}

}
/******/
@media screen and (max-width: 880px) { 

	#home #wrapper {
		height:886px; /*shortcutting the js since I can bet you're on an ipad*/
		}

/*Prevent home page icons form having only 1 icon drop to the second line.*/
/* 3 icons in top row plus 2 icons in bottom row = 500px, but line breaks early (2 on top, 3 on bottom) if less than 510px*/	
	#home .mainNav {
		width:510px;
		max-width: 98%;
		border:none;
	}
	#home header {
		padding-right: 10px;
    	width: 500px;
		margin-left:auto;
		margin-right:auto;
	}
	
	#home #line {
		/*max-width:332px;*/
		/*left:50%!important;*/ /*center it*/
		/*margin-left:-245px;*//*minus half the width of the mainNav*/
	}
	#home #contact {
		/*left:auto;
		right:50%;
		margin-right:-244px;*//*minus half the width of the mainNav*/
	}
	#home #stage_birdpname {
		left:50%!important; /*center it*/
		margin-left:-347px; /*minus half the width of the mainNav, minus the original transform position and the distance betwn tail and p.  This aligns the edge of the P to the edge of the mainNav, even as the window size changes. */
	}
	
	#content.wide {
		/*width:auto;*/	
		padding-bottom:15px; /*can only put this here now that I removed the foot image*/
	}
	
	
	#home footer {
		
			width:488px;
			bottom:3px;
			right:50%;
			margin-right:-244px; /*half of width, for centering*/
			
	}
	
	/*fancybox button helpers - make space around them larger */
	/*Appears to be overriden by some javascript when on actual device
	#fancybox-buttons ul {
	
		width: 262px;
		height: 50px;
	}
	#fancybox-buttons a {
		border:none;
		margin-left: 10px;
    	margin-right: 10px;
    	margin-top: 10px;
	}
	#fancybox-buttons a.btnToggle, #fancybox-buttons a.btnClose { 
		border-left:none;
		border-right:none;
	}*/
	
}

@media screen and (max-width: 570px) { 
/*@media screen and (max-width: 480px) { */
	#home #wrapper {
		height:auto;
	}
	
	#stage  {
		max-width:100%;
		
		display:none;
	}
	
	#home #line {
		max-width:65%;
		top:115px;
		display:none!important;
	}
	
	#home header {
		max-width:320px;	
		
	}
	
	#home .mainNav {
		max-width:320px;
		height:auto;
		margin-left:auto;
		margin-right:auto;
	}

	#home .mainNav li {
		margin-right:3px;
		margin-left:2px;
		}
		
	#home #contact {	
		display:inline;
		/*width:146px;
		margin-right:-63px;*/ /*centered under name*/
		/*right:50%;
		top:120px;*/
		
	}
	
	#home .slideable {
	max-width: 100%;
	position:static;
	display: block;
	margin-top:10px;
	
	}
	
	
	#home #logoWrapper {
		float:none;
		/*width:248px;*/
		width:310px;
		margin-left:auto;
		margin-right:auto;
		background-image:url(images/dots.png);	
		background-position:center bottom;
		background-repeat:no-repeat;
		display:block;
		padding-bottom: 15px;
	}
	#home a#logoSm {
	/*width: 248px;
	height: 88px;*/
	margin-left: 0px;
	/*margin-left:-60px;*/ /*distance btwn tail and p*/
	/* [disabled]background-image:url(images/birdpname_u3_140offon.png); */
	display: block;
	}
	#home a#logoSm:hover {
		background-position:left bottom;
	}
	
	#home footer {
		display:block;
			width:320px;
			bottom:3px;
			right:50%;
			margin-right:-160px; /*half of width, to center*/
			
	}
	#home .copyright {
		display:block;
		margin-top: -90px;
		margin-left:50%;
		padding-left:10px;
		width:90px;
	}
/*	#stage_SVGImage0, #stage_SVGImage1, #stage_SVGImage2, #stage_SVGImage3, #stage_SVGImage4, #stage_SVGImage5, #stage_SVGImage6, #stage_SVGImage18, #stage_SVGImage19, #stage_SVGImage20, #stage_SVGImage21, #stage_SVGImage22, #stage_birdpname {
		
	-webkit-transform: scale(.5,.5);
	-moz-transform: scale(.5,.5);
	transform:scale(.5,.5);
	}*/


	#wrapper {
	width: 98%;
	/*width: 320px;*/
	padding-left:2px;
	padding-right:7px;
	}
	
	header, aside, #content, footer {
		width:100%;
		margin-left: auto;
		margin-right:auto;
	}
	#content.wide {
		width:100%;	
	}
	
	#content #foot {
		background-size:contain;
	}
	
	#wrapper div#content.long, div#content, #foot {
	background-image:none;
	}
	
	aside, #content, #content.long, #content.wide {
		background-repeat:no-repeat;
		background-size:100%;
	}
	
	#logoWrapper {
		width: 192px;
		height:auto;
		padding-bottom:5px;
		margin-bottom:10px;
		margin-right:20px;
		margin-top:5px;
		background-position:5px bottom;
	}
	
	a#logoSm {
	/*margin-left: -58px;*/
	/* [disabled]background-image:url(images/birdpname_u3_offon175.png); */
	/*width: 175px;
	height: 76px;*/
		background-size: 85% auto; /*so it doesn't run into the small vertical nav*/
    	height: 75px;
	}
	
	a#logoSm:hover {
		/*background-position:left top;*/	
	}
	
	#address, #address:hover {
		float:left;
		clear:left;
		width: 192px;
		margin-left:4px;
		background-image:url(images/contact.png);
		background-position:left center;
	}
	
	.topNav {
		/*float:right;
		width:46%;
		margin-top:-141px;*/ /*go under logo instd of to its right. Fill 100% space*/
		margin-right:0px;
	}
	
		
	.topNav li {
		margin-right:0;
		float:none;
	
	}
	.topNav li a {
	/*font-size:16px;
		background:url(images/velum_curved.png) no-repeat left center;*/
		/*Bug in Safari mobile picking the wrong bg image*/
	/*background-color: rgba(210,210,210,.6);*/
	background-image:url(images/velum_aside260.png); /*But will allow this image instead*/
	background-position: -5px top;
    background-size: cover;
	padding: 2px 10px 2px 30px;
	font-size:19px;
	
	}
	
	.topNav li a:hover, .topNav li a:active {
		/*background-color:rgba(120, 120, 120, 0.6);	*/
	}
	
	.topNav li.current a {
    /*background-color: rgba(100, 100, 100, 0.6);*/
	}
	
	.topNav li.last {
		float:none;
	}
	
	.topNav li.current {
		padding-right:0;
	}

	aside nav ul.secondary {
		padding-top:0;
		margin:10px 5px 5px 10px;
		
	}
	aside ul.secondary li {
		float:left;
		margin-right:10px;
		margin-bottom:15px;
		margin-top:10px;
		
	}
	
	aside ul.secondary li a {
		font-size:14px;
		padding-left:22px;
		padding-right:5px;
	}
	
	
	ul.secondary.studioLinks {
		width:97%;
	}
	.studioLinks li a {
		background: url("images/frameset_tiny.png") no-repeat left top;
		height:20px;
		margin-bottom:0;
	}
	.studioLinks li a:hover, .studioLinks li a.current {
    	background: url("images/frameset_tiny.png") no-repeat left bottom;
	}
	.studioLinks img {
		display:none;
	}
	
	.rightNote {
		padding-right:0px;
		padding-top:15px;
		margin-right:0;
		width:110px;
		font-size:11px;
	}
	
	
	
	
	#wrapper #content #thumbWrapper {
		width:auto;
		padding:0 9px 0 0px;
		margin-left: 9px;
		margin-right:0px;
		margin-top:5px;
	}
	
	#wrapper #content #thumbWrapper.Lg {
		width:420px; /*avoid unused space to the right of larger thumbs*/
		margin-left:auto;
		margin-right:auto;
		padding-right:0;
		padding-left:8px;
	}

	#thumbWrapper .thumbSet {
	/*display:block;*/
		margin-top:-5px;
		margin-bottom:5px;
		margin-right:-10px;
		width:auto;
		height:auto;
		overflow:hidden;
	}
	img.wideThumb {
		/*border:5px solid #222;*/
		max-width:100%;
		height: auto;
	}
	
	#thumbWrapper .thumbSet a {
		/*border:5px solid #222;
		margin-right:3px;
		width:39px;
		height:auto;*/
	}
	#thumbWrapper .thumbSet img{
		width:auto;
		height: auto;
		float:left;
		display:block;
	}
	
	#thumbWrapper a.mediumThumb {
		max-width:132px; /*was 200px*/
		width:42%;	
		height: auto;
	}
	
	a.mediumThumb figure, a.mediumThumb figure img {
		width:100%;
		height: auto;
	}
	
	
	.feature {
	float:none; 
	opacity:1; 
	width:50%;
	display:block;
	margin-left:auto; 
	margin-right:auto;
	margin-top:0; 
	margin-bottom:10px;
	}
	
	#content p {
		/*font-size:95%;*/
	}
	
	.descrip {
		margin-left: 10px;
	}
	
	html {
		-webkit-text-size-adjust: none;
	}

	.fancybox-title {
		font-size:96%;
		line-height:128%;
	}
	.fancybox-title span, .fancybox-title span + span {
		display:inline;
		margin-left:4px;
	}
		
	
}

@media screen and (max-width: 530px) { 
#interactive #content.long #thumbWrapper { 
	margin-left:auto;
	margin-right:auto;
	width:220px;
}

.siteGroup {
	margin-right:0;	
}
}



@media screen and (max-width: 420px) { 
	#wrapper #content #thumbWrapper.Lg {
		width:280px; /*only wide enough for 2 of the larger thumbs in each row*/
		padding-right:0;
		padding-left:8px;
	}
	
	#seriesLabel {
		width:266px;
	}
}

@media screen and (max-width: 330px) { 	
#thumbWrapper a.mediumThumb {
		width:40%;	/*math discrepancy*/
	}
}


/*Make images fluid
  and fix ie8 bug so auto works*/
img {
	max-width: 100%;
	height: auto;
	width: auto\9;  /* ie8 */
}



/*Also make video flexible  (Safari)*/
.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

html {
	-webkit-text-size-adjust: none;
	word-wrap: break-word;
}