/* Style 3.3.7 03/05/2021 saintaubinsurmer76.fr */
body
{
	background-color:#FFFFFF;
	color:#000000;
	font-family: 'Barlow';
}

#content-body, .pagebody
{
	max-width: none;
}

.h1, .h2, .h3
{
	color: #607C3C;
}

div.imgcomment {
	font-family: 'Barlow';
	font-size: 1.6em;
}

.tbcolumns div.imgcomment {
	font-size: 1.2em;
}

.pagecontent section:first-of-type .imgrelative div.imgcomment
{
	font-size: 2.5em;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	opacity: 0.9;
}

.slider-div div.imgcomment
{
	font-size: 1.2em;
	opacity: 0.9;
}

.tabcontent
{
	border: thin solid #809C13;
	padding: 2px;
	margin-bottom: 2px;
}

.right
{
	text-align: right;
}

small
{
	font-size: x-small;
}

.size7
{
	font-size: 0.7em;
}

#header
{
	grid-template-columns: 100px auto;
	grid-column-gap: 15px;
	font-family: 'Barlow';
	background-image: none;
	background-color: #FFFFFF;
	text-align: center;
-webkit-box-shadow: 10px 14px 16px 0px rgba(220,220,220,1);
-moz-box-shadow: 10px 14px 16px 0px rgba(220,220,220,1);
box-shadow: 10px 14px 16px 0px rgba(220,220,220,1);
}

#header .head1
{
	font-size: 6.2em;
	font-weight: bold;
	color: #607C3C;
	justify-self: start;
}

#header .head2
{
	font-size: 2.9em;
    font-style: italic;
	color: #607C3C;
	justify-self: start;
	padding-left: 3em;
}

.menufixed
{
	background-color:rgba(255, 255, 2550, 0.8);	
}

.calendstap
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.calstaprow
{
	grid-column: 1 / span 2;
}

.calstapcell
{
}

.calstapitem
{
	display: block;
	text-align: center;
	vertical-align: middle;
	width: 100%;
}
.calstapitem::before {
	content: "";
	display: table;
	border-collapse: collapse;	
}

.calstapitem::after {
	content: "";
	display: table;
	border-collapse: collapse;	
	clear: both;
}
.calstaptit
{
	text-align: left;
	margin-left: 1.5em;
}
.calstaptith3
{
	color: #809C13;
	padding: 0.2em;
	margin-right: 1em;
	font-weight: bold;
	margin-bottom: 0.6em;
	border-bottom: 1px solid #809C13;
	font-size: 1.5em;
}
.calstaptith3h4
{
	color: #809C13;
	padding: 0.2em;
	margin-right: 1em;
	font-weight: bold;
	border-bottom: 1px solid #809C13;
	font-size: 1.5em;
}
.calstaptith4
{
	color: #809C13;
	padding: 0.2em;
	margin-right: 1em;
	font-size: 1.2em;
	line-height: 1em;
}

/* a.shortcut, a.shortcutext {
	background: none;
	background-color: #607C3C;
	border: 0;
	border-radius: 0;
}

a:hover.shortcut, a:hover.shortcutext {
	background: none;
	background-color: #809C13;
	border: 0;
} */

.tabsep {
	background-color: #607C3C;
	border: 0;
	border-radius: 0;
	color: white;	
}

#menu_phone li {
	background: none;
	background-color: #607C3C;
	border: 0;
	border-radius: 0;
}

#menu_phone li:hover {
	background: none;
	background-color: #809C13;
	border: 0;
}

.navbarre 
{
	border-left: 0;
	border-top: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.7);
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);
	background-image: none;
	background-color: rgba(255, 255, 255, 0.3);
	border: 0;
	border-radius: 0;
	padding: 2px 0;
}

.navbarre a {
	text-transform: uppercase;
	background: none;
	border: 0;
	color: inherit;
}

.navbarre a.ui-button {
	color: #607C3C;
}

.navbarre a:link {
	color: inherit;
}

.navbarre:hover {
	background: none;
	background-color: #607C3C;
	color: white;
	border: 0;
}

.navbarre:hover a {
	color: white;
}

.navbarre a.ui-button:hover {
	background: none;
	border-top: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.7);
	border-right: 1px solid rgba(255, 255, 255, 0.7);
	border-bottom: 0;
	border-radius: 0;
}

.navbarre a.ui-button:focus {
	background: none;
	border: 0;
	border-radius: 0;
}

.navbarre a.ui-state-active, .navbarre a.ui-state-active:hover
{
    font-weight: bold;
}

.divllbl {
  width: 8em;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-size: inherit;
}
.ui-widget .ui-widget {
	font-size: inherit;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-size: inherit;
}

.flippdf-div
{
	background-color:#FFFFFF;
}

#blason
{
	width: 75px;
	grid-row: 1 / span 3;
}

