/*

- Design + Code by: ar

- Last Modified: 2010.01.21
- v1.0b6

- (c) 2010

*/



/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}




body {height: 800px; background: white url('images/background.png') repeat-x top left;}

body#images #nav a#navImages,
body#videos #nav a#navVideos,
body#bio #nav a#navBio,
body#service #nav a#navService,
body#contact #nav a#navContact	 {color: #990F12; font-weight: bold; font-style: italic; border-bottom: 4px solid #55020D; was 6px cursor: default;}


a			{outline: none; color: #aa2426; text-decoration: none; -webkit-transition: .15s;}
a:visited	{ /*color: #853d3e;*/}
a:hover		{color: #cd1827;}
a:active	{color: #8c1432;}

/*Bug fix (ie): "position: relative;" has been removed so as not to mess with the IE PNGfix. It's probably not needed at all. But if it ever is (eg: child elements need this explicitly written for position:absolute, know that it used to exist here. Maybe if it needs to be added back, add it to a child element. ar-2010.01.23 */
#container {width: 960px; height: 600px; margin: 0 auto; z-index: 1;}

#front 	#container {background: transparent url('images/bg_img-upside_down.png') no-repeat -30px 0;}

#images #container {height: 715px; background: transparent url('images/bg_img-bottom-vertical_smiling.png') no-repeat center bottom;}

#videos 	#XXXXcontainer {background: transparent url('images/bg_img-leap.png') no-repeat 18px 0;}

#videos 	#container {background: url('images/bg_img-bottom-bent_back.png') no-repeat center bottom;}

#bio 	#container {background: transparent url('images/bg_img-flying.png') no-repeat -30px 0;}

#service 	#container {background: transparent url('images/bg_img-flying_wings.png') no-repeat -11px 0px;}

#contact 	#container {background: transparent url('images/bg_img-cross_legged_looking.png') no-repeat -72px 0;}



#header {
	position: relative;		
	height: 150px;

	z-index:1;
}

h1 {
	/*
	This is some clever shit.
	- The IE PNG Fix has a problem with elements that have a "position" assigned. eg: "position: relative".
	- But I really need to asign a position to this h1 (either "relative" or "absolute".
	- The solution: Set the position you want for the h1 in the containing element (so long as the containing element doesn't need the PNG fix). In this case, it "position: relative" from the "#header" above.
	- Next, set the position of this h1 to "inherit".
	- This gets the position I want for good browsers while allowing me to position the element in the IE ONLY style sheet based off of the positioning of the parent elements "position: " decralation.
	- The reason for this, is one can't "cancel" out a previous CSS declaration. This is the workaround
	- Exception. Obviated when "iepngfix_tilebg.js" is included.
	-  ar-2010.01.23*/
	position: inherit;
	display: block;
	/*position: absolute;
	top: 0;
	left: 304px;*/
	width: 349px;
	height: 154px;
	margin: 0 auto;
	
	font-variant: small-caps;
	font-size: 2.6em;
	font-family: "Adobe Garamond", "Times New Roman", Georgia, serif;
	text-indent: -666em;
	
	/*background: url('images/nav-biancasapetto.png') no-repeat center center;*/

	background: url('images/nav-biancasapetto.png') no-repeat 4px center;
	
	z-index: 10;
	}

h1 a		{position: absolute; top: 50px; left: 28px; width: 300px; height: 40px; border: 0;}
h1 a:hover	{border: 0;}

#shadowName {
	position: absolute;
	top: 20px;
	left: 282px;
	width: 400px;
	height: 70px;
	
	background: url('images/nav-shadowName.png') no-repeat 0 50%;

	z-index: -1;
}

#shadowLinks {
	position: absolute;
	top: 90px;
	left: 282px;
	
	width: 400px;
	height: 40px;
	
	background: transparent url('images/nav-shadowLinks.png') no-repeat 0 50%;
	
	z-index: -1;
}	

ul#nav {
	display: block;
	position: absolute;
	
	top: 89px;
	left: 329px;

	text-align: center;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px;
	
	z-index: 30;		
}


ul#nav					{list-style: none; margin: 0 auto;}
#nav li					{list-style: none; display: inline; margin-right: 15px;}
#nav li:last-child		{margin: 0;}

#nav li a				{position: absolute;}
#nav li a#navImages		{left: 0;}
#nav li a#navVideos		{left: 71px;}
#nav li a#navBio		{left: 137px;}
#nav li a#navService	{left: 179px;}
#nav li a#navContact	{left: 250px;}

