/*----------- Angularjs doc's ---------------*/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

html {
background: url(../images/background/bg.png) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

body {  
/* background: Azure;
background: AliceBlue;
background: GhostWhite;
background: ivory;
background: snow;
background: floralWhite;
background: WhiteSmoke;
background: radial-gradient(circle, WhiteSmoke, snow); */
background: transparent;
}

#home h1, h2, h3, h4, h5 {
color: WhiteSmoke;
}
#latest h1, h2, h3, h4, h5 {
color: WhiteSmoke;
}

/* Filter options: blur(px), brightness(%),contrast(%),grayscale(%),hue-rotate(deg),
invert(%),saturate(num),sepia(%)*/

thead {
 background-color: rgba(51,51,51,0.75);
 color: rgba(245,245,245,1); 
}
table td:nth-child(even) {
/*   background-color: rgba(51,51,51,1);
color: WhiteSmoke; */
}
table tr:nth-child(even) {
  background-color: rgba(51,51,51,0.75);
  color: WhiteSmoke;
}
.search_box {
border: 1pt dotted rgba(245,245,245,0.3);  /* WhiteSmoke */
}
.race_round {
color: crimson;
font-size: 0.9em;
text-decoration: underline;
}

.race_name {
color: crimson;
font-size: 1.6em;
text-decoration: underline;
}

footer {
font-size: 0.8em;
text-align: center;  
}
hr {            /* https://css-tricks.com/examples/hrs/ */
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

/* Animations CSS */
/* The starting CSS styles for the enter animation */
main.ng-enter {
  transition: 0.6s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
main.ng-enter.ng-enter-active {
  opacity:1;
}
tbody>tr.ng-enter {
  /* standard transition code */
  transition: 1s linear all;
  opacity:0;
}
tbody>tr.ng-enter-stagger {
  /* this will have a 100ms delay between each successive leave animation */
  transition-delay: 0.1s;

  /* As of 1.4.4, this must always be set: it signals ngAnimate
    to not accidentally inherit a delay property from another CSS class */
  transition-duration: 0s;
}
tbody>tr.ng-enter.ng-enter-active {
  /* standard transition styles */
  opacity:1;
}


/* GA Personal Mods */


.visitorcounter {
width:;
background:rgba(51,51,51,0.2);
font-size:110%;
padding:2px;
}
 
.border {
  border: 1px solid #555;
}
.border_top {
  border-top: 1px dotted rgba(91,91,91,0.2);  
}
.border_bottom {
  border-bottom: 1px dotted rgba(91,91,91,0.2);  
}
.border_left {
  border-left: 1px dotted rgba(91,91,91,0.2);  
}
.border_right {
  border-right: 1px dotted rgba(91,91,91,0.2);  
}
.date_text {
  font-size: 0.65em;
  float: right;
}

.transparency {
  background:#7f7f7f;
  background:rgba(255,255,255,0.8)
}
.visitorcounter {
width:;
background:rgba(51,51,51,0.2);
font-size:110%;
padding:2px;
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$*/


.border-temp {
border: solid 2px green;
}
.bg-red {
  background: rgba(131,14,22,1); /* Tina hex codes */
}
.bg-grey {
    background: grey;
}

.bg-green {
    background: #34cb48; /* Tina hex codes */
}

.bg-yellow {
    background: #ffff00; /* Tina hex codes */
}
.bg-black {
    background: black;
}
.bg-blue {
    background: #0000ff; /* Tina hex codes */
}
.bg-pink {
    background: pink;
}
.bg-orange {
    background: orange;
}
.bg-gold {
background-color: #FFEEB5;
/* For WebKit (Safari, Chrome, etc) */
background: #FFEEB5 -webkit-gradient(linear, left top, left bottom, from(#AE8913), to(#FFEEB5)) no-repeat;
/* Mozilla,Firefox/Gecko */
background: #FFEEB5 -moz-linear-gradient(top, #AE8913, #FFEEB5) no-repeat;
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#AE8913, endColorstr=#FFEEB5) no-repeat;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#AE8913, endColorstr=#AE8913)" no-repeat;
}


/*################### Tinted Backgrounds #######################*/
.color-a {
  background-color: red;
}

.color-b {
  background-color: green;
}

.color-c {
  background-image: repeating-linear-gradient(45deg, yellow, yellow 10px, blue 10px, blue 20px);
}

.tint1 {
  box-shadow: inset 10000px 0 0 rgba(255, 255, 255, 0.1);
}

.tint2 {
  box-shadow: inset 10000px 0 0 rgba(255, 255, 255, 0.2);
}

.tint3 {
  box-shadow: inset 10000px 0 0 rgba(255, 255, 255, 0.3);
}

.tint4 {
  box-shadow: inset 10000px 0 0 rgba(255, 255, 255, 0.4);
}

/*########### MEDIA QUERy ###############*/
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) { 

} /* END 320px */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px)and (max-device-width : 480px) {

} /* END Smartphones (portrait and landscape) ----------- */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 360px)and (max-device-width : 640px) {

} /* END Smartphones (portrait and landscape) ----------- */

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

} /* END   iPhone 4 ----------- */

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px)and (max-device-width : 1024px) {

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape) {

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait) {

}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {

}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {

}
/* ###########################End media queries  #################### */