/*------------------------------------------------------------------------------------------------
Changes to Base CSS
------------------------------------------------------------------------------------------------*/
.container{
	width: 100%;
	height: 100%;
	min-width: 100%;
	margin-top: 0px;
	padding: 0px;
}

.contents{
	width: 100%;
	height: 94%;
    height: -moz-calc(100% - 55px);
    height: -webkit-calc(100% - 55px);
    height: calc(100% - 55px);
	margin: 0px;
	padding: 0px;
}

.navbar,
.page-title,
.page-header{
	margin: 0px;
	padding: 0px;
}

#wrap {
  min-height: 100%;
  height: 100% !important; 
  margin: 0;
}

#footer,
#push {
	display: none;
}

/*------------------------------------------------------------------------------------------------
Layout
------------------------------------------------------------------------------------------------*/
.game-window {
	border: solid 3px;
	width:100%;
	height: 90%;
    height: -moz-calc(100% - 36px);
    height: -webkit-calc(100% - 36px);
    height: calc(100% - 36px);
	margin-left:auto;
	margin-right:auto;
	
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

#bottom-row{
	padding:0px;
	margin: 0px auto;
	height: 80%;
	min-height: -moz-calc(100% - 120px);
    min-height: -webkit-calc(100% - 120px);
    min-height: calc(100% - 120px);
}

#screen-area{
	height: 100%;
	width: 75%;
	min-width: -moz-calc(100% - 300px);
    min-width: -webkit-calc(100% - 300px);
    min-width: calc(100% - 300px);
	min-width:;
	float:left;
	padding:0px;
	position:relative;
}

#window-content{
	height: 100%;
	width: 75%;
	position: absolute;
}

.canvas-container {
	height: 494px;
	width: 544px;
	z-index: 1;
	background-color:black;
	margin-left: auto;
	margin-right: auto;
}

#background-canvas {
    position: absolute;
    z-index: 1;
}

#units-canvas {
    position: absolute;
    z-index: 2;
}

#animation-canvas {
    position: absolute;
    z-index: 3;
}

#loading-text {
	color: red;
	font-size: x-large;
	position: absolute;
	z-index: 5;
}

#industry-canvases{
	float:left;
	margin-left:10%;
}

#industry-resources{
	float:right;
	margin-right:10%;
	min-width:300px;
}

#industry-container {
	height: 210px;
	width: 320px;
	z-index: 1;
	background-color:black;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
}

#industry-background{
	position: absolute;
	z-index: 1;
}

#industry-canvas{
	position: absolute;
	z-index:2;
}

#industry-constructs{
	position: absolute;
	z-index:3;
}

#industry-area{
	height: 95%;
}

.ind-resource-text{
	font-size: x-large;
}

.subscreen {
	width: 85%;
	position: absolute;	
	z-index: 0;
	background-color: #F5F5F5;
	padding: 10px;
}

.oracle-text {
	font-size: x-large;
}

#oracle-teaching{
	text-align: center;
	color: mediumblue;
}

#dragon-description{
	color: mediumblue;
	font-size: x-large;
}

#dragon-power{
	color: mediumblue;
	font-size: large;
}

#export-area {
	height: 100%;
	width: 75%;
	position: absolute;	
	z-index: 0;
	background-color: #F5F5F5;
	overflow: auto;
	padding: 10px;
	-webkit-user-select: text; /* webkit (safari, chrome) browsers */
    -moz-user-select: text; /* mozilla browsers */
    -khtml-user-select: text; /* webkit (konqueror) browsers */
    -ms-user-select: text; /* IE10+ */
}

#export-code{
	width: 100%;
	height: 70%;
}

.info-bar {
	border-bottom: solid 1px;
	height:20%;
	max-height: 120px;
	padding:3px;
}

#name-div{
	float:left;
	margin:0px auto;
	padding: 3px;
	width: 18%;
}

#title{
	font-size: x-large;
	color: mediumblue;
}

#versionheader{
	font-weight: bold;
}

#info-column1 {
	float:left;
	margin:0px auto;
	padding: 3px;
	width: 16%;
}

#info-column2 {
	float:left;
	margin:0px auto;
	padding: 3px;
	width: 30%;
}

#oracle-div {
    float:left;
    margin:0px auto;
    width: 20%;
    max-width: 120px;
    height: 100%;
}

.pref-column {
	padding: 0px;
	width: 16%;
	margin: 0px auto;
	float: right;
}

.menu-icon {
	margin: 1px;
	padding: 0px;
	float: right;
    background-color: #DFCBBD;
}

.menu-icon:hover {
    background-color: white;
    cursor:pointer;
}

/*------------------------------------------------------------------------------------------------
Crafting Area
------------------------------------------------------------------------------------------------*/
.gem-display {
	margin-left: auto;
	margin-right: auto;
	width:95%;
	line-height: 32px;
	margin-bottom:20px;
}

.gem-column {
	float:left;
	width: 50%;
}

#gem-move-amt{
	margin-top:10px;
}

#socketsection {
	margin-left: auto;
	margin-right: auto;
	width:95%;
	margin-bottom:20px;
}

#craftimage{
	margin-right:15px;
	float:left;
}
#sockets {
	padding-top:15px;
}

.socket {
	font-size: large;
}

#selectsocket0,
#selectsocket1,
#selectsocket2{
	width:100px;
}

/*------------------------------------------------------------------------------------------------
Shop Tabs - See http://www.my-html-codes.com/javascript-tabs-html-5-css3
------------------------------------------------------------------------------------------------*/
.shop {
	height: 100%;
	width: 100%;
	float:left;
	text-align: left;
	overflow-x: auto;
	overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
	padding: 1px;
	margin: 0px auto;
	background-color: #C5C5C5;
}

#shop-wrapper{
	height: 100%;
	width: 25%;
	max-width: 300px;
	float: left;
}

.shop-heading{
	margin-top:5px;
	font-weight: bold;
}

.tabs{
	margin-top:0px;
	height:55px;
}

.tabscontent{
	height: 100%;
}

.tabs > ul {
	margin: 0px;
	list-style:none;
	padding: 0px;
}

.tabs > ul > li{
	padding: 2px;
	padding-top:5px;
	margin: 3px;
	float:left;
	color:black;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius:4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px; 
	
	background: #DFCBBD;
}

.tabs > ul > li:hover{
	background: white; 
	cursor:pointer;
	color: #333;
}

.tabs > ul > li.tabActiveHeader{
	background: #F5F5F5;
	cursor:pointer;
	color: #333;
}

.tabscontent {
	padding:5px;
	background: #F5F5F5;
	margin:0;
	color:#333;
}

/*------------------------------------------------------------------------------------------------
Mage Area
------------------------------------------------------------------------------------------------*/
#mage-area {
	height: 100%;
	width: 75%;
	position: absolute;	
	z-index: 0;
	background-color: #F5F5F5;
	padding: 10px;
}

#fightingdesc,
#meditatingdesc,
#delvingdesc {
	margin-bottom:10px;
}

#magesmeditating,
#magesfighting,
#magesdelving{
	float: left;
	width:220px;
}

#imbue-buy-number{
	font-weight: bold;
}

/*------------------------------------------------------------------------------------------------
Menu
------------------------------------------------------------------------------------------------*/
.stat-heading {
	font-weight: bold;
	margin-top: 12px;
}

/*------------------------------------------------------------------------------------------------
Buttons
------------------------------------------------------------------------------------------------*/
.round-btn {
	padding: 2px 6px;
	color: black;
	border-radius: 20px;
    margin-bottom: 2px;
}

.round-btn:hover,
.round-btn:focus,
.round-btn:active,
.round-btn.active,
.open .dropdown-toggle.round-btn {
    color: #fff;
}

.oval-btn {
    padding: 2px 6px;
    color: black;
    border-radius: 20px;
    margin-bottom: 2px;
}

.oval-btn:hover,
.oval-btn:focus,
.oval-btn:active,
.oval-btn.active,
.open .dropdown-toggle.oval-btn {
    color: #fff;
    border-color: white;
}

.two-line-btn {
    width:100%;
    white-space: normal;
    padding: 2px 2px;
    color: black;
    border-radius: 10px;
    margin-bottom: 2px;
}

.two-line-btn:hover,
.two-line-btn:focus,
.two-line-btn:active,
.two-line-btn.active,
.open .dropdown-toggle.two-line-btn {
    color: #fff;
}

.unaffordable {
    opacity: .6;
}

.crafting-button {
	background-color: #428bca;
	display: inline;
}

.menu-button {
	margin-bottom: 12px;
	background-color: #428bca;
}

.menu-button:hover{
	background-color: #3276b1;
}

.dialog-button {
	margin-top: 4px;
	margin-bottom: 4px;
	background-color: #428bca;
}

.dialog-button:hover{
	background-color: #3276b1;
}

.dragon-button{
	min-width: 300px;
}

.blue-button {
	background-color: #428bca;
}

.blue-button:hover{
	background-color: #3276b1;
}

.shop-button {
	background-color: #5cb85c;
}

.shop-button:hover{
	background-color: #47a447;
}

.hireling-button {
	background-color: #f0ad4e;
	border-color: #eea236;
}

.hireling-button:hover{
	background-color: #ed9c28;
}

.upgrade-button {
	background-color: #5bc0de;
	border-color: #46b8da;
}

.upgrade-button:hover{
  color: #fff;
}

.special-upgrade-button {
	background-color: #d9534f;
	border-color: white;
}

.special-upgrade-button:hover{
  background-color: #d2322d;
  border-color: white;
}

.progress-upgrade-button {
	background-color: #DAA520;
	border-color: white;
}

.progress-upgrade-button:hover{
  background-color: #ed9c28;
  border-color: white;
}

.dragon-upgrade-button {
	background-color: #006600;
	border-color: white;
}

.dragon-upgrade-button:hover{
  background-color: #00BB00;
  border-color: white;
}

.spell-button {
	background-color: #5bc0de;
	border-color: #46b8da;
}

.spell-button:hover{
  background-color: #39b3d7;
  border-color: #269abc;
}

.mage-button {
	padding: 2px 6px;
	color: white;
	font-weight: 900;
	border-radius: 10px;
	background-color: brown;
	border-color: #46b8da;
}

.mage-button:hover {
  color: #fff;
  background-color: black;
  border-color: #269abc;
}

.gem-button {
	padding: 0px 5px;
	font-weight: 700;
	border-radius: 10px;
	background-color: #428bca;
	border-color: #46b8da;
	font-size: 180%;
}

.gem-button:hover {
  color: #fff;
  background-color: black;
  border-color: #269abc;
}

.defense-button {
	background-color: #d9534f;
	border-color: #d43f3a;
}

.defense-button:hover{
  background-color: #d2322d;
}

/*------------------------------------------------------------------------------------------------
Screen Elements
------------------------------------------------------------------------------------------------*/
p {
	margin-top: 1px;
	margin-bottom:1px;
}

img {
	max-width: 100%;
	min-width: 0px;
	height: auto;
}

#totalmages,
#total-alchemists,
#total-spirit-essence {
	font-size: x-large;
}

.mage-counter {
	font-size: large;
	display:inline;
}

.section-heading {
	font-size: x-large;
}

.tooltip {
	position: fixed;
}

.table > thead > tr > th {
	vertical-align: bottom;
	border-bottom: 2px solid black;
}

.panel-heading{
	font-size: 200%;
}

.gem-text{
	float: left;
	width: 190px;
	height: 32px;
}

.gem-pic{
	float:left;
}

/*------------------------------------------------------------------------------------------------
jQuery Dialogs
------------------------------------------------------------------------------------------------*/
#quarry-discovery{
	display: none;
}

/*------------------------------------------------------------------------------------------------
Other Classes
------------------------------------------------------------------------------------------------*/
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

.placeholder {
	visibility: hidden;
}

/*------------------------------------------------------------------------------------------------
Notifications
------------------------------------------------------------------------------------------------*/
.notifyjs-wrapper{
	z-index: 10 !important;
}

/*------------------------------------------------------------------------------------------------
Links
------------------------------------------------------------------------------------------------*/
#links{
	font-size: x-large;
	width:100%;
	margin: 0 auto;
	margin-top: 5px;
	float: left;
	height: 30px;
	text-align: center;
}