/* .rates-table table*/
.rates-table{
    margin:0;
}
.rates-table tbody tr:hover td,.rates-table tbody tr:hover th{
    background-color:#ECFFFF

}
.rates-table tbody tr.head:hover td,.rates-table tbody  tr.head:hover th{
    background-color:#ECFFFF

}
.rates-table thead th{
    font-size: 130%;
    background-color:#364956;
    color:#fff;	
    padding:5px;

}
.rates-table tbody td,  .rates-table tbody th{
    padding: 0.4em;
    border: 1px solid #ccc;
    background-color: #fff;
    vertical-align:middle;
    font-size: 140%;
}
.rates-table td{
    text-align: center;
}
.rates-table tr.even td{
    background-color: #ECECEC;

}
.rates-table tr.even th{
    background-color: #fff;

}
.rates-table tbody tr:hover th{
    background-color:#FBEAB7;
    color:#000;
}
/* .rates-table table*/
.rates-table tbody th{
    padding: 0.4em;
    border: 1px solid #CCC;
    background-color: #EBEBEB;
    text-align:left;
    color:#000;
}
.rates-table tfoot td{
    padding: 0.4em;
    border: 1px solid #ccc;
    font-size:14px;
    background-color: #171614;
    text-align:left;
    color:#FFF;
}

.invalid_data{
    color: #F00;
    margin:20px;
    display:block;
    text-align:center;	

}


.PositiveNumber {
    color: #009933;
}
.NegativeNumber {
    color: #CC0000;
}
tr.odd td, tr.odd th{
    background-color:#CC9;

}
.keyword{
    text-decoration:underline;
    background-color:#FFCC00;
}

.wmscc_date{
    font-size: 14px;
}
.rising{
    color:green;

}
.falling{
    color:red;

}
.gold-calc .result-container{
    border:0;
    font-size:120%;
    width:90%;
    text-align:center;
    resize: none;
    box-shadow: none;
    overflow: hidden;
        color: green;
    font-weight: bold;
}
.gold-calc {
    font-size:120%;
}
.gold-calc input, .gold-calc select{
    text-align:center;
    font-size:1.3em;
}
.gold-calc select optgroup{
    font-size:.8em;
    background-color:#9CF
}
.gold-calc select optgroup option{
    font-size:.6em;
    background-color:#fff
}

.output-data ,.input-data{
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

.main-box{
    margin:auto;
    text-align: center;
    background-color: #000000;
    border: 15px solid #093177;
    padding: 10px;
}
.main-box .rate{
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #000, 0 0 35px #000, 0 0 40px #000, 0 0 50px #000, 0 0 75px #000;
    font-size:300%;
}
.main-box.falling{
    background: #000  url("images/down_arrow_24.png") no-repeat scroll 2% 50%;

}
.main-box.rising{
    background: #000  url("images/up_arrow_24.png") no-repeat scroll 2% 50%;
    color:#90DD8F;

}
.main-box.fixed{
    color:#fff;

}
.button{
    width: 100%;
    color: #777;
    border:1px solid #c7c7c7;
    background-image: linear-gradient(to bottom, #dfdfdf 0px, #cecece 100%);
    font-size: 1rem;
    background-color: #cdcdcd;
    border-radius: 3px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    font-weight: 700;
    cursor: pointer;
    line-height: normal;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background-color 300ms ease-out 0s;
    padding: 5px;
    margin: 5px  0 ;
}
.plot-area{
    background: transparent url("images/loading.gif") no-repeat 50% 50%;
    height:300px;
    display:block;
}
.plot-area.error{
    background: transparent url("images/error.png") no-repeat 50% 50%;
}
.plot-area.success{
    background: transparent url() ;
}
.align-left{
    float:left;
}
.chart-container{
    background: transparent url(images/loading.gif) no-repeat 50% 50%;
    direction: ltr;
    height: 350px;
}

.chart.error{
    background: transparent url(images/error.png) no-repeat 50% 50%;
}

.ads{
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    min-height: 285px;
}

.input-data {
    width: 53%;
    float: left;
    margin-right: 5px;
}

.output-data {
    width: 45%;
    float: right;
    vertical-align:middle;
    text-align:center;
}
.wmscc_gold_calc .input-data{
    width:100%;

}
.wmscc_gold_calc .output-data {
    margin-top: 0;
    text-align: center;
    width: 100%;
}
@media screen and (max-width: 980px) {
    .input-data {
        margin-right: 0px;
    }	
    .input-data {
        width: 50%;
    }
    .output-data {
        width: 45%;
    }

}

/* for 700px or less */
@media screen and (max-width: 700px) {

    .input-data{
        width: auto;
        float: none;
    }
    .output-data {
        width: auto;
        float: none;
        margin-top:20px;
    }

}

/* for 480px or less */
@media screen and (max-width: 480px) {

    .input-data{
        width: auto;
        float: none;
    }
    .output-data {
        width: auto;
        float: none;
    }

}
.clear{
    clear: both;
}