﻿.totosoil-container:after {
   content: "";
   display: block; 
   height: 0; 
   clear: both;
}

.totosoil-left {
    float: left;
}

.totosoil-right {
    float: right;
}

@media all and (orientation : portrait) /*(-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) */
{
    .totosoil-left, .totosoil-right {
        float: none !important;
        display: block !important;
        width: 100% !important;
    }
    .totosoil-invisible {
        display: none;
    }
}


.soildetailtab ul li p {
    margin: .2em;
    padding: 0;
}

.tabberlive .tabbertabhide {
    display: none;
}

.tabberlive .tabbertab h2, .tabberlive .tabbertab h3 
{ 
    display:block !important; 
}

ul.tabbernav {
    margin: 0;
    padding: 0;
}

    ul.tabbernav li {
        list-style: none;
        margin: 0;
        display: inline;
    }

        ul.tabbernav li a {
            line-height: 1;
            padding: .5em;
            margin-left: .5em;
            border-style: solid;
            border-width: 1px;
            background: #DDDDDD;
            text-decoration: none;
            white-space: nowrap;
            border-bottom: none;
            display: inline-block;
        }

            ul.tabbernav li a:hover {
                /*border-color: #00B4FF;*/
            }

        ul.tabbernav li.tabberactive a {
            background-color: #fff !important;
        }

            ul.tabbernav li.tabberactive a:hover {
                color: #000;
                background: white;
            }

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
    padding: 0 !important;
    margin: 0 ! important;
    border: 0;
    /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */
    /* height:200px; */
    /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */
    /* overflow:auto; */
}

    /* If desired, hide the heading since a heading is provided by the tab */
    .tabberlive .tabbertab h2 {
        display: none;
    }

    .tabberlive .tabbertab h3 {
        display: none;
    }

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}

.tabberlive#tab2 {
}

    .tabberlive#tab2 .tabbertab {
        height: 200px;
        overflow: auto;
    }





























.totosoilreal-container {
    /*border: 1px solid #00B4FF;*/
}

.totosoil-afsis-chart {
    width: 100% !important;
    height: 100% !important;
}

.totosoil-tabs li {
    display: inline;
    padding: 5px 15px 5px 15px !important;
    background: #DDDDDD;
    border: none;
    border-collapse: collapse;
}


.totosoil-opened-header {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
    margin-right: 2px;
    background: url('opened.png') no-repeat top left;
}

.totosoil-closed-header {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
    margin-right: 2px;
    background: url('closed.png') no-repeat top left;
}

.ui-tabs-active, .totosoil-tabs .ui-tabs-active, .totosoil-tabs .ui-tabs-active a, .ui-accordion-header-active {
    /*background: #00B4FF !important;*/
    color: white !important;
}

.soildetailtab {
    padding: .4em;
}

.soil-details-expander {
    width: 16px;
    height: 16px;
}

.soil-hidden-table {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    border-collapse: collapse;
}

    .soil-hidden-table td {
        border: none;
        padding: 0 !important;
        margin: 0 !important;
        vertical-align: top;
    }

.soil-texture-graph {
    width: 300px;
    height: 300px;
}

.soil-texture-td {
    width: 300px;
    height: 300px;
    padding: 0 !important;
    margin: 0 !important;
}

.soildetailtabheader div ul {
    margin: 0 0 0 24px;
    list-style-type: square;
}

    .soildetailtabheader div ul li {
        margin: 0;
    }

.soil-double-column {
    /*-webkit-column-count: 2;*/ /* Chrome, Safari, Opera */
    /*-moz-column-count: 2;*/ /* Firefox */
    /*column-count: 2;
    max-height: 100%;*/
}

.soilcontainer {
    padding: 10px 0 0 0;
}

.soildetailtabheader div p {
    margin: 0 .4em 0 .4em;
}

.soildetailtab h3, .soildetailtabheader h3 {
    border: 1px solid #AAAAAA;
    background: #DDDDDD;
    padding: .3em .3em .3em .3em;
    font-size: medium !important;
    cursor: pointer;
}

.soildetailtab div p {
    margin-left: .4em;
    margin-right: .4em;
}

.totosoil-tabs {
    padding: 0 !important;
}

.soils-table {
    border-style: solid;
    border-width: 1px;
    width: 100%;
    border-collapse: collapse !important;
}

    .soils-table td, .soils-table th {
        padding: 4px !important;
    }


table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):after {
    content: " \25B4\25BE";
}

/*.soils-table th, .soils-table-header {
    border-style: solid;
    border-width: 1px;
    color: white !important;
    text-transform: none !important;
    border-collapse: collapse !important;
    /*background: #00B4FF !important;
    font-weight: bold;
    padding: 4px !important;
    vertical-align: bottom;
}*/

.soils-table td, .soils-table th, .soils-table-data {
    border-style: solid;
    border-width: 1px;
    border-collapse: collapse !important;
}

/*.totosoil-container > .totosoil-table-wrapper {
    overflow: auto;
}*/

.soilpie {
    display: inline;
    width: 75px;
    height: 75px;
    margin-left: auto;
    margin-right: auto;
}

.totoSoilManualTip_cropName
{
    font-weight:bold;
    font-size:30px;
    margin-bottom:0px;
    margin-top:60px;
}
.totoSoilManualTip_cropNameFirst
{
    font-weight:bold;
    font-size:30px;
    margin-bottom:0px;
    margin-top:0px;
}
.totoSoilManualTip_ul
{
    margin-top:0px;
    margin-bottom:0px;
}
.totoSoilManualTip_indent1
{
    margin-left:30px !important;
}
.totoSoilManualTip_indent2
{
    margin-left:45px !important;
}
.totoSoilManualTip_indent3
{
    margin-left:60px !important;
}
.totoSoilManualTip_li
{
    font-weight:normal;
    font-size:10px;
    line-height:15px;
}
.totoSoilManualTip_p1
{
    font-weight:bold;
    font-size:20px;
    margin-bottom:0px;
    margin-top:10px;
}
.totoSoilManualTip_p2
{
    font-weight:bold;
    font-size:17px;
    margin-bottom:0px;
    margin-left:15px;
}
.totoSoilManualTip_p3
{
    font-weight:bold;
    font-size:13px;
    margin-bottom:0px;
    margin-left:30px;
}

.totoSoilBronzeTip_p2
{
    font-weight:normal !important;
    font-size:large;
    margin-bottom:0px;
    margin-left:25px;
}

.totoSoilBronzeTip_p2Heading
{
    font-weight:bold !important;
    font-size:large;
    margin-bottom:10px;
    margin-left:25px;
}
.totoSoilBronzeTip_p3
{
    font-weight:normal;
    font-size:medium;
    margin-bottom:0px;
    margin-left:40px;
}

.totoSoilBronzeTip_ul1
{
    margin-top:0px;
    margin-bottom:0px;
    font-size:medium;
    margin-left:65px !important;
    margin-bottom:25px !important;
    margin-top:15px !important;
}
.totoSoilBronzeTip_ul2
{
    margin-top:0px;
    margin-bottom:0px;
    font-size:14px;
    margin-left:80px !important;
    margin-bottom:25px !important;
    margin-top:10px !important;
}