/* needed by all */

body {
        margin: 0px 0px 0px 0px;
        padding: 0px;  
        text-align: center; 
        font-family: verdana, arial, sans-serif;
        font-weight: normal;
        background-color: #FFFFFF;
        font-size: 13px;
        background: #7f7f7f url("bkg9.png") repeat-y top center scroll;
}
        
/* The div which holds everything else. Margins should be the same on left and right. Sized to fit a 9.7" iPad screen */
        
#container {
        width: 945px ;
        margin-left: auto ;
        margin-right: auto ;
        border-left: 1px solid #688EBD;
        border-right: 1px solid #688EBD;
        border-bottom: 1px solid #688EBD;
        border-top: 0px solid #688EBD;
}

/* the div which holds the banner jpg */

#header {
        margin:0px auto; 
        text-align:left; 
        background: #ffffff url("new-top-banner.png") no-repeat;
        background-position: left;
        height: 149px;
        padding: 0px 0px 0px 0px;
}

/* the div which holds the search box. aligns right in the header div */

#header2 {
        text-align:right; 
}

/* the left-hand div which holds links to elsewhere */

#navbar {
        float: left;
        width: 170px;
        background-color: #eeeeee;
        border-right: 1px solid #eeeeee;
        text-align: left;
        height: 30000px;
        padding-left: 4px;
        padding-top: 14px;
        font-size: 12px;
}

/* the div which holds the content of the web site. Note 5px wider than the width of navbar. */

#content {
        margin-left:  175px;
        text-align: left;
        padding-left: 4px;
        padding-top: 9px;
        background-color: #eeeeee;
        height: 30000px;
}

/* used where t05 id is used to get tables aligned in divs */

#content1 {
        margin-left:  175px;
        text-align: left;
        padding-left: 4px;
        padding-top: 3px;
        background-color: #eeeeee;
        height: 30000px;
}

/* modifiers to standard html entities */

td {
        FONT-SIZE: 12px; 
        text-align: justify;
}

p {
        margin-top: 0px;
        padding-top: 4px;
        background-color: #eeeeee;
        COLOR: #000000; 
}

a {
        COLOR: #000000; 
        BACKGROUND-COLOR: #eeeeee; 
        margin: 0px 3px 0px 0px; 
        text-decoration: none;
}

a:hover {
        COLOR: #000000; 
        BACKGROUND-COLOR: #eeeeee; 
        margin: 0px 3px 0px 0px; 
        text-decoration: underline;
}

h1 {
        FONT-SIZE: 16px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 5px;
        margin-top: 0px;
        text-align: left;
}

.h1l {
        FONT-SIZE: 16px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 5px;
        margin-top: 0px;
        text-align: left;
}

h2 {
        FONT-SIZE: 14px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 1px;
        margin-top: 1px;
}

.h2l {
        FONT-SIZE: 14px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 1px;
        margin-top: 1px;
		text-align: left;        
}

h3 {
        FONT-SIZE: 10px; 
        COLOR: #000000; 
}

.h3l {
        FONT-SIZE: 12.5px; 
        COLOR: #ff6666; 
        padding-top: 1px;
        margin-top: 1px;
		text-align: left;        
}

h4 {
        FONT-SIZE: 12px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 12px;
        margin-top: 3px;
}

hr {	
		height:1px;	
		width:110px;	
		border:1px solid #000;
}

hr.wide {	
		width:100%;	
}

/* table cells */

td.nj {
        FONT-SIZE: 12px; 
        text-align: left;
}

td.small {
        FONT-SIZE: 11px; 
        text-align: left;
}

.vsmall {
        COLOR: #1c0672; 
        BACKGROUND-COLOR: #ffffff; 
        padding-left: 3px; 
        font-size: 9px;	
        font-weight: bold;
}

.vsmall1 {
        COLOR: #1c0672; 
        padding-left: 3px; 
        font-size: 10px;	
        font-weight: bold;
}

td.smallc {
		font-family:courier;
        FONT-SIZE: 11px; 
        text-align: left;
}

