/*
* Body settings
*/
body{
    margin-top:35px;
    background-image: url("../resources/Pattern.png");
    background-repeat:repeat-y repeat-x;
    background-color: rgb(51, 51, 51);
}

/*
* Loading gif
*/
.ui-autocomplete-loading {
    background: white url("/code/eurobis-charts/resources/loading.gif") right 10px center no-repeat;
}



.nav{
    margin-bottom:20px;
}

img .loading{
    height:1em;
    margin-right:4px;
    width:1em;
}

/*
* Chart container class. width is calculates by responsive design. Together with redraw plugin of flot.
* This makes sure FLOT can be drawn in every sized container.
*/
.chart-container {
    /*width:800px;*/
    height: 325px;
    padding: 20px 15px 20px 15px;
    margin: 15px auto 30px auto;
    margin-left:auto;
    margin-right:auto;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/*
* Helper function
*/
.pull-left{
    float:left;
}

/* FORM */
.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

/*
* Glowing border input species
*/
.glowing-border:focus {
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

.chart-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
}

.form{
    margin-top:20px;
    width: 400px;
    margin-left:auto;
    margin-right:auto;
}

.form input{
    height:30px;
}

.form select{
    height:30px;
}

.form #btn-addspecies,#btn-removespecies{
    width:30px;
    height:30px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.form .checkbox{
    margin:0 0 0 0;
}
.form input[type="checkbox"]{
    margin:0 0 0 0;
}
/*
* $.AJAX loadingbar gif.
*/
#loadingbar{
    text-align: center;
}

/*
* Formatting species button
*/
#btn-removespecies{
    margin-left:5px;
}

#chart-panel{
    text-align: center;
}



/* JQUERY UI */
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}



/*
* Blue highlight image when autocomplete shows list.
*/
body .ui-autocomplete .ui-menu-item .ui-state-focus {
    background-image: url("../resources/ui-bg_gloss-wave_55_5c9ccc_500x100.png");
}

.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    font-size:1.5em;
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}


/* IE 6 doesn't support max-height
* I've used height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
    height: 200px;
}


/*
* Decent form panel heading
*/
#form-heading{
    padding-bottom:20px;
}


/*
* Save uri button
*/
#saveuri{
    float:right;
    margin-bottom: 5px;
}

/*
* Feedback button
*/
#feedbackbt{
    float:right;
}

/*
 * Language navigation
 */
#lang-nav{
    width:100%;
    float:left;
}

/* Language crumble trail*/
#lang-nav ul li{
    float:left;
    list-style-type: none;
    margin-left:5px;
}

/* Deprecated */
.chart-title{
    text-align:center;
}

.chart-x-axis-label{
    text-align: center;
}

.chart-y-axis-label{
    text-align: center;
}

.chart-y-axis-inner{
    float:left;
    margin-top:19%;
    clear:both;
}

.chart-x-axis-inner{
    clear:both;
}


#navigation{
    position:relative;
    margin-top:10px;
}

#moreinfo{
	margin-top: 5px;
}