/* NOVEMBRE 2013 FABIEN PERE pere.fabien@gmail.com */ @media screen and (min-width: 1050px) { article { width:650px; } } @font-face { font-family: 'franchiseregular'; src: url('fonts/opensans-bold-webfont.eot'); src: url('fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-bold-webfont.woff') format('woff'), url('fonts/opensans-bold-webfont.ttf') format('truetype'), url('fonts/opensans-bold-webfont.svg#franchiseregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'opensansbold2'; src: url('fonts/opensans-semibold-webfont.eot'); src: url('fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-semibold-webfont.woff') format('woff'), url('fonts/opensans-semibold-webfont.ttf') format('truetype'), url('fonts/opensans-semibold-webfont.svg#opensansbold2') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'latoblack'; src: url('fonts/opensans-bold-webfont.eot'); src: url('fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-bold-webfont.woff') format('woff'), url('fonts/opensans-bold-webfont.ttf') format('truetype'), url('fonts/opensans-bold-webfont.svg#franchiseregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'richardmiller'; src: url('fonts/Miller Type Foundry - RICHARDMILLERREGULAR.eot'); src: url('fonts/Miller Type Foundry - RICHARDMILLERREGULAR.eot?#iefix') format('embedded-opentype'), url('fonts/Miller Type Foundry - RICHARDMILLERREGULAR.woff') format('woff'), url('fonts/Miller Type Foundry - RICHARDMILLERREGULAR.ttf') format('truetype'), url('fonts/Miller Type Foundry - RICHARDMILLERREGULAR.svg#richardmiller') format('svg'); font-weight: normal; font-style: normal; } * { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -ms-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #menuGauche { display: block; position: absolute; z-index: 999999; top: 0; width: 100%; background: rgba(0,0,0,0.6); left: 0; height: 38px; } input,h1,p,.titre { -webkit-touch-callout: auto; -webkit-user-select: auto; -khtml-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } #loading { position:fixed; top:0; left:0; margin:0; width:100%; height:100%; opacity:0.8; background:white url('loading.gif'); background-repeat:no-repeat; background-position:center center; z-index:99; text-shadow:none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @-webkit-keyframes rot{ from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } } @-moz-keyframes rot{ from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); } } @-o-keyframes rot{ from { -o-transform:rotate(0deg); } to { -o-transform:rotate(360deg); } } @keyframes rot{ from { transform:rotate(0deg); } to { transform:rotate(360deg); } } /* GENERAL */ html,button,input,select,textarea{color:#222}html{font-size:12px;font-family:open_sansregular;line-height:1.2; /* background:#f0f0f0; */ text-shadow:rgba(0,0,0,0.25) 1px 1px 1px;}audio,canvas,img,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical} @font-face { font-family: 'open_sansregular'; src: url('fonts/opensans-regular-webfont.eot'); src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-regular-webfont.woff') format('woff'), url('fonts/opensans-regular-webfont.ttf') format('truetype'), url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansbold'; src: url('fonts/bebasneue-webfont.eot'); src: url('fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/bebasneue-webfont.woff') format('woff'), url('fonts/bebasneue-webfont.ttf') format('truetype'), url('fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg'); /* src: url('fonts/OpenSans-Bold-webfont.eot'); src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/OpenSans-Bold-webfont.woff') format('woff'), url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'), url('fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');*/ font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansbold_italic'; src: url('fonts/opensans-bolditalic-webfont.eot'); src: url('fonts/opensans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-bolditalic-webfont.woff') format('woff'), url('fonts/opensans-bolditalic-webfont.ttf') format('truetype'), url('fonts/opensans-bolditalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @font-face { font-family: 'bebas'; src: url('fonts/bebasneue-webfont.eot'); src: url('fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/bebasneue-webfont.woff') format('woff'), url('fonts/bebasneue-webfont.ttf') format('truetype'), url('fonts/bebasneue-webfont#bebasneue') format('svg'); font-weight: normal; font-style: normal; } a { color:#444; } @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-home:before { content: "\e600"; } .icon-music:before { content: "\e601"; } .icon-cart:before { content: "\e606"; } .icon-contract:before { content: "\e607"; } .icon-expand:before { content: "\e608"; } .icon-zoom-out:before { content: "\e609"; } .icon-zoom-in:before { content: "\e60a"; } .icon-search:before { content: "\e60b"; } .icon-facebook:before { content: "\e60f"; } .icon-twitter:before { content: "\e610"; } .icon-apple:before { content: "\e611"; } .icon-android:before { content: "\e612"; } .icon-youtube:before { content: "\e613"; } .icon-soundcloud:before { content: "\e614"; } .icon-spinner:before { content: "\e615"; } .icon-share:before { content: "\e63c"; } .icon-headphones:before { content: "\e602"; } .icon-last:before { content: "\e63d"; } .icon-first:before { content: "\e63e"; } .icon-forward:before { content: "\e63f"; } .icon-backward:before { content: "\e640"; } .icon-stop:before { content: "\e641"; } .icon-pause:before { content: "\e642"; } .icon-play:before { content: "\e643"; } .icon-download:before { content: "\e646"; } .icon-earth:before { content: "\e648"; } .icon-arrow-left:before { content: "\e619"; } .icon-arrow-down:before { content: "\e61a"; } .icon-arrow-up:before { content: "\e61b"; } .icon-arrow-right:before { content: "\e61c"; } .icon-arrow-left2:before { content: "\e61d"; } .icon-arrow-down2:before { content: "\e61e"; } .icon-arrow-up2:before { content: "\e61f"; } .icon-uniE620:before { content: "\e620"; } .icon-arrow-right2:before { content: "\e621"; } .icon-arrow-up3:before { content: "\e622"; } .icon-arrow-down3:before { content: "\e623"; } .icon-arrow-left3:before { content: "\e624"; } .icon-shuffle:before { content: "\e625"; } .icon-play2:before { content: "\e626"; } .icon-pause2:before { content: "\e627"; } .icon-heart:before { content: "\e628"; } .icon-heart2:before { content: "\e629"; } .icon-comment:before { content: "\e63a"; } .icon-next:before { content: "\e644"; } .icon-previous:before { content: "\e645"; } .icon-music2:before { content: "\e630"; } .icon-headphone:before { content: "\e633"; } .icon-star:before { content: "\e603"; } .icon-heart:before { content: "\e604"; } .icon-file:before { content: "\e605"; } article { float:left; } ::-moz-selection,::selection{background:#2980b9;text-shadow:none}@media print{*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}header,nav,footer{display:none}} a:hover{color:#ccc;} /* HEADER */ b,strong { font-family:open_sansregular; font-weight:bold; /* margin-left: 5px;*/ margin-right: 5px; } header { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background:black; background-repeat:no-repeat; background-position:bottom center; background-size:cover; background-image:url('/img/background.jpg'); height:130px; width:100%; position:absolute; top:0px; left:0px; color:white; } /* BANDEAU NAVIGATION */ nav { position:absolute; bottom:0px; left:0px; height:30px; background:rgba(0,0,0,0); width:100%; z-index:90; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s; transition:all 0.2s; color:white; border-color:white; } nav.fixed { position:fixed; top:0px; background:black; } #menu { position:absolute; left:50%; width:800px; margin-left:-240px; height:30px; } #menu a { display: block; font-size: 12px; color: white; float: left; font-family: latoblack; text-shadow: none; text-decoration: none; font-weight: normal; padding: 8px 12px; text-transform:uppercase; -webkit-transition: color 0.2s; transition: color 0.2s; -o-transition: color 0.2s; -moz-transition: color 0.2s; } nav #menu a:hover { color:#ccc; } nav #menu div { position:absolute; opacity:0; z-index:0; width:100%; height:100%; } .m0 #menu .menu0, .m1 #menu .menu1, .m2 #menu .menu2, .m3 #menu .menu3 { opacity:1; z-index:10; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; -o-transition: opacity 0.5s; -moz-transition: opacity 0.5s; } header #menu #fleche { /* border-top-color: black; height: 0px; width: 0px; border: solid black 8px; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; position: absolute; margin-left: -8px; bottom: -25px; left: 16px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; opacity: 1; top:27px;*/ border-top-color: black; height: 0px; width: 0px; border: solid white 6px; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; position: absolute; margin-left: -6px; bottom: -37px; left: 16px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; opacity: 1; top: 18px; } /* RECHERCHE */ #search { position: absolute; right: 55px; top: 50px; z-index: 9999; color: white; } #search.fixed { position: fixed; right: 56px; top: 2px; z-index: 9999; color: white; } #search input { -webkit-touch-callout: auto; -webkit-user-select: auto; -khtml-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; opacity:0.8; width:150px; padding: 2px 30px 2px 2px; background: rgba(100,100,100,0.1); font-size: 17px; color:white; text-transform:uppercase; border:solid 2px white; outline: none; text-align:left; font-family:bebas; -webkit-transit-webkit-transitionion:opacity 0.2s; -moz-transition:opacity 0.2s; -o-transition:opacity 0.2s; transition:opacity 0.2s; } #search input:focus { opacity:1; } #search span { position:absolute; font-size:15px; right: 7px; top: 6px; text-shadow:none; opacity:0.8; } #search.show #result, #search:hover #result { display:block;opacity:1; } #menu a.info { display: block; border: solid 2px white; font-size: 17px; width: 17px; height: 17px; color: white; z-index: 999; text-align: center; border-radius: 99px; text-decoration: none; opacity: 1; line-height: 18px; padding: 0px; margin-top: 4px; font-family: arial; text-transform: none; } #result { -webkit-transit-webkit-transitionion:opacity 0.8s,display 2s; -moz-transition:opacity 0.8s,display 2s; -o-transition:opacity 0.8s,display 2s; transition:opacity 0.8s,display 2s; position:absolute; width: 180px; z-index:95; top: 23px; left: -1px; box-shadow: rgba(0,0,0,0.5) 0 5px 5px; -webkit-box-shadow: rgba(0,0,0,0.5) 0 5px 5px; border:solid 3px white; border-bottom:none; display:none;opacity:0; } #result a b { text-transform:uppercase; font-size:12px; } #result a { display:block; float:left; background:white; padding:10px; padding-left:60px; border-bottom:solid 3px white; position:relative; text-decoration:none; color:black; overflow:hidden; height: 30px; width: 113px; text-shadow:none; font-size:10px; } #result .noresult { display:block; float:left; background:#ccc; padding:10px; position:relative; text-decoration:none; color:white; line-height:30px; font-size:14px; text-align:center; overflow:hidden; height: 30px; width: 160px; text-shadow:none; border-bottom:solid 3px white; } #result a:hover { background:#2980b9; color:white; } #result a img { position:absolute; top:0px; left:0px; height:50px; width:50px; } #result a:hover img { opacity:0.5; } /* LOGO */ #logo { position: absolute; top:41px; left: 50%; margin: 0 0 0 -70px; width: 140px; z-index: 100024; } /* LANGUES */ header .langue { position:absolute; top: -4px; right: 116px; } header .langue a { display:block; float:left; margin:5px; color:white; text-shadow:rgba(0,0,0,0.25) 1px 1px 1px; opacity:0.8; text-decoration:underline; font-size: 10px; } header .langue a.actif { opacity:1; text-decoration:none; } header .langue a:hover { opacity:1; } /* BANDEAU SOCIAL */ #social { position:absolute; left: 6px; top: -10px; } #social span { color:black; text-shadow:none; font-size:20px; display:block; float:left; margin:15px; width:20px; text-decoration:none; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; overflow:hidden; opacity:0.8; } #social span a { color:#000; font-size:20px; text-decoration:none; opacity:1; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } #social span a:hover { color:#aaa; } #social span.fb:hover { width:125px; } #social span iframe { display:none; position:absolute; top:0px; left:25px; } #social span:hover iframe { display:block } #social span.tw:hover { width:85px; } #social span.yt:hover { width:150px; } #social span.sp:hover { width: 170px; height: 25px; } #social span:hover { opacity:1; -webkit-transform:scale(1.0); -moz-transform:scale(1.0); -o-transform:scale(1.0); transform:scale(1.0); } /*CONTENT */ article a { font-family: opensansbold2; } article .bigplayer { display:block; width:232px; height:232px; margin-right:20px; margin-bottom:10px; -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s; position:relative; float:left; display:block; } article.playlistart .bigplayer { width:302px; height:318px } article, article p { text-align:justify; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; padding-top:0px;font-size: 13px; line-height: 16px; } article .spacertop { float:right; width:150px; height:30px; } article a.titre { font-weight:normal; font-family:latoblack; font-size:16px; line-height:18px; text-transform:uppercase; text-shadow:none; display:block; text-decoration:none; color:black; text-align: left; } article a:hover { color:#444; } article { max-width:700px; margin-left:calc(100% - 1050px); margin-left:-webkit-calc(100% - 1050px); margin-left:-moz-calc(100% - 1050px); margin-left:-o-calc(100% - 1050px); padding:20px; padding-bottom:35px; margin-bottom:50px; display:block; clear:both; background:white; /* box-shadow:rgba(0,0,0,0.2) 1px 1px 2px; */ margin-top:20px; min-height: 250px; opacity:1; /* -webkit-transition: opacity 0.5s; */ -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; /* transition: opacity 0.5s; */ position:relative; } article.center { min-height: 0; display: block; position: relative; margin-left: calc(50% - 350px); margin-left: -webkit-calc(50% - 350px); margin-left: -moz-calc(50% - 350px); margin-left: -o-calc(50% - 350px); overflow: hidden; clear: both; padding-bottom: 20px; } article.show { opacity:1; } article .bigplayer img { width:230px; height:230px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } article.playlistart .bigplayer img { width:300px; height:300px; } article .bigplayer:hover img { /* border-radius:150px; box-shadow:rgba(0,0,0,0.4) 4px 4px 10px;*/ } article .bigplayer .playpause { display:block; position:absolute; top:0; left:0; width:100%; height:100%; -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s; color:white; opacity:0.4; font-size:100px; line-height:230px; text-align:center; text-shadow:rgba(0,0,0,0.8) 2px 2px 4px; font-size:80px; } article.playlistart .bigplayer .playpause { line-height:300px; } article .bigplayer:hover .playpause { opacity:1; color:white; text-shadow:rgba(0,0,0,0.4) 10px 10px 50px; cursor:pointer; } article.loading { font-size: 50px; color: #ccc; text-align: center; line-height: 200px; } .player{ display:block; clear:both; width:100%; padding:5px 0; height:46px; line-height:46px; font-family:open_sansbold_italic; font-size:12px; text-transform:uppercase; position:relative; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; cursor:pointer; overflow:hidden; text-align:left; } .player .playpause { position: absolute; display: block; width: 40px; height: 40px; text-align: center; color: white; line-height: 40px; text-shadow: rgba(0,0,0,0.5) 0 0 10px; font-size: 35px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0.6; top: 9px; left: 0; } .lab .player .playpause { top:6px; } .player img{ border-radius:40px; margin-right:5px; width:40px; height:40px; -webkit-transition: all 0.2s; box-shadow:rgba(0,0,0,0.4) 1px 1px 2px; -webkit-box-shadow: rgba(0,0,0,0.4) 1px 1px 2px; } .player:hover { } .player:hover img { } .player:hover .playpause { opacity:1; } /* PLAYER */ footer { overflow:hidden; border-top:solid 3px black; background:rgba(255,255,255,1); position:fixed; bottom:-90px; right:0px; height:50px; width:100%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition:all 0.5s; -moz-transition:all, 0.5s; -o-transition:all, 0.5s; transition:all 0.5s; box-shadow:rgba(0,0,0,0.6) 0px -1px 5px; -webkit-box-shadow: rgba(0,0,0,0.6) 0px -1px 5px; color:white; border-top:none; background:black; z-index:10001; background:white; color:#ccc; } footer.visible { bottom:0px; } footer.black { } footer:hover { } footer.black:hover { background:rgba(0,0,0,1); } a { -webkit-transition:color 0.2s,opacity 0.2s; -moz-transition:color 0.2s,opacity 0.2s; -o-transition:color 0.2s,opacity 0.2s; transition:color 0.2s,opacity 0.2s; } /* CONTENU */ #main { padding-bottom: 35px; /*position: absolute;*/ top:0px; padding-top: 160px; left: 0px; width: 100%; overflow:hidden; text-shadow:none; } /* FOOTER - PLAYER */ #prev,#next,#iconplaypause { font-size:42px; line-height:50px; display:block; float:left; cursor:default; -webkit-transition:all 0.2s; transition:all 0.2s; -o-transition:all 0.2s; -moz-transition:all 0.2s; } footer .contextico div { font-size:20px; line-height:50px; display:block; float:right; margin-right:20px; cursor:pointer; cursor:pointer; cursor:default; -webkit-transition:all 0.2s; transition:all 0.2s; -o-transition:all 0.2s; -moz-transition:all 0.2s; } #trackinfo { text-shadow: none; display:block; height:80px; width: 162px; float:left;cursor:default; color:black; font-size: 12px; } #trackinfo b { display:block; margin-top:5px; width:100%; text-transform:uppercase; float:left; clear:both; font-size:18px; font-family:open_sansbold;cursor:default; } #playermaxi { position: absolute; top: 18px; left: 340px; width: 360px; background: rgba(0,0,0,0.2); height: 15px; border-radius: 20px; overflow:hidden; } /*footer > div { -webkit-transition:all 0.2s; transition:all 0.2s; -o-transition:all 0.2s; -moz-transition:all 0.2s; }*/ footer.black #avancement { background:white; } #avancement { height:100%; width:0; background:#949e96; } footer.black #playermaxi { background:rgba(255,255,255,0.1); } footer.black #playpause { border-color:white; } #playpause { font-size: 20px; line-height: 30px; margin-top: 5px; display: block; float: left; border: solid 4px #ccc; border-radius: 50px; text-align: center; width: 30px; overflow: hidden; height: 30px; position:relative; -webkit-transition:border 0.2s; transition:border 0.2s; -o-transition:border 0.2s; -moz-transition:border 0.2s; } /* #iconplaypause { display: block; text-align: center; width: 50px; overflow: hidden; height: 30px; position:absolute; top:0px; left:-10px; line-height:30px; -webkit-transition:all 0.2s; transition:all 0.2s; -o-transition:all 0.2s; -moz-transition:all 0.2s; } */ #prev:hover,#next:hover, footer .contextico div:hover, #iconplaypause:hover { color:black; opacity:1; } #prev:hover,#next:hover, footer .contextico div:hover, #playpause:hover #iconplaypause { } footer #playpause:hover { opacity:1; } footer img { height:40px; width:40px; float:left; margin:5px; } /* AFFICHAGE DES ERREURS SUR LE PLAYER */ article .bigplayer.error, article .player.error { opacity:0.2; cursor:not-allowed; color:red; } article .bigplayer.error img, article .player.error img { border-color:red; } article .bigplayer.error:hover img{ border-radius:0; } article .bigplayer.error .playpause, article .player.error .playpause { opacity:0; } #rubrique { position:absolute; left:0px; width:70px; overflow:hidden; height:30px; } #rubrique div { position:absolute; left:0px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; width:1000px; } #rubrique div a { width: 70px; text-align: center; display: block; font-family: bebas; text-transform: uppercase; line-height: 30px; font-size: 23px; float:left; color:white; text-decoration:none; opacity:0; -webkit-transition:opacity 0.5s; -moz-transition:opacity 0.5s; -o-transition:opacity 0.5s; transition:opacity 0.5s; } header.m0 #rubrique div a:nth-child(1) { width:80px; color:black; } header.m3 #rubrique div a:nth-child(2) { width:80px; color:black; } header.m1 #rubrique div a:nth-child(4) { width:80px; color:black; } header.m2 #rubrique div a:nth-child(3) { width:80px; color:black; } #masquemenu { width:100px; height: 92px; position:absolute; overflow:hidden; top: 0px; left: 3px; display:none; } #masquemenu .fleche { height: 0px; width: 0px; border: solid rgba(0,0,0,1) 38px; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; position: absolute; top: 17px; left: -4px; } header.m2 #mainmenu .jukebox { color:white; border-color:white; } header.m0 #mainmenu .webzine { color:white; border-color:white; } header.m1 #mainmenu .label { color:white; border-color:white; } header.m3 #mainmenu .mysongs { color:white; border-color:white; } #mainmenu { position:absolute; width:100px; height:100px; left:-15px; top:0px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; -webkit-transform:rotate(-660deg); -moz-transform:rotate(-660deg); -o-transform:rotate(-660deg); transform:rotate(-660deg); opacity:0; top: 4px; z-index: 99; } header.m0 #mainmenu { -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); opacity:1; } header.m3 #mainmenu { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); opacity:1; } header.m1 #mainmenu { -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); transform:rotate(135deg); opacity:1; } header.m2 #mainmenu { -webkit-transform:rotate(225deg); -moz-transform:rotate(225deg); -o-transform:rotate(225deg); transform:rotate(225deg); opacity:1; } .jukebox,.label,.webzine,.mysongs { display:block; width:50px; height:50px; border-top:solid 2px white; border-left:solid 2px white; position:absolute; top:0px; left:0px; -webkit-transition:all 0.5s; } #mainmenu a:hover { color:white; /* border-color:white;*/ /* z-index:999;*/ } .jukebox{ -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } .label { left:50px; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform:rotate(-90deg); } .webzine { top:50px; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); } .mysongs { top:50px; left:50px; } #mainmenu a { text-decoration:none; color: black; } #mainmenu span { font-size: 18px; top: 0px; display: block; left: 0px; text-decoration: none; text-align: center; text-shadow: none; width: 35px; line-height: 35px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } article .social { position:absolute; top: 15px; right: 16px; height: 30px; margin-left:5px; color:#444; z-index:20; font-family:open_sansbold; } article .social a:hover .ico { -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2); } article .social .fb:hover , article .social .tw:hover { width:100px; } article .social .fb:hover span, article .social .tw:hover span { width:100px; color:white; } article .social a.comment:hover span { width:30px; } article .social a:hover { width:30px; } article .social div, article .social a { display:block; width:30px; height:30px; float:left; position:relative; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; overflow:hidden; } article .social a span, article .social div span { display:block; width:30px; float:left; text-align:center; font-size:12px; /* -webkit-transition:all 0.5s; BUG CHROME */ -moz-transition:all 0.5s; -o-transition:all 0.5s; /* transition:all 0.5s; */ } article .social div iframe { border:0px; position:absolute; top:5px; left:10px; background:white; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; opacity:0; } article .social div:hover iframe { border:0px; position:absolute; top:5px; left:10px; background:white; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; opacity:1; } article .social div span.ico, article .social a span.ico {font-size:16px;} #signin { display: inline-block; padding: 6px; background: transparent; color: white; border:solid 2px white; text-shadow: none; font-family: latoblack; cursor: pointer; opacity: 1; font-size: 12px; text-transform: uppercase; opacity: 0.9; border-radius:3px; height: 12px; overflow: hidden; line-height: 16px; margin-top: -8px; background: white; color: #949e96; } .fixed #signin { height: 30px; line-height: 30px; display:none; } .signincenter { position: absolute; right:20px; top:0px; width:250px; text-align:center; z-index: 999;; } #signin:hover { opacity:1; } #signin span { margin-right:3px; } /* ADAPTATION SMARTPHONE ET TABLETTES */ #master { width:100%; min-width:320px; position:absolute; top:0px; left:0px; word-break:keep-all; } @media screen and (max-width: 957px) { } #masquemenu { top: -92px; } footer { right:-120px; } @media screen and (min-width: 1500px) { footer { } /* footer { height:80px; } #main { padding-bottom:80px; } footer img { height:60px; width:60px; margin:10px; }*/ /* #prev, #next { line-height:80px; font-size:50px; } #playpause { font-size:30px; height:40px; width:40px; margin-top: 15px; } #iconplaypause { width: 60px; height: 40px; line-height: 40px; }*/ article { max-width: 900px; font-size: 12px; margin-left: calc(50% - 450px); margin-left: -webkit-calc(50% - 450px); margin-left: -moz-calc(50% - 450px); margin-left: -o-calc(50% - 450px); padding-left: 100px; } /*#trackinfo b { font-size:20px; margin-top:10px; } #trackinfo { font-size:12px; width: 170px; } footer .contextico div { line-height:80px; height:80px; } #playermaxi { top:33px; left: 400px; width: -webkit-calc(100% - 520px); width: -o-calc(100% - 520px); width: -moz-calc(100% - 520px); width: calc(100% - 520px); }*/ } #mobilemenu { display:none; } article .date { position:absolute; top:20px; left:-60px; width:60px; font-family:bebas; font-size:20px; text-align:center; cursor:pointer; text-decoration:none; color: #ccc; } article .date:hover, { color:#444; } article .redactor-name { text-decoration: underline; text-transform: capitalize; cursor: pointer; } article .socialmusic div span { height: 2px; margin: 0; font-size: 12px; } article .socialmusic.social div iframe { top:0px; } aside h1 { font-family:open_sansbold_italic; font-size:13px; font-weight:normal; color:#ccc; text-align:center; text-align: left; border-bottom: solid 2px #ccc; text-transform:uppercase; } aside h1:hover { color:#666; } article .socialmusic { display: inline-block; position: relative; opacity:0; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; margin:0; vertical-align: bottom; overflow:visible; top:auto; left:auto; right:auto; bottom:auto; } .player:hover .socialmusic { -webkit-transition:all 1s; -moz-transition:all 1s; -o-transition:all 1s; transition:all 1s; opacity:1; } #partners { text-align:left; padding: 20px; } #partners img { margin: 0; margin-top: -1px; background: white; padding: 25px; } #partners .url { float: right; line-height: 150px; font-family:opensansbold2; } #partners h1 { width:100%; font-size: 23px; font-family: opensansbold2; text-decoration:underline; font-weight:normal; padding:10px; padding-bottom:5px; margin:0; clear: both; padding-top: 20px; text-align:left; } #partners a.bigpartner { width: 100%; float: left; border-bottom: solid 2px black; border-top: solid 1px #ccc; margin-bottom:40px; text-decoration:none; display:block; } aside { position:absolute; right:20px; top: 180px; width:250px; height:100%; } .block { margin:10px; width: 230px; text-align:center; clear:both; } #login { position:fixed; top:0px; left:0px; background:rgba(255,255,255,0); width:100%; height:100%; z-index:9999999; display:none; } #login .msg { color: #ccc; padding-bottom: 20px; text-align: center; font-size: 20px; padding-top: 20px; line-height: 24px; } #login .lost { text-align:right; font-size:12px; text-transform:none; color:#949e96; cursor:pointer; display:block; width:100%; } #login .box { display: block; position: absolute; background: white; width: 213px; padding: 20px; padding-top: 0px; padding-bottom: 100px; line-height: 16px; font-size: 17px; text-shadow: none; font-family: bebas; right: 10px; top: 0px; border-top:0; border: solid 3px black; } #login .fblogin:hover, #login .twitterlogin:hover { opacity:1; } #login .fblogin { background:#3b5998; color:white; position:absolute; left:0px; bottom:0px; width:50%; height:75px; text-align:center; font-size:16px; opacity:0.8; } #login .ico { width:100%; font-size:30px; line-height:50px; display:block; text-align:center; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s; transition:all 0.2s; } #login .twitterlogin { background:#9AE4E8; color:white; position:absolute; left:50%; bottom:0px; width:50%; height:75px; text-align:center; font-size:16px; opacity:0.8; } #login .box .login { background:#444; color:white; font-family:bebas; font-size:20px; padding:5px; float:right; cursor:default; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s; transition:all 0.2s; } #login .box .login2 { background:#ccc; } #login .box .login3 { background:#ccc; display:none; } #login .box .login:hover { background:black; } #login .box input { width:209px; border:solid #555 2px; padding:4px; } .blur { -webkit-filter:blur(5px); -moz-filter:blur(5px); -o-filter:blur(5px); } /* JUKEBOX */ .j .dm b { width:100%; display:block; } #main .j { display:block; position:absolute; top: 195px; left:0px; width:100%; opacity:0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #main .slider { position: absolute; top: 132px; right: 80px; width: 180px; text-align: right; height: 30px; background:url('/img/size.png'); background-position:top center; background-repeat:no-repeat; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } .j .dm { display:block; float:left; position:relative; z-index:9999; } .j.icon .dm img { position:absolute; width:100%; z-index:100; background:url('/data/0-100x100.jpg'); background-size:cover; background-color:black; -webkit-box-shadow: #919191 0px 0px 10px; box-shadow:rgba(0,0,0,0.4) 0px 0px 10px; -moz-box-shadow:rgba(0,0,0,0.4) 0px 0px 10px; box-shadow: #555 0px 0px 10px; } .j .dm:hover { z-index:100000; cursor:pointer; } .j.list .dm { display:table-cell; overflow:hidden; cursor:pointer; } .j.list .dm img { display:inline-block; vertical-align:middle; float:left; overflow:hidden; height:100%; } .j.list .dm .titre { display:inline-block; vertical-align:middle; overflow:hidden; font-family:open_sansregular; font-size:10px; line-height:12px; margin-left:10px; width: 180px; } .j.icon .dm .social { position: absolute; bottom:-30px; width: 100%; padding-top:10px; padding-bottom:30px; height: 30px; line-height: 20px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; opacity:0; } .j.icon .dm:hover .social { bottom: -65px; opacity:1; } .j.icon .dm .social div, .j.icon .dm .social a { width:25%; display:block; float: left; text-align:center; position:relative; text-decoration:none; } .j.icon .dm .social div span, .j.icon .dm .social a span { width: 100%; display: block; font-size:14px; line-height:16px; height:16px; text-decoration:none; } .j.icon .dm .social div span.nb, .j.icon .dm .social a span.nb { font-size:10px; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s; transition:all 0.2s; line-height:14px; height:14px; text-decoration:none; } .j.icon .dm .social div:hover span.nb { opacity:0; } .j.icon .dm .social div iframe { opacity:0; position:absolute; top:0; left:50%; margin-left:-40px; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s; transition:all 0.2s; z-index:5; display:none; } .j.icon .dm .social div:hover iframe { opacity:1; z-index:99; display:block; } .j.list .dm .social { position: absolute; top: 0; right: 40px; width: 20px; overflow: hidden; } .j.list .dm .social .download, .j.list .dm .social .tw, .j.list .dm .social .fb { display:none; } .j.list .dm .titre b {font-size: 12px; width: 180px; font-weight: normal; text-transform: uppercase; width: 180px; } .j.icon .dm .titre { position:absolute; border-radius:100%; width:95%; height:95%; background:#444; border-radius:100%; opacity:0; width:75%; left:2.5%; top:2.5%; height:55%; background:#222; color:white; text-align:center; font-weight:normal; text-transform:uppercase; padding:20% 10%; z-index:50; box-shadow:rgba(0,0,0,0.2) 0 0 5px; -webkit-box-shadow:rgba(0,0,0,0.2) 0 0 5px; -webkit-transition:top 0.5s,-webkit-transform 0.5s,opacity 5s; -moz-transition:top 0.5s,-moz-transform 0.5s,opacity 5s; -o-transition:top 0.5s,-o-transform 0.5s,opacity 5s; transition:top 0.5s,transform 0.5s,opacity 5s; -webkit-transform:rotate(40deg); -moz-transform:rotate(40deg); -o-transform:rotate(40deg); transform:rotate(40deg); overflow:hidden; line-height:16px; line-height:14px; } .j.icon .dm:hover .titre { -webkit-transition:top 0.5s,-webkit-transform 0.5s; -moz-transition:top 0.5s,-moz-transform 0.5s; -o-transition:top 0.5s,-o-transform 0.5s; transition:top 0.5s,transform 0.5s; opacity:1; top:-45%; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } .left { width:30px; display:block; float:left; font-size:40px; overflow:hidden; text-align:left; color:#a7a7a7; padding-top: 30px; text-decoration:none; z-index:999998; } .right { width: 30px; display: block; float: right; text-align: right; font-size: 20px; font-size: 40px; color: #a7a7a7; padding-right: 0px; padding-top: 30px; position: absolute; right: 0px; z-index: 100001; color:white; } .left:hover, .right:hover { /* color:black; */ } .left:active, .right:active, .ico:active, .icon-heart2:active { -webkit-transition: none; -moz-transition:none; -o-transition:none; transition:none; -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -o-transform:scale(0.9); transform:scale(0.9); } .contextico div:active { -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -o-transform:scale(0.9); transform:scale(0.9); } .slider span { color: #ADADAD; display: block; width: 36px; height: 30px; float: left; line-height: 24px; font-size: 24px; text-align: center; font-weight: bold; font-family: opensansbold2; cursor:pointer; } .tag:nth-child(2n) { color: #aaa; } .tag { font-weight: bold; font-family: bebas; font-size: 40px; color: #666; cursor: pointer; height: 50px; float: left; text-align: center; margin-right: 10px; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out; text-decoration:none; } .tag:hover { color: white; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #tagcloud{ position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:100023; background:black; } #fullscreen { position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:10000000; background:black; } #fullscreen .contextico { left: auto; top: 100px; font-size: 50px; display: block; width: 50px; position: absolute; bottom: 149px; right: 50%; opacity: 0.7; font-size: 50px; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out; margin-right: -475px; text-shadow: black 1px 1px 2px; } #fullscreen .masterbuttons { top:auto; position: absolute; bottom: 20px; height: 50px; width: 200px; margin-left: -97px; left: 50%; opacity: 0.7; font-size: 60px; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out; text-shadow: black 1px 1px 2px;; } #fullscreen .masterbuttons:hover { opacity:1; } #fullscreen .masterbuttons div { display:block; float:left; width:60px; } #fullscreen .masterbuttons div:hover { } #fullscreen .masterbuttons div.playpause { border-radius: 100px; border: solid 7px white; margin-top: -10px; box-shadow:black 1px 1px 2px; -webkit-box-shadow:black 1px 1px 2px; } #fullscreen .masterbuttons div.playpause:hover { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #fullscreen .masterbuttons div.playpause div { -webkit-transform: scale(0.8); -moz-transform:scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } #fullscreen .masterbuttons div.playpause:hover div { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #fullscreen .logo { position: absolute; top: 10px; left: 50%; margin: 0 0 0 -70px; width: 140px; z-index: 10004; } #fullscreen .contextico:hover { opacity:1; } #fullscreen .content { display:block; width:100%; text-align:center; font-size: 20px; text-transform:uppercase; color:white; font-family:opensansbold2; padding-top:100px; } #fullscreen .content b { width:100%; font-size: 30px; text-transform:uppercase; display: block; } #fullscreen .content img { height:60%; } .tagCloud { position: absolute; width: 600px; height: 400px; left: 50%; top: 50%; margin: -200px -300px; text-align:center; } .mobile { display: block; background: #666; color: white; width: 200px; border-radius: 5px; font-size: 11px; text-decoration: none; padding: 7px; float: left; margin: 10px; line-height: 18px; margin-top: 0; } .mobile span { font-size: 30px; float: left; line-height: 35px; width: 35px; } .mobile:hover { background:black; color:white; } .block a img{ margin-bottom:10px; } .partners { display:block; height:100px; position:relative; } .partners img { display:block; width:230px; height:100px; position:absolute; left:0px; opacity:0; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out; z-index:1; } .partners img.visible { opacity:1; z-index:2; } .labellink .links { position: absolute; bottom: 0px; left: 0px; z-index: 99; width: 130px; top: auto; width: 100%; height: 45px; text-align:center; } .labellink .links a { display: inline-block; padding: 7px 3px; text-decoration: none; margin-bottom: 5px; font-family: opensansbold2; font-size: 13px; height: 23px; line-height: 23px; opacity:1; color:#aaa; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; } .labellink .links a img { height: 20px; vertical-align: middle; display: inline-block; margin-top: -3px; float:none; box-shadow:none; -webkit-box-shadow:none; } .labellink .links a:hover { opacity:0.8; color:#aaa; } .labellist .labellink { display:block; float:left; overflow:hidden; padding-bottom:40px; position:relative; cursor:pointer; } .labellist .labellink img { box-shadow:rgba(0,0,0,0.4) 1px 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.4) 1px 1px 2px; height:100%; width: auto; float:left; } .labellist .labellink:hover .titre{ opacity:1; } .labellist .labellink .titre { opacity:0; -webkit-transition:all 1s; -moz-transition:all 1s; -o-transition:all 1s; transition:all 1s; width: auto; float: left; position: absolute; left: 0px; bottom: 40px; font-family: opensansbold2; font-size: 16px; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; text-align: center; width: 100%; text-transform: uppercase; color: white; background: rgba(0,0,0,0.6); padding: 10px 0; } .labellist .labellink .titre:after { display:block; float:right; margin-top:10px; width:100%; text-align:right; content:"more info "; font-size:14px; margin-right:10px; font-family:open_sansregular; } .labellist .labellink.list .titre { opacity:1; width: auto; font-family:bebas; display:block; margin-left:5px; height:100%; position:relative; } .labellist .labellink.list { box-shadow:none; } .labellist .labellink:hover { color:black; } .labellist .labellink.list { box-shadow:none; } .labellist .labellink.list img { border-radius:200px; } article.center img { float:left; margin-right:10px; } article.center h1 { font-weight: normal; font-family: opensansbold2; font-size: 25px; line-height: 20px; text-transform: uppercase; text-shadow: none; margin-top: 5px; text-decoration: none; color: black; } article.center { min-height:0; display:block; position:relative; margin-left: calc(50% - 500px); margin-left: -webkit-calc(50% - 500px); margin-left: -moz-calc(50% - 500px); margin-left: -o-calc(50% - 500px); overflow:hidden; clear:both; padding-bottom:20px; max-width: 1000px; width:100%; } article.lab .down { display: block; width: 100%; text-align: left; position: absolute; top: 322px; left: 5px; right: Auto; } article .playlistlabel { display: block; float: left; width: 400px; /* margin-top:-250px; margin-left: 300px;*/ } article .articledroit{ display: block; float: left; width: 480px; padding-left: 10px; } /* MODIFICATION LABEL */ article .articledroit { display: block; float: left; width: 480px; padding-left: 10px; clear: both; width: auto; } article .articledroit .player { display:none; } article.lab .bigplayer { border:1px solid #FFFFFF; width:100%; text-align: center; margin: auto; height: 252px; margin-top:30px; } article.lab .bigplayer .playpause { line-height:230px; } article.lab .bigplayer img { width:230px; height:230px; } article.lab p { /*margin-top:50px;*/ } article.lab .bigplayer:hover img { } article .down,.listeshop { display: block; width: 100%; text-align: center; position: absolute; z-index: 99999999; } article .down a { margin:5px; font-size:20px; text-decoration: none; opacity:0.8; } article .down a:hover { opacity:1; } article .down { display: block; width: 100%; text-align: right; position: relative; top: 21px; right: 31px; } .listeshop a { margin: 5px 10px; display: inline-block; font-family: opensansbold2; font-size: 14px; text-transform:uppercase; text-decoration: none; } .listeshop a.select { border-bottom:solid 2px black; } .listeshop a:hover { border-bottom:solid 2px #ccc; } .labellist { padding-top: 30px; } .datelabel { display:block; width: 200px; float:left; } .alldate { font-size:12px; } .alldate .datelabel { text-decoration: none; font-size: 12px; font-family: opensansbold2; text-transform: uppercase; } .booklabel { display:block; float:left; clear:left; } .book { display: block; padding: 5px; background: black; color: white; text-decoration: none; font-size: 13px; border: solid 2px black; width: 78px; clear: both; } .booklabel { margin:10px; } .book:hover { background:white; color:black; } article.center h2 { font-size:14px; color:#949e96; font-weight:normal; padding:0px; } #PPMiniCart { position:fixed; z-index:10000000; text-shadow:none; } @media print { footer,header,nav,aside,#fullscren,#loading,#search,#tagcloud,#login { display:none; } #main:before { content: "Delicieuse Musique"; font-size:40px; font-family:bebas; text-align:center; display:block; width:100%; padding-bottom:20px; } #main:after { content: "Delicieuse Musique - 2013 - Tous droits réservés"; font-size:10px; text-align:center; display:block; width:100%; padding-top:20px; } *,#master,#main { opacity:1; color:black; background:0; margin:0; padding:0; position:relative; } h1,p,.titre { display:block; width:100%; } article,article.center { display:block; color:black; page-break-inside: avoid; margin:0; width:100%; padding:0; padding-bottom:20px; border-bottom:solid 4px black; margin-bottom:20px; } article p b,article p strong,article p a { display:inline-block; } } .rel { display:block; clear:both; width:100%; } article { border-left:solid 2px #ccc; padding-bottom:75px; } article .paypal-button button { display: block; padding: 5px; background: black; color: white; text-decoration: none; font-size: 18px; border: solid 2px black; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out; border-radius:0; font-family:opensansbold2; text-transform:uppercase; font-style:normal; font-weight:normal; } article .paypal-button button:before, article .paypal-button button:after { background:transparent; font-family:bebas; font-style:normal; font-weight:normal; border:none; } article .paypal-button button:hover { background: white; color: black; } body #PPMiniCart p .shipping { opacity:0; display:none; } body #PPMiniCart p input { display: block; padding: 5px; background: black; color: white; text-decoration: none; font-size: 16px; border: solid 2px black; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out; border-radius: 0; font-family: opensansbold2; text-transform:uppercase; font-style: normal; font-weight: normal; margin-bottom: 6px; margin-top: -1px; } body #PPMiniCart form:before { font-family: bebas; font-size: 20px; content:'SHOPPING CART'; } body #PPMiniCart p { background:white; } body #PPMiniCart p span { line-height: 27px; } body #PPMiniCart form { font-family:open_sansregular; background:white; border-radius:0; padding-top:10px; border:solid 3px black; border-top:none; } body #PPMiniCart hr { background:white; opacity:0; } body #PPMiniCart ul{ border:0; } article.center { border:none; } #fullscreen .icon-shuffle { display:none; } article.playlist { display:block; padding:0; border:none; margin-bottom:0; margin-top:0; } article.playlist a img { width:150px; height:150px; margin:10px; box-shadow:rgba(0,0,0,0.2) 1px 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.2) 1px 1px 2px; } .diggers a { display:block; float:left; margin:20px; font-size:20px; text-transform:uppercase; display:block; text-align:center; font-family:bebas; text-decoration:none; } .diggers a .titre { opacity:0; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .diggers a:hover .titre { font-size:20px; text-transform:uppercase; display:block; text-align:center; font-family:bebas; text-decoration:none; opacity:1; color:black; } #mobilemenu { font-size:30px; height:40px; line-height:40px; padding:0 10px; text-align:center; background:black; color:white; text-transform:uppercase; text-decoration:none; font-family:bebas; text-shadow:none; position:fixed; top:0px; left:0px; z-index:999998; } @media screen and (max-width: 1050px) { aside { display:none; } article.lab .social.bb { position: absolute; top: 558px; right: 61px; height: 30px; margin-left: 5px; color: #444; z-index: 20; font-family: open_sansbold; } article, article.center, article.playlist, article.lab { margin-left: auto; margin-right: auto; width: 90%; max-width: 100%; padding: 10px; margin: 0; padding-bottom: 50px; } article.lab { width: 550px; margin-left: -webkit-calc(50% - 250px); margin-left: -moz-calc(50% - 250px); margin-left: -o-calc(50% - 250px); margin-left: -ms-calc(50% - 250px); margin-left: calc(50% - 250px); } .social { display:none; } article.lab .bigplayer { } article img { } article .bigplayer { max-width:100%; overflow:hidden; } article .articledroit { position: relative; display: block; float: left; width: 500px; padding-left: 0; } } #mobile { position:fixed; top:0px; left:0px; width:0px; background:rgba(0,0,0,0.6); z-index:999999; display:block; overflow:scroll; opacity:0; height:100%; z-index: 999999999; } #mobile.show { width:100%; opacity:1; } #mobile.show .box { left:0px; } #mobile .box { position:absolute; left:-240px; width:240px; background:white; box-shadow:black 0 0 20px; -webkit-box-shadow:black 0 0 20px; } #mobile span { font-size:30px; height:40px; line-height:40px; text-align:center; background:black; color:white; text-transform:uppercase; text-decoration:none; font-family:bebas; width:100%;display:block; text-shadow:none; } #mobile a {display:block; font-size:20px;line-height:30px;background:white;padding:5px;height:30px; text-decoration:none; font-family:bebas; text-transform:uppercase; text-shadow:none; border-bottom:solid 1px #949e96; } #logo { display:none; } .news { display:block; float:left; background:black; height:290px; width:299px; font-family:opensans; color:white; font-size:20px; padding:10px; padding-top:40px; margin:5px; text-decoration:none; overflow:hidden; position:relative; font-size: 13px; padding: 10px; padding-top:50px; line-height: 20px; border:solid black 2px; } .news:hover { color:white; background:black; } .news img { position:absolute; top:40px; left:10px; } .news iframe { position:absolute; top:40px; left:10px; height:300px; width:300px; } .news.rectangle iframe { width:630px; } .news b { position:absolute; top:10px; left:10px; width:100%; height:30px; overflow:hidden; } .news.rectangle { width: 322px; padding-left: 320px; font-family: open_sansregular; } footer { width: 180px; max-width:100%; } footer:hover { width: 900px; right:0px; } /* MOBILE */ article .social { display:none; } @media screen and (min-width: 800px) { article .social { display:inline-block; } footer,footer:hover { width: 240px; height:64px; bottom: -55px; right: 0; } footer:hover { width: 504px; } .contextico {position: absolute; left: 380px; top: 0; width: 120px; } #avancement { background:black; } #playpause { position: absolute; top: 0px; left: 0px; z-index: 10; border:0px; width:60px; height:60px; opacity: 0.8; margin: 0; } #playpause:hover { opacity:1; } /* #playpause #iconplaypause { width: 100%; height: 100%; margin: 0; padding: 0; left: 0; top: 0; line-height: 60px; font-size: 40px; color: white; } */ footer:hover { bottom:0px; } footer .contextico div { line-height:60px; font-size:25px; margin-right:12px; } #trackinfo { text-shadow: none; display: block; height: 60px; width: 209px; float: left; cursor: default; color: black; font-size: 14px; position: absolute; left: 70px; } #trackinfo b { font-size:20px; } footer img { height: 50px; width: 50px; border:solid 5px white; float: left; margin: 0; position: absolute; left: 0px; } #playermaxi { position: absolute; bottom: 0px; left: 0px; width: 100%; background: rgba(0,0,0,0.2); height: 6px; overflow: hidden; border-radius: 0; z-index: 9999; top: auto; -webkit-transition:all 0.5s; } #playermaxi:hover { height:65px; opacity:0.8; } #prev, #next { line-height:60px; } #prev { position: absolute; left: 270px; } #iconplaypause { position:absolute; left: 310px; margin-top: 5px; } #next { position: absolute; left: 350px; } } @media screen and (max-width: 800px) { html body .masquemobile { display:none; } html body .down { display:none; } html .artistinfo { width:100%; } .fb-comments, .fb_iframe_widget { display:none; } article p { clear:both; } article .articledroit { width:auto; } #masquemenu .fleche, #masquemenu #mainmenu { display:none; } article.playlistart .bigplayer .playpause, article.label .bigplayer .playpause { line-height:240px; } article.label .bigplayer img , article.lab .bigplayer img, article.playlistart .bigplayer img { width: 240px; height: 240px; } article .bigplayer , article.playlistart .bigplayer , article.lab .bigplayer, article.label .bigplayer { display:block; margin:auto; clear:both; margin-left:calc(50% - 120px); margin-left:-webkit-calc(50% - 120px); margin-left:-moz-calc(50% - 120px); margin-left:-o-calc(50% - 120px); margin-right:calc(50% - 120px); margin-right:-webkit-calc(50% - 120px); margin-right:-moz-calc(50% - 120px); margin-right:-o-calc(50% - 120px); margin-bottom:30px; width: 240px; height: 240px; } article.lab .bigplayer .playpause { line-height: 240px; } #mobilemenu { display:block; } #social { display:none; } #search { position: absolute; right: 0px; top: 96px; z-index: 9999; color: white; border-bottom:none; } body .fb-comments,body .fb_iframe_widget { display:none; } #search.fixed { display:none; } header { height: 120px; z-index: 9994; } header .langue { top: 0; right: 0; } #main { top:0px; padding-bottom:50px; } body #main .slider{display:none;} #trackinfo { display: block; margin-top: 5px; width: 100px; height:40px; margin-left:5px; font-size: 14px; font-family: open_sansregular; overflow:hidden; width: -webkit-calc(100% - 200px); width: -o-calc(100% - 200px); width: -moz-calc(100% - 200px); width: calc(100% - 200px); } #trackinfo br { clear:none; display:none; } #trackinfo b{ font-size: 16px; margin-top:0px; } footer img { height:50px; width:50px; margin:0px; } footer .contextico div { font-size: 15px; line-height: 30px; margin-right: 10px; } footer .contextico { display:none; } #playermaxi { display:none; } footer,footer:hover { height:50px; width:100%; right:0px; } #logo { top: 27px; left: 50%; } #menu {display:none;} nav { display:none; } .masterbuttons { position:absolute; right:-10px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); top: 0px; } #signin { display:none; } .tagCloud { position: absolute; width: 100%; height: 400px; left: 0; top: 100px; margin: -200px -300px; text-align: center; font-size: 10px; margin:0; } .tagCloud .tag { font-size:25px; line-height:25px;height: 25px; } article, article.center, article.playlist, article.lab { width: -webkit-calc(100% - 20px); width: -o-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px); margin-right:0px; margin-left:0px; } article.playlist { width: -webkit-calc(100% ); width: -o-calc(100% ); width: -moz-calc(100%); width: calc(100% ); padding-left:0; padding-right:0; margin-right:0px; margin-left:0px; } article.playlist a { margin:5px; width: -webkit-calc(50% - 10px); width: -o-calc(50% - 10px); width: -moz-calc(50% - 10px); width: calc(50% - 10px); overflow:hidden; display:block; float:left; text-align:center; } article.playlist a img { margin:0px; } #login .box { border: white; width: -webkit-calc(100% - 40px); width: -o-calc(100% - 40px); width: -moz-calc(100% - 40px); width: calc(100% - 40px); right:0; } #login .box input { width: 100%; } article .socialmusic { opacity:1; } article .socialmusic .fb { display:none; } article .socialmusic .tw { display:none; } article .socialmusic .download { display:none; } #login .box .login3 { background:#ccc; display:block; } #main .j.mobiletop { top:125px; } a img { border:none; } .player img { float:left; } .player .pt { float:left; max-width:200px; } article.center img{ max-width:100%; } } article.center img { padding-bottom:20px; } article .player img { padding-bottom:0; } #search input { border-top:none; border-left:none; border-right:none; } .petitrond { border-radius: 117px; width: 104px; height: 104px; background: white; top: 1px; left: -13px; position: absolute; opacity: 0.4; display:none; } #mainmenu,#masquemenu .fleche { display:none; } #rubrique { opacity:0; } .fixed #rubrique { opacity:1; } #menuGauche a { font-family: opensansbold2; font-weight: normal; text-transform: uppercase; text-align: center; font-family: font-family:opensansbold2; font-weight: normal; text-transform: uppercase; padding: 3px 4px; text-decoration: none; float: left; text-transform: uppercase; font-size: 14px; margin-left: 10px; margin-top: 5px; margin-left: 5px; color: transparent; border: solid 1px transparent; -webkit-transition: color 0.6s; -moz-transition: color 0.6s; transition: color 0.6s; text-shadow: none; border-radius:2px; } #menuGauche a:hover { color:black; } .m3 #menuGauche a.titre1, .m1 #menuGauche a.titre2, .m2 #menuGauche a.titre3, .m0 #menuGauche a.titre4 { color: white; text-shadow: none; } .fixed #menuGauche:hover { opacity:1; -webkit-transition:opacity 0s; -moz-transition:opacity 0s; transition:opacity 0s; } .fixed #menuGauche a { background:black; width:75px; text-align:center; font-family:latoblack; padding:5px 0; text-decoration:none; float:left; text-transform:uppercase; font-size:12px; margin:0px; -webkit-transition:opacity 0s; -moz-transition:opacity 0s; transition:opacity 0s; } footer .contextico div.icon-shuffle { opacity:0.4; color:#222; } @media screen and (max-width:1000px) { body .signincenter { position: absolute; right: 0px; top: 0px; width: 88px; text-align: center; } } article { color:#555; max-width:650px; } article p { line-height:19px; margin-top:30px; } article p a, article p strong, article p b { font-family:opensansbold2; font-weight:normal; margin-left:5px; margin-right:5px; } foooter { right:0px; left:auto; } article.center { padding-left:10px; } .artistinfo { float:left; display:block; width:580px; margin-left:10px; } article.center h2 { font-weight: normal; font-family: opensansbold2; font-size: 15px; text-transform: uppercase; text-shadow: none; padding:0; text-decoration: none; color: black; margin-bottom:5px; width: 100%; text-align: center; border-bottom: 1px solid #000; line-height:0.1em; margin:10px 0 20px; } article.center h2 span { background:#fff; padding:0 10px; } .rel a img:hover { opacity:0.8; } body{ overflow-x:hidden; width:100%; } #signin { padding-left:30px; position:relative; } #signin img { background: black; vertical-align: middle; padding: 2px; border-radius: 999px; height: 19px; position: absolute; left: 7px; top: 3px; } article.playlist { max-width:690px; } @media screen and (min-width: 1500px) { #menu { width: 900px; } article.center { margin-left: calc(50% - 500px); margin-left: -webkit-calc(50% - 500px); margin-left: -moz-calc(50% - 500px); margin-left: -o-calc(50% - 500px); } /* MISE A JOUR HEADER 180 de haut */ #signin { padding:8px; margin-top:-15px; } header { height:180px; } #main { padding-top:210px; padding-bottom:40px; } aside {top: 230px; } #logo { top: 68px; margin: 0 0 0 -75px; width: 150px; } #menu a { font-size: 14px; padding: 5px 12px; } #menuGauche a { padding: 6px 7px; font-size: 16px; margin-left: 10px; margin-top: 7px; margin-left: 7px; } #main .j { top:235px; } #main .slider { top:185px; } #search { top:80px; } header .langue { right: 2px; } #signin img { height: 22px; left: 6px; top: 6px; width: 22px; } article.playlist { max-width: 850px; width: 850px; } #signin { padding-left:35px; } /* FIN MISE A JOUR */ } nav { -webkit-transition:all 0.4s; z-index:999; } .right:after { left: -2px; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-left-color: #DADADA; border-width: 24px; margin-top: -30px; } .left { position:relative; color:white; } .left:after { left: -24px; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-right-color: #DADADA; border-width: 24px; margin-top: -30px; } @media screen and (-webkit-min-device-pixel-ratio:0) { input[type="range"] { -webkit-appearance: none; background-color: #ddd; height: 2px; outline:none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; position: relative; top: -1px; z-index: 1; width: 11px; height: 11px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; background:#777; } } input[type="range"] { opacity:0; height: 20px; position:absolute; left:0px; } footer, footer:hover { width:400px; height:90px; bottom:-65px; } footer.visible,footer.visible:hover { bottom:0; } footer .icon-expand { position: absolute; top: -42px; left: 91px; opacity: 0.4; } footer .icon-shuffle { position: absolute; left: -91px; } @media screen and (max-width: 800px) { #playerbasfooter .icon-shuffle:hover { opacity: 1; } #playerbasfooter .icon-shuffle { position: absolute; top: 43px; left: 40px; height: 20px; width: 20px; font-size: 20px; line-height: 20px; cursor: pointer; text-shadow: none; margin: 0; padding: 5px; z-index: 99; opacity: 0.5; color: #222; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -ms-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s; } } footer { -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); transform:scale(0.8); -webkit-transform-origin: bottom right; -o-transform-origin: bottom right; -moz-transform-origin: bottom right; transform-origin: bottom right; -webkit-transition:all 0.5s; -o-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s; } footer { right:-248px; } footer.playing,footer:hover { right:0px; -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); transform:scale(1); } footer img { height:80px; width:80px; } footer #trackinfo { left:90px; width: 310px; font-size:14px; color:rgb(116, 116, 116); height: 41px; overflow:hidden; } footer #trackinfo b { font-family:opensansbold2; font-size:16px; font-weight:normal; } b { font-family:opensansbold2; font-weight:normal; } footer #playermaxi:hover, footer #playermaxi { height:15px; width:305px; left:90px; bottom:5px; } #prev, #next, #iconplaypause { font-size: 26px; line-height:20px; margin:0px; padding:0px; text-shadow:none; position:absolute; z-index:99; padding:5px; height:20px; width:20px; top:43px; } #prev { left:90px; } #next { left:150px; } #iconplaypause { left:120px; } .contextico { position: absolute; left: 283px; top: 27px; line-height:20px; } footer .contextico div { font-size: 20px; margin-right: 9px; text-shadow: none; } @media screen and (max-width: 400px) { footer #trackinfo, footer #trackinfo b {font-size:12px;} } @media screen and (max-width: 800px) { article a.titre { clear:both; } .j.list .dm .social { position: absolute; top: 0; right: 40px; width: 20px; overflow: hidden; display:block; } footer #trackinfo { top:0; margin:0; padding:0; width:80%; width: -webkit-calc( 100% - 240px); width: -moz-calc( 100% - 240px); width: -o-calc(100% - 240px); width: calc(100% - 240px); margin:5px; } footer,footer:hover,footer.visible,footer.visible:hover { width:100%; -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); transform:scale(1); height:50px; bottom: 0px; } footer img { width:50px; height:50px; } footer .masterbuttons { top: -37px; right: 209px; -webkit-transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); } article a.date { display:none; } article { border:none; } .player .playpause { top: 5px; } article.focus .bigplayer { margin-top: 10px; } } @media screen and (max-width: 1050px) and (min-width:650px) { article { margin-left:-webkit-calc(50% - 320px); margin-left:-moz-calc(50% - 320px); margin-left:-o-calc(50% - 320px); margin-left:calc(50% - 320px); } article.focus .bigplayer { margin-top: 10px; } } .left:hover,.right:hover { color:transparent; } /* ARTICLE FOCUS */ article.focus .bigplayer { height:250px; width:100%; overflow:hidden; margin-left:0; } article.focus .bigplayer .playpause { line-height:250px; } article.focus .bigplayer img { height:250px; width:700px; } article.focus a.titre { color: white; text-shadow: black 0 0 5px; position: absolute; top: 274px; margin-left: 5px; } /* FIN ARTICLE FOCUS */ .j.icon .dm:hover .titre b, .j.icon .dm .titre b { font-family:opensansbold2; font-weight:normal; text-transform:uppercase; } #mce-EMAIL { width:220px; border: solid 1px #ccc; } #mc-embedded-subscribe { float:right; background: #666; color: white; border-radius:3px; border:none; text-transform:uppercase; padding:4px; font-weight:bold; } #downloadlink a { text-decoration:none; color:#ccc; text-shadow:none; } #downloadlink a:hover { color:black; } #login { display:none; } #login.show { display:block; } @media screen and (min-width: 800px) { #login .box { border: none; position: absolute; width: 279px; height: 130px; padding-right: 115px; right: -500px; overflow: hidden; padding-bottom: 0; font-family: opensansbold2; font-size: 14px; text-transform: uppercase; /* -webkit-transition:right 1s; -moz-transition:right 1s; transition:right 1s;*/ overflow:hidden; } #login.show .box { } #login .box input { width: 209px; border: solid #555 2px; padding: 2px; position: absolute; margin-top: -20px; border-top: 0; border-left: 0; border-right: 0; padding-left: 66px; text-align: right; background: transparent; outline:0; } #login .ico { color:white; } #login .fblogin { width:50px; height:50px; right:60px; left:auto; color:#3b5998; } #login.show { visibility:visible; transition:none; -webkit-transition:none; -moz-transition:none; } #login { /*display:block;*/ /* transition:visibility linear 1s; -webkit-transition:visibility linear 1s; -moz-transition:visibility linear 1s; */ } #login .box:before { content:"LOGIN WITH"; position: absolute; right: 0; font-size: 12px; width: 109px; bottom: 50px; } #login .twitterlogin { width:50px; height:50px; right:5px; left:auto; color:#9AE4E8; } #login .create { margin-top: 13px; margin-bottom: -16px; } #login .msg { color: red; padding-bottom: 0; text-align: center; font-size: 20px; padding-top: 0; line-height: 12px; height: 24px; font-family: opensansbold2; font-size: 12px; padding-top:2px; } #login .lost { margin-top: 8px; text-transform: uppercase; margin-bottom: -10px; } #login .box .login { font-family: opensansbold2; font-size: 14px; } #login .box .login3 { margin-right: 5px; display: block; width: 14px; text-align: center; position: absolute; top: 0; right: -5px; background:#444; color:black; } #login .box .login3:before { content:"X"; font-family: opensansbold2; font-size: 14px; width: 14px; margin-left:3px; color:white; } article .date:before { content: " "; position: absolute; margin-top: -70px; width: 60px; border-top: solid #ccc 2px; } #menuGauche a.titre4 span { font-size: 20px; } #menuGauche a { padding: 6px 7px; font-size: 16px; margin-left: 10px; margin-top: 0px; margin-left: 7px; margin-bottom: 0px; line-height: 28px; position:relative; padding:0px; padding-left: 37px; margin-bottom: 2px; } article.playlistart { width: 650px; } #yddd { z-index: 10; position: absolute; top: 15px; left: 50%; margin-left: -95px; } } @media screen and (min-width: 1500px) { #yddd { z-index: 10; position: absolute; top: 10px; left: 50%; margin-left: -95px; } article .date:before { content: " "; position: absolute; margin-top: -105px; } #login .box { width: 279px; height: 160px; padding-right: 115px; padding-top: 20px; padding-bottom: 0; } #login .box input { width: 209px; padding: 2px; margin-top: -20px; padding-left: 66px; } #login .create {margin-top: 16px; margin-bottom: 12px; } #login .msg { font-size: 12px; padding-top: 0; height: 26px; } #login .lost { margin-top: 8px; margin-bottom: 20px; } aside { right:70px; } .signincenter { right:70px; } #search { right:105px; } #menuGauche a { padding: 6px 7px; font-size: 16px; margin-left: 10px; margin-top: 0px; margin-left: 7px; margin-bottom: 0px; line-height: 35px; position:relative; padding:0px; padding-left: 47px; margin-bottom: 6px; } } input { outline:0; } article { border-left:none; line-height:19px; } #rubrique { width:280px; } #rubrique div a { font-family: opensansbold2; position:relative; padding-left:35px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s; opacity:1; width:0; line-height:30px; font-size:14px; overflow:hidden; text-shadow:none; color:transparent; text-align:left; } #rubrique div a span { position:absolute; left:0; top:0; background: black; width: 28px; height: 28px; display: inline-block; vertical-align: middle; border-radius: 28px; line-height: 28px; color:white; text-align:center; } #rubrique div a span.icon-file { font-size:18px; } header.m1 #rubrique:hover div a, header.m2 #rubrique:hover div a, header.m3 #rubrique:hover div a, header.m0 #rubrique:hover div a { width:0px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s; color:transparent; } header #rubrique:hover div a:hover { width:80px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s; color:black; } @media screen and (max-width: 1150px) { #search.fixed {right:0;} nav.fixed #menu { left: auto; right: 10px; left: auto;} } @media screen and (max-width: 1050px) { body .signincenter { position: absolute; right: 0px; top: 0px; width: 88px; text-align: center; } #search.fixed {right:0;display:none;} #menu a { } nav.fixed #menu { left: auto; right: 0px; width: 650px; left: auto;} } @media screen and (max-width: 890px) { #search.fixed {right:0;display:none;} nav.fixed #menu a { padding: 8px 3px; } nav.fixed #menu { width: 550px } #ydd { display:none; } } #fullscreen #downloadlink { display:none; } #fullscreen .icon-expand { display:none; } .shopOBJ { display:block; float:left; width:300px; height:350px; position:relative; } .shopOBJ { display:block; float:left; width:320px; height:390px; position:relative; } .shopOBJ .titre { position: absolute; left: 5px; top: 320px; font-size: 14px; line-height: 30px; font-family: opensansbold2; color: black; text-transform: uppercase; width: 190px; overflow: hidden; height: 30px; text-align:left; text-decoration:none; } .shopOBJ .prix { position: absolute; left: 195px; top: 320px; font-size: 16px; line-height: 30px; font-family: opensansbold2; color: black; text-transform: uppercase; width: 60px; overflow: hidden; height: 30px; text-align:right; color:#ccc; text-decoration:none; } .shopOBJ .info { position: absolute; left: 260px; top: 320px; font-size: 16px; line-height: 30px; font-family: opensansbold2; color: black; text-transform: uppercase; width: 60px; overflow: hidden; height: 30px; text-align:center; background:black; color:white; text-decoration:none; } .shopMASTER .prix { font-size: 23px; line-height: 30px; font-family: opensansbold2; color: black; text-transform: uppercase; width: 150px; overflow: hidden; height: 30px; text-align: left; color: #8F8F8F; text-decoration:none; } .slider span.icon-zoom-out { position:absolute; left:0px; color:white; text-shadow:none; } .slider span.icon-zoom-in { color:white; text-shadow:none; } .slider span.icon-zoom-out:before { content:"-"; line-height: 20px; font-size:18px; font-family: opensansbold2; color:black; } .slider span.icon-zoom-in:before { content:"+"; line-height: 20px; font-size:18px; font-family: opensansbold2; color:black; } .masterbook { width: 300px; display: block; float: right; } .masterbook a { display:block; clear:both; float:left; text-decoration:none; width:100%; text-align:center; line-height:50px; height:50px; overflow:hidden; text-transform:uppercase; font-family: opensansbold2; text-align:left; font-size:12px; opacity:1; } .masterbook a:hover { opacity:0.6; } .masterbook a.mail { color:black; font-size:14px; text-align:center; margin-top:-20px; } .biglogo { margin-left:40Px; width:220px; height:220px; background:black; text-align:center; border-radius:220px; line-height:220Px; position:relative; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); margin-top: -63px; margin-bottom: -53px; } .biglogo img { position:absolute; left:20px; width:180px; top: 70px; } #degrade { position:absolute; bottom:-11px; height:11px; width:100%; z-index: 9995; background:white; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */ } .fixed #degrade { position: fixed; top: 30px; bottom:auto; } #menuGauche .container { position:absolute; top:0px; left:50%; width: -620px; overflow:hidden; margin-left: -319px; } #menuGauche a , #ubrique a { padding:0; border-right:solid 1px #777; } #menuGauche a.titre1 { padding-right:5px; } #ubrique a span.img { background-color:transparent; display:block; height:25px; margin-top:6px; margin-bottom:6px; float:left; background-size:contain; width:125Px; background-repeat:no-repeat; background-position:left center; margin-left:15px; } #menuGauche a span.img { background-color:transparent; display:block; height:25px; margin-top:6px; margin-bottom:6px; float:left; background-size:contain; width:125Px; background-repeat:no-repeat; background-position:left center; margin-left:15px; } header a.titre1 span { background-image:url('m0.png'); opacity:0.4; } header.m3 a.titre1 span, header a.titre1:hover span { opacity:1; } header.m3.fixed #menuGauche a.titre1 { width:100px; } header a.titre3 span { background-image:url('j0.png'); opacity:0.4; } header.m2 a.titre3 span, header a.titre3:hover span { opacity:1; } header.m2.fixed #menuGauche a.titre3 { width:100px; } header a span { -webkit-transition:opacity 0.5s; -moz-transition:opacity 0.5s; -o-transition: opacity 0.5s; transition:opacity 0.5s; } header a.titre2 span { background-image:url('l0.png'); opacity:0.4; } header.m1 a.titre2 span, header a.titre2:hover span { opacity:1; } header.m1.fixed #menuGauche a.titre2 { width:100px; } header a.titre4 span { background-image:url('w0.png'); opacity:0.4; } header.m0 #menuGauche a.titre4 span, header a.titre4:hover span { opacity:1; } header.m0.fixed #menuGauche a.titre4 { width:100px; } header #menuGauche a.titre2 {border-right:none;} .left { margin-left: 5px; } .right { margin-right: 5px; } @media screen and (max-width: 1500px) { #menuGauche { height: 30px; } #menuGauche .container { margin-left: -214px; } #menuGauche a span.img { background-color: transparent; display: block; height: 22px; margin-top: 3px; margin-bottom: 6px; float: left; background-size: contain; width: 100Px; background-repeat: no-repeat; background-position: left center; margin-left: 3px; } } .fixed #menuGauche { position: fixed; z-index: 999999; top: 0; width: 100%; background: rgba(0,0,0,0.8); left: 0; height: 30px; width: 214px; overflow: hidden; } body .fixed #menuGauche a { width:33px; padding:0; -webkit-transition:opacity 0.5s,width 0.5s; -moz-transition:opacity 0.5s,width 0.5s; -o-transition:opacity 0.5s,width 0.5s; transition:opacity 0.5s,width 0.5s; } body .fixed #menuGauche .container { position: absolute; top: 0px; left: 0; width: auto; padding:0; overflow: hidden; margin-left: 0; } body .fixed #menuGauche a span.img { background-color: transparent; display: block; height: 19px; margin-top: 4px; margin-bottom: 6px; margin-left: 8px; } body header.fixed #menuGauche:hover .container a { width:33px; } body header.fixed #menuGauche .container a:hover { width:100px; } #signincenter { z-index: 1099999; position:absolute; top:0px; right:0px; } .fixed #signincenter { position:fixed; } #signin { display: block; position: relative; float: right; margin: 0 10px 0 0; padding: 0 10px; height: 38px; opacity: 1; background: white; line-height: 38px; font-size: 15px; border: none; border-radius: 0; color: black; } header #signincenter .langue { text-align: right; display: block; position: relative; float: right; margin: 0; right:auto; left:auto; top:auto; padding: 0 10px; height: 38px; opacity: 1; background: transparent; line-height: 38px; font-size: 15px; border: none; border-radius: 0; color: white; width:70px; } header .langue a { font-family:latoblack; text-decoration:none; display:inline; color: white; float:none; position:relative; margin:0; padding:0; line-height: 38px; font-size: 15px; text-shadow:none; } header.fixed #signincenter .langue, header.fixed #signincenter .langue a { line-height: 30px; display:none; } @media screen and (max-width: 800px) { #degrade { display:none; } article.focus a.titre { top: 55px; } #signin { display:none; } footer { right:0px; } #menuGauche {display:none;} #main { padding-top: 120px; } #yddd { display:none; } body #main .slider { opacity:0; top:-200px; left:-200px; position:absolute; height:1px; width:1px; display:none; } #main .j { top:150px; } } #social { position:absolute; top:125px; z-index:9996; } #yddd { position:absolute; top:140px; z-index:9996; } @media screen and (min-width: 1500px) { footer{ } #social { position:absolute; top:169px; } #yddd { position:absolute; top:190px; } } @media screen and (max-width: 1500px) { #search {top:50px } #degrade { bottom: -20px; height: 20px; } header #signincenter .langue, header #signincenter .langue a, header #signincenter #signin { line-height:30px; height:30px; font-size: 14px; } } @media screen and (max-width: 1200px) { .fixed #signin { overflow: hidden; width: 60px; margin-right: 0; } .fixed #signincenter .langue { display:none; } #menu a { padding: 8px 7px; } } header .fixed #logo { display:none; } header.fixed { height:30px; z-index: 9997; } @media screen and (max-width: 500px) { #result { box-shadow:none; -webkit-box-shadow:none; } .left,.right { -webkit-transform: scale(0.75); margin:0; } body #main .slider { opacity:0; top:-200px; left:-200px; position:absolute; height:1px; width:1px; display:none; } header, header.fixed { height: 40px; position:fixed; } #main .j, #main .j.mobiletop { top:50px; } .fixed #logo { display:block; } header #signincenter .langue, header #signincenter .langue a, header.fixed #signincenter .langue, header.fixed #signincenter .langue a { height: 12px; font-size: 10px; line-height: 14px; } #logo { top: 4px; margin: 0 0 0 -40px; width: 80px; } #main {padding-top: 40px; } body .j.mobiletop { top: 50px; } #search { position: fixed; right: 0px; top: 16px; z-index: 9999; color: white; border-bottom: none; } } #main .slider { z-index: 9998; } #main .slider input { height:1px; width:1px; position:absolute; } footer { z-index: 100001; } .infospage .titreinfo { font-weight: normal; font-family: opensansbold2; font-size: 25px; line-height: 23px; text-transform: uppercase; text-shadow: none; margin-top: 20px; text-decoration: none; color: black; margin-bottom: 20px; display: inline-block; border-bottom: solid 3px black; float:left; clear:both; } .infospage .main { display:block; width:100%; float:left; } .infospage .bloc { display:block; width:40%; margin-left:10%; float:left; } .infospage .bloc b { font-size:14Px; display:block; clear:both; padding-bottom:5px; } .infospage .bloc1 a { font-size:14Px; display:block; clear:both; padding-bottom:5px; text-decoration:none; opacity:0.5; } .infospage .bloc1 { display: block; float: left; width: 160px; margin-right: 20px; margin-bottom: 400px; } #delai {position: absolute; top: 1px; right: 2px; font-size: 12px; color: white; font-family: opensansbold2; z-index:99998; text-shadow: none; } #masque {position: absolute;z-index:99999; top: 0px;left:0px;width:100%;height:100%;cursor:pointer;} #iphone .close { display: block; float: right; padding: 10px; position: absolute; top: 0; right: 0; } #iphone img { vertical-align: middle; margin: 10px; height: 62px; border-radius: 10px; box-shadow: #ccc 1px 1Px 2px; float: left;margin-top:-5px } #iphone { z-index: 99999999; position: absolute; display: block; position: absolute; float: right; margin: 0 10px 0 0; padding: 0 10px; height: 38px; opacity: 1; background: white; line-height: 26px; font-size: 15px; border: none; border-radius: 0; color: black; width: 100%; text-shadow: none; font-family: opensansbold2; margin: 0; padding: 0; top: 15px; box-shadow:black 0 0 20px; left:0; height:84px; height: 52px; padding: 15px 0; } #fullscreen .icon-share { display:none; } #login .box .login3 { opacity:1; opacity: 1; background: black; } .eventLINK { display:inline-block; margin:10px; height:200px; overflow:hidden; text-decoration:none ; text-transform:uppercase; font-family:bebas; line-height:50px; font-size: 16px; } .eventLINK img:hover { opacity: 1.0; } #search.fixed { top: -2px; position: fixed; } #signin { background: rgba(255,255,255,1) ; background-position-x: 9px; background-position-y: 4px; padding-left: 35px; } @media screen and (min-width: 1500px) { #signin { background-position-y: 8px; } } .mentions { font-size: 12px;text-align: left;line-height: 16px;padding-left: 15px; } .mentions a { text-decoration:none; } article.focus p { display: block; clear: both; } #login { overflow: hidden; } .linkscentre { display:none; } @media screen and (min-width: 1050px) { article.playlist { width:690px; } .linkscentre { position: absolute; top: 240px; width: 240px; text-align: center; display:block; } .playlistart .linkscentre { position: absolute; top: 315px; width: 300px; text-align: center; display:block; } .bookingrellabel { position: absolute; top: 340px; width: 300px; text-align: center; margin-left: 100px; } .datelabel { display: block; width: 400px; float: left; } .lab .titre { text-align:center; width:520px; margin-left: 140px; font-size: 20px; } .lab.center .titre { text-align:center; width:auto; font-size: 27px; } article .linkscentre a img { padding:0; float:none; } .focus .linkscentre { display: block; width: 100%; text-align: center; position:relative; top: auto; } .lab .linkscentre { display: inline-block; width: 100%; text-align: center; position:relative; top: auto; /*margin-top: 20px;*/ } .linkscentre a { display: inline-block; padding: 7px 10px; text-decoration: none; margin-bottom: 5px; font-family: opensansbold2; font-size: 13px; height: 23px; line-height: 43px; opacity: 1; color: #aaa; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; } .bookingrellabel .alldate .booklabel b.datelabel { width: 400px; } } .alldate .datelabel { width: 160px; } @media screen and (min-width: 1500px) { article.playlist { width: 850px; } } article .social a { color: #444; font-family: open_sansbold; } @media screen and (min-width: 400px) { center .eventLINK img { width: 400px; } #main center .eventLINK { width: 400px; background-color: #eeeeee; border: 1px solid #444444; } } .digger { text-align:center; background:#fff; padding:20px; min-height:100%; text-decoration: none; float:left; width:100%; cursor:pointer; } .diggers { display:block; background:#eee; width:250px; height:400px; margin:20px; position:relative; cursor:pointer; text-decoration: none; float:left; cursor:pointer; } .diggers .titre { position:absolute; top:0px; left:0px; width:250px; height:250px; line-height:250px; text-align:center; text-decoration: none; cursor:pointer; } .diggers .description { position:absolute;top:250px; width: 230px; height: 109px; line-height: 24px; font-size: 12px; text-decoration: none; color: #333; padding: 10px; display: block; overflow: hidden; text-align:center; cursor:pointer; } .diggers .titre .center { width:200px; vertical-align:middle; display:inline-block; line-height:normal; text-align:center; font-size:25px; color:white; text-shadow:black 0 0 5px; text-decoration: none; cursor:pointer; } .diggers .links { cursor:pointer; color:#7ec5d1; } /*TONY TEST*/ .boxartist { box-sizing: border-box; float: left; width: 33.33%; } .box2{ box-sizing: border-box; float: left; width: 23%; margin-left: 2%; font-family: 'bebas'; font-size: 20px; font-weight: lighter; text-decoration: inherit; border: 1px solid #444444; } .box2 .testsocial { text-align: right; padding: 5px; background-color: #eeeeee; } .box2 .testcollectivename { position:absolute; margin-left:10px; color:#444444; background-color: #eeeeee; font-size: 28px; padding: 8px; } .box a img:hover { filter: sepia(100%); -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%); } .box2 a img:hover { filter: sepia(100%); -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%); } .detailsartist { width: 100%; } .detailsartist .title1 { font-size: 50px; text-align: center; font-family: 'bebas'; font-weight: lighter; } .detailsartist .title2 { margin-top: -20px; font-size: 20px; text-align: center; font-family: 'richardmiller'; color: #444444; font-weight: lighter; } .detailsartist .artistsocial { text-align: center; margin-top:-40px; } .detailsartist .text { width: 50%; text-align: center; margin-left: 25%; line-height: 1.5; font-size: 14px; color: #444444; } .detailsartist .artistimage { width: 40%; text-align: center; margin-left: 30%; margin-top: 40px; } .detailsartist .title3 { font-size: 35px; text-align: center; font-family: 'bebas'; font-weight: lighter; color: #444444; margin-top:40px; } .detailsartist .artistreleases { width: 40%; margin-left: 30%; margin-top: 20px; border: 1px solid #444444; background-color: #eeeeee; } .detailsartist .artistreleases a { text-decoration: none; font-size: 15px; } .testdigger { margin-top: 50px; } .testdigger .testonedigger { margin-left: 20px; display: inline-block; } .testdigger .testonedigger figure figcaption { text-align: center; } .content-team { padding: 50px 0 10px 0; font-family: latoblack; } .content-team h3.title { margin-left: 105px; font-size: 17px; text-transform: uppercase; } .row-redactors { overflow: hidden; max-height: 250px; padding-bottom: 5px; } .redactors, .articles { text-align: center; overflow-x: scroll; white-space: nowrap; padding-bottom: 100px; } .redactors { padding-top: 2px; overflow-y: hidden; } .redactor { display: inline-block; vertical-align: top; -webkit-transition: opacity .4s; -moz-transition: opacity .4s; -ms-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .redactor.transparent { opacity: 0.1; } .redactor.transparent:hover { opacity: 0.5; } .redactor:first-child, .article:first-child { padding-left: 105px; } .img-circle { display: inline-block; position: relative; padding: 0 35px; -webkit-transition: opacity .40s; -moz-transition: opacity .40s; -ms-transition: opacity .40s; -o-transition: opacity .40s; transition: opacity .40s; } .redactor:first-child .img-circle { padding-left: 0; } .img-circle img { border-radius: 50%; cursor: pointer; } .img-circle .name { font-size: 18px; padding-top: 10px; padding-bottom: 2px; max-width: 200px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .img-circle .role { font-size: 11px; text-transform: uppercase; opacity: 0.7; } .row-articles { position: relative; padding: 20px 0 0 0; height: 240px; bottom: 0; background-color: #e7e7e7; /*overflow: hidden;*/ } .row-articles h4 { margin: 0 0 20px 105px; text-transform: uppercase; text-align: left; font-size: 17px; } .row-articles .articles-filter { margin-left: 10px; border: none; font-size: 16px; font-family: latoblack; background-color: #e7e7e7; -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; padding-right: 25px; z-index: 10; cursor: pointer; } .row-articles h4, .row-articles .articles-filter { display: inline-block; } div.arrow-down { width: 0; height: 0; display: inline-block; vertical-align: super; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #000; margin-left: -21px; z-index: 1; } .row-articles .button-scroll { position: absolute; top: 50%; transform: translateY(-50%); } .row-articles .button-scroll button { padding: 20px; background-color: rgba(1, 1, 1, 0); border: none; opacity: 0.2; cursor: pointer; -webkit-transition: opacity .4s; -moz-transition: opacity .4s; -ms-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .row-articles .button-scroll button:hover { opacity: 1; } .row-articles .button-scroll button:focus { outline: 0; } .row-articles .button-scroll button:after { position: absolute; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); top: 50%; height: 0; width: 0; content: " "; border: solid rgba(136, 183, 213, 0); border-width: 24px; } .row-articles .button-scroll#arrow-left { left: 0; } .row-articles .button-scroll#arrow-right { right: 0; } .row-articles .button-scroll#arrow-right button:after { left: 0; border-left-color: #000; } .row-articles .button-scroll#arrow-left button:after { right: 0; border-right-color: #000; } .article { padding: 0 15px; display: inline-block; width: 240px; vertical-align: top; text-decoration: none; color: #444; } .article:hover .text .title { color: #444; opacity: 1; } .article .img-wrapper { height: 135px; } .article .text { vertical-align: middle; margin: 10px 0; } .article .text .title { color: #444; display: inline-block; font-size: 13px; font-weight: lighter; font-family: latoblack; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; opacity: 0.8; } .article .text .subtitle { color: #848484; display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-transform: uppercase; } @media screen and (max-height: 800px) { .img-circle img { width: 140px; } } #close-row-articles { color: black; display: inline-block; text-align: center; float: right; margin-right: 25px; font-size: 25px; margin-top: -7px; cursor: pointer; } #wb-ad-grid .wb-ad-grid-header { display: none !important; } article .fb-comments.fb_iframe_widget, article .fb-comments.fb_iframe_widget span, article .fb-comments.fb_iframe_widget span iframe { width: 100% !important; } article #wb-ad-grid { padding-top: 20px !important; margin-top: 15px !important; border-top: 1px solid #ccc !important; }