html {
	margin:0;
	overflow:auto;
	border:none;
}
a:active {
  outline:none;
  outline-style:none;   
}
object {
  outline: none;
  outline-style: none;
}
a:focus {
  outline: none;
  outline-style: none;  
}
/* Les liens */

.A1:link {
	font:10px Verdana;
	color:#ffffff;
	text-decoration:underline;
}
.A1:visited {
	font:10px Verdana;
	color:#ffffff;
	text-decoration:underline;
}
.A1:active {
	font:10px Verdana;
	color:#ffffff;
	text-decoration:underline;
}
.A1:hover {
	font:10px Verdana;
	color:#84a3a8;
	text-decoration:underline;
}
.A2:link {
	font:13px Verdana;
	color:#ffffff;
	text-decoration:underline;
}
.A2:visited {
	font:13px Verdana;
	color:#ffffff;
	text-decoration:underline;
}
.A2:active {
	font:13px Verdana;
	color:#ffffff;
	text-decoration:underline;
}
.A2:hover {
	font:13px Verdana;
	color:#84a3a8;
	text-decoration:underline;
}
.A3:link {
	font:12px Verdana;
	color:#ffffff;
	text-decoration:underline;
}
.A3:visited {
	font:12px Verdana;
	color:#ffffff;
	text-decoration:underline;
}
.A3:active {
	font:12px Verdana;
	color:#ffffff;
	text-decoration:underline;
}
.A3:hover {
	font:12px Verdana;
	color:#84a3a8;
	text-decoration:underline;
}
.A4:link {
	font:bold 14px Verdana;
	color:#84a3a8;
	text-decoration: none;
}
.A4:visited {
	font:bold 14px Verdana;
	color:#84a3a8;
	text-decoration:none;
}
.A4:active {
	font:bold 14px Verdana;
	color:#84a3a8;
	text-decoration:none;
}
.A4:hover {
	font:bold 14px Verdana;
	color:#ffffff;
	text-decoration:none;
}

/* Le corps de page */

body {
margin:0;
background:#273a3d;
background-image:url('../images/perledere.png');
background-repeat:repeat;
}
body#contrat {
margin:0;
background:#273a3d;
font-family:verdana,Lucida Grande,Lucida Sans Unicode,bitstream vera sans,trebuchet ms; 
}
div#main {
position:absolute;
left:50%; 
top:50%;
margin-top:-228px; /* moitié de la hauteur */
margin-left:-444px; /* moitié de la largeur */
width:885px;
height:450px;
font:13px Verdana;
background:#3a5458;
color:#fff;
border:3px solid #84a3a8;
}
div#main2 {
position:absolute;
left:50%;
top:50%;
margin-top:-248px; 
margin-left:-456px;
width:906px;
height:490px;
padding:5px;
background:#fff;
font-size:13px;
font-family:verdana,Lucida Grande,Lucida Sans Unicode,bitstream vera sans,trebuchet ms; 
border:3px solid #84a3a8;
overflow:auto;
}
div#main input {
font-family:verdana, arial, helvetica, san-serif;
font-size:13px;
padding:0 6px 0 6px;
color:#273a3d;
font-weight:500;
background-color:#fff;
border:2px solid #84a3a8;
}
 div.logo_wifi {
left:50%;
top:50%; 
margin-top:-168px;  
margin-left:396px; 
position:absolute;  
width:62px;
height:56px;
background-image:url('../images/logo_wifi_02.png');
background-repeat:no-repeat;    
border:none;
z-index:4;   
}
h3 {
font:bold 15px Verdana;
}
h4 {
font:bold 13px Verdana;
}
p {
font-family:verdana, arial, helvetica, san-serif;
font-size:13px;
color:#000;
}
#liste {
list-style-type:upper-alpha;
}
#liste li {
font-family:verdana, arial, helvetica, san-serif;
font-size:13px;
color:#000;
}
#liste2 {
list-style-type:lower-alpha;
}
#liste2 li {
font-family:verdana, arial, helvetica, san-serif;
font-size:13px;
color:#000;
}
.souligne {
text-decoration:underline;
}

/* Les en-têtes des pages */

div#header {
margin-left:223px;
margin-right:10px;
border-bottom:3px solid #84a3a8;
height:80px;
}

div#header_resa {
margin-left:223px;
margin-right:10px;
border-bottom:3px solid #84a3a8;
height:80px;
}

/* logo en-têtes des pages */

div#header img {
float: left;
margin-top:7px;
height: 65px;
width: 139px;
border:none;
}

div#header_resa img {
float:left;
margin:5px 0 0 20px;
height:60px;
width:55px;
border:none;
}

/* texte en-têtes des pages */

div#inner_header_right {
float:right;
padding:0;
margin-top:12px;
border:none;
font:bold 15px Verdana;
}

