/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}


div.a {
  text-align: center;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


div.button {
	opacity: 0;
	
}



div.c {
    text-align: right;
}div.c {
    text-align: right;
}div.c {
    text-align: right;
} div.c {
    text-align: right;
} 
IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
IMG.close {
 opacity: 0.7;}

* {
	margin: 0;
	padding: 0;
}

 html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
}


#container {
    position:relative;
}

#h14 {
    position: absolute;
    top: 144px;
	left: 1010px;
	right: 0 }



#hawaiip2-3-t1 {
    position: absolute;
	  top: 600px;
	left: 192px;
  }



#img1 {
    position: absolute;
    top: 1330px;
	left: 2450px;
	right: 0 }

#img2 {
    position: absolute;
    top: 180px;
	left: 1535px;
	right: 0 }

#img3 {
    position: absolute;
    top: 790px;
	left: 2152px;
	right: 0 }

#img4 {
    position: absolute;
    top: 180px;
	left: 2145px;
	right: 0 }

#img5 {
    position: absolute;
    top: 1870px;
	left: 373px;
	right: 0 }
#img6 {
    position: absolute;
    top: 1930px;
	left: 1390px;
	right: 0 }

#lesson2-que1 {position: absolute;
    top: 773px;
	left: 373px;
	right: 0 
}

#lesson2-que2 {position: absolute;
    top: 1252px;
	left: 373px;
	right: 0 
}

#lesson4-water {position: absolute;
    top: 254px;
	left: 447px;
	right: 0 
}

#lesson4-mirror {position: absolute;
    top: 1708px;
	left: 348px;
	right: 0 
}
#lesson5-there {position: absolute;
    top: 742px;
	left: 425px;
	right: 0 
}
#lesson5-mon {position: absolute;
    top: 430px;
	left: 1180px;
	right: 0 
}
#lesson5-mr {position: absolute;
    top: 1530px;
	left: 1870px;
	right: 0 
}

#lesson6-my {position: absolute;
    top: 645px;
	left: 348px;
	right: 0 
}
#lesson6-fox {position: absolute;
    top: 980px;
	left: 348px;
	right: 0 
}
#lesson6-paris {position: absolute;
    top: 1660px;
	left: 1410px;
	right: 0 
}
#lesson7-jane {position: absolute;
    top: 2236px;
	left: 718px;
	right: 0 
}
#lesson7-at {position: absolute;
    top: 2237px;
	left: 1175px;
	right: 0 
}

#lesson7-co {position: absolute;
    top: 1910px;
	left: 430px;
	right: 0 
}

#lesson7-old {position: absolute;
    top: 758px;
	left: 2380px;
	right: 0 
}
#lesson8-ra {position: absolute;
    top: 1450px;
	left: 494px;
	right: 0 
}
#lesson8-son {position: absolute;
    top: 1080px;
	left: 2260px;
	right: 0 
}
#lesson8-ga {position: absolute;
    top: 1425px;
	left: 2258px;
	right: 0 
}

#lesson8-hw {position: absolute;
    top: 1720px;
	left: 2250px;
	right: 0 
}

#lesson9-da {position: absolute;
    top: 280px;
	left: 1275px;
	right: 0 
}

#lesson10-bu {position: absolute;
    top: 210px;
	left: 385px;
	right: 0 
}

#lesson11-ma {position: absolute;
    top: 962px;
	left: 1891px;
	right: 0 
}

#lesson11-lud {position: absolute;
    top: 2267px;
	left: 2017px;
	right: 0 
}



