/*************************************************************************************************/
/* (C) 2023 Iterum, LLC. All rights reserved. Iterum, LLC.  									 */
/*-----------------------------------------------------------------------------------------------*/
/* This file contains CSS used by the gear list.												 */
/*************************************************************************************************/

/* The following increases the space above/below the radio buttons (that allow the user to select 
 * the gear that will be displayed) so it is easier to select a button on a small (i.e., mobile) 
 * device. The margin settins are a little quirky, because the buttons can get lower than their
 * labels. It seems that the top margin controls the position of the button and the bottom margin
 * controls the position of the label.
 */
input[type="radio"] {
	margin: 5px 0 10px 0;
}

/* This is the div that contains the gear items. */
#gearListDiv {
	padding: 0;
	margin: 0;
}

	/* This is the div that contains an individual gear item. */
	#gearListDiv div {
		border: 1px solid lightgray;
		margin: 0 auto;
		margin: 0 5px 20px 5px;
		padding-bottom: 4px;
		text-align: center;
		max-width: 300px;
	}

/* This is the class for a single gear image. */
.gearListImage {
	border: 1px solid lightgray;
	top: 0;
	left: 0;
	position: relative;
}

/* This is the text that appears below a single gear image. */
.gearListText {
	font-size: 12px;
	font-weight: bold;
}

/* This is the input box for the gear image search text. */
#gearListSearchInput {
	background-image: url('/images/buttons/search.gif'); /* Add a search icon to input */
	background-position: 8px 6px; /* Position the search icon (left, top). */
	background-repeat: no-repeat; /* Do not repeat the icon image. */
	font-size: 100%;
	width: 150px;
	padding: 6px 10px 6px 30px; /* Add padding inside the search box (top, right, bottom, left). */
	border: 1px solid #ddd; /* Add a grey border */
	margin-top: 12px;
	margin-bottom: 12px; /* Add some space below the input */
}