@charset "utf-8";

.aspirated {
	background-color: #FFFFFF!important;
}
.double {
background-color: #ccffff!important;
color: #000!important;	
}
.dipthong {
background-color: #FF00FE!important;

}

.y_sounds {
background-color: #65FF00!important;
}
.dipthong_font {
color: #FF00FE!important;

}

.y_sounds_font {
color: #65FF00!important;
}
table.alphabet_soup_y_sounds {
border: 2px solid black; 
border-collapse: collapse;
width: 50%; 
font-size: 1.4em;
}


.alphabet_soup_y_sounds td {

background-color: #65FF00!important;
border: none;
padding: 10px !important; 
text-align: center; 
}


blockquote {
	
	margin: 2% 10%!important;
}
p { margin: 1% auto!important;}
* { 
    margin: 0 !important;
    padding: 0 !important;
}

html {

text-align: center;	
max-width: 100%;
 }

body {
	/*
background-color: #65ff00; */

 margin: 0 !important;
	color: #ffffff;
	font-family: "Trebuchet MS", Trebuchet, Helvetica, sans-serif;
font-size: 12pt;
text-align: center; 
padding: 0 !important;
max-width: 100%;
 width:100%; 
height: 100vh;
}


.black {
color: black;
}

.fatblack {
color: black;
font-weight: bold;
}

.position {
position: relative; 
	/*top: 40px; 
	left: 40px;*/
    top: -150px;
	left: -200px;/* adding the following 2 makes a large right margin appear
		width: 100%;
	height: 100%;*/
	
}


tr.batang td {
    font-family: "Batang";
	}
	
span.batang {
    font-family: "Batang";
	color: #FFF;
	}

td.batang {
    font-family: "Batang";
	}



#ten_words {
	width: 50%; 
	padding: 8px !important; 
	border-radius: 10px;
}

#ten_words td {
	padding: 8px !important; 
}

#chart {
	width: 360px;
	}
	
#chart td{
	line-height: 20px;
	padding: 8px !important;
	width: 50px;
	}


td.topleft {
	border-top-right-radius: 0px;
	border-top-left-radius: 22px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}


td.topright {
	border-top-right-radius: 22px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

td.bottomleft {
	border-top-right-radius: 0px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 22px;
}


td.bottomright {
	border-top-right-radius: 0px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 22px;
	border-bottom-left-radius: 0px;
}

/* HOME PAGE ALPHABET BEGIN */

.blue_table_80 {
	width: 80%;
	
}
.blue_table_40{
	width: 40%;
	
}
.alphabet_soup_90 {
	width: 90%;
	table-layout:fixed;
}

.alphabet_soup_60 {
	width: 60%;
margin: 0px auto;
}
.alphabet_soup th, .alphabet_soup td {
background-color: #3398CC;
border: 2px solid black; 
padding: 10px !important;
text-align: center; 
}

.alphabet_soup .narrow_normal {
padding: 10px !important;
width: 5%; 
}

table.alphabet_soup_collapsed {
border: 2px solid black; 
border-collapse: collapse;
width: 50%; 
}

.alphabet_soup_collapsed td {
background-color: #3398cc;
border: none;
padding: 10px !important; 
text-align: center; 
}

.blue_table th, .blue_table td {
background-color: #3398cc;
border: 2px solid black; 
padding: 10px !important; 
text-align: center; 
}

/* HOME PAGE ALPHABET END */
/*
p {
padding: 10px inherit;
}*/

h1, h2, h3, h4 {
text-align: center;
}

h1 {		
font-size: 20pt;
}

h2 {
color: #0088CC;	
font-size: 18pt;
}

h3 {		
color: #ffffff;
font-size: 16pt;
margin-bottom: 20px;
}

h4 {		
color: #66CCFF;
font-size: 14pt;
}
/*

a:active {
color: #006699; 
}

a:link {
color: #44AADD; 
}

a:hover{
color: #99CCFF; 
}

a:visited {	
color: #2288BB; 
}
*/
a {
color: #ffffff; 
}

a:link {
color: #ffffff; 
}

a:active {
color: #000000; 
}

a:hover{
color: #ffffff; 
}

a:visited {	
color: #ffffff; 
}

#text em {
color: #ffffff; 
}

#main {
max-width: 100%;
background-color: #1F546F;
margin: 0 !important;
padding: 0 !important;
text-align: center;

   width: 100% !important;
  
  
  /*border: 4px solid red;
	     overflow: auto;
    position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
*/
}




#text {

margin: 0px auto;
padding: 10px 80px !important;
background-color: #1F546F;
max-width: 100%;
text-align: left;

}

/* BEGIN OF NEW NAVIGATION */ 

#trigramnav {

min-height: auto;
width: 100%;
    display: flex;
    flex-direction: row;
flex-wrap: wrap;
}

