payrejardi_app/app/assets/stylesheets/public/layout.css.scss

body{
	padding:0px;
	background: url('/assets/front/fond.jpg');


}

header#top{
	display:block;


	background: url('/assets/front/top.png') repeat-x;

	img{
		width:120px;
		float:left;
		margin:20px 50px;
	}

}

navigation#first_nav{

	margin-top:50px;
	margin-right:20px;
	float:right;


		a{
		display:inline-block;
		padding:10px;
		color:black;
		}

}

#main, #sidebar{
	margin-top:50px !important;

}
#main{



	header{
		h1{
			margin-bottom:10px;
		}

		h2{
			margin-top:0em;
			margin-bottom:1em;
		}

	}

	img{
		max-width:100%;
	}


	article{
		margin-bottom:3em;
		border-top:2px solid #97bc4a;
		padding-top:1em !important;
		aside{
			img{
				display:none;
			}

			*{
				display:inline;
			}

		}

	}

}

#sidebar{
	padding:0% 2%;


	background:#97bc4a;

	img{
		margin:0.5em 0;
	}


	color:white;

	h3,a{
		color:white;
	}

}

comment{

	message{
	padding:10px;

	}

	author{
	float:left;
	width:200px;
	text-align:center;

		p{
		text-align:center;
		margin:0px;

		}

		.img{
			height:120px;
			width:120px;
			border-radius:50%;
			overflow:hidden;
			display:inline-block;

			img{
				height:120px;
			}

		}

	}

}

.clear{
	clear:both;
}

footer{
	margin-top:100px;


}



@media only screen and (min-width: 0px)  {

	header#top{

		img{
			width:120px;

			margin:20px 5%;
		}

	}

	#main{
		margin:auto;

		max-width:800px;
		width:90%;
	}

	#sidebar{
		margin:auto;
		padding:2% !important;
		max-width:800px;
		width:86%;

		img{
		margin:0.5em 0;
		max-width:98%;
		}

	}


	.img_with_legend{
	position:relative;

		figcaption{
			margin-top:5px;
		}

	}


}


@media only screen and (min-width: 769px) {


	#main{
		margin-left:2%;


		max-width:800px;
		width:69%;
		float:left;

		padding:0px;


		article{
			padding:0px 6%;
		}

	}

	#sidebar{
		float:right;
		width:23%;
			padding-top:0px !important;
		min-height:1000px;

		img{
			max-width:100%;
			margin:0.5em 0;
		}

	}







}


@media only screen and (min-width: 950px) {


	#main{
		margin-left:5%;

		width:64%;



	}
}

@media only screen and (min-width: 1200px) {


	#main{
		margin-left:18%;

		width:53%;


	}

	#sidebar{

		padding-top:0em !important;
	}



	article{
		position:relative;



		aside{

			display:block;
			position:absolute;
			left : -39%;

			top:-2px;
			padding-top:0em;
			line-height:1.6em;
			width:42%;

			text-align:center;


			p{
				margin:0px;
				display:block !important;
			}

			img{
				display:block !important;
				margin:auto;
				border-radius:50%;
			}

			time{
				display:block;

			}

			*{
				text-align:center;

			}

		}

	}


	.img_with_legend{
		position:relative;

		figcaption{
			display:block;
			position:absolute;
			left : -35%;
			width:32%;
			top:10px;

			*{
				text-align:right;

			}

		}

	}



}

#comments{

	.comment{
		margin-bottom:3em;

		aside{

			img{
				float:left;
				margin:auto;
				border-radius:50%;

			}

		}

		blockquote{

			text-align:justify !important;
			border-color : #97bc4a;
			min-height:3em;
			padding-right:0px;

			p{
				text-align:justify !important;

			}

		}

		.header, blockquote{
			margin-left:100px;

		}

		.header{
			font-size: 0.95em;
			line-height:1.6em;

			img{
				display:none;
			}

		}

	}

}


#comment_form{
	background:#e4f1d5;
	background-color:rgba(127,182,55,0.2);
	padding:20px;
	padding-bottom:35px;
	margin:0px 0px 0px 0px;

	h3{
		margin-top:0px;
		text-transform:uppercase;

	}

	input,textarea{
		background:white;
		background-color:rgba(255,255,255,0.8);
		padding:1%;

	}

	textarea{
		line-height:1.6em;

	}

	label{
		display:inline-block;
		min-width:90px;
		padding:5px;

	}

	.submit{
		float:right;
		@include border-radius(10px);
		margin-top:-16px;
		cursor:pointer;

		&:hover{
			background:#97bc4a;
			color:white;

		}
		padding:1% 2%;

	}

}





//iPhone
@media only screen and (max-width: 480px) {




	body{
		font-size:50%;

	}




}

@media only screen and (max-width: 320px) {




	body{
		font-size:75%;

	}




}


@media only screen and (max-width: 600px) {








	header#top{

		text-align:center;
		img{
			float:none;
			display:block;
			margin:auto;



		}


	navigation{
		text-align:center;
		float:none;
		display:block;
		margin-top:10px;


	}



	}



	#comment_form{
		margin:0px !important;
	}

	#comments{

		.comment{

			aside{

				img{
					float:left;
					margin:auto;
					border-radius:50%;
					width:40px;
					height:40px;

				}

			}


			.header, blockquote{
				margin-left:50px;

			}
			blockquote{
							margin-left:10px;

						}



		}

	}



}


footer{
	display:block;
	padding:1em;
	font-size:0.95em;
	line-height:1.4em;
	border-top: #202020 2px solid;
	border-bottom: #97BC4A 12px solid;
	text-align:center;




}



#legals_large{
	background:rgba(250,250,250,0.8);
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	width:100%;
	height:100%;
	display:none;

	.content{
		background:rgba(250,250,250,0.95);
		padding:10px 30px;
		margin:auto;
		width:90%;
		max-width:600px;
		border:1px solid gray;


	}

}