/** Css of comunika website
--------------------------------------------------*/
/** 1. General classes
/** 2. Page layout
/** 3. Menu AN+FR
/** 4. Sous-menu FR
/** 5. Sous-menu AN
/** 6. Filet sous-menu
/** 7. Menu Portfolio Flash
/** 8. Main content
/** 9. Page accueil
/** 10. Page contact
/** 11. Footer
/** 12. Bande grise infini droite




/** 1. General classes 
--------------------------------------------------*/

	/* Layout Helpers */

	html, body {height: 100%;}
	body {
		margin: 0;
		padding:0;
		font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */
		background:none;
	}

	body, caption, th, td, input, textarea, select, option, legend, fieldset {
		font-family: Arial, Helvetica, sans-serif;
		font-size:10px;
		line-height:15px;
		color: #808285;
	}
	


	/* Titles  */
	h1 {
		font-size: 20px;
		font-weight:bold;
		line-height:22px;
		text-transform:uppercase;
		color:#a7a9ac;
		padding: 0;
		margin: 0 0 5px 0;
	}


	h2 {
		font-size: 14px;
		color:#a7a9ac;
		padding: 0;
		margin: 0 0 5px 0;
	}


	/* Texte exergue rouge-vert-bleu  */
	
	
	h3 {
		color:#f43527;
		font-size:13px;
	}
	
	h4 {
		color:#7c7c7c;
		font-size:13px;
	}
	
	h5 {
		color:#44c2f5;
		font-size:13px;
	}
	
	h6 {
		color:#7bde20;
		font-size:13px;
	}
	
	
	.bouton{
		display:block;
		float:left;
	}
	
	
	/* Paragraph Styles */
	p { margin: 0 0 10px 0; }


	
	


	/* When declaring Link states, remember: LoVe HA : Link | Hover | Visited | Active */
	a:link, a:visited {
		color: #000;
		text-decoration: underline;
	}
	a:hover, a:active {
		color: #000;
		text-decoration: none;
	}
	



/** 2. Page layout 
--------------------------------------------------*/

		
	#page {
		position:relative;
		top:70px;
		left:180px;
		width:745px;
	}
	
	
	#logo a#bt_logo{
		position:absolute;
		display:block;
		top:70px;
		left:0px;
		width:180px;
		height:350px;
		background:url('../images/img_design_graphique_left.gif') no-repeat;
	}
	
	
	#filet_top{
		width:745px;
		height:18px;
		background:url('../images/img_design_graphique_top.gif') no-repeat;
	}

	
	#slogan{
		width:745px;
		height:102px;
		background:url('../images/img_conseils_creation_design_graphique.gif') right top no-repeat;
	}

	#slogan_eng{
		width:745px;
		height:102px;
		background:url('../images/img_consultation_creation_graphic_design.gif') right top no-repeat;
	}

	
	
/** 3. Menu AN+FR
--------------------------------------------------*/	
	
	#position_menu{
		position:absolute;
		left:0px;
		top:100px;
		width:745px;
		height:20px;
	}
	
	#position_menu li{
		display:inline;
		list-style: none;  
	}
		
			
	#position_menu a#bt_services{
		width:60px;
		height:20px;
		background:url('../images/bt_services.gif') no-repeat;	
	}
	#position_menu a#bt_services:hover{
		background:url('../images/bt_services_roll.gif') no-repeat;	
	}
	#position_menu a#bt_services_on{
		width:60px;
		height:20px;
		background:url('../images/bt_services_roll.gif') no-repeat;	
	}
	

	#position_menu a#bt_portfolio{
		width:63px;
		height:20px;
		background:url('../images/bt_portfolio.gif') no-repeat;	
	}
	#position_menu a#bt_portfolio:hover{
		background:url('../images/bt_portfolio_roll.gif') no-repeat;	
	}
	#position_menu a#bt_portfolio_on{
		width:63px;
		height:20px;
		background:url('../images/bt_portfolio_roll.gif') no-repeat;	
	}

	#position_menu a#bt_contact{
		width:60px;
		height:20px;
		background:url('../images/bt_contact.gif') no-repeat;	
	}
	#position_menu a#bt_contact:hover{
		background:url('../images/bt_contact_roll.gif') no-repeat;	
	}
	#position_menu a#bt_contact_on{
		width:60px;
		height:20px;
		background:url('../images/bt_contact_roll.gif') no-repeat;	
	}

	#position_menu a#bt_english{
		width:45px;
		height:20px;
		background:url('../images/bt_english.gif') no-repeat;	
	}
	#position_menu a#bt_english:hover{
		background:url('../images/bt_english_roll.gif') no-repeat;	
	}	
	
	#position_menu a#bt_francais{
		width:50px;
		height:20px;
		background:url('../images/bt_francais.gif') no-repeat;	
	}
	#position_menu a#bt_francais:hover{
		background:url('../images/bt_francais_roll.gif') no-repeat;	
	}
	
	
	
