/*
Profit Quest Style Sheet
Version: 1.0
Author: Chase Wickerham
Website: http://chasewickerham.com
Premium: http://www.hydrogenstudios.com
*/

/* Import fonts */
@import 'https://fonts.googleapis.com/css?family=Fjalla+One';
@import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

#bankInput{
text-align: center;
height: 34px;
width: 40px;
line-height: inherit;
font-size: 16px;
border: 1px solid #ccc;
}

#chartContainer{
padding-left: 70px;
margin-top:20px;
margin-bottom:10px;
}

#denominationSelector{
	margin-top:10px;
	margin-bottom:10px;
    border: 1px solid #111;
   background: white;
   width: 116px;
   padding: 5px 5px 5px 5px;
   font-family: 'Roboto Slab', sans-serif;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 34px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
} 
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) { 
    #denominationSelector{
        background:none;
        padding: 5px;
    }
}


.tooltip > .tooltip-inner {
    background-color: #707070;
    color: #FFFFFF;
    border: 1px solid white;
    padding: 15px;
	-webkit-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.4);
	}
.tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid white;
	}
.tooltip.top > .tooltip-arrow {
    border-top: 5px solid white;
	}

.close{
opacity: .8;
color: #F9F9F9;
color: #F9F9F9;
}
.close:hover{
color: #F9F9F9;
opacity: 1;
}

#achievementsModal{
border:6px solid #E19C5F; 
background-color:#353535; 
color:white;
height:600px;
min-height:600px;
width:960px;
}

#achievementsModal a{
color: #97C76B;
text-decoration:none;
z-index:9999;
}

#achievementsModal a:hover{
color: white;
z-index:9999;
text-decoration:none;
}

.achievementSlot{
width:140px;
padding-top:20px;

}
.achievementSlot p{
font-size:16px;
font-family: 'Fjalla One', sans-serif;
}

.achievementCoinCount{
font-size:16px;
font-family: 'Fjalla One', sans-serif;
}

.achievementImage{
height:50px;
width:50px;
margin:10px;
}

.achievementCoinImage{
width:20px; 
height:20px;
margin-right:10px;
margin-bottom:10px;
}

#namingModal{
border:6px solid #E19C5F; 
background-color:#353535; 
}
#namingModal h4{
color:white
}

#nameModalPositioner{
top:60%;
right:26%;
outline:none;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 79px;
  margin-top:79px;
  width:100%;
}

h1{
font-family: 'Fjalla One', sans-serif;
}

.fullContainer{
position:fixed;
height:100%;
min-height:100%;
background-image: url(../ui-img/small_steps.png);
background-attachment: fixed;
background-repeat: repeat;
z-index:-9999;
}

.navbar{
height: 79px;
border-bottom: 4px solid #353535;
background-color: #353535;
color: #e5e5e5;
}

#gameTitle{
position:relative;

width:300px;
min-width:300px;
height:56px;
min-height:56px;
float:left;
left:50%;
top:6%;
margin-left:-720px;
display:inline-block;
font-family: "Fjalla One";
}

#achievementsButton{
position:relative;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#131a1c+4,313d44+22,394149+85,575e66+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a4a86f+0,e2e46e+50,a4a86f+100 */
background: #a4a86f; /* Old browsers */
background: -moz-linear-gradient(top, #a4a86f 0%, #e2e46e 50%, #a4a86f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #a4a86f 0%,#e2e46e 50%,#a4a86f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #a4a86f 0%,#e2e46e 50%,#a4a86f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4a86f', endColorstr='#a4a86f',GradientType=0 ); /* IE6-9 */
border: 2px solid #bdbe75;
border-radius:10px;

width:112px;
min-width:112px;
height:56px;
min-height:56px;
float:left;
left:50%;
margin-left:-400px;
top:10px;
display:inline-block;
}

.notificationBar{
position:absolute;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#131a1c+4,313d44+22,394149+85,575e66+100 */
background: #131a1c; /* Old browsers */
background: -moz-linear-gradient(top, #131a1c 4%, #313d44 22%, #394149 85%, #575e66 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #131a1c 4%,#313d44 22%,#394149 85%,#575e66 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #131a1c 4%,#313d44 22%,#394149 85%,#575e66 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131a1c', endColorstr='#575e66',GradientType=0 ); /* IE6-9 */
border: 2px solid #989898;
border-radius:15px;

width:512px;
min-width:512px;
height:56px;
min-height:56px;

left:50%;
margin-left:-260px;
top:10px;
display:inline-block;
}

#notificationText{
padding-top:16px;
font-size:14px;
-moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
  cursor: default;
}
#informationButton{
position:relative;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#131a1c+4,313d44+22,394149+85,575e66+100 */
background: #313743;
border: 2px solid #b9b9b9;
border-radius:10px;

