/*  ------------------------------------------------------------------------  */
/*  ------------------------------            ------------------------------  */
/*  ------------------------------  COMMON    ------------------------------  */
/*  ------------------------------            ------------------------------  */
/*  ------------------------------------------------------------------------  */

* {
    margin: 0 auto; padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 }
html, body {
	width: 100%; height: 100%;
	background: url("http://www.gruissan-mediterranee.com/templates/gruissan/images/bg-custom.png");
	font: 16px Helvetica, Arial, Verdana, Tahoma;
	line-height: 1.2;
	text-align: left;
	color: #000000;
	margin: 0; padding: 0;
}
a {
	text-decoration: none;
	color: #FFF;
}

#wrapper {
	width: 100%; max-width: 1000px;
}

label { cursor: pointer; color: #716E68; font-weight: bold; }

/*  ------------------------------------------------------------------------  */
/*  ------------------------------            ------------------------------  */
/*  ------------------------------  HEADER    ------------------------------  */
/*  ------------------------------            ------------------------------  */
/*  ------------------------------------------------------------------------  */

#header {
	width: 100%; height: 80px;
	background: #FFF;
	-moz-box-shadow: 0px 3px 3px 1px #716E68;
	-webkit-box-shadow: 0px 3px 3px 1px #716E68;
	-o-box-shadow: 0px 3px 3px 1px #716E68;
	box-shadow: 0px 3px 3px 1px #716E68;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#716E68, Direction=180, Strength=3);
	position: relative;
}
#logo {
	display: block;
	width: 91px; height: 80px; padding: 5px;
	float: left;
}

/*  ------------------------------  BANDEAU   ------------------------------  */

#bandeau {
	width: 100%;
	height: 50px;
}
#arrowBackHeader {
	float: right; display: block; margin-top: 10px;
	margin-right: 20px;
	height: 30px;
	cursor: pointer;
}
#homeButtonHeader {
	float: right; display: block; margin-top: 10px;
	margin-right: 20px; height: 30px;
	cursor: pointer;
}
/*  -------------------------  MENU (BOUTON + DIV)   -----------------------  */
#menuButton {
	float: right;
	background: url("img/menu-button.png") no-repeat right center;
	color: #716E68;
	line-height: 30px;
	height: 30px; width: 80px;
	margin: 10px 10px 0 0;
	cursor: pointer;
}
#menuDiv {
	width: 100%; max-width: 400px;
	background: #716E68;
	color: #FFF;
	position: absolute;
	top: 50px; right: 0px;
	-moz-box-shadow: -4px 4px 8px rgba(0,0,0,0.4);
	-webkit-box-shadow: -4px 4px 8px rgba(0,0,0,0.4);
	box-shadow: -4px 4px 8px rgba(0,0,0,0.4);
	z-index: 1000;
}
#menuDiv ul {
	padding: 10px;
	padding-top: 5px;
}
#menuDiv ul li {
	width: 80%;
	height: auto;
	list-style: none;
	border-bottom: 1px #45433C solid;
}
#menuDiv ul li:last-child{
	border-bottom: none;
}
#menuDiv ul li a {
	display: block;
	line-height: 30px;
	padding: 8px 0;
	background: url(img/list_menu.png) no-repeat right center / 9px auto rgba(0,0,0,0);
}
#menuDiv ul li a:hover {
	color: #E5E1D7;
}
/*  ------------------------------  SLOGAN   ------------------------------  */
#slogan {
	background: #E5E1D7;
	width: 100%;
	height: 25px;
	margin: 0 auto;
	padding-bottom: 5px;
	line-height: 25px;
	font-size: 1rem;
	color: #555555;
	font-family: "lobster","Arial",sans-serif !important;
	padding-left: 40px;
}

/*  ------------------------------------------------------------------------  */
/*  ------------------------------            ------------------------------  */
/*  ------------------------------  CONTENT   ------------------------------  */
/*  ------------------------------            ------------------------------  */
/*  ------------------------------------------------------------------------  */

/*  ------------------------------  GENERAL   ------------------------------  */

#pageTitle {
	font-family: "lobster","Arial",sans-serif !important;
	font-size: 1.3rem;
	color: #E5E1D7;
	background: #555555;
	width: 100%; height: 40px;
	line-height: 40px;
	text-align: center;
	font-weight: 100;
}

