/* Kleuren
 * -------
 * Donkergrijs: #908ea2
 * Grijs      : #d3d3dd
 * Lichtgrijs : #67677c
 *
 * Stijlen
 * -------
 * stijl_kleur1 = roze  = #ff3884
 * stijl_kleur2 = blauw = #069ad8
 * stijl_kleur3 = groen = #68cf42
 * stijl_kleur4 = paars = #9400d3    
 *
 * Achtergrond -- contrast
 * -----------------------
 * contrast1 = donkergrijs
 * contrast2 = grijs
 * contrast3 = lichtgrijs
 *
 * Pagina kolommen
 * ---------------
 * type1 = smalle kolom voor index (l+r)
 * type2 = middenkolom voor index
 * type3 = brede kolom voor artikelen e.d.
 * type4 = brede kolom voor bijv. scholen informatie
 * type5 = kolom icm type4
 * type6 = linker kolom weblog (binnen type3 gebruiken)
 * type7 = rechter kolom weblog (binnen type3 gebruiken)
 */

html {
  height: 100%;
}

body {
  min-height: 100%;
  background-color: white;
  padding: 0;
  margin: 0 auto;
  width: 980px;
}

img {
  border: none;
}

form {
  margin: 0;
}

/* Containers */
#container {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  position: relative;
  font-size: 70%;
  color: #67677c;
  line-height: 120%;
}

#contents {
  width: 980px;
  margin: 0;
  padding: 0 0 12em 0;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 980px;
  height: 12em;
}

#tweets .profile_image {
  float: left;
  margin: 0 8px 8px 0;
}

/* Standaard links */
a {
  color: #67677c;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.std_link {
  color: #67677c;
  text-decoration: underline;
}  

.blok_marge {
  margin: 8px;
}

.blok_opvulling {
  padding: 8px;
}

.tekst_marge {
  margin-bottom: 8px;
}

.tekst_marge_half {
  margin-bottom: 4px;
}  

/* Kop is 80px hoog */
.pagina_kop {
  height: 80px;
  overflow: hidden;
}

.pagina_kop .referentie_blok {
  position: absolute;
  width: 225px;
  height: 46px;
  left: 378px;
  margin-top: 20px;
  border: none;
  overflow: hidden;
}

/* OCO-logo afbeelding
 * Tekst: 'Onderwijs Consumenten Organisatie'
 * Juiste tekst wordt dmv class kleur_stijl bepaald
 */
.oco_logo_tekst {
  width: 175px;
  height: 62px;
  margin-top: 9px;
  background: url(afbeeldingen/oco_logos_tekst.png);
  background-repeat: no-repeat;
  cursor: pointer;
}

.kleur_stijl3 .oco_logo_tekst {
  /*background-position: 0px -124px;*/
  background: url(afbeeldingen/oco_kop_website_groen.png);
}
.kleur_stijl1 .oco_logo_tekst {
  /*background-position: 0px -62px;*/
  background: url(afbeeldingen/oco_kop_website_roze.png);
}
.kleur_stijl2 .oco_logo_tekst {
  /*background-position: 0px 0px;*/
  background: url(afbeeldingen/oco_kop_website_blauw.png);
}
.kleur_stijl4 .oco_logo_tekst {
  background: url(afbeeldingen/oco_kop_website_paars.png);
}

/* Menubalk / boven en onder */
.menu_balk {
  padding: 0 8px;
  margin: 0;
  color: white;
  font-size: 1em;
  line-height: 2em;
  height: 2em;
  overflow: hidden;
}

.kleur_stijl3 .stijl_bg_color {
  background-color: #68cf42;
}

.kleur_stijl1 .stijl_bg_color {
  background-color: #ff3884;
}

.kleur_stijl2 .stijl_bg_color {
  background-color: #069ad8;
}

.kleur_stijl4 .stijl_bg_color {
  background-color: #9400d3;
}

.kleur_stijl3 .stijl_border_color {
  border: 1px solid #68cf42;
}

.kleur_stijl1 .stijl_border_color {
  border: 1px solid #ff3884;
}

.kleur_stijl2 .stijl_border_color {
  border: 1px solid #069ad8;
}

