/* 
** flowertree - default stylesheet
** This CSS file makes the website look pretty ;-)
** 
** Nov 18, 2006 - (version 1.0)
** 
** This is a part of the open source layout by 
** Jonas John (www.jonasjohn.de) !
*/
/* page overall: 
-----------------------------------------------------------*/
body,div,p,img,form,h1,h2,h3,h4,h5,h6 {
	margin: 0;
	padding: 0;
	border: 0;
}

ul {
	padding-left: 2em;
}

body {
	/* BG-Color: */
	background-color: #000000;
	text-align: center;
	margin-top: 1%;
	background-image: url(../images/pattern.png);
}

.page {
	/* Page width: */
	width: 75%;
}
.oculto {
	display: none;
}
#logo {
	margin: 0 59% 1em 15%;
	/*background-image: url(../images/logo.png);*/
	height: 137px;
	width: 300px;
}

#contentbox {
	background-color: #FFFFFF;
	margin: 0 auto;
	text-align: left;
}
/* menu: 
-----------------------------------------------------------*/
#menu {
	margin: 0 auto;
	text-align: center;
	color: #b3a18f;
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	letter-spacing: 1px;
	margin-top: 0.3em;
}

#menu a:link, #menu a:visited {
	color: #b3a18f;
	text-decoration: none;
}

#menu a:hover, #menu a:active {
	color: #C43917;
	text-decoration: none;
}

#padding {
	padding: 0.5em;
}

#innerpage {
	background-image: url("../images/background1.jpg");
	background-repeat: no-repeat;
	background-color: transparent; /*#eed5b3*/
	padding: 0;
	height: 22em;
}
#loading  {
	background-color: #eed5b3;
   background-image: url("../images/indicator.gif");
	background-position: 33% center;
	background-repeat: no-repeat;
}
/*
 Styles that apply to the  content area:
-----------------------------------------------------------*/
#content {
	background-color: #fff;
	filter: Alpha(opacity=70);
	opacity: .7;
	float: right;
	width: 19.2em;
	height: 27.5em;
	padding: 0em;
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	letter-spacing: 1px;
	overflow: auto;
	position: relative;
	color: #333;
	background-image: url(images/logoagua.png) no-repeat;
}
img.agua {
	filter: Alpha(opacity=40);
	opacity: .4;
	float: right;
	height: 158px;
	width: 19px;
	margin: 194px 0 0 0;
	cursor: pointer;
}
.estacion {
font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	height: 12px;
	padding: 0;
	margin: 2px 0 0 2px;
	text-align: center;
	color: #000;
}
.estacion a {
	font-weight: normal;
}
.estacion a:hover {
	color: #713537;
}
#content p {
	font-size: 1.1em;
	margin: 0 1em 0 1em;
}
small {
	margin: 0 1em 0 1em;
}
/* gallery 
-----------------------------------------------------------*/
.gallery {
	margin: 0.8em 0 0 0;
	padding: 0;
	overflow: hidden; /* Clears the floats */
	width: 100%; /* IE and older Opera fix for clearing, they need a dimension */
	list-style: none;
}
.gallery li {
	float: left;
	display: inline; /* For IE so it doesn't double the 1% left margin */
	width: 25%;
	margin: 6px 7px 10px 10px;
	padding: 0;
	height: 50px; /* Height of img (55) + 2 times 3px padding + 2 times 2px border = 65px */
	position: relative; /* This is the key */
}
.gallery a,
.gallery img {
	display: block;
	/*width: 100%;*/
}
a img {
	/* A small fix */
	border: none;
}
.gallery a:link,
.gallery a:visited,
.gallery a:focus,
.gallery a:hover,
.gallery a:active {
	padding: 3px;
	background: #713537;
	width: 40px;
	height: 40px;
	border: 2px solid #713537; /* We blend the border with the bg, as if it isn't there */
	position: absolute;
	top: 50%;
	left: 50%; /* position it so that image's top left corner is in the center of the list item */
	margin: -31px 0 0 -21px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
}
.gallery a:hover {
	border-color: #fff;
}


/* heading 
-----------------------------------------------------------*/
#content h1 {
	font-size: 1.7em;
	margin: 0.5em 0 0.2em 0.5em;
	color: #2F090F;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 0.3em;
	font-weight: normal;
}

/* link colors 
-----------------------------------------------------------*/
#content a:link {
	color: #2F090F;
}

#content a:hover, #content a:active {
	color: #33201D;
}

#content a:visited {
	color: #555;
}

/* forms 
-----------------------------------------------------------*/
form {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	margin: 14px 0 0 0;
	width: 240px;
	height: 190px;
	padding: 0;
	color: #555;
}

.fieldset {
	width: 240px;
	border: none;
	margin: 0;
	padding: 0;
}

.fieldset label {
	text-align: right;
	width: 65px;
	float: left;
	margin: 0.3em 0 0 0;
}

.fieldset .nobr {
	display: none;
}
  
.fieldset .textfield {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	margin: 3px 0 3px 3px;
	height: 15px;
	width: 160px;
	border: solid 1px #ddd;
}
.textarea:focus, .textfield:focus {
	background-color: #ede3d5;
}

.fieldset .textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	margin: 3px 0 3px 3px;
	height: 125px;
	width: 160px;
	border: solid 1px #ddd;
}

.submit {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	margin: 3px;
	height: 20px;
	border: solid 1px #ddd;
	width: 80px;
	cursor: pointer;
}

/*- Menu Tabs G--------------------------- http://exploding-boy.com/images/cssmenus/menus.html */
	
    #tabsG {
	   position: relative;
		float: right;
	   width: 39em;
      background: transparent;
      font-size:93%;
      line-height:normal;
		font: bold 11px/1.5em Verdana;
		margin: -2.7em -7.4em 0 0;
      }
    #tabsG ul {
	  margin:0;
	  padding:10px 10px 0 20px;
	  list-style:none;
      }
    #tabsG li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsG a {
      float:left;
      background:url("../images/tableftG.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsG a span {
      float:left;
      display:block;
      background:url("../images/tabrightG.gif") no-repeat right top;
      padding:2px 15px 2px 6px;
      color:#713537;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsG a span {float:none;}
    /* End IE5-Mac hack */
    #tabsG a:hover span {
      color:#2f090f;
		padding:0px 15px 4px 6px;
		
      }
    #tabsG a:hover {
      background-position:0% -42px;
		
      }
    #tabsG a:hover span {
      background-position:100% -42px;
      } 
	/* --- */
	
	#bbles {
		position: absolute;
		top: 50px;
		left: 100px;
		display: block;
		z-index: 0;
	}