/* Project name: project name Project url: http://www.project-url.be/ Version: 1.0 Author: Blue4You Author URI: http://www.blue4you.be/ Main colors: white : #ffffff black : #000000 middle grey : #cccccc dark grey : #333333 */ /* plugins -------------------------------------------------------- */ @import url("plugins/horizontal/screen.css"); @import url("plugins/button/screen.css"); /* structure --------------------------------------------------------*/ html { overflow-y:scroll;} body { font-family:Arial, Helvetica, sans-serif; color: #313334; margin:0; padding:0; background:#fff;} .container { position:relative;} #wrapper { width:100%; padding:0 0 50px; background:#E6F4FD url(../images/bg-site.jpg) no-repeat top center; overflow:hidden;} a,a:visited { color:#00b0f0; outline:none;} a:hover { color:#00b0f0; text-decoration:none;} a.external { background:url(../images/external.gif) no-repeat scroll right center; padding:0 15px 0 0;} .flash-replaced .alt { display:block; height:0; position:absolute; overflow:hidden; width:0;} .infotext { display:none;} #header { margin:0; height:60px; background:#434343; } #header .topbar {} #header .logo { position:absolute; top:0; left:0; width:60; height:95px; margin:0; padding:0; z-index:2;} #baseline { line-height:35px; color:#999; text-shadow: 1px 1px 0 #fff; background:#fff;} #baseline span { color:#999;} .home #baseline { color:#5ac9f2; text-shadow:none;} .home #baseline span { color:#5ac9f2;} #navigation { margin:0; padding:0 0 0 80px;} #navigation li { width:150px; margin:9px 20px 10px 0; padding:0;} #navigation li a { display:block; padding:0; color:#fff; font-size:16px; font-weight:bold; text-decoration:none; border-right:1px solid #555; text-shadow: 1px 1px 0 #000;} #navigation li a em { display:block; color:#999; font-size:11px; font-weight:normal; font-style:normal; text-shadow: 0px 0px 0 #000;} #navigation li a:hover, #navigation li.current a, #navigation li.parent a { color:#00b0f0;} #navigation li a:hover em, #navigation li.current a em, #navigation li.parent a em { color:#8CD7F5;} #navigation li#navigation-get-in-touch { margin:9px 0 10px;} #navigation li#navigation-get-in-touch a { border:none;} #intro { display:block; margin:0 0 30px; padding:0; background:#fff url(../images/bg-border-intro.jpg) repeat-x bottom left;} #intro .container { position:relative; /*padding:50px 0;*/} #intro h2.sticker { margin:0 0 20px;} #intro p { margin:0; padding:0; font-size:1.2em;} #outro { display:block; margin:50px 0 0; padding:0; background:url(../images/bg-slider.png) repeat top left;} #outro .container { position:relative; padding:50px 0;} #outro h2.sticker { margin:0;} #footer { width:100%; color:#666; background:url(../images/bg-border-footer.jpg) repeat-x top center;} #footer .container { padding-bottom:0;} #footer h2.sticker { margin:-15px 0 30px;} #footer .vcard, #footer .vcard li { margin:0; padding:0; list-style:none; font-size:1.15em;} #footer .vcard li .type { display:none;} #footer .vcard li a { color:#666;} #footer .social-icon {} #footer .social-icon .span-1 { margin-bottom:20px; height:60px; background:#efefef; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;} #footer .social-icon .span-1 img { margin:14px 0 0 14px;} #footer .addthis_button_twitter img { background:url(../images/bg-social-icon.png) no-repeat -128px 0;} #footer .addthis_button_linkedin img { background:url(../images/bg-social-icon.png) no-repeat -160px 0;} #footer .addthis_button_digg img { background:url(../images/bg-social-icon.png) no-repeat -192px 0;} #footer .addthis_button_googlebuzz img { background:url(../images/bg-social-icon.png) no-repeat -224px 0;} #footer .addthis_button_technorati img { background:url(../images/bg-social-icon.png) no-repeat -128px -64px;} #footer .addthis_button_delicious img { background:url(../images/bg-social-icon.png) no-repeat -160px -64px;} #footer .addthis_button_email img { background:url(../images/bg-social-icon.png) no-repeat -128px -32px;} #footer .addthis_button_favorites img { background:url(../images/bg-social-icon.png) no-repeat -160px -32px;} #footer .addthis_button_w3validator img { background:url(../images/bg-social-icon.png) no-repeat -192px -32px;} #footer .blue4you_button_etic img { background:url(../images/bg-social-icon.png) no-repeat -224px -32px;} #footer .copyright { color:#aaa; font-size:11px;} #footer .copyright a { color:#aaa;} #footer .footerlinks { margin:1.5em 0 0; padding:1.5em 0 0; color:#ddd; border-top:1px dotted #ddd;} #footer .footerlinks h3 { margin:0 0 5px; padding:0; font-size:14px; color:#aaa; text-shadow: 1px 1px 0 #fff;} #footer .footerlinks a { font-size:12px; color:#aaa;} /* homepage --------------------------------------------------------*/ .home #baseline { background:none;} body.home #wrapper { width:auto; overflow:hidden; background:#fff url(../images/bg-home-1.jpg) no-repeat top center; -webkit-transform: scale(1.0);} body.home #intro { background:none; margin-bottom:0;} body.home #intro .container { height:200px; margin-bottom:0;} #video { width:940px; height:400px; padding:0 !important; background:none;} /* slider */ #slider-wrap { width:100%; margin:0 0 20px; padding:15px 0 0; overflow:hidden; /*background:url(../images/bg-slider-strip.png) repeat-x left 15px;*/} #slider-container { position:relative; width:940px; margin:0 auto; padding:35px 0 20px; text-align:left;} #slider-container h2.sticker { position:absolute; top:-15px; display:inline-block;} #slider { width:945px !important; padding:5px 0; overflow:hidden !important;} #slider ul, #slider li { margin:0; padding:0; background:none; list-style:none;} #slider li { width:960px; margin:0; padding:0 0 10px; display:inline-block;} #slider li .span-3 { height:225px; background:#fff; box-shadow: 0px 1px 2px #888; -moz-box-shadow: 0px 1px 2px #888; -webkit-box-shadow: 0px 1px 2px #888;} #slider li a { display:block; width:220px; height:100px;} #slider li a img { border:none; margin:0; padding:0;} #slider div.slider-info { padding:5px 10px; font-size:0.90em;} #slider div.slider-info a { display:inline-block; width:auto; height:auto;} #slider div.slider-info h2 { margin:0; padding:0; font-size:16px; font-weight:bold;} #slider div.slider-info h2 a { color:#000; text-decoration:none;} #slider div.slider-info p { margin:0 0 5px; padding:0;} #slider div.slider-info .tags, #slider div.slider-info .tags a { color:#999;} #slider-container #controls { position:absolute; top:3px; right:0; margin:0; padding:0; width:60px; overflow:hidden;} #slider-container #controls li { margin:0; padding:0; float:left; list-style:none;} #slider-container #controls li a { display:block; width:20px; height:20px; line-height:20px; margin:0 0; text-align:center; text-indent:-200em; background:url(../images/bg-slider-pager.png) no-repeat top left;} #slider-container #controls li.current a { background-position:bottom left;} .sticker { margin:0 0 0.5em; padding:0 0 0 5px; font-size:20px; height:30px; line-height:30px; text-transform:uppercase; color:#fff; background:url(../images/bg-title.png) no-repeat top left;} .sticker span { display:inline-block; margin:0; padding:0 15px 0 10px; height:30px; line-height:30px; background:url(../images/bg-title.png) no-repeat top right;} .sticker strong { color:#00b0f0;} .sticker.grey { background:url(../images/bg-title-footer.png) no-repeat top left;} .sticker.grey span { background:url(../images/bg-title-footer.png) no-repeat top right;} .news { color:#666; text-shadow: 1px 1px 0 #fff;} .news h3 { color:#00b0f0;} .news h3 a { color:#00b0f0;} .news a { color:#444;} .news em { color:#999; text-shadow: 1px 1px 0 #fff;} .news-list {} .news-list .news-item { width:440px; margin:0 20px 0 0; height:180px; background:#fff;} .news-list .news-item h3 { margin:0 0 15px; padding:0; font-size:26px; line-height:36px;} .news-list .news-item h3 a { text-decoration:none;} .news-list .news-item h3 a:hover { color:#444;} .news-list .news-item p { font-size:18px;} .news-list .news-item p a { color:#444; text-decoration:underline;} .news-list .news-item p a:hover { color:#00b0f0; text-decoration:underline;} .focus {} .focus ul { margin:0; padding:0;} .focus ul li { margin:0; padding:0; list-style:none; font-size:26px; text-shadow: 1px 1px 0 #fff; border-bottom:1px dotted #ccc;} .focus ul li.last { border:none;} .focus ul li a { display:block; width:435px; padding:0 25px 0 0; color:#00b0f0; text-decoration:none; background:url(../images/bg-focus-link.png) no-repeat center right;} .focus ul li a:hover { color:#444; text-decoration:none;} .twitter { padding:20px 20px 20px 220px; text-shadow: 1px 1px 0 #fff; background:url(../images/bg-slider.png) repeat-x top left; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;} .twitter p { margin:0 0 10px; padding:0; font-size:26px; color:#666;} .twitter em { color:#888;} /* portfolio --------------------------------------------------------*/ .switchview { position:absolute; bottom:0; right:0;} .switchview, .switchview li { margin:0; padding:0; list-style:none; overflow:hidden;} .switchview li { float:left;} .switchview li a { display:block; width:80px; height:40px; line-height:40px; padding:0 0 0 30px; color:#666; text-decoration:none; text-shadow: 1px 1px 0 #fff;} .switchview li.current { background:#E6F4FD; color:#333;} .switchview li.current a { color:#333;} .switchview li a.grid { background:url(../images/ico-grid.png) no-repeat 12px center;} .switchview li a.list { background:url(../images/ico-list.png) no-repeat 12px center;} .switchview li a.backtoall { background:url(../images/ico-back.png) no-repeat 12px center;} .porject-list { min-height:670px; padding-right:20px; background:url(../images/bg-vbreak.png) repeat-y top right;} .porject-list .span-3, .porject-list .span-9 { margin-bottom:20px; background:#fff; box-shadow: 0px 1px 2px #888; -moz-box-shadow: 0px 1px 2px #888; -webkit-box-shadow: 0px 1px 2px #888;} .porject-list .span-3 { height:260px;} .porject-list div.info { font-size:0.90em;} .porject-list div.info h2 { margin:0; padding:0; font-size:16px; font-weight:bold;} .porject-list div.info h2 a { color:#000; text-decoration:none;} .porject-list div.info .tags, .porject-list div.info .tags a { color:#999;} .porject-list div.info p { margin:0 0 5px; padding:0 0 5px; border-bottom:1px dotted #ccc;} .porject-list div.info p.project-desc { height:50px;} .portfolio .porject-list div.info p.project-desc { height:auto;} .porject-list img { border:none; margin:0; padding:0;} /* grid view */ .porject-list.grid .img-grid { display:block; width:220px; height:100px;} .porject-list.grid .img-list { display:none;} .porject-list.grid div.info { padding:10px;} /* list view */ .porject-list.list .img-list { display:block; float:left; width:460px; height:200px;} .porject-list.list .img-grid { display:none;} .porject-list.list div.info { float:left; width:200px; height:160px; padding:20px;} /* contact */ .contact #intro .vcard { position:absolute; z-index:9; top:60px;} .contact #intro .vcard, .contact #intro .vcard li { margin:0; padding:0; list-style:none; font-size:1.3em;} .contact #intro .vcard li .type { display:none;} .contact #intro .vcard li a {} /* form */ #wrapper input.txt, #wrapper textarea { padding:12px !important; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow: inset 0px 1px 2px #888; -moz-box-shadow: inset 0px 1px 1px #ccc; -webkit-box-shadow: inset 0px 1px 2px #888; border:none;} #wrapper input.txt { display:block; margin:0; color:#00b0f0; font:1.2em Arial, Helvetica, sans-serif; background:#fff;} #wrapper textarea { display:block; line-height:18px; margin:0; padding:4px; margin:0; font:12px Arial, Helvetica, sans-serif; color:#00b0f0; background:#fff;} #wrapper select { display:block; height:24px; padding:2px; margin:0; font:12px Arial, Helvetica, sans-serif; color:#f79421; background:#fff; border:1px solid #ccc;} * html #wrapper select { margin:1px 0;} .contact label { display:block; padding:0 0 15px; color:#666; overflow:hidden;} .contact label span { display:block; height:36px; line-height:36px; font-size:18px; font-weight:normal;} .contact label span strong { color:#00b0f0;} .contact select { float:left; width:310px;} .contact input.txt { float:left; width:276px;} .contact textarea { width:596px; height:80px;} .contact .send { padding-top:38px; padding-top:41px\9; *padding-top:32px; text-align:right;} /* code */ .contact .code #user_code { float:left; width:125px;} .contact .code img { float:left; margin-left:10px;} .contact .code a { float:left; display:inline-block; width:125px; height:40px; line-height:40px; padding:0; font-size:10px; text-align:left;} .contact .code button { margin:0 37px 0 0;} /* itinary */ .map { padding:0 20px 20px; background:url(../images/bg-slider.png) repeat-x 0 15px; overflow:hidden;} .map h3 { margin:0; padding:0; height:36px; line-height:36px; font-size:18px; color:#666;} .map form { margin:0 0 1.5em; padding:0; overflow:hidden;} .addrform label { float:left; margin:0; padding:0;} .addrform input.txt { float:left; width:190px; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;} .addrform input.txt { -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px !important; border-bottom-left-radius: 5px !important;} .addrform button { float:left; height:40px; line-height:40px; padding:0 10px; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;} .addrform button { -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;} .map p.info-itinary { margin-bottom:20px; font-size:1.5em; line-height:1.3em; color:#666;} .map a.button { width:220px;} /* qr code */ .contact .qrcode { padding:40px 0;} .contact .qrcode ul { width:900px; margin:0; padding:20px; overflow:hidden; background:#fff; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;} .contact .qrcode ul li { float:left; width:300px; margin:0; padding:0; list-style:none;} .contact .qrcode ul li a { display:inline-block; height:33px; line-height:18px; padding:0 0 0 35px; font-size:14px; text-decoration:none; font-weight:bold; color:#00b0f0; background:url(../images/qrcode/qrcode-default.gif) no-repeat 0 4px;} .contact .qrcode ul li a:hover { color:#666;} .contact .qrcode ul li a span { display:block; line-height:14px; font-size:10px; color:#666;} /* insidepage --------------------------------------------------------*/ /* intro */ #intro {} #intro .container { position:relative;} /* header */ body.contact #intro .container, body.applications #intro .container, body.about #intro .container, body.jobopportunities #intro .container, body.whyblue4you #intro .container, body.ethic #intro .container, body.dynamicdevelopment #intro .container, body.news #intro .container { height:300px; margin-bottom:70px;} body.portfolio #intro .container { height:160px; margin-bottom:0; padding:40px 0 0;} body.contact #intro h1, body.applications #intro h1, body.about #intro h1, body.jobopportunities #intro h1, body.whyblue4you #intro h1, body.ethic #intro h1, body.dynamicdevelopment #intro h1, body.news #intro h1 { position:absolute; top:0; left:0; width:940px; height:350px; text-indent:-200em;} body.solutions #intro h1 { position:absolute; top:0; left:0; width:940px; height:400px; text-indent:-200em;} body.portfolio #intro h1 {} body.contact #intro h1 { background:url(../images/contact/banner-contact.jpg) no-repeat top left;} body.applications #intro h1 { background:url(../images/apps/banner-app.jpg) no-repeat top left;} body.about #intro h1 { background:url(../images/who/banner-who.jpg) no-repeat top left;} body.jobopportunities #intro h1 { background:url(../images/jobs/banner-jobs.jpg) no-repeat top left;} body.whyblue4you #intro h1 { background:url(../images/why/banner-why.jpg) no-repeat top left;} body.ethic #intro h1 { background:url(../images/ethic/banner-ethic.jpg) no-repeat top left;} body.solutions #intro h1 { background:url(../images/solutions/banner-solutions.jpg) no-repeat top left;} body.news #intro h1 { background:url(../images/news/banner-news.jpg) no-repeat top left;} body.dynamicdevelopment #intro h1 { background:url(../images/dynamic/banner-dynamic.jpg) no-repeat top left;} body.ethic #wrap a { color:#2b851b !important;} body.solutions #intro { margin:0;} body.solutions #wrap h2.sticker { margin:-15px 0 0;} /* wrap */ #wrap { width:100%; } #wrap .myborder { background:url(../images/bg-vbreak.png) repeat-y 300px 0;} #wrap .hbreak { margin:1.5em 0 0; padding:1.5em 0 0; background:url(../images/bg-hbreak.png) repeat-x top left;} #wrap .vbreak { background:url(../images/bg-vbreak.png) repeat-x top left;} #wrap h1 { margin:20px 0 10px;} #wrap h2 { margin:20px 0 10px;} #wrap h3 { margin:0; padding:1em 0 0; font-size:2.2em; line-height:1.2em; color:#000; font-weight:normal; text-shadow:#fff 0 1px 0;} #wrap p { margin:0; padding:0.4em 0; font-size:1.2em; line-height:1.6em; color:#666;} #wrap p strong { color:#888;} #wrap h1.focus, #wrap h2.focus, #wrap h3.focus { margin:0; padding:0; font-size:2.2em; line-height:1.2em; color:#666; font-weight:normal; text-shadow:#fff 0 1px 0;} #wrap h1.blue, #wrap h2.blue, #wrap h3.blue, #wrap h1.blue a, #wrap h2.blue a, #wrap h3.blue a { color:#00acea;} #wrap h1.green, #wrap h2.green, #wrap h3.green, #wrap h1.green a, #wrap h2.green a, #wrap h3.green a { color:#2b851b;} #wrap ul, #wrap ol { margin:0; padding:0.4em 0; color:#666;} #wrap ul li, #wrap ol li { margin:0; padding:0.2em 0; font-size:1.2em; list-style:none;} #wrap ul.bullet li { padding-left:15px; background:url(../images/bullet.png) no-repeat left 10px;} #wrap ol.bullet { margin:0 0 0 1.5em; padding:0 0 0 15px;} #wrap ol.bullet li { list-style-type:decimal;} /* sidebar */ .sidebar-left {} .sidebar-left .padding { width:280px; padding:0 20px 0 0; text-align:right;} .sidebar-right {} .sidebar-right .sidebar-block { margin:0 0 20px; padding:0 0 20px 20px; color:#666; background:url(../images/bg-hbreak.png) repeat-x bottom left;} .sidebar-right .sidebar-block h3 { margin:0 0 10px; color:#666; text-shadow: 1px 1px 0 #fff;} .sidebar-right .sidebar-block a { color:#00b0f0;} .sidebar-right .sidebar-block a:hover { color:#006387;} .sidebar-right .sidebar-block ul, .sidebar-right .sidebar-block li { margin:0; padding:0; list-style:none;} .sidebar-right .sidebar-block li a { display:block; margin:0 0 1px; padding:2px 0; text-decoration:none;} /* content */ #wrap #content {} #wrap #content .padding {} /* jobs */ #wrap .jobs { padding-bottom:15px;} /* testimonials */ #wrap .testimonials { padding-top:1.5em;} #wrap .testimonials .span-8 { padding:1.5em 0; background:url(../images/bg-hbreak.png) repeat-x bottom left;} #wrap .testimonials .span-8.last { background:none;} #wrap .testimonials h3 { margin:0; padding:0; font-size:1.7em; color:#666; text-shadow:1px 1px 0 #fff; cursor:pointer; background:url(../images/bg-focus-link.png) no-repeat center right;} #wrap .testimonials h3.open { background:url(../images/bg-focus-link-2.png) no-repeat center right;} #wrap .testimonials a { color:#444;} #wrap .testimonials p em { color:#444; font-size:1.2em; font-weight:bold;} /* news */ .newsitem { padding:30px 0 !important; background:url(../images/bg-hbreak.png) repeat-x bottom left; overflow:hidden;} /* dynamic development */ body.dynamicdevelopment #wrap p strong { color:#00acea ;} #accordion { width:620px; overflow:hidden;} #videobox { position:absolute; left:569px; top:2px; height:398px; width:491px;} #accordion h3 { width:620px; line-height:16px; margin-bottom:15px; padding-bottom:5px; background:url(../images/dynamic/dots-plus.jpg) no-repeat bottom right; } #accordion h3 a { font-size:23px; text-decoration:none; } #accordion h3.ui-state-active { background:url(../images/dynamic/dots-minus.jpg) no-repeat bottom center; } #accordion h3 span { font-size:12px; color:#666666;} #accordion .span-4 a { line-height: 80px; text-align:right;} #accordion .span-4 { padding-bottom:30px;} #accordion .span-8 { overflow:hidden;} /* case studies details*/ .case-studies-detail { position:relative; line-height:18px;} body.dynamic-daikin .case-studies-detail h3 { clear:both; width:250px; height:40px; overflow:hidden; margin:0 0 15px !important; padding:7px 10px 13px !important; line-height:18px !important; font-size:16px !important; background:url(../images/dynamic/casestudies/bulle.png) no-repeat top left;} .case-studies-detail h3 span { display:block; margin:0; padding:0; font-size:12px; /*color:#fff;*/} .case-studies-detail #content h3.measure { font-size:14px; font-weight:bold; padding:30px 0 0 0;} .case-studies-detail #content h3.measure span { font-weight:normal; padding:0 0 10px 0;} .case-studies-detail ul { margin:0; padding:0;} .case-studies-detail ul li { margin:0; padding:0 0 0 15px; list-style:none; line-height:24px; background:url(../images/dynamic/casestudies/ico-arrow.gif) no-repeat center left;} .case-studies-detail .examples { margin:0 0 20px !important; border-bottom:1px dotted #1db5c9;} .case-studies-detail .examples img { padding:5px 5px 15px; background:url(../images/dynamic/casestudies/box.png) no-repeat top left;} .case-studies-detail .examples a { display:block; width:100%; margin:0 0 25px; text-decoration:none;} .case-studies-detail .examples a span { display:block; text-align:center; text-decoration:underline !important;} .case-studies-detail .examples a:hover span { text-decoration:none !important;} .case-studies-detail .not-available { display:block; width:100%; margin:0 0 30px; text-decoration:none;} .case-studies-detail .not-available span { display:none; text-align:center; color:#ccc;} a.lk-back { display:none; position:absolute; top:56px; right:40px; padding:0; color:#fff !important;} .case-studies-info .span-2 { width:125px; padding:0 0 0 15px; background:url(../images/dynamic/casestudies/ico-arrow.gif) no-repeat center left;} .case-studies-info .span-5 { padding:4px 0; border-bottom:1px solid #d7d4d4;} .case-studies-info .last { border:none !important;} .case-studies-description strong { color:#1db5c9;} /* 404 */ #goog-fixurl {} #goog-fixurl h3 { font-size:2.3em; color:#666; text-shadow:#fff 0 1px 0;} #goog-fixurl h3 b { font-weight:normal;} #goog-fixurl form { margin:1.5em 0 0 !important; padding:0 !important;} input#goog-wm-qt { margin:0; float:left; padding:11px !important; border-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-bottomleft:5px; -webkit-border-radius:5px; box-shadow: inset 0px 1px 2px #888; -moz-box-shadow: inset 0px 1px 1px #ccc; -webkit-box-shadow: inset 0px 1px 2px #888; border:none;} input#goog-wm-sb { margin:0; float:left; height:38px; font-size:18px; border-radius:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomright:5px; -webkit-border-radius:5px; border:none; color:#fff; border:none; background:#00b0f0 url(plugins/button/images/button-blue.png) repeat-x;}