html, body {
    margin: 0px; padding: 0px;
    
/*Font styling for entire web page unless defined more specifically elsewhere*/
    color: #131E66; /*refers to color of text*/
    font-family: "Tahoma";
    font-size: 12px;
    
    
    background-color: #FFFFFF;
}


/*Used for Pictures gallery page*/
.mainimagecontainer {
    text-align: center;
    vertical-align: middle;
    max-width: 360px;
    height: 300px;
    margin: auto;
}

.featuredimgcontainer {
    text-align: center;
    vertical-align: middle;
    max-width: 360px;
    margin: auto;
}

.productimgcontainer {
    max-width: 200px;
    height: 200px;
}
.productimg {
    max-height:190px;
    width:190px;
}

.centerimageincontainer {
    align-items: center;
    justify-content: center;
    display:flex;
}

img.scalememaxboth {
    max-width: 360px;
    max-height: 300px;
    max-width: 95%;
    height: auto;
}


/*Class for the thumbnail images*/
.thumbnailimage {
    height:30px;
    width:30px;
}


.imagewithborder { /*The image tag needs to be set to this class to work nicely.*/
    border: 4px ridge #2233B6;
}


/*max-width and width cannot be set to both a percentage AND a pixel width, or the image won't shrink. With max-width it doesn't display larger than its actual file image size, but with width, the image will scale to the width size, regardless of its file width size*/

/*Use this for naturally large images if setting image size attributes or if image will be in a container with size tags designed to contain the image. images will not scale more than their size as defined with width and height attributes, or as defined by their container, but will scale up to their natural file size if not otherwise contained. They can scale larger than their file image size if attributes allow*/
img.scaleme {
    width: 100%;
    height: auto;
}
/*Use this if natural image size is small enough, and don't set size attributes in image tag. Makes images not take up any more than their actual size as defined by their image file or by their width and height attributes (whichever is larger, so don't set image attributes if image is small enough), but they won't scale smaller inside a floating div (they seem to scale smaller inside a floating div), (verified everything through here) but may scale inside a div with max-width set. This can be used for images that are narrower than the narrowest possible screen size, otherwise, divs may need to be set to max-width of actual image*/
img.scalememax {
    max-width: 100%;
    height: auto;
}

/*aligns an image on the left, floats text around it, and allows a 3px margin on right of image*/
img.leftedge { 
    margin-right: 3px;
    float: left;
}
/*aligns an image on the right, floats text around it, and allows a 3px margin on left of image*/
img.rightedge {
    margin-left: 3px;
    float: right;
}

/*Removes the white space under an image. Used for the page header image at the top of each page*/
img.removebottomspace {
  display: block;
}

/*using div.centertext and div.floatingimage together will create a set of images that float individually but are all centered, each image like a separate word, and the images will wrap and unwrap based on window width. Wrap all the images in a centertext div, and each image wrapped in it's own floatingimage class div*/


div.centertext {
    text-align: center;
    margin: auto;
}

