#close-open>span:last-child:after {content:" selected";}

	.container 	  {width:950px;}
	
	#skillmenueselect {min-height:35px;}
	#skillmenueselect #selectortext {min-width:180px; letter-spacing:-0.3px;}
	#skillmenueselect #selectorlist {width:100%;}
	
	#selectorlist li {width:65px;}
	#selectorlist li:last-child {width:45px;}
	#selectorlist label {width:65px; margin:0;}
	#selectorlist li:last-child label {width:45px;}
	#selectorlist input[type="radio"] {margin-top:1px; margin-right:2px; vertical-align:top;}
	#selectorlist label[for]:hover, #selectorlist input:hover {color:#FF0033;cursor:pointer;}
	
	#skillmenuemonster {}
	.monsters-small {float:left; width:65px; height:65px; background-position:0 0; border:1px solid lightgrey; transition:all 0.0s linear;}/*transition:all 0.2s ease;*/
	.monsters-small:hover  {background-position:0 -65px; cursor:pointer;}
	.monsters-small.active {background-position:0 -65px;}
	.m {display:none;}
	.m.vip {display:inline-block; /*border:1px solid #cc99ff;*/ -webkit-animation:1.2s blink step-end infinite alternate; -moz-animation:1.2s blink step-end infinite alternate; animation:1.2s blink step-end infinite alternate;}
	/* rare-monster */ .rm {border:1px solid orange;}
	/* epic-monster */ .em {border:1px solid lightgreen;}	/* http://www.w3schools.com/css/css3_animations.asp */
	
	#skilltext {font-weight:700;}
	
	#skillmonster {width:650px;}
	.skill-img {display:none; position:relative; width:650px; height:487px; margin-bottom:20px; box-shadow:8px 8px 5px lightgrey;}
	.skill-img > * {position:absolute; border-radius:5px; opacity:0.3;}
	.skill-info {display:none; top:57px; right:23px; left:auto; width:339px; height:145px; border-radius:0; opacity:1;}
	.skill-img.active  {background-size:100%;}	/* jQuery reagiert erst bei Änderung der Winwos Size, daher wird per jQeuery die Class 'active' gesetzt */
	.skill-b1, .skill-b2, .skill-b3, .skill-b4 {left:auto; width:145px; height:40px;}
	.skill-b1, .skill-b2 {top:239px;}
	.skill-b3, .skill-b4 {top:286px;}
	.skill-b1, .skill-b3 {right:195px;}
	.skill-b2, .skill-b4 {right:43px;}
	.skill-b5 {right:93px; bottom:39px; left:auto; width:196px; height:70px;}
	.skill-b.active, .skill-b:hover {background:cyan;}
	.skill-b:hover {cursor:pointer;}
	.skill-b5:hover {border-radius:20px;}
	
	.skill-info.active-1 {background-position:0 0; display:block; background-size:100%;}
	.skill-info.active-2 {background-position:0 -145px; display:block; background-size:100%;}
	.skill-info.active-3 {background-position:0 -290px; display:block; background-size:100%;}
	.skill-info.active-4 {background-position:0 -435px; display:block; background-size:100%;}
	
	.runes {width:200px; height:70px; margin-top:415px; margin-left:40px; text-align:center; opacity:1;}
	.runentext {color:white;font-weight:bold;}
	.runentext:before {content:"Empfohlene Runen:";}
	.rune {display:inline-block;width:50px;height:50px;}
	.custom-info {width:650px;color:red;font-weight:bold;margin-top:415px;opacity:1;}
	
	
@media (max-width: 289px) and (min-width: 1px) {
	#close-open, [id*="skill"] {display: none;}
	#main > .container::after {display:block; margin:18px; content:"Auflösung zu klein!";}
}

@media (max-width: 319px) and (min-width: 290px) {
	.container 	  {width:250px;}
	#skillmonster {width:200px;}
	.skill-img 	  {width:200px; height:251px;}
	.skill-img.active  {background-size:170%;}	/* jQuery reagiert erst bei Änderung der Winwos Size, daher wird per jQeuery die Class 'active' gesetzt */
	.skill-info   {top:28px; right:13px; left:auto; width:176px; height:75px; opacity:1;}
	.skill-b1, .skill-b2, .skill-b3, .skill-b4 {width:75px; height:20px;}
	.skill-b1, .skill-b2 {top:123px;}
	.skill-b3, .skill-b4 {top:149px;}
	.skill-b1, .skill-b3 {right:103px;}
	.skill-b2, .skill-b4 {right:22px;}
	.skill-b5 {right:47px; bottom:19px; width:106px; height:38px;}

	.skill-info.active-1 {background-position:0 0; display:block; background-size:100%;}
	.skill-info.active-2 {background-position:0  -75px; display:block; background-size:100%;}
	.skill-info.active-3 {background-position:0 -150px; display:block; background-size:100%;}
	.skill-info.active-4 {background-position:0 -225px; display:block; background-size:100%;}

	.runes {display:none;}
}

