/* ================================================================================================================== */
/* corpo */
/* ================================================================================================================== */

#receiptsDetails { display: block; position: relative; width: 1100px; margin: 0 auto; padding: 40px 0 0 0; }

@media all and ( min-width: 600px ) and ( max-width: 1099px ) {
	#receiptsDetails { width: 600px; padding: 40px 0 20px 0; }
}
@media all and ( max-width: 599px ) {
	#receiptsDetails { width: 320px; padding: 40px 0 20px 0; }
}

/* ================================================================================================================== */
/* titulo */
/* ================================================================================================================== */

#receiptsDetails div.title { display: block; position: relative; width: 100%; max-height: 100px; margin: 25px auto 0 auto; }
	#receiptsDetails div.title h1 { display: block; position: relative; width: auto; font-family: 'ArialRoundedMTLight', sans-serif; font-size: 40px; line-height: 50px; text-align: center; }

@media all and ( min-width: 600px ) and ( max-width: 1099px ) {
	#receiptsDetails div.title { max-height: none; }
		#receiptsDetails div.title h1 { font-size: 30px; line-height: 35px; }
}
@media all and ( max-width: 599px ) {
	#receiptsDetails div.title { max-height: none; }
		#receiptsDetails div.title h1 { font-size: 22px; line-height: 30px; }
}

/* ================================================================================================================== */
/* categorias */
/* ================================================================================================================== */

#receiptsDetails div.categories { display: block; position: relative; width: 350px; margin: 65px 0 0 0; float: left; }
	#receiptsDetails div.categories a { display: block; position: relative; margin: 0 0 2px 0; padding: 0 20px; line-height: 25px; font-family: 'ArialRoundedMTLight', sans-serif; font-size: 13px; text-decoration: none; }
	#receiptsDetails div.categories a:hover { font-family: 'ArialRoundedMTBoldRegular', sans-serif; }
	#receiptsDetails div.categories a.selected_inside { font-family: 'ArialRoundedMTBoldRegular', sans-serif; }
	#receiptsDetails div.categories a.selected { font-family: 'ArialRoundedMTBoldRegular', sans-serif; background-color: #3b2314; color: #ffffff; }
	#receiptsDetails div.categories a.selected_inside:hover { text-decoration: underline; }
	#receiptsDetails div.categories a.selected:hover { text-decoration: underline; }
		#receiptsDetails div.categories a span { display: inline-block; position: relative; line-height: 25px; }

@media all and ( min-width: 600px ) and ( max-width: 1099px ) {
	#receiptsDetails div.categories { width: 550px; margin: 30px auto 0 auto; float: none; }
}
@media all and ( max-width: 599px ) {
	#receiptsDetails div.categories { width: 320px; margin: 30px 0 0 0; float: none; }
}

/* ================================================================================================================== */
/* corpo do artigo */
/* ================================================================================================================== */

#receiptsDetails div.container { display: block; position: relative; width: 725px; min-height: 200px; margin: 55px 0 0 0; float: right; }

@media all and ( min-width: 600px ) and ( max-width: 1099px ) {
	#receiptsDetails div.container { width: 600px; margin: 30px 0 0 0; float: none; }
}
@media all and ( max-width: 599px ) {
	#receiptsDetails div.container { width: 320px; margin: 30px 0 0 0; float: none; }
}

/* ================================================================================================================== */
/* fotografias e botoes de avancar e retroceder no artigo */
/* ================================================================================================================== */

#receiptsDetails div.photosAndControls { display: block; position: relative; width: 725px; height: 435px; overflow: hidden; background-color: #ffffff; }
	#receiptsDetails div.photosAndControls div.photos { display: block; position: absolute; top: 15px; left: 82px; width: 561px; height: 405px; overflow: hidden; }
		#receiptsDetails div.photosAndControls div.photos a { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
		#receiptsDetails div.photosAndControls div.photos a:first-child { display: block; }
			#receiptsDetails div.photosAndControls div.photos a img { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%; }