div{
  clear:both;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

mark { 
    background-color: #abd5ff;
    color: #666;
}

tab {
	padding-left:0.7em
}

div.lesson {
    text-indent: 10px;
}

p.indent{ padding-left: px}

p.indent2{
	padding-left: 290px;
	
}
p.indent3{
	padding-left: 377.5px;
	
}
p.indent4{
	padding-left: 500px;
	
	
}

p.indent5{
	padding-left: 700px;
	
	
}

p.right{
	text-align: right;
	padding-right: 500px;}


h1 {  font-language-override: 'en', 'ko-KR';
	font-size: 16px;
	font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif' ;
	background: #fff;
	font-weight: normal;
	font-color: #666;

}

body { font-language-override: 'en', 'ko-KR';
	font-size: 16px;
	font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif' ;
	background: #fff;
	font-weight: normal;
	font-color: #666;
}

small {
		font-size: 14px;
}

body.section-1 { }
body.section-2 { }
body.section-3 { }

a:link { text-decoration: none; color: #666; }

a:visited { text-decoration: none; color: #666; }


a:hover {
	text-decoration: underline;
}
a img { border: none; }


/* navbar=top menu bar */

body {margin:auto;
}



.navbar { 
  background-color: none;
  position: fixed;
  top: 0;
  padding: 16px 5px 3px 16px;
  width: 100%;	
	font-size: 16px;
}

.navbar a {
    
   padding: 16px 5px 3px 16px;
  line-height: 1.6;
	font-size: 16px;
	 width: 100%;	
}



.topnav-right {
 
}






#menu {
    width: 280px;
    overflow: scroll;
    top: 130px;
	
bottom: 0; 
	left: 0;
	position: fixed;
   

	line-height: 1.2;
}


#menu ul {
	
	list-style: none;
		margin:  0 32px 0;


}

#menu ul li.section-title { }

#content {


	padding: 0 0 0 0;
	margin: 77px 20px 0 325px;
    top: 0;
}

#img-container p	{

	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 16px;
		font-weight: normal;
	
}

#once { clear: left; }


img.top {
    vertical-align: text-top;
}

img.bottom {
    vertical-align: text-bottom;
}

nav.site_menu a {
  text-decoration: none;
  color: #666;
}






/*post it*/
section { margin: 227px 20px 60px; }
#section_wrap { width: 100%; line-height: 1.3em; }
#section_wrap.program article { display: none; }
#section_wrap.calendar { margin-left: 25%; width: 75%; line-height: 1em; }
#section_wrap.category.notice .list { border-bottom: 1px solid #000; margin-bottom: 1em; padding-bottom: 1em; }
#sticker_wrap { top: 4%; left: 0; width: 100%;}
#stickers { top:130px !important;height: 0px !important;}
#drag_area { position: auto; margin: 20 0 0 200; height: 100% !important;}
#sticker_wrap .sticker { position: absolute; padding: 5px 5px 8px 8px;border: 0px solid none; background-color: #f1c534; cursor: none; font-size: 15px; text-align: left; opacity: 0.7;}
#sticker_wrap .sticker a { font-weight: normal; }
#sticker_wrap .sticker.notice { background-color: #f1c534;}
#sticker_wrap .sticker.red { background-color: #f1c534; }
#sticker_wrap .sticker.yellow { background-color: #f1c534; }
#sticker_wrap .sticker.aqua { background-color: #f1c534; }
#sticker_wrap .sticker.green { background-color: #f1c534; }
#sticker_wrap .sticker.blue { background-color: #f1c534; }
#sticker_wrap .sticker.orenge { background-color: #f1c534; }
#sticker_wrap .sticker.gray { background-color: #f1c534; }
#sticker_wrap .sticker.violet { background-color: #f1c534; }
#sticker_wrap .sticker.very { color: #f1c534; }
#sticker_wrap .sticker a.close { display: block; position: absolute; top: 0; right: 0; width: 18px; height: 18px; }
#sticker_wrap .sticker a.close img { display: block; width: 18px; height: 18px; }



/*button*/
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:none;text-decoration:none;color:none;background-color:none;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   


.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:none!important}
		

/*lesson dropdown bar*/



/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
 font-size: 16px;
	font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif' ;
	background: #fff;
	font-weight: normal;
	font-color: #666;
    font-size: 16px;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    outline: none;
	  overflow: none;
}


}

/* Main content */
.main {
    margin-left: 200px; /* Same as the width of the sidenav */
    font-size: 16px; /* Increased text to enable scrolling */
    padding: 0px 10px;
	
}


/* container align*/
.dropdown-container {
    display: none;
    padding-left: 112px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
    float: right;
    padding-right: 8px;
}