@charset "utf-8";

/* --------------------------------------------------------------
 * Filename:	basic.css
 * Description:	Regras das estruturas básicas do site.
 * Version:		1.0.0 (2010-04-22) YYYY-MM-DD
 * Website:		http://www.campingchapeudesol.com.br/
 *
 * == STRUCTURE =================================================
 * 
 * Page width: 800px  static, vertical centralized
 *
 * $__globals	Definicoes de estilos a elementos globais
 * $__header	
 * $__menu	
 * $__shadow	
 * $__footer	
 * -------------------------------------------------------------- */
 
/* $__globals
 * --------------------------------------------------------------------*/
 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, pre, blockquote,  
br, hr, a, abbr, acronym, address, code, 
del, dfn, em, img, q, dl, dd, ol, ul, li, 
table, caption, tbody, thead, tfoot, tr, th, td,
form, fieldset, label, legend, input, select, embed {
	margin:0;
	padding:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

body {
	background: url(images/bckgrd-page.jpg) top center no-repeat #1E0D03;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	text-align:center;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
  content: "\0020";
  display: block; 
  height: 0; 
  clear: both;
  visibility: hidden;
  overflow:hidden;
}

.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }

.displaypic {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
}

#site_wrapper {
	background: url(images/bckgrd-site.png) no-repeat;
	height: 600px;
	margin: 0 auto;
	position: relative;
	width: 800px;
}



/* $__brand
 * --------------------------------------------------------------------*/
#brand {
	background: url(images/logo.png) no-repeat;
	height: 236px;
	left: 101px;
	position: absolute;
	top: 156px;
	width: 242px;
	z-index: 10;
}

#banner_wrapper {
	left: 0;
	position: absolute;
	top: 0;
	z-index: 1;
}



/* $__content
 * --------------------------------------------------------------------*/
.content {
	height: 320px;
	margin: 0 60px 0 60px;
	position: relative;
	text-align: left;
	top: 242px;
	width: 679px;
}

.column-01, .column-02 {
	display: block;
	float: left;
	width: 49.7%;
}

.column-02 { float: right; }

