/* =================================================================================

APSN DIGEST MAIN LAYOUT CSS

Note that flyout search form at top left is hidden,
css is at bottom of this file

Color notes:

	color: #000066;	navy blue
	color: #003667; dark blue 
	color: #286ea0;	ocean blue
	color: #b22222;	rust red
	color: #ffcc00; canary yellow
	color: #444;	off black grey for body text
	color: #808080;	grey
	color: #F5F5F5;	very light grey for backgrounds
	color: #708090; slate grey

====================================================================================*/

html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

.container {			/* this styles all blocks header, content, sidebars etc */
	max-width: 75em;
	margin-left: auto;
	margin-right: auto;
	width: auto;
	padding-left: 0;
	padding-right: 1em;
	border-left: solid 1px #ccc;
}

.container::after {
  clear: both;
  content: "";
  display: table;
}

/* set to full width for mobile view */

#content {
	/*
	float: left;
	display: block;
	margin-left: 18%;
	width: 82%;
	*/
	width: 100%;
	margin-left: 0;
	min-height: 100em;
}

/* set to full width for mobile view */

#sidebar-first {
	/*
	float: left;
	width: 18%;
	margin-left: -100%;
	*/

	margin: 0;
	width: 100%;
}

#footer {
  float: none;
  clear: both;
}

#header, #footer,
#sidebar-first,
#sidebar-second,
#navigation {
  background: rgba(170, 170, 170, 0.2);
	background: #ffffff;
}

#header,
#footer,
.mission,
.breadcrumb,
.node {
  clear: both;
}

/* this makes alt image text invisible during loading */

img {
	font-weight: normal;
	color: #fff;
}

/* CONTENT AREA STYLING */

.node {}

#content-area {}

#content {
	border-left: solid 0.5px #ccc;
	padding-left: 1em;
	margin-bottom: 0.5em;
}

/* =================================================================================
** SITE NAVIGATION MENU
**
** Styling for navigation menu tabs below site banner
**
================================================================================= */

.main-navigation {
	display: flex;
	flex-direction: row;
	justify-content: space-around;

	padding: 0;
	clear: both;
	color: #000;
	height: 1.60em;
	margin-bottom: 1.5em;
	border-bottom: none;
}

.main-navigation a {

	/* makes each element same size and grow to fit */

	flex: 1 1 0px;
	text-align: center;

	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	background-color: #000;
	color: #fff;

	line-height: 1.55em;
	margin-right: 1px;

	/*
	white-space: nowrap;
	*/
	overflow: hidden;

	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;

	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;

	border-bottom: solid 1px #ffffff;

	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.main-navigation a:hover {
	background-color: #fff;
	color: #000;
	transition: background-color 0.5s ease;
}

/* make the second tab (Indonesia) slightly wider for small displays */

.main-navigation a:nth-child(2) {
	flex-grow: 1.2;
}

.main-navigation .active-tab {
	background-color: #fff;
	color: #808080;
}

.main-navigation .active-tab:hover {
	color: #000;
	transition: color 0.5s ease;
}

/* default hide long version of main navigation tags for phones */

.main-navigation span {
	display: none;
}

/* =================================================================================
** APSN SITES BLOCK
**
** Styling for APSN sites and info in left sidebar
**
================================================================================= */

.apsn-sites {
	border-left: solid 1px #ccc;
}

.apsn-sites .sidebar-image {
	width: 100%;
	height: auto;
	margin-bottom: 1em;
	display: block;
	margin-top: -2em;
	display: none;
}


.apsn-sites .apsn-sites-item {
	display: inline-block;
	margin-left: 0.5em;
	margin-right: 1em;
	margin-bottom: -1em;
}

/* sidebar images (screenshots) of websites now disabled */

.apsn-sites .site-image {
	border: solid 2px #ccc;
	margin-bottom: 1em;
	margin-right: 1em;
	width: 45%;
	float: left;
	display: none;
}

#sidebar-first p {
	font-size: 0.9em;
	color: #444;
}

#sidebar-first h2 {

	color: #000;
	color: #b22222;
	color: #000066;
	color: #003667;
	font-size: 1.2em;
	margin-left: 0.5em;
	margin-bottom: 0;
	border-bottom: solid 1px #ccc;
	border-bottom: solid 1px #ffcc00;
	width: 90%;
	padding-bottom: 0.1em;
}

#sidebar-first h3 {
	font-size: 1.1em;
	color: #b22222;
	color: #286ea0;
	color: #708090;
	color: #333;
}

#sidebar-first li {
	margin-left: -1.5em;
} 

#sidebar-first a {
	color: #808080;
	color: #286ea0;
	color: #708090;
	font-weight: bold;
	font-size: 0.9em;
}

#sidebar-first a:hover {
	color: #b22222;
	transition: color 0.5s ease;
}

/* =================================================================================
** FOOTER BLOCK STYLING
**
================================================================================= */

