/****************************************************************/
/* 	  	../css/mdl_2011.css			        */
/*								*/
/*  New css file, started in March 2011.                        */
/*  Should eventually replace mdl.css                           */
/*                                                              */
/*  Formatting for www.mae-da-lua.org                           */
/*								*/
/*  media: screen						*/
/*  =============						*/
/*                                                              */
/****************************************************************/


/* Default font for entire site */
body
    {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    }


/* note with small font, for legends of text figures, etc. */
.note_small
   {
   padding: 10px;
   font-size: 12px;
   padding: 10px;
   }

/* Note is for left or right column. width from containing div */
div.note 
    { 
    padding: 10px;
    background-color: White;
    color: black;
    text-align: justify;
    }

/* links in title bars inc_mdl_L0_.. etc*/
.bar_link
    {
    color: green;
    }



/*******************************************************************
 *
 *        Left column of species pages 00.html, voc_00.html
 *
 *******************************************************************/


/* left col of species page */
div.col_left_f1
    {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 270px;
    }


div.species_taxonomy
    {
    margin-top: 0px;
    background-color: #F4E8F0;
    color: black;
    padding: 10px;
    }


/* top margin, for 00 pages */
div.species_f1
    {
    margin-top: 10px;
    background-color: #69C08A;
    padding: 10px;
    }

/* no top margin, for nn pages */
div.species_f2
    {
    background-color: #89CA9D;
    padding: 10px;
    }


/* hn_f1 = format_1 fuer h1, h2 etc. 
 * use in left column of species pages !
 */
.hn_f1 
    {
    text-align: left;
    background-color: transparent;
    display: inline;
    font-size: 14px; 
    font-weight: normal;
    color: black;
    }


/***********************************************************************
 *
 *    Left Column, navigation boxes 
 *
 ***********************************************************************/

/* language navigation */
div.navigation_language
    {
    margin-top: 0px;
    padding: 10px;
    background-color: #A4D4B0;
    margin-bottom: 10px;

    font-size: 16px;
    font-weight: 700;
    }

/* for the links TO ENGLISH, TO PORTUGUESE .. */
.lang_link
    {
    color: red;
    }
/* page navigation */
div.navigation_page
    {
    margin-top: 0px;
    padding: 10px;
    background-color: #A4D4B0;
    }

/* intraspecies navigation */
div.navigation_species
    {
    margin-top: 0px;
    padding: 10px;
    background-color: #D5E9D7;
    }


/* navigation in L0 and L1 of site */
div.navigation_site
    {
    /* margin-top: 10px; */
    margin-bottom: 10px; 
    padding: 10px;
    background-color: #D7D7D7;
    }


/* navigation in L0 and L1 of site */
div.navigation_site_f1
    {
    padding: 10px;
    background-color: #D7D7D7;
    }






/***********************************************************************
 *
 *    Right Column 
 *
 ***********************************************************************/

/* right col of species page */
div.col_right_f1_old
    {
    position: absolute;
    top: 20px;
    bottom: 30px;
    left: 280px;
    width: 700px;

    padding-right: 20px; 
    overflow: auto;
    }


div#col_right_f1
    {
    position: absolute;
    top: 20px;
    left: 310px;
    width: 670px;

    padding-right: 20px; 
    padding-bottom: 20px;
    overflow: auto;
    }


/* Use on Thumbnail page */
div.col_right_f2
    {
    position: absolute;
    top: 20px;
    bottom: 30px;
    left: 280px;
    width: 700px;

    padding-right: 20px; 
    overflow: auto;
    
    border: 2px solid gray;
    }


/* work-around MSIE bug: "bottom" not working */
div.col_right_f3
    {
    position: absolute;
    top: 20px;
    height: 550px;
    left: 280px;
    width: 700px;

    padding-right: 20px; 
    overflow: auto;
    
    border: 2px solid gray;
    }



/*********************************************************************
 *                         Spectrograms
 *********************************************************************/

table.spectrogram_background
    {
    background-repeat: no-repeat;
    background-position: center center;
    }

table.image_background
    {
    background-repeat: no-repeat;
    background-position: center center;
    }

img.spectrogram_f1
    {
    padding-top: 30px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    border-style: none;
    }

img.spectrogram_f2
    {
    padding-top: 0px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    border-style: none;
    }

div.spectrogram_box_f1
    {
    border: 2px solid gray;
    padding: 5px;
    width: 630px;
    height: 350px;        /* resolves an IE6 problem */
    }


