/*
Theme Name: Self Service Magazine
Author: Merci Michel
www.merci-michel.com
*/

@font-face {
    font-family:'helvetica-zbold';
    src: url('font/helvetica-z-self-webfont.eot');
    src: url('font/helvetica-z-self-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/helvetica-z-self-webfont.woff') format('woff'),
         url('font/helvetica-z-self-webfont.ttf') format('truetype'),
         url('font/helvetica-z-self-webfont.svg#helvetica-zbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}
body {
	background: #fff;
	color: #000;
	line-height: 1;
	font-family: Times, serif;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
/*blockquote:before, q:before,*/
blockquote:after, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a {
    color:#000;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a img {
	border: 0;
}
.seemore-link a, .seemore-link a:hover {
	cursor: pointer;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
p, blockquote { font-size:12px; }
p strong { font-weight:bold; }
em { font-style:italic; }

blockquote { display: none; width: 320px; margin-bottom: 4px;}

/* =Structure
----------------------------------------------- */
#page {position:relative;}
#header { height:90px; border: none; }
#headerContent { padding: 16px 0 7px 0px; position:fixed; z-index:10; background:#fff; width:100%; }
#header #mobileMenu { display:none; }
#header nav { font-family: "HelveticaNeue-CondensedBold"; font-size:16px;width:100%;text-align:center; }
#header nav #menuLabel { display:none; }
#header nav ul { display:inline-block; }
#header nav li { text-transform:lowercase; display:inline-block; margin-left:5px; white-space:nowrap; }
#header nav a { text-decoration:none; }
#header nav a:hover { text-decoration:underline; }
#header nav .socials li a { display:inline-block; overflow:hidden; background:url(img/picto.png) no-repeat; width:6px; height:11px; text-indent:9999px; }
#header nav .socials li.tw a { background-position:-15px 0; width:12px; }
#header nav .socials li.tb a { background-position:-36px 0; width:8px; }
#header nav .socials li.vi a { background-position:-52px 0; width:10px; }
#header nav .socials li.in a { background-position:-40px -36px; width:11px; }
#header h1 {     
margin-left: 16px;
    clear: both;
    margin-top: 8px;
    width: 100%;
    text-align: center;
}

#header h1 a {
	display:block;
	font-family:"HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
	font-weight:bolder;
	font-size:45px;
	text-decoration:none;
	letter-spacing: 1px;
	color:#000;
	-webkit-transition: color 0.3s cubic-bezier( 0.25, 0.46, 0.45, 0.94);
    -moz-transition: color 0.3s cubic-bezier( 0.25, 0.46, 0.45, 0.94);
    -o-transition: color 0.3s cubic-bezier( 0.25, 0.46, 0.45, 0.94);
    -ms-transition: color 0.3s cubic-bezier( 0.25, 0.46, 0.45, 0.94);
    transition: color 0.3s cubic-bezier( 0.25, 0.46, 0.45, 0.94);
	
}
#header h1 a:hover {
	color: #585858;
    -webkit-transition: color 0.3s cubic-bezier( 0.25, 0.46, 0.45, 0.94);
    -moz-transition: color 0.3s cubic-bezier( 0.25, 0.46, 0.45, 0.94);
    -o-transition: color 0.3s cubic-bezier( 0.25, 0.46, 0.45, 0.94);
    -ms-transition: color 0.3s cubic-bezier( 0.25, 0.46, 0.45, 0.94);
    transition: color 0.3s cubic-bezier( 0.25, 0.46, 0.45, 0.94);
}

/* SEARCH */
#header #searchBloc { float:left; padding-left: 15px; }
#header #searchBloc div { margin:3px 0 0; }
#header #searchBloc label { font-family:"helvetica-zbold", Arial, sans-serif; font-size:20px; float:left; color:#e0e0e0; font-size:20px; line-height:22px; margin-right:5px; margin-top:0; }
#header #searchBloc label.focus { color: #000; }
#header #searchBloc label span { display:none; }
#header #searchBloc input { 
 font-family: "helvetica-zbold", Arial, sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    color: #000;
    border: 0;
    padding: 0;
    height: 18px;
    margin: 0;
    text-transform: lowercase;
    width: 100px;
}
#header #searchBloc input::-webkit-input-placeholder { color:#e0e0e0; }
#header #searchBloc input:-moz-placeholder { color:#e0e0e0; }
#header #searchBloc input:-ms-input-placeholder { color:#e0e0e0; }
#header #searchBloc input::-ms-clear { display: none; }
#header #searchBloc input#searchsubmit { display:none; }

.ac_results { background:url(img/bg.png); width:100%; height:100%; padding:20px 0; z-index:10; }
.ac_results iframe { display:none; }
.ac_results li { font-size:12px; cursor:pointer; }
.ac_results li:hover { text-decoration:underline; }

