/*-- ITEM INFO NAVIGATION --*/
.nav {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	/*pointer-events: none;*/
}

#nav-prev {
	left: 0;
}		
#nav-next {
	right: 0;
}

.nav div {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	margin-top: -20px;
	cursor: pointer;
	overflow: hidden;
	border-radius: 20px;
}
.nav div span {
	font-family:arial;
	font-size: 40px;
	font-weight: bold;
	display: block;
	margin-top: -8px;
	color: rgba(255,255,255,0.1);
}

#nav-prev div {
	left: 4px;
}

#nav-next div {
	right: 4px;
}

#nav-prev:hover div,
#nav-next:hover div {
	background: rgba(233,233,233,0.8);
	box-shadow: 0 0 2px 2px #666666;
}

#nav-prev div span{
	margin-left: 12px;
}

#nav-next div span{
	margin-right: 12px;
	float: right;
}

#nav-prev:hover div span,
#nav-next:hover div span {
	
	color: #aeaeae;
	text-shadow: 1px 1px 1px #494949;
}

#itemInfo-bg {
	width: 100%;
	z-index: 16;
	background: rgba(0,0,0,0.6);
	position: absolute;
	top: 0;
	left: 0;
}

#itemInfo-container {
	position: absolute;
	z-index: 17;
	background-color: rgba(77, 77, 77, 0.8);
	width: 700px;
	left: 50%;
	margin-left: -350px;
	top: 50%;
	box-shadow: 0px 0px 244px 2px #000000 inset,  0px 0px 2px 2px #000000;
	color: #dedede;
	height: auto;
}

#itemInfo {
	width: 630px;
	color: #dedede;
	padding: 10px 0;
	height: auto;
	/*overflow: hidden;*/
	margin-left: 35px;
}

#itemInfo > h2 {
	color: #C6C6C6;
	font-family: Tahoma;
	font-size: 30px;
	font-weight: bold;
	text-shadow: -4px 1px 1px #000000, 0 0 4px #E9E9E9;
}

#itemInfo > h3 {
	color: #FFFFFF;
	font-family: arial;
	font-size: 17px;
	font-weight: bold;
}
	/*height: 100%;*/

#itemInfo ul li h3 {
	color: #FFFFFF;
	font-family: arial;
	font-size: 14px;
	font-weight: bold;
	margin:8px 0;
}

#itemInfo ul li p {
	line-height:150%;
}

#itemInfo ul li .specsName {
	min-width:15em;
	text-align:left;
	display:inline-block;
	font-weight:bold;
}

#itemInfo ul li .specsValue {
	font-style:italic;
}

#itemInfo-container > span {
	color: #B90000;
	display: inline-block;
	font-family: Times New Roman;
	font-size: 18px;
	font-weight: normal;
	margin-right: 3px;
	margin-top: -3px;
	text-shadow: 0 0 4px #FF0000;
}

/* -------------------- */
/* common size for starter pack boxes */
.starterPackBox, .starterPackBKG, .perspective {
	width:275px;
	height:564px;
}

.starterPackBox {
	display:inline-block;
	position:relative;
	margin-right:25px;
}

.starterPackBox:nth-child(3n){margin-right:0;}

.starterPackBKG {
	position:absolute;
	z-index:15;
	pointer-events: none; /* need this for webkit */
}

.packetButtons {
	clear:both;
	width:275px;
	height:20px;
	position: absolute;
	z-index:15;
	bottom: 20px;
	left:100px;
}

.packetButtonsLeft{
	-webkit-transform: rotateY(-2deg); /* Chrome, Safari, Opera  */
	-ms-transform: rotateY(-0.75deg);
	transform: rotateY(-0.75deg);	
}

.packetButtonsPerspective {
	perspective:220px;
	width:275px;
	height:20px;
}

.packetDetailInfo {
	padding:10px;
	text-align:left;
	color:#30B030;
	width:236px;
	height:349px;
	position:absolute;
	z-index:10;
	top:150px;
	left:10px;
	Xbackground-color:rgba(255,128,128,1);
}

.packetDetailInfoLeft{
	-webkit-transform: rotateY(-2deg); /* Chrome, Safari, Opera  */
	transform: rotateY(-2deg);
	-ms-transform: rotateY(-2deg);
}

.packetInfoActive {
	Xbackground-color:rgba(127,127,127,0.6);
	Xbox-shadow: 0px 0px 10px 0px rgba(127, 127, 127, 0.6);
	font-size:14px;
	position: absolute;
	z-index:4;
}

