
body {
	background-color:#DC8732;
}


/************************ GENERAL VISIBILITY ********************/

.only_show_small {
 	display: none;
}

.only_show_large {
/*	display: block;  */
}


.only_show_large_inline {
/*	display: inline-block;  */
}


/************************ MAIN LAYOUT ********************/


.page-main {
	width: 100%;
}


.page-mainmenu {
	display: flex;
	width: 100%;
	flex-direction: row;
/*	justify-content: center; */
	justify-content: space-evenly;
	align-items: flex-start;
	align-content: flex-start;
}

.page-submenu {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.horizontal-block {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	align-content: flex-start;
	margin-top: 10px;
}


.page-submenu .horizontal-block:not(:first-child) {

}


.page-submenu-docs {
	width: 650px;
}

/* Ensure that all document links are left-aligned instead of centered */
.page-submenu-docs p {
	text-align: left;
}

/* Document descriptions */
.description, .description_long {
	margin-top: -12px;
	padding-left:20px;
	font-style: italic;
	display: block;
}

.description_short {
	margin-top: -12px;
	padding-left:20px;
	font-style: italic;
	display: none;
}

.pagefooter {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 40px;

	background: black;
	color: white;
}

.mail-button {
	width: 32px;
	padding: 10px;
	background: black;
	color: white;
	border: 2px solid white;
	border-radius: 10px;
}

.mail-button .fa-at {
	color: black;
}



/************************ LINK BUTTONS ********************/

/* NEW from WR */

button.link-button {
     appearance: none;
    -webkit-appearance: none;
    background: black;
    border: 2px solid white;
}


.link-button-container {
	display: flex;
	justify-content: center;
	margin-top: 20px;
    gap: 10px;
}

.link-button-link {
	text-decoration: none;
	color: white;
}


// NOT WITH WR
.link-button-link:visited {
	text-decoration: none;
	color: white;
}


.link-button-link-blue {
	text-decoration: none;
	color: darkblue;
}

.link-button-link-black {
	text-decoration: none;
	color: black;
}

.link-button,   
.link-button-link div, .link-button-link-blue div, .link-button-link-black div {

   display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 36px;
    padding: 0 10px;

    color: white;
    background: black;
    border: 2px solid white;
    border-radius: 10px;

    font-family: Arial, Helvetica, sans-serif;
   font-size: 1rem;
    line-height: 1;     
    font-weight: bold;



/* OLD
	display: inline-block;
	padding-top: 7px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	background: black;
	border: 2px solid white;
	border-radius: 10px;

	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;

	margin-left: 10px;
*/
}


/* ADDED LIKE WR */

.link-button .fas,
.link-button-link .fas {
    font-size: 1em;
}



.link-button-link img, .link-button-link-blue img, .link-button-link-black img {
	max-width: 100%;
}

.link-page-container {
	display: flex;
	justify-content: center;
	
	margin-top: -10px;

	flex-wrap: wrap;
	align-items: center;
}


/* REMOVED LIKE WR

.link-button {
	display: inline-block;
	padding-top: 7px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	color: white;
	background: black;
	border: 2px solid white;
	border-radius: 10px;

	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;

	margin-left: 10px;
}
*/


.link-button-span {
	display: inline-block;
	color: white;
	background: black;
	border: 2px solid white;
	border-radius: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	padding-top: 7px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

/************************ PAGE LINKS ********************/

.internal {
	color: black;
	text-decoration: none;
}

.internal:hover {
	color: brown;
}

.bookmark {
	display: block;
	position: relative;
	top: -62px; 
	visibility: hidden;
}

/************************ PICTURE HEADERS ********************/

.trio_header {
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-top: 5px;
}


/************************ OTHER ********************/

/* Used on Links page */

.wrapmargin {
	margin-top: 10px;
}

.break-row {
	flex-basis: 100%;
	height: 0;
}

.break-column {
	flex-basis: 100%;
	width: 0;
}


/* Used on University page */


.pic_group {
	display: flex;
	flex-direction: row;
	margin: 0px auto;
	justify-content: center;
	align-items: flex-start;
}

.pic_label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 250px;
}


.margin_label {
	margin-top: 7px;
}

.jokes {
	max-width: 80%;
	margin: 0px auto;
}

.publications {
	max-width: 80%;
	margin:0px auto;
	padding: 0px;
}

.publications li:not(:first-child) {
    margin-top: 10px;
}


/* Jokes */

ul.no_bullet {
	max-width: 80%;
	margin: 0px auto;
	list-style-type: none;
	padding: 0px;
}

.no_bullet li:not(:first-child) {
    margin-top: 10px;
}

li.anim_blue {
	background: url('../littleicons/animBlue.gif') no-repeat left top;
	padding-left: 26px;
	display: block;
}

li.anim_green {
	background: url('../littleicons/animGreen.gif') no-repeat left top;
	padding-left: 26px;
	display: block;
}

li.anim_magenta {
	background: url('../littleicons/animMagenta.gif') no-repeat left top;
	padding-left: 26px;
	display: block;
}

li.anim_orange {
	background: url('../littleicons/animOrange.gif') no-repeat left top;
	padding-left: 26px;
	display: block;
}


li.anim_red {
	background: url('../littleicons/animRed.gif') no-repeat left top;
	padding-left: 26px;
	display: block;
}


li.anim_yellow {
	background: url('../littleicons/animYellow.gif') no-repeat left top;
	padding-left: 26px;
	display: block;
}


/* EHBO */

.ehbo_list {
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
}

.ehbo_list h3, .ehbo_list p {
	max-width: 95%;
	text-align: left;
	margin-left: 0px;
	margin-right: 0px;
}

.ehbo_list ul {
	max-width: 90%;
}


ul.ehbo_no_bullet {
	max-width: 95%;
	margin-left: auto;
	margin-right: auto;
	list-style-type: none;
	padding: 0px;
}

.ehbo_no_bullet li:not(:first-child) {
    margin-top: 10px;
}

ul.ehbo_with_bullet {
	max-width: 95%;
	margin: 0px auto;
}

.ehbo_with_bullet li:not(:first-child) {
    margin-top: 10px;
}


.spaced li:not(:first-child) {
	margin-top: 3px;
}


/* Chess */

.chess-board {
	max-width: 450px;
	margin-left: auto;
	margin-right: auto;
}



/* Travel */

.map-large {
	display: block;
}

.map-small {
	display: none;
}


.country_group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 25px;

	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.country_flag {
//	background: #7dc5ed;
	width: 90px;
	height: 60px;
}

.country_name {
//	background: #bb6fad;
	margin-top: 5px;
}

.country_text {
//	background: #6560ab;
	margin-left: 90px;
//	margin-top: -30px;

	margin-top: -10px;
	margin-bottom: 10px;
}


.travel_items {
	margin-top: 5px;
	margin-left: 0px;
}

.travel_items li:not(:first-child) {
    margin-top: 10px;
}


/* Route */

.map-responsive {

	overflow: hidden;
	padding-bottom: 56.25%;    /* 56.25%; */
	position: relative;
	height: 0;

	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.map-responsive iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}


/* Popup */

.popup {
    background: rgba(0,0,0,0.7);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    left:0;
    width:100%;
    z-index:10000;
}

.popup .helper {
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

.popup > div {
    background-color: silver;
    opacity: 1;
    display: inline-block;
    height: auto;
    max-width: 800px;
    min-height: 100px;
    vertical-align: middle;
    width: 60%;
    position: relative;
    border-radius: 8px;
    border: 2px solid black;
    padding: 15px;
}

.popupCloseButton {
    background-color: burlywood;
    opacity: 1;
    color: brown;
    border: 2px solid black;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -15px;
    font-size: 20px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}


/* --------------------- SMALL SCREENS ------------------ */

@media screen and (max-width: 760px) {

	.only_show_small {
		display: block;
	}

	.only_show_large,
	.only_show_large_inline {
		display: none;
	}



	.page-mainmenu {
		display: flex;
		width: 100%;
		flex-direction: column;
/*	justify-content: center; */
		justify-content: flex-start;
		align-items: center;
	}

	.page-submenu-docs {
		margin-top: 30px;
		width: 320px;
	}

	.description_long {
		display: none;
	}

	.description_short {
		display: block;
	}

	.pic_group {
		flex-direction: column;
	}

	.pic_label {
		width: 100%;
	}

	.map-large {
		display: none;
	}

	.map-small {
		display: block;
	}

	.country_name {
		margin-top: 17px;
	}

	.country_text {
		margin-left: 0px;
		margin-top: 0px;
	}


	.ehboicon {
		width: 45px;
		height: auto;
	}

	.ehbo_list h3, .ehbo_list p {
		max-width: 85%;
	}

	.ehbo_list ul {
		max-width: 85%;
	}

	.popup > div {
		width: 85%;
	}

}

@media (hover:hover) {

	.link-button:hover,
	.link-button-link:hover div, .link-button-link-blue:hover div, .link-button-link-black:hover div,
	.link-button-link:hover .link-button-span {
		border-color: moccasin;
		color: #DC8732;
		cursor: pointer;
	}

	.mail-button:hover {
		color: #DC8732;
		border-color: #DC8732;
		cursor: pointer;
	}

	.mail-button:hover .fa-at {
		color: black; 
		cursor: pointer;
	}

	.popupCloseButton:hover {
		background-color: black;
		cursor: pointer;
	}
}


/******************************** END ********************************/


