* { margin: 0 auto; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; top: 0px !important; text-align: center; background: #000; }
img { border: 0; }
strong { color: #1D76A9; }
#wrapper { height: 100%; text-align: left; }
#sidebarToggle {
	display:none;
	position: absolute; top: 12px; left: 352px; padding: 6px 0; width: 60px;
	background: #F26621;
	font-family: arial, helvetica, sans-serif; color: #FFF; line-height: 1 !important; text-align: center;
	cursor: pointer; z-index: 10;
	-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
}
#sidebar {
	position: absolute; left: 0px;
	width: 280px; height: 100%; overflow-x: hidden; overflow-y: auto;
	background: #1D76B9;
	font: 14px arial; text-align: left;
	list-style-image: none; list-style-type: none;
	z-index: 100; height: 500px;
}
/*.gmnoprint { display:none;}*/
#categories {  }
#categorySelectionMenu { padding: 2px; background: #F59F4A; text-align: center; }
#categorySelectionMenu option { padding: 2px 4px 2px 6px; color: #000000; background: #F59F4A; }
#categorySelectionMenu select { color: #000000; background: #F59F4A; border: 1px solid #FFFFFF; }
#ratingLegend { padding: 0.5em 1em; color: #FFFFFF; background: #444; font-size: 90%; }

/***********       AJOUT CYRIL GEOPOSITIONNEMENT MAP  ************/
#addMarkerDiv {
	color:#FFF;
	width:640px;
	height:auto;
	top:50%;
	left:50%;
	position: absolute;
	z-index:101;
	margin:-135px 0 0 -320px;
}
#rangeDiv {
	background:#000;
	width:100%;
	min-height:50px;
	z-index:100;
	text-align:center;
	color:#FFF;
	padding:10px 0;
}
#rangeDiv input {
	width:90%; text-align:center;
}
#aroundMe {
	position:absolute;
	top:84px;
	right:12px;
	z-index:100;
	height:60px;
}
ul {
	padding:0; margin:0;
}
#dos {
	text-align:center;
	font-weight:bold;
	color:#FFF;
	padding-top:7px;
}
.addEraseClass {
	float:right; font-size: 18px; font-weight:bold; padding:5px; cursor:pointer
}
.addEraseCatClass {
	float:right; cursor:pointer; padding-right:5px;
}
#explicationTextGeoloc, .geolocButtonsDiv {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
}
#explicationTextGeoloc {
	background: #F1F1F1; padding: 20px; width:600px; color:#000; text-align:justify;
}
#explicationTextGeoloc h2 {
	font-weight: 400;
	margin-bottom:20px;
}
.geolocButtonsDiv {
	width:180px; height: 35px; line-height:35px;
	text-align:center; padding:10px;
	float:left; margin-left:20px; margin-top:20px;
	color:#FFF;
}
.category{ clear:both; padding:8px; height:auto; width:94%; color:#FFF; }
.category div img { vertical-align: middle; }
#logoOdyssea { display:none; }
#range a {
	width: 10px; height: 10px; top: -0.2em;
}

