@import "https://www.dixiesoaps.com/ddastyles.css";

html, body {
    background-image:url(images/blue-star-background3.jpg);
    margin-top: 5px;
}

.pagebackgroundblocks { /*This makes a less-than-full-width section so the background can be seen on the sides, with background. It is used as a background for page sections*/

    margin-right: auto;
    margin-left: auto;
    max-width: 761px;
    background-image: url(http://www.dixiedoesalpines.com/images/newmiddle1px.jpg);
  background-size: contain; /*this works in Safari and Firefox, needed for safari to shrink the background in a containerimage*/
/*    overflow: auto;*/
}

/*This is designed for a side bar on the left. Together with the next @media selector, the side bar disappears if the window shrinks. I would like to re-purpose this or phase it out.*/
.sectionmenubar {
    float: left;
    width: 135px;
    margin-left: 13px;
    overflow: auto;
}

@media all and (max-width: 791px) {
  .sectionmenubar { display: none; }
}/*makes sidebar disappear*/


/*Used in conjunction with .sectionmenubar to create a side bar and main section. I may phase this out if I phase out the side bar*/
.sectionmain {
    max-width: 587px;
    margin: auto;
    overflow: auto;
    padding: 13px;
}


/*Duplicate in goatstyles*/
.goatpageimage {
    float: left;
    max-width: 309px;
    width:90%;
    margin-bottom: 6px;
}


/*Used for the goat breeding table to make a basic table outline*/

.breedingtable {
    border: 1px solid black;
    border-collapse: collapse;
//    font-size: 20px;
    padding: 2px;
    margin: auto;
    display: inline-block;

}

/*table.breedingtable, th.breedingtable, tr.breedingtable, td.breedingtable {
    border: 1px solid black;
    border-collapse: collapse;
    font-size: 12px;
    padding: 2px;
    margin: auto;
}

td.breedingtableleft {
    border: 1px solid black;
    border-collapse: collapse;
    font-size: 12px;
    padding: 2px;
    text-align: left;
}*/


.milkandlatable {
    border: 1px solid black;
    margin-left: 6px;
    float: right;
    padding: 1px;
}

.milklatable {
    border: 1px solid black;
    font-size: 10px;
    float: left;
    max-width: 110px;
    padding: 5px;
    margin: 1px;
}

.milktable {
    max-width: 96px;
}


/*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-bottom: 6px;
    max-width: 560px;
    border: 2px;
    border-style: ridge;
}




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

.menubar, .indmenu {
background-color: #333;
text-align: center;
}
.midmenu {
background-color: #757777;
}

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

.nxtmenu {
    background-color: #b2cfff;
}

.topmenu a, .midmenu a, .submenu a, .nxtmenu a, .popupbtn a, .popupsubmenu a, .indmenu a {
    color: white;

}

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

.nxtmenu a  {
    color: #0e0e0f;
}


/*0e0e0f*/

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



/*End Menubar*/