/*

.shell{
	background:pink;
	
}

#intro{
	background: #FFF;
	
}



#concepts{
	background:yellow;


}





.con-inner{
	background:lightblue;
}


.cons{
	background: red;
}





*/





#bottom{
	height: 500px;
	color:#AAAAAA;
	
}


#middle, #bottom{
	height: 0px;
}

#middle{
	

}





/*Test*/


body{
	margin:0;
	padding: 0;
	font-family: 'Radley', serif;
	background-color: #212121;
	color:#858585; /*#666666;*/
	background-image: url('../images/test666.png');
    background-repeat: repeat-y;
 	background-position: center;
 	background-size: 100% auto;
 	font-size: 15px;
}


h1{
	
	
	margin-left: 150px;
	margin-top: 60px;
	margin-bottom: 0px;
	color:#9ddae4;
	font-family: 'Fascinate', cursive;
  	/*font-family: 'Permanent Marker', cursive;*/
  	font-size: 40px;
  	text-shadow:1px 1px 2px #000;
}

a{
	color: #FFF;
}

a:hover{
	color:orangered;
}

#top{
	width:100%;
	padding-top: 20px;
	padding-bottom: 10px;
	background-image: url('../images/pattern8.png');



}

#middle{
	width: 100%;
	border-top: 1px dashed #333;
	box-shadow: 0px 8px 20px #000 inset;
	overflow: hidden;
	background-image: url('../images/texture4.png');
}

#bottom{
	width: 100%;
	border-top: 1px dashed #666;
  	border-bottom: 1px dashed #9ddae4;
  	box-shadow: 0px -5px 15px #000;
  	overflow: hidden;
  	background-image: url('../images/pattern8.png');
}

footer{
	position:fixed;
	top:95%;
	width: 100%;
	
	padding-top: 10px;
	height: 30px;
	background-color: #9ddae4;
	background-image: url('../images/blueppt.png');
	color:#333;
	font-weight: bold;
	font-family: 'arial' sans-serif;
	font-size: 11px;
	text-align: center;
  	box-shadow: 0px -5px 10px #111;
}


.shell{
	width:800px;
	margin: 0 auto;

}


#legend{
	clear: both;
	font-size: 10px;

}

#legend p{
	width: 150px;
	float: left;
}

button{
	min-width: 50px;
	margin: 0 auto;


	/**/

	 background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(top, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  border-radius: 3px;
  color: #333;
  font: bold 13px/1 'Radley', serif;;
  padding: 8px 0;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  width: 150px; }





  button:hover {
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(top, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd; }


  button:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;




}




/*Top*/

#circles{
	position: fixed;
	z-index: 100;
	width: 100%;
	height: 200px;
	top:0;
	left: 1px;
	background-image: url('../images/pattern8.png');
}


#down{
	position: fixed;
	top:70%;
	left:80%;
}


#intro{
	width: 700px;
	height:auto;
	margin:0 auto;
	text-indent: 30px;
	text-align: justify;
}



#intro img{
	float:left;
	width:140px;
	margin-left: -30px;
	transform:rotate(-15deg);
  	-webkit-transform:rotate(-15deg);
  	box-shadow: -9px 9px 10px #000;
}



#top-text > .indent-para{
	display: block;
	margin-left: 135px;
	margin-bottom: 10px;
	
}

#concepts{
	width: 700px;
	margin: 0 auto;
	min-height: 150px;
}

.cons{
	width:340px;
	min-height: 250px;
	float: right
}

.cons:first-of-type{
	float:left;

}



.red{
	width: 100%;
	text-align: center;
	font-family: 'Permanent Marker', cursive;
	color:orangered;
}

.con-inner{
	width:150px;
	float: right;
	padding:2px 5px 0px 5px;
	font-size: 14px;

}



.redhover{
	font-family: 'Permanent Marker', cursive;

}


.con-inner:hover{
	background-color: #212121;
	opacity: 0.8;
	

}


.con-inner:hover > .redhover{
	color:orangered;
}

#intro-bottom > p{
	margin-bottom: 0px;
}



/*Middle*/


#left{
	margin-top: 30px;
	float:left;
	width: 49%;
	height: 280px;
	overflow: hidden;
	display: none;




}


#right{
	margin-top: 30px;
	float:right;
	width:49%;

	height: 280px;
	overflow: hidden;
	display: none;


	
}



#des{
	width:100%;
}


#des-text{
	font-size: 14px;
	display: none;

}

#legend{
	display: none;
}





/*Bottom*/


#bubbles{
	width: 100%;
	position: relative;
	display: none;
}


#bubble1, 
#bubble2,
#bubble3, 
#bubble4{

	width:120px;
	padding-left:10px;
	top:250px;
	position: absolute;
	text-align: center;
	font-size: 13px;

}


#bubble1 {
	left:30px;
	
}

#bubble2 {
	left:220px;
	
}

#bubble3 {
	left:405px;
}

#bubble4 {
	left:600px;
	
}


.rank{
	margin-top: 5px;
	display: none;
}



/*SVG*/

.axis path,
.axis line {
  fill: none;
  stroke: dimgrey
  shape-rendering: crispEdges;
}



.line {
  fill: none;
  stroke-width: 1.5px;
  shape-rendering: crispEdges;
}




/**/



h1
{
animation: myfirst 2s;
-moz-animation: myfirst 2s; /* Firefox */
-webkit-animation: myfirst 2s; /* Safari and Chrome */
-o-animation: myfirst 2s; /* Opera */
}


@keyframes myfirst
{
			from 
			{

				margin-left: 0px;
				margin-top: 0px;

			}
			to 

			{
				margin-left: 150px;
				margin-top: 60px;


			}
}

@-moz-keyframes myfirst /* Firefox */
{
	from 
			{

				margin-left: 0px;
				margin-top: 0px;

			}
			to 

			{
				margin-left: 150px;
				margin-top: 60px;


			}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from 
			{

				margin-left: 0px;
				margin-top: 0px;

			}
			to 

			{
				margin-left: 150px;
				margin-top: 60px;


			}
}			

@-o-keyframes myfirst /* Opera */
from 
{
			{

				margin-left: 0px;
				margin-top: 0px;

			}
			to 

			{
				margin-left: 150px;
				margin-top: 60px;


			}
}			





#intro img
{
animation: ani2 5s;
-moz-animation: ani2 5s; /* Firefox */
-webkit-animation: ani2 5s; /* Safari and Chrome */
-o-animation: ani2 5s; /* Opera */
}


@keyframes ani2
{
			from 
			{

				transform:rotate(0deg);

			}
			to 

			{
				transform:rotate(-15deg);


			}
}

@-moz-keyframes ani2 /* Firefox */
{
	from 
			{

				-moz-transform:rotate(0deg);

			}
			to 

			{
				-moz-transform:rotate(-15deg);


			}
}

@-webkit-keyframes ani2 /* Safari and Chrome */
{
from 
			from 
			{

				-webkit-transform:rotate(0deg);

			}
			to 

			{
				-webkit-transform:rotate(-15deg);


			}
}			

@-o-keyframes ani2 /* Opera */
from 
{
			from 
			{

				-o-transform:rotate(0deg);

			}
			to 

			{
				-o-transform:rotate(-15deg);


			}
}