/* feuille css déstinée a perturber la hierarchie 
et donc a lire les informations dans le désordre + pour accentuer
la pertubtaion j'ai utilisé des rotations pour vraiment "désorganiser"
la page 
Pour les couleurs j'ai utiliser les codes rgb des couleurs (par habitude) */



/* import des fonts utilisés */
@font-face {
	font-family: 'didot';
	src: url('../fonts/DidotLTStd-Bold.otf')
}
@font-face {
	font-family: 'gotham';
	src: url('../fonts/Gotham-Black.otf')
}
@font-face {
	font-family: 'gothamital';
	src: url('../fonts/Gotham-BlackItalic.otf')
}



/*global css*/

html, body{
	margin:0;
	padding: 0;
	background: rgb(239, 246, 246);
	
}

body{
	
	z-index:1;
	position:relative;
	display:block;
	padding:100px,0px,0px,100px;
	
}

p{
	font-family: 'didot', serif;
	font-size: 45px;
	color:rgb(51, 51, 255);
	transform:rotate(180deg);


}

a{
	color: black;
	font-size: 15px;
	transform:rotate(180deg);
}

li{
	color:rgb(51, 51, 255); 
}

a:hover{
	color:rgb(103, 113, 113);
	font-size: 10px;
}

.container{
	z-index:0;
	position:fixed;
}

.img{
	opacity:0.3;
}



/* navigation fix top*/
.banner{
	background:rgba(171, 171, 213,0.7);
}

.navbar-default{
	display: inline;
	width: 100%;
	padding-left: 20%;
}

.form-group {
	margin:15px,0px,0px,40px;
	width: 200px;

}

.btn{
	background: none;
	vertical-align: middle;
	padding-top: 12px;
}
.btn:hover{
	background: white;
}

.btn.nav{
	margin-top: 15px;
	position: absolute;
}

span.glyphicon{
	position: absolute;
	font-size: 30px;
	color:rgb(51, 51, 255);	
}


/* entête image + nav = cover */
.nav-interne{
	position:relative;
	padding-left: 30%;
}
.cover{
	transform:rotate(7deg);
	position: relative;
}

.wrapcover{
	z-index: 6;
	margin-top: -170px;
}

img.img-prof{
	width:90px;
	z-index: 4;
	position: absolute;
	border: solid 3px rgb(51, 51, 255);
	margin:-70px,0px,0px,-30px;


}

h1.page-header{
	font-family: 'gotham',sans-serif;
	font-size: 10px;
	position: absolute;
	z-index: 7;
	margin:200px,0px,0px,210px;
	
}

.nav-tabs{

	border-bottom-style: solid;
	border-width: 4px;
	border-color: rgb(51, 51, 102);
}	


li.navingrid{
	margin:0px,20px,0px,20px;
	font-size: 10px;
	
}


div.Imgnav{
	position: absolute;
	z-index: 4;
	padding-left: 200px;
	width:797px;
	background: rgb(239, 246, 246);
	
	transform:rotate(7deg);

}
/* corps principal */
.jumbotron {
	position: relative;
	background: none;
	padding-top: 580px;
	padding-left: 10%;
	transform:rotate(-2deg);
}
.jumbotron p {
	font-family: 'didot',serif;
	font-size: 10px;
	text-transform: none;
}
.left {
	position:relative;
	padding-left: 20px;
}

.right{
	position:relative;
	padding-right: 20px;
	transform:rotate(180deg);
}

/*colone left*/



ul.info{
	padding: 5px;
	font-size: 13px;	
	background:rgba(171, 171, 213,0.7);

}


.photos,
.amis {
	background: white;
	padding: 5px;
	margin-top: 15px; 
	border-style: solid;
	border-width: 4px;
	border-color: rgb(51, 51, 255);
}


h3{
	color:black;
	font-family: 'didot' serif;
	text-transform: uppercase;
	font-size: 50px;
	letter-spacing: -20px;

	
}

img.photoID{
	width:50px;
	margin: 6px;
}
img.photoID:hover{
	opacity: 0.2;
	width: 80px;
}


/* colone right*/
.exprim{
	margin:0px;
	background:rgb(237, 237, 237);
}

img.photomin{
	width:100px;
	margin-left: -64px;
	margin-top: -34px
}


.form-group.exprime{
	width:auto;
	margin-left: 10px;
	padding:10px,0px,10px,0px;
	
}

h4{
	font-family: 'gotham', sans-serif;
	font-size: 6px;
	text-transform: uppercase;
}

.contenuart{
	padding-left: 60px;
}

.article{
	position:relative;
	background:rgba(171, 171, 213,0.7);
	padding: 5px;
	margin-top: 20px;
}


.form-group.commentaire{
	width:auto;
}
.imgarticle{
	width:300px;
}
.comment{
	padding:7px;
	margin-bottom: 0px;
	background:rgb(237, 237, 237);
	border: none;
	vertical-align: middle;
}

.commentaire{
	width: 200px;
}