/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

div.container {
  padding-top: 60px;
}

a.link-discret {text-decoration:none;}
a.link-tonton {color:#849D30;background:#171813;text-decoration:none;}
a.link-tonton:hover {text-decoration:underline;}

		
	/* Sidebar */
	nav { 
    position: fixed;
    top:60px;
    width: 160px;
  }
	#name {
		display:block;
    margin-bottom: 30px;
    font-size: 28px; 
    line-height: 34px;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		letter-spacing: -1px;
		font-weight: bold;
		text-align: right;  
    text-decoration:none;
  }
	nav ul { 
		float: right;  
  }
	nav ul li {
		text-align: right;
		display: block;
		margin-bottom: 10px;
  }
	nav ul li a, 
	nav ul li a:visited, 
	nav ul li a:active  {
		font-size: 14px;
		color: #555;
		text-decoration: none;
		font-weight: bold;
		padding: 3px 8px 4px;
		position: relative;
		right: -8px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
  }
	nav ul li a:hover, 
	nav ul li a:focus {
		color: #222;
  }
  
  
  
  /* Header */
	header h1 {
		font-size: 52px;
		line-height: 61px;
		letter-spacing: -1px;
		font-weight: normal;
		font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
  }



  /* Content */
  .content section {
    border-bottom:1px solid #ddd;
    margin-bottom:30px;
  }
  
  
  
  #realisations {}
  
   h3 {font-size: 21px; line-height: 30px; margin-bottom: 4px;word-break: keep-all;}
   h4 {font-size: 17px; line-height: 24px; margin-bottom: 4px;word-break: keep-all;}
  
  #realisations .columns {margin-bottom:20px;}
  
  #realisations img {border:2px solid #eee;}
  #realisations .img-link:hover img {border-color:#ddd;}
  
  #realisations .columns p {margin-bottom:0;}
  
  .txt-link, .txt-link:visited {font-size:13px;color:#999;text-decoration:none;}
  .txt-link:hover {text-decoration:underline;}
  
  
  
  #contact {}
  form label {}
  .post-button-note,
	.post-button-note a { 
		font-size: 11px; 
		color: #999; }
    
  #contact .twelve p {
    border:1px solid #ddd;
    padding:0.5em;
    background:#eee;
  }


  footer {color: #666;font-size:13px;}
  footer a,
  footer a:visited {color: #666;}
  footer a:hover {color:#000;}




/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
    
  
    nav {position:static;width:auto;}
    #name {text-align:center;}
    nav ul {float:none;list-style:none;}
    nav ul li {text-align:left;display:inline-block;margin:0;}
    nav ul li a,
    nav ul li a:visited,
    nav ul li a:active {padding:0;position:static;right:auto;font-size:13px;padding:8px 5px;background:#eee;}
    nav ul li a:hover {background:#fff;}
  
  }

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
    
    
    .container .columns.sidebar {width:620px;}
    nav {text-align:center;}
    
    h3 {font-size:18px;}
    #realisations .img-link img {width:190px;height:142px;}
  }

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
    
    
    nav {position:static;width:auto;}
    #name {text-align:center;}
    nav ul {float:none;list-style:none;}
    nav ul li {text-align:left;display:inline-block;margin:0;}
    nav ul li a,
    nav ul li a:visited,
    nav ul li a:active {padding:0;position:static;right:auto;font-size:13px;padding:8px 5px;background:#eee;}
    nav ul li a:hover {background:#fff;} 
    
    #realisations .img-link {float:right;margin-left:20px;margin-top:-34px;}
    
  }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
    
    #name {font-size:36px;}
    header h1 {font-size:48px;line-height:52px;}
  
    #realisations .img-link {margin-left:10px;}
    #realisations .img-link img {width:165px;height:124px;}

  }

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
    
    body {font-size:13px;}
  
/*
    nav {width:280px;margin-left:auto;margin-right:auto;}
*/
  
    #name {font-size:36px;}
    
    nav ul li {height:34px;padding:0;width:31%;margin:0 1% 1% 0;}
    nav ul li:first-child {display:none;}

    nav ul li a,
    nav ul li a:visited,
    nav ul li a:active {padding:8px 0;display:block;display:block;width:100%;text-align:center;}
    nav ul li:last-child {width:98%;}
    nav ul li:last-child a {}
    
    header h1 {font-size:48px;line-height:52px;}
  
    #realisations p {font-size:13px;}
    #realisations .img-link {margin-left:10px;}
    #realisations .img-link img {width:110px;height:82px;}
    #realisations .txt-link {font-size:12px;}

  }


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal;
}
*/