//sass --no-source-map --charset main.scss ../main.css

/* Colors */
@import "colors";

/* General styling */

body {
  background-color: $grey1;
  color: white;
  
  margin: 0px;
  padding: 0px;

  margin: {
    right: 2%;
    left: 8%;
    top: 5%;
  }
  
  font: {
    family: museo-sans-rounded, sans-serif;
    size: 14pt;
    weight: 300;
    style: normal;
  }
}


/* Text elements */

h1 {
  color: $blue;
  text-align: center;
  background-color: $grey2;
  padding: 15px;
  margin-left: 10%;
  margin-right: 10%;
  border-radius: $radius;
}

h2 {
  color: $green;
}

a { 
  color: $linkStill;
  &:hover {color: $linkHover;}
}


/* Special elements */

button {
  background-color: $grey4;
  border: 2px solid $border-color;
  color: white;
  padding: 4px 12px;
  margin: 2px 12px;
  font-size: 14pt;
  
  &:hover {background-color: $grey3;}
  &:focus {outline:0;}

  &.big {
    padding: 15px;
    border-radius: $radius;
    font-size: 18pt;
  }
}


/* Inputs */

input {
  padding: 4px 12px;
  margin: 2px 12px;
  font-size: 14pt;
}

input[type=color] {
  width: 4em;
  height: 2em;
  background-color: $grey4;
}

input[type=submit] {
  @extend button;
}


/* Table elements */

table {
  width: 100%;
  display: table;
  border-spacing: 0px;
}

tbody {
  display: table-row-group;
  width: auto;
}

tr {
  display: table-row;
  width: auto;
}

td, th {
  border: 1px solid $border-color;
  padding: 8px;
  display: table-cell;
  width: auto;
}

th {
  text-align: left;
  background-color: #4CAF50;
}

tr {
	&:nth-child(even) { background-color: #00000033;}
	&:hover { background-color: rgba(255, 255, 255, 0.281);}
}


/* Import */

@import "classes";