html,body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  color: #000000;
  font-family: Tahoma, Verdana, Arial;
  font-size: 11px;
  background:  url('../images/body_bg.gif') top left repeat-x #F6F4F0;
}

.screenreader{
  display: none;
}

h1{
  display: none;
}

a{
  color: #FF7800;
}

a:hover{
  text-decoration: underline;
}

img{
  border: none;
}

#framework{
  position: relative;
  width: 976px;
  margin: 0 auto;
  border-bottom: 7px solid #f6f4f0;
  background: #FFF;
  min-height: 100%;
}

#logo{
  display: block;
  padding: 18px 0 18px 10px;
}

#carousel{
  position: relative;
  height: 364px;
  overflow: hidden;
  background: url('../images/carousel_bg.png') left bottom no-repeat;
}

#carousel-image{
  position: absolute;
  top: 0;
  left: 0;
}

#carousel-image img{
  position: absolute;
  top: 0;
  left: 0;
}

#carousel-control{
  position: absolute;
  width: 244px;
  height: 138px;
  top: 202px;
  left: 0;
}

#carousel-control #carousel-control-buttons{
  position: absolute;
}

#carousel-control #carousel-control-buttons ul{
  list-style: none;
  padding: 0;
  margin: 10px 0 0 15px;
}

#carousel-control #carousel-control-buttons li{
  float: left;
  height: 15px;
  width: 15px;
  margin-right: 3px;
  cursor: pointer;
}

#carousel-control #carousel-control-buttons ul.red li{
  background: url('../images/carousel-index-red_bg.png') no-repeat;
}

#carousel-control #carousel-control-buttons ul.yellow li{
  background: url('../images/carousel-index-yellow_bg.png') no-repeat;
}

#carousel-control #carousel-control-buttons ul.blue li{
  background: url('../images/carousel-index-blue_bg.png') no-repeat;
}

#carousel-control #carousel-control-buttons li#carousel-control-button-0{
  background-position: 0 0;
}

#carousel-control #carousel-control-buttons li#carousel-control-button-0.active{
  background-position: 0 -15px;
}

#carousel-control #carousel-control-buttons li#carousel-control-button-1{
  background-position: -18px 0;
}

#carousel-control #carousel-control-buttons li#carousel-control-button-1.active{
  background-position: -18px -15px;
}

#carousel-control #carousel-control-buttons li#carousel-control-button-2{
  background-position: -36px 0;
}

#carousel-control #carousel-control-buttons li#carousel-control-button-2.active{
  background-position: -36px -15px;
}

#carousel-control #carousel-control-buttons li#carousel-control-button-3{
  background-position: -54px 0;
}

#carousel-control #carousel-control-buttons li#carousel-control-button-3.active{
  background-position: -54px -15px;
}

#carousel-control .carousel-control-content{
  display: none;
  height: 118px;
  width: 214px;
  padding: 10px 15px;
}

#carousel-control .carousel-control-content.selected{
  display: block;
}

#carousel-control .carousel-control-content.red{
  background: url('../images/carousel-control_red_bg.png') left bottom no-repeat;
}

#carousel-control .carousel-control-content.yellow{
  background: url('../images/carousel-control_yellow_bg.png') left bottom no-repeat;
}

#carousel-control .carousel-control-content.blue{
  background: url('../images/carousel-control_blue_bg.png') left bottom no-repeat;
}

#carousel-control h3{
  margin: 5px 0 0 0;
  font-family: Trebuchet MS;
  color: #FFF;
  font-size: 1.7em;
  line-height: 1em;
}

#carousel-control a{
  position: absolute;
  bottom: 10px;
  font-family: Tahoma;
  color: #FFFFFF;
  font-size: 1.2em;
  text-decoration: none;
  padding: 0 0 0 15px;
  background: url('../images/carousel-control-link_bg.png') left 3px no-repeat;
}

#carousel-control a:hover{
  text-decoration: underline;
}

#carousel-control hr{
  display: none;
}

#carousel-control .ruler{
  height: 3px;
  width: 212px;
  margin: 20px 0 0 0;
  background: url('../images/carousel-control-ruler_bg.png') left top no-repeat;
}