.footer-navigation {
	text-align: center;
	margin-bottom: 5em;
	padding: 1em 1em 0 1em;
	border-top: solid 1px #ccc;
}

.footer-navigation a {
	color: #708090;
	font-weight: bold;
	border-left: solid 2px #708090;
	padding-left: 0.5em;
}

.footer-navigation a:first-child {
	border: none;
}

.footer-navigation a:hover {
	color: #b22222;
	transition: color 0.5s ease;
}

/* =================================================================================
** SEARCH FORM
**
** NOTE: ENTIRE SEARCH FORM IS HIDDEN (BOTTOM OF THIS FILE)
**
** Styling for search form at top right of site
** 
** For large displays remains visible at top right. For small display only the
** eyeglass image is visible which flys out when clicked.
**
================================================================================= */

/* set position to relative to contain absolute position elements inside it */

#content-area {
	position: relative;
}

/* this fixes problem with new theme */

#block-basic-search .form-type-search {
	width: 100%;
	display: block;
	height: 2em;
}

/* search form wrapper positioned at top right of header */

#block-basic-search {
	position: absolute;
	z-index: 1;
	top: 0;
	top: 0.1em;
	right: 0;
	height: 2.2em;
	outline: none;
}

/* search text input form */

#block-basic-search .form-search {
	font-size: 1em;
	padding: 0.1em;
	margin: 0.3em 0.3em 0.3em 0.3em;
	margin: 0.2em;
	margin: 0;
	width: calc(100% - 2.5em);
	color: #333;
	float: left;
	height: 1.9em;
	outline: none;
}

/* eyeglass image for toggle-search and form submit buttons */

#block-basic-search .toggle-search,
#block-basic-search .form-submit {

	float: right;
	padding: 0;

	opacity: 0.5;
	cursor: pointer;

	background:url(/sites/default/files/inline-images/advanced-search.png);
	background-repeat: no-repeat;

	/* this must be the same so image and button fit nicely */

	background-size: 2em 2em;
	width: 2em;
	height: 2em;

	/* this hides the button text */

	white-space: nowrap;
	overflow: hidden;
	border: none;
	text-align: left;
	outline: none;
	text-indent: -9999px;
}

/* eyeglass opacity changes to 1 on hover */

#block-basic-search .form-submit:hover,
#block-basic-search .toggle-search:hover {
	opacity: 1;
	transition: all 0.5s ease;
}

/* when toggle-search gets focus the #search-block-form 'flys out' from the left 
** the focus-within keeps it open until mouse clicks somewhere else on page
*/

#search-block-form:focus-within,
.toggle-search:focus ~ #search-block-form {
	max-width: calc(100% - 2em);
	max-width: 100%;
	transition: all 0.5s ease-in-out;
}

/* #search-block-form is initially 'hidden' by setting max-width to 0 */

#search-block-form {

	overflow: hidden;
	white-space: nowrap;
	position: absolute;
	z-index: 1;

	width: 100%;
	max-width: 0;
	transition: all 0.5s ease-in-out;
	
	padding: 0.1em;
	padding: 0;
	right: 0;
	height: 2em;
}

/* =================================================================================
** SEARCH PAGE/FORM
**
** Styling for search page results
**
================================================================================= */

/* hide search help and advanced search links */

#edit-help-link, #edit-advanced {
	display: none;
}

.search-form label {
	color: #708090;
	font-weight: bold;
	font-size: 1.2em;
	margin-right: 0.2em;
}

.form-search {				/* text imput */
	display: inline-block;
	padding: 0;
	margin-right: 0.5em;
	horizontal-align: center;
}

.search-form .form-submit {	/* submit button */
	background-color: #000;
	border-radius: 5px;
	width: 6em;
	height: 2.2em;
	padding: 0;
	display: inline-block;
	margin-top: -0.3em;
	border-solid: solid 1px #ccc;
}

.search-form .form-submit:hover {
	background-color: #fff;
	color: #000;
	transition: background-color 0.5s ease;
}

/* result headings */

ol li h3 a {
	color: #b22222;
	color: #000;
	color: #003667;
	color: #000066;
}

.search-form a {
	color: #003667;
}

ol li h3 a:hover {
	color: #b22222;
}

/* =================================================================================
** BASE
**
** Styling for basic site elements
**
================================================================================= */

/* NOTE: These elements were styled in the bottom part of base.css which has been disabled */

.links {		/* Read More, selects whole thing */
	background-color: #F5F5F5;
}

.links li {	/* Read More just the link item */
	background-color: #F5F5F5;
}

.more-link a {
	font-weight: bold;
	color: #b22222;
	color: #808080;
	color: #286ea0;
	color: #708090;
	padding-left: 1em;
}

.more-link a:hover {
	color: #286ea0;
	color: #b22222;
	text-decoration: none;
	transition: color 0.5s ease;
}


#block-basic-content h2 span {		/* this only affects article headings */
	color: #286ea0;
	color: #708090;
	color: #b22222;
	color: #000066;
	color: #003667;
}

