.affix {
      top: 0;
      width: 100%; 
     z-index: 10;
  }


/* padding top is where the main body jumps to when nav sticks so padding+nav */
  .affix + .container-fluid {
      padding-top: 70px;
  }
  

  
/* border on uncollapsed sizes only */  
@media only screen and (min-width : 768px) {
	.border-box {
		background: #FFFFCC;
		border: #000000 solid 1px;
		z-index: 1500;
		/* padding: 10px; */
		margin: 10px;
	}
}

@media only screen and (max-width : 767px) {
	.border-box {
		background: #FFFFCC;
		border: none;
		padding-top: 10px;

	}
} 
 

.handpicture {
 cursor: pointer;
}
.floatright {
  float: right;
}

/*img { 
   border:1px solid #021a40;
}
 */

/* overlay badge */
.relative {
    position: relative;
}
.label.top-left {
    position: absolute;
    top: 27px;
    left: 5px;

}
.label.top-leftx {
    position: absolute;
    top: 5px;
    left: 20px;
}

.label.top-right {
    position: absolute;
    top: 30px;
    right: 5px;
    font-size: large;
}
.label.top-rightx {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: large;
}
/* other styling */

.tableinfo 
		{ text-align: center; background-color:#FFF; } /* { text-align: center; vertical-align: middle; background-color:#A8C4FB; border: 1px solid black;} */
.tableinfo thead
		{ text-align: center; background-color:#FFF;} /* { text-align: center; vertical-align: middle; background-color:#6699FF;} */
.tableinfo th
		{ text-align: center; }  /*{ text-align: center; vertical-align: middle; }  */
.tableinfo td
		{ text-align: center; vertical-align: middle; }  /*  */
.tableinfo p 
		{ margin: 7px; vertical-align: middle; } 
.tableinfo caption
		{ text-align: center; color: #000000; }		



.tableyarn   { border:2px solid #DDDDDD; text-align: center; width: 90%; background-color:#FFF; margin: auto; }
.tableyarn td  { padding:10px; width:33%; vertical-align: top;  }
.tableyarn th  { border:1px solid #DDDDDD; text-align: center; background-color:#F5F5F5; }
.tableyarn p {margin-top: 5px; margin-bottom: 5px; }

.tablecreate {  }
.tablecreate td  { padding:10px; height:80px; }
.tablecreate p {margin-top: 5px; margin-bottom: 5px; }



.footpad       { 
	padding: 15px; 
	font-size:10px; 
	text-align:center; 
	}
	
.footpad a { 
	color: #000099; 
	text-decoration: underline; 
}

.footpad a:link { 
	color: #000099; 
	text-decoration: underline; 
}

.footpad a:hover { 
	color: #99CC99; 
	text-decoration: underline; 
}
	
.othertext	{
	margin: 20px; 
}

.othertext a { 
	color: #000099; 
	text-decoration: underline; 
}

.othertext a:link { 
	color: #000099; 
	text-decoration: underline; 
}
.othertext a:hover { 
	color: #99CC99; 
	text-decoration: underline; 
}
	
.survey-bg   { 
	background-color: #FFFFFF; 
	width:100%; 
	max-width:700px;
}
	
.survey-q   { 
	display: block; 
	padding: 5px; 
	background-color:#D8E8F8; 
	width:100%; 
	max-width:700px;
}
	
.surveyanswer  { 
	color: #0000FF; 
	font-style: italic;
}	

.divlink a { 
	text-decoration: none; 
	color: #000000;
}

.divlink a:link { 
	text-decoration: none; 
	color: #000000; 
}
.divlink a:hover { 
	text-decoration: none; 
	color: #000000; 
}	
	
.media-padding { 
	padding: 15px;  
}

/* Remove the outline highlight from the media link on click */
a.media-left:focus,
a.media-left:active {
    outline: none !important;
    box-shadow: none !important;
}
.textnew { 
	color: red; 
	}
.textnew a { 
	color: #000099; 
	text-decoration: underline; 
}
.textnew a:link { 
	text-decoration: none; 
	color: #000000; 
}
.textnew a:hover { 
	text-decoration: none; 
	color: #000000; 
}	

.textcb a { 
	color: #800080; 
	text-decoration: underline; 
}

.textcb a:link { 
	color: #800080; 
	text-decoration: underline; 
}
.textcb a:hover { 
	color: #FF0000; 
	text-decoration: underline; 
}	

	
.infonew {
	 margin: 50px 0 0 10px; /* for picture for NEWEST ITEMS */
	   font-size: 16px;
  font-weight: bold;
  /* color: #99CC99;   fff */
     background-color: #000099;
}
.infonewbtn {
	 margin: 0 0 -9px 0;    /* 22px 0 0 10px; -10px 0 0 -20px;  */
	   font-size: 16px;
  font-weight: bold;


  /* color: #99CC99;   fff */
     background-color: #000099;
}


.extratextlink { 
	color: red; 
	}

.extratextlink a { 
	color: #000099; 
	text-decoration: underline; 
}
.extratextlink a:hover { 
	color: #000000; 
	text-decoration: underline; 
}
 

.tx10x { 
	font-family: inherit; 
	font-size: 10px; 
	}
.tx12x { 
	font-family: inherit; 
	font-size: 12px; 
	}
.tx14x { 
	font-family: inherit; 
	font-size: 14px; 
	}
.tx14 { 
	font-family: inherit; 
	font-size: 14px; 
	font-weight: 600;
	}
	
.tx16x { 
	font-family: inherit; 
	font-size: 16px; 
	}
	
.tx16 { 
	font-family: inherit; 
	font-size: 16px; 
	font-weight: 600;	
	}
	
.tx18 { 
	font-family: inherit; 
	font-size: 18px; 
	font-weight: 600;
	  }

.tx20 { 
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
	font-size: 20px;
}
.tx22 { 
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
	font-size: 22px;
}

/* remove space between buttons on terms page */
.no-gutter-button > [class*='col-'] {
    /* padding-right:0; */
    /* padding-left:0; */
    padding:7px;
}

.social {
  width: 32px;
  height: 32px;
  float:none; 
   margin: 8px 0 8px 0;
 /* margin: 25px 0px 10px 0; */
}
.social-inner {
  width: 32px;
  height: 32px;
 /* margin: 5px 10px 10px 10px; */
}


.smalltext {
margin: -15px 5px 20px 20px; 
}


.headtext {
 margin-left:30px; 
 margin-right:50px; 
 margin-top:10px; 
 margin-bottom:0;

}

.headtext a { 
	color: #000099; 
	text-decoration: underline;
}

.headtext a:link { 
	color: #000099; 
	text-decoration: underline;
}

.headtext a:hover { 
	color: #99CC99; 
	text-decoration: underline;
}

.headtextinner {
 margin-left:15px; 
 margin-right:50px; 
 margin-top:10px; 
 margin-bottom:0;

}
.headtextinner a { 
	color: #000099; 
	text-decoration: underline; 
}

.headtextinner a:link { 
	color: #000099; 
	text-decoration: underline; 
}

.headtextinner a:hover { 
	color: #99CC99; 
	text-decoration: underline;
}

/* not used  */
.infotextul {
 margin-left:0px; 
 margin-right:50px; 
 margin-top:10px; 
 margin-bottom:0;
}

.infotextul a { 
	color: #000099; 
	text-decoration: underline 
}

.infotextul a:link { 
	color: #000099; 
	text-decoration: underline 
}

.infotextul a:hover { 
	color: #99CC99; 
	text-decoration: underline 
}



.infotext {
	font-family: inherit; 
	font-size: 14px; 
	margin: 10px 5px 10px 5px;
}

.infotext a { 
	color: #000099; 
	text-decoration: underline 
}

.infotext a:link { 
	color: #000099; 
	text-decoration: underline 
}

.infotext a:hover { 
	color: #99CC99; 
	text-decoration: underline 
}
/* not used  */
.infotextx {
 margin-left:30px; 
 margin-right:50px; 
 margin-top:10px; 
 margin-bottom:0;
}

.infolink a { 
	color: #000099; 
	text-decoration: underline 
}

.infolink a:link { 
	color: #000099; 
	text-decoration: underline 
}

.infolink a:hover { 
	color: #99CC99; 
	text-decoration: underline 
}
.textupper { 
	text-transform: uppercase; 
	}
.textupperbold { 
	text-transform: uppercase; 
	  font-weight: bold;
	}
	
.holiday { 
	font-family: inherit; 
	font-size: 18px; 
	font-weight: 600;
	color: red;
	font-style: italic;
	  }
	

	
	
a.anchor {
    display: block;
    position: relative;
    top: -70px;
    visibility: hidden;
}

.green-line  { height: 6px; 
	background-color: #99CC99; 
	margin: 12px;
}
.green-line-sm  { 
	height: 2px; 
	background-color: #99CC99; 
	margin: 12px;
}
.green-line-smid {
	width: 95%;
	text-align: center;  
	height: 2px;
}



#topage {
  position: fixed;
  z-index: 999;
  position: fixed; 
  right: 10px;
  bottom: 20px;  
}

.ckpics	{
		border:1px solid #000; 
	}









/* Make Navigation Toggle on Desktop Hover */ 
@media only screen and (min-width : 768px) {
	.dropdown:hover .dropdown-menu {
		display: block;
    }
}


/* modal pictures */
.modalcol {
	background-color:#FFFFCC; text-align: right;
}	
.modalcol img {
	   border:1px solid #000; 
}
.modalwhite img {
	   border:1px solid #000; 
}
.modalwhite {
	text-align: right;
	height:60px !important;
}



/* INDICATORS ON SLIDE SHOWS */

/* carousel carousel-indicators colour */

.carousel-indicators {
  bottom:-50px;
}

.carousel-inner {
   margin-bottom:50px;
}


/*.carousel-control.left, .carousel-control.right {*/
/*    background-image: none*/
/*}*/

 .carousel-indicators-green li {
 margin: 30px 0 0 0;
   background-color: #99CC99;

 }
 .carousel-indicators-green li.active, .carousel-indicators-green li:hover {
  margin: 30px 0 0 0;
   background-color: #000099;
 }




/* new breadcrumb colours */


.breadcrumb-new {
	background-color: #FFFFCC; 
	border: 0px; 
	border-radius: 0px; 
	display: block;
}
.breadcrumb-new li {
	font-size: 12px;
}
.breadcrumb-new a {
	color: #000099; 
	text-decoration: underline;
}
.breadcrumb-new a:hover {
	color: #99cc99;
}
.breadcrumb-new >.active {
	color: #5cb85c;
}
/* :before.breadcrumb-new>li+li {color: #000;) content: "\232A\00a0"; } NO IDEA WHAT THIS IS FOR*/
.breadcrumb-new>li+li:before {color: #000099; content: "\007C\00a0";}  /* between text */

.breadcrumb li {
    margin-right: 1px;
}




.navbar-inverse {
  background-color: #000099;  /* 000099 navbar main background including button */
  border-color: #99cc99;  /* 080808 border above navbar */
}
.navbar-inverse .navbar-brand {
  color: #fff;  /* fff text colour of brand on bar*/
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #99cc99;  /* 99cc99 text hover colour on brand*/
  background-color: transparent;  /* transparent hover bg colour brand*/
}
.navbar-inverse .navbar-nav > li > a {
  color: #FFF;     /* fff text colour of links in nav bar and dropdowns*/
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #000099;  /* 000099 colour of text of links on hover*/
  background-color: #99cc99;  /* transparent background on hover on nav and drop*/
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #000099;  /*  fff doesnt seem to change anything */
  background-color: #5cb85c; /* 99cc99 080808 doesnt seem to change anything*/
}
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #000099;  /* fff doesnt seem to do anything*/
    background-color: #5cb85c;  /* 080808 almost black doesnt seem to do anything */
  }


.navbar-inverse .navbar-toggle {
  /* border-color: #99cc99; */
  border: #ffffcc solid 2px; /* changes colour of border around menu button /*
 /* background-color: #FF0000;  adding this made hover on button stop working but then didn't but leave off*/ 
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #5cb85c;  /* 99cc99 changes the colour on hover of button */
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: #99cc99;  /* 101010 almost black line between nav and drop on mob*/
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #000099;  /* fff colour of text when link active */
  background-color: #5cb85c;  /* when clicked on hover - colour sucess */
}
/* for small screens */
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #fff;  /* ffffcc 9d9d9d on small screen - colour of links in dropdown */
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #000099;  /* fff hover colour of links in dropdown on small screen*/
    background-color: #99cc99;  /* transparent - background colour on hover */
  }
}


.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #000099; /* fff change dropdown background colour */
  /* -webkit-background-clip: padding-box; */
          background-clip: padding-box;
  border: #ccc 1px solid;
  border: rgba(0, 0, 0, .15) solid 1px;
  border-radius: 4px;
  /* -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); */
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 2.1;  /* 1.42857143 */
  color: #fff; /* 333 text colour */
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #000099; /* 262626 text colour on hover*/
  text-decoration: none;
  background-color: #99cc99;  /* f5f5f5 background on hover */
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #000099; /* fff */
  text-decoration: none;  
  background-color: #5cb85c;  /* 337ab7 */
  outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #777;  /* 777 */
}
/* .dropdown-menu > .disabled > a:hover, */
/* .dropdown-menu > .disabled > a:focus {*/
/*   text-decoration: none; */
/*  cursor: not-allowed; */
/*  background-color: transparent; */ /* transparent */
/*  background-image: none; */
/*  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); */
/* } */

ul.enlarge{
list-style-type:none; /*remove the bullet point*/
margin-left:0;
}
ul.enlarge li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
margin:20px 0 20px -40px; /* first number is top - second number is side - third is bottom - forth is other side */
}
ul.enlarge img{
background-color:#000000; /* colour around the image  */
padding: 0;   /* space around the image */
}
ul.enlarge span{
position:absolute;
left: -9999px;
background-color:#000000;
padding: 0;
color: #000000; 
}
ul.enlarge li:hover{
z-index: 9;
cursor:pointer;
}
ul.enlarge span img{
padding:1px;
background:#000000;
}
ul.enlarge li:hover span{ 
top: -50px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: 0; /*distance from the left of the thumbnail to the left of the popup image*/
}
/* ul.enlarge img, ul.enlarge span{ */
/* behavior: url("../pie/PIE.htc"); */
/* } */


/* Fix modern Chromium/Brave focus boxes for links without breaking keyboard accessibility */
a:focus:not(:focus-visible) {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}