/* Cascading Style Sheet file for the Orpington Field Club website. */

/* Site design by Bill Welch, January 2013 */
/* Pages are XHTML 1.0 Strict compliant, except for some tracking addins which I can't help. */
/* Tracking has been included for Google Analytics, Google Webmaster Tools, and Statcounter. */
/* This CSS validates as level 3. */
/* The XHTML and CSS were validated (except for the tracking addins) by the appropriate W3C validation services. */

/* Standard body style including surrounding background colour */

body.usual
   {
   font-family:verdana, arial, sans-serif;
   color:#330000;
   text-align:center;
   background-color:#DDDDDD;
   font-size:90%;
   }

/* The "container" into which the actual site material is put. */

#container {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-color:#FFFFFF;
   padding-top : 5px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: 3px double;
   }

/* This defines the space the page header goes into. */

#header {
   margin: 0 auto;
   max-width: 900px;
   background-color:#FFFFFF;
   padding-top : 0px;
   padding-right : 0px;
   padding-bottom : 0px;
   padding-left : 0px;
   border: none;
   }

/* A basic style for a table the width of the division. */

table.wide
   {
   width:100%;
   text-align:center;
   border-width:0px;
   }

/* This is the styling for the simple navigation section below the page title. */
/* This includes the variations when hovered over, when clicked on, and when it has been clicked recently.*/

a.linkline
   {
   color:#660000;
   background-color:inherit;
   font-weight:600;
   font-style:normal;
   text-decoration:none;
   }

.linkline a:link 
   { 
   color:#660000;
   background-color:inherit;
   font-weight:600;
   font-style:normal;
   text-decoration:none;
   }

.linkline a:visited 
   { 
   color:#660000;
   background-color:inherit;
   font-weight:600;
   font-style:normal;
   text-decoration:none;
   }

.linkline a:hover 
   { 
   color:#660000;
   background-color:inherit;
   font-weight:600;
   font-style:normal;
   text-decoration:underline;
   }

.linkline a:active 
   { 
   color:#FFFFFF;
   background-color:#660000;
   font-weight:600;
   font-style:normal;
   }

/* Make the table divisions used for the navigation rows have solid green borders. */

td.link
   {
   border: 2px solid #b2d4ab;
   }

/* General styling for all other links. */

a:link
   { 
   color:#990033;
   background-color:inherit;
   font-style:normal;
   text-decoration:none;
   }

a:visited 
   { 
   color:#aa1144;
   background-color:inherit;
   font-style:normal;
   text-decoration:none;
   }

a:hover 
   { 
   background-color:inherit;
   font-style:normal;
   text-decoration:underline;
   }

a:active 
   { 
   background-color:inherit;
   font-style:normal;
   text-decoration:underline overline;
   }


/* Styling for the horizontal lines. */

hr.usual
   {
   border:0;
   color:#908888;
   background-color:#908888;
   height:1px;
   width:100%;
   text-align:center;
   clear: both;
   }

/* An invisible horizontal line to act as a divider. */

hr.invisible
   {
   border:0;
   color: transparent;
   background-color: transparent;
   height:1px;
   width:100%;
   text-align:center;
   clear: both;
   }

/* This defines a text type with large text for headings, etc. */

.larger
   {
   font-weight:normal;
   font-size:140%;
   margin-bottom:0px;
   } 

/* This defines a text type with ordinary text for the headings to the trips and talks schedules.*/

.normalhead
   {
   font-weight:normal;
   font-size:100%;
   } 

/* This defines a text type with small text, for use as required. */

.small
   {
   font-size:80%;
   margin-bottom:0px;
   } 


/* This defines a text type with centred smaller text, for use as required. */

.smaller
   {
   font-size:60%;
   margin-bottom:0px;
   text-align:center;
   } 


/* This defines a text type with centred large text, for use as required. */

.centredlarger
   {
   font-weight:normal;
   font-size:140%;
   text-align:center;
   } 


/* This defines a text type with centred small text, for use as required. */

