/* Mantenido por: chr5 para colaborative.org
   fecha origen: 13 10 2007
   fecha actualización: 16 10 2008
   mail: chr5mails@gmail.com
   
   */
   
   /* Hoja de estilo para colaborative.org system */
  
  _* {
  	margin:0;
  	padding: 0;
  }
  
  body  {
  	font: small/1.5em sans-serif;
  	margin:0;
  	padding:0;
  	background-color: #fff;
	background: #fff url(../img/back_grey.png) top left repeat-x;
  	}
	
* html body {  /* Controla tamaño en el body para IE */
	font: small/1.5em sans-serif;
}


/* Layout - Estructura general */

  #container {
   width: 100%;  /* IE */
   font-size: 1.2em;
  /* float: left;*/ /* para que contenga todo */
  	margin:0;
  	padding: 0;
  /*	height: 500px;*/
   }

  #header {
  	padding: 0; /*0 5%;*/
  	margin:0;
  	/*background: #f5f5f5 url(../img/back_blue.png) top left repeat-x;*/
  	/*border-bottom: 1px solid #fff;*/
  	float: left;
  	width: 100%; /* 90%;*/
	/*border-bottom: 1px solid #999;*/  /* temporal  */ 
  }
  
  h1#logo {
  	float: left;
	padding: 1% 0 1% 5%; 
  	/*width: 90%;*/
  	margin: 0;
  	background: url(../img/colaborative_logo_.png) 0 40% no-repeat;
  }
  
  body#index h1#logo {
  padding: 1% 0 1% 5%; 
  }
  
  h1#logo a {
  	text-decoration: none;
  	color: #444;
	font-size: .9em;
  }
  
  h1#logo a:hover {
   color: #333;
   text-decoration: underline;
  }
  
  span#subtitle {
  	width: 100%;
  	padding: 1% 5% 1% 0;
  	margin: 0;
  	font: bold 1em/1.5em verdana, sans-serif;
  	color:  #3f6496;
  }
  
  span#nickusuario {
  	font-size:bold 1em/2em verdana, sans-serif;
  	color: #3f6496;
  	margin: 0;
  }
  
  span#nickproyecto {
  	font-size:bold 1em/2em verdana, sans-serif;
  	color: #3f6496;
  	margin: 0;
  }
  
  #logo {
  
  }
  
  /* cb_menuconfig */
  
  div.cb_menuuser {
  	float: left;
	margin-left: 1%;
  }
  
  div.cb_menuconfig {
  	float: right;
  }
  
  div.cb_menuaccess {
  	float: right;
  }
  
  
  /* listas de menú */
  
  ul.menubasic {
   margin: 0;
   padding: 4% 0;
  }
  
  ul.menubasic li {
 	 float: left;
 	 margin-right: 10px;
	 list-style-type: none;
  }
  
  ul.menubasic a {
    font-size: .9em;
  	 /*font-weight: bold;*/
     color: #2c63ae;
  	 margin:0; 
  	 padding: 10px 0;
	 text-decoration: none;
  }
  ul.menubasic a:hover {
  	 text-decoration: underline;
  }
 
 
 /* Estilo para opciones de acceso */
 
 div#acceso {
  float: left;
  width: 95%;
  margin: 0;
  padding: 0 5% 0 0;
 }
 
 div#acceso ul  {
 float: right;
 border: 0;
 padding: 5px 0;
 margin: 0;
 list-style-type: none;
 }
 
 div#acceso li {
 font-size: .9em;
 float: left;
 margin-right: 10px;
 }
 
  div#acceso a {
  color: #2c63ae;
  margin:0; 
  padding: 10px 0;
 }
  