.directions img { 
   max-height: 100%;
  min-width: 100%;
  flex-basis: auto;
/*    max-height: 100%; vertical-align: bottom;
    
 flex-grow:1;
flex-shrink: 0;*/
	 flex-grow: 1;
flex-shrink: 0;

margin: 0;
padding: 0;
object-fit: cover;
  vertical-align: bottom;

}

.directions {
background-color: #ccffff;
  width: 100%;
object-fit: cover;
 flex-basis:33.33%;
  padding: 0 !important;
   margin: 0 0 0 0;


}

#trigramnavboxleft {
flex-wrap: wrap;
max-width: 55%;
height: auto;
 min-width: 55%;
  flex-direction: row;
display: flex;
flex-basis: content;
 align-items: stretch;
 align-content: stretch;
padding: 0;
margin: 0;
 flexbox-shrink: 0;
 
}



#trigramnavboxright {
	/*
background-color: green; 
min-width: 45%;
height: auto;*/
max-width: 45%;

   display: grid;
  grid-template-areas: "flag flag" 
                       "left-box yinyang";
  grid-template-rows: 51% 49%;
  /*  grid-template-rows: 56% 44%;*/
  grid-template-columns: 50% 50%;
  row-gap: 0;
grid-row-gap:0;
flex-basis: 45%;
flexbox-shrink: 1;

/*
  flex-basis: 100%;  flex: 1 1 calc(33.33% - 20px); flex-grow, flex-shrink, 
    position: relative;                                   flex-basis: (width - margin) */ 
}
 
 
#koreanflagdiv {
	
background-color: #495f8e;

height: 100%;
max-width: 100%;
 grid-area: flag;
/* height: auto; min-width will overide width.*/
 padding: 0;
 margin: 0;
}

#koreanflagdiv img {
height: auto;
width: 100%;
 min-width: 100%;
/* height: 100%;*/
 display: block;
  padding: 0;
 margin: 0;
}

/*
#homepagelink {
background-image: url(../images/nav/koreanflag.jpg);
display: block;
height: 347px;
width: 550px;  
}*/
/* 
TANGRAM COLOURS
lime green #65ff00
turquoise #42f8eb
fuchsia #ff00fe
medium blue #3398cc
*/


#trigramnavboxrightbottom {
/*background-color: #ccffff;*/
background-color: #3398cc;
height: 100%;
/*height: auto;*/
width: 50%;
}


#thistrigram {
background-color: #3398cc;
grid-area: left-box;
/*
padding: 0px 6px 0px 6px;*/
padding: 10px 20px!important;
text-align: left;
}

span#taoist_meaning {
background-color: #3398cc;
color: #ff00fe;
font-size: 14pt;
font-weight: bold;
padding: 0px;
text-align: center;
display: block;
}

#scigram {
background-color: black;
width: 100%;
min-width: 100%;
height: 100%;
/*height: auto;*/
display: flex;  
padding: 0px;
 grid-area: yinyang;
 margin: 0px;
}

#yinyang {
background-color: black;
width: 100%;
min-width: 100%;
height: 100%;
/*height: auto;*/
padding: 10px;
 grid-area: yinyang;
}

#yinyang_img {
/*	width: 100%;
min-width: 100%;*/
width: 95%;
min-width: 95%;
display: block;	
height: auto;
}

#scigramimg {
	width: 100%;
height: auto;
padding: 0px;
margin: 0px;
min-width: 100%;
display: block;
/*height: fit-content;*/
}
/*
.tangram {
	position: relative;
}*/
/* END OF NEW NAVIGATION */ 
.instructions {
background-color: #ccffff;
color: #FF00FF;
margin: 40px auto!important;
padding: 10px 40px!important;
font-weight: bold;
border-radius: 22px;
}
.vocabulary_dox td.topright {
border-collapse:collapse;
border-top-right-radius: 22px;
}


.vocabulary_dox td.topleft {
border-collapse:collapse;
border-top-left-radius: 22px;
}

.vocabulary_dox .line {
line-height: 1px;
}

.vocabulary_dox {
border-collapse:collapse;
border-radius: 22px;
margin: 10px auto;
text-align: center;
width: 95%;
}


.vocabulary_dox td,th,tr {
background-color: #ccffff;
color: #FF00FF;
font-weight: bold;
padding: 8px !important;
text-align: center;
}

.vocabulary_dox a {
background-color: #ccffff;
color: #FF00FF;
font-weight: bold;
}

.vocabulary_dox a:link {
background-color: #ccffff;
color: #FF00FF;
font-weight: bold;
}

.vocabulary_dox a:visited {
background-color: #ccffff;
color: #FF00FF;
font-weight: bold;
}

.vocabulary_dox a:active {
background-color: #ccffff;
color: #FF00FF;
font-weight: bold;
}

.vocabulary_dox a:hover{
color: #FF00FF;
font-weight: bold;
}

