/*

Theme Name: Bubbles

Theme URI: http://perpetualmotionmachine.fr

Description: An HTML5, CSS3 and responsive design theme for Wordpress, by <a href="http://perpetualmotionmachine.fr" target="_blank">Perpetual Motion Machine</a>.

Version: 1.0

Author: <a href="http://www.morning-by-foley.com" target="_blank">Foley</a>, <a href="http://perpetualmotionmachine.fr" target="_blank">Perpetual Motion Machine</a> 

Author URI: http://www.morning-by-foley.com

Tags: html5, bubbles, clean, responsive

*/



@font-face {

    font-family: 'Blackout2AM';

    src: url('fonts/blackout-2am-webfont.eot');

    src: url('fonts/blackout-2am-webfont.eot?#iefix') format('embedded-opentype'),

         url('fonts/blackout-2am-webfont.woff') format('woff'),

         url('fonts/blackout-2am-webfont.ttf') format('truetype'),

         url('fonts/blackout-2am-webfont.svg#Blackout2AM') format('svg');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'BlackoutMidnight';

    src: url('fonts/blackout-midnight-webfont.eot');

    src: url('fonts/blackout-midnight-webfont.eot?#iefix') format('embedded-opentype'),

         url('fonts/blackout-midnight-webfont.woff') format('woff'),

         url('fonts/blackout-midnight-webfont.ttf') format('truetype'),

         url('fonts/blackout-midnight-webfont.svg#BlackoutMidnight') format('svg');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'RalewayThin';

    src: url('fonts/raleway_thin-webfont.eot');

    src: url('fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),

         url('fonts/raleway_thin-webfont.woff') format('woff'),

         url('fonts/raleway_thin-webfont.ttf') format('truetype'),

         url('fonts/raleway_thin-webfont.svg#RalewayThin') format('svg');

    font-weight: normal;

    font-style: normal;



}





/* Fixing some rows */



.bubble.row{

	padding:0;

}



hr.clearfix{

	visibility: hidden;

	clear:both;

}



/* ######################################################## */

/* ###################  Custom styles  #################### */

/* ######################################################## */

html{

	background:#cacaca; /* LOLILOL  */

}

body{

	width:100%;

}



*{

	font-family:Verdana, arial, trebuchet, sans-serif;

}



.wrapper{

	padding:10px 0 0 0;

}



/* #################################################### Header */



.logo{

    width:100%;

    max-width:652px;

    max-height:176px;

}

header nav{

	margin:10px 0;

}

	header nav ul{

		margin-bottom:0;

		width:100%;

		padding:0px;

		margin:0px;

	}

	header nav ul li{

		list-style-type:none;

		list-style-image: none;

		display:inline-block;

		position: relative;

		*display: block;

		*float:left;

		zoom:1;

	}

	header nav ul li a{

		font-family:'BlackoutMidnight', Arial, Helvetica, sans-serif;

		font-size:18px;

		display:block;

		padding: 20px 9px 0;

		color:#fff;

		text-decoration:none;

	}

	header nav ul li:first-child a{

		padding-left:0;

	}

	header nav ul li:last-child a{

		padding-right:0;

	}

	header nav ul li a:hover, nav ul li a:active, nav ul li a:focus{

		color:#f4ce5a;

	}

	 header nav ul li a:active{

	 	position:relative;

	 	top:1px;

	 }



	header nav ul li ul{

		display: none;

	}

	



/*  ############################### "Hello" Block */

.side.outnav-full, .side.outnav-mob{

	padding:0 3% 0px 3% !important;

	background: #fff;

	margin-top:20px !important;

}



#main-container{

	margin:0 auto;

}

.outnav-full{

	margin-bottom:5px !important;

}



/* ################################################## Articles */



