@charset "UTF-8";
h1.itemHeading,
h1.mainHeading,
h2.mainHeading {
    font-size: 1.3em
}

div#nav,
h1.mainHeading,
h2.mainHeading,
h4.mainHeading {
    text-transform: uppercase
}

#nav ul li,
div#main ul,
div#main ul.list {
    list-style: none
}

.main-menu ul,
.sub-footer-menu,
footer ul,
ul#tabs {
    list-style-type: none
}

body {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

h1,
h2,
h3 {
    font-weight: 400
}

h1.itemHeading,
h1.mainHeading,
h2.mainHeading,
h4.mainHeading {
    color: #b55332;
    width: auto;
    font-weight: 300;
    padding: 15px 0 2px;
    border-bottom: 2px solid #b5bab4
}

h4.mainHeading {
    font-size: 1em
}

h2.credits {
    margin-top: 80px
}

.About h4 {
    padding-top: 10px
}

a {
    color: #b55c21
}

a:hover {
    color: #bd5d1e
}

form#embedForm {
    margin: 0 0 0 15px;
    padding: 2px 0 0;
    width: 85%;
    border: none;
    background: 0 0
}

form#embedForm label {
    font-size: .95em;
    color: #333
}

form#embedForm input {
    width: 85%;
    font-size: .75em;
    margin-left: 0;
    padding-left: 0
}

ul#tabs {
    margin: 0;
    padding-bottom: 35px;
    border-bottom: 1px solid #ccc
}

ul#tabs li {
    margin: 0;
    padding: 0;
    display: inline
}

#tabs a:link,
#tabs a:visited {
    float: left;
    margin-right: 8px;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    color: #666;
    font-size: small;
    font-weight: 400;
    line-height: 14px;
    text-decoration: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px
}

.controls,
.return {
    float: right
}

#tabs a:link.active,
#tabs a:visited.active {
    color: #000;
    background: #fff;
    border-bottom: 1px solid #fff
}

#tabs a:hover {
    color: #015
}

body.advanced #tabs li#tab2 a,
body.default #tabs li#tab1 a,
body.help #tabs li#tab3 a {
    color: #000;
    font-weight: 700;
    background: #fff;
    border-bottom: 1px solid #fff
}

div#tabContents {
    margin: 0 0 15px;
    padding: 15px;
    clear: both;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none
}

hr {
    border: 0;
    color: #cccec6;
    background-color: #cccec6;
    height: 1px
}

.highlight {
    background-color: #ff0
}

.toggle {
    text-align: right
}

.controls {
    display: block;
    width: auto;
    padding-left: 20px;
    font: .85em verdana, arial, sans-serif
}

.descript {
    text-align: left;
    padding: 0 15px
}

p.skipNav {
    position: absolute;
    left: -1000em;
    width: 20em
}

.expand {
    line-height: 12px;
    background: url(../img/expand.gif) 0 50% no-repeat;
    padding-left: 16px
}

.contact,
.xml {
    line-height: 10px;
    padding-left: 14px
}

.contact {
    background: url(../img/bubble.gif) 0 50% no-repeat
}

.xml {
    background: url(../img/feed.gif) 0 50% no-repeat
}

.embed,
.permalink,
.quality,
.share {
    line-height: 16px;
    padding-left: 18px
}

.embed {
    background: url(../img/cog.png) 0 50% no-repeat
}

.permalink {
    background: url(../img/link.png) 0 50% no-repeat
}

.quality {
    background: url(../img/icon_pdf.gif) 0 50% no-repeat
}

.share {
    background: url(../img/share.gif) 0 50% no-repeat
}

.warn {
    font-size: .75em;
    color: red
}

p#cloud-view {
    padding: 25px 0
}

p#cloud-view a.size1 {
    font-size: .95em
}

p#cloud-view a.size2 {
    font-size: 1.1em;
    font-weight: 700
}

p#cloud-view a.size3 {
    font-size: 1.2em;
    font-weight: 700
}

p#cloud-view a.size4 {
    font-size: 1.3em;
    font-weight: 700
}

p#cloud-view a.size5 {
    font-size: 1.5em;
    font-weight: 700
}

p#cloud-view a.size6 {
    font-size: 1.6em;
    font-weight: 700
}

p#cloud-view a.size7 {
    font-size: 1.7em;
    font-weight: 700
}

p#cloud-view a.size8 {
    font-size: 1.8em;
    font-weight: 700
}

p#cloud-view a.size9 {
    font-size: 2.5em;
    font-weight: 700
}

p#toggle {
    text-align: right;
    width: 100%
}

p#toggle a {
    line-height: 11px;
    background: url(../img/bullet.gif) 0 50% no-repeat;
    padding-left: 22px
}

a.bck,
a.fwd {
    padding-left: 16px
}

a.bck {
    background: url(../img/bck-arrow.gif) 0 50% no-repeat
}

a.fwd {
    background: url(../img/fwd-arrow.gif) 0 50% no-repeat
}

#nav form#searchbox,
#nav form#searchbox fieldset {
    width: 10em;
    background: 0 0;
    border: none;
    display: inline
}

#nav ul,
div#nav {
    padding: 0;
    margin: 0
}

header#header {
    position: absolute;
    width: 100%;
    height: 80px;
    background: rgba(236, 236, 236, .85);
    z-index: 1
}

div#nav {
    width: 100%;
    min-width: 960px;
    font: 700 1em Arial, Helvetica, sans-serif;
    background-color: #253145;
    white-space: nowrap;
    overflow: hidden
}

