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



/*
   filename: styles.css
 , author: Greg Buchmann
 , course: ITWP 1050 Basic WebDesign with Cascading Style Sheets
 , assignment: Homework 6 - Transformations with CSS

*/


/* After playing all around with 2D and 3D transforms, this is where I left the file at */


/* The transition is in the hyperlink pseudo class and it involves both the text color and the background color to REALLY MAKE IT STAND OUT !!! */





/* Html Body selector */
/* default fonts and font size */

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



/* Html Table selector */
/* border, width, padding, and margin */

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



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

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



/* Html H3 Header selector */
/* set text color and decoration */

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


/* Html H4 Header selector */
/* set text color, style, and apply a transformation to make it stand out */

h4{
color: #000000;/*black*/
font-style: italic;
transform: skew( 0deg, 3deg );
}


/* Html hr horizontal rule selector */
/* no border, but add a top edge and height */

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


/* Html img image selector */
/*image style*/
/* put a border around the image */

img{
float: right;
border: 2px solid #000000;
border-right: 4px solid #000000;
border-bottom: 4px solid #000000;
margin: 0px 5px 10px 10px;
}


/* Html a anchor selectors */
/* hyperlink styles */
/* the hover contains a transition of both the color of the text and the background so that it really really stands out */

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

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

a:hover{
text-decoration: none;
color: #ff9900;/*yellow*/
background-color: blue;
font-weight: bold;
transition: color 3s linear;
transition: background-color 3s linear;
}

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


/* class selectors */

/* emphasis 1 */
/* draw a border around the second paragraph */

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


/* emphasis 2 */
/* draw a border around the forth paragraph */

.emphasis2{
padding: 2px 2px 2px 2px;
border: 2px black solid;
margin: 5px 5px 5px 0px;
}


/* id selectors */

/* copyleft 1 */
/* set the font size, style, and align the text, apply a transform to make it bigger */

#copyleft1{
font-size: 12px;
font-style: italic;
text-align: left;
transform: scale( 1.15, 2.25 );
}


/* copyleft 2 */
/* apply a font size, style, alignment, and a 3D transform to go CRAZY!!! */

#copyleft2{
font-size: 16px;
font-style: oblique;
text-align: left;
transform-style: flat;
transform: rotate3d( 0, 0, 1, 175deg );
}