@charset "utf-8";
@import url("GermaniaOne_Regular/stylesheet.css");
@import url("A_Monumentottldccm/stylesheet.css");
/* Eenvoudige, dynamische media
Opmerking: voor dynamische media moet u de hoogte- en breedtekenmerken voor de media verwijderen uit de HTML-code
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 biedt geen ondersteuning voor max-width en gebruikt standaard de breedte 100% */
.ie6 img {
width: 100%;
}
/*
Eigenschappen van dynamisch raster van Dreamweaver
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 25;
Geïnspireerd door "Responsive Web Design" van Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
en "Golden Grid System" van Joni Korpi
http://goldengridsystem.com/
*/
/* Mobiele lay-out: 480 px en lager. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
width: 100%;
display: block;
margin-top: 1em;
height: 100%;
margin-bottom: 1em;
}
#amfi {
clear: both;
float: left;
margin: 1%;
width: 47%;
height: 100px;
display: block;
border-radius: 25px;
border: solid 1px;
text-align: center;
}
#vogels {
clear: none;
float: left;
margin: 1%;
width: 47%;
height: 100px;
display: block;
border-radius: 25px;
border: solid 1px;
text-align: center;
}
#vissen {
clear: both;
float: left;
margin: 1%;
width: 47%;
height: 100px;
display: block;
border-radius: 25px;
border: solid 1px;
text-align: center;
}
#zoog {
clear: none;
float: left;
margin: 1%;
width: 47%;
height: 100px;
display: block;
border-radius: 25px;
border: solid 1px;
text-align: center;
}
#footer {
clear: both;
float: left;
margin-left: 0;
margin-top:1em;
width: 100%;
display: block;
font-size: 10px;
text-align: center;
}
#nav {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
height: 30px;
text-align: center;
margin-top: -40px;
background-color: rgba(204,204,204,1);
opacity: 0.5;
margin-bottom: 1em;
text-shadow: 2px 2px #FF0000;
word-spacing: 0.5em;
font-size: 0.8em;
}
#content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#blok_1 {
clear: none;
float: left;
width: 45%;
display: block;
margin-top:1em;
margin-left:0.7%;
position: relative;
}
#blok_2 {
clear: none;
float: right;
width: 45%;
display: block;
margin-top: 1em;
margin-left: 1.5%;
position: relative;
}
#blok_3 {
clear: none;
float: left;
margin-left: 1.5%;
display: block;
width: 45%;
margin-top: 1em;
position: relative;
}
#blok_4 {
clear: none;
float: right;
width: 45%;
display: block;
margin-left:0.7%;
margin-top: 1em;
position: relative;
}
#blok_5 {
clear: both;
float: left;
width: 45%;
display: block;
margin-top: 1em;
margin-left: 1.5%;
position:relative;
}
#blok_6 {
clear: none;
float: right;
margin-left: 1.5%;
width: 45%;
display: block;
margin-top: 1em;
position:relative;
}
#content #blok_6 .center {
color: rgba(42,0,0,1);
}
#blok_1 img {
width: 100%;
height: 150px;
}
#blok_2 img {
width: 100%;
height: 150px;
}
#blok_3 img {
width: 100%;
height: 150px;
}
#blok_4 img {
width: 100%;
height: 150px;
}
#blok_5 img {
width: 100%;
height: 150px;
}
#blok_6 img {
width: 100%;
height: 150px;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
color: rgba(255,255,255,1);
}
#footer p {
font-family: "GermaniaOne Regular";
}
#verloop {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
height: 50px;
background-image: linear-gradient(black, white, black);
}
/* Tabletlay-out: 481 px tot 768 px. Neemt stijlen over van: mobiele lay-out. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
width: 100%;
display: block;
height: auto;
}
#amfi {
clear: both;
float: left;
width: 22.5%;
margin:1%;
margin-left: 1%;
display: block;
border-radius: 25px;
border: solid 1px;
text-align: center;
text-decoration: none;
}
#vogels {
clear: none;
float: left;
margin:1%;
width: 22.5%;
display: block;
border-radius: 25px;
border: solid 1px;
text-align: center;
text-decoration: none;
}
#vissen {
clear: none;
float: left;
margin:1%;
width: 22.5%;
display: block;
border-radius: 25px;
border: solid 1px;
text-align: center;
}
#zoog {
clear: none;
float: left;
margin:1%;
width: 22.5%;
display: block;
border-radius: 25px;
border: solid 1px;
text-align: center;
}
#footer {
clear: both;
float: left;
margin-left: 0;
margin-top:1em;
width: 100%;
display: block;
text-align: center;
font-size: 16px;
}
#nav {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
text-align: center;
height: 30px;
margin-top: -40px;
word-spacing:0.3em;
margin-bottom: 1em;
background-color: rgba(204,204,204,1);
opacity: 0.5;
padding-bottom: 1em;
text-shadow: 2px 2px #FF0000;
font-size:1em;
}
#content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#blok_1 {
clear: none;
float: left;
width: 32%;
display: block;
margin-left: 0.7%;
margin-top: 1em;
position:relative;
}
#blok_2 {
clear: none;
float: left;
margin-left:1.5%;
width: 32%;
display: block;
margin-top: 1em;
position:relative;
}
#blok_3 {
clear: none;
float: left;
width: 32%;
display: block;
margin-left: 1.5%;
margin-top: 1em;
position:relative;
}
#blok_4 {
clear: both;
float: left;
width: 32%;
display: block;
margin-left: 0.7%;
margin-top: 1em;
position:relative;
}
#blok_5 {
clear: none;
float: left;
margin-left: 1.5%;
width: 32%;
display: block;
margin-top: 1em;
position:relative;
}
#blok_6 {
clear: none;
float: left;
margin-left: 1.5%;
width: 32%;
display: block;
margin-top: 1em;
position:relative;
}
#blok_1 img {
width: 100%;
height: 200px;
}
#blok_2 img {
width: 100%;
height: 200px;
}
#blok_3 img {
width: 100%;
height: 200px;
}
#blok_4 img {
width: 100%;
height: 200px;
}
#blok_5 img {
width: 100%;
height: 200px;
}
#blok_6 img {
width: 100%;
height: 200px;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
color: rgba(255,255,255,1);
}
#footer p {
font-family: "GermaniaOne Regular";
}
#verloop {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
height: 10px;
background-image: linear-gradient(black, white, black);
}
}
/* Bureaubladlay-out: 769 px tot maximaal 1232 px. Neemt stijlen over van: mobiele lay-out en tabletlay-out. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#nav {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
text-align: center;
height: 30px;
margin-top: -40px;
background-color: rgba(204,204,204,1);
opacity: 0.5;
margin-bottom: 1em;
word-spacing: 5em;
text-shadow: 2px 2px #FF0000;
font-size: 1em;
}
#header {
clear: none;
float: left;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
width: 100%;
display: block;
height: auto;
}
#amfi {
clear: both;
float: left;
margin: 1%;
margin-left: 2.5%;
width: 22%;
display: block;
border-radius: 25px;
border: solid 1px;
text-align: center;
text-decoration: none;
}
#vogels {
clear: none;
float: left;
margin: 1%;
width: 22%;
display: block;
border-radius: 25px;
border: solid 1px;
text-align: center;
}
#vissen {
clear: none;
float: left;
margin:1%;
width: 22%;
display: block;
border-radius: 25px;
border: solid 1px;
text-align: center;
}
#zoog {
clear: none;
float: left;
margin:1%;
width: 22%;
display: block;
border-radius: 25px;
border: solid 1px;
text-align: center;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
text-align: center;
font-size: 16px;
margin-top: 1em;
}
#content {
clear: both;
float: left;
width: 100%;
display: block;
}
#blok_1 img {
width: 100%;
height: 200px;
}
#blok_2 img {
width: 100%;
height: 200px;
}
#blok_3 img {
width: 100%;
height: 200px;
}
#blok_4 img {
width: 100%;
height: 200px;
}
#blok_5 img {
width: 100%;
height: 200px;
}
#blok_6 img {
width: 100%;
height: 200px;
}
#blok_1 {
clear: none;
float: left;
width: 32.1%;
display: block;
margin-top: 1em;
margin-left: 0.7%;
position:relative;
}
#blok_2 {
clear: none;
float: left;
width: 32.1%;
display: block;
margin-top: 1em;
margin-left: 1.5%;
position:relative;
}
#blok_3 {
clear: none;
float: left;
width: 32.1%;
display: block;
margin-top: 1em;
margin-left: 1.5%;
position:relative;
}
#blok_4 {
clear: both;
float: left;
width: 32.1%;
display: block;
margin-left: 0.7%;
margin-top: 1em;
position:relative;
}
#blok_5 {
clear: none;
float: left;
margin-left: 1.5%;
width: 32.1%;
display: block;
margin-top: 1em;
position:relative;
}
#blok_6 {
clear: none;
float: left;
margin-left: 1.5%;
width: 32.1%;
display: block;
margin-top: 1em;
position:relative;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
color: rgba(255,255,255,1);
}
#footer p {
font-family: "GermaniaOne Regular";
}
#verloop {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
height: 20px;
background-image: linear-gradient(black, white, black);
}
}
#nav ul {
list-style-type: none;
text-align: center;
font-size: 1em;
}
#nav ul li {
display: inline;
}
}