/* CSS Document */
/* AIR de TANGO website
Restructured for everyone's pleasure
---------------------------------------------------
0. Color Legend
1. Global Settings
	a. html, body, *
	b. img
2. Layout
	a. Title area
	b. Menu formatting
	c. Content area
	d. Footer
3. Text formatting
	a. h1 h2 h3 p
	b. ul lu ul.sub
	c. span.register (for register now link)
4. Special items
	a. callout 
	b. item/title lists 
	c. bio
	d. iframe
	e. forms
	f. Section specific styles
	g. glossary 
	h. mini-photos with text (illuminations) 
*/
/*	---------------------- 0. Color Legend ----------------------	
#885c89> dark purple 
	- menu items
	- title, h1
	- a
	- other accents
						
#c1a5c1 > mid purple 
#D8BFD8 > light purple (thistle)	
	
#535353	> dark grey
	- borders
	- misc text
#fff > white
	- background
	- submenu links
---------------------- 1. Global Settings ----------------------	*/
* { /* zero margins and padding */
		margin: 0;
		padding: 0;
		}
html, body {
		margin: 0;
   		padding: 0;
		}		
body {
	background-color: #fff;
	}
	
img { 	border:0; 	}

.left { float: left; }
.right { float: right; }
		
/*	---------------------- 2. Layout ---------------------- */
/*	---------------------- a. title area ---------------------- */
div.title {
	background-color: #fff;
	border: 1px solid #535353;
	border-top: none;	
	left: 35px;
	padding-top: 10px;
	padding-bottom: 5px;
	position: absolute;
	text-align: center;
	width: 120px;
	z-index: 10;	}
	
.fl_left {
	bottom: 0px;
	left: -43px;
	position: absolute;
	}
.fl_right {
	bottom: 0px;
	right: -43px;
	position: absolute;
	}	
.masthead {
	background: #D8BFD8 url(../layout/mastheadbg_01.gif) repeat-x;
	height: 40px;
	width: 100%;
	z-index: 2;
	}
	
.masthead p {
	font: normal 10pt normal Georgia, Times, serif;
	padding-top: 20px;
	padding-right: 10px;
	text-align: right;
	text-transform: lowercase;
	}
.masthead a {
	color: #885c89;
	}
.masthead a:visited {
	color: #885c89;
	}
.masthead a:hover {
	color: #c1a5c1;
	}	
	
.menus {
	background-color: #D8BFD8;
	z-index: 5;
	width: 100%;
	text-align: left;
	}
.mainMenu {
	background-color: #fff;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	height: auto;
	font: normal small-caps 14pt Georgia, Times, serif;
	letter-spacing: 0.5px;
	padding-bottom: 3px;
	width: 100%;
	z-index: 6;
	}
.subMenu {
	background-color: #D8BFD8;
	font-size: 10pt;
	height: auto;
	margin-left: -4px;
	padding-bottom: 2px;
	overflow: hidden;
	text-transform: uppercase;
	width: 100%;
	z-index: 7;
	}
	
/*	---------------------- b. menu formatting ---------------------- */
.menus ul {
	color: #535353;
	margin: 3px 0px 0px 185px  ;
	padding: 0;
	}
.menus li {
	display: inline;
	margin: 0;
	}
	
.mainMenu li a {
	color: #885c89;
	font-weight: normal;
	text-decoration: none;
	}
.mainMenu a:hover {
	border-bottom: 4px solid #c1a5c1;
	color: #c1a5c1;
	text-decoration: none;
	}
	
.subMenu a {
	color: #535353 !important;
	font-weight: normal;
	text-decoration: none;
	padding: 5px;
	}
	
.subMenu a:hover {
	font-weight: normal;
	text-decoration: none;
	background-color: #885c89;
	color: #fff !important;
	}
.subMenu .highlight  {
	background: url(../layout/fl_rightsmB.gif) center right no-repeat;
	padding-right: 30px;
}
.subMenu .highlight a {	
	background: url(../layout/grad2.gif) repeat-x center;
	}
.subMenu .highlight a:hover { 
background: url(../layout/grad1.gif) repeat-x center;
	}
}
/*
.subMenu .highlight a:hover {
	background: #885c89 url(../layout/fl_rightsmC.gif) center right no-repeat;
}*/
	
/*	---------------------- c. Content Area ---------------------- */
.content {  /* contains all content */
	margin: 0;
	padding: 0;
	text-align: left;	
	}
	
.mainImage { /* large image for each section */
	float: right;
	}	
.col2 { /* area for text content */
	padding: 3.5em 10px 30px 10px;
	float: none;
	margin-right: 500px;
	background: #fff url(../layout/flourish.gif) no-repeat center -50px;	
	}
#news .col2 {
	margin-right: 600px;
	}
	
