html {
    max-width: 100%;
    overflow-x: hidden;
}
/*
@font-face {
  font-family: 'mplus-1m-light';
  src: local('mplus-1m-light');
  src: url('https://media.kanjialive.com/fonts/mplus-1m-light-webfont.woff2') format('woff2'),
       url('https://media.kanjialive.com/fonts/mplus-1m-light-webfont.woff') format('woff');
  font-style: normal;
  font-weight: normal;
  font-variant: normal;

}

@font-face {
  font-family: 'SourceSansPro-Regular';
  src: local('SourceSansPro-Regular');
  src: url('https://media.kanjialive.com/fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),
       url('https://media.kanjialive.com/fonts/sourcesanspro-regular-webfont.woff') format('woff');
  unicode-range: U+0000-007F; 
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
}

@font-face {
  font-family: 'SourceSansPro-It';
  src: local('SourceSansPro-It');
 src: url('https://media.kanjialive.com/fonts/sourcesanspro-italic-webfont.woff2') format('woff2'),
      url('https://media.kanjialive.com/fonts/sourcesanspro-italic-webfont.woff') format('woff');
  font-style: italic;
  font-weight: normal;
  font-variant: normal;
}
*/
@font-face {
  font-family: 'JapaneseRadicals-Regular';
  src: local('JapaneseRadicals-Regular');
  src: url('https://media.kanjialive.com/fonts/JapaneseRadicals-Regular.woff2') format('woff2'),
  url('https://media.kanjialive.com/fonts/JapaneseRadicals-Regular.woff') format('woff');
  font-weight: normal;
  font-variant: normal;
}

@font-face {
  font-family: 'mplus-1m-icons';
  src: url('https://media.kanjialive.com/fonts/mplus-1m-icons.woff2') format('woff2'),
       url('https://media.kanjialive.com/fonts/mplus-1m-icons.woff') format('woff');
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
}