#nav ul {
    float: left;
    width: 100%
}

#nav ul li {
    display: inline;
    margin: 0;
    padding: 10px 0
}

#nav ul li a {
    text-decoration: none;
    border: none;
    color: #fff;
    padding: 0 20px 0 15px
}

#nav ul li#links {
    float: left;
    width: 75%
}

#nav ul li#searchForm {
    float: left;
    width: 24%;
    margin: 0;
    padding: 7px 0 0
}

#nav form#searchbox {
    margin: 0;
    padding: 0 1% 0 27%
}

#nav form#searchbox fieldset {
    vertical-align: middle;
    padding: 0;
    margin: 0
}

#nav form#searchbox input {
    vertical-align: middle;
    display: inline;
    width: 12em;
    border: none
}

#nav form#searchbox button.button {
    text-transform: lowercase;
    vertical-align: middle;
    cursor: pointer;
    margin: 0;
    padding: 1px 2px;
    border: 1px solid #ddd;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
}

.secondary-top-menu a {
    color: #919191
}

.secondary-top-menu {
    background: #000;
    color: #919191;
    padding: 5px 0 0
}

.main-menu ul {
    margin: 0;
    padding: 0
}

.fullWidth div#contain,
.rightCol div#contain {
    width: 98%;
    margin: 0 auto;
    min-width: 1000px;
    max-width: 1400px;
    background-color: #e5eae4
}

.main-menu li a {
    float: left;
    padding: 28px 12px 25px;
    border-top: 4px solid rgba(255, 255, 255, 0);
    text-transform: uppercase;
    color: #707070
}

.main-menu li a:hover {
    border-top: 4px solid #afd466;
    text-decoration: none;
    color: #2d4764
}

.main-menu li.active a {
    border-top: 4px solid #afd466;
    font-weight: 700;
    color: #2d4764
}

.main-menu .menu-search {
    padding-top: 25px
}

div#mastHead {
    background-color: #fff;
    height: 100px
}

#mastHead img {
    border: none;
    width: 100%
}

#mastHead p {
    color: #fff;
    padding: 0 10px 3px 0;
    margin: 0;
    font-size: .75em;
    text-align: right
}

#mastHead p a {
    color: #fff;
    text-decoration: underline;
    border: none
}

div#main {
    float: right;
    width: 70%;
    z-index: 100;
    height: 500px
}

html>body div#main {
    height: auto;
    min-height: 500px
}

.rightCol div#main {
    float: left;
    width: 76%
}

.fullWidth div#main {
    width: 100%;
    display: block;
    float: none
}

div#main .gutter {
    padding: 15px
}

div#main h1 strong {
    padding: 2px 5px;
    background-color: #ff6
}

div#main ul.list {
    float: left;
    width: 100%;
    margin: 0 0 10px;
    padding: 0 0 10px;
    text-align: left
}

div#main ul.list li {
    margin: 0;
    padding: 0;
    background-image: none;
    position: relative;
    float: left;
    width: 45%
}

div#main ul.boxes {
    float: left;
    width: 100%;
    margin: 10px 0 20px;
    padding: 0 0 10px;
    list-style: none;
    text-align: left
}

div#main ul.boxes li {
    background-image: none;
    position: relative;
    float: left;
    width: 31%;
    margin: 0 2px 0 0;
    padding: 0 .5em .5em
}

ul#listColumns,
ul#listColumns li#browse ul,
ul#listColumns li#search ul {
    width: 100%;
    float: left;
    list-style: none;
    text-align: left
}

div#main ul.boxes li h2.mainHeading {
    background: url(../img/bullet.gif) 0 75% no-repeat;
    padding-left: 21px
}

div#main ul.boxes li p,
ul#listColumns li p {
    padding: 0 0 3px 5px;
    margin: 0
}

ul#listColumns li#browse,
ul#listColumns li#view {
    margin: 0 20px 0 0;
    padding: 0;
    position: relative;
    float: left
}

ul#listColumns {
    margin: 0 0 10px;
    padding: 0 0 10px
}

ul#listColumns li {
    margin: 0;
    padding: 0;
    background-image: none;
    position: relative;
    float: left;
    width: auto
}

ul#listColumns li#browse {
    width: 30%
}

ul#listColumns li#view {
    width: 33%
}

ul#listColumns li#cycle {
    position: relative;
    float: left;
    width: 30%;
    margin: 0 0 0 20px;
    padding: 0
}

li#cycle p.citation h3,
li#cycle p.citation p {
    margin: 0;
    padding: 0
}

ul#listColumns li#browse ul {
    margin: 0;
    padding: 0 0 10px
}

ul#listColumns li#browse ul li {
    margin: 0;
    padding: 0;
    position: relative;
    float: left;
    width: 47%
}

ul#listColumns li#search {
    position: relative;
    float: left;
    width: 45%;
    margin: 0 20px 0 0;
    padding: 0
}

ul#listColumns li#sort {
    position: relative;
    float: right;
    width: 45%;
    margin: 0;
    padding: 0 0 .5em
}

ul#listColumns li#search ul {
    margin: 0;
    padding: 0
}

.slideshow img {
    border: 1px solid #000;
    float: left;
    width: auto
}

p#caption {
    color: #fff;
    background-color: #666;
    float: left;
    width: 397px
}

ul#block {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left
}

ul#block li {
    display: inline;
    display: inline-block;
    width: 25em;
    margin: 0;
    padding: 10px;
    border-bottom: 2px solid #f2f2f2
}

ul.item,
ul.metadata {
    width: 100%;
    float: left;
    list-style: none
}