article{

	background:#ffffff;

	margin:0 0 16px 0;

	position:relative;

	padding:0 5% 2% 5%;

}

	article img{

		width:auto;

	}

		article a img{

			padding:5px 0px;

			width:100%;

		}

	article footer{

		margin-top:0px;

		background:transparent;

	}

	article .dots{

		position:absolute;

		top:-10px;

		left:-25px;

		max-width:46px;

	}

	article.firstart{

		float:none;

	}

		article.excerpts hr{

			margin:0px;

		}

		article.excerpts header{

			float:none;

			width:100%;

		}

		article.excerpts p{

			width:100%;

			float:none;

			margin-bottom:0px;

		}

		article.excerpts p img{

			display:none;

			position:static;

		}

		article.excerpts p > img:first-child, article.excerpts p > a:first-child > img{

			width:40%;

			float:left;

			display:block !important;

			margin-top:-10px;

			margin-right:3%;

		}

		article.excerpts p a{

			position:static !important;

			display:inline !important;

		}

		article.excerpts footer{

			padding:0px !important;

		}

	section.a-footer{

		clear:both;

	}

		.a-footer a{

			font-size:12px;

		}

		.a-footer ul li img{

			width:30px;

			position:relative;

			top:11px;

			margin-left:5px;

		}

		.a-footer a:hover img{

			opacity: 0.8;

			-moz-opacity: 0.8;

			*filter:alpha(opacity=8);

		}

		.a-footer ul{

			width:70%;

			float:right;

			margin-bottom: 0px !important;

		}

		.a-footer ul li{

			list-style-type: none;

			float:right;

			margin-right:10px;

			list-style-image: none

		}

			.addthis_32x32_style .dummy .at300bs, .addthis_32x32_style .at300bs, .addthis_32x32_style .at15t {

				width:24px !important;

				height:25px !important;

			}

			.addthis_32x32_style .at15t_twitter{
				background:url("img/m/twitter-icone-s.jpg") center center no-repeat !important;
				background-position:center center !important;
			}
			.addthis_32x32_style .at15t_facebook{
				background:url("img/m/facebook-icone-s.jpg") center center no-repeat !important;
				background-position:center center !important;
			}
			.addthis_32x32_style .at15t_pinterest_pinit{
				background:url("/img/m/pinterest-icone-s.jpg") center center no-repeat !important;
				background-position:center center !important;
			}

	section.count, footer > .post-edit-link{

		height:18px;

		width:43%;

		float:right;

		margin:0px 0 15px 0;

	}

		 section.count p, footer > .post-edit-link{

				color:#fff;

				text-align:right;

				padding-right:10px;

				font-size:12px;

				background-color:#f4ce5a;

				height:18px;

				width:100%;

				min-width:280px;

				display:inline;

				float:right;

				margin-right:-40px;

			}

			footer > .post-edit-link{

				width: 50px !important;

				line-height: 18px;

			}

				.timestamp section.count {

					float:none;

					width:100%;

				}

				.timestamp section.count p{

					width:30%;

					float:right;

					margin:10px -5px 0px 0px;

				}

				section.count p a{

					color:#fff !important;

				}

	.firstart section.count{

		height:18px;

		width:100%;

		position:relative !important;

	}

		.firstart section.count p{

			color:#fff;

			text-align:right;

			padding-right:10px;

			font-size:12px;

			background-color:#f4ce5a;

			height:18px;

			width:70%;

			max-width:280px;

			display:inline;

			float:right;

			margin-right:-40px;

		}



/* ############## Hellocotton */



.hellocoton_vote{

	display:block;

}

	.hellocoton_vote > a:first-child{

		top:4px !important;

	}

	.hellocoton_vote > a:last-child img{

		display:none !important;

	}

		.hellocoton_vote > a:last-child{

			background:url('img/m/hellocoton.gif') center center no-repeat;

			top:-1px !important;

			left:118px !important;

		}

	.hellocoton_vote > a:nth-child(2) img{

		display:none;

	}

		.hellocoton_vote > a:nth-child(2){

			background:url('img/m/action-on.gif') center center no-repeat;

			top:-1px !important;

		}

			.hellocoton_vote > a:nth-child(2):hover{

				background:url('img/m/action-on-h.gif') center center no-repeat;

			}





.timestamp{

	min-height:20px;

	background:#e7e7e7;

	margin:0 0 16px 0;

	padding:10px 0;

}

	.timestamp p{

		width:98%;

		text-align:right;

		font-size:12px;

		margin:0;

	}

	.timestamp a{

		color:#f4ce5a;

		text-decoration:none;

	}

	.timestamp a:hover{

		text-decoration:underline;

	}

.otherarticles{

	height:160px;

	background:#ffffff;

    margin:0 0 16px 0;

    overflow-x:auto;	

}

	.nr_inner{

		width:95%;

		margin:0 auto;

	}

.divider{

	border:none;

	display:block;

	height:18px;

	background:url("img/m/separateur.png") center center no-repeat;

	margin:0 0 16px 0;

}

