/*
 * Name: Bracket Visual Styles
 * Version: 1.0
 * 
 * REQUIRED: 
 * @include {JavaScript}: brack_fanapi.js
 * @include {JavaScript}: jquery.ui.selectmenu.js
 * @file {lay}: brack_enter_picks.lay
 *
 *
*/

/** =Customizable styles
------------------------------------------------------------------ */
	/* Page Layout - moved to local level promotion.css */

	/* Layout
	------------------------------------------ */
	#bracket {
		margin-bottom: 1em; 
	}
	.enter_picks .flightbutton {
		text-shadow: none !important;
		text-align: center;
		text-decoration: none;
		display: inline-block;
	}

	/* Headings (top and bottom of grid)
	------------------------------------------ */
	#bracket #header, 
	#bracket #footer {
		padding: 3px 0;
		background: none;
	}
	#bracket h6 {
		color: black !important;
		font-size: 10px !important;
		line-height: 1.1 !important;
		font-weight: bold;
	}
	#bracket .expanded h6 {
		font-size: 14px !important; 
	}
	#bracket .round.round2 h6 { 
		color: #333; 
	}
	#bracket .round2.left h6 {
		border-top: 1px solid black;
	}
	#bracket .round2.right h6 {
		border-bottom: 1px solid black;
	}
	#bracket #header .qTitle,
	#bracket #footer .qTitle { 
		border: none;
	}
	#bracket #header .qTitle {
		border-bottom: 1px solid silver;
	}
	#bracket #footer .qTitle {
		border-top: 1px solid silver;
	}

	#bracket #header1 .qTitle:hover:after,
	#bracket #header2 .qTitle:hover:before,
	#bracket #header3 .qTitle:hover:after,
	#bracket #header4 .qTitle:hover:before {
		content: "s";
		font-family: 'IcoMoon', arial, sans-serif !important;
		line-height: 0.5em;
		font-size: inherit;
	}
	#bracket #header1 .qTitle:hover:after,
	#bracket #header3 .qTitle:hover:after {
		margin-left: 4px; 
	}
	#bracket #header2 .qTitle:hover:before,
	#bracket #header4 .qTitle:hover:before {
		margin-right: 4px; 
	}

	#bracket .expanded .round2 h6 { 
		border: none; 
	}

	/* Bracket Quadrants (the grid)
	------------------------------------------ */
	#bracket .quadrant:before {
		display: block;
		color: silver;
		position: absolute;
		top: 50%;
		width: 80%;
		text-align: center;
		font-size: 1.5em;
	}
	#bracket #quadrant1,
	#bracket #quadrant2 {
		border-bottom: 1px solid black;
	}
	#bracket #quadrant3,
	#bracket #quadrant4 {
		border-top: 1px solid black;
	}
	#bracket #quadrant1,
	#bracket #quadrant3 {
		border-right: 1px solid black; 
		background-color: #faf4ea; 
	}
	#bracket #quadrant1:before, 
	#bracket #quadrant3:before {
		right: 0; 
	}
	#bracket #quadrant2,
	#bracket #quadrant4 {
		border-left: 1px solid black; 
		background-color: #f4f5fc; 
	}
	#bracket #quadrant2:before, 
	#bracket #quadrant4:before {
		left: 0; 
	}
	#bracket #quadrant0 {
		background: rgb(255,255,255);
		background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(255,255,255,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(100%,rgba(255,255,255,1)));
		background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%);
		background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%);
		background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%);
	}

	/* Expanded */
	#bracket .quadrant.expanded {
		background: rgba(255,255,255,0.9);
		border: 3px outset #ccc;
	}
	#bracket .quadrant.expanded:before {
		font-size: 4em;
	}
	#bracket .round.expanded {
		background: white;
		border: 3px outset #999;
	}
	#bracket .round.expanded .flight {
		border: 1px solid #999; 
	}
	#bracket .round.expanded .flight:before, 
	#bracket .round.expanded .flight:after {
		border: none; 
	}

	/* Button group */
	#bracket .buttongroup {
		padding-left: 0.3em;
		padding-right: 0.3em;
	}
	#bracket .buttongroup:nth-child(2n-1) {
		background: #f4f5fc;
	}
	#bracket .right .buttongroup:nth-child(2n-1) {
		background: #faf4ea;
	}

	/* Flight - one grid square */
	#bracket .flight {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}

	/* Grid lines */
	#bracket .flight:before, 
	#bracket #quadrant0:before,
	#bracket .flight:after, 
	#bracket #quadrant0:after {
		content: '';
		display: block;
		position: absolute;
		border: 1px solid silver;
	}
	#bracket .outer .flight:before { /* horizontal line */
		height: 0; 
		width: 100%; 
		top: 50%; 
	} 
	#bracket .outer .flight:after { /* vertical line, outside edge */
		height: 50%; 
		width: 0; 
		top: 25%;
	} 
	#bracket .left .flight:before,
	#bracket .left .flight:after  {
		left: 0; 
	}
	#bracket .right .flight:before,
	#bracket .right .flight:after {
		right: 0; 
	}
	#bracket .outerRound .flight:after {
		border: none; 
	}
	#bracket .round3 .flight:before { /* so it doesn't extend to the middle */
		width: 75%;
	} 

	/* ] into middle quadrant from left */
	#bracket #quadrant0:before {
		height: 120%;
		top: -10%;
		left: 0;
		width: 5%;
		border: none;
		border-right: 2px solid silver;
		background: #faf4ea;
	}
	/* [ into middle quadrant from right */
	#bracket #quadrant0:after {
		height: 120%;
		top: -10%;
		right: 0;
		width: 5%;
		border: none;
		border-left: 2px solid silver;
		background: #f4f5fc;
	}
	#bracket #quadrant0.expanded:before, 
	#bracket #quadrant0.expanded:after {
		height: 100%; 
		top: 0; 
		background: transparent; 
	}

	/* horizontal lines into semi-finals */
	#bracket #quadrant0 .round2 .flight:before {
		border-width: 1px;
		height: 0;
		width: 50%;
		top: 50%;
	}
	#bracket #quadrant0 .left .flight:before { 
		left: 5%; 
	}
	#bracket #quadrant0 .right .flight:before { 
		right: 5%; 
	}

	/* vertical lines to final */
	#bracket #quadrant0 .round2 .flight:after {
		border-color: silver;
		height: 50%;
		width: 0;
		z-index: -1;
	}
	#bracket #quadrant0 .left .flight:after { 
		top: 50%; 
		left: 50%; 
	}
	#bracket #quadrant0 .right .flight:after { 
		bottom: 50%; 
		right: 50%; 
	}

	/* outline around final */
	#bracket #quadrant0 .middle .flight {
		border: 2px solid black;
		margin-left: 13%;
		margin-right: 13%;
		width: 74%;
	}
	#bracket #quadrant0 .middle .flight .flightbutton { /* fit inside the outline */
		width: 74% !important;
	}
	#bracket #quadrant0 .middle .flight:before {
		border: none;
		background: white;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
	}
	#bracket #quadrant0 .middle .flight:after { /* hide */
		border: none; 
	}
	#bracket .flight.highlight {
		background-color: #fcfc83; 
	}
	#bracket .flight.pickerror {
		background-color: #fad2d2; 
	}

	/* text/abbrev hide-show */
	#bracket .quadrant .abbrev {
		display: none !important; 
	}

	/* Display button divs
	------------------------------------------ */
	.flightbutton,
	#bracket .flightbutton {
		text-align: left;
		padding: 0.5em 2em 0.75em 0.5em;
		font-size: 9px;
		line-height: 1.4;
		border-radius: 4px;
		text-shadow: none;
		border: 1px solid #999999;
		text-decoration: none; 
	}
	#bracket .flightbutton:hover {
		text-decoration: none;
	}
	#bracket .buttonlist .flightbutton { 
		padding: 0.5em 0.3em 0.75em; 
	}
	#bracket .expanded .buttonlist .flightbutton {
		font-size: 10px; 
	}
	#bracket .flightbutton.abbrev {
		font-size: 10px; line-height: 12px; text-align: center; font-weight: bold; 
	}
	#bracket .expanded .flightbutton.abbrev {
		line-height: 24px; 
	}
	#bracket .flight .choice, 
	#bracket .flight .ui-selectmenu-status .display {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	#bracket .flight .flightbutton.more:after {
		content: '...';
		font-size: 12px;
		height: 8px;
		width: 100%;
		line-height: 2px;
		display: block;
		text-align: center;
		background: #ccc;
	}
	#bracket .expanded .flight .flightbutton.more:after {
		display: none; 
	}

	/* view_picks */
	.view_picks #bracket .flightbutton {
		background: white;
		color: black;
	}
	.view_picks #bracket .flight .flightbutton > .choice .prefix {
		display: none; 
	}
	.view_picks #intervals .heading-name,
	.view_picks #intervals .heading-deadline {
		display: none !important; 
	}

	/* stats */
	.stats #bracket .flightbutton {
		background: white;
		color: black;
	}
	.stats #bracket .flight .choice {
		border: 1px solid rgb(80,102,41);
		margin: 2px 0;
		padding: 0.2em 0.5em;
	}
	.stats #bracket .flight .choice:first-child {
		margin-top: 0; 
	}
	.stats #bracket .flight .choice:last-child {
		margin-bottom: 0; 
	}
	.stats #bracket .flight .choice .display {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Buttonlist (side draggables) */
	#bracket .buttonlist .flightbutton {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		border: none;
		background: transparent;
	}
	#bracket .expanded .buttonlist .flightbutton {
		white-space: normal;
		height: 30px;
	}

	/* Flight button (display, drop target, clickable) */
	#bracket .flight .flightbutton .choice {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#bracket .eliminated {
		text-decoration: line-through; 
	}
	#bracket .pick-correct .display:before, 
	#bracket .pick-incorrect .display:before {
		font-family: IcoMoon;
		padding-right: 0.75em;
		font-style: normal;
		font-weight: normal;
	}
	#bracket .pick-incorrect .display:before {
		content: 'x'; 
		color: red; 
	}
	#bracket .pick-correct .display:before {
		content: 'C'; 
		color: green; 
	}
	.pick-match {
		font-weight: bold; 
	}
	#bracket .flight.closed .flightbutton {
		opacity: 1 !important; 
	}
	.stats #bracket .flight .flightbutton {
		padding: 0;
		border: 0;
	}

	/* Select list choices - always show full-size, no changes for .expanded */
	#bracket .flight .choices {
		border: 1px solid silver;
		padding: 0.25em 1em;
		font-size: 1.2em;
		white-space: nowrap;
		background: white;
	}
	#bracket .expanded .flight .choices {
		border: none; 
	}
	.stats #bracket .flight .choices {
		padding: 0; 
	}

	/* Intervals/Tiebreakers
	------------------------------------------ */
	/* intervals */
	#intervals .interval {
		margin: 2em 0 0;
	}
	#intervals .interval.closed {
		background: #cccccc; 
	}
	.view_picks #intervals .interval.closed {
		background: none !important; 
	}
	.interval h3 {
		padding-top: 0; 
		padding-bottom: 0.25em; 
	}
	.interval .heading-name {
		float: left; 
	}
	.interval .heading-deadline {
		text-align: right; 
		font-size: 0.9em; 
	}
	.picksaved .interval_name {
		padding-right: 28px; 
		background: url('bracket/status_S.png') right center no-repeat; 
	}
	.pickerror .interval_name {
		padding-right: 28px; 
		background: url('bracket/status_E.png') right center no-repeat; 
	}

	/* tiebreakers */
	.interval .entertiebreakers {
		margin: 0.25em 0 0.75em; 
		clear: both; 
	}
	.tiebreaker {
		border: 1px solid silver; 
		border-bottom: none; 
		padding: 0.25em 0.5em; 
	}
	.tiebreaker:last-child {
		border-bottom: 1px solid silver; 
	}
	.tb_question {
		display: inline-block; 
		width: 75%; 
	}
	.tb_answer {
		text-align: center; 
	}
	.tiebreakerinput {
		width: 5em; 
	}
	.interval .entersubmit {
		clear: both; 
	}

	/* Button Colors
	------------------------------------------ */
	.enter_picks .buttonlist .flightbutton,
	button.blue {
		color: #454545 !important;
		background: rgb(232,234,239);
		background: -moz-linear-gradient(top,  rgba(232,234,239,1) 0%, rgba(184,194,214,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,234,239,1)), color-stop(100%,rgba(184,194,214,1)));
		background: -webkit-linear-gradient(top,  rgba(232,234,239,1) 0%,rgba(184,194,214,1) 100%);
		background: -o-linear-gradient(top,  rgba(232,234,239,1) 0%,rgba(184,194,214,1) 100%);
		background: -ms-linear-gradient(top,  rgba(232,234,239,1) 0%,rgba(184,194,214,1) 100%);
		background: linear-gradient(to bottom,  rgba(232,234,239,1) 0%,rgba(184,194,214,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8eaef', endColorstr='#b8c2d6',GradientType=0 );
	}
	.enter_picks .buttonlist .flightbutton:hover,
	button.blue:hover {
		background: rgb(184,194,214);
		background: -moz-linear-gradient(top,  rgba(184,194,214,1) 0%, rgba(162,167,181,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(184,194,214,1)), color-stop(100%,rgba(162,167,181,1)));
		background: -webkit-linear-gradient(top,  rgba(184,194,214,1) 0%,rgba(162,167,181,1) 100%);
		background: -o-linear-gradient(top,  rgba(184,194,214,1) 0%,rgba(162,167,181,1) 100%);
		background: -ms-linear-gradient(top,  rgba(184,194,214,1) 0%,rgba(162,167,181,1) 100%);
		background: linear-gradient(to bottom,  rgba(184,194,214,1) 0%,rgba(162,167,181,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8c2d6', endColorstr='#a2a7b5',GradientType=0 );
	}
	.enter_picks .flight .flightbutton,
	button.orange {
		color: #454545 !important;
		background: rgb(255,197,120);
		background: -moz-linear-gradient(top,  rgba(255,197,120,1) 0%, rgba(251,157,35,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,197,120,1)), color-stop(100%,rgba(251,157,35,1)));
		background: -webkit-linear-gradient(top,  rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%);
		background: -o-linear-gradient(top,  rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%);
		background: -ms-linear-gradient(top,  rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%);
		background: linear-gradient(to bottom,  rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 );
	}
	.enter_picks .flight .flightbutton:hover,
	button.orange:hover {
		background: rgb(255,168,76);
		background: -moz-linear-gradient(top,  rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,168,76,1)), color-stop(100%,rgba(255,123,13,1)));
		background: -webkit-linear-gradient(top,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
		background: -o-linear-gradient(top,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
		background: -ms-linear-gradient(top,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
		background: linear-gradient(to bottom,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 );
	}
	.enter_picks .flight .flightbutton .ui-icon {
		background-image: url('bracket/ui-icons_454545_256x240.png');
	}
	.flight.pickmade .flightbutton,
	.flight.path .flightbutton,
	button.yellow {
		color: #454545 !important;
		background: rgb(254,252,234);
		background: -moz-linear-gradient(top,  rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1)));
		background: -webkit-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
		background: -o-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
		background: -ms-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
		background: linear-gradient(to bottom,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 );
	}
	.flight.pickmade .flightbutton:hover,
	.flight.path .flightbutton:hover,
	button.yellow:hover {
		background: rgb(252,244,174);
		background: -moz-linear-gradient(top,  rgba(252,244,174,1) 0%, rgba(224,203,69,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,244,174,1)), color-stop(100%,rgba(224,203,69,1)));
		background: -webkit-linear-gradient(top,  rgba(252,244,174,1) 0%,rgba(224,203,69,1) 100%);
		background: -o-linear-gradient(top,  rgba(252,244,174,1) 0%,rgba(224,203,69,1) 100%);
		background: -ms-linear-gradient(top,  rgba(252,244,174,1) 0%,rgba(224,203,69,1) 100%);
		background: linear-gradient(to bottom,  rgba(252,244,174,1) 0%,rgba(224,203,69,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcf4ae', endColorstr='#e0cb45',GradientType=0 );
	}
	.flight.pickmade .flightbutton .ui-icon,
	.flight.path .flightbutton .ui-icon {
		background-image: url('bracket/ui-icons_454545_256x240.png');
	}
	.stats #bracket .flight .choice .percent,
	button.submitting,
	.flight.pickmade.picksaved .flightbutton,
	.flight.picksaved .flightbutton,
	.choices li.picksaved,
	button.green {
		color: rgb(30, 36, 88) !important;
		text-shadow: none;
		background: rgb(205,235,142);
		background: -moz-linear-gradient(top,  rgba(205,235,142,1) 0%, rgba(165,201,86,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205,235,142,1)), color-stop(100%,rgba(165,201,86,1)));
		background: -webkit-linear-gradient(top,  rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%);
		background: -o-linear-gradient(top,  rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%);
		background: -ms-linear-gradient(top,  rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%);
		background: linear-gradient(to bottom,  rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );
	}
	button.submitting:hover
	.flight.pickmade.picksaved .flightbutton:hover,
	.flight.picksaved .flightbutton:hover,
	.choices li.picksaved:hover,
	button.green:hover {
		background: rgb(169,219,128);
		background: -moz-linear-gradient(top,  rgba(169,219,128,1) 0%, rgba(150,197,111,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,219,128,1)), color-stop(100%,rgba(150,197,111,1)));
		background: -webkit-linear-gradient(top,  rgba(169,219,128,1) 0%,rgba(150,197,111,1) 100%);
		background: -o-linear-gradient(top,  rgba(169,219,128,1) 0%,rgba(150,197,111,1) 100%);
		background: -ms-linear-gradient(top,  rgba(169,219,128,1) 0%,rgba(150,197,111,1) 100%);
		background: linear-gradient(to bottom,  rgba(169,219,128,1) 0%,rgba(150,197,111,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );
	}
	.flight.pickmade.picksaved .flightbutton .ui-icon,
	.flight.picksaved .flightbutton .ui-icon,
	.choices li.picksaved .ui-icon {
		background-image: url('bracket/ui-icons_454545_256x240.png');
	}
	.flight.pickmade.path .flightbutton,
	button.red {
		color: white !important;
		background: rgb(255,48,25);
		background: -moz-linear-gradient(top,  rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,48,25,1)), color-stop(100%,rgba(207,4,4,1)));
		background: -webkit-linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
		background: -o-linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
		background: -ms-linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
		background: linear-gradient(to bottom,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
	}
	.flight.pickmade.path .flightbutton:hover,
	button.red:hover {
		background: rgb(169,3,41);
		background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
		background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
		background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
		background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
		background: linear-gradient(to bottom,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
	}
	.flight.pickmade.path .flightbutton .ui-icon {
		background-image: url('bracket/ui-icons_fefefe_256x240.png');
	}

	/* Global Buttons (submit, reset, randomize) */
	#globalbuttons {
		text-align: center; 
	}
	#globalbuttons button.submit {
		margin-bottom: 2em; 
	}
	#globalbuttons .submit:after {
		display: block;
		position: absolute;
		left: 0;
		bottom: -2em;
		width: 100%;
		text-align: center;
		color: black;
		text-shadow: none;
		white-space: nowrap;
		font-size: 12px;
		font-weight: bold;
		content: 'Picks are Not Saved';
	}
	#globalbuttons .submit.picksaved:after {
		content: 'Picks are Saved'; 
	}


