/* CSS Style Sheet for Homework #6

     Course Name: ITWP 1050 CSS
     Assignment: Homework #5
     
     Author: Edith Harvey
     Date: 12/4/20

     Assignment Notes:  Homework #7, I went with the blank CSS file again and added in pieces as I wanted to keep the same (like the links, @font-face, footer validation styling, etc)


*/

/* I kept the webfont below to keep it uniform with the rest of the site */
/* webfont cagliostro-regular being added to the page, sans-serif style font from font.squirrel.com */
/* as noted from text, added fonts should be first in style sheets */
@font-face {
     font-family: 'MyWebFont';
     src: url('fonts/cagliostro-regular-webfont.eot');
     src: url('fonts/cagliostro-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/cagliostro-regular-webfont.woff') format('woff'), url('fonts/cagliostro-regular-webfont.svg') format('svg'), url('fonts/cagliostro-regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
     font-variant: normal;
}
/* ============================= */

/* body main style, sets up text color, font sizes and types */
/* Trying out the new font I downloaded for project 1 CSS to this HW assignment too. I like it */
body {
     font-family: "Comic Sans MS", "Century Gothic", Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #ffffff /* white text */;
     background: #CCC url(images/sunnyday.jpg) repeat;
}
/* ============================= */

/* All headers used in this assignment */ 
/* heading 1 style, main headers and titles */
h1 {
     font-family: 'MyWebFont', "Comic Sans MS", "Century Gothic", Arial, Helvetica, sans-serif;
     color: #0000ff; /* blue */
     text-align: center;
     font-size: 2.5em;
     padding: 10px;
     border: 5px double #ffffff; /* white */
     background-color: rgba(255,255,0,1); /* yellow */
     font-weight: bold;
     /* adding letter, word and line spacing on h1 */
     letter-spacing: -.05em;
     word-spacing: .25em;
     line-height: 1.5em;
     /* adding above and below text shadow as well as this is the page header in a box */
     text-shadow: 4px 4px rgba(0,0,255,.3), -2px -2px rgba(0,0,255,.3); /* blue */
     /* adding text case, using text-transform, to uppercase as well */
     text-transform: uppercase;
     /* adding a transition for color to the background color of this header */
     /* NOTE: IT TESTS OUT ON CHROME BUT NOT FIREFOX */
     transition: background-color 5s ease-in-out;

}
/* heading 2 for first paragraph header */
h2 {
     color: rgba(255,255,0,1); /* yellow */
     font-family: 'MyWebFont', "Comic Sans MS", "Century Gothic", Arial, Helvetica, sans-serif;
     text-align: left;
     font-weight: bold;
     font-size: 1.5em;
     /* adding letter, word and line spacing */
     letter-spacing: -.05em;
     word-spacing: .25em;
     line-height: 2em;
     /* adding text case, using text-transform, to uppercase as well */
     text-transform: uppercase;
}
/* heading 6 style, I like to use with the footer element */
h6 {
     color: rgba(255,255,0,1); /* yellow */
     font-style: italic;
     text-align: center;
     font-size: .75em;
     font-weight: bold;
     /* adding letter, word and line spacing */
     letter-spacing: -.05em;
     word-spacing: .25em;
     line-height: 1em;
     /* adding text case, using text-transform, to uppercase as well */
     text-transform: uppercase;
}
/* ============================= */

/* ID's CREATED /*
/* title id tag for under header and image */
#title {
     color: #0000ff; /* blue */
     font-size: 2em;
     text-align: center;
     font-family: MyWebFont, Arial, Helvetica, sans-serif;
     /* adding above and below text shadow as well as this is the page header in a box */
     text-shadow: 2px 2px rgba(0,255,255,.3), -2px -2px rgba(0,255,255,.3); /* light blue */
}
/* id tag created for dislaimer/footnote before validation line */
#footnote {
     color: #ffffff;
     font-size: 1em;
     text-align: center;
}
/* ============================= */