.column-01 h2, .column-02 h2 { color#808285; font-size: 1.4em; font-weight: bold; margin: 3px 0 8px 0; }
.column-01 p, .column-02 p { color: #808285; font-size: 1.1em; }
.column-01 ul, .column-02 ul { color: #808285; font-size: 1.1em; margin: 5px 0 20px 35px; }
.column-01 ul li, .column-02 ul li { margin: 0 0 8px 0; }

.scroll-pane { height: 250px; margin: 0 8px 0 0; overflow: auto; }


/** Home **/
#page-home .column-01 { border-right: 1px solid #C5C5C5; margin: 50px 0 0 0; padding: 105px 0 0 0; }
#page-home .icon { float: left; margin: 0 10px 20px -23px; }
#page-home .column-01 p, #page-home .column-02 p { margin: 15px 8px 0 0; }
#page-home .column-02 p { margin: 15px 10px 0 10px; }
#page-home .column-02 a { color: #808285; font-weight: bold; text-decoration: none; }
#page-home .column-02 a:hover { text-decoration: underline; }
#page-home  .ico-protur { float: left; margin: 0 10px 10px 10px; }

/** Sobre, Eventos, Detalhes **/
#page-sobre .column-01,
#page-eventos .column-01 { margin: 50px 0 0 0; padding: 35px 0 0 0; }
#page-detalhes .column-01 { margin: 50px 0 0 0; padding: 0 0 0 0; }
#page-sobre .column-02 p, 
#page-eventos .column-02 p,
#page-detalhes .column-02 p { margin: 0px 0 15px 10px; }

#page-sobre .icon { margin: 0 10px 20px 10px; }
#page-eventos .icon { margin: 20px 10px 20px -18px; }
#page-detalhes .icon { margin: 0px 10px 20px 5px; }
#page-localizacao .icon { margin: 150px 10px 0 10px; }

#page-eventos .column-02 ul { margin: 5px 10px 10px 20px; }
#page-eventos .column-02 ul li { list-style: none; margin: 0 0 5px 0; }
#page-eventos .column-02 ul li a { color: #0E3C7E; font-size: 1.2em; font-weight: bold; text-decoration: none; }
#page-eventos .column-02 ul li a:hover { text-decoration: underline; }

#page-detalhes .column-02 ul { margin: 5px 10px 10px 20px; }
#page-detalhes .column-02 ul li { background: url(images/bullet.png) no-repeat; color: #808285; list-style: none; margin: 0 0 5px 0; padding: 5px 0 5px 30px; }
#page-detalhes .column-02 ul li a { color: #0E3C7E; font-size: 1.2em; font-weight: bold; text-decoration: none; }
#page-detalhes .column-02 ul li a:hover { text-decoration: underline; }

#page-detalhes a { color: #0E3C7E; font-weight: bold; text-decoration: none; }
#page-detalhes a:hover { text-decoration: underline; }

#page-localizacao img#caneta { position: absolute; left:245px; top:20px; z-index: 10; }

/** Infra **/
#page-infra { background: url(../../images/foto-infra.jpg) no-repeat; }

/** Preços **/
#page-precos { background: url(../../images/foto-precos.jpg) 0 -1px no-repeat; }
#frmReserva td { padding: 3px 2px; }
#frmReserva fieldset { border:0; margin: 3px 0 0 0; }
#frmReserva legend { font-size:1.3em; font-weight: bold; color: #7F7F81; padding-left: 0; margin-left: -5px; }
#frmReserva label { font-size:1.1em; font-weight: bold; color: #7F7F81; }
#frmReserva input[type="text"], #frmContato select { border: 1px solid #818181; padding: 2px; font-size: 1.2em; }
#frmReserva input[type="text"] { width: 100px; }
#frmReserva input[type="submit"] { background: url(../../images/button_reservar.jpg); border: 0; height: 22px; width: 132px; }

/** Contato **/
#page-contato .column-01 { margin: 50px 0 0 0; padding: 100px 0 0 0; }
#page-contato .column-02 p { margin: 0 0 15px 10px; }
#page-contato .icon { float: left; margin: 0 0 0 60px; }


#frmContato th { width: 70px; }
#frmContato td { padding: 2px 0; }
#frmContato label { font-weight: bold; color: #006500; }
#frmContato input[type="text"], #frmContato textarea { background: #98CB66; border: 2px solid #006500; width: 240px; padding: 2px; font-size: 1.2em; }
#frmContato .buttons { padding: 5px 0 0 70px; }
#frmContato .buttons input { background: none; border: 1px solid #006500; margin: 0 5px 0 0; }


/* $__subtitles
 * --------------------------------------------------------------------*/
.subtitulo { margin: 10px 0 0 10px; }
.subtitles { background: url(images/subtitles.png) no-repeat; width: 300px; }

.bem-vindo { background-position: 0 0; height: 20px; margin: 0 0 9px 30px; }
.notas { background-position: 0 -60px; height: 16px; margin: 15px 0 9px 10px; }
.protur { background-position: 0 -30px; height: 16px; margin: 15px 0 9px 10px; }

.sobre { background-position: 0 -140px; height: 54px; margin: 0px 0 9px 0px; }
.eventos { background-position: 0 -200px; height: 54px; margin: 0px 0 9px 0px; }
.infra { background-position: 0 -260px; height: 54px; margin: 0px 0 9px 0px; }
.detalhes { background-position: 0 -320px; height: 54px; margin: 0px 0 9px 0px; }
.localizacao { background-position: 0 -380px; height: 54px; margin: 0px 0 9px 0px; }
.precos { background-position: 0 -440px; height: 54px; margin: 0px 0 9px 0px; }
.contato { background-position: 0 -80px; height: 54px; margin: 0px 0 9px 0px; }


/* $__mneu
 * --------------------------------------------------------------------*/

#menu {
	background: url(images/menu-nav.png) no-repeat;
	height: 45px;
	left: 0;
	position: absolute;
	top: 0;
	width: 800px;
	z-index: 5;
}

.menu-nav li {
	display: inline-block;
	float: left;
	height: 35px;
	list-style: none;
}

.menu-nav li a {
	background: url(images/menu-nav.png) no-repeat;
	display: block;
	height: 100%;
	width: 100%;
}

.menu-nav li.mnu-home { margin: 0 28px 0 165px; width: 52px; }
.menu-nav li.mnu-estrutura { margin: 0 32px 0 0; width: 66px; }
.menu-nav li.mnu-precos { margin: 0 28px 0 0; width: 56px; }
.menu-nav li.mnu-localizacao { margin: 0 32px 0 0; width: 85px; }
.menu-nav li.mnu-contato { margin: 0 28px 0 0; width: 67px; }

.menu-nav li.mnu-home a { background-position: -165px 0; }
.menu-nav li.mnu-home a:hover, .menu-nav li.mnu-home a.selected { background-position: -165px -45px; }
.menu-nav li.mnu-estrutura a { background-position: -245px 0; }
.menu-nav li.mnu-estrutura a:hover, .menu-nav li.mnu-estrutura a.selected { background-position: -245px -45px; }
.menu-nav li.mnu-precos a { background-position: -343px 0; }
.menu-nav li.mnu-precos a:hover, .menu-nav li.mnu-precos a.selected { background-position: -343px -45px; }
.menu-nav li.mnu-localizacao a { background-position: -427px 0; }
.menu-nav li.mnu-localizacao a:hover, .menu-nav li.mnu-localizacao a.selected { background-position: -427px -45px; }
.menu-nav li.mnu-contato a { background-position: -544px 0; }
.menu-nav li.mnu-contato a:hover, .menu-nav li.mnu-contato a.selected { background-position: -544px -45px; }

.menu-nav .submenu-div {
	background: url(images/submenu.png) no-repeat;
	display: none;
	left: -18px;
	position: relative;
	top: 0;
	width: 101px;
	z-index: 999;
}

.submenu-div li {
	display: block;
	float:none;
	height: 28px;
	list-style: none;
	margin: 0;
	width: 101px;
}

.submenu-div li a {
	background: url(images/submenu.png) no-repeat;
	display: block;
	height: 100%;
	width: 100%;
}

.submenu-div li.mnu-sobre { margin: 2px 0 0 0; }
.submenu-div li.mnu-detalhes { margin: 0 0 2px 0; }

.submenu-div li.mnu-sobre a { background-position: 0 -2px; }
.submenu-div li.mnu-sobre a:hover { background-position: -103px -2px; }
.submenu-div li.mnu-eventos a { background-position: 0 -30px; }
.submenu-div li.mnu-eventos a:hover { background-position: -103px -30px; }
.submenu-div li.mnu-infra a { background-position: 0 -58px; }
.submenu-div li.mnu-infra a:hover { background-position: -103px -58px; }
.submenu-div li.mnu-detalhes a { background-position: 0 -86px; }
.submenu-div li.mnu-detalhes a:hover { background-position: -103px -86px; }
 

/* $__footer
 * --------------------------------------------------------------------*/
 
#footer {
	bottom: 10px;
	color: #573814;
	height: 16px;
	left: 60px;
	position: absolute;
	width: 680px;
}

#footer p.copyrights {
	float: left;
	margin: 0 10px;
	text-align: left;
	width: 35%;
}

#footer p.credits {
	float: right;
	margin: 0 10px;
	text-align: right;
	width: 35%;
}

#footer p.credits a { color: #573814; text-decoration: none; }
#footer p.credits a:hover { text-decoration: underline; }



/* $__scrollpane
 * --------------------------------------------------------------------*/
 
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #D5D5D5;
}
.jScrollPaneDrag {
	position: absolute;
	background: #10532A;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}

a.jScrollArrowUp:hover { /*background-color: #f60;*/ }

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover { /*background-color: #f60;*/ }
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { /*background-color: #f00;*/ }