td.caption {
        FONT-SIZE: 11px;
        font-weight: bold; 
        text-align: center;
        padding: 1px 0px 1px 0px;
}

td.caption-l {
        FONT-SIZE: 12px;
        font-weight: bold; 
        text-align: left;
}

td.h1 {
        FONT-SIZE: 16px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 5px;
        margin-top: 0px;
        text-align: center;
}

td.h2 {
        FONT-SIZE: 14px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 5px;
        margin-top: 0px;
        text-align: center;
}

td.h2a {
        FONT-SIZE: 14px; 
        COLOR: #1c0672; 
        font-weight: normal;
}

td.h2b {
        FONT-SIZE: 14px; 
        COLOR: #000000; 
        font-weight: normal;
}

td.h3 {
        FONT-SIZE: 10px; 
        COLOR: #000000; 
}

td.h4 {
        FONT-SIZE: 12px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 3px;
        margin-top: 2px;
}

td.h4a1 {
        FONT-SIZE: 12.5px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 5px;
        margin-top: 5px;
        background-color: #FFFFFA;
}

td.h4a2 {
        FONT-SIZE: 12.5px; 
        COLOR: #1c0672; 
        font-weight: normal;
        padding-top: 5px;
        margin-top: 5px;
        background-color: #FFFFFA;
}

td.h4a3 {
        FONT-SIZE: 12.5px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 5px;
        margin-top: 5px;
        background-color: #F5FAFF;
}

td.h4a4 {
        FONT-SIZE: 12.5px; 
        COLOR: #1c0672; 
        font-weight: normal;
        padding-top: 5px;
        margin-top: 5px;
        background-color: #F5FAFF;
}

td.h4a5 {
        FONT-SIZE: 12.5px; 
        COLOR: #FF0000; 
        font-weight: bold;
        padding-top: 3px;
        margin-top: 2px;
        background-color: #FFFFFA;
}

td.h4a6 {
        FONT-SIZE: 12.5px; 
        COLOR: #FF0000; 
        font-weight: bold;
        padding-top: 3px;
        margin-top: 2px;
        background-color: #F5FAFF;
}

td.h4a7 {
        FONT-SIZE: 12.5px; 
        COLOR: #1c0672; 
        font-weight: normal;
        padding-top: 3px;
        margin-top: 2px;
        background-color: #FFFFFA;
        border-bottom: 1px solid #ddd;
}

td.h4a8 {
        FONT-SIZE: 12.5px; 
        COLOR: #1c0672; 
        font-weight: normal;
        padding-top: 3px;
        margin-top: 2px;
        background-color: #F5FAFF;
        border-bottom: 1px solid #ddd;
}

td.h5 {
        FONT-SIZE: 12px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 3px;
        margin-top: 2px;	
        text-align: center;
}

td.date {
		font-family: courier,monospace;       
		FONT-SIZE: 13px; 
}

/* link modifiers */

/* 1C0672 is dark blue. Always on EEEEEE background */

a.mm2 {
        COLOR: #1c0672; 
        text-decoration: none;
        font-size: 11.5px;
}

/* 688EBD is light blue. Always on EEEEEE background */

a.mm2:hover {
        COLOR: #688EBD; 
        text-decoration: underline;
        font-size: 11.5px;
}

/* 2c07bd is royal blue - links in diary files. F5FAFF background*/
 
a.mm3 {
        COLOR: #2c07bd; 
        BACKGROUND-COLOR: #F5FAFF; 
        margin: 0px 0px 0px 0px; 
        font-size: 12.5px;
}

a.mm3:hover {
        COLOR: #688EBD; 
        BACKGROUND-COLOR: #F5FAFF;
        margin: 0px 0px 0px 0px; 
        text-decoration: underline;
        font-size: 12.5px;
}

/* 2c07bd is royal blue - links in diary files. FFFFFA background */

a.mm4 {
        COLOR: #2c07bd; 
        BACKGROUND-COLOR: #FFFFFA;
        margin: 0px 3px 0px 0px; 
        text-decoration: none;
        font-size: 12.5px;
        }

