/*
*/
/* make the audio player invisible */

.audiojs {height: 0px;}


/* splash panel */

.splash-look {
	
/*		background-color: darkblue;	*/
		background-color: black;
		line-height: 47px;
		color: white;
		font-size: 24px;

}

.splash-look1 {
	
/*		background-color: darkblue;	*/
		background-color: black;

		color: white;
		font-size: 24px;

}


/* make a colorful loading panel... */


.load-look {
	
/*		background-color: darkblue;	*/
		background-color: black;
		color: white;
		font-size: 24px;

}


#identity {
	border: 1px solid #000;
}


/* id for main game canvas 

#sketchpad {
	 border: 1px solid #000;
	}		
	 
*/

.about {
	padding: 10px;
}

/* this is the main css for list items */
.gumby b {
	float: left;
	color: black;
	margin-top: 9px;					/* this centers the item text */
	font-size:20px;
}

/* class to handle supplemental (non-toggle) data inside list item */

.innerGumby {
	float: right;			/* this puts the text on the right side of the list item */
	margin-top:9px;
							/* this is critical to sizing the item area  */
	color: slateblue;
	font-size: 20px;
}

/* I don't understand css enough to know why I can't change the chevron font size... probably need to set up a 
3 column table in the layout to get stuff in the right position */

.gumbyChevron {

	color: black;

}

/* class to handle toggle button inside list item */

.gumTog {
	float: right;			/* this puts the toggle button on the right side of the list item */
	height: 40px;			/* this is critical to sizing the item area  */
		

}

/* for identityForm score fields that are disabled for input */
 
.score-disabled {
	color: black;
}




/* this puts a border around the spot size settings canvas */

.zoop {
	border: 1px solid black;
}



/* this is the stuff for the theme select list */

/* this puts a border around the mini canvases */
.can {
	border: 1px solid black;
}


/* theme affects the theme names on settings selection list */
/*
.theme {
	position: relative;
	font-size: 20px;
}
*/

.theme {
	float: left;
	font-size: 38px;
}

/* spot is the class for the mini canvas games */
.spot {
	
	float: right;
	width: 80px;
	
}




/* these are for lists: item selected and item pressed - respectively 
the classes are set as attributes of the list container   - colors are set to black and white
but sencha uses some kind of off-white so it still looks a little funny when you select audio 
*/

/* for item selected in main menu */
.coolselect {
	background-color:#white;
	color:black;
}

/* for item pressed in main menu - wonder if there's a way to skip particular list items on this */
.poolselect {
	background-color:white;
	color:black;
}	

/*
css to implement toggle button within a list item (audio on/off)

 the css stuff was stolen from sencha.css file (x-field-toggle) and all occurences of 'x-field-toggle' changed to 'pony'
 
 changing display from block to inline gets rid of rectangular background on toggle button 
 adding a 0px margin allows proper positioning of the button

 this css is implemented by using the cls: 'pony' attribute when instantiating the toggle button
*/

.pony {
min-height: 2.5em;			
width: 100%;
display: inline;				/* was block */
background: white none;
-webkit-appearance: none
}

.pony,.x-field-slider {
background-color: #fff
}
.pony .x-slider {
margin:0px;								/* this field is added and is critical to positioning  */
 	
width: 4.4em;
-webkit-border-radius: 1.1em;			
border-radius: 1.1em;
overflow: hidden;
border: 0.1em solid #b7b7b7;
background-color: #dddddd;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #c4c4c4), color-stop(10%, #d0d0d0), color-stop(65%, #dddddd), color-stop(100%, #dedede));
background-image: linear-gradient(top, #c4c4c4 0%, #d0d0d0 10%, #dddddd 65%, #dedede 100%);
z-index: 2
}