projet-php/css/global.css

*{ margin: 0; padding: 0; }

a{
	/* remove-a default properties */
	text-decoration: none;
	color: inherit;
}



body{
	/* position */
	display: block;
	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	/* background */
	background-color: #e8e8e8;

	/* foreground */
	font-size: 14px;
	font-family: 'Open Sans', 'sans serif';
	color: #000;
}



/* WRAPPER DE LA PAGE */
#WRAPPER{
	/* position */
	display: block;
	position: absolute;
		top: 1em;
		left: calc( 50% - 512px - 1em );
		width: 1024px;
		min-height: 50%;
	margin: 2em;

	/* border */
	border: 1px solid #e2e2e2;
	box-shadow: 0 0 5px #e2e2e2;

	/* background */
	background-color: #fff;
}


/* MENU DE LA PAGE */
#WRAPPER > #MENU{
	/* position */
	display: block;
	position: absolute;
		top: 0;
		left: 0;
		width: 225px;
		height: 100%;

	/* border */
	border-right: 1px solid #e2e2e2; 
	border-bottom: 1px solid #e2e2e2;

	/* background */
	background-color: #fafafa;
}


/* LOGO DANS LE MENU */
#WRAPPER > #MENU > #ICON{
	/* position */
	position: relative;
		width: 100%;
		height: 100px;

	/* background */
	background-color: red;
}

/* LES LIENS DU MENU */
#WRAPPER > #MENU > a{
	/* position */
	display: inline-block;
	position: relative;
		width: calc( 100% - 3em );
	padding-left: 3em;
	padding-bottom: 1px;

	/* background */
	background-color: transparent;

	/* foreground */
	line-height: 2.5em;

	/* extra */
	cursor: pointer;
}

/* :hover / .active */
#WRAPPER > #MENU > a:hover,
#WRAPPER > #MENU > a.active{
	background-color: #efefef !important;
	color: #818181;
}


/* @first/@last */
#WRAPPER > #MENU > a:nth-child(2){ margin-top:    1em; }
#WRAPPER > #MENU > a:last-child{   margin-bottom: 1em; }


/* icones associées aux liens */
#WRAPPER > #MENU > a#consultations{
	background: url(../src/consultation.svg) left 1em center no-repeat;
	background-size: auto 1.5em;
}

#WRAPPER > #MENU > a#doctor{
	background: url(../src/doctor.svg) left 1em center no-repeat;
	background-size: auto 1.5em;
}

#WRAPPER > #MENU > a#dashboard{
	background: url(../src/dashboard.svg) left 1em center no-repeat;
	background-size: auto 1.5em;
}




/*************/
/* CONTAINER */
/*************/
#WRAPPER > #CONTAINER{
	/* position */
	display: block;
	position: absolute;
		top: 0;
		left: 225px;
		width: calc( 100% - 225px );
		height: 100%;
}


/* FIL D'ARIANE */
#WRAPPER > #CONTAINER > #BREADCRUMB{
	/* position */
	display: inline-block;
	position: relative;
	width: calc( 100% - 2*2em - 2*.6em );
	margin: 2em;
	padding: .6em;

	/* background */
	background-color: #eee;

	/* foreground */
	color: #333;
}

#WRAPPER > #CONTAINER > #BREADCRUMB a:hover{
	text-decoration: underline;
}

/* chevrons */
#WRAPPER > #CONTAINER > #BREADCRUMB a:before{
	content: '';
	/* position */
	display: inline-block;
	position: relative;
		width: 1em;
		height: .7em;

	background: url(../src/right-arrow.svg) center center no-repeat;
	background-size: 40% auto;
}

/* premier: maison au lien de chevron */
#WRAPPER > #CONTAINER > #BREADCRUMB a:first-child:before{
	margin-right: 1em;
	height: 1em;
	background-image: url(../src/home.svg);
	background-size: auto 100%;
}



/******************************/
/* ARTICLES (cadres internes) */
/******************************/
#CONTAINER > article[data-title]{
	/* position */
	display: block;
	position: relative;
		width: calc( 100% - 2*2em );
	margin: 2em;

	/* border */
	border: 1px solid #f09108;
}

#CONTAINER > article[data-title]:before{
	content: attr(data-title);
	/* position */
	display: block;
	position: relative;
		margin-top: -2.5em;
		margin-left: -1px;
		width: calc( 100% - .5em - 2em );
	padding: .5em;
	padding-left: 2em;
	
	/* border */
	border: 1px solid #f09108;

	/* background */
	background: #f09108 url(../src/title-gears.svg) left .5em center no-repeat;
	background-size: 1em auto;

	/* foreground */
	color: #fff;
}


/* <SELECT> */
#CONTAINER > article select{
	/* position */
	display: inline-block;
	position: relative;
	margin: 1em;
	padding: .3em;
	padding-right: 2em;

	/* border */
	border: 1px solid #e5e5e5;
	
	/* background */
	background: #f6f4f2 url(../src/down-arrow.svg) right .5em center no-repeat;
	background-size: 1em auto;
	

	/* <select> */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
}