/* this styles article count header for views */

.default-view header h3,
.taxonomy-term-view header h3 {
	color: #000;
	color: #808080;

	font-size: 1em;
	font-style: normal;
	border: none;
	margin-bottom: 0;
}

/* ------------

NOTE: This is used for debugging because sometimes Drupal ads <p><span>
to paragraphs in the body of articles, so this highlights it in yellow 

--------------- */

#block-basic-content p span {
	background-color: yellow;
}

#block-basic-content h2 {	/* title of pages and views */
	color: #286ea0;
	color: #708090;
	color: #b22222;
	color: #000066;
	color: #003667;
	font-size: 1.6em;
	border-bottom: solid 1px #ccc;
	border-bottom: solid 1px #ffcc00;	
	padding-bottom: 0.1em;
	margin-bottom: 1em;
}

.content a {	/* this affects links in content (body of article etc) */

	color: #191970;
	color: #00008B;
	color: #808080;
	color: #286ea0;
	color: #708090;
	text-decoration: none;
	font-weight: bold;

}

.content a:hover {	/* this affects links in content (body of article etc) */
	color: #b22222;
	text-decoration: none;
	font-weight: bold;
	transition: color 0.5s ease;
}

/* this affects the page view DR heading, don't know why */

a {
	text-decoration: none;
	color: #000080;
	color: #b22222;
}

a:hover {
	text-decoration: none;
	color: #708090;
	color: #808080;
	color: #b22222;
}

/* =================================================================================
** ARTICLE/NOTES
**
** Styling for page nodes
**
================================================================================= */

.article__source {
	color: #000;
	font-weight: bold;
	margin-bottom: 1em;
	font-size: 1em;
}

.content h2 {					/* this affects tags in full page article */
	font-size: 1em !important;		/* but can only style it with importatn */
}

.article__country a,
.article__tags a,
.article__category a {
	font-weight: bold;
	font-size: 1em;
	color: #b22222;
	color: #286ea0;
	color: #333;
	color: #003667;
}

.article__tags a::before {
	content: "|";
	padding-right: 0.5em;
	color: #000;
}

.article__country a::before {
	content: "|";
	padding-right: 0.5em;
	color: #000;
}

.article__country a:hover,
.article__tags a:hover,
.articel__categroy a:hover {
	color: #286ea0;
	color: #708090;
	color: #808080;
	color: #b22222;
	transition: color 0.5s ease;
}

.article__category a {
	float: left;
	margin-right: 0.5em;
}

.article__country a {
	float: left;
	margin-right: 0.5em;
}

/*
.article__country::before {
	content: "Topics: ";
	font-weight: bold;
	font-size: 1em;
	color: #000066;
	color: #000;
	color: #003667;
	padding-right: 0.5em;
	float: left;
}
*/

.article__category::before {
	content: "Topics: ";
	font-weight: bold;
	font-size: 1em;
	color: #000066;
	color: #000;
	color: #003667;
	padding-right: 0.5em;
	float: left;
}

/* =================================================================================
** RELATED ARTICLES
**
** Styling for related articles block below articles
**
================================================================================= */

#block-related-articles {
	border-top: solid 1px #ccc;
	margin-top: 1em;
}

/* this is so filter toggle doesn't appear in related articles block */

#block-related-articles .filter-label {
	display: none;
}

#block-related-articles header {
	color: #000066;
	color: #000;
	color: #003667;
	font-weight: bold;
	font-style: normal;
	font-size: 1.4em;
}

#block-related-articles h3 {

	color: #b22222;
	color: #000066;
	color: #003667;

	border-bottom: solid 1px #ccc;
	border-bottom: solid 1px #ffcc00;
	padding-bottom: 0.1em;
	font-weight: bold;
	font-style: normal;
	font-size: 1.1em;
}

.related-articles a {
	color: #808080;
	color: #286ea0;
	color: #708090;
	font-weight: bold;
	font-style: normal;
}

.related-articles a:hover {
	text-decoration: none;
	color: #b22222;
	transition: color 0.5s ease;
}

.related-articles-tags a {
	color: #b22222;
	font-size: 0.7em;
	font-weight: bold;
	margin-top: -1em;
	font-style: normal;
}

.related-articles-title {
	font-size: 1em;
}

.related-articles-source {
	color: #808080;
	color: #708090;
	color: #333;
	font-size: 0.9em;
	padding-bottom: 0.5em;

}

.related-articles-ul-list {
	color: #808080;
	color: #708090;
	color: #808080;
}

/* =================================================================================
** TEST IMPORT
**
** Styling for import file test view
**
================================================================================= */

.test-import header a {
	background:#286ea0;
	color: #fff;
	padding: 0.1em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-weight: bold;
	border: solid 1px #000;
}

.test-import header a:hover {
	background-color: #fff;
	color: #000;
}

