/* =General
-----------------------------------------------------------------------------*/


/* Remove padding and margin */
* {
    margin: 0;
    padding: 0;
}

/* Put it back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
    margin: 1em 0;
}

/* Class for clearing floats */
.clear {
    clear:both;
}

.cleardiv {
  clear: both;
  height:0px;
  font-size:1px;
  border: 0px;
  margin:0px;
  padding:0px;
}

/* Remove border around linked images */
img {
    border: 0em;
}

input#submit {
 background-color:#40C340;
 background-color:#88FF97; /*Lightgreen*/
 background-color:#40C482;
 background-color:#80FF95;
}

input#reset {
 background-color:#C34040;
 background-color:#FF3377;
 background-color:#FF4444; /*coral*/
 background-color:#FF4040;
}


.link {
width: 0.8em;
height: 0.8em;
}


/* =Center the design using auto margins
-----------------------------------------------------------------------------*/

/* A fix for IE 5.x and IE 6 - see Andy Budd's book pg 135 */
body {
    text-align: center;
    font-family: Arial, Geneva, sans-serif;
    font-size: 62.5%; 
}

/* A fix for IE 5.x and IE 6 - see Andy Budd's book pg 135 */
#wrapper {
    width: 79em;
    margin: 0 auto;
    text-align: left;
}







/* =Header for the Homepage
-----------------------------------------------------------------------------*/
#homepageheader {
    position: relative;
    width: 100%;        /* Dimensions need to be set for IE 5.x and IE 6 - see Andy Budd's book pg 36 */
    height: 7.2em;
    color: #000000;
    background-color: #CCCCCC;
}

#homepageheader #titlecontainer {
    float: left;
    width: 63%;
    left: 37%;
    margin: 0em;
    padding: 0em;
}

#homepageheader #titlecontainer p {
    text-align: center;
    font-weight: 500;
    font-size: 2em;
    margin: 0em;
    padding: 1.25em 0em 0em 0em;
}

#homepageheader #logo {
    float: left;
    width: 37%;
    height: 7.2em;
}

#homepageheader img {
    float: left;
    width: 100%;
    height: 100%;
}

#homepageheader #logo a {
    position: absolute;
    width: 10.1em;
    height: 4.2em;
    top: 1.5em;
    left: 0em;
    text-indent: -999em;
    text-decoration: none;
}

#homepageheader #logo a img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0em;
    left: 0em;
}

#homepageheader #beta_notice {
    position: absolute;
    left: 21.5em;
    top: 0.3em;
    font-size: 1.4em;
    color: #AF0000;
}


#homepageheader #bug {
    position: absolute;
    right: 0.8em;
    top: 0.3em;
    font-size: 1.4em;
}


#homepageheader #release_notice {
    position: absolute;
    left: 26.6em;
    top: 0.3em;
    font-size: 1.1em;
    color: #AF0000;
    width: 44.9em;
    text-align: center;
}


/* =GeneralTypography
=============================================================================*/


a {
    color: #0000CE;
    background-color: transparent;
    text-decoration: none;
    outline: none;        /* Required to remove the dotted lines around used links in firefox 1.5*/
}

a:visited {
    color: #CC0099;
    background-color: transparent;
}

a:hover,
a:focus, 
a:active{
    color: #FF0000;
    background-color: transparent;
    text-decoration: underline;
}

.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.underline {
    text-decoration: underline;
}

.left {
    text-align: left;
}
.centre {
    text-align: center;
}
.right {
    text-align: right;
}




/* =Navigation Bar Positioning and search box
-----------------------------------------------------------------------------*/
#navbar {
    position:relative;
    width:100%;
    font-size: 150%;  /* Change the font size to avoid render problem with the width!*/
    height: 1.8em;    /* Covers up a render problem seen on the right hand side of the menu bar on PCs and Firefox(Mac)
                         change the Font size and vertical padding in conjunction with this!*/
    background-color: #003366;
    padding: 0em;
    border: 0em;
    margin: 0em;
    z-index: 20; /* Required to remove menu container from normal stacking order - otherwise drop-under menus!! */
}
#searchwrap {
    clear: left;
    float: right;
    width:16em;
    height: 1em;
    padding: 0em;
    border: 0em;
    margin: 0em;
}

#search {
    clear: left;
    position: absolute;
    right: 0.5em;
    top: -0.75em;
    padding: 0em;
    border: 0em;
    margin: 0em;    
}

#search form label input {
    border-top: 0.1em solid #999;
    border-left:  0.1em solid #ccc;
    border-bottom: 0.1em solid #ccc;
    border-right: 0.1em solid #ccc;
}

input:focus, textarea:focus {
    background: #ffc;
}



/* =Menu dervied from the "Son Of Suckerfish" approach:
 (http://www.htmldog.com/articles/suckerfish/dropdowns/)
-----------------------------------------------------------------------------*/


#nav, #nav ul {
    float: left;
    width: 52.666666667em; /* Not 79em (ie normal 100% width) because font now 150% !!*/
    list-style: none;
    line-height: 1em;                    /* 1.5 looks nice but required for additional menu levels */
    background-color: #003366;
    font-weight: 500;
    padding: 0;
    margin: 0 0 0em 0; /* Essential to get Opera and IE to work properly */
    color: #FFFFFF;
    z-index: 20;
}