ul.item {
    margin-bottom: 10px;
    margin-left: 0
}

ul.item li {
    margin: 0 0 0 .5%
}

ul.metadata {
    margin: 0;
    padding: 0;
    text-align: left
}

ul.item ul.metadata li.object {
    float: left;
    position: relative;
    width: 34%;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 20px 0 0
}

li.object img {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
    max-height: 400px;
    margin: 1%
}

li.object div#jwPlayer {
    margin: 1%
}

.object a span {
    position: absolute;
    top: 0;
    left: 1%;
    color: #fff;
    font-size: .9em;
    font-weight: 500;
    padding: 2px 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #17191c;
    background: rgba(23.25.28, .5);
    opacity: .7
}

ul.item ul.metadata li.describe {
    float: left;
    position: relative;
    width: 34%;
    margin: 1%;
    padding: 0 20px 0 0
}

ul.metadata li.object img {
    height: auto;
    max-width: 100%;
    width: 100%
}

ul.item ul.metadata li.action {
    float: left;
    position: relative;
    width: 25%;
    margin: 0;
    padding: 0
}

li.action img {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
    max-height: 320px;
    margin: 1%
}

ul.noResults {
    margin-left: 0
}

ul.noResults li.browse,
ul.noResults li.donate {
    float: left;
    position: relative;
    width: 30%;
    margin: 0;
    padding: 0 20px 0 0;
    list-style: none
}

ul.noResults li.contribute {
    float: left;
    position: relative;
    width: 28%;
    margin: 0;
    padding: 0;
    list-style: none
}

div.devel {
    padding: 10px 10px 0
}

#main ul.metadata li p {
    margin: 0 0 0 15px;
    padding: 2px 20px 0 0
}

#sideBar {
    float: left;
    width: 20%;
    color: #363636;
    z-index: 1;
    background-color: #fff;
    margin-top: 25px
}

#sideBar dl {
    margin: 0;
    padding: 0
}

#sideBar dt {
    padding: 15px 0 0;
    color: #b55332
}

#sideBar dt.first {
    padding-top: 0
}

.rightCol div#sideBar {
    float: right;
    width: 24%
}

.fullWidth div#sideBar {
    width: 100%;
    display: none;
    float: none
}

div#sideBar .gutter {
    padding: 10px
}

.social-icons {
    position: relative;
    width: 15em;
    list-style: none
}

.social-icons a {
    border-bottom: none;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #2d4764;
    color: #fff
}

.social-icons a:hover {
    color: #fff;
    padding: .8em;
    border: none;
    text-decoration: none
}

.social-icons a:visited {
    text-decoration: none
}

.social-icons a.facebook,
a.pinterest,
a.twitter {
    display: inline-block;
    margin-right: .5em;
    padding: .8em;
    height: 20px;
    width: 20px;
    text-align: center;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

.social-icons a.facebook:hover {
    background-color: #305fb3
}

.social-icons a.twitter:hover {
    background-color: #2daae1
}

.social-icons a.pinterest:hover {
    background-color: #e1003a
}

#footer ul,
div#footer {
    background-color: #e5eae4
}

#main ul.metadata li p.share-text {
    margin-top: 8px;
    margin-bottom: -5px
}

ul.new-social-icons {
    font-size: 250%
}

a.new-social-icons,
a.new-social-icons:hover {
    color: #8f8f8f;
    padding: 8px;
    text-decoration: none
}

.social-links {
    font-size: 18px;
    margin: 0;
    padding: 0
}

.social-links a {
    color: #919191;
    padding: 0 8px
}

#footer ul,
footer ul {
    padding: 0;
    margin: 0
}

.social-links a:hover {
    color: #ccc;
    text-decoration: none
}

div#footer {
    clear: both;
    padding: 10px 0
}

#footer ul {
    float: left;
    width: 100%;
    font-size: .85em;
    border-top: 2px solid #b5bab4
}

#footer ul li {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 3px 7px
}

#footer ul li a {
    text-decoration: underline;
    border: none
}

#footer ul li#info {
    float: left;
    width: auto
}

#footer ul li#links {
    float: right;
    width: auto
}

footer {
    background: #212121;
    padding: 15px 0
}

footer h4 {
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 14px
}

.footer-contact li,
.footer-contact li a,
.footer-news li a {
    color: #afafaf;
    display: block;
    font-size: 13px
}

.footer-news li a {
    padding: 5px 0
}

.footer-contact li a {
    padding: 3px 0
}

.sub-footer,
.sub-footer a {
    color: #999898
}

.sub-footer {
    background: #2e2e2e;
    padding: 5px 0 2px;
    font-size: 12px
}

.sub-footer-menu {
    margin: 0;
    padding: 0;
    width: 200px
}

#myCarousel,
.home-big-slide {
    width: 100%;
    height: 480px;
    z-index: 0;
    position: absolute
}

.sub-footer-menu li a {
    float: left;
    padding: 0 5px
}

.banner-section {
    height: 480px;
    margin-bottom: 20px
}

.home-big-slide {
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
    background: url(../img/slide1.jpg) no-repeat
}

#myCarousel ol.carousel-indicators {
    top: 70%;
    left: 45%;
    width: 125px
}

#myCarousel ol.carousel-indicators li {
    height: 15px;
    width: 15px;
    border-radius: 7.5px;
    margin: 5px;
    background-color: #fff
}

#myCarousel ol.carousel-indicators li.active {
    background-color: #df6a1e;
    box-shadow: 0 0 8px rgba(0, 0, 0, 1);
    -khtml-box-shadow: 0 0 8px rgba(0, 0, 0, 1);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 1)
}

