/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritence from `body` */
  background-color: #fff;
  border: 1px solid #fff;
}



/*
 * Base structure
 */

html,
body {
  height: 100%;
  /*background-color: #8b8d8c;*/
  background: radial-gradient(transparent, rgba(0,0,0,.5)), url(imgs/lines.png) 0% 0% no-repeat #8b8d8c;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 

   font-weight: 300;

}
body {
  color: #fff;
  text-align: center;
  /*text-shadow: 0 1px 5px rgba(0,0,0,.3);*/
}
h3{
	margin: 0px;
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  /*-webkit-box-shadow: inset 0 0 500px rgba(0,0,0,1);
          box-shadow: inset 0 0 500px rgba(0,0,0,1);*/
}
.site-wrapper-inner {

}
.cover-container {
	padding-top:55px;
	width:100%;
	height:100%;
}

/* Padding for spacing */
.inner {
 padding: 0px 15px;
}

.cryptimage{
	z-index: 1;
	width:100%;
	position: absolute;
}
.cryptimage h1{
	float:left;
	position: relative;
	z-index: 2;
	left:50px;
	letter-spacing: 2px;
	font-size:60px;
	top:30px;
	font-weight: bold;
	
}
.cryptimage img{
	position: fixed;
	display: block;
	bottom:0px;
	left:0;
	max-height: 90%;
	width:auto;
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */
    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;

}

.contents{
	position: relative;
	z-index: 3;
	height:100%;
	width:60%;
	float:right;
    display:table !important;

}
.contents .inner{
	display:table-cell;
    vertical-align:middle;
    text-align:center;
}

.common{
	background:#3a6e43;
	color:#c1d6c8;
}
.rare{
  background:#4f728e;
  color:#a1bdd1;
}

.basic{
background:#ccc7c2;
color:#111;
}
.basic h3{
color:#111 !important;
}

.legendary{
	background:#604472;
	color:#cab6db;
}

.exotic{
	background:#f1dd43;
	color:#fbf4b6;
}

.block{
	margin:0 auto;
	width:400px;
	min-height:150px;
	display:block;
	background-color:rgba(0,0,0,0.75);
	position: relative;
	top:0;
	left:0;
	text-align: left;
	-webkit-box-shadow: 0px 5px 20px rgba(0,0,0,.5);
          box-shadow: 0px 5px 20px rgba(0,0,0,.5);
          padding-bottom: 6px;
}
.block .header{
	width:100%;
	padding:10px;
	font-size:18px;
	display: block;
	overflow: hidden;

}
.block .header h4,.block .header h5{
margin:4px 0;}
.block .header h3{
	font-size: 24px;
	color:white;
	font-weight: bold;
}
.block .header h4{
	float:left;
	font-size: 20px;
}
.block .header h5{
	float:right;
	font-size: 20px;
	opacity: .4;
}

.block .message{
	padding:10px;
	font-style: italic;
	color:#b7b7b7;
	font-size: 16px;
}
.block .info{
	color:#57bb5e;
	padding: 0 10px;
	font-size:20px;
	display: block;
	overflow: hidden;
}
.block .info .name{
	float:left;
	display:block;
}
.block .info .cost{
	float:right;
	display:block;
}
.block .info .cost span{
	color:#fff;
	opacity: .6;
}

span.commonicon{
	background: url('imgs/icon.jpg') no-repeat;
	width:18px;
	height:18px;
	float: left;
	margin-top: 5px;
	margin-right: 8px;
	display: block;

}
a.decode{
	text-align: right;
	display: block;
	overflow: hidden;
	padding-top: 15px;
	width: 100%;
	opacity: .8
}
a.decode:hover{
	text-decoration: none;
	opacity: 1;
}
/*
 * Header
 */

.masthead{
 width:100%;	
 position:absolute;
 top:0%;
 z-index:2;
 /*height:50px;*/
 padding-bottom: 10px;
 background-color:rgba(50,50,50,0.6);
 border-bottom:4px solid #888;
 display:block;
 }
.masthead-brand {
  float:left;
  letter-spacing: 1px;
  padding-top:10px;
  display:none;
  font-style: italic;
  text-align: left;

}

.masthead-nav{
	float:right;
	margin-top:2px;
}
.masthead-nav > li {
  display: inline-block;
}
.masthead-nav > li + li {
  margin-left: 20px;
}
.masthead-nav > li > a {
  padding-right: 10px;
  padding-left: 0;
  font-size: 16px;
  color: #fff; /* IE8 proofing */
  color: rgba(255,255,255,.55);
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  background-color: transparent;
  border-bottom-color: #a9a9a9;
  border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
  color: #fff;
  border-bottom-color: #fff;
}



/*
 * Cover
 */

.cover {
 
}
.cover .btn-lg {
  padding: 10px 20px;
  font-weight: bold;
}


/*
 * Footer
 */

.mastfoot {
	position: absolute;
	z-index:3;
	background:black;
	bottom:0;
	width:100%;
  color: #999; /* IE8 proofing */
  color: rgba(255,255,255,.5);
  border-top:1px solid #444;
}
.mastfoot p{
	margin:0;
}
.mastfoot .inner{
	padding:3px 0 5px;
	font-size:12px;
}