/* Lato font */
@import url('https://fonts.googleapis.com/css?family=Lato:900');
 
h1.title {
	font-size: 36px !important;
	font-weight: 900 !important;
	margin-top: revert;
}
 
h1, h2, h3, h4, h5, h6 {
	font-family: Lato,HelveticaNeueBold,HelveticaNeue-Bold,"Helvetica Neue Bold",HelveticaBold,Helvetica-Bold,"Helvetica Bold",HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
	line-height: 160%;
}

.content li {
	line-height: 160%;
}

code {
	padding: 2px 4px;
	/* font-size: 90%; */
	color: #c7254e;
	background-color: #f9f2f4;
	border-radius: 4px;
}

/* hide taxonomy */
.terms{ display:none; }

/* compact header area */
#primary-menu-wrapper{ margin: -26px auto 0 auto; }
#primary-menu{ margin-top: 0 !important; }

#header {
	min-height: 125px;
}

@media(min-width: 975px){
    #body{margin:0 auto}
    #primary-menu-wrapper { margin: 0 auto; padding-left: 13px; }
	#sidebar-first { margin-top: 92px !important;  }
}

/* mobile */
@media (max-width: 974px){
	body{ overflow-x: hidden; }

	#header,
	.layout-first-main #sidebar-first,
	#search-box,
	#primary-menu-wrapper,
	#main,
	#content-wrapper,
	#postscript-wrapper,
	#postscript-wrapper.postscripts-2 div.column,
	#footer{
		width: 100% !important;
	}

	#header-wrapper{ padding-left: 0; }
	#search-box, #header-first{ float: none; }
	#search-box input#edit-search-theme-form-1{ width: 60%; height: 2em; }
	#search-box input.form-submit{ width: 30%; height: 2.2em; }
	#header-first{ margin: 12px auto; }
	#header-last{ display: none; }
	#primary-menu{ font-size: 1.4em; }
	#primary-menu ul.menu li{ margin: 10px 10px 0 0; }
	#main-wrapper{ padding: 0 5px; }
	h1.title{ text-align: center; }
	#block-menu-menu-footer .menu li{
		float: none;
		margin: inherit;
	}
}

/* PDF documentation link: red */
li.leaf a[href$="appgini-documentation.pdf"]{ color: #d00; }

/* global text color */
html{ color: #333; }

/* better-looking search results */
.search-result {
	border-bottom: solid 1px gainsboro;
	padding: 2em 0;
}

/* TOC links on the left sidebar */
#sidebar-first .leaf:hover{ background-color: #CCE6F3; }
#sidebar-first .collapsed:hover{ background-color: #CCE6F3; }
#sidebar-first .leaf, #sidebar-first .collapsed{
	border-bottom: dotted 1px silver;
	cursor: pointer;
}
#sidebar-first .leaf:last-child{ border-bottom: none; }
#sidebar-first .collapsed:last-child{ border-bottom: none; }
#block-menu-menu-online-help a{ display: block; }

.download-btn {
	-moz-box-shadow:inset 0px 1px 0px 0px #e184f3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #e184f3;
	box-shadow:inset 0px 1px 0px 0px #e184f3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c123de), color-stop(1, #a20dbd));
	background:-moz-linear-gradient(top, #c123de 5%, #a20dbd 100%);
	background:-webkit-linear-gradient(top, #c123de 5%, #a20dbd 100%);
	background:-o-linear-gradient(top, #c123de 5%, #a20dbd 100%);
	background:-ms-linear-gradient(top, #c123de 5%, #a20dbd 100%);
	background:linear-gradient(to bottom, #c123de 5%, #a20dbd 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c123de', endColorstr='#a20dbd',GradientType=0);
	background-color:#c123de;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #a511c0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	font-family:Arial;
	font-size:20px;
	padding:7px 30px;
	text-decoration:none;
	text-shadow:0px 1px 0px #9b14b3;
}
.download-btn:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a20dbd), color-stop(1, #c123de));
	background:-moz-linear-gradient(top, #a20dbd 5%, #c123de 100%);
	background:-webkit-linear-gradient(top, #a20dbd 5%, #c123de 100%);
	background:-o-linear-gradient(top, #a20dbd 5%, #c123de 100%);
	background:-ms-linear-gradient(top, #a20dbd 5%, #c123de 100%);
	background:linear-gradient(to bottom, #a20dbd 5%, #c123de 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a20dbd', endColorstr='#c123de',GradientType=0);
	background-color:#a20dbd;
	text-decoration: none;
}
.download-btn:active {
	position:relative;
	top:1px;
}
.download-btn small{
	display: block;
	font-size: 0.65em;
	text-align: center;
	margin-bottom: -2px;
}

#header-first {
	margin:26px 30px 0 0;
}
  
#main-wrapper a.active {
	color: #30527A !important;
	text-decoration: none;
	background-color: #CCE6F3 !important;
	padding-left: 2px;
}

.syntaxhighlighter .toolbar {
	display: none;
}

.content p {
	margin-bottom: 1.5em;
}

.messages.status {
	line-height: 160%;
	padding: 1em;
	font-weight: normal;
}

#edit-submitted-email {
	color: #900;
	letter-spacing: 3px;
}

#edit-submitted-subject {
	width: 95.3%;
	padding: 10px;
}

#webform-component-name, #webform-component-email, #webform-component-screenshot, #webform-component-axp-project-file {
	float: left;
	margin: 0 5% 0 0;
	width: 100%;
	max-width: 415px;
}

#edit-submitted-email, #edit-submitted-name {
	font-size: 1.5em;
	width: 100%;
	padding-left: 4px;
	font-family: Lato,HelveticaNeueBold,HelveticaNeue-Bold,"Helvetica Neue Bold",HelveticaBold,Helvetica-Bold,"Helvetica Bold",HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

kbd {
	background-color: #eee;
	border-radius: 3px;
	border: 1px solid #b4b4b4;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
	color: #333;
	display: inline-block;
	font-size: .85em;
	font-weight: 700;
	line-height: 1;
	padding: 4px 8px;
	white-space: nowrap;
}

/* 
 For wrapping youtube iframes inside a responsive div
 https://css-tricks.com/fluid-width-video/
 */
.responsive-video {
  position: relative;
  /* default aspect ratio is 16:9 -- override by adding style="--aspect-ratio: 3 / 4;" to div.reponsive-video */
  padding-bottom: calc(var(--aspect-ratio, .5625) * 100%);
  height: 0;
}
.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.release img {
	max-width: 100%;
}

.release video {
	max-width: 100%;
	height: auto;
}

/* 2-col layout for features with screenshots */
.grid-cell-vcentered {
	padding: 2rem;
	align-self: center;
}
.grid-2-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	line-height: 160%;
}