
/*
*, *:before, *:after {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*/

.jgrid_ball *, .jgrid_ball:before, .jgrid_ball:after {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.jgrid_ball, .jgrid_ball * {
	margin: 0px;
	padding: 0px;
	display: block;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}
.jgrid_ball div {float:left;}
.jgrid_ball {display: inline-block;}

/* --------------------------------------------------------------------------------------------- BIG */

	.jgrid_ball_big_border {
		position: relative;
		width: 50px; 
		height: 45px;
		margin: 0px 0;
		border-left: solid 1px #aeadae;
		border-right: solid 1px #aeadae;
	}

	/* *********************************** ballo menor 1 */
	.jgrid_ball_big1 {
		position: relative;
		width: 40px; 
		height: 40px;
		margin: 0px 0px;
		z-index: 12;
		border-radius: 50%;
	}

	/* encaixe no big */
	.jgrid_ball_big_border .jgrid_ball_big1 {top: 0px; left: 4.4px;}


	/* *********************************** ballo menor 2 */
	.jgrid_ball_big2 {
		position: relative;
		width: 30px;
		height: 17.32px;
		margin: 8.66px 0;
		z-index: 12;
		border-radius: 50%;
	}

	/* encaixe no big */
	.jgrid_ball_big_border .jgrid_ball_big2 {top: -3px; left: 9.5px;}

	/* *********************************** ballo menor 3 */
	.jgrid_ball_big3 {
		position: relative;
		width: 20px; 
		height: 11.55px;
		margin: 5.77px 0;
		z-index: 12; 
		border-radius: 50%;
	}

	/* encaixe no big */
	.jgrid_ball_big_border .jgrid_ball_big3 {top: 2px; left: 14.5px;}


	/* Espacamentos  */
	.jgrid_ball_line_big_a {margin-left: 0px;}
	.jgrid_ball_line_big_b {margin-left: 24px;}

/* --------------------------------------------------------------------------------------------- MED */

	.jgrid_ball_med_border {
	  position: relative;
		width: 34px; 
		height: 32px;
		margin: 0px 0px;
		border-left: solid 1px #aeadae;
		border-right: solid 1px #aeadae;
	}


	/* *********************************** ballo menor 1 */
	.jgrid_ball_med1 {
		position: relative;
		width: 30px;
		height: 30px;
		margin: 0px 0px;
		z-index: 12;
		border-radius: 50%;
	}

	/* encaixe no med */
	.jgrid_ball_med_border .jgrid_ball_med1 { top: 0px;left: 3.9px;}


	/* *********************************** ballo menor 2 */
	.jgrid_ball_med2 {
		position: relative;
		width: 20px; 
		height: 11.55px;
		margin: 5.77px 0;
		z-index: 12;
		border-radius: 50%;
	}

	/* encaixe no med */
	.jgrid_ball_med_border .jgrid_ball_med2 {top: 1px; left: 8.9px;}


	/* *********************************** ballo menor 3 */
	.jgrid_ball_med3 {
		position: relative;
		width: 14px; 
		height: 14px;
  		margin: 4.04px 0;
  		border-radius: 50%;
		z-index: 12;
		border-radius: 50%;
	}
	/* encaixe no med */
	.jgrid_ball_med_border .jgrid_ball_med3 {top: 0.5px; left: 11.9px;}

	/* Espacamentos  */
	.jgrid_ball_line_med_a {margin-left: 0px;clear: both;}
	.jgrid_ball_line_med_b {margin-left: 20px;clear: both;}

/* --------------------------------------------------------------------------------------------- MIN */

	.jgrid_ball_min_border {
	  	position: relative;;
		width: 29px; 
		height: 25px;
		margin: 0px 0;
		background-color: transparent;
		border-left: solid 1px transparent;
		border-right: solid 1px transparent;
	}

	/* *********************************** ballo menor 1 */
	.jgrid_ball_min1 {
		position: relative;
		width: 28px;
		height: 28px;
		margin: 0px 0px;
		z-index: 12;
		border-radius: 50%;
	}

	/* encaixe no min */
	.jgrid_ball_min_border .jgrid_ball_min1 { top: -5.5px;left: -0.5px;}


	/* *********************************** ballo menor 2 */
	.jgrid_ball_min2 {
		position: relative;
		width: 20px; 
		height: 11.55px;
		margin: 5.77px 0;
		z-index: 12; 
		border-radius: 50%;
	}

	/* encaixe no min */
	.jgrid_ball_min_border .jgrid_ball_min2 {top: 1px; left: 8.9px;}


	/* *********************************** ballo menor 3 */
	.jgrid_ball_min3 {
		position: relative;
		width: 14px; 
		height: 14px;
  		margin: 4.04px 0;
  		border-radius: 50%;
		z-index: 12;
		border-radius: 50%;
	}
	/* encaixe no min */
	.jgrid_ball_min_border .jgrid_ball_min3 {top: 0.5px; left: 11.9px;}

	/* Espacamentos  */
	.jgrid_ball_line_min_a {margin-left: 0px;clear: both;}
	.jgrid_ball_line_min_b {margin-left: 16px;clear: both;}

/* --------------------------------------------------------------------------------------------- MICRO */

	.jgrid_ball_mic_border {
	  	position: relative;
		width: 21px; 
		height: 20px;
		margin: 0px 0;
		background-color: transparent;
		border-left: solid 1px transparent;
		border-right: solid 1px transparent;
	}

	/* *********************************** ballo menor 1 */
	.jgrid_ball_mic1 {
		position: relative;
		width: 20px; 
		height: 20px;
		margin: 5.77px 0;
		z-index: 12;
		border-radius: 50%;
	}

	/* encaixe no mic */
	.jgrid_ball_mic_border .jgrid_ball_mic1 {top: 0px; left: 0px;}


	/* *********************************** ballo menor 2 */
	.jgrid_ball_mic2 {
		position: relative;
		width: 20px; 
		height: 11.55px;
		margin: 5.77px 0;
		z-index: 12;
		border-radius: 50%;
	}

	/* encaixe no mic */
	.jgrid_ball_mic_border .jgrid_ball_mic2 {top: 1px; left: 8.9px;}


	/* *********************************** ballo menor 3 */
	.jgrid_ball_mic3 {
		position: relative;
		width: 14px; 
		height: 14px;
  		margin: 4.04px 0;
  		border-radius: 50%;
		z-index: 12;
		border-radius: 50%;
	}
	/* encaixe no mic */
	.jgrid_ball_mic_border .jgrid_ball_mic3 {top: 0.5px; left: 11.9px;}

	/* Espacamentos  */
	.jgrid_ball_line_mic_a {margin-left: 0px;clear: both;}
	.jgrid_ball_line_mic_b {margin-left: 11px;clear: both;}



/* --------------------------------------------------------------------------------------------- NANO */


	.jgrid_ball_nano_border {
	  	position: relative;
		width: 15px; 
		height: 14px;
		margin: 0px 0;
		background-color: transparent;
		border-left: solid 1px transparent;
		border-right: solid 1px transparent;
	}

	/* *********************************** ballo menor 1 */
	.jgrid_ball_nano1 {
		position: relative;
		width: 14px; 
		height: 13px;
		margin: 3px 0;
		z-index: 12;
		border-radius: 50%;
	}

	/* encaixe no nano */
	.jgrid_ball_nano_border .jgrid_ball_nano1 {top: 0px; left: 0px;}


	/* *********************************** ballo menor 2 */
	.jgrid_ball_nano2 {
		position: relative;
		width: 14px; 
		height: 8px;
		margin: 3px 0;
		z-index: 12;
		border-radius: 50%;
	}

	/* encaixe no nano */
	.jgrid_ball_nano_border .jgrid_ball_nano2 {top: 1px; left: 8.9px;}


	/* *********************************** ballo menor 3 */
	.jgrid_ball_nano3 {
		position: relative;
		width: 14px; 
		height: 14px;
  		margin: 4.04px 0;
  		border-radius: 50%;
		z-index: 12;
		border-radius: 50%;
	}
	/* encaixe no nano */
	.jgrid_ball_nano_border .jgrid_ball_nano3 {top: 0.5px; left: 11.9px;}

	/* Espacamentos  */
	.jgrid_ball_line_nano_a {margin-left: 0px;clear: both;}
	.jgrid_ball_line_nano_b {margin-left: 7.5px;clear: both;}




/* --------------------------------------------------------------------------------------------- PICO */


	.jgrid_ball_pico_border {
	  	position: relative;
		width: 9px; 
		height: 8px;
		margin: 0px 0;
		background-color: transparent;
		border-left: solid 1px transparent;
		border-right: solid 1px transparent;
	}

	/* *********************************** ballo menor 1 */
	.jgrid_ball_pico1 {
		position: relative;
		width: 9px; 
		height: 8px;
		margin: 3px 0;
		z-index: 12;
		border-radius: 50%;
	}

	/* encaixe no pico */
	.jgrid_ball_pico_border .jgrid_ball_pico1 {top: 0px; left: 0px;}


	/* *********************************** ballo menor 2 */
	.jgrid_ball_pico2 {
		position: relative;
		width: 14px; 
		height: 8px;
		margin: 3px 0;
		z-index: 12;
		border-radius: 50%;
	}

	/* encaixe no pico */
	.jgrid_ball_pico_border .jgrid_ball_pico2 {top: 1px; left: 8.9px;}


	/* *********************************** ballo menor 3 */
	.jgrid_ball_pico3 {
		position: relative;
		width: 14px; 
		height: 14px;
  		margin: 4.04px 0;
  		border-radius: 50%;
		z-index: 12;
		border-radius: 50%;
	}
	/* encaixe no pico */
	.jgrid_ball_pico_border .jgrid_ball_pico3 {top: 0.5px; left: 11.9px;}

	/* Espacamentos  */
	.jgrid_ball_line_pico_a {margin-left: 0px;clear: both;}
	.jgrid_ball_line_pico_b {margin-left: 4px;clear: both;}



/*
	Estilos 
		- Controle de borda
			6 bordas
			- primeira borda: superior esquerda;
			- ultima borda: esquerda;

		       __
		     /    \
		    |      |
		    |      |
		     \    /
		       --

*/
.jgrid_ball_border_no_b1:before {border-top-color: transparent}
.jgrid_ball_border_no_b2:before {border-right-color: transparent;}
.jgrid_ball_border_no_b3 {border-right-color: transparent;}
.jgrid_ball_border_no_b4:after {border-bottom-color: transparent;}
.jgrid_ball_border_no_b5:after {border-left-color: transparent;}
.jgrid_ball_border_no_b6 {border-left-color: transparent;}

/* nenhuma borda */
.jgrid_ball_bnb { border-right-color: transparent; border-left-color: transparent; }
.jgrid_ball_bnb:before { border-top-color: transparent; border-right-color: transparent;}
.jgrid_ball_bnb:after { border-bottom-color: transparent;border-left-color: transparent;}

/*
	Estilos 
		- Espacamentos
*/
/* organizacao de linhas e ballos */
.jgrid_ball_line {clear: both;}
.jgrid_ball_cell {}
.jgrid_ball_line_first {}
.jgrid_ball_line_second {}
.jgrid_ball_line_middle {}
.jgrid_ball_line_last {}
/* aproximar proximas linhas */
.jgrid_ball_line_first, .jgrid_ball_line_middle, .jgrid_ball_line_second {margin-bottom: 0px;}
/* apenas 1 linha */
.jgrid_ball_line_single {}
/* .jgrid_ball_line_first { margin-bottom: -25px; } */




