/*
 * Global style sheet for Caladis
 */

/* Copyright (C) 2014 Systems & Signals Research Group, Imperial College London
Released as free software under GNU GPL 3.0 http://www.gnu.org/licenses/ ; see readme.txt
Please cite the accompanying paper [see readme.txt] if using this code or this tool in a publication. */

/* Bionumbers Browser */
.paneMiddle {
  width:260px;
  margin:5px 5px 5px 5px;
  padding:10px;
  border-color:#F38630;
  border-style:solid;
  border-width:4px;
  border-radius:15px;
  overflow:auto;
  display:none;
  position:absolute;
  top:230px;
  right:-10px;
  z-index:1000;
  background-color:#FFFFFF;
}

.paneMiddle .select-wrap select{
  color: #808080; font-size: 12px; 
} 

/* Bionumbers search button */

	.bn-search{
		background: #F38630; border: none; -webkit-appearance: none;
		-webkit-border-radius: 3px; 
		   -moz-border-radius: 3px; 
				border-radius: 3px;
		font-size: 16px; font-weight: bold; color: white; line-height: 24px; text-align: center; text-decoration: none;
	} .bn-search:hover{
		background: #FA6900;
		-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
		   -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
				box-shadow: 0 1px 1px rgba(0,0,0,.2);
	} .bn-search:active{
		background: #FA6900;
		-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
		   -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
				box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
	}


/* Calculation operators */
.indent .operator {
	font-size:16px;
	padding: 2px 6px;
}
.indent .variable {
	font-size:13px;
	line-height: 16px;
	padding: 4px 8px;
}

/* Body */
body{
background: #fcfcfc url('../img/bg/grain.png') repeat; 
/*   background: #f9f9f9; */
}

/* Head */
#header{
    overflow: hidden;
    padding: 0; margin: 0;
    background: #f7f7f7; /* Old browsers */ background: -moz-linear-gradient(top,  #f7f7f7 0%, #f0f0f0 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  #f7f7f7 0%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  #f7f7f7 0%,#f0f0f0 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  #f7f7f7 0%,#f0f0f0 100%); /* IE10+ */ background: linear-gradient(to bottom,  #f7f7f7 0%,#f0f0f0 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
    border-bottom: 1px solid #ddd;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.9);
       -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.9);
            box-shadow: 0 1px 0 rgba(255,255,255,0.9);
}
    .header-logo{    
        display: block; float: left;
        width: 198px; height: 23px;
        margin: 9px 0 8px 10px;
        background: url('../img/logo/head.png') no-repeat 0 -5px; 
        border: 0 none;
    } .header-logo:hover{
        background: url('../img/logo/head.png') no-repeat 0 -29px; 
    }
    
    .header-btn-bar{
        float: right;
    }
        .header-btn-bar .divider{
            float: left;
            height: 40px; width: 2px;
            background: url('../img/bucket/divider.png') no-repeat 0 center;
        }
        
        .header-btn-bar .btn{
            float: left;
            margin: 0; padding: 12px;
            color: gray; font-size: 13px; line-height: 16px; text-shadow: 0 1px 0 white; text-decoration: none; text-transform: uppercase;
        } .header-btn-bar .btn:hover{
            color: #222;
        }

/* Footer */
#footer{
    position: relative;
    padding: 50px 0 20px; margin: 100px 0 0;
    background: #f0f0f0; border-top: 1px solid #dddddd;
}
    .footer-header{
        margin: 0; padding: 4px 0;
        border-top: 1px solid rgba(255,255,255,.7); border-bottom: 1px solid #ddd;
        -webkit-box-shadow: 0 -1px 0 #ddd, 0 1px 0 rgba(255,255,255,.7);
           -moz-box-shadow: 0 -1px 0 #ddd, 0 1px 0 rgba(255,255,255,.7);
                box-shadow: 0 -1px 0 #ddd, 0 1px 0 rgba(255,255,255,.7);
        text-transform: uppercase; color: gray; font-size: 12px;
    }
    
    .footer-list{
        list-style: none;
        margin: 15px 0 30px; padding: 0;
    }
        .footer-list > li{
            min-height: 21px;
            margin: 0 0 4px; padding: 0;
        }
            .footer-link{
                color: gray; font-size: 12px; text-decoration: none; text-shadow: 0 1px 0 white;
            } .footer-link:hover{
                text-decoration: underline;
            }
    .footer-text{
        margin: 15px 0 0;
        color: gray; font-size: 12px; text-decoration: none;
    }



