/* These styles are defined to override the style defined in Juniper standrad CSS file.*/

@import url("new-index-page-styles.css");

.slice-3col > .leftnav {
    width: 0%;
    display: none;
}
.hero-content .hero-title {
	font-size: 3.5rem;
	line-height: 7.25rem;
}
#body {
	width: 79%;
	border-left: none;
}
.pIntro > ul {list-style: none;}
ul.tabListNoJS {
	list-style: none;
	border-bottom: 1px solid #dbdbdb;
	float: left;
	position: relative;
    	width: 100%;
}
.tabNavWrapper {
	height: 673px;
}
#helpContainer {
    float: right;
     font-family: "Lato",Arial,Helvetica,sans-serif;
    font-weight: 500;
    font-size: 12px;
    right: 0;
    top: 2px;
    margin-right: 35px;
    margin-top: 25px;
    padding-right: 0 !important;
    position: absolute;
    z-index: 9 !important;
	display:none;
}
#helpContainer:hover #popUpDiv{
    display: block
}
#helpContainer .media-alt .media-content {
    color: #3c9ac9;
    text-decoration: none;
    transition-duration: 0.3s;
    transition-property: color;
}

#popUpDiv {
    display: none;
    border: 1px solid #ccc;
    left: 0;
    margin: 0;
    padding: 10px;
    position: absolute;
    top: 30px;
    white-space: nowrap;
    width: 208px;
    background-color: #FEFEFE;
}

.popUpItem {
	float: left;
	width: 100%;
	padding: 0 2px;
	min-height: 30px;
}
.popUpItem a {
	color: #3c9ac9;
}
.popLabel {
    background-color: #039be5;
	color: #fff;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 8px 30px 8px 10px;
    color: #fefefe;
}

.popLabel img {
    margin-left: 3px;
    padding-bottom: 2px;
}
.fTabC, .tabC, .lTabC {
	display: none;
}
#tabs{
	display: block;
}
.rowhead {
	 font-family: "Lato",Arial,Helvetica,sans-serif;
    font-weight: 500;
	font-size: 1.3rem;
	line-height: 1.9rem;
}
#mobileTabContent {
	display: none;
}
.accordion.accordion-active .accordion-child {
	max-height: 2000px;
}
#mobileTabContent table {
	background-color: #ffffff;
	margin-bottom: 10px;
}
#mobileTabContent .rowhead {
	font-size: 100%;
}
#mobileTabContent tbody p {
	margin-bottom: 0;
}
#mobileTabContent tbody a {
	font-size: 85%;
}
.tab-cordion{padding:0;border-top:none;}
#tabNavWrapper{height:inherit !important;}
.tab-cordion .tab-cordion-child {
	float: left;
}
.tab-cordion-child a {
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: background-color;
	-moz-transition-property: background-color;
	-o-transition-property: background-color;
	transition-property: background-color;
	display: block;
	position: relative;
	margin-right: 5px;
	padding: 12px 20px 10px 20px;
	border: 1px solid #dbdbdb;
	border-bottom: none;
	behavior: url(/assets/pie/PIE.htc);
	-webkit-border-radius: 6px 6px 0px 0px;
	-moz-border-radius: 6px 6px 0px 0px;
	-ms-border-radius: 6px 6px 0px 0px;
	-o-border-radius: 6px 6px 0px 0px;
	border-radius: 6px 6px 0px 0px;
	font-size: 1.2rem;
	line-height: 2.55rem;
	letter-spacing: 0.00135rem;
	cursor: pointer;
	background-color: #eaeaea;
	color: #6c6c6c;
}

.tab-cordion-active a {
    background-color: #f9f9f9;
    border-top: 3px solid #3c9ac9;
    padding-top: 10px;
}

table {
	width: 100%;
	float: left;
}
div.table table {
	float: none;
}

div.table {
	background-color: #ffffff;
	margin-bottom: 10px;
}

.table p {
	margin-bottom: 10px;
}

.table a {
    font-size: 1.3rem;
    line-height: 1.9rem;
}

.tabCont table td{
	border: none;
	padding-left: 0;
	padding-right: 20px;
	vertical-align: top;
}

.tabCont table {table-layout: fixed;}

div.table td {
	border: 1px solid #dbdbdb;
	padding-left: 15px;
}

.tab-cordion-border-knock-out {
	background-color: #f9f9f9;
	bottom: -2px;
	height: 4px;
	left: 0;
	opacity: 0;
	position: absolute;
	width: 100%;
}

.tab-cordion-active .tab-cordion-border-knock-out {
	opacity: 1;
}


.header-search.is-active {
    left: 600px;
}

/* 320px - 640px*/
@media only screen
and (min-width:20em)
and (max-width:40em){
	.header-search.is-active {
	    left: 0px;
	}
	.slice-3col > .leftnav {
	    display: block;width:110%;
	}
	#body {
		width: 100%;
	}
	#tabs{
		display: none;
	}
	#mobileTabContent {
		display: block;		
	}
	.mobile-toc-link{display:none;}
}
@media only screen and (max-width:768px){
.slice-3col>.leftnav{display: block;width:110%;}
}
@media only screen and (min-width:769px){
.slice-3col>.leftnav{width: 0%;display: none;}
}
@media only screen and (min-width:641px) and (max-width:768px){
.tab-cordion .tab-cordion-child{width:auto;}
}