body {
  margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
  padding: 0;
  text-align: left; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
  color: #000000;
  background-color: #FFFFFF;
  font-family: Arial, sans-serif;
  font-size: 100%;
}

header {
  text-align:center;                  
  margin: auto;                      /* We want the banner to be centred on the page - we need both of these to do it */
  width: 960px;                      /* the auto margins (in conjunction with a width) center the page */
  padding: 0px 0px 0px 0px;         /* starts with top, right, bottom, left */
  background-color: #FFFFFF;         /* sets the background to blue */
  color: #000000;
  border-radius: 8px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 16px; 
  line-height: 25px;
  border-radius: 4px;
}


.docheader {
  text-align:center;                  
  margin: auto;                      /* We want the banner to be centred on the page - we need both of these to do it */
  width: 960px;                      /* the auto margins (in conjunction with a width) center the page */
  padding: 10px 0px 5px 0px;         /* starts with top, right, bottom, left */
  background-color: #FFFFFF;         /* sets the background to white */
  border-radius: 8px;
}

.headerlargefont { 
  font-size: 24px;
  line-height: 80%;
  font-weight:bold;
}

.headermediumfont { 
  font-size: 20px;
  line-height: 80%;
  font-weight:bold;
}

.headersmallfont { 
  color: grey;
  font-size: 10px;
}

.mainbody {
  margin: auto;                      /* We want the banner to be centred on the page - we need both of these to do it */
  width: 960px;                      /* the auto margins (in conjunction with a width) center the page */
  font-size: 90%;
  padding: 0px 10px 0px 10px;
  border-left:solid #66CCFF 1px;
  border-right:solid #66CCFF 1px;
}

.mainbody a {
  text-decoration:none;
  color:#000000;
  font-weight:bold;
}

.tablelink a { /* used in tables with hyperlinks as bold is too powerful */
  font-weight:normal;
  color:#00008B;
}

.tablelink a:hover { /* used in tables with hyperlinks as bold is too powerful */
  text-decoration: underline;
}

.mainbody a:hover {
  text-decoration: underline;
}

.blackline {  /* provides a horizontal black line - for use as a divider */
  height: 6px;
  padding-left:4px;
  background-color:#000000;
  font-weight:bold;  
}

.blackline2 {  /* provides a horizontal black line - for use as a divider */
  height: 3px;
  padding-left:4px;
  background-color:#000000;
  font-weight:bold;  
}

.blockemph { /* for emphasising a block in a table */
  padding-left:4px;
  background-color:#DDFFFF;
  font-weight:bold;  
}

.paraemph { /* for emphasising a heading paragraph */
  padding-left:4px;
  padding-top:10px;
  padding-bottom:10px;
  background-color:#DDFFFF;
  font-weight:bold;  
}

#linkbutton {
  background:#FFFFFF;
  font-size:100%;
  color:black;
}

#linkbutton:hover {
  text-decoration:underline;
}

#sorttabbutton {
  background:#F0F0F0;
  font-size:100%;
}

#sorttabbutton:hover {
  text-decoration:underline;
}

 
.blockemph { /* for emphasising a block in a table */
  padding-left:4px;
  background-color:#DDFFFF;
  font-weight:bold;  
}


.mainbody input[type=text] {
  border-color:#CCCCCC;
  border-radius: 6px;
  border-style:solid;
  height:24px;
  padding-left: 6px;
  padding-right: 6px;
}

.mainbody input[type=text]:focus {
  border-color:#0000CC;
  border-radius: 6px;
}

.mainbody input[type=email] {
  border-color:#CCCCCC;
  border-radius: 6px;
  border-style:solid;
  height:24px;
  padding-left: 6px;
  padding-right: 6px;
}

.mainbody input[type=email]:focus {
  border-color:#0000CC;
}

.mainbody input[type=password] {
  border-color:#CCCCCC;
  border-radius: 6px;
  border-style:solid;
  height:24px;
  padding-left: 6px;
  padding-right: 6px;
}

.mainbody input[type=password]:focus {
  border-color:#0000CC;
}

.mainbody input[type=submit] {
  border-color:#CCCCCC;
  background:#ccc; 
  border:0 none;
  cursor:pointer;
  height:30px;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
  padding-left: 20px;
  padding-right: 20px;
}

.mainbody input[type=button] {
  border-color:#CCCCCC;
  background:#ccc; 
  border:0 none;
  cursor:pointer;
  height:30px;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
  padding-left: 20px;
  padding-right: 20px;
}


.mainbody input[type=file] {
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
}

.mainbody input[type=file] {
  border-color:#0000CC;
}

.mainbody select {
  border-radius: 6px;
  border-style:solid;
  height:30px;
  border-color:#CCCCCC;
  border-style:solid;
}

.mainbody textarea {
  border-color:#CCCCCC;
  border-radius: 6px;
  border-style:solid;
  font-family:Arial, Helvetica, sans-serif;
  font-size:95%;
}

.mainbody textarea:focus {
  border-color:#0000CC;
}

.mainbody select:focus {
  border-color:#0000CC;
}

/* <====== character fonts =======> */

.formrightcol {
  font-size: 85%;
  font-style: italic;
  vertical-align:top;
  text-align:left;
}

.formleftcol {
  font-size: 90%;
  vertical-align:top;
  text-align:right;  
}

.formmidcol {
  font-size: 90%;
  vertical-align:top;
  text-align:left;  
}

