body {   
    width: 900px;   
    margin-left: 15px;   
    font-family: "Trebuchet MS", arial, helvetica, sans-serif;   
    background-color: #000000;     
    background-image: url(../media/intro14.jpg);
    color: #ffffff;   
    font-size: 1.1em;    
    line-height: 2;   
} 

/*  La referència relativa a les imatges (url)   **
**  s'ha de fer des d'on està l'arxiu base.css   **
*/

/*------------------------------------------------------------*
** Títol
**------------------------------------------------------------*/
#titol{
    background: url(../media/flames_rep_cub120.gif) bottom;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 35px;
    padding-left: 0px;
    text-align: center;
    text-decoration: none;
    font-family: "Comic Sans MS", Arial, Verdana, Geneva, Helvetica, sans-serif;
    font-size:50px;
    color:#6600ff;
    letter-spacing:.5px;
    font-weight:bold;
    line-height: 2;
    border-bottom: none;
}

#elvesper{
    background: url(../media/elvesper034bm.gif) no-repeat 0 20px;
    padding-left: 100px;
}

#drac{   
    color:#6600ff;   
    background: url(../media/drac03mini.gif) no-repeat 0% 50%; 
    /*  background-color: #b8b74f;*/ 
    font-family: "Comic Sans MS", arial, helvetica, sans-serif; 
    margin: 0;   
    padding: 0px;   
    line-height: 2.5;   
    padding-left: 35px;   
    border-bottom: 1px solid #cdcd83;   
}  

h1 {   
    color:#ff6600;   
    background: url(../media/drac03mini.gif) no-repeat 0% 50%; 
    /*  background-color: #b8b74f;*/ 
    font-family: "Comic Sans MS", arial, helvetica, sans-serif; 
    font-size:40px;    
    margin: 0;   
    padding: 0px;   
    line-height: 2.5;   
    padding-left: 80px;   
    border-bottom: 1px solid #cdcd83;   
}  

h2 {   
    color: #ffff00;    
    background: url(../media/hexa_crom_tun01.gif) no-repeat 0% 50%;   
    font-family: "Comic Sans MS", arial, helvetica, sans-serif;
    margin-top: 18px;
    padding-left: 30px;   
    padding-top: 15px;   
    padding-bottom: 15px;   
} 

h3 {   
    color:#ffff66;
    background: url(../media/flama00vermella24px.gif) no-repeat 0% 50%;   
    font-family: "Comic Sans MS", arial, helvetica, sans-serif;
    padding-left: 30px;   
    padding-top: 15px;   
    padding-bottom: 15px;   
}

h4 {   
    color:#ff6600;
    background: url(../media/flama00blava24px.gif) no-repeat 0% 50%;   
    font-family: "Comic Sans MS", arial, helvetica, sans-serif;
    padding-left: 30px;   
    padding-top: 15px;   
    padding-bottom: 15px;   
}

h5 {   
    color:#ffffff;
    background: url(../media/flama00verd24px.gif) no-repeat 0% 50%;   
    font-family: "Comic Sans MS", arial, helvetica, sans-serif;
    padding-left: 30px;   
    padding-top: 15px;   
    padding-bottom: 15px;   
}

h6 {   
    color:#ff0000;
    background: url(../media/flama00groga24px.gif) no-repeat 0% 50%;   
    font-family: "Comic Sans MS", arial, helvetica, sans-serif;
    padding-left: 30px;   
    padding-top: 15px;   
    padding-bottom: 15px;   
}

/*------------------------------------------------------------*
** FIR (Substitució de text per imatges) Elements capçaleres  SIBLINGS
**------------------------------------------------------------*/


#estructura_materia span { display:none;}

#estructura_materia {   
    background-image: url(../media/estructura_materia.gif);   
    margin-left: 40px;     
    width: 760px;   
    height: 100px;   
} 


#estats_materia span { display:none;}

#estats_materia {   
    background-image: url(../media/estats_materia.gif);   
    width: 760px;   
    height: 100px;   
}


#dissolucions span { display:none;}

#dissolucions {   
    background-image: url(../media/mescles_dissolucions.gif); 
    margin-left: 40px;  
    width: 760px;   
    height: 100px;   
}

#estructura_atomica span { display:none;}

#estructura_atomica {   
    background-image: url(../media/estructura_atomica.gif);   
    width: 760px;   
    height: 100px;   
}  


#taula_periodica span { display:none;}

#taula_periodica {   
    background-image: url(../media/taula_periodica.gif);   
    width: 760px;   
    height: 100px;   
} 


#enllac_quimic span { display:none;}

#enllac_quimic {   
    background-image: url(../media/enllac_quimic.gif);   
    width: 760px;   
    height: 100px;   
} 


#estequiometria span { display:none;}

