/* FONTS */
@font-face {
	font-family:'Molengo';
	font-style:normal;
	font-weight:normal;
	src:local('Molengo'),
	url('fonts/Molengo.woff') format('woff');
}
@font-face {
	font-family:'Chewy';
	font-style:normal;
	font-weight:normal;
	src:local('Chewy'),
	url('fonts/Chewy.woff') format('woff');
}

/* VARIABLES */
@blue:#4878A8;
@blue2:#104386;
@red:#cc3200;
@black:#000000;
@grey:#7f7f7b;
@body:620px;
@header:620px;

/* CLASS */
.link(@time) {
	-webkit-transition-duration:@time;
	-moz-transition-duration:@time;
	transition-duration:@time;
}
.radius(@radius) {
	border-radius:@radius;
	-webkit-border-radius:@radius;
	-moz-border-radius:@radius;
}

/* STYLES */
body {
	font-family:'Molengo',arial,serif;
	font-size:15px;
	background-image: url("http://www.blog.cjr974.fr/wp-content/themes/CJr974/images/background.png");
	margin:0 auto;
	padding:0 20px;
	zoom:1;
	margin-bottom:18px;
	&:before, &:after {
		display:table;
		content:"";
	}
	&:after{
		clear:both;
	}

	a, a:visited, a:hover {
		cursor:pointer;
		text-decoration:none;
		.link(0.5s);
	}
	.browser_warning {
		background-color: #eedc94;
		background-repeat: repeat-x;
		background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
		background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
		background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
		background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
		background-image: -o-linear-gradient(top, #fceec1, #eedc94);
		background-image: linear-gradient(top, #fceec1, #eedc94);
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
		border-color: #eedc94 #eedc94 #e4c652;
		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		margin-bottom: 18px;
		padding: 7px 14px;
		color: #404040;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
		border-width: 1px;
		border-style: solid;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
		-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	}
	.btn {
		cursor: pointer;
		display: inline-block;
		background-color: #e6e6e6;
		background-repeat: no-repeat;
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
		background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
		background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
		background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
		background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
		background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
		padding: 5px 14px 6px;
		text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
		color: #333;
		font-size: 13px;
		line-height: normal;
		border: 1px solid #ccc;
		border-bottom-color: #bbb;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		-webkit-transition: 0.1s linear all;
		-moz-transition: 0.1s linear all;
		transition: 0.1s linear all;
		&:hover, &.selected {
			background-position: 0 -15px;
			color: #333;
			text-decoration: none;
		}
	}
	#header {
		text-align:center;
		max-width:@header;
		margin:0 auto;
		overflow:hidden;
		padding:0;
		zoom: 1;
		&:before, &:after {
			display: table;
			content: "";
		}
		&:after {
			clear: both;
		}
		a {
			color:@black;
		}
		#menu_logo {
			margin:auto;
			font-family:'Chewy',arial,serif;
			font-size:40px;
			width:170px;
		}
		#nav {
			list-style:none;
			li {
				float:left;
				margin:auto;
				letter-spacing:3px;
				line-height:40px;
				font-weight:bold;
				font-size:20px;
			}
			.menu_accueil {
				min-width:125px;
				max-width:220px;
			}
		}
		#search-form {
			width:100%;
			#searchinput {
				margin:25px auto;
				border:1px solid #ededed;
				width:110px; height:30px;
				font-size:20px;
				border-radius:10px;
				padding:1px 10px 1px 25px;
				background-image:url('http://www.blog.cjr974.fr/wp-content/themes/CJr974/images/glass.png');
				background-repeat:no-repeat;
				background-position:6px 7px;
				background-color:#D8DFEA;
				outline:0;
			}
			.unfocus {
				color:#fff;
			}
			.focus {
				color:#000;
				border-color:#fff;
				box-shadow:1px 1px 25px rgba(0,0,0,0.5);
			}
		}
	}
	footer {
		margin:25px auto;
		max-width:@header;
		height:75px;
		bottom:0;
		position:relative;
		margin:auto;
		text-align:center;
		color:@grey;
		a {
			color:@blue;
		}
		a:hover {
			color:@blue2;
		}
	}
	h1, h2, h3, h4 {
		color:@red;
		margin:0 auto;
		padding:0;
		a {
			color:@red !important;
		}
	}
	h5 {
		color:@black;
		margin:10px auto 0 auto;
	}
	li {
		margin-left:25px;
	}
	img {
		border:0;
		-moz-user-select:none;
		-webkit-user-select:none;
		-webkit-user-drag:none;
	}
	#contenu {
		max-width:@body;
		margin:0 auto;
		color:#000;
		overflow:hidden;
		a {
			color:@blue;
			&:hover {
				color:@blue2;
			}
		}
		#fil {
			margin-bottom:10px;
		}
		.post, #commentaire {
			margin:25px 10px;
			border:1px solid #d9d9d7;
			background-color: #fff;
			-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1), inset 0 0 0 3px #f9f9f9;
			-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1), inset 0 0 0 3px #f9f9f9;
			box-shadow: 0 0 10px 0 rgba(0,0,0,0.1), inset 0 0 0 3px #f9f9f9;
			overflow:hidden;
			.radius(10px);
			.shaddow {
				left:0;
				background:url('http://www.blog.cjr974.fr/wp-content/themes/CJr974/images/login-bg.png') !important;
				position:fixed;
				width:100% !important;
				text-align:center;
				h2 {
					max-width:@body;
				}
				.postmetadata {
					max-width:@body;
					color:#fff !important;
				}
			}
			.title {
				width:92%;
				padding:3%;
				margin:auto;
				z-index:2;
				padding: 0 1px 1px 1px;
			}
			.thumbnail {
				@img: 100%;
				width:@img;
				text-align:center;
				img {
					width:@img;
				}
			}
			.post_content, .comments-box {
				font-size:16px;
				width:92%;
				padding:1% 3% 3% 3%;
				margin:auto;
				color:@grey;
				p {
					margin:0 auto;
				}
			}
			.postmetadata {
				color:#898989;
				font-size:12px;
				margin:0 auto 10px auto;
				#goToTop {
					color:#cc3200;
				}
			}
			#none {
				display: none;
			}
			.redaction {
				width:92%;
				padding:3%;
				margin:35px auto;
				padding:0 5px;
				background-color:#eff2f7;
				border:1px solid #2c2c2c;
				color:#000;
				.radius(5px)
			}
			.twitter {
				position:relative;
				top:2px!important;
				.twitter-follow-button {
					width:70px !important;
				}
			}
			.plus_1 {
				position:relative;
				top:2px!important;
			}
			.facebook {
				position:relative;
				top:-3px!important;
			}
			article {
				width:100%;
				overflow:hidden;
				display:block;
				margin:0;
				img {
					.link(0.5s);
					max-width:95%;
					&:hover {
						box-shadow:1px 1px 15px rgba(0,0,0,0.5);
					}
				}
			}
		}
		.popover {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1000;
			padding: 5px;
			display: none;
		}
		.popover.below .arrow {
			top: 0;
			left: 50%;
			margin-left: -5px;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-bottom: 5px solid #000000;
		}
		.popover .arrow {
			position: absolute;
			width: 0;
			height: 0;
		}
		.popover .inner {
			background: #333;
			background: rgba(0, 0, 0, 0.8);
			padding: 3px;
			overflow: hidden;
			width: 280px;
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;
			-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
			-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
			box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
		}
		.popover .content {
			text-align: center;
			background-color: #f5f5f5;
			padding: 14px;
			-webkit-border-radius: 0 0 3px 3px;
			-moz-border-radius: 0 0 3px 3px;
			border-radius: 0 0 3px 3px;
			-webkit-background-clip: padding-box;
			-moz-background-clip: padding-box;
			background-clip: padding-box;
		}
	}
	#error {
		width:@body;
		margin-top:20px;
		margin:auto;
		img {
			.radius(10px);
			border:10px solid #fff;
		}
	}
	form {
		input[type=submit] {
			width:auto;
			height:30px;
			font-size:20px;
			background-color:@blue;
			color:#fff;
		}
		input[type=text] {
			width:400px;
			height:25px;
			font-size:20px;
		}
		textarea {
			width:400px;
			height:150px;
			font-size:20px;
		}
		.wpcf7-validation-errors {
			display: none !important;
		}
	}
	#twitter {
		width:@body;
		margin:20px auto;
		padding:0;
		#twit-top {
			height:40px;
			padding:10px 0 0 20px;
			background:url('http://www.blog.cjr974.fr/wp-content/themes/CJr974/images/twitter/twit-top.png') no-repeat;
		}
		#twit-middle {
			padding:5px 10px;
			background:url('http://www.blog.cjr974.fr/wp-content/themes/CJr974/images/twitter/twit-middle.png') repeat-y;
		}
		#twit-bottom {
			height:57px;
			padding:0 20px 10px 0;
			background:url('http://www.blog.cjr974.fr/wp-content/themes/CJr974/images/twitter/twit-bottom.png') no-repeat;
			text-align:right;
			.twitter-follow-button {
				width:130px !important;
			}
		}
	}
}