/* ********************************************************************************
**
**  Venue Viewer
**  A study in data retrieval and map/list interaction using Mapbox.
**  Website: www.lawrencedolton.com/venues
**
**  Created and Developed by Lawrence Dolton
**  Website: www.lawrencedolton.com
**
**  snd.css
**    primary css file for Sound Data
**
**  Contents
**    reset
**    standard selectors
**    main elements
**    map
**    list
**    fonts
**
** ******************************************************************************** */
/* ========================================================================
** reset
** ======================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none;
  	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary { display: block;}
ol, ul { list-style: none; }

/* ========================================================================
** standard selectors
** ======================================================================== */
body {
    font : 13px 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
    color: #444;
    background-color: #fff;
    line-height: 1;
}
.cf:before, .cf:after {
    content: "";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    zoom: 1;
}
a { text-decoration : none; }
    a:link, a:visited { color : inherit; }
    a:hover { text-decoration: none; }
h1 {
    color: #555555;
    font-family: 'novecento_sans_widedemibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 3.25em;
}
h2 {
    color: #555555;
    font-family: 'open_sanssemibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2.5em;
}
h3 {
    color: #555555;
    font-family: 'open_sanssemibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2em;
}
h4 {
    color: #555555;
    font-family: 'open_sanssemibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
}
h5 {
	color:#555555;
    font-family: 'open_sansregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.2em;
}

strong {
    font-weight: 800;
    color: #000;
}

/* ========================================================================
** main elements
** ======================================================================== */
#snd {
    width: 100%;
    height: 100%;
}
.snd-main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background-color: #765c24;
}
.snd-main-left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 400px;
    padding: 20px;
    text-align: center;
    background-color: #876e39;
}
.snd-main-right {
    position: absolute;
    top: 0;
    left: 400px;
    right: 0;
    bottom: 0;
    text-align: center;
    background-color: #8499ae;
}


/* ========================================================================
** map
** ======================================================================== */
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
.map-gridcontrol-template {
    display: inline-block;
    padding: 20px;
    color: #fff;
    font-family: 'open_sanssemibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 32px;
    background-color: #484848;
}
.map-venue-popup {
    padding: 24px 10px 0px 10px;
}
.map-venue-popup h2 {
    color: #555;
    font-family: 'open_sanssemibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
}
.map-venue-popup h4 {
    color: #555;
    font-family: 'open_sansregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}


/* ========================================================================
** list
** ======================================================================== */
#info-date h4 {
    padding-bottom: 10px;
}
#info-title h2 {
    padding-bottom: 24px;
    color: #f3f2ef;
}
#info-title p {
    padding-top: 3px;
}
#info-title h4 {
    color: #bdbdbd;
}
#info-mapitem h1 {
    padding: 10px 0;
    color: #f3f2ef;
}
#info-source {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    padding-top: 14px;
}
#info-result h3 {
    padding-bottom: 24px;
    color: #f3f2ef;
}
#info-listbox-container {
    position: absolute;
    top: 146px;
    left: 0;
    right: 0;
    bottom: 48px;
    padding: 0 10px;
    overflow: auto;
}
#info-listbox {
    display: inline-block;
    width: 100%;
    padding: 10px;
}
.info-list-item {
    height: 32px;
    margin: 8px 0;
    padding: 6px 10px 0 10px;
    color: #555555;
    font-family: 'open_sanssemibold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 18px;
	border-radius: 6px;
    background-color: #ffae00;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}


/* ========================================================================
** fonts
** ======================================================================== */
@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'novecento_sans_widedemibold';
    src: url('../fonts/Novecentosanswide-DemiBold-webfont.eot');
    src: url('../fonts/Novecentosanswide-DemiBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Novecentosanswide-DemiBold-webfont.woff') format('woff'),
         url('../fonts/Novecentosanswide-DemiBold-webfont.ttf') format('truetype'),
         url('../fonts/Novecentosanswide-DemiBold-webfont.svg#novecento_sans_widedemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}