/* CREDITS * ---------------------------------------------------------- * Title: Alpha Selectors - CSS Main Stylesheet * Author: Bart Vandebeek * Date: 08/10/08 * Last Edit: 09/10/08 David Candreva * ---------------------------------------------------------- * Inventis - Web Architects - We design the Web! * www.inventis.be */ /* Algemene Styles ---------------------------------------------------------- */ html,body{height:100%} *{font:12px Arial,Helvetica,sans-serif;color:#3e3e40} body{background:url(../images/layout/body_tile.png) repeat-x 0 0} /*selectors*/ strong,b{font-weight:bold} em{font-style:italic} a{outline:none;color:#0094c3} a:hover{text-decoration:none} .clear{clear:both} /* Container ---------------------------------------------------------- */ div#container{min-height:100%;height:auto !important;height:100%;margin:0 auto -102px} div#container_wrapper, div#container_wrapper_nl{margin:0 auto;width:935px; position:relative;} body#home div#container_wrapper{background:url(../images/layout/container_background_home.png) no-repeat 0 0;} body#home div#container_wrapper_nl{background:url(../images/layout/container_background_home_nl.png) no-repeat 0 0;} .push{height:102px} img.img{position:absolute; top:80px; left:37px} /* Header ---------------------------------------------------------- */ div#header{position:relative;padding:15px 0px 0px;width:935px;height:182px;} body#home div#header{height:339px; z-index:5; background:none;} /*logo*/ div#header h1{float:left;margin-left:17px;width:173px;height:54px;background:#fff url(../images/layout/logo.jpg) no-repeat;display:block;text-indent:-9999px} div#header h1 a{display:block;width:173px;height:54px} div.futureprojecthome a { width: 130px; height: 130px; display: block; text-decoration: none; } div.futureprojecthome { left: 300px; top: 90px; position:absolute; z-index:10; } /*navigation*/ div#header ul.navigation{float:left;margin:0 0 0 10px} div#header ul.navigation li{float:left; position:relative;} div#header ul.navigation li a{float:left;color:#000;text-decoration:none;text-align:center;display:block;height:39px;padding:14px 18px 0;} div#header ul.navigation li a span{display:block;font-weight:bold} div#header ul.navigation li a em{color:#009bd4;font-style:normal;font-size:10px} div#header ul.navigation li ul{position:absolute; background:#FFF; border:1px solid #d9dcde; top:53px; padding:0 2px; width:142px; z-index:999; left:-9999em} div#header ul.navigation li:hover ul{left:50%; margin-left:-71px;} div#header ul.navigation li ul li{background:#FFF; width:142px; float:left;clear:both;} div#header ul.navigation li ul li a{background:none; padding:0; color:#3d464b; border-bottom:1px solid #d9dcde; line-height:27px; height:27px; float:none; width:116px;} div#header ul.navigation li ul li:hover{background:fff;} div#header ul.navigation li ul li:hover a{background:fff;} div#header ul.navigation li ul li a{ text-align:left; font-size:10px; } div#header ul.navigation li.active ul li{background:#FFF;} div#header ul.navigation li.active ul li a, div#header ul.navigation li:hover ul li a, div#header ul.navigation li ul li a{background:#FFF; padding:0 0 0 26px; background:#FFF url(../images/layout/bullet_alpha.gif) no-repeat 7px center;} div#header ul.navigation li.active, div#header ul.navigation li:hover{background:url(../images/layout/navigation_background_left.png) no-repeat 0 0} div#header ul.navigation li.active a, div#header ul.navigation li:hover a{background:url(../images/layout/navigation_background_right.png) no-repeat right 0} /*servicelinks*/ /*page*/ body#page div#header ul.servicelinks {position:absolute;bottom:4px;right:40px} body#page div#header ul.servicelinks li{float:left;margin:0 0 0 10px} body#page div#header ul.servicelinks li a{display:block;height:26px;float:left;text-indent:-9000px;background:url(../images/layout/servicelinks_background.png)} body#page div#header ul.servicelinks li a.home{width:29px} body#page div#header ul.servicelinks li a.try{width:158px; background-position:-40px 0} body#page div#header ul.servicelinks li a.appzone{width:122px;background-position:-208px 0} body#page div#header ul.servicelinks li a.czone{width:100px;background-position:-340px 0} body#page div#header ul.servicelinks li a.new{width:97px;background-position:-450px 0} body#page div#header ul.servicelinks li a.home:hover, body#page div#header ul.servicelinks li.active a.home{background-position:0 26px} body#page div#header ul.servicelinks li a.try:hover, body#page div#header ul.servicelinks li.active a.try{background-position:-40px 26px} body#page div#header ul.servicelinks li a.appzone:hover, body#page div#header ul.servicelinks li.active a.appzone{background-position:-208px 26px} body#page div#header ul.servicelinks li a.czone:hover, body#page div#header ul.servicelinks li.active a.czone{background-position:-340px 26px} body#page div#header ul.servicelinks li a.new:hover, body#page div#header ul.servicelinks li.active a.new{background-position:-450px 26px} body#page div#header ul.servicelinksNl {position:absolute;bottom:4px;right:40px} body#page div#header ul.servicelinksNl li{float:left;margin:0 0 0 10px} body#page div#header ul.servicelinksNl li a{display:block;height:26px;float:left;text-indent:-9000px;background:url(../images/layout/servicelinks_backgroundNl.png)} body#page div#header ul.servicelinksNl li a.home{width:29px} body#page div#header ul.servicelinksNl li a.try{width:143px; background-position:-40px 0} body#page div#header ul.servicelinksNl li a.appzone{width:100px;background-position:-195px 0} body#page div#header ul.servicelinksNl li a.czone{width:80px;background-position:-306px 0} body#page div#header ul.servicelinksNl li a.new{width:113px;background-position:-400px 0} body#page div#header ul.servicelinksNl li a.home:hover, body#page div#header ul.servicelinksNl li.active a.home{background-position:0 26px} body#page div#header ul.servicelinksNl li a.try:hover, body#page div#header ul.servicelinksNl li.active a.try{background-position:-40px 26px} body#page div#header ul.servicelinksNl li a.appzone:hover, body#page div#header ul.servicelinksNl li.active a.appzone{background-position:-195px 26px} body#page div#header ul.servicelinksNl li a.czone:hover, body#page div#header ul.servicelinksNl li.active a.czone{background-position:-306px 26px} body#page div#header ul.servicelinksNl li a.new:hover, body#page div#header ul.servicelinksNl li.active a.new{background-position:-400px 26px} /*home*/ body#home div#header ul.servicelinks, body#home div#header ul.servicelinksNl {position:absolute;top:130px;right:17px} body#home div#header ul.servicelinks li, body#home div#header ul.servicelinksNl li{margin:0 0 6px} body#home div#header ul.servicelinks li a{display:block;height:33px; width:190px; text-indent:-9000px;background:url(../images/layout/servicelinks_background_home.png)} body#home div#header ul.servicelinksNl li a{display:block;height:33px; width:190px; text-indent:-9000px;background:url(../images/layout/servicelinks_background_homeNl.png)} body#home div#header ul.servicelinks li a.appzone, body#home div#header ul.servicelinksNl li a.appzone{background-position:0 -39px} body#home div#header ul.servicelinks li a.czone, body#home div#header ul.servicelinksNl li a.czone{background-position:0 -78px} body#home div#header ul.servicelinks li a.new, body#home div#header ul.servicelinksNl li a.new{background-position:0 -118px} body#home div#header ul.servicelinks li a.try:hover, body#home div#header ul.servicelinks li.active a.try, body#home div#header ul.servicelinksNl li a.try:hover, body#home div#header ul.servicelinksNl li.active a.try{background-position:189px 0} body#home div#header ul.servicelinks li a.appzone:hover,body#home div#header ul.servicelinks li.active a.appzone, body#home div#header ul.servicelinksNl li a.appzone:hover,body#home div#header ul.servicelinksNl li.active a.appzone{background-position:189px -39px} body#home div#header ul.servicelinks li a.czone:hover, body#home div#header ul.servicelinks li.active a.czone, body#home div#header ul.servicelinksNl li a.czone:hover, body#home div#header ul.servicelinksNl li.active a.czone{background-position:189px -78px} body#home div#header ul.servicelinks li a.new:hover, body#home div#header ul.servicelinks li.active a.new, body#home div#header ul.servicelinksNl li a.new:hover, body#home div#header ul.servicelinksNl li.active a.new{background-position:189px -118px} /*languages*/ div#header ul.languages{position:absolute;left:-5px;top:125px; z-index:50;} div#header ul.languages li{width:23px; height:23px; margin:0 0 4px; background:url(../images/layout/languages_bg.png) no-repeat 0 0;} div#header ul.languages li a{display:block; width:21px; height:17px; text-align:right; padding:6px 2px 0 0;} /* Content ---------------------------------------------------------- */ div#content{margin:0px auto;line-height:20px;padding:16px 0px 0px;width:935px;} body#home div#content{background:none;} /*pricing*/ div.shadow{background:url(../images/layout/shadow_nologo.png) no-repeat 0 0;} table.pricing{ width:100%; margin-bottom: 5px; } table.pricing{background:url(../images/layout/table_price_line_bottom.png) repeat-y left bottom} table.pricing tr td,table.pricing tr th{line-height:41px; text-align:center;} table.pricing tr td.right,table.pricing tr th.right{text-align:right;} table.pricing tr td span.greyfill{background-color:#efefef; display:block; height:39px;} table.pricing tr td span.greyfade{ display:block; height:39px; background: #efefef url(../images/layout/greyfade_bg.png) repeat-y right; } /*sidebar*/ div#sidebar{margin:0px 22px 0px 0px;border:3px solid #fffeba; float:right;width:228px;background:url(../images/layout/sidebar_tile.png) repeat-y 0 0} div#sidebar_wrapper{border:2px solid #fffde0;background:url(../images/layout/sidebar_bg.png) no-repeat 0 0;padding:12px;width:200px} div#sidebar h2{font:18px/18px Arial,Helvetica,sans-serif;color:#0094C3;} div#sidebar ul li{padding:4px 0px 4px 5px;background:transparent url(../images/layout/sidebarDivider.gif) no-repeat center bottom} div#sidebar ul.spacing li{ padding:0px 0px 10px; margin-bottom: 10px; } div#sidebar ul li span{background:transparent url(../images/layout/tick.gif) no-repeat left top;margin:0px;padding:0px 0px 0px 20px} div#sidebar ul li a{color:#3e3e40;text-decoration:none;display:block;background:transparent url(../images/layout/tick.gif) no-repeat left center;margin:0px;padding:0px 0px 0px 20px} div#sidebar ul li a:hover{text-decoration:underline} div#sidebar_img{ margin:0px 22px 0px 0px; float:right; width:228px; border: 2px solid #0095c7; padding: 1px; background: #fff; } div#sidebar_imgNb{ margin:0px 22px 0px 0px; float:right; width:228px; background: transparent; } /*main_content*/ div#main_content{padding:0 0 0 40px;float:left;width:603px} div#main_content img.left{ margin:0px 10px 0px 0px; padding:0px; float: left; } div#main_content p{margin:0px 0px 15px;padding:0px} div#main_content p em{ color: #048ecc; font-style: italic; } div#main_content h2{ font:24px/18px Arial,Helvetica,sans-serif; color:#0094C3; padding:0px 0px 20px 75px; margin-left:-30px; background:url(../images/layout/shadow.png) no-repeat left bottom; } div#main_content h2.custom{ font:24px/18px Arial,Helvetica,sans-serif; color:#0094C3; padding:0px 0px 20px 75px; margin-left:-30px; background:url(../images/layout/shadow_custom.png) no-repeat left bottom; } div#main_content h3{font:16px/18px Arial,Helvetica,sans-serif;color:#0094C3;margin:0px 0px 0} div#main_content h3.shadow_nm{padding:0px 0px 20px 30px; margin:0 0 -20px -30px; background:url(../images/layout/shadow_nologo.png) no-repeat left bottom;} div#main_content h4{font:14px/16px Arial,Helvetica,sans-serif;color:#0094C3;margin:0px 0px 0} div#main_content ol{ margin:10px 0px; padding:0px 0px 0px 20px } div#main_content ul{ margin:10px 0px; padding:0px } div#main_content ul.customized li { background:transparent url(../images/layout/bullet_alpha_customized.gif) no-repeat left 4px; margin:0px 0px 8px; padding:0px 0px 0px 20px } div#main_content ul li { background:transparent url(../images/layout/bullet_alpha.gif) no-repeat left 4px; margin:0px 0px 8px; padding:0px 0px 0px 20px } div#main_content blockquote {background:#befb92; padding:5px; border:2px solid #a2f67c; font-weight:bold; margin: 0px 0px 10px; } div#main_content blockquote p {margin:0px; padding:0px} div#main_content blockquote.offer{ border:1px solid #fd7904; background:#fff url(../images/layout/offer_bg.png) repeat-x; } div#main_content blockquote.offer span{ color:#ffffff; padding-left:30px; background:transparent url(../images/layout/niceform/error.gif) no-repeat 5px center; font-weight: bold;} div#main_content blockquote.offer span strong{ color:#ffffff; } div#main_content blockquote.case{ border:1px solid #fd7904; background:#fff url(../images/layout/offer_bg.png) repeat-x; } div#main_content blockquote.case span{ color:#ffffff; padding-left:10px; font-weight: bold;} div#main_content blockquote.case span a{ color:#ffffff; } div#main_content blockquote.case span strong{ color:#ffffff; } div#main_content blockquote.info{padding-left:30px; background:#befb92 url(../images/layout/niceform/error.gif) no-repeat 5px center;} div#main_content blockquote a{color:#3E3E40; font-weight:bold;} div#main_content .center{width:100%; text-align:center; clear:both;} div#main_content a.test{width:209px; height:41px; display:block; margin:0 auto; text-indent:-9000px; background:url(../images/layout/take_test.png) no-repeat 0 0;} div#main_content a.test:hover{background-position:left bottom;} div#main_content a.testNl{width:209px; height:41px; display:block; margin:0 auto; text-indent:-9000px; background:url(../images/layout/take_testNl.png) no-repeat 0 0;} div#main_content a.testNl:hover{background-position:left bottom;} div#main_content a.login{width:209px; height:41px; display:block; margin:0 auto; text-indent:-9000px; background:url(../images/layout/login.png) no-repeat 0 0;} div#main_content a.login:hover{background-position:left bottom;} div#main_content a.loginNl{width:209px; height:41px; display:block; margin:0 auto; text-indent:-9000px; background:url(../images/layout/loginNl.png) no-repeat 0 0;} div#main_content a.loginNl:hover{background-position:left bottom;} /*home_list*/ ul.home_list{margin:-30px 0 0 8px; width:100%; position:relative; z-index:999;} ul.home_list li{width:211px; font-size:11px; font-family:Verdana,Arial,Helvetica,sans-serif; overflow:hidden; padding:0 10px; float:left; background:url(../images/layout/home_list_bg.png) no-repeat 0 0;} ul.home_list li h2{font-size:16px; height:40px; color:#0094c3; line-height:40px; padding:0 0 0 52px} ul.home_list li h2.custom{background:url(/design/images/layout/icon_custom.gif) no-repeat 0 0 } ul.home_list li h2.pricing{background:url(/design/images/layout/icon_laptop.gif) no-repeat 0 0 } ul.home_list li h2.why{background:url(/design/images/layout/icon_laptop.gif) no-repeat 0 0 } ul.home_list li h2.how{background:url(/design/images/layout/icon_laptop.gif) no-repeat 0 0 } ul.home_list li img{margin-bottom:-9px;} ul.home_list li div.text{font-size:11px; padding:5px 0; line-height:16px; text-align:left; font-family:Verdana, Arial, Helvetica, sans-serif; color:#3e3e40; height:220px;} ul.home_list li div.text strong{color:#048ECC; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;} ul.home_list li div.text li{ text-align:left; margin: 0px 0px 10px; } ul.home_list li div.text ul.ol li{ text-align:left; margin: -8px 0px 11px !important; } ul.home_list li div.extra{width:100%; clear:both; overflow:hidden; text-align:center;} ul.home_list li div.extra a.more{width:79px; display:block; margin:0 auto; cursor:pointer; line-height:27px; font-size:11px; text-decoration:none; height:27px; text-align:center; color:#0094c3; background:url(../images/layout/button_bg.png) no-repeat 0 0;} ul.home_list li div.extra a.more:hover{background-position: left bottom;} ul.home_list li.last{width:209px;} /*bullets*/ ul.bullets{width:100%; overflow:hidden; margin-top:4px;} ul.bullets li{float:none; padding:0 0 0 15px; width:auto; text-align:left; margin:0 0 4px; background:url(../images/layout/bullet_alpha.gif) no-repeat 0 4px;} /*future project link*/ #studentreg_button { display: block; height: 26px; right: 0; position: absolute; text-indent: -9000px } #studentreg_button:hover { background-position: bottom left } .en #studentreg_button { background-image: url('../images/layout/futureproject/register_eng.png'); width: 167px } .nl #studentreg_button { background-image: url('../images/layout/futureproject/register_nl.png'); width: 190px } /* Footer ---------------------------------------------------------- */ div#footer{height:102px; position:relative; background:#424242 url(../images/layout/footer_tile.png) repeat-x;} div#inner-footer{margin:0px auto;padding:53px 0px 0px;width:935px;height:49px;background:transparent url(../images/layout/inner-footerBg.jpg) no-repeat right 47px;color:#606060;font-size:11px} div#inner-footer strong{font-size:12px} div#inner-footer a{color:#606060;font-size:11px;text-decoration:underline} div#inner-footer a:hover{text-decoration:none;color:#666} div#inner-footer .astyreProduct{width:290px; color:#606060;} div#inner-footer .astyreProduct strong{color:#606060;} div#inner-footer a#inventis{background:url(../images/layout/icon_inventis.png) no-repeat 0 0;width:68px; margin:-2px 0 0 0;height:16px;display:block;overflow:hidden;text-indent:-9000px;float:right;} div#inner-footer a#inventis:hover{background-position:left bottom}