.centredsmaller
   {
   font-weight:normal;
   font-size:70%;
   text-align:center;
   } 

/* This defines a text type with centred normal text, for use as required. */

.centred
   {
   text-align:center;
   font-weight:normal;
   font-size:100%;
   padding-top : 3px;
   padding-bottom : 3px;
   } 

/* Some text-emphasising definitions for the start of news items. */

.bold {font-weight:bold;}
span.initial {font-size:150%; font-weight:bold;}


/* Text invisible against the green background, used to provide invisible name link spots within pages. */

span.invisible
   {
   color:#d8e5d6;
   background-color:#d8e5d6;
   }


/* This defines the main body of the home page, with the picture background. */

#homebody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-image:url("../image/backhomeplus-df68f90d.jpg");
   background-repeat:no-repeat;
   background-position:top;
   background-color:#FFFFFF;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   margin-top: 3px;
   border: none;
   }


/* This defines the text box for the text on the home page. */

#hometext
   {
   font-size:120%; 
   width:400px;
   float:left;
   text-align:left;
   color:#000066;
   border:none;
   padding-top:0px;
   padding-right:10px;
   padding-bottom:10px;
   padding-left:10px;
   margin-top: 0px;
   margin-right:0px;
   margin-bottom:10px;
   margin-left:450px;
   }


/* This defines the main body of the membership page, with the picture background. */

#memberbody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-image:url("../image/backmembership-7d25b07c.jpg");
   background-repeat:no-repeat;
   background-position:top;
   background-color:#d8e5d6;
   margin-top: 3px;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: none;
   }


/* This is a text box for the main body of the membership page. */

#membertext {
   font-size:120%; 
   width:425px;
   float:left;
   text-align:left;
   color:#000000;
   border:none;
   padding-top:0px;
   padding-right:10px;
   padding-bottom:10px;
   padding-left:10px;
   margin-top: 150px;
   margin-right:0px;
   margin-bottom:10px;
   margin-left:220px;
   }


/* This defines the main body of the Trips & Talks page, with the picture background. */

#tripstalksbody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-image:url("../image/backtripstalks-52f945c9.jpg");
   background-repeat:no-repeat;
   background-position:top;
   background-color:#d8e5d6;
   margin-top: 3px;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: none;
   }

/* This is a text box for the main body of the Trips & Talks page. */

#tripstalkstext {
   font-size:120%; 
   width:395px;
   float:left;
   text-align:left;
   color:#000000;
   border:none;
   padding-top:0px;
   padding-right:10px;
   padding-bottom:10px;
   padding-left:10px;
   margin-top: 145px;
   margin-right:0px;
   margin-bottom:10px;
   margin-left:225px;
   }

/* This defines the main body of the Articles page, with the picture background. */

#articlesbody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-image:url("../image/backarticles-ceda1f31.jpg");
   background-repeat:no-repeat;
   background-position:top;
   background-color:#d8e5d6;
   margin-top: 3px;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: none;
   }

/* This is a text box for the main body of the Articles page. */

#articlestext {
   font-size:120%; 
   width:395px;
   float:left;
   text-align:left;
   color:#000000;
   border:none;
   padding-top:0px;
   padding-right:10px;
   padding-bottom:10px;
   padding-left:10px;
   margin-top: 145px;
   margin-right:0px;
   margin-bottom:10px;
   margin-left:225px;
   }


/* This defines the main body of the About Our Field Trips page, with the picture background. */

#fieldbody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-image:url("../image/backfieldtrips-f15289d1.jpg");
   background-repeat:no-repeat;
   background-position:top;
   background-color:#d8e5d6;
   margin-top: 3px;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: none;
   }

/* This is a text box for the main body of the About Our Field Trips page. */

#fieldtext {
   font-size:120%; 
   width:400px;
   float:left;
   text-align:left;
   color:#000000;
   border:none;
   padding-top:0px;
   padding-right:10px;
   padding-bottom:10px;
   padding-left:10px;
   margin-top: 10px;
   margin-right:0px;
   margin-bottom:10px;
   margin-left:225px;
   }


