/* MOBILE.css Style Sheet for Hillside Farm Hawaii 
code in alphabetical order */


xaside {
  display: block;
  float: left;
  width: 12%;
  border-style: double;
  border-width: 3px;
  border-color: #009900;
  padding: 5px;
  background-image: linear-gradient(to bottom, #7dbde8, #e6ffe6);
  border-top-right-radius: 1em;
  border-top-left-radius: 1em;
  border-bottom-right-radius: 1em;    
  border-bottom-left-radius: 1em;
  box-shadow: 8px 8px 8px -1px rgba(0,0,0,0.75);
  margin: auto;
  padding: 10px 6px 8px 6px;
  font-style: normal;
  color: #001a00;
  text-indent: 6px;
}


body {
font-family: "times new roman", garamond, serif;
color: #001a00;
background: #e6ffe6;
}

/*adds a box around the body of the text - options are solid, dotted, dashed, double, groove, ridge, inset, outset, hidden*/

body, b {
  border-style: double;
  border-width: 3px;
  border-color: #009900;
  padding: 6px;
  background-image: linear-gradient(to bottom, #d3e9f8, #e6ffe6);
  border-top-right-radius: 1em;   
  border-top-left-radius: 1em; 
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  box-shadow: 9px 9px 9px -1px rgba(0,0,0,0.75);
  margin: auto;
  padding: 8px 8px 8px 8px;
  text-indent: 6px;
}



/*menu buttons #C0C0C0 silver color 004d00 dark green  00cc00 bright green */

.button {
  background: #3498db;
  background-image: linear-gradient(to bottom, #7dbde8, #e6ffe6);
  border-radius: 20px;
  text-shadow: 5px 6px 3px #bfbfbf;
  box-shadow: 6px 11px 6px #666666;
  font-family: "times new roman", garamond, serif;
  color: #000000;
  font-size: 10px;
  padding: 7px;
  border: solid #00cc00 2px;
  text-decoration: none;
}

/* doesnt seem to work even though the code is identical to the regular button code */
.btnsm {
  background: #3498db;
  background-image: linear-gradient(to bottom, #7dbde8, #e6ffe6);
  border-radius: 28px;
  text-shadow: 5px 6px 3px #bfbfbf;
  box-shadow: 6px 11px 6px #666666;
  font-family: "times new roman", garamond, serif;
  color: #000000;
  font-size: 14px;
  padding: 8px;
  border: solid #004d00 3px;
  text-decoration: none;
}


.button:hover {
  background: #e6ffe6;
  background-image: linear-gradient(to bottom, #e6ffe6, #ff33ff);
  text-decoration: none;
}





div.figure {
  float: right;
  width: 25%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

footer {
 clear: both;
 }



/*main headers with drop shadows*/
h1 {
font-family: "times new roman", garamond, serif;
font-size: 300%;
color: #001a00;
text-shadow: 7px 5px #d9d9d9;
text-align: center;
}

/* main headers with no shadow */

h1b {
font-family: "times new roman", garamond, serif;
font-size: 300%;
color: #001a00;
text-align: center;
}


h2, h3 {
font-family: "times new roman", garamond, serif;
font-size: 200%;
color: #001a00;
text-align: center;
}


/* image details */

img {
  display: block;
  border-style: double;
  border-width: 4px;
  border-color: #009900;
  padding: 2px;
  background-image: linear-gradient(to bottom, #d3e9f8, #e6ffe6);
  border-top-right-radius: 1em;
  border-top-left-radius: 1em;    
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  box-shadow: 8px 8px 8px -1px rgba(0,0,0,0.75);
  margin: auto;
  padding: 2px 2px 2px 2px;
  text-indent: 6px;
}

img2 {
  padding: 8px 8px 8px 8px;
  box-shadow: 8px 8px 8px -1px rgba(0,0,0,0.75);
  margin: auto;
  padding: 6px 8px 6px 8px;
  text-indent: 6px;
}


/* attempting to get the images side by side, so far it's not working */
.img-wrap h1{
  text-align: center;
  color: #001a00;
}

.img-wrap a img{
 display:block;
}
	
.img-wrap > a{
 display:inline-block;
 vertical-align: middle;
 border: 1px solid #009900;
}
	
/* html code for above snippet  
<div class="img-wrap">
  <a href="#"><img src="#" height="150" width="150">Wedddings</a>
  <a href="#"><img src="#" height="150" width="150">Website</a>
 </div>
*/




.herdbun {
  float: left;
  margin: 6px;
  padding-top: 7px;
  padding-right: 6px;
  padding-bottom: 8px;
  padding-left: 8px;
  max-width: 400px;
  min-height: 200px;
  text-align: left;
  border: 2px solid #00cc00;
  border-top-right-radius: 1.5em;
  border-top-left-radiu: 1.5em;    
  border-bottom-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
  background-image: linear-gradient(to bottom, #d3e9f8, #e6ffe6);
}




/*slightly larger than standard text for paragraphs*/
p {
font-size: 110%;
color: #001a00;
padding: 8px;
text-indent: 6px;
text-align: left;
}


/*all paragraphs with <p class="center"> will be centered*/ 
.center {
  margin: 0 auto;
  text-align: center
}





/* html code that goes with the sidebyimg code    
<img id="sideby" border="0" alt="alt text" src="/images/etc.jpg"/></a>
</a>`
*/

#sideby {
    float: right;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%; 
    clear: both;
}    



/* add in class="dropshadow" on HTML page to use this*/
.dropshadow {
text-shadow: 6px 6pm 3px #004d00 ;
}

#nav {
text-align:center;
}

#nav li {
display:inline;
}

section {
  display: block;
  float: right;
  margin: 0 1.5%;
  width: 79%;
}




/*   if the hashtags are replaced by periods then the list items have to have a tag of <class="menu-item"> on the HTML page  */
/* hash tags are for id="-"  and over ride the periods which are for class="-" */

/*<!-- Colors used:
white #ffffff
black  #000000
very dark green (text) #001a00
med bright blue (hover over link)#0000cc
bright pink (active link)#ff0066
med dark green (visited links) #004d00
med dark green (text shadow)	#004d00
alternate text shadow #009900
med gray shadow (text shadow) #bfbfbf
bright green text shadow #00cc00
cold medium gray (shadows) #004d00
very light green (background)#f4fff4
slightly darker green (for box backgrounds): #e6ffe6
medium green for box borders: #009900
bright red #e60000
bright blue #0000ff
royal purple  #9900cc
-->*/