/*
   @name: lifemapper.css
   @author: CJ Grady
   @summary: Main style sheet for Lifemapper web site
*/

/* ========================================================================= */
/* =                                Globals                                = */
/* ========================================================================= */
body
   /*
   @summary: The body of all Lifemapper pages
   */
{
   background-color: #efefef;
   color: #000044;
   height: 100%;
   margin: 0;
   padding: 0;
}

html
   /*
   @summary: Global settings for Lifemapper html pages
   */
{
   font-family: Arial, sans-serif;
   font-size: 1.0em;
   height: 100%;
   margin: 0;
   padding: 0;
}

h1
   /*
   @summary: Style for all h1 elements
   */
{
   font-size: 1.8em;
   font-weight: bold;
}

h2
   /*
   @summary: Style for all h2 elements
   */
{
   font-size: 1.5em;
   font-weight: bold;
}

h3
   /*
   @summary: Style for all h3 elements
   */
{
   font-size: 1.2em;
   font-weight: bold;
}

/* ------------------------------------------------------------------------- */

/* ========================================================================= */
/* =                                  Ids                                  = */
/* ========================================================================= */
#bd
   /*
   @summary: Main div on provider statistics page
   */
{
   position: relative;
   z-index: 10;
   padding-bottom: 10px;
}

#container
   /*
   @summary: Main page container
   */
{
   background-color: #ffffff;
   margin-left: auto;
   margin-right: auto;
   min-height: 100%;
   position: relative;
   top: 0px;
   width: 1024px;
   z-index: 0;
   height: auto !important;
   height: 100%;
}

#loadingBkgrd
   /*
   @summary: Container on species page that indicates that the map background 
                is loading
   */
{
   font-weight: bold;
   padding: 5px;
}

#loadingLayers
   /*
   @summary: Container on species page that indicates that the map projection 
                is loading
   */
{
   font-weight: bold;
   padding: 5px;
}


#loadingPoints
   /*
   @summary: Container on species page that indicates that the map point layer 
                is loading
   */
{
   font-weight: bold;
   padding: 5px;
}

#mainText
   /*
   @summary: Main body for page (inside of main container between banner and 
                footer
   */
{
   color: #000088;
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 30px;
   padding-top: 10px;
   text-align: left;
   width: 90%;
   z-index: 0;
}

#map
   /*
   @summary: Div for map display section on species page
   */
{
   border: solid 1px #000099;
   height: 400px;
   margin: 0 0 10px 0;
   padding: 0;
   width: 800px;
   position: relative;
   z-index: 0;
}

/* ------------------------------------------------------------------------- */

/* ========================================================================= */
/* =                                Anchors                                = */
/* ========================================================================= */
a.giSearchLink
   /*
   @summary: Link to a Google Image search for a particular species / taxa
   */
{
   font-size: 0.8em;
   vertical-align: middle;
}

a.spOccLink
   /*
   @summary: Link to a Lifemapper occurrence set on the species page
   */
{
   font-size: 0.8em;
} 

a.spProjLink
   /*
   @summary: Link to the meta interface of a projection on the species page
   */
{
   font-size: 0.8em;
}

/* ------------------------------------------------------------------------- */

/* ========================================================================= */
/* =                                 Divs                                  = */
/* ========================================================================= */
div.footer
   /*
   @summary: Page footer
   */
{
   /* background-color: #41608b; */
   color: #7190bb;
   font-size: 0.8em;
   height: 30px;
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 5px;
   padding-top: 10px;
   text-align: center;
}

div.hidden
   /*
   @summary: Hidden divs, this should only be a temporary state
   */
{
   display: none;
}

div.genusBrowser
   /*
   @summary: Pane on the left side of the species page that lists other species
                in the same genus as the species displayed in the map
   */
{
   border: solid 1px #000099;
   height: 400px;
   overflow: auto;
   width: 180px;
}

div.loginDiv
   /*
   @summary: Log in div displayed on login pages
   */
{
   border: solid 1px #000099;
   margin-left: auto;
   margin-right: auto;
   padding: 10px;
   text-align: center;
   width: 50%;
}

div.popUp
   /*
   @summary: Pop up displaying information for the user.  Displayed when 
                uploading data on the on demand page or displaying a message
                about javascript.
   */
{
   background-color: #eeeeee;
   border: solid 2px #000000;
   height: 70%;
   left: 15%;
   overflow: auto;
   padding: 10px;
   position: fixed;
   text-align: center;
   top: 15%;
   width: 70%;
   z-index: 9999;
}