a.mm4:hover {
        COLOR: #688EBD; 
        BACKGROUND-COLOR: #FFFFFA;
        margin: 0px 3px 0px 0px; 
        text-decoration: underline;
        font-size: 12.5px;
}

/* used in main_index.pl */

a.pp {
        COLOR: #1c0672; 
        BACKGROUND-COLOR: #eeeeee; 
        margin: 0px 0px 0px 0px; 
        text-decoration: none;
        font-size: 11px;
}

a.pp:hover {
        COLOR: #688EBD; 
        BACKGROUND-COLOR: #eeeeee; 
        margin: 0px 0px 0px 0px; 
        text-decoration: underline;
        font-size: 11px;
}

/* month headers in diary files */

a.qq {
        COLOR: #FFFFFF; 
        BACKGROUND-COLOR: #7A7A7A; 
        font-size: 12px;
}

/* for contact email address link - blue/grey */

a.qq1 {
        COLOR: #002157; 
        BACKGROUND-COLOR: #798CA4; 
        font-size: 12px;
}

/* for contact email address link - blue 

a.qq1 {
        COLOR: #002157; 
        BACKGROUND-COLOR: #75A2DA; 
        font-size: 12px;
}

*/

/* for contact email address link - grey 

a.qq1 {
        COLOR: #002157; 
        BACKGROUND-COLOR: #a2a3a0; 
        font-size: 12px;
}

*/

a.qq1:hover {
        COLOR: #002157; 
        text-decoration: underline;
        font-size: 12px;
}

/* links in chronology scripts*/

a.rr {
        COLOR: #1c0672; 
        BACKGROUND-COLOR: #eeeeee; 
        margin: 0px 0px 0px 0px; 
        text-decoration: none;
        font-size: 12px;
}

a.rr:hover {
        COLOR: #688EBD; 
        BACKGROUND-COLOR: #eeeeee; 
        margin: 0px 0px 0px 0px; 
        text-decoration: underline;
        font-size: 12px;
}

/* royal blue links on an EEEEEE background. Used in chronology scripts */

a.ss {
        COLOR: #2c07bd; 
        margin: 0px 0px 0px 0px; 
        font-size: 12px;	
}

a.ss:hover {
        COLOR: #2c07bd; 
        margin: 0px 0px 0px 0px; 
        text-decoration: underline;
        font-size: 12px;	
}

/* Used in site guides */

a.tt {
        COLOR: #1c0672; 
        BACKGROUND-COLOR: #eeeeee; 
        margin: 0px 3px 0px 0px; 
        text-decoration: none;
        font-size: 12px;	
        font-weight: normal;
}

a.tt:hover {
        COLOR: #1c0672; 
        BACKGROUND-COLOR: #eeeeee; 
        margin: 0px 3px 0px 0px; 
        text-decoration: underline;
        font-size: 12px;	
        font-weight: normal;
}

/* Used to show search results */

a.uu {
        COLOR: #1c0672; 
        BACKGROUND-COLOR: #eeeeee; 
        margin: 0px 3px 0px 0px; 
        text-decoration: none;
        font-size: 14px;
        font-weight: normal;
}

a.uu:hover {
        COLOR: #688EBD;
        BACKGROUND-COLOR: #eeeeee; 
        margin: 0px 3px 0px 0px; 
        text-decoration: underline;
        font-size: 14px;	
        font-weight: normal;
}

a.vv {
        COLOR: #1c0672; 
        margin: 0px 3px 0px 0px; 
        background-color: #ffffe6;
        text-decoration: none;
        font-size: 13px;
        font-weight: normal;
}

a.vv:hover {
        COLOR: #688EBD;
        margin: 0px 3px 0px 0px; 
        background-color: #ffffe6;
        text-decoration: underline;
        font-size: 13px;	
        font-weight: normal;
}

/* Used in nojs.html */

