/* "Yet Another Multicolumn Layout" v4.0.2 (c) by Dirk Jesse (http://www.yaml.de) * $Revision: 743 $ $Date: 2012-10-23 23:01:14 +0200 (Di, 23 Okt 2012) $ */ @media all{*{margin:0;padding:0}option{padding-left:.4em}select{padding:1px}* html body *{overflow:visible}body{font-size:100%;background:#fff;color:#000;text-align:left}div:target{outline:0 none}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none}[hidden]{display:none}input[type="search"]{-webkit-appearance:textfield}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset,img{border:0 solid}ul,ol,dl{margin:0 0 1em 1em}li{line-height:1.5em;margin-left:.8em}dt{font-weight:bold}dd{margin:0 0 1em .8em}blockquote{margin:0 0 1em .8em}q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.ym-clearfix:before{content:"";display:table}.ym-clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;visibility:hidden}.ym-contain-dt{display:table;width:100%;overflow:visible}.ym-contain-oh{overflow:hidden;width:100%;display:block}.ym-contain-fl{float:left;width:100%}.ym-skip,.ym-hideme,.ym-print{position:absolute;top:-32768px;left:-32768px}.ym-skip:focus,.ym-skip:active{position:static;top:0;left:0}.ym-skiplinks{position:absolute;top:0;left:-32768px;z-index:1000;width:100%;margin:0;padding:0;list-style-type:none}.ym-skiplinks .ym-skip:focus,.ym-skiplinks .ym-skip:active{left:32768px;outline:0 none;position:absolute;width:100%}}@media screen,projection{.ym-column{display:table;width:100%}.ym-col1{float:left;width:20%}.ym-col2{float:right;width:20%}.ym-col3{width:auto;margin:0 20%}.ym-cbox{padding:0 10px}.ym-cbox-left{padding:0 10px 0 0}.ym-cbox-right{padding:0 0 0 10px}.ym-ie-clearing{display:none}.ym-grid{display:table;width:100%;table-layout:fixed;list-style-type:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0}.ym-gl{float:left;margin:0}.ym-gr{float:right;margin:0 0 0 -5px}.ym-g20{width:20%}.ym-g40{width:40%}.ym-g60{width:60%}.ym-g80{width:80%}.ym-g25{width:25%}.ym-g33{width:33.333%}.ym-g50{width:50%}.ym-g66{width:66.666%}.ym-g75{width:75%}.ym-g38{width:38.2%}.ym-g62{width:61.8%}.ym-gbox{padding:0 10px}.ym-gbox-left{padding:0 10px 0 0}.ym-gbox-right{padding:0 0 0 10px}.ym-equalize{overflow:hidden}.ym-equalize>[class*="ym-g"]{display:table-cell;float:none;margin:0;vertical-align:top}.ym-equalize>[class*="ym-g"]>[class*="ym-gbox"]{padding-bottom:10000px;margin-bottom:-10000px}}@media all{.ym-form,.ym-form fieldset{overflow:hidden}.ym-form div{position:relative}.ym-form label,.ym-form .ym-message{position:relative;display:block}.ym-form .ym-fbox-check label{display:inline}.ym-form input,.ym-form textarea{cursor:text}.ym-form input[type="checkbox"],.ym-form input[type="radio"],.ym-form select,.ym-form label{cursor:pointer}.ym-form textarea{overflow:auto}.ym-form input[type=hidden]{display:none!important}.ym-form .ym-fbox-text:before,.ym-form .ym-fbox-select:before,.ym-form .ym-fbox-check:before,.ym-form .ym-fbox-button:before{content:"";display:table}.ym-form .ym-fbox-text:after,.ym-form .ym-fbox-select:after,.ym-form .ym-fbox-check:after,.ym-form .ym-fbox-button:after{clear:both;content:".";display:block;font-size:0;height:0;visibility:hidden}.ym-form select,.ym-form input,.ym-form textarea{display:block;position:relative;width:58.5%}.ym-form .ym-fbox-check input{display:inline;width:auto}.ym-form .ym-fbox-button input{display:inline;overflow:visible;width:auto}.ym-form .ym-fbox-check input:focus,.ym-form .ym-fbox-check input:hover,.ym-form .ym-fbox-check input:active{border:0 none}.ym-full .ym-fbox-select select,.ym-full .ym-fbox-text input,.ym-full .ym-fbox-text textarea{width:94.2%;margin-right:-3px}.ym-columnar .ym-fbox-text label,.ym-columnar .ym-fbox-select label{display:inline;float:left;width:30%}.ym-columnar .ym-fbox-check{position:relative}.ym-label{display:block}.ym-columnar .ym-fbox-check .ym-label{position:absolute;top:0}.ym-columnar .ym-fbox-check input,.ym-columnar .ym-error .ym-message{margin-left:30%}.ym-columnar fieldset .ym-fbox-button,fieldset.ym-columnar .ym-fbox-button{padding-left:30%}.ym-columnar .ym-fbox-select select,.ym-columnar .ym-fbox-text input,.ym-columnar .ym-fbox-text textarea{float:left;width:67.2%;margin-right:-3px}.ym-fbox-select select{width:60%}.ym-full .ym-fbox-select select{width:94.8%}.ym-columnar .ym-fbox-select select{width:68.8%}}@media print{.ym-grid>.ym-gl,.ym-grid>.ym-gr{overflow:visible;display:table}.ym-print{position:static;left:0}.ym-noprint{display:none!important}} /* "Yet Another Multicolumn Layout" v4.0.2 (c) by Dirk Jesse (http://www.yaml.de) * $Revision: 743 $ $Date: 2012-10-23 23:01:14 +0200 (Di, 23 Okt 2012) $ */ @media all{body{o\verflow:visible}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{zoom:1}audio,canvas,video{*display:inline;*zoom:1}img{-ms-interpolation-mode:bicubic;zoom:1}* html iframe,* html frame{overflow:auto}* html input,* html frameset{overflow:hidden}* html textarea{overflow:scroll;overflow-x:hidden}body,#main{position:relative}* html body{position:static}.ym-clearfix{zoom:1}* html .ym-col1,* html .ym-col2,* html .ym-col3{position:relative}body{height:1%}.ym-wrapper,.ym-wbox,#header,#nav,#main,#footer{zoom:1}* html .ym-wrapper,* html .ym-wbox{height:1%;hei\ght:auto}* html #header,* html #nav,* html #main,* html #footer{width:100%;wid\th:auto}.ym-gbox,.ym-gbox-left,.ym-gbox-right{height:1%}* html ul,* html ol,* html dl{position:relative}body ol li{display:list-item}* html .flexible{zoom:1}button,input{*overflow:visible}table button,table input{*overflow:auto}fieldset,legend{position:relative}.ym-form,.ym-form div,.ym-form div *{zoom:1}html .ym-ie-clearing{position:static;display:block;\clear:both;width:100%;line-height:0;font-size:0;margin:-2px 0 -1em 1px}* html .ym-ie-clearing{margin:-2px 0 -1em 0}.ym-cbox{margin-bottom:-2px}html{margin-right:1px}* html{margin-right:0}.ym-col3{position:relative}}@media screen,projection{.ym-col1,.ym-col2{display:inline}.ym-grid{overflow:hidden;display:block}* html .ym-grid{overflow:visible}.ym-gl,.ym-gr{display:inline}.ym-equalize .ym-gl{float:left;display:inline;padding-bottom:32767px;margin-bottom:-32767px}.ym-equalize .ym-gr{float:right;margin-left:-5px;display:inline;padding-bottom:32767px;margin-bottom:-32767px}.no-ie-padding .ym-gl,.no-ie-padding .ym-gr{padding-bottom:0;margin-bottom:0}* html .ym-cbox-left,* html .ym-cbox-right,* html .ym-cbox{word-wrap:break-word}* html .ym-gbox,* html .ym-gbox-left,* html .ym-gbox-right{word-wrap:break-word;o\verflow:hidden}}@media print{.ym-gbox,.ym-gbox-left,.ym-gbox-right,.ym-col3{height:1%}} /** * "Yet Another Multicolumn Layout" - YAML CSS Framework * * default screen stylesheet - PAGE-layout type layout * * @copyright Copyright 2005-2012, Dirk Jesse * @license CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/), * YAML-CDL (http://www.yaml.de/license.html) * @link http://www.yaml.de * @package yaml * @version v4.0.2 * @revision $Revision: 743 $ * @lastmodified $Date: 2012-10-23 23:01:14 +0200 (Di, 23 Okt 2012) $ */ @media screen { /* force vertical scrollbar */ body { overflow-y: scroll; } /* Layout Module Configuration & fallback for unsupported media queries */ .ym-wrapper { min-width: 760px; max-width: 80em; margin: 0 auto; } .ym-wbox { padding: 10px; } /* Basic Element Styling */ header { background: #444; color: #ccc; padding: 1.5em; } header h1 { background: transparent; color: #fff; } nav { background: #222222; } #main { } footer { margin: 1.5em 0 0 0; background: #eee; color: #444; padding: 1.5em; } footer p { margin: 0; } /* Column-Set Configuration: 1-3 (sidebar right) */ .ym-column { display:block; overflow:hidden; padding-right: 340px; width:auto; } .ym-col1 { /* content */ float:left; width: 100%; } .ym-col3 { /* sidebar */ position:relative; float:left; width: 340px; margin-left:0; margin-right:-340px; } .ym-col1 .ym-cbox { padding: 0 0.75em 0 1.5em; } .ym-col3 .ym-cbox { padding: 0 20px 0 12px; } .ym-gbox { padding: 0 1.5em 0 0; } /* skip links styling */ .ym-skiplinks a.ym-skip:focus, .ym-skiplinks a.ym-skip:active { color:#fff; background:#333; border-bottom:1px #000 solid; padding:10px 0; text-align: center; text-decoration:none; } } /* reset fallback values in modern browsers */ @media screen and ( min-width: 0px ) { .ym-wrapper { min-width: 0px; } } @media screen and ( max-width: 740px ) { /* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-1 */ .linearize-level-1, .linearize-level-1 > [class*="ym-g"], .linearize-level-1 > [class*="ym-col"] { display: block; float: none; padding: 0; margin: 0; width: 100% !important; } .linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"], .linearize-level-1 > [class*="ym-col"] > [class*="ym-cbox"] { overflow: hidden; /* optional for containing floats */ padding: 0; margin: 0; } nav .ym-hlist ul { padding-right: 10px; } .ym-searchform { display:block; float: none; width: auto; padding-right: 10px; text-align: right; } .ym-searchform input[type="search"] { width: 14%; } } @media screen and ( max-width: 480px) { .ym-wbox { padding: 0; } header { padding: 0.75em 10px; } header h1 { font-size: 1.5em; line-height: 1em; margin: 0; } footer, #main, .ym-searchform, nav .ym-hlist ul { padding-left: 10px; padding-right: 10px; } /* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-2 */ .linearize-level-2, .linearize-level-2 > [class*="ym-g"], .linearize-level-2 > [class*="ym-col"] { display: block; float: none; padding: 0; margin: 0; width: 100% !important; } .linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"], .linearize-level-2 > [class*="ym-col"] > [class*="ym-cbox"] { overflow: hidden; /* optional for containing floats */ padding: 0; margin: 0; } .ym-searchform, nav .ym-hlist ul, nav .ym-hlist li { display:block; float: none; width: auto; text-align: left; } .ym-searchform input[type="search"] { width: 75%; } } @font-face { font-family: 'SanukRegular'; src: url('sanukweb.eot'); src: local('?'), url("../../files/font/sanukweb.woff") format("woff"), /* Modern Browsers */ url("../../files/font/sanukcomp.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: normal; font-style: normal; } @font-face { font-family: 'SanukBold'; src: url('sanukweb-bold.eot'); src: local('?'), url("../../files/font/sanukweb-bold.woff") format("woff"), url("../../files/font/sanukcomp-bold.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'SanukBoldItalic'; src: url('sanukweb-bolditalic.eot'); src: local('?'), url("../../files/font/sanukweb-bolditalic.woff") format("woff"), url("../../files/font/sanukcomp-bolditalic.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'SanukItalic'; src: url('sanukweb-italic.eot'); src: local('?'), url("../../files/font/sanukweb-italic.woff") format("woff"), url("../../files/font/sanukcomp-italic.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'SanukThin'; src: url('sanukweb-thin.eot'); src: local('?'), url("../../files/font/sanukweb-thin.woff") format("woff"), url("../../files/font/sanukcomp-thin.ttf") format("truetype"); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'SanukRegular'; src: url('sanukweb-thin.eot'); src: url('sanukweb-thin.eot?#iefix') format('embedded-opentype'), url('sanukweb-thin.woff') format('woff'), url('sanukcomp-thin.ttf') format('truetype'); font-weight: normal; font-style: normal;*/ /** * Based on: "Yet Another Multicolumn Layout" - YAML CSS Framework * * (en) Uniform design of standard content elements * (de) Einheitliche Standardformatierungen für die wichtigten Inhalts-Elemente * * @copyright Copyright 2005-2012, Dirk Jesse * @license CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/), * YAML-CDL (http://www.yaml.de/license.html) * @link http://www.yaml.de * @package yaml * @version v4.0.2 * @revision $Revision: 743 $ * @lastmodified $Date: 2012-10-23 23:01:14 +0200 (Di, 23 Okt 2012) $ * @appdef yaml * @edited by SBB */ @media all { /** * @section global typography settings * * vertical rhythm settings (based on em-unit) * ------------------------------------------- * basefont-size: 14px (87.5%) * line-height : 21px (factor: 1.5) */ /* (en) reset font size for all elements to standard (16 Pixel) */ /* (de) Alle Schriftgrößen auf Standardgröße (16 Pixel) zurücksetzen */ html * { font-size:100%; } /** * (en) reset monospaced elements to font size 16px in all browsers * (de) Schriftgröße von monospaced Elemente in allen Browsern auf 16 Pixel setzen * * @see: http://webkit.org/blog/67/strange-medium/ */ textarea, pre, code, kbd, samp, var, tt { font-family: Consolas, "Lucida Console", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier; } /* (en) base layout gets standard font size 14px */ /* (de) Basis-Layout erhält Standardschriftgröße von 14 Pixeln */ body { font-family: 'SanukRegular', Tahoma, sans-serif; font-size: 87.50%; /* base: 14px */ color: #444; /* (en) Prevent auto-scaling of text in mobile webkit browsers */ /* (de) Automatische Schriftvergrößerung in mobilen Webkit-Browsern vermeiden */ -webkit-text-size-adjust:100%; } /*--- Headings | Überschriften ------------------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { font-family: 'SanukBold', Tahoma, sans-serif; font-weight: 400; color:#161e21; margin:0; } h1 { font-size:350%; line-height: 1.1571em; margin: 0.4286em 0 0; } h2 { font-size:250%; line-height: 1.2em; margin: 0.6em 0 0 0; } h3 { font-size:175%; line-height: 0.8571em; margin:0.8571em 0 0 0; } h4 { font-size:133.33%; line-height: 1.125em; margin:1.125em 0 0 0; } h5 { font-size:116.67%; line-height: 1.2857em; margin: 1.2857em 0 0 0; } h6 { font-weight: bold; font-size:100%; line-height: 1.5em; margin: 1.5em 0 0 0; } /* --- Lists | Listen -------------------------------------------------------------------------------- */ ul, ol, dl { font-size:1em; line-height:1.5em; margin: 1.5em 0 0 1em; } ul { list-style-type:disc; } ol { list-style-type:decimal; } ul ul { list-style-type:circle; margin-top:0; } ol ol { list-style-type:lower-latin; margin-top:0; } ol ul { list-style-type:circle; margin-top:0; } li { font-size:1em; line-height:1.5em; margin-left:0.8em; } dt { font-weight:bold; } dd { margin:0 0 1.5em 0.8em; } /* --- general text formatting | Allgemeine Textauszeichnung ------------------------------------------ */ p { font-size:1em; line-height:1.5em; margin: 1.5em 0 0 0; } blockquote, cite, q { font-family: Georgia, "Times New Roman", Times, serif; font-style:italic; } blockquote { margin:1.5em 0 0 1.5em; color:#666; } strong, b { font-family: 'SanukBold', Tahoma, sans-serif; font-weight: normal; } em, i { font-style:italic; } big { font-size:116.667%; } small { font-size:85.71%; } pre, code, kbd, tt, samp, var { font-size:100%; } pre { line-height:1.5em; margin: 1.5em 0 0 0; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } pre, code { color:#800; } kbd, samp, var, tt { color:#666; font-weight:bold; } var, dfn { font-style:italic; } acronym, abbr { border-bottom:1px #aaa dotted; font-variant:small-caps; letter-spacing:.07em; cursor:help; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } mark { background: #ff0; color: #000; } hr { color:#fff; background:transparent; margin:0 0 0.75em 0; padding:0 0 0.75em 0; border:0; border-bottom:1px #eee solid; } /*--- Links ----------------------------------------------------------------------------------------- */ a { color:#377C9E; background:transparent; text-decoration:none; } a:active { outline: none; } /* (en) maximum constrast for tab focus - change with great care */ /* (en) Maximaler Kontrast für Tab Focus - Ändern Sie diese Regel mit Bedacht */ a:hover, a:focus { background-color: #377C9E; color:#fff; text-decoration:none; } /* --- images ------------------ */ img, figure { margin: 0; } .flexible { margin-top: 1.5em; max-width: 100%; height: auto; } * html .flexible { /* IE6 support */ width: 98%; /* 2% space for borders */ } .bordered { margin-top: 1.5em; border: 2px #eee solid; border: 2px rgba(255,255,255,1) solid; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.25); -moz-box-shadow: 0 0 3px rgba(0,0,0,.25); box-shadow: 0 0 3px rgba(0,0,0,.25); } /** * ----------------------------------------------------------------------- # * * Generic Content Classes * * (en) standard classes for positioning and highlighting * (de) Standardklassen zur Positionierung und Hervorhebung * * @section content-generic-classes */ .highlight { color:#c30; } .dimmed { color:#888; } .box { border-radius: 0.3em; border-width: 1px; border-style: solid; border-color: #888; border-color: rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset; color: #444; color: rgba(0,0,0,.8); padding: 1.4286em; margin: 1.5em 0 0 0; } .box > *:first-child { margin-top: 0; } .label { font-family: Verdana, Geneva, sans-serif; padding: 1px 6px 2px; display: inline-block; vertical-align:middle; letter-spacing: normal; white-space:nowrap; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #06C; color: #fff; font-size: 10px; line-height: 12px; } .info { background:#f4f4f4; } .success { background:#8c8; } .warning { background:#cc8; } .error { background:#c88; } .float-left { float:left; display:inline; margin: 1.5em 1em 0 0; } .float-right { float:right; display:inline; margin: 1.5em 0 0 1em; } .center { display:block; text-align:center; margin: 1.5em auto 0 auto; } /** * ------------------------------------------------------------------------------------------------- # * * Tables | Tabellen * * (en) Generic classes for table-width and design definition * (de) Generische Klassen für die Tabellenbreite und Gestaltungsvorschriften für Tabellen * * @section content-tables */ table { width:100%; border-collapse:collapse; margin: 1.3571em 0 0 0; color:#333; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; } table.narrow { margin: 1.4286em 0 0 0; } table.narrow th, table.narrow td { padding: 0 0.5em; line-height: 1.4286em; } table.bordertable { border:1px #ccc solid; } table caption { font-variant:small-caps; } th, td { line-height: 1.5em; vertical-align: top; padding: 0.7143em 0.5em; } th *:first-child, td *:first-child { margin-top: 0; } th.nowrap, td.nowrap { white-space: nowrap; } thead th { text-align: left; color:#000; border-bottom:2px #000 solid; } .bordertable thead th { background:#e0e0e0; border-right:1px #ccc solid; border-bottom:1px #ccc solid; } .bordertable tbody th[scope="row"] { background:#f0f0f0; } tbody th { text-align: left; border-top:1px solid #ccc; text-align:left; } .bordertable tbody th { border-right:1px solid #ccc; } tbody td { text-align: left; border-top:1px solid #ccc; } .bordertable tbody td { border-right:1px solid #ccc; } /* highlight row on mouse over */ tbody tr:hover th, tbody tr:hover td { background:#f8f8f8; } } /** * "Yet Another Multicolumn Layout" - YAML CSS Framework * * (en) Horizontal list navigation "hlist" * (de) Horizontale Navigationsliste "hlist" * * @copyright Copyright 2005-2012, Dirk Jesse * @license CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/), * YAML-CDL (http://www.yaml.de/license.html) * @link http://www.yaml.de * @package yaml * @version v4.1.0 * @revision $Revision$ * @lastmodified $Date$ * @edit SBB * ALGEMEEN */ @media all { .ym-hlist { /* (en) containing floats in IE */ /* (de) Einfassen der Floats im IE */ width:100%; /*overflow:hidden;*/ /* (en|de) Bugfix:IE - collapsing horizontal margins */ position:relative; line-height:1em; } .ym-hlist ul { margin:0; /* (en|de) Bugfix:IE - Doubled Float Margin Bug */ display:inline; float:left; /* LTR */ } .ym-hlist ul li { /* (en|de) Bugfix:IE - Doubled Float Margin Bug */ display:inline; float:left; /* LTR */ font-size:1.0em; line-height:1em; list-style-type:none; margin: 0 .25em 0 0; padding:0; } .ym-hlist ul li a, .ym-hlist ul li span { background:transparent; color:#aaa; display:block; font-size:1em; line-height: 2em; padding: 0 0.5em; text-decoration:none; } .ym-hlist ul li a:focus, .ym-hlist ul li a:hover, .ym-hlist ul li a:active { color: #AADBF3; background:#666; background: rgba(255,255,255,.25); text-decoration:none; outline: 0 none; } .ym-hlist ul li.active { background:#666; background: rgba(255,255,255,.3); color: #fff; } .ym-hlist ul li.active strong, .ym-hlist ul li.active a:focus, .ym-hlist ul li.active a:hover, .ym-hlist ul li.active a:active { background:transparent; color:#fff; text-decoration:none; } #breadcrumb { margin: 5.6em 0em 0em; height: 1.6em; } #breadcrumb ul { margin: 0em; padding-left: 0.5em; } #breadcrumb li { float: left; list-style: none; border-left: 1px dotted #ddd; padding-left: 0.7em; } #breadcrumb li { color: #999; font-size: 0.75em; line-height: 0.8em; } #breadcrumb li a { color: #999; } #breadcrumb li a:hover { color: #57BADE; } /* HOOFDMENU */ #mainnav { overflow: hidden; } #mainnav ul, #mainnav li { padding: 0em !important; margin: 0em !important; list-style: none; } #mainnav li { font-family: 'SanukBold', Tahoma, sans-serif; line-height: 2.0em; border-top: 1px solid #FFF; } #mainnav li a, #mainnav li span { color: #000; display:block; padding-left: 1.0em; background-color: #D0ECF9; } #mainnav li a:hover { background-color: #eee; } #mainnav li ul li a, #mainnav li ul li span { font-family: 'SanukRegular', Tahoma, sans-serif; font-size: 0.9em; line-height: 2.4em; background-color: #AADBF3; } #mainnav li ul li span { background-color: #ddd; color: #999; } } @media screen and ( min-width: 640px ) { #mainnav { position: absolute; width: 992px; background-color: #C1E7F9; height: 34px; left: -1.0em; padding-left: 2.0em; overflow: visible; z-index: 10; } #mainnav li { text-align: left; float:left; border-top: none; width: 150px; } #mainnav li a, #mainnav li span { padding: 0.3em 1.0em 0.1em; border-left: 2px dotted #AADBF3; } #mainnav li .last { border-right: 2px dotted #AADBF3; } #mainnav li ul li { float: none; } #mainnav li ul li a, #mainnav li ul li span { border-left: none; border-top: 1px solid #FFF; border-left: 1px solid #FFF; border-right: 1px solid #FFF; width: 130%; background-color: #D0ECF9; opacity:0.97; filter:alpha(opacity=97); line-height: 1.4em; padding: 0.7em 1.0em 0.5em; } #mainnav li ul li .last { border-right: 1px solid #FFF; border-bottom: 1px solid #FFF; } } /* YM-VLIST */ @media all { /* title */ .ym-vlist { margin:0; list-style-type:none; margin-bottom: 2.0em; } .ym-vlist h6 { padding-left: 0.8em; margin-bottom: -2.7em; margin-top: 0em; } .ym-vlist ul { list-style-type:none; margin-left: -0.8em; } .ym-vlist li { display: block; width: 96%; } .ym-vlist li a { padding-left: 0.8em; } .ym-vlist li .last { margin-bottom: -2.0em; } .ym-vlist a, .ym-vlist strong, .ym-vlist span { display:block; text-decoration:none; line-height: 2.0em; font-size: 0.85em; } .ym-vlist a, .ym-vlist a:visited { color:#444; } .ym-vlist span { padding-left: 0.8em; } /* active list element */ .ym-vlist li.active { color:#999; background-color: transparent; } /* Level 1 */ .ym-vlist li a, .ym-vlist li strong, .ym-vlist li span { width:100%; } /* LTR */ .ym-vlist li a:focus, .ym-vlist li a:hover, .ym-vlist li a:active { background-color:#888; color:#fff; outline: 0 none; } /* Level 2 */ .ym-vlist li ul li a, .ym-vlist li ul li strong, .ym-vlist li ul li span { width:80%; padding-left:20%; } /* LTR */ .ym-vlist li ul li a, .ym-vlist li ul li a:visited { background-color:#f8f8f8; color:#333; } .ym-vlist li ul li a:focus, .ym-vlist li ul li a:hover, .ym-vlist li ul li a:active { background-color:#888; color:#fff; } /* Level 3 */ .ym-vlist li ul li ul li a, .ym-vlist li ul li ul li strong, .ym-vlist li ul li ul li span { width:70%; padding-left:30%; } /* LTR */ .ym-vlist li ul li ul li a, .ym-vlist li ul li ul li a:visited{ background-color:#f0f0f0; color:#222; } .ym-vlist li ul li ul li a:focus, .ym-vlist li ul li ul li a:hover, .ym-vlist li ul li ul li a:active { background-color:#888; color:#fff; } /* Level 4 */ .ym-vlist li ul li ul li ul li a, .ym-vlist li ul li ul li ul li strong, .ym-vlist li ul li ul li ul li span { width:60%; padding-left:40%; } /* LTR */ .ym-vlist li ul li ul li ul li a, .ym-vlist li ul li ul li ul li a:visited { background-color:#e8e8e8; color:#111; } .ym-vlist li ul li ul li ul li a:focus, .ym-vlist li ul li ul li ul li a:hover, .ym-vlist li ul li ul li ul li a:active { background-color:#888; color:#fff; } #footer li a:hover { background-color: transparent; color: #57BADE; } } @media screen and ( max-width: 640px ) { /* title */ .ym-vlist h6 { padding-top: 0.3em; padding-bottom: 0.2em; background-color: #eee; } #breadcrumb { margin: 1.8em 0em 0em; } } @media all { .invisible { visibility: hidden; display: none; } header, nav { background-color: transparent; margin:0; } a:hover, .info { background-color: transparent; color: #57BADE; } a:focus { background-color: #57BADE; } body { background-color: #eee; background-image: url('../../files/img/back-body.png'); background-repeat: repeat; } .ym-wrapper { max-width: 992px; background-color: #FFF; border-left: 1px solid #AADBF3; border-right: 1px solid #AADBF3; } #nav-service ul, #taalwissel ul, #search-light form { float: right; position: relative; z-index: 2; } #taalwissel li, #nav-service li { text-transform: uppercase; font-size: 0.7em; margin-top: 0.25em; } #nav-service { z-index: 1; position: relative; } #logo, #merklading { padding: 0em 0em; } #logo img, #merklading img { width: 100%; height: auto; max-width: 434px; } figure img { width: 100%; height: auto; } #main { padding-bottom: 2.0em; } #right { overflow: hidden; } #agenda-home h6 { margin-bottom: 0.6em; margin-top: 0em; } #agenda-home .empty, #agenda-home .date, #agenda-home a { padding: 0em 0.8em; font-size: 0.85em; display: block; } #agenda-home .date { color: #888; } #agenda-home a { color: #444; line-height: 2.0em; margin-bottom: 0.5em; } #agenda-home a:hover { color: #FFF; background-color: #CF7000; } .mime_icon { margin-top: 0.2em; margin-bottom: -0.2em; } /* colors -------------------------------------------------- */ .blue h6 { color: #57BADE; } .red h6 { color: #CE0538; } .green h6 { color: #BCBE00; } .orange h6 { color: #F28C00; } .purple h6 { color: #A4167F; } .brown h6 { color: #CF7000; } .darkgreen h6 { color: #008B54; } .darkblue h6 { } .blue li a:hover { background-color: #57BADE; } .red li a:hover { background-color: #CE0538; } .green li a:hover { background-color: #BCBE00; } .orange li a:hover { background-color: #CF7000; } .purple li a:hover { background-color: #A4167F; } .brown li a:hover { } .darkgreen li a:hover { background-color: #008B54; } .darkblue li a:hover { } /* search form -------------------------------------------- */ #search-light .text { width: 184px; padding-top: 0; } #search-advanced .text { width: 80%; padding: 0.25em; margin-top: 1.0em; } #search-light input[type='button'], #search-light input[type='submit'], #search-advanced input[type='button'], #search-advanced input[type='submit'] { color: transparent; background: #FFF; border: 1px solid #FFF; background-image: url(../../files/img/search.png); background-repeat: no-repeat; background-position: top left; font-size: 0.85em; cursor: pointer; } #search-light input[type='button']:hover, #search-light input[type='submit']:hover, #search-advanced input[type='button']:hover, #search-advanced input[type='submit']:hover { background-image: url(../../files/img/search-hover.png); } #search-advanced .radio_container { margin-top: 0.5em; position: relative; } #search-advanced .header { background-color: #ddd; color: #999; font-size: 0.85em; padding: 0.5em 0.5em 0.3em; } #search-advanced .odd, #search-advanced .even { border-bottom:1px solid #ddd; padding-top: 0.5em; padding-bottom: 0.5em; } #search-advanced h3 { font-size: 1.25em; margin-bottom: 0em; } #search-advanced .url { color: #999; } /* nieuws + article ----------------------------------------- */ .layout_latest, .layout_short, .mod_article { margin-left: 1.0em; margin-right: 2.6em; } .layout_latest, .layout_short { border-bottom: 1px dotted #AADBF3; } .layout_latest h2, .layout_short h2 { padding-bottom: 0em; font-size: 1.6em; line-height: 1.4em; margin-bottom: -1.0em; color: #57BADE; } .mod_article { min-height: 300px; } .mod_article h1 { font-size: 2.0em; color: #57BADE; } .mod_article h2 { font-size: 1.4em; color: #57BADE; padding: 0.3em 0em; } .mod_article ul, .mod_article ol { margin-bottom: 1.2em; margin-top: 0.5em; margin-left: 0.5em; } .mod_article ol { margin-left: 1.3em; } .layout_latest h2 a, .layout_short h2 a, .mod_eventlist h2 a { color: #57BADE; } .layout_latest h2 a:hover, .layout_short h2 a:hover, .mod_eventlist h2 a:hover { color: #AADBF3; } .layout_latest time, .layout_short time { color: #999; } .latest_img img { width: 100%; height: auto; } .layout_short .teaser p { margin-top: 0.25em !important; margin-right: 1.0em; margin-left: 2.0em; } #nieuws .mod_newslist { margin-left: -1.0em !important; } .layout_latest .more a, .layout_short .more a, .mod_eventlist .more a, .newsletter .anchorLink { color: #57BADE; background-color: #FFF; text-decoration: none; border: 1px solid #57BADE; padding: 0.3em 0.5em 0.2em ; text-transform: uppercase; font-size: 0.7em; } .layout_latest .more, .layout_short .more, .mod_eventlist .more { margin-top: 0.5em !important; margin-bottom: 0.8em; } .layout_latest .more a:hover, .layout_short .more a:hover, .mod_eventlist .more a:hover, .newsletter .anchorLink:hover { background-color: #57BADE; color: #FFF; } .layout_latest .more a:focus, .layout_short .more a:focus, .mod_eventlist .more a:focus, .newsletter .anchorLink:focus, .layout_latest .more a:active, .layout_short .more a:active, .mod_eventlist .more a:active, .newsletter .anchorLink:active { color: #AADBF3; background:#666; } .ce_text h1, .mod_eventlist h1 { margin-bottom: 0.75em; } .ce_text p, .mod_eventlist p { margin-bottom: 1.0em; margin-top: 0.25em; padding-top: 0em; } .ce_text img { max-width: 540px; height: auto; margin: 0.5em; } .mod_eventlist { margin-top: 0.75em; } .mod_eventlist .layout_teaser { border:1px solid #ddd; padding: 0em 0.5em 0.3em; margin-bottom: 1.0em; } .mod_eventlist .header { background-color: #ddd; color: #999; font-size: 0.85em; padding: 0.5em 0.5em 0.3em; } .pdf_link { float: right; } .ce_hyperlink { line-height: 1.4em; } .ce_downloads p { margin-bottom: -1.2em !important; } .ce_downloads ul { margin-left: -1.0em; } .ce_downloads li { list-style: none; } .ce_downloads { margin-bottom: 2.4em !important; } /* pagination --------------------------------------------- */ .pagination p { color: #999; font-size: 0.75em; line-height: 0.8em; padding-left: 1.0em; } .pagination ul { margin-left: 0em; } .pagination li { float: left; display: block; line-height: 1.3em; list-style: none } .pagination li a, .pagination li span { border: 1px solid #57BADE; padding: 0.3em 0.5em 0.2em ; text-transform: uppercase; font-size: 0.7em; color: #57BADE; } .pagination li span { background-color: #999; color: #FFF; } .pagination li a:hover { background-color: #57BADE; color: #FFF; } /* form --------------------------------------------------- */ /* zie gray-theme.css */ /* nieuwsbrief --------------------------------------------- */ #header-newsletter { margin-bottom: 0em; } #header-newsletter img { width: 100%; height: auto; max-width: 420px; } #header-newsletter p { color: #999; } .newsletter { margin-right: 0em !important; margin-left: 0em !important; } .newsletter h3 { background-color: #C1E7F9; text-transform: uppercase; font-family: 'SanukThin', Tahoma, sans-serif; font-size: 1.6em; padding: 0.9em 0em 0.3em; margin-top: -0.8em; color: #666; } .newsletter .ym-g50 { border: 1px solid #FFF; } .newsletter .ce_text { margin-top: 0.2em; border-top: 1px solid #ddd; } .newsletter .menu { overflow: hidden; } .newsletter .ce_text h1 { padding-left: 0.3em; } .newsletter .ce_text h2 { padding-left: 0.5em; font-size: 1.2em; } .newsletter .ce_text h4 { margin: 1.0em 0.5em 0em; padding-left: 0.5em; padding-top: 0.3em; padding-bottom: 0.2em; background-color: #C1E7F9; font-family: 'SanukRegular', Tahoma, sans-serif; font-size: 1.1em; color: #000; } .newsletter .ce_text p, .newsletter .ce_text ul { padding-left: 0.7em; padding-right: 0.7em; } .newsletter .image_container { height: auto; max-height: 168px; overflow: hidden; margin-bottom: 0.5em; } .newsletter .image_container img { width: 96%; height: auto; } .newsletter-anchor-top { border-top: 1px solid #ddd; width: 100%; margin-right: 0.7em; } .newsletter-anchor-top p { text-align: center; margin-top: 0.5em; margin-bottom: 0.4em; font-size: 1.6em; font-family: 'SanukThin', Tahoma, sans-serif; } .newsletter-anchor-top p a { color: #57BADE; background-color: #FFF; text-decoration: none; border: 1px solid #57BADE; text-transform: uppercase; } .newsletter-anchor-top p a:hover { background-color: #57BADE; color: #FFF; } .newsletter-anchor-top p a:focus, .newsletter-anchor-top p a:active { color: #AADBF3; background:#666; } #footer-newsletter { padding-top: 1.6em; } /* sitemap ------------------------------------------------ */ .mod_sitemap { margin-top: 1.0em; } #sitemap li { list-style: none; margin: 0em; } #sitemap .level_1 li { margin-bottom: 0.5em; } #sitemap .level_1 li a { font-family: 'SanukBold', Tahoma, sans-serif; font-size: 1.2em; background-color: #ddd; background-image: url(../../files/img/arrow-down.png); background-position: right; background-repeat: no-repeat; padding: 0.5em 0.5em 0.3em; display: block; width: 100%; cursor: pointer; } #sitemap .level_2 li { border-bottom: none; margin-left: 0.5em; width: 96%; } #sitemap .level_2 li a { font-family: 'SanukBold', Tahoma, sans-serif; font-size: 1.0em; background-image: none; } #sitemap .level_3 li { margin-top: 0em; margin-left: 0.5em; } #sitemap .level_3 li a{ font-family: 'SanukRegular', Tahoma, sans-serif; font-size: 1.0em; } #sitemap .level_4 li a{ font-family: 'SanukRegular', Tahoma, sans-serif; font-size: 0.85em; } #sitemap img { width: 100%; height: auto; } /* footer ------------------------------------------------- */ #footercontainer { background-color: #C1E7F9; border-bottom: 1px solid #AADBF3; } #footer { background-color: transparent; } #footer ul { padding: 0em; margin-top: 0em; } #footer { padding-top: 0em !important; margin-top: 0em !important; } #footer li a, #footer li span { padding-left: 0.5em; } #agenda-footer { margin-top: 0em; padding-top: 0.6em; font-size: 0.85em; line-height: 2.2em; } #agenda-footer .date { color: #999; padding-right: 0.5em; border-right: 1px dotted #FFF; margin-right: 0.5em; } #agenda-footer h6 { color: #999; } #agenda-footer a { color: #666; } #agenda-footer a:hover { color: #57BADE; } } @media only screen and ( min-width: 0px ) and ( max-width: 640px) { body { background-color: #FFF; background-image: none; } iframe { max-width: 100%; height: auto; } #nav-service ul, #taalwissel ul, #search-light form{ float: left; } #nav-service ul, #taalwissel ul { margin-left: 0em; } #search-light { width: 100%; height: 22px; } #logo { width: 100%; padding: 0em auto; } #logo img { max-width: 434px; height: auto; } #logo p { text-align: center; } #merklading { display: none; } .ym-searchform { margin-top: 0.5em; } .ym-wrapper { width: 96%; margin: 0 auto; border: none; } .ym-g20, .ym-g25, .ym-g33, .ym-g38, .ym-g50, .ym-g62, .ym-g75 { float: none; } .layout_latest, .layout_short { margin-left: 0em; margin-right: 0em; } #latest h2 { float: left; margin-bottom: 0em; } .layout_short .latest_img { width: 100%; } .layout_short .latest_img img { max-height: 160px; width: auto; } .teaser { width: 100%; float: none; } .layout_short .teaser p { margin: 0em; } .blue { border: 1px dotted #57BADE; } .red { border: 1px dotted #CE0538; } .green { border: 1px dotted #BCBE00; } .orange { border: 1px dotted #F28C00; } .purple { border: 1px dotted #A4167F; } .brown { border: 1px dotted #CF7000; } .darkgreen { border: 1px dotted #008B54; } .darkblue { } .ce_text img { max-width: 100%; height: auto; margin: 0em; } #agenda-home h6 { padding-top: 0.3em; padding-bottom: 0.2em; background-color: #eee; } .newsletter h3 { padding: 1.3em 0em 0.3em; } .newsletter .ce_text h1 { padding-left: 0.1em; } .newsletter .ce_text h2 { padding-left: 0.2em; } .newsletter .ce_text p, .newsletter .ce_text ul, .newsletter .image_container { padding-left: 0.2em; padding-right: 0.2em; } .newsletter .image_container { height: auto; max-height: 160px; } .newsletter .image_container { float: none; } .newsletter .image_container img { width: 70%; } .tableform { width: 104%; } .tableform label { font-size: 0.9em; } } @media only screen and ( min-width: 640px ) { #right { padding-top: 4.8em; } #latest { padding-top: 3.3em; } .latest_img { vertical-align: central; height: auto; } .latest_img img { max-width: 540px; max-height: 300px; overflow: hidden; } .layout_latest .latest_img, .layout_short .latest_img { margin-left: 0.8em; margin-right: -1.8em; } .blue { border-left: 2px dotted #57BADE; } .red { border-left: 2px dotted #CE0538; } .green { border-left: 2px dotted #BCBE00; } .orange { border-left: 2px dotted #F28C00; } .purple { border-left: 2px dotted #A4167F; } .brown { border-left: 2px dotted #CF7000; } .darkgreen { border-left: 2px dotted #008B54; } .darkblue { } } @media only screen and ( min-width: 0px ) and ( max-width: 480px) { #taalwissel li { margin-left: 1.0em; } } /** * "Yet Another Multicolumn Layout" - YAML CSS Framework * * YAML form theme: "gray-theme" * * @copyright Copyright 2005-2012, Dirk Jesse * @license CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/), * YAML-CDL (http://www.yaml.de/license.html) * @link http://www.yaml.de * @package yaml * @version v4.0.2 * @revision $Revision: 743 $ * @lastmodified $Date: 2012-10-23 23:01:14 +0200 (Di, 23 Okt 2012) $ */ @media screen and (min-width: 0px){ /** * @section general width settings for formular elements in modern browsers * switching to CSS3 box modell "border-box" for perfect flexible forms * * Styling for: , ,