width:56px;
min-width:56px;
height:56px;
min-height:56px;
float:right;
right:50%;
margin-right:-330px;
top:10px;
display:inline-block;
}
#settingsButton{
position:relative;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#131a1c+4,313d44+22,394149+85,575e66+100 */
background: #313743;
border: 2px solid #b9b9b9;
border-radius:10px;

width:56px;
min-width:56px;
height:56px;
min-height:56px;
float:right;
right:50%;
margin-right:-400px;
top:10px;
}

.menuTopbar{
position:fixed;
width:100%;
min-width:100%;
height:8vh;
background-color: #353535;
left: 0;
z-index:-1;
overflow:hidden;
display: inline-block;
text-align:center;
vertical-align: center;
float:left;
  border-bottom: 3px solid #97c76b;
}

#mainMenu{
position:absolute;
left:30px;
top:30%;
}
#mainMenu h2{
font-size:3vh;
font-family: "Fjalla One";
color:#e5e5e5;
text-shadow: 1px 1px 6px black;
}

#mainMenu a:hover{
text-decoration:none;
}
#mainMenu h2:hover{
color: #97c76b;
}

#namePencil{
color:#484848;
}

#namePencil:hover{
color:#989898;
}
.bottomBar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 116px;

}
.bottomBarLeft{
position:relative;
bottom:0px;

  height: 116px;
  background-color: #353535;
  border-top: 3px solid #97c76b;
  right:58%;
}
.bottomBarRight{
position:fixed;
bottom:0px;
right:0px;
  height: 116px;
  background-color: #353535;
  border-top: 3px solid #97c76b;
  left:58%;
  z-index:-5;
}
.bottomBarCenter{

	position:absolute;
    width:506px;
    height:194px;
    bottom:0px;
    right:25%;
    left:50%;
    margin-left:-253px;
	background-image: url(../ui-img/buttonbg.png);'
	display:table-cell;
	min-width:180px;
}

#coinClicker{

position:fixed;
width:100px;
min-width:100px;
height:100px;
min-height:100px;
float:left;
left:50%;
bottom:52px;
margin-left:-50px;
}

#clickerButtonValueDisplay{
position:absolute;
left:50%;
margin-left:-22px;
bottom:42px;
font-family: "Fjalla One";
color:white;
cursor:pointer;
-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.invisible{
display:none;
}

#currentCashDisplay{
margin-top:30%;
color:#a7dba7;
bottom:0px;
font-size:26px;
font-family: "Fjalla One";
text-shadow: 0px 0px 22px rgba(152, 205, 0, 0.4);

}

#playerNameDisplay{
text-align:left;
position:fixed;

width:300px;
min-width:300px;
height:56px;
min-height:56px;
float:left;
left:45%;
bottom:26px;
margin-left:-530px;
display:inline-block;
font-family: "Fjalla One";
font-size:20px;
color:white;
}

#cpsDisplay{
position:fixed;

width:300px;
min-width:300px;
height:56px;
min-height:56px;
float:left;
left:45%;
bottom:24px;
margin-left:-280px;
display:inline-block;
font-family: "Fjalla One";
font-size:20px;
color:white;
}

#bankedDisplay{
text-align:center;
position:fixed;

width:300px;
min-width:300px;
height:56px;
min-height:56px;
float:right;
right:45%;
bottom:28px;
margin-right:-280px;
display:inline-block;
font-family: "Fjalla One";
font-size:20px;
color:white;
}

#currenciesDisplay{
position:fixed;

width:300px;
min-width:300px;
height:56px;
min-height:56px;
right:45%;
bottom:26px;
margin-right:-530px;
display:inline-block;
font-family: "Fjalla One";
font-size:20px;
color:white;
}

.rightSidebar{
position:fixed;
height:100%;
min-height:100%;
width:300px;
background-color: #424a5d;
right: 0;
z-index:-1;
border-left: 4px solid #e19c5f;
overflow:scroll;
top:75px;
}

.overviewItem{
margin:auto;
width:240px;
min-width:240px;
height:580px;
min-height:150px;
background-color: #e0e0e0;
border: 4px solid #7da559;
border-radius:10px;
margin-bottom:200px;
}

.buildBacker{
margin:auto;
width:240px;
min-width:240px;

min-height:140px;
background-color: #e0e0e0;
border: 4px solid #7da559;
border-radius:10px;
margin-bottom:20px;

}