.comment, .pingback, .trackback, .relate{

	min-height:60px;

	background:#ffffff;

	margin:0 0 16px 0;

	float:none;

	clear:both;

	padding:10px 0;

}

	.depth-2{

		width:90%;

		float:right;

		min-height:105px;

		margin-top:26px;

	}

		.depth-3{

			width:100%;

			margin-top: 15px;

			border-top:15px solid #cacaca;

		}

	.byuser{

		background:#e7e7e7 !important;

	}



		.comment .clearfix{

			margin:0;

		}

		.comment p, .pingback p, .trackback p{

			width:96%;

			margin:5px auto;

		}

			p.c-title, .nr_title > span{

				font-family:'RalewayThin', Arial, Helvetica, sans-serif;

				font-size:22px;

				color:#000;

			}

				.comment .c-title > a{

					color:#000;

				}

				.nr_text{

					padding:5px 0px 10px 0px !important;

					line-height: 110% !important;

				}

				.nr_post_title{

					padding:2px 4px !important;

					color:#F4CE5A !important;

				}

				.relate:hover .nr_post_title{

					color:#F4CE5A !important;

					text-decoration: underline !important;

				}

				/* Plugins overwrite */

				.nrelate_tre{

					width:95% !important;

					margin:0 auto !important;

				}

				

			p.c-time, .c-time a{

				color:#f4ce5a;

				text-decoration:none;

				margin-bottom:13px;

			}

				.c-time a:hover{

					text-decoration:underline;

				}

			.comment-reply-link{

				width:85px;

				float:right;

				margin-top:10px;

				background-color:#f4ce5a !important;

				height:20px;

				margin-right:-10px;

				font-size: 12px;

			}

				.comment-reply-link{

					display:block;

					line-height:20px;

					text-decoration:none;

					padding:0 10px 0 0px;

					text-align:right;

					color:#fff;

				}

				.thdrpy a:hover{

					color:#fff;

					text-decoration:underline;

				}



			#respond{

				background:#fff;

				padding:10px 4%;

				margin-bottom:15px;

			}

			.comment-form-comment label{

				display:none;

			}

			.comment-form-comment textarea{

				display:block;

				width:90%;

				margin:10px auto;

			}

				#respond a{

					color:#f4ce5a;

				}

				#respond .form-allowed-tags, #respond .form-allowed-tags code{

					font-size:11px;

				}

				#reply-title{

					width:300px;

					height:20px;

					background:#f4ce5a;

					margin:0px 0px 20px -35px;

					color:#fff;

					font-size:12px;

					display:inline-block;

					*display:inline;

					zoom:1;

					padding:3px 10px 3px 10px;

					line-height:20px;

				}

					#cancel-comment-reply-link{

						margin:10px 0px;

						display:inline;

						zoom:1;

						color:#fff !important;

						font-size:12px;

					}

					#cancel-comment-reply-link:before{

						content:"● ";

						text-decoration: none !important;

					}

				.logged-in-as{

					margin-top:20px;

				}

				#respond .form-submit input{

					width:200px;

					float:right;

					margin-top:10px;

					background-color:#f4ce5a !important;

					height:20px;

					margin-right:-40px;

					text-align:right;

					font-size: 12px;

					border:none;

					padding-right:20px;

					color:#fff;

					-webkit-appearance:none;

					box-shadow: none;

					-webkit-box-shadow:none;

				}

					#respond .form-submit input:hover{

						text-decoration: underline;

					}

				.subscribe-to-comments{

					padding:15px 0px 0px 0px;

					font-size:11px;

				}



#respond label{

	display:inline;

	margin:5px 0 5px 5%;

}



#respond p.comment-notes{

	width:90%;

	margin:15px 5%;

}

	#respond p input{

		display:block;

		width:200px;

		margin:5px 5%;

	}

	#respond p input[type="checkbox"]{

		display: inline;

		margin:10px 0px;

	}

		#respond p label[for="subscribe"]{

			margin:0px;

		}





.archive{

	height:255px;

}



/* ############################################################## */

/* ####################################################### Asides */

/* ############################################################## */



aside{

	margin-top:0;

}



aside > ul {

	width:100% !important;

	margin:0px !important;

	padding:0px;

}

aside > ul > li, .side{

	margin:0 0 22px 0 !important;

	background:#fff;

	padding:0 3% 15px 3% !important;

	list-style-type: none !important;

	list-style-image: none !important;

}

	aside > ul > li:first-child{

		padding-bottom:0px !important;

	}



