html, body 		{height: 100%; width: 100%; margin:0; padding:0;overflow:auto;}

body 			{background-color: hsl(200,25%,85%);
				background-image:url('../img/paper2.png');
				background-attachment:fixed;
				background-position:left;
				background-repeat:repeat;
				}
div				{position: relative;} /**/

h1,h2			{font-family: Helvetica, "Times New Roman", Times, serif;/**/
				color: hsl(200,50%,95%);
				text-shadow: 1px 2px 2px hsl(200,40%,10%);
				text-shadow: 1px 1px 1px hsla(200,40%,10%,0.9);
				margin-top: 10px;
				}
				
h1				{display:inline-block;position:relative; margin:5px auto 20px auto; clear:both;
				font-size: large; color:hsl(200,20%,98%);
				background: -webkit-linear-gradient(356.5deg, hsla(200,30%,50%,0.5) 5%, hsla(200,50%,90%,0.5) 35%, hsla(200,0%,100%,0.0) 95%); /* For Safari 5.1 to 6.0 */
			    background: -o-linear-gradient(356.5deg, hsla(200,30%,50%,0.5) 5%, hsla(200,50%,90%,0.5) 35%, hsla(200,0%,100%,0.0) 95%); /* For Opera 11.1 to 12.0 */
			    background: -moz-linear-gradient(356.5deg, hsla(200,30%,50%,0.5) 5%, hsla(200,50%,90%,0.5) 35%, hsla(200,0%,100%,0.0) 95%); /* For Firefox 3.6 to 15 */
			    background: linear-gradient(356.5deg, hsla(200,30%,50%,0.5) 5%, hsla(200,50%,90%,0.5) 35%, hsla(200,0%,100%,0.0) 95%); /* Standard syntax (must be last) */
				box-shadow: 0 10px 12px -10px hsl(200,100%,10%);
				box-shadow: 0 10px 12px -10px hsla(200,100%,10%,0.8);
				-moz-border-radius: 0px 0px 20px 20px/0px 0px 20px 8px;
				-webkit-border-radius: 0px 0px 20px 20px/0px 0px 20px 8px;
				border-radius: 25px 25px 25px 25px /20px 20px 20px 20px;
				border-top: 1.5px hsl(200,30%,25%) solid;
				padding: 10px 20px 8px 20px; /**/
				}
h2				{margin: 10px; font-size: medium;}

nav				{}
				
figure			{padding: 0; padding-top: 10px; margin: 0;
				}
				
figcaption		{padding:10px 0;}

#wrapper 		{position:relative; margin:0px auto; 
				height:auto; min-height:100%; /**/
				background: url('../img/paper3.png'); /**/
				text-align:center;
				box-shadow:0px 3px 7px 0px black;}

#titlebar		{min-height:100px; padding-top:15px; color:white;
				background: -webkit-linear-gradient(-2deg, #FFF 0%, #FF6 10%, hsl(200,50%,50%) 20%, hsla(200,0%,100%,.7) 98%); /* For Safari 5.1 to 6.0 */
			    background: -o-linear-gradient(-2deg, #FFF 0%, #FF6 10%, hsl(200,50%,50%) 20%, hsla(200,0%,100%,.7) 98%); /* For Opera 11.1 to 12.0 */
			    background: -moz-linear-gradient(-2deg, #FFF 0%, #FF6 10%, hsl(200,50%,50%) 20%, hsla(200,0%,100%,.7) 98%); /* For Firefox 3.6 to 15 */
			    background: linear-gradient(-2deg, #FFF 0%, #FF6 10%, hsl(200,50%,50%) 20%, hsla(200,0%,100%,.4) 98%); /* Standard syntax (must be last) */
				box-shadow: 0 -70px 150px -10px hsl(30,100%,10%);
				box-shadow: 0 -70px 150px -10px hsla(30,100%,10%,0.9);
				}
#titlebar h1	{display:block; color:white; background:none; box-shadow:none; padding:0; border:none;}

#contentwrapper	{position:relative; overflow:hidden; height:auto;
				width:100%; 
				margin:0; padding:15px 0 25px 0; /* For height of footer */
				}

#selectionfield	{display:block;float:left;width:30%; 
				}

#content		{position:relative; float:left; height:auto; min-height:100%;
				margin:0; padding:0;
				text-align:center;
				}

#footer 		{clear:both; position:relative; overflow:hidden; z-index:100; margin:0 auto;
				text-align:center;
				background:url('../img/schaduw.png'); background-size:contain; background-repeat:repeat-x;
				background-color:hsl(200,70%,80%); 
				margin-top:-20px; height:20px;}