/*Non-Plural "video"*/
/*#nav li a				{position: absolute;}
#nav li a#navImages		{left: 0;}
#nav li a#navVideo		{left: 71px;}
#nav li a#navBio		{left: 128px;}
#nav li a#navService	{left: 168px;}
#nav li a#navContact	{left: 238px;}*/

#nav a			{text-transform: uppercase; color: #7b2525; text-decoration: none; outline: none; border-bottom: 1px solid transparent; -webkit-transition: border-bottom 0.1s;}
#nav a:hover 	{color: #990003;  border-bottom: 2px solid #b9747d; /*was 3px and #55020D*/}
#nav a:active 	{color: #D2050C;}

#content		{position: absolute; top: 200px; width: 960px; z-index: 1;}
#content em		{font-style: italic;}




.greyroundedbox {margin: 2em 0; background-color: #f1eeef; border: 1px solid #d5d2d2; moz-border-radius: 4px; -webkit-border-radius: 4px;}

/********************************************************************
Media Stage
*********************************************************************/

#stage {
	position: relative;
	/*top: -24px;*/
	top: -69px;
	
	/*
	"Visibility: hidden" helps with IE.
	Think about using this to turn "off" elements by default, intead of jQuery's "$(".tab_content").hide();"
	*/
	visibility: hidden;
	
	margin: 0 auto;
	margin-bottom: -60px;
}

#stage .media {
	position: absolute;
	top: 50px;
	left: 50px;
	background-color: black;
	
	/*border: 5px solid #fff;
	-webkit-box-shadow: 0px 0px 100px #ccc;*/	
}


/*Bug fix: If any changes need to be made to the below "#stage.s640x424" or "#stage.s700x525", make sure to replicate them in the IE Only stylesheet "styles-ie.css". See bug fix: "IE Doesn't like it when classes are strung together." ar-2010.01.23 */

/*Videos*/
#stage.s640x424 {
	width: 740px;
	height: 530px;
	background: transparent url(images/media_stage-shadow-640x424.png) no-repeat 0 0;
}

#stage.s640x424 .media {
	width: 640px;
	height: 424px;
}


/*Pictures*/
#stage.s700x525 {
	width: 798px;
	height: 623px;
	background: transparent url(images/media_stage-shadow-700x525.png) no-repeat 0 0px;
}

#stage.s700x525 .media {
	width: 700px;
	height: 525px;
}






#content p.mediainstructions {
	display: block;
	position: absolute;
	left: 0;
	width: 960px;
	color: #cba8ab;
	font: italic 0.8em Georgia, "Times New Roman", Times, serif;
	text-align: center;
}

#content p.selectbelow {top: -38px;}
#content p.imagesdescnote {top: 530px; display: none;}


#content .tab_content p.meta {
	/*position: absolute;*/
	display: none;
	bottom: -40px;
	left: 0px;
	width: 640px;
	
	color: #cba8ab;
	font: italic 0.8em Georgia, "Times New Roman", Times, serif;
	text-align: right;
}

#content .tab_content p.meta span {
	position: relative;
	margin: 0 5px;
}



/********************************************************************
Media Selector
*********************************************************************/

.tabselector {
	display: block;
	position: relative;
	width: 740px;

	margin: 0 auto;
	margin-top: 0px;
	margin-bottom: 80px;
	
	text-align: center;
	font: 0.8em "Lucida Grande", Lucida, Verdana, sans-serif;
}

.tabselector ul.tabs {
	height: 50px;
	padding: 8px 0;
	background: url(images/media-selector-bg.png) no-repeat top center;
}


#bio .tabselector ul.tabs {
	height: 50px;
	padding: 8px 0;
	background: url(images/bio-selector-bg.png) no-repeat bottom center;
}




.tabselector ul.tabs li {display: inline;}

/*Bug fix: I have no idea what's going on with these. There is a roughly 3px gap between each li and I don't know where it's coming from. The only way to fix it is with this "margin: -3px". It works in all good browsers. In IE, it makes the "border-right" disapear. But that's easy to fix. in the IE only stylesheet, just set "margin: 0".

MORE:
After getting most of the jQuery to work now, this -3px is needed in IE as well! Without it, there is the same gap.

ar-2010.01.23*/ 


