/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 03
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */


/* --- COULEURS --- */

/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propriétés background) et les couleurs
   du texte (propriété color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie «positionnement». */

/* Général */


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

}

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

}







body {
	color: #363B29;
	background: #F6F6F4;
	font-size:11px;
	font-family:'HelveticaLTStdRoman', arial, 'sans serif';
}
a {
	color: black;
}
a:hover, a:focus {
	color: #D30050;
}
strong {
	color: #D30050;
}

/* Page */
#global {
	background: #FFF;
}

/* Navigation */
#navigation {
	background: #000000;
}
#navigation a {
	color: #FFF;
}
#navigation a:hover, #navigation a:focus {
	background: #000000;
}

/* Contenu principal */
#contenu {
	color: #363B29;
	
}
#contenu a {
	color: #332510;
}
#contenu a:hover, #contenu a:focus {
	color: #6E5122;
}
#contenu strong {
	color: #181A12;
}

/* Pied de page */
#pied {
	color:#D30050;
}


/**************************/
/* 1 entete 			*/
/* 2 navigation				*/
/* 3 about
/* 4 portfolio			*/







/* --- POSITIONNEMENT --- */

/* Page */
html, body {
	height: 100%; /* Voir -> Note 1 ci-dessous */
}
body {
	padding: 0;
	margin:0;
}
#global {
	min-height: 100%; /* -> 1 */
	width: 900px;
		margin-left: auto;
	margin-right: auto; /* -> 3 */
}

/* En-tête */
#entete {
	height:100px;
}

#entete #mouk { position:relative; z-index:10000; background:url(../media/img/structure/banner/mouk-100.png) no-repeat;}

#entete #mouk a{
	display:block; width:280px; height:100px;
}
#entete .sous-titre {
	margin: 4px 0 15px 0;
}






/* 2      Menu de navigation */
/*        		             */


#navigation {
	height:30px;
	padding: 0px 0px;
}
#navigation ul {
	margin: 0; padding: 0;
	list-style: none;
	
}
#navigation li { display: inline;	padding:0; }
#navigation li a {	font-size: 2em;	letter-spacing:1px;	font-family: 'BebasNeueRegular',Verdana, sans-serif;	text-transform:uppercase;	text-decoration: none;	line-height:30px; padding-right:10px; padding-top:2px; }

#navigation li a span { background:url(../media/img/structure/navigation/fond.png) no-repeat; width:30px; display:inline-block;}
#navigation li a span.un { background-position:0px 0px;}
#navigation li a span.deux { background-position:0px -30px;}
#navigation li a span.trois { background-position:0px -60px;}
#navigation li a span.quatre { background-position:bottom left;}


#navigation li a:hover span.un, #navigation li.active a span.un { background-position:-31px 0px;}
#navigation li a:hover span.deux, #navigation li.active a span.deux { background-position:-30px -30px;}
#navigation li a:hover span.trois, #navigation li.active a span.trois { background-position:-30px -60px;}
#navigation li a:hover span.quatre, #navigation li.active a span.quatre { background-position:-30px -90px;}



/* Contenu */
#contenu {
	padding: 0;
	height:750px;
}
#contenu > :first-child {
	margin: 0;
}
#contenu p, #contenu li {
	line-height: 1.5;
}

/* Pied de page */
#pied {
	padding: 15px 20px;
	font-size: .85em;
	display:table;
	width:860px;
}
#pied p {
	margin: .5em 0;
}



#adresse {
	background:url(../media/img/structure/signature.png) no-repeat;
	text-align: left;
	font-size: 1.2em;
	font-family: 'Ubuntu',Verdana, sans-serif;
	line-height:15px;
	padding-top:20px;
	padding-left:10px;
	display:none;
	
		
}

#adresse span {
		background:url(../media/img/structure/signature.png) no-repeat;width:36px;
		
		height:20px;
		width:60px;
		
	
	}

#copyright {
	display:table-cell;
	text-align: right;
	font-size: 1em;
}





/*************************************/
/*  3  About.html					 */
/*************************************/
#contenuinterior {float:left; width:100%; background:#fff; height:750px;}

#headerabout {background-color:#D30050; display:block;}
#headerabout h1 { display:block; background:url(../media/img/structure/about/mouk-presentation.png) no-repeat; height:100px; width:100%; margin:0; padding-bottom:10px;}

#about, #contact  { width:440px; position:relative;  left:70px; top:30px;}

#about strong { color:#D30050; }

#about p {  font-size:12px; line-height:20px; color:#1A171B;}
#about ul { list-style:none; margin:25px 0 0 0; padding:0; }
#about li { display:inline;  font-size:11px; margin:0 5px 0 0; padding:0;}
#about li a { background:url(../media/img/structure/commun/bouton.png) no-repeat top left; color:white; text-decoration:none; padding:2px 15px 2px 20px;}
#about li a:hover { background-position:bottom left; }

