/* durselinvenice.be
* HTML5 ✰ Boilerplate - h5bp.com/css
*
* //// Table of content: /////
*
* Normalize:
* html5 display, base, links, typography, lists, embedded content, figures, tables, forms
* Primary styles:
* elements/tags
* elements with classes
* General page layout
* Areas:
* Header
* Content
* Footer
* Non-semantic helper classes
* Print styles
*
* ==|== normalize ==========================================================
*/
/*
COLORS
orange: #ff8a00;
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-family: Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 1.4; color: #222; overflow-x: hidden;}
::-moz-selection { background: #FCD862; color: #fff; text-shadow: none; } /* customize selection color */
::selection { background: #FCD862; color: #fff; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dl {}
dt {}
dd { margin: 0 0 0 40px; }
nav ul, nav ol, ul#nav, ol#nav { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; max-width: 100%;}
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* =============================================================================
Forms
========================================================================== */
button, input, select, textarea {font-family: sans-serif; color: #222; }
form { margin: 0; padding: 0; overflow: hidden; }
fieldset { border: 0; margin: 0; padding: 0; font-size: 100%;}
legend { border: 0; *margin-left: -7px; margin: 0; padding: 0; display: block; }
label { cursor: pointer; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* additional forms styles: see forms.css */
/* ==|== primary styles =====================================================
Author: Samuel Dellicour - www.samplify.be
========================================================================== */
/*
---------------------------- ELEMENTS
*/
hr {margin: 20px auto; padding:0; height:0px; border: 1px solid #D1D1D1; border-width: 0 0 1px 0; background:none; clear:both;}
p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}
p, dl, ul {margin-top:0;}
h1 {
margin:0 0 20px 0; padding:11px 2px; background:#FBC707; font-family: Georgia, serif; font-size:26px; font-style:normal; font-weight: bold; color:#fff; line-height:36px;
position: relative;
}
h1:before,
h1:after {
content: "";
position: absolute;
top: 0;
bottom:0;
height: 100%;
background: #FBC707;
width: 1500px;
z-index: 2;
}
h1:before {right: 100%;}
h1:after {left: 100%;}
h1 em,
h1 strong {font-style: italic;}
h2 {font-size: 18px; margin: 0.8em 0 0.8em 0; font-weight: bold;}
h3 {font-size: 16px; margin: 0; font-weight: bold;}
h4 {font-size: 14px; margin: 0; font-weight: normal; font-style: italic;}
h5,
h6 {font-size: 12px; margin-bottom:20px; font-weight: normal;}
blockquote { font-style: italic;}
strong {font-weight: bold;}
em {font-style: italic;}
ul {list-style: square;}
ul li {margin-left: 30px;}
ul li {padding: 0 0 0 16px; background: url(../img/style/bullet.gif) no-repeat 0 8px;}
ol {list-style: decimal;}
ol li { margin-left: 30px;} /* + value for IE 567 */
dl {}
dt {font-weight: bold;}
dd {margin:0; padding:0;}
a {color: #CEB600; background:; text-decoration: none; font-weight: normal;}
a:active,
a:focus,
a:hover {color: #EAC700; text-decoration: none;}
a:visited {}
img {}
table {border-spacing:0; border-collapse:collapse;/* for IE 6,7 */ margin-bottom: 2em;}
table th,
table td { padding: 0px 10px 2px 10px; border-bottom: 1px solid #DADADA;}
table th { background-color: #5F5F5F; color: #ffffff; border-bottom:none;}
table.no_border th,
table.no_border td {border:none; padding-left:0; padding-right: 20px;}
/* ------------------------ elements with classes
*/
img.image_left {float: left; display: inline; margin: 0 15px 5px 0;}
img.image_right {float: right; display: inline; margin: 0 0 5px 15px;}
.weak,
.soft {color: #999999;}
.small { font-size: .8em;}
.large { font-size: 1.2em;}
p.special_noir { background: #3A3A3A; color:#fff; padding: 15px 20px 14px 20px;}
p.special_gris {background:#eeede8; color: #000; padding: 3px 6px 5px; font: 10px Georgia,serif; font-style:italic;}
p.ou {margin:-20px 0 0 0; padding-left:15px; color: #A8A8A8; font-size: 10px;}
p.citation,
p.citation-droite {font-style: italic; font-size: 0.9em; margin-left: 30px;}
.citation .auteur {display: block; margin-left: 0px; font-style: normal;}
p.citation-droite {margin-left: 500px; text-align: right;}
.citation-droite .auteur {display: block; text-align: right; font-style: normal;}
/* realisations */
.wrap_real {} /* wrapper */
.wrap_real ul {list-style:none; margin:0; padding:0;}
.wrap_real ul li {margin:0; padding:10px 0 0 0; list-style:none; background:url(../img/diagram-real-single.png) no-repeat center top;}
.wrap_real ul img {display:block; margin-bottom: 10px;}
.wrap_real ul a {display:block; background: #fff; border:1px solid #2a2a2a; padding-bottom:12px;
text-align:center; color: #262626;}
.wrap_real ul a:hover {border-color: #C9C9C9; background:#fff; color: #707070;}
/* next / previous links */
ul.nextprev {overflow: hidden; color: #BFBFBF; margin: 2em 0 1em; padding: 0; text-transform: uppercase; font-size: 12px; line-height: 2;}
ul.nextprev li {list-style: none; background: 0; margin: 0; padding: 0; overflow: hidden;}
.nextprev li.next {float: right; display: inline; width: 40%; text-align: right;}
.nextprev li.prev {float: left; display: inline; width: 40%;}
.nextprev a {display: inline-block; padding: 0px 15px; color: black; background: #FBC707; text-decoration: none;}
.nextprev a:hover {color: white; background: #FBC707; text-decoration: none;}
/* ================================ GENERAL PAGE LAYOUT and PAGE ZONES ==============================================
*/
body {
padding-top: 0px;
padding-bottom: 0px;
background: url(../img/head.png) repeat-x 0 0;
background-color: #FCFCF9;
}
header, footer, .content, .main_col, .container_12, .container_16 {zoom: 1;} /* containing floats */
header:after, footer:after, .content:after, .main_col:after, .container_12:after, .container_16:after {content: ""; display: table;clear: both;}
#container { /*background: url(../img/960_12_col.png);*/}
.wrap_content {}
.main_col {padding-bottom: 50px;} /* no side padding/margin when using 960 grid */
/* ------------------------ header
*/
header {height:282px;} /* no side padding/margin! */
/* logo */
div#logo_site {height: 146px;}
#logo_site a {
display: block; width: 100%; height: 100%; background: url(../img/logo.png) no-repeat 0 0;
text-indent: -9000px; text-decoration: none; overflow: hidden;
}
#logo_site a:hover { text-decoration: none;}
/* slogan */
#slogan {padding-top: 28px; font-family: Georgia; font-size: 14px; line-height:200%; font-style: italic;}
/* main navigation - horizontal */
nav {clear:both; padding-top:26px;} /* contains all nav lists */
/* all nav links */
nav ul li {margin-left:0; padding-left:0;}
nav a, nav strong {font-size:12px; line-height: 125%; text-transform: uppercase; font-weight:normal; color:#000; text-decoration:none;}
nav a:hover,
nav a:focus {color: #000; background: #fff;}
/* main nav list */
.nav1 {width: 600px !important; /* override grid 620px */ }
.nav1 li {
position:relative; float: left; display:inline; margin: 0 5px 0 0; padding: 0; list-style-type: none; height: 20px;
}
.nav1 a:link,
.nav1 a:visited,
.nav1 a:active,
.nav1 strong {
float: left; display: inline; width: auto; margin:0 3px 0 0; padding: 3px 6px;
}
.nav1 a:focus,
.nav1 a:hover {}
#page_accueil #nav1_1 a,
#page_philo #nav1_2 a,
#page_marche #nav1_3 > a,
#page_real-vue #subnav1 a,
#page_real-cas #subnav2 a,
#page_budget #nav1_4 a,
#page_faq #nav2_1 a,
#page_petition #nav2_2 a,
#page_mecenes #nav2_3 a,
#page_presse #nav2_4 a,
#page_cv #nav2_5 a,
#page_equipe #nav2_6 a,
#page_actu #nav2_7 a,
#page_contact #nav2_8 a {
background:#fff; color:#000;
}
/* main nav sublists */
.nav1 ul {position:absolute; top:25px; left:22px; z-index:2; width:300px; background: url(../img/nav-sub.png) no-repeat 0 0; padding: 9px 0 0 10px;}
.nav1 ul li {float:none; display:block; margin:0; padding:0; height:auto;}
.nav1 ul li a {line-height:135%;}
/* secondary nav lists */
.container_12 nav .nav2 {width:70px;} /* override 60px */
nav .nav2 a {font-size:10px; line-height:130%; padding: 2px 3px; display:block;}
nav ul.nav2 {}
nav ul.nav2 li {margin-bottom: 2px;}
/* ------------------------ content
*/
/* ------------------------ content HOME
*/
/* ------------------------ footer
*/
footer {padding: 10px 0 50px 0; clear: both; background: white; border-top: 1px solid #c1c1c1;} /* no side padding/margin! */
footer .inner {}
footer .left {}
footer .right {text-align:right;}
footer p {margin: 0; padding: 0; color: #999999; font-size: 11px;}
footer a:link,
footer a:visited,
footer a:active {color: #333333; text-decoration: none;}
footer a:hover {color: #000000; text-decoration: underline;}
/*
--------------------------------------------------------------------------
page/section specific styles
--------------------------------------------------------------------------
*/
/* ------------------------ home page
*/
#page_accueil {}
ul#diagram-home {position:relative; height:250px; background: url(../img/diagram-home.png) no-repeat 50% 60px;}
ul#diagram-home li {position:absolute; margin:0; padding:0; width: 246px; height:60px; list-style:none; background:none;}
ul#diagram-home a,
ul#diagram-home strong {display:block; width:100%; height:40px; padding-top:20px; background:#FBC707; color:#212121;
font-weight:bold; font-size:14px; line-height: 1.25; text-transform:uppercase; text-align:center;}
ul#diagram-home strong {background:#E5E5E5;} /* no link */
ul#diagram-home a:hover,
ul#diagram-home a:focus {color:#000; background:#FFDD00;}
li.li1 {top:0px; left:0px;}
li.li2 {top:0px; left:267px;}
li.li3 {top:108px; left:136px;}
li.li4 {top:108px; left:400px;}
li.li5 {top:0px; left:535px;}
li.li6 {top:186px; left:178px;}
li.li7 {top:186px; left:446px;}
ul#diagram-home .li3 a,
ul#diagram-home .li4 a {padding-top:12px; height:48px;}
ul#diagram-home li.li6,
ul#diagram-home li.li7 {width: 155px;}
ul#diagram-home .li6 a,
ul#diagram-home .li7 a {padding-top: 12px; height: 30px;}
#page_accueil table {margin: 40px 0;}
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats (clear child floats): h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* clear preceding floats (siblings, NOT children) */
.clear_floats {clear:both;}
/* empty div clearing preceding floats */
.clear {clear:both; line-height:0; height:0; font-size:0;}
/* ==|== print styles =======================================================
Print styles.
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
@page { margin: 0.5cm; }
/* hide elements when printing: */
.no_print, #slogan, nav, #footer, hr {display:none;}
/* undo layout if necessary */
body, #container, #wrap_content, #main_col, #sub_col, #footer { background:none; width:auto; margin:auto; padding:0; float:none; display:block;}
/* text */
body {font-size: 9pt; font-family: Arial, Helvetica, sans-serif;}
a:link,
a:visited { color:inherit; background: none; text-decoration:underline; font-weight:normal;}
a[href]:after { content: " (" attr(href) ")"; }
ul, ol, ul li, ol li { margin: auto; padding: 0 0 0 1em;}
ul li { background: none; list-style: disc;}
h1 { font-size: 1.4em; }
h2 { font-size: 1.2em; }
h3, h4, h5 { font-size: 1.1em;}
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
abbr[title]:after { content: " (" attr(title) ")"; }
pre,
blockquote { border: 1px solid #999; page-break-inside: avoid; }
/* images */
a img { border:none;}
img { float: left; margin: 0 15px 5px 0; max-width: 100% !important; page-break-inside: avoid; }
img.align_right,
img.image_right { float:right; display:inline; margin:0 0 5px 15px;}
/* tables */
table th { text-align: left;}
thead { display: table-header-group; } /* h5bp.com/t */
tr { page-break-inside: avoid; }
/* forms */
input.text, input[type="text"],
input.password, input[type="password"],
input.reset, input[type="reset"],
select,
textarea {border: 1px solid #C7B1B1; float: none; display: block;}
label { display:block; margin-top: 5px;}
/* extra */
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
}