/*-----------------------------------------------------------------------------------------------------
		Projet : Versions mobiles
		Website : http://noparking.be
		Auteur : No Parking
		
		Copyright (C) 2011
					
-------------------------------------------------------------------------------------------------------*/



/* Media Queries
-------------------------------------------------------------------------------------------------------*/

/*//// Ecrans etroits ////*/
@media only screen and (max-width: 1000px) {
	img {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		max-width: 100%;
		height: auto;
	}

	.navigation,
	.header-content,
	.content,
	.footer-content {
		width: auto;
		margin: 0 30px;
	}

	.header {
		height: 46px;
	}

	.header-content {
		margin: 0;
	}

	.header h1 {
		margin: 8px 0 0 30px;
	}

	.navigation ul li {
		font-size: .9em;
	}

	.content 	{
		margin-top: 40px;
	}

	section.realisations,
	section.recrutement,
	section.actualites,
	section.recrutement h1.homepage-title {
		width: auto;
		margin-right: 30px;
		margin-left: 30px;
	}

	.bloc-realisation,
	.bloc-actualites,
	.bloc-derniers-billets,
	.bloc-social {
		width: 30%;
	}

	.bloc-recrutement-rejoindre,
	.bloc-recrutement-offres,
	.bloc-recrutement-postuler {
		font-size: .9em;
		line-height: 1.2em;

		width: 33%;
	}

	.bloc-recrutement-offres {
		font-size: .8em;
	}

	.bloc-recrutement-offres h2,
	.bloc-recrutement-offres ul,
	.bloc-recrutement-offres .view-footer {
		margin: 16px 16px 0 16px;
	}

	.bloc-recrutement-rejoindre {
		background: url('../images/bg-recrutement-rejoindre-noparking.jpg') no-repeat center top;
	}

	.bloc-social ul li {
		float: left;

		width: 90px;
		margin: 0 15px 15px 0;
	}

	.bloc-social ul li p {
		display: none;
	}

	div.tabs {
		display: none;
	}

	.post-content,
	.page-content {
		width: 60%;
	}
	
	.front .page-content {
		width: 66%;
	}

	.not-front.sidebar-first .page-content {
		float: right;

		width: 60%;
	}

	.sidebar {
		width: 33%;
	}

	.sidebar-book-navigation {
		width: 33%;
		margin-right: 0;
	}

	.sidebar-contact a.picture {
		float: none;
	}

	.sidebar-contact adress {
		float: none;

		width: auto;
		margin-top: 10px;
		padding: 0;

		background: none;
	}

	.block-search .form-item,
	.block-search input,
	.block-search .form-actions,
	.block-search input.form-submit[type='submit'] {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		width: 100%;
	}

	.blog-post img {
		max-width: 100%;
	}

	.footer {
		text-align: center;
	}

	.footer .footer-content p {
		float: none;
	}

	.footer .footer-content ul {
		float: none;

		margin-top: 10px;
	}
}

@media only screen and (max-width: 740px) {
	.navigation {
		position: absolute;
		z-index: 99;
		top: -500px;

		width: 100%;
		margin: 0;

		-webkit-transition: top .4s ease 0s;
		   -moz-transition: top .4s ease 0s;
				transition: top .4s ease 0s;

		background: #1b1b1b;
	}

	.navigation ul {
		float: none;

		text-align: center;
	}

	.navigation ul li {
		display: block;
		float: none;

		margin: 0;
		padding: 0;
	}

	.navigation ul li a {
		font-size: 1.2em;

		display: block;

		padding: 20px 0;
	}

	.navigation ul li a:hover {
		color: #fff;
		background: #f8be18;
	}

	.navigation ul li:hover ul {
		display: none;
	}

	.navigation ul li ul li a {
		white-space: normal;
	}

	.mobile-nav-on {
		position: absolute;
		top: 4px;
		right: 0;

		display: block;

		width: 46px;
		height: 46px;
		margin: 0;
		padding: 0;

		text-indent: -9999px;

		color: #fff;
		background: url('../images/icon-menu.png') #f8be18 no-repeat center center;
	}

	.mobile-nav-on:hover {
		color: #fff;
		background: url('../images/icon-menu.png') #feda75 no-repeat center center;
	}

	.mobile-nav-off {
		position: absolute;
		top: -46px;
		right: 0;

		display: block;
		display: block;

		width: 46px;
		height: 46px;
		margin: 0;
		padding: 0;

		text-indent: -9999px;

		color: #fff;
		background: url('../images/icon-close.png') #f8be18 no-repeat center center;
	}

	.mobile-nav-off:hover {
		color: #fff;
		background: url('../images/icon-close.png') #feda75 no-repeat center center;
	}

	#navigation:target {
		top: 50px;

		-webkit-transition: top .4s ease 0s;
		   -moz-transition: top .4s ease 0s;
				transition: top .4s ease 0s;
	}
}