div.popUpDiv
   /*
   @summary: Div containing information to be displayed in a pop up
   */
{
   height: 50%;
   position: relative;
   text-align: center;
   top: 25%;
}

div.popUpOverlay
   /*
   @summary: An overlay that is displayed over a page and behind a popup.  This
                will be displayed when a user is uploading data or when a 
                message about javascript is displayed.
   */
{
   background-color: #000000;
   filter: alpha(opacity=30);
   height: 100%;
   left: 0px;
   opacity: 0.6;
   position: fixed;
   top: 0px;
   width: 100%;
   z-index: 9998;
   -moz-opacity: 0.3;
}

div.probGrad
   /*
   @summary: Div containing a probability gradient on the species page
   */
{
   padding-bottom: 10px;
   text-align: center;
}

div.serviceDescription
   /*
   @summary: Contains a description of the service
   */
{
   display: block;
}

div.show
   /*
   @summary: Shows an element
   */
{
   display: block;
}

div.signup
   /*
   @summary: Container on signup page
   */
{
   border: solid 1px #000099;
   margin-left: auto;
   margin-right: auto;
   padding: 10px;
   text-align: center;
   width: 50%;
}

div.speciesPageErrorMessage
   /*
   @summary: Container for error message on species page
   */
{
   color: #000088;
   font-size: 0.9em;
}

div.speciesPageText
   /*
   @summary: Contains some text explaining the species page
   */
{
   display: block;
   font-size: 0.9em;
   text-align: center;
}

/* ------------------------------------------------------------------------- */

/* ========================================================================= */
/* =                                Headers                                = */
/* ========================================================================= */
h1.stats
   /*
   @summary: Header on provider stats page
   */
{
   padding: 5px;
   text-align: center;
}

h2.stats
   /*
   @summary: Header on statistics page
   */
{
   padding: 5px;
   text-align: center;
}

/* ========================================================================= */
/* =                                Images                                 = */
/* ========================================================================= */
img.contact
   /*
   @summary: Lifemapper team headshots
   */
{
   /*height: 100px;*/
   width: 100px;
}

img.lmFrontPageInlineLogo
   /*
   @summary: Lifemapper logo on front page
   */
{
   display: inline;
   float: right;
}

img.odScreenshot
   /*
   @summary: Screenshots for on demand steps
   */
{
   border: solid 1px #000000;
}

img.partners
   /*
   @summary: Images for related institutions and groups (about page)
   */
{
   border: none;
}

/* ------------------------------------------------------------------------- */

/* ========================================================================= */
/* =                                 Lists                                 = */
/* ========================================================================= */
/* List Item Elements                                                        */
/* -------------------------------                                           */

/* Ordered List Elements                                                     */
/* -------------------------------                                           */
ol.serviceInstructions
   /*
   @summary: List of service instructions
   */
{
   list-style-type: decimal;
   padding-left: 50px;
}

/* Unordered List Elements                                                   */
/* -------------------------------                                           */
ul.serviceInstructions
   /*
   @summary: List of service instructions
   */
{
   list-style-type: disc;
   padding-left: 50px;
}

ul.servicesProvided
   /*
   @summary: List of services provided (webServices.shtml)
   */
{
   display: block;
   list-style-type: disc;
   padding-left: 50px;
}


/* ------------------------------------------------------------------------- */

/* ========================================================================= */
/* =                              Paragraphs                               = */
/* ========================================================================= */
p.statsText
   /*
   @summary: Text explaining Lifemapper statistics (/statistics/)
   */
{
   padding: 10px;
   text-align: left;
}

/* ------------------------------------------------------------------------- */

/* ========================================================================= */
/* =                                 Spans                                 = */
/* ========================================================================= */
span.code
   /*
   @summary: Span containing some code
   */
{
   background-color: #f8f8f8;
   border: solid 1px #000000;
   color: #000000;
   display: block;
   font-family: monospace;
   white-space: pre;
}
   
span.contactName
   /*
   @summary: Lifemapper team member contact name style (about page)
   */
{
   font-size: 1.0em;
   font-weight: bold;
}

span.contactTitle
   /*
   @summary: Lifemapper team member contact title style (about page)
   */
{
   font-weight: bold;
}