.kleur_stijl4 .stijl_border_color {
  border: 1px solid #9400d3;
}

.kleur_stijl3 .stijl_fg_color {
  color: #68cf42;
}

.kleur_stijl1 .stijl_fg_color {
  color: #ff3884;
}

.kleur_stijl2 .stijl_fg_color {
  color: #069ad8;
}

.kleur_stijl4 .stijl_fg_color {
  color: #9400d3;
}

.kleur_stijl3 a.stijl_kleur {
  color: #68cf42;
}

.kleur_stijl1 a.stijl_kleur {
  color: #ff3884;
}

.kleur_stijl2 a.stijl_kleur {
  color: #069ad8;
}

.kleur_stijl4 a.stijl_kleur {
  color: #9400d3;
}

.kleur_ouders_fg {
  color: #ff3884;
}

.kleur_leerlingen_fg {
  color: #069ad8;
}

.kleur_stijl3 .hor_line {
  border-top: 2px solid #68cf42;
  margin: 0 0 10px 0;
}

.kleur_stijl1 .hor_line {
  border-top: 2px solid #ff3884;
  margin: 0 0 10px 0;
}

.kleur_stijl2 .hor_line {
  border-top: 2px solid #069ad8;
  margin: 0 0 10px 0;
}

.kleur_stijl4 .hor_line {
  border-top: 2px solid #9400d3;
  margin: 0 0 10px 0;
}

.bg_contrast1 {
  background-color: #67677c;
  color: white;
}

.bg_contrast2 {
  background-color: #908ea2;
  color: white;
}

.bg_contrast3 {
  background-color: #d3d3dd;
  color: #67677c;
}

.bg_contrast4 {
  background-color: #e5e5f0;
  color: #67677c;
}

.bg_contrast1 a, .bg_contrast2 a {
  color: white;
  text-decoration: none;
}

.bg_gray3 {
  background-color: #d3d3dd;
}

.bg_contrast1 a:hover, .bg_contrast2 a:hover {
  text-decoration: underline;
}

.menu_balk .tekst_boven {
  text-transform: uppercase;
  font-weight: bold;
}

.menu_balk .tekst_onder {

}

.pagina_kolommen {
  overflow: hidden;
}

.pagina_kolom {
  float: left;
/*
  overflow: hidden;
*/
}

.pagina_kolom_type1 {
  width: 260px;
}

.pagina_kolom_type2 {
  width: 410px;
}

.pagina_kolom_type3 {
  width: 700px;
}

.pagina_kolom_type4 {
  width: 470px;
}

.pagina_kolom_type5 {
  width: 212px;
}

.pagina_kolom_type6 {
  width: 140px;
}

.pagina_kolom_type7 {
  width: 552px;
}

.tabel_rand_l {
  border-left: 1px dotted #333;
}

.pagina_kolom_l_rand {
  margin-left: 8px;
  border-left: 1px dotted #333;
  padding-left: 8px;
}

.pagina_kolom_r_rand {
  margin-right: 8px;
  border-right: 1px dotted #333;
  padding-right: 8px;
}


/* Pictogrammen kop/voet */
.menu_pictogrammen_kop_voet {
  width: 19px;
  height: 18px;
  background: url(afbeeldingen/pictogrammen_kop_voet_balk.png);
  background-repeat: no-repeat;
  overflow: hidden;
  cursor: pointer;
  margin-top: 0.2em;
}

.kleur_stijl2 .menu_pictogrammen_kop_voet.thuis {
  background-position: 0px 0px;
}

.kleur_stijl1 .menu_pictogrammen_kop_voet.thuis {
  background-position: -20px 0px;
}

.kleur_stijl3 .menu_pictogrammen_kop_voet.thuis {
  background-position: -40px 0px;
}

.kleur_stijl4 .menu_pictogrammen_kop_voet.thuis {
  width:  18px;
  height: 18px;
  background: url(afbeeldingen/pictogram_huis_balk_paars.png);
}

.kleur_stijl2 .menu_pictogrammen_kop_voet.zoeken {
  background-position: 0px -18px;
}

