/* estrutura geral */

body {
margin:0;
padding:0;
background-color:#9274a2;
font: 10pt "trebuchet MS", Verdana, Arial ;
}

#geral {
width: 775px;
margin: 0 auto 0 auto;
}

/* cabecalhos e rodapes */
#cabecalho{
padding-left:0;
padding-right:0px;
padding-top:6px;
padding-bottom:0px;
margin-bottom:0px;
background: url('img/css_cabecalho.gif') no-repeat top left;
}

#cabecalhoesquerda{
width:625px;
float:left;
}


#cabecalhodireita{
width:140px;
text-align:center;
padding-right:10px;
float:right;
}


#rodape{
height:75px;
width:675px;
background-color:#8b6b9c;
background: url('img/css_rodape.gif') no-repeat top;
font: 10pt "trebuchet MS", Verdana, Arial ;
color:#FFFFFF;
text-align:left;
padding-left:100px;
padding-top:5px;
}

#rodapeesquerda{
width:400px;
padding-top:4px;
float:left;
}


#rodapedireita{
width:250px;
border:1;
float:right;
text-align:right;
}

#submenu{
width:625px;
height:35px;

}

#cachorros{
width:625px;
height:371px;
padding:0px;
padding-top:4px;
}


.filhotes{
width:240px;
height:300px;
padding:13px;
margin-right:20px;
margin-bottom:20px;
background-image:url(img/back_ninhada.jpg);
border:2px solid #FFFFFF;
float:left;
}

.ninhada{
width:240px;
height:300px;
padding:13px;
margin-right:20px;
margin-bottom:20px;
background-image:url(img/back_filhotes.jpg);
border:2px solid #FFFFFF;
float:left;
}


h3{
text-align:center;
}


/* conteudo */
#titulo{
width:295px;
padding-top:10px;
}


#conteudo{
width:775px;
margin: 0 auto 0 auto;
padding:0;
background: #f9c704;
}

#textos{
width:600px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
float:left;
}

#menu{
width:155px;
float:right;
margin-top:30px;
}

/* formatacao de tags */
.limpardivs {
clear:both;
}

a{	
	font-weight:bolder;
	color:#61168a;
	text-decoration:none;
	}
a:visited{
	font-weight:bolder;
	text-decoration:none;
	color:#61168a;}
	
a:hover{
	font-weight:bolder;
	color:#61168a;
	text-decoration:underline;
	}
	
a.branco{	
	font-weight:bolder;
	color:#ffffff;
	text-decoration:none;
	}
a.branco:visited{
	font-weight:bolder;
	color:#ffffff;
	text-decoration:none;
		}
	
a.branco:hover{
	font-weight:bolder;
	color:#ffffff;
	text-decoration: underline;
			}
			
a.dialetica{	
	font-weight:bolder;
	color:#bf9ccf;
	text-decoration:none;
	font: 8pt "trebuchet MS", Verdana, Arial ;
	}
a.dialetica:visited{
	font-weight:bolder;
	color:#bf9ccf;
	text-decoration:none;
		font: 8pt "trebuchet MS", Verdana, Arial ;
		}
	
a.dialetica:hover{
	font-weight:bolder;
	color:#bf9ccf;
	text-decoration: underline;
		font: 8pt "trebuchet MS", Verdana, Arial ;
			}

.padraopreto{
font: 10pt "trebuchet MS", Verdana, Arial ;
color:#000000;
text-align:left;
}

.padraobranco{
font: 10pt "trebuchet MS", Verdana, Arial ;
color:#ffffff;
text-align:left;
}

.subbranco{
font: 8pt "trebuchet MS", Verdana, Arial ;
color:#ffffff;
text-align:left;
}

.subpreto{
font: 8pt "trebuchet MS", Verdana, Arial ;
color:#000000;
}

.botao{
background-color:#8b6b9c;
color:#ffffff;
border:1px solid #ffffff;
font-size:8pt;
font-family:"trebuchet MS", Verdana, Arial;
text-align:center;
font-weight:bold;
}

.inputtext{
background-color:#b2e665;
color:#000000;
border:1px solid #ffffff;
font-size:8pt;
font-family:"trebuchet MS", Verdana, Arial;
}




#photoverde{
width:282px; 
height:237px;
padding-top:15px; 
text-align:center;
background-image: url(img/photo_verde.gif);
background-position:top left;
background-repeat:no-repeat;
border:0;
font-size:8pt;
font-weight:bold;
font-family:"trebuchet MS", Verdana, Arial;
line-height:35px;
float:left;
}