div .buildBacker p{
font-size:16px;
font-family: "Fjalla One";
color: #353535;
}

.buildItemImage{
height:80px;
width:80px;
position:absolute;
right:176px;
padding-top:10px;
}

.buildItemDetails {
text-align:left;
position:absolute;
right:40px;
padding-top:5%;
max-width:120px;
}

.buildItemButton{
width:120px;
}


.researchBacker{
margin-left:20px;
width:240px;
min-width:240px;

min-height:150px;
background-color: #e0e0e0;
border: 4px solid #7da559;
border-radius:10px;
margin-bottom:200px;
}

div .researchBacker p{
font-size:18px;
font-family: "Fjalla One";
color: #353535;
}





.research-progressBar{
left:50%;
margin-left: -2em;
position:relative;
margin-bottom:10px;
}





.tgl {
  display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}

.tgl-light + .tgl-btn {
  background: #989898;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}
.tgl-light + .tgl-btn:after {
  border-radius: 50%;
  background: #fff;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}
.tgl-light:checked + .tgl-btn {
  background: #5CB85C;
}


.researchProgress{
margin-top:30px;
margin-bottom:30px;
border-radius: 40px;
width: 180px;
position:relative;
left:50%;
margin-left:-90px;

}

















#bankBacker{
margin:auto;
width:240px;
min-width:240px;
height:540px;
min-height:150px;
background-color: #e0e0e0;
border: 4px solid #7da559;
border-radius:10px;
margin-bottom:200px;
}


div #bankBacker p{
font-size:18px;
font-family: "Fjalla One";
color: #353535;
}

#lockedTechnologyBacker{
margin:auto;
width:240px;
min-width:240px;
height:190px;
min-height:150px;
background-color: #353535;
border: 4px solid #7da559;
border-radius:10px;
margin-bottom:200px;
}


div #lockedTechnologyBacker p{
font-size:18px;
font-family: "Fjalla One";
color: #353535;
}


#homepageOverview{
margin:auto;
width:240px;
min-width:240px;
height:170px;
min-height:150px;
background-color: #e0e0e0;
border: 4px solid #7da559;
border-radius:10px;
margin-bottom:200px;
}

#mapBacker{
margin:auto;
width:240px;
min-width:240px;
height:1675px;
min-height:150px;
background-image: url(../ui-img/map-background.png);'
border: 4px solid #7da559;
border-radius:10px;
margin-bottom:200px;
}



div #mapBacker a:hover{
text-decoration:none;
color:#484848;
}
div #mapBacker a{
text-decoration:none;
color:#353535;
}

.researchItemImageBox{
margin:14px;
}

.overviewHeading{
font-family: "Fjalla One";
font-size:24px;
color: #7b7b7b;
line-height:28px;
}
.overviewItem p{
font-size:12px;
color: #7b7b7b;
text-align:center;

}

.researchHeading{
font-family: "Fjalla One";
font-size:1.2em;
color: #7b7b7b;
line-height:28px;
}
.researchItem p{
font-size:12px;
color: #7b7b7b;
text-align:center;

}

.researchImageCircle{
background-color: rgb(125, 165, 89);
border-radius: 100px;
border: 4px solid rgb(193, 194, 192);
}

.rightsideicon{
height:110px;
width:110px;
margin-top:20px;
margin-bottom:30px;
padding:30px;
font-size:40px;
color: #e5e5e5;
background-color:#353535;
border: 4px solid #b9b9b9;
border-radius:100%;
}

.middlePart{
width: 100%;
height: 100%;

display: inline-block;
vertical-align: middle;
float: none;
}

.canvasBox{
background-image: url(../ui-img/level1-new.png);'
background-image:cover;
width:860px;
height:600px;
margin:auto;
margin-top:10%;
}

.carousel-inner a{
text-decoration:none;
color:#424A5D;
}
.carousel-inner a:hover{
text-decoration:none;
color:#E19C5F;
}

/* BASIC THEME CONFIGURATION */


#coinClicker {

  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
  
    -moz-animation-duration: 1s;
  -moz-animation-delay: 0s;
  -moz-animation-iteration-count: 1;
  
  
    -ms-animation-duration: 1s;
  -ms-animation-delay: 0s;
  -ms-animation-iteration-count: 1;
  
  
animation-duration: 1s;
animation-delay: 0s;
animation-iteration-count: 1;
}

#lockedButton{
font-size:60px;
font-family: "Fjalla One";
}

div #coinCost p{
font-size:20px;
color: white;
}