/*CSS styles Sheet for Water Rescue*/

* {
	font-family: Helvetica, "Courier New";
	font-size: large;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.5em;
}

p {
	font-size: 1em;
}

header {
background-image: url("https://maesotnotes.com/water/images/river_background1.jpg");
background-color: #D3D3D3;
border: 5px solid #000000;
padding-top: 30px;
padding-bottom: 20px;
display: flex;
flex-flow: row nowrap;
align-items: center;
}

article {
padding-top: 20px;
padding-bottom: 40px;
padding-left: 40px;
padding-right: 40px;
border-style: solid;
border-width: 0px 25px 25px 25px;
border-color: #A61414;
border-radius: 0px 0px 25px 25px;
}

footer {
padding: 25px 0px 25px 0px;
text-align: center;
}

table {
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: auto; 
	margin-right: auto; 
}

tr {
	padding-top: 10px;
	padding-bottom: 10px;
}

button {
padding: 5px;
border-radius: 5px;
font-size: 20px;
color: #000000;
background-color: rgba(166, 20, 20, 0.6); 
border: none; 
text-align: center;
}

button:hover {
	outline-width: 3px;
	outline-style: solid;
	outline-color: #AEAEAE;
	font-weight: bold;
}

li.spread {
padding: 20px;
}

a:hover {
	font-weight: bold;
}

/*For containing the header*/
.container {
background-color: rgba(250, 249, 246, 0.75);
width: 50%;
padding: 50px;
margin-left: auto;
margin-right: auto;
}

/*For listing the articles in the introduction*/
.box1 {
background-color: #FAF9F6;
width: 40%;
padding: 20px;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
}

/*Setting objects to the right*/
.right {
text-align: right;
}

/*For centering images and things*/
.center_stuff { 
	text-align: center;
}

/* centering and leaning for examples */
.example {
 text-align: center;
 font-style: oblique;
 font-weight: bold;
}

/*colors for language links */
.thai {
	color: MediumBlue;
}

.burma {
	color: Gold;
}

.eng {
	color: Navy;
}

.forty5 {
	height: 45px;
}
/* Picture Resizing for Different Devices */  
.width900 {
	width: 900px;
	max-width: 100%; 
	height: auto;
}

.imgControl {
	max-width: 100%;
	height: auto;
}

.imgSm {
	min-width: 50px;
	height: auto;
}