/* This defines the main body of the Links page, with the picture background. */

#linksbody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-image:url("../image/backlinks-59d3884c.jpg");
   background-repeat:no-repeat;
   background-position:top;
   background-color:#d8e5d6;
   margin-top: 3px;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: none;
   }

/* This is a text box for the main body of the Useful Links page. */

#linkstext {
   font-size:120%; 
   width:425px;
   float:left;
   text-align:left;
   color:#000000;
   border:none;
   padding-top:10px;
   padding-right:10px;
   padding-bottom:0px;
   padding-left:10px;
   margin-top: 130px;
   margin-right:0px;
   margin-bottom:10px;
   margin-left:215px;
   }


/* This defines the main body of the Contacts page, with the picture background. */

#contactsbody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-image:url("../image/backcontacts-bede2bbd.jpg");
   background-repeat:no-repeat;
   background-position:top;
/*   background-color:#FFFFFF; */
   background-color:#d8e5d6;
   margin-top: 3px;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: none;
   }

/* This is a text box for the main body of the Contacts page. */

#contactstext {
   font-size:120%; 
   width:450px;
   float:left;
   text-align:left;
   color:#000000;
   border:none;
   padding-top:10px;
   padding-right:10px;
   padding-bottom:0px;
   padding-left:10px;
   margin-top: 0px;
   margin-right:0px;
   margin-bottom:10px;
   margin-left:230px;
   }

/* This defines the main body of the Jan-Mar Field Trips page, with the picture background. */

#janmarbody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-image:url("../image/tripsjanmar-899d125a.jpg");
   background-repeat:repeat-y;
   background-position:top;
   background-color:#d8e5d6;
   margin-top: 3px;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: none;
   }

/* This defines the main body of the Apr-Jun Field Trips page, with the picture background. */

#aprjunbody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-image:url("../image/tripsaprjun-88dd9f1f.jpg");
   background-repeat:repeat-y;
   background-position:top;
   background-color:#d8e5d6;
   margin-top: 3px;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: none;
   }

/* This defines the main body of the Jul-Sep Field Trips page, with the picture background. */

#julsepbody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-image:url("../image/tripsjulsep-78e05973.jpg");
   background-repeat:repeat-y;
   background-position:top;
   background-color:#d8e5d6;
   margin-top: 3px;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: none;
   }

/* This defines the main body of the Oct-Dec Field Trips page, with the picture background. */

#octdecbody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-image:url("../image/tripsoctdec-9bdeaa31.jpg");
   background-repeat:repeat-y;
   background-position:top;
   background-color:#d8e5d6;
   margin-top: 3px;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: none;
   }

/* This defines the main body of the Members' Photos page, with the picture background. */

#photosbody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-image:url("../image/backphotos-7370d6bf.jpg");
   background-repeat:no-repeat; 
   background-position:top;
   background-color:#d8e5d6;
   margin-top: 3px;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: none;
   }

/* This defines the main body of a page with a plain green background, for use where needed. */

#greenbody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-color:#d8e5d6;
   margin-top: 3px;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: none;
   }

/* This defines the main body of the Talks page, with the picture background. */

#talksbody {
   margin: 0 auto;
   max-width: 900px;
   text-align:left;
   background-image:url("../image/backtalks-b6765359.jpg");
   background-repeat:repeat-y;
   background-position:top;
   background-color:#d8e5d6;
   margin-top: 3px;
   padding-top : 1px;
   padding-right : 15px;
   padding-bottom : 15px;
   padding-left : 15px;
   border: none;
   }


/* This defines a text box for headings in the main body of the field trips and talks schedules. */

#tripstexthead {
   font-size:140%; 
   width:450px;
   float:left;
   text-align:center;
   color:#000000;
 /*  border: 3px double; */
   border-collapse:separate;
   border-spacing:2px;
   border-width:1px;
   border-style:inset;
   border-color:#E0E8E0;
   background-color:#fafaf0;
   padding-top:0px;
   padding-right:20px;
   padding-bottom:0px;
   padding-left:20px;
   margin-top: 20px;
   margin-right:0px;
   margin-bottom:20px;
   margin-left:225px;
   }