@font-face {
  font-family: 'ka-multimedia';
    src: url('https://media.kanjialive.com/fonts/ka-multimedia.woff2') format('woff2'),
    url('https://media.kanjialive.com/fonts/ka-multimedia.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
    font-family: 'source-sans-pro', 'source-han-sans-japanese';
    background-color:#D0D0D0; 
    font-size:15px; 
    max-width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}


.desktop-branding {
  display:none;
}
.desktop-branding img {
  max-width:54px;
  padding-bottom:8px;
}
/*.mobile-branding a {
  margin-top:20px;
}*/
.mobile-branding img {
  max-width:50px;
}

.mobile-branding, .desktop-branding a {
  font-family: 'source-sans-pro';
  font-style: italic;
}


.nav a, .nav {
    font-family:'source-sans-pro', 'source-han-sans-japanese'; 
    font-size:17px; 
    color:#B64630;
    font-weight:normal; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select: none; 
  }
a:hover {
    cursor: pointer;
    text-decoration: none;
}

.search-form {
  width:100%;
  background: #F6F6F6;
 margin-top:-5px;
}

.search-button {
  background: url('https://media.kanjialive.com/img/search-icon.png');
  background-size:22px 22px;
  width: 22px;
  height:22px;
  position:absolute;
  top:8px;
  left:228px;
}



.search-bar {
  border:0; 
  outline:none; 
  background-color:#F6F6F6;
  box-shadow:none;
  color:#B64630;
  padding: 4px 0 1px 10px;
  height:32px;
  width:220px;
  font-family:'source-sans-pro','source-han-sans-japanese'; 
font-size:17px;
}

.nav a.icon {
  font-family:'mplus-1m-icons'; 
  font-size:20px;
}

.container-typeface-video{
  position:absolute;
  width:248px;
  height:248px;
  top:50px;
	
}

.video-container .video {
  width:248px;
  height:248px;  
}

video[poster] {
  width:248px;
  height:248px;
  margin-left: 6px;
}

video {
  width:100%;
}

video::-webkit-media-controls-start-playback-button {
  display: none;
}


.animation-controls {
	margin-top: 16px;
}


.search-results{
	height: 500px;
	margin-left:0;
	
}

.search-results-kanji{
	margin-left:0px;
}

.docs-container {
    padding-top:30px;
}

.mobile-branding {
  margin-bottom:10px;
}

.nav-section-3 img {
  width:25px;
  padding-top:2px;
  float:right;
}


h3 {
    font-family: 'source-sans-pro';
    font-size:17px;
    color:#607F3A;
}

h4 {
    font-family: 'source-sans-pro';
    font-size:16px;
    color:#B64630;
    -webkit-user-select: text;
    -khtml-user-select:text;
    -moz-user-select:text;
    -ms-user-select: text;

}

label {
    font-family: 'source-sans-pro';
    font-size:13px;
    color:#607F3A;
    font-weight: 200;
}


.submit { margin-top:20px; }

textarea { resize: none; }


.radical img {max-width:50px; max-height:50px;}
.hint img {
  max-width:12px;
  max-height:12px;
}
img.ka-breakdown {
    height: 49px;
    width: 49px;
    margin-bottom: 10px;
    margin-top: 5px;
}


.stroke-breakdown {
    position: absolute;
    width: 550px;
    height: 120px;
    margin-left: 24px;
    top: 530px;
}



.luminous-hint .border-no-padding {
  margin-top:15px;
  margin-bottom:15px;
}

.luminous a {
  color:black;
}

.border {
  float:left;
  height:auto;
  width:100%;
  display:block;
  padding-left:15px;
  padding-right:15px;
}
.border-no-padding{
  float:left;
  height:auto;
  width:100%;
  display:block;
}
.border-inner {
  height:1px;
  background-color: #CBCCD0;
}

.border-right {
    border-right:1px solid #CBCCD0;
}

.footer {
  padding-top:15px;
  padding-bottom:5px;
  color:#999;
}

  .mobile-branding img {
    display:none;
  }
  
.container {
    width:1188px;
    min-height: 658px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 55px;
    -moz-box-shadow:    0 3px 6px rgba(100, 100, 100, 0.3);
    -webkit-box-shadow: 0 3px 6px rgba(100, 100, 100, 0.3);
    box-shadow:         0 3px 6px rgba(100, 100, 100, 0.3);
    background-color:white;

  }
  .mobile-branding {
    display:none;
  }
  .luminous-hint .border-no-padding {
    margin-top:0;
    margin-bottom:0;
  }
  .desktop-branding {display:block;}
  .desktop-branding img {float:right;}
  .meaning {height:70px; }
  .onyomi {height:58px;}
  .radical {height:115px;}
  .kunyomi {height:89px;}
  .strokes-grade {height:84px;}
  .kodansha-nelson {height:74px;}
  .luminous {height:89px;}
  .hint {height:115px;}
/*}*/

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-step-left, .icon-play, .icon-pause, .icon-step-right, .icon-pause-down, .icon-step-right-down, .icon-step-left-down, .icon-play-down {
  font-family: 'ka-multimedia';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: normal;
  font-size:20px; 
  color:black; 
  
  
}
.icon-step-left:before { content: "\e008"; }
.icon-play:before { content: "\e007"; }
.icon-pause:before { content: "\e006"; }
.icon-step-right:before { content: "\e005"; }
.icon-pause-down:before { content: "\e002"; }
.icon-step-right-down:before { content: "\e001"; }
.icon-step-left-down:before { content: "\e000"; }
.icon-play-down:before { content: "\e003"; }

.audio-play {
  font-size:15px; 
}

.ka-rad-anim img {
  cursor: pointer;
  width:64px; 
  height:66px; 
  position:absolute;
  top:291px;
  right:1px;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

.ka-rad-anim img.opaque {
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}

div.radical-name{
  top: 294px;	
  position:absolute;
  left:47px;
}

.ka-typefaces {
  height:248px ;
  width:248px ;
}

.ka-typefaces img {
	height: 220px;
	width: 220px;
	margin-left: 20px;
	margin-top: 16px;
}

.ka-typeface-left, .ka-typeface-right{
  color:#000000;
  font-size:20px; 
  font-family:'mplus-1m-icons';
  -webkit-user-select: none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select: none;
}

.typeface-name {
	text-align: center;
	font-size: 15px;
	position: absolute;
	width: 112px;
	left: 75px;
	top: 265px;
}

.ka-welcome-title{
  position:absolute;
  top:44px;
  width:538px;
  font-family: "source-sans-pro";
  font-size:22px;
  color:#607F3A; 
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.02em;
}

.ka-welcome-text {
  font-size: 17px;
  font-family: 'source-sans-pro';
  color: #1a1a1a;
  line-height: 136%;
  -webkit-font-smoothing: antialiased;
  white-space: normal;
  position:absolute;
  top:96px;
  width:538px;	
}

.ka-welcome-text p {
	font-size: 18px;
    font-family: 'source-sans-pro';
    line-height: 136%;
    word-wrap: normal;
    white-space: normal;
    margin-bottom: 8px;
    -webkit-font-smoothing: antialiased;
}

.ka-typeface-left{
	left: 53px;
	position: absolute;
	top: 261px;
}

.ka-typeface-right{
	position: absolute;
	top: 261px;
	right: 43px;
}


.ka-results-h1 {
  font-family: 'source-sans-pro';
  font-size:17px; 
  color:#607F3A;  
  padding:10px 0px 0px 0px;

  position:absolute;
  top:-6px;

}


.ka-results-h3 {
  font-family: 'source-sans-pro';
  font-size:17px; 
  color:#607F3A; 

  position:absolute;
  top: 36px;
}

.ka-border-bottom{
	top:64px;
	position:absolute;
    height:auto;
    width:100%;
    display:inline;
}

.no-results{
		top:79px;
	position:absolute;
	
}

.kanji {
	
  font-family:'source-han-sans-japanese';
  font-size:25px;
  font-weight:200;
}

p.kanji	 {
	position:absolute;
	top:79px;
  margin-left:3px;
  margin-bottom:28px; 
  margin-right:0; 
 word-wrap: break-word;
  white-space:normal;
}

.ka-welcome-header {
  font-family: 'source-sans-pro';
  font-size:22px;
  padding-top:30px; 
  padding-bottom:24px; 
  color:#607F3A; 
  -webkit-font-smoothing: antialiased;
}

.ka-welcome-italic {
  font-family: 'source-sans-pro';
  font-style: italic;
 -webkit-font-smoothing: antialiased;

}


.ka-bottom-bar {
  height: 18px;
  margin-top:-4px; 
  border-top:1px solid #CBCCD0; 
}

.ka-radical {
  font-family:"JapaneseRadicals-Regular";
  font-size:22px; 
  color:#CBCCD0;

}


a.ka {
  font-family:'source-han-sans-japanese';
  font-size:25px;
  font-weight:200;

}

.grouped-row > a.ka {
  padding-left:12px;
}

a.ka, a.ka:visited {
  color:black; 
  text-decoration:none; 
}
a.ka:hover {
  cursor:pointer; 
}
a.ka:hover, a.ka:active {
  color:#B64630;
  text-decoration:none; 
}


.inline {
  display:inline-table;
}

.grouped-results  {
 margin-top:79px;
 
}


.grouped-results .grouped-column {
  
  width:258px;
  margin-right:25px
}



.scroller {
  white-space: nowrap;
  height: 516px;
  overflow-y:hidden;
  overflow: hidden;
  position: relative;
  top:23px;
  
}

.scrollbar-wrapper{
   width:1103px;
  height:auto;
  overflow: hidden;
  float:left;
}


.typeface-container  {
  width:254px;
  height:254px;

}



.example10 {
	font-size:11pt;
}

.example9 {
	font-size:10pt;
}

.example8 {
	font-size:10pt;
}

.example7 {
	font-size:9pt;
}


/*
foundation layer
*/

.col1{ 
	width:258px;
   min-height: 577px;
   max-height: 577px;
	left:0px;
	position:absolute;
	
}
.col2{ 
	width:258px;
	min-height: 577px;
    left:282px;
	position:absolute;
}
.col3{ 
	width:258px;
	min-height: 577px;
	left:564px;
	position:absolute;
}
.col4{
	width:255px;
	min-height: 577px;
	left: 848px;
	position:absolute;
}


.row1{
	position:absolute;
	width:100%;
	min-height:32px;
	padding-top: 10px;
	
}

 .row1 a {
  font-family:'source-sans-pro';
    font-size:17px; 
   color:#B64630;
   font-weight:normal; 
   -webkit-touch-callout: none; 
  /*    -webkit-user-select: none;  */
      -khtml-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select: none; 
   
  }


.row2{
	position:absolute;
	top:32px;
	width:100%;
	min-height:545px;
}


.row3{
	
position:absolute;
	top:32px;
	width:100%;
	min-height:545px;
}



.recordCounter{	
	width:128px;
    float:left;
	height:25px;
}

.recordCounter a.icon-left {
    margin-left:-10px;
    font-size: 20px;	
}

.recordCounter a.icon-right {
    position:absolute;
	height:25px;
	left: 121px;
	font-size: 20px;	
}


span.search{
	position:absolute;
	width:114px;
    left:8px;
    padding-top: 1px;
	text-align:center;
}


.logo {
	position:relative;
	top:-8px;
	left:1074px;
	
}

.logo img{
	width:54px;
	height:54px;
	
}


.container2{
	margin-left:25px; 
    margin-top:42px;
    position:relative;
}






.border1 {
  position:absolute;
  height:auto;
  width:1103px;
  display:inline;
  margin-top:50px;
 
}

.border2 {
  position:absolute;
  height:auto;
  width:1103px;
  display:inline;
  margin-top:564px;
 
}

.version{
  position:absolute;
  width:1103px;
  display:inline;
  margin-top:579px;
  color: #999;
}

.border-inner {
  height:1px;
  background-color: #CBCCD0;
}




h3#kanji{
	position:absolute;
	 top:10px;
     margin-left:-1px;
	
}


#ka-anim-step-back {
	position:absolute;
	left:63px;
	width:20px;
	
}

