/*************************************************************************************************
 * Plantilla de estilos del proyecto CarMa
 * Versión:
 *		1.1, Noviember 28, 2005 
 *		1.2, Diciembre 19, 2008
 *		1.3, Abril 8, 2009
 *		2.0, Junio 2010
 *
 * Sociedad Española de Reumatología. Departamento de Tecno. de la Información y la Comunicación
 **************************************************************************************************/

/* Importamos otras hojas de estilos */
@import url("controls.css");


/**************** Estilos principales de la página  ****************/

body
{ margin:0; padding:0; color:#303030; background:#fafafa url(img/bodybg.gif) repeat-y left top; font:80% Calibri, georgia, Verdana, Tahoma, sans-serif; text-align: justify; }

ul
{list-style:circle; margin:15px 0 20px 0;}

li
{margin:0 0 8px 25px;}

a
{color:#d85d5d; font-weight:bold; text-decoration:none;}

a:hover
{color:#505050; text-decoration:underline;}

a:visited
{color:#7d0000; text-decoration:underline;}

div.hr
{ height: 37px; background: url(img/hr.gif) no-repeat center; }

div.hr hr { display: none; }

/**************** Diseño principal del fondo   ****************/

#backdesign { background: url(img/mainbg.gif) no-repeat left top; }


/**************** Estilos de la barra de la izquierda ****************/

#sidebar
{ position:absolute; top:0; left:0; width:160px; overflow:auto; text-align:right; height: auto; float: none; clear: none; }

body > #sidebar
{position:fixed;}

#sidebar h1
{margin:20px 18px 0 5px; color:#d85d5d; font-size:1.6em; letter-spacing:-1px; text-align:right;}

#sidebar h2, #sidebar h3
{margin:0 20px 18px 5px; color:#808080; font-size:1.1em; font-weight:bold; text-align:right;}

#sidebar h3
{margin:20px 18px 4px 5px; color:#606060;}

#sidebar  p
{margin:0 20px 18px 5px; color:#606060; font-size:0.8em;}

#sidebar a
{color:#808080}

#sidebar img
{ float: right; padding:0; margin: 25px 5px 2px 0;}


/**************** Estilo del menú  ****************/

#menu a
{ display:block; width:140px; padding:5px 12px 5px 0; color:#606060; font-size:1.6em; font-weight:normal; text-decoration:none; letter-spacing:-1px; }

#menu a:hover 
{padding:5px 18px 5px 0; color:#303030; background:#f2efef url(img/a_over.gif) no-repeat -5px 0; }

#menu a.active
{padding:5px 18px 5px 0; background:#fafafa url(img/a_active.gif) no-repeat -5px 0; border-top:2px solid #c0c0c0; border-bottom:2px solid #c0c0c0; }

#menu a.active:hover
{padding:5px 18px 5px 0;color:#505050; background:#fafafa url(img/a_over.gif) no-repeat -5px 0;  }

/**************** Header area styles ****************/
#header
{  }

#header img
{ text-align: center; }

#header div
{ display: none; text-align: justify; font-size: smaller; margin: 25px 0 0; padding: 10px 10px 5px; border-bottom: 1px solid #c0c0c0; vertical-align: top; clear: both; }


/**************** Content area styles ****************/

#content
{ font-weight: normal; font-style: normal; font-variant: normal; line-height: normal; width:640px; margin:0 0 0 160px; padding:20px 0 0 5px; vertical-align: bottom; }

#content img
{ float: none; margin:0 15px 15px 0; padding:1px;}

#content img.fix
{ float: none; margin:0; padding:0;}

#content div.img_fig
{ font-size: 95%; font-family: Verdana, Tahoma, sans-serif; font-weight: normal; font-style: italic; font-variant: small-caps; text-align: left; clear: both; margin-bottom: 20px; margin-left: 20px; }

#content img.left
{ float: left; margin:0 15px 15px 0; padding:1px;}

#content img.right
{ float: right; margin:0 15px 15px 0; padding:1px;}

#content p
{margin:0 0 20px 0; line-height:1.5em;}

#content h1
{margin:0; color:#d85d5d; font-size:3em; letter-spacing:-2px; text-align:center;}

#content h2
{margin:0; color:#808080; font-weight:normal; font-size:2em; letter-spacing:-1px; text-align:center;}

#content h3
{clear:both; margin:30px 0 10px; color:#d85d5d; font-weight:normal; font-size: 1.8em; letter-spacing:-1px;}

#content h4
{clear:both; margin:30px 0 10px; color:#606060; font-weight:bold; font-size: 1.8em;}

#content h5
{clear:both; margin:2px 0; color:#979797; font-weight:bold; font-size: 1.7em; letter-spacing:-1px;}

#content h6
{ clear:both; margin:1px 0; color:#807e7e; font-weight:bold; font-size: 1.6em; font-variant: small-caps; letter-spacing: -1px; }


/***************************************************************/


/* 
	Classy yet somehow fancy
	table style created by Radu Bilei
	for Chris Heilmann's CSS Table Gallery
	http://twitter.com/radubilei
	http://icant.co.uk/csstablegallery
*/

#data table, #data th, #data table td	{	border:none;  border-collapse:collapse; font-family:Calibri, corbel, "helvetica neue", "trebuchet ms", arial, helvetica, sans-serif; font-size:1em; line-height:1.5em}
#data table		{	background:#920303; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; -webkit-box-shadow:1px 1px 10px rgba(0,0,0,0.3); -moz-box-shadow:1px 1px 10px rgba(0,0,0,0.3)}
#data caption		{	text-align:left; text-transform:uppercase; font-size:150%; font-weight:bold; padding:1.5em 0; color:black}

#data tr.footer { font-size:100%; padding:0.5em 1em; background-color:#e5e5e5; vertical-align:top}
#data tr.header { color: #fff; font-size:100%; font-weight: bold; padding:0.5em 1em; vertical-align:top  }
#data tr.item   { font-size:100%; padding:0.5em 1em; background-color:#e5e5e5; vertical-align:top}
#data tr.altitem {font-size:100%; padding:0.5em 1em; vertical-align:top; background-color:#eee; color:#222}


/**************** Content area styles ****************/

#submenu
{ background-color: #fafafa; background-image: none; background-position: 0 0; height: 100%; width:220px; margin:0; padding:5px; position: absolute; top: 0; left: 840px; border-right:2px solid #c0c0c0; border-left:2px solid #c0c0c0; }

#submenu p
{margin:0 0 20px 0; line-height:1.5em;}

#submenu h1
{margin:0; color:#d85d5d; font-size:4em; text-align:center;}

#submenu h2
{margin:0; color:#808080; font-weight:normal; font-size:2.5em; text-align:center;}

#submenu h3
{clear:both; margin:30px 0 10px; color:#d85d5d; font-weight:normal; font-size: 2em;}

#submenu .arrowlistmenu{
width: 200px; /*width of accordion menu*/
}

#submenu .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
color: white; font-size: 12px; font-weight: bold; font-style: normal; font-variant: normal; line-height: normal; background: black url(titlebar.png) repeat-x left center; margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand; cursor: pointer; }

#submenu .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);
}

#submenu .arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0 0 4px;
padding: 0; /*bottom spacing between each UL and rest of content*/
}

#submenu .arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

#submenu .arrowlistmenu ul li a{
color: #a70303;
background: url(arrowbullet.png) no-repeat left center; /*custom bullet list image*/
display: block;
padding: 1px 0 1px 19px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
}

#submenu .arrowlistmenu ul li a:visited{
color: #A70303;
}

#submenu .arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

/****************  footer  ****************/
#footer
{ color: #4a627a; font-size: 8pt; text-align: right; margin: 25px 0 0; padding: 10px 10px 5px; border-top: 1px solid #c0c0c0; vertical-align: top; clear: both; }

#footer img
{ float: none; margin:0 5px 5px 0; padding:1px; text-align: center}

#footer a:link a:visited{
	color:#fff;
}

#footer a:hover a:active{
	color:#c0c0c0;
}


/****************  ID [promotor]  ****************/
#promotor
{ color: #4a627a; font-size: 8pt; text-align: right; margin: 25px 0 0; padding: 10px 10px 5px; border-top: 1px solid #c0c0c0; vertical-align: top; clear: both; }

#promotor img
{ float: none; margin:0 5px 5px 0; padding:1px; text-align: center}

#promotor a:link a:visited{
	color:#fff;
}

#promotor a:hover a:active{
	color:#c0c0c0;
}



/****************  LOPD  ****************/
#LOPD
{ color: #9a1818; font-size: 8pt; font-style: italic; text-align: justify; margin: 15px 0 0; padding: 5px; vertical-align: top; clear: both; border: solid 1px; }

/****************  info  ****************/
#info
{ background-color: #fff; font-size: 8pt; font-style: italic; text-align: justify; margin: 15px 0 0; padding: 5px; vertical-align: top; clear: both; border: solid 1px #adadad; }


/****************  loncha  ****************/
#loncha
{position:absolute; top:0; left:550px; width:10px; height:100%; overflow:auto; background:#fff}

body > #loncha
{position:fixed;}