/*  Hoja de estilos de www.civilfem.com
	--------------------------------------------------------------------------------------------
	
	Siguiendo el modelo de dividir presentación y contenidos, esta hoja de estilos está
	pensada para ser la fuente de todas los documentos de www.civilfem.com.
	
	Se ha optado por tener sólo una hoja de estilos, con funciones para todas los documentos,
	si bien cada documento, no usará todas sus funciones. De esta forma, se ahorrará la carga
	en el tráfico de nuestro servidor, cargando cada usuario una sóla css, y evitaremos redun-
	dancia en la repetición de reglas.
	--------------------------------------------------------------------------------------------
												   Departamento de Informática/ Ingeciber 2007

*/

/*  Esta es la estructura principal de la página, después del la regla BODY. Es el contenedor de 
	todas las capas */
	
.page-container {
	width:950px;
	margin:0px;
	margin-top:0px;
	margin-bottom:0px;
	left: 0px;
	border-top: 0px none;
	border-right: 0px none;
	border-bottom: 0px none;
	border-left: 0px none;
	background-color: #FDFDFD;
	top: 0px;
}
/* Barra superior*/
#topbar {
    width:auto;
    background: #EEE;
    height: 20px;
    padding: 0px;
    font: 9px verdana;
    font-weight: bold;
    color: #CCCCCC;
    text-align: right;
}
a {
	text-decoration: none;
	padding: 0;
	margin: 0;
}

a:visited {
	color:#0000CC;
}

a:link {
	color:#0000CC;
}

a:active {
	color:#333333;
}

a:hover {
	color:#333333;
}




/* Cuerpo principal de la página. Usar para reglas generales a heredar*/
body {
	font-family: verdana, tahoma, helvetica, arial, sans-serif;
	font-size: 12px;
	background-color:#f4f4f4 repeat-y center;
	margin: 0em;
	background-image: url(../images/bg3.gif);
	border-color: #F0F0F0;
	border-style: solid;
	border-width: 1px;
	vertical-align: ve;
	width: 950px;
}

ul {
	font-size:60%;
	color:#666666;
	line-height: 1.5em;
	list-style: none;
}

/*  Algunos header (títulos) que se quieran usar, más discretos que los noteheader más
	adelante creados */

h1 {
	color:#000000;
	font-weight:bold;
	padding-left: 0em;
	padding-top: 0em;
}

h2 {
	color:#000000;
	font-size:110%;
	font-weight:bold;
	border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#E5E5E5;
}

h3 {
	color:#000000;
	font-size:100%;
	font-weight:bold;
}

h3 a{
	color:#FF9933;
}

p {
	text-align:justify;
	color:#000000;
	font-size: 100%;
	line-height: 1.5em;
	background-color: #FFFFFF;
}

.orange {
	color: #FF9933;
}

.blue {
	color: #003366;
}

.green {
	color: #DFFFBE;
}

.gray {
	font-weight:normal;
	font-size:70%;
	color: #F0F0F0;
}

/* Barra superior, donde está la cabecera */
div.supBar {
	background-color: #000000;
	margin-bottom: 40px;
	padding: 0px;
	margin-top: 0px;
}

/* Una regla y su caja, para poner una posible caja de búsqueda*/

div.search {
	width: 20em;
	float: right;
	clear: right;
	color:#003366;
	font-size: 70%;
	margin: 1.5em 1em 0em 1em;
}

.searchbox {
	color:#666666;
	background-color:#F8F8F8;
	border-style:solid; border-width:1px; border-color:#F0F0F0;
}

/* ----- Menu -----*/
div.menu {
	width: auto;
	vertical-align: middle;
	font-size:80%;
	background-color:#003366;
	padding: 1em 1em 1em 1em;
	border-style:solid; border-width:1px; border-color:#E5E5E5;
	text-align: right;
	color:#FFFFFF;
}

div.menu a{
	color:#FFFFFF;
}

/* ----- right Info - News -----*/

