/* -------------------------------------------------------- Global stylesheet Created by: Guillaume - guillaume@falzhobel.ca Filename: css/global.css -------------------------------------------------------- */ /* -------------------------------------------------------- General -------------------------------------------------------- */ * { margin: 0; padding: 0; } body { background-color: #fff; background: url(../images/general/background.gif) center fixed; font: 12px Arial, Verdana, Helvetica, sans-serif; line-height: 12px; color: #666; margin: 0px; padding: 5px 5px; } /* -------------------------------------------------------- Native -------------------------------------------------------- */ /* Headers */ h1, h2, h3, h4, h5 { font-weight: normal; line-height: 1.2em; } /* Paragraphs */ p { } /* Links */ a { color: #4c3e12; text-decoration: none; -moz-outline-style: none; } a:hover { color: #007236; } /* Forms */ input, select, textarea { font: 10px Arial, Verdana, Helvetica, sans-serif; padding: 3px; color: #999; background-color: #f0f0f0; border: 1px solid #ccc; } select, .radio, .checkbox { padding: 0px; } /* Lists */ ul { list-style: none; } /* Images */ img { border: 0px; } /* Sub and Sup Fix */ sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; } sup { bottom: .5ex; } sub { top: .5ex; } /* -------------------------------------------------------- Global Classes -------------------------------------------------------- */ /* Floats */ .float_left { float: left; } .float_right { float: right; } /* Formatting */ .tiny { font-size: 12px; } .smaller { font-size: 12px; } .normal { font-size: 12px; } .bigger { font-size: 13px; } .large { font-size: 14px; } .bold { font-weight: bold; } .centered { text-align: center; margin: 0 auto; } .right { text-align: right; } .uppercase { text-transform: uppercase; } .normalcase { text-transform: none; } .justified { text-align: justify; } /* Paragraphs */ .content_text { line-height: 1.4em; padding-bottom: 10px; } .extra_pad { padding-bottom: 16px; } .extra_extra_pad { padding-bottom: 32px; } .bot_margin { margin-bottom: 8px; } /* Colors */ .red { color: #007236; } .dark_red { color: #007236; } .lighter { color: #999; } .darker { color: #333; } .grayer { color: #4c3e12; } /* Lists */ .bullet li { padding-left: 15px; background: url("../images/icons/plus_red.gif") no-repeat 2px 4px; line-height: 1.3em; padding-bottom: 2px; } .bullet li ul { padding-left: 0px; margin-left: 0px; } .bullet li ul li { } /* Icons */ .plus_red_bold { padding: 0px 0px 0px 16px; background: url("../images/icons/plus_red_bold.gif") no-repeat 1px 2px; } .pdf { display: block; padding: 2px 0px 0px 22px; height: 14px; width: 130px; background: url("../images/icons/pdf.gif") no-repeat top left; } /* Borders */ .gray_border { border: 1px solid #ccc; } .gray_border_pad { border: 1px solid #ccc; padding: 3px; } /* Seperators */ .top_sep { /*border-top: 1px dotted #4b3f18;*/ border-top: none; padding-top: 8px; } .bot_sep { border-bottom: 1px dotted #4b3f18; padding-bottom: 8px; } .bot_sep_margin { border-bottom: 1px dotted #4b3f18; padding-bottom: 8px; margin-bottom: 8px; } .top_bot_sep { border-top: 1px dotted #4b3f18; padding-top: 8px; border-bottom: 1px dotted #4b3f18; padding-bottom: 8px; } .bot_sep_red { border-bottom: 1px dotted #007236; padding-bottom: 8px; margin-bottom: 8px; } .top_sep_red { border-top: 1px dotted #007236; padding-top: 8px; } .list_sep { padding: 0px 3px; color: #999; } /* Hide and clearer */ .hide, hr { display: none; } .clearer { width: 100%; overflow: hidden; } /* self-clearing floats - bulletproof style */ .group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .group{ height: 1%; /* IE6 */ } *:first-child+html .group { min-height: 1px; /* IE7 */ } /* Add this button */ .addthis_button { font: 12px Arial, Verdana, Helvetica, sans-serif; } /* social links */ ul.social_links { list-style: none; margin: 0; padding: 0; overflow: hidden; width: 100%; } ul.social_links li { float: left; height: 26px; width: 36px; } ul.social_links li a { background: url(../images/general/ico-social-sprite.gif) no-repeat top left; display: block; height: 26px; text-indent: -9999px; width: 36px; } ul.social_links li a.social_facebook { } ul.social_links li a.social_twitter { background-position: top center; } ul.social_links li a.social_rss { background-position: top right; } ul.social_links li a.social_facebook:hover { background-position: bottom left; } ul.social_links li a.social_twitter:hover { background-position: bottom center; } ul.social_links li a.social_rss:hover { background-position: bottom right; } /* -------------------------------------------------------- Global Structure -------------------------------------------------------- */ #container { width: 950px; margin: 0 auto; } /* Header -------------------------------------------------------- */ #header { width: 100%; overflow: hidden; height: 85px; } #header_logo { float: left; width: 225px; height:80px; padding-top:1px; } #header_nav { float: left; padding-left:50px; width: 550px; height:20px;} #header_lang { float: right; width: 125px; } /* Main -------------------------------------------------------- */ #main { width: 100%; overflow: hidden; } #main_nav { float: left; width: 163px; border-top: 1px dotted #4b3f18; padding-top: 8px; min-height: 400px; } #main_content { float: right; width: 767px; border-top: 1px dotted #4b3f18; padding-top: 8px; z-index: 1; /* IE absolute positionning fix */ } #content { width: 100%; overflow: hidden; min-height: 400px; padding-bottom: 13px; } /* Footer -------------------------------------------------------- */ #footer { width: 100%; overflow: hidden; padding-top: 20px; } #footer_nav { width: 100%; overflow: hidden; border-top: 1px dotted #4b3f18; padding: 4px 0 2px 0; } #footer_nav_int { float: left; width: 620px; } #footer_nav_ext { float: right; margin-right: -12px; } #footer_copy { border-top: 1px dotted #4b3f18; padding-top: 8px; } /* -------------------------------------------------------- Global styling -------------------------------------------------------- */ #container { position: relative; z-index: 999; text-align: justify; } /* Header -------------------------------------------------------- */ #header_logo h2 { text-decoration: none; width: 236px; height: 80px; } #header_logo h2 a:link, #header_logo h2 a:visited { width: 236px; height: 68px; text-decoration: none; outline: none; -moz-outline-style: none; } #header_logo h2#header_logo_fr { background: url("../images/logo.png") no-repeat; } #header_logo h2#header_logo_en { background: url("../images/logo.png") no-repeat; } #header_nav ul { padding-top: 57px; } #header_nav ul li { float: left; text-transform: uppercase; font-size: 10px; padding-right: 17px; background: url("../images/general/nav_sep.gif") no-repeat center right; } #header_nav ul li.last { background: none; padding-right: 0px; } #header_nav ul li a.header_nav_on { color: #007236; } #header_nav .pdf_new_badge { padding-left: 3px; } #header_lang { text-align: right; } #header_lang p { padding: 5px 0px 8px 0px; font-size: 10px; } #header_lang p span { padding: 0px 3px; color: #999; } #header_lang dl { float: right; } #header_lang dl dd { float: left; text-transform: uppercase; font-size: 10px; padding-right: 17px; background: url("../images/general/nav_sep.gif") no-repeat center right; } #header_lang dl dd.last { background: none; padding-right: 0px; } /* Main Nav -------------------------------------------------------- */ #main_nav ul li { border-bottom: 1px dotted #4b3f18; padding-bottom: 8px; margin-bottom: 8px; text-align:left; } #main_nav ul li.main_nav_open_sub { padding-bottom: 0px; } #main_nav ul li a { display: block; padding: 8px; font-size: 10px; color: #fff; text-transform: uppercase; background-color: #007236; } #main_nav ul li a:hover { background-image: url("../images/general/main_nav_over.gif"); background-repeat: no-repeat; background-position: center right; } #main_nav ul li a.main_nav_on { background-color: #4c3e12; } /* Reset Sub-Nav Values */ #main_nav ul li ul { padding-top: 8px; } #main_nav ul li ul li { border: 0px; padding-bottom: 0px; margin-bottom: 0px; } #main_nav ul li ul li a { text-transform: none; font-size: 12px; background: none; } #main_nav ul li ul li a:hover { background: none; } /* Illustrations Sub-Nav */ #main_nav ul li ul#tags_sub_nav li { position: relative; z-index: 7000; height: 28px; } #main_nav ul li ul#tags_sub_nav li a { color: #666; background: url("../images/general/illustration_sub_nav_off.gif") no-repeat center right; background-color: #eee; border: 1px solid #ccc; padding: 7px; } #main_nav ul li ul#tags_sub_nav li a:hover, #main_nav ul li ul#tags_sub_nav li a.tags_on { color: #999; background-image: url("../images/general/illustration_sub_nav_on.gif"); } /* Tags List */ #main_nav ul li ul#tags_sub_nav #tags_sub_nav_wrapper { z-index: 5000; display: inline; position: absolute; top: 0px; left: 172px; width: 468px; border: 1px solid #ccc; padding: 8px 10px 5px 10px; background-color: #eee; } #main_nav ul li ul#tags_sub_nav li dl { float: left; width: 229px; } #main_nav ul li ul#tags_sub_nav li dl dt { border-bottom: 1px dotted #4b3f18; padding-bottom: 6px; margin-bottom: 8px; font-weight: bold; } #main_nav ul li ul#tags_sub_nav li dl dd { float: left; width: 48%; padding-bottom: 8px; } #main_nav ul li ul#tags_sub_nav li dl dd a { color: #666; font-size: 12px; background: none; border: 0px; padding: 0px; } #main_nav ul li ul#tags_sub_nav li dl dd a:hover { color: #007236; background: none; } #main_nav ul li ul#tags_sub_nav li dl.tags_sujet { float: right; } /* Single Col Tags List */ #main_nav ul li ul#tags_sub_nav #tags_sub_nav_wrapper_single_col { z-index: 5000; display: inline; position: absolute; top: 0px; left: 172px; width: 272px; border: 1px solid #ccc; padding: 8px 10px 5px 10px; background-color: #eee; } #main_nav ul li ul#tags_sub_nav li dl.single_col { width: 131px; } #main_nav ul li ul#tags_sub_nav li dl.single_col dd { float: none; width: 100%; } /* #main_nav ul li ul#tags_sub_nav li dl.tags_sujet { float: right; width: 83px; } #main_nav ul li ul#tags_sub_nav li dl.tags_sujet dd { float: none; width: 100%; } */ #tags_container_sep { position: absolute; z-index: 5001; top: 0px; left: 162px; width: 12px; height: 28px; background: url("../images/general/illustration_sub_nav_sep.gif") no-repeat top left; } /* Main Sub-Nav */ #main_nav ul li ul.main_sub_nav li { border-top: 1px dotted #4b3f18; position: relative; z-index: 5000; width: 163px; } #main_nav ul li ul.main_sub_nav li a { font-size: 12px; color: #666; } #main_nav ul li ul.main_sub_nav li a:hover, #main_nav ul li ul.main_sub_nav li a.main_sub_nav_on { color: #007236; } #main_nav ul li ul.main_sub_nav li span.sub_nav_plus, #main_nav ul li ul.main_sub_nav li span.sub_nav_new { position: absolute; top: 7px; left: 115px; width: 45px; text-align: right; } #main_nav ul li ul.main_sub_nav li span.sub_nav_plus { top: 10px; } /* Guides */ .guide_small_image { float: left; padding-right:10px; } .guide_small_image img{ padding-right:4px;} /* Footer -------------------------------------------------------- */ #footer_nav_int ul { padding-top: 2px; } #footer_nav_int ul li { float: left; font-size: 10px; padding-right: 17px; background: url("../images/general/nav_sep.gif") no-repeat center right; line-height: 19px; } #footer_nav_int ul li.last { background: none; padding-right: 0px; } /* #footer_nav_ext ul { float: right; } #footer_nav_ext ul li { float: left; } #footer_nav_ext ul li a { display: block; width: 64px; height: 16px; background: url("../images/general/footer_nav_ext.gif") no-repeat; outline: none; -moz-outline-style: none; } #footer_nav_ext ul li a#ext_twitter { background-position: top left; } #footer_nav_ext ul li a#ext_facebook { background-position: top right; } #footer_nav_ext ul li a#ext_twitter:hover { background-position: bottom left; } #footer_nav_ext ul li a#ext_facebook:hover { background-position: bottom right; } */ #footer_copy p, #footer_copy a { color:#333333; font-size: 10px; } #footer_copy a:hover { color: #666; } #footer_copy p span { padding: 0px 3px; } /* -------------------------------------------------------- Section : Home -------------------------------------------------------- */ #home_slider { height: 255px; position: relative; } #slider { position:relative; width:767px; /* Change this to your images width */ height:235px; /* Change this to your images height */ background:url(../images/icons/loader.gif) no-repeat 50% 50%; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; display:block; } #home_slider .slide img { border: 1px solid #ccc; } #home_slider .nivo-controlNav { position: absolute; right: 0px; bottom: -15px; } #home_slider .nivo-controlNav a { display: block; float: left; padding: 0px 4px; font-size: 10px; } #home_slider .nivo-controlNav a:hover { color: blue; } /* #home_slider .pagination { width: 100%; overflow: hidden; text-align: right; } #home_slider .pagination ul { float: right; } #home_slider .pagination ul li { display: inline; } #home_slider .pagination ul li a { display: block; float: left; font-size: 10px; padding: 8px 4px; } */ #main_content ul.home_list { width: 100%; overflow: hidden; margin-bottom: 16px; } #main_content ul.home_list li { float: left; width: 140px; padding: 0px 13px 8px 0px; } #main_content ul.home_list li.row_last { padding-right: 0px; } #main_content ul.home_list li p { padding-bottom: 8px; } #main_content ul.home_list li a.plus { padding-right: 10px; background: url("../images/icons/plus_red.gif") no-repeat center right; } /* -------------------------------------------------------- Section : Tags + PDF -------------------------------------------------------- */ #main_content ul.tags_results { width: 100%; overflow: hidden; padding-top: 5px; } #main_content ul.tags_results li { float: left; width: 79px; padding: 0px 15px 15px 0px; position: relative; z-index: 1000; } #main_content ul.tags_results li img:hover { border-color: #999; } #main_content ul.tags_results li p.video_play { position: absolute; top: 25px; left: 24px; z-index: 1001; } #main_content ul.tags_results li p.video_play img { width: 30px; height: 30px; } #main_content .pdf_delete a { display: block; height: 12px; width: 50px; padding-top: 3px; } #main_content .pdf_delete a img { padding-top: 3px; } #main_content .pdf_image { cursor: move; } /* -------------------------------------------------------- Section : Details -------------------------------------------------------- */ #details_browse { float: left; width: 169px; } #details_infos { float: right; width: 579px; } #details_browse .details_browse_pages { text-align: right; } #details_browse .details_browse_pages a { padding-left: 3px; outline: none; -moz-outline-style: none; } #details_browse .details_browse_pages a:hover, #details_browse .details_browse_pages a.page_on { color: #007236; } #details_browse #details_browse_thumbs { width: 100%; overflow: hidden; } #details_browse #details_browse_thumbs li { float: left; padding-bottom: 8px; position: relative; z-index: 1000; } #details_browse #details_browse_thumbs li.left_pad { padding-left: 10px; } #details_browse #details_browse_thumbs li img { width: 77px; height: 77px; } #details_browse #details_browse_thumbs li a { outline: none; -moz-outline-style: none; } #details_browse #details_browse_thumbs li a:hover img { border-color: #999; } #details_browse #details_browse_thumbs li a.thumb_on img { border-color: #999; } #details_browse #details_browse_thumbs li p.video_play { position: absolute; top: 25px; left: 24px; z-index: 1001; } #details_browse #details_browse_thumbs li p.video_play img { width: 30px; height: 30px; } #details_browse #details_browse_thumbs li.left_pad p.video_play { left: 34px; } #details_browse #browse_thumbs { position: relative; z-index: 1000; min-height: 62px; } #details_browse #browse_thumbs #browse_thumbs_loading { position: absolute; top: 20px; left: 77px; z-index: 1001; } #details_infos #details_artist { width: 100%; overflow: hidden; padding-bottom: 10px; margin-bottom: 8px; } #details_infos #details_artist #details_artist_image { float: left; width: 130px; } #details_infos #details_artist #details_artist_image img { padding: 3px; } #details_infos #details_artist #details_artist_text { padding-top: 1px; } #details_infos #details_artist #details_artist_text h1 { padding-bottom: 3px; } #details_infos #details_artist .artist_text_margin { margin-left: 130px; } #details_infos #details_nav { width: 100%; overflow: hidden; } #details_infos #details_nav p { padding: 0 3px; } #details_infos #details_nav #details_nav_ext a { outline: none; -moz-outline-style: none; } #details_infos #details_nav #details_nav_ext a.browse_disabled { color: #999; cursor: default; } #details_infos #details_full_frame { margin: 4px 0px 10px 0px; height: 518px; position: relative; z-index: 1000; } #details_infos #details_full_frame table { width: 100%; } #details_infos #details_full_frame table td { height: 518px; text-align: center; } #details_infos #details_full #details_full_loading { position: absolute; top: 250px; left: 280px; z-index: 1001; } #details_infos #current_caption { height: 14px; } #details_infos #current_keywords, #details_infos #current_may_like { padding: 8px 0px 8px 16px; line-height: 1.4em; background: url("../images/icons/plus_red_bold.gif") no-repeat 2px 12px; } #details_infos #current_may_like a { position: relative; z-index: 1000; } /* -------------------------------------------------------- Section : News -------------------------------------------------------- */ #news_list { float: left; width: 483px; } #news_archives { float: right; width: 261px; } #news_list dl dd { padding-bottom: 5px; margin-bottom: 15px; } #news_list dl dd p { line-height: 1.4em; padding-bottom: 15px; font-size: 12px; } #news_list dl dd a { color: #007236; } #news_list dl dd a:hover { color: #4C3E12; } #news_list dl dd h3 { padding: 4px 0px; font-size: 12px; font-weight: bold; } #news_list dl dd.bot_sep { margin-bottom: 8px; } #news_list dl dd h3 a { color: #4C3E12; } #news_list dl dd h3 a:hover { color: #007236; } #news_list dl dd .options { font-size: 10px; } #news_list dl dd .options p { padding-bottom: 0px; } #news_list dl dd .options a { color: #4c3e12; } #news_list dl dd .options a:hover { color: #007236; } #news_list dl dd .news_share { float: left; padding-top: 4px; } #news_list dl dd .news_twitter { float: left; padding-left: 8px; } #news_list dl dd .news_like { float: left; padding-left: 8px; } #news_list dl dd .news_cats { float: right; width: 250px; padding: 5px 0 0 8px; } #news_list p.news_prev { text-align: right; padding: 5px 0px; } #news_archives form { margin-bottom: 8px; } #news_archives form p { padding-bottom: 6px; } #news_archives form p input { width: 252px; } #news_archives form .clearer p { padding-bottom: 0px; line-height: 1.3em; } #rss_feed a { background: url("../images/icons/rss.gif") no-repeat; display: block; line-height: 28px; padding-left: 35px; } .guide_image { float: left; width: 100px; } .guide_infos { float: right; width: 150px; text-align:left; } #news_search p { float: left; padding-top: 1px; } #news_search form { float: right; width: 170px; margin-bottom: 0px; } #news_search form select { width: 170px; } #news_search form optgroup { font-weight: normal; font-style: normal; font: 10px Arial, Verdana, Helvetica, sans-serif; } .arrow_list { width: 100%; overflow: hidden; } .arrow_list li { background: url("../images/icons/small_arrow.gif") no-repeat 3px 7px; padding: 4px 0px 4px 15px; } .arrow_list_two_col li { float: left; width: 40%; } .bullet_archives li a.years { padding-left: 15px; background: url("../images/icons/plus_red.gif") no-repeat 2px 4px; line-height: 1.3em; padding-bottom: 2px; } .bullet_archives li.bot_sep { margin-bottom: 8px; } .bullet_archives li ul { padding-left: 0px; margin-left: 0px; padding-top: 3px; } /* -------------------------------------------------------- Section : La Clinique -------------------------------------------------------- */ #services #content { position: relative; overflow: visible; } #services #content h2, #services #content h2.lab_title_red { font-size: 28px; line-height: 0.9em; padding: 5px 0px 10px 0px; color: #4b3f18; } #services #content h2.lab_title_red { color: #007236; } #services #content h2.lab_title { color: #4b3f18; font-size: 35px; } #services #content h2.lab_title_big { color: #007236; font-size: 48px; } #services #content .content_text { font-size: 12px; line-height: 1.6em; text-align: left; color: #4b3f18; } #services #content .red { color: #007236; font-size: 14px; } #services #content .tiny { font-size: 10px; } #services #content .normal { font-size: 12px; } #services #content .bot_sep_margin, #services #content .bot_sep_red { padding-bottom: 16px; } #services_image { float: right; padding-bottom: 10px; } a.clinique_close { padding-right: 8px; } /* -------------------------------------------------------- Section : Contact -------------------------------------------------------- */ #contact_head { padding-bottom: 8px; } #contact_head_infos { float: left; width: 347px; } #contact_head_map { float: right; width: 399px; } #contact_head_infos .bot_sep { margin-bottom: 8px; } #contact_map { position: relative; z-index: 999; top: -8px; width: 398px; height: 212px; background: url("../images/contact/map.gif") no-repeat center left; } #contact_map img { position: absolute; top: 0px; left: 0px; z-index: 1000; } #contact_map #time_montreal { position: absolute; top: 52px; left: 80px; width: 60px; text-align: center; z-index: 1001; } #contact_map #time_london { position: absolute; top: 39px; left: 153px; width: 60px; text-align: center; z-index: 1001; } #contact_map #time_paris { position: absolute; top: 100px; left: 157px; width: 60px; text-align: center; z-index: 1001; } .contact_box { padding-top: 8px; } .contact_box .contact_box_head h2 { float: left; } .contact_box .contact_box_head p { margin-left: 187px; padding-left: 13px; line-height: 1.5em; border-left: 1px solid #999; } .contact_box .contact_box_head p a { color: #666; } .contact_box .contact_box_head p a:hover { color: #007236; } .contact_box dl dd { padding-bottom: 10px; width: 100%; overflow: hidden; } .contact_box dl dd .content_box_image { float: left; width: 200px; } .contact_box dl dd .content_box_infos { margin-left: 200px; padding-top: 6px; } .contact_box dl dd .content_box_infos h3 { padding-bottom: 3px; } .contact_box dl dd .content_box_infos h4 { padding-bottom: 5px; } .contact_box dl dd .content_box_infos p { padding-bottom: 0px } /* added on 26 sept 2011 */ #main_nav form { margin-bottom: 8px; } #main_nav form p { padding-bottom: 6px; } #main_nav form p input { width: 155px; } #main_nav form .clearer p { padding-bottom: 0px; line-height: 1.3em; } #testimony p{ font-size:12px; line-height:14px; color:#666; } #words p{color:#999;padding:2px 0;} .extra_margin{padding:8px 0;} .extra_bot_margin{margin-bottom:8px;} .italic{font-style:italic;} .home_image_grid{ float:right; padding-left:15px; width: 305px; } .home_intro_text{ float:left; width:430px; line-height:1.4em; text-align:justify; } .text_body{ width:630px; border-bottom:none; } .banner{ padding-bottom:12px; }