/*  ------------------------------  ACCUEIL   ------------------------------  */

#content {
	background: #FFF;
	padding: 5px;
	width: 100%;
	margin-top: 2%;
	min-height: 400px;
}
#plaisancierDivAccueil {
	width: 100%;
	background: url(img/list_aroundMe.png) no-repeat right 20px center;
	color: #716E68;
	height: auto;
	line-height: 60px;
	font-family: "lobster","Arial",sans-serif !important;
	font-size: 1.4rem;
	font-weight: 100;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	margin-bottom: 0px;
	text-align: center;
	border: 1px solid #A9A69F;
	cursor: pointer;
}
#plaisancierDivAccueil img {
	margin: 10px;
	vertical-align: middle;
	margin-top: 4px;
}
#incontournableDivAccueil {
	width: 100%; max-width: 492px;
	position: relative;
	margin-right: 5px;
	float: left;
	cursor: pointer;
}
#incontournableDivAccueil img {
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}
#prepareDivAccueil h2 {
	position: absolute;
	top: 20px;
	left: 0;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	color: #FFF;
	font-family: "lobster","Arial",sans-serif !important;
	font-size: 1.4rem;
	font-weight: 100;
}

#incontournableDivAccueil h2 {
	position: absolute; top: 20px; left: 0; margin: 0 auto; width: 100%;
	text-align: center;
	color: #FFF;
	font-family: "lobster","Arial",sans-serif !important;
	font-size: 3.5rem; font-weight: 100;
	text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.726);
}

#prepareDivAccueil {
	width: 100%; max-width: 492px;
	position: relative;
	float: left;
	background: #716E68;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	color: #FFF;
}
#prepareMenu {
	margin-top: 58px;
	margin-bottom: 20px;
	text-align: center;
}
.prepareMenuLink {
	text-align: center;
	width: 140px;
	font-size: 1.1rem;
	line-height: 22px;
	margin: 13px 0;
	display: inline-block;
	cursor: pointer;
}
.prepareMenuLink:hover, .prepareMenuLink:active {
	opacity:0.5;
}
.prepareMenuLink img {
	width: 31px;
	display: block;
}

.iOSnotifications:after {
    background: -moz-linear-gradient(center top , #F89BA5, #CC0006) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 2px solid #FFFFFF;
    border-radius: 15px;
    box-shadow: 0 2px 3px rgba(100, 100, 100, 0.5);
    color: #FFFFFF;
    content: attr(data-notification);
    display: block;
    font-size: 11px;
    font-weight: bold;
    line-height: 18px;
    position: absolute;
    text-align: center;
    text-shadow: none;
    top: -10px;
    right: 30px;
    width: 18px;
}
#panier { position: relative; }

#aroundMeDivAccueil {
	width: 100%; height: 130px; margin-bottom: 4px; padding: 20px;
	border: 1px solid #A9A69F;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	line-height: 90px;
	text-align: center;
	background: url(img/list_aroundMe.png) no-repeat right 20px center;
	cursor: pointer;
}
#aroundMeDivAccueil h2 {
	text-align: center;
	color: #716E68;
	font-family: "lobster","Arial",sans-serif !important;
	font-size: 1.4rem;
	vertical-align: top;
	font-weight: 100;
	padding-left: 20px;
}
#aroundMeDivAccueil h2, #aroundMeDivAccueil img {
	display: inline-block;
}
#itineraireCulturelDivAccueil, #aroundGruissanDivAccueil {
	display: inline-block; margin: 5px 0; width: 100%; max-width: 492px; height: auto;
	float: left;
	cursor: pointer;
}
#aroundGruissanDivAccueil {
	margin-left: 5px;
	cursor: pointer;
}
#itineraireCulturelDivAccueil img, #aroundGruissanDivAccueil img {
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}

/*  ------------------------------  ITI ODY   ------------------------------  */

#itineraireOdysseaCultures,
#itineraireOdysseaNautiques,
#itineraireOdysseaNatures,
#itineraireOdysseaSaveurs,
.itineraireOdyssea {
	padding: 5px;
	border: 1px solid #A9A69F;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	width: 98%; max-width: 482px;
	height: 100%;
	color: #716E68;
	font-family: "lobster","Arial",sans-serif !important;
	background: url("img/list_aroundMe.png") no-repeat right 20px bottom 5px / 9px auto;
	display: inline-block;
	margin: 5px;
	cursor: pointer;
}

