/* ------------------------------------------------- */ /* @ FONTFACE /* ------------------------------------------------- */ @font-face { font-family:'leo'; src:url("fonts/leo-snow-white.otf") } /* ------------------------------------------------- */ /* COMMON STYLES /* ------------------------------------------------- */ body { font:75%/112.5% Helvetica, Arial, sans-serif; color:#2E3C44; background:#2E3C44 url(../img/bg.jpg) no-repeat top center; } h1 { font:1.5em/2em Helvetica, Arial, sans-serif; font-weight:bold; color:#FFF; } h2 { font:1.3em/1.5em Helvetica, Arial, sans-serif; font-weight:bold; color:#62a4d3; } h3 { font:1.15em/1.2em Helvetica, Arial, sans-serif; font-weight:bold; color:#2e3c44; } h4 { font:1.15em/1.5em Helvetica, Arial, sans-serif; font-weight:normal; color:#2e3c44; } h5 { font:0.8em/1.5em Helvetica, Arial, sans-serif; font-weight:normal; color:#2e3c44; } p { margin:0 0 1.5em 0; padding:0 0 0 0; } a { color:#4bacde; text-decoration:underline; } a:hover { color:#2e3c44; text-decoration:none; } form ul { list-style:none !important; margin:0 !important; padding:0 !important; } form ul li { list-style:none !important; margin:0 !important; padding:0 !important; background:none !important; } input:focus { outline:none; } /* ------------------------------------------------- */ /* LAY-OUT RULES /* ------------------------------------------------- */ #inner-wrapper { position:relative; padding-top:30px; width:890px; margin:0 auto; } #header { position:relative; width:890px; overflow:hidden; margin:0 auto; } #footer { background:#4BACDE url(../img/bg-footer.png) repeat-x top left; } body.content #inner-wrapper { width:100%; margin:0; position:relative; } body.content #content-wrapper { float:left; width:100%; padding-top:41px; overflow:hidden; background:transparent url(../img/bg-content-white.gif) repeat-x; } body.content #content-wrapper div.wrapper { position:relative; width:890px; margin:0 auto 60px auto; overflow:hidden; } /* body.content #menu-wrapper { position:relative; z-index:10; } */ /* ------------------------------------------------- */ /* HEADER & MENU RULES /* ------------------------------------------------- */ #header img#logo { float:left; display:block; } div#logo-chat { position: absolute; top: 0px; left: 50%; margin-left: 110px; width: 129px; height: 118px; z-index: 1; display: block; } #header a#btn-menu { float:right; display:block; width:170px; height:42px; margin-top:25px; background:url(../img/btn-menu.png) no-repeat 0 0; } #header a#btn-menu span { display:none; } #header a#btn-menu:hover { background-position:0px -42px; } #header a#btn-menu.open { background-position:0px -84px; } #header #menu-wrapper { float:left; width:890px; overflow:hidden; font:1.5em/3em 'leo', 'Trebuchet MS', Arial, sans-serif; color:#6F7B81; display:none; } #header #menu-wrapper #menu { float:left; width:870px; overflow:hidden; background:url(../img/menu-top.png) no-repeat 0 0; padding:45px 10px 0px 10px; } #header #menu-wrapper #menu h1 { font:1.2em/1.2em 'leo', 'Trebuchet MS', Arial, sans-serif; color:#4BACDE; margin-bottom:10px; padding-left:10px; } #header #menu-wrapper #menu ul { float:left; list-style:none; padding:0; width:520px; margin:0 20px 0 0; } #header #menu-wrapper #menu ul li { float:left; list-style:none; width:240px; font:1em/1em 'leo', 'Trebuchet MS', Arial, sans-serif; border-bottom:1px solid #C0C4C7; padding:10px 10px 9px 10px; } #header #menu-wrapper #menu ul li.last { border-bottom:none; padding-bottom:0; } #header #menu-wrapper #menu ul li a { color:#6f7b81; text-decoration:none; } #header #menu-wrapper #menu ul li a:hover { color:#4BACDE; } #header #menu-wrapper #menu ul#functional-menu { float:left; list-style:none; padding:0; width:320px; margin:0; } #header #menu-wrapper #menu ul#functional-menu li { float:left; width:300px; border-color:#88c8e9; } #header #menu-wrapper #menu ul#functional-menu li a { color:#FFF; text-decoration:none; } #header #menu-wrapper #menu ul#functional-menu li a:hover { color:#6f7b81; } #header #menu-wrapper #menu-bottom { float:left; width:890px; height:20px; overflow:hidden; background:url(../img/menu-bottom.png) no-repeat 0 0; } /* --------------------------------------------------------- */ /* PORTAL RULES /* --------------------------------------------------------- */ ul#portal { float:left; width:890px; overflow:hidden; margin:40px 0 30px 0; } ul#portal li { float:left; position:relative; display:block; width:170px; height:140px; overflow:hidden; margin-right:10px; margin-bottom:10px; } ul#portal li.over:hover { background-position:0px -140px !important; } ul#portal li.last { margin-right:0; } ul#portal li a { display:block; position:absolute; left:0; bottom:-60px; width:150px; height:60px; font:1.3em/60px 'leo', 'Trebuchet MS', Arial, sans-serif; color:#FFF; text-decoration:none; background:url(../img/bg-portal-menu-a.png); padding:0 10px; } ul#portal li#portal-0 { background:url(../img/btn-studiefinanciering.png) no-repeat; } ul#portal li#portal-1 { background:url(../img/btn-huisvesting.png) no-repeat 0 0; } ul#portal li#portal-2 { background:url(../img/btn-laptopdienst.png) no-repeat 0 0; } ul#portal li#portal-3 { background:url(../img/btn-zelfzorg.png) no-repeat 0 0; } ul#portal li#portal-4 { background:url(../img/btn-studentenjobs.png) no-repeat 0 0; } ul#portal li#search-pane { width:530px; background:url(../img/bg-searchpane.png) no-repeat 0 0; } ul#portal li#portal-5 { background:url(../img/btn-mobiliteit.png) no-repeat 0 0; } ul#portal li#portal-6 { background:url(../img/btn-sport.png) no-repeat 0 0; } ul#portal li#portal-7 { background:url(../img/btn-cultuur.png) no-repeat 0 0; } ul#portal li#portal-8 { background:url(../img/btn-studentenstad.png) no-repeat 0 0; } ul#portal li#portal-9 { background:url(../img/btn-participatie.png) no-repeat 0 0; } ul#portal li#portal-10 { background:url(../img/btn-speciaal-statuut.png) no-repeat 0 0; } ul#portal li#portal-11 { background:url(../img/btn-howest.png) no-repeat 0 0; } /* SEARCH PANE RULES --------------------------------------- */ li#search-pane form { padding:28px 20px 25px 20px; } li#search-pane form h1 { font:2.2em/1em 'leo', 'Trebuchet MS', Arial, sans-serif; margin-bottom:15px; } li#search-pane form p { margin-bottom:0px; } li#search-pane form input { float:left; width:294px; height:34px; padding:8px 8px 0 8px; background:transparent url(../img/bg-searchpane-input.png) no-repeat; border:none; font:1.8em/1em 'leo', 'Trebuchet MS', Arial, sans-serif; } li#search-pane form input:focus { outline:none; } li#search-pane form button { float:right; display:block; border:none; width:150px; height:42px; background:transparent url(../img/btn-searchpane-zoeken.png) no-repeat; cursor:pointer; } li#search-pane form button span { display:none; } /* --------------------------------------------------------- */ /* CONTENT RULES /* --------------------------------------------------------- */ #content-wrapper h1.title { float:left; width:525px; height:60px; margin-left:340px; display:inline; font:2em/64px 'leo', 'Trebuchet MS', Arial, sans-serif; background:url(../img/bg-titel.png) no-repeat; padding-left:25px; overflow:hidden; } #content-wrapper #sidebar { float:left; position:relative; width:340px; } #content-wrapper #sidebar #sub-menu { position:absolute; top:0px; right:0px; background:url(../img/bg-subnav.png) no-repeat left bottom; list-style:none; padding:0; margin:0; z-index:10; } #content-wrapper #sidebar #sub-menu li { border-bottom:1px solid #2E3C44; line-height:32px; padding:0 10px; } #content-wrapper #sidebar #sub-menu li.last { border-bottom:none !important; } #content-wrapper #sidebar #sub-menu li a { color:#FFF; font:1.15em/1em 'leo', 'Trebuchet MS', Arial, sans-serif; text-decoration:none; white-space:nowrap; } #content-wrapper #sidebar #sub-menu li a:hover { color:#62a4d3; } #content-wrapper #sidebar #sub-menu li a.current { color:#62a4d3; } #content-wrapper #content { float:left; width:500px; padding:30px 25px; } #content-wrapper #content p { line-height:1.6em; } #content-wrapper #content em { font-style: italic; } #content-wrapper #content ul { line-height:1.6em; margin:0 0 1.5em 1.5em; list-style:none; } #content-wrapper #content ul li { background:url(../img/bullet.png) no-repeat 0 5px; padding-left:15px; } #content-wrapper #content img { margin-left:10px; } #content-wrapper #content table { background:#EAEBEE; margin-bottom:1.8em; } #content-wrapper #content table th { background:#d1d2d4; padding:10px 5px !important; } #content-wrapper #content table td, #content-wrapper #content table th { padding:5px; border-bottom:1px solid #d1d2d4; font-size:0.9em; vertical-align:middle; line-height:17px; } #content-wrapper #content table td p { margin:0; padding:0; } ul.thumbnails { margin:0 !important; padding:0 !important; list-style:none; } ul.thumbnails li { float:left; position:relative; width:92px; height:92px; margin:0 10px 10px 0; padding:0 !important; background:none !important; } ul.thumbnails li span.msk { position:absolute; top:0; left:0; width:92px; height:92px; display:block; background:url(../img/msk-thumbs.png) no-repeat; } ul.thumbnails li.last { margin:0 0 10px 0; } ul.thumbnails li img { margin-left:0 !important; } #content-wrapper fieldset { margin: 0 0 26px 0; } #content-wrapper legend { font:1.3em/1.5em Helvetica, Arial, sans-serif; font-weight:bold; color:#62a4d3; } #content-wrapper div.input { padding: 6px 0 6px 0; } #content-wrapper label { float:left; width: 120px; padding-top: 2px; } #content-wrapper label.error { float:right; width: 130px; padding-left: 0; color: #CC0000; } #content-wrapper fieldset p { margin: 0; } div.zoeken { } div.zoeken form { float:left; width:500px; margin-bottom:20px; } div.zoeken form input { float:left; margin-right:20px; background:transparent url(../img/bg-search-page-input.png) no-repeat; border:none; width:387px; height:18px; padding:11px 0 5px 5px; margin:0; font:1.2em/1em Helvetica, Arial, sans-serif; color:#849197; } div.zoeken form button { float:right; border:none; background:transparent url(../img/bg-search-page-btn.png) no-repeat; width:88px; height:32px; } div.zoeken form button span { display:none; } div.zoeken #results { clear:both; width:500px; } div.zoeken div.result { border-bottom:1px solid #DDD; padding-bottom:10px; margin-bottom:10px; } div.zoeken div.result h4 a { text-decoration:none; } div.zoeken div.result p { margin-bottom:0; } div.zoeken div.result p.extra-info { font-size:0.9em; color:#2E3C44; } div.zoeken div.result p.extra-info a { color:#2E3C44; } /* --------------------------------------------------------- */ /* KALENDER/NIEUWS/TIME MENU /* --------------------------------------------------------- */ #time-menu { border-bottom:1px solid #d1d2d4; margin-top:35px; } #time-menu li { border-top:1px solid #d1d2d4; line-height:30px; background:url(../img/bg-time-menu-li.png) no-repeat right 0px; } #time-menu li a { display:block; padding:0 10px; text-decoration:none; color:#2e3c44; font-weight:bold; font-size:1.2em; } #time-menu li.active { background-position:right -60px; } #time-menu li.no-entries { background-position:right -30px; } #time-menu li.no-entries a { color:#b4bcc1; } #time-menu li ul li { background-color:#FFF; background-image:none !important; } #time-menu li ul li a { color:#626f76; font-weight:normal; font-size:1em; } #time-menu li ul li a.current { font-weight:bold; } #time-menu li ul li a span { color:#4bacde; font-weight:bold; } div.kalender-content h4 { margin-bottom:1em; font-size:0.9em; } div.kalender-content h4 span { font-weight:bold; color:#4BACDE; } div.kalender-content h2 { margin-bottom:1em; } /* --------------------------------------------------------- */ /* FOOTER STYLES /* --------------------------------------------------------- */ #footer-content { position:relative; width:890px; margin:0 auto; padding-top:35px; } #footer-content p.colofoon { float:left; width:890px; text-align:center; margin-top:35px; color:#1f292e; font-size:1em; line-height:1.4em; } #footer-content p.colofoon a { color:#1f292e; text-decoration:none; } #footer-content p.colofoon a:hover { text-decoration:underline; } #footer-content #nieuws { float:left; display:block; position:relative; width:500px; height:120px; background-color:#FFF; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; margin-right:10px; padding:10px 15px; } #footer-content #nieuwsbrief, #footer-content #online-aanvraag { float:left; width:150px; height:110px; background-color:#FFF; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; margin-right:10px; padding:15px 10px; } #footer-content #stuvo { float:left; width:170px; height:109px; background-color:#FFF; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; padding-top:31px; } /* NIEUWS PANE RULES --------------------------------------- */ #nieuws h2 { float:left; font:2em/5em 'leo', 'Trebuchet MS', Arial, sans-serif; width:169px; color:#62a4d3; border-right:1px solid #C0C4C7; } #nieuws a#nieuws-link { font-size:0.9em; color:#2e3c44; position:absolute; left:15px; bottom:26px; } #nieuws a#kalender-link { font-size:0.9em; color:#2e3c44; position:absolute; left:15px; bottom:12px; } #nieuws a.nav { position:absolute; top:50%; left:0; margin-top:-13px; width:27px; height:26px; background:url(../img/btn-scrollable.png) no-repeat 0 0; cursor:pointer; } #nieuws a.next { left:138px; } #nieuws a.next:hover { background-position:0 -26px; } #nieuws a.prev { left:480px; background-position:-27px 0px; } #nieuws a.prev:hover { background-position:-27px -26px; } #nieuws a.disabled { opacity:0.2; filter:alpha(opacity=20); } #nieuws a.next.disabled:hover { background-position:0 0; } #nieuws a.prev.disabled:hover { background-position:-27px 0; } #nieuws a.nav span { display:none; } #nieuws div.scrollable { position:relative; width:275px; height:120px; border-right:1px solid #C0C4C7; overflow:hidden; } #nieuws div.scrollable div.items { position:absolute; width:20000em; top:0; left:0; } #nieuws div.scrollable div.items div.nieuws-item { float:left; padding:10px 10px 0 10px; width:255px; height:110px; overflow:hidden; } #nieuws div.scrollable div.items div.nieuws-item h5 { color:#1f292e; margin-bottom:5px; } #nieuws div.scrollable div.items div.nieuws-item h3 { color:#62a4d3; margin-bottom:5px; } #nieuws div.scrollable div.items div.nieuws-item p { line-height:1.4em; } #nieuws div.scrollable div.items div.nieuws-item p a { text-decoration:none; color:#2e3c44; } /* NIEUWSBRIEF PANE RULES ---------------------------------- */ #nieuwsbrief { margin-bottom: 12px; } #nieuwsbrief h2 { font:1.7em/1.1em 'leo', 'Trebuchet MS', Arial, sans-serif; margin-bottom:7px; } #nieuwsbrief p { font-size:0.9em; margin-bottom:6px; } #mailinglist p input { background:transparent url(../img/bg-nieuwsbrief-input.png) no-repeat; border:none; width:150px; height:18px; padding:11px 0 5px 5px; margin:0; font:1.2em/1em Helvetica, Arial, sans-serif; color:#849197; } #mailinglist p input:focus { outline:none; } #mailinglist p button { float:right; margin-top:0px; width:27px; height:26px; background:url(../img/btn-scrollable.png) no-repeat -27px 0; border:none; } #mailinglist p button span { display:none; } #mailinglist div.error-message { float:left; font-size:0.9em; font-weight:bold; width:100px; } /* ONLINE AANVRAAG PANE RULES ---------------------------------- */ #online-aanvraag h2 { font:1.7em/1.1em 'leo', 'Trebuchet MS', Arial, sans-serif; margin-bottom:20px; } #online-aanvraag p { font-size:0.9em; margin-bottom:20px; } #online-aanvraag p button { float:right; margin-top:10px; width:27px; height:26px; background:url(../img/btn-scrollable.png) no-repeat -27px 0; border:none; } #online-aanvraag p button span { display:none; } /* NIEUWSBRIEF PANE RULES ---------------------------------- */ #stuvo img { border:none; } /* FOOTER SEARCH PANE RULES -------------------------------- */ #search { float:left; position:relative; width:340px; overflow:hidden; } #search form { float:left; width:340px; } #search form p { padding:0; margin:0; } #search form input { float:left; border:none; background:transparent url(../img/bg-footer-search-input.png) no-repeat; width:242px; height:21px; padding:11px 0 5px 5px; font:1.2em/1em Helvetica, Arial, sans-serif; color:#849197; } #search form button { float:right; border:none; background:transparent url(../img/bg-footer-search-button.png) no-repeat; width:88px; height:32px; } #search form button span { display:none; } #search p.content-colofoon { float:left; line-height:1.4em; color:#1f292e; margin-top:15px; } #search p.content-colofoon a { color:#1f292e; text-decoration:none; } #footer-menu { float:left; width:340px; } /* STUDENTENVOORZIENING RULES ------------------------------ */ #footer-menu { float:left; width:340px; margin-left:20px; margin-right:10px; overflow:hidden; } #footer-menu h3 { font:1.5em/1.7em 'leo', 'Trebuchet MS', Arial, sans-serif; color:#FFF; border-bottom:1px solid #428aaf; padding-left:20px; } #footer-menu ul { list-style:none; padding:0; margin:0; } #footer-menu ul li { float:left; list-style:none; padding:0; margin:0; width:150px; border-bottom:1px solid #428aaf; line-height:29px; padding-left:20px; } #footer-menu ul li a { color:#2e3c44; font:1.15em/1em 'leo', 'Trebuchet MS', Arial, sans-serif; text-decoration:none; } #footer-menu ul li a:hover { color:#FFF; } #logo-howest { float:left; } /* --------------------------------------------------------- */ /* STICKY FOOTER CODE /* by Steve Hatcher /* http://stever.ca /* http://www.cssstickyfooter.com /* --------------------------------------------------------- */ html, body, #wrapper {height: 100%;} body > #wrapper { height:auto; min-height:100%; } #inner-wrapper { padding-bottom:280px; } /* must be same height as the footer */ #footer { position:relative; margin-top:-280px; height:280px; clear:both; } /* CLEAR FIX by Jeff Starr */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */