@charset "UTF-8";
/* CSS Document */

body{
	background: #EFF0EA url(../image/UFF_background.jpeg) no-repeat 50% 0;
	margin-bottom: 0; 
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	font-family: "Trebuchet MS";  
	text-align: justify;
	
	}
	img {border:none;}

/* ************************************************* DIV ************************************************ */		
	#header{ background-image: url(../image/backUp.jpg); background-repeat: repeat-x; width: 100%; height: 130px;}
	#header_in{ background-image: url(../image/backUp_header.png); background-repeat: no-repeat; margin: 0 auto; width: 960px; height: 130px;}
	
	#wrap{ width: 960px; height:auto; margin:0 auto; margin-top:10px; min-height:400px; margin-bottom: 15px; padding-bottom: 10px;}
	#main_left{ width: 185px; min-height: 600px; height: 100%; float: left; }
	
	#image_small{ width: 52px; height: auto; float: left;}
	#name_main{ width: 130px; height: auto; float: right;}
	#main_right{ width: 770px; min-height: 600px; height: 100%; float: right; border-left: 1px solid #448e9d;}
	
	#footer{background-image: url(../image/watertexture_xtile.png); background-repeat: repeat-x; width:100%; height:168px;}
	#fish_footer{background-image: url(../image/fish.png); background-repeat: repeat-x; width:300px; height:142px; float:right;}
	#menuAll{ width: 100%; height: 34px; background-image: url(../image/backmenu.jpg); background-repeat: repeat-x;}
	#cont_menu{width: 960px; height: 100%; margin: 0 auto;}
	#header_up_right{ width: 405px; height: 41px; float: right; background-image: url(../image/back_header.png); background-repeat: no-repeat; padding-left: 12px; color: white; line-height: 12px; padding-top: 3px; text-align: center;}
	#boxHeader_comment{ width:94px; height: 32px; margin-left: 15px; float: left;}
	#boxHeader_message{ width: 94px; height: 32px; float: left;}
	#boxHeader_user{ width: 140px; height: 45px; float: left;}
	#boxHeader_logout{width: 56px; height: 32px; float: left;}
	#logoHeader{ width: 193px; height: 117px; float: left; background-image: url(../image/logo_header.png); background-repeat: no-repeat;}
	#register{ width: 310px; height: 300px; float: left; margin-left:10px;}
	#boton_register{width:280px; height: 430px; background-image: url(../image/login_boton.png); background-repeat: no-repeat; float: left;}
	#login{width: 300px; height: 240px; float: left; padding-top: 25px;}
	#footerIndex{ width:960px; height:630px; margin:0 auto;}
	
	#box_icons{ width:340px; height:900px; float:right; background-color:#286d78; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
	#box_icons2{ width:220px; height:550px; float:right; }
	
	
	#box_text2{ width:520px; float:left; height:1190px; margin-left:5px;}
	#footer_link{ width: 280px; height: 110px; margin: 0 auto;}

#box_text2 h1 {
	color:#3f8196;
	font-size:25px;
	text-transform: uppercase;
	font-weight:bold;
	letter-spacing:-0.01em;
	text-align: center;
}

#box_text2 h2 {
color:#3f8196;
font-size:20px;
letter-spacing:-0.01em;
text-transform: uppercase;
font-weight:bolder;
margin:0;
text-align: center;
}

#box_text2 h3{
color:#444343;
font-size:16px;
letter-spacing:-0.01em;
text-transform: uppercase;
font-weight:bolder;
margin:0;
text-align: center;
}

	
	
	#colum_main1{ width:270px; height:auto; float:left; }
	#colum_main2{ width:473px; height:auto; float:left;}
	#box_text{ width:415px; height:auto; margin:0 auto; font-size:15px;}
	#colum_main3{ width:201px; height:auto; float:left; text-align:center;}
	#box_icons_in{ width:189px; height:597px; background-image:url(../image/iconMain2.png); background-repeat:no-repeat;}
	
	
	#profile{width: 98%; height: auto; margin: 0 auto;}
	#imageProfile{ width:400px; height:auto; margin:0 auto;}
	#imageCrop{ width:60px; height:auto; float: left;}
	#fishLogo{ width: 100%; height: 228px; margin: 0 auto; background-image: url('../image/logo_urban.png'); background-repeat: no-repeat;}
	#plantProgress{width: 95%; height: auto; margin: 0 auto;}
	
	/*#selectImage{ width:450px; height:450px; float:left;}*/
	#selectAction{ width:150px; height:250px; float:right;}
	
	
	
	
	
	



hr {
color: #3f8196;
display: block;
-webkit-margin-before: 0.1em;
-webkit-margin-after: 2em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
 }