/*//// Mobile and Low res ////*/
@media only screen and (max-width: 685px) {
	.header h1 {
		position: absolute;
		top: 12px;
		left: 30px;

		margin: 0;
	}

	.header h1 a {
		display: block;

		width: auto;
		height: auto;
	}

	.header h1 a img {
		height: 30px;
	}

	.page-blog .header h1,
	.page-taxonomy-term .header h1 {
		display: none;
	}

	.blog-header {
		position: absolute;
		top: -38px;
		left: 30px;

		width: 172px;
		height: 30px;

		background: url(../images/blog-header-mobile.png) no-repeat left top;
	}

	h1.homepage-title {
		width: auto;
		margin-bottom: 40px;
	}

	/*section.recrutement h1.homepage-title { width: auto; margin-left: 30px; margin-right: 30px; }*/
	.bloc-realisation,
	.bloc-actualites,
	.bloc-derniers-billets,
	.bloc-social {
		float: none;

		width: auto;
		margin-right: 0;
	}

	.bloc-realisation {
		margin-bottom: 40px;
		padding-bottom: 20px;

		background: url('../images/border-title.gif') repeat-x left bottom;
	}

	.bloc-realisation p {
		min-height: 0;
	}

	.bloc-recrutement-rejoindre,
	.bloc-recrutement-offres,
	.bloc-recrutement-postuler {
		float: none;

		width: auto;
	}

	.bloc-recrutement-offres,
	.bloc-recrutement-postuler {
		height: auto;
		padding: 20px 0;
	}

	.bloc-recrutement-rejoindre {
		display: none;
	}

	.bloc-recrutement-offres {
		font-size: .8em;

		background: none;
	}

	.bloc-recrutement-offres h2,
	.bloc-recrutement-offres ul,
	.bloc-recrutement-offres .view-footer {
		margin: 16px 16px 0 16px;
	}

	.bloc-recrutement-postuler {
		margin-bottom: 20px;

		background: url('../images/bg-recrutement-postuler.jpg') repeat-x left top;
	}

	.bloc-actualites {
		margin-bottom: 30px;
	}

	.bloc-social {
		display: none;
	}

	.post-content,
	.page-content {
		width: auto;
		max-width: 100%;
	}

	.front .page-content {
		width: auto;
	}

	.post-content {
		background: none;
	}

	.not-front.sidebar-first .page-content {
		float: none;

		width: auto;
	}

	.page-blog .content,
	.node-type-blog .content {
		width: auto;
		margin: 0;
	}

	.not-front .region-header {
		display: none;
	}

	.bloc-home p,
	.post-content p,
	.page-content p,
	.post-content li,
	.page-content li,
	.post-content blockquote,
	.page-content blockquote {
		text-align: justify;
	}

	.page-title {
		font-size: 1.4em;
		font-weight: bold;
	}

	.page-content h2 {
		font-size: 1.2em;

		margin-bottom: 10px;
	}

	.sidebar {
		display: none;
	}

	.sidebar-book-navigation {
		float: none;

		width: auto; margin: 0 0 20px 0;

		-webkit-border-radius: 4px;
		background: none;
		-webkit-box-shadow: none;
		   -moz-box-shadow: none;
				box-shadow: none;
	}

	.sidebar-book-navigation ul.menu li a {
		padding: 10px 0;

		color: #efefef;
		border: none;
		border-bottom: 1px dotted #444;
	}

	.sidebar-book-navigation ul.menu li:first-child a {
		border-bottom: 1px dotted #444;
	}

	.sidebar-book-navigation ul.menu li a:hover,
	.sidebar-book-navigation ul.menu li a.active-trail {
		background: none;
	}

	/* Second lvl */
	.sidebar-book-navigation ul.menu li ul li {
		list-style-type: circle;
	}
	
	.sidebar-book-navigation ul.menu li ul li:first-child a,
	.sidebar-book-navigation ul.menu li:first-child ul li a {
		border-top: 1px dotted #343434;
	}

	.sidebar-book-navigation ul.menu li ul li a {
		padding-left: 30px;color: #999;
	}

	.form-item input,
	.form-item textarea,
	form input[type='submit'].form-submit {
		width: 100%;
	}

	.footer .footer-content ul {
		float: none;

		width: 100%;
	}

	.footer .footer-content ul li {
		display: inline-block;

		width: 30%;
	}

	.footer .footer-content ul li a {
		display: block;

		width: 100%;
		height: 80px;
	}

	.footer .footer-content ul li a.twitter {
		background: url(../images/icon-twitter.png) #00aeff no-repeat center center;
	}

	.footer .footer-content ul li a.linkedin {
		background: url(../images/icon-linkedin.png) #0080b2 no-repeat center center;
	}

	.footer .footer-content ul li a.rss {
		background: url(../images/icon-rss.png) #fe9900 no-repeat center center;
	}
}