@CHARSET "UTF-8";
/******************************************************************************
 * Caractéristiques générales
 */
html {
	background-image:url('images/background.jpg');
	background-repeat:repeat;
}
body {
	font-family:"Comic Sans MS",arial;
	font-size:14px;
	color:#521616;
	margin:8px;
}
h1 {
	font-size:18px;
	margin-bottom:0px;
	margin-top:0px;
	text-shadow:1px 0px #555555;
}
div.separator {
	margin-bottom:10px;
	height:3px;
	width:100%;
	background-image:url('images/horizontal-line.png');
	background-repeat:repeat-x;
}
p {
	margin-top:0px;
	margin-bottom:10px;
	text-align:justify;
}
img {
	width:100%;
}
img.right-button {
	width:auto;
	border-radius:8px;
	position:relative;
	float:right;
	right:5px;
	top:-30px;
	cursor:pointer;
}
a {
	color:#802222;
}
a:HOVER {
	color:#bf3434;
}
span.drama {
	font-style:italic;
}
#cornes-video_logo, #symphonie-video_logo, #strip-video_logo, #venise-video_logo, #francebleu-audio_logo {
	width:0%;
}

/* Spécificités petits écrans */
@media(max-width:720px) {
	body {
		font-size:12px;
	}
	h1 {
		font-size:16px;
	}
}

/******************************************************************************
 * Header
 */
div.header {
	background-color:#060606;
	padding-bottom:10px;
}

/******************************************************************************
 * Menu
 */
div.menu {
	background-color:#060606;
	/*color:#802222;ede4d3*/
	color:white;
	font-size:16px;
	text-align:center;
	padding-bottom:10px;
}
div.menuItem {
	cursor:pointer;
	display:inline-block;
	width:30%;
	height:25px;
	margin-left:1.5%;
	margin-right:1.5%;
}
div.menu > div.selected {
	color:#a33331;
	font-weight:bold
}
div.social {
	text-align:right;
	margin-top:5px;
	margin-bottom:15px;
}

/* Spécificités petits écrans */
@media(max-width:720px) {
	div.menu {
		font-size:12px;
	}
}

/******************************************************************************
 * Footer
 */
div.footer {
	font-weight:bold;
	font-size:10px;
	text-align:center;
	margin-bottom:20px;
}
div.footer div.separator {
	margin-bottom:3px;
}

/* Spécificités petits écrans */
@media(max-width:720px) {
	div.footer {
		font-size:8px;
	}
}
	
/******************************************************************************
 * Accueil
 */
div.home-left {
	vertical-align:top;
	display:inline-block;
	width:58%;
	margin-right:2%
}
div.home-right {
	vertical-align:top;
	display:inline-block;	
	width:40%;
	margin-bottom:10px
}
div.home-poster {
	vertical-align:top;
	display:inline-block;
	width:23%;
	margin-left:1%;
	margin-right:1%;
}
div.home-poster img {
	border-radius:5px;
	box-shadow: 1px 1px 4px #521616;
	margin-bottom:10px;
}
div.home-description {
	vertical-align:top;
	display:inline-block;
	width:73%;
	margin-left:2%;
	margin-bottom:10px;
}
#home-photo {
	margin-bottom:10px;
	border-radius:5px;
	box-shadow: 1px 1px 4px #521616;
}
div.home-contact {
	text-align:center;
	box-shadow: 1px 1px 4px #521616;
	background-color:rgba(82,22,22,0.15);
	border-radius:5px;
	padding:8px;
}
div.home-contact p {
	text-align:center
}
div.home-contact p span {
	font-size:18px;
	font-weight:bold
}
div.home-contact img {
	width:105px;
}

/* Spécificités petits écrans */
@media(max-width:720px) {
	div.home-left {
		width:100%;
		margin-right:0%;
	}
	div.home-right {
		width:100%;
	}
	div.home-poster {
		width:21%;
		margin-left:2%;
		margin-right:2%;
	}
	div.home-description {
		width:70%;
		margin-left:4%;
	}
	div.home-contact p span {
		font-size:16px;
	}
}