span.formatDescription
   /*
   @summary: Contains a description of the format
   */
{
   display: block;
   padding-bottom: 20px;
   padding-left: 20px;
   padding-top: 10px;
}

span.formatDescriptionHeader
   /*
   @summary: Contains a header for the format description
   */
{
   display: block;
   font-size: 2.0em;
   font-weight: bold;
}

span.formatExample
   /*
   @summary: An example of a response in a format
   */
{
   background-color: #ffffff;
   border: solid 1px #000000;
   color: #000000;
   display: block;
   font-family: Courier New, monospace;
   padding: 10px;
}

span.formatExampleContainer
   /*
   @summary: Contains an example of a response in a format
   */
{
   display: block;
   padding-bottom: 20px;
   padding-left: 20px;
   padding-top: 10px;
}

span.formatExampleHeader
   /*
   @summary: Header for an example response for a format
   */
{
   display: block;
   font-size: 1.6em;
   font-weight: bold;
   padding-left: 10px;
}

span.formatExplanation
   /*
   @summary: Contains text explaining a format
   */
{
   display: block;
   padding-bottom: 20px;
   padding-left: 20px;
   padding-top: 10px;
}

span.formatExplanationHeader
   /*
   @summary: Header for the format explanation
   */
{
   display: block;
   font-size: 1.6em;
   font-weight: bold;
   padding-left: 10px;
}

span.hidden
   /*
   @summary: Set the classname to this to hide a span
   */
{
   display: none;
}

span.luceneCounts
   /*
   @summary: Format for counts associated with a lucene response (number of 
                models, etc.)
   */
{
   color: #444444;
}

span.notification
   /*
   @summary: Notification text.  This is used when an urgent message needs to 
                be sent to the user
   */
{
   color: #ff0000;
   display: block;
   padding-bottom: 10px;
}

span.partners
   /*
   @summary: Style for containing span for related institutions / groups 
                (about page)
   */
{
   padding-left: 20px;
   padding-right: 20px;
}

span.prjLyrItem
   /*
   @summary: Container for projection information on the species page
   */
{
   display: block;
   font-size: 0.87em;
   padding-bottom: 3px;
   text-align: left;
}

span.serviceDescription
   /*
   @summary: Contains information describing a service (help pages)
   */
{
   display: block;
   padding-bottom: 20px;
   padding-left: 10px;
}

span.serviceDescriptionHeader
   /*
   @summary: Header for service description (help pages)
   */
{
   display: block;
   font-size: 2.0em;
}

span.serviceIndivInstructions
   /*
   @summary: Contains instructions for getting an individual service item
   */
{
   display: block;
   padding-bottom: 20px;
   padding-left: 10px;
}

span.serviceIndivInstructionsHeader
   /*
   @summary: Header for instructions
   */
{
   display: block;
   font-size: 2.0em;
}

span.serviceListInstructions
   /*
   @summary: Contains information for getting a list of service items
   */
{
   display: block;
   padding-bottom: 20px;
   padding-left: 10px;
}

span.serviceListInstructionsHeader
   /*
   @summary: Header for list instructions
   */
{
   display: block;
   font-size: 2.0em;
}

span.servicePostInstructions
   /*
   @summary: Contains instructions for posting an item
   */
{
   display: block;
   padding-bottom: 20px;
   padding-left: 10px;
}

span.servicePostInstructionsHeader
   /*
   @summary: Header for post instructions
   */
{
   display: block;
   font-size: 2.0em;
}

span.signupData
   /*
   @summary: Information entered by the user when they signed up for an account
                (account confirmation page)
   */
{
   color: #666666;
   font-style: italic;
   font-weight: bold;
}

span.signupWelcome
   /*
   @summary: Welcome new user message
   */
{
   display: block;
   font-weight: bold;
   padding-bottom: 20px;
}

span.speciesLabel
   /*
   @summary: Label for lucene response
   */
{
   color: #000088;
   font-size: 0.9em;
}

span.visible
   /*
   @summary: Spans of this class will be displayed inline
   */
{
   display: inline;
}

/* ------------------------------------------------------------------------- */

