/* Groundspeak Screen Style Sheet - Last Updated 30 Jan 2017 by BS */

/*
....spacing........
	tiny: 12px;  .75rem
	small: 16px;  1rem
	medium: 24px; 1.5rem
	large 32px;  2rem
	huge: 48px; 3rem
*/

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

a, a:focus, a:hover {
	color: #2358A1;
}
a:focus, a:hover {
	outline: initial;
	text-decoration: none;
}
a:focus {
	outline: 2px solid #4a4a4a;
    outline-offset: 2px;
    border-radius: 4px;
}


input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

select::-ms-expand {
    display: none;
}

a:hover { 
	cursor: pointer;
}

dt,dd{
	margin:0;
}

.visually-hidden,
.SkipLinks a {
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

/* Begin Skip Links */
.SkipLinks {
	text-align: left;
}
.SkipLinks a {
	background-color: white;
	top: 0;
}
.SkipLinks a:focus {
	border: 1px solid #2358A1;
    clip: inherit;
    clip-path: inherit;
	height: auto;
	outline: none;
	padding: 8px 16px;
	text-decoration: none;
	width: auto;
    z-index: 1;
}
/* End Skip Links */

/* Begin Page Layout */
body {
	background-color: #fff;
	color: #4a4a4a;
	font: 16px/1.375 'Noto Sans', Arial,Helvetica,sans-serif;
}
@media screen and (min-width: 721px) {
	body {
		background-color: #f6f6f6;
	}
}
header {
	position: relative;
}
@media screen and (min-width: 961px) {
	header {
		margin: 20px 0 0;
	}
}


nav {
	font-size: .875rem;	
}
nav ul {
	margin:0;
	padding:0;
	list-style:none;
}
nav li {
	float: left;
	line-height: 2;
	margin: 2rem 0 1rem;
	padding: 0 .75rem;
	text-align: center;
	width: 50%;
}
nav li:first-child {
	padding-left: 0;
}
nav li:last-child {
	padding-right: 0;
}
nav a {
	display: block;
}
nav li + li {
	border-left: 1px solid #979797;
}
/*     line-height: 2;
    margin-top: 2rem;
    text-align: center; */



@media screen and (min-width:721px) {	
	nav {
		float: right;
		margin: 6px 0;
	}
	nav li {
		margin: 0;
		width: auto;
	}
}



/* TODO - is this still used? or from old version? */
.InformationWidget{
	font-size:14px;
	margin-bottom:19px;
	padding:16px;
	float: right;
}
@media screen and (max-width:960px) {
	.InformationWidget{
		font-size:16px;
	}
}


footer{
	color: #4a4a4a;
	font-size: .75rem;
	line-height: 1.83em;
	margin-top: 3rem;
	text-align:center;	
}
footer a,footer a:hover,footer a:focus,footer a:active{
	color:inherit;
}
@media screen and (min-width: 721px) {
	footer {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	footer span {
		display: block;
	}
}
/* End Page Layout */


/* Begin Links */
a.searchResult {
	color:#2358A1;
	text-decoration:none;
	font-size:20px;
    font-family: "Noto Sans";
    font-style: normal;
}
a.searchResult:hover {
	text-decoration:underline;
}
.searchResultText {
	line-height: 24px;
	margin-bottom: 30px;
}
.helpLink,
.bookItem,
.imageBtn {
	text-decoration:none;
}
.helpLink:focus,
.helpLink:hover,
.bookItem:focus,
.bookItem:hover,
.imageBtn:focus,
.imageBtn:hover {
	text-decoration: underline;
}
#helpDetails {
	border-top: 1px solid #4A4A4A;
	margin-top: 32px;
	padding-top: 32px;
}

article a:visited,aside a:visited,div a:visited {
	color:#551A8B;
}

article a:link,aside a:link,aside a:link,div a:link {
	color: #2358A1;
}
nav a,nav a:link,nav a:visited{
	color:#02874D;
	text-decoration:none;
}
nav a:hover,nav a:active,nav a:focus{
	color:#02874D;
	text-decoration:underline;
	border:none;
}
nav .active a,nav .active a:link{
	color:#00B265
}
hr {
	height: 1px;
	color: #4A4A4A;
}

/* End Links */
/* Begin Fonts */
h2.KnowledgeBookHeader{
	margin:1em 0 1.5em 0;
	display:block;
}

h1,h2,h3,h4,h5 {
	color: #4A4A4A;
	font-family: "Noto Sans";
	font-weight: bold;
}
h1,
.h1 {
    font-size: 2.75em; /* 44px */
    margin: 0 0 0.82em 0;
}
h2,
.h2 {
    font-size: 2em; /* 32px */
    margin: 0 0 1.12em 0;
}
h3,
.h3 {
	border-top: 1px solid #4A4A4A;
	border-bottom: 1px solid #4A4A4A;
    font-size: 1.75em; /* 28px */
    line-height: 1.375;
    margin-bottom: 1.29em;
    padding: 1rem 0;
}
h4,
.h4 {
    font-size: 1.5em; /* 24px */
    margin: 0 0 1.5em 0;
}
h5,
.h5 {
    font-size: 1.375em; /* 22px */
    margin: 0 0 1.64em 0;
}
h6,
.h6 {
    font-size: 1.25em; /* 20px */
    margin: 0 0 2em 0; /* 32px leading */
}
h1:only-child,h2:only-child,h3:only-child,h4:only-child,h5:only-child {
	margin-bottom: 0;
}
@media screen and (min-width: 721px) {
	h3, .h3 {	
		border: none;		
		padding: 0;
	}
}



code, /* code to be used by article writers; they have been using inline styles */
.callout {
	background-color: #f6f6f6;
	display: block;
	margin: 1rem 0;
	padding: 1rem;
}

.NoTopSpacing{
	margin-top:0 !important;
}
.NoBottomSpacing{
	margin-bottom:0 !important;
}
.ReverseTopSpacing{
	margin-top:1.5em !important;
}

.container {
	padding: 1rem; /* 8px 16px */
	max-width: 100%;
}
.container > .contentBox:first-child {
	margin-top: 2rem;
}

@media screen and (min-width: 961px) {
	.container {
		padding: 0;
		width: 950px;
	}
}


/* End Fonts */
/* Begin HelpSpot Specific Styles */
ul.KBList li,ul.KBSubList li{
	list-style:none;
	padding:0 0 .5em 24px;
}
ul.KBList li{
	background:url(../images/icon_folder.png) no-repeat 0 2px;
}
ul.KBSubList li{
	background:url(../images/icon_file.png) no-repeat 0 3px !important;
}
ul.KBList li ul.KBSubList{
	padding-top:.5em;
}
p.KBListPrintFriendly{
	background:url(../images/icon_print.png) no-repeat 0 3px;
	padding-left:24px;
	margin-left:1.25em;
}
.RelatedInformationWidget{
	font-size:14px;
	margin-bottom:19px;
	padding:16px;
	background-color:#e5ecf2;
}
.TagsInformationWidget{
	margin-bottom:19px;
	padding:16px;
	border: 1px solid #e5ecf2;
}
.InformationWidget ul li,.RelatedInformationWidget ul,.RelatedInformationWidget p{
	margin-bottom:0 !important;
}
.Required, .required, .error{
	background: none;
	border: none;
	color: #F35C00;
	display: inline-block;
	font-size: .875rem;
	padding: 0;
	margin-bottom:0;
}
.error p {
	margin-bottom: 0;
}

/* customize select menu apperance */
.select-container {
    background-color: #fff;
    border: 1px solid #7E7D7A;
    cursor: pointer;
    position: relative;
}
.select-container:after {
	background: url(../images/dropdown-select@2x.png) no-repeat center 0;
	background-size: 100% auto;
	content: '';
	height: 7px;
	position: absolute;
	top: 16px; /* (parentHight - assetHeight) / 2  aka (40-7)/2 & round) */
	right: 1rem;
	width: 13px;
}
.select-container select {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	height: 38px; /* 38px + parent's 2px border = 40px */
	margin: 0;
	padding: 0 2.5rem 0 1rem;
	position: relative;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    z-index: 10;
}


input[type=text], input[type=password], input.text, input.title, textarea, .select-container  {
	border-color: #7E7D7A;
	display: block;
	font-size: 1rem;
	line-height: 2;
	margin: 0;
	width: 100%;
}
input[type=text], input[type=password], input.text, input.title, textarea {		
	padding: .2rem .75rem;
}
input[type=text], input[type=password], input.text, input.title {
	height: 40px;
}
textarea {	
	padding-top: .75rem;
	padding-bottom: .75rem;
}
/* input error states */
input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus, .select-container.focused  {
	border-color: #00B265;
	-webkit-box-shadow: 0 0 5px 0 #00B265;
	-moz-box-shadow: 0 0 5px 0 #00B265;
	box-shadow: 0 0 5px 0 #00B265;
}
.select-container.focused:after {
	background-position: center -7px;
}
.error ~ input[type=text], .error ~ input[type=password], .error ~ input.text, .error ~ input.title, .error ~ textarea, .error ~ .select-container {
	border-color: #F35C00;
}
.error ~ .select-container:after {
	background-position: center -14px;
}
.error ~ input[type=text]:focus, .error ~ input[type=password]:focus, .error ~ input.text:focus, .error ~ input.title:focus, .error ~ textarea:focus, .error ~ .select-container.focused {
	-webkit-box-shadow: 0 0 5px 0 #F35C00;
	-moz-box-shadow: 0 0 5px 0 #F35C00;
	box-shadow: 0 0 5px 0 #F35C00;
}





form dt .required {
	color: #4a4a4a;
	font-weight: normal;
	padding-left: 0;
}
form dt {
	margin-top: 2rem;
}



.Button {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;   
    -webkit-transition: background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out;
    -moz-transition: background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out;
    -o-transition: background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out;
    transition: background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out;
    border: 2px solid;
    cursor: pointer;
    font-size: 1em;
    line-height: 1.375;
    padding: .4375em 1.25em;
    text-align: center;
    text-decoration: none;
    display: block;
}
.btn {
	cursor: pointer;
}
.btn-search {
    background: url('../images/grey_search_icon.png') no-repeat center center;     
    border: none;
    height: 100%;
    image-rendering: optimizeQuality;
    right: 0;
    margin: 0;
    overflow: hidden;
    padding-left: 1em;
    padding-right: 1em;
    position: absolute;
    text-indent: 140px;
    top: 0;
    white-space: nowrap;
    width: 52px;
}

@media screen and (min-width: 721px) {
	.btn-search {
		background: #00b265 url(../images/search@2x.png) no-repeat 50% 50%;
    	background-size: 20px 21px;
	    padding-left: 2em;
	    padding-right: 2em;
	    text-indent: 72px;
	    width: 72px;
	}
	.btn-search:hover, .btn-search:focus, .btn-search:active {
		background-color: #02874d;
	} 
}
.btn-primary {
	background-color: #00B265;
	border-color: #00B265; 
	color: #fff;
}
.btn-primary:hover {
	background-color: #02874d;
	border-color: #02874d;
}
.AlignRight{
	text-align:right;
}
table.recaptchatable{
	width:75% !important;
}
tbody tr:nth-child(even) td,tbody tr.even td{
	background:transparent !important;
}


.captcha {
	clear: both;
	padding-top: 2rem;
}

/* Begin Request Form - Suggested Article */
#suggested-solution{
	display:none;
}
.callout .title{
	font-weight: bold;
}
.callout li p {
    margin-bottom: 0;
}
.callout p:last-child {
	margin-bottom: 0;
}

