/* ------------------------------------------------------------------------------------------------------------------ */
/* corpo */

div#clippingDetails { display: block; position: relative; width: 100%; margin: 0 auto; padding: 15px 0 0 0; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* coluna esquerda */

div#clippingDetails div.left { display: block; position: relative; width: 200px; margin: 15px 0 0 0; padding: 0 0 35px 0; float: left; overflow: hidden; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* menu */

div#clippingDetails div.left { display: block; position: relative; width: 200px; background-color: #e5e6e9; margin: 15px 0 0 0; padding: 0 0 35px 0; float: left; overflow: hidden; }
	div#clippingDetails div.left hr { display: block; position: relative; margin: 2px 25px 10px 0; border: none; border-bottom: 1px dotted rgb(142,144,144); }
	div#clippingDetails div.left a.top { display: block; position: relative; margin: 0 25px 0 0; padding: 0 4px; color:#003B5C; text-align: left; font-family: 'ArialNarrow', sans-serif; font-size: 14px; line-height: 22px; text-decoration: none; text-transform: uppercase; }
	div#clippingDetails div.left a.top:hover { text-decoration: underline; }

	div#clippingDetails div.left a.children { display: block; position: relative; margin: 6px 0 6px 4px; padding: 0 0 0 0; color:#003B5C; text-align: left; font-family: 'ArialNarrow', sans-serif; font-size: 14px; line-height: 22px; text-decoration: none; }
	div#clippingDetails div.left a.children:hover { text-decoration: underline; }
		div#clippingDetails div.left a.children span { display: inline-block; position: relative; margin: 0 5px 0 0; width: 10px; height: 10px; background: transparent url(../src/img/menuArrowLeft.png) no-repeat center center; background-size: cover; vertical-align: middle; }

	div#clippingDetails div.left a.grandson { display: block; position: relative; margin: 3px 0 3px 35px; padding: 0 0 0 0; color:#003B5C; text-align: left; font-family: 'ArialNarrow', sans-serif; font-size: 14px; line-height: 22px; text-decoration: none; }
	div#clippingDetails div.left a.grandson:hover { text-decoration: underline; }
		div#clippingDetails div.left a.grandson span { display: inline-block; position: relative; margin: 0 5px 0 0; width: 10px; height: 10px; background: transparent url(../src/img/menuArrowLeft.png) no-repeat center center; background-size: cover; vertical-align: middle; }

	div#clippingDetails div.left a.selected { background-color:#003B5C; color: #ffffff; }

