/**
 * Général
 */
table, select, input, textarea {
font-family: Helvetica, Verdana, Arial;
font-size: 11px;
}

table {
border: 0;
border-collapse: collapse;
}

td {
padding: 0;
}

img {
border: 0;
}

p {
font-weight: normal;
margin: 15px 0;
text-align: justify;
}

.close {
text-align: right;
}

.sms {
margin-bottom: 8px;
font-weight: bold;
color: #666666;
}

.link {
cursor: pointer;
}

.draggable {
cursor: move;
}

.flying {
position: absolute;
}

.spacer {
clear: both;
font-size: 1px;
height: 5px;
}

.nowrap {
white-space: nowrap;
}

.error {
color: red;
}





h1 {
font-family: Helvetica, Tahoma, Arial;
font-weight: normal;
color: #aaa;
font-size: 24px;
font-variant: small-caps;
text-indent: 40px;
margin: 20px 0 0 0;
}

h1 em {
color: red;
font-style: normal;
}

.content {
font-weight: lighter;
color: #333;
font-size: 12px;
margin-left: 40px;
}




/* GLOBAL */
html {
	font-size:		100%;
}

body {
	padding:		0;
	margin:			0;
	font-family:	"Helvetica", Arial, sans;
	font-size:		.85em;

	background:		#333 url('../imgs/body_bg.png');
}

a {
	color:			#C00;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

.png24_tr {
	behavior: url('$pngfix/iepngfix.htc');
}

ul {
	padding: 0 0 0 14px;
	font-size: 12px;
}






/* ========================== Conteneurs principaux ================================= */

#main_ctn {
	width:			100%;
	height:			563px;
	background:		url('../imgs/bg_elephant.png') no-repeat;
	
	
	behavior: url('$pngfix/iepngfix.htc');
}

#content_ctn {
	height:			405px;
	/*margin-top:		30px;*/
	margin-left:	105px;
	position:		relative;
	top:			30px;

	text-align:		left;
}

#menu_ctn {
	clear: 			both;
	margin-left:	280px;
	/*margin-top:		20px;*/
	position:		relative;
	top:			50px;
}






/* ========================== Bloc promotion ================================= */

#promo {
	width:			138px;
	height:			90px;

	margin:			30px 0px 25px 0px;
	padding:		37px 8px;
	
	background:		url('../imgs/bulle.png') no-repeat 20px 30px;
	
	font-size:		12px;
	vertical-align: top;
}

#promo .annonce {
	font-weight:	bold;
	text-align:		center;
}

#promo .link {
	margin-top:		5px;
	text-align:		center;
}

#content_ctn tr>#promo {
	height:			16px;
}





/* ========================== Contenu de la page ================================= */

#content {
	padding:		30px 4px 0 4px;
}

#content #div_content {
	width:			490px;
	height:			360px;
	overflow:		auto;
	vertical-align: top;
}






/* ========================== La bestiole ================================= */

#beast {
	position:		absolute;
	left:			750px;
	top:			42px;
	text-align:		right;
}

#beast img {
	clear: 			both;
}

#beast>img {
	position:		relative;
	z-index: 		900;
}




/* ========================== Menu principal ================================= */

#menu_main_ctn {
	width:			420px;
}

/*** UL */
#menu_main_ctn #menu_main {
	margin:			0;
	padding:		0;
}

/*** LI */
#menu_main_ctn #menu_main li {
	display:		inline;
	margin:			0;
}

/*** A */
#menu_main_ctn #menu_main li a {
	float:			left;
	overflow:		hidden;
	background:		url('../imgs/menu_main.png') no-repeat;
	height:			43px;
}

#menu_main_ctn #menu_main li.on a {
	background:		url('../imgs/menu_main_on.png') no-repeat;
}

