/* yui reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,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;}ol,ul{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;}
@wrapper-width: 974px;
@magenta: #ec008c;
@blue: #00aeef;
html {
	height: 100%;
}
body {
	height: 100%;
	background-color: #000;
	/*
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	*/
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url('/24/images/streak.jpg');
	font-family:"News Gothic Regular", 'Arial Narrow', sans-serif, sans-serif; font-weight:normal; font-style:normal;
	line-height: 18px;
	color: #fff;
}
strong,b,h1,h2,h3,.bold {
	font-family:"News Gothic Demi", 'Arial Narrow', sans-serif, sans-serif; font-weight:600; font-style:normal;
}
.cf:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.hidden {
	display: none;
}
.wrapper {
	width: @wrapper-width;
	margin: 0 auto;
}
a {
	&:link, &:active, &:focus {
		color: #00aeef;
		text-decoration: underline;
	}
	&:visited {
		color: #5999b1;
		text-decoration: underline;
	}
	&:hover {
		color: #b4e5fc;
		text-decoration: none;
	}
}
h1 {
	color: @magenta;
	font-size: 1.6em;
}
h2 {
	color: @blue;
}
h3 {
	color: #fff;
}
p {
	margin-bottom: 1.0em;
}
p:last-child {
	margin-bottom: 0;
}
/* global styles */
.wrapper.main {
	>.header {
		margin-bottom: 20px;
		hgroup {
			text-align: center;
			font-size: 2em;
			img {
				margin: 0 auto;
				display: block;
			}
		}
		nav {
			margin: 20px 0;
			padding-bottom: 20px;
			border-style: dotted;
			border-color: #222;
			border-width: 0 0 1px 0;
			text-align: center;
			ul li {
				display: inline;
				margin: 0 8px;
				a {
					text-decoration: none;
					text-transform: uppercase;
					padding-bottom: 4px;
					&:active, &:link, &:focus {
						color: #81adbe;
						border: 0;
					}
					&:visited {
						color: #999;
						border: 0;
					}
					&:hover {
						color: #fff;
						border-width: 0 0 2px 0;
						border-color: #fff;
						border-style: solid;
					}
				}
			}
		}
	}
	.cta a {
		.bold;
	    vertical-align: middle;
	    height: 26px;
	    cursor: pointer;
	    overflow: hidden;
	    border: 1px solid #b3b3b3;
	    border-bottom-color: #999;
	    background-color: #ec008c;
	    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.1,#ec008c),color-stop(0.93,#fb58b9));
	    background-image: -moz-linear-gradient(center bottom,#ec008c 10%,#fb58b9 93%);
	    border-radius: 5px;
	    -webkit-border-radius: 5px;
	    -moz-border-radius: 5px;
	    box-shadow: 0 1px 0 #c0c0c0;
	    -webkit-box-shadow: 0 1px 0 #c0c0c0;
	    -moz-box-shadow: 0 1px 0 #c0c0c0;
		padding: 7px 10px 10px 10px;
		text-align: center;
		line-height: 28px;
		display: block;
	    color: #fff;
		text-decoration: none;
	}
	.cta a:hover {
	    background-color: #fb58b9;
	    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.1,#fb58b9),color-stop(0.93,#ff94d3));
	    background-image: -moz-linear-gradient(center bottom,#fb58b9 10%,#ff94d3 93%);
	}
	.free {
		border-radius: 5px;
		border-style: solid;
		border-color: #ccc;
		border-width: 2px;
		display: block;
		padding: 14px;
		text-align: center;
		background-color: #222;
		font-weight: bold;
	}
	.boxoffice {
		border-radius: 5px;
		border-style: solid;
		border-color: #333;
		border-width: 2px;
		display: block;
		padding: 14px;
		text-align: center;
		background-color: #111;
		font-weight: bold;
		color: #999;
	}
}
.wrapper article.home {
	section.grid {
		ul {
			width: 940px;
			margin: 0 auto;
			overflow: hidden;
		}
		ul li {
			display: block;
			float: left;
			width: 180px;
			height: 110px;
			margin-right: 6px;
			margin-bottom: 6px;
			background-image: url('/24/images/homepage-sprite.jpg');
			background-repeat: no-repeat;
			border-style: solid;
			border-color: #999;
			border-width: 1px;
			&.secret-identities {
				background-position: -180px 0;
			}
			&.personal-revolutionary {
				background-position: -360px 0;
			}
			&.passionate-politics {
				background-position: -540px 0;
			}
			&.Fantastik-Magik {
				background-position: -720px 0;
			}
			&.Arabesque {
				background-position: 0 -110px;
			}
			&.De-Profundis {
				background-position: -180px -110px;
			}
			&.Flaming-Ears {
				background-position: -360px -110px;
			}
			&.A-Different-Take {
				background-position: -540px -110px;
			}
			&.Invasion-of-the-Talkies {
				background-position: -720px -110px;
			}
			&.Noise {
				background-position: 0 -220px;
			}
			&.Bodily-Fluid-Is-Revolutionary {
				background-position: -180px -220px;
			}
			&.Dont-Stop {
				background-position: -360px -220px;
			}
			&.Community-Action-Center {
				background-position: -540px -220px;
			}
			&.mapping-fields {
				background-position: -720px -220px;
			}
			&.Un-Ovni-Sobre-Mi-Cama {
				background-position: 0 -330px;
			}
			section {
				background-image: url('/24/images/b65.png');
				background-repeat: repeat;
				padding: 10px;
				height: 90px;
				header h3 {
					margin-bottom: 5px;
					text-transform: uppercase;
					line-height: 14px;
				}
				h4,.date {
					line-height: 16px;
					font-size: 0.9em;
				}
				.date {
					margin-bottom: 5px;
				}
				a.desc {
					color: #fff;
					&:before {
						content: ">";
					}
				}
			}
		}
		ul li.hover {
			border-color: #fff;
		}
	}
	section.description {
		header img {
			margin: 0 auto;
			display: block;
		}
		.container {
			.copy {
				float: left;
				width: 750px;
				margin-right: 24px;
				color: #999;
			}
			aside.nav {
				float: left;
				width: 200px;
				ul.sm {
					margin-bottom: 10px;
					li {
						float: left;
					}
				}
				a.sprite {
					background-image: url('/24/images/sm-sprite.png');
					background-repeat: no-repeat;
					width: 32px;
					height: 32px;
					display: block;
					float: left;
					margin-right: 5px;
					span {
						display: none;
					}
				}
				a.facebook {
					background-position: -32px 0;
				}
				a.facebook:hover {
					background-position: 0 0;
				}
				a.twitter {
					background-position: -96px 0;
				}
				a.twitter:hover {
					background-position: -64px 0;
				}
				a.youtube {
					background-position: -160px 0;
				}
				a.youtube:hover {
					background-position: -128px 0;
				}
				ul.links li {
					margin-bottom: 5px;
				}
			}
		}
	}
}
.wrapper article.schedule {
	.table {
		margin: 0 auto;
		width: 900px;
		.row {
			margin: 0 auto;
			.heading {
				color: @magenta;
				float: left;
				font-size: 1.2em;
				text-transform: uppercase;
				line-height: 1.0em;
				width: 140px;
				margin: 5px;
				span {
					display: block;
				}
			}
			.cell {
				position: relative;
				width: 140px;
				float: left;
				background-color: #1b1b1b;
				margin: 5px;
				.event {
					position: relative;
					border-style: solid;
					border-color: #ccc;
					border-width: 2px 0 0 0;
					padding: 5px 2px;
					margin: 10px 0;
					.time {
						color: @blue;
						text-transform: uppercase;
						font-size: 0.8em;
						line-height: 0.8em;
					}
					.title {
						margin-bottom: 5px;
						a {
							color: #fff;
						}
					}
					.img {
						background-image: url('/24/images/schedule-sprite.jpg');
						background-repeat: no-repeat;
						width: 136px;
						height: 136px;
						&.opening-night {
							background-position: 0 0;
						}
						&.secret-identities {
							background-position: -136px 0;
						}
						&.personal-revolutionary {
							background-position: -272px 0;
						}
						&.passionate-politics {
							background-position: -408px 0;
						}
						&.Fantastik-Magik {
							background-position: -544px 0;
						}
						&.Arabesque {
							background-position: 0 -136px;
						}
						&.De-Profundis {
							background-position: -136px -136px;
						}
						&.Flaming-Ears {
							background-position: -272px -136px;
						}
						&.A-Different-Take {
							background-position: -408px -136px;
						}
						&.Invasion-of-the-Talkies {
							background-position: -544px -136px;
						}
						&.Noise {
							background-position: 0 -272px;
						}
						&.Bodily-Fluids-Are-Revolutionary {
							background-position: -136px -272px;
						}
						&.Dont-Stop {
							background-position: -272px -272px;
						}
						&.Community-Action-Center {
							background-position: -408px -272px;
						}
						&.mapping-fields {
							background-position: -544px -272px;
						}
						&.Un-Ovni-Sobre-Mi-Cama {
							background-position: 0 -408px;
						}
						&.Projectionist {
							background-position: -136px -408px;
						}
						&.Insiders {
							background-position: -272px -408px;
						}
						&.Presenting {
							background-position: -408px -408px;
						}
						&.Yes-You-Are-Okay {
							background-position: -544px -408px;
						}
						&.I-Was-A-Male {
							background-position: 0 -544px;
						}
						&.opening-night-2 {
							background-position: -136px -544px;
						}
						&.opening-night-3 {
							background-position: -272px -544px;
						}
						&.Another-Man {
							background-position: -408px -544px;
						}
					}
				}
			}
		}
	}
}
.wrapper article.tickets {
	.left {
		float: left;
		width: 750px;
		margin-right: 14px;
		.p {
			line-height: 1.1em;
			margin-bottom: 15px;
			span {
				text-transform: uppercase;
				font-weight: bold;
				margin-right: 10px;
			}
		}
		.day {
			margin: 15px 0 40px 0;
			h2 {
				color: @blue;
				text-transform: uppercase;
				margin-bottom: 20px;
			}
			.event {
				margin-bottom: 20px;
				.time {
					float: left;
					width: 100px;
					margin-right: 10px;
					color: #666;
					text-transform: uppercase;
				}
				.name {
					float: left;
					width: 480px;
					margin-right: 10px;
					.title {
						color: #666;
						line-height: 1em;
					}
					.venue {
						color: #fff;
						font-size: 0.9em;
					}
				}
				.cta {
					float: left;
					width: 150px;
				}
			}
		}
	}
	.right {
		float: left;
		width: 200px;
		dl {
			font-size: 0.8em;
			text-transform: uppercase;
			dt {
				color: #666;
				line-height: 0.8em;
			}
			dd {
				color: @magenta;
				margin-bottom: 10px;
			}
		}
	}
}
.wrapper article.installations, .wrapper article.performances, .wrapper article.programs {
	.left {
		float: left;
		width: 750px;
		margin-right: 14px;
		section {
			margin-bottom: 20px;
			.date {
				font-size: 24px;
				color: @blue;
				text-transform: uppercase;
			}
			.program-title {
				font-size: 30px;
				line-height: 30px;
				margin-bottom: 10px;
				color: @magenta;
			}
			.images {
				margin-bottom: 10px;
				margin-top: 10px;
				img {
					float: left;
					display: block;
					margin: 0 5px 5px 0;
				}
			}
			.description {
				line-height: 1.2em;
				.title {
					color: @magenta;
					font-size: 1.3em;
				}
				.by {
					color: @blue;
				}
				.more {
					color: #fff;
				}
				.info {
					margin-top: 10px;
					color: #999;
				}
			}
			.curation {
				color: #ff0;
				font-size: 18px;
				line-height: 24px;
				border-style: solid;
				border-color: #666;
				border-width: 0 0 0 5px;
				padding: 25px;
				background-color: #111;
				clear: both;
			}
			.curation .byline {
				font-style: italic;
				color: #990;
				padding-top: 5px;
			}
			.curation .byline:before {
				content: "\2014  ";
			}
			.cta a.buy {
				margin: 10px 0 20px 20px; 
				float: right;
			}
		}
	}
	.right {
		float: left;
		width: 200px;
		ul li {
			margin-bottom: 5px;
		}
	}
}
.wrapper article.venue {
	.map {
		width: 500px;
		height: 400px;
		float: left;
		margin-right: 20px;
	}
	.info {
		float: left;
	}
	.googlemaps.content {
		color: @magenta;
	}
	h2 {
		margin-top: 20px;
	}
	ul li {
		clear: both;
		display: block;
		padding-bottom: 10px;
	}
	.subway {
		width: 29px;
		height: 29px;
		background-image: url('/24/images/subway.png');
		background-repeat: no-repeat;
		display: block;
		float: left;
		margin-right: 5px;
		&.line-6 {
			background-position: -7px -43px;
		}
		&.line-b {
			background-position: -46px -81px;
		}
		&.line-d {
			background-position: -123px -81px;
		}
		&.line-f {
			background-position: -7px -118px;
		}
		&.line-m {
			background-position: -85px -156px;
		}
		&.line-r {
			background-position: -85px -193px;
		}
	}
}
.wrapper article.merchandise {
	section.left {
		float: left;
	}
	section.right {
		float: left;
		background-color: #fff;
		padding: 10px;
		color: #000;
		width: 400px;
		height: 519px;
		h3 {
			text-transform: uppercase;
			font-size: 24px;
			line-height: 24px;
			color: #000;
			margin-bottom: 5px;
		}
		h4 {
			text-transform: uppercase;
			font-size: 16px;
			line-height: 16px;
		}
		h2 {
			font-size: 36px;
			line-height: 36px;
			text-transform: uppercase;
		}
		p {
		}
		p.last-child {
			margin: 0;
		}

	}
}
.wrapper article.volunteer {
	.column {
		float: left;
		width: 150px;
		margin-right: 10px;
	}
	h3 {
		color: #ff0;
		text-transform: uppercase;
	}
	ul li {
		line-height: 18px;
	}
}
.wrapper article.about {
	.credits {
		.column {
			float: left;
			width: 300px;
			margin-right: 15px;
		}
		dl {
			dt {
				margin-top: 10px;
				line-height: 18px;
				text-transform: uppercase;
				display: block;
				color: #ff0;
				.bold;
			}
			dd {
				display: block;
				line-height: 18px;
			}
		}
	}
}
.wrapper article.contact {
	.info {
		dl {
			float: left;
			width: 400px;
			margin-right: 20px;
			dt {
				margin-top: 20px;
				line-height: 18px;
				text-transform: uppercase;
				display: block;
				color: #ff0;
				.bold;
			}
			dd {
				display: block;
				line-height: 18px;
				a {
					color: #fff;
				}
			}
		}
	}
}
body footer {
	width: @wrapper-width;
	height: 180px;
	margin: 30px auto 0 auto;
	padding-top: 30px;
	border-style: dotted;
	border-width: 1px 0 0 0;
	border-color: #333;
	color: #999;
	font-size: 0.9em;
	background-image: url('/24/images/streak-footer.jpg');
	background-position: 100% 0;
	background-repeat: no-repeat;
	.sponsors {
		ul li {
			float: left;
		}
	}
}
.modal-background {
	background-image: url('/24/images/modalbg.png');
	background-repeat: repeat;
	position: absolute;
	top: 0;
	left: 0;
	.modal {
		border-style: solid;
		border-width: 10px;
		border-color: @magenta;
		border-radius: 10px;
		background-color: #222;
		padding: 20px;
		.action {
			text-align: center;
			margin-top: 20px;
			.button {
				margin: 0 5px;
				display: inline-block;
				background-color: @magenta;
				border-style: solid;
				border-color: #fff;
				border-width: 2px;
				border-radius: 2px;
				-moz-border-radius: 2px;
				-webkit-border-radius: 2px;
				color: #fff;
				text-decoration: none;
				padding: 5px;
				font-size: 24px;
				&:hover {
					background-color: #f673cc;
				}
			}
		}
	}
}