body {
margin-top: 50px;
background-color: #f1f1f1;
}
.home-body {
}
.outer-container {
margin-right: auto;
margin-left: auto;
height: 100%;
}
.main-container {
}
.footer {
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
font-size: 75%;
opacity: 0.87;
font-family: 'Open Sans', sans-serif;
}
.content-container {
}
.side-adbox {
display: none;
}
.panel-adbox {
width: auto;
}
@media only screen and (min-width: 768px) {
.outer-container {
width: 950px;
}
.container{
max-width: 950px;
}
.navbar {
max-width: 950px;
margin-right: auto;
margin-left: auto;
}
.content-container {
width: 600px;
float: left;
display: block;
}
.side-adbox {
width: 300px;
height: 600px;
display: block;
float: left;
margin-left: 20px;
margin-top: 20px;
}
.panel-adbox {
display: none;
}
}
.navbar-image {
display: inline-block;
float: left;
height: 30px;
margin-top: -6px;
margin-right: 7px;
}
.inogolo-big-panel {
background-color: #fff;
border: 1px solid #D2D2D2;
border-radius: 4px;
}
.inogolo-panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
}
@media only screen and (min-width: 768px) {
.inogolo-panel {
width: 600px;
border: 1px solid #D2D2D2;
padding-bottom: 20px;
}
}
.inogolo-panel-body {
border: none;
border-style: none;
}
.list-group {
border-style: none;
}
.list-group-item {
border: none;
border-style: none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
.pronunciation-name {
font-weight: bold;
font-size: 150%;
opacity: 0.87;
}
.pronunciation-phonetic-label {
font-size: 120%;
opacity: 0.87;
}
.pronunciation-phonetic {
  font-size: 120%;
  font-style: italic;
  opacity: 0.87;
}
.pronunciation-detail-container {
margin-top: 30px;
margin-left: 2%;
margin-right: 2%;
border-width: 1px;
border-color: #D2D2D2;
border-style: solid none none none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
.panel-adbox-container {
margin-top: 30px;
margin-left: auto;
margin-right: auto; 
}
.medium-adbox {
  display: none;
}
@media only screen and (min-width: 768px) {
.pronunciation-detail-container {
margin-left: 8%;
margin-right: 8%;
}
.panel-adbox-container {
display: none;
}
.medium-adbox {
display: block;
width: 300px;
height: 250px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
}
.pronunciation-detail {
  padding-top: 10px;
}
.pronunciation-tags-label {
padding-top: 10px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;
}
.pronunciation-tags-container {
margin-top: 15px;
margin-left: 2%;
margin-right: 2%;
border-width: 1px;
border-color: #D2D2D2;
border-style: solid none none none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
@media only screen and (min-width: 768px) {
.pronunciation-tags-container {
margin-right: 8%;
margin-left: 8%;
}
}
.pr-tag {
margin: 2px;
padding: 3px 7px;
border-radius: 8px;
display: inline-block;
}
a.pr-tag:link {
background-color: #e0e0e0;
color: black;
opacity: 0.87;
text-decoration: none;
}
a.pr-tag:visited {
background-color: #e0e0e0;
color: black;
opacity: 0.87;
text-decoration: none;
}
a.pr-tag:hover {
background-color: #bdbdbd;
color: black;
opacity: 0.87;
text-decoration: none;
}
a.pr-tag:active {
background-color: #bdbdbd;
color: black;
opacity: 0.87;
text-decoration: none;
}
.pronunciation-see-also-container {
margin-top: 15px;
margin-right: 2%;
margin-left: 2%;
border-width: 1px;
border-color: #D2D2D2;
border-style: solid none none none;
font-family: 'Open Sans', sans-serif;
}
@media only screen and (min-width: 768px) {
.pronunciation-see-also-container {
margin-right: 8%;
margin-left: 8%;
}
}
.pronunciation-see-also-label {
padding-top: 10px;
padding-bottom: 5px;
text-align: center;
}
.pronunciation-see-also {
margin-bottom: 5px;
}
.see-also-name {
font-family: 'Open Sans', sans-serif;
margin-left: 20px;
}
.see-also-desc {
margin-left: 20px;
padding-left: 20px;
font-family: 'Open Sans', sans-serif;
}
.description-name {
text-align: center;
font-weight: bold;
font-size: 150%;
opacity: 0.87;
}
.description-text {
text-align: center;
font-size: 100%;
font-style: italic;
opacity: 0.87;
margin-right: 2%;
margin-left: 2%;
}
.name {
border-width: 1px;
border-color: #D2D2D2;
border-style: solid none none none;
margin-right: 2%;
margin-left: 2%;
margin-top: 15px;
padding-top: 5px;
font-weight: bold;
font-size: 150%;
opacity: 0.87;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
@media only screen and (min-width: 768px) {
.name {
margin-right: 8%;
margin-left: 8%;
}
}
.phonetic {
margin-top: 15px;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
.audio-container {
margin-top: 20px;
text-align: center;
}
.description-notes-label {
margin-top: 20px;
padding-top: 10px;
margin-left: 2%;
margin-right: 2%;
border-width: 1px;
border-color: #D2D2D2;
border-style: solid none none none;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
.description-notes {
margin-top: 10px;
font-family: 'Open Sans', sans-serif;
margin-left: 4%;
margin-right: 4%;
}
.home-container {
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 15rem;
margin-bottom: 20vh;
}
.home-search-box {
margin-top: 7rem;
margin-top: 7vh;
text-align: center;
}
.home-image {
width: 90px;
height: 90px;
margin-top: 5rem;
margin-top: 5vh;
}
.home-text-title {
font-size: 120%;
margin-bottom: 4rem;
margin-bottom: 10vh;
}
@media only screen and (min-width: 768px) {
.home-image {
text-align: center;
width: 120px;
height: 120px;
margin-top: 10rem;
margin-top: 10vh;
}
.home-search-box {
margin-top: 10rem;
margin-top: 10vh;
}
.home-text-title {
font-size: 160%;
}
}
.home-text {
font-size: 110%;
}
.pn-search-box {
text-align: center;
margin-bottom: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid transparent;
background-color: #fff;
border-radius: 4px;
}
.search-input {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
height: 3vh;
height: 3rem;
border-radius: 4px;
border: 1px solid #D2D2D2;
}
.pn-btn {
padding-top: 3px;
padding-bottom: 3px;
border-radius: 4px;
border: 1px solid #D2D2D2;
background-color: #e0e0e0;
height: 3vh;
height: 3rem;
}
@media only screen and (min-width: 768px) {
.pn-search-box {
width: 600px;
border: 1px solid #D2D2D2;
}
}
.guide-index-title {
padding-top: 10px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;
font-size: 125%;
}
.guide-index-image {
max-width:35px;
max-height:35px;
}
.guide-index-text {
text-align: center;
font-size: 115%;
margin-top: 5px;
}
.guide-title {
height: 80px;
margin-top: 15px;
margin-left: 5%;
margin-right: 5%;
}
.guide-title-image-container {
height: 80px;
margin: 8px;
float: left;
}
.guide-title-image {
max-width:100%;
max-height:100%;
}
.guide-title-text {
margin-left: 80px;
font-family: 'Open Sans', sans-serif;
font-size: 120%;
opacity: 0.87;
text-align: center;
}
.section-heading {
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5px;
border-width: 1px;
border-color: #D2D2D2;
border-style: solid none none none;
clear: both;
margin-top: 7px;
padding-top: 5px;
font-weight: bold;
font-size: 120%;
}
.sub-section-heading {
padding-top: 5px;
font-family: 'Open Sans', sans-serif;
font-size: 105%;
}
.entry-desc-under {
padding-left: 20px;
margin-bottom: 5px;
font-family: 'Open Sans', sans-serif;
}
.entry-name-url {
}
.name-list-title {
font-family: 'Open Sans', sans-serif;
font-size: 120%;
opacity: 0.87;
text-align: center;
margin-top: 15px;
}
.sub-section {
padding-left: 20px;
}
.section {
margin-left: 5%;
margin-right: 5%;
margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {
.section-heading {
margin-left: 8%;
margin-right: 8%;
}
.guide-title {
margin-left: 8%;
margin-right: 8%;
}
.section {
margin-left: 8%;
margin-right: 8%;
}
}
.guide-entry {
font-family: 'Open Sans', sans-serif;
font-size: 105%;
padding-top: 6px;
padding-bottom: 1px;
}
.entry-desc-under {
padding-left: 20px;
margin-bottom: 5px;
font-family: 'Open Sans', sans-serif;
}
.entry-name-url {
}
.name-list-title {
font-family: 'Open Sans', sans-serif;
font-size: 120%;
opacity: 0.87;
text-align: center;
margin-top: 15px;
margin-bottom: 10px;
}
.tag-title {
  font-weight: bold;
}
.list-container {
margin-top: 15px;
margin-right: 8%;
margin-left: 8%;
padding-top: 10px;
padding-bottom: 20px;
border-width: 1px;
border-color: #D2D2D2;
border-style: solid none none none;
font-family: 'Open Sans', sans-serif;
}
@media only screen and (min-width: 768px) {
.list-container {
margin-right: 8%;
margin-left: 8%;
}
}
.list-entry {
margin-bottom: 10px;
}
.list-name {
font-family: 'Open Sans', sans-serif;
}
.list-description {
padding-left: 20px;
font-family: 'Open Sans', sans-serif;
}
.explore-tags-container {
margin-bottom: 15px;
margin-left: 2%;
margin-right: 2%;
border-width: 1px;
border-color: #D2D2D2;
border-style: solid none none none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
@media only screen and (min-width: 768px) {
.explore-tags-container {
margin-right: 8%;
margin-left: 8%;
}
}
.letter-tag {
margin: 2px;
padding: 3px 7px;
width: 40px;
border-radius: 8px;
display: inline-block;
}
a.letter-tag:link {
background-color: #e0e0e0;
color: black;
opacity: 0.87;
text-decoration: none;
}
a.letter-tag:visited {
background-color: #e0e0e0;
color: black;
opacity: 0.87;
text-decoration: none;
}
a.letter-tag:hover {
background-color: #bdbdbd;
color: black;
opacity: 0.87;
text-decoration: none;
}
a.letter-tag:active {
background-color: #bdbdbd;
color: black;
opacity: 0.87;
text-decoration: none;
}
.explore-tags-label {
padding-top: 10px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;
font-size: 115%;
}
.explore-title {
font-family: 'Open Sans', sans-serif;
font-size: 120%;
font-weight: bold;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
.explore-subcontainer-title {
font-family: 'Open Sans', sans-serif;
font-size: 110%;
}
.explore-tags-subcontainer {
margin-top: 15px;
margin-bottom: 15px;
text-align: center;
}
.navbar-inverse {
background-color: #3679ff;
border-color: transparent;
}
.navbar-inverse .navbar-brand {
color: #e6e6e6;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
color: #fff;
background-color: transparent;
}
.navbar-inverse .navbar-text {
color: #e6e6e6;
}
.navbar-inverse .navbar-nav > li > a {
color: #e6e6e6;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #fff;
background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #fff;
background-color: #1562ff;
}
.navbar-inverse .navbar-toggle {
border-color: #3679ff;
background-color: #3679ff;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
 background-color: #1562ff;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #e6e6e6;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent;
}
.key_tips_div {
margin: 0 auto;
width: 300px;
}
@media only screen and (min-width: 768px) {
.key_tips_div {
width: 500px;
}
}
.key_tips {
}
.key-row {
width: 250px;
margin: 0 auto;
}
.key-heading {
width: 250px;
margin: 0 auto;
border-width: 1px;
border-color: #D2D2D2;
border-style: solid none none none;
margin-top: 20px;
}
.key-cell1 {
border: 1px solid red;
width: 50%;
float: left;
text-align: center;
border-width: 1px;
border-color: #D2D2D2;
border-style: none solid solid solid;
}
.key-cell2 {
border: 1px solid green;
width: 50%;
float: left;
text-align: center;
border-width: 1px;
border-color: #D2D2D2;
border-style: none solid solid none;
}
.inogolo-indent-content {
background-color: #D2D2D2;
border-radius: 5px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
padding: 3px 8px;
}
.inogolo-content {
font-family: 'Open Sans', sans-serif;
margin-top: 20px;
margin-left: 5%;
margin-right: 5%;
}
@media only screen and (min-width: 768px) {
.inogolo-content {
margin-left: 8%;
margin-right: 8%;
}
}
.helplist {
list-style: disc outside none;
margin-left: 5px;
padding-left: 1em;
}
.helpex {
margin-left: 15px;
background-color: #e2e2e2;
border-radius: 3px;
padding: 2px 6px;
}
.embed-youtube {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin: 20px;
}
.embed-youtube iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}