div.download
    {
    margin-left: 10px;
    font-size: 14px;
    }

div.download_1
    {
    margin-left: 0px;
    font-size: 14px;
    }


div.sound_list_item {

    width: 600px;
    margin-top: 20px;
    padding: 10px;
    background: #D5EAE9;  
    border: 1px dotted green;
    }



div.sono_list_item {

    width: 600px;
    }






/******************************************************************
                          Photo formats. 
*******************************************************************/ 

/*       SQUARE                  */

div.sonogram
    {
    border: solid 2px gray;
    width: 500px;
    }

div.sonogram_q
    {
    border: solid 2px gray;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    }

/* for photos etc. floating in text */
div.text_img_box
    {
    border: solid 2px gray;
    margin: 15px;
    min-width: 200px;
    min-height: 200px;
    padding-bottom: 10px;
    }

div.photo_q
    {
    border: solid 2px gray;
    width: 500px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    }

img.photo_q
    {
    width: 100%;
    border-style: none;
    }

/*         LANDSCAPE                    */
div.photo_l
    {
    border: solid 2px gray;
    width: 650px;
    padding-bottom: 10px;
    }

img.photo_l
    {
    width: 100%;
    border-style: none;
    }

img.photo_l_dim
    {
    width: 650px;
    height: 500px;
    }


/*         PORTRAIT                    */
div.photo_p
    {
    width: 500px;
    border: solid 2px gray;
    margin-left: auto;
    margin-right: auto;
    }

img.photo_p
    {
    width: 100%;
    border-style: none;
    }





/******************************************************************
 *
 *                       Thumbnails
 *
 ******************************************************************/

/* 1 row of photo thumbnails */
div.photo_thumbnail
    {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 20px;
    }

/* 1 row of spectrogram thumbnails */
div.spectrogram_thumbnail
    {
    margin-top: 20px;
    margin-right: 20px;
    }

/* box around entire spectrogram section.                        */
/* all spectrogram thumbnail positions are relative to THIS box! */
div.spectrogram_thumbnail_f1
    {
    position: absolute;
    width: 96%;
    height: 400px;
    border: none;
    }


/* thumbnail_nnn  */

/* normal photo thumbs */
img.thumbnail_105
    {
    height: 105px;
    margin-left: 10px;
    margin-right: 10px;
    border-style: none;
    }

img.thumbnail_150
    {
    height: 150px;
    margin-left: 10px;
    margin-right: 10px;
    border: none;
    }

/* for spectrograms */
img.thumbnail_250
    {
    width: 250px;
    margin-left: 10px;
    margin-right: 10px;
    border: solid 1px black;
    vertical-align: top;
    }



/* positions for thumbnails */
.sg_th_c1 
    {
    position: absolute;
    left: 10px;
    }

.sg_th_c2 
    {
    position: absolute;
    left: 300px;
    }

.sg_th_l1 
    {
    position: absolute;
    top: 0px;
    }

.sg_th_l2 
    {
    position: absolute;
    top: 150px;
    }

.sg_th_l3 
    {
    position: absolute;
    top: 300px;
    }


/* spectrogram thumbnail legends */
.sg_th_legend 
    {
    position: absolute;
    width: 252px;
    margin-left: 10px;
    font-size: 12px; 
    background-color: #D7D7D7;
    }




/******************************************************************
 *
 * ETC
 *
 ******************************************************************/

/* dummy div id, serves as anchor for "to_top". */
div#to_top { position: absolute; top: 0px; }

/*
 * scientific name
 * for box with species names on main species page
 */
span.sn
    {
    font-style: italic;
    font-weight: normal;
    color: black;
    }

/* english name */
span.en
    {
    font-style: normal;
    font-weight: normal;
    color: black;
    }

/* brasilian name */
span.bn
    {
    font-style: normal;
    font-weight: 600;
    color: black;
    }

/* Synonym + author of species */
div#synonyms
    {
    font-size: 12px; 
    }

span.syn
    {
    font-style: italic;
    font-size: 12px;
    color: black;
    }

span.auth 
    {
    font-style: normal;
    font-size: 11px;
    color: black;
    }

span.auth_ind
    {
    position: relative;
    left: 15px;
    font-style: normal;
    font-size: 11px;
    color: black;
    }

/* Synonyms of subspecies, or PSC species */
span.s_syn
    {
    font-style: italic;
    font-size: 12px;
    color: maroon;
    }

span.s_auth 
    {
    font-style: normal;
    font-size: 11px;
    color: maroon;
    }