@media all and ( max-width: 949px )
{
	div#clippingDetails div.left { float: none; padding: 0; width: 100%; background-color: transparent; }
		div#clippingDetails div.left div.subMenu { display: none; }
}
@media all and ( min-width: 950px ) and ( max-width: 1199px )
{
	div#clippingDetails div.left { margin: 15px 0 0 15px; padding: 0; background-color: #ffffff; }
		div#clippingDetails div.left div.subMenu { display: none; }
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* categorias */

div#clippingDetails div.left div.categories { display: block; position: relative; width: 100%; background-color: #ffffff; margin: 50px 0 0 0; overflow: hidden; }
	div#clippingDetails div.left div.categories h3 { display: block; position: relative; font-family: 'ArialBold', sans-serif; font-size: 16px; line-height: 30px; color:#003B5C; text-align: center; }
	div#clippingDetails div.left div.categories a { display: block; position: relative; margin: 4px 15px; padding: 0 0 0 0; color:#003B5C; text-align: left; font-family: 'ArialNarrow', sans-serif; font-size: 14px; line-height: 25px; text-decoration: none; }
	div#clippingDetails div.left div.categories a:hover { text-decoration: underline; }
		div#clippingDetails div.left div.categories a span { display: inline-block; position: relative; color:#003B5C; font-family: 'ArialNarrow', sans-serif; font-size: 14px; line-height: 25px; text-decoration: none; background-color: #ffffff; padding: 0 2px 0 0; margin: 0 2px 0 0; }

	div#clippingDetails div.left div.categories a.selected { background-color: #003B5C; color: #ffffff; }

@media all and ( max-width: 949px )
{
	div#clippingDetails div.left div.categories { background-color: #e5e6e9; width: 90%; margin: 0 auto; }
		div#clippingDetails div.left div.categories h3 { padding: 0; text-indent: 10px; text-align: left; }
		div#clippingDetails div.left div.categories a { margin: 0; padding: 0; border-top: 1px solid #ffffff; }
			div#clippingDetails div.left div.categories a span { background-color: transparent; }
}
@media all and ( min-width: 950px ) and ( max-width: 1199px )
{
	div#clippingDetails div.left div.categories { margin: 0 auto; }
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* tags */

div#clippingDetails div.left div.tags { display: block; position: relative; width: 100%; background-color: #ffffff; margin: 25px 0 0 0; overflow: hidden; text-align: justify; }
	div#clippingDetails div.left div.tags h3 { display: block; position: relative; font-family: 'ArialBold', sans-serif; font-size: 16px; line-height: 30px; color:#003B5C; text-align: center; }
	div#clippingDetails div.left div.tags a { display: inline-block; position: relative; margin: 0 2px; color:#003B5C; text-align: left; font-family: 'ArialNarrow', sans-serif; font-size: 14px; line-height: 20px; text-decoration: none; }
	div#clippingDetails div.left div.tags a:hover { text-decoration: underline; }
	div#clippingDetails div.left div.tags a.selected { background-color: rgb( 0,58,93 ); color: #ffffff; padding: 0 10px; }

@media all and ( max-width: 949px )
{
	div#clippingDetails div.left div.tags { display: none; }
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* coluna direita */

div#clippingDetails div.right { display: block; position: relative; width: 700px; margin: 15px 0 0 0; float: right; }
	div#clippingDetails div.right h1 { display: block; position: relative; font-family: 'ArialBold', sans-serif; font-size: 18px; color:#003B5C; line-height: 25px; }

	div#clippingDetails div.right div.img { display: block; position: relative; width: 575px; height: 400px; margin: 10px 0 0 0; float: left; }
		div#clippingDetails div.right div.img a { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
		div#clippingDetails div.right div.img a:first-child { display: block; }

	div#clippingDetails div.right div.share { display: block; position: relative; width: 100px; height: 400px; float: right; text-align: center; }
		div#clippingDetails div.right div.share div.fb-like { display: inline-block; position: relative; vertical-align: middle; margin: 177px 0 0 0; }
		div#clippingDetails div.right div.share div.fb-share-button { display: inline-block; position: relative; vertical-align: middle; margin: 5px 0 0 0; }
	div#clippingDetails div.right div.htmlContent { display: block; position: relative; margin: 20px 0 35px 0; width: 575px; }
	div#clippingDetails div.right a.back { display: block; position: relative; font-family: 'ArialNarrow', sans-serif; font-size: 12px; background-color:rgb(142,144,144); color: #ffffff; line-height: 20px; margin: 10px 125px 0 0; text-align: justify; max-height: 100px; overflow: hidden; float: right; padding: 0 10px; cursor: pointer; text-decoration: none; }
	div#clippingDetails div.right a.back { transition-property: all; transition-duration: 400ms; }
	div#clippingDetails div.right a.back:hover { background-color:#003B5C; }

@media all and ( max-width: 949px )
{
	div#clippingDetails div.right { width: 90%; margin: 25px auto 0 auto; float: none; }
		div#clippingDetails div.right h1 { font-size: 16px; }
		div#clippingDetails div.right p { width: 100%; }
		div#clippingDetails div.right a.back { margin: 10px 0 0 0; }
		div#clippingDetails div.right div.img { width: 100%; height: 200px; margin: 10px 0 0 0; float: none; }
		div#clippingDetails div.right div.share { display: none; }
}
@media all and ( min-width: 950px ) and ( max-width: 1199px )
{
	div#news div.right { margin: 15px 15px 0 0; }
}


/* ------------------------------------------------------------------------------------------------------------------ */