#stars
{
	display: inline;
}

#hrefrs
{
	margin: 0 auto;
}
#hrefrs td
{
	vertical-align: middle;
	padding: 5px;
	font-size: 0.8em;
}

.four_columns
{
	max-width: 76em;
}

.onglet
{
	max-width: 44em;
}

.boxcontent3col > .boxcontent3colitem
{
	background-color: #ececa3;
	background-image: none;
}

.boxcontent1col > div article, .boxcontent3col > div article, .boxcontent4col > div article
{
	border: none;
	background-image: none;
}

.boxcontent3col, .boxcontent4col
{
	grid-gap: 0 3px;
	width: 100%;
}


#meteo tbody
{
	height: 232px;
}

#bxmaree tbody, #bxlongecote tbody
{
	height: 50px;
}

#meteosurf
{
	width: 90%;
	max-width: 260px;
	margin: 0 auto;
}

#meteosurf .tempval
{
	font-size: 2em;
	font-weight: bold;
	padding: 0;
}

#meteosurf .tempcop
{
	font-size: 0.8em;
}

#meteobeach
{
	width: 90%;
	max-width: 274px;
	margin: 0 auto;
}

#meteobeach .tempval
{
	font-size: 2em;
	font-weight: bold;
	padding: 0;
}

#meteobeach .tempcop
{
	font-size: 0.8em;
}

#mapsite_om
{
	width: 370px;
	height: 550px;
}

.meteo-grid {
	display: grid;
	grid-template-columns: auto auto auto;
	margin-left: 2em;
	width: 15em;
	padding: 0 0.4em;
}

.meteo-grid > div {
	margin: auto;
	text-align: center;
	font: inherit;
}

.lgmeteo-grid2 {
	grid-column: 2 / span 2;
}

.lgmeteo-grid3 {
	grid-column: 1 / span 3;
}

.meteo-link {
	grid-column: 1 / span 3;
}

.tide-grid {
	display: grid;
	grid-template-columns: auto auto;
	margin-left: 2em;
	width: 13em;
	padding: 0 0.4em;
}

.tide-grid > div {
	margin: auto;
	text-align: center;
	font: inherit;
}

.tide-link {
	grid-column: 1 / span 2;
}

.lgcote-grid {
	display: grid;
	grid-template-columns: auto auto auto auto;
	margin-left: 2em;
}

.lgcote-grid > div {
	margin: auto;
	text-align: center;
	font: inherit;
}

.lgcote-grid2 {
	grid-column: 2 / span 3;
}

.lgcote-grid3 {
	grid-column: 1 / span 4;
}

.boxcontent div.tdboxcontent
{
	background: url('img/bgart-sta.png');
}

#pagecontent1 .tow_columns .tdcolumn
{
	vertical-align: top;
}

#xpagecontent3 .tow_columns .tdcolumn
{
	text-align: center;
}

#xpagecontent3 .tow_columns .h3
{
    font-style: italic;
	color: inherit;
    border-bottom: 0;
}

#xpagebody3.pagebody section p 
{
	text-align: center;
	text-justify: none;
}

.campprice
{
	margin: 1em auto;
	font-size: 1.1em;
}

.campprice td
{
	padding: 2px;
}

#meteo td
{
	text-align: center;
	vertical-align: middle;
}

#bxmaree td, #bxlongecote td
{
	text-align: center;
	vertical-align: middle;
	padding: 0.3em;
}

#bxwebcam
{
	width: 40%;
	float: left;
	white-space: normal;
	margin-left: 0;
}

.logowebcam
{
	width: 90%;
	max-width: 100px;
}

#hm_content span
{
	color: #607C3C;
}

.embed-webcam {

    height: 0;

    width: 100%;

    padding-bottom: 56.25%;

    overflow: hidden;

    position: relative;

    top: 0;

    left: 0;

}    
.webcam {width: 560px; margin:0 auto; position:relative; overflow:hidden;}

/* Récupérer dans jquery-ui.css ui-state-active */
.ui-menu .ui-state-select {
	margin: -1px;
}

.ui-state-select a,
.ui-state-select a:link,
.ui-state-select a:visited {
	color: #ffffff;
	text-decoration: none;
}

.ui-state-select .ui-icon {
	background-image: url("images/ui-icons_f5e175_256x240.png");
}
/* Récupérer dans jquery-ui.css ui-state-active */

.qualeau {
    border-collapse: collapse;
	width: 80%;
	text-align: center;
}

.qualeau td {
    border: 1px solid black;
	padding: 4px 10px;
}

.row1
{
	border-color: #809C13;
}

.rowgite
{
	font-style: italic;
}

.rowgite a
{
	font-style: normal;
}

.gitename
{
	font-style: normal;
	font-size: 1.2em;
	font-weight: bold;
}