form .btn-primary {
	margin: 1rem 0;
}
/* End Request Form - Suggested Article */


.headerContainer {
	background-color: white;
}
/* the text */
.headerContainer header .logo {
	color: #02874D;
	display: inline-block;
	font-size: 22px;
	font-weight: bold;
	text-decoration: none;
}
/* the icon */
.headerContainer header .logo-square {
    margin: 0 6px 2px 0;
    vertical-align: middle;
    width: 34px;
}
@media screen and (min-width: 961px) {
	.headerContainer .container {
		padding: 2px 0 22px 0;
	}
}


/* Banner */
.bannerContent {
	text-align: center;
}
.bannerTitle {
	color: #FFF;
	font-family: "Noto Sans";
    font-size: 2rem;
    font-weight: bold;
	line-height: 1.375;
	margin-bottom: 0;
    padding-top: 65px;
    width: 100%;     
}
.bannerContent .bannerTitle a,.bannerContent .bannerTitle a:hover, .bannerContent .bannerTitle a:focus {
	color: #fff;
	text-decoration: none;
}
@media screen and (max-width:720px) {
	/* set as visually hidden for smaller screens */
	.bannerTitle {
		clip: rect(0 0 0 0); 
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap; 
		width: 1px;
	}
}
@media screen and (min-width:721px) {
	.bannerContent {
	    background: url('../images/banner_bg.jpg') no-repeat center center;
		background-size: cover;
	    height: 250px;
	    visibility: visible;
	}
	.bannerForm {
		margin-top: 1rem;
	}
}
@media screen and (min-width: 1500px) {
	.bannerContent {
		background-size: cover;
	}	
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	@media screen and (min-width:721px) {
			.bannerContent {
				background-image: url('../images/banner_bg@2x.jpg');
			}
	}
}


