/*styling begins here*/

/*tabs*/
html, body{
  height:100%;
}

.tab-master {
	width: 100%;
	max-width: 900px;
	height: 100%;
	max-height: 500px; /* use this property to set the widget height*/
}

.tab-content {
	height: calc(100% - 42px); 
	border-left: 1px solid #C6CDD0;
	border-right: 1px solid #C6CDD0;
	border-bottom: 1px solid #C6CDD0;
	padding: 20px;
	overflow: hidden;
}

.tab-pane {
	height: 100%%; 
}

.nav-pills > li, .nav-pills-sm > li {
  width: calc(100% / 3); /* change the denominator here to equal the number of tabs */
}

/* class for equation descriptions in math course widgets */
.equationLabel {
width: 0; 
height: 0; 
display: inline-block; 
overflow: hidden;
}


/*styling*/

html, body { 
	width: 100%;
	max-width: 900px;
	max-height: 500px;
/*	background-image: url("../images/col_lineheight.png"); */
	background-repeat: no-repeat; 
	background-size: 900px;
    font-family: Arial, sans-serif;
    margin: 0;
	padding:0;
	background-color: #F8F9F9;
}

img{
    opacity: 1;
}

input{
    width:70px;
    height:70px;
    display: block;
    opacity: 1;
}

h1{
    font-size: 30px;
    font-weight: bold;
}

#intro{
    margin-top:2em;
}

.option, .left{
    margin-top:2em;
}

/*tab1*/

.intro{
    display: flex; 
    justify-content: space-around;
}

.content{
    width: 300px;
    height: 300px;
}

/*pic*/
.we{
    width: 350px;
    height: 350px;  
}


/*ta2*/
.main{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    height:380px;  
}

/*left-part*/

.option{
    width: 250px;
}

.scaffolding{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 260px;
    margin-top: -1em;
}

.scaffolding input{
    margin:.3em;
    border: 1px solid lightgray;
    box-shadow:1px 2px 0px 0px #ccc;
}

.scaffolding input:active{
    box-shadow: inset 0 0 0 1px #ccc;
}


.fossil, .ocean{
    margin-top:.5em;
}

/*right-part*/

.diagram{
    display: flex;
    flex-direction: column;
    width: 600px;
    height: 380px;
    justify-content: space-around;
    align-items: center;  
    background-image: url("../images/background1.png"); 
	background-repeat: no-repeat; 
	background-size: 600px;
    position: relative;
}

.middle{
    display: flex;
    min-width: 600px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;  
}

.diagram input{
    border: 1px solid lightgray;
}

.arrow{
    position:absolute;
    width:120px;
    top:40px;
    right:120px;
}

.factory, .fv{
    display: none;
    position:absolute;
    right:-100px;
}

.CO2_expand{
    display: none;
    color: #0E8515;
    font-weight: bold;
}

#carbon_cycle > div.main > div.option > p{
    margin-bottom:1.2em;
    margin-top:-1em;
}

#carbon_cycle > div.main > div.option > h1{
    width:400px;
}

#carbon_cycle > div.main > div.option > div.CO2_expand > p{
    margin-top:-1em;
}

/*buttons*/

.buttons{
    display: flex;
    flex-direction: row;
    align-content: flex-end;
    justify-content: flex-end;   
}

.show_me, .try{
    display: none;
}

.try{
    margin-right:.5em;
}

.try, .show_me, .reset{
    color: #212628;
    background-color: #d4dadc;
    border-color: #d4dadc;
}

.submit{
    color: #F8F9F9;
    background-color: #0e8515;
    border-color: #0e8515;
    margin-left: .5em;
    margin-right: 1em;
}

.submit:active, .submit:hover{
    color: #F8F9F9;
    background-color: #09570e;
    border-color: #084e0c
}

.show_me:active, .try:active, .reset:active,.show_me:hover, .try:hover, .reset:hover {
    color: #212628;
    background-color: #b8c1c5;
    border-color: #b2bcc0;
};

.show_me{
    margin-right: 1em;
}

.show_me, .try, .reset, .submit{
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 20px;
    padding: 10px 20px;
    margin-top: .5em;
}

/*text*/

.unlocked{
    display:none;
    margin-top:1em;
    font-weight: bold;
    color: #0E8A16;
}

.ap, .fv, .ou, .ff{
    position: absolute;
    text-align: center;
    font-size: 12px;
    display: none;
}

.ap{
    right:200px;
    top:100px; 
}

.fv{
    right:-5px;
    top:100px; 
}

.ou{
    right:62px;
    bottom:105px;
}

.ff{
    right:190px;
    bottom:15px;
}


/*tab3*/

.wrap {
    width: 860px;
    height: 418px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.left{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width:300px
}

.right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 350px;
}

#gobal_warming p{
    margin:0;
}

.left p{
    margin-bottom:5px;
}

/*toggles*/

.checkbox{
    width:250px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: flex-start;
    padding-top:.5em;
}

.checkbox label{
    font-weight: bold;
    padding-left: 0;
    padding-top: .5em;
}

label.btn.btn-default.active.toggle-off{
    padding-top: .6em;
    line-height: 10px;
}

#toggles > div> div > div > label.btn.btn-primary.toggle-on{
    padding-top: .6em;
    line-height: 10px;
}


/*earth*/

.earth img{
    width:300px;
    height: 300px;
    margin-top:-1.5em;
}

.earth{
    position: relative;
}

.fac_pic, .tree_pic, .cars_pic, .green_pic{
    position: absolute;
    top:0;
    display: none;
    right:0;
}

/*bars*/

.bar{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width:400px;
    height:140px;
    justify-content: space-around;
    align-items:center;
    margin-top: 4em;  
}

.temp_emoji,.co2_emoji, .ice_emoji{
/*    width:25px;*/
    margin-top: -5em;
    margin-bottom:0;
    font-size:12px;
    font-weight:bold;
    color:#DC3737;
}

.temp, .carbon, .ice{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    height:150px;
    text-align: center;
    vertical-align: middle;
}

.temp_bar, .carbon_bar, .ice_bar{
    width:30px;
    height:90px;
    justify-content: center;
    align-items:center;
    border: 1px solid lightgrey;    
}

.temp_bar{
    background-color:#DC3737;
}

.carbon_bar{
    background-color:#212628;
}

.ice_bar{
    background-color:#C1E9FB;
}

.temp_dark, .carbon_dark, .ice_dark{
    height: 44px;
    background-color: white;
    transition: 0.5s linear;
    transition-property: height;
}

/*diable tab 3*/

.disabledTab {
        cursor: not-allowed;
    }
    /* Clicks are not permitted and change the opacity. */
    li.disabledTab > a[data-toggle="tab"] {
        pointer-events: none;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        box-shadow: none;
        opacity: .65;
    }

#global_warming > div > div.left > h1{
    width:500px;
}

#global_warming > div > div.left > p{
    width:300px;
}