/* =============== Styles for display on SCREEN */ @media screen { /* ++++++++++++++++++++ RESET TAGS +++++++++++++++++++++ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } /* tables still need 'cellspacing="0"' in the markup */ caption, th, td { text-align: left; font-weight: normal; } th, td { vertical-align:top; } img { display:block; border:none; } hr { width:95%; height:1px; clear:both; background-color:#c5c5c5; text-align:left; margin: 0 auto 0 0;} /* ++++++++++++++++++++ End RESET TAGS ++++++++++++++++++++ */ body { font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:62.5%; color:#6b5d4a; background-color:#fff; background-repeat:no-repeat; } input, select, textarea { font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; color:#6b5d4a; } /* ++++++++++++++++++++ ELEMENTS ++++++++++++++++++++ */ /* ==================== General */ .text-only { display:block; visibility:hidden; position:absolute; left:-9999em; } .no-show, .print { display:none; } div.hr { width:80%; height:1px; clear:both; background-color:#000; } div.hr hr { display:none; } /* ==================== End General */ /* ==================== Layout */ #all-container { } #header { width:763px; overflow:hidden; } /* extra 8px to accommodate larger submit button */ #content { width:755px; overflow:hidden; margin-bottom:40px; } #sub-nav { float:left; width:185px; padding-top:40px; } #page-content { float:left; width:375px; padding:40px 0 0 15px; } #sidebar { float:left; width:180px; padding-top:10px; } /* see ie.css */ #footer { } /* ==================== Specific for home */ #home a.logo { width:300px; height:45px; margin-top:-10px; text-indent:-9999px; background:url(../at/static/img/logos/adviestalent-logo-home.gif) 0 0 no-repeat; } #home #content { margin-bottom:0; } #home #footer { position:relative; margin-top:-16px; } /* see ie.css and ie7.css */ #home #footer a.credits { position:relative; } #home #about { width:100%; overflow:hidden; margin-bottom:2em; } #home #about h1 { float:left; display:inline; margin:32px 0 0 85px; } /* see ie.css */ #home #about p.intro { float:left; display:inline; width:450px; margin:28px 0 0 30px; background-color:#6b5d4a; line-height:1.35; font-size:1.4em; font-weight:normal; color:#dedfce; } /* see ie.css */ #home #page-content { width:365px; padding:59px 0 0 0; } #home .block { float:left; display:inline; margin-bottom:0; } #home #page-content .block { width:165px; margin-left:15px; } #home #page-content .block h2 { margin:0 0 16px 13px; } #home #page-content .block ul.link-list li { margin-bottom:0.8em; padding-left:13px; } #home #page-content .block ul.link-list li a { margin-left:-13px; font-weight:normal; } #home #page-content .block ul.link-list li a strong { display:block; margin:0; font-size:1em; } #home #sidebar { width:390px; margin-top:27px; padding-top:0; } #home #sidebar .block { width:180px; margin-left:15px; } #home #sidebar .block p { min-height:4.5em; } /* see ie.css */ /* ==================== Body background images per section */ #home { background-image:url(../at/static/img/backgrounds/bg-home.gif); } #adviestalenten { background-image:url(../at/static/img/backgrounds/bg-adviestalenten.gif); } #opdrachtgevers { background-image:url(../at/static/img/backgrounds/bg-opdrachtgevers.gif); } #actueel { background-image:url(../at/static/img/backgrounds/bg-actueel.gif); } #contact { background-image:url(../at/static/img/backgrounds/bg-contact.gif); } /* ==================== Specific for Header */ .functions { width:763px; overflow:hidden; } .functions form { float:right; } /* see ie.css */ .functions form label#label-search { float:left; display:block; width:30px; height:12px; margin:8px 3px 3px 3px; text-indent:-9999px; background:url(../at/static/img/text/header-zoek-label.gif) 0 0 no-repeat; } .functions form input { float:left; width:110px; margin-top:6px; padding:3px 10px 3px 6px; border:0; background:url(../at/static/img/backgrounds/header-search-input.gif) 0 0 no-repeat; font-size:1em; } .functions form input.button { margin:1px 0 0 4px; width:auto; padding:0; background:none 0 0 no-repeat; } .functions form br { clear:left; } a.logo { display:block; width:230px; height:35px; margin-left:85px; padding-bottom:24px; text-indent:-9999px; background:url(../at/static/img/logos/adviestalent-logo.gif) 0 0 no-repeat; } /* main navigation */ #nav ul { float:left; margin:0 0 0 18px; padding-bottom:15px; } #nav ul li { display:inline; padding:0; background:none 0 0 no-repeat; } #nav ul li a { float:left; display:block; height:22px; text-indent:-9999px; } #home #header #nav ul li#nav-home a, #home #header #nav ul li#nav-home a:hover, #adviestalenten #header #nav ul li#nav-advi a, #adviestalenten #header #nav ul li#nav-advi a:hover, #opdrachtgevers #header #nav ul li#nav-opdr a, #opdrachtgevers #header #nav ul li#nav-opdr a:hover, #actueel #header #nav ul li#nav-actu a, #actueel #header #nav ul li#nav-actu a:hover, #contact #header #nav ul li#nav-cont a, #contact #header #nav ul li#nav-cont a:hover { background-position:0 -200px; } #all-container #header #nav ul li a:hover { background-position:0 -100px; } #nav ul li#nav-home a { width:68px; background:url(../at/static/img/text/nav-home.gif) 0 0 no-repeat; } #nav ul li#nav-advi a { width:142px; background:url(../at/static/img/text/nav-adviestalenten.gif) 0 0 no-repeat; } #nav ul li#nav-opdr a { width:152px; background:url(../at/static/img/text/nav-opdrachtgevers.gif) 0 0 no-repeat; } #nav ul li#nav-actu a { width:86px; background:url(../at/static/img/text/nav-actueel.gif) 0 0 no-repeat; } #nav ul li#nav-cont a { width:162px; background:url(../at/static/img/text/nav-ikwilcontact.gif) 0 0 no-repeat; } /* ==================== Specific for Footer */ #footer a.credits { display:block; width:260px; height:20px; margin:0 0 50px 85px; text-indent:-9999px; background:url(./at/static/img/text/credits.gif) 0 0 no-repeat; } #footer a.credits:hover { background-position:0 -100px; } /* ==================== Content and defalt styles */ h1, h2 { margin-bottom:0.9em; margin-right:15px; font-family:Arial; font-size:1.8em; font-weight:bold; color:#ce003a; } h2 { margin-bottom:0.5em; font-size:1.5em; color:#6b5d4a; } p, li, table, label, input, select, textarea { font-size:1.1em; line-height:1.5; } #page-content p, #page-content li { margin-right:15px; } p a, li a { color:#ce003a; text-decoration:none; } p a:hover, li a:hover { background-color:#b5c610; color:#fff; } p.intro { font-weight:bold; } p.caption { color:#ce003a; margin-top:-18px; } p, table, ul, ol, #page-content form, a.streamer { margin-bottom:2em; } ol { margin-left:-20px; } /* see ie.css and ie7.css */ ul li { margin-bottom:0.7em; padding:0 0 0 15px; background:url(../at/static/img/bullets/bullets.gif) 0 7px no-repeat; } ol li { margin-bottom:0.7em;} strong { font-weight:bold; } #sub-nav ul { margin:0 0 0 15px; } #sub-nav ul li, ul.link-list li { margin-bottom:0.2em; padding:0; background:none 0 0 no-repeat; } #sub-nav ul li a, ul.link-list li a, a.action { display:block; padding-left:13px; background:url(../at/static/img/bullets/arrows.gif) 3px 5px no-repeat; font-weight:bold; color:#6b5d4a; } a.action { margin-top:0.5em; font-weight:bold; } #sub-nav ul li a:hover, ul.link-list li a:hover, a.action:hover { background-color:transparent; background-position:3px -395px; color:#94a210; } #sub-nav ul li.current a span.item { border-bottom:2px solid #ce003a; color:#ce003a; } #sub-nav ul li.current a:hover { background-position:3px 5px; } /* important links - attention is a sub-class of link-list */ #page-content ul.attention li a { padding:0 0 10px 30px; background-position:0 -1000px; } #page-content ul.attention li a:hover { background-color:transparent; background-position:0 -1200px; } #page-content ul.attention li .date { font-size:9px; font-color:#cbcbcb; } img { margin-bottom:10px; } img.left-img { float:left; display:inline; margin:10px 10px 10px 0; } img.right-img { float:right; display:inline; margin:10px 15px 10px 10px; } a.streamer { display:block; width:375px; margin-left:-15px; text-indent:-9999px; } a.streamer:hover { background-position:-375px 0; } /* see also general definitions above */ table { width:365px; margin-right:5px; } /* see ie.css and ie7.css */ table caption { margin-bottom:10px; padding-bottom:5px; background:#b5c610 url(../at/static/img/backgrounds/table-caption-mask.gif) 100% 100% no-repeat; } table caption, table th { font-weight:bold; } table th, table td { padding:2px 0 1px 0; border-bottom:1px solid #b5c610; border-right:10px solid #fff; } /* see also general definitions above */ #page-content form { width:360px; padding-top:15px; background:#dedfce; } #page-content fieldset { margin:0 0 15px 20px; } #page-content fieldset.buttons { margin:0; } #page-content label { display:block; margin-bottom:2px; } #page-content input, #page-content select, #page-content textarea { margin:0 10px 5px 0; padding:2px; border:1px solid #84715a; } #page-content input.small { width:54px; } #page-content input.medium { width:109px; } #page-content input.large { width:239px; } #page-content input.x-large { width:309px; } #page-content select.small { width:60px; } #page-content select.medium { width:115px; } #page-content select.large { width:245px; } #page-content select.x-large { width:315px; } #page-content textarea.x-large { width:309px; } #page-content br { clear:left; } #page-content input.boolean { float:left; margin-top:2px; } /* see ie.css and ie7.css */ #page-content input.boolean, #page-content input.button { padding:0; border:0; } #page-content input.button { width:100%; margin:0; padding:8px 10px 14px 40px; background:url(../at/static/img/buttons/form-submit.gif) 0 0 no-repeat; font-weight:bold; text-align:left; } /* for hover styles see js-enabled.css */ /* ==================== Specific for Sidebar */ /* light grey */ .block { margin-bottom:5em; } .block h2 { margin:0; } .block img { margin:0; } .block p { margin:0 12px 1em 12px; } .block strong { margin:0 12px; font-size:1.1em; line-height:1.5; } .block p strong { margin:0; } .block a.action { padding:7px 12px 9px 24px; background-position:14px 10px; font-size:1.1em; font-weight:bold; text-decoration:none; } .block a.action:hover { background-color:#b5c610; background-position:14px -190px; color:#fff; } .block a.mailto { display:block; margin-bottom:1em; padding:0 12px; line-height:1.5; font-size:1.1em; font-weight:bold; text-decoration:none; } .style1 { background-color:#dedfce; } .style1 p, .style1 a.action { color:#5a5142; } /* dark grey */ .style2 { background-color:#6e604e; } .style2 p { color:#dedfce; } .style2 a.action { background-position:14px -790px; color:#dedfce; } /* pink */ .style3 { background-color:#ce003a; } .style3 p { color:#fff; } .style3 a.action { background-position:14px -590px; color:#fff; } .style3 label { padding:12px; color:#fff; } .style3 form input { width:145px; padding:5px 10px 5px 6px; margin:0 9px 4px 9px; border:0; background:url(../at/static/img/backgrounds/sollicitatie-input.gif) 0 0 no-repeat; font-size:1.1em; color:#fff; } .style3 form input.button { width:180px; margin:0; padding:6px 10px 8px 30px; background:url(../at/static/img/buttons/block-style3-submit.gif) 0 0 no-repeat; font-weight:bold; text-align:left; } .style3 a { color:#fff; } .style3 a:hover { background-color:#6e604e; color:#fff; } /* for hover styles see js-enabled.css */ /* green */ .style4 { background-color:#b5c610; } .style4 a.action { background-position:14px -590px; color:#fff; } .style4 p { color:#5a5142; } .style4 strong { color:#5a5142; } .style4 a.mailto { color:#5a5142; } .style4 a.mailto:hover { background-color:#6e604e; color:#fff; } } /* =============== End of Styles for display on SCREEN */ /* =============== Styles for PRINT */ @media print { *{ font-size:100%; color:#000; text-decoration:none; font-family:Arial, Helvetica, sans-serif; } html, body { background:#fff; } #nav, #sub-nav, .functions, a.logo, a.action, p.text-only, a.text-only, div.photo-deco, fieldset.buttons, #sidebar .block form, #home h1 img { display:none; } #content { margin-bottom:30px; } #home #sidebar, #home a.credits { clear:left; } #home .block { float:left; margin-right:40px; } #home #sidebar .block { margin-bottom:40px; } img.print { display:block; width:227px; height:33px; margin-bottom:40px; } #home img.print { width:298px; height:43px; } #page-content img { padding:0 !important; } h1 { font-size:20pt; } h2 { font-size: 12pt; padding-top:16px; } ul, ol, form { padding-bottom:10px; } table { margin-bottom:20px; } p, li, table, label, input, select, textarea, strong, a.mailto { font-size:10pt; line-height:1.4; } p.intro { font-weight:bold; } form label, a.mailto { display:block; } table { } table caption, table th { text-align:left; font-weight:bold; } table td { padding:0 2px; border:1px solid black; } a.streamer { font-size:14px; font-weight:bold; } .block { width:180px; } a.credits { display:block; padding-top:10px; border-top:1px solid #666; font-size:9pt; color:#666; } } /*toevoeging voor overzicht talenten*/ .mainPic { width:140px; height:105px;} .fotoDiv { float:left; height:25px; bottom:10px; left:0px; display:block; position:absolute; background:#ffffff; padding:5px;} .talentenDiv { float:left; display:block; position:relative; margin:5px; } .visual { float:left;} .visual-book {width:20px; height:20px; background:url('http://www.adviestalent.nl/AT/book.gif') no-repeat top left; float:left; margin-left:5px; padding:0px;} .visual-movie {width:20px; height:20px; background:url('http://www.adviestalent.nl/AT/movie.gif') no-repeat top left; float:left;} /* toevoeging voor het referentieoverzicht */ .refPic {width:140px;} .reffotoDiv {float:left; height:25px; bottom:0px; left:0px; display:block; position:absolute; background:#ffffff; padding:5px;} .referentieDiv { float:left; display:block; position:relative; margin:5px; }