/* GRID */
#main { padding-left:16px; position:relative; padding-bottom:50px; padding-top: 2px; }
#main img { display:block; }
#main #promotions { min-height:362px; }
#main #posts { clear:both; overflow:hidden; padding-bottom:10px; }
#main #posts { margin-top: -15px; }
#main .post { /* float:left; */ /*  margin-right:16px; */ /*margin-bottom:10px;*/
	margin-top: 10px;
	padding-top: 8px;
	text-align:center;
	border-top:1px solid #000;
	opacity: 0;
}

/* #main .post { border: 1px solid red; } */

#main .post.one_column { width:229px; }
#main .post.two_columns { width:476px; }
#main .post.three_columns { width:723px; }

#main .post.firstLine { /* margin-top:0; padding-top:0; */ border-top:solid 1px; }
/* #main .post.promo.large_promo { width:474px; } */
#main .post h2 { font-size:12px; margin-bottom:1px; text-transform:uppercase; }
#main .post h2 a { text-decoration:none; }
#main .post h2 a:hover { text-decoration:underline; }
#main .post .imgLink { display:block; margin-bottom: 9px; position:relative; }
/*
#main .post .imgLink .loader { width:229px; height:100%; position:absolute; top:0; left:0; z-index:2; display:block; background:url(img/bg-thumb-loader.png); }
#main .post .imgLink .loader span { position:absolute; top:50%; left:50%; display:block; background:url(img/loader-image.gif) no-repeat; width:20px; height:20px; margin:-10px 0 0 -10px; }
*/
#main .post.tumblr img { width:229px; }
#main .post.video .imgLink { min-height:100px; }
#main .post.video .imgLink span.picto { width:22px; height:15px; background:url(img/video.png) no-repeat; position:absolute; top:50%; left:50%; margin:-7px 0 0 -11px; z-index:1; display:block; }

/*#main .post.promo .imgLink { height:295px; }*/
/*#main .post.promo img { border:10px solid #000; }*/

/*#main .post.promo.large_promo .imgLink img { width:474px; }
#main .post.promo.large_promo .imgLink span.border { width:454px; }
#main .post.promo.large_promo .imgLink .loader { width:474px; }
*/
#main .post.quote { text-align:left; padding-top:10px;  }
#main .post.quote .theQuote { font-size:21px; font-style:italic; margin-bottom:5px; line-height:20px; letter-spacing: -1px; }
.pagination { clear:both; width:100%; position:absolute; z-index:10; bottom:0; }
.pagination p { padding:10px 0; text-align:center; }
.pagination a { text-indent: 100%; color: #FFF; /* color:#fff; font-size:10px; width:100px; height:30px; background:#cbcbcb; line-height:30px; display:inline-block; text-decoration:none; font-weight:bold; font-family:Helvetica, Arial, sans-serif; */ 	}
#infscr-loading { position:absolute; bottom:0; left:50%; margin-left:-20px; width:24px; height:24px; }
#infscr-loading img { width:24px; height:24px; display:block; }

/*
body.ajax #headerContent { display: none; }
body.ajax #main { margin-top: -63px; }
*/
body.ajax {
	z-index: 2;
	position: relative;
}
body.ajax #page {
	z-index: 3;
}

/* ARTICLE */
#article { width:100%; /*border-top:1px solid #ededed;*/ position:absolute; z-index:1; overflow:hidden; }
.article { padding:40px 0 40px 16px; overflow:hidden; }
#main .article { padding:0; }
.article h2 { font-size:12px; font-weight:bold; margin-bottom: 0; }
.article p { margin-bottom:4px; }
.article .vimeo { max-width:964px; /* float:left; */ margin:0 0 16px 0; }
.article .vimeo iframe { display:block; }
/*.single-promo .article img { border:10px solid #000; }*/

.article .gallery { width: 100%; }
.article .gallery-item { margin:0 18px 16px 0; display: inline-block; vertical-align: top; }
.article .gallery-item figcaption { margin-top:16px; font-size:12px; white-space:normal; }
.article .gallery-item img { display:block; }
.article .terms span { text-transform:uppercase; }
.article .socials { margin-bottom:40px; margin-top:0; }
.article .socials li { display:inline-block; }
.article .socials li a { display:inline-block; overflow:hidden; background:url(img/picto.png) no-repeat 0 -18px; width:7px; height:12px; text-indent:9999px; margin-right:5px; }
.article .socials li.tw a { background-position:-17px -18px; width:14px; }
.article .socials li.tb a { background-position:-40px -18px; width:9px; }
.article .socials li.pi a { background-position:-58px -18px; width:10px; }
/*article.issue { height: 358px; }*/
.close { float:right; background:url(img/close.png) no-repeat; width:9px; height:9px; text-indent:-9999px; margin-right: 18px;}
.close:hover { background-position:-10px 0; }
.back { display:none; }

