/*informamos os dados abaixo para que o quadro não fique oculto antes de clicarmos em alguma miniatura */
#fotos{
	width: 444px; /*largura do quadro um pouco maior que a da imagem*/
	height: 300px; /*altura do quadro um pouco maior que a da imagem*/
	border: 2px solid gray; /* colocaremos uma borda de 2px na cor cinza para contornar nossa							 imagem*/
	margin-top: 10px;	/* colocamos essa margem aqui para dar um espaço entre a imagem e os							elementos do documento que a antecedem */
	margin-bottom: 10px;	/* colocamos essa margem aqui para dar um espaço entre a imagem e							 os elementos do documento que a sucedem */
}


/* quadro para a imagem que será exibida no tamanho grande */
#fotos img{
	width: 444px; /*largura da imagem*/
	height: 300px; /*altura da imagem*/
}


/* aqui escolhemos como será a disposição das miniaturas, se na vertical ou horizontal. */
#menu_miniaturas{ /* aqui nesse tutorial a disposição será na horizontal */ 
	width: 395px;  /* largura do menu, fiz para dispormos 10 imagens, sendo distribuídas em 2 						linhas de 5 imagens cada, para exibir mais, basta multiplicar o tamanho						  de cada miniatura pela quantidade de imagens desejadas por linha e							colocar o resultado aqui */
	height: 120px;	/* altura do menu, aqui valem os mesmos critérios adotados para a largura 						*/
	display: block;		/* faz com que o menu seja exibido como um bloco */
	margin-left: 10px;	/* dá um espaço a partir da margem esquerda do documento */
	margin-right: 10px; /* dá um espaço a partir da margem direita do documento */
}

/* aqui definimos as nossas miniaturas */
#miniaturas{
	width: 67px;	/* largura da miniatura */
	height: 45px;	/* altura da miniatura */
	border: 1px solid gray; /* colocaremos uma borda de 1px na cor cinza para contornar nossa							 miniatura */
	float: left;	/* fazemos com que nossas miniaturas sejam dispostas uma ao lado da outra						 até atingir a largura do nosso menu, quando atingem, há a quebra			 				   automática de linha */
	margin: 5px 5px 5px 5px;	/* dá um espaço entre as miniaturas (acima, abaixo, esquerda e direita) */
}