#classes .mainImage, #gallery .mainImage, #shows .mainImage { /* image float left on these sections */
	float: left;
	/*width: 500px;*/
	}
	
#classes, #gallery, #shows {
	background-image: none;
	}		
#classes .col2 {  /* different image size */
	float: none;
	margin-left: 257px;
	margin-right: 10px;
	background: #fff url(../layout/flourish.gif) no-repeat center -50px;
	}
	
#gallery .col2 { /* image is on the left side */ 
	float: none;
	margin-left: 500px;
	margin-right: 10px;
	}
	
#shows .col2 { /* image is on the left side */ 
	float: none;
	margin-left: 411px;
	margin-right: 10px;
	background: #fff url(../layout/flourish.gif) no-repeat center -50px;
	}		
	
#collaborators .col2 {
	margin-right: 10px;
	}
#video .col2 {
	margin: 0px 10px;
	}				
.clear { /*clear between floats */
	clear: both;
	}
/*	---------------------- d. Footer ---------------------- */
#footer {
	background: #D8BFD8 url(../layout/footerbg_01.gif) repeat-x;
	border-top: 1px solid #D8BFD8;
	clear: both;
	font-size: 12pt;
	font-weight: bold;	
	padding-top: 20px;
	padding-bottom: 15px;
	text-align: left;
	width: 100%;
	position: relative;
	}
#footer a {
	color: #885c89;
	font-weight: normal;
	}
#footer ul {
	color: #885c89  ;
	list-style: none;
	margin-top: 0;
	margin-left: 100px;
	text-align: left;
	}
	
#footer li {
	border-left: 1px solid #885c89; /* spacer between list items */
	display: inline;
	padding-right: 1em;
	padding-left: 1em;
	}
#footer li.first {
	border-left: 0 none transparent;
	}
#footer .logo {
	position: absolute;
	top: -38px;
	left: 20px;
	}
#credit {
	position: absolute;
	right: 25px;
	top: 1.25em;
	text-align: right;
	width: 300px;
	}

#credit p {
	font: normal 9pt Verdana, Helvetica, sans-serif;
	color: #917691;
	}	
	
#credit img {
	vertical-align: bottom;
	margin: 0 3px;	
	}	
	
/*	---------------------- 3. Text Formatting ---------------------- */
html, h1, h2, h3, p, strong, b {
	color: #535353;
	font-family: Georgia, Times, serif;
	font-weight: normal;
	}
h1 {
	color: #885c89;
	font-size: 20pt;
	font-variant: small-caps; 
	margin: 5px;
	text-align: center;
	}	
	
h2 {
	font-style: italic;
	font-size: 13pt;
	margin: 5px;
	text-align: center;
	}	
h3 {
	color: #885c89;
	font-size: 13pt;
padding-bottom: .5em;
	}

#shoes h3 { padding-bottom: 0.1em; }

p {
	font-size: 10pt;
	line-height: 1.5;
	padding-bottom: 5px;
	}
	
a {
	color: #885c89;
	font-weight: normal;
	text-decoration: underline;
	}
a:visited {
	color: #c1a5c1;
	}
a:hover {
	text-decoration: underline;
	color: #D8BFD8;
	}
strong, b {
	color: #885c89;
	}
em, i {
	font-style: italic;
	}
	
.hr {
	text-align: center;
	margin: 10px auto;
	}
ul {
	line-height: 125%;
	list-style: none;
	margin-left: 1em;
	margin-right: 2em;
	margin-bottom: .25em;
	text-align: left;
	}	
li {
	margin-left: 1em;
	}
	
ul.inline {
	text-align: center;
	list-style: none;
	}
	
ul.inline li {
	display: inline;
	padding-right: .25em;
	padding-left: .25em;
	}			
.sub ul, .sub li {
	list-style: disc;
	margin-left: 2em;
	margin-top: .25em;
	margin-bottom: 0;
	font-size: 95%;
	}
	
	
.register {  /* registration link with images */
	display: inline;
	text-align: center;
	}
	
.register img {
	vertical-align: middle;
	display: inline;
	margin: 3px;
	}
.register a {
	font: normal bold 10pt Georgia, Times, serif;
	text-transform: uppercase;
	}
.register a:hover {
	background-color: #F8F4FC;
	color: #535353;
	}	
/*	---------------------- 3. Special features ---------------------- */
/*	---------------------- a. call out ---------------------- */
	
.callout {
	border-top: 1px solid #535353;
	border-bottom: 1px solid #535353;
	width: 75%;
	text-align: center;
	margin: -5px auto;
	padding: 10px 5px;
	}
.callout h1 {
	margin: 0px;
	}
	
.callout h2 {	
	margin: -4px 0px 0px 0px;
	font-size: 95%;
	}
	