#footer p		{margin:0;padding:0; color:hsl(200,30%,98%); text-shadow:1px 1px 1px hsl(200,80%,10%); text-shadow:1px 1px 1px hsla(200,80%,10%,.5)}

#logo			{position:absolute; right:0; top:10px;width:100px; height:100px;}

#mapdiv1 		{display:block; border:2px white outset; width:90%; margin:0 auto; 
				background-color:hsl(200,20%,90%);
				background-color:hsla(200,20%,90%,.8); /**/
				box-shadow: 0 20px 20px -20px hsl(200,40%,10%); margin-bottom:10px;
				padding:0px 10px 15px 10px;  
				}
#mapdiv1 h1		{color:hsl(200,50%,80%); 
				background:none;box-shadow:none; margin:10px; margin-top:0px;
				text-shadow:1px 1px hsl(200,50%,20%);
				font: normal 20px/normal Arial, Helvetica, sans-serif;
 				letter-spacing:2px;
 				text-transform:uppercase;
 				border:none;
				}
#mapdiv2 		{display:inline-block; border:2pt white inset; margin:0; width:95%;
				}

#map 			{width:100%; height:430px;}

canvas			{box-shadow: 0 20px 20px -20px hsl(200,40%,10%);}

p				{padding:10pt 5pt 0 5pt; margin:0; }

section 		{margin-top: 15px;}

select 			{border:1.5px white inset;
				padding:3px 0px;
				background-color:hsl(200,40%,25%); color:white; text-shadow:1px 1px 1px hsl(200,20%,0%);
				background: -webkit-linear-gradient(hsl(200,40%,40%),hsl(200,40%,10%)); /* For Safari 5.1 to 6.0 */
			    background: -o-linear-gradient(hsl(200,40%,40%),hsl(200,40%,10%)); /* For Opera 11.1 to 12.0 */
			    background: -moz-linear-gradient(hsl(200,40%,40%),hsl(200,40%,10%)); /* For Firefox 3.6 to 15 */
			    background: linear-gradient(hsl(200,40%,40%),hsl(200,40%,10%)); /* Standard syntax (must be last) */
				margin:0; /**/
				}
				
select option	{
				background-color:hsl(200,20%,10%); color:hsl(200,100%,95%);
				text-shadow:none;
				}
				
/* Form fields:*/			
textarea		{padding:5px; margin-top:5px;}				
input[type=text], input[type=password],input[type=url],input[type=number], input[type=email]
				{padding:5px; margin-top:5px;}
input[type=button], input[type=reset],input[type=submit]
				{padding:5px; margin-top:5px;}
button			{padding:5px; margin-top:5px;}
	
				
table			{margin:0 auto; border-spacing: 0; text-align:left; border:1.5px white outset; padding:10px; 
				box-shadow: 0 20px 20px -20px hsl(200,40%,10%); margin-bottom:10px; background-color:hsl(200,20%,90%);}
table td		{margin:0; padding:5px;
				}
				
#selectionfield table {width:90%; max-width:330px; padding:10px;}
#content table 	{width:90%; max-width:330px; padding:10px;}

.inputwidth 	{width:100%; font-family: Verdana;  font-size: .8em; }

#scalable		{cursor:pointer;}

/* Some CSS for the random exercises page: */
div.selector		{position:relative; display:inline-block; width:110px; height:50px; padding:0;/*padding:10px 5px 3px 5px;/**/
				border-bottom:1px hsl(200,0%,50%) outset; border-radius:5px;
				background-color:hsl(200,50%,85%);
				background: -webkit-linear-gradient(-10deg, hsl(200,50%,75%),hsl(200,50%,95%)); /* For Safari 5.1 to 6.0 */
			    background: -o-linear-gradient(-10deg, hsl(200,50%,75%),hsl(200,50%,95%)); /* For Opera 11.1 to 12.0 */
			    background: -moz-linear-gradient(-10deg, hsl(200,50%,75%),hsl(200,50%,95%)); /* For Firefox 3.6 to 15 */
			    background: linear-gradient(-10deg, hsl(200,50%,75%),hsl(200,50%,95%)); /* Standard syntax (must be last) */
				margin:1px auto;
				box-shadow:0 10px 15px -10px hsl(200,50%,10%);
				box-shadow:0 10px 15px -10px hsla(200,50%,0%,0.7);
				text-align:center;
				vertical-align:top;
				}
				