.perspective {
	position: absolute;
	z-index:4;
	-webkit-perspective:220px; /* Chrome, Safari, Opera  */
	perspective:220px;
	Xbackground-color:rgba(128,128,255,0.5);
}

	
@keyframes pulse {
	0% { box-shadow: 0 0 14px rgba(255,255,255,0.2); }
	50% { box-shadow: 0 0 14px rgba(255,255,255,0.9); }
	100% { box-shadow: 0 0 14px rgba(255,255,255,0.2); }
}
span.blink {animation: pulse 1s infinite ease-in-out;}

#accountAppForm, #resultContainer {background: none repeat scroll 0 0 rgba(255, 255, 255, 0);}

.packetlist {
	padding:0 0 0 15px;
	list-style-type:square;
}
.packetlist li {
	list-style-type:square;
	cursor: pointer;
	margin-top:3px;
	line-height: 15px;
}
.packetlist li:first-letter, .packetlist span:first-letter {text-transform:uppercase;}
.packetlist span {display:inline-block;}

.packetlist li span:hover{
	color: #fff;
}

.packetlist li.separator {
	display:none;
	/*
	height:0.5em;
	list-style-type:none;
	*/
}

/* ------------------------- */
/* used in ajax fetch of package details */
li.itemImage {float:left;padding:4px;border:solid 1px #ccc;list-style-type:none;}
/*--------------------------------*/
div.starter-pack-wrapper:nth-child(3n-2) {
	margin-left: 0;
}

.starter-pack-wrapper {
	float: left;
	margin-left: 25px;
	margin-bottom: 35px;
}

.starter-pack {
	width: 250px;		/*275px*/
	height: 531px;	/*390px;*/	/*541px*/
	padding-left: 25px;
	padding-top: 0px;	/*151px;*/
	background-repeat: no-repeat;
	
}

.starter-pack p {
	width: 230px;
	display:block;
	font-family: arial;
	text-align: justify;
	font-size: 13px;
}
.text-spbronze2 {
	color: rgba(187,128,87,0.9);
	text-shadow: 1px 1px 0 #000;
}
.text-spsilver2 {
	color: rgba(200,201,206,0.9);
	text-shadow: 1px 1px 0 #000;
}
.text-spgold2 {
	color: rgba(207,179,118,0.9);
	text-shadow: 1px 1px 0 #000;
}
.text-spplatinum2 {
	color: rgba(200,201,206,0.9);
	text-shadow: 1px 1px 0 #000;
}
/*-----------*/

#packageListBox {width:630px;}

.item-box {
	/*extra*/
	display: block;
	float: left;
	list-style: none;
	margin: 0 35px 0 0;
	/*extra*/
}

ul#packageList {
	/*width:630px; DELETE, width from javascript */
	/*background: rgba(255,0,0,0.3);*/
	padding: 0;
	/*display: inline-block;*/
	display: block;
	float:left;
}

ul#packageList li {
	width:630px;
	float:left;
	list-style-type: none;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	-o-user-select: none;
	user-select: none;
}

ul#packageList li:hover {
	color:#dedede;
	cursor: default;
}

#packageList li img {
	display: block;
	margin: 0 auto;
}

ul#packageList li ul li{width:auto;float:none;}

ul#packageList li ul {
	float: left;
	width: 275px;
}

.detailList-col1 {

}

.detailList-col2 {

}

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

/*
#sp-bronze { background: url('starter-pack-bronze.png');}
#sp-silver {	background: url('starter-pack-silver.png') no-repeat;}
#sp-gold {	background: url('starter-pack-gold.png') no-repeat;}
*/

.btn-info-starter-pack {
	background: transparent url("/img/shop/webshop-box-buttons-v03.png") no-repeat right 0px;
	color: #333333;
	width: 91px;
	height: 35px;
	border: 0px;
	display:block;
	float:left;
}

.btn-info-starter-pack:hover {
	background-position: right -36px;
}

.btn-info-starter-pack:active {
	background-position: right -72px;
}

.btn-info-starter-pack:disabled {
	background-position: right -108px;
}

#starterPackPayment {
	margin-top: -5px;
}

#starterPackPayment iframe {
	border: 0px;
	width: 874px;
	margin-left: 1px;
}

#reset {
	width: 100px;
	height: 100px;
}

#paymentProviderButtons {
	display: inline-block;
}