#myCarousel a.carousel-control {
    background: 0 0;
    border: 0;
    opacity: .7;
    top: 50%
}

#myCarousel .carousel-inner .item .slider-text.right {
    position: absolute;
    top: 45%;
    left: 65%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center
}

#myCarousel .carousel-inner .item .slider-text.middle {
    position: absolute;
    top: 45%;
    left: 49%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center
}

#myCarousel .carousel-inner .item .slider-text.left {
    position: absolute;
    top: 45%;
    left: 43%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center
}

#myCarousel .carousel-inner .item .slider-text h1 {
    font-family: Impact, Charcoal, sans-serif;
    letter-spacing: 5px;
    line-height: .9;
    margin: 0;
    text-transform: uppercase;
    font-size: 4em
}

#myCarousel .carousel-inner .item .slider-text .white {
    color: #fff
}

#myCarousel .carousel-inner .item .slider-text h2 {
    text-transform: uppercase;
    padding: 5px;
    margin: 0;
    line-height: .9;
    font-size: 3em
}

#myCarousel .carousel-inner .item .slider-text h3 {
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px;
    margin: 0;
    font-style: italic;
    line-height: .9;
    font-size: 2.5em
}

#main-search .container,
.search-logo {
    border-top-left-radius: 8px 8px;
    height: 100px
}

#myCarousel .carousel-inner .item a {
    color: inherit
}

#myCarousel .carousel-inner .item a:hover {
    color: inherit;
    text-decoration: none
}

#myCarousel .carousel-inner .item {
    background-size: cover !important;
    height: 480px;
    background-color: #1a2c3d;
    background-repeat: no-repeat;
    background-position: center !important
}

/* Image inserted directly onto anchor tag in index.php */

#myCarousel .carousel-inner .item#slide-1 {
	background:url(/acoustic-atlas/img/banner/slides/index-banner-1920-matchgame.jpg)
}

#myCarousel .carousel-inner .item#slide-2 {
    background: url(/acoustic-atlas/img/banner/slides/index-banner-1920-yellowstone.jpg)
}

#myCarousel .carousel-inner .item#slide-3 {
    background: url(/img/banner/slides/index-banner-1920-ringtones.jpg) 90% 90%
}

#myCarousel .carousel-inner .item#slide-4 {
    background: url(/img/banner/slides/index-banner-1920-birds.jpg)
}

#myCarousel .carousel-inner .item#slide-4 .slider-text.right {
    position: absolute;
    top: 50%;
    left: 40%;
    width: 55%;
    padding: 5px;
    background: rgba(10, 10, 10, .50) !important
}

#myCarousel .carousel-inner .item#slide-5 {
    background: url(/img/banner/slides/index-banner-1920-doig.jpg)
}

#main-search {
    height: 100px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0
}

#main-search .container {
    background: rgba(255, 255, 255, .85);
    border-top-right-radius: 8px 8px
}

.search-logo {
    background: #1a2c3d;
    text-align: center;
    padding-top: 8px
}

#main-search form {
    padding-top: 30px
}

.main-content {
    margin-top: 70px;
    padding: 10px
}

.main-content#index {
    margin-top: 0
}

.section-highlight {
    background: url(../img/section-highlight.jpg) no-repeat;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important
}

.section-highlight h2 {
    color: #fff
}

.feature-item {
    background: #f4f4f4;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 15px
}

.feature-item h3 {
    width: 100%;
    text-align: center;
    font-weight: 400;
    margin-top: -10px
}

.feature-item audio,
.feature-item img {
    width: 100%;
    margin-bottom: 15px
}

.feature-table-div {
    display: table;
    width: 100%;
    height: 100%
}

.feature-title-div {
    display: table-cell;
    vertical-align: middle
}

.our-sponsors {
    background: #f6f6f6;
    text-align: right;
    color: #999
}

.our-sponsors h4 {
    font-size: 23px;
    font-weight: 400
}

.totop {
    background: rgba(255, 255, 255, .85);
    padding: 3px;
    font-size: 18px
}

.totop a:hover {
    text-decoration: none
}

.accordion-group {
    border: none;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 0
}

.accordion-inner {
    border: none
}

.accordion-heading a:hover {
    text-decoration: none
}

#logo {
    margin-right: 30px
}

.footer-logo {
    text-align: center
}

.flickr_badge_image {
    margin: 0;
    display: inline
}

.flickr_badge_image img {
    margin: 0 5px 5px 0
}

.btn {
    padding: 6px 14px
}

.btn-large {
    padding: 13px 14px
}

.btn-success {
    background: #3E7A4E;
    border: none;
    border-bottom: inset 4px rgba(0, 0, 0, .25)
}

.btn-warning {
    background: #e8bc25;
    border: none;
    border-bottom: inset 4px rgba(0, 0, 0, .25);
    color: #212121
}

.btn-warning:hover {
    background: #f8c71c;
    color: #212121
}

.btn-primary {
    background: #cf6a28;
    border: none;
    border-bottom: inset 4px rgba(0, 0, 0, .25)
}

.btn-primary:hover {
    background: #df6a1e
}

.btn-navbar {
    background: #b0d567;
    border: none;
    border-bottom: inset 4px rgba(0, 0, 0, .25);
    font-size: 18px
}

.btn-navbar:hover {
    background: #b8e363
}

.search-plus {
    display: block;
    text-align: right
}

#wait-div,
.search-min {
    display: none
}

