/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/roboto-v18-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Roboto Black'), local('Roboto-Black'),
       url('fonts/roboto-v18-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v18-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v18-latin-900.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v18-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v18-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/montserrat-v12-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
       url('fonts/montserrat-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/montserrat-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/montserrat-v12-latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts/montserrat-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/montserrat-v12-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}
*{
	font-family: 'Roboto', sans-serif;
}

body {
	background-color:#333;
	margin: 0px;
	overflow: hidden;	
	font-size:9pt;
}
*:focus{
	outline:none;
}
.link{
	text-decoration:underline;
	cursor:pointer;
}
h1{
	color:#fafafa;
	font-size:1.3em;
	font-weight:bold;
	background:#444;
	padding:0.8em 1em;
	margin:0em;
}
h2{
	padding:0.4em 0.8em;
}
#filter {
	border:0.1em #997d73 solid;
	border-radius:4px;
	background:#333;
	background:#f0f0f0;
	color:#444;
	font-size:1em;
	padding:0.3em;
	width:100%;
	outline:none;
}
a{
	color:#fafafa;
}
.note{
	font-size:0.9em;
	line-height:1em;
	font-weight:normal;
	color:#aaa;
}
.settings * span.note{
	color:#000;
	opacity:0.7;
}
#searchbox,#menubox,#header,#BoxView,#BoxCollectionView,#detailsBox,#massacreBox,#FightInfobox,{
	-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.6);
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.6);
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28) !important;
}
#details, #massacre {
	opacity:0;
	width:40%; 
	margin:0em auto 0em auto;
	position:fixed;
	top:0em;
	bottom:0em;
	right:-100%;
	font-size:1.1em;
	z-index:3;
	padding:0em 0em 0em 6em;
	transition-timing-function: ease;
	transition: right 0.4s,  opacity 0.4s;
	
}
#detailsBox, #massacreBox{
	position:relative;
	margin:0em auto;
	height:100%;
	background:#f5f5f5;
	color:#eee;
	width:100%;
	background-image:url(images/bg.jpg);
}
#detailsText, #massacreBoxes{
	z-index:0;
	padding:0em 0em 2em 0em;
	color:#686868;	
	position:absolute;
	top:4.55em;
	bottom:0em;
	right:0em;
	left:0em;
	overflow-y:auto;
	background:transparent;
}
#detailsText h2, #massacreBox h2{
	margin:0.4em 0.1em 0.4em 0.1em;
	color:#FFFF99;
}
#detailsText hr, #massacreBox hr , .blogpost * hr{
	margin:1em 0.6em 0em 0.6em;
	opacity:0.5;
	border: 1px dotted #795548;
	border-bottom-width:0em;
	clear:both;
}
#detailsText img ,.blogpost * IMG{
	border-radius:3px;
}
#detailsText p{
	margin:0.4em 1em 0.4em 1.6em;
}
#detailsText a, .txt a, li a{
	color:red;
}
#detailsText p.source, .source{
	margin:0.4em 1em 0.4em 1em;
	text-align:right;
	font-size:0.8em;
	color:#888;
}
#detailsText p.source a, .source a{
	color:red;
}
#detailsText IMG.fullWidth{
	width:100%;
}
#detailsText IMG.Gallery{
	width:24%;
	min-width:11em;
}
#detailsText ul{
	margin:0.4em 1em 0.4em 0em;
}
#detailsText li{
	margin:0em 1em 0em 0em;
	list-style-type:circle;
}
#detailsText a{
	margin:0em;
	padding:0em;
}
#takeAPeek, #stopPeeking{
	color: #cc0;
    margin: 0.4em;
    display: inline-block;
    padding: 0.4em 1em;
    border-radius: 0.4em;
    background: #444;
    box-shadow: 0 2px 0 1px #000;
	transition:all 0.2s ease;
	cursor:pointer;
}
#stopPeeking{
	display:none;
}

#takeAPeek:hover{
    box-shadow: 0 3px 1px 1px #000;

}
#boxName{
	position:absolute;
	bottom:1.2em;
	left:0.5em;
	right:0.5em;
	display:block;
	text-align:center;
	font-weight:bold;
	font-size:1.1em;
	z-index:4;
	text-shadow: 2px 2px #444;
	text-shadow: -1px 1px 1px #000, 1px 1px 1px #000, 0 0px 30px rgba(255,255,205,0.7);
	opacity:1;
	transition-timing-function: ease;
	transition: opacity 0.4s;
}
#mDetails, #GameDetails, #download{
	transition-timing-function: ease;
	transition: opacity 0.4s;
}
.new{
	background:#FFFF66;
	border-color:#CC0000;
	border-width:0.1em;
	border-style:solid;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-size:0.6em;
	text-transform: uppercase;
	color:#444;
	padding:0.2em 0.4em;
	float:right;
	font-weight:bold;
}
.rank{
	display:inline-block;
	vertical-align:bottom;
	margin:0em -3em 0em 0em;
	opacity:0.8;
	background:#FFFF66;
	border-color:#CC0000;
	border-width:0.1em;
	border-style:solid;
	border-bottom-width:0em;
	border-left-width:0em;
	-webkit-border-top-right-radius: 10px;
	-moz-border-top-right-radius: 10px;
	border-top-right-radius: 10px;
	font-size:0.8em;
	color:#222;
	padding:0.4em 0em;
	font-weight:bold;
	width:3em;
	height:1em;
	text-align:center;
	z-index:2;
}
.startBoxFight{
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	padding:0.6em;
	background:#222;	
	background:#E6E600;
	border:0.2em solid #fff;
	width:8em;
	vertical-align:middle;
	text-align:center;
	display:block;
	margin:0em auto 0em auto;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.6);
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.6);
	cursor:pointer;
}
.startBoxFight:hover{
	-webkit-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.6);
	box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.6);
}
#back2Overview:hover,
.flip:hover,
div:NOT(#back2Overview) IMG.icon:hover{
	background-color:#fff4;
	border-radius:2em;
}
.icon,#userSignIn, #usrPic,.flip{
	cursor:pointer;
	padding:0.9em;
	margin:0.2em;
	width:2.0em;
	vertical-align:middle;
	background-color:#fff0;
	transition:all 0.2s ease !important;
}
#usrPic{
	width:2em;
}
#SignInGFX{
	cursor:pointer;
	vertical-align:middle;
	height:2.5em;
}
.usrPic{
	width:2.0em;
	background:#fff;
	vertical-align:middle;
	border-width:0.1em;
}
.commentPic IMG.usrPic{
	width:3em;
	border-width:0.1em !important;
	border-radius:100px !important;
}
.commentPic{
	padding:1em;
	vertical-align:top;
	width:4em;
}
.commentUser{
	padding:0.5em 0em 0em 0em;
}
.commentDate{
	text-align:right;
	padding-right:1em;
}
.commentTxt, .BlogCommentTxt{
	padding:0em 1em 1em 0em;
	color:#ccc;
	line-height:14px;
}
.BlogCommentTxt{
	color:#444;
}
.commentTxt B {
	color:#ddd;
}
.commentTxt I {
	color:#eee;
}
.editDetails{
	background:transparent;
	border:1px dotted #888;
	color:#686868;
	padding:0.5em;	
	width:99%;
	margin-top:0.3em;
	margin-left:-0.5em;
}
.commentTxt > textarea.editDetails, .BlogCommentTxt > textarea.editDetails{
	height:3.8em;
	resize: vertical;
}
.flip{
	border-radius: 0em;
	padding:0.2em;
	opacity:0.8;
	width:3em;
	background-color:#fff0;
	transition:all 0.2s ease;
}
.flip:hover{
	opacity:1;
}
#userSignIn, #usrPic, .usrPic{
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	border:0.2em solid #fff;
	padding:0em;
}
#header{
	position:fixed;
	top:0em;width:100%;
	height:5em;
	background:#333;
	z-index:2;
}
#BoxUp,#BoxDown{
	position:fixed;
	bottom:55%;
	z-index:4;
	display:none;
	transition: right 0.4s ease, bottom 0.2s ease;
}
#BoxUp{
	right:1.5em;
}
#BoxDown{
	left:1.5em;
}
#BoxView, #BoxCollectionView{
	display:none;
	position:absolute;
	top:0.6em;
	background:#555;
	border:0.1em solid #444;
	z-index:5;
}
#BoxCollectionView {
	background:#fff;
	border:0.1em solid #eee;
	box-shadow: 0 1px 8px rgba(0,0,0,.3);
	padding:0em 0em 1em 0em;
}
#BoxView{
	left:3.2em;
}
#BoxCollectionView{
	right:0em;
	z-index:9;
}
#BackToOverview{
	margin-left:0em !important;
	font-weight:bold;
}
#BackToOverview,
#BoxView p, #CurrentView p, #SingleView p, #CurrentFilter p, #CurrentCollectionView p, #BoxCollectionView p span{
	color:#000;
	opacity:0.5;
	margin:0em 0em 0em -0.5em;
	padding:0.5em 0.5em;
	font-size:1.3em;
}
#BackToOverview,
#CurrentView p{
	color:#fff;
	opacity:0.87;
}
#BoxCollectionView p{
	text-align:left;
	padding:0.4em 0.5em;
	color:#fafafa;
	margin:0em;	
}
#BoxView p, #CurrentFilter p, #CurrentCollectionView p, #BoxCollectionView p.Option{
	cursor:pointer;
}
#CurrentView p {
	cursor:default;
}
#BoxCollectionView p{
	cursor:default;
}
#BackToOverview,
#BoxView p, #BoxCollectionView p{
	padding:0.4em 2.0em 0.4em 1.5em;
}
#CurrentView p:hover {
}
#BoxCollectionView p.Option:hover{
	background:#f5f5f5;
	color:red;
}
#BackToOverview,
#CurrentView, #SingleView, #CurrentFilter, #CurrentCollectionView{
	padding:1em 0em;
}