.formnumcol {
  font-size: 90%;
  vertical-align:top;
  text-align:right;  
}

.filelisting {
  font-size: 80%;
  vertical-align:middle;
  text-align:left;  
}

.filelisting2 {
  font-size: 70%;
  vertical-align:middle;
  text-align:left;  
}


/* <====== membermenu ========> */

/* Standard banner for members only pages */

.membermenu {
  margin: auto;                      /* We want the banner to be centred on the page - we need both of these to do it */
  width: 100%;                     /* the auto margins (in conjunction with a width) center the page */
} 

.membermenu table {
  margin: 4px 0px 4px 0px;
  background-color: #696969;
  border-radius: 8px;
  width: 100%;                     /* the auto margins (in conjunction with a width) center the page */
}

.membermenu tr {
  height: 42px;
}

.membermenu td {
  vertical-align:middle
  color:#111111;
  text-decoration: none;
}

.membermenu td a {
  color: white;
  text-align: center;
  padding: 2px 2px;
  text-decoration: none;
}

.membermenu td a:hover {
  background-color: #111;
}

/* <====== sitetable ========> */

/* Used for a full width table  */

.fulltable {
  width: 100%;
  border:none;
}

.fulltable td, th {
  padding: 10px 10px 10px 10px;
  text-align:left;
  vertical-align:top;
}

/* <====== linkstable ========> */

/* Used for a page with links */

.linkstable {
  width:100%;
  border: 0;
}

.linkstable a {
  text-decoration: none;
  font-weight:bold;
  color: #111111;
}

.linkstable a:hover {
  text-decoration: underline;
}

.linkstable tr:hover {background-color: #f5f5f5}

.linkstable td {
  padding: 10px 10px 10px 10px;
  text-align:left;
  vertical-align:top;
}

.LeftLinkCol {
  width: 200px;
  padding-right: 20px;
}

/* <====== imgright ========> */

.imgright {
  float:right;
  margin-left: 10px;
}
/* <====== tickertable ========> */

/* Used on the home page for a stop press ticker */

.tickertable {
  font-size: 80%;
  background-color:#EFEFEF;
}

.tickertable td {
  padding: 2px;
}

 #textlink {
display:inline-block;
width:500px;
height:15px;}

#textlink img {
vertical-align:middle;
}

#textlink a{ text-decoration:none;color:black;}
#textlink a:hover{text-decoration:underline;color:black;} 

.SiteMsg {
  border: 1px solid black;
  background-color:#CCCCCC;
  color: #006600;
  font-weight: bold;
  text-decoration: none;
}

.PoMtable {
  width:100%;
  background-color:#FFFFEE
  ;
  border:none;
}

.PoMtable td {
  padding: 5px 5px 5px 5px;
}
 
.indenttable {
  width:800px;
  border:none;
  margin-left: 50px;
}

.indenttable td {
  vertical-align:top;
  padding: 2px 2px 2px 2px;
}

/* adds top and bottom padding for lists */
.listpad {
  padding: 2px 0px 2px 0px;
}

.listpad a {
  text-decoration:none;
  color:#000000;
  font-weight:bold;
}

 .listpad a:hover {
  text-decoration: underline;
}
/* <====== footer ========> */

mark {
  padding: 0px 5px 0px 5px;
  font-size:130%;
  font-weight:bold;
}

mark.red {
  color:#FFFFFF;
  background-color:#FF0000;
}

mark.amber {
  color:#000000;
  background-color:#FF9900;
}

mark.green { 
  color:#000000;
  background-color:#00FF00;
}

.sortable {
  text-align: left;
  background-color: #C0C0C0;
  width:100%;
}
   
.sortable thead  {
  cursor: pointer;
}
   
.sortable thead tr,
.sortable table tfoot tr {
  background-color: #C0C0C0;
}
   
.sortable tbody tr {
  background: #F0F0F0;
}

.sortable th {
  border: 1px solid white;
  padding: 5px 10px 5px 10px;  /* starts with top, right, bottom, left */
}
    
.sortable td {
  border: 1px solid white;
  padding: 5px 10px 5px 10px;
}


footer {
  margin: auto;                      /* We want the banner to be centred on the page - we need both of these to do it */
  width: 960px;                     /* the auto margins (in conjunction with a width) center the page */
/*  background:#DDDDDD; */
  font-size: 70%;
  font-family: Arial, sans-serif;
  border-radius: 8px;
  padding: 2px 10px 2px 10px;
  font-weight:bold;
  background-image: linear-gradient(to right, rgba(15,67,54,1), rgba(02,99,64,1), rgba(02,99,64,1), rgba(15,67,54,1)); 
  color:#FFFFFF;
  /*clear:both; /*  This gets the footer pushed down to the bottom of the page - not sure how*/
}

footer a {
  text-decoration:none;
  color:#000000;
  font-weight:bold;
  color:#FFFFFF;
}

footer a:hover {
  text-decoration: underline;
}

#googlemap {
  height:900px; 
  width:960px;
  padding-bottom:10px;
}


.boxborder {
  border : 1px solid gray;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
}

.appealtitle {
  font:"Gill Sans MT";
  font-size:16px;
  color:#0033CC;
  font-weight:bold;
}

.percentbar { background:#CCCCCC; border:1px solid #666666; height:10px; }
.percentbar div { background: #28B8C0; height: 10px; }

/* This section handles the collapsible section on the Clan_FileMan.php page */

 /* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}