span.s_auth_ind
    {
    position: relative;
    left: 15px;
    font-style: normal;
    font-size: 11px;
    color: maroon;
    }


/* Text bar below photos and spectrograms */
div.date_place_etc_f1
    {
    padding-left: 10px;
    padding-right: 10px;
   
    background-color: #D7D7D7;
    font-size: 12px;
    }


.pre 
    {
    white-space: pre;
    }

/* for example for tags for vim */
.nd 
    {
    display: none;
    }


h1,h2 
    {
    color: green;
    background-color: white;
    text-align: center; 
    }

h3 
    { 
    color: black;
    background-color: white;
    text-align: center; 
    }





/**********************************************************************
 *
 *              New
 *
 **********************************************************************/

a.navigation_prev_next 
    {
    cursor: pointer;
    color: #4A2885; 
    text-decoration: underline;
    }


div.txt_col_f1 
    {
    position: absolute;
    left: 10px;
    width: 500px;
    }

div.txt_col_f2 
    {
    position: relative;
    left: 10px;
    width: 500px;
    }




div.navigation_L0_f1
    {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 800px;

    margin-top: 0px;     
    padding-left: 0px;
    padding-right: 0px;

    text-align: center;
    font-size: 16px;
    font-weight: 700;

    /* border: 2px solid gray; */
    }

div.navigation_L0
    {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 800px;

    margin-top: 0px;     
    padding-left: 0px;
    padding-right: 0px;

    text-align: center;
    font-size: 16px;
    font-weight: 700;

    /* border: 2px solid gray; */
    }


div#rppn_venda_species
    { 
    text-align: left;
    /* text-decoration: blink; */
    font-size: 14px;
    font-weight: 600;

    padding: 15px;

    border: none;
    background: #FFFBC6;
    border: 2px dotted black;
    margin-bottom: 10px;
    }


div#rppn_venda
    { 
    position: absolute;
    top: 500px;
    left: 50px;
    width: 210px; 
    width: 206px; 
    height: auto; 

    text-align: left;
    text-decoration: blink; 
    font-size: 14px;
    font-weight: 600;

    padding: 15px;

    background: #FFFBC6;
    border: 2px dotted black;
    }


div#news
    { 
    position: absolute;
    top: 475px;
    left: 50px;
    width: 210px; 
    height: auto; 

    text-align: left;
    font-size: 14px;
    font-weight: 600;
    padding: 15px;

    border: none;
    background: #89CA9D; 
    }


div#google
    { 
    position: absolute;
    top: 80px;
    left: 0px;
    width: 100%; 
    height: auto;

    overflow: auto; 
    padding: 15px;
    }


div#fatbirder
    { 
    position: absolute;
    top: 600px;
    left: 50px;
    width: 210px; 
    height: auto; 

    padding: 15px;
    }

.fatbirder_logo_l0
    {
    position: absolute;
    left: 200px;
    height: 100px;
    padding-bottom: 10px;
    }

.fatbirder_logo_l1
    {
    padding-bottom: 10px;
    }


div.txt_col_L0
    {
    position: absolute;
    top: 60px;
    left: 100px;
    width: 600px;
    padding-right: 100px;
    text-align: justify;
    }

/* for screen display of the jacu internal pages */
div.txt_col_L0_wbg
    {
    position: absolute;
    top: 60px;
    left: 150px;
    width: 600px;
    padding-right: 100px;
    text-align: left;
    }


div.txt_col_L1
    {
    position: absolute;
    top: 160px;
    left: 300px;
    width: 600px;

    padding-right: 100px;
    text-align: justify;
    }


div.txt_col_L0_f1
    {
    position: absolute;
    top: 60px;
    left: 20px;
    width: 600px;

    height: 90%; 

    padding-top: 10px;
    padding-left: 90px;
    padding-right: 80px;
    
    text-align: justify;
    overflow-y: scroll; 

    border: 2px solid gray; 
    }


/* For the notes of the list_of_species */
span.refs 
    { 
    position: absolute; 
    left: 50%; 
    }

span.abb 
    { 
    font-weight: bold; 
    }

/* snh is sh highlighted = species not yet found.  */
span.snh 
    { 
    font-weight: bold; 
    font-style: italic; 
    }

a.cit 
    { 
    position: absolute; 
    left: 100px; 
    }




/***********************************************************************/
/*            Layout of names index                                    */
/***********************************************************************/


