@import "reset.css";



/*

CORES

GLOBAIS

HEADER

  MENUS

WRAPPER

CONTENT

SIDEBAR

FOOTER

PAGINA index

PAGINA interna

PAGINA associe-se

PAGINA carteira nacional

PAGINA cidade

PAGINA hostels

  PORTO ALEGRE

  RIO GRANDE DO SUL

  BRASIL

  MUNDO

PAGINA reservas

PAGINA vantagens

*/



/* CORES

texto 			#444

fundo body		#b3e4ff

fundo header	#01406a

links 			#0e669f

links visited	#054169

links hover		#ff8124

titulos 		#0e669f

laranja			#ff8124

*/



/******************************

* GLOBAIS

******************************/

body {

	font:62.5%/1.5em Arial, Helvetica, sans-serif normal normal;

	color:#444;

	background:#b3e4ff url(../img/body_bg.gif) 0 0

}



strong, b {font-weight:700}

em, i {font-style:italic}



a:link {color:#0d669f}

a:visited {color:#0d669f}

a:hover {color:#ff8124}



#page {background:url(../img/page_bg.jpg) repeat-x 0 130px} /* só depois do header */



#conceitual {padding:0 0 20px 15px}



/******************************

* HEADER

******************************/

#header {

	background:#01406a url(../img/header_bg.jpg);

	height:170px

}

#header-wrap {

	width:780px;

	margin:0 auto;

	position:relative

}



#header h1 a {

	background:url(../img/header_titulo.png) no-repeat 0 10px;

	width:280px;

	height:118px; /* +10 = ------^^---------(+)----------^^ */

	text-indent:-9999px;

	display:block;

}



/* MENUS

***************/

#menu-hostels {

	position:absolute;

	top:16px;

	left:346px

}

#menu-hostels a {

	height:17px;

	display:block;

	text-indent:-9999px;

	margin-bottom:3px;

	width:182px

}

#menu-hostels a:hover, #menu-acoes a:hover {background-position:0 100%}

#menu-hostels .porto-alegre {background:url(../img/menu_hostels_poa.png) no-repeat}

#menu-hostels .rio-grande {background:url(../img/menu_hostels_rs.png) no-repeat}

#menu-hostels .brasil {background:url(../img/menu_hostels_brasil.png) no-repeat}

#menu-hostels .mundo {background:url(../img/menu_hostels_mundo.png) no-repeat}

#menu-hostels .mundo2 {background:url(../img/menu_hostels_mundo2.png) no-repeat;;height:22px;}

#menu-hostels a:hover.mundo2, {background-position:0 85%;height:22px;}

#menu-acoes {

	position:absolute;

	top:140px;

	left:-10px;

	width:920px;

}

#menu-acoes li {float:left; margin-left:3px}

#menu-acoes a {

	height:41px;

	display:block;

	text-indent:-9999px;

	float:left;

}

#menu-acoes .associe {background:url(../img/menu_acoes_associe.png) no-repeat; width:91px}

#menu-acoes .reservas {background:url(../img/menu_acoes_reservas.png) no-repeat; width:82px}

#menu-acoes .fotos {background:url(../img/menu_acoes_fotos.png) no-repeat; width:82px}

#menu-acoes .contato {background:url(../img/menu_acoes_contato.png) no-repeat; width:82px}

#menu-acoes .sobre {background:url(../img/menu_acoes_sobre.png) no-repeat; width:82px}

#menu-acoes .hosp {background:url(../img/menu_acoes_hosp.png) no-repeat; width:82px}

#menu-acoes .not {background:url(../img/menu_acoes_NOT.png) no-repeat; width:82px}

#menu-acoes .men {background:url(../img/menu_acoes_m2.png) no-repeat; width:82px}

#menu-acoes .staff {background:url(../img/menu_acoes_staff.png) no-repeat; width:82px}

#menu-acoes .sol {background:url(../img/menu_acoes_sol.png) no-repeat; width:82px}

/******************************

* WRAPPER

******************************/

#wrapper-topo {

	background:url(../img/wrapper_topo_bg.gif) no-repeat;

	width:780px;

	margin:25px auto 0;

	height:15px

}

#wrapper {

	background:#fff;

	width:780px;

	margin:0 auto;

	overflow:hidden

}



/******************************

* CONTENT

******************************/

#content {

	float:right;

	width:554px;

	padding:0 15px 0 16px

}

#content p {

	font-size:1.2em;

	line-height:150%;

	margin-bottom:1em

}



/******************************

* SIDEBAR

******************************/

#sidebar {

	background:url(../img/sidebar_bg.gif) repeat-y 100% 0;

	float:left;

	width:180px;

	padding-left:15px

}

