// LESS file generated by Responsify
/* Columns: 1, Gutter Width: 1.5, Breakpoints:  */ 
// Import external files
@import "base"; 

// Set all variables

@totalColumns: 1;
@gutterWidth: 1.5%;
@line-height: 1.5em;
@nav-height: 58px;
@global-max-width: 70%;
@content-max-width: 68.5%;

//fonts
@h1-font-size-big: 2.5em;
@h2-font-size-big: 1.8em;
@h4-font-size-big: 1.0em;
@p-font-size-big: 1.0em;

//colors
@header-bg-color: #107500;
@button-font-color: black; 
@content-bg-color: white; 
@header-bg-color-hover: #18AE04; 
@header-bg-color-active: #4bd635;

//border-settings
@mini-border-setting: 3px 0 3px 0;
// Grid generation mixin
.spanWidth(@numColumns, @totalColumns, @gutterWidth) {
  @numGutters: @totalColumns - 1; // Gutters will always be 1 less then columns
  @gutterSpace: @numGutters * @gutterWidth; // Finding total space taken up by gutters
  @remainingSpace: 100 - @gutterSpace; // Subtracting the total gutter space from 100(%)
  @columnWidth: @remainingSpace / @totalColumns; // Finding column width by dividing space left by number of columns
  @width: (@numColumns) * @columnWidth + (@gutterWidth * (@numColumns - 1) );
  width: @width;
}

//scrollbar always visible
html {
  overflow-y: scroll; 
}

//general stuff
body{ 
  font-size: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: @header-bg-color;  
  line-height: @line-height;
  background: @content-bg-color; 
}

h1{
  font-size: @h1-font-size-big;
  line-height: @line-height;
  margin: 7px 0 0 -2px;
  padding: 0 0 0 0px;

}

h2{
  font-size: @h2-font-size-big;
  line-height: @line-height;
  margin-top: 1.5em;
}

h3{
  font-size: @p-font-size-big;
}

h4{
	font-size: @h4-font-size-big;
	font-weight:normal;
}

p{
  font-size: @p-font-size-big;
  padding-bottom: 8px;
}

//header and content
.span1{
  float:left;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  .spanWidth(1, @totalColumns, @gutterWidth);
  margin-left: 0;
}

/* HEADER - NAVIGATION */
.inner{
  margin: 0 auto; 
  max-width: @global-max-width;
}

header{
  background: @header-bg-color;
  position: fixed;
  margin: 0px 0 0 0;
}

nav{
  margin: 7px 0 7px 0;
}

nav ul{
  overflow: auto;
  width: 100%;
}

nav ul li{
  margin: 0 0 0 0;
  text-align: center;
  overflow: auto;
  float: left;
  width: 25%;
}

a {
  color: black;
}

nav a{
  text-decoration: none;
  display: block;
  padding: 7px 0 7px 5%;
  margin: 0 4% 0 4%;
  background: rgba(255,255,255,0.1);
}

.alt, .alt1{ 
  color: @button-font-color;
  letter-spacing: 0.05em;
}

.alt:hover, .alt1:hover{
  background-color:@header-bg-color-hover !important;
}

.alt1{
  background-color:@header-bg-color-active !important;
}

//content
#container {
  margin: 0 auto; 
  max-width: @content-max-width;
}

#container{
  clear: both;
  padding-left: 15%;
  padding-right: 15%;
  margin-top: @nav-height;
}



.justified{
  text-align: justify;
}

.seperator{
  display:none;
}

#note{
  font-size: 0.7em;
}

/* MEDIA QUERIES */

/* Responsify Defaults */

/* MOBILE DEVICE - TABLET */

@media screen and (max-width: 768px){
  nav .span0 .span1, article{
    width: 100%;
  }

  .span0{
    width: 100%;
    margin-left: 0;
  }

  #container {
    //text-align: center;
    width: 98%;
    padding: 0 0 0 0;
  }

  #container, .inner {
    max-width: 100%;
  }

  .seperator{
  display: inherit;
  margin-top: -3px;
  font-size: 0.8em;
  }
}

/* MOBILE DEVICE - SMARTPHONE */

@media screen and (max-width: 480px){
  nav ul li{
    //creates 4 rows from single row
    width: 100%;
    //space between buttons
    margin: @mini-border-setting;
  }

  //space bettween font and border button
  nav a{
    padding: @mini-border-setting;
  }

  //space between last button and header/content border
  nav{
  margin: @mini-border-setting;
  }

  .alt{
    margin-left: 4px;
    margin-right: 4px;
  }

  header {
    position: relative;
  }

  #container {
    padding: 4px 0 0 0;
    margin-left:4px;
    margin-right:4px;
    text-align: center;
  }

  #container, .inner {
    max-width: 100%;
  }

  .seperator{
    display: inherit;
    margin-top: -3px;
    font-size: 0.8em;
  }

  h1{
  font-size: 1.5em;
  padding-top: 4px;
  line-height: 1.2em;
  }

  h2{
  font-size: 1.2em;
  line-height: @line-height;
  margin-top: 1.5em;
  }

  p{
  font-size: 0.8em;
 // padding-bottom: 0px;
  }
}

// Micro Clearfix 
// If you want the clearfix to remain within CSS (no classes in markup) then use the @extend method:
// selector{
  //    @extend .clearfix();
  // }

  .cf {
    zoom: 1; // For IE 6/7 (trigger hasLayout)

    &:before,
    &:after {
      content: "";
      display: table;
    }

    &:after {
      clear: both;
    }
  }

//Accordion
 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
	border-bottom: 1px solid green;
	margin-left:0px;
	font-size: @p-font-size-big;
	margin-bottom:5px;
  	padding-bottom: 18px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0px 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
} 

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}