/* (c) 2013 - Jean Luc BIELLMANN */

@media all {

	body {
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-size:14px;
		background-image:url("../img/body.png");
		background-attachment: fixed;
		background-color: #fff;
		background-position: center center;
		background-repeat: repeat-y;
		margin:0;
		padding:40px 0 0 0 ;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: Helvetica, sans-serif;
	}

	h1 {
		border-bottom: 3px solid #E8C8C8;
	}

	h3 {
		margin-left:10px;
	}

	h4, h5, h6 {
		margin-left:20px;
	}
		
	a:link, a:active, a:visited, a:hover {
		font-weight:bold;
		text-decoration:none;
		color:rgb(189,58,8);
	}

	img {
		border:0;
	}

	img.icon {
		max-width:32px;
		max-height:32px;
	}

	.photogroup img {
		padding:9px;
		border:1px solid #ccc;
		box-shadow: 0 0 10px #aaa;
		background:white;
		margin-bottom:10px;
	}

	.photogroup div {
		text-align:center;
		margin:10px;
	}

	img.photowithoutmargin {
		padding:9px;
		border:1px solid #ccc;
		box-shadow: 0 0 10px #aaa;
		background:white;
		margin:0;
	}

	body > header {
		position:fixed;
		top:0;
		left:0;
		right:0;
		height:32px;
		z-index:2;
		background-image:url("../img/header.png");
		font-weight:bold;
		line-height:32px;
		color:white;
	}

	body > footer {
		position:relative;
		width:100%;
		margin:50px 0 0;
		background:#ccc;
		overflow:none;
		border:1px solid #bbb;
		box-shadow: 0 0 10px #aaa;

	}

	body > section {
		position:relative;
		max-width:940px;
		margin:20px auto;
		-webkit-box-shadow: 0 0  12px #555;
		-moz-box-shadow: 0 0  12px #555;
		border-radius:10px;
		box-shadow: 0 0  12px #555;
	}

	section > article {
		overflow:auto;
		background:white;
	}

	section > nav {
		margin:0;
		line-height:20px;
		overflow:none;
	}

	nav li {
		line-height:16px;
		font-size:13px;
	}

	nav img {
		display:inline;
		vertical-align:bottom;
		line-height:32px;
		padding:0;
		margin:0;
	}

	#footer {
		position:relative;
		max-width:940px;
		margin:20px auto;
	}

	#footer .col1 {
		float:left;
	}

	#footer .col2 {
		float:right;
	}

	#pagebottom {
		width:100%;
		height:200px;
		background:black;
	}


	#hookM {
		max-width:940px;
		margin:20px auto;
	}

	#hookW, #hookE {
		width:10px;
	}

	#hookW, #hookC,#hookE {
		background:#FFFFFF;
	}

	#hookC {
		padding:30px 40px;
		text-align:justify;
		min-height:300px;
		/* for CSS animations */
		overflow:hidden;
	}

	#hookC p, #hookC li {
		margin-top:6px;
		line-height:18px;
		margin-bottom:6px;
	}

	#hookN, #hookS {
		margin:20px auto;
	}

	#hookN {
		background:#eee;
		position:relative;
	}

	#hookS {
		background:url("../img/hookS.png") repeat-x;
	}

	#qrcode {
		margin:50px;
		padding:20px;
		background:white;
		z-index:+1;
		border:1px solid black;
	}

	.service {
		border-radius:5px;
		margin:5px 10px 0;
		padding:5px 0;
		border-bottom:5px solid transparent;
	}

	.service a {
		display:block;
		padding-left:40px;
	}

	.menu2 {
		margin-right:8%;
	}

	.menu2box {
		float:left;
		height:40px;
		margin-right:10px;
	}

	.menu2 a {
		display:block;
		height:32px;
		line-height:32px;
	}

	.menu2border {
		height:6px;
		border-radius:3px;
	}

	.button2 {
		display:inline-block;
		float:right;
		position:relative;
		vertical-align:middle;
		width:150px;
		height:50px;
		margin-left:20px;
		margin-bottom:20px;
		border:1px solid gray;
		text-align:center;
		box-shadow:2px 2px 10px #ccc;
		border-radius:0 10px 0 10px;
	}

	.button2 div {
		padding:10px;
	}

	.button2:hover {
		border:1px solid #BD3A08;
		box-shadow:2px 2px 10px #999;
	}

	.button1 {
		display:inline-block;
		position:relative;
		vertical-align:middle;
		width:150px;
		height:150px;
		margin-right:20px;
		margin-bottom:20px;
		border:1px solid gray;
		text-align:center;
		box-shadow:2px 2px 10px #ccc;
		border-radius:0 10px 0 10px;
	}

	.button1 div {
		width:150px;
		height:20px;
	}

	.button1 div:first-child {
		display:table-cell;
		vertical-align:middle;
		height:130px;
	}

	.button1 img {
		display:block;
		max-width:120px;
		max-height:120px;
		margin:0 auto;
	}

	.button1:hover {
		border:1px solid #BD3A08;
		box-shadow:2px 2px 10px #999;
	}

	.mini .button1 {
		width:70px;
		height:70px;
		margin-right:10px;
		margin-bottom:10px;
	}

	.mini .button1 img {
		max-width:60px;
		max-height:60px;
/*
		padding-top:5px;
*/
	}

	.mini .button1 div:first-child {
		width:70px;
		height:70px;
	}

	ul.nolist {
		list-style-type:none;
	}

	div.left10 {
		margin-left:10px;
	}

	pre {
		white-space:pre-wrap;
		font-size:10px;
	}

	embed {
		width:100%;
	}

}

@media print {

	header, footer, #hookN, #hookS, .noprint {
		display:none;
	}

	body > article {
		margin:0;
		padding:0;
		width:100%;
	}
}

/* MEDIA QUERIES */

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

	body > header {
		padding: 0 10px;
	}

	body > section {
		margin: 0 10px;
	}
}

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

	body {
		background-image:none;
		background-color:#e7e7e7;
	}

	body > section {
		margin: 0 10px;
	}

	body > nav {
		margin:20px 10px;
	}

	.ariane2, .button1label {
		display:none;
	}

	#hookC {
		padding:10px 20px;
	}

	ul, ul.nolist {
		padding-left:15px;
	}

	.button1 {
		width:70px;
		height:70px;
	}

	.button1 img {
		max-width:60px;
		max-height:60px;
/*
		padding-top:5px;
*/
	}

	.button1 div:first-child {
		width:70px;
		height:70px;
	}

	#footer .col2 {
		float:left;
	}
}

@media screen and (max-width: 400px) {
	#slogan {
		display:none;
	}
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}