#hangeul_title {
height: 30px;
margin: 10px auto!important;
width: 190px;
display: block;
}

#english_title {
height: 30px;
margin: 10px auto!important;
width: 190px;
display: block;
}


/* ABOUT PAGE SCREENSHOTS BEGIN */

#screenshot_box {
margin: 10px auto; 
width: 666px; 
height: 310px; 
padding: 0px 0px;	
}

.screenshots {
border: 1px solid black;
height: 302px;
padding: 0px;  
width: 302px; 
}

#screenshot_left {
float: left;
}

#screenshot_right {
float: right;
}

.caption {
display: block; 
font-weight: bold; 
text-align: center;
}

.screenshot_img {
border: none; 
height: 300px;
padding: 0px; 
width: 300px; 
}


/* ABOUT PAGE SCREENSHOTS END */

/* WIDGETS BEGIN */
/* AUDIO WORD BEGIN */

div#audioword {
margin: 0px auto;
width: 400px;
height: 300px;
}



/* AUDIO WORD END */

/* GOOGLE CLOCKS BEGIN */

div#analog {
background-color: transparent;
height: 300px; 
overflow: visible;
position: relative; 
top: -100px; 
left: 190px; 
text-align: center; 
width: 340px; 
z-index: 1; 
}

#degrees {
background: transparent;
border: none; 
color: #000000; 
font-size: 8pt; 
font-weight: 600; 
height: 160px;
position: relative; 
top: 100px; 
left: -100px; 
width: 180px; 
z-index: 2; 
}

#degrees tr, td{
background: transparent;
color: #000000;
}

/* GOOGLE CLOCKS END */
/* NUMBER TABLE BEGIN */

table.hundred { 
background-color: #FBFFE0;
margin: 0px auto;
text-align: center;
width: 90%;
}

table.hundred td, th, tr { 
background-color: #ffff66; 
}

table.hundred td {
border: thin ridge #FFEEFF;
}

table.hundred td.one { 
background-color: #FF00FF;
width: 1%;
}

td.fifteen { 
width: 15%;
}

/* NUMBER TABLE END */

/* BODY PARTS START */

img#female_body {
	/*
width: 567px; 
height: 595px;*/
max-width: 100%;
height: auto;
border: thin solid white;
z-index: 1;
}

div#nature { 
padding: 0px 0px 0px 25px !important;
margin: 0px auto;
/*
width: 592px; 
height: 595px;*/
vertical-align: top; 
text-align: center;
z-index: 2;
}

.new_background {
background-position: 0% 100%; 
background-color: #DDDDDD;}

/* BODY PARTS END */

/* WIDGETS END */
th.turquoise_accent {
font-weight: 900;
color: #11DDDD;
background-color: #EEFFFF;
} 

th.hot_pink_accent {
font-weight: 900;
color: #FF00FF;
background-color:#FFEEFF;
} 

/*BELT TEST TABLES START */

table.geuk, table.geuk td, table.geuk th, table.geuk tr, table.geuk p {
background-color: #ffffff;
border: none;
color: #000000;
}

table.geuk {
margin: 10px auto;
text-align: center;
width: 95%;
}

table.geuk td {	
border-bottom: 1px solid black;
padding: 8px 8px 8px 8px !important;
}

table.geuk td.stance {
background-color: #DFDBE5;
border: 1px solid #EEEEEE;
color: #000000;
text-align: center;
width: 10%; 
}

table.geuk td.stance a {
background-color: #DFDBE5;
color: #FF00FF;
font-weight: bold;
}


table.geuk td.movements {
background-color: #EEEEEE;
}

td.movements p {
background-color: #EEEEEE;
color: #000000;
}

table.geuk a{
background-color: #65ff00;
color: #FF00FF; 
}

table.geuk td.movements a{
color: #FF00FF; 
}

th.ten_DAD {
background-color: #BEB9C3; 
text-align: center;
}

/*BELT TEST TABLES END */


.lessons {
background-color: #ffffff;
margin: 0px 30px 30px auto;
padding: 0px;
width: 95%;
}

.lessons td{
background-color: #3398cc;
border: 1px solid #ffffff;
padding: 10px !important;
margin: 0px 0px 0px 0px;
width: 33%;
}

.lessons td strong {
color: black;
}

#footer {
margin: 0 auto;
text-align: center;
width: 100%;
background-color: #1F546F;
padding: 20px 0 20px 0 !important;
color: #FFF;
}

.lime_green {
color: #33FF00;
}

#copyright {
border: none; 
height: 20px; 
width: 20px;
}

.fuchsia {
color: #FF00FF;
}


a {text-decoration: none;}


/*
@font-face {
    font-family: "Batang";
    src: url("batang.ttc");
}
*/

table {

margin: 0px auto !important;
text-align: center;
border-radius:22px;
}