/* Search */
.search-field {
	max-width: 950px;
	margin: 0 auto;
}

.search-field .input-wrapper {
	border-top: 2px solid #4a4a4a;
	border-bottom: 2px solid #4a4a4a;	
	position: relative;
}

input.searchInput { 
	border: none;
	color: #4A4A4A;
	font-family: "Noto Sans";
	font-size: 16px;
    font-style: normal;       
	height: 40px;
	margin: 0;
	padding: 0 52px 0 1em;	
	vertical-align: middle;
	width: 100%;
}

a.searchInput:hover {
    background-color: #02874D;
}

@media screen and (min-width: 721px) {
	.search-field .input-wrapper {
		border: 1px solid #7e7d7a;
    	-webkit-box-shadow: 0 0 5px 0 #7e7d7a;
    	-moz-box-shadow: 0 0 5px 0 #7e7d7a;
    	box-shadow: 0 0 5px 0 #7e7d7a;
    	display: inline-block;
	}
	input.searchInput {
		background: #fff;
		width: 500px;
	}
}		

/* Button field 4 icon links. 3 go to youtube */
.buttonField {
	height: 0;
	overflow: hidden;
	text-align: center; 
    visibility: hidden;
}
.buttonField div {
	color: #4A4A4A;
	flex-basis: 100%; /* TODO flex fallback styles */
    font-family: "Noto Sans";
    font-size: 14px;        
}
.buttonField .imageBtn {
	color: #4a4a4a;
	display: inline-block;
}
.imageBtn:hover, .imageBtn:focus, .imageBtn a:active {
	color: rgba(74, 74, 73, 0.5); /* #4a4a4a at 50% */
    opacity: 0.5;
    filter: alpha(opacity=50);
    text-decoration: none;
} 
.imageBtn span {
	display: block;
}

