/* Responsive Tabs - menucool.com/jquery-tabs */

ul.rtabs
{
	text-align:left; /*set to left, center, or right to align the tabs as desired*/
	font-size:0;
	margin:0;
	padding:0;
	padding-left:20px; /*offset of the first tab when text-align is left.*/
	list-style-type:none;
}

ul.rtabs li
{
	margin:0;
	margin-right:2px; /*gap between tabs. Set it to -1px for no gap.*/
	padding:0;
	display:inline;
}

/* Level 1 */

ul.rtabs li a
{
	padding:0 10px; /* It determines tab width */
	display:inline-block;
	font-weight:normal;
	font-size:14px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height:32px;/* height of tabs */
	text-decoration: none;
	color:white;
	background:white;
	outline:none;
	border:1px solid transparent;
	border-bottom:none;
	border-radius:5px 5px 0 0;
	position:relative;
	transition: border-color .3s linear;
}

ul.rtabs li a:link, ul.rtabs li a:visited
{
	color: grey;
}

ul.rtabs li a:hover
{
	border-color: transparent;
	background:#99ff66;
	color:#333;
}

ul.rtabs li.selected a
{
	color: white;
	font-weight: bold;
	border-color: transparent;
	border-bottom: none;
	background: #33cc33;
	z-index:3;
}

ul.rtabs li.selected a:hover
{
	text-decoration:none;
	color: grey;
}

div.panel-container
{
	border: none;
	border-top:1px solid #33cc33;
	border-radius:0px;
	background-color:white;
	position:relative;
	padding:0px; margin:0px;
	outline:none;
	margin-top:-1px;
}

/* end Level 1 */

/* Level 2 */

div.panel-container ul.rtabs li a
{
	color: black;
	background: white;
}

div.panel-container ul.rtabs li a:link, div.panel-container ul.rtabs li a:visited
{
	color:grey;
}

div.panel-container ul.rtabs li a:hover
{
	border-color: transparent;
	border-color: #ffcceb;
	background:#ffcceb;
	color:white;
}

div.panel-container ul.rtabs li.selected a
{
	color: white;
	border-color: transparent;
	background: #99005a;
}

div.panel-container ul.rtabs li.selected a:hover
{
	text-decoration:none;
	color:black;
}

div.panel-container div.panel-container
{
	border:none;
	border-top:1px solid #99005a;
	border-radius:0px;
	background-color:white;
	position:relative;
	padding:0px; margin:0px;
	outline:none;
	margin-top:-1px;
}

/* end Level 2 */

/* Level 3 */

div.panel-container div.panel-container ul.rtabs li a
{
	color: black;
	background: white;
}

div.panel-container div.panel-container ul.rtabs li a:link, div.panel-container ul.rtabs li a:visited
{
	color:grey;
}

div.panel-container div.panel-container ul.rtabs li a:hover
{
	border-color: transparent;
	border-color: #e1fa9e;
	background:#e1fa9e;
	color:white;
}

div.panel-container div.panel-container ul.rtabs li.selected a
{
	color: white;
	border-color: transparent;
	background: #96c80a;
}

div.panel-container div.panel-container ul.rtabs li.selected a:hover
{
	text-decoration:none;
	color:black;
}

div.panel-container div.panel-container div.panel-container
{
	border:none;
	border-top:1px solid #96c80a;
	border-radius:0px;
	background-color:white;
	position:relative;
	padding:0px; margin:0px;
	outline:none;
	margin-top:-1px;
}

/* end Level 3 */

/* Level 4 */

div.panel-container div.panel-container div.panel-container ul.rtabs li a
{
	color: black;
	background: white;
}

div.panel-container div.panel-container div.panel-container ul.rtabs li a:link, div.panel-container ul.rtabs li a:visited
{
	color:grey;
}

div.panel-container div.panel-container div.panel-container ul.rtabs li a:hover
{
	border-color: transparent;
	border-color: #d3eef8;
	background:#d3eef8;
	color:white;
}

div.panel-container div.panel-container div.panel-container ul.rtabs li.selected a
{
	color: white;
	border-color: transparent;
	background: #32afe1;
}

div.panel-container div.panel-container div.panel-container ul.rtabs li.selected a:hover
{
	text-decoration:none;
	color:black;
}

div.panel-container div.panel-container div.panel-container div.panel-container
{
	border:none;
	border-top:1px solid #32afe1;
	border-radius:0px;
	background-color:white;
	position:relative;
	padding:0px; margin:0px;
	outline:none;
	margin-top:-1px;
}

/* end Level 4 */


/* content panel */
div.panel-container > div
{
    padding:10px 0px; /*update it to: padding:30px; if you want the content to have a left and padding within the content panel. */

    /* The two settings below should not be changed. */
    display: block;
    margin:0px;
}
div.panel-container div.inactive
{
    display: none;
}

/* loading image before ajax content is retrieved. Only applicable when Ajax is used.*/
div.ajaxLoading {background:transparent url(loading.gif) no-repeat center center; height:150px; width:20px; font-size:0;padding:0; margin:0 auto; }


/* For mobiles */
@media only screen and (max-width:560px){
    ul.rtabs{
        padding-left:0;
        box-sizing:border-box;
        border-left:2px solid #ccc;
        border-top:2px solid #ccc;
        min-width:260px;
    }

    ul.rtabs li{
        display:inline-block;
        box-sizing:border-box;
        margin-right:0;
        width:50%; /* set it to 100% for one column, 33.33% for three-column */
    }

    ul.rtabs li:last-child:nth-child(odd){
        width:100%;
    }

    ul.rtabs li a {
        background-color:#eee;
        border-top:none;
        border-left:none;
        border-right:2px solid #ccc;
        border-bottom:2px solid #ccc;
        display:block;
        padding:0;
        text-align:center;
        border-radius:0;
    }

    ul.rtabs li a:hover {
        border-color: #ccc;
        background-color:#f6f6f6;
    }

    ul.rtabs li.selected a {
        background-color:#fff;
    }

    div.panel-container {
        border-radius:0;
        min-width:260px;
        box-sizing:border-box;
        border:2px solid #ccc;
        padding:14px;
        width:auto;
    }
}