@charset "utf-8";
/* CSS Document */
/* Copy of dhstyle taken 4/7/19 */

/* COWGIRLS:
<body background="dream/images/leather.jpg" bgcolor="#F6CC99" link="#BF002E" vlink="#006633">
*/

/* 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 {
  background-image: url("http://www.cowgirls.com/images/leather.jpg");
  background-color: #F6CC99;
	/* font-family: Verdana, Arial, Geneva, helvetica, sans-serif; */
  font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
	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 */
}



/* Font style to mimic the bootstrap navbar menu for our text menu */
.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;
}
.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: #3333cc; */ /* web safe blue */
  /* color: #BF002E; */ /* cowgirls */
  color: #336600;
}

/* visited link */
a:visited {
   /* color: #8C5DC0; */
   color: #669900;
}

/* actively clicking */
a:active {
	color: #DAF7A6;  /* green */
}
/* mouse over */
a:hover {
	color: #4f2080;
  
  
}

.center {
    text-align:center;
}

.left{
	text-align: left;
}

.right{
	text-align: right;
}

.bold {
   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;
}

/* Blue color (required) field */
/* this interferes with required fields in forms */
.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.3em;   
}
.redFont {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: 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;
}

/* 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;
}
.horseNameFont { /* Horse 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 for the add horse screen, etc. */
.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;
}


/*
label{
  vertical-align: middle;
}
*/



/* 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;  */
}   




/* combine with center like this class="tiny center" */
.tiny {
    font-family: Arial, helvetica, san-serif;
    font-size: xx-small;
    font-style: normal;
    font-weight: lighter;
    font-stretch: condensed;
}

/* combine like this class="tiny center gray" */
/* for grayed-out text */
.gray {
    /* color: darkgray; */
    color: dimgray;
    /* font-weight: lighter; */
    /* font-stretch: condensed; */
}

.x-small {
    font-family: Arial, helvetica, san-serif;
    font-size: x-small;
    font-style: normal;
}

.small {
    font-family: Arial, helvetica, san-serif;
    font-size: small;
    font-style: normal;
}

/* this matches bootstrap striped table */
.bgWhitesmoke {
   background-color: whitesmoke;
}
.bgLightgray {
   background-color: #E0E0E0; /* lightgray */
}
.bgTitlebar {  /* can put this on a grid row */
  background-color: #6a7aa9; 
  color: white;
}
/* for mobile - media query for desktop to be white */
.bgSearchResults {
 background-color: #E8E8E8; /* lighter than lightgray */
}

/* Colors for the Bad Orders and Search Orders screens to show the status */
.bgSearchBar {
  background-color: #bccad6; /* dusky blue search bar for working orders */
}
.bgHasPhoto {
  background-color: #f7cac9;
}
.bgHasVideo {
  background-color: #f7786b;
}
.bgHasII {
  background-color: #92a8d1;
}
.bgHasIV {
  background-color: #8d99bc;
}
.bgSold {
  background-color: #ca9cce;
}




table {
   border-collapse: collapse;
}

/* usage: <table class="center"> different than text-align */
table.center {
    margin-left:auto; 
    margin-right:auto;
  }
/* usage: <table class="centered"> */
table.centered {
    margin-left:auto; 
    margin-right:auto;
}
table.bgWhitesmoke {
   background-color: whitesmoke;
}




td {
	font-family: Verdana, Arial, Geneva, helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
   /* border: 1px solid black; */
}
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 {
	font-family: Verdana, Arial, Geneva, helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: bold;
   /* border: 1px solid black; */
   
}
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 {
	font-size: 13px;
	font-style: normal;
	font-weight: bold;
}



.notes {
	color: dimgray;
	font-size: .9em;
	font-style:italic;
}


/* odd/even for manage_horse_skills.php */
.odd {
    background-color: lightgray; /* #E5E2E2; */
    /* color: #0000FF; */
	color: #0000CD; /* same as .sire */
    font-family: Verdana;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
    border-top: 0px;
    border-bottom: 2px solid #ddd;
    font-size: 10pt;
    }