@media screen and (min-width: 721px) {
	.buttonField {
		display: flex; /* TODO */
		height: auto;
	    padding: 2rem .75rem;	    
	    visibility: visible;   	
		width: 100%;
	}
	.buttonField + .breadcrumbs {
		display: none;
		visibility: hidden;
	}
}


.gcbanner {
	width: 100%;
	text-align: center;
	overflow: hidden;
	height: 200px;
}

.gcbannerImg {
	position: relative;
	left: 100%;
	margin-left: -200%;
}

/* Content */
.contentBox{
	background-color: #FFF;	
	clear: both;
	word-break: break-word;
	line-height: 24px;
	margin-top: 16px;
	overflow: hidden;
}

@media screen and (min-width: 721px) {
	.contentBox{
		border: 5px solid;
		border-color: #F1F1F1 #F1F1F1;
		border-radius: 5px;
		padding: 2rem;
	}
} 
.contentBox:after {
	clear: both;
	content: '';
	display: block;
}
.contentBox img {
	height: auto;
	max-width: 100%;
}


/* still looking - contact us*/
.icon-expand {	        
	position: absolute;
	top: 0; right: 0;
	vertical-align: bottom;
}
@media screen and (min-width: 721px) {
	.icon-expand {     
		position: relative;
		right: initial;   
	}
}

.expandable {
	margin-top: 2rem;
	background-color:white;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-style: solid;
	margin-left: -1rem;
	margin-right: -1rem;
	padding: 0 1rem;
	position: relative;
}
.expandable .ex-control {  
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.ex-control:focus + label ,
.ex-control:hover + label {
	opacity: 0.5;
    filter: alpha(opacity=50);
}
.ex-control + label {
    cursor: pointer;     
    display: block;  
    font-size: 1.25rem; 
    font-weight: normal;
    line-height: 32px; /* height of supporting icon */
    margin: 1rem 0;
    padding-right: 3rem;
    position: relative;
    display: inline-block;
}
.ex-control + label span {
    display: inline-block;
}
.expandable .ex-panel  {       
    max-height: 0; /* hide the panel content by default */
    overflow: hidden;
    /*transition: max-height 1s;*/
}
.ex-panel input[type="submit"],
.form-request input[type="submit"] {	
    clear: both;
    display: inline-block;
    margin-top: 1em;
    margin-bottom: 1em;    
}   
.ex-panel:after {
    content: '';
    clear: both;
    display: block;
}
.expandable .icon {
    height: 32px;
    margin: 0 0 0 1rem;
    width: 32px;
    /*transition-duration: 1s;  set transition properties here, call transform rotate on checked 
    transition-property: transform; */
}    
.expandable input:checked + label .icon {
    transform: rotate(-180deg); /* will animate on open/close (checked/unchecked) */
}
.expandable input:checked ~ article {
    /*max-height: 5000px; */
    max-height: 100%;
    max-height: auto;
    overflow: visible;
}

@media screen and (min-width: 721px) {
	.expandable {
		border-width: 5px;
		margin: 1rem 0 0;
		padding: 0 2rem;
	}
}


/* breadcrumbs bar */
.breadcrumbs {
	font-size: .875rem;
}
.breadcrumbs span {
	margin: 0 1rem;
}
.breadcrumbs a, .breadcrumbs span {
	display: none;
}
.breadcrumbs span:last-child {
	margin: 0;
}
.breadcrumbs .crumb-parent {
	display: block;
}
.page-home .breadcrumbs {
	display: none;
}
.page-home h3, .page-home .h3 {
	border-top: none;
	padding-top: 0;
}
.page-home .contentBox {
	margin-top: 0;
}

/* google translate */
#google_translate_element {
	padding-top: 1em;
}
#google_translate_element .goog-te-gadget .goog-te-combo {
	width: 150px;
}


