@charset "UTF-8";
/* CSS Document */

/* Color scheme hexadecimal values: [paste your values here] */

/* The body tag style applies to all elements on the page */
body {
background-color: #020040;
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 */
#wrapper {
width: 960px;
height: 800px;
margin-left: auto;
margin-right: auto;
background-color:LightSlateGrey ;
}

/* The right-column ID style is floated right */
#right-column {
float: right;
width: 600px;
height: 600px;
background-color: #ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7f2ea+0,c4a477+100,b57e2d+100 */
background: #f7f2ea; /* Old browsers */
background: -moz-linear-gradient(left, #f7f2ea 0%, #ff343d 100%, #ff8e32 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f7f2ea 0%,#ff343d 100%,#b57e2d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f7f2ea 0%,#c4a477 100%,#b57e2d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f2ea', endColorstr='#b57e2d',GradientType=1 ); /* IE6-9 */
background-color:white;
}

/* The left-column ID style is floated left */
#left-column {
float: left;
width: 360px;
background-color:#C4A477;
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,p,li { 
margin-left:15px; 
margin-top:0px; 
margin-bottom:0px;
}

#footer {
height:80px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#495593+0,207cca+47,207cca+47,4e51aa+48,4e51aa+48,6dd5db+100 */
background: #495593; /* Old browsers */
background: -moz-linear-gradient(45deg, #495593 0%, #207cca 47%, #207cca 47%, #4e51aa 48%, #4e51aa 48%, #6dd5db 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #495593 0%,#207cca 47%,#207cca 47%,#4e51aa 48%,#4e51aa 48%,#6dd5db 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #495593 0%,#207cca 47%,#207cca 47%,#4e51aa 48%,#4e51aa 48%,#6dd5db 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#495593', endColorstr='#6dd5db',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#banner{

    font-family: 'Trade Winds', cursive;


height:120px;
background-color:SlateGrey;
}

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

/* Advanced Web design relies on class or ID styles, never tables */
.box {
height: 100px;
width: 100px;
float: left;
background-color:tan ;
margin: 15px;
padding: 25px;
opacity:.5;
border-radius: 75px
}

/* The following pseudo-class applies to the box class when in a hovered state */
.box:hover {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,000000+41,207cca+57,6dd5db+100 */
background: #ffffff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #000000 41%, #207cca 57%, #6dd5db 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#000000 41%,#207cca 57%,#6dd5db 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#000000 41%,#207cca 57%,#6dd5db 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#6dd5db',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
background-color:white;
opacity:1;
}

/* This clear class style terminates float */
.clear{ 
clear: both; 
}