#leftBox, #rightBox{
	display:none;
	position:fixed;
	top:35%;
	bottom:35%;
	width:50%;
	cursor:pointer;
	opacity:0;
	transition-timing-function: ease;
	transition: opacity 0.2s;
	z-index:2;
	//background: rgb(255,255,255);
	//background: radial-gradient(circle, rgba(255,255,255,1) 37%, rgba(9,118,121,0) 49%);
}
#leftBox{
	left:0%;
}
#rightBox{
	right:0%;
}
#leftBox:hover, #rightBox:hover{
	//opacity:0.8;
}
#BoxLeftName, #BoxRightName{
	width:45%;
}
#BoxLeftName{
	text-align:right;
}
#BoxRightName{
	text-align:left;
}
#BoxLeftName p, #BoxRightName p{
	padding:0em;
	margin:0em;
}
#idle,#idleRight,#idleLeft{
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	width:56px;
	height:105px;
	margin-top:-52px;
	display:none;
	opacity:0;
	transition: opacity 0.4s ease, left 0.4s ease;
}
#idle{
	margin-left:-28px;
	z-index:0;
}
#idleRight{
	margin-left:122px;
	z-index:1;
}
#idleLeft{
	margin-left:-178px;
	z-index:1;
}
#greyout {
	display:none;
	position:fixed;
	top:0em;
	left:0em;
	width:100%;
	height:100%;
	background-color:#222;
	opacity:0;
	z-index:4;
	transition: opacity 0.3s ease;
}
#scoreBox1, #MyScoreBox1{
	transition-timing-function: ease;
	transition: height 0.3s;
	height:6px;
}
#scoreBox0:hover, #scoreBox1:hover, #MyScoreBox0:hover, #MyScoreBox1:hover{
	height:20px;
}
#scoreBox, #scoreBox0, #MyScoreBox0, #scoreBox1, #MyScoreBox1, .battles{
	margin:0em 0em 0em auto;
	padding:0em;
	background:#E60000;
	width:100%;
	max-width:20em;
	overflow:hidden;
	transition-timing-function: ease;
	transition: height 0.2s;
	height:6px;	
}
#scoreBox, .battles{
	margin:0em 0em 0em auto;
	padding:0em;
	width:100%;
	background:#ccc;
	max-width:20em;
	overflow:hidden;
	transition-timing-function: ease;
	transition: height 0.2s;
	height:6px;	
}
.battles{
	height:8px;
	margin:0em;
}
#scoreBox0, #MyScoreBox0, .battles{
	float:right;
	text-align:right;
}
#scoreBox, #scoreBox1, #MyScoreBox1{
	float:left;
	text-align:left;
}