/* Estilos para el mainmenu - Menú principal */
    
  #mainmenu {
  	float: left;
  	width: 100%;
  	padding: 0;
  	margin: 0;
  }
  
   #mainmenu ul {
   display: none; 
   width: 100%;
  	/*border: 1px solid red;*/
  	list-style-type: none;
  	padding: 0;
  	margin: 0;
  /*	background: #fff url(../img/backbutton_blue.png) top left repeat-x;*/  /* Sólo de momento */
  	float: left;
  	padding-left: 5%;
  }

  #mainmenu  li { 
    float: left;
  }
  
  #mainmenu a {
  display: block;
  padding: 0 1em;
  border-left: 1px solid #fff;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  }
  
  #mainmenu a:hover {
  background-color: #222;
  color: #fff;
  }
  
  /* Contenido             */
  
  #container1 {  /* Contiene a contenido real + container 2 */
  float: left;
  width: 90%;
  background: #fff /*url(../img/back_grey.png) top left repeat-x*/;
  padding: 0 5%;
  }
  
  #contenido {
  width: 75%;
  float: left;
  padding: 1% 0 0;
  }
  
  #container2 {
  float: left;
  width: 20%;
  padding: 0;
  margin: 1% 0 0 1%;
  }
  
  #container2 h3 {
  	font-size: 110%;
	line-height: 130%;
	font-weight: bold;
	padding: 0;
	margin: 0;
  }
  
  /* box */
  
 .box { 
  /* float: left;*/
  border: 1px solid #999;
  width: 100%;
  min-height: 200px;
  padding: 0;
  margin-left: 0;
  margin-bottom: 5px;
  background: url(../img/back_grey.png) top left repeat-x;
  }

  /* Helpbox  caja de ayuda */
  
  .boxheader {
     	position: relative;
     	border: 0;
     	margin: 0;
     	padding: 0 0 0 0;
     	/* float: left;*/
     	clear: right;
     	width: 100%;
     	height: 40px;
     	background-color: #ccc;
  }
  
  .close {
     	width: 25px;
     	display: block;
     	position: absolute;
     	right: 1%;
     	top: 20%;
  }
  
  #helpbox {
     	padding: 20px;
     	/*float: right;   */
     	background: #f5f5f5 url(../img/back_blue.png) top left repeat-x;
   }
  
    /* Estilos para el loginbox- Caja de acceso */
  
  #loginbox {
 /* border: 3px solid blue;*/
  /*float: right; */
  padding: 20px;
  background: #f5f5f5 url(../img/back_blue.png) top left repeat-x;
  width: 50%;
  margin: 0 5%;
  
  }
  
  /* Databox - es la caja base que enmarca cada uno de los apartados en la plataforma */
  
   .databox { 
  /* float: left;*/
  border: 1px solid #999;
  width: 100%;
  min-height: 200px;
  padding: 0;
  margin-left: 0;
  margin-bottom: 5px;
  background: url(../img/back_grey.png) top left repeat-x;
  float: left;
  }
  
  /* Estilos para el Footer - Pie de página */
  
  #footer {
    float: left;
    width: 75%;
  	margin: 0 0 0 4%;
  	clear: both;
  }
  
  #footer ul {
  /*	float: left; */ /* Necesario para que contenga a los hijos flotantes */
  	list-style-type: none;
  	width: 100%;
  	padding: 0;
  	margin: 0;

  }
    
  #footer li {
  float: left;
  margin: 0;
  padding: 0;
  }
  
  #footer a {
  font-size: 0.9em;
  display: block;
  float: left;
  padding: 0 10px;  /*  padding: 0 10px; */
  line-height: 1em;
  text-decoration: underline;
  color:  #2c63ae;
  }
  
  #footer a.first {
   padding: 0;
  }
  
  #footer a:hover {
  background-color: #fff;
  color: #000;
  text-decoration: none;
 }
 
 /* footer usuario */
 
 ul#footer_usermenu {
	margin: 0;
	padding: 1% 0;
	float: right;
 }
 
 /* div request */
 
 div#request {
 	
 		width: 85%;
 		margin: 0 auto;
 		padding: 1% 10% 1% 0;
 		float: left;
 }
 
 #request h1, #request h2, #request h3, #request h4, #request p {
 
 		padding: 2%;

 }
 
 
   #request h4  {
 
   	float: left; 
   	display: block;
   	width: 50px;
   	height: 100px;
   	text-align: center;
} 		

 
    h4.arquitecto, h4.grafico, h4.maquetador, h4.programador {
 			
  		   width: 0px;
			height: 100px;
 
 }
  
    h4.arquitecto {	
  			
  			background:#fff url(../img/icon_iarchitect.png) top left no-repeat;

  }
  
    h4.grafico {	
  			
  			background:#fff url(../img/icon_graphic.png) top left no-repeat;

  }
  
  
    h4.maquetador {	

  			background:#fff url(../img/icon_developer.png) top left no-repeat;

  }
  
  
    h4.programador {	
  			
  			background:#fff url(../img/icon_developer.png) top left no-repeat;

  }
  
  
  
  
  /* Formato de párrafo y texto */
  
  p, h1, h2, h3, h4 {
  padding:  0 2% 0 6%;
  }
  
  h1 {
  	color:  #444;
  	font-size: 1.4em;  /*Temporalmente para diseño usuario logueado */
  	}
  
  h2 {
  color: #b03a34;
  margin: 4% 0 3% 0;
  padding: 0;
  font:bold 2em/1.2em sans-serif;
  }
  
  #layout_user h2 {  /* para todas las páginas con usuarios logueados */
  	font-size: 14px;
	color: #333333;
	font-weight: bold;
	margin: 0;
	padding: 1em 0;
	font-family: Arial, verdana, sans-serif;
  }
  
  h2.first {
  margin-top: 0;
  }
  
  h3 {
  color:  #3f6496; 
  margin: 0;
  padding: 1% 6% 0 6%;
  /*border: 1px solid yellow;*/
  font-size: 1.5em;
  }
  
  .databox h3 {
  	padding: 2% 1%;
  }
  
  h4 { 
  color: #4b8be3; 
  margin: 0;
  padding: 1% 6% 0 6%;
  font-size: 1.2em;
  }
  
  .databox h4 {
   padding: 1% 1%; 
  }
  
  p {
  color: #222;
  font-size: 1em;
  margin: 0.8% 0 2% 0;
 /* border: 1px solid red;*/
  }
  
  /* Espacios */
  
  /* listas */
  
  
  ul.contenido {
  	padding: 0 8%;
  	list-style-type: square;
  	
  }
  
  ul.contenido li {
  	margin: 1% 0;
  }
  
  ul.contenido a  {
  	text-decoration: underline;
	color:  #4b8be3/*#2c63ae*/;
	/*font-weight: bold;*/
  }