/******************************************************************************
 * La troupe
 */
div.company-person {
	display:inline-block;
	width:33%;
	margin-bottom:10px;
}
div.company-person-photo {
	vertical-align:middle;
	display:inline-block;
	width:25%;
}
div.company-person-photo img {
	width:90%;
	border-color:white;
	border-width:5px;
	border-style:solid;
	box-shadow: 1px 1px 12px #555;
}
div.company-person-description {
	vertical-align:middle;
	display:inline-block;
	margin-left:5%;
	width:70%;
}
div.company-person-description span {
	font-weight:bold;
}

/* Spécificités petits écrans */
@media(max-width:720px) {
	div.company-person {
		width:50%;
	}
	div.company-person-photo img {
		border-width:3px;
	}
	div.company-person-description {
		margin-left:8%;
		width:67%;
	}
}

/******************************************************************************
 * Spectacles
 */
div.spectacles-element {
	display:inline-block;
	width:50%;
	vertical-align:top;
	margin-bottom:10px
}
div.spectacles-element div.spectacles-drama {
	background-color:rgba(82,22,22,0.15);
	border-radius:5px;
	margin-right:5px;
	margin-left:5px;
	padding:8px;
	padding-bottom:0px;
	cursor:pointer;
}
div.spectacles-element div.spectacles-location {
	margin-left:5px;
	margin-right:5px;
	padding:8px;
}
div.spectacles-poster {
	display:inline-block;
	width:34%;
	vertical-align:middle;
}
div.spectacles-poster img {
	border-radius:5px;
	box-shadow: 1px 1px 4px #521616;
	margin-bottom:10px;
}
div.spectacles-description {
	display:inline-block;
	width:64%;
	text-align:center;	
	vertical-align:middle;
}
div.spectacles-left div.spectacles-description {
	margin-left:2%	
}
div.spectacles-right div.spectacles-description {
	margin-right:2%	
}
div.spectacles-description span {
	font-size:18px;
	font-weight:bold;
} 
div.spectacles-description img {
	height:15px;
	width:119px;
} 
div.spectacles-description p {
	text-align:center;
} 
 
/* Spécificités petits écrans */
@media(max-width:720px) {
	div.spectacles-element {
		width:100%;
	}
	div.spectacles-description span {
		font-size:16px;
	} 
	div.spectacles-description img {
		height:12px;
		width:95px;
	} 
}
 
/******************************************************************************
 * Programmation
 */
div.program-poster {
	display:inline-block;
	width:35%;
	vertical-align:middle;
}
div.program-poster img {
	border-radius:5px;
	box-shadow: 1px 1px 4px #521616;
	margin-bottom:10px;
}
div.program-description {
	display:inline-block;
	width:64%;
	margin-left:1%;
	text-align:center;	
	vertical-align:middle;
}
div.program-description span {
	font-weight:bold;
}
div.program-description p {
	text-align:center;
}
div.program-description p:first-of-type {
	font-weight:bold;
	font-size:16px;
}
div.program-highlight {
	margin-bottom:10px;
}
div.program-highlight div.program-spectacle {
	background-color:rgba(82,22,22,0.15);
	border-radius:5px;
	margin-top:5px;
	padding:8px;
	padding-bottom:0px;
}
div.program-highlight div.program-poster {
	width:25%
}
div.program-highlight div.program-description {
	width:48%;
	margin-right:1%;
}
div.program-left {
	display:inline-block;
	width:49.5%;
	vertical-align:top;
	margin-bottom:10px
}
div.program-right {
	display:inline-block;
	margin-left:1%;
	width:49.5%;
	vertical-align:top;
	margin-bottom:10px;
}

/* Spécificités petits écrans */
@media(max-width:720px) {
	div.program-left {
		width:100%;
	}
	div.program-right {
		width:100%;
		margin-left:0%;
	}
	div.program-description p:first-of-type {
		font-size:14px;
	}
}