/* ========================================================================= */
/* =                                Tables                                 = */
/* ========================================================================= */
/* Table Elements                                                            */
/* -------------------------------                                           */
table.contact
   /*
   @summary: Containing table for Lifemapper team member contacts (about page)
   */
{
   background-color: #fcfcff; /*#1c3764*/
   border-bottom: solid 1px #888888;
   border-left: solid 1px #000000;
   border-right: solid 1px #888888;
   border-top: solid 1px #000000;
   /*color: #ffffff;*/
   width: 73%;
}

table.lmStats
   /*
   @summary: Table containing Lifemapper statistics
   */
{
   border: solid 1px #000000;
   width: 95%;
}

table.providers
   /*
   @summary: Table listing providers
   */
{
   border-collapse: collapse;
}

table.speciesList
   /*
   @summary: Table created by autocomplete returned by Lifemapper Lucene module
   */
{
   border: solid 1px #000099;
   border-collapse: collapse;
   width: 100%;
}

/* Table Data Elements                                                       */
/* -------------------------------                                           */
td.contactInfo
   /*
   @summary: Contact information for the Lifemapper team (about page)
   */
{
   font-size: 0.8em;
   text-align: left;
   vertical-align: top;
}

td.contactPic
   /*
   @summary: Picture container for someone on the Lifemapper team (about page)
   */
{
   vertical-align: middle;
   width: 110px;
}

td.contactText
   /*
   @summary: Text about a member of the Lifemapper team (about page)
   */
{
   color: #1c3764;
   font-size: 0.8em;
   text-align: left;
   vertical-align: top;
}

td.genusBrowser
   /*
   @summary: Container for the genus browser div
   */
{
   padding-left: 10px;
   padding-right: 10px;
   vertical-align: top;
}

td.lmStatDescriptionTD
   /*
   @summary: Description of a particular Lifemapper statistic
   */
{
   border: solid 1px #000000;
   color: #555555;
   font-size: 0.9em;
   padding: 7px;
   text-align: left;
   vertical-align: middle;
}

td.lmStatTD
   /*
   @summary: Contains the value of a Lifemapper statistic
   */
{
   border: solid 1px #000000;
   padding: 7px;
   text-align: right;
   vertical-align: middle;
}

td.mapSection
   /*
   @summary: Contains a map and associated information on the species page
   */
{
   vertical-align: top;
   width: 820px;
}

td.noResults
   /*
   @summary: Present if no results are returned for the species page
   */
{
   padding-top: 10px;
}

td.pntLyrItem
   /*
   @summary: Contains information about an occurrence set available for the 
                map on the species page
   */
{
   font-size: 0.87em;
   text-align: left;
}

td.providerTD
   /*
   @summary: Table data element in the providers table interface
   */
{
   border: solid 1px #000000;
   padding: 5px;
   text-align: center;
}

td.signupInput
   /*
   @summary: Contains an input box used when a new user is signing up
   */
{
   padding: 2px;
}

td.signupLabel
   /*
   @summary: Field label for user sign up form
   */
{
   padding: 2px;
   text-align: right;
}

td.signupRequired
   /*
   @summary: Contains information indicating if a field is required when 
                signing up a new user
   */
{
   color: #ff0000;
}

td.speciesBrowserLabel
   /*
   @summary: Container for the species browser label
   */
{
   padding-left: 10px;
}

td.speciesList
   /*
   @summary: Item in the list of species in the genus browser (species page)
   */
{
   color: #999999;
   font-size: 0.8em;
   padding: 2px 5px;
   text-align: left;
}

td.speciesListMatch
   /*
   @summary: Item in the list of species in the genus browser that is active
   */
{
   background-color: #ffcd99;
   color: #999999;
   font-size: 0.8em;
   padding: 2px 5px;
   text-align: left;
}

td.speciesSearchTD
   /*
   @summary: Contains the species search input box
   */
{
   text-align: center;
}

td.top
   /*
   @summary: Alignment for each contact on the about page
   */
{
   vertical-align: top;
}

/* Table Header Elements                                                     */
/* -------------------------------                                           */
th.lmStatTH
   /*
   @summary: Label for a Lifemapper statistic
   */
{
   border: solid 1px #000000;
   font-size: 1.0em;
   padding: 7px;
   text-align: right;
   vertical-align: middle;
}

th.providerTH
   /*
   @summary: Provider attribute header for provider statistics table
   */
{
   background-color: #eff5f5;
   border: solid 1px #000000;
   padding: 5px;
   text-align: center;
}