#scoreBox, #scoreBox0, #scoreBox1, #MyScoreBox0, #MyScoreBox1, .battles{
	border:1px solid black;
}
#scoreBox, #scoreBox0, #scoreBox1{
	border-bottom-width:0px;
}
#score0, #MyScore0, #score1, #MyScore1{
	border:0px solid #fff;
	margin:0em;
	padding:0em;
	display:block;
	height:100%;
	width:0px;
	background:#00A600;
	transition-timing-function: ease;
	transition: width 0.4s;
}
.ScoreWon, .ScoreLost, .battlesWon{
	border:0px solid #fff;
	margin:0em;
	padding:0em;
	display:inline-block;
	height:100%;
	width:0px;
	transition-timing-function: ease;
	transition: width 0.4s;
	//border-radius:5px;
}
.ScoreWon{
	background:#00A600;
	float:left;
	//border-right-width:1px;
	//padding-left:-1px;
	border-right-color:#fff;
	//border-top-left-radius:5px;
	//border-bottom-left-radius:5px;
}
.ScoreLost{
	background:#E60000;
	background:#ccc;
	background-image:url(images/score.gif);
	float:left;
	//border-right-width:1px;
	//padding-left:-1px;
	border-right-color:#fff;
	//border-top-right-radius:5px;
	//border-bottom-right-radius:5px;
}
#score0, #score1{
	//background:#006800;
}
#score0, #MyScore0{
	float:right;
	border-left-width:2px;
}
#score1, #MyScore1{
	float:left;
	border-right-width:2px;
}
.battlesWon{
	float:left;
	border-right-width:1px;
}
#gallery{
	position:fixed;
	background:#fff;
	width:100%;
	top:5em;
	bottom:0em;
	display:block;
	padding:0em 0em;
	right:0em;
	left:0em;
	overflow-y:scroll;
	overflow-x:hidden;
	text-align: left;
	z-index:0;
	opacity:1;
	transition-timing-function: ease;
	transition: opacity 0.4s;
}
#about{
	margin:0em 0em 0em 0em;
}
p.about{
	font-size:1.1em;
	text-align:left;
}
#collection, #wishlist, #leftovers,#queue{
	padding:15px 20px 15px 10px;
	margin-top:3.6em;
}
#collection, #wishlist, #leftovers,#queue, .settings, .blogpost{
	text-align: justify;
	text-justify: inter-word;
}
#collection, #wishlist, #leftovers,#queue, .settings, .blogpost{
	margin-bottom:3.6em;
}
.settings, .blogpost{
	padding:5px 20px 15px 20px;
	font-size:1.1em;
}
.newOverview{
	display:inline-block;
	vertical-align:bottom;
	margin:-0.3em -3.8em 0em 0em;
	opacity:0.9;
	background:#FFFF66;
	background:url(images/bgUpdate.gif);
	border-color:#CC0000;
	border-width:0.2em;
	border-style:solid;
	border-bottom-width:0em;
	border-left-width:0em;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-top-right-radius: 5px;
	font-size:0.6em;
	color:#222;
	padding:0.4em 0.4em;
	font-weight:bold;
	width:3em;
	height:1em;
	text-align:center;
	z-index:2;
}
.OverviewBox{
	cursor:pointer;
	transition: transform .2s ease-in-out, filter .2s ease-in-out;
	transition-delay: 0.0s;
	box-shadow:0 0px 0px 0px #fff;
	/*
	filter:drop-shadow(1px 1px 0px #fff)
			drop-shadow(1px 2px 0px #fff)
			drop-shadow(1px 3px 0px #fff)
			drop-shadow(1px 4px 0px #fff);
			*/
}
.OverviewBox, .separator, .OverviewBoxText{
	position:relative;
	display:inline-block;
	z-index:2;
}
.OverviewBoxText p{
	margin:0.4em 2em;
	color:#F5F5F5;
	font-size:1.1em;
	word-spacing:0px;
}
.OverviewBox:hover, div.OverviewBox:focus {
	transform: translate(0,-0px) scale(1.09);/* rotate3d(1, 1, 1, 5deg);*/
	z-index:8;
	/*
	padding-right:10px;
	margin-right:-10px !important;
	padding-bottom:10px;
	margin-bottom:-10px !important;
	*/
	//box-shadow:0 6px 6px 2px rgba(0,0,0,0.9);
	filter:drop-shadow(0 6px 6px rgba(0,0,0,0.9));
}