.test-import-row {
	margin-bottom: 1em;
	list-style: none;
	margin-right: 2em;
}

.test-import li {
	list-style: normal;
}

.test-import-title a {
	font-weight: bold;
	color: #286ea0;
	color-decoration: none;
	font-style: normal;
	font-size: 1.2em;
}

.test-import-source {
	color: #808080;
	color: #000;
	font-style: normal;
	font-size: 1em;
	font-weight: bold;
}

.test-import-custom-text {
	color: #808080;
	color: #000;
	font-style: normal;
	font-size: 1em;
}

.test-import-body {
	font-weight: normal;
	color: #444;
	font-style: normal;
	font-size: 1em;
}

.test-import-body a {
	color: #286ea0;
	font-weight: bold;
}

.test-import-body li {
	list-style-type: disc;
}


.test-import-tags a,
.test-import-country {
	font-weight: bold;
	font-size: 0.8em;
	font-style: normal;
	color: #808080;
	color: #708090;
	color: #808080;
}

.test-import-tags a:hover {
	color: #b22222;
}

.test-import-date {
	font-weight: normal;
	color: #000;
	font-style: normal;
	font-size: 1em;
}

/* ==============================================================
** FILTER
** Styling for main page filters (which drop down)
** Hides and unhides exposed filters using 'checkbox hack' 

This is achived with a 'dirty' modification to the views template 
views-view.html.twig by inserting a checkbox <imput> form below the 
</header> tag:
 
{% if header %}
    <header>
      {{ header }}
    </header>
    <input type="checkbox" id="toggle-filter"/>
    <label class="filter-label" for="toggle-filter">Filter <img 	src="/sites/default/files/inline-images/toggle-filter.png" /></label>
{% endif %}

This is necessary becuase the checkbox hack only works when the element
being manipulated (ie the exposed filter) is immediatly after the input
form.

============================================================== */

#toggle-filter:checked ~ .views-exposed-form {

	max-height: 20em;

	border: solid 1px #ccc;
	background-color: #f5f5f5;
	padding-left: 0.3em;
	padding-right: 0.3em;

	-webkit-transition: max-height 1s; /* Safari */
	transition: max-height 1s;
	transition-timing-function: linear;
	transition-timing-function: ease;
	transition-timing-function: ease-in;
}

.views-exposed-form {

	overflow: hidden;
	max-height: 0;

	-webkit-transition: max-height 1s; /* Safari */
	transition: max-height 1s;
	transition-timing-function: linear;
	transition-timing-function: ease;
	transition-timing-function: ease-in;

	border: solid 1px #ccc;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
	background-color: #f5f5f5;
	padding-left: 0.3em;
	padding-right: 0.3em;

}

#toggle-filter {
	display: none;
}

.default-view .filter-label {
	float: right;
	margin-top: -1.4em !important;
	margin-right: 10.5em !important;
	border: solid 1px #000;
	border: none;
	cursor: pointer;
	font-size: 1em !important;
}

/* this is so the filter toggle doesn't appear in taxonomy view */

.taxonomy-term-view .filter-label {
	display: none;
}

.filter-label img {
	height: 1.2em;
	opacity: 0.5;
}

.filter-label img:hover {
	opacity: 1;
	box-shadow: 0 0 0.5em 0.1em #ccc;
}

#toggle-filter:checked ~ .filter-label img {
	transform: rotate(180deg);
}

.default-view .views-exposed-form {
	margin-top: 1em;
	/*
	padding: 0.2em;
	background-color: #F5F5F5;
	*/
}

.default-view label {
	font-weight: bold;
	font-size: 0.9em;
	color: #286ea0;
	color: #808080;
	color: #708090;
	color: #708090;
	margin: 0;
	margin-bottom: 0.2em;
	padding-top: 0.1em;
}

/* styles all items in exposed view filter */

.default-view .form-item {
	color: #708090;
	/*
	max-width: 25%;
	*/
	display: inline-block;
	vertical-align: top;
	padding: 0.3em;
	max-height: 3em;
	margin-bottom: 0.5em;
}

/* defines width of first four fields */

.default-view .form-item:nth-child(1),
.default-view .form-item:nth-child(2), 
.default-view .form-item:nth-child(3),
.default-view .form-item:nth-child(4),
.default-view .form-item:nth-child(5) {
	width: 49%;
}

/* defines width of last four fields */

.default-view .form-item:nth-child(6),
.default-view .form-item:nth-child(7), 
.default-view .form-item:nth-child(8),
.default-view .form-item:nth-child(9) {
	width: 24%;
}


.default-view .form-select {	/* drop down lists */
	width: 100%;
	background-color: #fff;
	color: #708090;
}

.default-view .form-text {		/* text imput fields (Source) */

	font-size: 1em;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
	padding: 0;
	margin-right: 0.2em;
	color: #708090;
	color: #708090;
	display: inline-block;
	height: 1.5em;
	width: 100%;
}

