/* CSS Document Diocèse de St-Hyacinthe Couleurs Navy BG menu principal #1e2c61 Bleu BG Titre page #3B5B9E Vert BG Entête + Titre de la page #cfdbb3 Gold BG Entête + Titre de la page #D8D4A7 Gold pâle menu liens #e6e3bf Gold très pâle blockquote #f4f2df Beige Background général #F8F8F0 (jaune #D8D4A7)(foncé H1 #efdf93) messes a #a8d9f3 messes p #a8f3b8 messes s #e3b7f8 messes ap #a8eff3 messes as #a8eff3 Layout, from : http://www.shadow-fox.net/tutorial/3-Column-All-CSS-Layout-With-Fluid-Center-and-Two-Columns */ /* GÉNÉRAL --------------------------------------------------------------------------------------- */ html, body, span, dl, dt, dd, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a, a img, table {border:0; margin:0; padding:0;} /*ol,*/ /*ul, li dl, dt, dd, {list-style-type: none; }*/ body {font: .78em verdana, arial, sans-serif; color:#333333; margin-left: 152px; min-width: 675px; max-width: 1200px; background: #D8D4A7;}/* min-width: 675px; 62.5%/1.3em*/ p {/*color: #413f3f;*/ margin: 0px 0px 15px 0px; line-height: 1.7em;} p.commentaire {color: #707070; font-size: 75%; padding: 5px 0px 10px 0px; border-top: 1px dotted #909090; } p.commentaire sup {/*color: #1e2c61;*/ color: #3B5B9E; font-weight: bold; font-size: 100%; padding: 0 5px 0px 0px; } p.centre {text-align: center;} ul { margin: 0px 0px 15px 30px;} ol { line-height: 1.5em; text-align: left; margin: 0 0 15px 40px;} ol li {list-style-type: decimal; } img, img a {display: block; border: none;} img.surligne {display: inline;} span.note {color: #606060; font-size: 66%; } span.note2 {color: #606060; font-size: 80%; } span.rouge {color:red;} span.droite {text-align: right;} h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; font-weight: bold;} h1 {font-size: 125%; text-align: left; color: #3B5B9E; padding: 5px 10px 5px 20px; margin: 0px 0px 10px 0px; /*width: 100%;*/ min-width: 500px; line-height: 1.2em; background: #e6e3bf url(images/b_H1.gif) no-repeat bottom left; border-bottom: 3px solid #1e2c61; height:auto;} h2 {font-size: 140%; text-align: left; color: #3B5B9E ; padding: 5px 0 10px 0;} h2.decrets {font-size: 125%; text-align: left; color: #1e4188 ; padding: 5px 0 10px 0;} h2.centre {font-size: 150%; text-align: center; color: #3B5B9E; padding: 5px 0 5px 0;} h3 {font-size: 120%; text-align: left; color: #3B5B9E; padding: 0 0 10px 0;} h4 {font-size: 110%; text-align: left; color: #6b6d89; padding: 0 0 5px 0;} h5 {font-size: 100%; text-align: left; color: #3B5B9E; padding: 0 0 0 15px; line-height: 1.3em;} h6 {font-size: 125%; text-align: left; color: #3B5B9E; padding: 5px 20px 5px 20px;width: 260px; line-height: 1.2em; background:#D8D4A7; border-bottom: 3px solid #1e2c61; height:auto;}/*Comme H1 pour autre colonne*/ blockquote {background-color: #f4f2df; padding: 15px 25px; border: 1px solid #1e2c61;line-height: 1.5em; }/*boites gold */ blockquote.citation { color: #1e2c61; font-size: 90%; padding: 5px 5px 0 5px; text-align: center; line-height: 1em;}/*boites gold pour les citations*/ blockquote dd {padding-left: 10px; } blockquote dt {font-weight: bold;} blockquote li {list-style-type: disc;} #menuTable{ }/*boites bleus contenant la table des matières*/ blockquote.menuTable {background-color: #3B5B9E; width: auto; margin: 10px 0; padding: 10px 0; text-align: left;color: #e6e3bf;} #menuTable blockquote ul li { font-size: 80%; line-height: 1.7em; } #menuTable table td{vertical-align: top;} blockquote.menuTable a:link {color: #e6e3bf;} blockquote.menuTable a:visited {color: #e6e3bf;} blockquote.menuTable a:active {color: #e6e3bf;} blockquote.menuTable a:hover {color: #fff; background-color: #1e2c61;} a:link {color: #3B5B9E; text-decoration: underline; font-size: 110%;} a:visited {color: #3B5B9E; text-decoration: underline; font-size: 110%;} a:hover {color: #1e2c61; text-decoration: underline; background-color: #eee; font-size: 110%;} a:active {color: #3B5B9E; text-decoration: underline; font-size: 110%;} #enteteD,#enteteC,#enteteT,#content,#pied {overflow:hidden; display:inline-block; } #enteteD,#enteteM,#enteteT,#sous-menu,#pied {float:left; } .droite {float: right; } .hd {float: right; margin-right: 40px; }/*pour placer le retour "Haut de la page" à droite*/ /* ENTETE --------------------------------------------------------------------------------------- */ #debut { top: 0px; left: -130px; }/*image famille*/ #enteteD {position: relative; top: 0px; right: 0; width:100%; height: 83px; background: url(images/enteteD.jpg) no-repeat 90% 0%;}/*image famille*/ #enteteC {position: absolute; top: 25px; left: 20px; width: 300px; height: 50px; background: url(images/enteteC.gif) no-repeat top left;}/*Diocèse de Saint-Hyacinthe*/ #enteteG {position: absolute; top: 0px; left: 0px; height: 192px; width: 152px; background: url(images/img_enteteG.jpg) no-repeat top left; z-index: 20;}/*image coin gauche*/ #enteteG-index {position: absolute; top: 0px; left: 0px; height: 192px; width: 152px; background: url(images/mgr-lapierre-index.jpg) no-repeat top left; z-index: 20;}/*image coin gauche*/ #enteteH {position: relative; clear: both; top: 0; right: 0px; height: 42px; width: 100%; background: #D8D4A7 url(images/f_H.jpg) repeat-x; }/*comprend "L"(petit menu), "R"(recherche) "T"(titre)*/ #enteteL {position: absolute; top: 0px; right: 0px; }/*petit menu*/ #enteteL ul {float: right; margin: 2px 10px 0 0;} #menuL li {display: inline; } #menuL li a { color: #e6e3bf; text-decoration: none; font-size: 95%;font-weight: bold; margin-right: 8px ;} #menuL a:hover {color: #1a2c36; text-decoration: underline; background-color: none; } #enteteT {position: absolute; top: 19px; left: 15px; height: 25px; width: 450px;}/*Titre*/ #enteteT span.titre {color: #D8D4A7; font-size: 145%; } #enteteT span.sous-titre {color: #fff; font-size: 115%;} #enteteR {position: absolute; float: right; top: 21px; right: 10px;/* _width: 360px;*/ height: 50px; text-align: right;}/*champ de recherche*/ #enteteR input { font-size: 75%;} /* CONTENU --------------------------------------------------------------------------------------- */ #page { max-height:100%; background: #D8D4A7; min-width: 675px; max-width: 1200px; } #page-messes { max-height:100%; background: #D8D4A7; min-width: 880px; max-width: 1200px; }/*page plus large pour voir les samedi et dimanche sur IE7*/ #bodyblock {position: relative; clear: both; top: 0px; left: 0px; width: 100%; height: 100%; text-align: justify; background: #F8F8F0; } #bodyblock img {background-color:#F8F8F0; padding: 2px; border: 2px solid #3B5B9E; } #bodyblock img.sb { border: none; padding: 0;display: inline; margin-bottom: -2px;} #bodyblock img.lien{ border: 1px solid #F8F8F0; } #bodyblock a:hover .lien{ border: 1px solid #D8D4A7;} #bodyblock span.page { float:right; padding-right: 25px;/*padding-bottom: 20px; */} #bodyblock ul li {list-style-type: disc; line-height: 1.7em;} #col-gauche2 { float: left; width: 250px; padding: 10px 8px 8px 13px; background: #F8F8F0; } /*#col-gauche { float: left; width:1px; background: #F8F8F0;}*//*pour créer une marge de gauche*/ /*#col-droite { float: right; width: 15px; background: #F8F8F0; }*//*pour créer une marge de droite*/ #content { margin-left:15px; margin-right:15px; margin-top:15px; background: #F8F8F0; } .conteneur img { clear: both; margin: 0 0 10px 15px; float: right;} .conteneur-gauche img { clear: both; margin: 0 0 10px 15px; float: left;} .clear-image { clear: both;} .conteneur span.photo {display: block; margin: 5px 0px 5px 15px; float: right;} span.image {float: right; color: #3B5B9E; padding: 0 0 15px 25px; margin-bottom: 25px; font-weight: bold;/*margin-left: 25px;*/ clear: both;}/*Nom de la personne sur la photo*/ #ae { width: 100%; margin-left: -15px;} #ae img { margin: 0 15px 0 15px; } #ae ul { display: inline; } #ae ul li { list-style-type: none; float: left; min-width: 120px; height: 325px; font-size: 75%; line-height: 1.5em; text-align: center; } #discographie ul li{ list-style-type: none; margin-left: -25px; } #photos { float: left; width: 100%; margin-left: -15px; } #photos img { margin: 0 15px 0 15px;} #photos ul { display: inline; } #photos ul li { list-style-type: none;float: left; min-width: 120px; height: 270px; font-size: 75%; line-height: 1.5em; text-align: center; } span.mgr {color: #1e2c61; font-size: 110%; font-weight: bold; } #ae a:hover img { border: 2px solid #D8D4A7;} #direction table { width: 670px; }/*dio-direction*/ #direction td { border: 1px solid #000; background-color: #f4f2df; padding: 5px 10px; } #stats {line-height: 2em; width: 500px; text-align: left;}/*sio-statistiques*/ #stats dd {/*padding-eflt: 10px;*/ } #stats dt {border-top: 1px solid #606060; font-weight: bold;} #stats span{ float: right; } #stats li {list-style-type: disc; } #plan { line-height: 2em; text-align: left;} #plan dd {padding-left: 10px; } #plan dt {font-size: 110%; margin-top: 10px; font-weight: bold;} #plan li {list-style-type: disc; margin-left: 5px; } #plan li.nb { list-style-type: none; } #municipalite p { margin-left: 10px; } #messes table { font-size: 80%; width: 840px; } #messes caption { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 120%; text-align: left; color: #3B5B9E;} #messes th { background: #3B5B9E; text-align: center; color: #fff;line-height: 20px;} #messes th.par { background: #3B5B9E; text-align: left; color: #fff;} #messes td { text-align: center; background-image: url(images/f_messe.gif); background-repeat: repeat-x; background-position: bottom; } #messes td span { text-align: center; font-size: 90%; } #messes td.par { text-align: left; } #messes td.par2 { padding-left: 15px; text-align: left;} #messes td.nb { color: #707070; text-align: left; colspan: 9;} #messes td.nb2 { color: #707070; padding-left: 37px; text-align: left; colspan: 9;} #messes td.un { background: #1e2c61; color: #fff; text-align: left; colspan: 9;} #messes td.a { background: #a8d9f3; } #messes td.p { background: #a8f3b8; } #messes td.s { background: #e3b7f8; } #messes td.ap { background: #a8eff3; } #messes td.as { background: #a8eff3; } #messes td.ps { background: #a8eff3; } #enteteEnvoi table { max-width: 760px ;} #enteteEnvoi table td { vertical-align: top;} #sf-paroisses { max-width: 625px;} #sf-paroisses li.nb { list-style-type: none; } #ev-agenda ul li span {text-indent: 200px; /*padding-left: 50px;*/ } /* CONTENU CARTE GEOGRAPHIQUE POP UP -------------------------------------------------------- */ .thumbnailA,.thumbnailF{ position: relative; z-index: 0;} .thumbnailA:hover,.thumbnailF :hover{ background-color: transparent; z-index: 1100;} .thumbnailA span,.thumbnailF span{ /*CSS for enlarged image*/ position: absolute; background-color: #D8D4A7; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none;} .thumbnailA span img,.thumbnailF span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px;} .thumbnailA:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: -350px; left: 150px; /*position where enlarged image should offset horizontally */} .thumbnailF:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: -85px; left: 170px; /*position where enlarged image should offset horizontally */} /* CONTENU INDEX -------------------------------------------------------- */ #index { max-height:100%; background: #D8D4A7; min-width: 675px; /*_width: 685px;*/ max-width: 1200px; } #enteteT-index {position: absolute; clear: both; top: 19px; left: 0; height: 25px; width: 100%;} #enteteTT-index {position: absolute; left: 10px;} #enteteT-index span.titre-index {color: #D8D4A7; font-size: 130%; padding-left: 10px; } #bodyblock-index { width: 100%; height: 100%; background: #faf9f3 url(images/fond-index.jpg) no-repeat 0% 20%; } #actualites { position: relative; /*clear: both;*/ float: right; width: 360px; padding: 5px 10px 0px 8px;} .conteneur-actualite-large {width: 100%; clear: both; height: 105px; padding-right: 40px ;/*background: url(images/b_actualite.gif) bottom left no-repeat;*/} .conteneur-actualite-large img {float: right; border: 2px solid #fff;} .conteneur-actualite-large a:hover img{ border: 2px solid #3B5B9E;} .conteneur-actualite {width: 100%; clear: both; height: 105px; background: url(images/b_actualite.gif) bottom left no-repeat;} .conteneur-actualite img {margin: 3px 3px 3px 0px; float: right;} .conteneur-actualite p { margin: 5px 0px 5px 0px; line-height: 1.5em;} #actualites p a:link, #actualites p a:active, #actualites p a:visited{ font-weight: normal; text-align: left; font-size: 70%; font-weight: bold; line-height: 1.5em; color: #3B5B9E; text-decoration: none;} #actualites p a:hover{ font-weight: normal; text-align: left; font-size: 70%; font-weight: bold; line-height: 1.5em; color: #3B5B9E; text-decoration: underline; background: none;} #actualites p.RougeGras a:link, #actualites p.RougeGras a:hover, #actualites p.RougeGras a:active, #actualites p.RougeGras a:visited{ text-align: left; font-size:85%; color: #C84343;} #modifieLe {position: relative; clear: both; left: 100px; top:-5px; }/*Modifié le en clear both, permet de montrer le background sur la dividion actualité car une division en float right ou left n'a pas de contenu dans le flux*/ #titreFilm {position: relative; clear: both; left: 10px; top: 5px; } #titreFilm span {color: #707070; font-size: 100%; } #gauche-index {position: absolute; padding: 10px 0 0 10px; } #gauche-index h4{ color: #C84343; text-align: center; font-size: 185%; font-family: Georgia;} #gauche-index p{ color: #C84343; text-align: center; font-size: 150%; font-family: Georgia;} span.commentaire-index {color: #707070; font-size: 75%; } object.animation { margin : 0; } /* PIED DE PAGE --------------------------------------------------------------------------------------- */ #pied {float: left; clear: both; top: 0px; left: 5px; height: 50px; width: 100%; /*min-width: 650px;*/ padding: 7px 0 7px 0; } #pied a:link {color: #404040; text-decoration: none; font-size: 80%; line-height: 1.1em;} #pied a:visited {color: #404040; text-decoration: none;} #pied a:hover {color: #404040; text-decoration: underline; color: #000;} #pied a:active {color: #404040;text-decoration: none;} #pied ul { margin: 10px 0px 15px 0; } #pied li {float: left; display: inline; } #pied li a { color: #1e2c61; margin: 0 5px ; font-size: 75%; text-decoration: underline} #pied p { font-size: 66%; line-height: 1.1em; margin: 0 0 0 0; color: #606060;} #pied p a { font-size: 90%; line-height: 1.1em;} /*#pied a:hover img { border: 1px solid #000}*/ .copyright {float: right; clear: right; top: 0px; left: 5px; height: 45px; width: 100%; padding: 5px 0 5px 0; } /* MENU --------------------------------------------------------------------------------------- */ #gauche { top: 20px; left: 0px; width: 152px;} #menuG {position:absolute; top: 192px; left: 0px; width: 152px;} /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/flyout5.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ .menu {position:relative;z-index:1000; font-size:75%; _font-size:66%; height:235px; margin:0px 0 0 0px; } /* remove all the bullets, borders and padding from the default list styling */ .menu ul {padding:0;margin:0;list-style-type:none;width:150px;position:relative;border:1px solid #888;border-width:1px 1px 0 1px; background:#1e2c61;} .menu li { background:url(images/slide_4.gif) no-repeat;/*background: #3B5B9E ;*/ height:23px;} html .menu li {margin-left:-16px; margin-left:0;} /* get rid of the table */ .menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;} /* style the links */ .menu a, .menu a:visited {display:block; text-decoration:none;height:22px;line-height:22px;width:150px;color:#e6e3bf;text-indent:5px;border-bottom:1px solid #888;background:transparent;} /* style the link hover */ html .menu a:hover {color:#fff; background:#1e2c61; text-decoration:none;} .menu :hover > a {color:#fff; background: url(images/slide_5.gif) no-repeat;*/ } /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul {visibility:hidden;position:absolute;top:-1px;left:110px;} /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul {visibility:visible;background:#1e2c61;} /* keep the third level hidden when you hover on first level list OR link */ .menu ul :hover ul ul{visibility:hidden;} /* keep the fourth level hidden when you hover on second level list OR link */ .menu ul :hover ul :hover ul ul{visibility:hidden;} /* make the third level visible when you hover over second level list OR link */ .menu ul :hover ul :hover ul{ visibility:visible;background:#1e2c61;} /* make the fourth level visible when you hover over third level list OR link */ .menu ul :hover ul :hover ul :hover ul { visibility:visible;background:#1e2c61;} .menu ul.top1 {top:0;} .menu ul.top2 {top:23px;} .menu ul.top3 {top:46px;} .menu ul.top4 {top:69px;} .menu ul.top5 {top:92px;} .menu ul.top6 {top:115px;} .menu ul.top7 {top:138px;} .menu ul.top8 {top:161px;} .menu ul.top9 {top:184px;} .menu ul.top10 {top:207px;} li.moyen a, li.moyen a:hover { font-size:95%; } #logo {position:absolute; top: 450px; left: 0; width: 152px;} /*Si on ne veut pas montrer les entêtes et les menus*/ /*#enteteC,#enteteD,#enteteG,#enteteG-index,#enteteH,#enteteL,#enteteR,#pied,#gauche,#menuG { display: none; }*/