/* text column in sci_names.html */
#index_col 
    { 
    position: absolute;

    top: 70px;
    height: 500px; 
    left: 50px;
    width: 700px;

    text-align: justify;
    overflow: visible; 

    background-color: white; 
    color: Black;
    }


div#outer_index_box 
    { 
    position: absolute; 
    top: 110px;
    left: 170px;
    width: 360px;
    height: 340px;
    /* height: for IE, height is set programmatically in px */

    color: black;
    background-color: transparent;

    border: 2px solid #C2C2C2; 
    }


div#inner_index_box 
    { 
    position: absolute; 
    top: 10px;    
    left: 10px;
    width: 320px;
    
    height: 320px; 

    padding-left: 20px;   

    margin-bottom: 20px;

    overflow: auto;
    color: Black;
    background-color: #D5EAE9;
    }


div#species_detail_box 
    { 
    position: absolute; 
    top: 10%;    
    left: 55%;
    width: 40%;
    height: 75%; 

    padding-left: 20px;   
    padding-top: 20px;

    overflow: auto;
    color: Black;
    background-color: Silver;
    }


div.notes_box
    {
    border: solid 2px gray;
    width: 550px;
    margin-top: 30px;
    margin-bottom: 30px;
    }


/* To english ... Para português */
/* case 0: L0 pages, like introduction */
/* this here is not used ... */
div.lang_c0
    {
    text-align: center;
    color: green;
    background-color: silver;
    font-size: 16px;
    font-weight: 700;

    margin-top: 10px;
    }

/* usd in L0 title menu */
.lang_1
    {
    color: red;
    }

    
/* spans for indentations, position relative */

span.i20
    {
    position: relative; left: 20px;
    }

.i30
    {
    position: relative; left: 30px;
    }

p.no_translation
    {
    text-align: center;
    color: green;
    background-color: silver;
    font-size: 16px;
    font-weight: 700;

    margin-top: 10px;
    }


span.minis
    {
    font-weight: normal;
    color: black;
    }

.not_ready 
    {
    background-color: yellow;
    }

.ready 
    {
    background-color: lime;
    }

.dummy
    {
    background-color: lime;
    }

   

div#home_col_2 
    { 
    position: absolute;
    z-index: 3;

    top: 350px;
    left: 330px;
    width: 300px; 
    height: 260px;
    height: 400px;

    padding: 10px;

    background: #FFFBC6; 
    border: 2px dotted black;

    overflow: auto;
    }


span.fig_txt
    {
    font-size: 11px;
    }


/*********************************************************************/
/*        NEW DEFINITIONS FOR NEW MDL SITE                           */
/*********************************************************************/

body#new_mdl_body
    {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    background: white;
    min-width: 1020px;
    }

div#area_outer
    {
    position: relative;
    top: 10px;
    height: 1320px;
    width: 1006px;
    margin-left: auto;
    margin-right: auto;
    background: white;
    }

div#area_all
    {
    position: absolute;
    top: 10px;
    height: 1300px; 

    left: 10px;
    width: 980px;

    background: white;
    border: 3px solid green;

    /* overflow: scroll-y; */
    overflow: visible;
    z-index: 1;
    }


div#area_header
    {
    position: absolute;
    top: 10px;
    height: 120px;
    left: 10px;
    width: 960px;

    /* khaki */
    background: #F0E68C;
    border: none;
    }


div#area_main
    {
    position: absolute;
    top: 130px;
    height: 1000px;

    left: 0px;
    width: 980px;
    }

div#links_bottom
    {
    position: absolute;
    top: 1180px;
    height: 80px;
    left: 860px;
    width: 100px;

    background: transparent;
    border: none;
    z-index: 2;
    }


div#area_bottom
    {
    position: absolute;
    top: 1180px;
    height: 100px;
    left: 10px;
    width: 960px;

    background: white;
    background: #F0E68C;
    }

div#area_text_page
    {
    position: absolute;
    top: 80px;
    width: 700px; 
    left: 100px;
    }


div#area_birds_hermann
    {
    position: relative;
    top: 0px;
    height: 200px;
    left: 0px;
    width: 100%;

    background: #E6E6FA;
    border: 1px dotted green;
    }


div#area_mdl_flora_fauna
    {
    position: relative;
    top: 30px;
    height: 240px;
    left: 0px;
    width: 100%;

    background: #FFFBC6;
    border: 1px dotted green;
    }


div#area_blog
    {
    position: relative;
    top: 50px;
    height: 210px;
    left: 0px;
    width: 100%;

    background: #E6E6FA;
    border: 1px dotted green;
    }