#ka-anim-play{
	position:absolute;
	left:122px;
	width:20px;
	
}

#ka-anim-step-forward {
	position:absolute;
	left:175px;
	width:20px;
	
}


/* column 2*/


h3.meaning, h3.strokes, h3.grade, h3.examples {
  position:absolute;
  top:10px;
}

  p.meaning, p.strokes, p.grade, div.examples  {
	top: 60px ;
position:absolute;
}

p.strokes, p.kodansha, p.nelson, p.grade{
	font-size:16px;
}

h3.onyomi, h3.kodansha, h3.nelson  {
	top: 123px;
	position:absolute;
	  margin-top: -8px;
}

p.onyomi, p.kodansha, p.nelson  {
	top: 142px;
	position:absolute;
}

h3.kunyomi, h3.luminous  {
	top: 194px;	
	position:absolute;
	  margin-top: -8px;
}

p.kunyomi, p.luminous {
	top:214px;
	position:absolute;
}


div.border3 {
  position:absolute;
  height:auto;
  width:100%;
  display:inline;
  top:253px;
	
}


/* RADICAL */

h3.radical, h3.hint {
	top: 273px;	
	position:absolute;
	  margin-top: -8px;
	
}



.radical-character {
	top: 297px;	
	position:absolute;
	margin-left:0px;
	width:31px;
    height:32px;
    margin-left:2px;
}

