@import 'mixins.less';

@col2: 460px;
@col3: 300px;
@mainWidth: 1000px;

@menuColor: #303135;
@red: #f35648;
@bgGrey: #f2f2f2;
@blue: #00a0e6;

body { margin: 0; padding: 0; font-family: 'Asap', sans-serif; font-size: 15px; font-weight: 400;}

a:link { color: @red;}
a:visited {}
a:hover {}
a:active {}

header{ width: 100%;
  .top_image { display: block; width: 100%;}
  nav{ position: absolute; right: 0; top: 0px; height: 70px;
    ul{ float: left;
      li{ float: left; list-style: none;
        a{ display: block; padding: 0 20px; text-decoration: none; color: @menuColor; }
      }
      li.active a{ color: @red;}
      li:not(.active) a:hover{ }
      li.active { }
    }
  }
}

img { display: block;}

#top { position: relative; left: 50%; margin-top: 10px; margin-left: -500px; width: @mainWidth;}

main {position: relative;}

.center_div { position: relative; padding-top: 120px; padding-bottom: 100px; left: 50%; margin-left: -500px; width: @mainWidth;}

.col { display: block; float: left; margin-bottom: 60px;
  &.g2  { width: @col2; margin-right: 80px;}
  &.g3 { width: @col3; margin-right: 50px;}
  &.g3.double { width: 2*@col3+50px;}
  &.last { margin-right: 0;}
}

.clear { clear: both;}

h1 { margin-top: 0; font-size: 2.13em; font-weight: 700; color: @red;
  &.white { color: #fff;}
}
h2 { font-size: 1.2em; font-weight: 400; color: @blue;}
h3 { margin: 0; color: #fff; font-weight: 400;}

.upper { text-transform: uppercase;}

.bottom_red { border-bottom: 10px solid @red;}

.header_bottom { position: relative; width: 100%;
  &.blue { height: 20px; background-color: @blue;}
  &.red { height: 20px; background-color: @red;}
}
#home .header_bottom { position: relative; width: 100%;
  &.blue { height: 150px; background-color: @blue;}
  &.red { height: 20px; background-color: @red;}
}


.photo_spacer {position: relative; height: 60px; width: 100%; background-color: @red; font-size: 1.6em; text-align: center; line-height: 60px;}
.photogallery { padding-top: 60px;
  span {display: block; position: relative; width: @col3; height: 50px; background-color: #fff; text-align: center; text-transform: uppercase; line-height: 50px; .bottomBorder(20px); }
}
.bg_grey { position: relative; background-color: @bgGrey;}
.bg_blue { position: relative; background-color: @blue;}

.top { }

.button {display: block; position: relative; margin-top: 60px; margin-bottom: 60px; height: 60px; width: @col3; background-color: #fff; text-align: center; text-transform: uppercase; .border(10px;); line-height: 60px; color: @red;
  &.center { left: 50%; margin-left: -(@col3/2);  }
  &.blue { background-color: @blue; color: #fff;}
}

.activiteiten { list-style: none; padding: 0;
  li {  border-bottom: 2px solid #fff; line-height: 40px; text-transform: uppercase; }
}
.activiteiten.white li { color: #fff;}

.funding { padding: 0; list-style: none;
  li { border-bottom: 1px solid @menuColor;}
}

.monthly_activities { list-style: none; line-height: 30px;
  span { color:#696969; font-style: italic;}
}

.activity { background-color: #fff; padding: 40px 30px;
  ul { padding: 0;  list-style: none;}
  li { border-bottom: 1px solid @menuColor; padding-bottom: 5px; margin-bottom: 15px; text-transform: uppercase;}
}
.line { position: relative; margin-bottom: 60px; height: 2px; width: 100%; background-color: #BBBBBB;}

.agenda .col { margin-bottom: 37px; min-height: 100px;}

.agenda_title { position: relative; display: block; width: @col3; font-size: 1em; font-weight: 800; border-bottom: 1px solid #BBBBBB;}
.month_nr{ margin-top: -9px; float: right; font-size: 1.667em; color: @blue;}
.agenda_item { list-style: none; padding: 0;
  .date { display: inline-block; position: relative; width: 60px; color: @red; font-weight: 800;}
}

footer { position: relative; width: 100%; background-color: @red; color: #fff;
  h1 { font-size: 1.47em; color: #fff;}
  p { font-size: 1.0666em;}
}