.navbar .nav {
    height: auto
}

.navbar .nav li a {
    padding: 28px 9px 25px;
    font-weight: 400
}

.navbar .nav>.active>a,
.navbar .nav>.active>a:focus,
.navbar .nav>.active>a:hover {
    color: #2d4764;
    background: 0 0;
    box-shadow: none
}

.navbar .btn-navbar {
    background: #b0d567;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    color: #333;
    float: none;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .75)
}

.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar:active,
.navbar .btn-navbar:focus,
.navbar .btn-navbar:hover,
.navbar .btn-navbar[disabled] {
    color: #000;
    background: #b0d567;
    border: none;
    border-bottom: inset 4px rgba(0, 0, 0, .25);
    font-size: 18px
}

.navbar .nav li.dropdown a,
.navbar .nav li.dropdown.active>.dropdown-toggle,
.navbar .nav li.dropdown.open.active>.dropdown-toggle,
.navbar .nav li.dropdown.open>.dropdown-toggle {
    background: 0 0
}

.navbar .nav li.dropdown li a {
    padding: 10px 20px;
    border: none
}

.navbar .nav li.dropdown li a:hover {
    padding: 10px 20px;
    border: none;
    font-weight: 700
}

.dropdown-menu {
    min-width: 90px;
    background-color: #fff
}

.dropdown-menu .divider {
    margin: 0
}

#wait-div {
    opacity: .7;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0
}

#wait-div img {
    height: 32px;
    width: 32px;
    position: absolute;
    left: 50%;
    top: 50%
}

#wait-div h2 {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center
}

#filterDiv {
    margin-left: 40px
}

#filterButton {
    margin-bottom: 10px
}

.media-container {
    width: 100%;
    padding: 0;
    margin: 0 -10 0 0
}

.media-container>.wrap {
    overflow: hidden
}

.media-container>.wrap>.content {
    padding: 0 10px
}

.media-container>.wrap>.item {
    width: 100%
}

.media-container>.wrap>.item h3 {
    font-size: 13pt;
    padding: 0;
    margin: 0;
    font-weight: 700
}

.media-container>.wrap>.item ul {
    list-style: none;
    width: 100%;
    margin: 0 auto 10px 0;
    padding: 0;
    float: left
}

.media-container>.wrap>.item li {
    width: 28%;
    float: left;
    margin: 2% 0 0 2%;
    position: relative;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    -khtml-box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .3)
}

.media-container>.wrap>.item li:hover {
    box-shadow: 0 0 16px rgba(0, 0, 0, .5);
    -khtml-box-shadow: 0 0 16px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, .5)
}

.media-container>.wrap>.item li.bump {
    float: none;
    display: inline-block
}

.media-container>.wrap>.item ul li img {
    width: 100%;
    height: 200px;
    object-fit: contain
}

.media-container>.wrap>.item#placeTable>.item ul li,
.media-container>.wrap>.item#speciesTable ul li {
    width: 20.5%
}

.media-container>.wrap>.item#speciesTable ul li img {
    height: 150px;
    object-fit: contain
}

.media-container>.wrap>.item#placeTable>.item ul li img {
    height: 150px
}

.media-container>.wrap>.item p {
    text-align: center
}

.media-container>.wrap>.item#ambisonicTable p {
    text-align: left;
	margin-left: 50px;
}

.media-container>.wrap>.item ul li>.info {
    display: none;
    padding-top: 15px
}

.media-container>.wrap>.item ul li>.get {
    text-align: center;
    font-size: 13pt;
    font-weight: 700;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: 0 0;
    border: none;
    display: block;
    margin: 0 auto;
    color: #cf6a28;
    -webkit-tap-highlight-color: transparent
}

.media-container>.wrap>.item ul li>.get span {
    font-weight: 700
}

.media-container>.wrap>.item ul li>.get:focus {
    border: none;
    outline: 0
}

.media-container>.wrap>.item ul li>.player {
    width: 100%;
    margin: 10px 0 0
}

.media-container>.wrap>.item ul li>.info>.formats2 {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
    display: table;
    border-collapse: separate;
    border-spacing: 10px 0
}

.media-container>.wrap>.item ul li>.info>.formats2 a:link {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 13pt;
    font-weight: 700;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #0c3862;
    color: #ff6400;
    text-decoration: none
}

.formats2 a:active,
.formats2 a:hover,
.media-container>.wrap>.item ul li>.info>.formats2 a:visited {
    text-decoration: none;
    background-color: #0c5398;
    color: #eb5d02
}

.media-container>.wrap#ys-wrap {
    overflow: hidden;
    margin: 10px
}

.media-container>.wrap>.item ul li a:hover {
    text-decoration: none
}

.media-container>.wrap>.item ul li a>.names {
    display: table;
    margin: 10px auto 5px;
    width: 100%;
    vertical-align: middle
}

.media-container>.wrap>.item ul li a>.names>.common {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 1.1em;
    color: #2e2e2e;
    font-weight: 700;
    height: 50px
}

.media-container>.media-banner {
    display: table;
    width: 100%;
    height: 100px;
    position: relative;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #004078
}

.media-container>.media-banner h1 {
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    font-weight: 700;
    text-align: right;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3em;
    padding: 5px 25px
}

.media-container#grasslands>.media-banner {
    background-image: url(/acoustic-atlas/img/banner/prairie.jpg)
}

.media-container#grasslands>.media-banner .darken {
    position: absolute;
    bottom: 23%;
    right: 1.5%;
    background: rgba(10, 10, 10, .50) !important
}

