/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
#header { width:100%; height:81px; position:fixed; top:0; left:0; z-index:6; background:url(../images/background_header.png) center top no-repeat;}
#toppage { width:24px; height:24px; cursor:pointer; background:url(../images/accueil.png) left top no-repeat; position:fixed; right:4px; bottom:4px; display:none;}
.gris { background-color:#CCC;}

/* NAVIGATION */
.navigation ul { margin-top:9px; }
.navigation li { display:inline; margin-right:4%;  font-family: "BebasNeueRegular", Helvetica, Arial, sans-serif; font-size:18px; color:#FFF; }
.navigation li a { font-family: "BebasNeueRegular", Helvetica, Arial, sans-serif; font-size:18px; color:#FFF; text-decoration:none;}
.navigation li a:hover { color:#464648;}
.navigation img { float:right; margin:3px 4px 0 0;}
a.accueil { width:24px; height:24px; margin:5px 10px 0 0; padding:0; float:left;}

/* ACCUEIL */
.accueil { margin-top:130px;}
.accueil h1 span { font-size:48px;}
.pat { position:relative;}

/* PINS */
.pin-analyse { width:27px; height:24px; position:absolute; top:100px; left:110px; background:url(../images/pin-droite.png) left top no-repeat; z-index:5; cursor:pointer;}	
.pin-ecoute { width:27px; height:24px; position:absolute; top:168px; left:112px; background:url(../images/pin-droite.png) left top no-repeat; z-index:5; cursor:pointer;}
.pin-pression { width:27px; height:24px; position:absolute; top:258px; left:82px; background:url(../images/pin-droite.png) left top no-repeat; z-index:5; cursor:pointer;}
.pin-ergonomie { width:27px; height:24px; position:absolute; top:114px; left:302px; background:url(../images/pin-gauche.png) left top no-repeat; z-index:5; cursor:pointer;}
.pin-conseils { width:27px; height:24px; position:absolute; top:194px; left:292px; background:url(../images/pin-gauche.png) left top no-repeat; z-index:5; cursor:pointer;}
.pin-passion { width:71px; height:68px; position:absolute; top:350px; left:195px; background:url(../images/pin-droite-glow.png) left top no-repeat; z-index:5; cursor:pointer;}
.pin-efficacite { width:71px; height:68px; position:absolute; top:380px; left:335px; background:url(../images/pin-gauche-glow.png) left top no-repeat; z-index:5; cursor:pointer;}
.pin-echeancier { width:71px; height:68px; position:absolute; top:450px; left:65px; background:url(../images/pin-droite-glow.png) left top no-repeat; z-index:5; cursor:pointer;}
.tooltip { display:none; background:#333;  font-family: "BebasNeueRegular", Helvetica, Arial, sans-serif; font-size:18px; color:#FFF;   padding:10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
.tooltip p { margin:0;}

/* FORMULAIRE */
.me-contacter { width:395px; height:100px; margin:-10px auto 0; padding:0; background-color:#fb4d03;}
.me-contacter:hover { background-color:#d94100;}
.me-contacter h3 { color:#fff; font-size:36px; margin:24px 0 0 38px; float:left;}
.me-contacter p { width:100%; clear:both; font-family: "BebasNeueRegular", Helvetica, Arial, sans-serif; font-size:20px; color:#FFF; line-height:22px; margin:0 0 0 38px;}
.me-contacter p span { padding:0 12px 0 12px; float:left;}
.me-contacter p img { margin-top:2px; float:left;}
.me-contacter p a { color:#FFF; text-decoration:none;}
.me-contacter p a:hover { color:#2d180f; text-decoration:underline;}	
.me-formulaire { width:319px; margin:10px auto 0; padding:38px 38px 30px 38px; background-color:#fb4d03; display:none; font-family: "BebasNeueRegular", Helvetica, Arial, sans-serif; font-size:14px; color:#2d180f;}
.me-formulaire label { font-family: "BebasNeueRegular", Helvetica, Arial, sans-serif; font-size:22px; color:#FFF; font-weight:normal;}
.me-formulaire:hover {  background-color:#d94100;}	
.border { border-bottom: 2px dotted #8e8c91;}
#contact-form input, 
#contact-form select, 
#contact-form textarea { width:97%; border: 1px solid #CEE1E8; margin-bottom:20px; padding:4px; }
#contact-form #loading { width:32px; height:32px; background-image:url(../images/loading.gif); display:block; position:absolute; right:130px; bottom:16px; display:none; }
#contact-form #submit-button { font-family: "BebasNeueRegular", Helvetica, Arial, sans-serif; font-size:20px; font-weight:normal;text-transform:uppercase; width: 100px; background-color:#464648; color:#FFF; border:none; display:block; float:right; -moz-border-radius:8px; }
#contact-form #submit-button:hover { background-color: #5d5d5d; }
#contact-form #submit-button:active { position:relative; top:1px; }
#errors { font-weight:normal; border:solid 1px #E58E8E; padding:10px; margin:0px 0 15px 0; display:block; width:93%; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; background:#FFE6E6 url(../images/cancel_48.png) no-repeat right center; display:none; color:#464648; }
#errors li { padding:2px; list-style:none;}
#errors li:before { content: ' - ';}
#errors #info { font-weight:normale; font-size:18px;}
#errors #info:before { content: '';}
#success { font-weight:normal; border:solid 1px #83D186; padding:10px; margin:0px 0 15px 0; display:block; width:93%; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; background:#D3EDD3 url(../images/accepted_48.png) no-repeat right center; display:none;}
#errors.visible, #success.visible { display:block;}
/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required, textarea:required { -moz-box-shadow:none; -webkit-box-shadow:none; -o-box-shadow:none; box-shadow:none;}
/* Normalize placeholder styles */
/* chrome, safari */
::-webkit-input-placeholder { color:#939393; font-style:italic;}
/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {color:#939393; font-style:italic;}
/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text  { color:#939393; font-style:italic;}


/* PLATEFORMES */
.plat-wordpress { width:100%; margin:0 0 20px 0; padding:0; float:left;}
.plat-wordpress .plat-wordpress-gauche { width:147px; margin:15px 0 0 0; padding:10px 0 0 10px 0; float:left;}
.plat-wordpress .plat-wordpress-droit { width:298px; margin:15px 0 0 0; padding:0 0 0 10px; float:left; border-left:4px solid #4098b5;}
.plat-wordpress .plat-wordpress-droit p { margin:0 0 15px 0; padding:0; text-align:justify;}

.plat-magento { width:100%; margin:0 0 20px 0; padding:0; float:left;}
.plat-magento .plat-magento-gauche { width:147px; margin:15px 0 0 0; padding:10px 0 0 10px 0; float:left;}
.plat-magento .plat-magento-droit { width:298px; margin:15px 0 0 0; padding:0 0 0 10px; float:left; border-left:4px solid #f57b20;}
.plat-magento .plat-magento-droit p { margin:0 0 15px 0; padding:0; text-align:justify;}

/* METHODES */
#methodes { width:100%; height:1000px; background: url(../images/background-orange.jpg) 50% 0 no-repeat fixed; margin:0 auto; overflow:hidden;}


/* FOOTER */
#footer { width:100%; height:30px; padding-top:10px;  background-color:#fb4d03;}
#footer p { color:#FFF; font-size:11px; margin:0; }

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		
		}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		/* PINS */
		.pin-analyse { width:27px; height:24px; position:absolute; top:75px; left:85px; background:url(../images/pin-droite.png) left top no-repeat; z-index:5; cursor:pointer;}	
		.pin-ecoute { width:27px; height:24px; position:absolute; top:128px; left:82px; background:url(../images/pin-droite.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-pression { width:27px; height:24px; position:absolute; top:218px; left:42px; background:url(../images/pin-droite.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-ergonomie { width:27px; height:24px; position:absolute; top:80px; left:240px; background:url(../images/pin-gauche.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-conseils { width:27px; height:24px; position:absolute; top:148px; left:232px; background:url(../images/pin-gauche.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-passion { width:71px; height:68px; position:absolute; top:260px; left:160px; background:url(../images/pin-droite-glow.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-efficacite { width:71px; height:68px; position:absolute; top:320px; left:245px; background:url(../images/pin-gauche-glow.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-echeancier { width:71px; height:68px; position:absolute; top:350px; left:40px; background:url(../images/pin-droite-glow.png) left top no-repeat; z-index:5; cursor:pointer;}
		.me-contacter { width:364px; height:100px; margin:-10px auto 0; padding:0; background-color:#fb4d03;}
		.me-contacter p { width:100%; clear:both; font-family: "BebasNeueRegular", Helvetica, Arial, sans-serif; font-size:20px; color:#FFF; line-height:22px; margin:0 0 0 22px;}
		.me-contacter h3 { color:#fff; font-size:36px; margin:24px 0 0 22px; float:left;}
		.me-formulaire { width:319px; margin:10px auto 0; padding:38px 22px 30px 22px; background-color:#fb4d03; display:none; font-family: "BebasNeueRegular", Helvetica, Arial, sans-serif; font-size:14px; color:#2d180f;}
		}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		p { font-size:11px; line-height:18px;}
		#header { background-color:#fb4d03;}
		.navigation { background-color:#fb4d03;}
		.navigation ul { padding:10px;}
		.navigation li { display:block; background:url(../images/background-li-mobile.jpg) left bottom no-repeat; height:33px; padding:10px 0 0 40px; margin:10px 0 10px 0; border-bottom:1px solid #FFF;}
		.navigation li:hover {  display:block; background:url(../images/background-li-mobile.jpg) left bottom no-repeat; height:33px; padding:10px 0 0 40px; }
		.navigation li a { font-family: "BebasNeueRegular", Helvetica, Arial, sans-serif; font-size:20px; float:left; margin-top:3px; color:#FFF; text-decoration:none;}
		.accueil h1 { margin-top:10px;}
		.plat-wordpress .plat-wordpress-droit { width:100%;}
		.plat-wordpress .plat-wordpress-gauche { width:100%; text-align:center;}
		.plat-magento .plat-magento-gauche { width:100%; text-align:center;}
		.plat-magento .plat-magento-droit { width:100%; }
		.pin-analyse { width:27px; height:24px; position:absolute; top:100px; left:100px; background:url(../images/pin-droite.png) left top no-repeat; z-index:5; cursor:pointer;}	
		.pin-ecoute { width:27px; height:24px; position:absolute; top:155px; left:100px; background:url(../images/pin-droite.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-pression { width:27px; height:24px; position:absolute; top:258px; left:82px; background:url(../images/pin-droite.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-ergonomie { width:27px; height:24px; position:absolute; top:114px; left:276px; background:url(../images/pin-gauche.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-conseils { width:27px; height:24px; position:absolute; top:175px; left:262px; background:url(../images/pin-gauche.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-passion { width:71px; height:68px; position:absolute; top:310px; left:175px; background:url(../images/pin-droite-glow.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-efficacite { width:71px; height:68px; position:absolute; top:370px; left:305px; background:url(../images/pin-gauche-glow.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-echeancier { width:71px; height:68px; position:absolute; top:405px; left:60px; background:url(../images/pin-droite-glow.png) left top no-repeat; z-index:5; cursor:pointer;}
		.tooltip p {font-size:16px!important; }
		}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		#header .container { width: 100%; }
		#header .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column {
    width: 100%;
}
		#header { position:relative;}
		 a.accueil { display:none;}
		}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		#header .container { width: 100%; }
		#header .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column {
    width: 100%;
}
		#header { position:relative;}
		a.accueil { display:none;}
		.me-contacter { width:300px; height:100px; margin:-10px auto 0; padding:0; background-color:#fb4d03;}
		.me-contacter p { width:100%; clear:both; font-family: "BebasNeueRegular", Helvetica, Arial, sans-serif; font-size:15px; color:#FFF; line-height:22px; margin:0 0 0 22px;}
		.me-contacter h3 { color:#fff; font-size:36px; margin:24px 0 0 22px; float:left;}
		.me-formulaire { width:290px; margin:10px auto 0; padding:18px 5px 10px 5px; background-color:#fb4d03; display:none; font-family: "BebasNeueRegular", Helvetica, Arial, sans-serif; font-size:14px; color:#2d180f;}
		.pin-analyse { width:27px; height:24px; position:absolute; top:50px; left:65px; background:url(../images/pin-droite.png) left top no-repeat; z-index:5; cursor:pointer;}	
		.pin-ecoute { width:27px; height:24px; position:absolute; top:105px; left:65px; background:url(../images/pin-droite.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-pression { width:27px; height:24px; position:absolute; top:158px; left:52px; background:url(../images/pin-droite.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-ergonomie { width:27px; height:24px; position:absolute; top:54px; left:200px; background:url(../images/pin-gauche.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-conseils { width:27px; height:24px; position:absolute; top:115px; left:198px; background:url(../images/pin-gauche.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-passion { width:71px; height:68px; position:absolute; top:200px; left:115px; background:url(../images/pin-droite-glow.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-efficacite { width:71px; height:68px; position:absolute; top:260px; left:195px; background:url(../images/pin-gauche-glow.png) left top no-repeat; z-index:5; cursor:pointer;}
		.pin-echeancier { width:71px; height:68px; position:absolute; top:281px; left:22px; background:url(../images/pin-droite-glow.png) left top no-repeat; z-index:5; cursor:pointer;}
		}


/* #Font-Face
================================================== */

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/BebasNeue-webfont.eot');
    src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BebasNeue-webfont.woff') format('woff'),
         url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}