div#header_contrat {
margin-left:10px;
margin-right:10px;
border-bottom:3px solid #84a3a8;
height:80px;
}

div#header_contrat img {
float: left;
margin:7px 0 0 0;
height: 65px;
width: 122px;
border:none;
}

/* Le menu */
	
div#image_menu {
background-image:url('../images/le_pont_02.jpg');
background-repeat:no-repeat;
float:left;
border-right:3px solid #84a3a8;
width: 210px;
height: 450px;
}
div#texte_menu {
padding-top:20px;
padding-left:10px;
}
div#texte_menu a:link {
	font: bold 14px Verdana;
	color: #84a3a8;
	text-decoration: none;
}
div#texte_menu a:visited {
	font: bold 14px Verdana;
	color: #84a3a8;
	text-decoration: none;
}
div#texte_menu a:active {
	font: bold 14px Verdana;
	color: #84a3a8;
	text-decoration: none;
}
div#texte_menu a:hover {
	font: bold 14px Verdana;
	color: #ffffff;
	text-decoration: none;
}
img#flag_uk {
margin: 0 0 0 10px;
height:11px;
width:15px;
border:none;
}
img#flag_fr {
margin: 0 0 0 10px;
height: 11px;
width: 15px;
border:none;
}
/* La partie droite*/

div#texte_main {
margin:20px 10px 0 223px;
height:325px;
border:none;
overflow:auto;
}
div#texte_main_descriptif {
background:#273a3d;
margin-top:15px;
margin-bottom:15px;
margin-left:auto;
margin-right:auto;
padding:0;
width:852px;
height:295px;
overflow:auto;
border:1px solid #84a3a8;
}
.panel_images_descriptif {
margin: 20px 0 14px 0;
width: 480px;
height: 69px;
border:none;
}
.panel_images_descriptif img {
margin-right: 6px;
margin-left: 6px;
padding:0;
border:1px solid #84a3a8;
width:100px;
height:67px;
}
.table_contrat_style_3 {
width: 840px;
margin-right:auto;
margin-left:auto;
padding:12px;
background-color:transparent;
border:none;
}
.table_contrat_style_3 td {
font-family:verdana, arial, helvetica, san-serif;
font-size:9pt;
color:#ffffff;
line-height:25px;
}
div#texte_main_frame {
background-color:transparent;
margin:20px 0 20px 0;
padding:0;
width:650px;
height:305px;
overflow:auto;
border:none;
}
div#texte_main_tarif {
background:#273a3d;
margin:20px 0 20px 0;
margin-left:auto;
margin-right:auto;
padding:0;
width:650px;
height:305px;
overflow:auto;
border:1px solid #84a3a8;
}
div#texte_center {
font-family:verdana, arial, helvetica, san-serif;
font-size: 12px;
margin:10px 0 0 0;
text-align:center;
}
div#texte_center img {
margin:10px 0 0 0;
text-align:center;
}
img#logo_contrat {
height: 90px;
width: 180px;
border:none;
}
img#logocontrat {
margin:0 10px 0 0;
height: 60px;
width: 90px;
border:1px solid #84a3a8;
}
div#conteneur {
margin-top:5px;
width:100%;
height:20px;
overflow:auto;
font:13px Verdana;
border:none;
}
table#frame {
width:95%;
margin-right:auto;
margin-left:auto;
border:1px solid #84a3a8;
}
table#frame tr {
vertical-align:top
}
table#frame td {
padding:10px 8px 0 10px;
font:11px Verdana;
border:none;
}
table#frame td img {
width:110px;
height:auto;
border:1px solid #84a3a8;
} 
table#tarif {
width:633px;
margin-right:auto;
margin-left:auto;
background:transparent;
}
table#tarif td {
padding:11px;
font:11px Verdana;
border:1px solid #84a3a8;
}
 
/* L'image du formulaire de demande de disponibilités*/
img#attention {
float: left;
margin: 2px 10px 0 0;
height: 30px;
width: 33px;
}

/* L'image température du jour de la page administration */
img#meteo {
width:80px;
height:50px;
border:1px solid #84a3a8;
}

/* Les images des pages index, accueil et home*/
div#images {
position:relative;
float:left;
margin:0 10px 0 0;
height: 234px;
width: 350px;
border:2px solid #84a3a8;
}
div#images img {
height: 234px;
width: 350px;
border:none;
}
div#form {
margin:15px 5px 0 220px;
height:340px;
border:none;
}
table#breakafter { 
  page-break-after: always; 
}

/* Le pied de page contenu dans la partie droite*/

div#text_footer {
position:relative;
margin:0 10px 0 223px;
text-align:center;
font:10px Verdana;
border:none;
}
div#text_footer_map {
position:relative;
margin:-30px 10px 0 223px;
font:12px Verdana;
border:none;
}

