h1 {
        color: #3c3;
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 36px;
        text-shadow: 3px 3px black;
        margin-top: -5px;
        /*margin-bottom: -0px;*/
        /* font-weight: 100;*/
        font-style: italic;
        /*z-index: 5;*/
    }
    h2 {
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 20pt;
        color: green;
        /*text-shadow: 2px 2px #ff0;*/
        margin-top: -5px;
        /*margin-bottom: -0px;*/
    }
    h3 {
        font-family: trebuchet MS, sans-serif;
        font-size: 1.25em;
        color: blue;
        margin-top: -5px;
        margin-bottom: 2px;
    }
    h4 {
        font-family: trebuchet MS, sans-serif;
        font-size: 1.5em;
        color: blue;
        text-shadow: 1px 1px grey;
        margin-top: -0px;
        margin-bottom: 15px;
    }
    h5 {
        font-family: trebuchet MS, sans-serif;
        font-size: 13pt;
        color: black;
        text-shadow: 1px 1px red;
        margin-top: 5px;
        margin-bottom: 5px;
    }
	h6 {
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 14pt;
        color: green;
        /*text-shadow: 2px 2px #ff0;*/
        margin-top: -5px;
        /*margin-bottom: -0px;*/
    }
	br 	{
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 10px; /* change this to whatever height you want it */
	}
	.white {
		background: white;
	}
	.trial {
		background: purple;
	}
    .center {
        text-align: center;
    }
	.right {
        text-align: right;
    }
    .adds {
        background: white;
        border-style: double;
        border: 2px white;
        /* border-radius: 5px; */
        margin-bottom: 0px;
        /* padding-bottom: 10px; */
        text-align: center;
        /* padding-bottom: 15px; */
    }
    .topmargin {
        padding-bottom: 5px;
        background: #3c3;
    }
	/*.container .jumbotron { 
		border: 1px solid black;
		border-radius: 0px;
	}*/
    .jumbotron {
		position: static;
        z-index: 1;
        background: inherit;
        /* margin-top: 0; */
        margin-bottom: 0;
        padding-bottom: 2px;
        padding-top: 2px;
    }
    .jumbotron h1 {
        color: yellow;
    }
    .head {
        color: yellow;
        text-shadow: 2px 2px black;
    }
	.navbartitle {
        font-family: trebuchet MS, sans-serif;
        font-size: 18px;
        color: black;
		text-shadow: 1px 1px yellow;
        margin-top: -1px;
        margin-bottom: 2px;
    }
    .attention {
        color: green;
        font-weight: bold;
    }
    .navbar { /*controlling navbar border and background*/
        border: 1px solid black;
        border-radius: 25px;
        background: lightgreen;
        margin-top: 0;
        margin-bottom: 0;
    }
    .navbar-header > a { /* This group controls the font of the navbar brand or in this case phone number */
        font-size: 13pt;
        color: red;
    }
    .navbar .navbar-nav { /*this and the next cause the navbar to center in the window as opposed to be positioned left*/
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    .navbar .navbar-collapse { /*see above notation*/
        text-align: center;
    }
    .navbar-default .navbar-nav > li > a {/*this block controls the font in the navbar*/
        font-size: 14pt;
        color: #300; /*Change active text color here*/
        /*text-shadow: 2px 2px #ff0;*/
    }
    .navbar-default a.navbar-brand {
        color: black;
    }
    .navbar-default .navbar-brand:hover {
        color: black;
    }
    body {
        background: url(/images/field.JPG);
    }
    .backimage { /* I was using this to attempt a background image with opacity, and nothing worked for obvious reasons */
        position: absolute;
        background: url(/images/RoscoeA1.JPG);
        z-index: 2;
        opacity: .2;
    }
    .colorback { /* I used this class to set apart the background on the cattle breeding date page */
		padding-top: 1em;
		background: #A9D0F5;
        border: 2px solid red;
        border-radius: 5px;
    }
    .pet {
        background: #e6e6ff; /*did not matter whether class vs id, or background vs background-image, or whether or not the .. was used before the /. However it did matter if the leading / was used, but more than anything else, the case of the jpg or JPG was the most significant factor in what did and what did not work.*/
        /*position: static;
        z-index: 1;*/
        margin-top: 0px;
        margin-left: -10px;
        padding: 5px;
        padding-top: 15px;
        border: 1px solid black;
        /* border-radius: 5px; */
    }
    .farm { /* I just never changed this name from when I was working on the veterinary site */
        background: #cff;
        /*position: static;
        z-index: 1;*/
        margin-top: 0px;
        margin-right: -10px; /* This rule (also used on .pet) reduces the space between colums on wide screen devices, but without @media rule below, disaligns colums on narrow views */
        padding: 5px;
        padding-top: 15px;
        border: 1px solid black;
        /* border-radius: 5px; */
        opacity: 1;
    }
    .farmi {
        position: relative;
        /*z-index: 1; /* z-index only applies to positioned elements set to one of these three: absolute, fixed or relative */
        /*opacity: 100;*/
        /*background: inherit;*/
        margin-top: 0px;
        margin-right: -10px; /* This rule (also used on .pet) reduces the space between colums on wide screen devices, but without @media rule below, disaligns colums on narrow views */
        padding: 5px;
        padding-top: 15px;
        border: 1px solid black;
        /* border-radius: 10px; */
    }
    .fullwidth {
        background: #cff;
        margin-top: 0px;
		/*margin-left: 20px;
		margin-right: 20px;*/
        padding: 5px;
        padding-top: 15px;
        border: 1px solid black;
        /* border-radius: 10px; */
    }
    @media (max-width: 1000px) {
        /* This rule is applied to pages with two colums where the narrowing of the space between the colums caused the right borders to become disaligned on narrow media devices*/
        .farm {
            margin-right: 0px;
        }
        .pet {
            margin-left: 0px;
        }
    }
    .lwrap {/*These two items is what floats images to the left and right with text wrap*/
        float: left;
        margin-right: 5px;
    }
    .lwrapz {/*These two items is what floats images to the left and right with text wrap*/
        position: relative;
        z-index: -1;
        opacity: .2;
        /*float: left;
        margin-right: 5px;*/
    }
    .rwrap {
        float: right;
        margin-left: 5px;
    }
    #header {
        /*text-align: center;*/
        /*background-color: white;*/
        padding-bottom: 15px; /* This puts the white space below the text*/
        /*opacity: 0.5;*/
        /*border: none;*/
    }
    ul.standard {
        font-family: trebuchet MS, sans-serif;
        font-size: 12pt;
    }
    ul.standard li {/*This puts a 5px space at the bottom of all list items*/
        margin-bottom: 5px;
    }
    ol.standard {
        font-family: trebuchet MS, sans-serif;
        font-size: 12pt;
    }
    ol.standard li {/*This puts a 5px space at the bottom of all list items*/
        margin-bottom: 5px;
    }
    .normal {
        width: auto;
        border: 2px solid black;
        background-color: White;
        /* border-radius: 10px; */
        box-shadow: 6px 6px 6px #999;
        padding: 1em;
        padding-bottom: .1em;
        margin-bottom: .5em;
    }
    a {
        font-family: trebuchet MS, sans-serif;
        font-size: 12pt;
    }
    p {
        /*display: block
        border: 5px 5px;*/
        margin-top: 0px;
        margin-bottom: 15px;
        font-family: trebuchet MS, sans-serif;
        font-size: 12pt;
    }
    .red { /* used in emergencies
        margin-top: 5px;
        margin-bottom: 15px; */
        font-family: trebuchet MS, sans-serif;
        font-size: 12pt;
        color: red;
    }
    #blue {
        color: blue;
    }
    #yellow {
        color: yellow;
    }
    table th { /*This was the only way I could get the text in the table heading to align to the center */
        text-align: center;
    }
    /*table {
    word-break:break-all;
    word-wrap:break-word;
    table-layout:fixed;
    }*/
    .fine {
        font-family: trebuchet MS, sans-serif;
        font-size: 8pt;
    }
    .finesub {
        font-family: trebuchet MS, sans-serif;
        font-size: 9pt;
        margin-bottom: 6px;
    }
    .finemain {
        font-family: trebuchet MS, sans-serif;
        font-size: 6pt;
    }
    .fine-caption {
        font-family: trebuchet MS, sans-serif;
        font-size: 8pt;
        font-weight: bold;
        color: green;
    }
    .popover {
        border-radius: 6px;
    }
    .popover-title {
        font-size: 15px;
        font-weight: bold;
    }
    .popover-content {
        font-size: 12px;
    }
    .change {
        font-style: italic;
        color: #800000;
        text-shadow: .5px .5px #f00;
    }
    .footer {
        background: #ff9;
        border: 1px solid black;
        border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
        padding-top: 0.7em;
        padding-left: .7em;
        padding-right: .7em;
        /*padding-bottom: 1em;*/
        text-align: center;
        /*clear: both;*/
        font-size: 12px;
        font-style: oblique;
		color: black;
    }