#search{
  width: 444px;
  height: 176px;
  color: #D1DDEC;
  background: url('../images/search_bg.png');
  position: relative;
  float: right;
  margin: 20px 15px 0 0;
  padding: 10px;
}

#search p{
  margin: 8px 0 0 0;
  font-size: 1.1em;
}

#search a{
  color: #D1DDEC;
  text-decoration: none;
}

#search a:hover{
  text-decoration: underline;
}

#search h2#h2-zoek{
  text-indent: -1982px;
  width: 43px;
  height: 14px;
  margin: 0;
  background: url('../images/h2-zoek_bg.png') no-repeat;
}

#search h3{
  text-indent: -1982px;
  margin: 10px 0 5px 0;
}

#search h3#h3-meerinformatiebronnen{
  height: 13px;
  width: 42px;
  background: url('../images/h3-meerinformatiebronnen_bg.png') no-repeat;
}

#search h3#h3-voorkbpashouders{
  height: 13px;
  width: 132px;
  background: url('../images/h3-voorkbpashouders_bg.png') no-repeat;
}

#search form{
  margin: 5px 0;
  height: 60px;
  position: relative;
}

#search #searchquery{
  width: 355px;
  height: 20px;
}

#search #label-searchquery{
  display: none;
}

#search .inputgroup{
  margin-top: 10px;
  clear: both;
  position: relative;
}

#search #searchquery-inputgroup{
  margin: 0;
}

#search label{
  display: block;
  float: left;
  margin: 0 13px 0 4px;
  color: #FFFFFF;
  height: 20px;
  line-height: 19px;
  background: url('../images/search-label_bg.png') repeat-x bottom left;
  cursor: pointer;
}

#search .checkbox{
  float: left;
}

#search hr{
  display: none;
}

#search .ruler{
  width: 432px;
  height: 3px;
  background: url('../images/search-ruler_bg.png');
}

#search #submit{
  position: absolute;
  top: 0;
  right: 5px;
  display: block;
  width: 66px;
  height: 32px;
  background: url('../images/search-submit_bg.png');
  border: 0;
  text-indent: -1982px;
  font-size: 0;
  line-height: 99px;
}

#search .block{
  float: left;
  width: 215px;
}

#search .block ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

#search .block li {
  margin-bottom: 0.3em;
}

#search .block li a{
  background: url('../images/search-link_bg.png') 0 50% no-repeat;
  padding-left: 20px;
  font-size: 110%;
}

#search .search-popup{
  display: none;
  position: absolute;
  top: 18px;
  left: 2px;
  width: 238px;
  height: 100px;
  font-size: 1.1em;
  line-height: 1.25em;
  padding: 21px 15px 15px 15px;
  background: url('../images/search-popup_bg.png') left 0px no-repeat;
  color: #000000;
}

#search #filter-tijdschriften-popup {
  left: 73px;
}
#search #filter-kranten-popup {
  left: 170px;
}
#search #filter-beeldmateriaal-popup {
  left: 38px;
  background: url('../images/search-popup-right_bg.png') left 0px no-repeat;
}
#search #filter-website-popup {
  left: 147px;
  background: url('../images/search-popup-right_bg.png') left 0px no-repeat;
}

#search .search-popup-active{
  display: block;
}

#search .search-popup-active a{
  color: #000000;
  text-decoration: underline;
}

#error{
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 464px;
  height: 28px;
  background: url('../images/error_bg.png') no-repeat;
  color: #656058;
  font-size: 1.1em;
  padding: 8px 0 0 80px;
  overflow: hidden;
}

#error a{
color: #003b79;
}


#maincontent:after{ 
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#maincontent .block{
  padding-left: 15px;
  margin-top: 15px;
  margin-right: 10px;
  width: 218px;
  min-height: 350px;
  float: left;
}

#maincontent #block-debibliotheek{
  background: url('../images/block-debibliotheek_bg.png') no-repeat;
}

#maincontent #block-exposities{
  background: url('../images/block-exposities_bg.png') no-repeat;
}

#maincontent #block-overdekb{
  background: url('../images/block-overdekb_bg.png') no-repeat;
}

#maincontent h2{
  text-indent: -1982px;
  margin: 0 0 7px 0;
  height: 14px;
}

#maincontent a.more{
  text-decoration: none;
  font-size: 1.2em;
  padding-left: 15px;
  line-height: 15px;
  display: block;
  margin-top: 15px;
}

#maincontent h2#h2-actueel{
  width: 54px;
  background: url('../images/h2-actueel_bg.png') no-repeat;
}

#maincontent h2#h2-agenda{
  width: 54px;
  background: url('../images/h2-agenda_bg.png') no-repeat;
  float: left;
  margin-bottom: 5px;
}

#maincontent h2#h2-debibliotheek{
  width: 103px;
  background: url('../images/h2-debibliotheek_bg.png') no-repeat;
}

#maincontent h2#h2-expositiesencollecties{
  width: 161px;
  background: url('../images/h2-expositiesencollecties_bg.png') no-repeat;
}

#maincontent h2#h2-ookvandekb{
  width: 104px;
  background: url('../images/h2-ookvandekb_bg.png') no-repeat;
}

#maincontent h2#h2-kalender{
  width: 160px;
  background: url('../images/h2-kalender_bg.png') no-repeat;
}

#maincontent h2#h2-overdekb{
  width: 80px;
  background: url('../images/h2-overdekb_bg.png') no-repeat;
}

#maincontent a{
  color: #000000;
  font-size: 1.1em;
  text-decoration: none;
}

#maincontent a:hover{
  text-decoration: underline;
}

#maincontent ul{
  margin: 0 0 15px 0;
  padding: 0;
  list-style: none;
}

#maincontent li{
  margin-bottom: 0.4em;
}

#maincontent #rss-button{
  display: block;
  text-indent: -1982px;
  width: 37px;
  height: 22px;
  margin: -2px -5px 0 0;
  background: url('../images/rss.png') no-repeat;
  float: right;
}

table#agenda{
  border-collapse: collapse;
  clear: both;
}

table#agenda th{
  display: none;
}

table#agenda td{
  vertical-align: top;
  padding: 0 0 0 8px;
  padding-bottom: 0.5em;
}

table#agenda .date{
  color: #CA9F00;
  font-size: 1.1em;
  padding: 0;
  width: 35px;
}

#maincontent #block-actueel a.more{
  background: url('../images/arrow-gold.png') center left no-repeat;
  color: #CA9F00;
}

#footer{
  clear: both;
  color: #3F392F;
/*  margin: 50px 0 15px 15px;*/
  margin: 50px 0 0 0;
  padding: 0 20px 20px 15px;
  text-align: right;
}

#footer a{
  color: #3F392F;
  text-decoration: none;
}

#navigation{
  position: absolute;
  top: 5px;
  right: 0;
}

#navigation ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

#navigation li{
  float: left;
  margin-right: 15px;
}

#navigation li a{
  color: #3F392F;
  text-decoration: none;
}

#navigation li a:hover{
  text-decoration: underline;
}

body.small #framework{
  width: auto;
}

body.smaller #logo img{
  display: none;
}

body.smaller #logo{
  background: url('../images/home_logo_small.png') bottom center no-repeat;
  width: 221px;
  height: 19px;
  margin-bottom: 10px;
}

body.smaller #navigation{
  left: 5px;
}

body.smaller #framework{
  width: auto;
}

body.smaller #carousel{
  background: none;
}

body.smaller #carousel-image, body.smaller #carousel-control{
  display: none;
}

body.smaller #search{
  width: 222px;
  height: 600px;
  color: #D1DDEC;
  background: #003C7A;
  float: left;
  margin: 0;
  padding: 10px;
}

body.smaller #search #searchquery{
  width: 130px;
  height: 20px;
}

body.smaller #search label{
  float: none;
  margin: 0;
  color: #FFFFFF;
  height: auto;
  line-height: auto;
  background: none;
}

body.smaller #search .checkbox{
  clear: left;
}

body.smaller #search .ruler{
  background: none;
  margin-bottom: 80px;
}