/*General style:*/ body {font-family: "Arial Narrow", "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", "Arial", sans-serif;} a {color: #777777;} a:hover > div {text-decoration: underline;} a.nounderline {text-decoration: none;} a.anchor {display: none;} *:hover > a.anchor {display: inline;} .selected{font-weight: bold;} .color-family, .color-meaninggroup, .color-region {color: #000000; font-weight: bold;} .color-language, #topMenu .colorWord {color: #4380C1 !important;} .color-word, #topMenu .colorWord {color: #006400 !important;} .fontsize200pc {font-size:200%;} .color-language {white-space: break-word;} .container-fluid {padding: 0px 5px 0px 5px;} .noborders {border: none;} .centertext {text-align: center;} h3 {margin: 0px 0px 10px 0px; border-bottom: 1px solid #dddddd;} h6 {margin: 0px;} i, .icon, .favicon, input[type="radio"] { margin-left: 5px; margin-right: 5px; } .div-centered { float: none; margin-left: auto; margin-right: auto; } .prev-next { margin-top:-10px; } .icon { display: inline-block; height: 14px; width: 14px; } .favicon {height: 14px} .favicon-bordered {border: 1px solid #dddddd;} .icon-dropdown-custom {background-position: -481px -93px; width: 18px; height: 20px;} .icon-remove-custom {background-position: -483px 0px;} .icon-chkbox-custom {background-position: -483px -48px;} .icon-chkbox-half-custom {background-position: -483px -72px;} .flag { margin-right: 0.2em; margin-left: 0.5em; height: 14.7px; width: 21.3px; } .rotate90 { transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari and Chrome */ -o-transform:rotate(90deg); /* Opera */ } .rotate180 { transform:rotate(180deg); -ms-transform:rotate(180deg); /* IE 9 */ -moz-transform:rotate(180deg); /* Firefox */ -webkit-transform:rotate(180deg); /* Safari and Chrome */ -o-transform:rotate(180deg); /* Opera */ } .rotate270 { transform:rotate(270deg); -ms-transform:rotate(270deg); /* IE 9 */ -moz-transform:rotate(270deg); /* Firefox */ -webkit-transform:rotate(270deg); /* Safari and Chrome */ -o-transform:rotate(270deg); /* Opera */ } .superscript { font-size: x-small; vertical-align: top; display: inline-block; font-variant: small-caps; } .subscript { font-size: xx-small; vertical-align: sub; display: inline-block; margin-left: 0.25em; } .subscript + .superscript {margin-left: -0.4em;} .inline {display: inline-block; margin: 0.5em;} /*Style in topMenu:*/ #topMenu { margin: 5px 0px 5px 0px; height: 37px; } #topMenu .nav-tabs { border-bottom: 0px; margin-right: 0px; } #topMenu .nav-tabs > li:not(.active) > a { webkit-box-shadow: 0px 3px 10px #999 inset; moz-box-shadow: 0px 3px 10px #999 inset; box-shadow: 0px 3px 10px #999 inset; } #topMenu .nav-tabs > li.active > a { background-color: #ffffff; } #topMenu .navbar-inner.span8 { webkit-box-shadow: none; moz-box-shadow: none; box-shadow: none; } #topMenu > .navbar-inner { height: 100%; padding-left: 0px; padding-right: 3px; background: #DADADA; /* for non-css3 browsers */ /*Below for IE, webkit, firefox:*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EFEFEF', endColorstr='#C8C8C8'); background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#C8C8C8)); background: -moz-linear-gradient(top, #EFEFEF, #C8C8C8); } #topMenu > .navbar-inner li > a {padding-bottom: 5px; padding-top: 5px;} #topMenu .brand { font-size: 17.5px; margin-left: -10px; padding-top: 7px; padding-bottom: 7px; } #topMenu .brand, #topMenu .topLink { text-shadow: none; } #topMenu .topLin: { padding-left: 0px; padding-right: 0px; } .dropdown-menu {z-index: 1000000;} .topLink > .inline, #topMenu li.active .inline {text-shadow: none; margin: 0px;} #topMenu .pvImg {margin-right: .5em;} #topmenuFamilies a.topLink {padding-left: 0px; font-size: 17.5px;} #topmenuFamilies li.active>a {height: 22px;} #topmenuSiteLang a.topLink {padding-left: 0px; padding-right: 0px;} #topmenuDownloads {float: right; margin-right: 0px; margin-top: 7px;} #topmenuDownloads a.topLink {padding-right: 0px;} #topmenuDownloads ul.dropdown-menu>li {padding-left: 1em;} #topmenuSettings ul.dropdown-menu>li {padding-left: 1em;} #topmenuSettings .dropdown-menu {margin-left: -125px;} #topmenuSettings .dropdown-menu:before {left: auto; right: 5px;} #topmenuSettings .dropdown-menu:after {left: auto; right: 6px;} #topmenuSoundOptions, #topmenuMisc, #topmenuSettings {padding-top: 2px;} #topmenuAbout {float: right; margin-right: 0px;} #topmenuAbout a.topLink {height: 30px; padding: 0px;} #topmenuAbout a.topLink img {height: 23px; width: 23px;} #topmenuAbout .dropdown-menu {margin-left: -175px; width: 200px;} #topmenuAbout .dropdown-menu:before {left: auto; right: 5px;} #topmenuAbout .dropdown-menu:after {left: auto; right: 6px;} #logo { float: left; height: 22px; width: 22px; margin-top: 5px; margin-left: 5px; } #home { float: left; height: 20px; width: 20px; margin-top: 7px; margin-left: 0px; } /*Common style for left and right sides:*/ .hidelink {padding: 0px; position: absolute; z-index: 10;} .familyList > dd , .regionList > dd , .meaninggroupList > dd { border-width: 0px 1px 1px 1px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-bottom-right-radius: 4px; -moz-border-bottom-left-radius: 4px; margin: 0px; } .familyList > * , dl.regionList > * , .meaninggroupList > * { border-style: solid; border-color: #dddddd; } .familyList > dt , .regionList > dt , .meaninggroupList > dt { font-size: 16px; border-width: 1px 1px 0px 1px; border-top-right-radius: 4px; border-top-left-radius: 4px; -webkit-top-bottom-right-radius: 4px; -webkit-top-bottom-left-radius: 4px; -moz-top-bottom-right-radius: 4px; -moz-top-bottom-left-radius: 4px; margin-top: 10px; padding-top: 2px; } .regionList > dt a > i[class^="icon-"] , .regionList > li i[class^="icon-"] , .languageList i[class^="icon-"]{ margin: 0px; padding: 0px; } /*Style in leftMenu:*/ #leftMenu {padding: 0px; margin-bottom: 0px;} #leftMenu h3 {text-align: center;} .familyList, .regionList, .languageList {list-style: none;} .familyList > dt:first-child {margin-top: 0px;} .familyList .regionList a.colorRegion {font-size: 15px;} .regionList, .languageList { margin: 0px; white-space: nowrap; } dd.languageList { padding: 0px 0px 0px 7px; } .languageList .highlighted { background-color: #FFE993; color: black; } .regionList dd.languageList { padding-left: 2px; } .regionList .languageList li { padding-left: 18px; } .languageLink, .zoomLanguage, .contributorImage {display: none;} .highlighted ~ .zoomLanguage, .highlighted ~ .contributorImage, .highlighted ~ .languageLink {display: inline;} .languageLink > img, .zoomLanguage > i {margin-left: 0px; margin-right: 0px;} .contributorImage.bootbox.modal { top: 0px; } .contributorImage .modal-body { max-height: 800px; padding: 7px 0px 0px 0px; } /*Style in rightMenu:*/ #rightMenu {padding: 0px; margin-bottom: 0px;} #rightMenu h3 {text-align: center;} .meaningGroupList, .wordList {list-style: none; margin: 0px;} .meaningGroupList .wordList {margin-left: 7px;} .p50 {width: 50%; display: inline-block;} .p50 div {display: inline-block;} #sortBy label { display: inline-block; white-space: nowrap; font-size: 12px; } #sortBy input[type="radio"]{ margin-left: 0px; margin-right: 0px; } #wordlistfilter, #sortBy { border: 1px solid #dddddd; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } #SpellingTitle, #PhoneticTitle{white-space: nowrap;} #wordlistfilter input {margin: 0px; padding: 0px;} #SpellingFilter {width: 5em;} #PhoneticFilter {width: 5em;} #wordlistfilter select {width: 100%; margin: 0px;} #SpellingFilter.filterempty , #PhoneticFilter.filterempty { background-color: #f00; border-color: #b94a48; opacity: 0.75; } .wordList > li {height: auto; min-height: 20px;} /*Style in contentArea:*/ #contentArea {overflow: hidden;} #contentArea table {margin-left: auto; margin-right: auto; margin-bottom: 0px;} #tableHeader > a, #tableHeader > h1 {display: inline;} #prevLink {padding-left: 25px;} #nextLink {padding-right: 25px;} .table .spaceRow { height: 1em; line-height: 1em; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; padding: 0px; } #wordHeadline_playAll {position: relative; top: 20px;} .remove {float: right;} .languageHeadlineParent {width: 100%} #languageHeadline, #languageDescription {text-align: center;} #languageHeadline h3 {border: 0px; display: inline;} #languageHeadline #prevLink {display: inline;} #languageInfo { /* Favicons when viewing by language */ line-height: 16px; margin-bottom: 5px; } #language_playAll {vertical-align: middle;} #languageTable {table-layout: fixed;} #contributorGroup .dropdown-menu{ min-width: 300px; max-width: 600px; } #tableHeader > * {display: inline-block;} .table th, .table td { text-align: center; vertical-align: middle; } #map_headline {margin: 0px;} #map_menu { border: 1px solid #dddddd; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #map_menu > * {display: inline;} #map_menu i {margin: 0px;} #map_canvas { min-height: 500px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #map_data, #map_play_directions {display: none;} #SoundControlView { background-color: #ffffff; height: 50px; width: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; border: 1px solid #666; } #SoundControlView > i {position: absolute;} #SoundControlView > i[data-direction="ns"] {top: 0px; left: 14px;} #SoundControlView > i[data-direction="sn"] {top: 34px; left: 13px;} #SoundControlView > i[data-direction="we"] {top: 16px; left: -3px;} #SoundControlView > i[data-direction="ew"] {top: 17px; left: 30px;} #multitable .languageCell>.multitablePlayWe {float: left;} #multitabletrans .icons, #multitable .icons {white-space: nowrap;} /* Contributors page: */ #contributors > h1:first-child {margin-top: 10px;} #contributors > h1 {margin-top: 100px; background-color: #d9edf7;} .contributor:target { background-color: #F2F6CA; } .contributor a { color: #005580; } /* IPA Keyboard: */ #ipaKeyboard { margin-left: 0px; width: auto; height: auto !important; left: 10px; max-width: 1150px; min-width: 500px; } #ipaKeyboard > .modal-header { height: 16px; } #ipaKeyboard > .modal-body { max-height: 600px !important; } /* Styling for nanoscroller See https://jamesflorentino.github.io/nanoScrollerJS */ .nano .nano-pane { background: #D8D8D8; width: 8px; right: 1px; margin: 5px; } .nano .nano-slider { background: #777; } /* From old style.css 2015-02-11: */ div.wordTranslation { width: 80px; display: none;}/*{display:inline-block;} if shown*/ /*JS related*/ a.regionLink, a.familyLink {font-weight: bold; color: black;} /*Wordlistfilter*/ div#sortbyOption {border: 1px solid black; padding-top: 0.15em; padding-bottom: 0.15em; white-space: nowrap;} div#sortbyOption > div {display: inline;} div#sortbyOption > img {margin-left: 0.25em;} div#sortbyOption > img.icon {margin-top: 0.25em;} #wordlistfilter td {border: none; width: 50%;} td#searchFilterTitle {white-space: nowrap;} td#Powersearch {text-align: right; white-space: nowrap;} td#IPALinkContainer {text-align: right; padding-right: 1em;} td#SpellingTitle, td#PhoneticTitle, td#ChooseSpLang, td#ChoosePhLang, td#FilterAddAll {padding-left: 0.5em;} td#ChooseSpLang img, td#ChoosePhLang img {margin-left: 0.3em;} ul#spellingLanguageList {display: none; width: 10em; right:7em;} ul#phoneticLanguageList {display: none; right: 0.25em; width: 10em;} ul#spellingLanguageList, ul#phoneticLanguageList { z-index: 5; margin-top: -0.5em; position: fixed; background-color: #F2F6CA; border: 1px solid black; padding-top: 0.25em; padding-bottom: 0.25em; overflow-y: auto; max-height: 50%; padding-left: 20px; } img.closeFilterList {position: absolute; right: 1mm; top: 1mm;} td#ChooseSpLang:hover li:hover, td#ChoosePhLang:hover li:hover {list-style-image: url(img/triangle_right.png);} #ChooseSpLang .userChoice {color: #4380C1;} #ChoosePhLang .userChoice {color: blue;} input#SpellingFilter {width: 90%;} input#PhoneticFilter { width: 70%; font-family: "Calibri", "Arial Unicode MS", "Cambria", "Doulos SIL", "Gentium", "TITUS Cyberbit Basic", sans-serif;} div#FilterFoundMultiWords {display:inline; margin-left:0.3em; margin-right: 0.3em;} input#FilterAddMultiWords {} #toggleMeaningGroups, #toggleLanguageGroups {border: 1px solid black; white-space: nowrap;} #toggleLanguageGroups {padding-left: 0.25em; padding-top: 0.4em; height: 1.4em;} #toggleMeaningGroups img.icon {margin-top: 0.25em; margin-left: 0.25em;} /*Audio*/ td.transcription { padding: 5px; text-align: center; } div.audio { display: inline; white-space: nowrap; } div.transcription { /*The color of phonetics that can be played with hover*/ color: #00F; display: inline-block; padding-left: 0.1em; padding-right: 0.1em; font-family: "Charis SIL", "Doulos SIL", "Gentium", "Calibri", "Arial Unicode MS", "Cambria", "TITUS Cyberbit Basic", sans-serif; white-space: nowrap; } div.altSpelling { /*The color of altSpellings, usually inside some table above the phonetics*/ font-style: italic; font-family: "Calibri", "Arial Unicode MS", "Cambria", "Doulos SIL", "Gentium", "TITUS Cyberbit Basic", sans-serif;} div.transcription:hover {color: #F00;} /*Makes phonetics/soundfiles red on hover*/ div.fileMissing, div.fileMissing:hover {color: #000000;} /*Phonetics where the soundfiles are missing are black; see #351*/ div.playing {color: #F00;} /*Phonetics where the sound is currently playing are red*/ /* .icon-play added for #194 */ .icon-play { background-position: -483px -121px; transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari and Chrome */ -o-transform:rotate(90deg); /* Opera */ } .icon-play:hover, .playing .icon-play { background-position: -483px -144px; } /*Superscript styles:*/ .superscript, .superscriptStandalone { color: #666; display: inline-block; font-variant: small-caps; margin-left: 0.25em; margin-top: -5px !important; } .superscript { vertical-align: top; font-size: x-small; } div.superscriptStandalone { font-size: small; } /* saveLocation used for load.js */ div#saveLocation {display: none;} /*Drag&Drop*/ .tableLink.word {margin-right: 0.5em;} .ui-draggable {} .ui-draggable-dragging { border: 1px solid black; border-spacing: 0px; padding: 0px;} .word-col-draggable {display: inline;} .region-row-draggable {} .region-row-align { top: 45%; position: relative;} .language-row-draggable {} td.tableClearRow {height: 0.5em; padding: 0px; border-top: 2px solid black; border-bottom: 2px solid black;} td.tableClearCol {width: 0.5em; padding: 0px; border-left: 2px solid black; border-right: 2px solid black;} /*Google maps*/ #map_menu_toggle {margin-left: 0.25em;} #map_zoom_options, #map_menu_viewAll {margin-left: 1em;} #map_menu_viewAll, #map_menu_zoomCenter {margin-right: 0.5em;} #map_menu_viewLast, #map_menu_zoomCoreRegion {margin-left: 0.5em;} #map_menu_geocoordsDisplay {margin-right: 0.3em;float: right;} #map_play_directions {margin-left: 1em; padding-top: 0.5em;} /*Stuff for #shortLinkModal:*/ #createShortLink {margin-top: 2.5px;} #shortLinkModal .urlInput {margin-bottom: 0px;} /*Rounded markers as requested in #382*/ .leaflet-div-icon { border-radius: 5px; } .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; top: 40%; left: 45%; position: absolute; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #homeViewContainer { margin-bottom: 80px; background-image: url('img/bg_map03.png'); background-size: cover; background-repeat: no-repeat; background-position: center; position: fixed; overflow-y:scroll; left: 0px; top: 0px; z-index: 99; background-color: white; height: 100%; width: 100%; } .tile_container { display: flex; flex-wrap: wrap; width:80%; align-content: flex-start; justify-content: space-between; margin-bottom:80px; } .tile { float:left; overflow:hidden; margin: auto; padding:2px; position:relative; } .tile_title { position:absolute; bottom:10px; left:10px; background-color:rgba(1,1,1, 0.2); border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:6px; text-align:center; font-size:120%; color:white; } .tile_img { width:210px; height:210px; vertical-align: middle; border-radius:28px; -moz-border-radius:28px; -webkit-border-radius:18px; transition: .5s ease; backface-visibility: hidden; display: block; } .logo { position:absolute; left:10px; top:10px; } .langsel { position:absolute; right:10px; top:0px; } .homeview_footer { position: fixed; left:0px; bottom:0px; width:100%; background:#eee; margin-top:18px; } .homeview_footer a { text-decoration: none; margin-left:10px; margin-right:10px; } .homeview_footer img { height:28px !important; width:80px !important; max-width:80px !important; } .dropbtn { background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; color: black; padding: 6px; font-size: 12px; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); margin-left:-118px; z-index: 1; } .dropdown-content a { color: black; padding: 12px 6px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #f9f9f9; } .tile_img_hover_info { } .tile_img_hover_info:hover { opacity: 0.5; filter: alpha(opacity=50); } .tile_subinfo { position:absolute !important; top:10px; left:10px; padding:6px; font-size:120%; filter: alpha(opacity=0); opacity: 0; transition: .5s ease; } .tile:hover .tile_img { opacity: 0.3; } .tile:hover .tile_subinfo { opacity: 1; } .word-margin { top: 40px; } .autocomplete { position: relative; display: inline-block; } .autocomplete_input { border: 0px solid transparent !important; background-color: #fff; padding: 0px !important; margin: 0px !important; height: 40px !important; width: 600px; box-shadow: none !important; font-weight: bold; } .autocomplete_input[type=text] { background-color: #ffffff00; border: 0px solid transparent !important; box-shadow: none !important; font-size: 200%; line-height: 40px; font-weight: bold; text-align: center; font-family: "Arial Narrow", "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", "Arial", sans-serif; } .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; z-index: 999; left: 0; right: 0; font-size: 150%; } .autocomplete-items div { padding: 6px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; } .autocomplete-items div:hover { background-color: #e9e9e9; } .autocomplete-active { background-color: DodgerBlue !important; color: #ffffff; } .smallname { color: #aaa; margin-bottom: -6px; } .showRegions { }