/* Tabla de proyectos */

table#proyectos {
    width: 100%;
	border-collapse: collapse;
	margin: 0 6%;
	border: 1px solid #222;
}

table#proyectos th, table#proyectos td {

	padding: 0.8em 1em;
	margin: 0%;
	border: 1px solid #222;

}
  
  
/* Estilo formulario basico */

div.form_basico {
	margin: 0;
	padding: 0;
}  

fieldset {
	border: 0 transparent;
}

form {
	margin: 0;
	padding: 0;
}

legend {
	display: block;
	font:bold 1.5em/1.2em sans-serif;
	margin: 0;
	padding: 1% 6%;
	color: #3f6496;
}

label {
	display: block;
	width: 100%;
    margin: 0;
    padding: 1% 0 0 0;
    font-size: 1.2em;
    color:  #4b8be3;
}

input {
	display: block;
	width: 100%;
	font-size: 1.5em;
	border: 1px solid  #4b8be3;
	color: #444;
	background-color: #ddd;
	margin: 1% 0 20px 0;

}

 .boton {
   float: right;
   width: auto;
   font-size: 1.5em;
   background-color:  #4b8be3;
   color: #fff;
}

body#login h2 {

		padding: 40px 0 40px 80px;
		background: url(../img/icon_adduser.png) no-repeat 0 50% ;
}


/* Estilos nuevos para las cajas de usuarios ordenaar en la hoja de estilos */

div.usuarios {
	border: 1x solid #ccc;
}

dl {
	border: 1px solid #3f6496; 
	float: left;
	margin: 5px;
	padding: 1%;
	width: 15em;
}

dt { /* Nombre de usuario */
	font-size: 120%;
	font-weight: bold;
	color:  #3f6496;
	/*float: left;*/
	margin: 1% 0 5% 0;
}

 .useroption {
	font-size: 80%;
}

dd.img  {
	float: left;
	margin: 0;
	padding: 0;
}

dd.img img { /* imagen */
	float: left;
	margin: 0 5px 5px 0;
}

dd { /* Estadísticas del usuario */
	color: #222; 
	font-size: 90%;
	font-weight: bold;
	
}



/* Diseño de caja lista de difinicion con icono para proyecto */

dl.dlproject {
 	background: url(../img/icon_project_02.png) no-repeat 5% 5%;
 	padding-left: 45px;
 	margin: 5px;
}

dl.dlproject dt img {
	float: left; margin: 0;
}

dl.dlproject dd {
	padding: 0;
	margin: 0;
}


dl.dluser {
	border: 0;	
}

dl.dluser dd {
	margin: 0;
}

dl.dlinvestor {

}

/* Clases generica para introducir el icono correspondiente en las cabeceras */

.iconbasic {

}


.iconuser {

}

.databox .iconproject {
	background: url(../img/icon_project.png) no-repeat 1% 1%;
	padding-left: 60px;
	padding-bottom: 50px;
}

.iconinvestor {

}


/* Información general para toda la plantilla */

/* Colores usados:

  Párrafo y texto en general: #222; 
  H4: #4b8be3;  
  H3: #3f6496; 
  H2: #b03a34; 
  H1: #444;
	
	*/
	
	
	/* mensajes de advertencia */
	
	.msg_advertencia_basic {
		color: #006600;
		border: 1px solid #ccc;
		padding: 1em;
		background-color:#fff;
		font-size: .9em;
	}
	
/* Nombre de clases e identificadores usados hasta ahora en el proyecto */

/*

   Diseño para los dos menús superiores del home de usuario
   
    * class: UL menubasic  - da estilo genérico a los menús del header
	* id: UL footerusermenu - identifica el tipo de lista
	
    * class: DIV cb_menuuser - Menú opciones de usuarios en el header
	* class: DIV cb_menuconfig - Menú opciones de configuración en el header
	* class: DIV cb_menuaccess - Menú de acceso, loguear, nuevo usuario, etc.. 
   
	* nickusuario: span id,  contenido: chr5, Antonx, etc;
	* useroption: dd class, contenido: cerrar, añadir,etc; 

   Diseño de tres cajas mínimas para las listas de definicion:
   * class: dlbasic;
   * class: dluser;
   * class: dlproject;
   * class: dl	investor;


  * Iconos que acompañan las cabeceras de los boxdata 
  * class: iconbasic  ;
  * class: iconproject ;
  * class: iconuser ;
  * class: iconinvestor ;
  
  Mensaje de advertencia al usuario
  
  * class: msg_advertencia_basic ;
  
  Layouts
  * BODY ID home - Identifica estilos generales para el HOME
  * BODY ID layout_user - Identifica las plantillas con diseño de paginas de usuarios logueados.
  
*/
	
	