#estequiometria {   
    background-image: url(../media/estequiometria.gif);   
    width: 760px;   
    height: 100px;   
} 


#termoquimica span { display:none;}

#termoquimica {   
    background-image: url(../media/termoquimica.gif);   
    width: 760px;   
    height: 100px;   
}


#equilibri_quimic span { display:none;}

#equilibri_quimic {   
    background-image: url(../media/equilibri_quimic.gif);   
    width: 760px;   
    height: 100px;   
}


#acid_base span { display:none;}

#acid_base {   
    background-image: url(../media/acid_base.gif);   
    width: 760px;   
    height: 100px;   
}


#redox span { display:none;}

#redox {   
    background-image: url(../media/redox.gif);   
    width: 760px;   
    height: 100px;   
}


#precipitacio span { display:none;}

#precipitacio {   
    background-image: url(../media/precipitacio.gif);   
    width: 760px;   
    height: 100px;   
}


#organica span { display:none;}

#organica {   
    background-image: url(../media/quimica_carboni.gif);   
    width: 760px;   
    height: 100px;   
}
/*------------------------------------------------------------*

p {   
     text-decoration: none; 
}    
    /*  word-spacing: 10px; */   
    /* letter-spacing: 10px;   */  
    /* text-indent: 2em;       */  
    /* text-align: justify;    */  

   
blockquote {   
    background: #cecece url(../media/comilles01mini_top.gif) no-repeat top;   
    width: 367px;   
    font-family: georgia;   
    font-size: 150%;   
    color: #6d6d6d;    
    text-align: left;   
    line-height: 1.2em;   
    margin: 100px;   
    padding: 0;   
}   

/*------------------------------------------------------------*
** Llistes
**------------------------------------------------------------*/

ul {   
    list-style: none;   
}   

ul li {   
     background: url(../media/coleoptero_01_30px.gif) no-repeat 0 50%;   
     padding-left: 40px;  
     margin: 0px;
     margin-left: 0px;
     margin-top: 12px;
     text-decoration: none;
     font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
     font-size: 1.1em; 
     color: #ffffff;
} 

#menu ul li{
     background: url(../media/lampyris_noctiluca_anim51.gif) no-repeat 0 50%;
     padding-left: 70px;
     margin-left:0px;
     margin-top:15px;
     font-size: 24px;
}

#menu{
     padding-left: 0px;
     margin-left:230px;
     margin-right:150px;
     margin-top:15px;
}

ol {   
    list-style-type: decimal-leading-zero;
    margin: 20px;   
}   

ol li {   
     padding-left: 5px;  
     margin-left:20px;
     margin-top:12px;
     text-decoration: none;
     font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
     font-size: 12px;
     color: #ffffff;
     font-weight:bold;
} 

dl {   
    margin: 20px;   
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;   
    border: 2px solid #9F5F9F;   
    background: #2F2F4F;   
    width: 90%;   
    font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;   
}   
  
dt {
    background: url(../media/hoplia_coerulea04_50.gif) no-repeat 0 50%;
    padding-left: 70px;    
    padding-top: 15px;
    padding-bottom: 25px;
    line-height: 2;    
    font-family: "Comic Sans MS", Arial, Verdana, Geneva, Helvetica, sans-serif;      
    font-weight: bold;
    color: #00FFFF;   
}   
  
dd {   
    color: #CFB53B;   
    margin: 0px;   
}  

.cita {   
    background: url(../media/comilles00mini_middle.gif) no-repeat right bottom;   
    margin: 0px;   
    padding: 30px;   
}   
  
.autoria {   
    background: url(../media/quotation-bottom.png) no-repeat bottom;    
    font-size: 80%;   
    font-style: italic;   
    padding: 10px;     
}  

pre {   
    color:#617dff;   
    font-family: 'Lucida Console','Andale Mono',monospace;   
    font-size: 120%;   
    line-height:1.75;   
    background: #ffe26a url(../media/preformat.png) no-repeat right top;   
    border: 5px dashed #ccacff;   
    margin:0;   
    overflow:auto;   
    padding: 10px;   
}

em {   
   font-style: italic;   
}   
  
strong {   
   font-weight: bold;   
}  

abbr, acronym {   
    border-bottom: 1px dotted;   
    cursor: help;   
}  

code {   
    font-size: 130%;   
    padding: 1px 5px 1px 5px;   
    font-weight: bold;   
    color: #333;   
    border: 1px dotted #55c;   
    background-color: #ddd;   
}  

cite {   
    font-style: italic;   
    font-weight: bold;   
    color: #2f8e2f;   
    background-color: #fffe9e;   
} 

