/* 
::: FOND :::
fond body	:: gris		::	#333
---------------------------------
::: TEXTE :::
texte		:: blanc	::	#fff
---------------------------------
::: MENU & LIENS :::
     		:: orange foncé	| #f60
			:: orange moyen	| #ee7600
			:: orange		| #f90 / #FFA500 / orange
			:: orange clair	| #fC0
-----------------------------
::: DEGRADES :::
top orange	:: clair | #f90
bas orange	:: foncé | #f60
-----------------------------
::: OMBRES :::
text-shadow:#555159 ??
background-color:#2e2e2e ??
 */



html	{width:100%; height:100%;}
	body 	{		 width:100%; height:100%; min-width:100%;    min-height:100%;}
		header  	{width:100%; min-width:768px; max-width: 1024px;}
		#page		{width:100%; min-width:768px; max-width: 1024px; min-height: 650px;}
			.content {width: 77%; height:100%; float: right}
			#sidebar {width: 18%; height:100%; float: left; }
			/* clear */
			.clear {clear: both; height:auto}	

		
    	#chargement {width:100%; min-width:768px;}
		footer		{width:100%; min-width:768px; min-height:23px; height: auto}

/* ::: LAYOUT ::: */
html{overflow-x: hidden}
html, body{ padding:0}
body{ margin:0}

/* Top */
header{  margin:0 auto; padding:35px 0 0}
header h1 {text-align: right; margin: 0 60px 0 0}
/* Page */
#page{  margin: 0 auto !important; padding: 30px 10px 10px; overflow:visible }

/* Content */
.content {width: 77%; height:100%; padding: 4% auto; margin:0 auto; float: right}
.content fieldset {width: 522px; padding: 10px; margin: auto }
.content h2 {margin: 10px 0 0 20px;}
.content h6 {margin: 5px 0 0 10px;}

h3.orange, .p.orange, p.orange3, p.orange4 { width:450px; margin:auto; padding:5px; text-align: center; margin-bottom:5px}
p.orange2, ul.orange2 { width:450px; margin:auto; padding:5px; text-align: left; margin-bottom:5px }
h3.orange { width:600px}
.orange2 li{ margin-left: 1.6em}

/* Sidebar */
#sidebar {position:relative; display:block; width: 18%; padding:0; float: left; margin-left:4%}
#sidebar ul{margin:0; padding:0; list-style:none}
#sidebar li { height: 52px; width: 90%;}	
#sidebar li a { display: block; padding: 6px}
#sidebar li a:active{ position: relative; top:1px; left:1px}