/*
 * Input
 */

/* Query Input */
.qi{
	position: relative;
	margin: 0 180px 0 0; padding: 0 10px;
	background-color: white; border: 1px solid #ddd;
	-webkit-border-radius: 3px; 
	   -moz-border-radius: 3px; 
			border-radius: 3px;
	-webkit-box-shadow: inset 0 1px 3px RGBA(0,0,0,0.05); 
	   -moz-box-shadow: inset 0 1px 3px RGBA(0,0,0,0.05);
			box-shadow: inset 0 1px 3px RGBA(0,0,0,0.05);
} 
	.qi-input{
		position: relative; z-index: 2;
		width: 100%; height: 20px;
		padding: 12px 0; margin: 0;
		border: 0; background-color: transparent;
		outline: none; resize: none; -webkit-appearance: none;
        -webkit-box-shadow: none; 
           -moz-box-shadow: none;
                box-shadow: none;
		font-size: 16px; line-height: 20px;
	}
         
	.qi-btn{
		display: block; position: absolute; top: -1px; right: -180px; cursor: pointer;
		width: 160px; height: 46px;
		background: #F38630; border: none; -webkit-appearance: none;
		-webkit-border-radius: 3px; 
		   -moz-border-radius: 3px; 
				border-radius: 3px;
		font-size: 16px; font-weight: bold; color: white; line-height: 46px; text-align: center; text-decoration: none;
	} .qi-btn:hover{
		background: #FA6900;
		-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
		   -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
				box-shadow: 0 1px 1px rgba(0,0,0,.2);
	} .qi-btn:active{
		background: #FA6900;
		-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
		   -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
				box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
	}

	.qi-clr{
		display: block; position: absolute; top: -1px; right: 0px; cursor: pointer;
		width: 60px; height: 46px; z-index: 5;
		background: #DDDDDD; border: none; -webkit-appearance: none;
		-webkit-border-radius: 3px; 
		   -moz-border-radius: 3px; 
				border-radius: 3px;
		font-size: 16px; font-weight: bold; color: white; line-height: 46px; text-align: center; text-decoration: none;
	} .qi-clr:hover{
		background: #CCCCCC;
		-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
		   -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
				box-shadow: 0 1px 1px rgba(0,0,0,.2);
	} .qi-clr:active{
		background: #CCCCCC;
		-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
		   -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
				box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
	}

    /* qi-btn-alt */
	.qi-btn-alt{
		display: none;
		height: 40px;
		margin: 20px 0 0;
		background: #F38630; border: none; -webkit-appearance: none;
		-webkit-border-radius: 3px; 
		   -moz-border-radius: 3px; 
				border-radius: 3px;
		font-size: 14px; font-weight: bold; color: white; line-height: 40px; text-align: center; text-decoration: none;		
	} .qi-btn-alt:hover{
		background: #FA6900;
		-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
		   -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
				box-shadow: 0 1px 1px rgba(0,0,0,.2);
	} .qi-btn-alt:active{
		background: #FA6900;
		-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
		   -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
				box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
	}
	
	/************************/
	@media( max-width: 740px){
		.qi{ margin: 0; }
		.qi-btn{ display: none; }
		.qi-btn-alt{ display: block; }
	} 
    
    /* qi-option-list */
    .qi-option-list{
        list-style: none; overflow: hidden; display: none;
        margin: 0; padding: 0;
    }
        .qi-option-list > li{
            float: left;
            width: 170px;
            padding: 20px 0 2px; margin: 0 20px 0 0;
        }
        
        .qi-option-list .label{
            margin: 0 0 2px; padding: 0;
            width:170px;
            color: gray; font-size: 11px;
        }
        
        .qi-option-list .select-wrap{
            width: auto; cursor: pointer;
            padding: 0; margin: 0;
            overflow:hidden;
            border: solid 1px #ccc; background: #e9e9e9 url('../img/btn/select.png') no-repeat right 0;
            -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4);
               -moz-box-shadow: 0 1px 0 rgba(255,255,255,.4);
                    box-shadow: 0 1px 0 rgba(255,255,255,.4);        
        }        
            .qi-option-list .select-wrap select{
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline: none;
                width: 120%;
                margin: 0; padding: 3px;
                color: #808080; font-size: 12px; text-shadow: 0 1px 0 white;
                -webkit-appearance: none; 
                    -moz-appearance:none; 
                         appearance:none; 
                border: none; border-width: 0px; background:none;
            } 
            .qi-option-list .select-wrap select:focus, .qi-option-list .select-wrap select:active{ 
                outline: none; -moz-outline: none; border: 0; 
            }

