﻿/*
 * Default styles for all ASP.NET applications
 * F. Vander Meiren
 *
 * 19/02/2016
 */

@import url('normalize.css');

/*
 * Media related 
 *
 */
@media screen and (max-width: 3000px)
{
  html
  {
    font-size: 62.5%;
  }
}

/* 1920 x 1080 */
@media screen and (max-width: 1920px)
{
  html
  {
    font-size: 62.5%;
  }
}

@media screen and (max-width: 1250px)
{
  html
  {
    _font-size: 60.0%;
  }
}

@media screen and (max-width: 1100px)
{
  html
  {
    _font-size: 52%;
  }
}

@media screen and (max-width: 800px)
{
  html
  {
    _font-size: 45%;
  }

  nav
  {
    font-size: 12px;
  }

  .staticMenuItem
  {
    padding: 10px 3rem !important;
    text-align: center;
  }
}

/*
 * Set box-sizing to border-box
 */
html
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after
{
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/*
 * reset all
 */
*
{
  margin: 0;
  padding: 0;
}

/*
 * Base selectors
 */
body
{
  background-color: #fafaff;
  font-family: Verdana, Tahoma, Helvetica, sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.6rem;
  color: #456;
}

p
{
  padding-top: 0.5rem;
}

h1
{
  font-size: 2.5rem;
  font-weight: normal;
  line-height: 3.0rem;
  color: #45A;
  padding: 2rem 0 1rem 0;
}

h2
{
  font-size: 2.0rem;
  font-weight: normal;
  line-height: 2.4rem;
  color: #070;
  padding: 1.6rem 0 0.8rem 0;
}

h3
{
  font-size: 1.8rem;
  font-weight: bold;
  color: #283;
  padding: 0.4em 0 0 0;
}

h4
{
  font-size: 1.5rem;
  font-weight: bold;
  color: #456;
  padding: 0.2em 0 0 0;
}

a
{
  color: #456;
}

  a:hover
  {
    color: red;
  }

/*
 * Nicolas Gallagher's Micro ClearFix.
 * See: http://nicolasgallagher.com/micro-clearfix-hack/
 */
.clearfix:before,
.clearfix:after
{
  content: " ";
  display: table;
}

.clearfix:after
{
  clear: both;
}

.clearfix
{
  *zoom: 1; /* for IE 6/7 only */
}

/*
 * Standard clear(fix)
 */
.clear
{
  width: 100%;
  height: 0px;
  clear: both;
}

/*
 * Buttons
 */
.button-field
{
  width: auto;
  padding: 2rem 0;
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid #ccc;
}

.button, .button-small {
  font-family: Verdana, Tahoma, Helvetica, sans-serif;
  width: 16rem;
  text-align: center;
  color: #F00;
  background-color: #ff9;
  border: 1px solid red;
  margin: 0 1rem;
}

.button {
  height: 3rem;
  font-size: 1.3rem;
}

.button--disabled {
  color: #828282;
  background-color: #fafafa;
  border: 1px solid #828282;
}

.button-small {
  height: 2.4rem;
  font-size: 1.2rem;
}

  .button:hover, .button-small:hover {
    background-color: #ffd;
  }
