*{
	font-family : Arial, Helvetica, sans-serif;
	font-size : 12px;
	text-decoration : none;
	margin : 0;
	padding : 0;
	border : none;
	background-repeat : no-repeat;
	list-style : none;
}
body{
	background-color : #000;
	color : #fff;
}
body#capa{	background-image : url(img/fundo2.jpg);}
body#historia{background-image : url(img/fundo6.jpg);}
body#videos{background-image : url(img/fundo1.jpg); background-image : none;}
body#fotos{background-image : url(img/fundo3.jpg); background-image : none;}
body#personagens{background-image : url(img/fundo1.jpg);background-image : none;}
body#autor{background-image : url(img/fundo1.jpg);}
body#autor.dave{background-image : url(img/fundo5.jpg);}
body#filme{background-image : url(img/fundo3.jpg);}


#banner{
	width : 648px;
	height : 60px;
	position : absolute;
	top : 650px;
	left : 150px;
	z-index : 30;
}
#topo{
	width : 819px;
	height : 31px;
	background-image : url(img/terra-cinema-e-dvd.gif);
	position : absolute;
	left : 0;
	top : 0;
	display : block;
}
#topo h2.terra a,
#topo h2.cinema a{
		display : block;i
		height : 31px;
		float : left;
		width : 300px;
		text-indent : -500px;
		overflow : hidden;
}
#topo h2.terra a{
	width : 100px;
		overflow : hidden;
}
h1{
	width : 819px;
	height : 68px;
	display : block;
	z-index : 0;
	background-image : url(img/watchmen-h1.gif);
	position : absolute;
	left : 0;
	top : 54px;

}
h1 a{
	display : block;
	width : 350px;
	height : 68px;
	float : left;
	text-indent : -5000px;
	overflow : hidden;
}
/*menu*/
#menu{
	position : absolute;
	left : 370px;
	top : 54px;
	z-index : 2;
}
#menu h2{
	float : left;
}
#menu h2 a{
	display : block;
	height : 68px;
	text-indent : -5000px;	background-position : 0 -68px;
	overflow : hidden;
}

#menu h2 a:hover{
	background-position : 0 0;
}
#menu h2.mn1 a{background-image : url(img/watchmen-a-historia2.gif);width : 78px;}
#menu h2.mn2 a{background-image : url(img/watchmen-videos2.gif);width : 58px;}
#menu h2.mn3 a{background-image : url(img/watchmen-fotos2.gif);	width : 52px;}
#menu h2.mn4 a{background-image : url(img/watchmen-personagens2.gif);	width : 97px;}
#menu h2.mn5 a{background-image : url(img/watchmen-os-autores2.gif);	width : 78px;}
#menu h2.mn6 a{background-image : url(img/watchmen-o-filme2.gif);	width : 62px;}

