/* I opened this file with @charset "UTF-8";. The UTF-8 character set is important in HTML files because 
it allows browsers to interpret characters and symbols from a wide range of alphabets. 
I've never found a definitive argument that you need that for a style sheet file, 
but it doesn't cost anything to add that line of code, and everyone does it. So I do as well.
*/

@charset "UTF-8";
/* CSS Document 
color scheme 1/20/16
#0065B2, #199BFF, #0090FF, #B26C00, #FFBD5A
*/

/* The body tag style applies to all elements on the page */
body {
background-color: black;
font-family: Verdana, Geneva, Arial, sans-serif;
padding:0px;
margin:0px;
}

/* The wrapper ID style is used with a div tag to provide a 960px wide page 
The 960-pixel width has become the standard in all professional Web design workflows. 
This width works well in all desktop and laptop viewports (monitor sizes) and 
in many tablet viewports. And the number 960 is easily divisible into columns of two, 
three, six, and so on. That makes it easy to design artwork, create wireframes (sketches) 
of column layout, and prepare photos and video for the Web.
*/
#wrapper {
width: 960px;
height: 800px;
margin-left: auto;
margin-right: auto;
background-color:#0065B2;
}

#wrapper2 {
width: 960px;
height: 700px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
background-color:#C6D8D7;
}

#formWrapper {
width: 560px;
height: 420px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
padding:10px;
background-color:#199BFF;
}

/* The right-column ID style is floated right 
our right and left columns have float properties (with values of right and left respectively). 
By default, most HTML elements take up a whole line or row of a page. Defining a left or right float 
changes that and allows content to flow around a box. 
*/
#right-column {
float: right;
width: 760px;
height: 600px;
background-color:#FFBD5A;
}

#bottomright {
float: bottom;
width: 760px;
height: 300px;
background-color:#FFBD5A;
}

/* The left-column ID style is floated left */
#left-column {
float: left;
width: 200px;
background: #dda517;
background: -moz-linear-gradient(top,#dda517 0%,#b37b13 100%);
background: -webkit-linear-gradient(top, #dda517 0%,#b37b13 100%);
background: linear-gradient(top, #dda517 0%,#b37b13 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dda517', endColorstr='#b37b13',GradientType=0 );
height:600px;
}


/* Defining a style for a set of tags separated by commas applies the style to all tags */
h1,h2,h3,h4,h5,h6 {
margin-left:15px;
font-family: 'Ubuntu', sans-serif;
}

header, footer {  	
background-color: white;
color: red;
padding-top:5px;
padding-bottom:5px;  
}

aside { 
background-color: beige;
float: right; 	
width: 250px; 	
margin: 5px; 	
padding: 5px; 
}

mark {background-color:yellow;}

#footer {
height:80px;
background: -moz-linear-gradient(right,#0065B2 0%,#00b2a6 100%);
background: -webkit-linear-gradient(right,#0065B2 0%,#00b2a6 100%);
background: -o-linear-gradient(right,#0065B2 0%,#00b2a6 100%);
background: -ms-linear-gradient(right,#0065B2 0%,#00b2a6 100%); 
background: linear-gradient(to left,#0065B2 0%,#00b2a6 100%);
}

#footer2 {
height:90px;
background: -moz-linear-gradient(right,#FFFFFF 0%,#93B7B5 100%);
background: linear-gradient(to left,#FFFFFF 0%,#93B7B5 100%);
}

#banner{
height:120px;
background: -moz-linear-gradient(left,#0065B2 0%,#93B7B5 100%);
background: -webkit-linear-gradient(left,#0065B2 0%,#00b2a6 100%);
background: -o-linear-gradient(left,#0065B2 0%,#00b2a6 100%);
background: -ms-linear-gradient(left,#0065B2 0%,#00b2a6 100%); 
background: linear-gradient(to right,#0065B2 0%,#00b2a6 100%);
}

/* Defining a style for a set of tags not separated by commas (compound style) applies the 
   style only to all tags within the preceding tag*/
#banner h1 {
color: white;
}

#banner2{
height:120px;
background: -moz-linear-gradient(left,#FFFFFF 0%,#93B7B5 100%);
background: linear-gradient(to right,#FFFFFF 0%,#93B7B5 100%);
}

/* Advanced Web design relies on class or ID styles, never tables.
The ID styles in our style sheet, like the #banner style, begin with the # symbol in our CSS file. 
Remember that you can use a particular ID style only once in any single HTML file. 
Class styles, which you can use repeatedly in an HTML file, begin with "." 

You can see this in the .box class style that defines the small boxes in the right column of our page.
Pseudo-class styles apply to an element only in a specific state of user activity, 
like when a user clicks on or hovers his or her mouse over an element. In our model, 
a pseudo-class changes how our .box class style displays when in a hovered state:
*/
.box {
height: 150px;
width: 150px;
float: left;
background: #dbea9f;
background: -moz-radial-gradient(center, ellipse cover, #dbea9f 0%, #9e462d 100%);
background: -webkit-radial-gradient(center, ellipse cover, #dbea9f 0%,#9e462d 100%);
background: radial-gradient(ellipse at center, #dbea9f 0%,#9e462d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbea9f', endColorstr='#9e462d',GradientType=1 );

margin: 15px;
opacity:.5;
}
.bigbox {
height: 150px;
width: 510px;
float: left;
background-color:#199BFF;
margin: 15px;
opacity:.5;
}

/* The following pseudo-class applies to the box class when in a hovered state */
.box:hover {
background-color:white;
opacity:1;
}
.indent {
list-style-position: inside;
}
/* This clear class style terminates float 
It's often necessary to define a class style that will clear, or remove, any inherited float 
properties so that elements on a page revert to filling an entire row. That's necessary in 
our model after the boxes end and before the footer style is applied to a div tag. 
So our CSS style sheet includes this style, which clears any float properties:
*/
.clear{ 
clear: both; 
height:0px;
}

video {
width: 400px;
padding: 15px;
margin: 15px;
background-color:black;
border:2px white solid;
box-shadow: 10px 10px 5px black;
}

button {
background-color:black;
color:white;
height:40px;
border:2px white solid;
box-shadow: 10px 10px 5px black;
border-radius: 5px;
}

button:hover {
background-color:beige;
color:black;
height:40px;
border:2px white solid;
box-shadow: -10px -10px 5px black;
border-radius: 5px;
}

figure {
position:relative;
width:220px;
height:200px;
background-color:white
margin:5px;
padding:5px;
border:1px solid black;
}
figcaption {
Position:bottom;
Background-color:black;
Color:white;
}