@charset "UTF-8";

/**
 *    Ideal resolution: 1280 * 960 pixels
 */
html, body {
   height: 100%;
   border: 0px solid transparent;
   font-size: 1em;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   width: 100%;
   background-color:#e2e2e2;
   font-family: Verdana, Arial;
   color: #2f2f2f;
}
.header {
	margin-bottom:20px;
}
.main{
	width: 100%;
}
.mycontent {
    width:630px;
	height:630px;
	margin:auto;
	padding:10px;
	background-color:grey;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 2px 2px 8px 4px rgba(156, 153, 153, 0.75);
	-moz-box-shadow: 2px 2px 8px 4px rgba(156, 153, 153, 0.75);
	-webkit-box-shadow: 2px 2px 8px 4px rgba(156, 153, 153, 0.75);
}
.line1, .line2 {
	width:610px;
}
.square {
	height:300px;
	width:300px;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.hspace10 {
	height:300px;
	width:10px;
	display:table-cell;
}
.vspace10 {
	height:10px;
}
.films {
	background-color:#ff0000; /* rouge */
}
.danse {
	background-color:#009933; /* vert */
}
.musique {
	background-color:#0000ff; /* bleu */
}
.livres {
	background-color:#ffff00; /* jaune */
}
.square .inner-link {
	width:200px;
	margin:auto;
	overflow:auto;
}
.square .inner-link a {
	display:block;
	font-size:1.5em;
	text-decoration:none;
}
.square .inner-link a img {
	max-width:100%;
	height:200px;
}
.footer {
	height:2.5em; /*1.8em;*/
	width:100%;
	padding-top:3px;
	padding-right:2px;
	color:#ffffff;
	font-size:0.8em;
	text-align:right;
	margin-top:20px;
	background-color:#373737;
	border:1px solid #e3e3e3;
	border-radius:4px;
}

@media screen and (max-width:409px) {
	.header {
		margin-bottom:5px;
	}
	.mycontent {
		width:206px;
		height:206px;
		padding:2px;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		box-shadow: 1px 1px 1px 2px rgba(156, 153, 153, 0.75);
		-moz-box-shadow: 1px 1px 4px 2px rgba(156, 153, 153, 0.75);
		-webkit-box-shadow: 1px 1px 4px 2px rgba(156, 153, 153, 0.75);
}
	.line1, .line2 {
		width:202px;
	}
	.square {
		height:100px;
		width:100px;
	}
	.hspace10 {
		height:100px;
		width:2px;
	}
	.vspace10 {
		height:2px;
	}
	.square .inner-link {
		width:70px;
	}
	.square .inner-link a img {
		max-width:100%;
		height:70px;
	}
}
@media screen and (min-width:410px) and (max-width:960px) {
	.header {
		margin-bottom:10px;
	}
	.mycontent {
		width:415px;
		height:415px;
		padding:5px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		box-shadow: 2px 2px 6px 2px rgba(156, 153, 153, 0.75);
		-moz-box-shadow: 2px 2px 6px 2px rgba(156, 153, 153, 0.75);
		-webkit-box-shadow: 2px 2px 6px 2px rgba(156, 153, 153, 0.75);
	}
	.line1, .line2 {
		width:405px;
	}
	.square {
		height:200px;
		width:200px;
	}
	.hspace10 {
		height:200px;
		width:5px;
	}
	.vspace10 {
		height:5px;
	}
	.square .inner-link {
		width:140px;
	}
	.square .inner-link a img {
		max-width:100%;
		height:140px;
	}
}