.media-container#grasslands>.media-banner h1 {
    vertical-align: middle;
	text-align: right;
    display: table-cell;
}

.media-container#ambisonic>.media-banner {
    background-image: url(/acoustic-atlas/img/banner/ambisonic.jpg)
}

.media-container#ambisonic>.media-banner .darken {
    position: absolute;
    bottom: 23%;
    right: 1.5%;
    background: rgba(10, 10, 10, .50) !important
}

.media-container#ambisonic>.media-banner h1 {
    vertical-align: middle;
	text-align: right;
    display: table-cell;
}

.media-container#ringtones>.media-banner {
    background-image: url(/acoustic-atlas/img/banner/final-banner-ringtones.jpg);
    background-position: 50% 40%;
    padding: 20px 0
}

.media-container#guess-game>div#start div {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    padding-top: 50px
}

.media-container#guess-game>div#start div div {
    background-color: #fff;
    margin: 0 400px;
    padding: 20px
}

.media-container#guess-game>div#start {
    height: 650px;
    display: table;
    width: 100%;
    vertical-align: middle;
    text-align: center;
    background-image: url(/acoustic-atlas/img/match-game2.jpg);
    background-position: 50% 40%
}

.media-container#guess-game>.wrap>img {
    cursor: pointer
}

#audioGame {
    vertical-align: middle;
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

#audioGame td {
    text-align: center;
    padding: 0 15px 15px 0
}

.media-container#guess-game>.media-banner {
    background-image: url(/acoustic-atlas/img/banner/banner-game-final.jpg);
    background-position: 50% 40%;
    height: 150px;
    padding: 0
}

.media-container#guess-game>.media-banner>#gameHeading {
    padding-right: 20px;
    float: right;
    width: 35%
}

.media-container#guess-game>.media-banner>#gameHeading h2 {
    text-align: center;
    color: #fff;
    font-size: 3em;
    font-weight: 700
}

.media-container#guess-game>.media-banner>#gameHeading h3 {
    text-align: center;
    color: #fff;
    line-height: .9
}

.media-container#guess-game>.wrap>.item#gameSet {
    height: 650px;
    text-align: center
}

.media-container#guess-game>.wrap>.item#gameSet ul li {
    width: 28%
}

.media-container#guess-game>.wrap>.item#gameSet ul li>.gameDiv {
    position: relative;
    left: 0;
    top: 0
}

.media-container#guess-game>.wrap>.item#gameSet ul li>.gameDiv img {
    object-fit: contain;
    height: 225px;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer
}

.media-container#guess-game>.wrap>.item#gameSet ul li>.gameDiv img.redx {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 225px;
    object-fit: contain
}

.media-container#guess-game>.wrap>.item#gameSet ul li>.gameDiv img.winner {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 225px;
    object-fit: fill
}

.media-container#guess-game>.wrap>.item#gameSet ul li h3 {
    padding: 10px 0;
    text-align: center;
    line-height: 1.1
}

.media-container#guess-game>.wrap>.item#gameSet ul li>.gameExpand {
    cursor: pointer
}

.media-container>.wrap>.item#podcasts li {
    width: 45%
}

.media-container>.wrap>.item#podcasts ul li img {
    height: 320px;
    object-fit: contain
}

.media-container>.wrap>.item#podcasts ul li p.podcast-title {
    color: #cf6a28;
    font-size: 13pt;
    font-weight: 700
}

.media-container>.wrap>.item#podcasts ul li p.podcast {
    color: #2e2e2e;
    font-style: italic;
    text-align: left
}

.media-container>.wrap>.item#podcasts ul li p.podcast-more {
    color: #cf6a28;
    font-weight: 700;
    text-align: right;
    padding: 0;
    margin: 0
}

.classDiv {
    width: 100%;
    text-align: center
}

.placesButton,
.speciesButton,
input.speciesFilterBox {
    border-radius: 4px;
    background-color: #fff;
    text-align: left
}

.placesButton,
.speciesButton {
    padding: 2px 10px 2px 2px;
    background-image: none;
    border-color: #ccc #ccc #b3b3b3;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 1px 2px rgba(0, 0, 0, .05);
    margin-top: 10px
}

input.placesFilterBox,
input.speciesFilterBox {
    display: inline-block;
    min-width: 35%;
    padding: 0 5px
}

input.grasslandsFilterBox {
    min-width: 50%;
}

.speciesButton:focus {
    border-color: rgba(82, 168, 236, .8);
    outline: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6)
}

input.speciesFilterBox {
    border: 1px solid #d1d3d4;
    margin: 10px 0 1px;
    height: 45px
}

.placesButton img,
.speciesButton img {
    height: 40px;
    margin-right: 5px;
    z-index: 2
}

.speciesButton img {
    background-color: #d38a00;
    width: 40px
}

.speciesButton.selected img,
.speciesButton:hover img {
    background-color: #4dcb6d
}

.placesDiv {
    width: 100%;
    text-align: center
}

.placesButton img {
    background-color: #d38a00;
    width: 40px
}

.placesButton.selected img,
.placesButton:hover img {
    background-color: #4dcb6d
}

input.placesFilterBox {
    border-radius: 4px;
    border: 1px solid #d1d3d4;
    background-color: #fff;
    text-align: left;
    margin: 10px 0 1px;
    height: 45px
}

.nav-ys {
    width: 100%;
    display: table;
    table-layout: fixed
}

.nav-ys ul {
    display: table-row;
    margin: 0;
    padding: 0
}