.default-view #edit-keys {		/* search key words field */
	/*
	width: 18.5em;
	*/
	width: 100%;
}

.default-view .form-submit {	/* apply button */

	color: #808080;
	color: #286ea0;
	color: #fff;
	background-color: #F5F5F5;
	background-color: #fff;
	background-color: #000;

	font-size: 1em;
	margin: 0;
	padding: 0.3em;
	border: solid 1px #000;
	padding-left: 0.5em;
	padding-right: 0.5em;
	border: solid 1px #ccc;
	border-radius: 5px;
	margin-bottom: 0.5em;
	margin-right: 0.5em;
	margin-top: 0.5em;
	float: right;


	/* these settings setting kick in in larger displays 

	float: right;
	margin-top: -2em;

	*/
}

.default-view .form-submit:hover {	/* apply button hover */
	box-shadow: 0 0 0.5em 0.1em #ccc;
	background-color: #b22222;
	background-color: #fff;
	color: #333;
	border: solid 1px #000;
}

.default-view .form-submit:active {
	font-size: 0.98em;
}

/* ===============================================================
**
** VIEWS
** Styling for all basic views pages (Home, Aceh, Indonesia etc)
** default-view is css selector for all these pages
**
=============================================================== */

.default-view {
}

.default-view h3,
.taxonomy-term-view h3 {			/* date sub-headings (groups) */
	color: #808080;
	color: #b22222;
	color: #000066;
	color: #b22222;
	color: #286ea0;
	color: #708090;
	color: #333;

	font-size: 1em
	font-weight: bold;
	font-style: normal;
	margin-bottom: 1;
	padding-bottom: 0.2em;
	border-bottom: solid 1px #ffcc00;
	width: 95%;
}

/* this effects each title and body 'block' */

.default-view-row {
	margin-bottom: 1em;
	border-top: solid 1px #ccc;
	border-top: solid 1px #ffcc00;
	border: none;
}

.tile-view-column {
	padding-right: 1em;
	border-top: solid 1px #ccc;
	border-top: solid 1px #ffcc00;
	border: none;
	margin-right: 1em;
	width: 45%;
	padding-top: 1em;
	padding-top: 0;
	padding-bottom: 1em;
}

.list-view-row {
	margin-left: -1.5em;
}


.default-view ul {
	margin-bottom: 1em;
	border-top: solid 1px #ccc;
	border-top: solid 1px #ffcc00;
	border: none;
	padding-top: 1em;
	margin-top: 0;
}

.default-view li {
}

.default-view-title a,
.tile-view-title a {
	font-weight: bold;
	color: #708090;
	color: #b22222;
	color: #000;
	color: #808080;
	color: #286ea0;
	color: #000066;
	color: #003667;
	color-decoration: none;
	font-style: normal;
	font-size: 1.3em;
}

.list-view-title a {
	color: #708090;
	color: #b22222;
	color: #000;
	color: #808080;
	color: #286ea0;
	color: #000066;
	color: #003667;

	font-style: normal;
	font-size: 1.1em;
	font-weight: bold;
}

.tile-view-title a {
	font-size: 1.2em;
}

.default-view-title a:hover,
.tile-view-title a:hover,
.list-view-title a:hover {
	color: #708090;
	color: #808080;
	color: #286ea0;
	color: #b22222;
	transition: color 0.5s ease;
}

.default-view-source,
.tile-view-source,
.list-view-source {
	font-weight: bold;
	color: #000;
	color: #333;
	font-style: normal;
	font-size: 1em;
	padding-top: 0.2em;
}

.default-view-source {
	margin: 0;
}

.tile-view-source {
	margin-bottom: -0.5em;
}

.list-view-source {
	margin-bottom: 0.5em;
	padding-top: 0;
	font-weight: normal;
	color: #000;
}

.default-view-body,
.tile-view-body {
	font-weight: normal;
	color: #444;
	font-style: normal;
	font-size: 1em;
	line-height: 1.2em;
}

.tile-view-body {
	font-size: 1em;
	max-height: 4.5em;
	overflow: hidden;
}

.default-view-body {
	max-height: 5.5em;
	max-height: 5.8em;
	overflow: hidden;
}

.default-view-tags a,
.tile-view-tags a,
.default-view-country,
.tile-view-country {
	font-weight: bold;
	font-size: 0.9em;
	font-style: normal;
	color: #286ea0;
	color: #808080;
	color: #444;
}

.tile-view-country,
.tile-view-tags {
	font-size: 0.8em;
	display: none;
}

.default-view-tags a:hover {
	color: #b22222;
	transition: color 0.5s ease;
}

.default-view-custom-text a,
.tile-view-custom-text a,
.list-view-custom-text a {
	font-weight: bold;
	font-size: 0.9em;
	font-style: normal;
	color: #708090;
}

.default-view-custom-text a:hover,
.tile-view-custom-text a:hover,
.list-view-custom-text a:hover {
	color: #b22222;
	transition: color 0.5s ease;
}

