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

/* Color scheme hexadecimal values: */
/* background-color: #FFE8DF;
background-color: #8F92B2;
background-color: #F9F9FF;
background-color: #BBCCB3;
background-color: #99B28B; */

/*  Green */
/* background-color: #0CCC6B;
background-color: #569977;
background-color: #3CFF29;
background-color: #F468FF;
background-color: #8A0CCC; */

/*  Blue */
/* background-color: #6609CC;
background-color: #745399;
background-color: #2533FF;
background-color: #FFCF64;
background-color: #CC7C09; */

/* The body tag style applies to all elements on the page */
body 
{
/*   background-color: black;
  background-color: #99B28B;*/
  background-color: #6609CC;

 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 ; */
 /*background-color: #8F92B2; */
 background-color: #745399;

}

/* The right-column ID style is floated right */
#right-column 
{
 float: right;
 width: 600px;
 height: 600px;
 /* background-color:LightGray; */
 /*background-color: #BBCCB3;*/
 background-color: #CC7C09;

}

/* The left-column ID style is floated left */
#left-column 
{
 float: left;
 width: 360px;
 /* background-color:silver; */
 /* background-color: #99B28B;*/
 background-color: #FFCF64;
  
 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;
}

/* Defining a font for H2 */
h2
{
    font-family:'Gabriela', Arial, serif;
}


#footer 
{
 height:80px;
}

#banner
{
 height:120px;
 /* background-color:SlateGrey; */
 /* background-color: #8F92B2; */
 background-color: #2533FF; 
  
 }

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

/* Advanced Web design relies on class or ID styles, never tables */
.box 
{
 height: 150px;
 width: 150px;
 float: left;
 /* background-color:tan; */
 /* background-color: #FFE8DF ;*/
 background-color: #6609CC;
 
 margin: 15px;
 opacity:.5;
}

.box-lg 
{
 height: 150px;
 width: 150px;
 float: left;
 /* background-color:tan; */
 /* background-color: #FFE8DF ;*/
 background-color: #6609CC;

 background: yellow;
 background: -moz-linear-gradient(top, red 0%, yellow 100%);
 background: -webkit-linear-gradient(top, red 0%, yellow 100%);
 background: -o-linear-gradient(top, red 0%, yellow 100%);
 background: -ms-linear-gradient(top, red 0%, yellow 100%);
 background: linear-gradient(to bottom, red 0%,yellow 100%);
 margin: 15px;
 opacity:.5;
}

.box-ang
{
 height: 150px;
 width: 150px;
 float: left;
 /* background-color:tan; */
 /* background-color: #FFE8DF */
 background-color: #6609CC;
 
 background: yellow;
 background: -moz-linear-gradient(45deg, red 0%, yellow 100%);
 background: -webkit-linear-gradient(45deg, red 0%, yellow 100%);
 background: -o-linear-gradient(45deg, red 0%, yellow 100%);
 background: -ms-linear-gradient(45deg, red 0%, yellow 100%);
 background: linear-gradient(45deg, red 0%,yellow 100%);

 margin: 15px;
 opacity:.5;
}


.box-rad
{
 height: 100px;
 width: 100px;
 float: left;
 /* background-color:tan; */
 /* background-color: #FFE8DF ; */
 background-color: #6609CC;

 
 background: yellow;
 background: -moz-linear-gradient(45deg, red 0%, yellow 100%);
 background: -webkit-linear-gradient(45deg, red 0%, yellow 100%);
 background: -o-linear-gradient(45deg, red 0%, yellow 100%);
 background: -ms-linear-gradient(45deg, red 0%, yellow 100%);
 background: linear-gradient(45deg, red 0%,yellow 100%);

 margin: 55px;
 opacity:.5;

 border-radius: 75px;
}

.box-rad2
{
 height: 100px;
 width: 100px;
 float: left;
 /* background-color:tan; */
 /* background-color: #FFE8DF ;*/
 background-color: #6609CC;

background: #258dc8;
background: -moz-radial-gradient(center, ellipse cover, #258dc8 0%, #258dc8 0%, #2533ff 100%, #258dc8 100%, #258dc8 100%);
background: -webkit-radial-gradient(center, ellipse cover, #258dc8 0%,#258dc8 0%,#2533ff 100%,#258dc8 100%,#258dc8 100%);
background: radial-gradient(ellipse at center, #258dc8 0%,#258dc8 0%,#2533ff 100%,#258dc8 100%,#258dc8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=1 );

 margin: 55px;
 opacity:.5;

 border-radius: 75px;
}

/* The following pseudo-class applies to the box class when in a hovered state */
.box:hover 
{
 /* background-color:white; */
 /* background-color: #F9F9FF;*/
 background-color: #FFCF64;

 opacity:1;
}

.box-lg:hover 
{
 /* background-color:white; */
 /* background-color: #F9F9FF;*/
 background-color: #FFCF64;

 opacity:1;
 
 color: white;
 background: blue;
 background: -moz-linear-gradient(bottom, blue 0%, green 100%);
 background: -webkit-linear-gradient(bottom, blue 0%, green 100%);
 background: -o-linear-gradient(bottom, blue 0%, green 100%);
 background: -ms-linear-gradient(bottom, blue 0%, green 100%);
 background: linear-gradient(to top, blue 0%,green 100%);
 
}

.box-ang:hover 
{
 /* background-color:white; */
 /* background-color: #F9F9FF;*/
 background-color: #FFCF64;

 opacity:1;
 
 color: white;
 background: blue;
 background: -moz-linear-gradient(45deg, blue 0%, green 100%);
 background: -webkit-linear-gradient(45deg, blue 0%, green 100%);
 background: -o-linear-gradient(45deg, blue 0%, green 100%);
 background: -ms-linear-gradient(45deg, blue 0%, green 100%);
 background: linear-gradient(45deg, blue 0%,green 100%);
 
}

.box-rad:hover 
{
 /* background-color:white; */
 /* background-color: #F9F9FF;*/

 background-color: #FFCF64;

 opacity:1;
 
 color: white;
 background: blue;
 background: -moz-linear-gradient(45deg, blue 0%, green 100%);
 background: -webkit-linear-gradient(45deg, blue 0%, green 100%);
 background: -o-linear-gradient(45deg, blue 0%, green 100%);
 background: -ms-linear-gradient(45deg, blue 0%, green 100%);
 background: linear-gradient(45deg, blue 0%,green 100%);
}

.box-rad2:hover 
{
 /* background-color:white; */
 background-color: #FFCF64;

 opacity:1;
 
background: #b4e391;
background: -moz-radial-gradient(center, ellipse cover, #b4e391 0%, #0ccc6b 99%);
background: -webkit-radial-gradient(center, ellipse cover, #b4e391 0%,#0ccc6b 99%);
background: radial-gradient(ellipse at center, #b4e391 0%,#0ccc6b 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#0ccc6b',GradientType=1 );
}

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


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

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

mark 
{
    background-color:aqua;
}

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;
}