kbd {   
    font-size: 150%;   
    font-weight: bold;   
    margin: 0 3px 0 3px;   
    padding: 2px 6px 2px 6px;   
    background-color: #f5f5f5;   
    border-top: 1px solid #ccc;   
    border-left: 1px solid #ccc;   
    border-bottom: 1px solid #666;   
    border-right: 1px solid #666;   
/*    -moz-border-radius: 5px;   */
}   
  
kbd.consola {   
    font-size: 130%;   
    color: #0f0;   
    background-color: #000;   
    border: none;   
/*    -moz-border-radius: 0px;    */
}  

/*------------------------------------------------------------*
** Enllaços
**------------------------------------------------------------*/

a:link {   
    color: #FF7F00;   
    text-decoration: none;
    border: none;   
}   
  
a:visited {   
    color: olive;   
    text-decoration: none;
    border: none;   
}   
  
a:hover {   
    color: #FF2400;   
    text-decoration: none;
    border: none;    
    border-bottom: 1px dotted orange;   
}   
  
a:focus {   
    color: #CFB53B;   
    text-decoration: none;
    border: none;    
}   
  
a:active {   
    color: #7F00FF;   
    text-decoration: none;
    border: none;
}  



/*------------------------------------------------------------*
** Imatges
**------------------------------------------------------------*/

img {
      border: none;
}

.bord { 
      border: 8px solid #7F7F7F !important; 
      /* amb !important aquesta norma té prioritat sobre  */
      /* style="border-width:0" posat en la mateixa etiqueta HTML  */
      margin: 20px;
}

 


/*------------------------------------------------------------*
** Caixes arrodonides
**------------------------------------------------------------*/


.aaa {
        background: #fff;     
     /* background: #fff url(../media/cucaracha01anim.gif) no-repeat bottom 20px; amb Internet Explorer funciona, amb Mozilla firefox no */
     /* margin: 10px auto; */
        padding-left: 0px;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 18px;
        margin-bottom: 18px;        
     /* width: 80%; */
	}
.rbdalt div  { background: url(../media/esquina-superior-esquerra-blanc60.gif) no-repeat top left; }
.rbdalt      { background: url(../media/esquina-superior-dreta-blanc60.gif) no-repeat top right; }

.rbdalt div, .rbdalt {
	width: 100%;
	height: 16px;
}

.rbbaix div  { background: url(../media/esquina-inferior-esquerra-blanc60.gif) no-repeat bottom left; }
.rbbaix      { background: url(../media/esquina-inferior-dreta-blanc60.gif) no-repeat bottom right; }

.rbbaix div, .rbbaix {
	width: 100%;
	height: 16px;
}

.formula {
	padding-left: 40px;
	margin-right: 15px;
        font-family: "Garamond", "Times New Roman", arial, helvetica, sans-serif;
        color:#000000;
        font-size:30px;    
        line-height: 2.5;   
/*	background: url(tux.png) no-repeat 3% center; */
	}

.ontales {
	padding-left: 100px;
	margin-left: 150px;
        font-size:20px;  
}

.contingut p {
	font-size: 1.1em;
	margin: 0;
	padding: 2%;
	}

.cucaracha {
        background: url(../media/cucaracha01anim.gif) no-repeat bottom left;
}

.gorgojo {
        background: url(../media/gorgojo_2008_300_225.gif) no-repeat center right;
}

/*------------------------------------------------------------*
** Marc arrodonit amb fons transparent
**------------------------------------------------------------*/