.tile-view-custom-text,
.list-view-custom-text {
	display: none;
}

/* ==================================================================
** PAGER
** Styling for pager at bottom of all basic views
**
** ================================================================ */

.pager {
}

.pager__items {
	text-align: center;
	margin-top: 1em;
	padding-top: 1em;
	padding-bottom: 0;
	font-size: 0.8em;
	font-weight: bold !important;
	font-style: normal;
}

.pager__item a {
	border: solid 1px #000000;
	padding: 0.2em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	background-color:#433d8b;
	background-color: #000066;
	background-color: #000;
	color: #fff;
	text-decoration: none;
	font-style: normal;
}

.pager__items a:hover {

	background-color: #ccc;
	color: #000;
	color: #fff;
	background-color: #286ea0;
	background-color: #003667;
	transition: background-color 0.5s ease;
}

.pager__item--active a,
.pager__item--active a:hover {

	background-color:#5f9ea0;
	background-color: #ccc;
	background-color: #b22222;
	color: #fff;
	color: #000;
	background-color: #ccc;
	font-style: normal;
	transition: background-color 0.5s ease;
}

.pager__item--first a,
.pager__item--last a,
.pager__item--next a,
.pager__item--previous a {
	color: #000;
	border: none;
	background: none;
	font-style: normal;
}

.pager__item--first a:hover,
.pager__item--last a:hover,
.pager__item--previous a:hover,
.pager__item--next a:hover {
	color: #b22222;
	background: none;
	transition: color 0.5s ease;
}

/* ==========================================================
** INDOLEFT NEWS FEED
**
** Styling or Indoleft news feed in left sidebar (DISABLED)
**
** ======================================================== */

.indoleft-news-feed {
}

#block-indoleft-news-feed ul {
	padding-left: 1.2em;
	padding-right: 0.5em;
}

#block-indoleft-news-feed p {

}

#block-indoleft-news-feed footer {
	font-size: 0.9em;
	padding-left: 1em;
}

#block-indoleft-news-feed a {
	color: #286ea0;
	font-weight: bold;
	font-size: 0.9em;
}

#block-indoleft-news-feed h2 {
	padding-right: 0.5em;
	padding-left: 0.5em;
	color: #000066;
	color: #000;
	font-size: 1.1em;
	width: 90%;
}

/* ==============================================================
**
** VIEWS MENU
** Styling for views menu (three icons on right) for selecting
** what kid of view to show: Default, Tile and List
**
** =========================================================== */

.views-menu {
	float: right;
	clear: after;
	color: #708090;
	color: #808080;
	font-weight: bold;
	padding-top: 1.2em;
	font-size: 1;
}

.views-menu img {
	height: 1.2em;
	opacity: 0.5;
}

.views-menu img:hover {
	opacity: 1;
	box-shadow: 0 0 0.5em 0.1em #ccc;
}

.views-menu img:focus {
	opacity: 0.2;
}

.views-menu .active-view {
	opacity: 0.2;
	cursor: default;
}

.views-menu .active-view:hover {
	opacity: 0.2;
}

/* ---- fills up space in short pages such as no result ----------- */

.no-results {
	padding-bottom: 90%;
}

/* =================================================================
** 
** RESPONSIVE STYLING
** Responsive styling based on display width: 5 widths defined
**
** ============================================================== */

/* set default styling (for smart phones first) ------ */

#block-netnewsbanner img {
	width: 80%;
	margin: 0;
	margin-bottom: 1.5em;
}

/* search form 100 percent of page (but hidden) */