.subnav{

	height:26px;

	list-style-type: none;

	margin:0;

	overflow: hidden;

}

	.updown li{

		overflow: hidden;

	}

	.updown li a{

		color:#f4ce5a;

		background:#ffffff;

		display:block;

		width:100%;

		margin:0;

		padding:0;

		font-size:12px;

		line-height:26px;

		text-decoration:none;

		overflow: hidden;

	}

	.updown li a:hover{

		text-decoration:underline;

	}

	.updown li:last-child a{

		text-align:right;

		padding: 0 10% 0px 0px;

		width:90%;

	}

	.updown li:first-child a{

		padding:0 5%;

	}

		span.direction-title{

			display: block;

			float:left;

			width:80%;

		}

		span.direction{

			display:block;

			width:10%;

			float:left;

		}

			.updown li:last-child a span.direction{

				float:right;

			}

			.updown li:last-child a span.direction-title{

				float:left;

				margin-right:1%;

				padding-left:2%;

			}

			.updown li:first-child a span.direction{

				float:left;

			}

			.updown li:first-child a span.direction-title{

				float:right;

				margin-left:1%;

				text-align: left;

			}



/* ######## Social networks out-links */



.socialnet{

	margin:0;

	padding:0 0 0 1%;

	position:relative;

	overflow:hidden;

	width:100%;

}

	.socialnet li{

		display:inline-block;

		*display:block;

		*float:left;

		zoom:1;

		list-style-type: none;

		width:14%;

		margin:0;

		padding:0;

		text-align:center;

	}

	.socialnet li img{

		width:100%;

		height:100%;

		max-width:38px;

		max-height:39px;

		margin:0 auto;

	}

	.socialnet li a:hover img{

		opacity: 0.8;

		-moz-opacity: 0.8;

		*filter:alpha(opacity=8);

	}

	.socialnet li a:active{

		position:relative;

		top:1px;

	}



/* ########################################## Search box */

aside form[role="search"]{

	padding:10px 0px;

}

	aside form[role="search"] label{

		display:none;

	}



	#searchsubmit{

		*margin-top:-5px;

		width:35%;

		min-width:74px;

		background:#cacaca url("img/m/searchbutton.jpg") center center no-repeat;

		vertical-align: middle;

		padding:1px 0 1px 0;

		height:22px;

		text-indent: -999px;

		overflow: hidden;

		display:inline-block;

		*display:inline;

		zoom:1;

		margin-left: 3px;

		padding: 0px;

		box-shadow: none;

		-webkit-box-shadow:none;

		-webkit-appearance:none;

		border:none;

	}



	#searchsubmit:hover{

		opacity: 0.8;

		-moz-opacity: 0.8;

		*filter:alpha(opacity=8);

	}

	aside form[role="search"] input[name="s"]{

		width:59%;

		float:left;

		background:#cacaca;

		border:1px solid #cacaca;

		height:18px;

		padding:0px 4px;

		height:20px;

		line-height: 20px;

		-webkit-appearance: none;

		-webkit-border-radius:0;

	}



/* ################################ "Ailleurs" block */

.textwidget ul{

	padding:0px;

	margin:0px auto;

}

.textwidget a img{

	width:100%;

	margin:0 auto;

}

	.link{

		display:block !important;

		width:100% !important;

		max-width:264px !important;

		margin:0 auto 10px auto !important;

		list-style-type: none !important;

		padding:0 !important;

	}

	.link a{

		display:block !important;

		text-align:center !important;

		font-family:'BlackoutMidnight', Impact, Arial, sans-serif !important;

		text-decoration:none !important;

		font-size:22px !important;

		color:#fff !important;

		background:url('img/m/ailleurs-sprites.png') repeat-x !important;

		line-height:39px !important;

		width:100% !important;

		position: relative !important;

	}

		.link:first-child a{

			background-position:top center !important;

		}

		.link:nth-child(2) a{

			background-position: 0px -40px !important;

		}

		.link:last-child a{

			background-position: 0px -81px !important;
		}


				.link:first-child a:hover{

					opacity: 0.8;

						-moz-opacity: 0.8;

						*filter:alpha(opacity=8);

				}

				.link:nth-child(2) a:hover{

					opacity: 0.8;

						-moz-opacity: 0.8;

						*filter:alpha(opacity=8);

				}

				.link:last-child a:hover{

					opacity: 0.8;

						-moz-opacity: 0.8;

						*filter:alpha(opacity=8);

				}

					.link a:active{

						top:1px;

					}



