/*
	TICKER CSS
*/

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@font-face {
	/*
	font-family: 'Ranger';
	font-style: normal;
	src: local('Ranger'), local('Ranger'), url(./ranger.ttf) format('truetype');
	*/
	font-family: 'Courier New';
	font-style: normal;
	src: local('Courier'), local('Courier'), url(./courbd.ttf) format('truetype');
}


/* ticker-wrap(er) - this effects the ticker backround ( and location ) */
.ticker-wrap {
  position: fixed;	/* referenced to viewport ? */
  margin: 0px;	/* remove any margin ( all four sides ) */
  border: 0px;	/* remove any border ( all four sides ) */
  /* border: 2px solid rgba(0, 250, 0, 1);	/* optional border */
  padding: 0px;	/* remove any padding ( all four sides ) */
  width: 100%;	/* width of the visable background area ( div ) */
  overflow: hidden;	/* truncate any overflow for viewport */
  /* customize below */
  background-color: rgba(0, 0, 0, .5);	/* background color and alpha */
  /* top: 17px;	/* postion from top ( used with fixed ) */
  /* bottom: 50px;	/* position from bottom ( used with fixed ) */
  bottom: 10px;	/* position from bottom ( used with fixed ) */
  height: 26px;		/* ticker area ( background ) height */
  margin-left: 0px;	/* can be negative to force off left edge */
  /* margin-right: 10px;	/* this doesn't seem to do anything ?? */
  padding-left: 100%;	/* defines where text starts scrolling from ( right edge ) */
  z-index: 100;
}

/* clrleft and clrright - cover the end of the ticker so it doesn't go all the way to edge */
.clrleft {
	position: fixed;
	/* top: 17px;			/* match the ticker background position ( top or bottom ) */
	bottom: 10px;
	height: 26px;		/* needs to match the height of the ticker background */
	line-height: 26px;	/* should match the height of the ticker background */
	right: 99%;			/* how much area we do not cover - match left and right to center */
	width: 100px;		/* excess goes out of viewport */
	background-color: rgb(17, 34, 17);	/* match page background color */
/*	background-image: url( ./images/NLCPencil.gif );	/* with an image */
/*	background-repeat: no-repeat; */
/*	background-position: 82px,0px;	/* 100px ( div width ) - 16 ( img widdth ) - 2 ( spacing ) */
	z-index: 120;		/* in front of everything else */
}
.clrright {
	position: fixed;
	/* top: 17px; */
	bottom: 10px;
	height: 26px;
	line-height: 26px;
	left: 99%;
	width: 100px;
	background-color: rgb(17, 34, 17);
/*	background-image: url( ./images/NLCPencil.gif );	/* with an image */
/*	background-repeat: no-repeat; */
/*	background-position: 2px,0px; */
	z-index: 120;
}

/* ticker - this effect the area where the ticker is */
.ticker {
  display: inline-block;
  z-index: 110;
  height: 26px;				/* effects div height ( invisible ) */
  line-height: 26px;		/* effects text spacing from top ( vertical ) */
  white-space: nowrap;		/* display items in a line - doesn't wrap to next line */
  padding-right: 100%; /* ensure items go before animations repeat (taken from parent due to inline-block) */
  -webkit-animation-iteration-count: infinite;
		  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
		  animation-timing-function: linear;
  -webkit-animation-name: ticker;
		  animation-name: ticker;
  -webkit-animation-duration: 33s;	/* Ticker Scroll Speed ( set both the same ) */
		  animation-duration: 33s;
}

/* ticker_item - this effects the "look" of the Ticker Text */
.ticker__item {
  display: inline-block;
  padding: 0 10px;	/* spacing between each block ( div ) of text ( 0 top and bottom 2 left and right )*/
  /* font-size: 20px; */
  font-size: 12px;
  color: rgba(250, 250, 100, .9);	/* text color and alpha */
  /* font-family:  Lucida Console, Helvetica, Arial, san-serif; */
  /* font-family: 'Ranger'; */
  font-family: 'Courier New';
  /* text-transform: uppercase;		/* capitalize uppercase lowercase */
  /* text-shadow: 2px 2px rgba(50, 200, 50, .5);		/* force a shadow on text */
}

/*
body {
  padding-bottom: 5rem;		/* space ticker off the bottom of the window */
}
*/