#conteudo{
	position : absolute;
}
#conteudo h2{
	background-color : #fff601;
	height : 38px;
	display : block;
	text-indent : -6000px;
	float : left;
}
#texto{
	position : absolute;
	left : 0;
	top : 40px;
	z-index : 2;
}
#texto p{
	font-size : 13px;
	margin : 12px;
	line-height : 16px;
}
#texto h3{
	color : #fff601;
	margin : 12px;
	font-size : 18px;
}
#quadro{
	border: 1px solid #fff601;
	background-color : #000;
	position : absolute;
	-moz-opacity:.70;
	filter:alpha(opacity=70);
	opacity:.70;
	top : 40px;
	left : 0;
}
#paginacao{
	position : absolute;
	width : 90px;
	height : 25px;
	z-index : 6;
}
#paginacao a,
#paginacao span{
	float : left;
	width : 20px;
	height : 20px;
	display : block;
	margin : 1px;
	font-weight : bold;
	font-size : 14px;
	text-align : center;
	line-height : 20px;
}
#paginacao a{
	background-color:	#fff601;
	color : #000;
	border : 1px solid #000;
}
#paginacao a:hover,
#paginacao span{
	background-color:	#000;
	color : #fff;
	border : 1px solid #fff601;
}
#paginacao a:hover{
	color : #fff601;
}
#ilustracao{
	float : left;
	margin : 10px 17px 20px 17px;
	background-color : #fff;
	border : 2px solid #fff;
	padding : 2px;
	color : #000;
	font-size : 10px;
}
#conteudo #texto p.continua a{
	background-image : url(img/continua.gif);
	display : block;
	width: 130px;
	height : 30px;
	float : right;
	margin : 6px 12px 0 12px;
	text-indent : -5000px;
	overflow : hidden;
}
#conteudo #texto p.continua a:hover{
	background-position : 0 -30px;	
}
/*capa*/
#capa #conteudo{	width : 500px; left : 160px ; top : 240px;}
#capa #conteudo h2{	background-image : url(img/watchmen-o-filme-h2.gif); width : 500px;}
#capa #conteudo #quadro{width : 498px; height : 200px; left : 0}
#capa #ilustracao{	display : none;}
/*historia*/
#historia #conteudo{	width : 619px;	left : 100px; top : 160px;}
#historia #conteudo h2{	background-image : url(img/watchmen-a-historia-como-nasceu-h2.gif); width : 619px;}
#historia #conteudo #quadro{width : 617px; height : 400px;}
#historia #conteudo #paginacao{top: 446px; left : 540px;}
#historia h2.mn1 a{	background-position : 0 0;}
#historia #ilustracao{}
/*videos*/
#videos #conteudo{	width : 700px;	left : 50px; top : 160px;}
#videos #conteudo h2{	background-image : url(img/videos-h2.gif); width : 700px;}
#videos #conteudo #video1 #quadro{width : 698px; height : 160px;}
#videos #conteudo #video6 #quadro,
#videos #conteudo #video5 #quadro,
#videos #conteudo #video4 #quadro,
#videos #conteudo #video3 #quadro,
#videos #conteudo #video2 #quadro{width : 125px; height : 152px; top: 0;}
#videos #conteudo #video2{	left : 0; top: 230px; position : absolute;}
#videos #conteudo #video3{	left : 142px; top: 230px; position : absolute;}
#videos #conteudo #video4{	left : 284px; top: 230px; position : absolute;}
#videos #conteudo #video5{	left : 426px; top: 230px; position : absolute;}
#videos #conteudo #video6{	left : 568px; top: 230px; position : absolute;}
#videos #conteudo a h3{
	clear : both;
	color : #fff601;
	font-size : 14px;
}
#videos #conteudo #video1{
	position : absolute;
	left : 0;
	top : 1px;
}
#videos #conteudo #video1 a,
#videos #conteudo #video2 a,
#videos #conteudo #video3 a,
#videos #conteudo #video4 a,
#videos #conteudo #video5 a,
#videos #conteudo #video6 a{
	width : 123px;
	height : 150px;
	display : block;
	z-index : 11;
	position : absolute;
	left : 0;
	top : 0;
	color : #fff;
	font-size : 12px;
	overflow : hidden;
	margin : 4px;
}
#videos #conteudo #video1 a {
	width : 696px;
	height : 158px;
	display:block;
	left : 1px;
	top : 42px;
}
#videos #conteudo #video1 a img,
#videos #conteudo #video2 a img,
#videos #conteudo #video3 a img,
#videos #conteudo #video4 a img,
#videos #conteudo #video5 a img,
#videos #conteudo #video6 a img{
	margin : 0 0 5px 0;
	border : 1px solid #000;
}
#videos #conteudo #video1 a:hover img,
#videos #conteudo #video2 a:hover img,
#videos #conteudo #video3 a:hover img,
#videos #conteudo #video4 a:hover img,
#videos #conteudo #video5 a:hover img,
#videos #conteudo #video6 a:hover img{
	border : 1px solid #fff601;
}
#videos #conteudo #video1 a span.play,
#videos #conteudo #video2 a span.play,
#videos #conteudo #video3 a span.play,
#videos #conteudo #video4 a span.play,
#videos #conteudo #video5 a span.play,
#videos #conteudo #video6 a span.play{	display : none;}
#videos #conteudo #video1 a:hover span.play,
#videos #conteudo #video2 a:hover span.play,
#videos #conteudo #video3 a:hover span.play,
#videos #conteudo #video4 a:hover span.play,
#videos #conteudo #video5 a:hover span.play,
#videos #conteudo #video6 a:hover span.play{
	display : block;
	background-image : url(https://img.terra.com.br/i/noticias/aovivo/play.gif);
	position : absolute;
	left : 40px;
	top : 25px;
	z-index : 21;
	display : block;
	width : 40px;
	height : 30px;
	-moz-opacity:.75;
	filter:alpha(opacity=75);
	opacity:.75;
	border : none;
}
#videos #conteudo #video1 a:hover span.play{	left : 100px;	top : 65px;}
#videos #conteudo #video1 a:hover,
#videos #conteudo #video2 a:hover,
#videos #conteudo #video3 a:hover,
#videos #conteudo #video4 a:hover,
#videos #conteudo #video5 a:hover,
#videos #conteudo #video6 a:hover{	color : #fff601;}
#videos #conteudo #video1 a p,
#videos #conteudo #video1 a h3{
	position : absolute;
	z-index : 12;
	left : 260px;
	top: 50px;
}
#videos #conteudo #video1 a h3{	top : 25px;}

