/* Document : site Created on : 7 févr. 2010, 19:10:01 Author : Sébastien Guibert Description: site layout */ body { background: #f8f8f8 url(../img/bg/wallpaper.jpg) repeat-x; } /* Containers */ #page { width: 980px; margin: 0 auto; padding-bottom: 50px; } #header { width: 100%; height: 120px; position: relative; } #content { width: 100%; min-height: 500px; } #footer { width: 100%; display: none; } /* Header */ #header a#logo { display: block; left: 20px; top: 15px; width: 360px; height: 150px; position: absolute; background: url(../img/pics/logo.png) no-repeat center center; } #header a#logo span { display: none; } #header ul#menu { float: right; margin: 60px 20px 0 0; z-index: 10; } #header ul#menu li { float: left; margin: 0 5px; } #header ul#menu li a { border: 1px solid transparent; border-bottom: none; color: #444; display: block; padding: 8px 14px; margin-top: 20px; font-size: 16px; text-decoration: none; text-transform: capitalize; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; } #header ul#menu li.current a { background: #fff; border-color: #ddd; } #header ul#menu li a:hover { /*padding-bottom: 15px; margin-top: 13px;*/ } #header ul#menu li#facebook-ilike { cursor: pointer; position: absolute; top: 0; right: 0; background: #fff; border: 1px solid #888; border-top: none; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -moz-box-shadow: 0 0 5px #555; -webkit-box-shadow: 0 0 5px #555; } #header ul#menu li#facebook-ilike p { background: url(../img/icons/social/facebook_16.png) no-repeat 10px center; color: #3B5998; padding: 6px 10px 4px 35px; border-top: 1px solid #888; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; } #header ul#menu li#facebook-ilike.hover p { background-color: #3B5998; color: #fff; } /* Content */ #content { } #content .content { border: 1px solid #ddd; background: #f6f6f6 url(../img/bg/page_arrow.png) no-repeat 70px 80px; padding-bottom: 100px;} #content h1 { height: 80px; background: #fff no-repeat; } #content h1 span { display: none; } /* Home */ #home { } #home h1 { height: 110px; border: 1px solid #ddd; background-image: url(../img/bg/titles/home.png); } #home h1 span, #home h2 { display: none; } #home .block { border: 1px solid #ddd; background: #fff; margin: 5px; } #home a.button { display: none; } #home #left-content { width: 505px; float: left; } #home #left-content .block { margin-left: 0; width: 498px; } #home #right-content { width: 475px; float: right; } #home #right-content .block { padding: 15px; margin-right: 0; width: 438px; margin-top: 10px; } #home #right-content .block h2 { float: left; width: 300px; height: 30px; background: no-repeat; } #home #left-content #home-about { margin-top: -1px; border-top: none; padding: 5px 10px 10px; width: 478px; } #home #home-about h2 { display: none; } #home #home-about ul { } #home #home-about ul li { float: left; width: 239px; } #home #home-about ul li h3 { font-size: 18px; font-weight: normal; padding: 3px 10px; } #home #home-about ul li p { font-size: 11px; padding: 5px 10px; text-align: justify; height: 80px; } #home #home-about ul li#first { background: #e2e2e2; } #home #home-about ul li#second { background: #eee; } #home #home-about ul li#third { background: #f3f3f3; } #home #home-services { margin-top: 10px; } #home #home-portfolio { } #home #home-news { } #home #home-news ul.news-list { background: #f8f8f8; } #home #home-news ul.news-list li { border-bottom: 1px solid #eee; border-top: #e8e8e8; } #home #home-news ul.news-list li a { display: block; padding: 4px 8px; } #home #home-news ul.news-list li a span { display: block; } #home #home-news ul.news-list li a span.date { color: #888; } #home #home-news ul.news-list li a span.title { color: #555; font-weight: bold; } #home #home-news ul.news-list li a:hover { background: #349bd5; color: #fff; text-decoration: none; color: #fff; } #home #home-news ul.news-list li a:hover span { color: #fff; } #home #home-services { position: relative; } #home #home-services ul#service-list { width: 200px; } #home #home-services ul#service-list li { height: 80px; cursor: pointer; color: #444; background-image: url(../img/bg/home/services_icons.png); background-repeat: no-repeat; } #home #home-services ul#service-list li:hover { text-decoration: underline; } #home #home-services ul#service-list li.current:hover { text-decoration: none; } #home #home-services ul#service-list li h3 { padding: 20px 0 0 50px; color: inherit; font-size: 16px; font-weight: normal; text-transform: uppercase; } #home #home-services ul#service-list li p { padding-left: 50px; font-size: 12px; line-height: 14px;} #home #home-services ul#service-list li div.feature-content { display: none; } #home #home-services ul#service-list li#analysis { background-position: 6px 24px; } #home #home-services ul#service-list li#planning { background-position: 6px -54px; } #home #home-services ul#service-list li#design { background-position: 6px -136px; } #home #home-services ul#service-list li#construction { background-position: 6px -218px; } #home #home-services ul#service-list li#launching { background-position: 6px -296px; } #home #home-services a#more-services { position: absolute; right: 20px; bottom: 20px; z-index: 20;} .feature-container { position: relative; background: #f2f2f2; margin: 10px; } .feature-container .feature-list { position: relative; width: 200px; background: #fff; } .feature-container .feature-list li { position: relative; z-index: 15; } .feature-container .feature-content-container { position: absolute; right: 0; top: 0; width: 278px; height: 400px; z-index: 5; } .feature-container .feature-content-container .feature-content { position: absolute; overflow: hidden; } .feature-container .current-feature { width: 232px; height: 80px; left: 0; top: 0; position: absolute; background: transparent url(../img/bg/home/feature_pointer.png) no-repeat; z-index: 10; } #home #home-portfolio { }/* #home #home-portfolio ul.portfolio-creations { width: 440px; height: 330px; position: relative; overflow: hidden; } #home #home-portfolio ul.portfolio-creations li { position: absolute; top: 0; left: 0;}*/ #home #home-portfolio ul.portfolio-creations li a { display: block; position: relative; } #home #home-portfolio ul.portfolio-creations li a span { font-size: 16px; position: absolute; display: block; padding: 10px 20px; width: 400px; color: #fff; background: #000; z-index: 10; left: 0; bottom: 0px;} /* About */ #about { } #about h1 { background-image: url(../img/bg/titles/about.png); } #about .left-content { float: left; width: 638px; } #about .right-content { float: right; width: 300px; margin: 20px 30px 0 0; background: #eee; padding-bottom: 20px;} #about .left-content p { padding: 20px 30px 5px; font-size: 16px; text-align: justify; } #about .right-content h2 { background: url(../img/bg/titles/about_web.jpg) no-repeat; height: 40px; } #about .right-content h2 span { display: none; } #about .right-content p { padding: 5px 10px; line-height: normal; text-align: justify; } /* Services */ #services { } #services h1 { background-image: url(../img/bg/titles/services.png); } #services p.text { padding: 40px 80px; font-size: 17px; color: #444; text-align: justify; } #services img { } #services ul.services-steps { padding: 0 7px; } #services ul.services-steps li { width: 180px; margin: 0 5px; float: left; font-size: 12px; } #services ul.services-steps li:hover { } #services ul.services-steps li h2, #services ul.services-steps li h3 { display: none; } #services ul.services-steps li div.pointer { height: 18px; width: 100%; background: transparent url(../img/bg/services_arrow.png) no-repeat center 0; } #services ul.services-steps li ul { background: #ebebeb; padding: 5px 0; } #services ul.services-steps li ul li { float: none; margin: 0; background: #ebebeb; border-top: 1px solid #f8f8f8; border-bottom: 1px solid #ddd;} #services ul.services-steps li ul li:first-child { border-top: none;} #services ul.services-steps li ul li:last-child { border-bottom: none;} #services ul.services-steps li ul li a { display: block; padding: 5px 12px; color: #444; text-transform: capitalize; text-decoration: none; } #services ul.services-steps li ul li a:hover { background: #349bd5; color: #fff; } /* Contact */ #contact { } #contact h1 { background-image: url(../img/bg/titles/contact.png); } #contact h2, #contact h3 { display: none; } #contact .left-content, #contact .right-content { width: 440px; padding: 0px 20px 100px; } #contact .left-content { float: left; } #contact .right-content { float: right; padding-top: 40px;} #contact .left-content .more { padding: 40px 0px 10px 160px; background: url(../img/bg/contact/write.jpg) no-repeat 20px 50px; } #contact .left-content .more p { padding: 0 0 10px; text-align: justify; font-size: 14px; } #contact .left-content .more p.message-sent { padding: 35px 20px 160px; } #contact .left-content .more p.message-sent strong { display: block; } #contact .right-content .address-column { float: left; width: 240px; } #contact .right-content .address-column div { display: block; width: 170px; height: 60px; background: no-repeat; padding: 30px 10px 20px 65px; font-size: 13px; } #contact .right-content #address { background-image: url(../img/bg/contact/address.jpg); } #contact .right-content #phone { background-image: url(../img/bg/contact/phone.jpg); height: 40px; background-position: 5px 0;} #contact .right-content #email { background-image: url(../img/bg/contact/email.jpg); background-position: 5px 0;} #contact .right-content .social-column { float: right; width: 200px; } #contact .right-content .social-column a { display: block; margin: 0px 20px 10px; padding: 8px 16px 8px 50px; font-size: 16px; background: no-repeat 8px 4px; } #contact .right-content .social-column a#facebook { background-image: url(../img/icons/social/facebook_light.png); } #contact .right-content .social-column a#facebook:hover { background-image: url(../img/icons/social/facebook.png); } #contact .right-content .social-column a#twitter { background-image: url(../img/icons/social/twitter_light.png); } #contact .right-content .social-column a#twitter:hover { background-image: url(../img/icons/social/twitter.png); } #contact form label span { display: block; color: #bbb; font-size: 12px; font-style: normal; } #contact form input.submit { float: right; margin: 8px 7px 0 0; } /* Portfolio */ #portfolio { } #portfolio h1 { background-image: url(../img/bg/titles/portfolio.png); } #portfolio h2.category-name { padding: 25px 20px 5px; font-size: 14px; font-weight: normal; } #portfolio div.category-description { padding: 5px 20px 20px; width: 50%; } #portfolio ul.portfolio-creation-list { padding: 20px 10px 100px; } #portfolio ul.portfolio-creation-list li { float: left; padding: 5px; background: transparent url(../img/bg/portfolio/thumb_shadow.png) no-repeat center 172px; } #portfolio ul.portfolio-creation-list li.clearer { padding: 0; } #portfolio ul.portfolio-creation-list li a { display: block; width: 210px; text-decoration: none; padding: 7px; position: relative; border: 1px solid transparent; } #portfolio ul.portfolio-creation-list li a:hover { background-color: #fff; border: 1px solid #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 10px #ccc; } #portfolio ul.portfolio-creation-list li a img { border: 1px solid #ddd; background: #fff; padding: 5px; } #portfolio ul.portfolio-creation-list li a:hover img { border-color: transparent; } #portfolio ul.portfolio-creation-list li a h3 { color: #349bd5; font-size: 16px; padding: 3px 10px 0px; } #portfolio ul.portfolio-creation-list li a p { color: #888; font-size: 12px; padding: 0px 10px 3px; text-align: justify; } #portfolio ul.portfolio-creation-list li a div.portfolio-new-creation { width: 70px; height: 51px; position: absolute; left: 150px; top: 6px; z-index: 1; background: transparent url(../img/bg/portfolio/new.png) no-repeat; } #portfolio ul.portfolio-creation-list li a div.portfolio-new-creation span { display: none; } #portfolio .portfolio-creation-details { padding: 10px; } #portfolio .portfolio-creation-details .left-content { float: left; width: 460px; padding: 10px 0 50px 10px; } #portfolio .portfolio-creation-details .right-content { float: right; width: 460px; padding: 10px 10px 50px 0; } #portfolio .portfolio-creation-details h2 { font-size: 40px; font-weight: normal; } #portfolio .portfolio-creation-details h3 { font-size: 18px; font-weight: normal; line-height: 22px; padding-bottom: 10px; } #portfolio .portfolio-creation-details p { padding: 5px 0; text-align: justify; } #portfolio .portfolio-creation-details p.info { font-size: 14px; padding: 0; } #portfolio .portfolio-creation-details p.info span { } #portfolio .portfolio-creation-details .infos { } #portfolio .portfolio-creation-details .infos .column { float: left; width: 200px; margin: 20px 20px 50px 0; } #portfolio .portfolio-creation-details .infos .column h4 { background: #333; font-weight: bold; font-size: 14px; text-align: center; color: #fff; padding: 5px 10px; } #portfolio .portfolio-creation-details .infos .column ul { } #portfolio .portfolio-creation-details .infos .column ul li { } #portfolio .portfolio-creation-details .infos .column ul li a { border-bottom: 2px solid #f6f6f6; background: #fff; display: block; padding: 5px 20px; text-transform: capitalize; } #portfolio .portfolio-creation-details .infos .column ul li a:hover { background: #349bd5; color: #fff; text-decoration: none; } #portfolio .portfolio-creation-details .portfolio-media { border: 1px solid #ddd; background: #fff; padding: 8px; } #portfolio .portfolio-creation-details .portfolio-media .portfolio-media-wrapper { position: relative; width: 440px; height: 330px; overflow: hidden; } #portfolio .portfolio-creation-details .portfolio-media .portfolio-media-wrapper ul { position: absolute; } #portfolio .portfolio-creation-details .portfolio-media .portfolio-media-wrapper ul li { float: left; display: inline;} #portfolio .portfolio-creation-details .portfolio-media .portfolio-media-wrapper ul li img { vertical-align: middle; } #portfolio .portfolio-creation-details .portfolio-media .portfolio-controls { width: 100%;height: 40px; position: relative; margin-top: 5px; } #portfolio .portfolio-creation-details .portfolio-media .portfolio-controls span.button { display: block; width: 40px; height: 40px; cursor: pointer; background-repeat: no-repeat; position: absolute; top: 0; } #portfolio .portfolio-creation-details .portfolio-media .portfolio-controls span.button:hover { background-position: 0 -40px; } #portfolio .portfolio-creation-details .portfolio-media .portfolio-controls span.next { background-image: url(../img/icons/carousel/next.png); right: 6px; } #portfolio .portfolio-creation-details .portfolio-media .portfolio-controls span.previous { background-image: url(../img/icons/carousel/previous.png); left: 6px;} #portfolio .portfolio-creation-details .portfolio-media .portfolio-controls ul { } #portfolio .portfolio-creation-details .portfolio-media .portfolio-controls ul li { display: inline; float: left; } #portfolio .portfolio-creation-details .portfolio-media .portfolio-controls ul li span { cursor: pointer; display: block; width: 10px; height: 10px; background: url(../img/icons/carousel/dots.png) no-repeat center -8px; } #portfolio .portfolio-creation-details .portfolio-media .portfolio-controls ul li span:hover, #portfolio .portfolio-creation-details .portfolio-media .portfolio-controls ul li span.current { background-position: center 0px; } /* Blog */ #blog { padding-bottom: 100px; } #blog h1 { background-image: url(../img/bg/titles/blog.png); } #blog ul.news-list { padding: 20px 20px; } #blog ul.news-list li { border: 2px solid #ddd; padding-bottom: 20px; background: #fff; position: relative; margin: 10px 0 30px; -moz-border-radius: 0 25px 0 25px; -moz-box-shadow: 0 0 5px #ccc; -webkit-border-radius: 0 25px 0 25px; -webkit-box-shadow: 0 0 5px #ccc; } #blog ul.news-list li h2 { font-size: 40px; font-weight: normal; padding: 4px 25px 6px; background: #349bd5; color: #fff; -moz-border-radius: 0 25px 0 25px; -webkit-border-radius: 0 25px 0 25px; text-shadow: #000 0px 0px 1px; } #blog ul.news-list li span.date { display: block; position: absolute; left: 0; top: 46px; padding: 3px 25px; color: #fff; } #blog ul.news-list li p { text-align: justify; font-size: 14px; padding: 10px 20px 0px; } #blog ul.news-list li img { float: left; margin: 10px 20px 0;; border: 2px solid #349bd5; } /* Error pages */ #error-404 { width: 100%; padding: 0px 0 100px; height: 600px; background: url(../img/pics/errors/404.png) no-repeat center center; } #error-404 h2, #error-404 p { display: none; }