.tabselector ul.tabs li a {
	padding: 7px 15px 45px 15px;
	margin: -3px;
	
	border-right: 1px solid white;
	/*-webkit-transition: none;*/
	/*-webkit-transition: background-color .15s ease-out;*/
	
	-webkit-transition-property: background-color, color;
	-webkit-transition-duration: .15s;
	-webkit-transition-timing-function: ease-out;
	
	/*This background-color: rgbs() is specifically for Safari and the -webkit-transition. It gets around the "flash of grey" bug. Without it, there is a "flash of grey" when the link is clicked. I discovered this workaround on 2010.02.25.*/
	background-color: rgba(255,255,255, 0);
}


#bio .tabselector ul.tabs li a {
	position: relative;
	top: 36px;
	padding-top: 45px;
	padding-bottom: 7px;
}



.tabselector ul.tabs li.last a {border: none;}

/*Selected "active" Tab*/
.tabselector ul.tabs li.active a {
	padding-top: 8px;
	color: #793f63;
	font-style: italic;
	background-color: #fff;
	
	/*border-right: 1px solid #ded1d9;
	border-left: 1px solid #ded1d9;*/
}








/********************************************************************
Footer
*********************************************************************/



#footer			{position: relative; margin-top: 50px; margin-bottom: 60px; color:#D3BED3; text-align: center; z-index: 1;}
#footer span	{font-size: 0.7em; font-family: Georgia, "Times New Roman", serif; text-transform: uppercase;}
#footer span em	{font-family: "Times New Roman", serif; text-transform: uppercase; }

/*For whatever reason, the margin-bottom of the #footer on the Bio page doesn't kick the viewport down. So this extra padding is needed, just for that page, to make it look like the other pages. ar-2010.02.28*/
#bio #footer	{padding-bottom: 60px;}



/********************************************************************
Page specific (with text content)
*********************************************************************/

/*
With fancy background color. Too Heavy

#content a	{ padding: 2px 1px; color: #aa2426; text-decoration: none; background-color: white; -webkit-transition: 0.15s;}
#content a:visited	{color: #853d3e;}
#content a:hover	{background-color: #f8f1ed;}
#content a:active	{background-color: #472d2a; color: white;}
*/


#content 			{color: #352C2B; font: normal 0.9em/1.6em Georgia, "Times New Roman", serif;}
#content p			{margin-bottom: 1em; text-align: justify;}
#content p.first 	{font-size: 1.3em; line-height: 1.5em; padding-bottom: 1em; border-bottom: 1px solid #ebe6e5;}


#enddot				{background: url(images/end_dot.png) no-repeat center center; width: 24px; height: 24px; margin: 0 auto; padding-top: 30px; margin-bottom: 20px;}




/********************************************************************
Front (Page specific)
*********************************************************************/


/*#front .word {
	position: absolute;
	font-size: 1.2em;
	color: #705c5a;
}

#front .word.left {
	top: 55px;
	left:  220px;
}

#front .word.right {
	top: 55px;
	left: 575px;
}*/

#front #container {}

#front .word {
	position: absolute;
	top: 55px;
	height: 28px;
	text-indent: -666em;
	font-size: 1.2em;
	color: #705c5a;
}

#front .word.performer {
	left:  270px;
	width: 100px;
	background: url(images/front_text-Performer.png) no-repeat;
}

#front .word.choreographer {
	left: 535px;
	width: 148px;
	background: url(images/front_text-choreographer.png) no-repeat;
}




/********************************************************************
Bio (Page specific)
*********************************************************************/


#bio #content					{margin-top: 70px;}
/*This min-height keeps the scrollbars present when the tab content is switching. ar-2010.02.28*/
#bio #content #tabscontainer	{min-height: 600px;}

#bio #content .tab_content		{margin-top: -20px;}



#bio #content .right	{float: right; margin: 30px 0 10px 40px;}
#bio #content .left		{float: left; margin: 0 40px 20px 0;}



#bio #content .quest {
	padding: 3px;
	color: #474658;
	background-color: #f1f1f1;
	
	-webkit-border-radius: 3px;
	moz-border-radius: 3px;
}

#bio #content .image {}

#bio #content .image span {
	display: block;
	padding-top: 6px;
	font-size: 0.8em;
	font-style: italic;
	text-align: center;
	color: #7f7f7f;
}

#bio #content .image span strong {color: black; font-weight: bold;}






#bio hr {

	margin: 50px auto;

	width: 15px;
	border-width: 0;
	border-top: 3px double #ebe6e5;
}





/********************************************************************
Bio: Resume (Page specific)
*********************************************************************/

#bio #resume {}