#itineraireOdysseaCultures img,
#itineraireOdysseaNautiques img,
#itineraireOdysseaNatures img,
#itineraireOdysseaSaveurs img,
.itineraireOdyssea img {
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}

#itineraireOdysseaCultures h2,
#itineraireOdysseaNautiques h2,
#itineraireOdysseaNatures h2,
#itineraireOdysseaSaveurs h2,
.itineraireOdyssea h2 {
	clear: both;
	font-weight: 100;
	font-size: 1.2rem;
	padding-left: 10px;
}

#inputSuitabilities {
	display: inline-block;
	width: 98%; margin: 1%;
	margin-top: 0; text-align: center;
	color: #555;
}
#inputSuitabilities div {
	display: inline-block;
	width: 180px;
}

#inputSuitabilities input {
	margin: -4px 5px 0 8%; vertical-align: middle;
}
#inputSuitabilities img {
	vertical-align:middle;
}

/*  ------------------------------  DORMIR   ------------------------------  */

.dormirButton {
	padding: 0 20px;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	width: 98%; max-width: 482px;
	height: 80px;
	color: #FFF; font-weight: 100;
	font-family: "lobster","Arial",sans-serif !important;
	display: inline-block;
	margin: 5px;
	line-height: 80px;
	cursor: pointer;
}
.dormirButton h2 {
	font-weight: 100; font-size: 1.3rem;
	background: url(img/list_menu.png) no-repeat right 10px center / 20px auto rgba(0, 0, 0, 0);
}
#violet {
	background: #A297C7;
}
#bleu {
	background: #89B8B2;
}
#jaune {
	background: #D3CA83;
}
#rouge {
	background: #E95948;
}
#vert {
	background: #8DD083;
}

/*  ------------------------------  METEO   ------------------------------  */
#weatherDivs {
	width: 100%;
	height: auto;
	overflow: hidden;
}
.weatherDiv {
	width: 100%;
	padding: 5px 20px;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	height: 220px;
	background: #716E68;
	color: #FFF; font-weight: 100;
	text-align: center;
	float: left;
	display: none;
}
.weatherCurrent {
	display: block !important;
}
.weatherDiv img {
	height: 90px;
}
.weatherDiv span {
	display: block;
	font-size: 1.4rem;
}
#weatherPrevious {
	width: 50%;
	float: left;
	background: url(img/list_menu-reverse.png) no-repeat left 10px center / 9px auto;
	color: #716E68;
	padding-left: 30px;
	height: 30px;
	margin: 10px 0;
	line-height: 30px;
	cursor: pointer;
}
#weatherNext {
	width: 50%;
	float: right;
	background: url(img/list_aroundMe.png) no-repeat right 10px center / 9px auto;
	color: #716E68;
	padding-right: 30px;
	height: 30px;
	margin: 10px 0;
	line-height: 30px;
	text-align: right;
	cursor: pointer;
}
/*  -----------------------------   AROUND ME   ----------------------------  */
#aroundMeSearch {
	background: #E5E1D7;
	color: #555555;
	padding: 20px;
	text-align: center;
}
#categoriesAroundSelectorDiv {
	padding: 10px;
	background: #FFF;
}
#validAroundMeSearch {
	background: #555555;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	height: 40px;
	width: 100px;
	text-align: center;
	line-height: 40px;
	font-family: "lobster","Arial",sans-serif !important;
	font-weight: 100;
	margin: 20px auto;
	color: #E5E1D7;
	font-size: 1.1rem;
}
#localisationDiv, #distanceDiv, #categoriesAroundDiv {
	padding: 20px 0;
	border-bottom: 1px solid #555;
}
#localisationDiv {
	padding-top: 0px;
}
#localisationDiv #maPosition {
	font-size: 0.9rem;
	font-style: italic;
}
#LatLongDiv, #LatLongDivAround {
	font-size: 0.8rem;
	font-style: italic;
}
#changeLocButton {
	background: #716E68;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	color: #FFF;
	padding: 5px 10px;
	font-size: 1.1rem;
	font-family: "lobster","Arial",sans-serif !important;
	font-weight: 100;
	margin: 10px auto 0 auto;
	width:220px;
}
#rangeDown, #rangeUp {
	width: 4%;
	height: 20px; text-align: center;
	line-height: 20px;
	font-size: 2rem;
	font-weight: bold;
	float: left;
	margin: 0 2%;
}
#distanceRange  {
	width: 84%; float: left;
	height: 20px;
}
#distanceRange a {
	height: 24px; top: -3px;
}
#distanceAmount {
	padding-top: 10px;
	clear: both;
}
.categorylist li {
	list-style: none;
	height: 20px;
	font-size: 1rem;
	width: 100%;
	max-width: 492px;
}
.categorylist li input {
	float: right;
}