/* ####################################### "Pub" box */



.pub div{

	width:95%;

	margin:5px auto;

}

	.pub div img{

		width:100%;

	}



/* ################################ "Catégories" box */

aside > ul > li > ul{
	width:80% !important;
	padding:0 !important;
	position: relative !important;
}
	aside > ul > li > ul > li{
		list-style-image:url("img/m/puce.png");
		margin:2px 0;
	}
	aside > ul > li > ul > li > a{
		color:#666666 !important;
		text-decoration:none !important;
		font-size:12px !important;
	}
	aside > ul > li > ul > li > a:hover{
		text-decoration:none !important;
		color:#f6d053 !important;
	}

/* ################################ "Daily" box */

.blogroll{
	width:95% !important;
}
	.blogroll li{
		list-style-type: none;
		list-style-image: none;
		margin:3px 0;
		width:100%;
	}
		.blogroll li a{
			display:block;
			width:100%;
			hyphens:auto;
		}
			.blogroll li a:hover{
				text-decoration:none !important;
			}

/* ############################# Right boxes headers */



aside > ul > li:first-child > h3{

	display:none;

}

aside > ul > li > h3, .navtitle{

	display:inline-block;

	height:30px;

	min-width:50% !important;

	max-width:80%;

	line-height:34px;

	padding:0 10px 0 10px;

	position:relative;

	top:-15px;

	background:#e7e7e7;

	font-family:'RalewayThin', Helvetica, Arial, sans-serif;

	font-size:22px;

	margin:0 !important;

}



/* ################################################ Footer */



.pubfoot{

	padding:16px 0 0 0;

}

	.pubfoot div{

		max-width:755px;		
		min-height:90px;

		background:#ffffff;

	}

	.pubfoot div img{

		max-width:728px;

		margin:10px 2%;

	}

	.pubfoot ul {

		padding:0px;

		margin:0px;

	}

	.pubfoot ul li{

		list-style-type: none

	}



footer{

	background:#ffffff;

	margin-top:20px;

	padding:10px 0 5px 0 !important;

	position: relative;

}

	footer p{

		width:95%;

		margin:5px auto;

		text-align:center;

		font-size:10px;

		color:#cacaca;

	}

	footer p:nth-child(2){

		margin-bottom:8px !important;

	}

	footer p a{

		color:#f4ce5a !important;

		text-decoration:none;

	}

	footer p a:hover{

		text-decoration:underline;

	}

	.footerimgl{

		position: absolute;

		top:5px;

		left:-82px;

	}

	.footerimgr{

		position: absolute;

		top:5px;

		right:-85px;

	}

	footer hr.clearfix{

		margin:0;

	}



.contents, .masthead, .bubbleaside{

	padding:0 10px;

}

.updown{

	position:relative;

	overflow:auto;

	margin-bottom:10px !important;

}

/* ######################################################## */

/* ################  Custom Font styles  ################## */

/* ######################################################## */



p{

	font-family:Verdana, Helvetica, arial, sans-serif;

	color:#666666;

	font-size:12px;

	line-height:14px;

}



p.contact{

	text-align: left;

	border-top:1px solid #bdbdbd;

	border-bottom:1px solid #bdbdbd;

	padding:10px 0;

}



@media all and (max-width:1168px){

	.footerimgl, .footerimgr{

		display:none;

	}

}



@media all and (max-width:846px){

		.navtitle{

			font-size:20px;

		}

}



@media all and (min-width:768px) and (max-width:849px){

	nav{

	margin:10px 0;

	}

	nav ul{

		margin-bottom:0;

		margin-top:40px;

	}

	nav ul li{

		list-style-type:none;

		display:inline-block;

		*display: block;

		*float:left;

		zoom:1;

	}

	header nav ul li a{

		font-family:'BlackoutMidnight', Arial, Helvetica, sans-serif;

		font-size:17px;

		display:block;

		padding: 0 5px;

		color:#fff;

		text-decoration:none;

	}

	nav ul li:first-child a{

		padding-left:0;

	}

	nav ul li:last-child a{

		padding-right:0;

	}

	nav ul li a:hover{

		color:#f4ce5a;

	}

::selection{
  background: #cacaca ;
  color: #ffffff;
  text-shadow: none;
}