@charset "utf-8";
/* CSS Document */

/* 1em is equal to the current font size. The default text size in browsers is 16px. 
So, the default size of 1em is 16px.  The size can be calculated from pixels 
to em using this formula: pixels/16=em
*/



body {
	font-family: Verdana, Arial, Geneva, helvetica, sans-serif; 
  /* DH */
  /*font-family: Arial, Helvetica, Verdana, Geneva, sans-serif; */
	/* font-size: 12px; */
  font-size: 1em;
	font-style: normal;
}

img {
    max-width: 100%;
    height: auto;
}
img.faded {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}


.menustyle {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #777; /* same as bootstrap navbar */
   font-size: 14px;
   font-style:normal;
   font-weight: normal;
   text-decoration: none;
   padding: 15px;
   display: inline-block;
}
.menustyle:hover {
  color: black;
}
.menustyle a:link {
   color: gray;
   text-decoration: none;
}
.menustyle a:visited {
   color: gray;
   text-decoration: none;
}
.menustyle a:active {
   color: #DDA0DD;
   text-decoration: none;
}
.menustyle a:hover {
  color: black;
}




/* Body Tag no longer support these in HTML5 */
/* unvisited link */
a:link {
	 /* color: #6A6AAA;   */
    /* color: #337AB7;  */
    /* color: #006666;   */
   /* color: #339999;  */
    color: #33388E; /* from prior colors */
   
   text-decoration: none;
}
/* visited link */
a:visited {
	 color: #663399; 
   /*  color: #666699;  */
   /* color: #9966cc; */ /* web safe purple */
   /* color: #622569; */
   /* color: darkslateblue; */
   /* color: '#6A6AAA'; */
   text-decoration: none;
}
/* actively clicking */
a:active {
	/* color: #DDA0DD;  */
   color: #45C8CC;
   /* color: #5b9aa0; */
  text-decoration: none; 
}
/* mouse over */
a:hover {
   /* color: #4f2080; */
   /* color: #2C9DA1;  */
   color: #6A6AAA; 
   text-decoration: none;
   font-weight:bold;
}

p {
	font-family: Verdana, Arial, Geneva, helvetica, sans-serif;
	font-size: 1em;
	font-style: normal;
}

p.tiny {
    font-family: Arial, helvetica, san-serif;
    font-size: xx-small;
    font-style: normal;
    font-weight: lighter;
}


.center {
    text-align: center;
}

.left{
	text-align: left;
}

.right{
	text-align: right;
}


.bold { 
   font-weight: bold;
}
.gray { 
    color: dimgray;
    /*font-weight: lighter; */
    /* font-stretch: condensed; */
}



/* Usage: class="tiny center gray" */
.tiny {
    font-family: Arial, helvetica, san-serif;
    font-size: xx-small;
    font-style: normal;
    font-weight: lighter;
}

.x-small {
    font-family: Arial, helvetica, san-serif;
    font-size: x-small;
    font-style: normal;
    /* font-weight: bold; */
}

.small {
    font-family: Arial, helvetica, san-serif;
    font-size: small;
    font-style: normal;
    /* font-weight: bold; */
}


/* required field */
.required {
    font-family: Arial, helvetica, san-serif;
    font-size: xx-small;
    font-style: normal;
    font-weight: bold;
    color: blue; /* web safe */
}



.requiredAsterisk {
   color: red;
   font-weight: 600;
   font-size: 1.1em;   
}
.redFont {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #D40404; /* red; */
   font-weight: 500;
}
.softRedFont {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #c94c4c;
   font-weight: 500;
}
.greenFont {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #337B38; 
   font-weight: bold;
}
.blueFont {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   /* color: navy;  */
   color: #4F76C7; 
   font-weight: bold;
}
/* these two navy coloras are for the progress bar steps */
.lightNavyFont {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #7a87ae; /* light grayish navy */ 
   font-size: 1.1em;
   font-weight: bold;
} 
.darkNavyFont {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #142556; /* dark navy */
   font-size: 1.1em;
   font-weight: bold;
}


/* used for color and size of icons like film, list, up arrow, etc. */
.purpleFont { 
   color: #5f5fb8;  /* same color purple as old video icon */
   font-weight: bold;
   font-size: 1.4em;
}
.fancyFont { /* For Sale, At Stud titles on mobile search results */
   font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif; 
   color: #46588E;
   font-weight: bold;
   font-style: italic;
   /* font-variant: small-caps; */
   /* letter-spacing: 1px; */
   font-size: 1.1em;
}
.adTitleFont { /* Item Name, on search results */
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
   color: #46588E;
   font-weight: bold;
   font-size: 1.1em;
}
.forSaleFont {
   font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif; 
   color: #46588E;
   font-weight: bold;
   font-style: italic;
   /* font-variant: small-caps; */
   /* letter-spacing: 1px; */
   font-size:0.9em;
}
/* bigger radio button text */
.radioLabelFont {
   font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif; 
   color: #46588E; /* same color as forSaleFont above */
   font-weight: bold;
   font-style: italic;
   /* font-variant: small-caps; */
   /* letter-spacing: 1px; */
   /* line-height: 1.5px; */
   font-size:16px;
   vertical-align: middle;
   
}