div#area_highlight
    {
    position: relative;
    top: 50px;
    height: 210px;
    left: 0px;
    width: 100%;

    background: #E6E6FA;
    border: 1px dotted green;
    }


div#area_mdl
    {
    position: relative;
    top: 50px;
    height: 100px;
    left: 0px;
    width: 100%;

    background: #E6E6FA;
    border: 1px dotted green;
    }


span.expln
    {
    border-bottom: 1px green dashed;
    }



/* For List - next - prev block */
div#links_H_L_n_p
    {
    height: 170px;
    padding: 10px;
    padding-top: 20px;
    width: 202px;
    text-align: center;
    background-color: #BEDFC4;
    }

div#links_H_L
    {
    height: 170px;
    padding: 10px;
    padding-top: 20px;
    width: 202px;
    text-align: center;
    background-color: #BEDFC4;
    }

/* this is the box with names, links to figures etc. */
div#species_header_box
    {
    position: relative; 
    top: 0px; 
    height: 90px; 
    margin-bottom: 10px;
    width: 650px;
    background: #CCCCCC;
    border: 2px dotted black;
    }


/* same as species_f3_eng. For easy alternation. */
div#species_f3_bras
    {
    position: absolute; 
    height: 70px;
    width: 230px;
    padding: 10px;
    border-right: 1px dotted black;
    text-align: center;
    }


/* same as species_f3_bras. For easy alternation. */
div#species_f3_eng
    {
    position: absolute; 
    height: 70px;
    width: 230px;
    padding: 10px;
    border-right: 1px dotted black;
    text-align: center;
    }


div#links_figs
    {
    position: absolute;
    height: 70px;
    left: 290px;
    width: 180px;
    padding: 10px;
    background: transparent;
    border-right: 1px dotted black;
    }
    
div#links_figs_1
    {
    position: absolute;
    height: 70px;
    left: 260px;
    width: 210px;
    padding: 10px;
    background: transparent;
    border-right: 1px dotted black;
    }
    
div#links_figs_2
    {
    position: absolute;
    height: 70px;
    left: 370px;
    padding: 10px;
    background: transparent;
    }
    
div#links_dtl_pages
    {
    position: absolute;
    height: 40px;
    left: 500px;
    padding: 10px;
    background: transparent;
    }

div#area_main_col_left
    {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 270px;
    }

div#area_main_col_left_01
    {
    position: absolute;
    top: 0px;
    left: 20px;
    width: 270px;
    }

div#area_main_col_right
    {
    position: absolute;
    top: 20px;
    left: 310px;
    width: 670px;

    padding-right: 20px; 
    padding-bottom: 20px;
    overflow: auto;
    }

div#species_taxonomy_distribution
    {
    position: relative;
    width: 634px; 
    margin-top: 0px;
    margin-bottom: 20px;
    background-color: #F4E8F0;
    color: black;
    padding: 10px;
    padding-bottom: 10px;
    }

div#species_header_references
    {
    position: relative;
    width: 630px; 
    margin-top: 10px;
    margin-bottom: 0px;
    background-color: #F4E8F0;
    color: black;
    font-size: 12px;
    }

div#aviso_main_page
    {
    text-align: center;
    padding: 10px;
    background-color: #F4E8F0;
    margin-bottom: 10px;
    width: 630px;
    font-size: 16px;
    }

div#subspecies
    {
    margin-top: 0px;
    }




/* not for screen */
.nfs
    {
    display: none;
    }
    

/* fix for "R" button bug. Spans whole col in IE */
#button_random_species {

    width: 40px;
}

/* fix for "R" button bug. Spans whole col in IE */
#button_random_species_01 {

    width: 40px;
}

/* for mdl flag in list_of_species */
div.not_mdl_flag
    {
    color: transparent;
    display: inline;
    }

.mdl_flag
    {
    color: red;
    display: inline;
    }

/* for species pages: occurs, or not. In all headers! */
/* Careful, is used for span, p, div. Display: use only ON or OFF (none) */
.mdl_occurence
    {
    color: red;
    border-bottom: 1px green dashed;
    display: none;
    }

.inc_mdl_left_col_L1_00_header_00
    {
    color: green;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    margin-top: 10px;
    }

.highlighted_box_in_text 
    {
    background: #A4D4B0;
    padding: 10px;
    border: 2px dashed red;
    }


.disabled
    {
    pointer-events: none;
    cursor:  default;
    color: gray;
    }