/*
Theme Name: Bzzz Responsive
Theme URI: http://www.bzzz.be
Description: Framework responsive du studio Bzzz.
Version: 8
Author: Bzzz
Author URI: http://www.bzzz.be/
*/

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
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;}
ins, a {text-decoration: none;} /* Ajout de Jef : a */

/* ---------------------------------------------------------------------------
   HTML ELEMENTS
   --------------------------------------------------------------------------- */

body {font: lighter 90% 'Helvetica', Sans-serif;color: #888;background: #fff;}
h1, h2, h3, h4, h5, h6 {color:#F90;padding-bottom: .8em;}
h1 {font-size: 2em;}
h2 {font-size: 1.7em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.3em;}
h5 {font-size: 1.1em;}
p {padding-bottom: .8em;}
pre {font-family: inherit;}
a {color: #f90;}
a:hover {color: #fb0;}
small {font-size: .7em;color: #bbb;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}

.left {float: left;}
.right {float: right;}
.alignleft {float:left;margin: 0 1em 1em 0;}
.alignright {float:right;margin: 0 0 1em 1em;}
.wp-caption-text {font-size: .8em;font-style: italic;}

blockquote {
	margin-bottom: .8em;
	padding: 1.5em 1.3em;
	background: #eee;
	color: #888;
	font: italic normal 1.2em/1.5em Georgia, 'Times New Roman', Times, serif;	
}
blockquote p {padding: 0;}

.clear {clear: both;}
.clear:after {display:block;visibility:hidden;clear:both;height:0;content: ".";}

/* ---------------------------------------------------------------------------
   LAYOUT
   --------------------------------------------------------------------------- */

#page {position: relative;background:#FFF;max-width: 1000px;width:95%;margin: 0 auto;overflow: auto;top: 3em;margin-bottom: 3em;}
header {position: relative;width: 100%;height: 200px;}
#main {float:left;width: 68%;}
aside {float:right;width: 30%;padding-left: 2%;}	
footer {background: #333;overflow: auto;}
.footerwrap {margin: 0 auto;max-width: 1000px;width:95%;padding: 2em 0;}

.col {float: left;width: 28%;margin-right: 2%;padding:2%;min-height: 200px;}
.lastcol {margin-right: 0;}

/* ---------------------------------------------------------------------------
   HEADER
   --------------------------------------------------------------------------- */

header h1 {margin:0;padding: 0;}
header h1#logo a {background: url(images/logo.png) no-repeat 20px 20px ;display: block;width:600px;height:150px;text-indent: -9999px;}
header p#intro {width: 600px;padding:0px 20px;}
header form.bzzzsearch {position: absolute;top: 10px; right: 10px;}

/* ---------------------------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------------------------- */

#nav {width: 100%;position: fixed;background-color: #f90;z-index: 78;}
#nav > a {display: none;}
#nav li {position: relative;z-index: 80;}
#nav li a {color: #fff;display: block;}
#nav li a:active {background-color: #fb0 !important;}
/* first level */
#nav > ul {background-color: #f90;max-width: 1000px;margin: 0 auto;}
#nav > ul > li {float: left;}
#nav > ul > li > a {line-height: 3em;padding: 0 1em;}
#nav > ul > li:not( :last-child ) > a {border-right: 1px solid #fb0;}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a {background-color: #fb0;}
/* second level */
#nav li ul {background-color: #fb0;display: none;position: absolute;top: 100%;width: 200px;z-index: 79;}
#nav li:hover > ul {display: block;left: 0;right: 0;}
#nav li ul a {border-top: 1px solid #f90;padding: 0.75em;}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a {background-color: #f90;}
/* third level */
#nav li li ul {left: 100%!important;top: 0;display: none;}

/* ---------------------------------------------------------------------------
   MAIN
   --------------------------------------------------------------------------- */

#crumbs {font-size:.7em;margin-bottom: 20px;}
#main ul, #main ol {margin: 0 0 10px 60px;}
#main ul li {list-style-type: disc;}
#main ul#listeliens li {list-style-type: none;}
#main ol li {list-style-type: decimal;}

.postmeta {padding: .7em 0; margin: 2em 0;color:#bbb;font-size:.7em;text-align: right;border-bottom: 1px solid #ddd;}
.postmeta img {padding-right: .5em;}

.gallery {clear: both;margin: 0 0 10px 0!important;}
.gallery-item {float: left;margin: 12px 17px 0 0!important;text-align: center;width: auto !important;}
.gallery img {border: 1px solid #bbb!important;}

.excerpt {overflow: hidden;}
.excerpt a img, .excerpt img {float: left;margin: 10px 10px 10px 0;}
.excerpt h1, .excerpt h2, .excerpt h3, .excerpt h4 {clear: none;}

li.comment {margin-top: 10px;}

#pagination {margin:0!important;clear: both;}
#pagination li {list-style-type: none!important;float: left;width: 20px;height:20px;font-size: .7em;text-align: center;line-height: 20px;margin: 0 2px;}
#pagination a {display:block;float: left;width: 20px;height:20px;background-color: #eee;}
#pagination a:hover {background: none;}

.prevnext a {display:block;float: left;width: 20px;height:20px;background-color: #ddd;text-align: center;}

#main ul.agendasubmenu {margin: 0 0 10px 0px;}
#main ul.agendasubmenu li {display: inline;list-style-type: none;}

/* ---------------------------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------------------------- */

aside h3 {padding-top: .8em;}
aside > ul {border-bottom: 1px solid #ddd;}
aside ul li a {display:block;padding: .4em 0;border-top: 1px solid #ddd;}
aside ul ul li {padding-left: .8em;}

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */

footer ul li a {display:block;padding: .4em 0;border-top: 1px solid #666;}

#credits {width:100%;text-align: center;color:#666;font-size: 0.8em;clear:both;float: left;padding: 2em 0;}

/* ---------------------------------------------------------------------------
   TABLEAUX
   --------------------------------------------------------------------------- */

table {margin: 10px 0px;}
tr.odd {background: #eee;}
th {background: #f90;color: #fff;}
th, td {padding: 5px 10px;border-right: #fff solid 1px;}

/* ---------------------------------------------------------------------------
   FORMULAIRES
   --------------------------------------------------------------------------- */

#main form {margin-bottom:10px;padding:20px;background: #eee;}
label {display: block;margin: 8px 0;float:left;clear: both;width: 40%;}
label span.error {color: #F00;font-size: 0.8em;}
input, select, textarea {padding: 5px;color: #777;background: #fff;border: 1px solid #bbb;}
textarea {width: 250px;height: 80px;display: block;}
.input250px {width:250px;}

.button, .button:visited {
	background: #F60 url(images/overlay.png) repeat-x;
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff;
	border-radius: 6px;
	position: relative;
	cursor: pointer;
	line-height: 1; 
}
.button:hover {background-color:#F90;color:#fff;}
.button:active {top: 1px;}
.small.button, .small.button:visited { font-size: 11px}
.large.button, .large.button:visited { font-size: 14px;padding: 8px 14px 9px; }
.super.button, .super.button:visited { font-size: 34px;padding: 8px 14px 9px; }

/* ---------------------------------------------------------------------------
   WIDGETS BZZZ
   --------------------------------------------------------------------------- */

/* bzzz_searchform */

form.bzzzsearch {
	width: 264px; height: 24px;
	background: #fff url(images/search_white.jpg) no-repeat right;
	margin:0 0 10px 0;padding:2px;
	border: 1px solid #ccc;
	border-radius: 5px;
}
form.bzzzsearch input {height: 24px;background: none;border: none;padding: 0;}
form.bzzzsearch .searchinput {width: 230px;float: left;text-indent: 7px;line-height: 24px;}
form.bzzzsearch .searchloupe {width: 30px;text-indent: -9999px;float: right;}

/* bzzz_loginform */

.connex {width: 45%;}

/* bzzz_sociallinks */

.followus a {margin-right: 5px;}

/* ---------------------------------------------------------------------------
   MEDIA QUERIES
   --------------------------------------------------------------------------- */

@media only screen and ( max-width: 640px )
{
	#main {float:none;width: 100%;}
	aside {float:none;width: 100%;padding-left: 0;}	
	.footercol {float:none;width: 100%;padding: 3% 0;}
	#nav > a {width: 3.125em; /* 50 */height: 3.125em; /* 50 */text-align: left;text-indent: -9999px;background-color: #f90;position: relative;}
	#nav > a:before,
	#nav > a:after {position: absolute;border: 2px solid #fff;top: 35%;left: 25%;right: 25%;content: '';}
	#nav > a:after {top: 60%;}
	#nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type {display: block;}
	/* first level */
	#nav > ul {height: auto;display: none;position: absolute;left: 0;right: 0;}
	#nav:target > ul {display: block;}
	#nav > ul > li {width: 100%;float: none;}
	#nav > ul > li > a {height: auto;text-align: left;padding: 0 0.833em; /* 20 (24) */}
	#nav > ul > li:not( :last-child ) > a {border-right: none;border-bottom: 1px solid #fb0;}
	/* second level */
	#nav li ul {position: static;padding: 0 1em; width: 100%;}
	header form.bzzzsearch {position: fixed;top: 10px; right: 10px;z-index: 80;}
}