input[type="radio"]{
  vertical-align: middle;
  font-size:16px;
}



/* search results ad title */
.srAdTitle {
   text-align: left;
   /* font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;  */
   /* vertical-align: text-top; */
   font-weight: 500;
   color: black;
   /* letter-spacing: 1px; */
   font-size: 1.1em;
   /* margin-left: 5px; */
   /* padding: 3px;  */
}   


/* this matches bootstrap striped table */
.bgWhitesmoke {
   background-color: whitesmoke;
}
.bgLightgray {
   background-color: #E0E0E0; /* lightgray */
}
.bgTitlebar {  /* can put this on a grid row */
  background-color: #7AD7DB;  /* turquoise */	
  /* background-color: #6a7aa9;*/ /*DH blue */
  color: #5a5858; /* gray */
}
/* for mobile - media query for desktop to be white */
.bgSearchResults {
 background-color: #E8E8E8; /* lighter than lightgray */
}
.bgSearchBar {
  background-color: #bccad6; /* dusky blue search bar for working orders */
}
/* Colors for the Bad Orders and Search Orders screens to show the status */
.bgHasPhoto {
  background-color: #f7cac9;
}
.bgHasVideo {
  background-color: #f7786b;
}
.bgHasII {
  background-color: #92a8d1;
}
.bgHasIV {
  background-color: #8d99bc;
}
.bgSold {
  background-color: #ca9cce;
}


table {
   border-collapse: collapse;
}

td {
	font-family: Verdana, Arial, Geneva, helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
}
td.center {
  text-align: center;
}
td.middle {
  vertical-align: middle;
}
td.top {
  vertical-align: top;
}



/* srList is for the search results list table, gray top and bottom border only */
tr.srListFirst {
   border-top: 2px solid #ddd;
   border-bottom: 2px solid #ddd;
}
tr.srList {
   border-top: 0px;
   border-bottom: 2px solid #ddd;
}



th {
   /* color: navy; */
	font-family: Verdana, Arial, Geneva, helvetica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
}

h1 {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
}
h2 {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: bold;
}
h3 {
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
}
h4 { 
    /*color: navy; */
    font-size: 13px;
    font-style: normal;
    font-weight: bold;
}


/* bold and centered for headings */
.navy {
    /* background-color: #000080; */  
    /* background-color: #6A6AAA; */
    background-color: #7AD7DB; /* turquoise - see how much is using this */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
}


/* bold and centered for headings */
.titlebar {
    background-color: #7AD7DB;  /* turquoise */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
    /*font-size: 1.3em; */
    /*font-weight: 500; */
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    padding: 5px; 
    height: 25px;
    letter-spacing: 1px;
    color: #5a5858; /* gray */
}



/* for headings */ 
.darkgray {
    background-color: #CCCCCC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
   font-weight: 500;
    
}

/* for headings on home page */
.subtitle {
    background-color: #E0E0E0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: left;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 500;
    width: 90%;
    padding: 3px 8px; /* top/bottom left/right */
    /* color: #FFFFFF; */
    
}



/* for headings */ 
.lightgray {
    background-color: #E0E0E0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    font-weight: bold;
}

.nopadding {
   padding: 0px;
   margin: 0px;
}
.padding {
   padding: 3px;
   margin: 3px;
}
.morepadding {
   padding: 5px;
   margin: 5px;
}
.padTopBottom {
	padding-top: 5px;
	padding-bottom: 3px;
}
    


/* usage: <table class="centered"> */
table.centered {
    margin-left:auto; 
    margin-right:auto;
  }
table.center {
    margin-left:auto; 
    margin-right:auto;
  }

    
/* hide something from spambots using honeypots but don't call it HIDDEN! */
.mauve { display:none;}


.tag {
  background: #777;
  border-radius: 50px;
  font-size: 8px;
  margin: 0;
  color: #fff;
  padding: 2px 10px;
  text-transform: uppercase;
}
.tag-green {
  background-color: #4caf50;
}
.tag-teal {
  background-color: #7AD7DB; /* TT aqua */
}
.tag-purple {
  background-color: #663399;
}


/* font that looks like bootstrap form labels */
.formLabel {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 1em;
   font-weight: 500;
   /* margin: 5px; */
}

     
/* on home page so looks similar to the ttList */
.categoryList {
   font-size: 1.1em;
   padding:5px;
   font-weight: normal;
   line-height: 1.7;
   text-decoration: none;
   
}