/*******************************************************************/
#sidebar .bigOrange { color: #F26621; font-size: 3em; font-weight: bold; text-decoration: none; text-shadow: 2px 2px 1px #505090; }
#sidebar .mediumRed { color: #F59F4A; font: 24px Verdana; font-weight: bold; text-decoration: none; text-shadow: 1px 1px 0px #505090; }
#sidebar .townName { padding: 6px 0 2px 0; color: #FFFFFF; font: 16px arial; font-weight: bold; line-height: 1.5; }
#sidebar .townName a { color: #FFFFFF; }
#sidebar .aroundName { padding: 6px 0 2px 0; color: #FFFFFF; font: 14px arial; font-weight: bold; }
#sidebar .menuHeader { display: block; padding: 6px 6px 8px 6px; text-align: center; color: #FFFFFF; background: #0b4977; clear: both; }
#sidebar #flagsDiv { width: 100%; background: #15629c; text-align: center; }
#sidebar #flagsDiv img { cursor: pointer; }
#sidebar .menuSuperCategory_odd,
#sidebar .menuSuperCategory_even {
	padding: 8px 8px; width: 100%; height: auto;
	color: #FFF; /*background: #111;*/
	border-bottom: 1px solid rgba(255,255,255,0.5);
	cursor: pointer;
}
#sidebar .itinerariesButton {
	padding: 8px 8px; width: 100%; height: auto;
	color: #FFFFFF; background: #188893;
	border-top: 0px;
	cursor: pointer;
}
#sidebar .menuCategory {
	display: block; padding: 7px;
	color: #FFF; /*background: #222;*/
	border-bottom: 1px dotted #555;
	cursor: pointer;
	clear: both;
	font-size:12px;
}
#sidebar .superCategory { display: none; }
#sidebar .categorySmallIcon { float: left; margin: -3px 6px 0 6px; }
#sidebar .categoryTinyIcon { float: left; margin: 3px 6px 0px; }
.itinerariesSidebar .categorySmallIcon { display: block !important; margin: 3px 8px !important; }
#sidebar .menuFooter {
	position: relative; display: block; padding: 10px;
	text-align: center; color: #FFFFFF;
	background: #555;
	cursor: pointer;
	clear: both;
}
.mediumOrange {
	position: absolute; top: 0px; right: 4px;
	color: #F26621; font-size: 2em; font-weight: bold; text-decoration: none; text-shadow: 2px 2px 1px #505090;
}
/*#sidebar ul { display: none; }*/
#sidebar li {
	float: left; display: block; width: 100%;
	color: #000; background: #3792d6;
	border-bottom: 1px solid #555;
}
#sidebar li:hover { background: #F26621; }
#sidebar li a:link, #sidebar li a:visited, #sidebar li a:active {
	display: block; padding: 4px 12px 4px 18px;
	text-decoration: none; color: #FFFFFF;
}

