/*

- 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;}

/*
Friday, November 8, 2019 @ 12.53pm
- Undo-ing the reset above.
*/
em {font-style: italic;}
strong {font-weight: bold;}


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			{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; 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-top: 2em; 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;
	overflow: hidden;
}

#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 {
    display: flex;
    justify-content: center;

	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 {}

/*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;*/
	
    padding: 7px 17px 45px 17px;

    border: 1px solid transparent;
    border-right-color: white;

    /*background-color: grey;*/


	/*-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 Links (ex: Instagram, Lunar Yoga Newsletter Signup)
*********************************************************************/


/*
	## Pulled in (and converted SASS -> CSS) from `styles--lunar-yoga.sass`
	- Was named: `.outbound-links` for a number of commits
	- Not the best name.
	*/


.footer-links {
	display: flex;
	justify-content: center;

	margin-top: 50px;

	/*align-content: stretch;*/
	/*flex-basis: 2;*/
	/*background-color: #fffcfd;*/

/*	border-radius: 3px;
	overflow: hidden;

box-shadow:
  0px 1.3px 2.2px rgba(0, 0, 0, 0.02),
  0px 3.1px 5.3px rgba(0, 0, 0, 0.028),
  0px 5.8px 10px rgba(0, 0, 0, 0.035),
  0px 10.3px 17.9px rgba(0, 0, 0, 0.042),
  0px 19.2px 33.4px rgba(0, 0, 0, 0.05),
  0px 46px 80px rgba(0, 0, 0, 0.07)
;

background: linear-gradient(180deg, rgba(170,36,38,0.05) 0%, rgba(255,255,255,0) 80%);
*/

}


.link--container {
	display: flex;
	width: 50%;
}

.link--container:first-child {
	justify-content: flex-end;
}

.link--container:last-child {
	justify-content: flex-start;
}



.link--container:first-child .link--text {
    text-align: right;
}

.link--container:last-child .link--text {
	text-align: left;
    order: 2;
}



.link--container:first-child .link--icon {
    margin-left: 10px;
}
.link--container:last-child .link--icon {
    margin-right: 10px;
}





.link--anchor .link--text {
	/*--space-around: 8px;*/
    /*margin: 0 var(--space-around);*/
    /*margin-right: calc( var(--space-around) - 4.5px);*/

    /*white-space: nowrap;*/

}






.link--anchor {
    display: flex;

    /*flex: 1;*/
    /*width: 50%;*/

    /*flex-direction: column;*/
    align-items: center;
    justify-content: center;

    /*width: 100%;*/
    /*height: 6.5rem;*/

    padding: 15px 15px;
    margin: 2px;
    /*margin: 1rem;*/

    font-size: 14.5px;
    line-height: 1;
    font-weight: 600;
    /*line-height: 0.9;*/

    font-family: sans-serif;
    text-transform: uppercase;

    /*letter-spacing: 3.3px;*/
    letter-spacing: 1.2px;
    /*text-align: center;*/

    /*border: 1px solid currentColor;*/
    /*box-shadow: 0 0 0 black;*/

/*	border-radius: 4px;
	overflow: hidden;
*/

	border-radius: 15px;

	transition: all 200ms ease-in-out;
}


/*
SPECIAL:
- Just for the front page.
- To make it look centered with "*Lunar Yoga*"
- Because "Instagram" is fewer characters than "Newsletter"
*/

/*Larger gap between links*/
body#front .link--container:first-child .link--anchor {
	margin-right: 14px;
}

/*Smaller gap between links*/
body#front .link--container:last-child .link--anchor {
	/*margin-left: -10px;*/
}





.link--anchor--instagram #icon--instagram path {
  fill: currentColor;
}





.link--anchor .link--icon {
    display: flex;

    height: 1.3rem;
    width: 1.3rem;

    padding: 10px;
    /*margin: 0 10px;*/

    /*line-height: 1.5;*/
    /*letter-spacing: 0;*/

/*https://shadows.brumm.af*/

box-shadow:
  0px 1.4px 2.2px rgba(0, 0, 0, 0.028),
  0px 3.4px 5.3px rgba(0, 0, 0, 0.04),
  0px 6.4px 10px rgba(0, 0, 0, 0.05),
  0px 11.4px 17.9px rgba(0, 0, 0, 0.06),
  0px 21.3px 33.4px rgba(0, 0, 0, 0.072),
  0px 51px 80px rgba(0, 0, 0, 0.1)
;



	background: linear-gradient(0deg, rgba(170,36,38,0.05) 0%, rgba(255,255,255,0) 80%);

	border-radius: 35%;

	/*box-shadow: 0 0 20px rgba(0,0,0,0.3);*/
	/*background: white;*/

}

.link--anchor .link--icon svg {
	width: 100%;
	height: 100%;
}

.link--anchor .link--text {
	/*--space-around: 8px;*/
    /*margin: 0 var(--space-around);*/
    /*margin-right: calc( var(--space-around) - 4.5px);*/

    /*white-space: nowrap;*/
    /*text-align: left;*/
}

.link--anchor .link--text .sub {
	/*color: green;*/
	display: block;
	margin-bottom: 1px;

	font-size: 0.75em;
	font-weight: bold;
	color: rgba(170,36,38,0.5);

	/*letter-spacing: 1.2px;*/

}

.link--anchor .icon--arrow {
    display: flex;
    height: 6px;
    width: 6px;

    fill: currentColor;
}