.kleur_stijl1 .menu_pictogrammen_kop_voet.zoeken {
  background-position: -20px -18px;
}

.kleur_stijl3 .menu_pictogrammen_kop_voet.zoeken {
  background-position: -40px -18px;
}

.kleur_stijl4 .menu_pictogrammen_kop_voet.zoeken {
   width:  18px;
   height: 18px;
   background: url(afbeeldingen/pictogram_zoek_balk_paars.png);
}

.menu_footer {
  color: #67677c;
  margin-top: 1em;
}

.menu_footer .kop {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 110%;
}

.menu_footer a {
  text-decoration: none;
}

/* Pagina elementen */
.menu_blok_hoogte, .menu_blok_hoogte_1 {
  height: 12em;
  overflow: hidden;
}

.menu_blok_hoogte_2 {
  height: 24em;
  overflow: hidden;
}

.menu_blok_hoogte_3 {
  height: 36em;
  overflow: hidden;
}

.menu_blok_hoogte_4 {
  height: 48em;
  overflow: hidden;
}

/* 4x blok hoogte */
.pagina_kolom_min_blok45_hoogte {
  min-height: 59em;
  /* IE6 hack */
  height: auto !important;
  height: 59em;
}

/* 4x blok hoogte */
.pagina_kolom_min_blok4_hoogte {
  min-height: 51em;
  /* IE6 hack */
  height: auto !important;
  height: 51em;
}

/* 5x blok hoogte */
.pagina_kolom_min_blok5_hoogte {
  min-height: 64em;
  /* IE6 hack */
  height: auto !important;
  height: 64em;
}

/* 5x blok hoogte */
.pagina_kolom_min_blok6_hoogte {
  min-height: 77em;
  /* IE6 hack */
  height: auto !important;
  height: 77em;
}

.menu_kop {
  width: 100%;
  height: 23px;
  cursor: pointer;
}


.letters_stijl1 .menu_koppen {
  width: 162px;
  height: 21px;
  background: url(afbeeldingen/stijl1_menu_index_koppen.png);
  background-repeat: no-repeat;
  float: left;
}

.letters_stijl1 .menu_koppen.menu_kop_forum {
  background-position: 0px -63px;
}

.letters_stijl1 .menu_koppen.menu_kop_mindmap {
  background-position: 0px -126px;
}

.letters_stijl1 .menu_koppen.menu_kop_partners {
  background-position: 0px -147px;
}

.letters_stijl1 .menu_koppen.menu_kop_tags {
  background-position: 0px -105px;
}

.letters_stijl1 .menu_koppen.menu_kop_themas {
  background-position: 0px -84px;
}

.letters_stijl1 .menu_koppen.menu_kop_oordeel {
  background-position: 0px -21px;
}

.letters_stijl1 .menu_koppen.menu_kop_vragen {
  background-position: 0px -42px;
}

.letters_stijl1 .menu_koppen.menu_kop_wat_is_oco {
  background-position: 0px 0px;
}

.letters_stijl1 .menu_koppen.menu_kop_nieuws {
  background-position: 0px -168px;
}

.letters_stijl1 .menu_koppen.menu_kop_weblogs {
  background-position: 0px -189px;
}

.letters_stijl1 .menu_koppen.menu_kop_scholen {
  background-position: 0px -210px;
}

.letters_stijl2 .menu_koppen {
  width: 182px;
  height: 20px;
  background: url(afbeeldingen/stijl2_menu_index_koppen.png);
  background-repeat: no-repeat;
  float: left;
}

.letters_stijl2 .menu_koppen.menu_kop_forum {
  background-position: 0px -60px;
}

.letters_stijl2 .menu_koppen.menu_kop_mindmap {
  background-position: 0px -120px;
}

.letters_stijl2 .menu_koppen.menu_kop_partners {
  background-position: 0px -140px;
}

.letters_stijl2 .menu_koppen.menu_kop_tags {
  background-position: 0px -100px;
}

.letters_stijl2 .menu_koppen.menu_kop_themas {
  background-position: 0px -80px;
}

.letters_stijl2 .menu_koppen.menu_kop_oordeel {
  background-position: 0px -20px;
}