#paymentProviderButtons button  {
	display: block;
	float: left;
	height: 39px;
	margin-right: 15px;
}


/* for webshop */

.packageGroup {
	margin:20px 15px;
	padding-top:0;
	clear:both;
	position:relative;
}

.webshop-box-container {
	width: 280px;
	margin: 0 0 10px 10px;
	padding:10px 0 0 0;
	float:left;
}
.webshop-box-container:hover .webshop-box-footer {
	background: transparent url(/img/shop/webshop-box-bg-footer.png) no-repeat left -64px;
}
/*	NOTE: removed '.webshop-box-container span, '	*/
.webshop-box-container p, 
.webshop-box-container ul li {
	font-family: arial;
	font-size: 13px;
	color: #333333;
}
.webshop-box-container ul {
	list-style-type: none;
	padding: 0;
}
.webshop-box-container ul li {
	cursor: pointer;
}
.webshop-box-container h3 {
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	color: #4b4b4b;
	margin-top: 6px;
	letter-spacing: 0.7px;
	text-shadow: 0 1px 0 #ffffff;
}

.webshop-box-items:first-letter {text-transform: capitalize;}

.webshop-box-top{
	background: transparent url(/img/shop/webshop-box-bg-top.png) no-repeat left top;
	height:10px;
	position: relative;
}

.webshop-box-tile {
	width: 280px;
	min-height:280px;
	display:inline-block;
	background: transparent url(/img/shop/webshop-box-bg-tile.png) repeat-y left top;
	position: relative;
}
.webshop-box-image {
	width: 270px;
	height: 152px;
	margin: -5px 5px 0 5px;
	overflow: hidden;
	float: left;
}

.webshop-box-content {
	padding: 0 24px;
	margin-top:160px;
}
.webshop-item-description {
	display: block;
	width: 270px;
	height: 152px;
	position: absolute;
	top:-5px;
	left: 5px;
}
.webshop-item-description div{
	color: #333333;
	text-shadow: 0 0 1px #ffffff;
	font-family: arial;
	font-size: 13px;
	margin: 19px;
}

#webshop-item-description-ethereal div{
	color: #000000;
	text-shadow: 0 0 1px rgba(255,255,255,0);
	font-family: arial;
	font-size: 13px;
	margin: 19px;
}

.webshop-box-footer {

	padding-left: 100px;
	padding-top: 13px;

	width: 180px;/*280px;*/
	height: 51px;/*64px;*/
	background: transparent url(/img/shop/webshop-box-bg-footer.png) no-repeat left top;
}

.webshop-box-btn-buy {
	background: transparent url("/img/shop/webshop-box-buttons-v03.png") no-repeat left 0px;
	color: #333333;
	width: 91px;
	height: 35px;
	border: 0px;
	display:block;
	float:left;
}
/**/
.webshop-box-btn-buy:hover {
	background-position: left -36px;
}

.webshop-box-btn-buy:active {
	background-position: left -72px;
}

.webshop-box-btn-buy:disabled {
	background-position: left -108px;
}
/**/

.webshop-groups-eums {
	background: transparent url("/img/shop/banner-s001-v001.jpg") no-repeat left top; 
	height: 220px;
	cursor:pointer;
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
	padding: 0;
}

.webshop-banner-link {
    display: block;
    height: 100%;
    width: 100%;
    border: 0px;
}

.webshop-box-price-container {
	display: block;
	width: 79px;
	height: 35px;
	float:left;
	margin-top: 0px;
	text-align: center;
	padding-top: 4px;
	background: transparent url("/img/shop/webshop-box-buttons-v03.png") no-repeat -92px 0px;
}
.webshop-box-price-value {
	font-family: 'Oswald', sans-serif;
	color: #0d9b00;
	font-size: 18px;
	font-weight: 400;
	display: block;
	float:right;
	margin-top: 0px;
	margin-right: 3px;
}
.webshop-box-price-currency {
	background: transparent url("/img/shop/webshop-box-buttons-v03.png") no-repeat -144px -45px;
	width: 17px;
	height: 10px;
	margin-top: 5px;
	margin-right: 10px;
	display: block;
	float:right;
}
.webshop-item-description-close {
	width: 38px;
	height: 18px;
	position: absolute;
	bottom: -19px;
	left: 50%;
	margin-left: -19px !important;
	cursor: pointer;
	background: transparent url(/img/shop/webshop-box-description-close.png) no-repeat left top;
}

.starter-pack-footer-buttons{
	margin: 5px auto;
	width:263px;
}