@media screen and (min-width: 721px) {
	.breadcrumbs {	
		float: left;
		padding-top: 2rem;
		padding-right: 1em;
		margin: 0 0 .5rem 5px;
		max-width: 70%;
		word-wrap: break-word;
	}
	.breadcrumbs a, .breadcrumbs span, .breadcrumbs .crumb-parent {
		display: inline;
	}
	#google_translate_element {
		float: right;
		padding-bottom: 1em;
	}
}




/* used in main content */
.listItem {
	border-bottom: 1px solid #DFDFDF;
	padding: .5em 0;
}
.contentBox .listItem a {
	display: block;
	color: #4a4a4a;
	padding: .5em 0;
}
.span-11:last-child .listItem:last-child,
.last > .listItem:last-child {
	border-bottom: none;
}
@media screen and (min-width: 721px) {
	.listItem {
		border: none;
		line-height: 1.875em;
		padding: 0;
	}	
	.contentBox .listItem a {
		padding: 0;
	}
}


/* contact form */
.formDiv {
	float:left;
	display:block;
}
.formLabel {
	display: block;
	font-size: .875rem;
	font-weight: normal;
	margin-top: 2rem;
}


/* thank you for submitting contact form page */
.container-confirm {
	text-align: center;
}
.container-confirm .h3 {
	margin-bottom: .75rem;
}
.container-confirm p  {
	margin-bottom: 0;
}


/* Begin Tablets */
@media screen and (max-width:960px) {
	[class*="span-"],input[class*="span"],textarea[class*="span"] {
		width:100%;
	}
	[class*="prepend-"]{
		padding-left:0;
	}
	[class*="append-"]{
		padding-right:0;
	}
	[class*="pull-"],[class*="push-"]{
		margin-left:0;
	}
	[class*="push-"]{
		margin-right:0;
	}
}

/* Begin Mobile */
@media screen and (max-width:720px) {	
	.topicListWithPage {
		display: none;
	}

	.topicListTitle {
		line-height: 38px;
	}

	#helpDetails {
		border-top: 0 solid #4A4A4A;
		margin-top: 0;
		padding-top: 0;
	}
}

.feedback-provided {
	font-weight: bold;
}

.page-search .container-topics .breadcrumbs {
	display: none; /* hide second set of breadcrumbs on search page - because of how templates are linked */
}

.file-upload .formLabel {
	display: block;
	margin-bottom: 5px;
}
.file-upload label {
	font-weight: normal;
}
.file-upload input {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.file-upload span {
	display: inline-block;
}
.file-upload .file-name {
	font-size: 14px;
}
.btn-pill {
	color: #4a4a4a;
    border: 1px solid #4a4a4a;
    padding: 0.5em 0.75em;
    margin-right: 12px;;
    border-radius: 25px;
    font-size: 14px;
    background: transparent;
    line-height: 1;
}
.btn-pill:hover,.btn-pill:active,.btn-pill:focus {
	border-radius: 25px;
    color: #fff;
}
.btn-pill.primary {
    color: #3D76C5;
    border-color: #3D76C5;   
}
.btn-pill.primary:hover,.btn-pill.primary:active,.btn-pill.primary:focus,
.file-input:focus + label .btn-pill,.file-input:active + label .btn-pill {
	background-color: #3D76C5;
	color: #fff;
}