Files
Eigenwijs-Kinderdagverblijf/src/css/style.css
T
2026-06-17 11:59:05 +02:00

1036 lines
18 KiB
CSS

/* Copyright @ Eigenwijs Kinderdagverblijf */
/*****************************************/
/* HTML TAGS */
/* */
/*****************************************/
a {
text-decoration:none;
}
body{
padding:0;
margin:0;
font:normal 16px/22px "Calibri", Arial, Helvetica, sans-serif;
color:#6b6a6a;
background:url(../images/toop-bg.jpg) center top repeat-x #ffffff;
}
h1, h2, h3, h4, h5, h6, p, ul, li, a, img, form, td, div, table, tr{
padding:0;
margin:0;
}
h1, h2, h3, h4, h5, h6{
padding:0;
margin:0;
display: inline;
}
button {
margin: 0;
padding: 0;
}
img {
border-style: none;
}
/*****************************************/
/* FONT FACE */
/* */
/*****************************************/
@font-face {
font-family: 'hvd_comic_serif_proregular';
src: url('../font/hvd_comic_serif_pro_1-webfont.eot');
src: url('../font/hvd_comic_serif_pro_1-webfontd41d.eot?#iefix') format('embedded-opentype'),
url('../font/hvd_comic_serif_pro_1-webfont.woff') format('woff'),
url('../font/hvd_comic_serif_pro_1-webfont.ttf') format('truetype'),
url('../font/hvd_comic_serif_pro_1-webfont.html#hvd_comic_serif_proregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima_nova_rgregular';
src: url('../font/proximanova-regular-webfont.eot');
src: url('../font/proximanova-regular-webfontd41d.eot?#iefix') format('embedded-opentype'),
url('../font/proximanova-regular-webfont.woff') format('woff'),
url('../font/proximanova-regular-webfont.ttf') format('truetype'),
url('../font/proximanova-regular-webfont.html#proxima_nova_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima_nova_ltbold';
src: url('../font/proximanova-semibold-webfont.eot');
src: url('../font/proximanova-semibold-webfontd41d.eot?#iefix') format('embedded-opentype'),
url('../font/proximanova-semibold-webfont.woff') format('woff'),
url('../font/proximanova-semibold-webfont.ttf') format('truetype'),
url('../font/proximanova-semibold-webfont.html#proxima_nova_ltbold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'nillandregular';
src: url('../font/nilland-webfont.html');
src: url('../font/nilland-webfontd41d.html?#iefix') format('embedded-opentype'),
url('../font/nilland-webfont.woff') format('woff'),
url('../font/nilland-webfont.ttf') format('truetype'),
url('../font/nilland-webfont-2.html#nillandregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima_nova_ltbold_italic';
src: url('../font/proximanova-semibolditalic-webfont.eot');
src: url('../font/proximanova-semibolditalic-webfontd41d.eot?#iefix') format('embedded-opentype'),
url('../font/proximanova-semibolditalic-webfont.woff') format('woff'),
url('../font/proximanova-semibolditalic-webfont.ttf') format('truetype'),
url('../font/proximanova-semibolditalic-webfont.html#proxima_nova_ltbold_italic') format('svg');
font-weight: normal;
font-style: normal;
}
/*****************************************/
/* DIVS */
/* */
/*****************************************/
#holder {
position: relative;
top:0px;
left: 0px;
height: auto;
width: 100%;
}
/* WRAPPER .. HOLDS ALL CONTAINERS TOGETHER */
#wrapper {
position: relative;
top: 10px;
left: 50%;
width: 960px;
height: auto;
margin-left: -470px;
z-index: 100;
}
/* CLEAR .. ADDS SPACING BETWEEN CONTAINERS */
#clear {
position: relative;
left: 0px;
top: 0px;
height: 0;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
font-size:0;
line-height:0;
clear:both;
}
/* CONTAINER .. HOLDS DIVS RELATIVE FROM EACHOTHER */
#container {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: auto;
}
#notification {
position: relative;
top: 0px;
left: 0px;
width: auto;
min-height: 50px;
box-shadow: 0px 2px 8px #666666;
background: #BBEF66;
border: 1px solid #AAEA55;
padding: 1px;
cursor: pointer;
}
#notification p{ font-size: 20px; color: #545454; margin: 0; margin-bottom: 10px; padding: 15px 25px 0px 25px;}
#notification a{ color: #545454; font-weight: bold;}
/* HEADER .. HOLDS LOGO */
#header {
position: relative;
top: 0px;
left: 0px;
width: auto;
height: 130px;
}
#header #left {
position: absolute;
background-image: url(../images/logo.png);
background-repeat: no-repeat;
background-position: center;
width: 390px;
height: 100%;
top:0;
left:0;
}
#header #right {
position: absolute;
background-repeat: no-repeat;
background-position: center;
width: 237px;
height: 68px;
top:30px;
left:400px;
}
/* NAV .. HOLDS BUTTONS FOR NAVIGATION */
#nav {
position: relative;
top: 0px;
left: 0px;
width: auto;
height: 41px;
}
#nav ul{
padding:0;
margin:0;
text-align:center;
float:none;
margin-left: 20px;
}
#nav ul li{
font:normal 17px/38px 'nillandregular', Arial, Helvetica, sans-serif;
font-family: 'nillandregular' !important;
color:#fff;
list-style:none;
/*padding:0 15px 0 ;*/
float:left;
padding-right:13px;
text-align:center;
margin:0;
}
@media \0screen {
#nav ul li{
font:normal 17px/38px 'nillandregular', Arial, Helvetica, sans-serif;
font-family: 'nillandregular' !important;
color:#fff;
list-style:none;
/*padding:0 15px 0 ;*/
float:left;
padding-right:17px;
text-align:center;
margin:0;
}
}
#nav ul li a{
text-decoration:none;
color:#fff;
display:block;
padding:0 15px 0 ;
background:url(../images/nav-bg-norm.jpg) center top repeat-x;
text-shadow:2px 2px 1px #888;
border-right:3px solid #fff;
border-left:3px solid #fff;
border-top:3px solid #fff;
}
#nav ul li a:hover{
background:url(../images/nav-bg-hover.jpg) center top repeat-x;
display:block;
}
/* BANNER .. HOLDS BANNER IMAGE AND BUTTONS */
#banner {
position: relative;
top: 0px;
left: 0px;
width: auto;
height: 210px;
border-style: solid;
border-width: 8px;
border-color: #FFFFFF;
background: url(../images/banner.jpg) center top repeat-x;
box-shadow: 0px 2px 8px #666666;
}
#banner a{
text-decoration:none;
cursor:pointer;
}
#banner #account-knop{
position:absolute;
right:-32px;
top:20px;
padding:0;
margin:0;
background:url(../images/account.png) right top no-repeat;
width:276px;
height:90px;
}
#banner #account-knop:hover{
position:absolute;
right:-32px;
top:20px;
padding:0;
margin:0;
background:url(../images/account-hover.png) right top no-repeat;
width:276px;
height:90px;
}
#banner #account-knop h1{
font:bold 28px/32px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#fff;
text-shadow:2px 3px 2px #20a8c7;
text-transform:uppercase;
text-align:right;
padding-right:25px;
margin:0;
display: block;
}
#banner #account-knop h2{
font:bold 18px/20px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#fff;
text-shadow:2px 2px 2px #20a8c7;
text-transform:uppercase;
text-align:right;
padding:20px 27px 3px 0;
margin:0;
display: block;
}
#banner #login-knop{
position:absolute;
right:-32px;
top:110px;
padding:0;
margin:0;
background:url(../images/login.png) right top no-repeat;
width:276px;
height:90px;
}
#banner #login-knop:hover{
position:absolute;
right:-32px;
top:110px;
padding:0;
margin:0;
background:url(../images/login-hover.png) right top no-repeat;
width:276px;
height:90px;
}
#banner #login-knop h1{
font:bold 28px/32px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#fff;
text-shadow:2px 3px 2px #85ab1f;
text-transform:uppercase;
text-align:right;
padding-right:25px;
margin:0;
display: block;
}
#banner #login-knop h2{
font:bold 18px/20px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#fff;
text-shadow:2px 2px 2px #85ab1f;
text-transform:uppercase;
text-align:right;
padding:20px 27px 3px 0;
margin:0;
display: block;
}
/* MAIN .. HOLDS MAIN CONTENT*/
#main {
position: relative;
top: 0px;
left: 0px;
width: auto;
min-height: 500px;
height: auto;
}
/* FOOTER .. HOLDS FOOTER AND STUFF */
#footer {
position: absolute;
bottom: 0px;
left: 50%;
width: 960px;
margin-left: -470px;
height: 70px;
}
.footer-nav{
padding:0;
margin:0;
}
.footer-nav ul{
font:normal 13px/18px Arial, Helvetica, sans-serif;
color:#fff;
padding:0;
margin:0;
}
.footer-nav ul li{
list-style:none;
float:left;
padding:0 14px 0 0;
}
.footer-nav ul li a{
text-decoration:none;
color:#fff;
}
.footer-nav ul li a:hover{
color:#495d08;
}
.copy-right{
font:normal 13px/18px Arial, Helvetica, sans-serif;
color:#d7f087;
padding:0;
margin:0;
text-align:right;
}
.copy-right a{
text-decoration:none;
color:#d7f087;
}
.copy-right a:hover{
text-decoration:underline;
color:#ffffff;
}
#footer_background {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 343px;
background:url(../images/footer-bg.jpg) center bottom repeat-x #ffffff;
z-index: 0;
}
/*******************************/
/* INDEX */
/*******************************/
/* TEXT .. HOLDS MAIN TEXT AREA */
#main #text {
position: absolute;
left: 0px;
top: 0px;
width: 550px;
height: auto;
}
#main #text.groen {
position: absolute;
left: 0px;
top: 0px;
width: 506px;
height: auto;
padding: 20px;
background-color: #ACCF3D;
border-style: solid;
border-width: 4px;
border-color: #FFFFFF;
box-shadow: 0px 2px 2px #888888;
}
#main #text h1{
font:normal 35px/32px 'hvd_comic_serif_proregular', Arial, Helvetica, sans-serif;
color:#0cbfe2;
padding-bottom:10px;
display: block;
}
#main #text h3{
font:normal 20px/24px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#7fb8c3;
display: block;
}
#main #text.groen h3.white{
font:normal 20px/24px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#FFFFFF;
display: block;
}
#main #text p{
font:normal 17px/25px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#6b6a6a;
padding-bottom:7px;
}
#main #text a{
color:#D96902;
}
/* MAIN NEWS .. HOLDS MAIN NEWS AREA */
#main #news {
position: absolute;
right: 0px;
top: 0px;
background:url(../images/latest-news-bg.png) right top no-repeat;
width: 350px;
height: 330px;
padding-top: 30px;
}
#main #news h2{
font:normal 30px/32px 'hvd_comic_serif_proregular', Arial, Helvetica, sans-serif;
color:#eb539e;
padding:0;
margin:0 0 0 30px;
}
#main #news #date-container{
width:266px;
padding:0;
margin:0;
margin-left: 30px;
}
#main #news #date{
padding-top:10px;
margin:0 10px 0 0;
text-align:center;
background:url(../images/date-bg.jpg) 0 0 no-repeat;
width:78px;
height:75px;
float:left;
}
#main #news #date h2{
font:bold 40px/31px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif !important;
color:#ffffff;
padding:0;
margin:13px 0 0 0;
}
#main #news #date h3{
font:bold 18px/20px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#fff;
text-transform:uppercase;
padding:0;
margin:0;
}
#main #news #latest-post{
width:178px;
padding:0;
margin:0;
float:right;
}
#main #news #latest-post h5{
font:normal 18px/18px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#02a8c8;
padding:0 0 5px 0;
margin:0;
}
#main #news #latest-post h5 a{
font:normal 18px/18px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#02a8c8;
text-decoration:none;
}
#main #news #latest-post h5 a:hover{
font:normal 18px/18px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#eb539e;
text-decoration:none;
cursor:pointer;
}
#main #news #latest-post p{
font:normal 13px/18px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#464646;
padding:0;
margin:0;
}
/* CONTACT .. HOLDS CONTACT BANNER */
#contact{
position: absolute;
background: url(../images/contact-bg.png) center top no-repeat;
height:173px;
padding:40px;
margin:0;
top: 400px;
left: 0px;
width: auto;
}
#contact p{
font:normal 18px/26px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#ffffff;
padding:0;
margin-left:350px;
text-align:right;
width: 550px;
right: 0;
}
#contact a{
text-decoration:none;
text-transform:uppercase;
color:#fedb01;
}
#contact a:hover{
text-decoration:none;
text-transform:uppercase;
color:#01fefb;
cursor:pointer;
}
#spacer {
position: absolute;
top: 600px;
width: 100%;
left: 0px;
height: 50px;
}
/*******************************/
/* PAGE */
/*******************************/
/*******************************/
/* KIND BANNER */
/*******************************/
#kind_b{
height:150px;
padding: 0px;
margin: 2px 0px 8px 0px;
width: auto;
border:5px solid #FFF;
box-shadow: 0px 2px 2px #888;
}
#kind_b.nr1{
background-color: #8968AF;
}
#kind_b.nr1:hover{
background-color: #9473BA;
}
#kind_b.nr2{
background-color: #2BC2DF;
}
#kind_b.nr2:hover{
background-color: #37C9E6;
}
#kind_b.nr3{
background-color: #ACCF3D;
}
#kind_b.nr3:hover{
background-color: #B6D94A;
}
#kind_b.nr4{
background-color: #DF482B;
}
#kind_b.nr4:hover{
background-color: #E8563A;
}
#kind_b.nr5{
background-color: #B33820;
border-color: #D17260;
}
#kind_b.nr5:hover{
background-color: #D17260;
border-color: #B33820;
}
#kind_b img {
float: left;
margin-top: 15px;
margin-left: 10px;
height: 115px;
border-style: solid;
border-width: 2px;
border-color: #FFF;
background-color: lightgrey;
}
#kind_b #cont {
position: absolute;
height: 120px;
width: auto;
margin-top: 25px;
left: 140px;
}
#kind_b #cont h1 {
font:bold 32px/36px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#fff;
text-align:right;
margin:0;
display: block;
}
#kind_b #cont p{
font:normal 18px/26px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#ffffff;
padding:0;
text-align:left;
width: 700px;
margin-top: 25px;
position: absolute;
}
#kind_b #cont p a{
text-decoration:none;
text-transform:uppercase;
color:#fedb01;
}
#kind_spacer {
height: 100px;
}
#kind_b a:hover{
text-decoration:none;
text-transform:uppercase;
color:#01fefb;
cursor:pointer;
}
/* OUDER BANNER */
#ouder_b{
height:55px;
padding: 0px;
margin: 2px 0px 8px 0px;
width: auto;
border:5px solid #FFF;
box-shadow: 0px 2px 2px #888;
cursor: pointer;
}
#ouder_b.nr1{
background-color: #8968AF;
}
#ouder_b.nr1:hover{
background-color: #9473BA;
}
#ouder_b.nr2{
background-color: #2BC2DF;
}
#ouder_b.nr2:hover{
background-color: #37C9E6;
}
#ouder_b.nr3{
background-color: #ACCF3D;
}
#ouder_b.nr3:hover{
background-color: #B6D94A;
}
#ouder_b.nr4{
background-color: #DF482B;
}
#ouder_b.nr4:hover{
background-color: #E8563A;
}
#ouder_b.nr5{
background-color: #B33820;
border-color: #D17260;
}
#ouder_b.nr5:hover{
background-color: #D17260;
border-color: #B33820;
}
#ouder_b #cont {
height: 50px;
width: auto;
margin-left: 20px;
margin-top: 2px;
}
#ouder_b #cont h1 {
font:bold 26px/30px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#fff;
text-align:right;
margin:0;
}
#ouder_b #cont p{
font:normal 18px/21px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
color:#ffffff;
text-align:left;
width: 700px;
}
/*****************************************/
/* CLASS */
/* */
/*****************************************/
.berichtbg {
background-color: #2BC2DF;
color: #FFF;
}
.berichtbg td {
padding: 8px 0px 8px 0px;
border-bottom-style: solid;
border-bottom-color: #336699;
border-bottom-width: 1px;
}
.berichtbg1 {
background-color: #E8F3FA;
cursor: pointer;
}
.berichtbg2 {
background-color: #D2E9FA;
cursor: pointer;
}
.berichtbg1:hover, .berichtbg2:hover {
background-color: #2BC2DF;
cursor: pointer;
color: #FFF;
}
.berichtbg1 td, .berichtbg2 td {
padding: 4px 5px 4px 0px;
}
.sendMailTextArea {
position: absolute;
height: auto;
width: auto;
margin: 0px;
padding-left: 8px;
border-style: none;
left: 0px;
right: 0px;
bottom: 0px;
top: 45px;
}
.sendMailTextArea:focus {
outline: 0;
}
.unread {
font-weight: bold;
}
/* BERICHTBG .. BERICHT BACKGROUNDS */
.nav_b {
margin: 0px;
padding: 0px;
}
.nav_b td {
margin: 10px;
text-align: center;
width: 120px;
height: 120px;
border-style: solid;
border-width: 1px;
border-color: rgba(40, 40, 150, 0.1);
}
.nav_b td:hover {
background-color: rgba(40, 40, 200, 0.1);
border-style: solid;
border-width: 1px;
border-color: rgba(40, 40, 150, 0.4);
}
header.h1_banner {
width: 949px;
height: 32px;
padding: 7px 0px 0px 5px;
background:url(../images/nav-bg-norm.jpg) center top repeat-x;
text-shadow:2px 2px 1px #888;
border:3px solid #FFF;
color: white;
box-shadow: 0px 2px 2px #888;
margin-bottom: 5px;
}
/* Account menu */
ul.account {
list-style-type: none;
padding: 0px;
margin: 20px 0px 0px 0px;
}
ul.account li {
width: 954px;
height: 30px;
border:3px solid #FFF;
color: #F2F2F2;
box-shadow: 0px 2px 2px #888;
background-color: #DE842A;
padding-top: 1px;
margin: 5px 0px 5px 0px ;
}
ul.account li img{
float: left;
margin: 2px 10px 0px 10px;
height: 25px;
}
ul.account li p.left{
margin: 0px 0px 0px 0px;
width: 600px;
height: 30px;
font:bold 26px/30px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
float: left;
}
ul.account li p.right{
margin: 0px 20px 0px 0px;
width: 250px;
height: 30px;
font:bold 26px/30px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
text-align: right;
float: right;
}
ul.account li:hover {
background-color: #E6913C;
}
img.kind_pag {
float: right;
margin-right: 10px;
height: 145px;
border-style: solid;
border-width: 2px;
border-color: #FFF;
background-color: lightgrey;
}
ul.foto {
list-style-type: none;
width: 960px;
vertical-align: top;
height: auto;
padding: 0px;
margin: 0px;
display: block;
}
#fotoalbum {
width: 100%;
height: auto;
clear: both;
position: relative;
margin-top: 10px;
}