/*
.OverviewBox:hover, div.OverviewBox:focus {
  position: relative;
  display: inline-block;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  persepctive: 1000px;
  margin: 20px;
  margin-top: 50px;
}
.OverviewBox:hover{
  transform: rotateY(-40deg);
  height: 350px;
  width: 250px;
  background-color: black;
}
.OverviewBox:hover:before {
  content: "";
  top: -15px;
  position: absolute;
  width: 50px;
  height: 375px;
  background-color: grey;
  transform: translateX(215px) translateY(2.7px) rotateY(55deg)
}*/
#QueueParade DIV DIV IMG.parcel{
	opacity:0.08;
	transition:opacity 0.4s ease;
}
#QueueParade DIV:hover IMG.parcel{
	opacity:1;
}
#WishlistParade DIV DIV IMG{
	opacity:0.0;
	transition:opacity 0.4s ease;
}
#WishlistParade DIV:hover IMG{
	opacity:1;
}
#wishlist DIV, #leftovers DIV,#queue DIV{
	cursor:default;
}
.OverviewBox IMG{
	padding:0em;
	margin:0em;
	border:collapse;
	vertical-align:bottom;
}
.separatorRanking{
	opacity:1;
	position:relative;
	top:0px;
	margin-top:2px;
	margin-bottom:2px;
	left:10px;
	padding-right:22px;	
	z-index:0;
}
.scoreBox{
	width:100%;
	border-radius:3px;
	height:12px;
	background:#ccc;
	background:#E60000;
	/*box-shadow:0 3px 6px -2px rgba(0,0,0,0.6),0 2px 3px 5px rgba(255,255,255,0.9);*/
	margin-bottom:8px;
	margin-top:4px;
	overflow:hidden;
}
.separator{
	width:60px;	
	display:inline-block;
	border-radius:3px;
	background:#fafafa;
	height:130px;
	margin:0em 0px 10px 10px;
	padding:0em;
	border:1px solid #ccc;
	color:#999;
	opacity:0.4;
	transition:opacity 0.2s ease;
}
.separator:hover{
	opacity:1;
}
.septext{
	font-family:monospace;
	transform-origin:50% 100%;
	transform:rotate(-20deg);
	margin-top:-10px;
	word-wrap:break-word;
	font-size:1.2em;
	font-weight:bold;
	width:160px;
	height:300px;
	overflow:hidden;
	/text-transform: lowercase;
	line-height:80%;
	text-align:center;
}
#Ranking{
	display:none;
	position:absolute;
	top:0em;
	bottom:0em;
	height:100%;
	z-index:2;
}
#RankHeader{
	z-index:9;
}
#RankHeader, #CollectionHeader{
	position:absolute;
	right:0em;
	height:5em;
	text-align:right;
}
#RankHeader{
	top:0em;
}
#CollectionHeader{
	margin-top:-7em;	
}
#rankedBoxes{
	position:fixed;
	top:4.1em;
	bottom:0em;
	display:block;
	padding:4em 2em;
	right:0em;
	left:0em;
	overflow-y:scroll;
	text-align: justify;
	text-justify: inter-word;
	z-index:0;
	opacity:0;
	transition-timing-function: ease;
	transition: opacity 0.4s;
}
.ranking1st IMG, .ranking2nd IMG, .ranking3rd IMG, .ranking4ff IMG{
	padding:0em;
	vertical-align:bottom;
	margin:0em;
}
.ranking1st IMG{
	width:12em;
}
.ranking2nd IMG{
	width:10em;
}
.ranking3rd IMG{
	width:8em;
}
.ranking4ff IMG{
	width:6em;
}
.ranking1st, .ranking2nd, .ranking3rd, .ranking4ff{
	margin:0em;
	vertical-align:bottom;
	cursor:pointer;
	transition: transform .2s ease-in-out;
	transition-delay: 0.1s;
	background:#000;
}
.ranking1st:hover, .ranking2nd:hover, .ranking3rd:hover, .ranking4ff:hover{
	-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.8);
	-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.8);
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.8);
	z-index:1;
	position:relative
}
.ranking1st:hover{
	transform: translate(0,-12.5%) scale(1.25);
}
.ranking2nd:hover{
	transform: translate(0,-25%) scale(1.5);
}
.ranking3rd:hover{
	transform: translate(0,-43.75%) scale(1.875);
}
.ranking4ff:hover{
	transform: translate(0,-75%) scale(2.5);
}
#bgFight,#bgFightCover,#LoadingFight{
	width:100%;
	height:100%;
	position:fixed;
	top:0em;
	left:0em;
}
#fightstats{
	color:#f00;
	font-weight:bold;
	text-align:center;
	width:100%;
	position:relative;
	top: calc(10% + 3.5em);
	display:block;
	text-shadow:1px 1px #000, -1px -1px #000, -1px 1px #000, 1px -1px #000;
}
#bgFight{
	opacity:0;
	background-image:url(images/fight/BG1.gif);
	background-position:50% 50%;
	image-rendering:pixelated;
	background-size:cover;
	transition-timing-function: ease;
	transition: opacity 0.4s;
	box-shadow:0 0 80px 45px #000 inset;
}
#bgFightCover{
	opacity:0;
	background-image: url(images/bg/bg7.png);
	z-index:1;
	transition-timing-function: ease;
	transition: opacity 0.4s;
}
#LoadingFight{
	width:100%;
	height:100%;
	position:fixed;
	top:0em;
	left:0em;
	display:none;
	opacity:0;
	background-image:url(images/fight.png);
	background-position:50% 10%;	
	background-repeat:no-repeat;
	transition-timing-function: ease;
	transition: opacity 0.4s;
	z-index:1;
	background-size:20em auto;
	filter:drop-shadow(0px 4px 8px black);
}
#skipFight{
	color:#fff;
	font-weight:bold;
}
#bg{
	width:100%;
	height:100%;
	position:fixed;
	top:0em;
	left:0em;
	background:#101010;
	background-size:cover;
	background-position:50% 50%;
	image-rendering:pixelated;
	filter:blur(3px) saturate(1.1) contrast(0.75) brightness(1.2);
	transition:background-image 0.1s ease, opacity 0.4s;
	//box-shadow:0 0 150px 75px #000 inset;
}
.ContentPixDetails{
	width:100%;
	border-radius:3px;
	cursor:pointer;
	box-shadow:0 1px 2px 0 #444;
}
#boxcontentcontainer{
	position: absolute;
	top:0;
	left:0;
    padding: 0em;
    z-index: 4;
    display: none;
	background-color:#000a;
	backdrop-filter: blur(3px);
	width:100%;
	height:100%;
}
#boxcontent{
	position: absolute;
	top:0;
	left:0;
    padding: 0em;
    width: calc(100% - 4em);
    height: calc(100% - 10em);
	margin:2em 2em 8em 2em;
}
#boxcontentpix{
	background-image:url(images/idleNew.gif);
	background-position:50%;
	background-repeat:no-repeat;
}
#boxcontentpix,#innerBox{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}
#box{
	cursor:-webkit-grab;
	position:absolute;
	margin:0em;
	padding:0em;
	top:0em;
	bottom:0em;
	left:0em;
	right:0em;
	z-index:0;
	overflow:hidden;
	transition-timing-function: ease;
	transition: opacity 0.4s;
	z-index:2;
	background-image:url("images/bg/bg7.png");
	box-shadow: 0 0 80px 45px #000 inset;
}
#rankingInfo{
	display:none;
}
#massacreBoxes DIV.lost, #massacreBoxes DIV.won, #massacreBoxes DIV.open{
	margin:1em 0.4em;
}
#massacreBoxes DIV{
	display:inline-block;
	overflow:hidden;
	padding:0em;
}
#massacreBoxes IMG{
	cursor:pointer;
	padding:0em;
	margin:0em;
	display:block;
	height:120px;
}
DIV.open IMG{
	opacity:0.8;
}
DIV.lost, DIV.openR{
    border-bottom:0.4em solid rgba(255,0,0,1);
}
DIV.won, DIV.openL{
    border-bottom:0.4em solid rgba(0,255,0,1);
}
#wishlist,#collection,#leftovers,#queue, .settings, .blogpost{
	background:#fff;
	border-radius:2px;
	box-shadow: 0 1px 8px rgba(0,0,0,.3);
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
}
#gallery{
	transition: opacity 0.4s ease, padding-left 0.4s ease;
	padding-left:2em;
	padding-right:2em;
	width:auto;
	background:#fffaf1;
	background-image:url(images/bg.jpg);
}
.OverviewBox  IMG{
	border-radius:2px;
}
.txt{
	color:#686868;
	color:#666;
	box-shadow:none !important;
	font-size:1em;
}
.h1, h2{
	font-size:1.3em;
	font-weight:900;
	color:#000 !important;
	opacity:0.87 !important;
	text-transform:capitalize;
	font-family:'Montserrat';
	display:block;
	margin-bottom:0.4em;
	line-height:95%;
}
.h1{
	margin-right:2em;
}
#header{
	background:#ddd;
	background:#795548;
	box-shadow: 0 1px 8px rgba(0,0,0,.3);
}
#CurrentViewName{
	font-weight:900;
}
p.about{
	margin-left:1em;
}
p.about span a, a.link, span.link{
	color:red;
}
#menu{
	/background:#f5f5f5 !important;
	background:transparent;
	background-image:url(images/bg.jpg);
	border:none !important;
	position:fixed;
	top:5em;
	bottom:0em;
	height:auto;
	left:-34em;
	font-size:1em;
	z-index:2;
	padding:0em;
	margin:0em;
	transition: opacity 0.2s ease, left 0.4s ease;
	overflow-y:hidden;
}
#menubox{
	/background:#f5f5f5 !important;
	background:transparent;
	background-image:url(images/bg.jpg);
	box-shadow:none !important;
	position:relative;
	top:0em;
	bottom:0em;
	height:auto;
	max-height:100%;
	color:#eee;
	width:15em;	
	margin:0em;	
}
#menuPanel{
	/background:#fffaf1 !important;
	background:transparent;
	background-image:url(images/bg.jpg);
	height:5em;
	clear:both;
}
#menu:focus,#menu:hover{
	overflow-y:auto !important;
	overflow-x:hidden !important;
}
#menuPanel p {
	margin:0em 0.3em;
	opacity:0.75;
	transition:opacity 0.2s ease;
	border-radius:5px;
}
#menuPanel p .menuItem{
	color:#000;
	font-size:1.2em;
	vertical-align:middle;
}
#menuPanel p:hover{
	background:#e7e7e7;
	cursor:pointer;
	opacity:1;
}
#menuPanel p.selected, #BoxCollectionView p.selected{
	background:#eee;
	opacity:1;
}
#menuPanel p.selected SPAN, #BoxCollectionView p.selected SPAN{
	color:#795548;
	font-weight:900;
	opacity:1;
}
#menuPanel hr {
	width:80%;
	opacity:0.5;
	border: 1px dotted #795548;
	border-bottom-width:0em;
}
#collection_box,#queue_box,#wishlist_box,#leftovers_box, #blog_box, #settings_box, #contact_box, #tipjar_box, #ThreeDBB_box{
	display:none;
	opacity:0;
	transition: opacity 0.2s ease;
	position:relative;	
	font-size:1.1em;
}
#collection_box{
	opacity:1;
}
DIV.OverviewBoxText{
	margin:0em 0em 2em 0em;
}
.OverviewBoxText p{
	margin:0.4em 2em;
	color:#000;
	opacity:0.87;
	font-size:1.1em;
}
.OverviewBoxText p a{
	color:red;
}
#options{
	position:fixed;
	top:0.4em;
	right:1em;
	width:21.5em;
	z-index:3;
	text-align:right;
	transition: right 0.4s ease;
}
#massacreHeader, #detailsHeader{
	padding-right:2em;
	padding-top:1.25em;
	padding-bottom:1.05em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom:0.2em solid transparent;
	background:#f5f5f5;
	background:#795548;
	color:#000;
	color:#f5f5f5;
	box-shadow: 0 1px 8px rgba(0,0,0,.3);
	font-size:1.2em;
}
div.BlogComment, div.comment, .blogpost, #moreblogposts, #allblogposts{
	margin:0.6em 1em;
	background:#fafafa;
	background:#fff;
	border-radius:2px;
	box-shadow: 0px 5px 15px -5px rgba(0,0,0,0.75);
	box-shadow: 0 1px 8px rgba(0,0,0,.3);
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
	transition: box-shadow 0.2s ease;
}
div.BlogComment{
	background:#f5f5f5;
	margin:0.4em 0em;
	font-size:0.95em;
}
.blogpost, #moreblogposts, #allblogposts{
	padding-top:1.6em;	
	margin:0.6em 0em 2em 0em;
	text-align:left;
}
#moreblogposts, #nomoreblogposts, #allblogposts{
	padding:0.2em 0em;
	text-align:center;
	color:#666;
	font-weight:900;
}
#nomoreblogposts{
	opacity:0.5;
}
#moreblogposts, #allblogposts{
	cursor:pointer;
}
#moreblogposts:hover, .blogpost:hover, .blogpost:focus, #allblogposts:hover{
	box-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.blogcomments, .noblogcomments{
	margin:1.4em 0em 1em 0em;
	padding:0.5em 0em;
	background:#f5f5f5;
	border-radius:2px;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
	text-align:center;
	color:#666;
	font-weight:900;
	cursor:pointer;
	font-size:0.9em;
}
.noblogcomments{
	background:#fff;
}
.blogcomments:hover{
	box-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.blogCommentsBox{
	max-height:400px;
	overflow-y:auto;
	overflow-x:hidden;
	padding:0em 0.1em;
	margin-bottom:0.4em;
	margin-top:1.4em;
}
#settings_box, #blog_box, #contact_box, #tipjar_box, #ThreeDBB_box{
	margin:2em auto 2em auto;
	max-width:800px;
}
#WishlistParade, #LeftoversParade, #QueueParade{
	margin-top:5px;
}
#BoxParade{
	//display:none;
}
#BoxParade, #WishlistParade, #LeftoversParade, #QueueParade{
	word-spacing:-4px;
}
#BoxParade IMG{
	transition:all 0.3s ease;
}
label{
	font-weight:900;
}
div.dates{
	color:#000;
	opacity:0.3;
	margin:0em 3em 0.3em 0em;
	transition: opacity 0.2s ease;
	font-size:0.8em;
}
div.dates:hover{
	opacity:0.8;
}
#addNewBlogPost{
	background-color:#d23f31;
	background-image:url(images/ui/ic_create_white_48dp);
	background-size:2.2em;
	background-position:50% 50%;
	background-repeat:no-repeat;
	border-radius: 100px;
	height:56px;
	width:56px;
	position:fixed;
	bottom:1.8em;
	right:3em;
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
	transition: box-shadow 0.2s ease;
	z-index:9;
	cursor:pointer;
}
#addNewBlogPost:hover{
	box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);
}
.button{
	display:inline-block;
	margin-top:1em;
	border-radius:10px;
	background:#c10000;
	color:#fafafa !important;
	text-decoration:none !important;
	font-weight:bold;
	font-size:1.2em;
	padding:0.4em 1em;
	box-shadow:0 4px 10px 0 rgba(0,0,0,0.4);
	cursor:pointer;
}
.button:hover{
	background:#d10000;
	box-shadow:0 4px 10px 2px rgba(0,0,0,0.6);
}
.sharebutton{
	float:right;
	margin-top:-1.6em;
	margin-right:-0.4em;
	opacity:0.4;
	cursor:pointer;
	transition:opacity 0.2s ease;
	font-size:9pt;
}
.sharebutton:hover{
	opacity:0.8;
}
.shareLink{
	padding:0em 0.2em;
	clear:both;
	height:0px;
	transition:height 0.2s ease;
	overflow:hidden;
}
.label{
	margin:0em;
	padding:0.1em 0.2em;
	text-align:right;
	font-size:0.8em;
	font-weight:bold;
	color:#888;
}
textarea.sharelink{
	resize: none;
	border:none;
	width:100%;
	margin:0em;
	color:#666;
	padding:0.4em 0em 0em 0em;
	text-align:center;
	background:#f0f0f0;
	border-radius:3px;
	font-size:1em;
	font-weight:bold;
	cursor:pointer;
	height:1.7em;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
}
textarea.sharelink:hover{
	box-shadow: 0 1px 8px rgba(0,0,0,.3);
}
#BoxParade img {
  opacity: 1;
  transition: opacity 0.5s;
  transition: all 0.5s;
}