/* TESTING New Style 2017 */
.ttList{
	list-style-type: none;
	padding: 1px;
   text-decoration: none;
}
.ttList li{
	/* width: 80%; */
	margin-left: 5%;
	margin-right: 5%;
	padding: 3px;
	font-size: 1.1em;
	line-height: 1.7;
	cursor: pointer;
	text-align: left;
   text-decoration: none;
}
.ttList li:active{
	top: 1px;
   text-decoration: none;
}
.ttList li:visited{
	top: 1px;
   text-decoration: none;
}
.ttList li a{
	/* color: #6b399f; */  /* let the active link color control this */
	font-weight: normal;
   text-decoration: none;
}
.ttList li:hover a{
	/* color: #4f2080; */
	font-weight: bold;
	text-decoration: none;
}

/* for background image on home page */
.tablebg {
	background-image: url(https://www.tacktrader.com/images/tt_background.png);
	background-repeat: no-repeat;
   background-position: center top;
   
}
  
/* These are for the show_horse.php horse data table 
   label on left: data on right */
.itemLabel {
   /* text-align: right; */
   /* font-family: Verdana, Arial, Geneva, helvetica, sans-serif; */
  /* font-family: Verdana, Geneva, sans-serif; */
  /* chrome is having a problem with helvetica */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  text-align: left; 
   /* letter-spacing: 1px; */
   /* color: dimgray;  */
   color: black; 
   vertical-align: top;
   font-weight: 500;
   margin-right: 5px;
   margin-left: 5px;
   padding-top: 10px;
   padding-bottom:5px;
	
}
.itemData {
   /* width: 70%; */
   /* font-family: Verdana, Geneva, sans-serif; */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1em;
   text-align: left;
   vertical-align: top;
   font-weight: 600;
   margin-left: 5px;
   padding-top: 10px;
   padding-bottom:5px;
}


/* CSS buttons in our standard colors */
/* this one just used in conjuction with the colored ones */
/* i.e. class="button-link button-color" */

.button-link {
   /* background-color: #4F76C7; */
   border: none;
   color: white;
   margin-top: 5px;
   padding: 10px 20px;
   width: 200px;
   text-align: center;
   text-decoration: none;
   font-size: 1.2em;
   font-weight: 500;
   letter-spacing: 1px;
   border-radius: 5px;
   /* fixes strange display on apple devices */
   -webkit-appearance: none;
}
.button-link a {
   color: white;
   text-decoration: none;
}
.button-link a:hover {
  color: white; 
  text-decoration: none;
}
/* text color changes when being clicked */
.button-link a:active { 
   color: dimgray;
   text-decoration: none;
}
.button-link a:link {
  color: white; 
  text-decoration: none;
}
.button-link a:visited {
  color: white; 
  text-decoration: none;
}



/* use this along with button-link 
  i.e. class="button-link button-blue */
.button-blue {
   /* background-color: #4F76C7; */ /* blue button */
   background-color: #46588E; 
   min-width: 120px;
}
.button-blue:hover {
   /* background-color: #3B5998; */
   background-color: #99A5C9; 
}
/* for view ad button */

.button-blue-md {
   /* background-color: #99A5C9;  */
   background-color: #46588E; 	
   padding: 5px 10px;
   /* background-color: #6a7aa9; */
   width: 120px;
}
.button-blue-md:hover {
   background-color: #6a7aa9;
   /*background-color: #99A5C9;  */
}
.button-blue-sm {
   /* background-color: #99A5C9; */
	background-color: #46588E; 
   padding: 5px 8px;
   font-size: 1.1em;
   /* background-color: #6a7aa9; */
   width: 90px;
}
.button-blue-sm:hover {
   background-color: #6a7aa9;
   /*background-color: #99A5C9;  */
}



/* use this along with button-link 
  i.e. class="button-link button-blue */
.button-green {
   background-color: #4caf50; /* green button */
}
.button-green:hover {
   background-color: #008000; /* slightly darker */
}

/* use this along with button-link */
.button-purple {
   background-color: #bcaad0; /* purple button */
   width: 250px;
   padding: 5px 10px;
}
.button-purple a {
   color: white;
   text-decoration: none;
}
.button-purple:hover {
   background-color: #b192d5; /* slightly darker */
}

/* use this along with button-link */
.button-teal {
   background-color: #99cccc; /* purple button */
   width: 250px;
   padding: 5px 10px;
}
.button-teal a {
   color: white;
   text-decoration: none;
}
.button-teal:hover {
   background-color: #8cbaba; /* slightly darker */
}



/* Plain white and gray CSS button */
/* use this along with button-link 
  i.e. class="button-link button-blue */
.button-plain {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}
.button-plain:hover {
 background-color: #e7e7e7;
}


/* CSS version of the Order Buttons */
.button-order {
   background-color: #f5d25d;  /* gold */
   border: none;
   color: black;
   margin-top: 5px;
   padding: 10px 0px; 
   width: 125px;
   text-align: center;
   text-decoration: none;
   font-size: 1.1em;
   font-weight: 500;
   /* letter-spacing: 1px; */
   border-radius: 5px;
   /* fixes strange display on apple devices */
   -webkit-appearance: none; 
     
}
.button-order:hover {
   background-color: #e5b927;
}
.button-order a {
   color: black;
   text-decoration: none;
}
.button-order a:active {
   color: white;
   text-decoration: none;
}
.button-order-sm {
   background-color: #f5d25d;  /* gold */
   color: black;
   padding: 5px 8px;
   font-size: 1.0em;
   width: 90px;
}
.button-order-sm:hover {
   background-color: #e5b927;
   color: black;
}





/* Zoom button for mobile search results button fills column */
.button-zoom {
    background-color: #f5f5f5; /* matching bootstrap panel footer */
    /* background-color: white; */
    display: block;
    width: 100%;
    border: none;
    color: #5f5fb8;  /* same color purple as old video icon */
    padding: 1px; 
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    /* margin: 4px 2px; */
    cursor: pointer;
}



.video-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
/* wrap this around the video container class */
.video-wrapper { 
  width: 640px;
  max-width: 100%;
  margin-left:auto; /* center this */
  margin-right:auto;
  text-align: center;
  vertical-align: bottom;
}
   

/* MOBILE FIRST VIEW */
/* for the search results list, xs device, landscape view */
.show-or-hide-landscape {
   display: none;
}
/* for search results list, xs device, portrait view */
.show-or-hide-portrait {
   display: block;
   /* background-color: #B0E0E6;  */ /* for testing light aqua */
}

/* override 20px bottom margin on bootstrap navbar */
.navbar {
    margin-bottom: 0!important;
}


/* Google Custom Search to make Search button to correct conflict with Bootstrap */
/* https://productforums.google.com/forum/#!topic/customsearch/0UKvsM1fWg0;context-place=topicsearchin/customsearch/custom$20search$20button */
.gsc-control-cse .gsc-table-result {
	font-family : inherit;
}

.gsc-control-cse .gsc-input-box {
	height : inherit;
}

input.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus,
.gsc-search-button, input.gsc-search-button-v2 {
	box-sizing  : content-box;
	line-height : normal;
	margin-top  : 0px;
}


@media print {
.noPrint {
    display:none !important;
  }
}


/* Google Responsive-TT banner class used in showGoogleResponsive */
/* Mobile first size - control the size of the google responsive banner */
/* Instructions: https://support.google.com/adsense/answer/6307124 */
.Responsive-TT { 
   width: 320px; height: 100px; 
}



/* This is for xs phone size to control landscape view on the phone */
/* @media only screen and (min-width: 500px) and (max-width: 767px) and (orientation: landscape) {  */
@media only screen and (min-width: 500px) and (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important; /* keeps iphone from zooming in on forms */
  }

   .show-or-hide-landscape { /* for search results list */
      display:block;
      /* background-color: lemonchiffon; */ /* for testing */
   }
   .show-or-hide-portrait {  /* for search results list */
      display: none;
   }
   
   
   .Responsive-TT {  
      width: 468px; height: 60px;
   }
   

   
}




