/* 
pour cette css qui devait montrer la structure d'une page html j'ai
choisi de mettre en place tout un systeme de grid pour chacun des elements
la notion de transparence aussi pour affirmer la supperposition des differents
éléments*/
@font-face {
	font-family: 'Gothamthin';
	src: url('../fonts/GothamCond-thin.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: white;
	

	

}
/* reset.css*/

body{
	font-family: 'Gothamthin', serif;
	font-size: 21px;
	color:rgb(0, 0, 204);
	z-index:1;
	position:relative;
	display:block;
	padding: 0px;
	float:left;
	
}

a{
	font-family: 'gotham',sans-serif;
	font-size: 12px;
	color: rgb(0,0,0);
}

a.hover{
	color:rgb(3, 252, 224);
}

img:hover{
	opacity: 0.5;
}



/* navigation fix top*/
.banner{
	background-image:url("../imgs/grid.png");
	position:fixed;
}

.navbar-default{
	display: block;
	position: fixed;
	width: 100%;
	padding-left: 100px.
}
.navbar-header{
	padding-left: 20%;
}

.navbar-form {
	margin-top: 5px;
	margin-left:40px;
	width: 300px;
}

.btn{
	background:rgba(255,255,255,0.8);
	vertical-align: middle;
	padding-top: 12px;
}

.btn.nav{
	margin-top: 10px;
	position: absolute;
	background: none;
}

span.glyphicon{
	position: absolute;
	
}
/* entête image + nav*/

.nav-interne{
	position: relative;
	padding-left: 10%;
}

.wrapcover{
	z-index: 1;
	position: absolute;
}


div.row button{
	position:absolute;
	z-index:2;
}


div.Imgnav{

	z-index: 4;
	background: rgba(255,255,255,0.9);
	background-image: url("../imgs/grid2.png");
	font-family: 'gotham', sans-serif;
	font-size: 21px;
	text-transform: uppercase;	
	

}
.Imgnav.navbar{
	width:100%;
}

img.img-prof{
	width:160px;
	z-index: 10;
	position: absolute;
	border: solid 3px black;
	margin-top: 28%;
	margin-left: 2%;

}


h1.page-header{
	font-family: 'gotham',sans-serif;
	font-size: 24px;
	text-transform: uppercase;
	color: white;
	position: absolute;
	z-index: 4;
	margin:30% 0% 0% 60%;
	
}

.Imgnav.navbar{
	padding-left: 200px;
}

li.navingrid{
	margin:-7px 20px 20px 0px;
	color:black;

}



/* corps principal */
.jumbotron {
	margin:40% 0% 0% 10%;
	position: relative;
	width:100%;
	background: none;
	
}
.jumbotron p {
	font-family: 'Gothamthin',serif;
	font-size: 12px;
	text-transform: none;
}
.left {
	position:relative;
	padding: 25px 21px 25px 0px;
	background-image: url("../imgs/gridbl.png");
}

.right{
	position:relative;
	padding:20px 20px 0px 0px;
	background-image:url("../imgs/gridm.jpg");
}

/*colone left*/

.infor {
	background: rgba(255,255,255,0.9);
	background-image: url("../imgs/grid2.png");
	list-style: none;
	padding: 20px 20px 36px 3px;
	
	
}

ul.info{
	padding-top: 10px;
	list-style: none;
	font-size: 18px;
	line-height: 120%;

}




.amis {
	background: rgba(255,255,255,0.7);
	background-image:url("../imgs/grid.png");
	padding: 5px,5px,5px,15px;
	margin-top: 25px; 

	
}
.photos{
	background-image:url("../imgs/grid3.png");
	padding: 5px 5px 5px 15px;
	margin-top: 25px; 
	border:solid 4px rgb(237, 237, 237);
	
}


h3{
	font-family: 'gotham',sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	color:black;
	font-size: 14px;
	padding-top: 10px;
	padding-left: 20%;
}

ul.ulphoto,
ul.ulphotoamis{

	list-style: none;
	display: inline-block;
	position: relative;
	padding-left:5%;
	padding-bottom: 5%;
	margin: 0px;
}

.liphoto,
.liphotoamis{
	display:inline;
}

img.photoID{
	width:103px;
	height: 103px;
	border: 2px solid #0000cc;
	margin: 0px;
	padding: 0px;
}


/* colone right*/
.exprim{
	margin:0px;
	padding-bottom:20px; 
	background-image:url("../imgs/grid3.png");
}


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

h4{
	font-family: 'gotham', sans-serif;
	font-size: 10px;
	margin: 0px 30px 0px 80px;
	text-transform: uppercase;
}

/* articles*/
.contenuart{
	position: relative;
	display: block;
	margin: 20px 20px 20px 20px;	

}
video{
	width:90%;
}

img.contenuart{
	width:80%;
}

p.continuart{
	font-size: 30px;
}
.photomin{
	width: 75px;
}

.article{
	background: rgba(255,255,255,0.9);
	background-image: url("../imgs/grid2.png");
	position:relative;
	padding: 5px;
	margin-top: 20px;
}

.comment{
	padding:7px;
	margin-bottom: 0px;
	background:rgba(255, 255, 255, 0.7);
	background-image: url("../imgs/gridjaune.png");
	width: 100%;
	border: none;

}
.comment.glyphicon{
	font-size: 20px;
}



.comment button{
	width:20%;
	height: 50px;
	padding-left: 20px;
	background: none;
	border: none;
}

h5{
	margin:0px;
	text-transform: uppercase;

}

.comment ul{
	display: block;
	padding-left: 20%;
	width: 100%
}
.comment li{
	position: relative;
	display: block;
	padding: 0px;
	margin: 0px;
}
.form-group.commentaire{
	width: auto;
}

.commentaire{
	margin:10px 0px 10px 0px;
	width: auto;
}