/* BASINS (NEW) */
.basinButton, .dockButton {
	padding: 0.5em 1em;
	background: #777;
	font-size: 1.2em; color: #FFFFFF !important;
	border-top: 1px solid #555;
	cursor: pointer;
}
.basinButton:hover { background: #926621; }
.dockButton {
	padding: 0.5em 1.5em;
	background: #999;
}
.dockButton:hover { background: #669221; }

/* DIRECTIONS */
#directions { color: #000000; background: #FFF; z-index: 200; }
#directions a { color: #FFFFFF; }
#directions td { padding: 8px 6px !IMPORTANT; font-size: 0.9em; }
.adp-step, .adp-substep { padding: 8px 6px !IMPORTANT; }
.adp-summary, .adp-distance { color: #1D76B9; }
.adp-summary, .adp-legal { padding-bottom: 8px; text-align: center; }
#clearDirections { padding: 8px 0 0; color: #FFFFFF; text-align: center; display: none; }
#directionsFormDiv { color: #FFFFFF; /*background: #1D76A9;*/ line-height: 18px; text-align: center; }

select { font-size: 11px; }
input, option { padding: 3px 4px; font-size: 14px; }
#logoOdyssea { position: absolute; bottom: 20px; right: 20px; z-index: 100; }
#townLogo { position: absolute; bottom: 70px; left: 360px; z-index: 10; }
#navionicsLogo { position: absolute; bottom: 34px; left: 376px; z-index: 10; }

/* BUTTONS */
#zoomInButton, #zoomOutButton, #zoomSVInButton, #zoomSVOutButton,
#youAreHereButton,
#basketButton,
#weatherButton,
#backCloseButton,
#closeStreetviewButton {
	position: absolute; width: 60px; height: 60px;
	background:  #D9A100;
	cursor: pointer; z-index: 10;
	-webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
}
#youAreHereButton { background:  #1D76B9; }
#weatherButton { background:  #1D76B9; }
#backCloseButton { top: 136px; right: 14px; background: #66AA21; }
#closeStreetviewButton { display: none; top: 12px; right: 12px; background: #900000; }
#zoomSVInButton { display: none; top: 82px; right: 12px; }
#zoomSVOutButton { display: none; top: 152px; right: 12px; }
/* map types buttons */
#mapTypesDiv { position: absolute; top: 12px; right: 86px; }
#ROADMAPbutton { background: #666;  }
#SATELLITEbutton { background: #1D76B9;  }
#HYBRIDbutton { background: #5D66A9;  }
#TERRAINbutton { background: #AC8D43;  }
.mapTypeButton {
	margin-left: 12px;
	-webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
}
.mapTypeButton:hover {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

/************************** MAP MED ***************************/
.categoryName {
	display: block; padding: 0.6em 0;
	color: #FFF;
	border-bottom: 1px dotted #555;
	cursor: pointer;
	clear: both;
}
.categoryName .categorySmallIcon { float: left; margin: -3px 0.8em 0 !important; }
.countryName {
	margin-bottom: 1px; padding: 0.4em 0.8em;
	background: #333;
	color: #FFF;
}
.countryName input, .regionName input { margin-right: 4px; vertical-align: middle; }
.regionName {
	margin-bottom: 1px; padding: 0.4em 1.5em;
	background: #666;
	color: #FFF;
}
.countryName div, .regionName div { width: 90%; display: inline-block; cursor: pointer; }
.regionList li { background: transparent !important; border-bottom: 1px solid #333 !important; text-align: right; }
.regionList li a { width: 90%; padding: 0.4em 1em; }

/* TABS */
#buttonsDiv { width: 100% !important; height: auto !important; text-align: left; clear: both; }
.iconOver { padding-left: 2px; }
li#bookingsButton {
	width: 82px; padding-top: 20px;
	color: #FFF; font-size: 0.9em; text-align: center;
	background: url(../img/icons/bookings_button_bg.png) no-repeat 0px 2px;
	cursor: pointer;
}
.infoDiv { position: relative; display: block; margin-top: 6px; width: 100%; }
.audioVisitCaption { color: #1D76A9; letter-spacing: 0px; word-spacing: -1px; font-size: 0.9em; font-weight: bold; text-align: center; }
#audioCommentary { margin-bottom: 0.5em; padding-bottom: 0.5em; font-size: 90%; }
#audioDownload { padding-bottom: 0.5em; font-size: 90%; }
#labelsDiv { margin-bottom: 0.5em; }
#labelsDiv img { max-height:66px;}
.photosDiv, .videoDiv, .threeSixtyDiv { display: block; padding: 4px 4px; width: 100%; text-align: center; background-color: white; border: 0px solid #E0E0E0; }
.videoDiv { height: 252px; }
.threeSixtyDiv { height: 276px; }

/* INFO WINDOW CONTENT STYLING */
.gm-style-iw-d { overflow: auto !important; }
.infoWindowContainer {
	padding: 1em 2em;
	background-color: #FFF;
	width: max-content;
}
#mainPhotoDiv {
	clear: both;
	margin: 1.5em auto 0.5em;
	position: relative;
	width: 100%;
}
#markerName {
	padding: 8px 0 4px; height: auto; clear: both;
	font: 14px verdana, arial; font-weight: bold;
}
.pictodys {
	margin: 12px 8px 8px; width: 40px; height: 40px;
	cursor: pointer;
	-moz-box-shadow: 0px 2px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.6);
	box-shadow: 0px 2px 3px rgba(0,0,0,0.6);
}
.pictodys:hover {
	margin: 12px 8px 6px;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.markerHeader { width: 100%; padding: 0 0 4px 40px; clear: both; color: #1D76A9; font: 12px verdana, arial; font-weight: bold; }
.categoryIcon { float: left; width: 32px; height: 32px; margin: -2px 4px 0 0; }
.markerAddress { display: none; width: 100%; margin-left: 44px; padding-top: 8px; }
.markerLatLng { margin-top: 14px; width: 100%; text-align: center; font-style: italic; }
.infoText { float: left; padding: 15px 14px 14px 14px; width: 100%; font-size: 11px; color: #404040; background: #FFFFFF url(../img/info-window/info-cutout.gif) no-repeat; overflow-x: hidden; overflow-y: auto; }
.infoText a { color: #900000; font-weight: bold; text-decoration: none; }
#view360Div { padding: 6px 0 14px 0; width: auto; max-height: 200px; background: #FFFFFF; overflow: hidden; }
fieldset { display: inline; width: 100%; margin: 1.5em 0 1em 0; padding: 0.5em 1em 1em 1em; }
legend { padding: 0 8px; color: #1D76A9; font-weight: bold; }
.infoThumbnail { float: left; margin: 0.5em 1em 0.5em 0px; }
.infoWideThumbnail { margin-bottom: 0.5em; padding: 0; border: 0; clear: right; /* background: #FFFFFF url(../img/bg_photo.png) no-repeat; border: 1px solid #FAFAFA; */ }
/*.thumbnail { float: left; padding: 0 5px 5px 0; margin: 3px; background: #FFFFFF url(../img/bg_thumb.gif) no-repeat bottom right; border: 0; }*/
.thumbnail, .thumbnailOver { float: left; padding: 4px; margin: 5px 4px; background: #FFFFFF url(../img/bg_photo.png) no-repeat; border: 1px solid #FAFAFA; }
.thumbnailOver { background: #FFFFFF url(../img/odyssea-colors_small.gif) repeat-y -1px top; border: 1px solid #FFFFFF; }
.flashVideo { width: 100%; height: 245px; }
.latLong { margin-bottom: 0px; padding-bottom: 8px; font-size: 0.85em; font-style: italic; }
.infoMap { margin-bottom: -4px; background: #FFFFFF; }
.star { padding: 0; margin: 0 1px 0 0; width: 11px; height: 11px; vertical-align: middle; }
.clear { clear: both; height: 1px; }

/* SEARCH */
.ajaxSearch, .ajaxSearchUsed {
	position: absolute; top: 520px; left: 00px;
	padding: 1em;
	color: #FFF; font-family: arial; font-size: 16px;
	background: #1D76B9;
	/*
	border-radius: 0px 0px 16px 16px;
	-moz-border-radius: 0px 0px 16px 16px;
	-webkit-border-radius: 0px 0px 16px 16px;
	*/
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
	overflow: visible; z-index: 100;
}
.ajaxSearchUsed {
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
}
.ajaxSearch label { width: auto; }
#searchResults {
	position: absolute; top: 46px; left: 0px;
	min-width: 236px; max-height: 500px; overflow: auto;
	display: none;
	padding: 1em 1.5em 1.5em;
	white-space: nowrap;
	color: #000; line-height: 1.7;
	background: #FFFFFF;
	/* border: 2px solid #1D76A9; */
	border-radius: 0px 16px 16px 16px;
	cursor: pointer;
	z-index: 100;
}
#searchResults a { color: #1D76A9; }
#searchResults a:hover { color: #AA6600; text-decoration: underline; }
#searchMask {
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 100%;
	background: transparent url(../img/mask.png);
	z-index: 100;
}
.highlighted { color: #C06000; }

/******************* ITINERARIES MAP ********************/
.itineraryName,
.groupName {
	padding: 8px 8px; width: 100%; height: auto;
	color: #FFF; background: #666;
	border-bottom: 1px solid #222;
	cursor: pointer;
}
.itineraryTypeName { padding: 0.5em; background: #BBB; color: #FFF; font-size: 1.1em; text-align: center; }
.itineraryType1 { background: #1D76B9; }
.itineraryType2 { background: #1D76B9; }
.itineraryType3 { background: #66AA21; }
.itineraryType9 { background: #66AA21; }
.itineraryType4 { background: #569A11; }
.itineraryType5 { background: #D9A100; }
.itineraryType6 { background: #D9A100; }
.itineraryType7 { background: #D9A100; }
.itineraryType8 { background: #E27631; }
.itineraryMarker,
.groupMarker { padding: 6px 0; background: transparent !important; }
.itineraryMarker:hover,
.groupMarker:hover {  background: #AC8D43 !important; }
.itineraryMarker .categorySmallIcon,
.groupMarker .categorySmallIcon { float: left; margin: 3px 0.8em 0 !important; }

/**********************************   TRADUCTION (MS) ********************************/
/*  MICROSOFT TRANSLATOR */
.descriptionFrame {
	height: 84px;
}
/* GOOGLE TRANSLATE */
#google_translate_element { width: 100%; padding: 2px 0px; background: #297DAD; text-align: center; }
.goog-te-banner-frame { display: none; }

@media only screen and ( min-width: 768px ) and ( max-width: 960px ) {
	#sidebarToggle, #zoomInButton, #zoomOutButton, #zoomSVInButton, #zoomSVOutButton,
	#youAreHereButton, #basketButton, #weatherButton, #backCloseButton, #closeStreetviewButton,
	#ROADMAPbutton, #SATELLITEbutton, #HYBRIDbutton, #TERRAINbutton, #NAVIONICSbutton {
		width: 50px; height: 50px; padding:0px;
	}
	#sidebarToggle img, #zoomInButton img, #zoomOutButton img, #zoomSVInButton img, #zoomSVOutButton img,
	#youAreHereButton img, #basketButton img, #weatherButton img, #backCloseButton img, #closeStreetviewButton img, #ROADMAPbutton img, #SATELLITEbutton img, #HYBRIDbutton img, #TERRAINbutton img, #NAVIONICSbutton img {
		width: 50px; height:50px;
	}
	#sidebarToggle span { display:none; }
	.ajaxSearch, .ajaxSearchUsed { padding:11px !important; top:12px;}
	#zoomInButton { top: 132px !important;}
	#zoomOutButton { top: 194px !important; }
	#youAreHereButton { top: 256px !important; }
	#basketButton { top: 70px !important; }
	#weatherButton { top: 132px !important; }
	#backCloseButton {top:70px !important;}
	#invisibleSearchLeft {width:74px !important;}
	#invisiblePictoSize { width: 24px !important;}
}

@media only screen and ( max-width: 768px ) {
	#sidebarToggle, #zoomInButton, #zoomOutButton, #zoomSVInButton, #zoomSVOutButton,
	#youAreHereButton, #basketButton, #weatherButton, #backCloseButton, #closeStreetviewButton,
	#ROADMAPbutton, #SATELLITEbutton, #HYBRIDbutton, #TERRAINbutton, #NAVIONICSbutton {
		width: 40px; height: 40px; padding:0px;
	}
	#sidebarToggle img, #zoomInButton img, #zoomOutButton img, #zoomSVInButton img, #zoomSVOutButton img,
	#youAreHereButton img, #basketButton img, #weatherButton img, #backCloseButton img, #closeStreetviewButton img, #ROADMAPbutton img, #SATELLITEbutton img, #HYBRIDbutton img, #TERRAINbutton img, #NAVIONICSbutton img {
		width: 40px; height:40px;
	}
	#sidebarToggle span { display:none; }
	#ajaxSearch { padding:6px !important; top:12px; display:inline; overflow:hidden; width:82px;}
	#ajaxSearch label { display:none; font-size:10px;}
	#ajaxSearch input { width:45px; height:15px;}
	#zoomInButton { top: 116px !important;}
	#zoomOutButton { top: 168px !important; }
	#youAreHereButton { top: 220px !important; }
	#basketButton { top: 64px !important; }
	#weatherButton { top: 116px !important; }
	#backCloseButton {top:64px !important;}
	#invisibleSearchLeft {width:64px !important;}
	#townLogo { display:none !important; }
	#sidebar { width: 250px !important;}
	#mapShadow { display:none !important;}
	#mapTypesDiv { top:85% !important; bottom:12px !important; right:12px !important;}
	#invisiblePictoSize { width: 16px !important;}
	#searchResults {width:200px !important; padding:10px; max-height: 300px;}
	#searchResults a { white-space: normal; display: block;}
	#addMarkerDiv {width: 300px; margin: -160px 0 0 -150px;}
	#explicationTextGeoloc {
		padding: 10px; width:280px;
	}
	#explicationTextGeoloc {font-size:12px;}
	#explicationTextGeoloc h2 { font-size:15px; }
	.geolocButtonsDiv {
		width:86px; line-height:14px; padding:5px;
		margin-left:5px; margin-top:5px; font-size:12px;
	}
}