/* width | height | display | border | padding | margin | float | position | line-height | letter-spacing | font-size | font-weight | font-style | font-family | text-align | text-decoration | list-style | background | color | outline-style */ /* http://www.positioniseverything.net/articles/multiIE.html */ * { padding:0; margin:0; color: #FFFFFF; } fieldset, img { border:0; } label, a { cursor:pointer; } body, textarea, input, select { font-size:100%; font-family:Arial,Helvetica,Verdana,sans-serif; } body { background:url(img/bcg.gif) 0 -50px repeat-x #000000; } option { padding:0.2em; } a { text-decoration:none; color:#4d4d4d; outline-style:none; } #left a { text-decoration:underline; color:#fff; outline-style:none; } #left a:hover { text-decoration:none; } h1, h2, h3, h4, h5, h6 { font-size:1em; } /* STD => END */ /* CLASSES */ .hidden, hr, h1 a span, h2 span, h3 span, #menu ul li a span, #menu h2{ position:absolute; left:-1000em; } .clear { position:relative; clear:both; height:0px; overflow: hidden; } /* .pliki { padding-top:20px; left:400px; float:left; font-size:1.2em; font-weight:bold; color:#FEFEFE; } */ .link { font-weight:normal; color:#FF6633; } .wiecej { padding-top:4px; float:right; color:#FF6633; } /* ================ T O P ============================== */ #start { width:1000px; margin:0 auto; position:relative;} #top { width:1000px; height:98px; margin:0 auto; float: left; position:relative; background:url(img/top.jpg) 0 -50px no-repeat; } #menu { width:1000px; height:111px; border-top: 1px #3c3c3c solid; border-bottom: 10px #fcc613 solid; margin:0 auto; position:relative; float: left; background: #262626; } #menu h1 a { width:192px; height:65px; display:block; position:absolute; left:89px; top:32px; background:url(img/logo.gif); } #menu ul { width:538px; height:111px; padding-right: 39px; float:right; list-style: none; } #menu ul li, #menu ul li a { height: 111px; display: block; float: left; } #l1 a { width: 134px; background: url(img/menu.gif) 0 0 no-repeat; } #l1 a:hover, #l1 a.active { width: 134px; background: url(img/menu.gif) 0 -112px no-repeat; } #l2 a { width: 134px; background: url(img/menu.gif) -134px 0 no-repeat; } #l2 a:hover, #l2 a.active { width: 134px; background: url(img/menu.gif) -134px -112px no-repeat; } #l3 a { width: 134px; background: url(img/menu.gif) -268px 0 no-repeat; } #l3 a:hover, #l3 a.active { width: 134px; background: url(img/menu.gif) -268px -112px no-repeat; } #l4 a { width: 135px; background: url(img/menu.gif) -402px 0 no-repeat; } #l4 a:hover, #l4 a.active { width: 135px; background: url(img/menu.gif) -402px -112px no-repeat; } /* ENG */ #l1_eng a { width: 134px; background: url(img/menu_eng.gif) 0 0 no-repeat; } #l1_eng a:hover, #l1_eng a.active{ width: 134px; background: url(img/menu_eng.gif) 0 -112px no-repeat; } #l2_eng a { width: 134px; background: url(img/menu_eng.gif) -134px 0 no-repeat; } #l2_eng a:hover, #l2_eng a.active{ width: 134px; background: url(img/menu_eng.gif) -134px -112px no-repeat; } #l3_eng a { width: 134px; background: url(img/menu_eng.gif) -268px 0 no-repeat; } #l3_eng a:hover, #l3_eng a.active{ width: 134px; background: url(img/menu_eng.gif) -268px -112px no-repeat; } #l4_eng a { width: 135px; background: url(img/menu_eng.gif) -402px 0 no-repeat; } #l4_eng a:hover, #l4_eng a.active{ width: 135px; background: url(img/menu_eng.gif) -402px -112px no-repeat; } .trans { display:block; z-index:1001; } /* ########################################################################################################################################## */ /* index Over_HCI Nieuws Referenties Contakt */ /* 1) index 2) Over_HCI 3) Nieuws 4) Referenties 5) Contact */ /* div{ border: 1px red solid; } */ /* width | height | display | border | padding | margin | float | position | line-height | letter-spacing | font-size | font-weight | font-style | font-family | text-align | text-decoration | list-style | background | color | outline-style */ /* ALL */ #foto { width:650px; height:248px; border: 1px #FFFFFF solid; border-left:0px; float: left; position: relative;} #foto img { position: absolute; top:0px; left:0px; } #foto img.foto { position: relative; float: right; border: 3px solid #ffffff; border-bottom-width: 2px; border-left: 0; z-index: 1050;} #foto .first img.foto {border-left: 3px solid #ffffff;} #foto a { z-index: 1050; position: relative;} #foto div.fotos { position: absolute; top: 193px; height: 56px; left: 0; width:650px; z-index: 1020;} .innerfade { width:650px; height:248px; } .innerfade img { position: absolute; top:0px; left:0px; } #search { width:349px; height:30px; float: right; background:url(img/search_blank.gif) 0 0 no-repeat #ffffff; position:relative; } #search form { position:relative; top:0px; } #search form input { position:relative; left:58px; border:0px; } #search form input#i_img { position:relative; top:2px; } #search form input#i_txt { width:180px; height:14px; position:absolute; top:2px; left:83px; font-size:0.75em; color:#a8a8a8; } #search a { width:16px; height:11px; display:block; float:right; } #search a#flag { position: absolute; right:40px; top:4px; } #linki { width:349px; height:220px; position:relative; float:left; overflow:hidden; background:#FFFFFF; } #linki span#products { position:relative; top:67px; left:55px; letter-spacing:1px; font-size:0.7em; font-weight:bold; color:#4d4d4d; } #linki ul { position:absolute; top:95px; left:0px; float:left; border-top:1px #e9e9e9 solid; border-bottom:1px #e9e9e9 solid; } #linki ul li { width:174px; height:25px; border-bottom:1px #e9e9e9 solid; float:left; position:relative; list-style:none; } #linki ul li a { height:25px; display:block; font-size:0.7em; } #linki ul li a span { color:#4d4d4d; } #linki ul li.last { width:174px; border-bottom:0px; } #linki ul li.last_active { width:174px; background:#feeeb8; } #linki ul li a.left span { position:relative; top:5px; left:55px; } #linki ul li a.right span { position:relative; top:5px; left:15px; } #linki ul li a:hover, #linki ul li.active{ background:#feeeb8; } #bottom { width:1000px; height:193px; float: left; position:relative; border-bottom: 1px #FFFFFF solid; overflow:hidden; background:url(img/bottom.gif) 0 0 no-repeat;} #veatures { overflow:hidden; min-height:200px; position:absolute;} #veatures2 { overflow:hidden; position:absolute; } #finish { width:1000px; height:180px; border-top: 10px #fcc613 solid; float: left; position:relative; background:url(img/finish.jpg) 0 0 no-repeat; } #veatures_up { width:14px; height:14px; display:block; position:absolute; right:10px; top:20px; float:right; clear:both; background:url(img/arrow_up.png); } #veatures_down { width:14px; height:14px; display:block; position:absolute; right:10px; top:160px; float:right; clear:both; background:url(img/arrow_down.png); } #veatures2_up { width:14px; height:14px; display:block; position:absolute; right:10px; top:10px; float:right; clear:both; background:url(img/arrow_up.png); } #veatures2_down { width:14px; height:14px; display:block; position:absolute; right:10px; top:190px; float:right; clear:both; background:url(img/arrow_down.png); } #veatures2ref_down { width:14px; height:14px; display:block; position:absolute; right:10px; top:190px; float:right; clear:both; background:url(img/arrow_down.png); } #veatures_up_out, #veatures_down_out{ position:absolute;left:-1000em; } /* CLASSES */ /* index Nieuws */ .zajawka { width:520px; position:relative; top:30px; left:90px; line-height:16px; font-size:0.7em; font-weight:normal; border: 0px green solid;} .search .zajawka { width:800px; top:0; left:0; padding: 0px 0 0 90px;} /* Nieuws */ .bottom_belka { width:500px; position:relative; top:19px; left:90px; border: 0px red solid; padding-bottom: 10px; } .search .bottom_belka { width: 800px; top: 0; left:0; padding: 12px 0 5px 90px;} .tytul_small { width:340px; font-size:0.75em; font-weight:bold; color:#fcc613; } .search .tytul_small {width: 800px;} .search .tytul_small a {width: 800px; color: #fcc613; text-decoration: none;} .search .tytul_small a:hover {text-decoration: underline;} .zajawka_small { padding: 3px; padding-left: 0px; font-size:0.7em; font-weight:normal; } /* ========== P A G E S ========== */ /* index */ #bottom_index { width:1000px; height:193px; float: left; position:relative; border-bottom: 1px #FFFFFF solid; overflow:hidden; line-height:1.3em; background:url(img/bottom_index.gif) 0 0 no-repeat; } #bottom_index #left { width:650px; float:left; padding-bottom:50px; } #bottom_index #right { width:350px; float:left; } #bottom_index #right .arrow_up{ position:absolute; right:10px; top:20px; float:right; clear:both; } #bottom_index #right .arrow_down{ position:absolute; right:10px; top:160px; float:right; clear:both; } .tytul { width:365px; padding-bottom: 15px; position:relative; top:30px; left:90px; font-size:0.85em; font-weight:bold; font-style:italic; color:#fcc613; } .contact { width:200px; float: left; position:relative; top:30px; left:55px; font-size:0.75em; font-weight:normal; } .contact a {color: rgb(252, 198, 19);} .contacthome .engels { width:200px; float: left; position:relative; top:30px; left:55px; font-size:0.75em; font-weight:normal; } /* over-HCI */ #bottom .search #left { width:1000px; float:left; padding-bottom:30px; } #bottom #left { width:650px; float:left; padding-bottom:30px; } #bottom #right { width:350px; float:left; padding:15px 0px 15px 0px; } #right .arrow_up { position:absolute; right:10px; top:20px; float:right; clear:both; } #right .arrow_down { position:absolute; right:10px; top:160px; float:right; clear:both; } #bottom #small_menu { width: 650px; height:18px; } #bottom #small_menu ul { height:18px; list-style: none; padding-left:86px; } #bottom #small_menu ul li { height:18px; float: left; } #bottom #small_menu ul li a { height:18px; display:block; float:left; padding-right:25px; padding-top:0px; font-size:0.7em; background:url(img/menu_li.gif) right; color:#000000;} #bottom #small_menu ul li a.active{ background:url(img/menu_li_hcurr.gif) #ffffff right; } #bottom #small_menu ul li a.prev{ background:url(img/menu_li_hprev.gif) #ffffff right; } #bottom #small_menu ul li a.start{ width:14px; height:18px; padding-right:0px; float: left; background:url(img/rog_start.gif); color:#000000;} #bottom #small_menu ul li a.start_active{ width:14px; height:18px; padding-right:0px; float: left; background: url(img/rogal_start.gif); color:#000000; } #bottom #small_menu ul li a.last{ height:18px; float: left; background:url(img/rog_finish.gif) right; padding-right:25px; color:#000000;} #bottom #small_menu ul li a.last_active{height:18px; float: left; background:url(img/rogar_finish.gif) right; padding-right:25px; color:#000000;} #bottom #small_menu ul li a span{ color:#000000; position:relative; top:2px; } #bottom #small_menu ul li a:hover span{} #bottom .foto_small_over { border:1px #939393 solid; padding:3px 3px 0px 3px; margin-bottom:40px; float: left; clear:both; position:relative; top:6px; left:55px; background: #262626; } #bottom .foto_small_over.small { margin-bottom: 5px; } #bottom .foto_small_over_empty { width:213px; height:30px; float: right; position:relative; top:6px; right:79px; } #bottom .pliki { width:211px; height:28px; padding:3px 0px 0px 3px; float: left; font-size:0.7em; font-weight:normal; position:relative; top:-28px; left:50px; } #bottom .pliki a { position:relative; top:-4px; left:5px; text-decoration: underline; color: #FFFFFF; } .tytul_over { width:360px; padding-bottom: 15px; position:relative; top:20px; left:90px; font-size:0.9em; font-weight:bold; font-style:italic; color:#fcc613; } .zajawka_over { width:520px; position:relative; top:14px; left:90px; line-height:16px; font-size:0.7em; font-weight:normal; border: 0px green solid;} /* nieuws */ #bottom #left_news { width:650px; float:left; } #bottom #right_news { width:350px; float:left; padding:15px 0px 15px 0px; } #bottom .foto_small { border:1px #939393 solid; padding:3px 3px 0px 3px; margin:15px 0px 15px 0px; position:relative; left:55px; float:left; clear:both; background: #262626; } #bottom div.zajawka { padding-bottom:20px; } #bottom .search div.zajawka { padding-bottom:0px; } #bottom div.zajawka a { color:#fcc613; } #bottom .search div.zajawka a { color:#ffffff; } #linki span.nieuws_naglowek { position:relative; top:40px; left:55px; letter-spacing:1px; font-size:0.7em; font-weight:bold; color:#4d4d4d; } #linki ul.nieuws { position:relative; top:50px; border-top:1px #e9e9e9 solid; border-bottom:0px; padding-bottom:70px; overflow:hidden;} #linki ul.nieuws li { width:349px; height:25px; border-bottom:1px #e9e9e9 solid; float:left; list-style:none; } #linki ul.nieuws li a { height:25px; display:block; font-size:0.7em; } #linki ul.nieuws li a span { position: relative; left:58px; top:5px; color:#4d4d4d; } #linki ul.nieuws li a:hover, #linki ul.nieuws li a.active{ background:#feeeb8; } /* Referenties */ #bottom_references { width:1000px; height:193px; float: left; position:relative; border-bottom: 1px #FFFFFF solid; overflow:hidden; background:url(img/bottom.gif) 0 0 no-repeat; } #bottom_references #left { width:455px; float:left; padding-bottom:50px; } #bottom_references .bottom_belka_ref{ width:340px; position:relative; top:19px; left:90px; border: 0px red solid; padding-bottom: 10px; } #bottom_references div.zajawka_wezsza{ width:340px; position:relative; top:30px; left:90px; line-height:16px; font-size:0.7em; font-weight:normal; border: 0px green solid;} #bottom_references #right { width:195px; float:left; padding-top:20px; } #bottom_references .ref_right { width: 180px; padding:5px 15px 20px 0px; float: left; } #bottom_references .ref_right .naglowek{ font-size:0.6em; font-weight:bold; color:#fcc613; } #bottom_references .ref_right .tekst{ position:relative; top: 2px; font-size:0.6em; font-weight:normal; } #bottom_references .arrow_up { position:absolute; right:10px; top:20px; float:right; clear:both; } #bottom_references .arrow_down { position:absolute; right:10px; top:160px; float:right; clear:both; } #linki_ref { width:349px; height:220px; position:relative; float:right; overflow:hidden; background: #FFFFFF; } #linki_ref .arrow_up { position:absolute; right:10px; top:-8px; float:right; clear:both; } #linki_ref .arrow_down { position:absolute; right:10px; top:380px; float:right; clear:both; } #linki_ref span.references { position:relative; top:40px; left:55px; letter-spacing:1px; font-size:0.7em; font-weight:bold; color:#4d4d4d; } #linki_ref ul.references { position:relative; margin:50px 0 10px 0; height:370px; border-top:1px #e9e9e9 solid; border-bottom:0px; } #linki_ref ul.references li { width:349px; height:25px; border-bottom:1px #e9e9e9 solid; float:left; list-style:none; } #linki_ref ul.references li a { height:25px; display:block; font-size:0.7em; } #linki_ref ul.references li a span{ position: relative; left:58px; top:5px; color:#4d4d4d; } #linki_ref ul.references li a:hover, #linki_ref ul.references li a.active{ background:#feeeb8; } /* Contact */ #bottom_contact { width:1000px; height:193px; float: left; position:relative; border-bottom: 1px #FFFFFF solid; overflow:hidden; line-height:1.3em; background:url(img/bottom_index.gif) 0 0 no-repeat; } #bottom_contact #left { width:650px; float:left; } #bottom_contact #right { width:350px; float:left; padding:0px 0px 15px 0px; text-align:left; } #bottom_contact .foto_small { border:1px #939393 solid; padding:3px 3px 0px 3px; margin:15px 0px 45px 0px; position:relative; left:55px; float: left; clear:both; background: #262626; } #bottom_contact a { color:#fcc613; } #bottom_contact div.zajawka { width:520px; position:relative; top:30px; left:90px; padding-bottom:30px; line-height:16px; font-size:0.7em; padding-bottom:50px; } #f-banner-1 { position: absolute; top:20px; left: 90px;} #f-banner-2 { position: absolute; top:20px; left: 130px;} #f-banner-3 { display: block; width: 277px; height: 30px; position: absolute; top:20px; right: 50px;} #f-banner-4 { display: block; width: 277px; height: 30px; position: absolute; top:64px; right: 233px;} #footer-form { position:absolute; top:20px; right:115px; width:218px; height:40px; background: url(img/hci-footer-form.png) no-repeat 0 0; } #footer-form input[type='text'] { width:133px; height:17px; line-height: 17px; font-size:11px; background: none; position: absolute; top:18px; left:4px; border:0px; color: #3e3e39; } #footer-form input[type='submit'] { width:68px; height:21px; background:none; position:absolute; top:16px; left:148px; border:0px; cursor: pointer; text-indent: -1000em; } #europe-logo { display:block; position: absolute; top:25px; left: 210px; font-size:11px; color: #fff; } #europe-logo img { float: left; padding-right: 10px;} #europe-logo .push-me { display: block; padding-top: 5px; width:430px;} #europe-logo:hover span span { text-decoration: underline;} #f-banner-jansnel { display: block; width: 278px; height: 18px; overflow: hidden; position: absolute; top: 69px; left: 90px; } #pdf-certificate { position: absolute; top: 73px; right: 50px; } #pdf-certificate a { display: block; float: left; text-indent: -1000em; height: 12px; } #pdf-certificate.lang-nl a.pdf-1 { background: url(img/footer-download-certificate-nl.png) no-repeat 0 0; width: 130px; } #pdf-certificate.lang-nl a.pdf-2 { background: url(img/footer-download-certificate-nl.png) no-repeat top right; width: 133px; margin-left: 20px; } #pdf-certificate.lang-en a.pdf-1 { background: url(img/footer-download-certificate-en.png) no-repeat 0 0; width: 130px; } #pdf-certificate.lang-en a.pdf-2 { background: url(img/footer-download-certificate-en.png) no-repeat top right; width: 133px; margin-left: 20px; }