a.v3 {
        COLOR: #1c0672; 
        BACKGROUND-COLOR: #FFFFFF;
        margin: 0px 0px 0px 0px; 
        text-decoration: underline;
        font-size: 13px;	
        font-weight: bold;
}

/* Used for first sightings */

a.v4a7 {
        COLOR: #1c0672; 
        background-color: #FFFFFA;
        font-size: 12.5px;	
}

/* Used for first sightings */

a.v4a8 {
        COLOR: #1c0672; 
        background-color: #F5FAFF;
        font-size: 12.5px;	
}

/* Trip report day titles */

a.v5 {
        COLOR: #1c0672; 
        BACKGROUND-COLOR: #fefbd8;
        margin: 0px 0px 0px 0px; 
        font-size: 13px;	
        font-weight: bold;
}

a.v5:hover {
        COLOR: #1c0672; 
        BACKGROUND-COLOR: #fefbd8;
        margin: 0px 0px 0px 0px; 
        text-decoration: underline;
        font-size: 13px;	
        font-weight: bold;
}

/* for current records - FFFFFA background*/

a.v61 {
		COLOR: #1C0672;	
		BACKGROUND-COLOR: #FFFFFA;
		margin: 0px 0px 0px 0px;
		font-size: 12.5px;
}

a.v61:hover {
		COLOR: #688EBD;	
		BACKGROUND-COLOR: #FFFFFA;
		margin: 0px 0px 0px 0px;
		font-size: 12.5px;
		text-decoration: underline;
}

/* for current records - F5FAFF background */

a.v62 {
		COLOR: #1C0672;	
		BACKGROUND-COLOR: #F5FAFF;
		margin: 0px 0px 0px 0px;
		font-size: 12.5px;
}

a.v62:hover {
		COLOR: #688EBD;	
		BACKGROUND-COLOR: #F5FAFF;
		margin: 0px 0px 0px 0px;
		font-size: 12.5px;
		text-decoration: underline;
}

/* for new current records - bold red with FFFFFA background*/

a.v63 {
		COLOR: #FF0000;	
		BACKGROUND-COLOR: #FFFFFA;
		margin: 0px 0px 0px 0px;
		font-size: 12.5px;
		font-weight: bold;
}

a.v63:hover {
		COLOR: #FF0000;	
		BACKGROUND-COLOR: #FFFFFA;
		margin: 0px 0px 0px 0px;
		font-size: 12.5px;
		text-decoration: underline;
		font-weight: bold;
}

/* for new current records - bold red with F5FAFF background */

a.v64 {
		COLOR: #FF0000;	
		BACKGROUND-COLOR: #FFFFFA;
		margin: 0px 0px 0px 0px;
		font-size: 12.5px;
		font-weight: bold;
}

a.v64:hover {
		COLOR: #FF0000;	
		BACKGROUND-COLOR: #FFFFFA;
		margin: 0px 0px 0px 0px;
		font-size: 12.5px;
		text-decoration: underline;
		font-weight: bold;
}

/* used in diary image captions */

a.ct {
        COLOR: #1c0672; 
        BACKGROUND-COLOR: #ffffff; 
        padding-left: 3px; 
        text-decoration: underline;
        font-size: 9px;	
        font-weight: bold;
}

/* used in main_index.pl */

a.ct1 {
		font-family:courier;
        COLOR: #1c0672; 
        text-decoration: none;
        font-size: 10px;	
        font-weight: normal;
}

a.ct1:hover {
		font-family:courier;
        COLOR: #1c0672; 
        text-decoration: underline;
        font-size: 10px;	
        font-weight: normal;
}

td.ct2 {
		font-family:courier;
        FONT-SIZE: 10px; 
        text-align: left;		
        border-bottom: 1px solid #ddd;
}

a.gps
{
	font-size: x-small;
	color: red;
	text-decoration: none;
}

a.gps:hover
{
	font-size: x-small;
	color: red;
	text-decoration: underline;
}

a.border:link, a.border:visited 
{
  background-color: #eeeeee;
  color: #1C0672;
  border: 2px solid #1C0672;
  padding: 5px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-top: 2pt;
}