div.newsContainer{
	float: left;
	clear: left;
	width: 12em;
	margin: 0.5em 0.5em 0em 0.5em;
}

div.news1{
	width: 12em;
	background-color:#F8F8F8;
	border-style:solid; border-width:1px; border-color:#F0F0F0;
	margin-bottom: 0.5em;
	padding: 0.5em 0.5em 0.5em 0.5em;	
}

div.news2{
	width: 12em;
	background-color:#DFFFBE;
	border-style:solid; border-width:1px; border-color:#F0F0F0;
	margin-bottom: 0.5em;
	padding: 0.5em 0.5em 0.5em 0.5em;
}

/* Contenedor de columnas izquierdas (por ejemplo: news/events) */
div.colMedias
{
	width: 700px;
	border-width:1px;
	margin: 0.5em 0.5em 0.5em 0.5em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	vertical-align: top;
}


/* Formato de columna de news/events */

.news
{
	width: 348px;
	float: left;
	border-bottom: 1px solid #DDD;
	line-height: 22px;
	color: #000000;
	border: 1px solid #DDD;
}

/* Estos son los títulos de cada columna de la derecha, gris y con colores */
.noteheader
{
    width:auto;
    border-bottom: 1px solid #DDD;
    border-top: none;
    color: #000000;
    height: 24px;
    font-family: verdana;
    font-size: 11px;
    font-weight: bold;
	background:url(../images/headerbg.jpg) repeat-x;
}

.noteheader_amarillo
{
    width:auto;
    border-bottom: 1px solid #DDD;
    border-top: none;
    color: #000000;
    height: 24px;
    font-family: verdana;
    font-size: 11px;
    font-weight: bold;
	background:url(../images/headerbg_amarillo.jpg) repeat-x;
}

.noteheader_azul
{
    width:auto;
    border-bottom: 1px solid #DDD;
    border-top: none;
    color: #000000;
    height: 24px;
    font-family: verdana;
    font-size: 11px;
    font-weight: bold;
	background:url(../images/headerbg_azul.jpg) repeat-x;
}

/* Le da estilo de un fondo amarillo a algunos textos */
.spacy
{
	padding: 5px;
	background-color: #FFFEF0;
	color: #000000;
}


/* Las bookmarks de abajo*/
div.Bookmarks{
	margin: 0em;
	width: 950px;
	border: 1;
	border-color: #999999;
	vertical-align: bottom;
	float: left;
	left: 0px;
}

/* El cuadro de membership*/
div.membership{
	float: right;
	clear: right;
	width: 190px;
	background-color:#F8F8F8;
	border-style:solid;
	border-width:1px;
	border-color:#E5E5E5;
	margin: 0em 0.5em 0.5em 0em;
	padding: 0.5em;
	vertical-align: top;
	margin-bottom: 1px;
}

/* Esto dará estilo a las cajas de login y search */
div.membership input {
    border: 1px solid #DDD;
    font-family: verdana;
    font-size: 10px;
    color: #BBB;
    font-weight: bold;
}

div.news input {
    border: 1px solid #FFE89F;
    font-family: verdana;
    font-size: 10px;
    color: #666666;
    font-weight: bold;
}


div.rightInfo2 input {
    border: 1px solid #999999;
    font-family: verdana;
    font-size: 12px;
    color: #666666;
    font-weight: bold;
}
/*Columnas estrechas de 190 píxeles*/

div.rightInfo{
	float: right;
	clear: right;
	width: 190px;
	background-color:#FFFFE8;
	border-style:solid;
	border-width:1px;
	border-color:#FFF3CE;
	margin: 0.5em 0.5em 0.5em 0em;
	padding: 0.5em 0.5em 0.5em 0.5em;
}

/*Definición de las celdas de las columnas amarillas de la derecha*/
div.celdaDerecha{
	height: 24px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #FFF3CE;
	border-bottom-width: thin;
	width: auto;
}

/*Definición de las celdas de las columnas azules de la derecha*/
div.celdaDerechaAzul{
	height: 48px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #DBE8FD;
	border-bottom-width: thin;
	width: auto;
}