b.bt, b.bt b, b.bb, b.bb b {display: block; height: 10px;font-size: 1px;background:url(../media/white.gif) no-repeat;position:relative}
b.bt {top: -3px; left: -3px}
b.bt b {background-position:100% -10px; left: 6px}
b.bb {background-position:0 -20px; top:3px; left: -3px}
b.bb b {background-position:100% -30px; left: 6px}
.white_border {border: #fefefe 3px solid}  


/*------------------------------------------------------------*
** Taules
**------------------------------------------------------------*/

caption{   
     background: url(../media/lampyris_noctiluca_anim51.gif) no-repeat 0 50%;
     caption-side: top;   
     height: 50px;   
     font-family: "Comic Sans MS", arial, helvetica, sans-serif;   
     font-size: 24px;   
     color:#ffffff;   
     text-align: center;
   
}   
  
table{   
     margin-top: 18px;
     margin-bottom: 18px;
     width: 98%;   
     table-layout: fixed;   
     border-collapse: collapse;   
     border: 2px double #000000;   
     padding: 4px;   
     font-family: Arial, Helvetica, Verdana, sans-serif;   
     font-size: 12px;   
     color: #000000;   
}   
  
thead{   
     background: #ff66ff;   
     border: 2px solid #000000;   
     font-family: Arial, Helvetica, Verdana, sans-serif;   
     font-size: 14px;   
     color: #000000;   
     text-align: center;   
}   
  
tfoot{   
     background: #ff66ff;   
     border: 2px solid #000000;   
     font-family: Arial, Helvetica, Verdana, sans-serif;   
     font-size: 12px;   
     color:#ffffff;
     text-align:left;   
}   
  
tbody{   
     background: #ff99ff;   
     border: 2px solid #000000;   
     vertical-align: middle;   
     font-family: Arial, Helvetica, Verdana, sans-serif;   
     font-size: 14px;   
     color: #000000;   
     text-align: left;   
}   
  
thead th{   
     background: #ff66ff;
     padding: 10px; 
     margin: 10px;   
     border: 4px solid #000000;   
}   
  

tbody th{   
     background: #6600ff;   
     font-family: "Comic Sans MS", arial, helvetica, sans-serif;
     font-size: 16px;
     padding: 5px; 
     color: #ffff00;    
     border: 4px solid #000000;   
}   

tfoot td{
     background: #ff66ff;
     padding: 10px;
     border: 4px solid #000000;
}
  
tr, td{   
     border: 2px solid #000000;   
     height:30px;
     padding: 5px;   
}   

.exemple{  
     font-weight: bold;   
}

.opcional{
     color: #000099;
     font-family: "Comic Sans MS", arial, helvetica, sans-serif;
     font-size: 16px;
     font-weight: bold;
     vertical-align: middle; 
     text-align:center;
}

thead a, tfoot a{   
     background:#ff66ff;
     color: #000099;
     text-decoration:none;   
}  

thead a:link, tfoot a:link{   
     color: #0000cc;  
}

tfoot td ul li{
     background: url(../media/hoplia_coerulea04_50.gif) no-repeat 0 50%;
     display: inline;    
     padding-left: 70px;    
     padding-top: 15px;
     padding-bottom: 25px;
     margin-left:30px;
     margin-top:0px;
     line-height: 4;    
}

/*------------------------------------------------------------*
** Formularis
**------------------------------------------------------------*/


.camps{
     padding-left: 100px;    
     padding-top: 5px;
     padding-bottom: 5px;
     margin-left:50px;
     margin-right:30px;
     margin-top:10px;
     border: 2px solid #ffffff;
}

#navegadors, .alinea{
     margin-left:50px;
}

legend{    
     color: #ffff00;
     font-family: "Comic Sans MS", arial, helvetica, sans-serif;
     font-size: 16px;
     font-weight: bold;
     margin-left:-80px;  
}

/*------------------------------------------------------------*
** Composició: capcalera, continguts, lateral i peu
**------------------------------------------------------------*/
#pagina { 

}

#capcalera { 
    background: url(../media/flames_rep_cub120.gif) bottom;
    top: 0px;   
    left: 0px;  
    line-height: 2;
    z-index:20;
}

#lateral {   
    top: 90px;   
    left: 0px;  
    width: 26%;   
    margin-left: auto;
    margin-right:0px;
    border: 2px solid #ffffff;  
}   
  
#contiguts {   
    margin-left:0px;
    padding:2px;    
    top: 90px;
    width: 72%;
    float: left;
    border: 2px solid #ffffff;   
}   

#continguts {  
    margin: 20px; 
    margin-left:0px;
    padding:2px;    
    top: 90px;
    width: 72%;
    float: left;
    border: 2px solid #ffffff;   
}   
  
#peu {  
    width: 72%;
    margin: 10px; 
    margin-left:0px;
    padding:2px;
    clear: left;
    border: 2px solid #ffffff;    
}  

/*------------------------------------------------------------*
** strong
**------------------------------------------------------------*/

.vermell {
     color: #ff0000;
     font-weight: bold;
}

/*------------------------------------------------------------*
** barra de navegacio
**------------------------------------------------------------*/

.navegacio {
      text-align: center;
      text-decoration: none;
      border: none;
}


.nav_inici {
      margin-left:80px;
      vertical-align: middle;
      text-decoration: none;
      border: none;
}


/*------------------------------------------------------------*
** barra de navegacio per pestanyes
**------------------------------------------------------------*/

#navsup {
     margin-left: -45px;
}

#pestanyes li {   
     list-style-type: none;   
     display: inline;
     background: none;
     margin-left: -45px; 
     margin-top: 0;
}   
  
#pestanyes li a {   
     text-decoration: none;
     font-size: 0.8em; 
     color: #ffffff;   
     padding: 3px 0.5em;  
     margin-left: 3px;   
     border: 2px solid #ffffff;   
     border-bottom: none;   
     background: #000000;   
}   
  
#pestanyes li a:visited { color: #666600; }   
#pestanyes li a:hover {   
    color: #6600ff;
    font-weight: bold;   
    background: #ffff00;   
    border-color: #ff0000;   
}

#pestanyes li a#actual {
    color: #999999;
    background: #000000;   
    border-color: #cccccc;   
}