/* Gemeente Vianen - Styling */ * { -webkit-text-size-adjust: none; } /* General */ body { text-align:left; margin:0; } body, table { font: 1em/1.5em Calibri, "Helvetica Neue", Arial, sans-serif; /*color: #212147;*/ color: #242424; } input, select, textarea, option { font: 1em Calibri, "Helvetica Neue", Arial, sans-serif; } optgroup { font: bold 1em Calibri, "Helvetica Neue", Arial, sans-serif; } .center-align { max-width: 980px; padding-left:20px; padding-right:20px; margin-left:auto; margin-right:auto; } /*#sidebar-top, #sidebar-bottom { float:right; clear:right; width:30%; }*/ #start { clear: both; } #content { width: 80%; } #main img { max-width:100%; height:auto; } a img { border:none; } #google-map, iframe { max-width:100%; } /* don't display the direct to content/menu/search links */ #direct-links { margin: 0; list-style-type: none; } #direct-links li { margin: 0; } #direct-links li a { position: absolute; left: -9999px; color: #000; background-color: #FFFFFF; z-index: 12; } #direct-links li a:focus { left: 0; right: 0; top: 0; width: 100%; text-align: center; padding: 4px 0px; } .notification { background-color: #7f0e1a; max-width: 720px; background-color: rgba(152, 0, 6, 0.75); padding: 0.5em 1em; border: 2px solid #a73131; border-radius: 4px; padding-left: 64px; background-image: url('/data/images/5/5/9/icon_megaphone.png'); background-repeat: no-repeat; background-position: left center; } .notification h2, .notification p.date { display: none; } .notification_content p { margin: 0; } /* Sticky footer */ html, body, #container { height:100%; min-height:100%; } #wrapper { min-height:100%; height:auto !important; margin-bottom:-300px; /* Footer height*/ } #push { display:block; height:300px; } #footer { clear:both; height: 300px; } /* Header */ #header { color:#FFF; background-color: #192047; position:relative; color:#FFF; } #header-content { background-image: url('/data/images/5/5/8/header-blauw.png'); background-position: right top; background-repeat: no-repeat; z-index:2; padding-bottom: 18px; padding-top: 10px; position: relative; } #logo { display: inline-block; text-transform:uppercase; margin:0; color:#FFF; line-height:1em; font-size:6em; font-weight: bold; padding-top:40px; } #logo span { font-size:0.2em; line-height:0; margin-bottom:0; display:block; color: #DF9500; } #logo a, #logo a:hover, #logo a:focus { text-decoration:none; } #logo { width: 307px; height:auto; max-width:100%; } #logo img { vertical-align: top; max-width:100%; height:auto; } /* search form */ #search { margin: 21px 0 14px 0; } #search label { display: none; } #search #q { border-radius: 4px 0px 0px 4px; -webkit-appearance:none; margin: 0; padding: 0; text-indent: 10px; width: 320px; height: 40px; border: none; background: #FFFFFF; } #search #search-submit { border-radius: 0px 4px 4px 0px; margin: 0; padding: 0; width: 40px; height: 40px; border: none; background:url('/data/images/2/4/0/magnifier-blue.png') #dd9414; background-repeat:no-repeat; background-position: center center; color: #212147; } /* Variable header image on the right */ #header figure { margin:0; position:absolute; bottom:0; right:0; height:100%; text-align:right; z-index:1; overflow:hidden; } #header figcaption { position:absolute; bottom:0; right:0; text-align:left; font-size:0.9em; line-height:1.5em; font-style:italic; /*color:#282773;*/ color: #000; } #header figcaption.collapsed { width:40px; height:40px; background:url('/data/images/1/1/info.png') no-repeat; cursor:pointer; } #header figcaption.collapsed * { display:none; } #header figcaption.expanded { height:100%; width:320px; bottom:auto; top:0; padding: 0 20px; background:url('/data/images/2/4/info-bg.png'); } #header figcaption.expanded *:first-child { margin-top: 20px; } #header #header-photo-close { position: absolute; right: 5px; bottom: 5px; cursor: pointer; } /* Toptasks in header */ .skip { display: none; } #toptaken { padding-left:0; margin: 1em 0em; overflow: hidden; max-width: 640px; } #toptaken li { float:left; width: 50%; list-style-type:none; padding: 0; background: none; margin: 0px 0px 10px 0px; } #toptaken li a { text-decoration:none; padding: 12px 8px 12px 50px; display: block; margin-right: 10px; background-position: left 4px center; background-repeat:no-repeat; display:block; border-radius: 4px; } #toptaken li a:hover, #toptaken li a:focus { outline:none; text-decoration:none; } #toptaken li:nth-child(2n+1) { clear: left; } #breadcrumb { color: #767676; padding: 0.75em 0; border-bottom: 1px solid #EEEEEE; margin-bottom: 1em; } #toptaken li a:hover, #toptaken li a:active { background-color: rgba(255,255,255, 0.2); } #toptaken li#link-other-theme { position: absolute; right: 10px; top: 315px; /* reset styles */ float: none; overflow: visible; } #toptaken li#link-other-theme a { /* reset styles */ color: #545490; text-decoration: underline; text-align: right; padding: 0; display: inline; } #toptaken li#link-other-theme a:hover { text-decoration: none; color: #000; background-color: #FFF; } #toptaken li#link-other-theme a:focus { outline: 1px dotted; color: #000; background-color: #FFF; } #toptaken li#link-other-theme a:before { content: ">> "; } /* Toptasks between pages */ .toptasks { margin:0; padding:0; overflow:auto; } .toptasks li { float:left; list-style-type:none; padding-left:40px; width:240px; min-height: 84px; margin-right:32px; margin-bottom:12px; background-repeat:no-repeat; background-position: left top; background-image: url("/data/images/1/0/7/vianen.png"); } .toptasks li h2 { margin:0; color:#545490; } .toptasks .node3, .toptasks .node6, .toptasks .node9, .toptasks .node12 { margin-right:0; } .toptasks .node4, .toptasks .node7, .toptasks .node10 { clear:left; } /* Profile pictures */ #content div.profile { height:auto; min-height:102px; } .profile p.image { margin:0; } .profile p { margin-bottom:0px; } /* default element styles */ h1 { clear: both; margin: 20px 0; font-size: 2.4em; line-height: 1.2em; font-weight: bold; color: #CA8712; } h2 { clear: both; margin: 24px 0 12px 0; font-size: 1.4em; font-weight: bold; color: #CA8712; } h3 { margin: 12px 0 0 0; font-size: 1em; font-weight: bold; /*color: #dd9414;*/ } p { margin: 0 0 12px 0; } /*address { margin: 0 0 12px 0; }*/ ul { margin: 0 0 12px 0; padding: 0; } ul li { list-style-type: none; margin-bottom: 5px; background: url("/data/images/6/6/bullet.png") no-repeat 5px 9px; padding: 0 0 0 20px; } ul ul, ol ul { margin-top: 5px; } ul ul li, ol ul li { margin-bottom: 0; /*background: url("/data/images/6/6/bullet.png") no-repeat 7px 7px;*/ } ol { margin: 0 0 10px 0; padding-left: 24px; } ol li { margin-bottom: 5px; } p+ul, p+ol { margin-top: -5px; } h3+ul, h3+ol { margin-top: 5px; } a, a:visited { color: inherit; text-decoration: underline; } a:hover { text-decoration: none; } a:focus { /* on focus; don't remove underline, as it is confusing to navigate */ } hr { margin: 10px 0; height: 0; border: none; border-bottom: 1px solid #DDD; clear: both; } hr+h2 { margin-top: 15px; } img { border: none; vertical-align: middle; } abbr { /*border-bottom: none;*/ cursor: help; } a abbr { border-bottom: none; cursor: pointer; } /* Typography */ #main a { color:#545490; transition:color 500ms linear; } #main a:hover, #main a:focus { /*color: #212147;*/ /*color: #242424;*/ color: #000; } /*#header a { text-decoration:none; } #header a:hover { text-decoration:underline; }*/ #main img { border: 1px solid #DDD; /*padding: 5px;*/ } ::selection { background:#565692; color:#FFFFFF; } ::-moz-selection { background:#565692; color:#FFFFFF; } /* floating left and right objects */ .left { float: left; margin: 5px 15px 15px 0 !important; } .right { float: right; margin: 5px 0 15px 15px !important; } /* tables */ table { margin: 0 0 10px 0; border: 1px solid #DDD; border-collapse: collapse; width: 100%; } table th { border: 1px solid #DDD; padding: 2px 5px; vertical-align: top; font-weight: normal; text-align: left; background: #ECEDED; } table td { border: 1px solid #DDD; padding: 2px 5px; vertical-align: top; } table td>*:last-child { margin-bottom: 0; } table tbody th { width: 165px; } table td.date { width: 100px; } table li { margin: 0; } table caption { display: none; } /* links to an external page */ #content a.external, /*#sidebar-top a.external,*/ #sidebar-bottom a.external { background: url("/data/images/6/3/external.png") no-repeat right center; padding-right: 14px; } /* Sidebar */ /* #sidebar-top ul, #sidebar-bottom ul { padding-left:0; } #sidebar-top li, #sidebar-bottom li { list-style-type:none; } */ #sidebar-top>*:last-child { margin-bottom: 40px; } #content>*:first-child, #sidebar-bottom>*:first-child { margin-top: 0; } /* Buttons */ #container a.button { display:block; padding: 4px 40px 6px 10px; border-radius: 4px; background-color:#00832B; max-width:220px; font-size: 1.1em; color:#FFF; text-decoration:none; /*border-radius:4px;*/ background-image:url('/data/images/9/6/button-arrow-right.png'); background-position:right center; background-repeat:no-repeat; transition:background-color 200ms linear !important; } #container a.button:hover, #container a.button:focus { background-color: #0B6631; } #container a.button.switch_section { background-image: none; background-color: #FFFFFF; margin-top: -1.711875em; padding: 0.875em 1em; color: #34325F; display: inline-block; font-weight: bold; z-index: 3; } #container a.button.switch_section:hover, #container a.button.switch_section:active { background-color: #DF9500; } #container a.button.switch_section.inwoners { position: absolute; right: 0; top: 50%; border-radius: 4px 0px 0px 4px; } #container a.button.switch_section.bezoekers { position: absolute; right: 0; top: 50%; border-radius: 4px 0px 0px 4px; } /* News */ div.news { margin-top: 24px; } div.news h2 { margin-top: 0; } p.date { font-size:0.8em; color:#666; text-transform:uppercase; margin:0; } /* Thickbox */ #thickbox { margin:40px 0 !important;} a.thickbox { border:none; display:inline-block; margin:0 10px 10px 0; float:left; } a.thickbox img, #main a.thickbox img { border:none; transition:all ease 500ms; -webkit-transition:all ease 500ms; -moz-transition:all ease 500ms; -o-transition:all ease 500ms; } a.thickbox:hover img { box-shadow:2px 2px 2px 0px #000; transform:rotate(3deg); -webkit-transform:rotate(3deg); -ms-transform:rotate(3deg); } #TB_overlay { position:fixed !important; } /* Video's */ p.video { text-align: center; position: relative; } p.video img.play { position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -32px; border: none !important; } #video-popup-background { display: none; background: #000; opacity: 0.5; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3; } #video-popup { display: none; width: 640px; height: 360px; position: absolute; left: 50%; top: 50%; margin: -180px 0 0 -320px; z-index: 4; background: #FFF; border: none; box-shadow:0px 0px 40px 4px #000; } #video-popup-close { position: absolute; right: -8px; top: -8px; cursor: pointer; } /* Footer */ #content, #sidebar-bottom { margin-bottom: 50px; } #pre-footer { clear:both; overflow:auto; color:#545490; position: relative; } #pre-footer img { position: absolute; right: 10px; top: 5px; } #footer { background:#dd9414; color: #212147; clear:both; } #footer h3 { margin-bottom: 0.5em; font-weight:bold; } #footer ul { padding: 0; } #footer li { margin: 0; padding: 0; background: none; } #footer .phone { text-decoration: none; color: inherit; } #footer .column { float:left; width:220px; margin-right:20px; } #footer .column:last-child { margin-right: 0; } #direct-contact { margin-bottom:0; overflow: auto; } #direct-contact li { display: inline-block; float:left; margin-right: 10px; } #direct-contact li a:hover img, #direct-contact li a:active img { transform: scale(1.1); } #read-out { margin-bottom: 12px; } #read-out a.read-out { background: url("/data/images/2/0/3/6/audio-donker.png") no-repeat left center; display: inline-block; padding: 0px 10px 0px 21px; color: #212147; text-decoration: none; } #read-out a.read-out:hover, #read-out a.read-out:focus { text-decoration: underline; } #footer-az-index { margin: 0; padding: 24px 0px; background-color: #FFFFFF; border-top: 1px solid #CCCCCC; } #footer-az-index .center-align { background-image: url('/data/images/5/6/0/logo_vianen_az_index.jpg'); background-position: right center; background-repeat: no-repeat; } #footer-az-index h2 { color: #222222; margin-top: 0; margin-bottom: 10px; } #footer-az-index ul { margin: 0; } #footer-az-index ul li { list-style-type: none; padding: 0; background: none; display: inline; } #footer-az-index ul li a { padding: 0px 12px 0px 0px; } /* links to file download */ a.file-pdf { background: url("/data/images/6/7/page_white_acrobat.png") no-repeat left center; padding-left: 21px; } a.file-ical { background: url("/data/images/6/8/date.png") no-repeat left center; padding-left: 21px; } /* list of downloads */ ul.downloads li { background: none; padding-left: 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { #search #search-submit { background-size:16px 16px; background-image:url('/data/images/2/4/1/magnifier-blue-retina.png'); } .toptasks li { background-image: url("/data/images/1/0/6/vianen.png"); background-size:32px 32px; } /* Buttons arrow right retina version */ a.button { background-image:url('/data/images/2/6/6/button-arrow-right-retina.png'); background-size:32px 24px; } } /* * FORMS */ form fieldset.no-markup { margin: 0; padding: 0; border: none; background: none; } form fieldset.no-markup legend { display: none; } form { margin: 0 0 10px 0; } form h3 { margin-bottom: 10px; } fieldset { margin: 0 -10px 15px -10px; padding: 15px 10px 0 10px; border: none; background: #F0F6F9; } fieldset+h3 { margin-top: 30px; } fieldset h2, fieldset h3 { margin-top: 0; } form input, form select, form textarea { margin: 0 0 15px 0; padding: 1px 5px; vertical-align: top; } form input.radio, form input.checkbox { margin: 3px 8px 8px 5px; vertical-align: middle; } form input.button { margin: 0 0 0 180px; font-size: 1.1em; text-align: left; border: none; height: 34px; background-color:#00832B; background-image:url('/data/images/9/6/button-arrow-right.png'); background-position:right center; background-repeat:no-repeat; border-radius: 0; color: #FFF; cursor: pointer; padding:0 40px 2px 20px; transition:background-color 200ms linear; } form input.button:hover, form input.button:focus { background-color: #0B6631; } /* border style, not for radio and checkbox */ form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="search"], form select, form textarea { border: 1px solid #CCC; border-bottom-width: 3px; border-radius: 0; } form input[type="text"]:focus, form input[type="email"]:focus, form input[type="tel"]:focus, form input[type="search"]:focus, form select:focus, form textarea:focus { outline: none; border-bottom-color: #DD9414; } form select { padding: 1px 0; max-width: 280px; } form label { margin-right: 15px; margin-bottom: 8px; } form label.block { display: inline-block; width: 170px; margin: 0 10px 15px 0; line-height: 25px; } form label.block.error { color: #A00; } form label.wide { display: block; width: auto; margin: 0 0 3px 0; } form label.wide.error { color: #A00; } form span.info { display: block; margin: -12px 0 -10px 0; padding-left: 180px; color: #545490; font-style: italic; } form span.error { display: block; margin: -12px 0 -10px 0; padding-left: 180px; color: #A00; } form span.error+span.info { margin-top: 10px; } form label.inline+span.error { margin-top: 2px; padding-left: 0; } p.error { margin-left: -10px; margin-right: -10px; color: #A00; background: #FDE5E7 url("/data/images/6/9/exclamation.png") no-repeat 10px 9px; padding: 5px 10px 5px 31px; } form fieldset input.button { margin-top: 5px; margin-bottom: 15px; } form a.back { display: block; margin: 20px 0 -40px 0; width: 100px; } form table span.info { display: inline; margin: 0; padding: 0; font-style: normal; } div.multi-line-field { margin-bottom: 15px; } div.hidden-fields { display: none !important; } p.required-fields { margin: 20px 0 10px 0; color: #545490; font-style: italic; clear: both; } /* customize form style for sidebar */ #sidebar-bottom form input, #sidebar-bottom form select, #sidebar-bottom form textarea { margin-bottom: 8px; } #sidebar-bottom form label.block { width: 90px; margin-bottom: 8px; } #sidebar-bottom form input.button { margin: 8px 0 0 0; } #sidebar-bottom p.required-fields { display: none; } /* fieldset-like DIV */ div.fieldset { margin: 25px -10px 15px -10px; padding: 10px 10px 1px 10px; border: none; background: #F0F6F9; } div.fieldset>h2:first-child, div.fieldset>h3:first-child { margin-top: 0; } h1+div.fieldset, div.fieldset+div.fieldset { margin-top: 15px; } div.fieldset.warning { background: #FCE6D2; } /* pagination */ ul.pagination { clear: both; margin: 15px 0; padding: 0; overflow: auto; /*background: #545490;*/ font-size: 1.4em; line-height: 1.5em; font-weight: bold; } ul.pagination li { list-style-type: none; background: none; float: left; margin: 0 1em 0 0; padding: 0; /*border-right: 1px solid #FFF;*/ } ul.pagination li a { display: block; float: left; /*padding: 2px 10px;*/ /*color: #FFF !important;*/ color: #545490; } ul.pagination li a:hover, ul.pagination li a:focus { /*background: #DD9414;*/ } ul.pagination li a:focus { /* outline color required due to forground text being white */ /*outline-color: #545490;*/ } /* link for more search results */ #search-more-results { } #search-more-results hr { margin: 24px 0; } #search-more-results-button { margin-top: 24px; text-align: center; } #search-more-results-button a.button.loading { background-color: #CCC; } #az-index.fixed { position:fixed; z-index: 4; text-align:center; top:0; background:#FFF; height:64px; margin:0; line-height:64px; width:940px; border-bottom:1px solid #545490; } #az-index.fixed~h2 { padding-top: 77px; margin-top: -65px; } #az-index.fixed+h2 { margin-top: 0; } /* sitemap list */ ul.sitemap { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; /* required because for negative margin top H2 */ position: relative; z-index: 2; } #main #google_map img { max-width: none; } .blocklink { text-decoration: none; } .blocknews { padding: 5px; } .blocklink:hover div { background-color: #ebebeb; } .blocklink p { color: #242424; } .blocklink h2 { text-decoration: underline; color:#545490; transition:color 500ms linear; } .blocklink:hover h2 { text-decoration: none; } .blocklink .profile { height: 114px !important; padding-left: 102px; position: relative; } .blocklink .profile p.image { margin: 0; position: absolute; left: 0; top: -5px; } .event-detail-image { margin: 10px 0 20px 0; } .timepicker ul, .timepicker ul li { list-style-type: none !important; background: none !important; }