a.border1:link, a.border1:visited 
{
  background-color: #eeeeee;
  color: #1C0672;
  border: 2px solid #1C0672;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-top: 2pt;
  height: 18px;
}

a.border5:link, a.border5:visited 
{
  background-color: #eeeeee;
  color: #1C0672;
  border: 2px solid #1C0672;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-top: 2pt;
  height: 18px;
}

a.border6:link, a.border6:visited 
{
  background-color: #eeeeee;
  color: #1C0672;
  border: 2px solid #1C0672;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-top: 2pt;
  width: 170px;
  height: 18px;
}

a.border:hover, a.border:active, a.border1:hover, a.border1:active, a.border5:hover, a.border5:active, a.border6:hover, a.border6:active
{
  background-color: #1C0672;
  color: #eeeeee;
  margin-top: 2pt;
}

a.title:link, a.title:visited, a.title:active
{
    FONT-SIZE: 16px; 
    COLOR: #1c0672; 
    font-weight: bold;
    padding-top: 5px;
    margin-top: 0px;
    text-align: left;
    text-decoration: none;
}

a.title:hover
{
    FONT-SIZE: 16px; 
    COLOR: #1c0672; 
    font-weight: bold;
    padding-top: 5px;
    margin-top: 0px;
    text-align: left;
    text-decoration: underline;
}

/* others */

.smred
{
	font-size: x-small;
	color: red;
}

p.h5 {
		FONT-SIZE: 13px;
		font-weight: normal;
}

.thumb {
        FONT-SIZE: 10.25px; 
        COLOR: #000000;
        background-color: #eeeeee; 
        text-align: center;
        padding: 1px 0px 0px 0px;
        margin-top: 2px;
        margin-bottom: 4px;
        }
        
/* used in diary image captions prior to 2018 */

.cthumb {
        FONT-SIZE: 9px; 
        COLOR: #000000;
        background-color: #eeeeee; 
}

.cs1 {
        color: #FF0000; 
        font-weight: normal;
        FONT-SIZE: 12.5px;
}
        
.cs2 {
        FONT-SIZE: 12px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 3px;
        margin-top: 2px;
}

.cs2a {
        FONT-SIZE: 14px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 3px;
        margin-top: 2px;
        background-color: #ffffff;
}

.cs2b {
        FONT-SIZE: 14px; 
        COLOR: #1c0672; 
        font-weight: bold;
        padding-top: 3px;
        margin-top: 2px;
}

.cs3 {
		color: #D2006B;
		font-weight: normal;
}

.cs3i {
		color: #D2006B;
		font-weight: normal;
		font-style: italic;
}

/* tables */

table.border
{
	border: 1px solid #888 ;	
	padding: 6px ;
	background-color: #ffffff;	
	margin: 0px 0px 6px 0px;
}

/* Used in trip reports - pale yellow - make same as corners4*/

table#t01 {
    width: 100%;
    background-color: #FBFAE7; 
}

table#t02 {
    width: 100%;
    background-color: #eeeeee;
    border-spacing: 2px;
    padding: 0px;
}

table#t03 {
    width: 100%;
    border-spacing: 0px;
    padding: 0px;    
    background-color: #ffffff;
}

/* used for diary images */

table#t04 {
    width: 100%;
    border-spacing: 0px;
    padding: 0px;   
    /*border: 1px solid black; */     
}

table#t04 td {
    padding-bottom: 2px;
    border-spacing: 0px;
    width: 240px;
    FONT-SIZE: 9px; 
    COLOR: #000000;
    background-color: #ffffff;
}

/* used in print_chronology subroutine */

table#t05 {
    width: 100%;
    background-color: #eeeeee;
    padding: 2px;
    border-spacing: 0px 5px;
}

table#t05 tr {
		vertical-align: top;
}

table#t06 {
    background-color: #eeeeee;
    padding: 5px;
    border-spacing: 5px 5px;
    border: 1px solid black;
    table-layout:fixed;
}

