/* @import url(http://fonts.googleapis.com/css?family=Terminal+Dosis:400,700); */
@import url(http://fonts.googleapis.com/css?family=Terminal+Dosis:400);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);


html {
	-webkit-font-smoothing: antialiased;
}

body {
	font-family: 'Droid Sans', sans-serif;
	min-height: 300px;
	background: #c8cbb0;
	background: #000;
}

#time { margin-top: -5px; }
#slogan { margin-top: -5px; text-transform: uppercase; display: none; text-align: right; }

a {
	color: #444;
	color: #fff;
}
a:hover {
	text-decoration: none;
}

.bgWrapper {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	/*background: #000 url("../images/bg.jpg") no-repeat;*/
	background-position: 20% 40%;
	
	background: #c8cbb0 url("../images/bg/fond_ecran_wallpaper_serie_02849.jpg") no-repeat;
	/*background: #000 url("../images/bg/forest-wallpapers_20241_2560x1600.jpg") no-repeat;*/
	background: #000 url("../images/bg/natural-spirit.jpg") no-repeat;
	background-position: 20% 60%;
	
}

#infobar {
	/*color: #fff;*/
	color: #444;
	color: #ddd;
	display: table;
	
	position: absolute;
	left: 0;
	right: 0;
	/*top: 50%;*/
	bottom: 20%;
	height: 205px;
	border-spacing: 10px;
}
	#infobar > div {
		/*background: rgb(1,204,255);
		background: rgba(1,204,255,0.2);*/
		background: rgb(255,255,255);
		background: rgba(255,255,255,0.2);
		padding: 20px 20px 0 60px;
		display: table-cell;
		border-collapse: separate;
		vertical-align: top;
	}
	#infobar > div:hover {
		/*background: rgba(1,204,255,0.3);*/
		background: rgba(255,255,255,0.3);
	}
	#infobar > div:hover #time { display: none; }
	#infobar > div:hover #slogan { display: block; }
	
	#infobar .title {
		border-right: 0 none;
		/*border-right: 2px solid rgba(1,204,255,0.4);*/
		border-color: #444;
		border-color: #01ccff;
		border-width: 0;
		border-style: solid;
		border-right-width: 2px;
	}
		#infobar .title span {
			font-family: 'Terminal Dosis', sans-serif;
			font-size: 3em;
		}
		#infobar .title span.p1 { color: #01ccff; }
		#infobar .title span.p2 { }
	
	#infobar .infos {
		width: 100%;
		padding: 20px;
		border-left: 0 none;
		/*border-left: 2px solid rgba(1,204,255,0.4);*/
		border-left: 2px solid #444;
		border-color: #01ccff;
	}
		#infobar .infos .wrapper {
			padding: 0;
			margin: 0; 
			display: table;
			border-collapse: collapse;
			border-spacing: 0;
		}
		#infobar .infos ul {
			margin: 0;
			padding: 0;
			list-style: none;
			display: table-cell;
		}
		#infobar .infos ul.contact { width: 350px; padding-right: 20px; }
		#infobar .infos ul.skills { width: 60%; }
			#infobar .infos ul li { padding: 0; }
			#infobar .infos ul li.name { font-weight: bold; float: left; margin-right: 5px; }
			#infobar .infos ul li.type { margin-left: 5px; }
			#infobar .infos ul li.type::before { content: " - "; }
			#infobar .infos ul li.street { float: left; margin-right: 5px; }
			#infobar .infos ul li.street::after { content: ", "; }
			#infobar .infos ul li.city { float: none; margin-bottom: 10px; }
			#infobar .infos ul li.url { margin-top: 10px; float: left; margin-right: 30px; }
			#infobar .infos ul li.xing { margin-top: 12px; }
			
			#infobar .infos ul li span {
				display: inline-block;
				width: 50px;
				/*color: rgba(1,204,255,0.6);*/
				color: rgb(1,204,255);
				color: #fff;
			}
		#infobar .infos ul.skills li { font-size: 0.8em; display: inline; }
		#infobar .infos ul.skills li::after { content: " - "; }
		#infobar .infos ul.skills li:last-child::after { content: ""; }
			#infobar .infos ul.skills li span { font-weight: bold; color: #444; color: #fff; width: auto; }

@media (max-width: 1024px) {
	#infobar { bottom: 20px; }
	#infobar .infos .wrapper { display: block; }
	#infobar .infos ul { display: block; }
		#infobar .infos ul.skills { margin-top: 20px; width: auto; text-align: justify; }
}

@media (max-width: 830px) {
	#infobar { display: block; position: relative; bottom: auto; }
	#infobar > div { display: block; height: auto; padding: 20px; }
	#infobar .infos { margin-top: 20px; width: auto; }
	#infobar .title { border-right-width: 0; border-left-width: 2px; }
}


/* calendar */
.month {
	position: absolute;
	width: 103px;
	color: #fff;
	font-size: 9px;
}
	.m1, .m5, .m9 { left: 0; }
	.m2, .m6, .m10 { left: 130px; }
	.m3, .m7, .m11 { left: 260px; }
	.m4, .m8, .m12 { left: 390px; }
	
	.m1, .m2, .m3, .m4 { top: 0; border-top: 5px solid #fff; padding-top: 10px; }
	.m5, .m6, .m7, .m8 { top: 135px; }
	.m9, .m10, .m11, .m12 { top: 255px; }
.month > .month { 
	position: relative;
	font-weight: bold;
	text-transform: uppercase;
	padding: 0 0 0 2px;
}
.month .list { position: relative; }
.month .day { 
	position: absolute;
	width: 10px;
	text-align: right;
	padding: 1px 2px 0 2px;
}
.month .currentDay { font-weight: bold; }
	.week0 { top: 0; }
	.week1 { top: 12px; }
	.week2 { top: 24px; }
	.week3 { top: 36px; }
	.week4 { top: 48px; }
	.week5 { top: 60px; }
	
	.mo { left: 0; }
	.di { left: 15px; }
	.mi { left: 30px; }
	.do { left: 45px; }
	.fr { left: 60px; }
	.sa { left: 75px; }
	.so { left: 90px; }