/*
// ------------------------------------
// App-specific settings
// ------------------------------------
*/

/* This style is used by the AcgApp.isEnanced() method to determine if we are using the enhanced stylesheet */
body:after
{
	content:'default';
	display:none;
}

body
{
    max-width: 100%;
    overflow-x: hidden;	/* Causes Chrome to add a vertical scrollbar */
}

#cssCheck
{
	font-weight:800;
}

.defaultMode
{
	display: block;
}
table.defaultMode
{
	display: table;
}
.enhancedMode
{
	display: none;
}
table.enhancedMode
{
	display: none;
}
.enhancedModeTableCell
{
	display:none;
}
.enhancedModeInlineBlock
{
	display:none;
}

.myButton
{
	cursor:hand;
	cursor:pointer;
}
.myButton.acgButtonDisabled
{
	cursor:default;
	color:#cccccc;
}

.myLink
{
	text-decoration:underline;
}

.myRoundButton
{
	display:inline-block;
	font-size:1em;
	
	cursor:hand;
	cursor:pointer;
	
	border: 2px solid #004281;
	background-color:#004281;
	color:#ffffff;
	
	padding:0em 1em 0.1em 1em;

/*
	-webkit-border-radius: 0.4em;
	-moz-border-radius: 0.4em;
	border-radius: 0.4em;
*/
	
	text-decoration:none;
	
}
.myRoundButton.selected
{
	background-color:#ffffff;
	color:#0171c5;
	text-decoration:none;
	pointer-events: none;
	cursor: default;
}