.letters_stijl2 .menu_koppen.menu_kop_vragen {
  background-position: 0px -40px;
}

.letters_stijl2 .menu_koppen.menu_kop_wat_is_oco {
  background-position: 0px 0px;
}

.letters_stijl2 .menu_koppen.menu_kop_nieuws {
  background-position: 0px -160px;
}

.letters_stijl2 .menu_koppen.menu_kop_weblogs {
  background-position: 0px -180px;
}

.letters_stijl2 .menu_koppen.menu_kop_scholen {
  background-position: 0px -200px;
}

.menu_kop_pictogrammen {
  width: 23px;
  height: 21px;
  background: url(afbeeldingen/pictogrammen_menu_onderdelen.png);
  background-repeat: no-repeat;
  float: right;
  overflow: hidden;
}

.menu_kop_pictogrammen.kop_pictogram_amsterdam {
  background-position: 0px 0px;
}

.menu_kop_pictogrammen.kop_pictogram_forum {
  background-position: -23px 0px;
}

.menu_kop_pictogrammen.kop_pictogram_mail {
  background-position: -46px 0px;
}

.menu_kop_pictogrammen.kop_pictogram_mindmap {
  background-position: -69px 0px;
}

.menu_kop_pictogrammen.kop_pictogram_oordeel {
  background-position: -92px 0px;
}

.menu_kop_pictogrammen.kop_pictogram_partners {
  background-position: 0px -21px;
}

.menu_kop_pictogrammen.kop_pictogram_tags {
  background-position: -23px -21px;
}

.menu_kop_pictogrammen.kop_pictogram_themas {
  background-position: -46px -21px;
}

.menu_kop_pictogrammen.kop_pictogram_vragen {
  background-position: -69px -21px;
}

.menu_kop_pictogrammen.kop_pictogram_weblogs {
  background-position: -92px -21px;
}

.menu_verwijzings_blok {
  text-align: justify;
}

.menu_verwijzings_blok .tekst {
  line-height: 120%;
  text-align: left;
  display: inline;
}

.menu_verwijzings_blok_scheiding_horizontaal {
  margin: 0.5em 0 0 0;
  padding: 0 0 0.5em 0;
  border-top: 1px dotted #333;
  clear: both;
}

.letters_stijl1 .inv_menu_kop {
  height: 16px;
  margin-bottom: 3px;
}

.letters_stijl1 .inv_menu_koppen {
  width: 160px;
  height: 16px;
  background: url(afbeeldingen/stijl1_inv_menu_index_koppen.png);
  background-repeat: no-repeat;
  float: left;
}

.letters_stijl1 .inv_menu_koppen.inv_menu_kop_nieuws {
  background-position: 0px 0px;
}

.letters_stijl1 .inv_menu_koppen.inv_menu_kop_school_zoeken {
  background-position: 0px -16px;
}

.letters_stijl2 .inv_menu_kop {
  height: 21px;
  margin-bottom: 1px;
}

.letters_stijl2 .inv_menu_koppen {
  width: 206px;
  height: 21px;
  background: url(afbeeldingen/stijl2_inv_menu_index_koppen.png);
  background-repeat: no-repeat;
  float: left;
}

.letters_stijl2 .inv_menu_koppen.inv_menu_kop_nieuws {
  background-position: 0px 0px;
}

.letters_stijl2 .inv_menu_koppen.inv_menu_kop_school_zoeken {
  background-position: 0px -22px;
}

.tabel_index_nieuws {
  border: 0;
  margin: 4px 0 0 0;
  padding: 0;
  line-height: 1em;
  overflow: hidden;
  width: 100%;
  border-spacing: 0;
}

.tabel_index_nieuws .datum {
  width: 3.5em;
}

.artikel .titel {
  background-color: #908ea2;
  color: white;
  font-size: 133%;
  line-height: 1em;
  padding: 6px 8px;
  margin-bottom: 12px;  
}

.artikel .ondertitel {
  font-size: 110%;
  line-height: 1em;
  font-weight: bolder;
  margin-bottom:16px;
}

.artikel .tekst {
  margin-bottom: 20px;
  text-align: justify;
}