/** =Layout (edit with caution)
------------------------------------------------------------------ */
	/* box sizing re-statement */
	#bracket .round h6,
	#bracket .quadrant,
	#bracket .buttonlist,
	#bracket .heading,
	#bracket .round,
	#bracket .buttonlist,
	#bracket .buttongroup,
	#bracket .flight {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* Page layout
	------------------------------------------ */
	#mainform {
		width: 100%;
		position: relative;
		padding: 0;
	}
	.template {
		display: none !important; 
	}
	.legend {
		display: none; 
	}
	#bracket .left, 
	#bracket .right {
		text-align: inherit; 
	}

	/* AJAX Loading Div
	------------------------------------------ */
	#loader {
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		width: 50px;
		z-index: 999999;
	}
	#loader img {
		margin: auto;
	}

	/* Headings (top and bottom of grid)
	------------------------------------------ */
	#bracket #header, 
	#bracket #footer {
		position: relative;
		cursor: default;
		z-index: 1;
	}
	#bracket #header h4,
	#bracket #footer h4 {
		cursor: pointer;
	}
	#bracket .headings {
		margin: 0;
		width: 50%;
		height: 100%;
		position: absolute;
	}
	#bracket .headings.left {
		left: 0; 
		text-align: left; 
	}
	#bracket .headings.right {
		right: 0; 
		text-align: right; 
	}
	#bracket .headings.expanded {
		width: 90%; 
		background: white; z-index: 3; 
	}
	#bracket .headings .qTitle {
		width: 100%;
	}
	#bracket .headings .heading.expanded {
		width: 100%;
		left: 0 !important;
		right: 0 !important;
		text-align: center;
		background: white;
		z-index: 3;
	}
	#bracket .headings h6 {
		text-align: center;
	}
	#bracket .round h6 {
		width: 80%;
		left: 10%;
		top: 0;
		position: absolute;
		text-align: center;
	}
	#bracket .round.right h6 {
		top: auto; 
		bottom: 0;
	}
	#bracket .round1 h6 {
		z-index: 4;
	}


	/* Bracket (the grid)
	------------------------------------------ */
	#bracket #bracketgrid {
		position: relative;
		min-height: 540px;
	}

	/* Quadrants */
	#bracket .quadrant {
		position: absolute;
		width: 50%;
		height: 50%;
	}
	#bracket #quadrant1 {
		top: 0; 
		left: 0; 
	}
	#bracket #quadrant2 {
		top: 0; 
		right: 0; }
	#bracket #quadrant3 {
		bottom: 0; 
		left: 0; 
	}
	#bracket #quadrant4 {
		bottom: 0; 
		right: 0; 
	}
	#bracket #quadrant0 {
		z-index: 1; 
	}
	#bracket .quadrant.expanded {
		z-index: 3 !important;
		width: 90%;
		height: 90%;
	}

	/* Side button lists (draggable), and Round container - the vertical columns */
	#bracket .buttonlist,
	#bracket .heading,
	#bracket .round {
		position: absolute;
		padding: 1px 0;
		margin: 0;
		left: auto;
		right: auto;
	}
	#bracket .round.expanded {
		z-index: 4;
		width: 100% !important;
		left: 0 !important;
		right: 0 !important;
	}
	#bracket .outer .round, #bracket .buttonlist {
		height: 100%; 
	}
	#bracket .outer .round.expanded {
		height: auto; 
	}
	#bracket #quadrant3 .round.expanded, #bracket #quadrant4 .round.expanded {
		bottom: 0; 
	}
	#bracket .buttonlist {
		display: none; 
	}
	.view_picks #bracket .buttonlist, 
	.enter_picks #bracket .buttonlist {
		display: block; 
	}
	#bracket .buttonlist.left {
		border-right: 2px solid silver; 
	}
	#bracket .buttonlist.right {
		border-left: 2px solid silver; 
	}

	/* Flight - one grid square */
	#bracket .flight {
		position: relative;
	}
	#bracket .flightinput {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}
	#bracket .ui-selectmenu-status {
		line-height: 1.2;
		padding: 0;
	}


	/* Display button divs
	------------------------------------------ */
	/* box sizing re-statement */
	#bracket .flightbutton,
	#bracket .flight .choice,
	#bracket .flight .choices {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* flight buttons */
	#bracket .flightbutton {
		margin: 1px 1%;
		display: block;
		position: relative;
		width: 100% !important;
		height: auto;
		cursor: pointer;
	}
	#bracket .expanded .flightbutton {
		margin: 2px 0;
	}
	#bracket .flight .choice {
		position: relative;
		width: 100%;
	}
	#bracket .expanded .flight .flightbutton > .choice {
		display: none; 
	}

	/* stats */
	.stats #bracket .flight .choice .display {
		position: relative;
		z-index: 1;
	}
	.stats #bracket .flight .choice .percent {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}

	/* Buttonlist (side draggables) */
	#bracket .buttonlist .flightbutton {
		z-index: 2;
	}

	/* Flight button (display, drop target, clickable) */
	#bracket .flight .flightbutton {
		margin: 2px 0; 
	}
	.enter_picks #bracket .flight.closed .ui-selectmenu-icon {
		display: none !important; 
	}

	/* Select list choices - always show full-size, no changes for .expanded */
	#bracket .ui-selectmenu-menu-dropdown {
		z-index: 5 !important;
		min-width: 12em;
		width: auto !important;
		background: white;
		white-space: nowrap;
		text-align: left;
	}
	#bracket .flight .choices {
		position: absolute;
		top: 0;
		min-width: 99%;
		z-index: 5;
	}
	#bracket .left .flight .choices {
		left: 0; 
	}
	#bracket .right .flight .choices {
		right: 0; 
	}
	#bracket .expanded .flight .choices {
		position: static;
		display: block;
	}


	/* Middle quadrant
	------------------------------------------ */
	/* quadrant0, round1, round2 */
	#bracket #quadrant0 .round {
		position: relative;
		height: 33.33333333%;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	#bracket .round.round1 .flight, 
	#bracket .round.round2 .flight {
		height: 100%; 
		width: 100%; 
	}
	#bracket #quadrant0 .flight .flightbutton {
		margin: 3px auto 3px; 
		width: 55% !important; 
	}

	/* Intervals/Tiebreakers
	------------------------------------------ */
	.view_picks #bracket .tiebreakerinput {
		display: none;
	}