.myHeaderButton
{
	jdisplay:table-cell;
	display:inline-block;
	font-size:1.2em;
	pointer-events:auto;
	
	vertical-align:middle;
	
	height:2.5em;
	min-height:40px;
	
	border: 1px solid #0099e0;
	jborder: 1px solid #00ff00;
	jborder-top:1px solid #ffffff;
	jborder-left:1px solid #ffffff;
	jborder-right:1px solid #034287;
	border-right:1px solid #009ce3;
	border-bottom:1px solid #009ce3;
		
	background-color:#0088d5;
	color:#ffffff;
	text-align:center;
	
	font-smooth:always;
	-webkit-font-smoothing: antialiased;
	
/*
	padding-left:0.5em;
	padding-right:0.5em;
	padding-top:1em;
	padding-bottom:1em;
	margin-bottom:0px;
*/
	
	jmin-width:33.3%;
	jwidth:1%;			/* not sure why this works */
	
	cursor:hand;
	cursor:pointer;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

.myHeaderButton:hover
{
	background-color:#005f98;
}

.mySelectedHeaderButton, .mySelectedHeaderButton:hover
{
	background-color: rgb(0,174,239);
}

.borderBox
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

.outerArea
{
	jbackground-color:rgb(242,242,242);
	jpadding:1em 0;
	width:100%;
	overflow-x:hidden;	/* This is required to fix "position:fixed" issues on iOS */
	joverflow:visible;
	overflow:hidden;

	/* height:100%; */
	jmin-height:100%;
	
	jtext-align:center;
	jcolor:#374850;
	jz-index:1;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

.innerArea
{
	jdisplay:inline-block;	/* caused a scrollbar to appear even though content fit */
	max-width:1600px;
	jmax-width:960px;
	jposition:relative;
	width:100%;
	/* height:100%; */
	min-height:100%;
	margin:auto;
	jtext-align:left;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	
	/* -webkit-overflow-scrolling:touch; */
	
	background-color:rgb(255,255,255);
	jpadding:1em;
	jpadding-bottom:0em;
	
	jposition:relative; /* Removed 3/26/2021 as this was causing the hamburger menu to be relative to the inner area which isn't what we want since margin affected it */
	joverflow:hidden;
	joverflow:visible;
}

.panelContainer
{
	position:relative;
	
	width:100%;
	/* height:100%; */
	min-height:100%;
	margin:auto;
	text-align:left;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	
	jbackground-color:#e6e7e9;
	jpadding-bottom:2em;
	
	jpadding:0 160px;
	/* when hidden, the panel may "cutoff" the lower content */
	joverflow:hidden;
}

.startHidden
{
	visibility:hidden;
}

.startDisplayNone
{
	display:none;
}

.noScript
{
	padding-top:1em;
	width:960px;
	margin:auto;
	color:#000000;	
}

#preloadContent
{
	padding:2em;
	text-align:center;
}

#scriptContent
{
}

.panelTable
{
	width:100%;
	/* height:100%; */	/* needed for desktop */
}
a.url
{
	text-decoration:none;
	color:#0070c5;
	joverflow-wrap:break-word;
	jword-wrap:break-word;
	word-break:break-word;	/* iOS long URLs don't break at hyphens or slashes */
}
a.url:hover
{
	jtext-decoration:underline;
}

a[href]:active
{
	color:#007493 !important;
}
a[href]:visited
{
	color:#007493 !important;
}
a[href]:hover
{
	text-decoration:none;
	color:#005073;
}

/*
.title
{
	margin-top:1em;
	font-size:2em;
	color:#53535b;
}
*/
.shareAnchor
{
	jborder:1px solid #53535b;
	background-color:#949599;
	font-size:0.6em;
	padding:0.2em 0.3em;
	text-decoration:none;
	color:#ffffff;
	cursor:pointer;
}

.acgPanelTitle
{
	text-align:center;
	jpadding:1.9em 0 1.6em 0;
}

/*
.acgGraphicFrame
{
	border-radius:12px;
	background-color:rgb(37,183,232);
	padding:1em;
}

.acgGraphicFrame img
{
	jpadding:1em;
	width:100%;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}
*/

.acg ul
{
	list-style-type:disc;
	margin-bottom:1.429em;
	margin-top:0.5em;
	padding:0;
}
.acg ul li
{
	padding:0;
	margin-left:17px;
	margin-bottom:.625em;
}
.acg
{
	jfont-size:0.9em;
}
.acgRwdWide .acg
{
	font-size:1em;
}

.acgPanelTop
{
	border-top-left-radius:15px;
	border-top-right-radius:15px;
}
.acgPanelBottom
{
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;
}
.acgPanelGray
{
	background-color:rgb(242,242,242);
}
.acgPanelDarkBlue
{
	background-color:rgb(13,39,77);
}
.acgPanelMediumBlue
{
	background-color:rgb(0,80,115);
}
.acgPanelLightBlue
{
	background-color:rgb(0,188,235);
}
.acgPanelWhite
{
	background-color:rgb(255,255,255);
}
.acgPanelGreen
{
	background-color:rgb(110,190,74);
}
.acgPanelVeryLightBlue
{
	background-color:rgb(232,245,251);
}
.acgPanelDarkGray
{
	background-color:rgb(77,76,76);
}


.acgByYear
{
	color:rgb(255,255,255);
	text-align:left;
	font-size:1.2em;
	margin-bottom:0.5em;
	white-space:nowrap;
}
.acgFootnotes
{
	font-size:0.8em;
	padding:2em 1em 0 1em;
}
.acgRwdWide .acgFootnotes
{
	padding:2em 0 0 0;
}
.acgPanel1
{
	box-sizing:border-box;
	padding:1em;
}
.acgRwdTablet .acgPanel1, .acgRwdDesktop .acgPanel1
{
	padding:20px 70px 40px 70px;
	jmargin-top:40px;
	jmargin-top:20px; /* this is messing up the left/rigth scrolling... */
}
.acgPanel2
{
	box-sizing:border-box;
	padding:1em;
	margin-top:1em;
}
.acgRwdWide .acgPanel2
{
	padding:30px 30px;
	margin-top:20px;
}
.acgCiscoLargeIcon
{
	width:100%;
	max-width:160px;	
}
.acgRwdDesktop .acgCiscoLargeIcon
{
	width:100%;
	max-width:214px;	
}
.acgCiscoIcon
{
	width:100%;
	max-width:101px;
	margin-bottom:1em;
}
.acgRwdWide .acgCiscoIcon
{
	width:125px;
	margin-bottom:0;
	padding-right:1em;
}
.acgCiscoIcon80
{
	width:80px;
}

#page2graphic
{
	background-image:url('../images/page_02_graphic.jpg');
	background-size:cover;
	background-position:33% 31%;
	jmax-height:300px;
	line-height:0;
	box-sizing:border-box;
}
.acgLeftPaddingEnh
{
	padding-left:unset;
}
.acgRwdWide .acgLeftPaddingEnh
{
	padding-left:2em;
}

#page3graphic
{
	background-image:url('../images/page_03_graphic.jpg');
	background-size:cover;
	background-position:50% 50%;
	jmax-height:300px;
	line-height:0;
	box-sizing:border-box;
	height:240px;
}
#page4graphic
{
	background-image:url('../images/page_04_graphic.jpg');
	background-size:cover;
	background-position:50% 50%;
	jmax-height:300px;
	line-height:0;
	box-sizing:border-box;
	height:240px;
}
#page5graphic
{
	background-image:url('../images/page_05_graphic.jpg');
	background-size:cover;
	background-position:50% 50%;
	jmax-height:300px;
	line-height:0;
	box-sizing:border-box;
	height:240px;
}

.acgProductSpotlightWhiteBox
{
	padding:40px;
	color:rgb(13,39,77);
}
.acgRwdPhone .acgProductSpotlightWhiteBox
{
	padding:20px;
}

.acgRwdTablet .acgPanelTitle
{
	jfont-style:italic;
}

.acgProductSpotlightScreenshot img
{
	width:100%;
	max-width:600px;
	min-width:200px;
	border:1px solid black; box-sizing:border-box;	
}
.acgRwdDesktop .acgProductSpotlightWhiteBox img
{
	min-width:400px;
}
.acgRwdDesktop .acgProductSpotlightScreenshot
{
	padding-left:40px;
}
.acgRwdWide .acgProductSpotlightScreenshot
{
	padding-left:1em;
}
.acgRwdNarrow .acgLearnMoreArea
{
	margin-bottom:1em;
}
.acgRwdNarrow .acgLearnMoreArea
{
	text-align:center;
}
.acgRwdDesktop .acgProductSpotlightText
{
	jpadding-right:40px;
}
.acgRwdWide .acgEnhancedOnlyRightPadding
{
	padding-right:2em;
}
ul.acgFeaturesList
{
	margin-bottom:35px;
}
.acgFeaturesListArea
{
	vertical-align:middle;
}
.acgRwdDesktop .acgFeaturesListArea
{
	vertical-align:top;
	padding-top:10px;
}

.acgClosingTextGradient
{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+15,1+85,0+100 */
	jbackground: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	jbackground: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	jbackground: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	jfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
.acgRwdTabletWide .acgClosingPanel
{
	text-align:center;
}

.acgRwdTabletWide .acgClosingPanel img
{
	padding-right:0 !important;
}
.acgClosingAnimationPanel
{
	position:relative;
	overflow:hidden;
}
/*
.acgRwdTabletNarrow .acgClosingAnimationPanel
{
	padding-top:5em;
	padding-bottom:5em;
}
*/
.acgRwdTabletWide .acgClosingAnimationPanel
{
	jheight:536px;
	overflow:hidden;
}
/*
*/
.acgClosingAnimation
{
	position:absolute;
	left:0;
	top:2em;
	width:100%;
	height:100%;
}
/*
.acgRwdNarrow .acgClosingAnimation
{
	padding:2em 0;
}
.acgRwdTablet .acgClosingAnimation
{
	padding-top:2em;
}
*/
.acgClosingTextArea
{
	position:relative;
	background-color:rgb(13,39,77,0.4);
	z-index:1;
	padding:4em 1em;
/*
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:2;
*/
}
/*
Why did we think we need this? It causes problems in narrow mode and seems totally unnecessary
.acgNavPanel
{
	jposition:absolute;
	jtop:85px;	// 85px header
}
*/


.acgRwdTablet .acgWithCiscoPanel, .acgRwdDesktop .acgWithCiscoPanel
{
	margin-top:20px;
}

:-moz-focusring
{
	outline: 2px solid black;
}

.acgQuoteArea
{
	background-color:white;
	border-radius:15px;
	padding:30px;
	margin:1em 0;
}
.acgQuote
{
	font-size:1.5em;
	font-style:italic;
}
.acgQuoteSource
{
	font-style:italic;
}
.acgClickableItem
{
	cursor:hand;
	cursor:pointer;
}