/** 4. Sous-menu FR
--------------------------------------------------*/	

	#position_sous_menu{
		width:745px;
		height:25px;
	}
		
	#position_sous_menu li{
		display:inline;
		list-style: none;  
	}
	

	#position_sous_menu a#bt_conseil_planification{
		width:205px;
		height:25px;
		background:url('../images/bt_conseil_planification.gif') no-repeat;	
	}
	#position_sous_menu a#bt_conseil_planification:hover{
		background:url('../images/bt_conseil_planification_roll.gif') no-repeat;	
	}
	#position_sous_menu a#bt_conseil_planification_on{
		width:205px;
		height:25px;
		background:url('../images/bt_conseil_planification_roll.gif') no-repeat;	
	}	
		
	
	#position_sous_menu a#bt_creation_fr{
		width:75px;
		height:25px;
		background:url('../images/bt_creation_fr.gif') no-repeat;	
	}
	#position_sous_menu a#bt_creation_fr:hover{
		background:url('../images/bt_creation_fr_roll.gif') no-repeat;	
	}
	#position_sous_menu a#bt_creation_fr_on{
		width:75px;
		height:25px;
		background:url('../images/bt_creation_fr_roll.gif') no-repeat;	
	}

	
	#position_sous_menu a#bt_production{
		width:90px;
		height:25px;
		background:url('../images/bt_production.gif') no-repeat;	
	}
	#position_sous_menu a#bt_production:hover{
		background:url('../images/bt_production_roll.gif') no-repeat;	
	}
	#position_sous_menu a#bt_production_on{
		width:90px;
		height:25px;
		background:url('../images/bt_production_roll.gif') no-repeat;	
	}
	
	
/** 5. Sous-menu AN
--------------------------------------------------*/		

	#position_sous_menu a#bt_marketing_consultation_planning{
		width:228px;
		height:25px;
		background:url('../images/bt_marketing_consultation_planning.gif') no-repeat;	
	}
	#position_sous_menu a#bt_marketing_consultation_planning:hover{
		background:url('../images/bt_marketing_consultation_planning_roll.gif') no-repeat;	
	}
	#position_sous_menu a#bt_marketing_consultation_planning_on{
		width:228px;
		height:25px;
		background:url('../images/bt_marketing_consultation_planning_roll.gif') no-repeat;	
	}	
	
	
	#position_sous_menu a#bt_creation_eng{
		width:75px;
		height:25px;
		background:url('../images/bt_creation_eng.gif') no-repeat;	
	}
	#position_sous_menu a#bt_creation_eng:hover{
		background:url('../images/bt_creation_eng_roll.gif') no-repeat;	
	}
	#position_sous_menu a#bt_creation_eng_on{
		width:75px;
		height:25px;
		background:url('../images/bt_creation_eng_roll.gif') no-repeat;	
	}	
	

	

/** 6. Filet sous-menu
--------------------------------------------------*/	

	#filet_sous_menu{
		width:745px;
		height:18px;
		background:url('../images/img_design_graphique_sousmenu.gif') left 0 no-repeat;
	}


	

/** 7. Menu Portfolio Flash
--------------------------------------------------*/

	#banner{
		width:745px;
		height:60px;
		background:url('../creation_graphique/portfolio_menu.swf') left 0 no-repeat;
	}

	#contenant_portfolio{
		width:745px;
		height:480px;
		background:url('../creation_graphique/portfolio.swf') left 0 no-repeat;

	}

	

/** 8. Main Content
--------------------------------------------------*/

	#main{
		position:relative;
		width:745px;
	}


	#main_fixe{
		position:relative;
		width:745px;
		height:300px;
	}

	#boite_texte_large {
		width:510px;
	}


	#boite_texte {
		width:450px;
	}
	
	#boite_texte li{
		list-style-position:inside;
		list-style-image:url("../images/carre_gris.gif");  
	}
		
	#boite_exergue{
		position:absolute;
		left:550px;
		top:20px;
		width:195px;
		height:275px;
	}
	
	
/** 9. Page Accueil 
--------------------------------------------------*/
	#phrase_accueil_fr{
		width:745px;
		height:63px;
		background:url('../images/phrase_accueil_fr.gif') right top no-repeat;
	}	
	
	#phrase_accueil_eng{
		width:745px;
		height:63px;
		background:url('../images/phrase_accueil_eng.gif') right top no-repeat;
	}	
	
	
/** 10. Page Contact 
--------------------------------------------------*/		

	#carte_contact{
		float:left;		
		width:268px;
		height:158px;
		background:url('../images/carte.gif') right 0 no-repeat;
	}
	
	#adresse_contact{
		float:left;		
		width:745px;
		height:65px;
		color: #000;
	}

/** 11. Footer
--------------------------------------------------*/

	#boite_footer{
		position:relative;
		width:745px;
		height:70px;
	}
	#boite_footer_portfolio{
		float:left;
		margin:-25px 0 0 0;
		width:600px;
		height:40px;
	}
	#info_footer_portfolio{
		position:relative;
		width:700px;
		float:left;		
		text-align:left;
		color: #c0c0c0;
	}
	#info_footer{
		position:relative;
		top:40px;
		width:700px;
		float:left;		
		text-align:left;
		color: #c0c0c0;
	}
	#ligne_footer {
		float:right;		
		width:20px;
		height:70px;
		background:url('../images/img_design_graphique_bas.gif') right top no-repeat;
	}
	
	
		
	#info_footer li{
		display:inline;
		list-style: none;
	}
	#info_footer a:link, #footer a:visited {  
		text-decoration: underline;		
		color:#000;
		cursor:pointer;		
	} 	
	#info_footer a:hover {  
		text-decoration: none;			
	} 
	#copy{	
	}


	#info_footer_portfolio li{
		display:inline;
		list-style: none;
	}
	#info_footer_portfolio a:link, #footer a:visited {  
		text-decoration: underline;		
		color:#000;
		cursor:pointer;		
	} 	
	#info_footer_portfolio a:hover {  
		text-decoration: none;			
	} 
	#copy{	
	}


/** 12. Bande grise infini ˆ droite 
--------------------------------------------------*/

	#bande_grise_coin_rond{
		position:absolute;
		top:70px;
		left:925px;
		width:20px;
		height:170px;
		background:url('../images/img_design_graphique_droit1.gif') 0 0 no-repeat;
	}
	
	
	#bande_grise{
		position:absolute;
		top:70px;
		left:945px;
		width:100%;
		height:170px;
		background:url('../images/img_design_graphique_droit2.gif') left 0 repeat-x;
	}