.nav-ys ul li {
    display: table-cell;
    width: 25%;
    height: 100%;
    margin: 0;
    padding: 10px 10px 0;
    border: none;
    text-indent: 0;
    float: none;
    text-align: center;
    vertical-align: middle
}

.nav-ys ul li a {
    display: block;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 600;
    padding-top: 3%;
    color: #2e2e2e;
    text-decoration: none
}

.nav-ys ul li a img {
    height: 69px;
    width: 70px
}

.nav-ys ul li a img.triangle {
    height: 15px;
    width: 30px;
    background-color: none;
    border: 0;
    margin-bottom: -3px
}

.nav-ys ul li p {
    padding-top: 15px;
    padding-bottom: 0;
    margin-bottom: 0
}

.table-img {
    width: 150px;
    height: auto
}

.tab {
    background-color: #fff;
    padding: 0 15px 15px
}

.tab-1 {
    border-top: 6px solid #cf6a28
}

.tab-2 {
    border-top: 6px solid #d38a00
}

.tab-3 {
    border-top: 6px solid #4b9665
}

.tab-4 {
    border-top: 6px solid #2d4764
}

audio::-internal-media-controls-download-button {
    display: none
}

audio::-webkit-media-controls-enclosure {
    overflow: hidden
}

audio::-webkit-media-controls-panel {
    width: calc(100% + 30px)
}

.gameStartNEW {
    background-image: url(/acoustic-atlas/img/marmot-standalone-600.png);
    background-size: 45%;
    background-repeat: no-repeat;
    height: auto;
    padding: 0 0 0 45%;
    background-color: #2e2e2e;
    border: 5px solid #212121;
    text-align: center;
    color: #fff;
    font-size: 24pt;
    font-family: 'Carter One'
}

.gameStartNEW span {
    color: #afd466
}

.gameStartNEW h1 {
    font-size: 2.25em;
    line-height: .9;
    padding: 8% 0
}

.gameStartNEW h1 span {
    display: block;
    font-size: 150%
}

.gameStartNEW h2 {
    font-family: Helvetica;
    line-height: 1;
    font-size: 1.25em
}

.gameStartNEW h2 span {
    font-family: 'Carter One';
    line-height: 1
}

.gameStartNEW h2 span.line2 {
    font-family: Helvetica;
    display: block;
    color: #fff
}

.gameStartNEW button#startGame {
    font-size: 1em;
    margin: 8% 0;
    padding: 2.5%
}

.gameStartNEW ol#instructions {
    margin: 3% 0;
    list-style: none
}

.gameStartNEW ol#instructions li {
    font-size: .85em;
    font-family: Helvetica;
    line-height: 1
}

@media all and (max-width:50.1em) {
    .justify {
        display: block;
        margin: auto;
        text-align: left
    }
    #mastHead h1 {
        width: 90%;
        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis
    }
    div#main ul.boxes li,
    ul#listColumns li,
    ul.item ul.metadata li.action,
    ul.item ul.metadata li.describe,
    ul.item ul.metadata li.object {
        float: none;
        width: 100%
    }
    #footer ul li#info {
        float: left;
        width: auto
    }
    .search-dl {
        width: 68%
    }
}

@media all and (max-width:30.063em) {
    ul.metadata li.object img {
        height: auto;
        max-width: 100%;
        width: 100%
    }
    input.text,
    select,
    textarea {
        width: 13em
    }
    ul#block li {
        width: 16.5em
    }
    .search-dl {
        width: 100%
    }
}

@media (max-width:1024px) {
    #myCarousel .carousel-inner .item {
        width: 100%;
        background-size: cover !important
    }
    #myCarousel .carousel-inner .item .slider-text h1 {
        font-size: 3.5em;
        font-weight: 700;
        letter-spacing: 2px
    }
    #myCarousel .carousel-inner .item .slider-text h2 {
        font-size: 2em
    }
    #myCarousel .carousel-inner .item .slider-text h3 {
        font-size: 1.5em
    }
    .media-container>.wrap>.item li {
        width: 28%
    }
    .media-container#guess-game>.wrap>.item#gameSet ul li>.gameDiv img,
    .media-container#guess-game>.wrap>.item#gameSet ul li>.gameDiv img.redx,
    .media-container#guess-game>.wrap>.item#gameSet ul li>.gameDiv img.winner {
        height: 175px
    }
    .gameStartNEW {
        font-size: 20pt
    }
}