#photorosa{
width:282px; 
height:237px;
padding-top:15px; 
text-align:center;
background-image: url(img/photo_rosa.gif);
background-position:top left;
background-repeat:no-repeat;
border:0;
font-size:8pt;
font-weight:bold;
font-family:"trebuchet MS", Verdana, Arial;
line-height:35px;
float:left;
}

#photociano{
width:282px; 
height:237px;
padding-top:15px; 
text-align:center;
background-image: url(img/photo_ciano.gif);
background-position:top left;
background-repeat:no-repeat;
border:0;
font-size:8pt;
font-weight:bold;
font-family:"trebuchet MS", Verdana, Arial;
line-height:35px;
float:left;
}

#photovermelho{
width:282px; 
height:237px;
padding-top:15px; 
text-align:center;
background-image: url(img/photo_vermelho.gif);
background-position:top left;
background-repeat:no-repeat;
border:0;
font-size:8pt;
font-weight:bold;
font-family:"trebuchet MS", Verdana, Arial;
line-height:35px;
float:left;
}

#photoroxo{
width:282px; 
height:237px;
padding-top:15px; 
text-align:center;
background-image: url(img/photo_roxo.gif);
background-position:top left;
background-repeat:no-repeat;
border:0;
font-size:8pt;
font-weight:bold;
font-family:"trebuchet MS", Verdana, Arial;
line-height:35px;
float:left;
}

#photolaranja{
width:282px; 
height:237px;
padding-top:15px; 
text-align:center;
background-image: url(img/photo_laranja.gif);
background-position:top left;
background-repeat:no-repeat;
border:0;
font-size:8pt;
font-weight:bold;
font-family:"trebuchet MS", Verdana, Arial;
line-height:35px;
float:left;
}

#photoazul{
width:282px; 
height:237px;
padding-top:15px; 
text-align:center;
background-image: url(img/photo_azul.gif);
background-position:top left;
background-repeat:no-repeat;
border:0;
font-size:8pt;
font-weight:bold;
font-family:"trebuchet MS", Verdana, Arial;
line-height:35px;
float:left;
}


#album{ /* div que abriga todas as divs */
width:580px; 
height:390px; 
margin:0 auto;			
padding: 0 auto;
background:#66FF99;
background-image: url(img/album.gif);
}

#fotos{ /* div onde vao aparecer as fotos */
float:left;
padding-top:30px;
padding-left:18px;
}

#legenda{ /* div onde vai aparecer a legenda das fotos - muda as fotos - muda texto da legenda */
width:470px;
font-size:8pt;
font-weight:bold;
font-family:"trebuchet MS", Verdana, Arial;
text-align:left;
margin-top:15px;
margin-left:30px;
}

#contador{ /* div onde vai aparecer o contador das fotos - muda as fotos - muda texto da legenda */
width:100px;
height:100px;
background:#71b40f;
padding-top:30px;
font-size:8pt;
color:#FFFFFF;
font-family:"trebuchet MS", Verdana, Arial;
}

#nave{ /* aqui dentro outras duas divs - navegação para próxima foto e foto anterior */
width:107px;
height:315px;
float:left;
text-align:center;
margin-top:30px;
margin-left:13px;
}

#anterior{
width:100px;
height:100px;
background:#71b40f;
text-align:center;
}

#proxima {
width:100px;
height:80px;
background:#71b40f;
text-align:center;
}