/******************************************************************************
 * Photos/Vidéos
 */
div.photos-selection {
	vertical-align:top;
	display:inline-block;
	width:30%;
	margin-right:2%;
}
div.photos-selection span {
	cursor:pointer;
	display:block;
	padding-top:2px;
	padding-bottom:2px;
	border-radius:5px;
	margin-bottom:5px;
	text-align:center;
	width:100%;
	background-color:rgba(82,22,22,0.15);
	border:solid 1px;
	font-weight:bold;
}
div.photos-selection span.selected {
	color:#ede4d3;
	background-color:#521616;
}
div.photos-gallery {
	display:inline-block;
	vertical-align:top;
	width:68%;
}
div.photos-gallery > div {
	margin-bottom:10px;
}

/* Spécificités petits écrans */
@media(max-width:720px) {
	div.photos-selection {
		width:100%;
		margin-right:0%;
	}
	div.photos-gallery {
		width:100%;
	}
}

/******************************************************************************
 * Presse
 */
div.press-poster {
	border-radius:5px;
	box-shadow: 1px 1px 4px #521616;
	background-color:rgba(82,22,22,0.15);
	display:inline-block;
	width:19%;
	margin-left:3%;
	margin-right:3%;
	text-align:center;
	font-weight:bold;
	cursor:pointer;
	padding-top:5px;
	padding-bottom:8px;
	margin-bottom:20px;
}
div.press-poster p {
	text-align:center;
}
div.press-poster img {
	box-shadow: 1px 1px 12px #555;
	width:90%;
}  

/* Spécificités petits écrans */
@media(max-width:720px) {
	div.press-poster {
		width:38%;
		margin-left:6%;
		margin-right:6%;
	}
} 
div.press-zoom {
	display:none;
	width:100%;
	margin-bottom:10px;
} 

/******************************************************************************
 * Spectacle
 */
div.spectacle-poster {
	display:inline-block;
	width:28.3%;
	margin-bottom:10px;
	vertical-align:middle;
}
div.spectacle-poster img {
	border-radius:5px;
	box-shadow: 1px 1px 4px #521616;
}
div.spectacle-video {
	display:inline-block;
	vertical-align:middle;
	width:71.7%;
	margin-bottom:10px;
}
div.spectacle-video > div {
	padding-left:10px;
}
div.spectacle-video > img {
	padding-left:2%;
	width:98%
}

div.spectacle-description {
	box-shadow: 1px 1px 4px #521616;
	background-color:rgba(82,22,22,0.15);
	border-radius:5px;
	padding:8px;
	margin-bottom:10px;
}
div.spectacle-description div.detail {
	display:inline-block;
	width:50%;
	vertical-align:middle;
}
div.spectacle-description div.detail th {
	text-align:left;
	vertical-align:top
}  
div.spectacle-description div.abstract {
	display:inline-block;
	text-align:justify;
	width:50%;
	vertical-align:middle;
} 
div.spectacle-extra {
	margin-bottom:10px;
}
div.spectacle-extra > div {
	text-align:center;
}
div.spectacle-programmation p {
	text-align:left;
	padding-left:5px;
	margin-top:0px;	
}
div.spectacle-programmation span {
	font-weight:bold;
}

/* Spécificités tailles écrans */
@media(min-width:1125px) {
	div.spectacle-extra {
		display:inline-block;
		vertical-align:top;
		width:49.5%;
	}
	div.spectacle-programmation {
		display:inline-block;
		vertical-align:top;
		width:49.5%;
		margin-left:1%;
	}
}
@media(min-width:721px) {
	div.spectacle-extra img {
	margin-top:10px;
	width:initial;
	}
}
@media(max-width:720px) {
	div.spectacle-poster {
		width:100%;
	}
	div.spectacle-video {
		width:100%;
	}
	div.spectacle-video > div {
		padding-left:0px;
	}
	div.spectacle-description div.detail {
		width:100%;
	}
	div.spectacle-description div.abstract {
		width:100%;
	}
}