.callout h3 {
	margin: 0px 0px 5px 0px;
	padding-bottom: 0px;
	}	
	
.callout h4 {
	font: italic normal 13pt Georgia, Times, serif;
	margin-bottom: 5px;
	text-align: center;
	text-align: justify;
	color: #885c89;
	margin: 10px 0px 0px 0px;
	padding-bottom: 0px;
	}		
	
.callout img {
	margin: 5px;
	}	
		/* do i still have a disclaimer class? */
/*.callout .disclaimer { 
	width: 100%;
	margin: 10px 0px 5px 0px;
	} */	
	
/*	---------------------- b. item list ---------------------- */
.item {
	margin: 1em;
	/*border: 1px solid red;*/
	}
#buenosdance .item { /* floating items for dance list */
	float: left;
	margin: 5px; 
	text-align: center;
/*	border: 1px solid red; */
	}
	
#gallery .item { /* floating items for gallery buttons*/
	float: none;
	margin: auto;
	text-align: center;
/*	border: 1px solid red; */
	width: 235px;
	}	
	
#dance { 
	padding: 5px 10px;
	width: 375px;
	}
#dance .item {
	height: 9.5em;
	border: 1px solid #535353;
	margin:  5px 5px;
	padding: 10px 5px;
	width: 165px;
	}		
	
.container { /* contains dance location items, gallery, etc etc */ 
/*	border: 2px solid blue;*/
	text-align: center;
/*	float: left; */
	margin: 10px auto;
	position: relative;
/*	width: 99%;	*/
	}	
	
/*	---------------------- 	c. bio ---------------------- */
#collaborators table {
	border-spacing: 15px;
	border-collapse: separate;
	text-align: left;
	}	
/*	---------------------- 	d. popups & tooltips & location box ---------------------- */
#popupContainer {
	position: absolute;
	display: none;
	z-index: 1000;
}
#popup {
	border: 10px solid #c1a5c1;
	width: 600px;
	height: 350px;
}
#close { /* the CLOSE BUTTON */
	position: absolute;
	right: -2px;
	top: -2px;
	z-index: 1500;
	}
	
.side { /* info box beside form */
	float: left;
	width: 250px;
	margin: 15px 10px;
	position: relative;
	}	
#tooltip {
	position: absolute;
	border: 5px solid #c1a5c1;
	background-color: #fff;
	padding: 5px;
	width: auto;
	display: none;
	}
#tooltip div {
	display: none;
	}
.locationbox {
	float: right;
	font-size: 85%;
	clear: right;
	width: 210px;
	margin: 10px 15px;
	padding-left: 10px;
	border: 1px solid #535353;
	}
	
.locationbox .item {
	margin: 10px; 
	}	
/*	---------------------- 	e. forms ---------------------- */	
	
.form { /* the div that contains the form */
	float: left;
	width: 300px;
	margin: 0px 5px;
	padding-top: 5px;
	padding-left: 5px;
	text-align: left;
	/*border: 1px solid red;*/
	}

form { /* the form itself */
		color: #666;
		font-size: 1.0em;
		line-height: 100%;
		float: left;
		}
#footer form { /* the form itself */
		color: #885c89;
		position: relative;
		float: none;
		display:  inline;
		}	
		
		
.formField {
		width: 175px;
		border: 1px solid #666;
		background-color: #FFF;
		padding: 1px;
		margin: 5px;
		}
select.formField {
		width: 295px !important;
		margin-left: 0;
		font-size: 12px;
		}
		
.submit {
		border: 1px solid #666;
		background-color: #c1a5c1;
		color: #FFF;
		Padding: 4px 5px;
		margin: 5px;		
		cursor: pointer;
		}
.submit:hover {
		background: #D8BFD8;
		}
.form td#top {
	vertical-align: top;
	padding-top: 10px;
	}
	
	
/*	---------------------- Section Specific Styles ---------------------- */
	
#classes .item {
	Margin-left: 0;
	}
#clearleft	{
	clear: left;
	}	
	
.buenos ul { /* bullets for buenos aires trip list */
	list-style: disc;
	line-height: 150%;	
	}	
	
#register, #mailinglist {
	background-image: none;
	background-color: #fff;
	}
	
#register ul, #mailinglist ul {
	font-size: 95%;
	}
#shoesfaq .item {
	text-align: left;
		}
	
/* ---- SHOE Catalogue section ---- */	
#shoes .col2, #shoescatalogue .col2 { /* new margins for col2 for narrow image */
	margin-right: 375px;
	}
#shoescatalogue	.itemlist { /* contains all shoe catalogue items an keeps them from wrapping around the floated box */
	margin-left: 140px; 
	margin-right: 0px;
	}
#shoescatalogue .content {
    background: #fff url(../../layout/bgs/shoes2.jpg) no-repeat top right;
}
			
