/** The "box layout" part of the CSS is under Creative Common
 ** <http://creativecommons.org/licenses/publicdomain/>
 ** It was adapted from a css generator at 
 ** <http://www.fu2k.org/alex/css/layouts/3Col_NN4_FFFF.mhtml>
 **
 ** The "Site identity" part of the CSS is copyrighted
 ** by Liquid Concept S.à.r.l. And General Wine Services.
 **
 ** Date: 2005/9/21
 ** Olivier Amblet <olivier.amblet@liquid-concept.ch>
 **/

/* ====================================================================
box layout
-------------------------------------------------------------------- */
.box-wrap {
	float: left;
	width: 950px;
}
.columns-float {
	float : left;
	width : 775px;
}
/* the relative positioning is required by IEs 5 + 6 (PC) - NN4 crashes if it sees them while other browsers don't seem to mind - hence the Caio hack */
.column-one {
	width : 618px;
	float : right;
	padding-bottom: 30px;
	border-left: 1px solid #CACDEF;
	border-right: 1px solid #CACDEF;
	background : #0A1347 url('../i/bg-grad-cb.gif') left bottom repeat-x;
}
.column-two {
	width : 155px;
	float : left;
	padding-bottom: 335px;
	background: url('../i/bg-grad-lb.jpg') left bottom no-repeat;
	}
.column-three {
	width : 175px;
	float : right;
	padding-bottom: 172px;
	background: url('../i/bg-grad-rb.jpg') left bottom no-repeat;
}
.box-footer {
	clear : both;
}
/* ====================================================================
box-clear requires all sorts of hackery because of the way the
different browsers cope with clearing floats
see [# #]
-------------------------------------------------------------------- */
.box-clear { clear: both; line-height: 0px; font-size: 1px; }
/* IE5 (mac) dealt with, now reset font-size for Geckos,
turn off for IE5 (PC) + OmniWeb and back on for IE6 (PC)
see [http://www.fu2k.org/alex/css/test/OmniWebInlineHack.mhtml] */
/*\*/
.box-clear { font-size: medium; }
.fake.box-clear { display: none; }
/* */
/* Turn off for Opera 6 and below */
html>body div.box-clear { display: none; }
/* And turn it back on again for good honest browsers
see [http://www.albin.net/CSS/OwenHack.html] */
head:first-child+body div.box-clear { display: block; }
/* ====================================================================
box styling
-------------------------------------------------------------------- */
.box-wrap {
	padding : 0px;
}
.box-header {
	height: 151px;
	padding : 0;
	margin : 0px;
	background: url('../i/bg-grad-rt.jpg') right bottom no-repeat;
}
.box-footer {
	margin : 0px;
	padding : 20px 6px 6px;
}
.column-two-content {
	background : #5B002C;
}
.column-three-content {
	background : #5B002C url('../i/pix-mauve.gif') right repeat-y;
}
.column-three-content .block {
	padding: 0 0 .6em;
	margin-right: 20px;
}
.column-one-content {
	position: relative;
	background: url('../i/titre-grad.jpg') no-repeat;
}
.column-one-content, .column-two-content, .column-three-content {
	margin : 0px;
	padding-bottom : 1px;
}
/* CSS HACK: position:relative needed by IE6 otherwise the header and col 2 don't show up on initial rendering - they're there but you have to minimise the window or switch to another app and back to see the full effect. But IE5(pc) doesn't like it. And nor does NN4.
NB. the use of pos:rel has to go way beyond skin-deep - any nested element that needs a background colour appears to require to be be relatively positioned */
/*/*/
.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2
{ p\osition: relative; }
/* */


/* ====================================================================
Site identity
-------------------------------------------------------------------- */
#site-heading ,
#site-heading-2 {
	left: 0;
}

#site-heading h1 ,
#site-heading-2 h1 {
	position: absolute;
	left: 0;
	width: 155px;
	height: 151px;
	padding: 0;
	margin: 0;
}
#site-heading h1 a ,
#site-heading-2 h1 a {
	display: block;
	width: 155px;
	height: 151px;
	background: url('../i/logo.gif') no-repeat;
	overflow: hidden;
	text-indent: -9999px;
}
#site-heading p ,
#site-heading-2 p {
	background: url('../i/titre-long.gif') no-repeat;
	margin: 0 0 0 155px;
	padding: 0;
	width: 620px;
	height: 114px;
	overflow: hidden;
	text-indent: -9999px;
}

#site-heading-2 {
	border-bottom: 1px solid #cacdef;
	width: 100%;
}
#site-heading-2 h1 a {
	background-image: url(../i/logo-2.png);
}
#site-heading-2 p {
	background-image: url(../i/titre-long-2.png);
	height: 151px;
}

body {
	margin : 0;
	padding : 0px;
	background-color : #0C1263;
	font-family : Verdana, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 1.6em;
	color : #FFFFFF;
}
div {
	margin : 0px;
	padding : 0px;
}
h1 {
	font-family: Georgia;
	font-size: 1.8em;
	margin : 0px;
	padding : .8em 0;
	font-variant: small-caps;
}
h2 {
	margin : 0px 0px 9px 0px;
	padding : 1em 12px 0px;
	color : #FFFFFF;
	background: url(../i/flash-subtitle.gif) left bottom no-repeat;
	font-size : 1.6em;
	font-weight : normal;
	border-bottom: 1px solid #CACDEF;
	clear:both;
}
.block h2 {
	margin : 0px -15px 9px -15px;
	padding : 1em 12px 0px;
	color : #FFFFFF;
	background: url(../i/flash-subtitle.gif) left bottom no-repeat;
	font-size : 1.6em;
	font-weight : normal;
	border-bottom: 1px solid #CACDEF;
}
h3 {
	color: #CACDEF;
	font-size: 1.3em;
	font-weight: normal;
	padding: .4em 0 .2em;
	margin: 0;
}
p {
	margin : 0px;
	text-align: justify;
	padding: .4em 0 .6em;
}