/* This defines a text box for the warnings below the schedules. */

#tripstextunder {
/*   font-size:140%; */
   width:680px;
   float:left;
   text-align:center;
   color:#000000;
 /*  border: 3px double; */
   border-collapse:separate;
   border-spacing:2px;
   border-width:1px;
   border-style:inset;
   border-color:#E0E8E0;
   background-color:#fafaf0;
   padding-top:0px;
   padding-right:20px;
   padding-bottom:0px;
   padding-left:20px;
   margin-top: 20px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:75px;
   }


/*  This defines the table style for the schedules of trips and talks.  */

table.tripstalks
   {
   width:100%;
   border-collapse:separate;
   border-spacing:2px;
   border-width:1px;
   border-style:outset;
   border-color:#E0E8E0;
   background-color:#d8e5d6;
   }


/* This defines the style for the headings in the schedules. */

td.subhead
   {
   color:#660000;
   background-color:#fafaf0;
   font-weight:900;
   text-align:center;
   border-collapse:separate;
   border-spacing:2px;
   border-width:1px;
   border-style:inset;
   border-color:#666600;
   padding:2px;
   }

/* This defines the style for the information in the schedules. */

td.textcell
   {
   border-collapse:separate;
   border-spacing:2px;
   border-width:1px;
   border-style:inset;
   border-color:#F0F0E0;
   padding:5px;
  }

/* This defines the style for the information in the schedules when bold text is needed. */

td.textcellbold
   {
   font-weight:900;
   border-collapse:separate;
   border-spacing:2px;
   border-width:1px;
   border-style:inset;
   border-color:#F0F0E0;
   padding:5px;
  }


/*  This defines the table style for the headings on the photo pages.  */

table.photos
   {
   width:100%;
   border-style:hidden;
   background-color:#d8e5d6 ;
   margin-top:5px;
   }

.photocell
   {
   text-align:center;
   border-style:hidden;
   padding:1px;
/*   background-color:#f7f7e4; */
   background-color:#fafaf0;
   font-size:100%;
   font-weight:900;
   margin-top:0px;
   margin-bottom:0px;
  }

td.centrecell
   {
   border-style:hidden;
   text-align:center;
   border-color:#F0F0E0;
   padding:5px;
  }

/* The style for square photo thumbnail boxes and images 150x150 pixels. */

div.left150x150
   {
   float:left;
   width:170px;
   margin:5px 10px 10px 0;
   padding:5px;
   border:1px solid black;
   font-family:arial, sans-serif;
   text-align:center;
   color:#660000;
   font-size:small;
   }

img.inset150x150
   {
   height:150px;
   width:150px; 
   border-style:none;
   margin:5px 5px 5px 5px;
   }


/* Photo styles for any thumbnails in a 4 by 3 (landscape) proportion, 160x120 pixels, floating left. */

div.left160x120
   {
   float:left;
   width:180px;
   margin:5px 10px 10px 0;
   padding:5px;
   border:1px solid black;
   font-family:arial, sans-serif;
   text-align:center;
   color:#660000;
   font-size:small;
   }

/* Photo styles for any thumbnails in a 4 by 3 (landscape) proportion, 160x120 pixels, floating right. */

div.right160x120
   {
   float:right;
   width:180px;
   margin:5px 0px 10px 10px;
   padding:5px;
   border:1px solid black;
   font-family:arial, sans-serif;
   text-align:center;
   color:#660000;
   font-size:small;
   }

/* The image insets for 4 by 3 format thumbnails, 160x120 pixels. */

img.inset160x120
   {
   height:120px;
   width:160px; 
   border-style:none;
   margin:5px 5px 5px 5px;
   }



/* Photo styles for any thumbnails in a 3 by 4 (portrait) proportion, 120x160 pixels, floating left. */