/* qi-link-list */
.qi-link-list{
    padding: 7px 0 10px; margin: 0;
    list-style: none;
}
    .qi-link-list > li{
        float: right;
        padding: 0 0 0 20px;
    }
    .qi-link-list a{
        display: block;
        color: #808080; font-size: 11px; text-shadow: 0 1px 0 white; text-decoration: none; 
    } .qi-link-list a:hover{
        color: #FA6900;
    }

/* Help Area */
#help-area{
    margin-top: 0 !important;
}

/* Help */
.help{
    position: relative;
    max-width: 500px;
    margin: -1px 0 0; padding: 20px 15px 12px;
    background: #A7DBD8; border: 1px solid #97CBC8;
	-webkit-border-radius: 3px; 
	   -moz-border-radius: 3px; 
			border-radius: 3px;
    -webkit-box-shadow: 4px 4px 2px RGBA(0,0,0,0.1); 
       -moz-box-shadow: 4px 4px 2px RGBA(0,0,0,0.1);
            box-shadow: 4px 4px 2px RGBA(0,0,0,0.1);
}
.help-welcome{
    display: none;
}
    .help-arrow{
        position: absolute; top: -20px; left: 10px;
        height: 20px; width: 30px;
        background: url('../img/bucket/help-arrow.png') no-repeat;
    }
    
    .help-btn-del{
        display: block; position: absolute; top: 5px; right: 5px;
        height: 20px; width: 20px;
        background: url('../img/btn/help-delete.png') no-repeat;
	} .help-btn-del:hover{
        background: url('../img/btn/help-delete.png') no-repeat 0 -20px;
    }
    
    .help p, .help h3{
        text-shadow: 0 1px 0 #B7EBE8;
    }
        .help-btn-bar{
            margin: 10px 0 0;
        }
            .help-btn{
                display: block; float: left;
                width: 25%;
                margin: 0 0 0 5%; padding: 7px 0;
                background: #97CBC8;
                -webkit-border-radius: 3px; 
                   -moz-border-radius: 3px; 
                        border-radius: 3px;
                text-align: center; text-decoration: none; font-size: 13px; font-weight: bold; line-height: 16px;
            }.help-btn:hover{
                background: #87BBB8;
                -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
                   -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
                        box-shadow: 0 1px 1px rgba(0,0,0,.2);
            } .help-btn:active{
                background: #87BBB8;
                -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
                   -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
                        box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
            }
    


/* vi Area */
#vi-area{
    min-height: 300px;
}