/* CSS Sprite #1 Required for Assignment */
/* sets sprite image for when it just shows up on the page to start with */
/* put sprite image link not in main li but subclasses instead to make image show only once */
#camping li {
     /* Makes sure no list dots, squares, etc show */
     list-style: none;
     margin: 0;
     padding: 0;
     position: absolute;
}
#camping li, #camping a {
     /* sets the height of the list item to be big enough to show the full graphic */
     height: 44px;
     display: block;
}
/* CABIN LINKS FOR SPRITE */
#cabin {
     left: 0px;
     width: 99px;
     /* image link and css commands for sprite graphic */
     /* must state left or right for alignment, or give a starting position of 0 */
     background: transparent url('images/campingsprite.jpg') no-repeat 0 0;
     background-color: rgba(7,17,156,1); /* darker blue */
}
/* visited is after clicking and coming back to this page */
#cabin a:visited {
     background: transparent url('images/campingsprite.jpg') no-repeat 0 -150px;
     background-color: rgba(7,17,156,1); /* darker blue */
}
#cabin a:hover {
     background: transparent url('images/campingsprite.jpg') no-repeat 0 -50px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* active means when the actual link is being clicked */
#cabin a:active {
     background: transparent url('images/campingsprite.jpg') no-repeat 0 -100px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* ****** Barrier Between Each Sprite Set of Links ****** */
/* TENT LINKS FOR SPRITE */
#tent {
     left: 99px;
     width: 99px;
     /* image link and css commands for sprite graphic */
     /* must state left or right for alignment, or give a starting position of 0 */
     background: transparent url('images/campingsprite.jpg') no-repeat -99px 0;
     background-color: rgba(7,17,156,1); /* darker blue */
}
/* visited is after clicking and coming back to this page */
#tent a:visited {
     background: transparent url('images/campingsprite.jpg') no-repeat -99px -150px;
     background-color: rgba(7,17,156,1); /* darker blue */
}
#tent a:hover {
     background: transparent url('images/campingsprite.jpg') no-repeat -99px -50px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* active means when the actual link is being clicked */
#tent a:active {
     background: transparent url('images/campingsprite.jpg') no-repeat -99px -100px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* ****** Barrier Between Each Sprite Set of Links ****** */
/* RV LINKS FOR SPRITE */
#rv {
     left: 199px;
     width: 99px;
     /* image link and css commands for sprite graphic */
     /* must state left or right for alignment, or give a starting position of 0 */
     background: transparent url('images/campingsprite.jpg') no-repeat -199px 0;
     background-color: rgba(7,17,156,1); /* darker blue */
}
/* visited is after clicking and coming back to this page */
#rv a:visited {
     background: transparent url('images/campingsprite.jpg') no-repeat -199px -150px;
     background-color: rgba(7,17,156,1); /* darker blue */
}
#rv a:hover {
     background: transparent url('images/campingsprite.jpg') no-repeat -199px -50px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* active means when the actual link is being clicked */
#rv a:active {
     background: transparent url('images/campingsprite.jpg') no-repeat -199px -100px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* ****** Barrier Between Each Sprite Set of Links ****** */
/* ATV LINKS FOR SPRITE */
#atv {
     left: 299px;
     width: 99px;
     /* image link and css commands for sprite graphic */
     /* must state left or right for alignment, or give a starting position of 0 */
     background: transparent url('images/campingsprite.jpg') no-repeat -299px 0;
     background-color: rgba(7,17,156,1); /* darker blue */
}
/* visited is after clicking and coming back to this page */
#atv a:visited {
     background: transparent url('images/campingsprite.jpg') no-repeat -299px -150px;
     background-color: rgba(7,17,156,1); /* darker blue */
}
#atv a:hover {
     background: transparent url('images/campingsprite.jpg') no-repeat -299px -50px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* active means when the actual link is being clicked */
#atv a:active {
     background: transparent url('images/campingsprite.jpg') no-repeat -299px -100px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* ****** Barrier Between Each Sprite Set of Links ****** */
/* HIKING LINKS FOR SPRITE */
#hiking {
     left: 399px;
     width: 96px;
     /* image link and css commands for sprite graphic */
     /* must state left or right for alignment, or give a starting position of 0 */
     background: transparent url('images/campingsprite.jpg') no-repeat -399px 0;
     background-color: rgba(7,17,156,1); /* darker blue */
}
/* visited is after clicking and coming back to this page */
#hiking a:visited {
     background: transparent url('images/campingsprite.jpg') no-repeat -399px -150px;
     background-color: rgba(7,17,156,1); /* darker blue */
}
#hiking a:hover {
     background: transparent url('images/campingsprite.jpg') no-repeat -399px -50px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* active means when the actual link is being clicked */
#hiking a:active {
     background: transparent url('images/campingsprite.jpg') no-repeat -399px -100px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* ============================= */

