/* ********************************************************************************
**
**  America Tour 1986
**  Roaming On Wheels
**  Website: http://vpgeography.com/tour86
**
**  Created and Developed by Lawrence Dolton
**  Website: www.lawrencedolton.com
**  Geography Website: www.vpgeography.com
**  Sound Website: www.alvordloop.com
**
**  tour.css
**    primary css file
**
**  Contents
**    reset
**    standard selectors
**    main elements
**    header
**    tour marker popup
**    leaflet modifications
**    media queries
**    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: 3em;
}
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%;
}
#tour-header {
    position: absolute;
    width: 100%;
    height: 80px;
    background-color: #fff;
    border-bottom: solid 4px #484848;
}
#map {
    position: absolute;
    top: 190px;
    bottom: 0;
    width: 100%;
}

/* ========================================================================
** header
** ======================================================================== */
.header-title {
    padding: 6px 0;
    text-align: center;
    border-bottom: solid 1px #cacaca;
}
.header-title h1 {
    font-size: 2.2em;
}
.header-subtitle {
    padding: 8px 0 8px 2px;
}
.header-subtitle h5 {
    font-size: 1em;
}
.header-info-container {
    display: block;
    width: 100%;
    text-align: center;
    /*background-color: #6e54a8;*/
}
.header-tag {
    padding: 12px 0;
    text-align: center;
    vertical-align: top;
    /*background-color: #bdf673;*/
    border-bottom: solid 1px #cacaca;
}
.header-tag h4 {
    font-size: 1.1em;
}
.header-legend {
    padding: 10px 0 4px 0;
    text-align: center;
    vertical-align: top;
    /*background-color: #a2cb5a;*/
}
.header-legend-item {
    padding-bottom: 6px;
}
.header-legend-item img {
    display: inline-block;
    width: 15px;
    height: 24px;
    margin-right: 14px;
}
.header-legend-item h4 {
    display: inline-block;
    vertical-align: top;
    font-size: 1em;
    padding-top: 4px;
}

/* ========================================================================
** tour marker popup
** ======================================================================== */
.tour-popup h3 {
    font-size: 1.7em;
}
.tour-popup h4 {
    font-size: 1.3em;
}

/* ========================================================================
** leaflet modifications
** ======================================================================== */
/* begin section copied from leaflet_1-6-0.css: used to override popup css in mapbox.css */
/* -- changes indicated below */
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 0px;  /* changed from 1 to 0 */

	margin: -10px auto 0;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: #a5c2af;  /* changed background color */
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
/* end section copied from leaflet_1-6-0.css */



/* ========================================================================
** media queries
** ======================================================================== */
@media screen and (min-width: 1450px) {
    .tour-header {
        height: 80px;
    }
    #map {
        top: 80px;
    }
    .header-title {
        float: left;
        padding: 6px 10px;
        margin-right: 40px;
        text-align: left;
        border-bottom: none;
    }
    .header-title h1 {
        font-size: 3em;
    }
    .header-subtitle {
        padding: 6px 0 0 2px;
    }
    .header-subtitle h5 {
        font-size: 1.2em;
    }
    .header-info-container {
        float: left;
        width: auto;
        margin-top: 12px;
        text-align: left;
    }
    .header-tag {
        display: inline-block;
        text-align: left;
        margin-right: 20px;
        border-bottom: none;
    }
    .header-tag h4 {
        font-size: 1.5em;
    }
    .header-legend {
        display: inline-block;
        text-align: left;
    }
    .header-legend-item {
        display: inline-block;
        margin-left: 20px;
    }
    .header-legend-item:first-child {
        margin-left: 30px;
    }
    .header-legend-item h4 {
        font-size: 1.3em;
    }
}
@media (max-width: 1450px) and (min-width: 1300px) {
    .tour-header {
        height: 80px;
    }
    #map {
        top: 80px;
    }
    .header-title {
        float: left;
        padding: 6px 10px;
        margin-right: 40px;
        text-align: left;
        border-bottom: none;
    }
    .header-title h1 {
        font-size: 3em;
    }
    .header-subtitle {
        padding: 6px 0 0 2px;
    }
    .header-subtitle h5 {
        font-size: 1.2em;
    }
    .header-info-container {
        float: left;
        width: auto;
        margin-top: 12px;
        text-align: left;
    }
    .header-tag {
        float: left;
        text-align: left;
        margin-right: 40px;
        border-bottom: none;
    }
    .header-tag h4 {
        font-size: 1.5em;
    }
    .header-legend {
        float: left;
        padding: 0;
        text-align: left;
    }
    .header-legend-item {
        margin-left: 20px;
    }
    .header-legend-item h4 {
        font-size: 1.3em;
    }
}
@media (max-width: 1300px) and (min-width: 960px) {
    .tour-header {
        height: 136px;
    }
    #map {
        top: 136px;
    }
    .header-title h1 {
        font-size: 3em;
    }
    .header-subtitle h5 {
        font-size: 1.2em;
    }
    .header-tag {
        display: inline-block;
        text-align: left;
        border-bottom: none;
    }
    .header-tag h4 {
        font-size: 1.5em;
    }
    .header-legend {
        display: inline-block;
        text-align: left;
    }
    .header-legend-item {
        display: inline-block;
        margin-left: 20px;
    }
    .header-legend-item:first-child {
        margin-left: 30px;
    }
    .header-legend-item h4 {
        font-size: 1.2em;
    }
}
@media (max-width: 959px) and (min-width: 600px) {
    .tour-header {
        height: 180px;
    }
    #map {
        top: 180px;
    }
    .header-title h1 {
        font-size: 2.75em;
    }
    .header-subtitle h5 {
        font-size: 1.2em;
    }
    .header-tag h4 {
        font-size: 1.5em;
    }
    .header-legend {
        display: inline-block;
        text-align: left;
    }
    .header-legend-item {
        display: inline-block;
    }
    .header-legend-item:last-child {
        margin-left: 20px;
    }
    .header-legend-item h4 {
        font-size: 1.2em;
    }
}
@media (max-width: 600px) and (min-width: 400px) {
    .tour-header {
        height: 204px;
    }
    #map {
        top: 204px;
    }
    .header-title h1 {
        font-size: 2.5em;
    }
    .header-subtitle h5 {
        font-size: 1.2em;
    }
    .header-tag h4 {
        font-size: 1.4em;
    }
    .header-legend-item h4 {
        font-size: 1.2em;
    }
}
/* no greater than 400px, no less than 324px */
@media (max-width: 400px) and (min-width: 324px) {
    .tour-header {
        height: 200px;
    }
    #map {
        top: 200px;
    }
    .header-title h1 {
        font-size: 2.4em;
    }
    .header-subtitle h5 {
        font-size: 1.1em;
    }
    .header-tag h4 {
        font-size: 1.2em;
    }
    .header-legend-item h4 {
        font-size: 1.1em;
    }
}


/* ========================================================================
** 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;

}