#sidebar h2, #hostels-lista .porto-alegre a, #hostels-lista .rio-grande a, #hostels-lista .brasil a, #hostels-lista .mundo a {

	background:url(../img/hostels_titulo.gif) no-repeat;

	text-indent:-9999px;

	width:97px;

	height:12px;

	display:block;

	margin:15px 0 3px

}

#sidebar h2 {width:48px; height:14px; margin:0 0 10px}



#hostels-lista .porto-alegre a {background-image:url(../img/hostel_poa_titulo.gif); height:14px}

#hostels-lista .rio-grande a {background-image:url(../img/hostel_rs_titulo.gif)}

#hostels-lista .brasil a {background-image:url(../img/hostel_brasil_titulo.gif)}

#hostels-lista .mundo a {background-image:url(../img/hostel_mundo_titulo.gif)}



/******************************

* FOOTER

******************************/

#footer {

	background:url(../img/footer_topo_bg.gif) no-repeat;

	width:780px;

	margin:0 auto;

	padding:25px 0 20px;

	text-align:center;

	font-size:1.2em

}



/******************************

* PAGINA: index

******************************/

#selo-100-anos {float:right; margin:0 0 15px 20px}

#conceitual-extra {margin:30px 0 15px}

#conceitual-associe {margin-right:30px}



/******************************

* PAGINA: interna

******************************/

.interna #pagina-titulo {

	text-indent:-9999px;

	width:100%;

	height:17px;

	padding-bottom:3px;

	border-bottom:1px solid #ff8124;

	margin-bottom:20px

}

.interna #content h3 {

	font-weight:700;

	color:#0e669f;

	font-size:1.4em;

	margin:15px 0 2px

}

.interna #content h4 {

	font-weight:700;

	font-size:1.2em;

	margin:15px 0 2px

}

.interna #content ul {margin-bottom:1em}

.interna #content li {

	font-size:1.2em;

	background:url(../img/lista_item_bg.gif) no-repeat 0 .6em;

	padding-left:.7em;

	line-height:150%;

	margin-bottom:.6em

}

.interna #content #voltar a {

	background:url(../img/voltar_btn.gif)	no-repeat;

	text-indent:-9999px;

	width:43px;

	height:19px;

	display:block;

	margin:20px 0 10px

}



/******************************

* PAGINA: associe-se

******************************/

#associe-se #pagina-titulo {background:url(../img/associe-se_titulo.gif) no-repeat}





/******************************

* PAGINA: carteira nacional

******************************/

#carteira-nacional #pagina-titulo {background:url(../img/carteira_nacional_titulo.gif) no-repeat}



/******************************

* PAGINA: cidade

******************************/

#cidade #pagina-titulo {background:url(../img/cidade_titulo.gif) no-repeat}



#cidade #content h3 {margin-bottom:15px}



/******************************

* PAGINA: hostels

******************************/

#hostels-rs #content .hostel-nome,

#hostels-brasil #content .hostel-nome {

	font-size:0.8em;

	background:url(../img/hostels_hostel_ico.gif) no-repeat 0% 50%;

	padding-left:15px

}



/* PORTO ALEGRE

***************/

#hostels-poa #pagina-titulo, #hostel-poa #pagina-titulo {background:url(../img/poa_hostels_titulo.gif) no-repeat; height:21px}



/* RIO GRANDE DO SUL

***************/

#hostels-rs #pagina-titulo, #hostel-rs #pagina-titulo {background:url(../img/rs_hostels_titulo.gif) no-repeat}



/* BRASIL

***************/

#hostels-brasil #pagina-titulo, #hostel-brasil #pagina-titulo {background:url(../img/brasil_hostels_titulo.gif) no-repeat}

#hostels-brasil #content .estado-igual {background:none; padding-left:34px}



/* MUNDO

***************/

#hostels-mundo #pagina-titulo, #hostel-mundo #pagina-titulo {background:url(../img/mundo_hostels_titulo.gif) no-repeat}

#hostels-mundo #content a {font-size:12px; line-height:1.6}



/******************************

* PAGINA: reservas

******************************/

#reservas #pagina-titulo {background:url(../img/reservas_titulo.gif) no-repeat}



/******************************

* PAGINA: vantagens

******************************/

#vantagens #pagina-titulo {background:url(../img/vantagens_titulo.gif) no-repeat; height:21px}









/* exemplos */



/******************************

* TITULO 1

******************************/



/* TITULO 2

***************/





/*** TITULO 3 ***/

h2.hh{font-weight:bolder; font-size:12px;}


#menu-hostels1 {

	position:absolute;

	top:16px;

	left:556px

}

#menu-hostels1 a {


	display:block;

	margin-bottom:3px;

	padding:3px;
	
	font-size:12px;
	position:relative;
	float:left;
	color:#FFF;
	text-decoration:none;
	margin-top:50px;

}

#menu-hostels1 a:hover{background-color:#F60}