/* use block elements instead of flex */

html, body { background-color:#eee; }

body { padding:0.5rem 0 0 0; 
	text-align:justify; }
	
h1 { font-size:1.8rem;
	line-height:2rem; } 

h2 { font-size:1.6rem;
	line-height:1.8rem; }
	
h3 { font-size:1.4rem;
	line-height:1.6rem; } 
	
h4 { font-size:1.2rem; 
	line-height:1.4rem; }
	
h2, h3, h4 { color:#822e91; } /* violet */	
	
h4, h6 { font-style:italic; } 
	
h1, h2, h3, h4, h5, h6 { font-weight:600; }

/*
 * Sets font family for 
 *   code = inline programming code, 
 *   kbd = keyboard input, 
 *   samp = computer output 
 */	
code, kbd, pre, samp {
	font-family: 'Courier New', monospace; 
}

b { font-weight: 700; /* bold */ }

strong { color: #ed1f24; /* red */ 
	font-weight:400; /* normal */
	/* font-weight: 900; boldest */ }
	
a { color:#ed1f24; }  /* red */ 

em { color: #832F92; /* violet */ }

.half-text {
	font-size:1.1rem;
	line-height:1.7rem;
	word-spacing:0.1rem;
	font-family:OzCaramel, Arial, Helvetica, sans-serif, script; 
	font-weight:600; }
	
/* to keep sections from overlaping
value is same as line-height */
section { margin-bottom:1.25rem; }	


#website-logos { padding:1rem 0; }
	
#website-logos-4 { 
		width:11.63rem;
		height:11.63rem; 
		border:none; }

#website-logo { width:5.4rem;
		height:5.4rem; 
		border:none; }
	
#website-header { display:block;  
	text-align:center; 
	border-bottom:8px double #f9f9f9;
	padding:1rem 3rem;	
	margin-bottom:2rem;	
	text-shadow:0.25rem 0.25rem 0.25rem #aaa; }	

#website-header-logo { text-align:center; 
	margin-bottom:1.5rem;}

#website-header-text { text-align:center; }
	
#nav-sites, #nav-languages { text-align:center;
	text-decoration:none;
	margin-top:0; }

#nav-sites a, #nav-languages a { text-decoration:none;	
	padding:0 0.25rem; }

#nav-sites a { font-size:1.2rem; 
	line-height:1.5rem; }

#banner { display:block; 
	width:100%;}
	
.banner-image {
	border:0.15rem solid #222; /* off-black, a little darker than text */
	border-radius:0.25rem; 	
}

.banner-caption { 
	bottom:1rem; /* position = absolute */ 
	right:1rem; /* position = absolute */ }	

.english { color:#822e91; } /* violet */

.chinese { font-size:0.9rem; 
	color:#822e91; } /* violet */

.third-box, 
.fourth-box { display:block; }
.half-box { margin:0; }
.third-box, 
.fourth-box { max-width:100%;
	margin:0 0 1rem 0; }
	
.link-button {
	margin:auto;
	width:100%;
	text-align:center;
	line-height:1.5rem;
	border:0.15rem solid #222; /* off-black, a little darker than text */
	border-radius:0.25rem; 
	margin-bottom:1rem;}

.link-button a { text-decoration:none; } 
	
.wrapped-list { display:none; }

.list-on { display:block; } /* on when wrapped list is off */
	
.star-list li:after { content:"✼";
	display:block;
	text-align:center;
	margin:0.5rem 0; }	
	
picture { vertical-align: bottom;
	line-height:0; }

img { max-width:100%; }

/* adds borders to images */
.image-border {
	border:0.15rem solid #222; /* off-black, a little darker than text */
}	

/* adds rounded borders to images */
.image-rounded-border {
	border:0.15rem solid #222; /* off-black, a little darker than text */
	border-radius:0.25rem; 	
}
	
.image-caption { 
	top:1rem; /* position = absolute */ 
	left:1rem; /* position = absolute */ }
	
/* so that position absolute will work for image captions. */
.box-caption { position:relative; }
	
video { max-width:100%; 
	height:auto; }

.full-video { width: 100%; 
	height:auto; }

/* adds straight borders to videos */
.video-border { /* border:0.15rem solid #222; for testing only */ }

.video-caption { 
	top:1rem; /* position = absolute */ 
	left:1rem; /* position = absolute */ }
	
.image-caption, .video-caption, .banner-caption { position:absolute;
	background-color:#222;  /* off-black, a little darker than text */
	color:#e4e4e4; /* off-white */
	z-index:1;
	padding:0.25rem 1rem; }

.youtube-video, 
.half-youtube-video { position:relative;
	padding-bottom:56.25%;
	height: 0;
	overflow:hidden;
	max-width:100%;
	height:auto; }

.youtube-video iframe, .half-youtube-video iframe, 
.youtube-video object, .half-youtube-video object, 
.youtube-video embed, .half-youtube-video embed { position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%; }
	
#youtube-logo { width: 3rem; 
	border:none; }

#page-footer { display:block; 
 	text-align:center;
 	margin-top:2rem; 
	margin-bottom:0;	
	background-color:#822e91;  /* violet */
	padding-bottom:1rem; }

.copyright-email, .copyright-owner, .copyright-owner a { color:#fff; } /* white */

.copyright-owner a { text-decoration:none; }

/*
.display-toggle { display:none;
    height:3rem;
    line-height:3rem;
    text-align:center; }
*/
	
.hidden-br { content:"";
	display:none;
	width:0;
	height:0;
}

.clear-float { clear:both; }