/** =jQuery UI legacy stuff
------------------------------------------------------------------ */
	/* Components */
	html body .ui-widget-content {
		border: 1px solid #292929; 
		background: #ffffff url('bracket/ui-bg_flat_0_ffffff_40x100.png') 50% 50% repeat-x;
		color: #222222; 
	}
	html body .ui-widget-content a {
		color: #222222; 
	}

	/* States */
	html body .ui-state-default, 
	html body .ui-widget-content .ui-state-default {
		border: 1px solid #1c476e; 
		font-weight: normal; 
	}
	html body .ui-state-hover, 
	html body .ui-widget-content .ui-state-hover, 
	html body .ui-state-focus, 
	html body .ui-widget-content .ui-state-focus {
		border: 1px solid #0f273d; 
		font-weight: normal; 
	}
	html body .ui-state-active, 
	html body .ui-widget-content .ui-state-active {
		border: 1px solid #292929; 
		font-weight: normal; 
	}
	html body .ui-state-default a, 
	html body .ui-state-default a:link, 
	html body .ui-state-default a:visited,
	html body .ui-state-hover a, 
	html body .ui-state-hover a:hover,
	html body .ui-state-active a, 
	html body .ui-state-active a:link, 
	html body .ui-state-active a:visited {
		text-decoration: none;  
	}
	html body .ui-state-hover a, 
	html body .ui-state-hover a:hover {
		background: #ffffff url('bracket/ui-bg_glass_75_dadada_1x400.png') 50% 50% repeat-x;
	}
	#pe-frame .ui-widget :active {
		outline: none; 
	}

	/* states and images */
	.ui-icon {
		display: block; 
		text-indent: -99999px; 
		overflow: hidden; 
		background-repeat: no-repeat; 
	}
	.ui-icon-triangle-1-s {
		height: 16px; 
		width: 16px; 
		background-position: -64px -16px;
	}