.pagebody section p.caltitevent
{
	width: 100%;
	font-weight: bold;
	text-align: center;
}

.pagebody section p.caldetevent
{
	font-style: italic;
}

.pagebody section p.caldetevent a
{
	display: inline-block;
	font-style: normal;
    border: 1px solid #809C13;
	padding: 4px 15px;
	margin-top: 3px;
	margin-left: 15px;
}

.pagebody section p.callocevent
{
	font-style: normal;
}

footer
{
	background-color: inherit;
	background-image: url('img/bgstaubin.jpg');
	background-repeat: repeat-x;
}

footer .wrapper
{
	max-width: 920px;
	padding: 0;
}

footer .wrapper .column
{
	color: inherit;
}

footer .wrapper .column h4
{
	color: inherit;
}

footer h4
{
	color: white;
	border-bottom: 0;
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}

.calendarcol
{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-column-gap: 6px;
}

.calendarcolevt
{
	border-top-width: 1px;
	border-top-style: solid;
	border-color: transparent;
}

.calendarcolevt:first-of-type
{
	border-top: none;
}

.calendarcol .imgrelative
{
	width: 98%;
	margin: 2px auto;
	height: 140px;
	overflow: hidden;
}

.nav li > a {
	background-color: #607C3C;
	border-radius: 0;
}

.nav li > a:hover, .nav li.active > a {
	background: none;
	background-color: #809C13;
	border: 0;
}

#logForm .divllbl {
	width: 6.5em;
	float: left;
}

#newForm .divllbl {
	width: 8em;
}

#logForm .text {
	width: auto;
	display: inline;
	float: left;
}

#newForm .text {
	width: auto;
}

.centerbut {
	display: tab-cell;
	text-align: center;
	width: 100%;
}

#logForm {
	width: 100%;
}

#newForm {
	width: 100%;
}

#confirmForm .button {
	width: 12em;
}

.grpsaisie
{
	border-color: #000000;
}

.loginput {
  height: 30px;
  display: flex;
  align-items: center
}

.imgprod {
	float: left;
	width: 20%;
	max-width: 200px;
}

.imgprod img {
	width: 100%;
}

.libprod {
	float: left;
	width: 45%;
	margin-left: 2px;
}

.prxprod {
	float: left;
	width: 9%;
}

.nbrprod {
	float: left;
	width: 20%;
}

.checkbadge {
    transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    padding: 10px;
}

.fctButton {
	margin-left: 5px;
}

@media (max-width: 1200px)
{
	#blason
	{
		width: 6.25%;
	}
	#header .head1
	{
		font-size: 3.2vw;
		margin: 0 10%;
	}
	#header .head2
	{
		font-size: 2.2vw;
		margin: 0.2% 8%;
	}
}

@media (max-width: 864px)
{
	.boxcontent article.tdboxcontent
	{
		display: inline-block;
		vertical-align: baseline;
		border: 2px solid #FFFFFF;
		width: 100%;
	}
	.tdboxcontent table
	{
		margin: 0 auto;
		white-space: pre;
	}
}

@media (max-width: 800px)
{
	.pagecontent section:first-of-type .imgrelative div.imgcomment
	{
		font-size: 1.8em;
		letter-spacing: 0.16em;
	}
	#header .h2
	{
		font-size: 1.8em;
	}
	.calendarcol
	{
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 500px)
{
	.pagecontent section:first-of-type .imgrelative div.imgcomment
	{
		font-size: 1.4em;
		letter-spacing: 0.12em;
	}
	.img-item:first-of-type, .img-item:last-of-type
	{
		margin: 0 auto;
	}
	#bxwebcam
	{
		width: auto;
		float: none;
	}
	#bxlongecote
	{
		width: auto;
		float: none;
	}
	.calendstap
	{
		grid-template-columns: 1fr;
	}
	.calstaprow
	{
		grid-column: 1 / span 1;
	}
	.calendarcol
	{
		grid-template-columns: 1fr;
	}
	.calendarcolevt
	{
		border-color: #809C13;
	}
	.calendarcol .imgrelative
	{
		height: auto;
		max-height: 140px;
	}
	.calstaptit
	{
		margin-left: 0.3em;
	}
	.calstaptith3
	{
		font-size: 1.1em;
	}
	.calstaptith3h4
	{
		font-size: 1.1em;
	}
	.calstaptith4
	{
		font-size: 1em;
	}
}
.ui-icon.myapp-paye {
	background-image: url("images/paye18.png");
}
.ui-button:hover .ui-icon.myapp-paye {
	background-image: url("images/paye18.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-icon.myapp-paye {
		background-image: url("images/paye.png");
		background-size: 18px 18px;
	}
	.ui-button:hover .ui-icon.myapp-paye {
		background-image: url("images/paye.png");
		background-size: 18px 18px;
	}
}