/* Variable Input */
.vi{
    position: relative;
    max-width: 622px;
    margin: 0 auto 30px; padding: 20px 0 0 20px;
}
    .vi-title{
        position: absolute; top: 5px; left: -5px; z-index: 100;
        height: 50px; min-width: 30px;
        margin: 0; padding: 0 10px;
        background: white; border: 5px solid #F38630;
		-webkit-border-radius: 30px; 
		   -moz-border-radius: 30px; 
				border-radius: 30px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
                box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        color: #F38630; font-size: 32px; font-weight: bold; text-align: center; line-height: 50px;
    }
    
    .vi-content{
        position: relative; overflow: hidden;
        padding: 15px 0 0;
    }
        .vi-bold{
            margin: 0; padding: 0;
            line-height: 20px; font-size: 14px; font-weight: bold;
        }
        .vi-text{
            margin: 0; padding: 0 0 10px;
            line-height: 20px; font-size: 13px;
			white-space: pre-wrap;
        }
			.vi-text-link{
				text-decoration: none; color: #bbb;
			} .vi-text-link:hover{
				text-decoration: underline;
			}

        .vi-dist-holder{
            height: 100px; overflow: hidden;
            margin: 0 -20px 0 0;
        }
            .vi-dist-wrap{
                float: left;
                width: 130px; height: 100px;
                margin: 0 20px 0 0; padding: 0 0 10px;
            }
                .vi-dist{
                    display: block; cursor: pointer;
                    height: 90px;
                    border: 1px solid #ccc; background: #fcfcfc;
                    -webkit-border-radius: 3px; 
                       -moz-border-radius: 3px; 
                            border-radius: 3px;
                    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.05); 
                       -moz-box-shadow: 0 1px 3px rgba(0,0,0,.05); 
                            box-shadow: 0 1px 3px rgba(0,0,0,.05);
                } .vi-dist:hover{
                    border: 1px solid #FA6900;
                } .vi-dist:active{
                    border: 1px solid #FA6900;
                    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); 
                       -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); 
                            box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
                }
                    .vi-dist .label{
                        padding: 63px 0 0; margin: 0;
                        background-image: url('../img/bucket/vi-btn.png');
                        background-repeat: no-repeat;
                        text-align: center; font-weight: bold; color: inherit; font-size: 13px;
                    }
                    .vi-dist .label.img-unif{
                        background-position: 15px 15px;
                    } .vi-dist:hover .label.img-unif{
                        background-position: 15px -65px;
                    }
                    .vi-dist .label.img-norm{
                        background-position: -105px 15px;
                    }.vi-dist:hover .label.img-norm{
                        background-position: -105px -65px;
                    }
                    .vi-dist .label.img-pois{
                        background-position: -225px 15px;
                    }.vi-dist:hover .label.img-pois{
                        background-position: -225px -65px;
                    }
                    .vi-dist .label.img-bino{
                        background-position: -345px 15px;
                    }.vi-dist:hover .label.img-bino{
                        background-position: -345px -65px;
                    }
                    .vi-dist .label.img-expo{
                        background-position: -465px 15px;
                    }.vi-dist:hover .label.img-expo{
                        background-position: -465px -65px;
                    }
                    .vi-dist .label.img-beta{
                        background-position: -585px 15px;
                    }.vi-dist:hover .label.img-beta{
                        background-position: -585px -65px;
                    }
                    .vi-dist .label.img-gamm{
                        background-position: -705px 15px;
                    }.vi-dist:hover .label.img-gamm{
                        background-position: -705px -65px;
                    }
                    .vi-dist .label.img-logn{
                        background-position: -705px 15px;
                    }.vi-dist:hover .label.img-logn{
                        background-position: -705px -65px;
                    }

                    .vi-dist .label.img-geom{
                        background-position: -825px 15px;
                    }.vi-dist:hover .label.img-geom{
                        background-position: -825px -65px;
                    }

                    .vi-dist .label.img-duni{
                        background-position: -945px 15px;
                    } .vi-dist:hover .label.img-duni{
                        background-position: -945px -65px;
                    }

    .vi-btn-bar{
        margin: 3px 0;
padding:3px;
		text-align: right;
    }
    .vi-bnbtn-bar{
        margin: 3px 0;
padding:4px;
		text-align: right;
display:none;
}
.vi-bnbtn-btn{
        margin: 3px 0;
padding:4px;
		text-align: center;
   cursor: pointer;
                    border: 1px solid #ccc; background: #fcfcfc;
                    -webkit-border-radius: 3px; 
                       -moz-border-radius: 3px; 
                            border-radius: 3px;
                    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.05); 
                       -moz-box-shadow: 0 1px 3px rgba(0,0,0,.05); 
                            box-shadow: 0 1px 3px rgba(0,0,0,.05);
                } .vi-bnbtn-btn:hover{
                    border: 1px solid #FA6900;
                } .vi-bnbtn-btn:active{
                    border: 1px solid #FA6900;
                    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); 
                       -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); 
                            box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
                }


        .vi-btn-all, .vi-btn-less, .vi-btn-back{
            padding: 0 0 0 16px; margin: 0 0 -20px;
            font-size: 13px; font-weight: bold; text-decoration: none; line-height: 16px;
        } .vi-btn-all:hover, .vi-btn-less:hover, .vi-btn-back:hover{
            color: #FA6900;
        } 
        .vi-btn-all{
            background: url('../img/icon/vi-btn.png') no-repeat 0 3px;
        } .vi-btn-all:hover{
            background: url('../img/icon/vi-btn.png') no-repeat 0 -17px;
        } 
        .vi-btn-less{
            background: url('../img/icon/vi-btn.png') no-repeat 0 -37px;
        } .vi-btn-less:hover{
            background: url('../img/icon/vi-btn.png') no-repeat 0 -57px;
        }
        .vi-btn-back{
            background: url('../img/icon/vi-btn.png') no-repeat 0 -77px;
        } .vi-btn-back:hover{
            background: url('../img/icon/vi-btn.png') no-repeat 0 -97px;
        }
            .vi-input-wrap{
                padding: 6px 0; margin: 0;
            }
                .vi-input-wrap .label{
                    display: inline;
                    margin: 0; padding: 0 10px 0 0;
                    font-size: 13px; font-weight: normal; line-height: 32px;
                }
                
                .vi-input{
                    width: 60px; height: 20px;
                    margin: 0; padding: 6px 5px;
                    background-color: white; border: 1px solid #e3e3e3;
                    outline: none; resize: none; -webkit-appearance: none;
                    -webkit-border-radius: 3px; 
                       -moz-border-radius: 3px; 
                            border-radius: 3px;
                    -webkit-box-shadow: inset 0 2px 4px RGBA(0,0,0,0.04); 
                       -moz-box-shadow: inset 0 2px 4px RGBA(0,0,0,0.04);
                            box-shadow: inset 0 2px 4px RGBA(0,0,0,0.04);
                    font-size: 15px; line-height: 20px;
                } .vi-input:focus{
                    border: 1px solid #F38630;
                }
                
                /* remove spin button */
                input::-webkit-outer-spin-button,
                input::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }



/*
 * Compute
 */

/* Query Display iFrame*/
.qdif{
	min-height: 8ptpx;
    margin: 0; padding: 0;
    text-align: center; color: #222; font-size: 8pt; line-height: 8pt;
}

/* Query Display */
.qd{
	min-height: 30px;
    margin: 0; padding: 0;
    text-align: center; color: #222; font-size: 17px; line-height: 30px;
}
    .qd-var{
        cursor: pointer; position: relative; cursor: pointer;
        color: #F38630;
    }
    
.qd-btn{
    display: block; float: left;
    width: 60px;
    padding: 4px 11px;
    background: #F9F9F9; border: 1px solid #DDD;
    -webkit-border-radius: 3px; 
       -moz-border-radius: 3px; 
            border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 0 white;
       -moz-box-shadow: inset 0 1px 0 white;
            box-shadow: inset 0 1px 0 white;
    text-align: center; color: gray; text-shadow: 0 1px 0 white; font-size: 16px; line-height: 20px; text-decoration: none;
} .qd-btn:hover{
		background: #FA6900; padding: 5px 12px; border: 0 none;
		-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
		   -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
				box-shadow: 0 1px 1px rgba(0,0,0,.2);
        color: white; text-shadow: none;
} .qd-btn:active{
    background: #FA6900;
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
       -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
            box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}

/* Tooltip */
.tooltip{
    display: none; position: absolute; z-index: 300;
    width: 200px;
    padding: 10px;
    background: #A7DBD8; border: 1px solid #97CBC8;
    -webkit-border-radius: 3px; 
	   -moz-border-radius: 3px; 
			border-radius: 3px;
    -webkit-box-shadow: 4px 4px 2px RGBA(0,0,0,0.1); 
       -moz-box-shadow: 4px 4px 2px RGBA(0,0,0,0.1);
            box-shadow: 4px 4px 2px RGBA(0,0,0,0.1);
}
    .tooltip-arrow{
        position: absolute; top: -9px; left: 0;
        margin: 0;
        height: 9px; width: 100%;
        background: url('../img/bucket/help-arrow.png') no-repeat center 0;
    }

    .tooltip-var{
        margin: 0; padding: 0;
        text-shadow: 0 -1px 0 #B7EBE8; font-size: 17px;
    }
    
    .tooltip-prop{
        margin: 0; padding: 3px 0 0;
        text-shadow: 0 -1px 0 #B7EBE8; color: #222; font-size: 13px;
    }

/* Histogram */
.hist-wrap{
    padding: 10px 10px 20px;
}
    .hist{
        width: auto; height: 300px;
        margin: 12px 0 0; padding: 0;
        list-style: none;
        border-bottom: 1px solid #555;
    }
	
	/************************/
	@media( max-width: 740px){
		.hist{ height: 200px }
	} 
        .hist > li{
            float: left; position: relative;
            margin: 0 0 0 -1px; padding: 0 1px 0 0;
            height: 100%;
        }
            .hist .bar{
                position: absolute; bottom: 0; left: 0;
                width: 100%;
                background: #F38630;
            } .hist .bar:hover{ background: #FA6900; }    
             
                .hist .bar .bar-value{
                    display: none; position: relative; z-index: 100;
                    margin: -14px 0 0; padding: 0;
                    font-size: 10px; font-weight: bold; text-align: center; line-height: 14px;
                } .hist .bar:hover .bar-value{ display: block; }

            .hist p.tick{
                position: absolute; bottom: -19px; left: -30px;
				padding: 7px 0 0; margin: 0;
                width: 60px; height: 12px;
				background: url('../img/icon/tick.png') no-repeat center -1px;
                font-size: 10px; text-align: center; color: #222; font-weight: bold; line-height: 12px;
            }

            .hist div.tick{
                position: absolute; bottom: -3px; left: 0;
				padding: 0; margin: 0;
                width: 1px; height: 3px;
				background: url('../img/icon/tick.png') no-repeat center -3px;
            }

/* Slider */
.slider-wrap{
    position: relative;
    margin: 20px 0 0; padding: 0 10px;
}
    .slider{
        position: relative; 
        height: 10px;
        background: #f9f9f9; border: 1px solid #ddd;
        -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.05);
           -moz-box-shadow: inset 0 2px 3px rgba(0,0,0,0.05);
                box-shadow: inset 0 2px 3px rgba(0,0,0,0.05);
    }

    .ui-slider-range{
        height: 100%;
        position: absolute;
        background: rgba(0,0,0,.06);
    }
    
    .ui-slider-handle{
        position: absolute; top: -10px; left: 0; cursor: pointer;
        width: 14px; height: 30px;
        margin-left: -14px;
        outline: none;
        background: url('../img/bucket/handle.png') no-repeat 0 0;
    }
    
    .ui-slider-handle:nth-child(3){
        margin-left: 0;
        background: url('../img/bucket/handle.png') no-repeat -20px 0;
    }