/* La galerie de photo*/

div#galerie {
margin:8px 0 0 223px;
width :654px;
height: 392px;
border-bottom:1px solid #84a3a8;
background-color:transparent;
}
object {
width :654px;
height: 392px;
}
embed {
width :654px;
height: 392px;
}

/* La page contact*/

div#contact {
margin:0;
padding:0;
border:none;
}
div#contact input {
font-family:verdana, arial, helvetica, san-serif;
font-size: 12px;
padding:0 0 0 5px;
color:#000000;
font-weight:500;
background-color:#FFFFFF;
border:2px solid #84a3a8;
}
div#contact input.button {
width:100px;
margin:12px 20px 0 0;
padding:0;
font-size: 13px;
font-weight:600;
color:#273a3d;
}

/* Les pages reservation et edition du contrat en ligne*/


div#edition {
margin:0 10px 0 10px;
padding:0;
border:none;
}
div#edition input {
font-family:verdana, arial, helvetica, san-serif;
font-size: 12px;
padding:0 0 0 5px;
color:#000000;
font-weight:500;
background-color:#FFFFFF;
border:2px solid #84a3a8;
}
div#edition input.button {
width:100px;
margin:8px 20px 0 0;
padding:0;
font-size: 13px;
font-weight:600;
color:#273a3d;
}
div#texte_right {
position:relative;
float:right;
width:265px;
padding:22px 10px 0 0;
}
.editocontact {
font-size:14px;
color:#ffffff;
padding:0 0 0 50px;
font-weight:500;
}
.editol {
font-family:verdana, arial, helvetica, san-serif;
font-size: 13px;
padding:0 0 0 50px;
color:#000000;
font-weight:500;
}
.editol_b {
font-size:13px;
padding:0 0 0 50px;
font-weight:500;
color:#ffffff;
}
.edito_small {
font-family:verdana, arial, helvetica, san-serif;
font-size: 12px;
color:#FFFFFF;
font-weight:500;
}
input {
font-family:verdana, arial, helvetica, san-serif;
font-size:12px;
padding:0;
color:#000000;
font-weight:500;
background-color:#fff;
border:2px solid #84a3a8;
}
.input_form {
width:350px;
}
.input_hidden {
visibility:hidden;
display:none;
}
.input_radio {
margin:5px 5px 0 10px;
background-color:#3a5458;
border:none;
}
.resa {
font-family:verdana, arial, helvetica, san-serif;
font-size: 14px;
padding:0 10px 0 10px;
color:#3a5458;
font-weight:600;
background-color:#fff;
border:2px solid #84a3a8;
}
.tarif ul {
list-style: circle outside;
}
.tarif ul li {
font-family:verdana, arial, helvetica, san-serif;
font-size:11px;
color:#fff;
}
ul {
list-style: circle outside;
}
li {
font-family:verdana, arial, helvetica, san-serif;
font-size:13px;
color:#000;
}
.table_contrat_style {
width: 100%;
background:#fff;
border:1px solid #000;
}
.table_contrat_style input.button {
cursor:pointer;
}
.table_contrat_style p {
font-family:verdana, arial, helvetica, san-serif;
font-size:11px;
color:#000000;
}
.table_contrat_style td {
padding:6px;
}
.table_contrat_style_2 {
width: 100%;
padding:6px;
border:none;
}
.table_contrat_style_2 p {
font-family:verdana, arial, helvetica, san-serif;
font-size:13px;
color:#000000;
}
.map {
position:relative;
float: left;
margin : 0 10px 0 0;
width:350px;
height:234px;
border:2px solid #84a3a8;
}
.max {
width:100%;
}
select {
font-size: 13px;
font-family:verdana, arial, helvetica, san-serif;
color: #000000;
font-weight: 500;
text-align: left;
background-color : #FFFFFF;
height:22px;
}
textarea {
width:350px;
font-family:verdana, arial, helvetica, san-serif;
font-size: 12px;
padding-top : 5px;
padding-left : 5px;
color : #000000;
font-weight: 500;
background-color : #FFFFFF;
border: 2px solid #84a3a8;	
}
textarea#resa {
width:250px;	
}
.tdform {
font-family:verdana, arial, helvetica, san-serif;
padding-top: 3px;
line-height : 21px;
font-size: 12px;
font-weight: 600;
color: #ffffff;
}
div#erreurs {
font-size:20px;
margin-right:auto;
margin-left:auto;
}
#sponsorAdDiv {
position:absolute;
height:1px;
width:1px;
top:0;
left:0; 
margin-left:-45px;
visibility:hidden;
}

#sponsorAdDiv table {
width:400px;
background:#fff;
border:3px solid  #84a3a8;
}

#sponsorAdDiv p {
margin-top:20px;
font:bold 11px verdana, Lucida Grande, Lucida Sans Unicode, bitstream vera sans, trebuchet ms;
color:#000;
text-align:center;
}

