#container {
/*background-color: grey; */
background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcSnZ-Y5c7iJGULNFie2vkxCN9ecvIg9s5Z3GKONZUgKJiVamFND:www.force18.co.uk/image/cache/data/mens-2/lenny-face_0012_grey-640x640.jpg");
width: 1080px;
height: 1820px;
margin-right: auto;
margin-left: auto;
margin-top: auto;
border-style: outset;
border-width: 50px;
border-color: darkgrey;
box-shadow: 25px 25px 10px #888888
}

/* This rule is unused */
 .Henry {
 font-size: 16pt;
 color: grey ; 
} 

/*Henry2 makes the text big + comic sans*/
 .Henry2 {
 font-size: 32pt; 
 text-decoration: underline; 
 font-family: "Comic Sans MS";
 color: black;
} 

/*This rule is used for all default normal sized text*/
.textcs {
font-size: 12pt;
font-family: "Comic Sans MS";
color: red;
}

/*This rule is used for the "Hello" lyrics*/
.texthello {
font-size: 8pt;
font-family: "Comic Sans MS";
color: black;
}

.textdesc {
font-size: 48pt;
font-family: "Comic Sans MS";
color: white;
text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
}

/*This is the div that contains the title*/
#header {
background-color: red;
padding: 5px;
height: 69px;
width: 560px;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
color: white;
font-size: 18px;
float: left;
border-style: outset;
border-width: 10px;
border-color: black;
box-shadow: 10px 10px 10px grey;

}

#submenu {
height: 34.5px;
width: 75px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
padding: 5px;
background-color: red;
color: white;
float: left;
border-style: outset;
border-color: black;
border-top-width: 10px;
border-bottom-width: 10px;
border-right-width: 5px;
border-left-width: 5px;
-webkit-transition: height 2s; 
    transition: height 2s;
-webkit-animation: myfirst 5s; 
    -webkit-animation-iteration-count: infinite;
}

/*These rules below define the animations of their corresponding divs*/
#submenu:hover {
	height: 6000px;
}

#contentarea:hover {
	height: 6000px;
}

#contentarea2:hover {
	height: 6000px;
}



/*The div contentarea is the box that contains the Dre pictures*/

#contentarea {
background-color: white;
margin-top: 20px;
margin-right: 0px;
margin-left: 10px;
width: 270px;
height: 300px;
float: left;
border-style: outset;
border-width: 10px;
border-color: black;
background-image: url("http://cf.ltkcdn.net/cooking/images/std/151370-425x368-beets1.jpg");
background-repeat: repeat;
background-position: center;
box-shadow: 10px 10px 10px grey;
-webkit-transition: height 10s; 
    transition: height 10s;

}

/*This div contains the beets*/

#contentarea2 {
background-color: white;
margin-top: 20px;
margin-right: 0px;
margin-left: 10px;
width: 270px;
height: 300px;
float: left;
border-style: outset;
border-width: 10px;
border-color: black;
background-image: url("http://www.brothersonsports.com/wp-content/uploads/2014/06/Dr-Dre-Could-be-soon-Becoming-the-1st-Hip-Hop-Artist-to-become-a-Billionaire.1.jpeg");
background-repeat: repeat;
background-position: center;
box-shadow: 10px 10px 10px grey;
-webkit-transition: height 10s; 
    transition: height 10s;

}

#contentarea3 {
background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcSnZ-Y5c7iJGULNFie2vkxCN9ecvIg9s5Z3GKONZUgKJiVamFND:www.force18.co.uk/image/cache/data/mens-2/lenny-face_0012_grey-640x640.jpg");
padding: 10px;
height: 300px;
width: 400px;
margin-right: 10px;
margin-left: 25px;
margin-top: 10px;
margin-bottom: 10px;
color: black;
font-size: 18px;
float: left;
border-style: outset;
border-width: 10px;
border-color: black;
box-shadow: 10px 10px 10px grey;
-webkit-transition: height 10s; 
    transition: height 10s;
}

/*Inisible div used for spacing*/

#spacebar {
background-color: ;
height: 34.5px;
width: 300px;
margin-left: 10px;
margin-right: 10px;
float: left;
}

/*This div contains the text*/

#text {
background-color: white;
padding: 10px;
height: 800px;
width: 1000px;
margin-right: 10px;
margin-left: 10px;
margin-top: 25px;
margin-bottom: 10px;
color: black;
font-size: 18px;
float: left;
border-style: outset;
border-width: 10px;
border-color: black;
box-shadow: 10px 10px 10px grey;
-webkit-transition: height 10s; 
    transition: height 10s;
}

#text2 {
background-image: url("drez.png");
padding: 10px;
height: 1000px;
width: 1000px;
margin-right: 10px;
margin-left: 10px;
margin-top: 25px;
margin-bottom: 10px;
color: black;
font-size: 18px;
float: left;
border-style: outset;
border-width: 10px;
border-color: black;
box-shadow: 10px 10px 10px grey;
-webkit-transition: height 10s; 
    transition: height 10s;
}

#drez {
background-image: url("drez.png");
padding: 10px;
height: 300px;
width: 300px;
margin-right: 10px;
margin-left: 10px;
margin-top: 25px;
margin-bottom: 10px;
color: black;
font-size: 18px;
float: left;
border-style: outset;
border-width: 10px;
border-color: black;
}

#textbig {
background-color: white;
padding: 10px;
height: 1800px;
width: 1000px;
margin-right: 10px;
margin-left: 10px;
margin-top: 25px;
margin-bottom: 10px;
color: black;
font-size: 18px;
float: left;
border-style: outset;
border-width: 10px;
border-color: black;
box-shadow: 10px 10px 10px grey;
}

/*------------------------------------------------------------*/

#trollbox_holder {
background-color: ;
padding: 10px;
height: 350px;
width: 1010px;
margin-right: 10px;
margin-left: 10px;
margin-top: 25px;
margin-bottom: 10px;
color: ;
font-size: 18px;
float: left;
/*border-style: outset;*/
border-width: 10px;
border-color: ;
position: relative;
}

#trollbox {
background-color: white;
padding: 10px;
height: 50px;
width: 50px;
margin-right: 10px;
margin-left: 10px;
margin-top: 25px;
margin-bottom: 10px;
color: black;
font-size: 18px;
float: left;
border-style: outset;
border-width: 10px;
border-color: black;
position: relative;

}

#trollbox:hover {
    left: 800px
    /*-webkit-animation: troll 5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-play-state: running;
        -webkit-animation-timing-function: linear;*/
}

#trollbox_holder:active {
      background-image: url("http://img2.wikia.nocookie.net/__cb20130622093509/mlpfanart/images/3/30/480px-Troll_Face_Trollface.png");
}

@-webkit-keyframes troll {
    0%   {left:0px; top:0px;}
    25%  {left:300px; top:0px;}
    26%  {left:301px; top:0px;}
    27%  {left:302px; top:0px;}
    28%  {left:303px; top:0px;}
    29%  {left:304px; top:0px;}
    30%  {left:305px; top:0px;}
    31%  {left:306px; top:0px;}
    32%  {left:307px; top:0px;}
    33%  {left:308px; top:0px;}
    34%  {left:309px; top:0px;}
    35%  {left:310px; top:0px;}
    /*50%  {left:300px; top:150px;}*/
    /*75%  {left:0px; top:150px;}*/
    /*100% {left:0px; top:0px;}*/

/*------------------------------------------------------------*/

/*the "a" changes the color of the links*/

a{
	color: white;
}

/*These are the rules for the glowing animation used in #submenu*/

@-webkit-keyframes myfirst {
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    75%  {background:green;}
    100% {background:red;}