#nav ul {
    border: solid #CCC;
    border-width: 0.1em;  
    background-color: #FFFFFF;

}



#nav a {
    display: block;
    cursor: default;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0.25em 2em;
    padding: 0.4em 0.2em; /* Alter this to control the Main menu bar spacing:
                             First figure: is the vertical spacing of ALL items
                             in a menu (including the item in the main menu).
                             Second Figure: padding of items relative to neighbours
                          */
}



#nav li#menutitle_home {
    width: 4em;
}

#nav li#menutitle_tools {
    width: 4em;
}

#nav li#menutitle_downloads {
    width: 3.5em;
}

#nav li#menutitle_species {
    width: 5em;
}

#nav li#menutitle_reference {
    width: 6.5em;
}

#nav li#menutitle_links {
    width: 6em;
}

#nav li#menutitle_news {
    width: 3.75em;
}

#nav li#menutitle_help {
    width: 3.25em;
}

#nav li#menutitle_oldrelease {
    width: 6em;
}


/* Controls the indent on drop down items
----------------------------------------*/
.indent {
    padding-left: 0.5em;
    font-size: 0.85em;
}

#nav li li a {
    color: #000000;
    cursor: pointer;
}

#nav li li a.normalcursor {
    color: #000000;
    cursor: default;
}

#nav li li div.normalcursor {
    color: #000000;
    cursor: default;
    display: block;
    text-decoration: none;
    margin: 0em;
    border: none;
    padding: 0.4em 0.2em; /* Alter this to control the Main menu bar spacing:
                             First figure: is the vertical spacing of ALL items
                             in a menu (including the item in the main menu).
                             Second Figure: padding of items relative to neighbours
                          */
}

#nav li {
    float: left;
    width: 10em;               /* Ensures items in the SUB menu bar don't wrap ie set to same size */
    white-space: nowrap;
}

#nav li#menutitle_home a {
    cursor: pointer;
}


.normalspace {
    white-space: normal;
    line-height: 1em;
}

.line {
    line-height: 1em;
}

#nav li ul {
    position: absolute;
    width: 10em;               /* Adjusts the SUB menu bar size */
    left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;    
}

#nav li:hover, #nav li.sfhover {    /* Set the HOVER colour of the MAIN BAR */
    background: #000000;
}


#nav li li:hover, #nav li li.sfhover { /* Set the HOVER colour of the SUB items */
    background-color: #B3B3B3;
    color: #000000;
    width: 10em;               /* Adjusts the SUB menu bar size */
}

#nav li li.navbar_label { /* Set the HOVER colour of labels (eg. Stock Collections) in the drop down menus */
    background-color: #FFF;
}

/************* Rules for 2-level menus *************/


.navmenubarleft {
    float: left;
}

.navmenubarright {
    float: right;
}
.navmenubarright img{
    width: 0.3em;
    height: 0.6em;
    padding: 0.1em 0.1em 0.1em 0em;
    margin: 0em;
}

#nav li ul ul {
    margin: -1.9em 0 0 10em; /* 10 is the width of the additional levels;
                                 -1.9 used to adjust the height of the first line in additional menu */
}


/* - Hide the third layer when second revealed */

#nav li:hover ul ul, #nav li.sfhover ul ul {
    left: -999em;
}

/* - Contradict rule immediately above on HOVER to reveal the 2nd level */

#nav li li:hover ul, #nav li li.sfhover ul {
    left: auto;
}

/************* Rules for 3-level menus *************/
/*
#nav li:hover ul ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}

#nav li li li:hover ul, #nav li li li.sfhover ul {
    left: auto;
}
*/
/************* Rules for 4-level menus *************/
/*
#nav li:hover ul ul ul ul, #nav li.sfhover ul ul ul ul {
    left: -999em;
}

#nav li li li li:hover ul, #nav li li li li.sfhover ul {
    left: auto;
}
*/
/* =Main Content
-----------------------------------------------------------------------------*/


#content {
    clear: left;  /* This is very important for the menu to work properly !!! */
  margin-bottom: 2em;
}





/* =Styling for the contents of the page
-----------------------------------------------------------------------------*/


















/* =Footer
-----------------------------------------------------------------------------*/
#footer {
    position: relative;
    width: 100%;        /* Dimensions need to be set for IE 5.x and IE 6 - see Andy Budd's book pg 36 */
    height: auto;
    color: #000000;
    background-color: #CCCCCC;
    margin: 0em;
    border: 0em;
    padding: 0em 0em 1.1em 0em;    /* Add margin at the bottom of the footer */
}

#footer p {
    padding: 1.1em 0em 0em 0em;
    margin: 0em;
    border: 0em;
    font: 1.1em Arial, Geneva, sans-serif;
    text-align: center;
    line-height: 1.8em;
}

#release {
//    padding-left: 5em;
}

#social {
    position: absolute;
    right: 5em;
    bottom: 0.9em;
}

#social a {
    padding-right: 0.5em;
}


.wordwrap {
	/* wrap long text and urls */
	white-space: pre; /* CSS 2.0 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3.0 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	word-wrap: break-word; /* IE 5+ */
}