/* Start 500px small view to control the size of the google responsive banner */

@media(min-width: 500px) { 
  
   .Responsive-TT { 
      width: 468px; height: 60px;
   }
  
   
} /* end 500px small view */
    

/* Start Tablet View*/
@media only screen and (min-width : 768px) {   

  input, select, textarea {
      font-size: 13px; 
  }
   
   
/* keeps the navbar from showing >= 768px */  
.navbar-collapse {
     display: none!important;
}
	
/* for mobile - media query for desktop to be white */
.bgSearchResults {
 background-color: white; /* this is gray on mobile */
}
   
/* contact_details, etc. */   
/* when label and data are side by side align right */
.boldLabel {
  text-align: right; 
}
   
/* control the size of the google responsive banner */
.Responsive-TT { 
   width: 728px; height: 90px; 
} 

   
} /* end tablet view */

/*Desktop View*/
@media only screen and (min-width : 1024px) {  
   
body {
	font-size: 13px;
}
input, select, textarea {
  font-size: 13px; 
}

	
/* on home page so looks similar to the ttList */

.categoryList {
   font-size: 1em;
   padding:5px;
   font-weight: normal;
   line-height: 1.3;
   text-decoration: none;
   
}
.ttList li{
	/* width: 80%; */
	margin-left: 5%;
	margin-right: 5%;
	padding: 3px;
	font-size: 1em;
	line-height: 1.3;
	cursor: pointer;
	text-align: left;
   text-decoration: none;
}
	
	
	
	
   
   
}