/* 
   CIS Assingmant 3 
   Filename: styles.css

   Author:Brent Snyder    
   Date:  1/28/2018
   HTML5 and CSS3 Illustrates use of Box style
 */

/*  ======================= Reset Styles ================================= */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ===================== End Reset Styles ========================= */

/* ===================== Global Style ============================= */

div,
body,
head {

    box-sizing: border-box;

}

img. video {

    max-width: 100%;
    height: auto
}



/* body and page container */

body {

    background-color: tan;
    margin-top: 15px;
    margin-bottom: 10px;

}

.container {
    max-width: 1000px;
    margin: 0 auto;
    border: solid black;
    border-width: medium;

}

/* headings */

header {
    background-image: url(media/jg8.gif);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100px;
    border: solid black;
    border-width: thin
}

h1 {
    font-style: oblique;
    font-size: 45px;
    font-weight: bold;
    color: black;
    padding: 25px 0 0 10px;
}

h2 {
    font-style: oblique;
    font-size: 30px;
    padding-top: 10px;
    font-weight: bold;
    padding-bottom: 15px;
    padding-left: 5px;


}

h3  { 
    
    font-size: 20px; 
    padding-left: 5px; 
    padding-bottom: 10px;
    font-weight: bold; 
    
}
p   { 
    
    padding-bottom: 10px; 
    padding-left: 10px;
    
} 




/* nav bar */

/* Add a black background color to the top navigation */

.topnav {
    background-color: #4CAF50;
    overflow: hidden;
    border: solid black;
    border-width: thin;
}

/* Style the links inside the navigation bar */

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 15px 16px 15px;
    text-decoration: none;
    border: 1px solid black;
}

/* Change the color of links on hover */

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to highlight the current page */

.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
    display: none;

}

a:visited {
    color: black;
}


#search-bar {
    width: 150px;
    height: 20px;
    margin-left: 10px;
    margin-top: 10px;
    border: solid black; 
    border-width: thin; 
}



/* article */

.article {

    width: 65%;
    border: solid black;
    border-width: thin;
    background-color: pink;
    padding: 7px;
    float: right;

}

.article p {

    font-size: 20px;
    padding-bottom: 5px;
}

.values {

    color: black;
    font-size: 1.25em;
    text-align: center;
    font-weight: bold;

}


/* sidebar */

.aside {
    float: left;
    width: 35%;
    border: solid black;
    border-width: thin;
    background-image: url(media/jg6.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: center;
    height: 503px;
    /* height is for the div, without tect content it has no height */
}

/* footer section */

footer {
    border-top: solid medium;
    text-align: center;
    clear: right;
    background-color: green;
    height: 50px;
    padding-bottom: 10px;
}

footer p {

    margin: 0.4em;
    padding: 2px;

}

footer p.accent {

    color: black;
}

/* ================================ about us page ========================================= */

.column-left {
    float: left;
    width: 25%;
    border: solid black;
    border-width: thin;
    background-color: indianred;

}

.column-right {
    float: right;
    width: 25%;
    border: solid black;
    border-width: thin;
    background-color: pink;

}

.column-center {
    display: inline-block;
    width: 50%;
    background-image: url(media/garden/jg3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: center;
    height: 542px;
    border: solid black;
    border-width: thin;



}

table,
th,
td {
    border: 1px solid black;
    border-width: thin;
    width: 22%;
    padding-left: 10px;
    margin-left: 10px;
    padding-bottom: 12px;
}

#map {

    width: 90%;
    height: 145px;
    background: gray;
    padding: 0 5px 0 5px;
    margin-left: 5px;

}


/* ======================== Our Gardens Page =============================== */

.article2 {
    display: inline-block;
    width: 60%;
    float:right;
    border-left: solid black; 
    border-top: solid black
    border-width: thin;
    padding-left: 10px;
    padding-right: 10px;

}

.aside2 {

    width: 40%;
    float:left; 
    height: 456px;
    border-width: thin;
    background-color: pink;
    height: 715px; 
    
/* height 713px is nuts but with ni contnt it fills half the div. I could of left the div backgroind tan and got rid of the bottom border, but the page already have plenty tan color. Artistic shoice */   
} 
    
#w3-content w3-display-container    {
    
    padding-bottom: 100px; 

}


/* ====================================== Our Teahouse ================================ */ 


.article3        { 
    
    width: 100;
    text-align: center;
        
}  

.teah2          { 
    
    background-color: Pink; 
    border: solid black; 
    border-width: thin;
    
}

aside       { 
    
    width: 305;
    float: right; 
    
} 

article     { 
    
    width: 70%l
    float: left; 
        
        
}

.teap   { 
    
    font-size: 25px; 
    
}

teahours   { 
    
    background: pink; 
    
} 





    




/* =============================== Responsive Style ======================================= */

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }