*{
    box-sizing:border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body {
	margin:0;
	padding:0;
	background-color:black;
	text-align:center;
}
canvas {
    float:left;
    display:inline-block;
}
#interface{
    display:inline-block;
    background-color:#ccc;
    float:left;
    width:300px;
	position:relative;
}
#tab-pane-container{
	position:absolute;
}
#tab-container{
	margin-bottom:10px;
}
.tab{
	display:inline-block;
	padding:5px;
	border:1px solid black;
	cursor:pointer;
}
.tab.tab-selected{
	border-bottom:none;
	cursor:auto;
}
.pane{
	display:none;
}
.pane.pane-selected{
	display:block;
}
#pane-about div, #pane-options div{
	margin:0.5em 0;
}
#impExpField{
	width:94%;
	margin:3%;
	height:8em;
}

#controls{
	padding:10px;
	text-align:left;
}
.resources{
	text-align:left;
}
.resource-value{
	text-align:right;
}
.resource-icon span{
	display:inline-block;
	height:18px;
	width:18px;
	margin:0 8px 0 0;
}
.resource-icon.per-sec span{
	margin:0;
}
.icon-food{
	background:url(icons/food.png) no-repeat;
	background-size: contain;
}
.icon-wood{
	background:url(icons/wood.png) no-repeat;
	background-size: contain;
}
.icon-stone{
	background:url(icons/stone.png) no-repeat;
	background-size: contain;
}
.icon-skins{
	background:url(icons/skins.png) no-repeat;
	background-size: contain;
}
.icon-herbs{
	background:url(icons/herbs.png) no-repeat;
	background-size: contain;
}
.icon-ore{
	background:url(icons/ore.png) no-repeat;
	background-size: contain;
}
.icon-leather{
	background:url(icons/leather.png) no-repeat;
	background-size: contain;
}
.icon-piety{
	background:url(icons/piety.png) no-repeat;
	background-size: contain;
}
.icon-metal{
	background:url(icons/metal.png) no-repeat;
	background-size: contain;
}
.icon-gold{
	background:url(icons/gold.png) no-repeat;
	background-size: contain;
}
.resources, .focus{
    margin-bottom:1em;
	padding:10px;
}
.focus{
    height:10em;
}
.focus table{
	margin:0 auto;
}
.actions{
    padding:10px;
}
.action{
	padding:5px;
}
.cost{
	font-size:0.8em;
	color:#666;
}
.clearfix{
    clear:both;
}


/*
 * toast.js CSS
 */

.toast {
  padding: 8px 35px 8px 14px;
  margin-bottom: 8px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border: 2px solid;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  box-shadow:#999 0 0 8px;
}
.toast:hover {
  cursor: pointer;
  box-shadow:#666 0 0 8px;
}

#toast-container {
  width: 300px;
  top: 12px;
  left: 12px;
  position: fixed;
  z-index: 9999;
}

.toast-title {
  font-weight: bold;
}

.toast-message {
}

.toast-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.toast-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.toast-info {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.toast-warning {
  color: #c09853;
  background-color: #fcf8e3;
  border-color: #fbeed5;
}