/* ================================================================================================================== */
/* hover */
/* ================================================================================================================== */

div#hover { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent url(../images/item_hover.png) repeat; z-index: 1000; }
	div#hover div.container { display: block; position: relative; width: 1200px; margin: 0 auto; text-align: right; font-size: 0; }
		div#hover div.container div.content { display: inline-block; position: relative; width: 350px; height: 150px; background-color: #f3f4f4; margin: 45px 0 0 0; font-size: 0; text-align: left; }
			div#hover div.container div.content span.arrow { display: block; position: absolute; top: -20px; right: 87px; border: 10px solid transparent; border-bottom: 10px solid #f3f4f4; }
			div#hover div.container div.content a.close { display: block; position: absolute; top: 5px; right: 5px; width: 20px; line-height: 20px; color: #3b2314; text-decoration: none; }
			div#hover div.container div.content a.close:hover { color: #9A9997; }
			div#hover div.container div.content span.photo { display: inline-block; position: relative; width: 130px; height: 130px; margin: 10px; vertical-align: top; }
			div#hover div.container div.content div.text { display: inline-block; position: relative; width: 150px; height: 130px; margin: 10px 10px 0 10px; vertical-align: top; }
				div#hover div.container div.content div.text h1 { display: block; position: relative; font-size: 16px; line-height: 25px; max-height: 50px; overflow: hidden; }
				div#hover div.container div.content div.text p { display: block; position: relative; font-size: 10px; line-height: 15px; height: 15px; overflow: hidden; color: #a7a29f; margin: 10px 0 0 0; }
				div#hover div.container div.content div.text a { display: inline-block; position: relative; font-size: 12px; line-height: 20px; height: 20px; background-color: #3b2314; color: #ffffff; margin: 20px 0 0 0; text-align: center; text-decoration: none; padding: 0 15px; }
				div#hover div.container div.content div.text a:hover { background-color: #9A9997; }

@media all and ( min-width: 600px ) and ( max-width: 1099px ) {
	div#hover div.container { width: 100%; }
}
@media all and ( max-width: 599px ) {
	div#hover div.container { width: 100%; }
		div#hover div.container div.content { width: 300px; }
}

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

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

@media all and ( min-width: 600px ) and ( max-width: 1099px ) {
	#item { width: 600px; }
}
@media all and ( max-width: 599px ) {
	#item { width: 320px; }
}

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

#item div.title { display: block; position: relative; width: 100%; max-height: 100px; margin: 25px auto 0 auto; }
	#item 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 ) {
	#item div.title { max-height: none; }
		#item div.title h1 { font-size: 30px; line-height: 35px; }
}
@media all and ( max-width: 599px ) {
	#item div.title { max-height: none; }
		#item div.title h1 { font-size: 22px; line-height: 30px; }
}

/* ================================================================================================================== */
/* tabs */
/* ================================================================================================================== */

#item #tabs { display: block; position: relative; margin: 55px 0 0 0; width: 1100px; }

	#item #tabs div.left { display: block; position: relative; width: 350px; float: left; }
		#item #tabs div.left a.menu_big { display: block; position: relative; border: none; margin: 0 0 2px 0; line-height: 30px; font-size: 14px; padding: 0 20px; text-decoration: none; font-family: 'ArialRoundedMTLight', sans-serif; }
		#item #tabs div.left a.menu_big:hover { font-family: 'ArialRoundedMTBoldRegular', sans-serif; }
		#item #tabs div.left a.menu_big.selected { font-family: 'ArialRoundedMTBoldRegular', sans-serif; background-color: #3b2314; color: #ffffff; }
	#item #tabs div.right { display: block; position: relative; width: 725px; float: right; }

@media all and ( min-width: 600px ) and ( max-width: 1099px ) {
	#item #tabs { width: 600px; }
		#item #tabs div.left { width: 550px; margin: 0 auto; float: none; }
		#item #tabs div.right { width: 100%; float: none; margin: 30px 0 0 0; }
}
@media all and ( max-width: 599px ) {
	#item #tabs { width: 320px; }
		#item #tabs div.left { width: 320px; }
		#item #tabs div.right { width: 300px; float: left; margin: 30px 10px 0 10px; }
}

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

#item div.categories { display: block; position: relative; width: auto; margin: 15px 0 0 15px; }
	#item 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; }
	#item div.categories a:hover { font-family: 'ArialRoundedMTBoldRegular', sans-serif; }
	#item div.categories a.selected_inside { font-family: 'ArialRoundedMTBoldRegular', sans-serif; }
	#item div.categories a.selected { font-family: 'ArialRoundedMTBoldRegular', sans-serif; background-color: #3b2314; color: #ffffff; }
	#item div.categories a.selected_inside:hover { text-decoration: underline; }
	#item div.categories a.selected:hover { text-decoration: underline; }
		#item div.categories a span { display: inline-block; position: relative; line-height: 25px; }

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

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

#item div.container { display: block; position: relative; width: 100%; }

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

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

#item div.photosAndControls { display: block; position: relative; width: 100%; height: 435px; overflow: hidden; background-color: #ffffff; }

	#item div.photosAndControls div.photos { display: block; position: absolute; top: 15px; left: 82px; width: 561px; height: 405px; overflow: hidden; }
		#item div.photosAndControls div.photos a { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
		#item div.photosAndControls div.photos a:first-child { display: block; }
			#item 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 ) {
	#item div.photosAndControls { width: 600px; height: 400px; }
		#item div.photosAndControls div.photos { width: 436px; height: 380px; }
}
@media all and ( max-width: 599px ) {
	#item div.photosAndControls { width: 320px; height: 300px; }
		#item div.photosAndControls div.photos {top: 10px; left: 57px; width: 206px; height: 280px; }
}

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

#item 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 ) {
	#item p.description { width: 550px; margin: 30px auto 35px auto; }
}
@media all and ( max-width: 599px ) {
	#item p.description { width: 260px; margin: 30px auto 35px auto; }
}

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

#item p.topics { display: inline-block; vertical-align: top; float: left; position: relative; max-width: 250px; margin: 0 0 25px 37px; padding: 30px 20px; background-color: #978b84; color: #ffffff; line-height: 20px; }
#item form input[type="submit"] { display: inline-block; vertical-align: top; float: right; position: relative; width: auto; margin: 0 37px 0 37px; padding: 5px 20px; background-color: #3b2314; border: none; color: #ffffff; font-size: 12px; line-height: 20px; cursor: pointer; }
#item form input[type="submit"]:hover { background-color: #9A9997; }

@media all and ( min-width: 600px ) and ( max-width: 1099px ) {
	#item p.topics { margin: 0 25px 25px 25px; }
}
@media all and ( max-width: 599px ) {
	#item p.topics { margin: 0 30px 25px 30px; }
	#item form input[type="submit"] { display: block; float: none; margin: 10px auto; }
}

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

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

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

	#item div.related div.block a.item { display: block; position: relative; width: 199px; height: 114px; height: 161px; 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; }
		#item 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; }
		#item div.related div.block a.item:hover span.hover { display: block; }
		#item div.related div.block a.item span.hover { display: none; position: absolute; top: 0; left: 0; width: 199px; height: 114px; height: 161px; background: transparent url(../images/itemHoverBg.png) no-repeat; z-index: 2; }
			#item div.related div.block a.item span.hover p { display: block; position: absolute; top: 20px; 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 ) {
	#item div.related h1 { font-size: 22px; line-height: 30px; margin: 0 0 30px 0; }

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

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