/* ************************************************* Class ************************************************ */	
.clear{clear:both;}
.form_all{width:100%; height:auto; margin: 0 auto; padding-left: 10px;}
.view_system{width:56%; height:auto; float:left; padding-left:10px; border-right: 1px solid #cdcaca;}
.view_crop{width:42%; height:auto; float:right;}
.view_crop_pict{ width:50px; height:auto; float:left; padding-right: 5px;}

.text_form{ width:180px; height:35px; float:left;}
.box_form{ width:260px; height: 35px; float: left;}
.box_full_message{ width: 450px; height: 150px; float: left;}

.box_crop{ width:350px; height: 25px; float: left; padding-left: 2px; padding-right: 2px; text-align: left;  border-bottom: 1px solid #cdcaca;}
.box_crop2{ width:160px; height: 25px; float: left; padding-left: 2px; padding-right: 2px; text-align: left;  border-bottom: 1px solid #cdcaca;}
.box_crop3{ width:210px; height: 25px; float: left; padding-left: 2px; padding-right: 2px; text-align: left;  border-bottom: 1px solid #cdcaca;}
.box_form_full{ width:700px; height: 35px; float: left;}
.box_form_full2{ width:700px; height: auto; float: left; padding-bottom: 10px;}
.msjs{ font-size:9px; color:#FF0000;}
.boxlogin{ width: 49%; height: auto; float: left;}
.boxlogin2{ width: 25%; height: auto; float: left;}
.boxRegister{ width: 49%; height: auto; float: left;}
.text_full{ width: 98%; height: auto; float: left;}
.text_middle{ width: 30%; height: auto; float: left;}

.view_sys_prof{ width: 100%; height: 70px; border-bottom: 1px solid #cdcaca; }
.view_sys_user{ width: 90%; height: auto; float: right; padding-top: 15px;}

.view_message{ width: 100%; height: 60px; border-bottom: 1px solid #cdcaca;}
.view_message_photo{ width: 70px; height: 50px; float: left;}
.view_message_cont{ width: 630px; height: 50px; float: left; margin-top: 10px;}
.view_message_date{ width: 120px; height: 40px; float: right;}
.view_message_access{ width: 125px; height: 40px; float: right;}


.read_message{ width: 100%; height: auto; margin-bottom: 5px; }
.read_message_photo{ width: 70px; height: 50px; float: left;}
.read_name{ width: 200px; height: auto; float: left;}
.read_message_cont{ width: 630px; height: auto; float: left; margin-bottom: 10px;}
.read_message_date{ width: 120px; height: auto; float: right;}
.read_comment{ width: 90%; height: 200px; float: right; }


.question_cont{ width: 100%; height: auto; margin: 0 auto;}
.question_photo{ width: 70px; height: 50px; float: left;}
.question{ width: 395px; height: auto; float: left;}
.question_date{ width: 120px; height: auto; float: right;}
.question_name{ width: 150px; height: auto; float: left;}


.answer_cont{ width: 90%; height: auto; float: right; border-left: 1px solid #cdcaca; padding-left: 5px;}
.answer_photo{ width: 70px; height: 50px; float: right;}
.answer{ width: 90%; height: auto; float: left;}
.answer_date{ width: 120px; height: auto; float: right;}
.answer_name{ width: 150px; height: auto; float: left;}


.contentPerfil{ width: 780px; min-height: 100px; height: auto; margin: 0 auto; border-bottom: 1px solid #c9cac3; padding-top:2px;}
.contentPhoto{ width: 55px; float: left; height: 75px;}
.contentData{width: 710px; float: left; height: auto; padding-left:10px}
.contentName{ width: 710px; float: left; height: auto;}
.contentSystem{ width: 100px; float: left; height: auto;}
.contentDate{width: 80px; float: right; height: auto;}
.contentDescription{ width: 710px; float: left; height: auto;}	
.profile{ width: 250px; height: auto; float: left;}
.pict_profile{ width: 70px; height: auto; float: right;}
.viewMore{ width:690px; height:25px; float:right; padding-top: 2px; text-decoration:none;}


.box_question1{ width: 470px; height: auto; float: left;}
.box_question2{ width: 470px; height: 600px; float: right;}

.BotonesMembers{ width: 250px; height: 40px; float: right;}

.pictureCrop{ width: 85%; height: auto; overflow-y: auto; margin-top: 15px; margin-bottom: 15px; margin-left: 15px; float: right;}


.photoAll{ width:98%; height:auto; float:right;}
.photoIndividual{ width:100px; height:100px; border:1px solid #cdcaca; float:left; padding:1px 1px 1px 1px; font-size:11px; color:#3f8196; text-align:center;}
.photoCont{ width:100%; height:50px; margin:0 auto;}
.photoSingle{ width:200px; height:200px; float:left; border:2px solid #246471; margin:0 auto; margin-left:3px; text-align:center; background-color:#fafbf6; display:block; position:relative; overflow:hidden; margin-bottom:3px;}
.photoSingle2{ width:100px; height:100px; float:left; border:2px solid #246471; margin:0 auto; margin-left:3px; text-align:center; background-color:#fafbf6; display:block; position:relative; overflow:hidden; margin-bottom:3px;}
.dataInfo{ width:265px; height:300px; overflow-y: auto; float:left; margin-left:5px;}
.graphAll{ width:500px; height:300px; float:left;}
.graphContent{ width:100%; height:335px; margin:0 auto;}
.boxGraph1{ width:60px; height:25px; border:1px solid #cdcaca; float:left;font-size:12px;}
.boxGraph2{ width:115px; height:25px; border:1px solid #cdcaca; float:left; font-size:12px;}
.grap_y{ width:125px; float:left; color:#3f8196;}
.grap_x{ width:500px; float:left; color:#3f8196; text-align:center;}
.box_tools{ width:350px; height:45px; float:left;}

.viewAdminProfile{ width: 500px; height: 450px; margin: 0 auto; padding: 10px 10px 10px 10px;}

.toSlide{ width:800px; height:auto; margin:0 auto;}
.toSlideCont{ width:600px; height:60px; border: solid 1px #e7e3dc; margin-bottom:1px;}
.toSlideNum{ width:35px; height:60px; float:left;}
.toSlideStatus{ width:230px; height:60px; float:left;}
.toSlideImage{ width:50px; height:50px; overflow:hidden; float:left; border: solid 1px #e7e3dc; margin-right:10px; }
.toSlideLink{ width:200px; height:50px; float:left;}

	
/* ************************************************* Font ************************************************ */		
	
h1 {
	color:#3f8196;
	font-size:25px;
	text-transform: uppercase;
	font-weight:bold;
	letter-spacing:-0.01em;
	text-align: left;
}

h2 {
color:#3f8196;
font-size:20px;
letter-spacing:-0.01em;
text-transform: uppercase;
font-weight:bolder;
margin:0;
text-align: left;
}

h3{
color:#444343;
font-size:14px;
letter-spacing:-0.01em;
text-transform: uppercase;
font-weight:bolder;
margin:0;
text-align: left;
}

h4 {
	color:#3f8196;
	margin-left: 10px;
}



span.header{color:#fff; text-align:justify; font-size:12px;}
span.headerBold{color:#fff; text-align:justify; font-size:12px;}
span.nameMain{ color: #3f8196; font-size: 12px; font-weight: bold;}
span.titleSystem{ color: #3f8196; font-size: 12px; font-weight: bold;}
span.bodySystem{ color: #000000; font-size: 12px;}
span.content{ color: #000000; font-size: 11px;}
span.nameSystem{color:#91413b; font-size: 13px; font-weight: bold;}
span.Description{color:#444343; font-size: 12px; }
span.date{color:#3f8397; font-size: 10px; font-weight: bold;}
span.footerIndex{color:#3f8196; font-size: 16px; font-weight: bold;}
span { font-family: "Trebuchet MS"; font-style:normal; text-align:justify;}


A:link, A:visited { text-decoration: none; color: #444343;}
A:hover { text-decoration: none; color:#3f8196; }

	
/* ************************************************* Form ************************************************ */	
	
	
	
.input{
    padding: 2px;
	border: solid 1px #E5E5E5;
	outline: 0;
	font: normal 13px/100% "Trebuchet MS";
	width: 220px;
	background: #FFFFFF url('bg_form.png') left top repeat-x;
	background: -webkit-gradient(linear, left top, left 25, from(#fff), color-stop(4%, #fff), to(#fff));
	background: -moz-linear-gradient(top, #FFFFFF, #fff 1px, #FFFFFF 25px);
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	}
	
	.inputHome{
    padding: 2px;
	color:#ffffff;
	border: solid 1px #286d78;
	outline: 0;
	font: normal 13px/100% "Trebuchet MS";
	width: 220px;
	background: #286d78 url('bg_form.png') left top repeat-x;
	background: -webkit-gradient(linear, left top, left 25, from(#286d78), color-stop(4%, #286d78), to(#286d78));
	background: -moz-linear-gradient(top, #286d78, #286d78 1px, #286d78 25px);
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	}
	
	.input_large{
    padding: 2px;
	border: solid 1px #E5E5E5;
	outline: 0;
	font: normal 13px/100% "Trebuchet MS";
	height: 25px;
	width: 660px;
	background: #FFFFFF url('bg_form.png') left top repeat-x;
	background: -webkit-gradient(linear, left top, left 25, from(#fff), color-stop(4%, #fff), to(#fff));
	background: -moz-linear-gradient(top, #FFFFFF, #fff 1px, #FFFFFF 25px);
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	}



.input:hover, textarea:hover,
.input:focus, textarea:focus { 
	border-color: #C9C9C9; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	}
	
	
	.inputHome:hover, textarea:hover,
.inputHome:focus, textarea:focus { 
	border-color: #C9C9C9; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	}
	
	.input_large:hover, textarea:hover,
.input_large:focus, textarea:focus { 
	border-color: #C9C9C9; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	}

.form label { 
	margin-left: 10px; 
	color: #999999; 
	}

.submit input {
	width: auto;
	padding: 9px 15px;
	background: #3f8196;
	border: 0;
	font-size: 14px;
	color: #FFFFFF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}
	
	.clean input {
	width: auto;
	padding: 9px 15px;
	background: #75b738;
	border: 0;
	font-size: 14px;
	color: #FFFFFF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}