/* $Id: common.css 2241 2005-10-16 23:58:13Z ruth $ */

/* Common style rules for Red Local website

   The stylesheet is divided into the following three parts:
   
   1. Layout rules: 
      Box properties (exclusive of borders), positioning, text-indent, alignment, lists
      
   2. Visual rules: 
      Colors, backgrounds, borders, links, emphasis
      
   3. Typographical rules: 
      Font and text properties (exclusive of links, alignment and text-indent)

   NOTE: Validate CSS syntax before add your changes to the CVS tree!!
*/


/* ------------------------- Layout rules ------------------------- */

body {
    margin: 0 10px;
    padding: 0;
}


#header {
    position: relative;
    height: 124px;
}

h1, h2, h3, h4, h5, h6, blockquote, dd {
    line-height: 1.2em;
}

h1, h2 {
    margin: 0;
    padding: 0.5em 0 0 378px;
    text-align: right;
}

h2 {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: 28px;
}

#breadcrumb {
    margin: 0;
    padding: 3px 0 0 120px;
    /* 
        Tantek Celik's Box Model Hack 
        (http://tantek.com/CSS/Examples/boxmodelhack.html)  
    */
    height: 25px;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 22px;    
}

body>#breadcrumb {
    height: 22px;   /* Be nice to Opera rule */
}

#breadcrumb p {
    display: none;
}

#breadcrumb ul {
    display: inline;
    margin: 0;
    padding: 0;
}

#breadcrumb li {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

#controls {
	text-align: right;
	padding: 0 1em 0 0;
	
}

#controls li {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
#breadcrumb li:before {
    content: "\0020 \00BB \0020";
}

#breadcrumb li.first:before {
    content: " ";
}
*/

#nav {
    float: left;
    width: 180px;
    margin: 0;
    padding: 25px 0 0 0;
}

#nav p {
    display: none;
}

#nav ul {
    margin: 0;
    padding: 0 0 9px 0;
}

#nav ul ul {
    margin: 0 0 0 20px;
    padding: 0;
}

#nav li {
    list-style: none;
    margin: 0;
    padding: .2em 0 .2em 5px;
}

#nav ul ul li {
    padding: 0 0 0 10px;
}

#content {
    margin: 0 0 2em 180px;
    padding: 1em 5em 0 3em;
}

p {
    margin: 1.2em 0;
    line-height: 140%;    
}

ul {
    margin: 0 0 0 3em;
    padding: 0;
}

li {
    margin: .5em 0;
    padding: 0;
    line-height: 140%;        
}

ul ul li {
    margin: .2em 0;
}

ol.upper-roman {
    list-style-type: upper-roman;
}

ol.upper-alpha {
    list-style-type: upper-alpha;
}

ol.lower-alpha {
    list-style-type: lower-alpha;
}

#footer {
    clear: both;
    margin: 0;
    padding: .5em 0 2em 0;
}

#footer #powered {
    float: left;
    width: 124px;
}

#footer #powered span {
    display: none;
}

#footer ul, #footer p {    
    float: right;
    margin: 0;
    padding: 0;
}

#footer p {
    clear: both;
}

#footer li {
    display: block;  
    float: left;  
    list-style: none;
    margin: 0 0 0 1em;
    padding: 0;
}

hr {
    display: none;
}

blockquote {
    text-align: justify;
    line-height: 1.2em;        
}

blockquote:before {
    content: open-quote;
}

blockquote:after {
    content: close-quote;
}      

dt {
    margin: 0.5em 0;    
}  

dd {
    margin: 0 0 1.5em 2em;
}

.up {
    margin: 0;
    padding: .5em 20px .5em 0;
    text-align: right;
}

a[target=_blank] {
    padding-right: 13px;
}

form {
    margin: 0 5em 0 3em;
    padding: 2em;
    line-height: 250%;
}

form p.mandatory {
    margin: 0 0 1em 0;
}

form .field {
    display: block;
    margin: .6em 0;
}

#options {
    position: absolute;
    top: 125px;
    right: 10px;
    padding: 3px 2em 0 0;
    /* 
        Tantek Celik's Box Model Hack 
        (http://tantek.com/CSS/Examples/boxmodelhack.html)  
    */
    height: 25px;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 22px;
}

body>#options {
    height: 22px;   /* Be nice to Opera rule */
}

#options ul {
    margin: 0;
}

#options ul li {
    display: inline;
    list-style: none;
    list-style-image: none;
    margin: 0 0 0 1em;
}

#downloads {
    float: right;
    width: 15em;
    margin: 0 0 1em 1em; 
    padding: 1em 1em 2em 1em;
}

ul.alphabet {
    margin: 1em 0;
    padding: .5em;  
}

ul.alphabet li {
    display: inline;
    list-style: none;
    margin: 0 .5em;
}

.zebratable {
    display: block;
    width: auto;
    padding: 0;
    margin: .5em 0;
}

.zebratable tr, 
.zebratable td, 
.zebratable th {
    margin: 0;
    padding: 0;
    border: 0;
}

.zebratable tr th, 
.zebratable tr td {
    margin: 0;
    padding: .5em;
    text-align: left;
}

.zebratable tr td {
    padding-top: .3em;
}

.zebratable caption {
    display: none;
}

/* -------------- Colors, backgrounds, borders, links ------------- */

body {
    color: #000;
    background: #fff;
    quotes: "\00AB" "\00BB";    
}

a {
    color: #c00;
    text-decoration: underline;
}

a:visited {
    color: #c00;
    
}

a:hover {
    color: #999;
}

a img {
    border: 0;
}

a[target=_blank] {
    background: transparent url("../images/external_link.png") no-repeat right center;
}

#controls {
 	background: #aaa;
  color: #fff;
}

