		body {
			/* width: 1000px; */
			/* background-image: url('../../img/bg/bgparchment_t.png'); */
			background-image: url('../img/bg/bgparchment_light.jpg');
		}

		.carroussel {
			position: relative;
			width: 950px;
			height: 250px;
			margin-right: -100px;
			left: 100px;
		}

		.carroussel div {
			position:relative;
			float:left;
			width:200px;
			height:250px;
			margin-right: -150px;
		}

		.carroussel div:not(:last-of-type):hover { 
			margin-right: 0px;
			z-index:10;
			box-shadow: 10px 10px 5px #000000;
			-moz-box-shadow: 10px 10px 5px #000000;
    		-webkit-box-shadow: 10px 10px 5px #000000; 
		} 	
		
		.carroussel div:last-of-type:hover { z-index: 10;}
		
		/* .carroussel div:focus { width:200px; z-index: 20; } */
		
		.carroussel input { display: none; }
		
		.carroussel input:checked + div { 
			/* margin-right: 0px; */ 
			position:absolute;
			top: 75px;
			left: -100px;
			z-index: 20;
			box-shadow: 10px 10px 5px #000000;
			-moz-box-shadow: 10px 10px 5px #000000;
    		-webkit-box-shadow: 10px 10px 5px #000000; 
		}
		
		.carroussel div img {
			width: 200px;
			position:absolute;			
			clip:rect(0px 200px 250px 0px);
			border: none;
		    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
			/* filter: url('grayscale.svg#grayscale'); */
			filter: grayscale(100%);
			-webkit-filter: grayscale(100%);
			-webkit-filter: grayscale(1);
			-moz-filter: grayscale(100%);
			-ms-filter: grayscale(100%);
			-o-filter: grayscale(100%);
            /* filter: gray; */
		}
		
		.carroussel input:checked + div img,
		.carroussel img:hover {
			filter: none;
			-webkit-filter: grayscale(0%);
			-moz-filter: grayscale(0%);
			-ms-filter: grayscale(0%);
			-o-filter: grayscale(0%);	
			-webkit-filter: grayscale(0);		
		}
		
		.classSummary {			
			display: none;
		}
		
		.classSummary p.summaryLabel {
			position: relative;
			top: -25px;
			left: 220px;
			font-family: dampfPlatz; 
			font-size: 300%;
		}

		.classSummary div:first-of-type {
			width: 300px;
		}
		
		.classSummary div:nth-of-type(2) {
			padding-top: 0px;
			padding-left: 0px;
		}
		
		.classSummary div {
			position:relative;
			float:left;
			margin-right: 10px;
			padding: 10px;
			box-shadow: 5px 5px 25px #FFFFFF inset;
			-moz-box-shadow: 5px 5px 25px #FFFFFF inset;
    		-webkit-box-shadow: 5px 5px 25px #FFFFFF inset; 
		}
		
		.bsTable {
			padding: 10px;
			box-shadow: 5px 5px 25px #FFFFFF inset;
			-moz-box-shadow: 5px 5px 25px #FFFFFF inset;
    		-webkit-box-shadow: 5px 5px 25px #FFFFFF inset; 			
		}
		
		.bsTable td {
			border-style: ridge;
			border-width: 3px;			
		}
		
		.spellTable {
			border-style: ridge;
			border-width: 3px;
		}

		.whiteBox {
			margin-right: 10px;
			padding: 10px;
			box-shadow: 5px 5px 25px #FFFFFF inset;
			-moz-box-shadow: 5px 5px 25px #FFFFFF inset;
    		-webkit-box-shadow: 5px 5px 25px #FFFFFF inset; 			
		}

		.rippedPaper {
		    background-image: url('../img/bg/HorizontalImageBack1.png');
		    background-repeat: no-repeat;
		    background-size: cover;
		    padding: 10px 10px 10px 10px;
		    list-style-position: inside;
		}

		table.warlockTable tr td {
			border-style: ridge;
			border-width: 3px;		    
		}

		.shadowText {
			text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
		}
		
