@charset "UTF-8";

/* Otus Graphic Design  */
/* www.otus.fr  */
/* contact@otus.fr  */
/* 2009  */

/* ================================== BODY ================================== */

html, body  {
	background-color:#97816A;
	margin:0; /* il est conseille de mettre a zero la marge et le remplissage de l'element body, pour tenir compte des differentes valeurs par defaut des navigateurs */
	padding:0;
}

/* ============================ GRAND CONTENEUR ============================= */

#main {
	margin:0 auto; /* les marges automatiques (et dotees d'une largeur positive) centrent la page */
	padding:0;
	width:800px;
	height:100%;
	float:inherit;
}


#grandconteneur {
	width:800px;
	height:100%;
	background-color:#FFF;
	padding:0;
	margin:0;
	float:left;
	background:url(img/fd_grandconteneur.png) repeat-y;
}

/* ================================== HAUT ================================== */


#otus {
	float:left;
	width:177px;
	height:inherit;
	background:url(img/logo.gif) no-repeat;
}

/* =============================== NAVIGATION =============================== */
#nav { 
	width:195px;
	height:auto;
	margin:0;
	padding:0;
	float:left;
}
#bt_01 {
	float:left;
	left:0px;
	width:123px;
	height:27px;
	padding-left:9px;
	padding-top:55px;
}
#bt_02 {
	float:left;
	left:0px;
	width:92px;
	height:27px;
	padding-left:59px;
	padding-top:13px;
}
#bt_03 {
	float:left;
	left:0px;
	width:78px;
	height:27px;
	padding-left:88px;
	padding-top:13px;
}
#bt_04 {
	float:left;
	left:0px;
	width:37px;
	height:27px;
	padding-left:133px;
	padding-top:13px;
}
#bt_05 {
	float:left;
	left:0px;
	width:94px;
	height:27px;
	padding-left:72px;
	padding-top:13px;
}
#bt_06 {
	float:left;
	left:0px;
	width:66px;
	height:27px;
	padding-left:78px;
	padding-top:13px;
}
#bt_contact {
	float:left;
	left:0px;
	width:180px;
	height:100%;
	/* Haut Droit Bas Gauche */
	padding:217px 0 20px 6px;
	text-align:left;
}

/* ================================== MENU ================================== */
#naverticale {
	float:left;
	width:236px;
	height:313px;
}
/* ================================ CONTENU ================================= */

#conteneur { 
	width:800px;  /* parametrage de la largeur a 20 pixels de moins que le plein ecran (800 pixels) pour tenir compte de l'habillage du navigateur et eviter l'apparition d'un ascenseur horizontal */
	background:url(img/arbre.gif) repeat-y;
	position:inherit;
}
#contenu {
	float:right;
	width:428px;
	height:auto;
	background:url(img/fd_haut.gif) no-repeat top right;
	text-align:left;
}
.bloc_l_haut {
	float:left;
	width:370px;
	height:auto;
	padding-left:30px;
	padding-top:43px;
	text-align:left;
}
.bloc_l_moyen {
	float:left;
	width:370px;
	height:auto;
	padding-left:30px;
	padding-top:3px;
	text-align:left;
}

/* =========================== CONTENU PAR RUBRIQUE ============================= */
#conteneur { 
	width:800px;  /* parametrage de la largeur a 20 pixels de moins que le plein ecran (800 pixels) pour tenir compte de l'habillage du navigateur et eviter l'apparition d'un ascenseur horizontal */
	background:url(img/arbre.gif) repeat-y;
	float:left;
}
/* 1/9 == INDEX */
.bloc_titre {
	float:right;
	width:100%;
	/* Haut Droit Bas Gauche */
	padding:0 0 7px 0;
	margin:0;
	text-align:left;
}
.bloc_stitre {
	float:left;
	width:100%;
	padding:7px 0 2px 0;
	margin:0;
	text-align:left;
}
.bloc_txt {
	float:left;
	width:100%;
	text-align:left;
}
.bloc_filet {
	float:left;
	width:100%;
	height:30px;
	background:url(img/filet_coul2.gif) repeat-x;
}
.bloc_filet_marron {
	float:left;
	width:100%;
	height:30px;
	background:url(img/filet_coul1.gif) repeat-x;
}
.bloc_filet_blanc {
	float:left;
	width:100%;
	height:30px;
	background:url(img/filet_coul1.gif) repeat-x;
}
.bloc_realindex {
	float:left;
	width:370px;
	height:auto;
	background-color:#FFFFFF;
	/* Haut Droit Bas Gauche */
	padding:1px 3px 17px 3px;
	border-left:27px solid #FFFFFF;
	background:url(img/fd_lune.png) #e7ded6 no-repeat top left;
}
.titre_realindex {
	/* Haut Droit Bas Gauche */
	padding:0;
	margin:0 0 7px 0;
	display:inline-block;
}

/* 2/9 == COMPETENCES */
/* 3/9 == DEMARCHE */
/* 4/9 == PORTFOLIO */

.bloc_creation {
	width:123px;
	height:117px;
	float:left;
}
.bloc_creationdouble {
	width:246px;
	float:left;
}
.creation_vignette {
	width:109px;
	height:70px;
	padding-left:7px;
	padding-top:7px;
	padding-right:7px;
}
.creation_information {
	width:109px;
	height:30px;
	padding-left:7px;
	padding-top:7px;
	text-align:left;
}

#bloc_creation_guibert {
	float:left;
	left:0px;
	width:123px;
	height:117px;
	padding-left:30px;
	padding-top:80px;
	text-align:left;
}
#bloc_creation_jerome {
	float:left;
	left:0px;
	width:123px;
	height:117px;
	background:url(img/pastille_orange.png) no-repeat;
}
#bt_contact_portfolio {
	float:left;
	left:0px;
	width:180px;
	height:100%;
	padding-left:8px;
	padding-top:20px;
	text-align:left;
}

/* 5/9 == KITS */
.cellule {
	border-bottom-color:#aae5ff;
	border-bottom-width:1px;
	border-bottom-style:solid;
}

/* 6/9 == PARTENAIRES */
/* 7/9 == JOURNAL */
.journal_gauche {
	float:left;
	width:175px;
	height:auto;
}

.journal_droite {
	float:right;
	width:180px;
	height:auto;
}

/* 8/9 Liens */
/* 8/9 == MENTIONS */

/* ================================== BAS =================================== */
#conteneur_bas { 
	width:617px;  /* parametrage de la largeur a 20 pixels de moins que le plein ecran (800 pixels) pour tenir compte de l'habillage du navigateur et eviter l'apparition d'un ascenseur horizontal */
	height:80px;
	margin:0;
	padding-left:183px;
	background:url(img/fd_contenu_bas.gif) no-repeat;
	float:left;
}
/* ============================= PLAN DU SITE =============================== */

.clearfloat {
	width:100%;
	height:30px;
	clear:both;
    font-size:0;
    line-height:0;
	text-align:right;
	/* Haut Droit Bas Gauche */
	padding:15px 0 3px 0;
	bottom:0;
}