/*
 * (c)2013 Flying Brick Software, LLC 
 *
 * Miles By Motorcycle/Groupmaps styles.
 */

.btn-buy {
        color: black; 
        background-color: #ffd700;
        border-color: #a00000;
}

.btn-buy:hover {
	color: green;
	border-color: green; 
}

/**
* provide an offset for the fixed top nav bar.
*/

body.fv-page-template {

	display: flex;
	align-items: stretch;
	flex-direction: column;
	min-height: 100%;

	/* to accommodate the top nav */

	padding-top: 70px;

	/* to accommodate the slide out side nav */

	overflow-x: hidden;
}

div.container {
	display: flex;
	flex-direction: column;

	/* height does not work */

	min-height: 100%;
}

div.fv-page-footer {

	/**
	* this in combination with the min-height, display: flex, 
	* and flex-direction in the container aligns this to the bottom of the visible page while positioning
	* it at the bottom of the content if content overflows the viewport.
	*/

	margin-top: auto;
}

div.copyright {
	text-align: center;
	margin-bottom: 5px;
}

img.fv-gt-img {

	/**
	* for some reason without this, the dot was getting rendered x and y equal to the width of the screen
	* which was completely mucking up the works.
	*/

	max-height: 1px;
	max-width: 1px;
}

div.fv-center-text {
	text-align: center;
}

/**
* Bike avatar titles that have to be constrained so they don't wrap
*/

.fv-bike-title {
	width: 200px; 
	overflow: hidden; 
	white-space: nowrap; 
	text-overflow: ellipsis
}

/**
* username displayed on account strip
*/

