/* 
	- RadioElectroLyon | V.3.0 | layout.css -
	
	 ______   ______     ______
	/\  ___\ /\  ___\   /\  ___\
	\ \  __\ \ \  __\   \ \  __\
	 \ \_\    \ \_____\  \ \_\
	  \/_/     \/_____/   \/_/
	
*/

/*--------------------------------------------------*/
/*---------------------- Divers --------------------*/
/*--------------------------------------------------*/

*
{
	margin: 0px;
	padding: 0;
	border: none;
}

*:focus {outline: none;}

body, html
{
	height: 100%;
	background-color: #252525;
	background-image: url(../images/backgroundDark.png);
	background-attachment: fixed;
	font-family: Helvetica;
}

li {list-style-position: inside;}

/*--------------------------------------------------*/
/*---------------------- Header --------------------*/
/*--------------------------------------------------*/

#mainContainer
{
	position: relative;
	min-height: 100%;
	width: 100%;
}

#containerHeader
{
	position: fixed;
	width: 100%;
	height: 40px;
	background-color: rgba(0,0,0,0.75);
	z-index: 3;
}

/*--------------------------------------------------*/
/*---------------------- Menu ----------------------*/
/*--------------------------------------------------*/

#menu
{
	width: 800px;
	height: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	list-style: none;
	background-image: url(../images/backgroundMenu.png);
}

#menu li
{
	display: inline-block;
	margin: 0px;
	padding: 0px;
	width: 156px;
	height: 20px;
}

