/*
Theme Name: Vincent Desmeules
Theme URI: http://wordpress.org/
Description: Based on the Twenty Ten theme by the WordPress team.
Author: Raffaele Malanga / Els van Bloois
Version: 1.0
License: No license, use Twenty Ten instead.
License URI: N/A
Tags: no tags
*/


/* =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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a img {
	border: none;
}


/* ------------------ */

.skip-link{
	position:absolute;
	top:-4000px;
}

body{
	background:#f2f2f2;
	color:#4d4d4d;
	font-family:Arial,Helvetica,sans-serif;
	font-size:100%;
}
#wrapper{
	width:980px;
	margin:auto;
}
#header{
	padding:20px;
}
#main{
	background:white;
	padding:20px;
	overflow:hidden;
	line-height:1.3;
}
#footer{
	clear:both;
	background:white;
	padding:20px 0;
	border-top:1px solid #C3C3C3;
}
#masthead{
	overflow:hidden;
	padding:5px 0;
}
#branding{
	float:left;
}
#access{
	float:right;
	line-height:1.65em;
	vertical-align:bottom;
}
#access ul{
	margin-bottom:0;
}
#access ul li{
	display:inline;
	margin-left:10px;
}
#content{
	overflow:hidden;
	padding:0 0 100px 0;
}
.home #content{
	padding-bottom:10px;
}

h1,h2{
	font-size:87.5%;
	font-weight:bold;
	text-transform:uppercase;
	margin-bottom:.5em;
}
h3{
	font-size:87.5%;
	font-weight:bold;
	margin-bottom:.5em;
}
p,ul,ol,td{
	font-size:87.5%;
	margin-bottom:1.3em;
}
#footer p{
	font-size:80%;
}
li p,
li ul,
li ol,
td table td{
	font-size:100%;
}
#header a{
	color:#4d4d4d;
}
#main a{
	color:black;
}
a{
	text-decoration:none;
}
#main a:focus,
#main a:hover,
#main a:active{
	text-decoration:underline;
}
#access li.current-menu-item a,
#access a:focus,
#access a:hover,
#access a:active{
	border-bottom:1px solid #4d4d4d;
}

.blog .type-post{
	border-bottom:1px solid #dedede;
	margin-bottom:20px;
}
div.navigation{
	font-size:80%;
}
div.navigation .nav-previous{
	float:left;
}
div.navigation .nav-next{
	float:right;
}

.colleft{
	float:left;
	width:460px;
}
.colright{
	float:right;
	width:460px;
}
.row{
	clear:both;
	margin-bottom:20px;
	overflow:hidden;
}


ul.travaux{
	margin-right:-20px;
}
ul.travaux li{
	float:left;
	margin-right:20px;
	margin-bottom:20px;
}
ul.travaux li a,
ul.travaux li a img{
	background:black;
	display:block;
}
ul.travaux li a:focus img,
ul.travaux li a:hover img,
ul.travaux li a:active img{
	opacity:.5;
}
div.liens,
div.media{
	margin-right:-20px;
}

div.block{
	float:left;
	width:220px;
	border-bottom:1px solid #4d4d4d;
	margin-right:20px;
	margin-bottom:20px;
}
div.media div.block{
	border-bottom-width:0;
}
div.media div.doubleblock{
	float:left;
	width:480px;
	background:url(images/doubleblockline.gif) transparent no-repeat left bottom;
}


/*
LIENS:

row 1: 1 h2 + 8 x li
row 2: 1 h2 + 4 x li

h2 = line-height:1.3 margin 0.5
li = line-height:1.3 margin 1.3

row 1 = 1.3+0.5+8x1.3 = 12.2em based on 87.5%
row 2 = 1.3+0.5+4x1.3 = 7em based on 87.5%

But height is set on div, which is 100%.
row 1 = 12.2 * 87.5 / 100 = 10.675
row 2 = 7 * 87.5 / 100 = 6.125

add 1.875 em for space and round:
row 1: 12.5
row 2: 8

for each additional line in the list, 1.3 * 87.5 / 100 = 1.1375em needs to be added.

MEDIA:

blocks are double width, and only the top row needs a height set.

*/

div.liens.row1 div.block{
	min-height:12.5em;
}
div.liens.row2 div.block{
	min-height:8em;
}
div.liens.row3 div.block{
	border-bottom-width:0;
}

div.media div.doubleblock div.block{
	min-height:16em;
}

/* blocks on homepage and contact */

div#blocks{
	clear:both;
	margin-right:-20px;
}
div#blocks .block{
	padding-top:5px;
	border-bottom-width:0;
	border-top:1px solid #C3C3C3;
}
div#blocks .block h2{
	text-transform:none;
}
div#blocks .block p{
	font-size:80%;
}


table.expos{
	width:100%;
	border-collapse:collapse;
}

table.expos td{
	padding:3px 10px 3px 0;
	border-bottom:1px solid #dedede;
}
table.expos td.expotitle{
	font-style:italic;
}


body.page-id-19 .colright{
	text-align:right;
}

.entry-meta{
	font-size:80%;
}

/* image styles from TwentyTen */
/* =Images
-------------------------------------------------------------- */

/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}
.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 24px;
	margin-top: 4px;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 24px;
	margin-top: 4px;
}
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 12px;
}
.wp-caption {
	background: #f1f1f1;
	line-height: 18px;
	margin-bottom: 20px;
	max-width: 632px !important; /* prevent too-wide images from breaking layout */
	padding: 4px;
	text-align: center;
}
.wp-caption img {
	margin: 5px 5px 0;
}
.wp-caption p.wp-caption-text {
	color: #888;
	font-size: 12px;
	margin: 5px;
}
.wp-smiley {
	margin: 0;
}

/* end image styles from TwentyTen */


/* start styles for narrow screens */

@media screen and (max-width: 700px) {
	#wrapper{
		width:100%;
	}
	#access{
		clear:left;
		float:none;
	}
	#access ul li{
		margin-left:0;
		margin-right:10px;
	}
	.colright{
		clear:left;
		float:left;
	}
	div#blocks .block{
		min-height:17em;
	}
	#main,
	#masthead,
	#content,
	.row{
		max-width:100%;
		overflow:auto;
	}
	.colleft,
	.colright,
	div.media .doubleblock{
		float:none;
		width:100%;
	}
	body.page-id-19 .colright{
	text-align:left;
	}
	img{
		max-width:100%;
	}	

}