p.signature {
	font-style: normal;
	text-align: right;
}

img.bullet,
.column-one-content img.bullet {
	padding: 0 3px;
	border: none;
}

a {
	color: #FFDCEE;
}
a:hover {
	color: #5B002C;
	background-color: #FFDCEE;
	text-decoration: none;
}

blockquote {
	border-left: 1px solid #CACDEF;
	margin: .5em 0 0 15px;
	padding-left: 6px;
	padding-bottom: .2em;
	position: relative;
}

hr {
	border: 1px solid #CACDEF;
	border-bottom: none;
	margin-right: 1px;
	height: 0;
}
strong {
	color: #CACDEF;
}

table {
	border-collapse: collapse;
	margin-left: -15px;
	margin-right: -15px;
	margin-bottom: 1em;
	font-family : Verdana, Helvetica, sans-serif;
	font-size: 1em;
}

table p {
	border: none;
	text-align: left;
	padding: .3em 0;
	margin: 0;
}

td {
	vertical-align: top;
	padding: 3px 15px;
}

td.prix {
	padding: 0.3em 1.5em;
	vertical-align: middle;
	border-left: 1px solid #CACDEF;
	text-align: center;
}

th.prix {
	text-align: center;
	border-left: 1px solid #CACDEF;
	padding: 4px;
}

.block {
	padding: 0 15px .4em;
}

.column-three-content p {
	padding: .4em 6px;
}

.column-three-content h3 {
	padding: .5em 6px .4em;
	font-variant: small-caps;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
}

.column-three-content h4 {
	padding: 0 6px;
	margin: 0;
	text-align: center;
	font-size: 11px;
	font-variant: small-caps;
	font-weight: bold;
}

.column-three-content blockquote {
	border: none;
	padding: 0;
	margin: 0;
	font-style: normal;
}

.column-three-content p {
	text-align: left;
}

.column-three-content p.signature {
	text-align: right;
}

.column-three-content img {
	border-color: #CACDEF;
	border-style: solid;
	border-width: 1px 0;
}

.column-three-content ul {
	margin-left: 0;
	padding-left: 2em;
}

.column-three-content ul li.selected {
	color: #CACDEF;
	font-weight: bold;
}

.column-one-content img {
	border-color: #CACDEF;
	border-style: solid;
	border-width: 1px;
}

div.img-right {
	float: right;
	padding: 1px;
	background: #0A1347;
	margin-left: 15px;
	border: 1px solid #CACDEF;
}
div.img-left {
	float: left;
	padding: 1px;
	background: #0A1347;
	margin-right: 15px;
	border: 1px solid #CACDEF;
}
div.img-right img, div.img-left img {
	float: left;
	border: none;
}

div.hr {
	margin-right: 1px;
	height: 31px;
	background: url('../i/hr.gif');
}
div.hr hr {
	display: none;
}
p.boutton {
	text-align: center;
}
p.boutton a {
	display: block;
	margin: 0 auto 0 auto;
	padding-top: 2px;
	width: 139px;
	height: 25px;
	overflow: hidden;
	background-image: url('../i/button-blank.jpg');
	background-position: 50% 0%;
	background-repeat: no-repeat;
	color: #5B002C;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	font-variant: small-caps;
}

.boutton a:hover {
	background-color: transparent;
}

.box-footer p {
	text-align: center;
	padding: .3em 0;
}

ul {
	margin-top: 0;
	padding-top: .3em;
}

input.text, textarea, select {
	background: #CACDEF;
	border: 1px solid #FFFFFF;
}

input.submit {
	background: #5B002C;
	color: #FFDCEE;
	border-color: #FFDCEE;
}

/* -- Navbar -- */
#navcontainer {
	margin-left: 155px;
}
#navcontainer ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#navcontainer ul li { 
	display: block;
	float: left;
	padding: 0;
	margin: 0;
}

#navcontainer ul li a {
	display: block;
	background-image: url(../i/menu.gif);
	background-repeat: no-repeat;
	width: 155px;
	height: 37px;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
}

#home_section a { background-position: 0px 0px; }
#home_section.selected a { background-position: 0px -37px; }
#home_section a:hover { background-position: 0 -74px; }
#society_section a { background-position: -155px 0px; }
#society_section.selected a { background-position: -155px -37px; }
#society_section a:hover { background-position: -155px -74px; }
#product_section a { background-position: -311px 0px; }
#product_section.selected a { background-position: -311px -37px; }
#product_section a:hover { background-position: -311px -74px; }
#contact_section a { background-position: -466px 0px; }
#contact_section.selected a { background-position: -466px -37px; }
#contact_section a:hover { background-position: -466px -74px; }

#menu {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu li {
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
	list-style-type: none;
	border-bottom: 1px solid #CACDEF;
}

#menu li a {
	text-decoration: none;
	display: block;
	padding: 6px;
	margin: 0;
	width: 143px;
}

#menu li.selected a {
	background: #0A1347 url('../i/menu-grad-sel.jpg') bottom right no-repeat;
	color: #CACDEF;
}

#menu li a:hover {
	/*color: #FFDCEE;*/
	/*font-size: 1.2em;
	padding: 6px;*/
	color: #CACDEF;
	background: #0A1347 url('../i/menu-grad-sel.jpg') bottom right no-repeat;
}

link_to_do {
	font-weight: bold;
	color: #FF6600;
}