/*
   filename: styles.css
 , author: Greg Buchmann
 , course: ITWP 1050 Basic WebDesign with Cascading Style Sheets
 , assignment: Project 1 - Detroit Tigers, Justin Verlander Information page

*/



/*

a. table
i. The table border should be medium, solid and have a color of
#336699 and the background color of the table should be #ff9900.
(ITWP1000 skills)
b. img
i. The image selector should have a black border and the border
style should be double. (ITWP1000 skills)
c. li
i. Set the padding for the list item selector to 0 on top, 15 pixels on
the right, 0 on the bottom and 0 on the left. (ITWP1000 skills)

*/





/* table selector, border medium, solid, tiger blue : background color tiger orange */

table {
border: medium solid #336699;
background-color: #ff9900;
}




/* Html img image selector */
/*image style  border style double : boder color black */

img {
border-style: double;
border-color: #000000;
}



/* li html selector - 15 pixels on the right, other 0 pixels */

li {
padding: 0px 15px 0px 0px;
}







/*

You are going to style the third bulletin point within the Fun Facts section to display
differently from the other bullet points.
1. Using the :nth-of-type(n) format located in Table 4.4 on Page 83, style the third
list item within the Fun Facts unordered list to have white, bolded text.
2. The code above should reside within the embedded style sheet of the HTML
document.

*/


/* 3rd li select - text color white, bold font */

li:nth-of-type(3) {
color: white;
font-weight: bold;
}









/*

1. With styles.css still open, create the following class with the following properties
and values (ITWP1000 skills):
a. Name the class selector funfacts
b. funfacts should have a font family of Arial, Helvetica, Sans-serif
c. A background color of #336699.
d. Padding on all sides of 8 pixels.
e. Text color should be white.
f. The text should be aligned to the center (HINT: text-align is the property).
2. Create a class named logos and set the border to none. (ITWP1000 skills)
3. Next, create the following ID with the following properties and values (ITWP1000
skills):
a. Name the ID selector content.
b. A background color of #336699.
c. Padding on all sides of 5 pixels.
d. Text color should be white.
e. A width of auto.
4. Finally, create the following ID with the appropriate properties and values
(ITWP1000 skills):
a. Name the ID selector wiki
b. Text color should be light gray (#cccccc)
c. The font style should be italic

*/




/* funfacts class - font family shown, background color tiger blue, 8 pixels padding all around, text color white, align text center */

.funfacts {
font-family: Arial, Helvetica, Sans-serif;
background-color: #336699;
padding: 8px 8px 8px 8px;
color: white;
text-align: center;
}




/* logos class - border none */

.logos {
border: none;
}




/* content id, background color tiger blue, 5 pixels padding all around, text color white, width auto */

#content {
background-color: #336699;
padding: 5px 5px 5px 5px;
color: white;
width: auto;
}




/* wiki id, text color grey, font style italic */

#wiki {
color: #cccccc;
font-style: italic;
}







/*

Style the anchor tag and define the general anchor style:
a. The text decoration should be set to underline.
b. The text color should be black.
c. The font size should be 90%.
2. Add the following pseudo-classes with the following styling:
a. a:link
i. The text color should be black.
ii. The text decoration should be set to none.
b. a:visited
i. The text color should be #336699.
ii. The text decoration should be set to none.
c. a:hover
i. The text color should be #ff9900.
ii. The text decoration should be set to none.
iii. The font weight should be bold.
iv. The font size should be set to 100%.
d. a:active
i. The text color should be #ff9900.
ii. The text decoration should be set to underline.
iii. The font weight should be bold.
Please note that a:hover MUST follow a:link and a:visited in the CSS definition and
a:active MUST come after a:hover in order to be effective and function properly!

*/



/* anchor tag - text decoration underline, text color black, font size 90% */

a {
text-decoration: underline;
color: black;
font-size: 90%;
}




/* anchor tag link - text color black, text decoration none */

a:link {
color: black;
text-decoration: none;
}



/* anchor tag visited - text color tiger blue, text decoration none */

a:visited {
color: #336699;
text-decoration: none;
}



/* anchor tag hover over - text color tiger orange, text decoration none, font weight bold, font size 100% */

a:hover {
color: #ff9900;
text-decoration: none;
font-weight: bold;
font-size: 100%;
}



/* anchor tag active - text color tiger orange, text decoration underline, font weight bold */

a:active {
color: #ff9900;
text-decoration: underline;
font-weight: bold;
}