/* CSS Sprite #1 Required for Assignment */
/* sets sprite image for when it just shows up on the page to start with */
/* put sprite image link not in main li but subclasses instead to make image show only once */
#otheroutdoor li {
     /* Makes sure no list dots, squares, etc show */
     list-style: none;
     margin: 0;
     padding: 0;
     position: absolute;
}
#otheroutdoor li, #otheroutdoor a {
     /* sets the height of the list item to be big enough to show the full graphic */
     height: 44px;
     display: block;
}
/* FISH LINKS FOR SPRITE */
#fish {
     left: 0px;
     width: 99px;
     /* image link and css commands for sprite graphic */
     /* must state left or right for alignment, or give a starting position of 0 */
     background: transparent url('images/otheroutdoorsprite.jpg') no-repeat 0 0;
     background-color: rgba(7,17,156,1); /* darker blue */
}
#fish a:hover {
     background: transparent url('images/otheroutdoorsprite.jpg') no-repeat 0 -50px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* active means when the actual link is being clicked */
#fish a:active {
     background: transparent url('images/otheroutdoorsprite.jpg') no-repeat 0 -100px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* ****** Barrier Between Each Sprite Set of Links ****** */
/* CANOE LINKS FOR SPRITE */
#canoe {
     left: 99px;
     width: 99px;
     /* image link and css commands for sprite graphic */
     /* must state left or right for alignment, or give a starting position of 0 */
     background: transparent url('images/otheroutdoorsprite.jpg') no-repeat -99px 0;
     background-color: rgba(7,17,156,1); /* darker blue */
}
/* visited is after clicking and coming back to this page */
#canoe a:hover {
     background: transparent url('images/otheroutdoorsprite.jpg') no-repeat -99px -50px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* active means when the actual link is being clicked */
#canoe a:active {
     background: transparent url('images/otheroutdoorsprite.jpg') no-repeat -99px -100px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* ****** Barrier Between Each Sprite Set of Links ****** */
/* BEACH LINKS FOR SPRITE */
#beach {
     left: 199px;
     width: 99px;
     /* image link and css commands for sprite graphic */
     /* must state left or right for alignment, or give a starting position of 0 */
     background: transparent url('images/otheroutdoorsprite.jpg') no-repeat -199px 0;
     background-color: rgba(7,17,156,1); /* darker blue */
}
/* visited is after clicking and coming back to this page */
#beach a:hover {
     background: transparent url('images/otheroutdoorsprite.jpg') no-repeat -199px -50px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* active means when the actual link is being clicked */
#beach a:active {
     background: transparent url('images/otheroutdoorsprite.jpg') no-repeat -199px -100px;
     background-color: rgb(255,255,0,1); /* yellow */
}
/* ============================= */

/* Setting up the table settings in general and with specific classes for parts */
table {
     width: 75%;
     padding: .5em;
     /* centering the table */
     margin-left: auto;
     margin-right: auto;
     position: relative;
}
.tableheader {
     text-align: center;
     font-size: 2.5em;
     color: rgba(7,17,156,1); /* darker blue */
     border-bottom: rgba(7,17,156,1) 2px solid;
}
.texttable {
     width: 65%;
     padding: 1em;
     margin-left: 0%;
     margin-right: 0%;
     color: rgba(7,17,156,1); /* darker blue */
     font-weight: bold;
}
/* ============================= */

/* Drop Down Menu Created for requirement - Berry Picking Places */
.berries {
     position: relative;
     display: inline-block;
     background-color: rgba(7,17,156,1);
     color: rgba(255,255,0,1);
     min-height: 20px;
}
.berries-content {
     background-color: rgba(255,255,255,1); /*white */
     overflow: hidden;
     display: none;
     position: absolute;
     min-width: 150px;
     box-shadow: 5px 5px 5px 5px rgba(0,0,255,.5);
     padding: 10px 10px;
     z-index: 1;
}
.berries:hover .berries-content {
     height: auto;
     opacity: 1;
     display: block;
}
/* ============================= */

/* ============================= */



/* link anchor tag styles, uniform with the rest of the site */
/* all links before clicked */
a {
     color: #333399; /* dark blue */
     text-decoration: underline;
}
a:link {
     color: #333399; /* dark blue */
     text-decoration: underline;
     font-weight: bold;
}
/* visited link style */
a:visited {
     color: #333399; /* dark blue */
     text-decoration: none;
}
/* hovering over link style */
a:hover {
     color: #009900; /* dark green */
     font-size: 150%
}
a:active {
     text-decoration: none;
     color: #0000FF; /* blue */
}
/* ============================= */