div.rightInfo2{
	float: right;
	clear: right;
	width: 190px;
	background-color:#F1F6FE;
	border-style:solid;
	border-width:1px;
	border-color:#DBE8FD;
	margin: 0.5em 0.5em 0.5em 0em;
	padding: 0.5em 0.5em 0.5em 0.5em;
}


/* Los principales contenidos vendrán aquí, en un tamaño de 700 píxeles*/
div.mainInfo{
	width: 700px;
	border-style:solid;
	border-width:1px;
	border-color:#F0F0F0;
	margin: 0.5em 0.5em 0.5em 0.5em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	vertical-align: top;
	z-index: 0;
}

div.celdaIzquierdaAmarilla{
	height: inherit;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #FFF3CE;
	border-bottom-width: thin;
	width: auto;
	background-color: #FFFEF0;
}

div.mainInfo h3 a{
	color:#003366;
}


div.image {
	float:left;
	width: auto;
	height: auto;
	margin-right:0.5em;
	margin-bottom:0.5em;
	background-color:#F0F0F0;
	border: 1px solid #F0F0F0;
	left: 1px;
	top: 1px;
}

div.image h3{
	color:#CCCCCC;
}

/*Contenedor secundario*/
div.subContainer{
	clear:both;
	width: 948px;
	font-size:100%;
	background-color:#F8F8F8;
	border-style:solid; border-width:1px; border-color:#E5E5E5;
	margin: 0em;
	padding: 1em 0em;
}

div.copyright {
	color: #999999;
	text-align:right;
	margin-left:0em;
	margin-right:0em;
	font-size:100%;
	width: 948px;
}

div.copyright a{
	color:#999999;
}

div.sublinks{
	float:left;
	clear:left;
	color:#777777;
	margin-left:1em;
}

div.sublinks a{
	color:#777777;
}
/* CSS Tabs - Aquí es dónde están los menús emergentes */
#tabs8 {
	float:left;
	width:100%;
	background:#000000;
	margin-top: 0px;
}

#tabs8 ul {
	margin:0;
	padding:0px 10px 0 5px;
	list-style:none;
	font-size: 10px;
	vertical-align: top;
}

#tabs8 li {
	margin:0;
	padding:0;
	list-style-type: none;
	float: left;
	width: 90px;
	display: block;
}

#tabs8 a {
    float:left;
    background:url(../images/tabright9.jpg) no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
}

#tabs8 a span {
	float:left;
	display:block;
	background:url(../images/tabright7.gif) no-repeat right top;
	padding:5px 1px 4px 1px;
	color:#eee;
	font-weight: bold;
	font-size: 9px;
	width: 81px;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs8 a span {}
    /* End IE5-Mac hack */
#tabs8 a:hover span {
    color:#591333;
}

#tabs8 a:hover {
    background-position:100% -42px;
	cursor:pointer;
}

#tabs8 a:hover span {
    background-position:100% -42px;
    color: #888;
}

#tabs8 #current a {
    background-position:0% -42px;
}
#tabs8 #current a span {
    background-position:100% -42px;
    color: #888;
}
#tabs8 #currentb a{
	float:left;
    background:url(../images/tabright9.jpg) no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
}

#tabs8 #currentb a span{
	float:left;
	display:block;
	background:url(../images/tabright7.gif) no-repeat right top;
	padding:5px 1px 4px 1px;
	color:#eee;
	font-weight: bold;
	font-size: 9px;
	width: 81px;
}

#tabs8 #currentb a:hover {
    background-position:100% -42px;
}

#tabs8 #currentb a:hover span {
    background-position:100% -42px;
    color: #888;
}

ul {
	padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; list-style-type: none
}
li {
	float: left; width: auto; position: relative
}
li ul {
	display: none; left: 0px; position: absolute; top: 24px}
unknow {
	left: auto; top: auto
}
li:hover ul {
	display: block
}
li.over ul {
	display: block
}

#content {
	clear: left
}

/* End of CSS Tabs */