#videos #conteudo #video1 a img{
	float : left;
	margin : 5px 10px 5px 5px;
	clear : none;
	width : 240px;
}
#videos #conteudo #paginacao{top: 300px; left : 200px;}
#videos h2.mn2 a{	background-position : 0 0;}
/*fotos*/
#fotos #conteudo{	width : 802px;	left : 10px;top : 130px;}
#fotos #conteudo h2{	background-image : url(img/fotos-h2.gif); width : 802px;}
#fotos #conteudo #quadro{width : 800px; height : 404px;}
#fotos h2.mn3 a{	background-position : 0 0;}
#fotos #conteudo #thumbs,
#fotos #conteudo #thumbs ul{
	width : 802px;
	height : 70px;
}
#fotos #conteudo #thumbs{	position : absolute;	left : 0;	top : 448px;}
#fotos #conteudo #thumbs li{	width : 66px;	height : 60px;	float : left;	margin : 0 0 0 0;}
#fotos #conteudo #thumbs li a{
	border : 1px solid #000;
	height : 56px;
	width : 60px;
	display : block;
	margin : 2px;
}
#fotos #conteudo #foto{
	z-index : 7;
	position : absolute;
	left : 3px;
	top : 43px;
	text-align : center;
	width : 798px;
	height : 400px;
}
#fotos #conteudo #thumbs li a:hover{	border : 1px solid #fff601;}
#fotos #conteudo #thumbs li span{
	border : 3px solid #fff601;
	display : block;
	height : 56px;
	width : 60px;
	display : block;
	margin : 0;
}
#fotos #conteudo #foto a #legenda{	display : none;}
#fotos #conteudo #foto a:hover #legenda{
	display : block;
	height : 42px;
	padding-top : 5px;
	font-size : 11px;
	position : absolute;
	z-index : 10;
	background-color : #000;
	-moz-opacity:.70;
	filter:alpha(opacity=70);
	opacity:.70;
	color : #fff;
	font-weight : normal;
	width : 798px;
	top : 355px;
	left : 0;
}
/*personagens*/
#personagens #conteudo{	width : 700px;	left : 50px;top : 150px;}
#personagens #conteudo h2{	background-image : url(img/personagens-h2.gif); width : 700px; }
#personagens #conteudo #quadro{width : 698px; height : 400px;}
#personagens #conteudo #paginacao{top: 300px; left : 200px;}
#personagens h2.mn4 a{	background-position : 0 0;}
#personagens #conteudo #personagens_menu{
	z-index : 10;
	width : 750px;
	height : 550px;
	position : absolute;
	top : 41px;
	left : 0;	
}
#personagens #personagens_ficha p{
	font-size : 14px;
}
#personagens p a.voltar{
	color : #fff601;
	font-weight : bold;
	margin : 10px  0 0 0;
	padding : 8px 0;
	line-height : 26px;
}
#personagens p a:hover.voltar{
	color : #fff;
}
#personagens.pers6 #conteudo h2,
#personagens.pers5 #conteudo h2,
#personagens.pers4 #conteudo h2,
#personagens.pers3 #conteudo h2,
#personagens.pers2 #conteudo h2,
#personagens.pers1 #conteudo h2{	display : none;}
#personagens.pers1{	background-image : url(img/rorschach2.jpg); background-position : 0 120px;}

