449 lines
6.9 KiB
CSS
449 lines
6.9 KiB
CSS
/*
|
|
* Lichtblauw: #03A6E0
|
|
* Donkerblauw: #1F3977
|
|
*/
|
|
|
|
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
|
|
{
|
|
color: #1F3977;
|
|
}
|
|
|
|
@media screen and (max-width:1069px)
|
|
{
|
|
.logo {
|
|
float: none;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.logo img.ri {
|
|
max-width: 75%;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:767px) {
|
|
.row .column {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.now-playing-header {
|
|
width: 100% !important;
|
|
margin-top: 30px !important;
|
|
}
|
|
|
|
.header .now-playing-header .controls li a {
|
|
width: 30px;
|
|
}
|
|
|
|
.header .now-playing-header .controls li a label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 479px) {
|
|
.header_container {
|
|
background-repeat: no-repeat;
|
|
background-position: left 95%;
|
|
background-size: auto 155px !important;
|
|
}
|
|
.search {
|
|
float: none;
|
|
display: flex;
|
|
width: 300px;
|
|
border: solid 1px #464D53 !important;
|
|
margin-top: 10px;
|
|
margin-bottom: -30px; /* Offset page_margin_top */
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
}
|
|
.search .search_input {
|
|
float: none;
|
|
flex: 1;
|
|
}
|
|
.search .search_submit {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.header_container {
|
|
background-image: url('../images/nh-banner.png');
|
|
background-size: 100% ;
|
|
}
|
|
|
|
.header .now-playing-header {
|
|
float: right;
|
|
}
|
|
|
|
.now-playing-header {
|
|
font-size: 16pt;
|
|
font-family: 'Roboto Condensed';
|
|
font-weight: 300;
|
|
/* background: #F6F6F6; */
|
|
background: rgba(246, 246, 246, 0.4);
|
|
width: 728px;
|
|
color: #787878;
|
|
text-align: center;
|
|
|
|
display: block;
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin: auto;
|
|
padding-top: 10px;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.now-playing-header .title,
|
|
.now-playing-header .artist {
|
|
padding: 3px;
|
|
}
|
|
|
|
.now-playing-header .title {
|
|
font-weight: bold;
|
|
font-size: 120%;
|
|
}
|
|
|
|
.now-playing-header .controls {
|
|
font-size: 75%;
|
|
bottom: 0;
|
|
position: absolute;
|
|
padding: 3px;
|
|
width: 100%;
|
|
}
|
|
|
|
.now-playing-header .controls li {
|
|
display: inline-block;
|
|
}
|
|
|
|
.now-playing-header .controls li a {
|
|
line-height: 120%;
|
|
font-size: 80%;
|
|
color: #ABABAB;
|
|
display: block;
|
|
padding: 4px;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.now-playing-header .controls li a:hover {
|
|
background-color: #E0E0E0;
|
|
transition: 500ms;
|
|
}
|
|
|
|
.page_header_left {
|
|
width: auto;
|
|
float: none;
|
|
clear: both;
|
|
}
|
|
|
|
.page_header_right {
|
|
float: right;
|
|
clear: both;
|
|
margin-top: -2em;
|
|
}
|
|
|
|
.scroll_top_floater {
|
|
position: fixed;
|
|
right: 5px;
|
|
bottom: 30px;
|
|
display: block;
|
|
height: 30px;
|
|
width: 30px;
|
|
background: url("/images/icons/navigation/go_top_arrow.png") no-repeat 50% 50%;
|
|
background-color: #ABABAB;
|
|
}
|
|
|
|
.scroll_top_floater:hover {
|
|
background-color: #898989;
|
|
}
|
|
|
|
.tabs_navigation li a:hover,
|
|
.tabs_navigation li a.selected,
|
|
.tabs_navigation li.ui-tabs-active a {
|
|
background-color: #03A6E0;
|
|
}
|
|
|
|
.tabs_navigation li.ui-tabs-active span {
|
|
border-top-color: #03A6E0;
|
|
border-bottom-color: #03A6E0;
|
|
}
|
|
|
|
.box_header {
|
|
border-left-color: #1F3977;
|
|
}
|
|
|
|
.more.active,
|
|
.more:hover
|
|
{
|
|
transition: 500ms;
|
|
background-color: #1F3977;
|
|
border-color: #2F4A88;
|
|
}
|
|
|
|
.menu_container, .sf-menu li {
|
|
border-top-color: #03A6E0;
|
|
}
|
|
|
|
.sf-menu li:hover, .sf-menu li.selected, .sf-menu li.submenu:hover {
|
|
border-top-color: #1F3977;
|
|
}
|
|
|
|
|
|
.mobile-menu-switch:hover {
|
|
background: #1F3977;
|
|
}
|
|
|
|
.mobile-menu-switch {
|
|
border-color: #1F3977;
|
|
}
|
|
|
|
.mobile-menu-switch .line {
|
|
background: #03A6E0;
|
|
}
|
|
|
|
.mobile-menu li.selected a, .mobile-menu li.selected ul li.selected a, .mobile-menu li.selected ul li.selected ul li.selected a {
|
|
background: #1F3977;
|
|
}
|
|
|
|
|
|
button[disabled],
|
|
button[disabled]:hover
|
|
{
|
|
background-color: #F0F0F0;
|
|
border-color: #D0D0D0;
|
|
color: #333333;
|
|
cursor: default;
|
|
}
|
|
|
|
.latest_news_scrolling_list .when
|
|
{
|
|
float: right;
|
|
color: #7C7C7C;
|
|
margin-left: 2em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.search {
|
|
border: none;
|
|
margin-right: 50px;
|
|
background: none;
|
|
color: #464D53;
|
|
height: 40px;
|
|
}
|
|
|
|
.search .search_input.hint {
|
|
color: inherit;
|
|
}
|
|
|
|
.search .search_input {
|
|
background: none;
|
|
border: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.search .search_submit {
|
|
font-size: 0;
|
|
}
|
|
|
|
.search .search_submit:hover {
|
|
background-color: #03A6E0;
|
|
}
|
|
|
|
.slider_posts_list .slider_posts_list_bar {
|
|
background-color: #1F3977;
|
|
}
|
|
|
|
.post h2,
|
|
.post h5 {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.post.single .post_details a {
|
|
color: #1F3977;
|
|
}
|
|
|
|
.post_details li.category
|
|
{
|
|
font-weight: bold;
|
|
background-color: #03A6E0;
|
|
}
|
|
|
|
.blog .post_details li.date {
|
|
display: block;
|
|
border: none !important;
|
|
padding-left: 3px;
|
|
clear: both;
|
|
}
|
|
|
|
.post_details p {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.post_details.simple li.category a {
|
|
color: #1F3977;
|
|
}
|
|
|
|
.post_details.simple li.category a.over_image {
|
|
color: white;
|
|
}
|
|
|
|
.post_details date.edited {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.read_more .arrow {
|
|
background-color: #03A6E0;
|
|
}
|
|
|
|
.row.grid .card .post_content {
|
|
padding: 4px;
|
|
border: solid 1px #03A6E022;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.row.grid .column {
|
|
margin: 0px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.grid .post {
|
|
clear: none;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.blog_grid .post.large {
|
|
/* Width is 787px, so ensure largest photo has 16:9 ratio. */
|
|
height: 442px;
|
|
}
|
|
|
|
.blog_grid .post.small {
|
|
/* Height of main is 442, minus two 2px margins, leaves 146px per item */
|
|
height: 146px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.blog.podcasts .post {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.blog.podcasts .post p {
|
|
margin-top: 0px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.blog.small .post img {
|
|
width: 100px;
|
|
}
|
|
|
|
.blog_grid .post img {
|
|
/* Gaat meestal goed, alleen op tablet moet plaatje iets uitgerekt worden. */
|
|
height: 100%;
|
|
}
|
|
|
|
.post.single {
|
|
width: 100%;
|
|
}
|
|
|
|
.post.no_img .post_content {
|
|
width: 100%;
|
|
}
|
|
|
|
.horizontal_carousel_container.gallery_control .horizontal_carousel > li {
|
|
position: relative;
|
|
width: 250px;
|
|
height: 133px;
|
|
}
|
|
|
|
.horizontal_carousel_container.gallery .horizontal_carousel > li {
|
|
width: auto;
|
|
height: 250px;
|
|
}
|
|
|
|
.horizontal_carousel_container.gallery .horizontal_carousel > li img {
|
|
height: 250px;
|
|
}
|
|
|
|
.mega_menu a.fixed-height {
|
|
width: auto;
|
|
height: 135px;
|
|
}
|
|
|
|
a.fixed-height {
|
|
display: block;
|
|
position: relative;
|
|
height: 300px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
a.fixed-height img {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.action_button
|
|
{
|
|
position: relative;
|
|
display: inline-block;
|
|
height: 29px;
|
|
float: left;
|
|
color: #25282A;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-top: 10px;
|
|
margin-right: 20px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.action_button span
|
|
{
|
|
display: block;
|
|
line-height: normal;
|
|
margin-top: 7px;
|
|
position: relative;
|
|
margin-left: 38px;
|
|
}
|
|
|
|
.action_button .fa
|
|
{
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 29px;
|
|
line-height: 29px;
|
|
vertical-align: middle;
|
|
background-color: #03A6E0;
|
|
color: white;
|
|
margin-top: 0;
|
|
margin-left: 0;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.action_button:hover
|
|
{
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.action_button:not(.disabled):hover .fa,
|
|
.read_more:not(.disabled):hover span
|
|
{
|
|
transition: 200ms;
|
|
width: 100%;
|
|
}
|
|
|
|
.action_button.disabled {
|
|
color: #A1A1A1;
|
|
}
|
|
|
|
.action_button.disabled span.fa {
|
|
background-color: #E4E4E4;
|
|
}
|
|
|
|
.text-muted {
|
|
color: #7C7C7C;
|
|
}
|