/* CSS Style Sheet for the Week 7 Homework 7 Assignment */
/* Greg Buchmann */




/*
   filename: styles.css
 , author: Greg Buchmann
 , course: ITWP 1050 Basic WebDesign with Cascading Style Sheets
 , assignment: Homework 7 - Design and Interface Techniques

*/
















/* Html Body selector */
/* Default fonts, default text size */

body{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}



/* Html Table selector */
/* define the table layout of the webpage */
/* no border, width of text 750 pixels, no padding, margin to automatic */

table{
border: none;
width: 750px;
padding: 0;
margin: auto;
}



/* Html H1 Header selector */
/* set text color */

h1{
color: #0066cc;/*cool blue*/
}


/* HTML H2 header selector */
/* Cross out IE 9 and earlier *wink* */

h2 {
text-decoration: line-through;
/* Ding Dong the blink is dead. */
}


/* Html H3 Header selector */
/* set text color, text decoration to underline */

h3{
color: #191970;/*midnight blue*/
text-decoration: underline;
}


/* Html H4 Header selector */
/* set text color, font style to italic */

h4{
color: #000000;/*black*/
font-style: italic;
}


/* Html hr horizontal rule selector */
/* style the horizontal rules, no border, sold top line black, 2 pixels thick */

hr{
border: none;
border-top: 1px solid #000000;/*the border*/
height: 2px;
}


/* Html img image selector */
/*image style*/
/* float the image right */


img{
float: right;
}


/* Html a anchor selectors */
/* hyperlink styles */
/* text color blue */

a:link{
color: #0066cc;/*cool blue*/
}

a:visited{
color: #0066cc;/*cool blue*/
}

/* hover color to orange with bold font weight */

a:hover{
text-decoration: none;
color: #ff9900;/*orange*/
font-weight: bold;
}

a:active{
text-decoration: underline;
color: #0066cc;/*cool blue*/
}


/* class selectors */

/* emphasis 1 paragraph, border around the paragraph */

.emphasis1{
padding: 3px 3px 3px 3px;
border: 3px black solid;
margin: 6px 6px 6px 0px;
}


/* emphasis 2 paragraph, border around the paragraph */
.emphasis2{
padding: 2px 2px 2px 2px;
border: 2px black solid;
margin: 5px 5px 5px 0px;
}


/* id selectors */

/* copyleft 1 */
/* font size, font style, text alignment */

#copyleft1{
font-size: 12px;
font-style: italic;
text-align: left;
}


/* copyleft 2 */
/* font size, font style, text alignment */

#copyleft2{
font-size: 16px;
font-style: oblique;
text-align: left;
}





/* First image sprite, set the background image */
/* the background shows thru a transparent anchor image */

.sprite1 a {
margin: 0;
padding: 0;
background: url('images/image-sprite3.jpg') no-repeat;
background-position: 4px 4px;
float: left;
}


/* When mouse hovers over the anchor, reposition the sprite image to change the background of the transparent anchor */

.sprite1 a:hover {
background-position: -218px 4px;
}





/* Second image sprite, set the background image */
/* the background shows thru a transparent anchor image */

.sprite2 a {
margin: 0;
padding: 0;
border: 0;
background: url('images/image-sprite4.jpg') no-repeat;
background-position: 4px 4px;
float: left;
}


/* When mouse hovers over the anchor, reposition the sprite image to change the background of the transparent anchor */

.sprite2 a:hover {
background-position: -190px 4px;
float: left;
}





/* CSS Hidden Dropdown Menu */
/* Move the menu to the right of the document */
/* display to inline-block */

.cssdropmenu1 {
float: right;
display: inline-block;
}


/* Remove the Bullet list items */

ul {
list-style-type: none;
}


/* Hide the Menu list items until Rollover the title */
/* display to none */

.drop {
display: none;
}


/* When rollover hover the Menu Title, show the drop menu items */
/* display to block */

.cssdropmenu1:hover > .drop {
display: block;
}