/*.link--anchor:hover, .link--anchor:focus {*/
.link--anchor:hover {
    /*color: black;*/

    /*background-color: rgba(170, 36, 38, 0.1);*/
	/*background: linear-gradient(0deg, rgba(170,36,38,0.1) 0%, rgba(255,255,255,0) 100%);*/



    /*border-color: transparent;*/


	background-color: rgba(0,0,0,0.03);

	transition: all 60ms ease-in-out;
}



.link--anchor:hover .link--text .sub {

    /*color: inherit !important;*/
    /*color: inherit;*/

}


.link--anchor:active {

	background-color: rgba(0,0,0,0.045);
}



.link--anchor:hover .link--icon {
	transform: translateY(-1px);

box-shadow:
  0px 1.8px 2.2px rgba(0, 0, 0, 0.028),
  0px 4.3px 5.3px rgba(0, 0, 0, 0.04),
  0px 8.1px 10px rgba(0, 0, 0, 0.05),
  0px 14.5px 17.9px rgba(0, 0, 0, 0.06),
  0px 27.2px 33.4px rgba(0, 0, 0, 0.072),
  0px 65px 80px rgba(0, 0, 0, 0.1)
;



}

.link--anchor:active .link--icon {
	transform: translateY(0px);

box-shadow:
  0px 1px 2.2px rgba(0, 0, 0, 0.028),
  0px 2.3px 5.3px rgba(0, 0, 0, 0.04),
  0px 4.4px 10px rgba(0, 0, 0, 0.05),
  0px 7.8px 17.9px rgba(0, 0, 0, 0.06),
  0px 14.6px 33.4px rgba(0, 0, 0, 0.072),
  0px 35px 80px rgba(0, 0, 0, 0.1)
;




}








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



.footer {
	position: relative;
	/*margin-top: 50px;*/
	margin-bottom: 70px;
	color:#D3BED3;
	text-align: center;
	z-index: 1;
}

.footer .copyright {
	display: block;
	margin-top: 50px;
	font-size: 0.6em;
	letter-spacing: 2.1px;
	/*font-family: Georgia, "Times New Roman", serif;*/
	text-transform: uppercase;
}

.footer .copyright-years {
	/*font-family: "Times New Roman", serif;*/
	font-size: 1.1em;
	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 {
    color: #352C2B;
    font-weight: normal;
    font-size: 1.1em;
    line-height: 1.7;
    font-family: "Georgia", "Times New Roman", serif;
}

#content p {
    margin-bottom: 1em;
    text-align: justify;
}

#content p.first {
    font-size: 1.3em;
    line-height: 1.6;
    padding-bottom: 1em;
    border-bottom: 1px solid #ebe6e5;
}


#enddot {
	width: 24px;
	height: 24px;

	/*padding-top: 30px;*/
	margin: 0 auto;
	margin-top: 50px;
	/*margin-bottom: 20px;*/

	background: url(images/end_dot.png) no-repeat center center;
}




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


/*QUICK TEST: Mobile Responsive*/

/*media query here*/

/*
#front #container {
	width: 100%;
}


#front #header,
#front #content {
	width: 100%;
}


#front #nav {
	position: relative;
	left: 0;
	top: 0;
}

#front #shadowName,
#front #shadowLinks {
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
}
*/




/*Works with the JS in the <script> tag at the top of `index.html`*/

.hidden #container,
.hidden .lunar-yoga--announcement-container,
.hidden .footer {
    opacity: 0;
}

.visible #container,
.visible .lunar-yoga--announcement-container,
.visible .footer {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 300ms;
}

.visible #container {
    transition-delay: 300ms;
}

.visible .lunar-yoga--announcement-container {
    transition-delay: 800ms;
}

.visible .footer {
    transition-delay: 1400ms;
}


/*#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: 71px;
	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;
}
*/

#front .word.dc {
	left:  220px;
	width: 154px;
	background: url(images/front_text-DC.png) no-repeat;
}

#front .word.pe {
	left: 578px;
	width: 108px;
	background: url(images/front_text-PE.png) no-repeat;
}





/***************************************
"Lunar Yoga" Announcement (August 2021)
****************************************/

/* <div> */
.lunar-yoga--announcement-container {
	position: absolute;

	top: 380px;

	width: 100%;

	text-align: center;
}

/* <a> */
.lunar-yoga--link {
	display: inline-block;
}

/* <img> */
.lunar-yoga--logo {
	width: 350px;
	/*height: 104px;*/
	height: auto;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}


/*
- Copy/pasted from styles--lunar-yoga.sass
- Scopped via this selector because I'm not using Sass yet, so this was the simplest way to go with this.
*/
a.lunar-yoga--link:hover,
a.lunar-yoga--link:focus {
	opacity: 1;
	color: white;
	transform: scale(1.01) translateY(-3px);
	/*transform: translateY(-3px);*/
}

a.lunar-yoga--link:active {
	transform: translateY(-3px) scale(0.99);
}


/* Transitions */
a.lunar-yoga--link {
	transition-property: opacity, transform, color, background-color;
	transition-duration: 200ms;
	transition-timing-function: ease-in-out;
}

a.lunar-yoga--link:hover {
	transition-duration: 60ms;
}


/********************************************************************
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{

    position: sticky;
    top: 0;

	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;
	
	color: white;
	
	font-size: 0.9em;
    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: center;
    text-transform: uppercase;

	border-bottom: 1px solid #433d3f;
}




/*resume item header*/


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

	color: #5d4f55;
	font: bold 0.8em "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;*/

	display: none;

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

	font-size: 1.0em;
	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.8em "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;
			
	color: #c0b0b4;
	font-size: 0.8em;
    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}

#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-size: 0.9em;
    line-height: 1.7em;
    font-family: "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; }*/