/* -------------------------------------------------------- Global stylesheet Website: Sceno Plus Created by: Guillaume - guillaume@falzhobel.ca Filename: css/global.css -------------------------------------------------------- */ /* -------------------------------------------------------- General -------------------------------------------------------- */ * { margin: 0; padding: 0; } body { background-color: #000; font: 11px Arial, Verdana Helvetica, sans-serif; color: #9b9996; margin: 0px; padding: 0px; /* text-align: justify; */ } /* -------------------------------------------------------- Native HTML -------------------------------------------------------- */ /* Headers */ /* ... */ /* Line heights */ h3, h4, h5, p { line-height: 1.3em; } /* Paragraphs */ p { padding-bottom: 10px; } .top_padding { padding-top: 10px; } .bot_padding { padding-bottom: 15px; } /* Links */ a { color: #bdbab6; text-decoration: none; -moz-outline-style: none; } a:hover { color: #fff; text-decoration: underline; } a.orange { color: #ef8022; } a.orange:hover { color: #fff; text-decoration: none; } a.red { color: #be2826; } a.red:hover { color: #fff; text-decoration: underline; } a.darker { color: #5c5655; } a.darker:hover { color: #fff; text-decoration: underline; } /* Forms */ input, select, textarea { font: 11px Arial, Verdana, Helvetica, sans-serif; padding: 1px; } select { padding: 0px; } input.checkbox { border: 0px; padding: 0px; margin: 0px; width: 15px; } input.image_btn { padding: 0px; } input.submit_btn { background-color: #ef8022; color: #fff; font-size: 9px; font-weight: bold; text-transform: uppercase; border: 1px solid #fff; cursor: pointer; width: auto; } /* Fixes for submit button in IE */ input.submit_btn { padding: .25em .5em; width: 0; /* IE table-cell margin fix */ overflow: visible; } input.submit_btn[class] { /* IE < 7 ignores [class] */ width: auto; /* cancel margin fix for other browsers */ } /* Lists */ ul { list-style: none; } ul.bullet { padding: 5px 0px; } ul.bullet li { padding: 0 0 2px 8px; background: url('../images/icons/bullet_list.gif') no-repeat 1px 6px; } /* Images */ img { border: 0px; } .image_border { border: 1px solid #272420; } /* -------------------------------------------------------- Classes -------------------------------------------------------- */ /* Floats */ .float_left { float: left; } .float_right { float: right; } /* Formatting */ .tiny { font-size: 9px; } .smaller { font-size: 10px; } .bigger { font-size: 12px; } .large { font-size: 13px; } .bold { font-weight: bold; } .uppercase { text-transform: uppercase; } .centered { text-align: center; margin: 0px auto; } .right { text-align: right; } .justified { text-align: justify; } /* Colors */ .darker { color: #5c5655; } .lighter { color: #dbd5d1; } /* Hide and clearer */ .hide, hr { display: none; } .clearer { width: 100%; overflow: hidden; } /* -------------------------------------------------------- Global presentation -------------------------------------------------------- */ #container { width: 968px; /* margin: 0 auto; */ position: relative; text-align: left; background-position: 0px 0px; background-repeat: no-repeat; } /* Header bar -------------------------------------------------------- */ #header_bar { height: 28px; background-color: #ef8022; } #header_bar p { padding-bottom: 0px; line-height: 1em; } #header_bar p#header_bar_brochure { color: #231f20; font-size: 10px; position: absolute; top: 9px; left: 235px; z-index: 2; } #header_bar p#header_bar_brochure a, #header_bar p#header_bar_brochure a:hover { color: #231f20; text-decoration: none; } #header_bar div#header_bar_visualization { position: absolute; top: 4px; left: 580px; z-index: 2; } #header_bar div#header_bar_visualization #header_bar_visualization_stats { float: left; width: 159px; height: 21px; background: url('../images/general/header_bar_visualization_bg.gif') no-repeat; } #header_bar div#header_bar_visualization #header_bar_visualization_stats p { color: #fff; font-size: 9px; padding: 6px 5px 5px 5px; } #header_bar div#header_bar_visualization #header_bar_visualization_view { float: left; padding-left: 10px; } #header_bar p#header_bar_video { position: absolute; top: 0px; left: 837px; z-index: 2; } /* Header bar hidden box -------------------------------------------------------- */ #header_brochure_box { position: absolute; top: 28px; left: 0px; height: 45px; width: 100%; background: url('../images/general/header_brochure_box_bg.gif') no-repeat top left; z-index: 2; background-color: #ef8022; } #header_brochure_box p { line-height: 1.25em; font-size: 9px; padding: 6px 0px 0px 0px; } #header_brochure_box p a { display: block; text-decoration: none; } #header_brochure_box p a:hover { text-decoration: none; } #header_brochure_box p a span.desc_title, #header_brochure_box p a span.desc_info { color: #3a362e; } #header_brochure_box p a span.desc_title { font-weight: bold; } #header_brochure_box p a span.desc_link { color: #be2826; } #header_brochure_box p a span.desc_link:hover { text-decoration: underline; color: #fff; } #header_brochure_box p#brochure_desc_standard { float: left; width: 180px; padding-left: 235px; } #header_brochure_box p#brochure_desc_thematique { float: left; width: 260px; padding-left: 60px; } /* Header logo and moto -------------------------------------------------------- */ #header_logo { position: absolute; top: 49px; left: 50px; } #header_logo h1 { text-decoration: none; width: 123px; height: 66px; } #header_logo h1 a:link, #header_logo h1 a:visited { display: block; width: 123px; height: 66px; text-decoration: none; outline: none; -moz-outline-style: none; } /* Main menu -------------------------------------------------------- */ #main_menu { float: left; width: 213px; padding-top: 283px; } #main_menu_inner { height: 213px; background: url('../images/general/menu_bg.jpg') no-repeat; } #main_menu_inner ul { padding: 76px 0px 0px 0px; } #main_menu_inner ul li { text-transform: uppercase; } #main_menu_inner ul li a { color: #fff; text-decoration: none; display: block; width: 143px; padding: 0px 0px 12px 70px; } #main_menu_inner ul li a:hover, #main_menu_inner ul li a.main_menu_on { font-weight: bold; } #main_menu_inner ul li a.main_menu_on { background: url('../images/general/main_menu_on_bullet.gif') no-repeat 59px 3px; } /* Sub menu -------------------------------------------------------- */ div.sub_menu { float: left; width: 165px; } div.sub_menu ul li { border-bottom: 1px solid #000; } div.sub_menu ul li a { display: block; font-size: 10px; line-height: 1em; text-transform: uppercase; color: #bebab6; padding: 9px 5px 12px 20px; background: url('../images/general/sub_menu_sep.gif') no-repeat bottom left; } div.sub_menu ul li a:hover { color: #be2826; text-decoration: none; } div.sub_menu ul li a.sub_on { color: #be2826; text-decoration: none; font-weight: bold; } div.sub_menu ul li a.sub_last { background: none; } /* Content -------------------------------------------------------- */ #content_wrapper { min-height: 680px; /* text-align: justify; */ } /* Footer -------------------------------------------------------- */ #footer { padding: 80px 0px 20px 0px; width: 100%; overflow: hidden; } #footer_left { float: left; width: 700px; } #footer_left ul { width: 100%; overflow: hidden; } #footer_left ul li { float: left; } #footer_left ul li a { display: block; font-size: 10px; border-right: 1px solid #39322c; padding: 4px 12px; } #footer_left ul li a.print { border-right: 0px; background: url('../images/icons/print.gif') no-repeat center right; padding-right: 20px; } #footer_right { float: right; width: 150px; padding: 4px 12px 0px 0px; } #footer_right p { font-size: 10px; color: #575453; text-align: right; } /* -------------------------------------------------------- Section : Lightviews Box -------------------------------------------------------- */ div.lightview_content { background-color: #ef7f22; border: 2px solid #dc6527; width: 338px; } div.lightview_content_wider { width: 390px; } div.lightview_content_inner { padding: 7px 10px; } div.lightview_title { background-color: #dc6527; padding: 7px 7px 7px 10px; } div.lightview_title h2 { float: left; color: #fff; font-size: 11px; } div.lightview_title p { float: right; padding-bottom: 0px; } div.lightview_content p, div.lightview_content a { color: #fff; } div.lightview_content p.lightview_copy { color: #6f6a63; font-size: 9px; padding: 2px 0px 0px 0px; } /* Forms */ form.lightview_form { } form.lightview_form p { padding-bottom: 5px; } form.lightview_form textarea { width: 315px; height: 80px; margin-bottom: 5px; } form.lightview_form select { width: 200px; margin-bottom: 5px; } form.lightview_form .float_left, form.lightview_form .float_right { width: 150px; padding-bottom: 5px; } form.lightview_form .float_left input, form.lightview_form .float_right input { width: 149px; } form.lightview_form input.submit_btn { background-color: #eda124; padding: .25em .75em; width: 0; /* IE table-cell margin fix */ overflow: visible; } form.lightview_form input.submit_btn[class] { /* IE < 7 ignores [class] */ width: auto; /* cancel margin fix for other browsers */ } /* Career Iframe */ form.lightview_form iframe { width: 320px; height: 30px; } table.standard_send { padding-bottom: 10px; } table.standard_send td { padding-right: 10px; } /* Brochure - Custom */ p.brochure_info_image { float: left; width: 90px; } p.brochure_info_infos { margin-left: 90px; } /* Brochure - Vizualisation */ #custom_choices_box { padding-bottom: 10px; min-height: 175px; } #custom_choices_box #custom_choices_list { float: left; width: 200px; height: 180px; overflow: auto; background-color: #dbd5d1; position: relative; } #custom_choices_box #custom_choices_page { float: right; width: 160px; height: 160px; padding-top: 20px; text-align: center; background-color: #dbd5d1; } #custom_choices_box #custom_choices_list ul li { border-bottom: 1px solid #dbd5d1; background: url('../images/brochure/custom_choices_list_bg.gif') repeat-x top left; line-height: 1em; text-decoration: none; display: block; padding: 4px 8px 4px 8px; } #custom_choices_box #custom_choices_list ul li a { color: #767675; } #custom_choices_box #custom_choices_list ul li a:hover { text-decoration: none; } #custom_choices_box #custom_choices_list ul#organizer_choices { /* overflow: scroll; overflow-x: visible; height: 100px; */ } #custom_choices_box #custom_choices_list ul#organizer_choices li { background: url('../images/brochure/custom_choices_list_enabled_bg.gif') repeat-x top left; overflow: hidden; position: relative; } #custom_choices_box #custom_choices_list ul#organizer_choices li a { cursor: move; } #custom_choices_box #custom_choices_list ul#organizer_choices li span.list_delete { position: absolute; top: 5px; left: 155px; } #custom_choices_box #custom_choices_list ul#organizer_choices li span.list_delete a { cursor: pointer; } #custom_choices_box #custom_choices_list ul#organizer_choices li span.list_move { position: absolute; top: 5px; left: 170px; } #custom_choices_box #custom_choices_page p { color: #6f6a63; padding-bottom: 0px; } #custom_choices_box #custom_choices_page div#visualization_page { width: 92px; height: 119px; margin: 0 auto; margin-bottom: 15px; position: relative; } #custom_choices_box #custom_choices_page div#visualization_page img { position: absolute; } #custom_choices_box #custom_choices_page div#visualization_page img#visualization_page_bg { top: 0px; left: 0px; } #custom_choices_box #custom_choices_page div#visualization_page img#visualization_page_image { top: 5px; left: 6px; } #custom_choices_box #custom_choices_page div#visualization_page img#visualization_page_loader_image { top: 35px; left: 21px; } #custom_choices_box #custom_choices_page p span#custom_page_num { padding-right: 5px; } #custom_choices_box #custom_choices_page p span#custom_page_nav { padding-left: 5px; vertical-align: middle; } /* -------------------------------------------------------- Section : Home -------------------------------------------------------- */ #home_content { float: left; width: 630px; padding-top: 283px; } #home_content_inner { height: 213px; background: url('../images/home/content_bg.jpg') no-repeat; } #home_content_left { float: left; width: 445px; padding: 14px 0px 0px 20px; } #home_content_left h2 { color: #fff; font-size: 17px; letter-spacing: 1px; padding-bottom: 18px; font-weight: normal; line-height: 1.25em; } #home_content_left p { color: #fff; padding-bottom: 10px; } #home_content_right { float: right; width: 139px; padding: 20px 15px 0px 0px; } #home_content_right #discover { height: 163px; position: relative; background: url('../images/home/discover_bg.jpg') no-repeat; } #home_content_right #discover h2 { font-size: 10px; text-transform: uppercase; color: #ef8022; font-weight: normal; padding: 7px 8px 0px 8px; } #home_content_right #discover h3 { font-size: 10px; text-transform: uppercase; color: #fff; font-weight: normal; padding: 0px 8px 2px 8px; } #home_content_right #discover #discover_photo { position: absolute; top: 71px; left: 1px; z-index: 1; } #home_content_right #discover #discover_play { position: absolute; top: 90px; left: 45px; z-index: 2; } #home_news { padding: 20px 20px 20px 234px; } #home_news h2 { color: #ef8022; font-size: 11px; } #home_news h2, #home_news p { padding-bottom: 3px; } #home_news a { color: #9b9996; } #home_news a:hover { color: #fff; } #home_news .news_sep { padding: 0px 3px; } /* -------------------------------------------------------- Section : Sceno Plus -------------------------------------------------------- */ #sceno_plus_menu { padding-top: 315px; } #sceno_plus_content { float: right; width: 480px; padding: 263px 50px 0px 0px; } #sceno_plus_content h2 { width: 212px; height: 15px; background: url('../images/scenoplus/title_bg.jpg') no-repeat; margin-bottom: 25px; } #sceno_plus_content h2 { text-align: right; color: #fff; text-transform: uppercase; font-size: 11px; font-weight: normal; padding: 2px 8px 0px 0px; letter-spacing: 2px; } #sceno_plus_content h3 { font-size: 11px; font-weight: normal; } /* -------------------------------------------------------- Section : Sceno Plus : Current Projects & Clients -------------------------------------------------------- */ ul.current_projects_list { padding-bottom: 10px; margin-left: -7px; } ul.current_projects_list li { width: 100%; overflow: hidden; padding: 7px 0px; margin-bottom: 5px; } ul.current_projects_list li:hover { background-color: #24211c; } ul.current_projects_list li span.current_left { float: left; width: 300px; padding-left: 7px; } ul.current_projects_list li span.current_right { float: right; width: 150px; padding-right: 7px; text-align: right; } table.client_list { width: 100%; margin-bottom: 15px; margin-left: -7px; } table.client_list tr:hover { background-color: #24211c; } table.client_list td { padding: 9px 7px; } table.client_list td.col_client_name { width: 65%; } table.client_list td.col_client_url { width: 17%; text-align: right; } table.client_list td.col_client_project { width: 18%; text-align: right; } /* -------------------------------------------------------- Section : Sceno Plus : Awards -------------------------------------------------------- */ ul.awards_list { padding-bottom: 10px; margin-left: -7px; } ul.awards_list li { width: 100%; overflow: hidden; padding: 7px 0px; margin-bottom: 5px; } ul.awards_list li:hover { background-color: #24211c; } ul.awards_list p { padding-bottom: 0px; } ul.awards_list p.award_year { float: left; width: 37px; padding-left: 7px; } ul.awards_list p.award_desc { float: left; width: 325px; } ul.awards_list p.award_link { float: right; width: 100px; padding-right: 7px; text-align: right; } /* -------------------------------------------------------- Section : Sceno Plus : Team -------------------------------------------------------- */ ul.team_list { padding: 15px 0px 10px 0px; } ul.team_list li { float: left; width: 32%; height: 100px; padding-bottom: 5px; } ul.team_list li p { padding: 0px 15px 3px 0px; } /* -------------------------------------------------------- Section : Services -------------------------------------------------------- */ #services_menu { padding-top: 280px; } #services div.sub_menu { width: 250px; } #services_content { float: right; width: 440px; padding: 233px 50px 0px 0px; } #header_photo_text { position: absolute; width: 217px; top: 198px; left: 743px; text-align: right; text-transform: uppercase; font-size: 9px; } #header_photo_text p { line-height: 1.4em; } #header_photo_text p.photo_text_architecture { color: #3d5b63; } #header_photo_text p.photo_text_interior_design { color: #825983; } #header_photo_text p.photo_text_technology { color: #294655; } #header_photo_text p.photo_text_multimedia { color: #566d97; } #header_photo_text p.photo_text_theatre_design { color: #6e4029; } #services_title { width: 100%; overflow: hidden; padding-bottom: 24px; } #services_title h2 { float: left; width: 270px; color: #fff; font-weight: normal; text-transform: uppercase; font-size: 24px; line-height: 1em; letter-spacing: -1px; } #services_title h2.single { padding-top: 21px; padding-bottom: 3px; } #services_title h2 span { font-size: 18px; display: block; } #services_title p { float: left; width: 170px; padding: 2px 0px 0px 0px; } /* -------------------------------------------------------- Section : Portfolio -------------------------------------------------------- */ #portfolio_content { float: left; width: 505px; padding-top: 283px; } #portfolio_content_inner { padding: 16px 0px 0px 20px; } #projects_list { float: right; width: 227px; padding-top: 18px; } #projects_list form#projects_filter { padding: 0px 0px 12px 5px; } #projects_list form p { padding-bottom: 5px; } #projects_list form p.submit { padding-top: 2px; } #projects_list form select { width: 222px; } #projects_list p.select_results { padding: 6px 0px 0px 5px; } #projects_scroll { overflow: auto; height: 480px; margin-bottom: 15px; } #projects_scroll ul li { padding: 7px 5px; display: block; overflow: hidden; } #projects_scroll ul li:hover { background-color: #272420; } #projects_scroll ul li p { padding-bottom: 0px; } #projects_scroll ul li p.project_check { float: left; width: 20px; padding-top: 16px; } #projects_scroll ul li p.project_image { float: left; width: 58px; } #projects_scroll ul li p.project_image span.project_image_corner { position: absolute; z-index: 9999; background: url('../images/portfolio/projects_list_thumb_border.gif') no-repeat; width: 48px; height: 48px; top: 0px; left: 0px; } #projects_scroll ul li p.project_infos { margin-left: 78px; font-size: 10px; line-height: 1.1em; } /* -------------------------------------------------------- Section : Portfolio : Details -------------------------------------------------------- */ #portfolio_details_content h4 { color: #dbd5d1; font-size: 11px; font-weight: normal; } #portfolio_details_left { float: left; width: 360px; } #portfolio_details_left h2 { color: #efebe7; font-size: 16px; font-weight: normal; line-height: 1.25em; } #portfolio_details_left h3 { font-size: 11px; font-weight: normal; padding-bottom: 12px; } #portfolio_details_left h4 { padding-bottom: 2px; } #portfolio_details_left ul { padding-bottom: 12px; } #portfolio_details_left ul#stats li { padding-bottom: 2px; } #portfolio_details_right { float: right; width: 102px; } #portfolio_details_right h4 { padding-bottom: 6px; } #portfolio_details_right .line_sep { border-bottom: 1px solid #373535; margin-bottom: 10px; padding-bottom: 10px; } #portfolio_details_right #project_video #project_video_box { background: url('../images/portfolio/project_video_box_bg.jpg') no-repeat; width: 102px; height: 98px; position: relative; } #portfolio_details_right #project_video #project_video_box h4 { padding: 5px 7px; } #portfolio_details_right #project_video #project_video_box p { padding: 0px; } #portfolio_details_right #project_video #project_video_box p#video_thumb { position: absolute; top: 26px; left: 1px; z-index: 2; } #portfolio_details_right #project_video #project_video_box p#video_play { position: absolute; top: 40px; left: 24px; z-index: 3; } #portfolio_details_right #project_gallery ul li { float: left; padding-right: 3px; } #portfolio_details_right #project_gallery ul li.last_thumb { padding-right: 0px; } #portfolio_details_right #project_options p { padding-bottom: 3px; } /* -------------------------------------------------------- Section : Footer Sections -------------------------------------------------------- */ #footer_sections_full { float: left; padding: 294px 0px 0px 20px; width: 600px; } #footer_sections_left { float: left; padding: 294px 0px 0px 20px; width: 210px; } #footer_sections_left h2, #footer_sections_full h2 { color: #fff; font-weight: normal; text-transform: uppercase; font-size: 18px; line-height: 1em; letter-spacing: -1px; padding-bottom: 12px; } #footer_sections_right { float: right; padding: 323px 50px 0px 0px; width: 442px; } #footer_sections_right p, #footer_sections_full p { padding-bottom: 13px; } #footer_sections_right h3 { font-size: 11px; font-weight: normal; color: #dbd5d1; } /* Press Room */ .press_list li { padding-bottom: 15px; line-height: 1.3em; } .date_sep { padding: 0px 3px; } /* News */ .news_photo { float: right; padding: 0px 0px 15px 15px; } /* Contacts */ #contact_table td { padding: 0px 8px 8px 0px; } #contact_table td input { width: 138px; } #contact_table td textarea { width: 296px; height: 60px; } /* Site Map */ dl.sitemap_list { float: left; width: 145px; } dl.sitemap_list dt { padding-bottom: 14px; } dl.sitemap_list dd ul li { font-size: 10px; padding-bottom: 4px; }