/* CSS Document */
/* ------------------------------- */
/* Le San Juan CSS */
/* ------------------------------- */

/* reset */

html, body, div, p, a, font, img, ul, li, dl, dt, dd, form, label {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
}

body {
/*	color:#000;*/
	background:#46413D;
	/* background: rgb(180,140,130);
background: radial-gradient(circle, rgba(180,140,130,1) 0%, rgba(131,86,59,1) 100%); */
	font:90%/1 'Didact Gothic', arial, serif; /* combines font-size, line-height & font-family (linux fonts, Mac fonts & Windonws fonts*/
	overflow-x:hidden
}

a {color:#0A6DCE;}
a:visited {color:#0D0ACE;}
.floatL {float:left;}
.floatR {float:right;}

ul {list-style:none;}

h1, h2, h3, h4 {
	font-weight:normal;
	padding:0;
	margin:0 0 10px 0;}

p{ color:#fff;}

.container {
/*	background:#000;*/
	background:#46413D;
	/* background-color: #6A3E3D; */
	width: 920px;
	margin: 20px auto;
	padding:5px 20px 50px 20px;
	border-radius:5px;
}

/* HEADER */

.preHead {
	text-align:right;
	font-size:140%;
	margin:10px 0;
	color:#fff;
}

.preHead span{ font-size:120%;}
.preHead a{color:#fff; text-decoration:none;}

header {
	border:1px solid #bcbbbb;
	padding:5px;
	background:#fff;
	-webkit-box-shadow:0 5px 3px rgba(0, 0, 0, 0.5);   
	-moz-box-shadow:0 5px 3px rgba(0, 0, 0, 0.5);
	box-shadow:0 5px 3px rgba(0, 0, 0, 0.5);
	position:relative;
	border-radius:3px;
	z-index:2
}


#slideshow {position:relative;}
#slideshow img {position:absolute; top:0px; left:0; z-index:8;}
#slideshow img.active {z-index:10;}
#slideshow img.last-active {z-index:9;}


header h1 {
	font-size:350%;
	margin-top:20px;;
	position:relative;
	width:100%;
	height:70px;
	z-index:10;
	text-indent:-9999px;
	background:url(../img/logo.png) no-repeat;
}

header h1 span {
	color:#000;
}

header h1:before {
	content:"";
	position:absolute; 
	z-index:-1;
	background-color:#fff;
	width:1000px;
	height:52px;
	left:-995px;
	top:0px;
	-webkit-box-shadow:5px 5px 3px rgba(0, 0, 0, 0.5);   
	-moz-box-shadow:5px 5px 3px rgba(0, 0, 0, 0.5);
	box-shadow:-3px 5px 3px rgba(0, 0, 0, 0.5);
}

header h1:after {
	content:"";
	position:absolute; 
	z-index:-10;
	background-color:#fff;
	width:10000px;
	height:38px;
	left:310px;
	top:14px;
	-webkit-box-shadow:5px 5px 3px rgba(0, 0, 0, 0.5);   
	-moz-box-shadow:5px 5px 3px rgba(0, 0, 0, 0.5);
	box-shadow:5px 5px 3px rgba(0, 0, 0, 0.5);
}

/* MENU */

nav {
	margin-top:238px;
	border:1px solid #000000;
	height:44px;
	background:#000 url(../img/navBgrd.png) repeat-x;	
	background:-moz-linear-gradient(bottom, #000 50%, #292929 54%, #404040 72%, #5a5a5a);
	background:-webkit-gradient(linear, 0 100%, 0 0, from(#000), to(#5a5a5a), color-stop(.5,#000), color-stop(.54,#292929), color-stop(.72,#404040));  
}

nav ul li { 
	float:left;
}
nav ul li a, nav ul li a:visited { 
	text-decoration:none;
	color:#FFF;
	display:block;
	line-height:44px;
	padding:0 30px;
}
nav ul li a.active, nav ul li a:hover { 
	color:#FFF;
	border-right:1px solid #000;
	border-left:1px solid #000;
	padding:0 29px;
	background:#626262 url(../img/navBgrd_over.png) repeat-x;	
	background:-moz-linear-gradient(bottom, #626262, #404040 50%, #565656 55%, #8e8e8e);
	background:-webkit-gradient(linear, 0 100%, 0 0, from(#626262), to(#8e8e8e), color-stop(.5,#404040), color-stop(.55,#565656));  
}

nav ul.language {margin-right:10px;}

nav ul.language li { 
	float:right;
	text-indent:-9999px;
	width:25px;
}

nav ul.language li a { 
	background:url(../img/lang_flags.png) 0 13px no-repeat;
	width:25px;
	padding:0;	
}

nav ul.language li a:hover { 
	background:url(../img/lang_flags.png) 0 -17px no-repeat;
	border:none;
}

nav ul.language li#en a {background-position:-25px 13px;}
nav ul.language li#it a {background-position:-50px 13px;}
nav ul.language li#en a:hover {background-position:-25px -17px;}
nav ul.language li#it a:hover {background-position:-50px -17px;}

/* § CONTENT */

	
.main {
	background:url(../img/sideBgrd.png) 700px 0 repeat-y;
	float:left;
	width:920px;
}

.main article {
	float:left;
	width:680px;
    position: relative;
}

article h1 {
	font-size:250%;
	margin:30px 0 0 0;
	color:#fff;
}

article h2 {
	font-size:200%;
	clear:left;	
	margin-top:20px;
}

.tabHolder h2 {
	background:#fff;
	/* color: #fff; */
	display:inline-block;
	padding:2px 10px 2px 20px;
	margin-left:-20px;
}

.header.french, .header.english, .header.italian {display: none; text-transform: uppercase;}

#fr .header.french {display: inline-block;}
#en .header.english {display: inline-block;}
#it .header.italian {display: inline-block;}

/* h3.header {display: block !important;} */

.tabHolder .title {
    text-transform: uppercase;
}


article h3 {
	font-size:140%;
	margin-top:20px;
	margin-bottom:10px;
	color:#fff;
}

article h4 {
	font-size:150%;
 	margin-left:60px;
	color:#fff;
}

article h4.wine__type {
	font-size:120%;
	margin-top: 1rem;
}

article p {
	line-height:1.8em;
	margin-bottom:10px;
}

.standList {
	line-height:1.8em;
	list-style:inside;
	margin-left:20px;
	color:#FFF;}
	
.liensList {
}	

.liensList li {
	float:left;
	width:48%;
	margin-bottom:10px;
}	

.liensList li:nth-child(odd) {margin-right:20px;}	

.liensList a {
	display:block;
	color:#FFF;
	padding:10px 0 10px 60px;
	text-decoration:none;
	font-size:120%;
	background-repeat:no-repeat;
	background-position:0 50%;
}	

.liensList a span {
	display:block;
	color:#fff;
	text-decoration:underline;
	font-size:80%;
	margin-top:5px;
}


#maire a {background-image:url(../img/icon_mairie.png)}
#tourisme a {background-image:url(../img/icon_tourisme.png)}
#port a {background-image:url(../img/icon_port.png)}
#ferries a {background-image:url(../img/icon_ferry.png)}
#sncm a {background-image:url(../img/icon_sncm.png)}
#aeroport a {background-image:url(../img/icon_airport.png)}
#sncf a {background-image:url(../img/icon_sncf.png)}
#fer a {background-image:url(../img/icon_cheminFer.png)}
#tram a {background-image:url(../img/icon_tramway.png)}
#terraAmata a {background-image:url(../img/icon_terra.png)}
#mamac a {background-image:url(../img/icon_mamac.png)}
#naturelle a {background-image:url(../img/icon_nature.png)}
















.tabs {
	border-bottom:1px solid #fff;
	height:2.5em;
	margin-top:40px;
}

.tabs li {
	float:left;
	width:150px;
	text-align:center;
	margin-right:10px;
	
}


.tabs li a {
	display:block;
	line-height:2em;
	color:#fff;
	text-decoration:none;
	font-size:120%;
	border:1px solid #989898;
	border-bottom:1px solid #000;
	/* background:#fff  url(../img/tabsBgrd.png) 0 -60px repeat-x;	
	background:-moz-linear-gradient(bottom, #fff, #ebebe8 50%);
	background:-webkit-gradient(linear, 0 100%, 0 0, from(#fff), to(#ebebe8));   */
	background: #000;
	border:1px solid transparent;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;	
}


.tabs li.selected a, .tabs li.selected a:hover {
	color:#000;
	display:block;

	/* background:#000;	 */
	/* background:-moz-linear-gradient(bottom, #cd0f02, #ff2819 50%, #fc5b50 75%);
	background:-webkit-gradient(linear, 0 100%, 0 0, from(#cd0f02), to(#fc5b50), color-stop(.5,#ff2819));   */
	background: #fff;
	border:1px solid #fff;
	border-bottom:1px solid #fff;
}

.tabs li a:hover {
	color:#000;
	background:#fff;	
}



.tabHolder {margin-bottom:100px;}



.tabHolder dl {
	/* overflow:auto; */
	}

.tabHolder dt {
	padding:14px 0 0 0;
	clear:left;
	background: url(../img/dotsBgrd.png) 0 90% repeat-x;
	color:#fff;
/*	margin-left:20px;*/
/*border: 1px solid white; */
    margin-right: 60px;    
	}

.tabHolder dt span {
/*
	background:#fff;
	padding-right:10px;
	background-color:#000;
    text-transform: uppercase;
*/
}

.tabHolder dt.french {
/*
	background:none;
	padding-top:0;
	font-style:italic;
	margin-left:40px;
	margin-right:50px;
	line-height:1.4em;
	color: #fff;
*/
	}


.tabHolder dd {
	padding:5px 0;
	float:right;
	margin-top:-23px;
	padding-left:10px;
	font-size:120%;
	color:#fff;
	}

.fr, .french, .en, .english, .it, .italian {display:none}
#fr .fr, #fr .french, #en .en, #en .english, #it .it, #it .italian {display:block; }

.ing {font-style: italic; text-transform: lowercase; padding-left: 20px !important;}

.tabHolder h4 {
    margin-left: 0;
}

.sectionTitle {padding:10px 0 20px 60px; color:#fff; }
.titleBrasserie {background:url(../img/title_icons.png) -2px -12px no-repeat;}
.titleMenu {background:url(../img/title_icons.png) -2px -87px no-repeat;}
.titlePhoto {background:url(../img/title_icons.png) -2px -157px no-repeat;}
.titleLien {background:url(../img/title_icons.png) -2px -227px no-repeat;}
.titleContact {background:url(../img/title_icons.png) -2px -297px no-repeat;}

/* SIDE */

aside {
	float:right;
	width:220px;
	z-index:1;
	color:#301a1d;
    padding-top: 20px;
}


aside div {
	margin:0px 10px 40px 10px;
	position:relative;
}

aside div:after {
	/* content:"";
	position:absolute; 
	z-index:1;
	background-color:#c9c7c7;
	border-bottom:1px solid #fff;
	width:200px;
	height:1px;
	left:0px;
	top:-20px; */
	
}


aside div.boxed {
	border:1px solid #d8d7d7;
	background: #f0f0f0;
	-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,.7);
	-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,.7);
	box-shadow:inset 1px 1px 1px rgba(0,0,0,.7);
}

aside iframe {
	border:none ! important;
}

aside div.facebook iframe {
	width:100%;
	height:100px;
}



.weather { 
	margin-top:10px;
}
.facebook {
	/* padding:5px; */
	
}
.comment q {
	font-size:90%;
	line-height:1.4em;
}

.comment p {
	font-size:140%;
	text-align:right;
	margin-top:10px;
	color:#000;
	
}


.map {
	border:1px solid #fff;
	background:#fff;
}

.map iframe {
	height:250px;
	width:194px;
}


section img {
	border:1px solid #bcbbbb;
	border-radius:3px;
	-webkit-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);   
	-moz-box-shadow:5px 5px 3px rgba(0, 0, 0, 0.5);
	box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
	float:left;
	width:194px;
	padding:5px;
	margin:40px 20px 100px 0;
}



.galerie {
	margin-bottom: 2rem;
}

.galerie .pic img {
	height:100px;
	width:124px;
	margin-bottom:10px;
}


/* FOOTER */

footer {
	clear:both;
	padding:15px 0px 0px 0px;
	position:relative;
	top:-10px;
	z-index:10;
	
}

footer:before {
	content:"";
	position:absolute; 
	z-index:-1;
	background-color:#fff;
	width:1000px;
	height:50px;
	left:-974px;
	top:0px;
	-webkit-box-shadow:5px 5px 3px rgba(0, 0, 0, 0.5);   
	-moz-box-shadow:5px 5px 3px rgba(0, 0, 0, 0.5);
	box-shadow:5px 5px 3px rgba(0, 0, 0, 0.5);
	}

footer:after {
	content:"";
	position:absolute; 
	z-index:-1;
	background-color:#fff;
	width:10000px;
	height:37px;
	left:256px;
	top:10px;
	-webkit-box-shadow:5px 5px 3px rgba(0, 0, 0, 0.5);   
	-moz-box-shadow:5px 5px 3px rgba(0, 0, 0, 0.5);
	box-shadow:5px 5px 3px rgba(0, 0, 0, 0.5);
}


	
.contactDetails {line-height:1.2em; }
.contactPage {line-height:1.6em; width:47%; margin-top:20px; color:#fff;}
.contactPage a {color:#fff;}
aside .contactName {margin-bottom:10px;}
aside .contactTel {margin-top:5px;}
.contactName {font-size:160%;}
.contactName span {color: #000;}
footer .contactDetails li {display:inline;	margin-right:10px;}
footer .contactDetails li:nth-child(2),
footer .contactDetails li:nth-child(1){color: #fff;}

/*contact*/

.thankMess {clear:both; padding:20px 0 0 0; background:url(../img/icon_tick.png) 0 6px no-repeat; padding-left:50px; color:#ff2819; font-size:180% } 

#contact_form {
	border:1px solid #000;
	clear:both;
	background:#e9e5e5;
	overflow:auto;
	border-radius:3px;
	padding:20px;
	margin-top:40px;
	float:left;
	width:640px;
	-webkit-box-shadow:3px 3px 5px rgba(0, 0, 0, 0.5);   
	box-shadow:3px 3px 5px rgba(0, 0, 0, 0.5);
	
	
}

.panelLeft, .panelRight {
    float: left;
    width: 47%;
}

.panelRight {float: right;}

form label {display:block; margin:0 5px 10px; color:#000;}

form input, form textarea {
	width:287px;
	padding:10px 5px;
	margin-bottom:20px;
	color:#593002;
	font-family:inherit;
	font-size:120%;
	border:1px solid #000;	
	-moz-box-shadow:2px 2px 2px rgba(0,0,0,.5);	
	-webkit-box-shadow:2px 2px 2px rgba(0,0,0,.5);	
}

form textarea {height:200px; margin-bottom:45px;}

form input:focus, form textarea:focus {background-color:#FEFCD4;}

.button {
	background:#000 url(../img/navBgrd.png) repeat-x;	
	background:-moz-linear-gradient(bottom, #000 50%, #292929 54%, #404040 72%, #5a5a5a);
	background:-webkit-gradient(linear, 0 100%, 0 0, from(#000), to(#5a5a5a), color-stop(.5,#000), color-stop(.54,#292929), color-stop(.72,#404040));  
	color:#fff;
	width:147px;
	height:44px;
	float:right;
	cursor:pointer;
	-moz-border-radius:5px;
	border-radius:5px;
	text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
}	

.button:hover {
	background:#626262 url(../img/navBgrd_over.png) repeat-x;	
	background:-moz-linear-gradient(bottom, #626262, #404040 50%, #565656 55%, #8e8e8e);
	background:-webkit-gradient(linear, 0 100%, 0 0, from(#626262), to(#8e8e8e), color-stop(.5,#404040), color-stop(.55,#565656));}	
.error {color:#E30015; margin-left:10px;}
.thanks {font-size:180%; color:#d11b02; margin-bottom:50px;}


/* overlay box */

.modal-overlay {position:fixed; top:0; right:0; bottom:0; left:0; height:100%; width:100%; margin:0; padding:0; background:#000; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75; z-index:101;}
* html .modal-overlay {
	position: absolute; 
	/* height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); */
}
.modal-window {position:fixed; top:50%; left:50%; margin:0; padding:5px; z-index:102; border:2px solid #000; background:#fff; -webkit-box-shadow:0 0 15px 5px rgba(255, 255, 255, 0.5); -moz-box-shadow:0 0 15px 5px rgba(255, 255, 255, 0.5); box-shadow:0 0 15px 5px rgba(255, 255, 255, 0.5);}
* html .modal-window {position:absolute;}
.close-window{position:absolute;width:40px;height:40px;right:8px;top:28px;background:transparent url(../img/icon_close.png) no-repeat scroll right top;text-indent:-99999px;overflow:hidden;cursor:pointer;}
.close-window:hover {opacity:.99;filter: alpha(opacity=99);-moz-opacity: 0.99;}





.icoMr {background:url(../img/icon_loop.png) 0 50% no-repeat; padding-left:30px; line-height:2.5em; color:#000 ! important; text-decoration:none; display:block;}
.icoMr:hover {text-decoration:underline;}


.michelin-panel {
    margin-top: 20px
}


.michelin-panel a {
    font-size: 16px;
    color: #fff;
}

@media all and (min-width: 500px) {
    
.michelin-panel {
    position: absolute;
    top: -10px;
    right: 0;
    line-height:2rem;
    display: inline-block;
}
}

@media all and (min-width: 768px) {
    
.michelin-panel {
    top: 12px;

}
}

/* FB & UBER EATS PANEL */
.side-holder {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.side-holder > div {
	margin: 0 auto;
	padding: 0;
}

.side-holder .fb-box > div {margin-bottom: 20px;}
.side-holder .ue-box {margin-bottom: 20px;}

.uber {
	margin: 0;
	text-align: center;
}

.uber img {
	box-shadow: none;
	border: none;
	float: none;
	padding: 0;
	margin: 0;
}

.cafe-space span {
    width: 90px;
    display: inline-block;
    text-align: right;
	margin-left: 5px;
	text-transform: lowercase;
}