@media (max-width: 449px) and (min-width: 320px) {
	.container 	  {width:300px;}
	#skillmonster {width:250px;}
	.skill-img 	  {width:250px; height:317px;}
	.skill-img.active  {background-size:170%;}	/* jQuery reagiert erst bei Änderung der Winwos Size, daher wird per jQeuery die Class 'active' gesetzt */
	.skill-info   {top:36px; right:16px; left:auto; width:220px; height:94px; opacity:1;}
	.skill-b1, .skill-b2, .skill-b3, .skill-b4 {width:95px; height:26px;}
	.skill-b1, .skill-b2 {top:155px;}
	.skill-b3, .skill-b4 {top:186px;}
	.skill-b1, .skill-b3 {right:127px;}
	.skill-b2, .skill-b4 {right:28px;}
	.skill-b5 {right:60px; bottom:25px; width:130px; height:47px;}

	.skill-info.active-1 {background-position:0 0; display:block; background-size:100%;}
	.skill-info.active-2 {background-position:0  -94px; display:block; background-size:100%;}
	.skill-info.active-3 {background-position:0 -188px; display:block; background-size:100%;}
	.skill-info.active-4 {background-position:0 -282px; display:block; background-size:100%;}

	.runes {display:none;}
}
	
@media (max-width: 529px) and (min-width: 450px) {
	.container 	  {width:440px;}
	#skillmonster {width:400px;}
	.skill-img 	  {width:380px;}
	.skill-img.active  {background-size:auto;}	/* jQuery reagiert erst bei Änderung der Winwos Size, daher wird per jQeuery die Class 'active' gesetzt */

	.runes {display:none;}
}	
	
@media (max-width: 679px) and (min-width: 530px) {
	.container 	  {width:500px;}
	#skillmonster {width:480px;}
	.skill-img 	  {width:480px; height:359px;}
	.skill-info   {top:42px; right:19px; left:auto; width:248px; height:105px; opacity:1;}
	.skill-b1, .skill-b2, .skill-b3, .skill-b4 {width:106px; height:28px;}
	.skill-b1, .skill-b2 {top:176px;}
	.skill-b3, .skill-b4 {top:211px;}
	.skill-b1, .skill-b3 {right:145px;}
	.skill-b2, .skill-b4 {right:32px;}
	.skill-b5 {right:68px; bottom:26px; width:146px; height:52px;}

	.skill-info.active-1 {background-position:0 0; display:block; background-size:100%;}
	.skill-info.active-2 {background-position:0 -106px; display:block; background-size:100%;}
	.skill-info.active-3 {background-position:0 -212px; display:block; background-size:100%;}
	.skill-info.active-4 {background-position:0 -318px; display:block; background-size:100%;}
	
	.runes {margin-top:305px; margin-left:6px; font-size:9pt;}
	.rune {display:inline-block;width:35px;height:35px;}
}

@media (max-width: 767px) and (min-width: 680px) {	
	.container 	  {width:630px;}
	#skillmonster {width:610px;}
	.skill-img 	  {width:610px; height:457px;}
	.skill-info   {top:53px; right:22px; left:auto; width:318px; height:136px; opacity:1;}
	.skill-b1, .skill-b2, .skill-b3, .skill-b4 {width:133px; height:35px;}
	.skill-b1, .skill-b2 {top:225px;}
	.skill-b3, .skill-b4 {top:269px;}
	.skill-b1, .skill-b3 {right:186px;}
	.skill-b2, .skill-b4 {right:43px;}
	.skill-b5 {right:88px; bottom:38px; width:182px; height:64px;}

	.skill-info.active-1 {background-position:0 0; display:block; background-size:100%;}
	.skill-info.active-2 {background-position:0 -136px; display:block; background-size:100%;}
	.skill-info.active-3 {background-position:0 -272px; display:block; background-size:100%;}
	.skill-info.active-4 {background-position:0 -408px; display:block; background-size:100%;}

	.runes {margin-top:386px; margin-left:30px;}
}	

@media (max-width: 991px) and (min-width: 768px) {
	.container 	  {width:740px;}
	#skillmonster {width:650px;}
}	

@media (max-width: 991px) {
	#selectortext {width:100%; float:left;}
}