#BoxParade img[data-src] {
  opacity: 0;
}



.media{
	display:inline-block;
	position:relative;
	color:#444;
	text-align:center;
}
.media img,
.media svg{
	width:2.5em;
	height:2.5em;
	margin:0 -2.1em 0.4em 0;
	position:relative;
	transition:all 0.1s ease;
	background:none;
	filter:drop-shadow(0px 0px 0px #0000);
}
.media img:hover,
.media svg:hover{
	transform:scale(1.3) rotate(5deg);
	transform-origin:50%;
	z-index:9;
	filter:drop-shadow(0px 3px 1px #0008);
}
.media{
	text-align:left;
}
.media span{
	display:block;
	text-align:left;
}
.media .mediaspacer{
	display:inline-block;
	width:2em;
}
svg{
	transform:rotate(-15deg);
	transform-origin:50%;
}
svg.icon{
	width:2.5em;
	height:2.5em;
}
svg.icon.media{
	margin:0 -2em 0 0;
}
svg g.line{
	stroke:#444;
	fill:transparent;
}
svg g.bg *.stroke{
	stroke:#fff;
	fill:transparent;
}
svg g.bg *.fill{
	fill:#fff;
	stroke:transparent;
}
svg g.bg *.fill.stroke{
	fill:#fff;
	stroke:#fff;
}