table#t07
{
    width: 100%;
    border-spacing: 2px;
    padding: 4px;
}

table#t08
{
	text-align: left;
	width: 100%;
    padding: 5px;
    border: 1px solid #006666;
    border-collapse: collapse;
}

#t08 tr:nth-child(odd){background-color: #f2f2f2;}

#t08 tr:hover {background-color: #ddd;}

#t08 th {
	font-weight: bold;
	text-align: left;
    border: 1px solid #CCC;
}

#t08 td {
    border: 1px solid #ddd;
    padding: 8px;
}

/* this style will put a border with rounded corners around a table within it. EEEEEE background.*/

div.corners {
	border: 1px solid #888;	
	border-radius: 12px;	
	-webkit-border-radius: 12px;
	padding: 6px;
	background-color: #eeeeee;	
	margin: 0px 0px 0px 0px;
}

/* this style will put a border with rounded corners around a table within it. The
div has a fixed height of 505px. Used by main_index and new_main_index in the navbar div*/

div.corners1 {
	border: 1px solid #888;	
	border-radius: 12px;	
	-webkit-border-radius: 12px;
	padding: 6px;
	background-color: #eeeeee;	
	margin: 0px 0px 0px 0px;
	height: 505px;
}

/* this style will put a border with rounded corners around a table within it. The
div has a fixed height of 460px. Used by main_index for the recent updates table */

div.corners1a {
	border: 1px solid #888;	
	border-radius: 12px;	
	-webkit-border-radius: 12px;
	padding: 6px;
	background-color: #eeeeee;	
	margin: 0px 0px 0px 0px;
	height: 460px;
}
	
/* As corners, but with a background of FFFFFA. Used by lep_index, odo_index, bird_index */
	
div.corners2 {	
	border: 1px solid #888;	
	border-radius: 12px;	
	-webkit-border-radius: 12px;	
	padding: 6px;	
	background-color: #FFFFFA;	
	margin: 0px 0px 0px 0px;
}

/* this style will put a border with rounded corners around a table within it. The
div has a fixed height of 462px. Used by new_main_index for the recent updates table */

div.corners3 {
	border: 1px solid #888;	
	border-radius: 12px ;	
	-webkit-border-radius: 12px ;
	background-color: #eeeeee;	
	margin: 0px;
    padding: 4px 0px 6px 2px;
    text-align:left;	
	height: 461.5px;
}

/* Used in trip reports */

div.corners4 {
	border: 1px solid #888 ;	
	border-radius: 12px ;	
	-webkit-border-radius: 12px ;
	padding: 6px ;
	background-color: #FBFAE7;	
	margin: 5px 0px 5px 0px;
}

/* for diary-generator to set white background for table. Set background-color the same as t03 definition */

div.corners5 {
	border: 1px solid #888 ;	
	border-radius: 12px ;	
	-webkit-border-radius: 12px ;
	padding: 6px ;
	background-color: #ffffff;	
	margin: 0px 0px 0px 0px;
}

/* for diary*.html to set dark background for month links */

div.corners6 {
	border: 1px solid #888 ;	
	border-radius: 12px ;	
	-webkit-border-radius: 12px ;
	padding: 2px 0px 0px 6px;
	background-color: #7A7A7A;	
	margin: 0px 0px 0px 0px;
}

.stdc
{
	font-size: 13.5px;
	text-align: center;
	font-weight: normal;
	color: #000000;
	padding-bottom: 3px;
}

.std
{
	font-size: 13.5px;
	text-align: justify;
	font-weight: normal;
	color: #000000;
	padding-bottom: 3px;
}


img.round {border-radius: 6px;}
img.round10 {border-radius: 10px;}

.blue {COLOR: #1c0672; font-weight: normal;}
.red  {COLOR: red; font-weight: normal;}
.bold666 {font-size: 14px; color: #1c0672; font-weight: bold;}
.boldred {font-size: 14px; color: #FF0000; font-weight: bold;}
.bold {font-weight: bold;}