/** =jquery.ui.selectmenu.css
------------------------------------------------------------------ */
	.ui-selectmenu {
		display: block;
		display: inline-block;
		position: relative;
		height: 2.2em;
		vertical-align: middle;
		text-decoration: none;
		overflow: hidden;
		zoom: 1;
	}
	.ui-selectmenu-icon {
		position:absolute;
		right:6px;
		margin-top:-8px;
		top: 50%;
	}
	.ui-selectmenu-menu { /* z-index: 1005 to make selectmenu work with dialog */
		padding:0;
		margin:0;
		position:absolute;
		top: 0;
		display: none;
		z-index: 99999;
	} 
	.ui-selectmenu-menu  ul {
		padding:0;
		margin:0;
		list-style:none;
		position: relative;
		overflow: auto;
		overflow-y: auto ;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	} 
	.ui-selectmenu-open {
		display: block;
	}
	.ui-selectmenu-menu-popup {
		margin-top: -1px;
	}
	.ui-selectmenu-menu li {
		padding:0;
		margin:0;
		display: block;
		border-top: 1px dotted transparent;
		border-bottom: 1px dotted transparent;
		border-right-width: 0 !important;
		border-left-width: 0 !important;
		font-weight: normal !important;
	}
	.ui-selectmenu-menu li a,
	.ui-selectmenu-status {
		line-height: 1.4em;
		display: block;
		padding: .405em 2.1em .405em 1em;
		outline:none;
		text-decoration:none;
	}
	.ui-selectmenu-menu li.ui-state-disabled a, 
	.ui-state-disabled {
		cursor: default;
	}
	.ui-selectmenu-menu li.ui-selectmenu-hasIcon a,
	.ui-selectmenu-hasIcon .ui-selectmenu-status {
		padding-left: 20px;
		position: relative;
		margin-left: 5px;
	}
	.ui-selectmenu-menu li .ui-icon, 
	.ui-selectmenu-status .ui-icon {
		position: absolute;
		top: 1em;
		margin-top: -8px;
		left: 0;
	}
	.ui-selectmenu-status {
		line-height: 1.4em;
	}
	.ui-selectmenu-menu li span,
	.ui-selectmenu-status span {
		display:block;
		margin-bottom: .2em;
	}
	.ui-selectmenu-menu li .ui-selectmenu-item-header {
		font-weight: bold;
	}
	.ui-selectmenu-menu li .ui-selectmenu-item-footer {
		opacity: .8;
	}
	.ui-selectmenu-menu .ui-selectmenu-group { /* for optgroups */
		font-size: 1em;
	}
	.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label {
		line-height: 1.4em;
		display:block;
		padding: .6em .5em 0;
		font-weight: bold;
	}
	.ui-selectmenu-menu .ui-selectmenu-group ul {
		margin: 0;
		padding: 0;
	}
	* html .ui-selectmenu-menu li { /* IE6 workaround (dotted transparent borders) */
		border-color: pink;
		filter:chroma(color=pink);
		width:100%;
	}
	* html .ui-selectmenu-menu li a {
		position: relative 
	}
	*+html .ui-state-disabled, *+html .ui-state-disabled a { /* IE7 workaround (opacity disabled) */
		color: silver;
	}