#piedmoukabout { float:right; width:300px; margin-right:20px; margin-top:270px;}

#piedmouk { float:right; width:300px; margin-right:20px; margin-top:360px;}
#piedmouk p {display:block;  width:100%; text-align:right;}

#contenuinterior #pied {float:left; width:100%; margin:0; padding:0; display:table;}
#contenuinterior #pied p { display:table-cell; width:50%; padding:20px;background:url(../media/img/structure/signature.png) no-repeat; background-position:10px 0;}
#contenuinterior #pied p + p { background:none; }


/*************************************/
/* 4 Contact.html					 */
/*************************************/

#headercontact {background-color:#D30050; display:block; }
#headercontact h1 { display:block; background:url(../media/img/structure/contact/mouk-contact.png) no-repeat; height:100px; width:100%; margin:0; padding-bottom:10px;}



#contact label {
    color: white;
    display: block;
    font-size: 12px;
    font-weight: normal;
	background: url(../media/img/structure/contact/label.png) no-repeat;
	padding: 3px 0 0 20px;
	height:17px;
}

#contact label.error { background:none !important; color:#D30050 !important; }


#contact p {margin-bottom:20px;}

#contact input[type="text"], textarea { margin-left:15px; width:420px; color:#333; font-size:12px;}

#contact input[type="text"] { background:#EEE; height:13px; padding:4px; border:1px solid #d1d1d1;}
#contact textarea{  background:#EEE; padding:4px; border:1px solid #d1d1d1; height:130px;}
#contact input[type="submit"] { background:url(../media/img/structure/contact/submit.png) no-repeat; height:20px; width:100px; border:none; color:#333; font-size:12px;}

#contact input[type="submit"]:hover, #contact input[type="submit"]:focus { background:url(../media/img/structure/contact/submit.png) no-repeat; background-position:0px -20px; color:#fff;}

/**************************************/
/* 5,0 Portfolio					  */
/**************************************/

#description { list-style:none;padding:0; display:inline-block; width:225px;  margin:0 !important; float:left;} 
ul#miniature { list-style:none;padding:0;margin:0;}
#miniature li {float:left;} 
#miniature a {display:block; border:none; height:56px;} 
#miniature a:hover, #miniature a:focus {background:#fff; filter:alpha(opacity=40);  /* CSS3 standard */  opacity:0.4;} 
#miniature a.active {background:#000;} 
#viewer { width:675px; height:auto; display:inline-block;} 
#viewer:after { clear:both; } 

#viewer img[src*="loader"] {position:absolute; left:50%; top:50%; margin:-15px 0 0 -15px;}

#description p { padding-left:10px; padding-right:10px;font-family:"HelveticaLTStdRoman",helvetica, arial, "sans serif"; font-size:12px; line-height:18px; word-wrap:break-word; margin:0;}

p#nomprojet { font-family:"HelveticaLTStdRoman",helvetica, arial, "sans serif"; font-size:15px; background-color:black; color:white;line-height:25px;}
p#nomclient { color:black; margin-top:10px;}
p#nomclient span { color:#D30050;}
p#descriptionprojet {  margin-top:10px; margin-bottom:10px;}

#navi { margin:0; padding:0; display:table; width:225px; padding-top:120px;}
#navi p{ display:table-cell; width:75px; padding:0; margin:0; }
#navi p + p { text-align:center; vertical-align:middle;}

#navi p + p + p { text-align:right;}
#navi p a { display:inline-block;}
#navi p a.home { text-decoration:none; font-size:13px;}
#navi p a.home:hover { color:#D30050;}

#navi p a.prev { background:url(../media/img/structure/commun/fleche-prev.png) top left no-repeat; width:20px; height:30px; margin-left:5px;} 
#navi p a.next {background:url(../media/img/structure/commun/fleche-next.png) top left no-repeat; width:20px; height:30px; margin-right:5px;} 

#navi p a.prev:hover, #navi p a.next:hover { background-position:bottom left;}


/**************************************/
/* Version mobile 					  */
/**************************************/

@media screen and (max-width: 480px) {
	body {
	width:auto !important;
	padding:8px;
	}
	#global { width:100%; }
	#entete { width:100%; height:auto; }
	
	#entete img {  max-width:100%; height:auto;} 
	#navigation ul {	margin: 0 ;}
	#navigation li {display:block; border-bottom:1px solid #fff; width:100%;}
	#navigation li a{ width:100%;}
	#pied { padding:0; white-space:pre-wrap; word-wrap:break-work;}
	
	}