/* Download */
.download-btn-bar{
    margin: 10px 0 18px; 
    text-align: center; 
}
    .download-btn-bar .btn{
		display: inline; cursor: pointer;
        padding: 8px 40px;
		background: #F38630; border: none 0; -webkit-appearance: none;
		-webkit-border-radius: 2px; 
		   -moz-border-radius: 2px; 
				border-radius: 2px;
		font-size: 14px; font-weight: bold; color: white; line-height: 33px; text-align: center; text-decoration: none;
	} .download-btn-bar .btn:hover{
		background: #FA6900;
		-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
		   -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
				box-shadow: 0 1px 1px rgba(0,0,0,.2);
	} .download-btn-bar .btn:active{
		background: #FA6900;
		-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
		   -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
				box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
	}


/*
 * Tutorial
 */

/* Menu */
.menu-header{
    margin: 0; padding: 5px;
    border-top: 1px solid white; border-bottom: 1px solid #ddd;
    -webkit-box-shadow: 0 -1px 0 #ddd, 0 1px 0 white;
       -moz-box-shadow: 0 -1px 0 #ddd, 0 1px 0 white;
            box-shadow: 0 -1px 0 #ddd, 0 1px 0 white;
    text-transform: uppercase; color: gray; font-size: 12px;
}

.menu-list{
    list-style: none;
    margin: 7px 0 30px; padding: 0;
}
    .menu-list > li{
        margin: 3px 0; padding: 0;
    }
        .menu-item{
            display: block;
            margin: 0; padding: 3px 5px;
            font-size: 13px; text-decoration: none;
        }
        .menu-item:hover{
			background: #FA6900;
			-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
			   -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
					box-shadow: 0 1px 1px rgba(0,0,0,.2);
			color: white;
		}
        .menu-item.active{
			background: #FA6900;
			-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
			   -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
					box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
			color: white;
        }

/* tute */
.tute-code{
	position: relative;
	margin: 16px 0; padding: 10px;
	background-color: white; border: 1px solid #ddd;
	-webkit-border-radius: 3px; 
	   -moz-border-radius: 3px; 
			border-radius: 3px;
	-webkit-box-shadow: inset 0 1px 3px RGBA(0,0,0,0.05); 
	   -moz-box-shadow: inset 0 1px 3px RGBA(0,0,0,0.05);
			box-shadow: inset 0 1px 3px RGBA(0,0,0,0.05);
		font-size: 16px; line-height: 20px;

}

.tute-img-wrap{
    margin: 16px 0;
}
    .tute-img{
        display: block;
        max-width: 100%;
        margin: 0 auto;
    }

.tute-btn-bar{
    margin: 16px 0;
    text-align: right;
}
    .tute-btn-bar .btn{
        padding: 6px 20px;
		background: #F38630; border: none; -webkit-appearance: none;
        -webkit-border-radius: 2px; 
           -moz-border-radius: 2px; 
                border-radius: 2px;
		font-size: 14px; font-weight: bold; color: white; line-height: 30px; text-decoration: none;
	} .tute-btn-bar .btn:hover{
		background: #FA6900;
		-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
		   -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2); 
				box-shadow: 0 1px 1px rgba(0,0,0,.2);
	} .tute-btn-bar .btn:active{
		background: #FA6900;
		-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
		   -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.3); 
				box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
	}