/*
Design : mosaic.ca
Code   : christianthibault.com
*/

/* #Reset & Basics (Inspired by E. Meyers) */
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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, 
output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

body { background-color: #fff; font-family: Helvetica, Arial, sans-serif; color: #64666a; font-size: 10px; letter-spacing: 1px; line-height: 13px; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a, .orange { color: #cf492c; }
#contenant { width: 672px; margin: 30px auto; }
#entete { height: 81px; }
#entete #logo { background-image: url("../images/mosaic-design.png"); background-position: 0 0; background-repeat: no-repeat; background-size: 184px 73px; float: left; width: 184px; height: 73px; margin: 4px 15px 0 0; overflow: hidden; text-indent: 100%; white-space: nowrap; }
#entete #courriel { margin: 0 0 0 16px; }
#contenu { width: 672px; height: 672px; padding: 20px 0; border-top: 1px #e5e5e5 solid; border-bottom: 1px #e5e5e5 solid; }
#contenu .flexslider { max-width: 672px; }
#pieddepage { height: 52px; text-align: right; }

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 692px) {
	#contenant { width: auto; margin: 30px 10px; }
	#entete, #contenu, #pieddepage { width: auto; height: auto; }
	#entete { padding: 0 0 25px; }
	#entete #logo { float: none; }
	#contenu .flexslider { width: 100%; height: auto; }
}