@media all and ( min-width: 600px ) and ( max-width: 1099px ) {
	#receiptsDetails div.photosAndControls { width: 600px; height: 400px; }
		#receiptsDetails div.photosAndControls div.photos { width: 436px; height: 380px; }
}
@media all and ( max-width: 599px ) {
	#receiptsDetails div.photosAndControls { width: 320px; height: 300px; }
		#receiptsDetails div.photosAndControls div.photos {top: 10px; left: 57px; width: 206px; height: 280px; }
}

/* ================================================================================================================== */
/* descricao */
/* ================================================================================================================== */

#receiptsDetails p.description { display: block; position: relative; width: 650px; margin: 50px auto 35px auto; line-height: 20px; }

@media all and ( min-width: 600px ) and ( max-width: 1099px ) {
	#receiptsDetails p.description { width: 550px; margin: 30px auto 35px auto; }
}
@media all and ( max-width: 599px ) {
	#receiptsDetails p.description { width: 260px; margin: 30px auto 35px auto; }
}

/* ================================================================================================================== */
/* topicos */
/* ================================================================================================================== */

#receiptsDetails p.topics { display: inline-block; position: relative; margin: 0 37px 25px 37px; padding: 30px 20px; background-color: #978b84; color: #ffffff; line-height: 20px; }

@media all and ( min-width: 600px ) and ( max-width: 1099px ) {
	#receiptsDetails p.topics { margin: 0 25px 25px 25px; }
}
@media all and ( max-width: 599px ) {
	#receiptsDetails p.topics { margin: 0 30px 25px 30px; }
}

/* ================================================================================================================== */
/* artigos relacionados */
/* ================================================================================================================== */

#receiptsDetails div.related { display: block; position: relative; width: 100%; margin: 25px auto 0 auto; }
	#receiptsDetails div.related h1 { display: block; position: relative; width: auto; font-family: 'ArialRoundedMTLight', sans-serif; font-size: 40px; line-height: 50px; text-align: center; }

	#receiptsDetails div.related div.block { display: block; position: relative; width: 215px; height: 153px; margin: 55px 40px 0 0; padding: 0; float: left; overflow: hidden; background: transparent url(../images/itemShadow.png) no-repeat bottom center; }
	#receiptsDetails div.related div.block:last-child { margin: 55px 0 0 0; }

		#receiptsDetails div.related div.block a.item { display: block; position: relative; width: 199px; height: 114px; margin: 0 40px 30px 0; border: 8px solid #ffffff; padding: 0; line-height: 25px; font-size: 12px; text-decoration: none; float: left; overflow: hidden; background-color: #ffffff; z-index: 1; }
			#receiptsDetails div.related div.block a.item img { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; z-index: 1; }
			#receiptsDetails div.related div.block a.item:hover span.hover { display: block; }
			#receiptsDetails div.related div.block a.item span.hover { display: none; position: absolute; top: 0; left: 0; width: 199px; height: 114px; background: transparent url(../images/itemHoverBg.png) no-repeat; z-index: 2; }
				#receiptsDetails div.related div.block a.item span.hover p { display: block; position: absolute; bottom: 44px; left: 15px; width: 169px; max-height: 60px; line-height: 20px; font-family: 'ArialRoundedMTLight', sans-serif; font-size: 14px; color: #ffffff; text-align: center; overflow: hidden; }

@media all and ( min-width: 600px ) and ( max-width: 1099px ) {
	#receiptsDetails div.related h1 { font-size: 22px; line-height: 30px; margin: 0 0 30px 0; }

	#receiptsDetails div.related div.block,
	#receiptsDetails div.related div.block:last-child { margin: 0 0 25px 56px;  }
	#receiptsDetails div.related div.block:nth-child(n+4) { display: none; }
}
@media all and ( max-width: 599px ) {
	#receiptsDetails div.related h1 { font-size: 22px; line-height: 30px; margin: 0 0 30px 0; }

	#receiptsDetails div.related div.block,
	#receiptsDetails div.related div.block:last-child { margin: 0 auto 15px auto; float: none; }
}