#validCatButton, #resetSearchButton, #validSearchButton {
	background: #555555;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	height: 40px;
	width: auto;
	padding: 5px 10px;
	text-align: center;
	line-height: 40px;
	font-family: "lobster","Arial",sans-serif !important;
	font-weight: 100;
	margin: 20px auto;
	color: #E5E1D7;
	font-size: 1.1rem;
	/*float: left;
	background: #E5E1D7;
	color: #716E68;
	height: 30px;
	width: 50%;
	margin: 20px 0;
	line-height: 30px;
	text-align: center;
	font-family: "lobster","Arial",sans-serif !important;
	font-weight: 100;
	*/
}
#resetCatButton {
	background: #716E68;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	color: #FFF;
	padding: 5px 10px;
	font-size: 1.1rem;
	font-family: "lobster","Arial",sans-serif !important;
	font-weight: 100;
	margin-top: 20px;
	float: right;
}
#resetCatButton, #resetSearchButton {
	border-right: 1px solid #716E68;
}
#locationSelectorDiv {
	background: #555555;
	width: 100%;
	height: auto;
	padding: 20px 5px 20px 5px;
	text-align: center;
	color: #E5E1D7;
}
#locationSelectorDiv input {
	background: url(img/search-input.png) no-repeat right 20px center / 28px auto #E5E1D7;
	border: 1px solid #716E68;
	height: 40px;
	width: 80%;
	line-height: 40px;
	font-size: 1.2rem;
	color: #555;
}
.searchResultTown {
	width: 80%;
	height: auto;
	text-align: left;
	color: #FFF;
	line-height: 30px;
}
#locationResult {
	min-height: 300px;
	padding: 10px 0;
}
#maPositionSearch {
	background: #716E68 url(img/ma-position-button.png) no-repeat right 20px center /27px auto;
	height: 40px;
	width: 100%;
	text-align: left;
	-moz-box-shadow: 0px 0px 2px 0px #E5E1D7;
	-webkit-box-shadow: 0px 0px 2px 0px #E5E1D7;
	-o-box-shadow: 0px 0px 2px 0px #E5E1D7;
	box-shadow: 0px 0px 2px 0px #E5E1D7;
	filter: progid: DXImageTransform.Microsoft.Shadow(color=#E5E1D7, Direction=NaN, Strength=2);
	color: #FFF;
	line-height: 40px;
	padding-left: 20px;
}
#result {
	width: 100%; height: 100%;
}

/*  --------------------------   INFOS PRATIQUE   --------------------------  */

fieldset.info {
	padding: 20px; width: 95%;
	margin-top: 20px;
	font-size: 0.9rem;
	color: #555555;
}
fieldset.info:firstChild {
	margin-top: 0px;
}
fieldset.info legend {
	padding: 0 5px;
}
fieldset.info .prestataire {
	margin-top: 10px;
}

/*  -----------------------------   PARTAGER   -----------------------------  */

#smsPartage, #mailPartage {
	background: #716E68;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	color: #FFF;
	padding: 5px 10px;
	font-size: 1.1rem;
	font-family: "lobster","Arial",sans-serif !important;
	font-weight: 100;
	margin-top: 20px;
	text-align: center;
	display: block;
	width: 50%;
}
#reseauxsociauxDiv {
	width: 50%;
	text-align: center;
}

/* ------------------------------ MULTIMEDIA ------------------------------- */
#videoPlayer1, #videoPlayer2 { width: 49.5%; height: 315px; }

/*  ----------------------------   RECHERCHE   -----------------------------  */