/* chargement */
#chargement { margin: 0 auto; text-align:center}
/* footer */
footer{  border-top: 1px solid #444; color: #999; background: #000; position: fixed; bottom:0; left:0; z-index:100} 
footer p{ text-align: right; padding: 5px 2% 0 0; margin: 0}
footer p span{ padding: 0 5px; margin: 3px 1px; }


/* ::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::: */
/* ::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::: */
/* ::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::: */


/* ::: FONTS FAMILY ::: */
html {font-family: Arial, sans-serif}
h1,h2 {font-family: 'Fontdiner Swanky', cursive}
h3,h4,h5 {font-family: Georgia, "Times New Roman", Times, serif}
textarea, input { font-family: verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;}

/* ::: FONTS SIZE ::: */
html			{font-size: 62.5% !important}
body			{font-size: 1.1em}
h1				{font-size: 3.2em}
h2				{font-size: 3.0em}
h3				{font-size: 2.0em}
h4, .one > .tabs{font-size: 1.8em} /*titre onglets*/
h5				{font-size: 1.6em}
h6				{font-size: 1.4em}
#sidebar li a 	{font-size: 2.6em} /*titre menu */
.accordeon-box 	{font-size: 2.4em} /*titre accordeon*/
.texte-presentation  h2{ font-size: 2.5em }/*titre contenu accordeon*/
.txtform 		{font-size: 1.2em} /*contact*/

/* ::: FONTS COLOR ::: */
html, ul.nav li a {color: #fff} 
a				{color: orange}
header a{color: #fff; text-decoration:none  }
a:hover, .txterror 	{color: #f60}
input,select,textarea{color: black}
.blog li a {color: #f60}
footer			{color: #999} /*gris */
footer p:hover	{color:#fff}
footer a:hover	{color:#fc0}	

/* ::: BACKGROUND ::: */
html{background: #222;}
body {background: #333 url(custom/img/background.jpg) top center no-repeat}
body.error {background:#333}
body.off {background-image: url(custom/img/intro.jpg); background-position: center 30%; background-repeat: no-repeat; background-size: auto}
body.on {background: #333 url(custom/img/background.jpg) top center no-repeat}

.b1{background: url(custom/img/background_1.png) 95% 85% no-repeat; background-origin: padding-box; -webkit-background-origin: padding-box; -moz-background-origin: padding-box; -o-background-origin: padding-box;}
.b2{background: url(custom/img/background_2.png) 95% 85%  no-repeat;}
.b3{background: url(custom/img/background_3.png) 95% 85%  no-repeat;}
fieldset 			{background: #333}
ul, li				{background: transparent}
input,select,textarea{ background-color: #eee}
.orange 	{ background: #F60 /*orange foncé*/}
.orange2 	{ background: #ee7600}
.orange3 	{ background: #F90 /*orange*/}
.orange4	{ background: #FC0}
footer p:active {background: #f60}

footer p#bas_cache { height: 15px }

#help { margin-top: -25px; text-align:center }
.clearleft { clear:left}

/* ::: AUTRES STYLES ::: */
a img{border: none}	
header h1 a{text-decoration: none}
fieldset {border: 2px solid #fff}
#sidebar li a {text-align:center; text-decoration: none; line-height: 30px}
#sidebar .nav li a {border: 1px solid #ccc;}
#sidebar .blog li a {border: 1px solid #fc0}
.tabscontent a, footer a { font-weight:bold}
.b { font-weight:bold}

/******* jQuery AcidTabs *******/
.one {padding:5px 0;}
.one > .tabs{ height: 30px}
.one > .tabs > ul{list-style:none}
.one > .tabs > ul > li{ margin:0 2px 0 0; padding: 4px 5px; display:block; float:left;
	color:#fff;	
	-webkit-user-select: none; -moz-user-select: none; user-select: none}
.one > .tabs > ul > li:hover{ cursor:pointer; color: #333;}
.one > .tabs > ul > li.tabActiveHeader {cursor:pointer;	color: #333}
.one > .tabscontent {padding:10px 10px 15px; margin:0; color:#333;}


/* ::: IMAGES ::: */	
img { margin: 0; padding: 0; max-width: 100%;}
figure { padding: 0}

/* ::: PAGES ::: */	

/* PAGE INDEX */
.social_link{ display:inline-block; background:#f90; margin: 5px 2px 1px; padding:2px 5px; border-radius:5px; text-align:center; vertical-align:baseline; height:60px}
._51mz { width: 80% }

/* PAGE DIAPORAMA */
#diaporama{ margin: auto}
#diaporama .tabscontent { width: 470px; height:auto; margin:auto}
#diaporama .tabpage { width:470px}

figure.diapo { height: 462px; width: 462px; overflow:hidden; margin: 0 auto }
figure.diapo img {}
figure.diapo img.first { display:block; border:1px solid #ee7600; width: 462px; height: 462px; top: 0; left: 0}
/**/
.imgtitle, .imgtitle2, .imgtitle3, .imgtitle4, .imgtitle5{ color:#f90; text-align:center; margin: 5px auto }



/* Page CONTACT */
#contact {}
/* Page LIENS */
#link img {height:15px; width:80px}
#link img.favicon {height:15px; width: 15px}


/******* Jquery Accordeon *******/
#accordeon {width: 550px; margin:0 auto; height:auto}
#accordeon > ul{list-style: none; margin:0; padding:0}
#accordeon > ul > li{float: left; padding: 10px; display: block; margin-right: 5px; background:#fff}
#accordeon > ul > li > a{ display:block; overflow:hidden; height:300px; width:30px; outline:none; cursor:pointer }
#accordeon > ul > li > p {}
#accordeon #current{width:380px;height:305px}
.texte-presentation {margin:0; padding:0; width:320px; display:block; margin-left:60px; color:#000}

#accordeon .orange4{ width:270px; text-align:left }

#accordeon > ul > li .accordeon-box {width: 150px; height:20px; position:relative;top: 80px; left:-65px; color:#ff6600;
	-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg)}

/******* CSS3 *******/

/******* colonnes *******/
.bicolonne {
    column-width: 219px; -moz-column-width: 219px; -webkit-column-width: 219px;	
	column-gap: 15px; -moz-column-gap: 15px; -webkit-column-gap: 15px;
	column-rule: 1px solid #ddccb5;	-moz-column-rule: 1px solid #ddccb5; -webkit-column-rule: 1px solid #ddccb5}

/******* border radius *******/
fieldset, #sidebar li a { border-radius: 20px}
.one > .tabs > ul > li { border-top-left-radius: 8px; border-top-right-radius: 8px}
.one > .tabscontent { border-radius: 10px}
#accordeon > ul > li, .orange, p.orange2, p.orange3, p.orange4, ul.orange2 { border-radius: 6px}
footer p span{ border-radius: 10px}	

/******* ombres *******/
#sidebar li a {text-shadow: #666 0px 1px 1px;	box-shadow: 1px 1px 2px rgba(0,0,0,.5)}
#sidebar li a:active	{box-shadow: 0px 0px 0px rgba(0,0,0,.5)}
.orange, .orange2, .orange3, .orange4	{box-shadow: 1px 1px 2px rgba(0,0,0,.5)}

#accordeon ul li	{box-shadow: 0 1px 2px rgba(0,0,0,.2);}
#accordeon ul li .accordeon-box:hover {text-shadow:#555159 1px 2px 2px;}

/******* dégradés *******/
ul.nav li a, .one > .tabs > ul > li{
	background: #f60;
	background: -webkit-gradient(linear, left top, left bottom, from(#f90), to(#f60));
	background: -moz-linear-gradient(top, #f90 0%, #f60 100%);
	background: -o-linear-gradient(top,	#f90 0%, #f60 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF9900,endColorstr=#FF6600);}

ul.blog li a{
	background: url(custom/img/button_fleche.png) 5% 50% no-repeat  #fff;
	background: url(custom/img/button_fleche.png) 5% 50% no-repeat -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fc0));
	background: url(custom/img/button_fleche.png) 5% 50% no-repeat -moz-linear-gradient(top, #fff 0%, #fc0 100%);
	background: url(custom/img/button_fleche.png) 5% 50% no-repeat -o-linear-gradient(top,	#fff 0%, #fc0 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF,endColorstr=#FFCC00);}

#accordeon ul li{
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E3E3E3', endColorstr='#FCFCFC'); 
	background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#FCFCFC), to(#E3E3E3), color-stop(1,#E8E8E8));
	background: -moz-linear-gradient(19% 75% 90deg,#FCFCFC, #E3E3E3, #E8E8E8 100%);
	background: -o-linear-gradient(19% 75% 90deg,#FCFCFC, #E3E3E3, #E8E8E8 100%)}
	
.one > .tabs > ul > li:hover{
	background: #FFFFFF; /* old browsers */
	background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
	background: -o-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* opera */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */}
.one > .tabs > ul > li.tabActiveHeader{
	background: #FFFFFF; /* old browsers */
	background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
	background: -o-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* opera */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */}
.one > .tabscontent {		
	background: #FFFFFF; /* old browsers */
	background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */}
	
/******* transparence *******/
#sidebar li a {opacity: 0.8}
#sidebar li a:hover {opacity: 1}

fieldset {background-color: rgba(51, 51, 51, 0.5)}
#accordeon > ul > li{ background-color: rgba(255, 255, 255, 0.8) }
#accordeon .orange4{ background-color: rgba(255, 254, 0, 0.5) }


/* ::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::: */
/* ::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::: */
/* ::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::: */

/* ----- si en dessous du mini : 1024 x 768------ */
@media only screen 
and (max-device-width : 768px)
and (max-device-height : 768px)
{
}


/* ----- si en dessous du mini : 1024 x 600------ */
@media only screen 
and (max-device-width : 768px)
and (max-device-height : 600px)
{
header h1{ font-size:18px}
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width :480px) {
/* ----- GENERAL ------ */
header { width:470px; max-width:470px}
header h1{ margin-right:0; text-align:center}
#page{ width: 470px; min-width:470px; max-width: 470px; margin: 0; padding: 30px 0 2px; }
.content { width: 470px; padding: auto;}
fieldset{ width: 440px; max-width:440px; height: auto }
#sidebar { width:auto; float:none; height: 32px; }
#sidebar li { float:left; width: 80px;}
#sidebar li a [title^=Commande freelance de] { display:none; width:auto }
#sidebar li a { border-radius:5px; margin: 0 2px; padding: 2px ; font-size: 1.6em }
footer{ display:none}

/* ----- DIAPORAMA ------ */
fieldset#diaporama{ height: 540px }
p#help {width: 470px; white-space:normal; height: auto}
#diaporama .tabscontent { width: 420px; }
#diaporama .tabpage { width:420px; height:420px}
figure.diapo img{ width: 415px; height: 415px;}
figure.diapo img.first { width: 415px; height: 415px}

}