.centerboth {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*center using margin auto, element must have a width and height declared*/
.centeredmhv{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}

/*Here is if you want only vertical must have height declared:*/

.centeredmv{
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
}

/*And only horizontal must have width declared:*/

.centeredmh{
  position:absolute;
  right:0;
  left:0;
  margin:auto;
}


div.floatingimage { /*Will float contents in line like words on a page, aligned to the top.*/
    display: inline-block;
    vertical-align:top;
}

/*
You will need one of the following divs to outline a shrinkable image inside a floating container, and possibly inside any container.
<div style="max-width: 485px;">
<div class="centertext" style="max-width:480px;">
<div class="floatingimage" style="max-width:480px;">
These will center text and a single image within its container, but it can't be set as a class since "max-width<number>; will change from image to image. Using this, you also need to set the style of the image like this: style="width:100%; height:auto;" or as class="scaleme" in order for the image to shrink within a floating container (I think).
*/

/*used for header text and other special text conditions*/
.mainheader {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 5px;
}

.pgheadersocnetwks {
    width: 100%;
    margin-bottom: 10px;
}

span.sectionheader {
    font-size: 12px;
    font-weight: bold;
}

span.blacktext {
    color:#000000;
}

span.alerttext {
    color:#FF0000;
}

span.smalltext {
    font-size: 10px;
}

.purplebar { /*Not Used*/
    font-size: 16px;
   width: 100%;
   background-color: #af96ea;
}

.table {
  display: table;
  width: auto;
  border: 1px solid #000000;
  border-collapse: collapse;
}

.table-row {
  display: table-row;
  clear: both;
}

.table-col {
  float: left;
  display: table-column;
  width: 200px;
//  border: 1px solid #ccc;
}

.table-cell {
  display: table-cell;
  width: auto;
  border: 1px solid #000000;
  padding: 3px;
}

.nopddng {
  padding: 0px;
}

/*
HTML for above code
<div class="table">
  <div class="table-row">
    <div class="table-col">1</div>
    <div class="table-col">2</div>
    <div class="table-col">3</div>
  </div>
  <div class="table-row">
    <div class="table-col">a</div>
    <div class="table-col">b</div>
    <div class="table-col">c</div>
  </div>
</div>*/


table.normaltexttable, td.normaltexttable , th.normaltexttable Tr.normaltexttable {
    font-size: 12px;
    border-collapse: collapse;
    width: 100%;
}

td.normaltexttableleft {
    text-align: right;
}

td.normaltexttableright {
    text-align: right;
}



/*Used for soaps page lists of soaps*/

.smallproductdisplay {
  padding: 10px;
  display: block;
  float: left;
  width: 200px;
  background-color:#D3D3D3;
  margin: 5px;
}


.productliststyle {
  padding: 10px;
  display: block;
  float: left;
  width: 175px;
  background-color:#D3D3D3;
  margin: 5px;
  min-height: 210px;
}

/*This makes a white box to display information about a goat or other item
Use lowercase specialpagesection for elements that should not be displayed when items of class PAGESECTION are displayed, but you want to use the same styling as a page section (lowercase .pagesection might be unused)*/
.PAGESECTION, .pagesection, .specialpagesection {

    margin: auto;
    background-color: #ffffff;
    padding: 10px;
    overflow: auto;
}

.PRODUCT {
    max-width: 800px;
}

.SMALLPRODUCT {
    max-width: 600px;
}

.imgpopbox {
  max-width: none;
  
}

/*Used to create the popup box so that it floats on top of everything else*/
.popupboxbknd {
    position: fixed;
    width: 100%; 
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: .7;
    background-color: #ffffff;
    z-index: 1000;
    display: none;
}

.popupbox {
    background: white;
    display: none;
    position: fixed;
    margin: auto;
    padding: .25in;
    max-height: calc(100% - 3px);
    min-width: 280px;
    overflow: auto;
    z-index: 1001;
}

.tstbxclasses {
  background-color: white;
  display: none;
  position: fixed;
    margin: auto;
    max-height: calc(100% - 3px);
    min-width: 280px;
    overflow: auto;
    z-index: 1001;
}

.nextprintpagelink {
  position: absolute;
  z-index: 2;
  top: .25in;
  left: 0in;
}

.pagebreakafter {
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
/*        page-break-before: always;*/
        break-before: always;
}

@media print {
/*The following code eliminates printing 2 pages of the same thing, hides unnecessary things to print, and turns links into normal text. One of the tricks with creating printable pages is setting style width in inches. Also using display: block; as opposed to display: inline-block; seems to make the blocks not disappear from the print preview when printing!*/
  html, body {
    height:100%;
    margin: 0 !important; 
    padding: 0 !important;
/*    overflow: hidden;*/
    color: #000000;
  }
  .dontprintthis {
    visibility: hidden;
    display: none;
  }
  
@page { size: auto;  margin: 0mm; }



  .dontprintthis {
    visibility: hidden;
  }
  a {
   color: #000000;
   text-decoration: none;
  }
  .printallcolors {
    -webkit-print-color-adjust: exact; 
    color-adjust: exact; 
    background-color: white;
  }
}

.bkgndwhite {
    background-color: white;
}

.animationbox {
    display: block;
    width: 100%; 
    height: 100%;
}


/*Circles*/
.dot {
  height: 100px;
  width: 100px;
  top: -10px;
  border-radius: 50%;
  background-color: black;
  display: block;
}
.soaplabeldotold {
  height: .08in;
  width: .08in;
  border-radius: 50%;
  display: inline-block;
}
.soaplabeldot {
  height: .03in;
  width: .03in;
  border-radius: 50%;
  border-color: green;
  display: inline-block;
  border: .03in solid;
}

.lotionlabel{
  height: 2.5in;
  width: 2.5in;
  border-radius: 50%;
  display: block;
}

/*I I don't think I use atagnohrefv, in-page links can use href, and menubar and popup links are styled elsewhere, and where I do use atagnohref, it doesn't need to show visited.*/
.atagnohref /*.atagnohrefv,*/ {
  cursor: pointer;
text-decoration: underline;
color: #0000EE;
}
/*
If I decide to use this class selector, this is the documentation for the documentation file.
You could also use the class atagnohrefv in the <a tag in conjunction with calling the updatemenubars function. This will, if uncommented from the ddastyles file, cause the link to change color after being visited and remain changed even after browsing away from and back to the page.
.atagnohrefv:visited {
  cursor: pointer;
text-decoration: underline;
color: #651A8B;
}*/


/*replacement for the html tag <br clear="all">*/
p.clearall {
    clear: both;
}


/*Menubar and Popup menus. These class selectors are used to style the menubar, popup menu, and related items*/

.menubar, .indmenu {
background-color: #af96ea; /*#b3b4e0;*/
text-align: left;
width: 100%;
}

.midmenu {
text-align: center;
background-color: #757777;
}

.submenu, .popupsubmenu {
    text-align: center;
    background-color: #f2f2f2;
}

.nxtmenu {
    text-align: center;
    background-color: #b2cfff;
}



.topmenu a, .midmenu a, .submenu a, .nxtmenu a, .popupbtn a, .popupsubmenu a,  .indmenu a  {
    color: white;
    display: inline-block;
    padding: 4px 10px;
    text-align: center;
    text-decoration: none;
    vertical-align:top;
    min-width: 1px;
    cursor: pointer;
}

.topmenu a, .indmenu a {
    color: black;
}

.submenu a, .popupsubmenu a  {
    color: blue;
}

.nxtmenu a  {
    color: #0e0e0f;
}

.indmenu a:hover, .topmenu a:hover, .midmenu a:hover, .popupbtn a:hover  {
    background-color: #6b834f !important; /*!important allows hover to continue to work after clicking assigns a different background color*/
}

.submenu a:hover, .nxtmenu a:hover, .popupsubmenu a:hover {
  background-color: #b7b9b9 !important;
}


a.hiddenmenuitem { /*Used for hiding an item in the menubar*/
    display: none;
}

.popupbtn {
background-color: #333;
text-align: center;
display: inline-block; /*Makes wrapper fit around object*/ }

.popupsubmenu {
  position: absolute;
}

/*End Menubar*/


/*These three classes can be used to align something center while also having stuff aligned right and/or left on the same line, essentially creating 3 columns with the center column aligned center. *NOTE* If you have a return space between the end div html tag of one column and the beginning div html tag of the next column in your html, the columns won't be side by side. You may also have issues with a small space below the div's by using inline-block instead of display: block;*/
div.alignleftonethird {
  width:33.33333%;
  text-align:left;
  display: inline-block;
}
div.aligncenteronethird {
  width:33.33333%;
  text-align:center;
  display: inline-block;
}
div.alignrightonethird, div.alignrightonethirdtextleft {
  width:33.33333%;
  text-align: right;
  vertical-align: top;
  display: inline-block;
}
div.alignrighttwothirds {
  width:66.6666%;
  text-align: right;
  vertical-align: top;
  display: inline-block;
}

/*These classes do the same as above only they split in the middle making 2 columns*/
div.alignleftonehalf {
  width:49%;
  text-align: left;
  display: inline-block;
  vertical-align:top;
}
div.alignrightonehalf {
  width:49%;
  text-align: right;
  display: inline-block;
  vertical-align: top;
}
/*These create 2/3 and 1/3's columns with text align left*/
div.alignlefttwothirds {
  width:66.66666%;
  text-align:left;
  display: inline-block;
  vertical-align:top;
}

div.alignrightonethirdtextleft {
  text-align: left;
}
div.testalignrightonethirdtextleft { /*This can be removed*/
  width:33%;
  display: inline-block;
}

/*Click here button*/


.clickhereBtn {
	-moz-box-shadow:inset 0px 1px 0px 0px #efdcfb;
	-webkit-box-shadow:inset 0px 1px 0px 0px #efdcfb;
	box-shadow:inset 0px 1px 0px 0px #efdcfb;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfbdfa), color-stop(1, #bc80ea));
	background:-moz-linear-gradient(top, #dfbdfa 5%, #bc80ea 100%);
	background:-webkit-linear-gradient(top, #dfbdfa 5%, #bc80ea 100%);
	background:-o-linear-gradient(top, #dfbdfa 5%, #bc80ea 100%);
	background:-ms-linear-gradient(top, #dfbdfa 5%, #bc80ea 100%);
	background:linear-gradient(to bottom, #dfbdfa 5%, #bc80ea 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfbdfa', endColorstr='#bc80ea',GradientType=0);
	background-color:#dfbdfa;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #c584f3;
	display:inline-block;
    margin: auto;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:3px 4px;
	text-decoration:none;
	text-shadow:0px 1px 0px #9752cc;
}
.clickhereBtn:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc80ea), color-stop(1, #dfbdfa));
	background:-moz-linear-gradient(top, #bc80ea 5%, #dfbdfa 100%);
	background:-webkit-linear-gradient(top, #bc80ea 5%, #dfbdfa 100%);
	background:-o-linear-gradient(top, #bc80ea 5%, #dfbdfa 100%);
	background:-ms-linear-gradient(top, #bc80ea 5%, #dfbdfa 100%);
	background:linear-gradient(to bottom, #bc80ea 5%, #dfbdfa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc80ea', endColorstr='#dfbdfa',GradientType=0);
	background-color:#bc80ea;
}
.clickhereBtn:active {
	position:relative;
	top:1px;
}

.quotebox {
 border-style: inset;
 border-width: 2px;
 text-align: justify;
 padding: 14px;
 background-image: url(https://www.dixiedoesalpines.com/images/cellback3.jpg);

}

/*IMAGE TESTING CSS, tried and rejected*/
/*
.imageoutercontainer {
}

#container {
    max-width: 360px;
    max-height: 300px;
    display: table;
    background-color: #ccc;   
    height: auto;             
}
  

#container .image-container {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

#container .image-container img {
    max-width: 360px;
    height: auto;        
}
*/
/*After many hours of struggle I have not been able to make a border around an image unless the class is assigned directly to the image. The below code is an attempt, but it didn't work.
.imagebordercaption {
   width:80%;
   max-width: 315px;
    border: 1px solid black;
    float: left;
    padding: 3px;
    overflow: auto; Keeps images within this container
}
*/


@media screen and (max-width: 600px) {
  .largetext { /*or .mainheader*/
    font-size: 30px;
  }
}