#bio #resume #category {
	position: relative;
	top: -50px;
	/*position: absolute;		
	top: 75px;
	left: 175px;*/	
	text-align: center;
	font: 0.7em "Lucida Grande", Lucida, Verdana, sans-serif;
	/*background: url(images/media-selector-bg.png) no-repeat center 22px;*/
}

#bio #resume #category li {
	display: inline;
	margin-left: 20px;
	padding-right: 20px;
	padding-bottom: 0;
	background-color: transparent;
	border-right: 1px solid #ded1d9;
}

#bio #resume #category li:last-child {border: none;}






#bio #resume h2	{
	margin: 20px 0px 25px 0px;

	color: #453f41;
	text-align: center;
	font: 1.4em Georgia, "Times New Roman", Times, serif;


	/*border-top: 1px double #ebe6e5;*/
	
	
	/*border: 1px solid #ebe6e5;
	moz-border-radius: 5px;
	-webkit-border-radius: 4px;*/
	
	/*background-color: #f6f3f4;*/
}


#bio #resume ul	{
	padding: 0;
	margin: 0;
	margin-bottom: 30px;
}

#bio #resume ul li {
	padding-bottom: 18px;
	background-color: #f1eeef;
	-webkit-transition: background-color 0.2s;
}

#bio #resume ul li:hover {
	background-color: white;
}

#bio #resume ul li:hover h4 {
	background-color: #473d42;
	color: white;
}



/*resume group header*/

#bio #resume ul li.header{
	
	margin: 0;
	padding: 0;
	
	-webkit-transition: background-color 0.2s;
	
	background-color: #50494b;
	border-bottom: 1px solid #fff;
}


#bio #resume ul li h3 {
	
	padding: 7px 7px;
	
	text-align: left;
	color: white;
	
	font: 1.2em "Lucida Grande", Lucida, Verdana, sans-serif;
	border-bottom: 1px solid #433d3f;
}




/*resume item header*/


#bio #resume ul li h4 {
	position: relative;
	display: block;
	margin-bottom: 7px;
	padding: 3px 7px;
	height: 1.2em;

	color: #5d4f55;
	font: bold 0.7em "Lucida Grande", Lucida, Verdana, sans-serif;	

	text-transform: uppercase;
	
	background-color: #ebe3e6;
	border-top: 1px solid #e0d8db;
	
	-webkit-transition: background-color color 0.2s;
}

#bio #resume ul li h4 .years {
	/*position: relative;
	float: right;*/

	position: absolute;
	right: 7px;
	height: 1em;

	font-size: 1em;
	font-weight: normal;
}



#bio #resume ul li p {
	display: block;
	margin: 0 40px;
	
	text-align: left;
	font-size: 0.9em;
	line-height: 1.6em;
	
	color: #675553;
}

#bio #resume ul li p.meta {
	margin: 10px 40px 0px 40px;
	font: normal 0.7em "Lucida Grande", Lucida, Verdana, sans-serif;
}

/*#bio #resume ul li a.resumelink {
	display: block;
	margin: 10px 40px 0 40px;
		
	background-color: transparent;
}

#bio #resume ul li a.resumelink:hover	{color: #cd1827;}
#bio #resume ul li a.resumelink:active	{color: #8c1432;}*/


/********************************************************************
Bio: Skills (Page specific)
*********************************************************************/












/********************************************************************
Service (Page specific)
*********************************************************************/

#service #content	{margin-top: 360px;}

#service .quote	{display: block; text-align: center; font-size: 1.6em; line-height: 1em; text-align: center;}
#service .cite	{display: block; text-align: center; font-style: italic; color: #cbbabf;}

#service p.first	{margin-top: 50px; font-size: 1em; border: 0;}

#service ol {
	margin-bottom: 2em;
	padding: 10px 0 4px 0;
	border-top: 3px double #e9e7e7;
	border-bottom: 3px double #e9e7e7;
}

#service ol li {
	margin-left: 40px;
	margin-right: 35px;
	margin-bottom: -6px;

	list-style: decimal outside;
			
	font: normal 0.7em "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #c0b0b4;
}

#service ol p {
	font-size: 1.2em;
	line-height: 1.5em;
	color: #675553;
}

#service #organizations ul {
	float: left;
	margin: 1.3em 0;
}

#service #organizations ul li {
	/*margin-left: 3em;
	margin-right: 2em;*/
	list-style: square outside;
	/*font: normal 0.8em/1.7em "Lucida Grande", Lucida, Verdana, sans-serif;*/
		font: normal 0.9em/1.5em "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #675553;
}






/*DEBUG*/

/** { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }*/