div.left120x160
   {
   float:left;
   width:140px;
   margin:5px 10px 10px 0;
   padding:5px;
   border:1px solid black;
   font-family:arial, sans-serif;
   text-align:center;
   color:#660000;
   font-size:small;
   }

/* Photo styles for any thumbnails in a 3 by 4 (portrait) proportion, 120x160 pixels, floating right. */

div.right120x160
   {
   float:right;
   width:140px;
   margin:5px 0px 10px 10px;
   padding:5px;
   border:1px solid black;
   font-family:arial, sans-serif;
   text-align:center;
   color:#660000;
   font-size:small;
   }

/* The image insets for 3 by 4 format thumbnails, 120x160 pixels. */

img.inset120x160
   {
   height:160px;
   width:120px; 
   border-style:none;
   margin:5px 5px 5px 5px;
   }

/* Photo styles for illustrations in a 4 by 3 (landscape) proportion, 300 by 225 pixels, floating left. */

div.left300x225
   {
   float:left;
   width:320px;
   margin:5px 10px 10px 0;
   padding:5px;
   border:1px solid black;
   font-family:arial, sans-serif;
   text-align:center;
   color:#660000;
   font-size:small;
   }

/* Photo styles for illustrations in a 4 by 3 (landscape) proportion, 300 by 225 pixels, floating right. */

div.right300x225
   {
   float:right;
   width:320px;
   margin:5px 0px 10px 10px;
   padding:5px;
   border:1px solid black;
   font-family:arial, sans-serif;
   text-align:center;
   color:#660000;
   font-size:small;
   }

/* The image insets for 4 by 3 format illustrations, 300 by 225 pixels. */

img.inset300x225
   {
   height:225px;
   width:300px; 
   border-style:none;
   margin:5px 5px 5px 5px;
   }

/* Photo styles for illustrations in a 3 by 4 (portrait) proportion, 225 by 300 pixels, floating left. */

div.left225x300
   {
   float:left;
   width:245px;
   margin:5px 10px 10px 0;
   padding:5px;
   border:1px solid black;
   font-family:arial, sans-serif;
   text-align:center;
   color:#660000;
   font-size:small;
   }

/* Photo styles for illustrations in a 3 by 4 (portrait) proportion, 225 by 300 pixels, floating right. */

div.right225x300
   {
   float:right;
   width:245px;
   margin:5px 0px 10px 10px;
   padding:5px;
   border:1px solid black;
   font-family:arial, sans-serif;
   text-align:center;
   color:#660000;
   font-size:small;
   }

/* The image insets for 3 by 4 format illustrations, 225 by 300 pixels. */

img.inset225x300
   {
   height:300px;
   width:225px; 
   border-style:none;
   margin:5px 5px 5px 5px;
   }

/* Photo style and for illustrations in a large square proportion, floating right. */
/* Ideally, 400 by 400 pixels.*/

div.right400x400
   {
   float:right;
   width:420px;
   margin:5px 0px 10px 10px;
   padding:5px;
   border:1px solid black;
   font-family:arial, sans-serif;
   text-align:center;
   color:#660000;
   font-size:small;
   }

/* The image insets for square format illustrations. */
/* Ideally, 400 by 400 pixels.*/

img.inset400x400
   {
   height:400px;
   width:400px; 
   border-style:none;
   margin:5px 5px 5px 5px;
   }

/* This defines a centred space for the Google map to go into. */

#middle {
  width: 800px ;
  margin-left: auto ;
  margin-right: auto ;
}

/* This defines a paragraph style for whole paragraphs of quotations. */

p.quotes
   {
   font-family:georgia, serif;
   font-weight:100;
   margin-left:40px;
   margin-right:80px;
   }

/* Style for unordered lists, tucked to the left and with a space between list items. */

ul {
   margin-left:15px;
   padding:0;
   }

li {
   margin-top:5px;
   }


/* End of the Cascading Style Sheet file for the Orpington Field Club website. */