.account-strip-username {
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/**
* on small devices don't include the bootstrap standard padding
* for the outer most container, row, and columns. All our pages
* standardize on the container > row > col-lg-12 structure.
*
* This matches the bootstrap 'xs' breakpoint.
*/

@media (max-width: 768px) {
  	body > .container {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

  	body > .container > .row {
		margin-left: 0px !important;
		margin-right: 0px !important;
	}

  	body > .container > .row .fv-content-container {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

  	body > .container > .row .fv-content-container .container {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

}

/**
* Overrides to create an uncollapsible navbar
*
* @link https://stackoverflow.com/questions/23535289/bootstrap-3-disable-navbar-collapse
*/

.navbar-header {
	width: 100%;
}

/**
* force the dropdown to the left when minimized.
*/

.navbar-right .dropdown-menu {
    right: 0;
    left: auto;
}    

.navbar-header-menu > .navbar-nav {
	float: left;
	margin: 0;
}

.navbar-header-menu .navbar-right {
    float: right!important;
    margin-right: -15px;
}    

.navbar-header-menu > .navbar-nav > li {
	float: left;
}
    
.navbar-header-menu > .navbar-nav > li > a {
	padding-top: 15px;
	padding-bottom: 15px;
}
    
.navbar-header-menu > .navbar-nav .open .dropdown-menu {
	position: absolute;
	float: left;
	width: auto;
	margin-top: 0;
	background-color: #fff;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,.15);
	-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
    
.navbar-header-menu > .navbar-form {
	float: left;
	width: auto;
	padding-top: 0;
	padding-bottom: 0;
	margin-right: 0;
	margin-left: 0;
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}
    
.navbar-header-menu > .navbar-form > .form-group {
	display: inline-block;
	margin-bottom: 0;
	vertical-align: middle;
}
    
.navbar-header-menu > .navbar-left {
	float: left;
}
    
.navbar-header-menu > .navbar-right {
	float: right !important;
}
    
.navbar-header-menu > *.navbar-right:last-child {
	margin-right: -15px !important;
}

/**
* side menu toggle button
*/

.custom-toggle {
	display: block;
	position: relative;
	float: left;
	padding: 9px 10px;
	margin-left: 15px;
	margin-right: 10px;
	margin-top: 8px;
	margin-bottom: 8px;
	background-color: transparent;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;

        /* If border-color is listed before border it does not show up. */

	border-color: #ddd;
}

.custom-toggle:focus {
	outline: 0;
}

.custom-toggle:hover,
.custom-toggle:focus {
	background-color: #ddd;
}

.custom-toggle .icon-bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background-color: #888;
}

.custom-toggle .icon-bar + .icon-bar {
	margin-top: 4px;
}


/**
* offcanvas side menu support
*/

/*
.fv-content-container {
	position: relative;
	overflow: hidden;
}
*/

.navmenu {
	display:none;
	position: fixed;
	left: 0px;
	border: 1px solid #CCC;
	border-radius: 5px;
	width: 300px;
	margin-top: 45px;
	margin-left: -15px;
}

.list-group-submenu .list-group-item-text {
	margin-left: 30px;
}

.navmenu .highlight {
	background-color: #2B8E24;
	color: white;
}

/* ------------------------------------------------------------ */

/**
* legacy
*/

.fv-map-sidebar {
	background: white;
}

.fv-map-sidebar .fv-rich-textarea {
	height: 8em;
	overflow-y: auto;
}

.fv-map-attribution {
	margin-top: -15px;
	text-align: right;
	font-weight: bold;
	font-size: 15px;
	background-color: rgba(255, 255, 255, 0.7);
	box-shadow: 0 0 5px #bbb;
	margin: 0;
}

.fv-map-logo {
	text-align: right;
}

.fv-map-dialog .richtext {
	width: 300px;
	max-width: 750px;
	height: 150px;
	max-height: 500px;
	overflow: auto;
	text-align: left;
	border: #CCCCCC 1px solid;
}

.fv-map-route-control {
	background: white;
	border: black 1px solid;

/* leaflet CSS seems to prevent this without important */

	cursor: pointer !important;
}

.fv-map-route-control .control-border {
	margin: 3px;
}

.fv-map-contextmenu {
	border: black 1px solid;
}

.fv-map-contextmenu .menuitem {
	border-bottom: #CCCCCC 1px solid;
	margin: 5px;
	cursor: pointer !important;
}

.fv-map-contextmenu .menuitem:hover {
	background-color: #CCCCCC;
}

/* ================================================
 * MAP OBJECT
 * ================================================
 */

.fv-object-map {
	display: block;
	margin: 5px;
	padding-bottom: 25px;
}

/* 
* NOTE:
*
* This assumes this and title are wrapped in a fv-clearfix container.
*
* To prevent the title from stacking under the image max-width has to
* be assigned that keeps the total width under that of the container
* and not so far right that it tries to overlap the exitlink icon. 
*/

.fv-context-comment .fv-object-map .fv-image-container,
.fv-context-insert .fv-object-map .fv-image-container {
	float: left;
	margin-bottom: 5px;
}

/*
* maps are displayed larger so are centered.
*/

.fv-context-preview .fv-object-map .fv-image-container {
	margin: 10px auto 10px auto;
}

.fv-context-preview .fv-object-map .fv-image-container .leaflet-container {
	margin: 10px auto 10px auto;
}

/*
* for the map index page we want a larger version than what we display
* in the forum.
*/

.fv-groupmaps-index .fv-context-preview .fv-object-map .fv-image-container .image {
	width: 700px;
	height: 525px;
}

.fv-context-comment .fv-object-map .fv-title,
.fv-context-comment .fv-object-map .fv-description,
.fv-context-insert .fv-object-map .fv-title,
.fv-context-insert .fv-object-map .fv-description,
.fv-context-preview .fv-object-map .fv-description {
	text-align: left;
	margin: 10px 0 0 140px;

	/* 290px here carefully chosen to fit to the right of the image */

	max-width: 290px; 
}

.fv-context-preview .fv-object-map .fv-description {
	font-weight: normal;
	max-width: 400px; 
}

.fv-object-map .site {
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 16px;
	font-weight: bold;
	text-decoration: underline;
}

/**
* comment and insert contexts
*
* Targeting specifically for case when comment is embedded in a primary context.
*/

.fv-context-insert .fv-object-map .fv-object-footer,
.fv-context-comment .fv-object-map .fv-object-footer {
	margin-right: 10px;
}

/* ================================================
 * POI OBJECT
 * ================================================
 */

.fv-object-poi .fv-description {
	margin-left: 20px;
	margin-right: 20px;
}

/**
* Border on small screens
*
* This is applied to mbymc-map component containers to provide a small
* border around the map while leaving larger screens unaffected.
*/

@media (max-width: 575.98px) {
  .fv-map-xs {
    height: 96vh !important; 
    width: 96vw !important; 
    margin: 2% !important;
  }
} 

@media (min-width: 576px) {
  .fv-map-md {
    height: 96vh !important;
    width: 98%;
    margin-left: 2%;
    margin-right: 2%;
  }
}