SprySlidingPanels - version 0.1 - Spry Pre-Release 1.5
Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved.
*******************************************************************************/
#sliding_panels {
	/* HEIGHT IS SET BELOW at SprySlidingPanels DEFAULT SETTINGS */
	margin:0;
	border:none;
	}
.panel {
	float:left;
	width:100%;
	margin:0;
	padding:0;
	}
	.panel .panel_images {
		float:left;
		width:644px;
		margin:0 0 12px 0;
		text-align:right;
		border:none;
		}
	.panel ul {
		list-style:none;
		margin:0;
		padding:0;
		}
	.panel li {
		float:left;
		}
	.panel .panel_images img {
		border:1px solid #84a3a8;
		padding:0;
		margin:0 6px 0 0;
		width:84px;
		height:57px;
		}
	.panel .panel_text {
		clear:both;
		font:12px Verdana, Geneva, Arial, Helvetica, sans-serif;
		text-align:justify;
		color:#ffffff;
		background-color:transparent;
		}


/*
This is the selector for the main SlidingPanels container. This selector
defines the width and height of the view port for the widget. Note that
this selector does not set the overflow property since that is done programatically
by the widget. Setting the overflow property programatically ensures that
the contens of the widget will be fully visible should JavaScript be disabled
in the browser.
If you want to constrain the width of the SlidingPanels widget, set a width on
the SlidingPanels container. By default, our sliding panels widget expands
horizontally to fill up available space.
The SlidingPanels container is positioned relative so that content inside it
can be positioned relative to its upper left corner.
Avoid placing any CSS border or padding properties on the SlidingPanels container
as they can affect the proper positioning and sliding animations of the contents
inside the container.
The name of the class ("SlidingPanels") used in this selector is not necessary
to make the widget function. You can use any class name you want to style the
SlidingPanels container.
*/
.SlidingPanels {
	position:relative;
	height:165px;
	padding:0px;
	border:none;
	}

/*
This is the selector for the container that holds all of the content panels
for the widget. The SlidingPanelsContentGroup container is what gets programtically
positioned to create the slide animation. It is also what governs the layout of
the panels.
By default, the width of the container is the same as its parent, the SlidingPanels
container.
You can make the panels within the SlidingPanelsContentGroup container layout
horizontally by giving the SlidingPanelsContentGroup container a width that is as wide
or larget than the sum of the widths of all of the content panels, and then floating
the content panels inside the SlidingPanelsContentGroup container so they all appear
on the same line. You may also need to float the SlidingPanels and SlidingPanelsContentGroup
containers to insure that none of the content panels "leak" outside of the widget.
Avoid placing any CSS border, margin, or padding properties on the SlidingPanels
container as they can affect the proper positioning and sliding animations of the
the container within the widget.
The name of the class ("SlidingPanelsContentGroup") used in this selector is not
necessary to make the widget function. You can use any class name you want to style the
SlidingPanelsContentGroup container.
*/
.SlidingPanelsContentGroup {
	position:relative;
	width:100%;
	margin:0px;
	padding:0px;
	border:none;
	}

/*
This is the selector for the container that holds content for a given panel. In our
default style implementation, the dimensions of each content panel exactly match the
dimensions of the view port (SlidingPanels) container. This ensures that only one
panel ever shows within the view port.
Avoid placing any CSS border, margin, or padding properties on the SlidingPanels
container as they can affect the proper positioning and sliding animations of the
the panel within the widget. You can place border, margins and padding on any content
*inside* the content panel.
The name of the class ("SlidingPanelsContent") used in this selector is not
necessary to make the widget function. You can use any class name you want to style the
SlidingPanelsContent container.
*/
.SlidingPanelsContent {
	width:100%;
	height:165px;
	overflow:hidden;
	margin:0;
	padding:0;
	border:none;
	}

/*
The class used in this selector is programatically added to the SlidingPanels container
anytime we are animating between panels. This rule makes sure that *all* content inside
the widget is overflow:none to avoid a rendering glitch that occurs in FireFox 1.5 whenever
there is an element inside the widget that displays a scrollbar.
The class is automatically removed once the animation has stopped so that the overflow
properties of the content inside the widget should be restored.
*/
.SlidingPanelsAnimating * {
	overflow:hidden !important;
	}

/*
The class used in this selector is programatically added to the SlindingPanelsContent
container that is currently visible in the view port. The class is automatically removed
when the widget switches to a different panel.
*/
.SlidingPanelsCurrentPanel {
	}

/*
The class used in this selector is programatically added to the SlidingPanels container
anytime the SlidingPanels container is given focus. The class is automatically removed
once the SlidingPanels container loses focus.
*/
.SlidingPanelsFocused {
	}