.even {
    background-color: whitesmoke; /* #FFFFFF; */
    /* color: #9932CC; */
	color: #663399; /* same as .dam */
    font-family: Verdana;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
    border-top: 0px;
    border-bottom: 2px solid #ddd;
    font-size: 10pt;
  }
 


/* Header and other Title Bars  */ 
.titlebar {
	/* background-color: #6A6AAA;  */
   /* background-color: #3f51b5; */
   
   /* background-color: #252574; */
   background-color: #6a7aa9;
   
   
    /* background-color: #000080;  */ /* navy */
    /* background-color: #8057ac; */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
    /*font-weight: bold; */
    /* font-size: 1.2em; */
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    height: 25px;
    color: #FFFFFF;
    letter-spacing: 1px;
    padding: 5px;
}

    
/* used on home page for headings */
/* NOT FOR SUBTITLE ON TITLEBAR */
.subtitle {
    /* try=TAN? background-color: #b192d5 OR background-color: #d0c8bd; */
    background-color: #E0E0E0;  /* lightgray */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: left;
    vertical-align: middle;
    font-size: 1em;
    font-weight: 500;
	 width: 90%;
    padding: 5px; /* top/bottom left/right */
    /* color: #FFFFFF; */
}

/* Used for Subtitle Headings in a table row */
.darkgray {
    background-color: #CCCCCC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
    font-size: 14px; 
    /* font-size: 1em; */
    font-weight: 500;
    padding: 5px; /* top/bottom left/right */
}

/* Used for Headings in a table row */ 
.lightgray {
    background-color: #E0E0E0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
   /* font-size: 1em; */
   font-weight: 500; 
   letter-spacing: 1px;
}

.nopadding {
   padding: 0px;
   margin: 0px;
}
.padding {
   padding: 3px;
   margin: 3px;
}
.morepadding {
   padding: 5px;
   margin: 5px;
}
.padTopBottom {
	padding-top: 5px;
	padding-bottom: 3px;
}
    
/* hide something from spambots using honeypots but don't call it HIDDEN! */
.mauve { display: none;}

/* font that looks like bootstrap form labels */
.formLabel {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 1em;
   font-weight: 500;
   /* margin: 5px; */
}


/* New Style 2017 */
.cgList{
	list-style-type: none;
	padding: 1px;
}
.cgList li{
	/* width: 80%; */
	margin-left: 5%;
	/*margin-right: 5%; */
	padding: 3px; 
	font-size: 1em;
	cursor: pointer;
	text-align: left;
   text-decoration: none;
}
.cgList li:active{
	top: 1px;
  
}
.cgList li:visited {
   top: 1px;
}

.cgList li a{
	/* color: #6b399f; */ /*8057ac*/
   /* color: #3333cc; */ /* let the active link color control this */
	font-weight: normal;
   text-decoration: none;
}

.cgList li:hover a{
	color: #46588E;
	font-weight: bold;
	/*text-decoration: underline;*/
}






/* 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;
}




/* Google Responsive-Cowgirls 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-Cowgirls { 
   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) {
   .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-Cowgirls {  /* copy of below min500px - not sure if they overlap */
      width: 468px; height: 60px;
   }
   
}



/* Start 500px small view to control the size of the google responsive banner */
@media(min-width: 500px) { 
   .Responsive-Cowgirls { 
      width: 468px; height: 60px;
   }
   
} /* end 500px small view */


    

/* Start Tablet View*/
@media only screen and (min-width : 768px) {   
   
/* 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-Cowgirls { 
   width: 728px; height: 90px; 
} 
   
   
} /* end tablet view */

   

/*Desktop View*/
@media only screen and (min-width : 1024px) {  
   
body {
	font-size: 13px;
}
   
   
}