/** =Mobile (Portrait)
------------------------------------------------------------------ */
	@media only screen and (max-width: 767px) {
		#bracket #header, 
		#bracket #footer {
			padding: 3px 0; 
			font-size: 7px; 
			font-weight: normal; 
		}
		#bracket .buttonlist {
			display: none !important; 
		}
		#bracket .quadrant.expanded {
			width: 100% !important; 
		}
		#bracket .flight {
			position: relative; 
		}

		/* 'show' the actual select (transparent), so native select is used instead of selectmenu popup */
		#bracket .flightinput {
			display: block !important;
			opacity: 0;
			z-index: 4;
		}
		#bracket .flightbutton {
			padding: 2px 1px;
			text-decoration: none;
		}
		#bracket .ui-selectmenu-status {
			line-height: 1;
		}
		#bracket .ui-selectmenu-status .display {
			font-size: 8px;
			color: #212121;
		}
		#bracket .ui-selectmenu-icon {
			display: none;
		}

		/* overrides to make expanded stuff even bigger */
		#bracket #quadrant0.expanded {
			width: 100% !important; 
			left: 0 !important; 
		}
		#bracket .round.expanded {
			width: 200% !important; 
		}

		/* make submit buttons bigger/easier */
		#globalbuttons button {
			display: block;
			width: 98%;
			line-height: 3em;
			margin: 12px 1%;
		}
	}


/** =Print
------------------------------------------------------------------ */
	/* see bracket_print_picks.css */