#searchSelectorDiv input {
	background: url(img/search-input.png) no-repeat right 20px center / 28px auto #E5E1D7;
	border: 1px solid #716E68;
	height: 40px;
	width: 80%;
	line-height: 40px;
	font-size: 1.2rem;
	color: #555;
}
#searchPageResult .searchResultTown {
	color: #716E68 !important;
}
#searchPageResult .searchResultTown:hover, #searchPageResult .searchResultTown:visited {
	color:#E5E1D7 !important;
}

/*  ------------------------------------------------------------------------  */
/*  ------------------------------            ------------------------------  */
/*  ------------------------------   FOOTER   ------------------------------  */
/*  ------------------------------            ------------------------------  */
/*  ------------------------------------------------------------------------  */

#footer {
	width: 100%;
	max-width: 1000px;
	height: 50px;
	background: #FFF;
	margin-top: 20px;
	position: relative;
}
#arrowBackFooter {
	position: absolute;
	top: 10px;
	left: 10px;
	height: 30px;
	cursor: pointer;
}
#homeButtonFooter {
	position: absolute;
	top: 10px;
	right: 10px;
	height: 30px;
	cursor: pointer;
}

/*  ------------------------------------------------------------------------  */
/*  ---------------------------                  ---------------------------  */
/*  ---------------------------  MARKERS LIST    ---------------------------  */
/*  ---------------------------                  ---------------------------  */
/*  ------------------------------------------------------------------------  */

.categoryTitle, .categoryName {
	min-height: 30px;
	background: #E5E1D7;
	font-family: "lobster","Arial",sans-serif !important;
	font-size: 1.2rem;
	color: #716E68;
	margin: 20px 0;
	text-align: center;
	clear: both
}
.categoryTitle a {
	color: #716E68;
}
.bottomArrow {
	height: 20px; float: right; margin: 5px; cursor: pointer;
}
.topArrow {
	height: 20px; float: left; margin: 5px; cursor: pointer;
}
.longButtonCat {
	width: 100%; padding: 7px 0 0 7px; margin: 5px 0;
	border: 1px solid #A9A69F;
	color: #716E68;
	clear: both;
	position: relative;
	min-height: 95px !important;
}
.longButtonCat a {
	color: #555;
	font-size: 1rem;
}

.smallPhoto {
	display: inline-block; margin-right: 8px;
}
.thumbed {
	display: inline-block; vertical-align: top;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}
.small {
	font-size: 0.8rem;
}
.markerlink {
	position: absolute; bottom: 4px; right: 6px;
}
.markerlink span img { cursor: pointer; }

#suitabilityDiv { float: right; margin: 12px 8px 0 0; }
#suitabilityDiv img { margin-right: 4px; height: 24px; }

/*  ------------------------------------------------------------------------  */
/*  -----------------------------                ---------------------------  */
/*  -----------------------------  MEDIA SCREEN  ---------------------------  */
/*  -----------------------------                ---------------------------  */
/*  ------------------------------------------------------------------------  */

@media screen and (max-width:700px) {
	html {
		font-size: 14px;
	}
	#videoPlayer1, #videoPlayer2 { display: block; width: 100%; }
	#videoPlayer2 { margin-top: 1em; }
}
@media screen and (max-width:500px) {
	html {
		font-size: 12px;
	}
	#aroundGruissanDivAccueil {
		margin-left: 0px; margin-top: 0px !important;
	}
	#prepareDivAccueil, #aroundGruissanDivAccueil {
		margin-top: 5px;
	}
}
@media screen and (min-width:500px) and  (max-width:1000px) {
	#itineraireOdysseaCultures, #itineraireOdysseaNautiques, #itineraireOdysseaNatures, #itineraireOdysseaSaveurs, .itineraireOdyssea {
		width: 100%;
		max-width: none;
	}
	#incontournableDivAccueil, #prepareDivAccueil {
		width: 100%;
		max-width: none;
	}
	#plaisancierDivAccueil {
		margin-top:5px;
	}
	#prepareDivAccueil, #aroundGruissanDivAccueil {
		margin-top: 5px;
	}

	.dormirButton {
		width: 98%;
		max-width: none;
	}
	#itineraireCulturelDivAccueil, #aroundGruissanDivAccueil {
		width: 100%; max-width: none;
		margin: 0; margin-top: 5px;
	}
	#aroundGruissanDivAccueil {
		margin-left: 0px;
	}
}