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



/*
   filename: styles.css
 , author: Greg Buchmann
 , course: ITWP 1050 Basic WebDesign with Cascading Style Sheets
 , assignment: Homework 5 - Boxes and Visual Formatting CSS

*/









/* Html Body selector */
/* Set the default font family */
/* Set the font size */
/* Set the nice pretty paper background so that all the opacity shows thru */

body{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background: url(images/natural-paper-background-texture-hd-5a0b.jpg) repeat 0 0;
}





/* Html H1 Header selector */
/* Set the color of the header */

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


/* Html H2 Header selector */
/* Set the color of the header */

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


/* Html H3 Header selector */
/* Set the color of the header and the text decoration */

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


/* Html H4 Header selector */
/* Set the color and the text style to italics */

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




/* Html hr horizontal rule selector */
/* set the style of the horizontal rule line */

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




/* Html a anchor selectors */
/* hyperlink styles */

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

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

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

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






/* id selectors */

/* copyleft 1 */
/* Set font size, style to italics and alignment */

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


/* copyleft 2 */
/* Set the font size, style to oblique, and alignment */


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




/* Set the first box */
/* width, height */
/* background color */
/* margin */
/* float */
/* what happens when the text overflows
/* padding */
/* positioning */
/* the top and left corner to the position */
/* the opacity */
/* the shadow on the box */
/* all sorts of different values were tried to move the boxes around and play with them */
/* this is just the last of the values as I left them to turn in the assignment */

#blklvl01 {
width: 300px;
height: 300px;
background-color: yellow;
margin: 20px;
float: right;
overflow: visible;
padding: 2px;
position: relative;
top: 10px;
left: 5px;
opacity: 0.55;
box-shadow: 5px 5px 5px 5px rgba( 10%, 10%, 10%, 0.7 );
}


/* Set the second box */
/* width, height */
/* background color */
/* margin */
/* float */
/* what happens when the text overflows
/* padding */
/* positioning */
/* the top and left corner to the position */
/* the opacity */
/* the shadow on the box */
/* all sorts of different values were tried to move the boxes around and play with them */
/* this is just the last of the values as I left them to turn in the assignment */

#blklvl02 {
width: 300px;
height: 300px;
background-color: grey;
margin: 20px;
float: left;
overflow: scroll;
padding: 5px;
position: fixed;
top: 200px;
left: 10px;
opacity: 0.50;
box-shadow: 5px 5px 5px 5px rgba( 10%, 10%, 10%, 0.9 ) inset,
            15px 15px 15px 15px rgba( 10%, 10%, 10%, 0.9 );
}


/* Set the third box */
/* width, height */
/* background color */
/* margin */
/* float */
/* what happens when the text overflows
/* padding */
/* positioning */
/* the top and left corner to the position */
/* the opacity */
/* the shadow on the box */
/* all sorts of different values were tried to move the boxes around and play with them */
/* this is just the last of the values as I left them to turn in the assignment */

#blklvl03 {
width: 300px;
height: 300px;
background-color: pink;
margin: 20px;
float: right;
overflow: auto;
padding: 10px;
position: relative;
top: -5px;
left: 0px;
opacity: 0.45;
box-shadow: 10px 10px 10px 10px rgba( 5%, 5%, 5%, 0.9 );
}




/* Class selectors */

/* These are the global values applied to all 3 boxes equally */
/* border size */
/* border width */
/* border style */
/* border color */
/* again, I played with all kinds of different values here, this is just where I left the values */

.sameclass01 {
border: 10px;
border-width: 9px;
border-style: outset;
border-color: rgba( 55%, 75%, 25%, 0.5 );
}