div.selector:hover {/*padding:3px 5px 10px 5px;/**/
				border:none; border-top:1px hsl(200,40%,65%) solid; border-top:1px hsla(200,60%,25%,0.2) solid;
				background: -webkit-linear-gradient(170deg, hsl(200,50%,75%),hsl(200,50%,95%)); /* For Safari 5.1 to 6.0 */
			    background: -o-linear-gradient(170deg, hsl(200,50%,75%),hsl(200,50%,95%)); /* For Opera 11.1 to 12.0 */
			    background: -moz-linear-gradient(170deg, hsl(200,50%,75%),hsl(200,50%,95%)); /* For Firefox 3.6 to 15 */
			    background: linear-gradient(170deg, hsl(200,50%,75%),hsl(200,50%,95%)); /* Standard syntax (must be last) */
				box-shadow:0 3px 7px -2px hsl(200,50%,10%);
				box-shadow:0 3px 7px -2px hsla(200,50%,0%,0.6);
				}
.verticalAlign {position:relative; display:inline-block; margin:0; padding:0; width:0px;height:100%;
				vertical-align:middle;}
				
div.selector p 	{position:relative; display:inline-block; margin:0; padding:0;width:95%; /*overflow:hidden;/**/
				/*background:white;/*/
				text-shadow:0px 2px 2px hsl(200,50%,50%); text-shadow:0px 2px 2px hsla(200,50%,20%,0.3);
				vertical-align:middle;}
div.selector a	{text-decoration:none; color:white;margin:5px;}
div.selector a:hover	{ margin:2px 5px 8px 5px;
				text-shadow:0px 3px 4px hsl(200,50%,50%);text-shadow:0px 3px 4px hsla(200,50%,20%,0.5);}

div.special		{background-color:hsl(200,50%,70%); 
				background: -webkit-linear-gradient(-10deg, hsl(200,50%,50%),hsl(200,50%,95%)); /* For Safari 5.1 to 6.0 */
			    background: -o-linear-gradient(-10deg, hsl(200,50%,50%),hsl(200,50%,95%)); /* For Opera 11.1 to 12.0 */
			    background: -moz-linear-gradient(-10deg, hsl(200,50%,50%),hsl(200,50%,95%)); /* For Firefox 3.6 to 15 */
			    background: linear-gradient(-10deg, hsl(200,50%,50%),hsl(200,50%,95%)); /* Standard syntax (must be last) */
				}
div.special:hover {box-shadow:0 3px 7px -2px hsl(200,50%,10%);
				box-shadow:0 3px 7px -2px hsla(200,50%,0%,0.6);
				background: -webkit-linear-gradient(170deg, hsl(200,50%,50%),hsl(200,50%,95%)); /* For Safari 5.1 to 6.0 */
			    background: -o-linear-gradient(170deg, hsl(200,50%,50%),hsl(200,50%,95%)); /* For Opera 11.1 to 12.0 */
			    background: -moz-linear-gradient(170deg, hsl(200,50%,50%),hsl(200,50%,95%)); /* For Firefox 3.6 to 15 */
			    background: linear-gradient(170deg, hsl(200,50%,50%),hsl(200,50%,95%)); /* Standard syntax (must be last) */
				}

div.special	a	{color:hsl(200,90%,20%);}

/*======================Styling in the randomzie page:=================================*/
p#notice        {height:55%; margin:0; padding:15px 0 20px 0; border-radius:75px 75px / 50px 50px;               
}
div#info {
        position: relative; display: block; height: 220px; width: 80%;  max-width: 400px; margin: 2px auto 20px auto; padding: 10px 10px 3px 10px;
        text-align: center;
        background-color: hsl(200,50%,85%);
        background: -webkit-linear-gradient(-10deg, hsl(200,50%,80%),hsl(200,50%,95%));
        background: -o-linear-gradient(-10deg, hsl(200,50%,80%),hsl(200,50%,95%));
        background: -moz-linear-gradient(-10deg, hsl(200,50%,80%),hsl(200,50%,95%));
        background: linear-gradient(-10deg, hsl(200,50%,80%),hsl(200,50%,95%));
        box-shadow: 0 10px 15px -10px hsl(200,50%,10%);
        box-shadow: 0 10px 15px -10px hsla(200,50%,0%,0.7);
        border-radius: 5px; border-bottom: 1px hsl(200,0%,50%) outset;
    }

div#info h1 {background: none; border: none; margin: 0; padding: 0; box-shadow: none;
        }
div#info p {background: none; border: none; margin: 0; padding: 0; box-shadow: none;
        }
div#info img {display: inline-block; margin: 10px 0px; margin-left: -4px; max-width: 80%; max-height: 100px; padding: 3px;
            background-color: #FFF;
            box-shadow: 0 10px 15px -10px hsl(200,50%,10%);
            box-shadow: 0 10px 15px -10px hsla(200,50%,0%,0.7);
        }