.radical-stroke {	
  top: 335px;	
  position:absolute;
  margin-left:1px;
  font-size:16px;
  
}

img.radical-position {	
  top: 338px; 
  position: absolute;
  margin-left: 21px;
  height: 12px; 
  width: 12px;
}


div.radical-meaning{
  top: 315px;	
  position:absolute;
  left:47px;
  white-space:normal;
  width:143px;
}


/* COLUMN 3 */


div.hint {
	 
  position:absolute;
	top: 294px;	
}

div.border4, div.border5 {
  position:absolute;
  height:auto;
  width:100%;
  display:inline;
  top:253px;
	
}


div.border6 {
  position:absolute;
  height:auto;
  width:100%;
  display:inline;
  top:391px;
	
}


h3.grade, p.grade, h3.nelson, p.nelson {
	left:131px ;	
}


.example {
  min-height: 39.5px;
  width: 258px;
}

.example-ja {
	float:left;
}


.example-japanese {
	   font-family:'source-han-sans-japanese';
	  font-size: 16px;
	  
	   
}


div.border7{
	
  position:absolute;
  height:auto;
  width:540px;
  margin-left:25px;
  display:inline;
  top:520px;
	
}




/* SEARCH AND WELCOME */




div.typesquare-container {
	
	position:absolute;
    top: 50px;
    width: 538px;
    left: 524px;
}

.TypeSquare {

	width:476px;
	min-height: 459px;
    margin-left:70px;
    margin-top:25px;


	
}

.scroller-kanji {
 width:1103px;
 overflow:hidden;

}


.list-inline{
	margin-left:15px;
	
}

.list-inline>li {		
   padding-left:0px;		
   padding-right:0px;		
 }
 
div.example-audio, div.example-ja {
	float:left;
}

div.example-audio .icon-play {
	margin-top: 2px; /* also causes vertical misalignment in FireFox */
} 


.icon-play{
	position:absolute;
	right:3px;
	
}


kbd {
	color: #c7254e ;
    background-color: #f9f2f4;
    font-size: 12px;
}

.ps-scrollbar-x{
	
	height:5px;
	background: black;
	pointer:cursor;
}


a.gray-out:hover{
	color:gray;
}


code {
	font-size: 0.85em;
}