#personagens.pers1 #personagens_ficha{
	width : 250px;
	height : 400px;
	position : absolute;
	left : 150px;
	top:100px;
}
#personagens.pers2 #personagens_ficha{
	width : 180px;
	height : 420px;
	position : absolute;
	left : 450px;
	top:140px;
}
#personagens.pers3 #personagens_ficha{
	width : 190px;
	height : 420px;
	position : absolute;
	left : 400px;
	top:100px;
}
#personagens.pers4 #personagens_ficha{
	width :200px;
	height : 420px;
	position : absolute;
	left : 160px;
	top:140px;
}
#personagens.pers5 #personagens_ficha{
	width : 200px;
	height : 400px;
	position : absolute;
	left : 370px;
	top:150px;
}
#personagens.pers6 #personagens_ficha{
	width : 180px;
	height : 420px;
	position : absolute;
	left : 70px;
	top:100px;
}
#personagens.pers1{	background-image : url(img/rorschach2.jpg); background-position : 0 120px;}
#personagens.pers2{	background-image : url(img/ozymandias.jpg); background-position : 0 120px;}
#personagens.pers3{	background-image : url(img/dr-manhatan.jpg); background-position : 0 140px;}
#personagens.pers4{	background-image : url(img/coruja2.jpg); background-position : 0 140px;}
#personagens.pers5{	background-image : url(img/espectra2.jpg); background-position : 0 150px;}
#personagens.pers6{	background-image : url(img/comediante.jpg); background-position : 0 120px;}
/*autor*/
#autor #conteudo{	width : 619px;	left : 100px;top : 160px;}
#autor #conteudo h2{	background-image : url(img/os-autores-h2.gif); width : 619px;}
#autor #conteudo #quadro{width : 617px; height : 400px;}
#autor #conteudo #paginacao{top: 446px; left : 540px;}
#autor h2.mn5 a{	background-position : 0 0;}

#autor #conteudo #submenu{
	position : absolute;
	left : 150px;
	top : 0;
	z-index : 20;
}
#autor #conteudo #submenu h2,
#autor #conteudo #submenu h2 a{
	display : block;
	width : 110px;
	float : left;
	height : 38px;
	background-image : none;
	background-color : transparent;
}
#autor #conteudo #submenu h2 a{
	background-image : url(img/autores.gif);
	overflow : hidden;
	text-indent : -5000px;
}
#autor #conteudo #submenu h2.autor1 a{	background-position : 0 -40px;}
#autor #conteudo #submenu h2.autor2 a{background-position : -115px 0;}
#autor.dave #conteudo #submenu h2.autor2 a{background-position : -115px -40px;}
#autor.dave #conteudo #submenu h2.autor1 a{	background-position : 0 0;}

/*o filme*/
#filme #conteudo{	width : 619px;	left : 100px;top : 160px;}
#filme #conteudo h2{	background-image : url(img/o-filme-h2.gif); width : 619px;}
#filme #conteudo #quadro{width : 617px; height : 400px;}
#filme #conteudo #paginacao{top: 446px; left : 515px; width : 115px;}
#filme h2.mn6 a{	background-position : 0 0;}