.artikel .bron_vermelding {
  margin-bottom: 12px;  
}

.artikel .downloads {
  margin-bottom: 16px;
}

.artikel .downloads .download {
  margin-bottom: 8px;
}

.artikel .printer_versie {
  margin-bottom: 20px;
}

.artikel_reacties {
  background-color: #d3d3dd;
  padding: 6px;
}

.artikel_reacties_kop {
  background-color: #908ea2;
  color: white;
  font-size: 133%;
  line-height: 1em;
  padding: 4px 6px;
}

.artikel_reacties {
  color: #67677c;
  padding: 6px;
}

.artikel_reacties .reactie {
  margin-bottom: 6px;
}

.tag_overzicht {
  line-height: 250%;
  text-align: justify;
}

.tag_overzicht a {
  color: #67677c;
  padding: 2px;
}

.kleur_stijl1 .tag_overzicht a:hover {
  color: #ff3884;
  text-decoration: none;
}

.kleur_stijl2 .tag_overzicht a:hover {
  color: #069ad8;
  text-decoration: none;
}

ul.opsomming1 {
  list-style-type: disc;
  padding: 0;
  margin: 0 20px 0 20px;
  text-transform: uppercase;
}


ul.opsomming3 {
  list-style-type: square;
  padding: 0;
  margin: 0 20px 0 20px;
}

ul.tag_overzicht {
  list-style-type: none;
  padding: 0;
  margin: 0 0 0 20px;
}

ul.tag_overzicht li {
  width: 33%;
  float: left;
  line-height: 2em;
}

ul.opsomming2 {
  list-style-type: disc;
  padding: 0;
  margin: 0 20px 0 20px;
}

ul.opsomming2 li {
  margin-left: 20px;
}

.tag_overzicht_populair li {
  line-height: 1.75em;
}

.thema_index .titel {
  font-size: 175%;
  margin-bottom: 12px;
}

.thema_index .beschrijving {
  margin-bottom: 12px;
}

.thema_index .links {
  margin-bottom: 12px;
}

.info_blok {
  background-color: #d3d3dd;
  color: #67677c;
  padding: 8px;
  min-height: 12em;
}

.info_blok .kop {
  margin-bottom: 8px;
  font-size: 150%;
  font-weight: bold;
  line-height: 1em;
}

.info_blok a {
  text-decoration: underline;
}


/* Invoercomponenten */
/* Knop */
.input_knop {
  color: white;
  font-size: 90%;
  font-weight: bold;
  display: block;
}

.input_listbox {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1em;
  border: 1px solid #67677c;
}

.kleur_stijl3 .input_knop {
  background-color: #68cf42;
  border: 1px outset #68cf42;
}

.kleur_stijl1 .input_knop {
  background-color: #ff3884;
  border: 1px outset #ff3884;
}

.kleur_stijl2 .input_knop {
  background-color: #069ad8;
  border: 1px outset #069ad8;
}

.kleur_stijl4 .input_knop {
  background-color: #9400d3;
  border: 1px outset #9400d3;
}

/* Tekstinvoer */
.input_tekst {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: #333;
  border: 1px solid #67677c;
  padding: 2px 4px;
}

/* Diversen */
.emphasize {
  font-weight: bold;
}

.tekst_uitlijnen {
  text-align: justify;
}

.max_width {
  width: 98%;
}

img.center {
  vertical-align: middle;
}

.float_left {
  float: left;
}

.float_right {
  float: right;
}

.text_align_right {
  text-align: right;
}

.max_height {
  height: 100%;
}

.kop110 {
  font-size: 110%;
  line-height: 1em;
}

.kop125 {
  font-size: 125%;
  line-height: 1em;
}

.kop133 {
  font-size: 133%;
  line-height: 1em;
}

.kop150 {
  font-size: 150%;
  line-height: 1em;
}

.kop175 {
  font-size: 175%;
  line-height: 1em;
}

.kop200 {
  font-size: 200%;
  line-height: 1em;
}

.kop250 {
  font-size: 250%;
  line-height: 1em;
}

.kop300 {
  font-size: 300%;
  line-height: 1em;
}
