@charset "UTF-8";
/*-------------- Base CSS------------------------
inspiré par :
http://www.knacss.com/
http://rocssti.nicolas-hoffmann.net

Summary:

1. reset
2. typographie
3. layout
4. header
	4.1 navigation
	4.2 utilLink
5. sprite
6. content
	6.1 form
	6.2 section
7. footer
8. other

/*

/*---------------------1.RESET------------------------*/
/* reset minimum */
html, body, blockquote, ul, ol, form { margin: 0; padding: 0;}
p { margin: 0 0 1em; }
ul,
ol { 
	list-style: none;
}

a:link img,
a:visited img {
  border: 0;
}

/* fontSizeBase:10px; */
html { font-size: 62.5%; }
body {
  background: #fff;
  color: #333;
  font-family: arial, sans-serif, verdana;
  font-size: 1.4em; /* 14px */
  line-height: 150%; 
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Word-Wrap */
textarea,
table,
td,
th,
code,
pre,
samp,
div,
p {
  word-wrap: break-word;
  -webkit-hyphens: auto;²
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
/* avoid overspending */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input {
  max-width: 100%;
  height: auto;
}
/*----------------2.TYPOGRAPHIE------------------*/

/*
Not-ie7
h1:before{
	background: url("../images/sprite.png") no-repeat scroll -81px 0px
		transparent;
	content: "";
	padding-left: 25px;
  	vertical-align: baseline;
}
*/

h1{
	font-size: 1.4em;
	font-weight: normal;
	margin-bottom: 20px;
	padding-top:5px;
}
h2 {
	font-size: 1.1em;
	color: #fff;
}
p {
	color: #fff;
	text-align: justify;
}
a {
	color: #aaa;
	text-decoration: none;
	-moz-transition: color 0.5s;
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
}
a:hover {
	text-decoration: underline;
}
strong{
	font-weight: bold;
}
/*----------------------3.LAYOUT---------------------*/
/*layout Tool*/
.left {
  float: left;
}
.right {
  float: right;
}
.center{
  margin-left: auto;
  margin-right: auto;
}
.hidden { 
	display: none; 
}
.clear {
    clear: both;
}

.w10 { width: 10%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w33 { width: 33.333%; }
.w40 { width: 40%; }
.w45 { width: 45%; }
.w49 { width: 49%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w66 { width: 66.666%; }
.w70 { width: 70%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }

/* margins */
.m1  { margin: 1em;}
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.ml1 { margin-left: 1em; }
.ml2 { margin-left: 2em; }

/* paddings */
.p1   { padding: 1em;}
.pt1 { padding-top: 1em; }
.pt2 { padding-top: 2em; }
.pr1 { padding-right: 1em; }
.pr2 { padding-right: 2em; }
.pb1 { padding-bottom: 1em; }
.pb2 { padding-bottom: 2em; }
.pl1 { padding-left: 1em; }
.pl2 { padding-left: 2em; }

.wrapper{
    margin: auto;
    position: relative;
    width: 980px;
}
.useLink{
	position: absolute;
	right:10px;
	top:5px;
}
.navLinks{
	display:inline;
}
.useLink a{margin-right: 14px;display:block; float: left;  }
.section{
	padding: 1em;
}
body{
	background: #000;
	color:#fff;
	min-height: 100%;
}
.content{
	margin-left:380px; 
	margin-right: 50px;
}
section{
	margin-bottom: 50px;
}
.article-info p{
	margin-top: 0;
}
/*----------------GRAPHIC CHARTER----------------*/

h1{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 5em;
	margin-top:20px;
	margin-bottom: 45px;
	line-height: 60px;
	color:#1B1B1B;
}
h2{
	text-transform: uppercase;
	font-size: 1.9em;
	margin-bottom: 3px;
	color: #AAA;
	line-height: 27px;
}
h3{
	margin-top: 20px;
	margin-bottom: 2px;
	font-size: 1.5em;	
	color:#fff;
}
.article{
	margin-bottom: 15px;
	border-bottom: 1px solid #666;
}
.article-content{
	color:#ccc;
	padding:5px 0 10px 0;
}
/*--------------------4.HEADER---------------------*/
header{
	position: fixed;

}
/*4.1navigation*/
.mainNav{
	font-family: times new roman;
	font-size: 1.5em;
	line-height: 25px;
    margin-top: 55px;
}
.mainNav a{
	text-transform: uppercase;
	
	/*font-weight: bold;*/
	color:#aaa;
}
.mainNav a:hover{
	color:#333;
	text-decoration: none;
	
}
.mainNav li a.active {
	color:#333;
}
/*4.2- utilLink*/
.ancre{
	font-size: 0.8em;
    margin-left: 246px;
    position: fixed;
    text-align: right;
    text-transform: uppercase;
    top: 250px;
}
.ancre li{
	padding-right:0.8em;
	padding-bottom:7px; 
}
.ancre a{
	color:#000;
	height: 27px;
	display: block;
	transition:all 0.5s;

}
.ancre a:hover{
	text-decoration: none;
	color:#fff;
}
.ancreName{
	background-color: #101010;
	color: #999;
	font-size: 1.2em;
	display: block;
	width:100%;
	font-weight: bold;
	border-top:3px solid #666;
	border-bottom:3px solid #666;
	padding:10px 0 10px 5px ; 
}
/*-------------------5.SPRITE----------------------*/
.sprite{
	background: url("img/sprite.png") no-repeat scroll 0 0 transparent;
   	background: url("img/sprite.png") no-repeat scroll 0 0 transparent;
    display: block;
    float: right;
    height: 27px;
    vertical-align: 17px;
    width: 27px;
}
.title{
	vertical-align: -3px;
	padding-right: 5px;
}
.cd{
	background-position: 0px -27px; 
}
.tape{
	background-position: 0px -54px; 
}
.dvd{
	background-position: 0px -81px; 
}
.merch{
	background-position: 0px -108px; 
}
.zine{
	background-position: 0px -135px; 
}
.other{
	background-position: 0px -162px; 
}
/*vertical sprite method*/
.h1chip{
	background-position: 0px 3px;
	padding-left: 26px;
	vertical-align: 10px;
}
/*horizontal sprite method : supported ie6*/
.help{
	background-position: -191px 0;
	display: block;
	float: left;
	height: 25px;
	width: 25px;	
}
.logout{
	background-position: -40px 0;
	display: block;
	float: left;
	height:25px;
	width:25px;
}

/*-------------------6.CONTENT---------------------*/

/*6.1FORM*/
fieldset{
	border: none;
}
fieldset p{
	margin: 0;
}
fieldset input, textarea	{
	margin-bottom: 20px;
	border: none;
	height:30px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	font-weight: bold;
}
textarea{
	height: 200px;
	width:100%;
}
input[type=submit],
input[type=reset]
{
	background-color: #000000;
    border: 1px solid #111111;
    color: #FFFFFF;
    cursor:pointer;
}
input[type=submit]:hover,
input[type=reset]:hover
{
	background-color: #111;
    border: 1px solid #000;
    color: #FFFFFF;
}
/*6.2-ERROR*/
.contact_error{
	background-color: #B50101 !important;
	border:1px solid red !important;
}
.contact_error {
	color:#fff !important;
}
/*--------------------7.FOOTER---------------------*/
footer{
	position: fixed;
	background-color: #000;
	bottom: 0;
	width: 100%;

}
footer p{
	text-align: center;
	color:#fff;
}
footer p a{
	color:#aaa;
}
/*--------------------8.OTHER---------------------*/
@media screen and (max-width: 768px)
{
	header{
		background-color: #000000;
	    position: inherit;
	    top: 0;
	    width: 100%;
	}
	.content {
	    clear: both;
	    margin-left: 20px;
	    margin-right: 20px;
	}
    h1{
    	font-size: 4em;
    }

	.ancre {
	    clear: both;
	    font-size: 0.8em;
	    margin-left: 20px;
	    position: inherit;
	    text-align: left;
	    text-transform: uppercase;
	    top: 250px;
	}
	.ancre li {
	    display: inline-block;
	}
	.title{
		display: none;
	}
}
@media screen and (max-width: 360px)
{
	h1{
    	font-size: 3.5em;
    }
}
@media screen and (max-width: 350px)
{
	.mainNav{
		font-size: 1em;

	}
	header img {
		width: 200px;

	}
    h1{
    	font-size: 3em;
    }
}