/*** BASE */
#menu_main_ctn #menu_main li#accueil a			{ width: 68px; }
#menu_main_ctn #menu_main li#prestations a		{ width: 101px; }
#menu_main_ctn #menu_main li#societe a			{ width: 72px; }
#menu_main_ctn #menu_main li#zoo a				{ width: 39px; }
#menu_main_ctn #menu_main li#produits a			{ width: 128px; }
#menu_main_ctn #menu_main li#admin a			{ width: 51px; }

/*** OFF */
#menu_main_ctn #menu_main li#accueil a			{ background-position: 0px  -43px; }
#menu_main_ctn #menu_main li#prestations a		{ background-position: -68px  -43px; }
#menu_main_ctn #menu_main li#societe a			{ background-position: -169px -43px; }
#menu_main_ctn #menu_main li#zoo a				{ background-position: -237px -43px; }
#menu_main_ctn #menu_main li#produits a			{ background-position: -276px -43px; }
#menu_main_ctn #menu_main li#admin a			{ background-position: -404px -43px; }

/*** HOVER */
#menu_main_ctn #menu_main li#accueil a:hover	{ background-position: 0px  0px; }
#menu_main_ctn #menu_main li#prestations a:hover{ background-position: -68px  0px; }
#menu_main_ctn #menu_main li#societe a:hover	{ background-position: -169px 0px; }
#menu_main_ctn #menu_main li#zoo a:hover		{ background-position: -237px 0px; }
#menu_main_ctn #menu_main li#produits a:hover	{ background-position: -276px 0px; }
#menu_main_ctn #menu_main li#admin a:hover		{ background-position: -404px 0px; }

/*** On cache le texte alternatif, sera visible si CSS désactivées */
#menu_main_ctn #menu_main li span 				{ display: none; }






/* ========================== Sous-menu ================================= */

#menu_second {
	height:			32px;
	margin-left:	60px;
}

#menu_second .left,
#menu_second .right {
	width:			4px;
	height:			29px;
	float:			left;
	behavior: url('$pngfix/iepngfix.htc');
}

#menu_second .middle {
	height:			32px;
	float:			left;
	padding:		3px 8px 0 8px;

	color:			#666;
	font-size:		.85em;

	background:		url('../imgs/menu_second_middle.png') no-repeat;
	behavior: url('$pngfix/iepngfix.htc');
}

#menu_second>.left, #menu_second>.right {
	position:		relative;
	z-index:		1000;
}

#menu_second>.middle {
	height:			29px;
	position:		relative;
	z-index:		1000;
}

#menu_second .middle a {
	color:			#333;
}

#menu_second .middle span.on {
	color:			#c00;
}

#menu_second .left {
	background:		url('../imgs/menu_second_left.png') no-repeat;
}

#menu_second .right {
	background:		url('../imgs/menu_second_right.png') no-repeat;
}

#menu_second.accueil		{ left: -320px; }
#menu_second.prestations	{ left: 50px; }
#menu_second.zoo			{ left: -320px; }
#menu_second.produits		{ margin-left: 245px; }

#menu_second.accueil .middle	{ background-position: -300px 0px; }
#menu_second.prestations .middle{ background-position: -370px 0px; }
#menu_second.societe .middle	{ background-position: -448px 0px; }
#menu_second.zoo .middle		{ background-position: -300px 0px; }
#menu_second.produits .middle	{ background-position: -450px 0px; }






/* ========================== Formulaires ================================= */

form {
margin: 0;
}

fieldset {
border: 1px solid #666;
margin-bottom: 5px;
padding: 6px;
}

input,select,textarea {
font-weight: bold;
vertical-align: top;
font-size: 90%;
background-color: transparent;
border: 1px solid #666666;
}

label {
display: block;
float: left;
width: 150px;
vertical-align: top;
margin-right: 5px;
}

label.long {
width: 280px;
}

label.short {
width: 100px;
}

legend {
color: #666666;
}

p.checkboxList label {
display: inline;
float: none;
width: 150px;
clear: none;
margin-left: 3px;
text-align: left;
}