#block-basic-search {
	width: 100%;
}

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
	h2:after {
		content: " - 1. Extra small devices (phones, 600px and down)";
	}
	.apsn-sites .sidebar-image {
		display: none;
	}
	.apsn-sites {
		border-top: solid 1px #ccc;
		margin-top: 1em;
	}
	.views-menu {
		float: none;
	}
	#content {
		min-height: 30em;
	}
	.default-view .filter-label {
		margin-right: 0 !important;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
	h2:after {
		content: " - 2. Small devices (portrait tablets and large phones, 600px and up)";
	}
	#block-netnewsbanner img {
		width: 60%;
	}
	.apsn-sites .sidebar-image {
		display: none;
	}
	.apsn-sites {
		border-top: solid 1px #ccc;
		margin-top: 1em;
	}	
	.views-menu {
		float: none;
	}
	#content {
		min-height: 30em;
	}
	.default-view .filter-label {
		margin-right: 0 !important;
	}
	.main-navigation a:nth-child(2) {
		flex-grow: 1;
	}
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
	h2:after {
		content: " - 3. Medium devices (landscape tablets, 768px and up)";
	}
	#block-netnewsbanner img {
		width: 50%;
		float: left;
	}
	#block-basic-search {
		width: 40%;
	}
	#search-block-form {
		max-width: 100%;
	}
	.apsn-sites .sidebar-image {
		display: block;
	}
	.apsn-sites .site-image {
		width: 95%;
	}
	#content {
		float: left;
		display: block;
		margin-left: 18%;
		width: 82%;
	}

	#sidebar-first {
		float: left;
		width: 18%;
		margin-left: -100%;
	}
	.views-menu {
		float: right;
		clear: after;
		margin-top: -2.5em;
	}
	#content {
		min-height: 100em;
	}
	.default-view .filter-label {
		margin-right: 10.5em !important;
	}
	.main-navigation span {
		display: inline;
	}
	.main-navigation a:nth-child(2) {
		flex-grow: 1;
	}
}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
	h2:after {
		content: " - 4. Large devices (laptops/desktops, 992px and up)";
	}

	#block-netnewsbanner img {
		width: 50%;
		float: left;
	}
	#block-basic-search {
		width: 40%;
	}
	#search-block-form {
		max-width: 100%;
	}
	.apsn-sites .sidebar-image {
		display: block;
	}
	.apsn-sites .site-image {
		width: 95%;
	}
	#content {
		float: left;
		display: block;
		margin-left: 18%;
		width: 82%;
	}

	#sidebar-first {
		float: left;
		width: 18%;
		margin-left: -100%;
	}
	.views-menu {
		float: right;
		clear: after;
		margin-top: -2.5em;
	}
	#content {
		min-height: 100em;
	}
	.default-view .filter-label {
		margin-right: 10.5em !important;
	}
	.main-navigation span {
		display: inline;
	}
	.main-navigation a:nth-child(2) {
		flex-grow: 1;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
	h2:after {
		content: " - 5. Extra large devices (large laptops and desktops, 1200px and up)";
	}
	#block-netnewsbanner img {
		width: 50%;
		float: left;
	}
	#block-basic-search {
		width: 40%;
	}
	#search-block-form {
		max-width: 100%;
	}
	.apsn-sites .sidebar-image {
		display: block;
	}
	.apsn-sites .site-image {
		width: 95%;
	}
	#content {
		float: left;
		display: block;
		margin-left: 18%;
		width: 82%;
	}

	#sidebar-first {
		float: left;
		width: 18%;
		margin-left: -100%;
	}
	.views-menu {
		float: right;
		clear: after;
		margin-top: -2.5em;
	}
	#content {
		min-height: 100em;
	}
	.default-view .filter-label {
		margin-right: 10.5em !important;
	}
	.main-navigation span {
		display: inline;
	}
	.main-navigation a:nth-child(2) {
		flex-grow: 1;
	}
}

h2:after {
	content: "";
}

.import-table td {
	font-size: 0.8em;
	font-weight: bold;
	border: solid 1px #ccc;
	padding: 0.5em;
	width: 20%;
	height: 2em;
}

.import-table table {

}

/* ==========================================================
** ERROR PAGE STYLING (404 AND 403)
** Styling for custom error pages
** 404: Not found
** 403: Not authorised to access
========================================================== */

.error-code {
	margin-right: 2em;
	margin-top: 1em;
	width: 30%;
	padding-below: 5em;
}

.error-message {
	padding-bottom: 30%;
	margin-bottom: 1em;
}

.error-message h3 {
	color: #708090;
	color: #b22222;
	font-size: 1.2em;
}

.error-message p {
	color: #444;
}

/* ==========================================================
** LOGIN
**
** Styling for user login page
**
========================================================== */

#user-login-form .description {
	color: #697080;
	margin-bottom: 1em;
	font-weight: bold;
}

#user-login-form .form-text {
}

#user-login-form label {
	font-size: 1.2em;
	color: #286ea0;
	font-weight: bold;
	color: #b22222;
	color: #333;
}

#user-login-form .form-submit {
	border-radius: 5px;
	background-color: #000;
	color: #fff;
	padding: 0.3em;
	padding-left: 2em;
	padding-right: 2em;

}

#user-login-form .form-submit:hover {

	background-color: #286ea0;
	background-color: #fff;
border: solid 1px #000;
	transition: background-color 0.5s ease;
	box-shadow: 0 0 0.5em 0.1em #ccc;
}

#user-login-form .form-submit:active {
	font-size: 0.99em;
	background-color: #fff;
}

/* ==========================================================
** BASIC PAGE SYLING 
** Styling for Basic Page content type (About Us, Site Map etc)
========================================================== */

.basic-page {
}

.basic-page img {
	height: 1.1em;
}

.basic-page-column {
	display: inline-block;
	padding-right: 1em;
	padding: 0;
	vertical-align: top;
}

.basic-page h3 {
	padding: 0;
	margin: 0;
	color: #b22222;
	color: #000;
}

.basic-page a {
	color: #808080;
	color: #286ea0;
	color: #708090;
	font-size: 1em;
}

.basic-page a:hover {
	color: #b22222;
	font-size: 1em;
	transition: color 0.5s ease;
	text-decoration: none;
}