/* INDEX */
.index .col-1 {
}
.index .col-2 {
	-moz-column-count: 2; /* Firefox */
	-webkit-column-count: 2; /* Safari and Chrome */
	column-count: 2;
}
.index .col-3 {
	-moz-column-count: 3; /* Firefox */
	-webkit-column-count: 3; /* Safari and Chrome */
	column-count: 3;
}
.index .col-4 {
	-moz-column-count: 4; /* Firefox */
	-webkit-column-count: 4; /* Safari and Chrome */
	column-count: 4;
}
.index .col-5 {
	-moz-column-count: 5; /* Firefox */
	-webkit-column-count: 5; /* Safari and Chrome */
	column-count: 5;
}
.index .col-6 {
	-moz-column-count: 6; /* Firefox */
	-webkit-column-count: 6; /* Safari and Chrome */
	column-count: 6;
}
.index .col-7 {
	-moz-column-count: 7; /* Firefox */
	-webkit-column-count: 7; /* Safari and Chrome */
	column-count: 7;
}
.index .col-8 {
	-moz-column-count: 8; /* Firefox */
	-webkit-column-count: 8; /* Safari and Chrome */
	column-count: 8;
}
.index .col-9 {
	-moz-column-count: 9; /* Firefox */
	-webkit-column-count: 9; /* Safari and Chrome */
	column-count: 9;
}
.index .col-10 {
	-moz-column-count: 10; /* Firefox */
	-webkit-column-count: 10; /* Safari and Chrome */
	column-count: 10;
}
.index li { text-transform:uppercase; font-size:12px; width:229px; line-height: 15px; opacity: 0;}
.index li.title { color:#CACACA; }
.index ul { margin:0; }
.index li { font-weight:normal; margin-bottom:0; width:auto; list-style: none; }
.index li a { text-decoration:none; color:#000; }
.index li a:hover { text-decoration:underline; }

/* OTHER */
.log { display:none; }
#main p.result {
	margin-bottom: 7px;
	text-transform: uppercase;
}
#pageContent p { margin-bottom:10px; }
/* .home { overflow:hidden;} */
#generalLoad { background:#fff; position:absolute; z-index:100; top:0; left:0; width:100%; height:100%; }
#generalLoad span { text-indent:-9999px; background:url(img/loader-image.gif) no-repeat; width:20px; height:20px; position:absolute; top:50%; left:50%; margin:-10px 0 0 -10px; }
.single .close {display:none;}




/* retina ----------- */
.retina #header nav .socials li.fb a { background:url(img/picto_facebook@2x.png); background-size:6px 11px; }
.retina #header nav .socials li.tw a { background:url(img/picto_twitter@2x.png); background-size:12px 11px; }
.retina #header nav .socials li.tb a { background:url(img/picto_tumblr@2x.png); background-size:8px 11px; }
.retina #header nav .socials li.vi a { background:url(img/picto_vimeo@2x.png); background-size:10px 11px; }

.retina .article .socials li.fb a { background:url(img/picto_facebook@2x.png); background-size:7px 12px; }
.retina .article .socials li.tw a { background:url(img/picto_twitter@2x.png); background-size:14px 12px; }
.retina .article .socials li.tb a { background:url(img/picto_tumblr@2x.png); background-size:9px 12px; }
.retina .article .socials li.pi a { background:url(img/picto_pinterest@2x.png); background-size:10px 12px; }

.noscroll { overflow: hidden !important; }
/*

#colorbox, #colorbox * { border: 1px solid black; }

*/

#cboxClose { /* background:url(img/cross.png) no-repeat; */ text-indent: 100%; position: absolute; top: 50px; right: 20px; width: 15px; height: 15px; float:none; }
#cboxClose:hover { background-position:0 -15px; }


::selection {
	background:#FFFFFF;
	color:#E0E0E0;
	text-shadow: none;
}
::-moz-selection {
	background:#FFFFFF;
	color:#E0E0E0;
	text-shadow: none;
}
::-webkit-selection {
	background:#FFFFFF;
	color:#E0E0E0;
	text-shadow: none;
}

.loader {
	display: none;
	margin: 0 auto;
	width: 50px;
	height: 50px;
	margin-bottom: 50px;
}

body.ajax {
	background: transparent;
}


.single #page {
	width: 100%;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.search #header #searchBloc label { color: #000; }

.firstLine { border-top:solid 1px; }

#header nav a:hover {
     text-decoration: none; 
}