#menu a
{
	display: block;
	width: 156px;
	height: 20px;
	background-image: url(../images/menu.png);
	opacity: 0.5;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#menu #home {background-position: 0px 0px;}
#menu #news {background-position: 0px -20px;}
#menu #events {background-position: 0px -40px;}
#menu #interviews {background-position: 0px -60px;}
#menu #mixtapes {background-position: 0px -80px;}

#menu a:hover {opacity: 1.0;}

/*------------------- Categories -------------------*/

#menuCategories
{
	position: fixed;
	top: 40px;
	left: 40px;
	margin: 0px;
	padding: 0px;
	width: 160px;
	list-style: none;
}

#menuCategories li
{
	display: none;
	padding: 5px;
	padding-left: 10px;
	width: 150px;
	height: 15px;
	background-color: rgba(0,0,0,0.50);
	-webkit-transition: background 0.5s ease-in-out;
	-moz-transition: background 0.5s ease-in-out;
	-o-transition: background 0.5s ease-in-out;
	transition: background 0.5s ease-in-out;
}

#menuCategories li:hover {background-color: rgba(0,0,0,0.75);}

#menuCategories li:first-child {padding-top: 10px;}
#menuCategories li:last-child {padding-bottom: 10px;}

#menuCategories a
{
	display: block;
	width: 160px;
	height: 15px;
	background-image: url(../images/categoriesMenu.png);
	background-repeat: no-repeat;
	opacity: 0.5;
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}

#menuCategories a:hover {opacity: 1.0;}

#menuCategories .album {background-position: 0px 0px;}
#menuCategories .compilation {background-position: 0px -15px;}
#menuCategories .ep {background-position: 0px -30px;}
#menuCategories .single {background-position: 0px -45px;}
#menuCategories .remix {background-position: 0px -60px;}
#menuCategories .clip {background-position: 0px -75px;}
#menuCategories .review {background-position: 0px -90px;}
#menuCategories .report {background-position: 0px -105px;}
#menuCategories .evenement {background-position: 0px -120px;}
#menuCategories .playlist {background-position: 0px -135px;}
#menuCategories .news {background-position: 0px -150px;}
#menuCategories .partenariat {background-position: 0px -165px;}
#menuCategories .mixtape {background-position: 0px -180px;}
#menuCategories .rdf {background-position: 0px -195px;}
#menuCategories .tscml {background-position: 0px -210px;}

/*--------------------------------------------------*/
/*--------------------- Content --------------------*/
/*--------------------------------------------------*/

#content
{
	width: 825px; /* 800+25 */
	margin-left: auto;
	margin-right: auto;
	padding-top: 80px;
	padding-bottom: 60px;
	overflow: hidden;
	z-index: 2;
}

/*--------------------------------------------------*/
/*--------------------- Grid Mode ------------------*/
/*--------------------------------------------------*/

#containerGridMode
{
	position: absolute;
	width: 20px;
	height: 20px;
	left: 10px;
	margin-top: 10px;
	background-color: transparent;
	background-image: url(../images/backgroundGridMode.png);
	background-position:0% 0%;
	opacity: 0.75;
	cursor: pointer;
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}

#containerGridMode:hover {opacity: 1;}

/*--------------------------------------------------*/
/*--------------------- Tags Mode ------------------*/
/*--------------------------------------------------*/

#containerTagsMode
{
	position: absolute;
	width: 20px;
	height: 20px;
	left: 40px;
	margin-top: 10px;
	background-color: transparent;
	background-image: url(../images/backgroundTagsMode.png);
	background-position:0% 0%;
	opacity: 0.75;
	cursor: pointer;
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}

#containerTagsMode:hover {opacity: 1;}

/*--------------------------------------------------*/
/*---------------------- Search --------------------*/
/*--------------------------------------------------*/

#containerSearchForm
{
	position: absolute;
	width: 50px; /* 0px */
	height: 20px;
	right: 10px;
	margin-top: 10px;
	padding-left: 25px;
	background-image: url(../images/backgroundSearchForm.png);
	background-repeat: no-repeat;
	overflow: hidden;
}

#containerSearchForm input
{
	width: 40px;
	height: 15px;
	color: #ffffff;
	text-align: right;
	background-color: transparent;
}

/*--------------------------------------------------*/
/*----------------------- Links --------------------*/
/*--------------------------------------------------*/

#containerLinks
{
	position: absolute;
	height: 25px;
	right: 5px; /* 10-5 */
	margin-top: 10px;
}

#containerLinks a
{
	display: block;
	float: left;
	margin-right: 5px;
	width: 20px;
	height: 20px;
	background-image: url(../images/links.png);
	opacity: 0.75;
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}

#containerLinks a:hover{opacity: 1;}

#containerLinks #facebook {background-position: 0px 0px;}
#containerLinks #twitter {background-position: 0px -20px;}
#containerLinks #youtube {background-position: 0px -40px;}
#containerLinks #soundcloud {background-position: 0px -60px;}
#containerLinks #mixcloud {background-position: 0px -80px;}

/*--------------------------------------------------*/
/*---------------------- Footer --------------------*/
/*--------------------------------------------------*/

#containerFooter
{
	display: block;
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 40px;
	background-color: rgba(0,0,0,0.75);
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	z-index: 3;
	
}

#footer
{
	width: 825px;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
	font-size: 12px;
	line-height: 14px;
	color: #999999;
	text-align: justify;
	background-image: url(../images/backgroundFooter.png);
	background-repeat: no-repeat;
	background-position: 0px 10px;
}

.elementFooter
{
	float: left;
	width: 180px;
	height: 150px;
	margin: 40px 12.5px 0px 12.5px;
}

#welike a
{
	display: block;
	padding: 5px;
	color: #999999;
	outline: none;
	text-decoration: none;
	border-bottom: 1px dashed #bababa;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#welike a:last-child {border: none;}

#welike a:hover {padding-left: 10px; color: #bababa;}

#usualstuffs p
{
	line-height: 16px;
	margin-bottom: 10px;
}

#usualstuffs a
{
	margin-bottom: 10px;
	color: #cccccc;
	text-decoration: none;
	border-bottom: 1px solid #cccccc;
}

#usualstuffs a:hover {border-bottom: 1px dashed #cccccc;}

#networks a
{
	display: block;
	margin-bottom: 5px;
	padding-left: 10px;
	color: #999999;
	font-weight: bold;
	outline: none;
	text-decoration: none;
	background-image: url(../images/arrowLink.png);
	background-repeat: no-repeat;
	background-position: 0px 3px;
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;
}

#networks a:hover {background-position: 3px 3px;}

/*--------------------------------------------------*/
/*-------------------- Navigation ------------------*/
/*--------------------------------------------------*/

.next, .previous
{ 
	position: fixed;
	top: 50%;
	width: 25px;
	height: 75px;
	background-color: rgba(0,0,0,0.75);;
	background-image: url(../images/navigation.png);
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	transition: background 0.2s ease-in-out;
}

.previous
{
	left: 0px;
	background-position-x: 0px;
}

.previous:hover {background-position-x: -3px;}

.next
{
	right: 0px;
	background-position-x: 25px;
}

.next:hover {background-position-x: 28px;}

/*--------------------------------------------------*/
/*----------------------- 404 ----------------------*/
/*--------------------------------------------------*/

#slogan
{
	position: absolute;
	width : 800px;
	height: 40px;
	top: 50%;
	left: 50%;
	margin-left: -400px;
	margin-right: 400px;
	margin-top: -20px;
	margin-bottom: 20px;
	font-family: Helvetica;
	font-weight: bold;
	font-size: 30px;
	text-align: center;
	text-shadow: 0px 0px 10px #000000;
	color: #cccccc;
}

/*--------------------------------------------------*/
/*---------------------- Divers --------------------*/
/*--------------------------------------------------*/

.article blockquote,
.interview blockquote,
.previewEventblockquote, 
.page blockquote
{
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
	border-left: 5px solid #bababa;
	background-color: #cccccc;
}

.article ol,
.interview ol,
.previewEvent ol,
.page ol
{
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
	border-left: 5px solid #bababa;
	background-color: #cccccc;
}

.article ol li,
.interview ol li,
.previewEvent ol li,
.page ol li
{
	list-style-type: decimal-leading-zero;
}

.article .content img,
.interview .content img,
.previewEvent img,
.page img
{
	margin: 15px 0px 15px 0px;
	-webkit-box-shadow: 0px 0px 5px 0px #000000;
	-moz-box-shadow: 0px 0px 5px 0px #000000;
	box-shadow: 0px 0px 5px 0px #000000;
}
.article .content iframe,
.interview .content iframe,
.previewEvent iframe,
.page iframe
{
	margin: 15px 0px 15px 0px;
	-webkit-box-shadow: 0px 0px 5px 0px #000000;
	-moz-box-shadow: 0px 0px 5px 0px #000000;
	box-shadow: 0px 0px 5px 0px #000000;
}

.previewEvent img{margin-left: -5px;}

/*--------------------------------------------------*/
/*----------------------- Liens --------------------*/
/*--------------------------------------------------*/

.article a,
.interview a,
.previewEvent a,
.page a
{
	padding-left: 3px;
	padding-right: 3px;
	color: #666666;
	background-color: #cccccc;
	text-decoration: none;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.content .radioelectrolyon
{
	padding-left: 12px;
	background-image: url(../images/arrowLink.png);
	background-repeat: no-repeat;
	background-position: 5px 4px;
}

.content .facebook
{
	color: #dadada;
	background-color: #3b5999;
}

.content .twitter
{
	color: #dadada;
	background-color: #4ed3ff;
}

.content .myspace
{
	color: #dadada;
	background-color: #003399;
}

.content .soundcloud
{
	color: #dadada;
	background-color: #f8430e;
}

.content .officialfm
{
	color: #dadada;
	background-color: #29b00b;
}

.content .mixcloud
{
	color: #dadada;
	background-color: #63d8e1;
}

.content .youtube
{
	color: #dadada;
	background-color: #ed3e3e;
}

.content .vimeo
{
	color: #dadada;
	background-color: #9fc54e;
}

.content .dailymotion
{
	color: #dadada;
	background-color: #065e87;
}

.content .digitick
{
	color: #dadada;
	background-color: #EF60A3;
}

.content a:hover
{
	color: #666666;
	background-color: transparent;
}

.like a
{
	background-color: transparent;
}

/*--------------------------------------------------*/
/*------------------- Séparateurs ------------------*/
/*--------------------------------------------------*/

.article .solidSeparator,
.interview .solidSeparator,
.event .solidSeparator,
.previewEvent .solidSeparator,
.page .solidSeparator
{
	width: 100%;
	height: 1px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px solid #bababa;
}

.article .dashedSeparator,
.interview .dashedSeparator,
.event .dashedSeparator,
.previewEvent .dashedSeparator,
.page .dashedSeparator
{
	width: 100%;
	height: 1px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px dashed #bababa;
}

.article .dottedSeparator,
.interview .dottedSeparator,
.event .dottedSeparator,
.previewEvent .dottedSeparator,
.page .dottedSeparator
{
	width: 100%;
	height: 1px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px dotted #bababa;
}

/*--------------------------------------------------*/
/*------------------ Hidden Content ----------------*/
/*--------------------------------------------------*/

.article .hiddenContent,
.interview .hiddenContent,
.event .hiddenContent,
.previewEvent .hiddenContent,
.page .hiddenContent
{
	padding: 5px;
	cursor: pointer;
	background-color: #cccccc;
	background-image: url(../images/arrowHiddenContent.png);
	background-position: 465px 12.5px;
	background-repeat: no-repeat;
}

.article .toHide,
.interview .toHide,
.event .toHide,
.previewEvent .toHide,
.page .toHide
{
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px dashed #bababa;
}