.basic-page li {
	padding-bottom: 0.2em;
}

.basic-page-image-list img {
	width: 1.4em;
	float: none;
	border: none;
	margin: 0;
	margin-right: 0.5em;
}

/* ==========================================================
** FEEDBACK PAGE STYLING (CONTACT US)
========================================================== */

#contact-message-feedback-form .form-item {
}

#contact-message-feedback-form label {
	font-weight:bold;
	color: #708090;
	margin-top: 1em;
}

/* message to inform users to enable java script before submitting form becasue of antibot module */

#contact-message-feedback-form:before {
	content: "As an anti-spam protection measure, Java Script must be enabled in order to submit this form.\A\A";
	padding-top: 1em;
	padding-bottom: 0.2em;
	border-bottom: solid 1px #ccc;
	color: #708090;
	font-weight: bold;
	white-space: pre-wrap;
}

#contact-message-feedback-form .form-checkbox {
	float: left;
}

#contact-message-feedback-form .form-submit {
	border-radius: 5px;
	background-color: #000;
	color: #fff;
	border: solid 1px #000;
	padding: 0.3em;
	padding-left: 2em;
	padding-right: 2em;
}

#contact-message-feedback-form .form-submit:hover {
	background-color: #b22222;
	background-color: #fff;
	color: #000;
	transition: background-color 0.5s ease;
	box-shadow: 0 0 0.5em 0.1em #ccc;
}

#contact-message-feedback-form .form-submit:active {
	font-size: 0.99em;
	background-color: #fff;
}

#contact-message-feedback-form .option {
	margin-top: 1em;
	margin-bottom: 1em;
}

/* anti-bot spam protection message styling */

.antibot-message {
	background-color: #f5f5f5;
	color: #000;
	border: solid 1px #ccc;
	margin-bottom: 10em;
}

.antibot-message::after {
	content: "\A\A APSN uses this as an anti-spam protection measure only. Return to the contact form, enable Java Scrip then re-submit the form. Once you have submitted the form Java Script may be disabled again.";
	white-space: pre-wrap;
	color: #b22222;
	font-weight: bold;
}

/* ==========================================================
** INDONESIAN ACRONYMS STYLING
========================================================== */

.acronyms-subhead {
	border-bottom: solid 1px #ccc;
	border-bottom: solid 1px #ffcc00;
}

.acronyms-subhead a {
	color: #708090;
}

.acronyms-subhead:hover a {
	color: #708090;
}

.acronyms-letters {
	padding: 0;
	color: #000;
	border-bottom: solid 1px #ccc;
	text-align: left;
}

.acronyms-letters a {
	line-height: 2;
	font-size: 0.9em;
	background-color: #286ea0;
	background-color: #000;
	color: #fff;

	padding: 0.2em;
	padding-left: 0.7em;
	padding-right: 0.7em;
	margin-left: -0.1em;
	margin-right: -0.1em;

	font-weight: bold;
	text-decoration: none;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;

	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.acronyms-letters a:hover {
	background-color: #F5F5F5;
	background-color: #fff;
	color: #000066;
	color: #000;
	border-top: solid 1px #000;
	border-left: solid 1px #000;
	border-right: solid 1px #000;
	transition: background-color 0.5s ease;
}


/* ==========================================================
** STYLING FOR TABLES (NOT USED IN ANY PUBLIC VIEWS)
========================================================== */

.table-views table {
	border: solid 1px #ccc;
	padding: 1em;
}

.table-views td {
	border: solid 1px #ccc;
	padding: 0.5em;
	vertical-align: top;
	width: 30%;
}

.table-views tr {
	vertical-align: top;
}

.table-views a {
	color: #b22222;

}


.table-views .views-exposed-form {
	display: block;
	visibility: visible;
	height: auto;
	max-height: 12em;
	margin-bottom: 1em;
}

.table-views .form-item {
	display: inline-block;
	vertical-align: top;
}

.table-views .form-text {
	height: 1.5em;
	font-size: 1em;
	padding: 0;
}

.table-views .form-label {
	font-weight: bold;
}

.table-views .views-exposed-form .form-submit {
	float: right;
	font-size: 1em;
	dispay: inline-block;
	height: 1.5em;
	padding: 0;
	width: 5em;
	margin-top: -3em;
}


.table-views .views-field-title {
	width: 20%;
}

.table-views .views-field-body {
	width: 50%;
	vertical-align: top;
}

.table-views .views-field-form-field-field-tags {
	width: 12%;
}

.table-views .form-autocomplete {
	width: 15em;
}

.table-views .views-field-views-bulk-operations-bulk-form {
	width: 2em;
}

/* hides search form at top of site (remote site only) */

#block-basic-search {
	display: none;
}

/* hides keyword search in filter (remote site only) */

.default-view .form-item:nth-child(1) {
	display: none;
}

/* end styling for basic pages and views */


/*# sourceMappingURL=layout.css.map */