@media (max-width:979px) {
    .main-menu li a,
    .main-menu li a:hover {
        border-top: none
    }
    header#header {
        height: 108px
    }
    .main-menu li a {
        float: none;
        display: block;
        background: #fff;
        padding: 10px 20px;
        text-transform: uppercase;
        color: #707070;
        border-bottom: thin solid #ccc
    }
    .main-menu li.active a {
        border-top: none;
        font-weight: 400
    }
    #logo {
        width: 200px
    }
    .btn-navbar {
        clear: both
    }
    .main-menu .menu-search {
        padding-top: 15px
    }
    .search-plus {
        display: none;
        text-align: right
    }
    .search-min {
        display: inline-block;
        text-align: right
    }
    .nav-collapse .nav>li>a:hover {
        background-color: #fff;
        font-weight: 700
    }
    .nav-collapse .dropdown-menu a,
    .nav-collapse .nav .active,
    .nav-collapse .nav .dropdown,
    .nav-collapse .nav>li>a,
    .navbar .navbar-nav {
        background-color: #fff
    }
    .navbar .nav li a,
    .navbar .nav li.dropdown li a {
        padding: 10px 20px
    }
    .dropdown-menu li {
        border-bottom: thin dotted #ccc
    }
    .main-content {
        margin-top: 108px
    }
    .main-content#index {
        margin-top: 0
    }
    .media-container>.media-banner {
        margin: -10px 0 0
    }
    .media-container>.media-banner h1 {
        text-align: center;
        font-size: 2em
    }
    .media-container#ringtones>.media-banner h1 {
        text-align: right;
        font-size: 2em
    }
    .media-container#ringtones>.media-banner {
        background-position: 25% 40%
    }
    .nav-ys ul li {
        padding-top: 0
    }
    .nav-ys ul li a {
        text-transform: none;
        font-size: 1em;
        color: #fff
    }
    .nav-ys ul li p {
        padding-top: 1px
    }
    .nav-ys ul li a img {
        height: 60px;
        width: 60px
    }
    .nav-ys li:nth-child(1) {
        background-color: #cf6a28
    }
    .nav-ys li:nth-child(2) {
        background-color: #d38a00
    }
    .nav-ys li:nth-child(3) {
        background-color: #4b9665
    }
    .nav-ys li:nth-child(4) {
        background-color: #2d4764
    }
    .img-1,
    .img-2,
    .img-3,
    .img-4 {
        display: none
    }
    .tab {
        margin-top: 0;
        background-color: #fff;
        padding: 5
    }
    .tab-1 {
        border-top: 10px solid #cf6a28
    }
    .tab-2 {
        border-top: 10px solid #d38a00
    }
    .tab-3 {
        border-top: 10px solid #4b9665
    }
    .tab-4 {
        border-top: 10px solid #2d4764
    }
    .media-container>.wrap>.item li {
        width: 28%
    }
    .media-container>.wrap>.item ul li img {
        height: 150px
    }
    .media-container>.wrap>.item#podcasts li {
        width: 43%
    }
    .media-container#guess-game>.wrap>.item#gameSet ul li {
        width: 44%
    }
    .media-container#guess-game>.media-banner>#gameHeading h2 {
        font-size: 2.4em;
        text-align: right
    }
    .media-container#guess-game>.media-banner>#gameHeading h3 {
        font-size: 1.4em;
        text-align: right
    }
    .gameStartNEW {
        font-size: 16pt
    }
}

@media (max-width:768px) {
    .media-container>.wrap>.item#podcasts ul li a img {
        height: 200px
    }
    .media-container>.wrap>.item li {
        width: 43%
    }
    .media-container#guess-game>.media-banner {
        height: 100px
    }
    .media-container#guess-game>.media-banner>#gameHeading {
        width: 45%
    }
    #myCarousel .carousel-inner .item .slider-text h1 {
        font-size: 2.5em
    }
    #myCarousel .carousel-inner .item .slider-text h2 {
        font-size: 2em
    }
    #myCarousel .carousel-inner .item .slider-text {
        width: 50%
    }
    .gameStartNEW {
        font-size: 16pt
    }
}

@media (max-width:600px) {
    .gameStartNEW {
        font-size: 12pt
    }
}

@media (max-width:480px) {
    .main-menu li a,
    .main-menu li a:hover {
        border-top: none
    }
    .main-content {
        padding: 10px 0
    }
    .container {
        margin-left: 10px;
        margin-right: 10px
    }
    #main-search {
        height: 100px;
        position: relative;
        margin-top: 0
    }
    #main-search .container {
        background: rgba(255, 255, 255, .85);
        border-radius: 8px
    }
    .search-logo {
        border-top-right-radius: 8px 8px
    }
    #main-search input,
    #main-search select {
        margin-bottom: 15px
    }
    #main-search form {
        padding: 15px
    }
    .main-menu li a {
        float: none;
        display: block;
        background: #fff;
        padding: 10px 20px;
        text-transform: uppercase;
        color: #707070;
        border-bottom: thin solid #ccc
    }
    .main-menu li.active a {
        border-top: none;
        font-weight: 400
    }
    #logo {
        width: 180px
    }
    .btn-navbar {
        clear: both
    }
    .main-menu .menu-search {
        padding-top: 15px
    }
    .menu-search input {
        display: none
    }
    .banner-section {
        height: 600px
    }
    #main-search .container {
        height: 200px
    }
    #myCarousel,
    #myCarousel .carousel .slide,
    #myCarousel .carousel-inner {
        height: 400px
    }
    #myCarousel a.carousel-control {
        top: 85%;
        opacity: .9
    }
    #myCarousel ol.carousel-indicators {
        top: 85%;
        left: 40%
    }
    #myCarousel .carousel-inner .item#slide-3 {
        background-position: left !important
    }
    #myCarousel .carousel-inner .item#slide-4 {
        background-position: right !important
    }
    #myCarousel .carousel-inner .item .slider-text.right {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 85%;
        padding: 5px;
        background: rgba(236, 236, 236, .85)
    }
    #myCarousel .carousel-inner .item .slider-text {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 85%
    }
    #myCarousel .carousel-inner .item .slider-text h1 {
        font-size: 2.3em
    }
    #myCarousel .carousel-inner .item .slider-text h3 {
        font-size: 1.3em
    }
    .gameStartNEW {
        background-size: 25%;
        padding: 0;
        background-position: left bottom
    }
    .gameStartNEW h1 {
        padding: 2% 0
    }
    .gameStartNEW button#startGame {
        margin: 10% 0
    }
    .media-container#guess-game>.wrap>.item#gameSet ul li {
        margin-top: 5%;
        width: 90% !important
    }
}