table.shoes {	/* shoe catalogue item*/
	border-spacing: 10px;
	border-bottom: 1px solid #535353;
	text-align: left;
	}
table.shoes p, table.shoecart p { /*text for shoe catalogue item */
	margin: 5px 0px;	
	font-size: 11pt;
	line-height: 1.25;
	}
table.shoes td { /* padding for shoe item table */
	/*vertical-align: top;*/
	padding: 0px 3px;	
	}
table.shoes img { /* set a border to image in shoe item table */
	margin-top: 5px;
	border: 1px solid #535353;	
	}
table.shoes .imgalign img { /* no border on inline shopping cart icon to text */
	vertical-align: top;
	border: 0px solid transparent; 
	margin: 0px;
	}		
/* ------------------ Side box on catalogue page------------ */
#shoescatalogue .locationbox { /* settings for side box on shoe catalogue */
	width: 130px;
	float: left;
	clear: none;
	font-size: 75%;
	padding: 0px;
	text-align: center;
	}		
#shoescatalogue .locationbox .item { /* sets a marign for item div in side box */
	margin: 5px;
	}	
#shoescatalogue .item#yourcart {
	background-color: 	#eae1ee;
	text-align: left;
	padding: 5px;
	margin: 10px 0px;
	}
#shoescatalogue .item#yourcart a {
	color: 	#885c89;
	}
#shoescatalogue .item#yourcart a:hover {
	color: 	#c1a5c1;
	}		
	
table.cartsummary { 
	text-align:left;
	font-size: 9pt;
	width: 90%;
	margin: 2px 0px;;
	}
table.cartsummary td {
	padding: 2px;
	}
/* View Your Shopping Cart Page table */
table.shoecart, table.checkout { /* styles for shopping cart, checkout */
	margin: 10px 5%;
	border-spacing: 0px;
	text-align: left;
	width: 85%;
	/*border: 1px solid red; */
}	
table.shoecart td { /* styles for shopping cart */
	padding: 10px;
	border-bottom: 1px solid #535353;
	}
table.shoecart th { /* styles for shopping cart */
	border-spacing: 0px;
	background-color: #d8bfd8;
	padding: 5px;
}	
.outline { /* set a border to image in shoe item table */
	border: 1px solid #535353;	
	}
	
.subtotal, .discount { /* styles for shopping cart */
	text-align: right;
	}
	
table.shoecart td.subtotal, table.shoecart td.subtotalprice {
	border: 0px;
	padding: 1px 10px;
	background-color: #eae1ee;
	}
table.shoecart td.discountprice, table.shoecart td.discount {
	border-bottom: 1px solid #D8D8D8;
	border-top: 1px solid #D8D8D8;
	padding: 5px 10px;
	} 
	
#shoecheckout form {
	float: none;
	font-size: 1.2em;
	}
	
#shoecheckout .formField {
		width: 295px;
		border: 1px solid #666;
		background-color: #FFF;
		padding: 1px;
		margin: 5px;
		}
	
#shoecheckout table.shoecart td{
		padding: 2px 10px;
		border-bottom: 1px solid #D8D8D8;
		}
			
			
/* ------------------ GLOSSARY ------------------ */
.float {
	border: 1px solid #D8D8D8;
	float: left;
	font-size: 11pt;
	height: 200px;
	margin: 10px 5px;
	padding: 10px 5px;
	width: 150px;
	}
.float img {
	margin: 5px 0px;
	}
#glossary .container {
	float: left;
	width: 550px;
	margin: 10px;
	}
#glossary .item {
	clear: left;
	margin: 25px 10px;
	float: left;
	}				
#glossary ul.inline {
	text-align: center;
	list-style: none;
	}
	
#glossary ul.inline li {
	display: inline;
	padding-right: 0px;
	padding-left: 0px;
	}	
	
/* ------------------ ILLUMINATION ------------------ */
/* - Small thumbnail on one side, text on the other - */

div.illum { 
	position: relative;
	border-bottom-width: 1px; 
	border-bottom-style: solid;
	border-color: #535353;
	margin: 0 10px;
}	

.illum .img {
	border:  1px solid #885c89;
	margin: 10px 10px 10px 0;
	padding: 5px;
	float:  left;
	}
.illum .img a { border: 0; }

.illum .img img {
	border: 1px solid #CCC;
	}


/* -- CD listing */
.info { 
	margin: 0 10px 0 0;
	padding-top: 10px;
	list-style: none;
	font-size: .9em;
	}
	
.info li {
	padding: 0;
	margin: 0; 
}
.info h3 a { text-decoration: none; }
.info h3 a:hover { text-decoration: underline; }
	
.more {
	font-size: .8em;
	font-style: italic; 
	line-height: 2em;
}
.clear-left {
	clear: left;
	}