/* -------------------------------------------------------- Main stylesheet Site: mahaloola.COM Created by: Martin Gauthier - martin@codemountain.ca Filename: css/main.css -------------------------------------------------------- */ /* -------------------------------------------------------- COLORS -------------------------------------------------------- */ body,ul,li,a,img,div,span{margin:0;padding:0;border:0} body { background-color:#fff; background-image:url(../../img/back-2.jpg); background-repeat:repeat-x; background-position:center 790px; font-family:Arial, Helvetica, sans-serif; color:#817567; font-size:12px; font-weight:normal; line-height:16px; padding:0; margin:0;} :focus { outline: none;} /* ------------------------------------------- TEXT - LINKS - TITLES -------------------------------------------*/ a:link, a:visited, a:active {color:#1668b1; text-decoration:underline; outline:none; font-weight:normal} a:hover{color:#1668b1; text-decoration:none; outline:none;font-weight:normal} a.selected {color:#1668b1; outline:none; text-decoration:none;} a.link2:link, a.link2:visited, a.link2:active {color:#969697; text-decoration:none; outline:none; font-weight:normal; font-size:11px;} a.link2:hover{color:#969697; text-decoration:underline; outline:none;font-weight:normal} a.link3:link, a.link3:visited, a.link3:active {color:#fff; text-decoration:none; outline:none; font-weight:bold; } a.link3:hover{color:#999; text-decoration:none; outline:none;font-weight:bold} h1 {font-size:18px;margin:0;padding:0;font-weight:bold;} h2 {font-size:20px;margin:0;padding:0; color:#b6b6b6; line-height:26px; font-weight:bold;} h3 {font-size:18px;margin:0;padding:0; color:#9b8c7c; line-height:22px; font-weight:normal;} h4{font-size:12px;margin:0;padding:0; color:#9b8c7c; line-height:18px; font-weight:bold;} .lrg1{font-size:14px; font-weight:bold} .sml1{font-size:10px} ul.sq1{} ul.sq1 li{list-style:none; background-image:url(../../img/icn_bullet-1.gif); background-repeat:no-repeat; background-position:0 6px; padding-left:12px; line-height:18px; display:block; float:none} /* ------------------------------------------- COMMON DEFINITIONS WEBSITE STRUCTURE -------------------------------------------*/ #main_container {position:absolute;top:0px;left:0px;margin-left:0px;margin-top:0px ; text-align:center;height:792px;width:100%;margin-top:0px; background-image:url(../../img/back-1.jpg); background-repeat:repeat-x; background-position:center 0;} #midcontainer1{background-color:#fff; background-image:url(../../img/box_back_3.gif); background-repeat:repeat-x; background-position:top; height:568px;} #top_container{height:50px; margin-top:10px;} #top_logo{position:absolute; top:16px; left:14px;} #tab_date{width:147px; position:absolute; right:115px; bottom:0px;} #tab_login{width:83px; position:absolute; right:268px; bottom:0px;} #tab_eng{width:102px; position:absolute; right:7px; bottom:0px;} #botcontainer1 {} #botcontainer1 #copyright {position:absolute; top:-285px; left:-15px;} body.en #botcontainer1 #copyright {top:-319px; } #seal1{position:absolute; top:5px; right:0px; } #main_content{width:780px; position:relative; margin-top:86px; padding:12px; padding-bottom:0; padding-top:0} /* ------------------------------------------- BOX STYLING AND POSITIONING -------------------------------------------*/ .box1{background-image:url(../../img/box_441-1.gif); background-repeat:no-repeat; background-position:top; width:441px; height:272px;} .box2{ background-image:url(../../img/box_320-1.gif);background-repeat:no-repeat; background-position:top; width:322px; height:272px;} .box3{ background-image:url(../../img/box_774-1.gif);background-repeat:no-repeat; background-position:top; width:774px; height:189px;} .box4{ background-image:url(../../img/box_441-2.gif); background-repeat:no-repeat; background-position:top; width:441px; height:470px;} .box5{ background-image:url(../../img/box_320-2.gif);background-repeat:no-repeat; background-position:top; width:322px; height:470px;} .left1{float:left; position:relative} .right1{float:left; margin-left:10px; position:relative} .full1{position:relative; margin-top:10px;} .line1{border:1px solid #b1b3b6} h1.title_box1{background-image:url(../../img/box_title-1.gif); background-repeat:no-repeat; width:385px; height:45px; border:0px solid red; padding-top:23px; padding-left:40px; margin-left:10px; margin-top:10px; color:#c9d548} h1.title_box2{ background-image:url(../../img/box_title-3.gif); background-repeat:no-repeat; width:385px; height:68px; border:0px solid red; padding-top:23px; padding-left:40px; margin-left:10px; margin-top:10px; color:#c9d548} h1.title_box3{background-image:url(../../img/box_title-4.gif); background-repeat:no-repeat; width:260px; height:45px; border:0px solid red; padding-top:23px; padding-left:40px; margin-left:10px; margin-top:10px; color:#c9d548} h1.title_box4{background-image:url(../../img/box_title-2.gif); background-repeat:no-repeat; width:164px; height:40px; border:0px solid red; padding-top:23px; padding-left:40px; margin-left:10px; margin-top:10px; color:#c9d548} h1.title_box5{background-image:url(../../img/box_title-5.gif); background-repeat:no-repeat; width:261px; height:40px; border:0px solid red; padding-top:23px; padding-left:40px; margin-left:10px; margin-top:10px; color:#c9d548} h1.title_box6{background-image:url(../../img/box_title-6.gif); background-repeat:no-repeat; width:164px; height:24px; border:0px solid red; padding-top:7px; padding-left:40px; margin-left:10px; margin-top:10px; color:#c9d548} h1.title_box10{background-image:url(../../img/box_title-10.gif); background-repeat:no-repeat; width:220px; height:35px; border:0px solid red; padding-top:23px; padding-left:20px; margin-left:10px; margin-top:10px; color:#c9d548; position: absolute; top:0px; left:0px;} h1.title_box11{background-image:url(../../img/box_title-11.gif); background-repeat:no-repeat; width:145px; height:35px; border:0px solid red; padding-top:23px; padding-left:20px; margin-right:10px; margin-top:10px; color:#c9d548; position: absolute;top:0px; right:0px;} /* ------------------------------------------- global menu navigation styling -------------------------------------------*/ #globaltop {position:absolute; left:300px; top:22px; height:29px; font-size:11px;font-weight:normal; width:520px; border:0px solid red} #globaltop #topnav{ margin: 0; padding: 0; } #globaltop #topnav li {list-style:none; line-height:20px; display:inline; } #globaltop #topnav li a { float: left; height: 0; padding-top: 29px; overflow: hidden; outline:none;border:0px solid red } #globaltop #topnav li a { background-image:url(../../img/menu-1.gif);background-repeat:no-repeat; margin-right:33px;} #globaltop #topnav li a.noactive{cursor:default; opacity:0.5;-moz-opacity: 0.5; filter: alpha(opacity=50);} #globaltop #topnav li#nav-sep1 a.noactive{cursor:default; opacity:0.99;-moz-opacity: 0.99; filter: alpha(opacity=99);} #globaltop #topnav li#nav-home a{width:48px;} #globaltop #topnav li#nav-folio a{width:79px;} #globaltop #topnav li#nav-produits a{width:54px;} #globaltop #topnav li#nav-media a{width:49px;} #globaltop #topnav li#nav-faq a{width:32px;} #globaltop #topnav li#nav-contact a{width:55px; margin-right:0px;} #globaltop #topnav li#nav-home a{background-position:0 0;} #globaltop #topnav li#nav-folio a{background-position:-79px 0;} #globaltop #topnav li#nav-produits a{background-position:-191px 0;} #globaltop #topnav li#nav-media a{background-position:-276px 0;} #globaltop #topnav li#nav-faq a{background-position:-356px 0;} #globaltop #topnav li#nav-contact a{background-position:-421px 0;} #globaltop #topnav li#nav-home a:hover{background-position:0 -30px;} #globaltop #topnav li#nav-folio a:hover{background-position:-79px -30px;} #globaltop #topnav li#nav-produits a:hover{background-position:-191px -30px;} #globaltop #topnav li#nav-media a:hover{background-position:-276px -30px;} #globaltop #topnav li#nav-faq a:hover{background-position:-356px -30px;} #globaltop #topnav li#nav-contact a:hover{background-position:-421px -30px;} #globaltop.nav-home #topnav li#nav-home a{background-position:0 -30px;} #globaltop.nav-folio #topnav li#nav-folio a{background-position:-79px -30px;} #globaltop.nav-produits #topnav li#nav-produits a{background-position:-191px -30px;} #globaltop.nav-media #topnav li#nav-media a{background-position:-276px -30px;} #globaltop.nav-faq #topnav li#nav-faq a{background-position:-356px -30px;} #globaltop.nav-contact #topnav li#nav-contact a{background-position:-421px -30px;} body.en #globaltop {left:295px; top:22px; width:500px; } body.en #globaltop li a{} body.en #globaltop #topnav li a { background-image:url(../../img/menu-2.gif);} body.en #globaltop #topnav li#nav-home a{width:35px;} body.en #globaltop #topnav li#nav-folio a{width:103px;} body.en #globaltop #topnav li#nav-produits a{width:56px;} body.en #globaltop #topnav li#nav-media a{width:41px;} body.en #globaltop #topnav li#nav-faq a{width:32px;} body.en #globaltop #topnav li#nav-contact a{width:55px; margin-right:0px;} body.en #globaltop #topnav li#nav-home a{background-position:-8px 0;} body.en #globaltop #topnav li#nav-folio a{background-position:-74px 0;} body.en #globaltop #topnav li#nav-produits a{background-position:-211px 0;} body.en #globaltop #topnav li#nav-media a{background-position:-300px 0;} body.en #globaltop #topnav li#nav-faq a{background-position:-377px 0;} body.en #globaltop #topnav li#nav-contact a{background-position:-442px 0;} body.en #globaltop #topnav li#nav-home a:hover{background-position:-8px -30px;} body.en #globaltop #topnav li#nav-folio a:hover{background-position:-74px -30px;} body.en #globaltop #topnav li#nav-produits a:hover{background-position:-211px -30px;} body.en #globaltop #topnav li#nav-media a:hover{background-position:-300px -30px;} body.en #globaltop #topnav li#nav-faq a:hover{background-position:-377px -30px;} body.en #globaltop #topnav li#nav-contact a:hover{background-position:-442px -30px;} body.en #globaltop.nav-home #topnav li#nav-home a{background-position:-8px -30px;} body.en #globaltop.nav-folio #topnav li#nav-folio a{background-position:-74px -30px;} body.en #globaltop.nav-produits #topnav li#nav-produits a{background-position:-211px -30px;} body.en #globaltop.nav-media #topnav li#nav-media a{background-position:-300px -30px;} body.en #globaltop.nav-faq #topnav li#nav-faq a{background-position:-377px -30px;} body.en #globaltop.nav-contact #topnav li#nav-contact a{background-position:-442px -30px;} /* ------------------------------------------- HOME PAGE INDEX.PHP -------------------------------------------*/ #home_intro ul.sq1{margin-left:64px; margin-top:13px} #home_video img{margin-top:12px; margin-left:12px} #logoleed{position:absolute; bottom:10px; left:363px;} #home_promo1{position:absolute; top:8px; left:580px; width:183px; height:168px; background-image:url(../../img/promo-1.gif); background-repeat:no-repeat; background-position:top;} body.en #home_promo1{ background-image:url(../../img/promo-2.gif); } #home_promo1:hover{border:2px solid #1668b1; background-position:-1px -1px} #home_promo2{position:absolute; top:10px; left:580px; } #home_promo3{position:absolute; top:10px; left:510px; } #home_promos ul.slide_thumbs{position:absolute; left:330px; top:8px;} ul.slide_thumbs{ margin:0; padding:0; width:250px; height:300px; } ul.slide_thumbs li{list-style:none; float:left; margin-right:3px; margin:0; padding:0; cursor:pointer; width:53px; height:53px;border:2px solid transparent; margin-right:2px; margin-bottom:1px;} ul.slide_thumbs li.last{margin-right:0} ul.slide_thumbs li.active, ul.slide_thumbs li:hover{border:2px solid #00437F; opacity:0.7} ul.slide_thumbs li img{ width:53px; height:53px} #home_promos ul.slide_thumbs2{position:absolute; left:330px; top:8px;} ul.slide_thumbs2{ margin:0; padding:0; width:188px; height:300px; } ul.slide_thumbs2 li{list-style:none; float:left; margin-right:3px; margin:0; padding:0; cursor:pointer; width:53px; height:53px;border:2px solid transparent; margin-right:2px; margin-bottom:1px;} ul.slide_thumbs2 li.last{margin-right:0} ul.slide_thumbs2 li.active, ul.slide_thumbs2 li:hover{border:2px solid #00437F; opacity:0.7} ul.slide_thumbs2 li img{ width:53px; height:53px} img.slides1{position:absolute; top:9px; left:9px;} /* ------------------------------------------- architect PAGE architect.PHP -------------------------------------------*/ #architect_plans{ text-align:center} #architect_plans img{margin-top:1px;} /* ------------------------------------------- contact PAGE contact.PHP -------------------------------------------*/ #contact_intro table{margin-left:44px;} #map{ width:51px; height:24px; background-image:url(../../img/btn_map-1.gif); background-repeat:no-repeat; margin-top:10px; margin-bottom:15px; margin-left:44px;} #map:hover{background-image:url(../../img/btn_map-2.gif);} #contact_img img{margin-left:2px; margin-top:1px;} /* ------------------------------------------- realisations PAGE projets.PHP -------------------------------------------*/ #projets_list{position:absolute; top:66px; left:11px;} #projets_list2{position:absolute; top:66px; left:265px;} h3.h3blue{color:#376696} ul.list_h1{} ul.list_h1 li{list-style:none; float:left; margin-right:3px; padding-right:3px; border-right:1px solid #d5e14d; color:#1668b1; cursor:pointer} ul.list_h1 li.last{margin-right:0; border-right:0} ul.list_h1 li.active{text-decoration:underline} ul.list_h1 li:hover{text-decoration:underline} ul.list_number{font-size: 15px; margin-top:10px; text-align: left} ul.list_number li{list-style:none; float:left; margin-right:5px; text-align: center; width: 29px; height: 20px; color:#978c7d; cursor:pointer; background-image: url(../../img/box_number.gif); padding-top:5px;} ul.list_number li.last{margin-right:0; border-right:0} ul.list_number li.active{color:#376696; font-weight: bold} ul.list_number li.notactive{color:#d6d1cc; cursor: default} div.img_container{position:absolute; top:114px; left:51px; width:400px; border:0px solid #000} .tab2, .tab2:hover{height:27px; text-align:center; background-image:url(../../img/tab_18.png); background-repeat:no-repeat; width:83px; float:left; margin-right:5px; position:relative; background-position:0 0; cursor:pointer; } .tab2.active{ background-image:url(../../img/tab_35.png)} .tabcontent2{margin-top:7px;font-size:12px; color:#fff; font-weight:bold; text-align:center} img.projets_img{position:absolute; top:25px; left:-40px} div.infos{padding-left:24px; padding-top:31px; width:275px; border:0px solid #00FF00} div.infos p{text-align:left} div.sign1{width:100%; text-align:right; font-style:italic;} div.infos ul.sq1 li{line-height:16px;} img.pdf1{border:0; position:absolute; top:36px; left:319px;} img.projets_logo1{position:absolute; top:10px; left:247px;} img.nav-pages{border:0; position:absolute; left:301px; top:451px;} /* ------------------------------------------- prduits PAGE produits.PHP -------------------------------------------*/ #produits_intro ul.sq1{margin-left:65px; } #produits_intro ul.sq1 li{margin-bottom:15px; line-height:20px; border-right-color:#b6ab9f} ul.list_h2{} ul.list_h2 li{list-style:none; margin:0;padding:0; float:left; margin-right:5px; padding-right:5px; border-right:1px solid #d5e14d; color:#1668b1; cursor:pointer; background-image:none} ul.list_h2 li.last{margin-right:0; border-right:0} ul.list_h2 li.active{text-decoration:underline} ul.list_h2 li:hover{text-decoration:underline} div.prod_container{position:absolute; top:1px; left:1px; width:100%; border:0px solid #000} .tab3, .tab3:hover{height:27px; text-align:center; background-image:url(../../img/tab3_18.png); background-repeat:no-repeat; width:83px; float:left; margin-right:5px; position:relative; background-position:0 0; cursor:pointer; z-index:20 } .tab3.active{ background-image:url(../../img/tab3_35.png)} .tab3.first{margin-left:50px;} .tabcontent3{margin-top:7px;font-size:12px; color:#fff; font-weight:bold; text-align:center} .tab4, .tab4:hover{height:27px; text-align:center; background-image:url(../../img/tab2_18.png); background-repeat:no-repeat; width:180px; top:0px;right:50px; position:absolute; background-position:0 0; z-index:20 } .tab4:hover{ background-image:url(../../img/tab2_35.png)} .tabcontent4{margin-top:5px;font-size:12px; color:#fff; font-weight:bold; text-align:center} .tabcontent4 a:link,.tabcontent4 a:visited,.tabcontent4 a:active,.tabcontent4 a:hover{font-size:12px; color:#fff; font-weight:bold; text-decoration:none} .tab5, .tab5:hover{height:27px; text-align:center; background-image:url(../../img/tabk_18.png); background-repeat:no-repeat; width:240px; top:0px;right:50px; position:absolute; background-position:0 0; z-index:20 } .tab5:hover{ background-image:url(../../img/tabk_35.png)} .tabcontent5{margin-top:5px;font-size:12px; color:#fff; font-weight:bold; text-align:center} .tabcontent5 a:link,.tabcontent5 a:visited,.tabcontent5 a:active,.tabcontent5 a:hover{font-size:12px; color:#fff; font-weight:bold; text-decoration:none} img.plans_img{position:absolute; top:0; left:0; z-index:10;} div.prod_details p{padding:0;margin:0;padding-left:24px; width:275px; border:0px solid #00FF00; margin-bottom:0} div.prod_details ul.sq1{margin-left:50px; font-size:11px; font-weight:bold; width:255px;} div.prod_details ul.sq1 li{line-height:16px;} li.color1{color:#1668b1; cursor:pointer} li.color1.active, li.color1:hover{text-decoration:underline} /* ------------------------------------------- FAQ -------------------------------------------*/ #faq_list{margin-left:55px; color:#1668b1; margin-right:20px; margin-top:10px;} #faq_list li{cursor:pointer;} #faq_list li.active,#faq_list li:hover{ text-decoration:underline;} #faq_info ul.sq1{margin-left:20px;font-size:11px; font-weight:bold;} #faq_info .infos{border:0px solid red; height:425px; background-image:url(../../img/faq-1.jpg); background-repeat:no-repeat; background-position:25px bottom} #faq_info .infos.long{background-image:none} /* ------------------------------------------- media -------------------------------------------*/ table.tbl_list1{width:204px; margin-left:10px; margin-top:8px;} table.tbl_list1.w2{width:419px;} table.tbl_list1.w3{width:300px;} table.tbl_list1 td{padding-top:2px; padding-bottom:3px; padding-left:15px; text-align:left; vertical-align:middle} table.tbl_list1 td.d1{background-color:#e9eaea} table.tbl_list1 td.l1{background-color:#f3f7fb} table.tbl_list1 a:link, table.tbl_list1 a:visited, table.tbl_list1 a:active {color:#1668b1; text-decoration:none; outline:none; font-weight:normal} table.tbl_list1 a:hover{color:#1668b1; text-decoration:underline; outline:none;font-weight:normal} table.tbl_list1 a.selected {color:#1668b1; outline:none; text-decoration:underline;} #vidplayer{border:0px solid red; position:absolute; top:10px; left:10px;} #player{border:0px solid red; position:absolute; top:28px; left:121px;} /* ------------------------------------------- ROUND CORNERS STYLES -------------------------------------------*/ .rc2{position:absolute; overflow:hidden; width:12px; height:12px;} .rc2{width:8px; height:8px; background-repeat:no-repeat; background-image:url(../../img/corners_2.gif);} .cBeige_tl{background-position:0 -12px; top:-4px; left:-4px;} .cBeige_tr{background-position:-18px -11px; top:-4px; right:-4px;} .cBeige_bl{background-position:-36px -12px; bottom:-4px; left:-4px;} .cBeige_br{background-position:-54px -12px; bottom:-4px; right:-4px;} .cBeige2_tl{background-position:0 0px; top:0px; left:0px;} .cBeige2_tr{background-position:-11px 0px; top:0px; right:0px;} /* ------------------------------------------- COMMON DEFINITIONS WEBSITE STYLES -------------------------------------------*/ .center_container {margin-left:auto; margin-right:auto;text-align:left;position:relative;width:800px; border:1px solid #1668b1;} .center_container2 {margin-left:auto; margin-right:auto;text-align:left;position:relative;width:800px; border:0px solid #ff0000;} .center_container3 {position:absolute;width:787px; top:77px; left:18px; border:0px solid #ff0000;} .clearall{clear:both;} .h1img{ margin-left:17px; margin-top:19px;} .tab1{height:27px; text-align:center; background-image:url(../../img/icnbox_back-10.png); background-repeat:repeat;} /*.tab1{background-color:#e7f3f8; height:27px; text-align:center; opacity:0.8;-moz-opacity: 0.8; filter: alpha(opacity=80);}*/ .tabcontent{margin-top:7px;font-size:11px; color:#1668b1; text-align:center} .tabcontent a:link, .tabcontent a:visited, .tabcontent a:active {font-size:11px; color:#1668b1;} .tabcontent a:hover {font-size:11px; color:#000; text-decoration:none} div.pad1 p{margin-left:44px; margin-right:44px;} #news_button{position:absolute; top:413px; left:301px;width:86px; height:24px; background-image:url(../../img/btn_send-1.gif); background-repeat:no-repeat; cursor:pointer} #news_button:hover{ background-image:url(../../img/btn_send-2.gif);} body.en #news_button{background-image:url(../../img/btn_send-3.gif);} body.en #news_button:hover{ background-image:url(../../img/btn_send-4.gif);} .input_text1{width:150px; padding-top:2px; padding-bottom:5px; padding-left:5px; border:1px solid #9b8c7c; background-color:#ebe8e5} #email{position:absolute; top:412px; left:139px;} #contact1{position:absolute; top:416px; left:44px;} p.bluebox{padding:5px; background-color: #ffffff; border:1px solid #1668b1; font-weight: bold; font-style: italic}