#controls a {
 color: #fff;
 text-decoration: none;
 font-size: 80%;
}

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


#content ul li {
    list-style: url("../images/rectangle_bullet.png") disc;
}

#content ul ul li {
    list-style: url("../images/arrow_bullet.png") circle;
}

#header {
    background: #fff url("../images/default_header.png") no-repeat left top;
}

#redinfancia #header {
    background: #fff url("../images/redinfancia2_header.png") no-repeat left top;
}

#pertenecer #header {
    background: #fff url("../images/pertenecer_header.png") no-repeat left top;
}

#campanias #header {
    background: #fff url("../images/documentacion_header.png") no-repeat left top;
}

#municipios #header {
    background: #fff url("../images/municipios_header.png") no-repeat left top;
}

#area #header {
    background: #fff url("../images/area_header.png") no-repeat left top;
}

#enlaces #header {
    background: #fff url("../images/enlaces_header.png") no-repeat left top;
}

#laconvencion #header {
    background: #fff url("../images/laconvencion_header.png") no-repeat left top;
}

#contacto #header {
    background: #fff url("../images/contacto_header.png") no-repeat left top;
}

#breadcrumb {
    background: #fff url("../images/breadcrumb_bg.png") no-repeat left top;
}

#breadcrumb a:hover {
    background-color: #aaa;
    color: #006;
    text-decoration: none;
}

#nav {
    background: #c00 url("../images/nav_top_border.png") no-repeat left top;
}

#nav ul {
    background: #c00 url("../images/nav_bottom_border.png") no-repeat left bottom;
}

#nav ul ul {
    background: none;
}

#nav ul ul li {
    background: transparent url("../images/triangle_bullet.png") no-repeat left center;
}

#nav a {
    color: #fff;
    font-size: 90%;
    font-weight: bold;  
    text-decoration: none;  
}

#nav a:hover {
    text-decoration: underline;
}

#nav ul ul a {
    font-weight: normal;
}

#footer {
    border-top: 1px solid #c00;
    color: #666;
}

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

#footer a:hover {
    text-decoration: underline;
}

blockquote {
    color: #666;
}

.article .number, .article .title, h6, dt {
    color: #006;
}

.up {
    background: transparent url("../images/up_arrow.png") no-repeat right center;
}

#toc {
    border-bottom: 1px solid #c00;    
}

form {
    border-left: 4px solid #e34c41;
    border-top: 1px solid #e34c41;
    background: transparent url("../images/clip.png") no-repeat top right;
}

form fieldset {
    border: none;
    background: #eee;
    margin: 1em 0;
    padding: 1em;
}

form fieldset legend {
    color: #006;
    margin: 0;
    padding: 0;
}

.img-shadow{
  float:left;
  background: url("../images/shadowAlpha.png") no-repeat bottom right !important;
  background: url("../images/shadow.gif") no-repeat bottom right;
  margin: 10px 15px 0 10px !important;
  margin: 10px 15px 0 5px;  
  border: 1px solid white;
}

.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -8px 6px 6px -8px;
  padding: 4px;
} 

.img-shadow-right{
  float:right;
  width: 220px; 
  background: url("../images/shadowAlpha.png") no-repeat bottom right !important;
  background: url("../images/shadow.gif") no-repeat bottom right;
  margin: 10px 0 0 30px !important;
  margin: 10px 0 0 25px;
  border: 1px solid white;
}

.img-shadow-right img { 
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -8px 6px 6px -14px !important;
  margin: -8px 6px 6px -8px;
  padding: 4px;
} 

#downloads {
    border: 2px solid #ccc;
    background: url("../images/downloads_bg.png") no-repeat bottom right;
}

#downloads .size {
    color: #666;
}

ul.alphabet {
    background-color: #eee;    
}

.zebratable {
    border: 1px dashed #ccc;
}

.zebratable tr th {
    background-color: #ccf;
}

.zebratable tr td {
    background-color: #fff;
    margin: 0;
}

.zebratable tr.even td {
    background-color: #eef;
}


/* ----------------------- Typographical rules -------------------- */

body {
    font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
    line-height: 1em;
    /* A bit of CSS Aikido for fixing font keywords inconsistency 
       with IE4/5.x Win. See Tod Fahrner's article at 
       http://www.alistapart.com/articles/sizematters */
    font-size: x-small;     
    voice-family: "\"}\"";  
    voice-family: inherit;
    font-size: small;       /* intended value for better browsers */       
}

html>body {
    /* be nice to Opera rule */
    font-size: small;
}

h1, h2 {
    font-size: 120%;
    font-weight: normal;
    line-height: 1.2em;
}

h1 {
    font-size: 120%;
}

h2 {
    font-size: 190%;
}    

h3 {
    font-size: 170%;
    font-weight: normal;
}

h4 {
    font-size: 130%;
    font-weight: normal;
    margin: 1.5em 0 1em 0;
}

h5{
    font-size: 120%;
    font-weight: bold;
}

h6 {
    font-size: 100%;
    font-weight: normal;
    text-transform: uppercase;
}

p {
    font-size: 100%;
}

#footer {
    font-size: 85%;
}

dt {
    font-weight: bold;
}

blockquote {
    font-style: italic;
}

.article .number {
    font-weight: bold;
}

.article .title {
    font-style: italic;
}

form input {
    font-family: courier, arial, helvetica;
    font-size: 100%;
}

.mandatory {
    font-weight: bold;
}

form fieldset legend {
    font-size: 130%;
}

#downloads {
    font-size: 90%;
}

#downloads .size {
    font-size: 85%;
}

ul.alphabet li {
    text-transform: uppercase;
}

.zebratable tr th, 
.zebratable tr td {
    line-height: 1.3em;
}