/* Table Row Elements                                                        */
/* -------------------------------                                           */
tr.even
   /*
   @summary: Even row of results
   */
{
   background-color: #eeeeff;
}

tr.evenSpeciesRow
   /*
   @summary: Even row of results for species list
   */
{
   background-color: #ddddff;
   text-align: left;
}

tr.odd
   /*
   @summary: Odd row of results
   */
{
   background-color: #ffffff;
}

tr.oddSpeciesRow
   /*
   @summary: Odd row of results for species list
   */
{
   background-color: #f8f8f8;
   text-align: left;
}

/* ------------------------------------------------------------------------- */

/* ========================================================================= */
/* =                                  Banner                               = */
/* ========================================================================= */
/* Top image map container */
#banner
{
   top: 0px;
}

/* Banner image */
img.banner
{
   width: 100%;
}

a.bannerLink
{
   color: #ffffff;
   text-decoration: none;
   font-weight: bold;
}

td.aboutTD
{
   padding-right: 30px;
   text-align: right;
   width: 50%;
}

td.bannerTD
{
   padding-left: 15px;
   padding-right: 15px;
}

table.banner
{
   left: 0px;
   position: absolute;
   top: 44px;
   width: 100%;
}

#userLogin
{
   color: #ffffff;
   font-size: 10pt;
   position: absolute;
   right: 10px;
   top: 2px;
}

a.loginLink, a.logoutLink
{
   color: #ffffff;
}

span.welcomeMessage
{
   padding-right: 10px;
}

/* ------------------------------------------------------------------------- */

/* ========================================================================= */
/* =                                 Yahoo                                 = */
/* ========================================================================= */
/* 
   Many of the css settings here came from a yui autocomplete example.  Some 
   modifications have been made (such as colors) to fit the Lifemapper style.
   Changes made to these settings should have their effects documented.
*/

#ysearchautocomplete2
{
   /*margin-bottom: 1.5em;*/
   position: relative;
   width: 100%;
   z-index: 10;
} 


#ysearchcontainer2
{
   left: 0px; 

   /*
      Changed position to relative, even though example recommended absolute.
      This moved the ajax selection box directy under the search text box
      instead of to the right of it.
      CJ - 02/25/2008
   */
   position: relative;
   z-index: 10;
   text-align: left; 
   top: -5px; 
   width: 157%;
   left: 0px;
   text-align: left;
}

#ysearchcontainer2 li
{
   cursor: default;
   padding: 0 5px;
   white-space: nowrap;
}

#ysearchcontainer2 li.yui-ac-highlight
{
   background-color: #000044;
   color: #ffffff;
}

#ysearchcontainer2 li.yui-ac-prehighlight
{
   background-color: #00bb00;
   color: #ffffff;
}

#ysearchcontainer2 ul
{
   margin: 0;
   padding: 5px 0;
   width: 100%;
}

#ysearchcontainer2 .yui-ac-content
{
   background: #ffffff;
   border: 1px solid #000044;
   overflow: hidden;
   position: absolute;
   width: 63%;
   z-index: 9050;
}

#ysearchcontainer2 .yui-ac-shadow
{
   background: #009900;
   color: #ffffff;
   margin: .3em;
   position: absolute;
   width: 100%;
   z-index: 9049;
}

#ysearchinput2
{
  color: #1c3764;
  font-family: Verdana, Helvetica, sans-serif;
}

#ysearchmod
{
   /*padding: 1em;*/
   position: relative;
   z-index: 10;
}

/* Calendars                                                                 */
/* ---------------------------------                                         */
table.yui-calendar
{
   border: solid 1px #000000;
   border-collapse: collapse;
}

a.calnavleft, a.calnavright
{
   font-size: 8pt;
   font-weight: normal;
}

td.oom
{
   background-color: #eeeeee;
}

td.selectable
{
}

a.selector
{
   color: #333333;
   text-decoration: none;
   font-weight: bold;
}

td.calcell
{
   border: solid 1px #aaaaaa;
   text-align: center;
}

th.calweekdaycell
{
   font-weight: bold;
   text-align: center;
}

th.calhead
{
   font-size: 11pt;
   font-weight: bold;
}

a.link-close
{
   font-weight: bold;
}

span.calclose
{
   border: solid 1px #000000;
   display: block;
   padding: 1px;
}

/* ------------------------------------------------------------------------- */