/* 
Author: Basil Vetas
Date: 29 November 2014
*/

/*
This CSS file is referenced by every html page included in the website. It
controls responsive website design and architecture.  If you want to change the
overall look and feel of the website, edit this CSS file. If you only want to 
edit the body content of a page, edit the respective <style> tag within 
each html page content files. 
*/

/*----------------------------------------------------------------------------- 
01=DOCUMENT LAYOUT   
-----------------------------------------------------------------------------*/

/* Box Model Hack */
* {
   -moz-box-sizing: border-box; /* Firexfox */
   -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
   box-sizing: border-box; /* IE */
}

/* Document level font adjustments */

/*
I initially set the desktop font-size to 10px, and make media queries to set 
the tablet font-size to 8px and the mobile font-size to 6px. By doing this I can
then build the rest of the website using only rem (relative em) and should almost 
never need to declare things in pixels or em because rem will give us values relative
to the screen size (10px, 8px, or 6px respectively)

Conversions: 1 rem therefore translates to 10px, .8rem translates to 8px, .6rem and 6px, etc.
*/

/* Desktop */
html {
  font-size: 10px;  
  height: 100%;
  min-height: 100%;
}

/* Tablet */
@media (max-width: 768px) {
  html { 
    font-size: 8px; 
    height: 100%;
    min-height: 100%;
  }
}

/* Mobile */
@media (max-width: 480px) {
  html { 
    font-size: 4px; 
    height: 100%;
    min-height: 100%;
  }
}

body {  
  font-family: Arial, Helvetica, "Trebuchet MS",Verdana, sans-serif;    
  /*background: #666 url(../images/background/page-bg.gif) repeat;*/
  /*color: #000;*/

  /*line-height: 1.5;*/

  /*Necessary to keep footer at bottom of page*/
  height: 100%;
  min-height: 100%;

  /* Full Page Background Receipe */
  background-size: 100% 100%;
  background-position: center;
  background-attachment: fixed;
}

/*
The wrapper class is used on a div tag to make the footer stay at the bottom of the page.
Do not edit #wrapper, #wrapper:after. The footer:height property should always be equal to
the negative of the wrapper:margin-bottom;
*/

#wrapper {
  min-height: 100%;
  /* equal to (neg) footer height */
  margin-bottom: -8rem; 
}

#wrapper:after {
  content: "";
  display: block;
  /* equal to footer height */
  height: 8rem;
}

p {
  /*font-size: 1.4rem;*/
}

h1 {  
  /*font-size: 1.6rem;
  font-family: georgia, times, serif;*/
}

h2 {  
  /*font-size: 2rem;
  font-family: georgia, times, serif;
  color: #552448;     */
}

h3 {

}

h4 {
  
}

h5 {

}

h6 {  

}

ul {
  padding: 0;
  margin: 0;
}

ul li {
  list-style: none;
}

img {
  /* forces images to fit inside their containers */
  max-width: 100%;
}

a { 
  /*font-weight: normal; */
}

a:link { 
  /*color: #8f5917; text-decoration: underline; */
}

a:visited { 
  /*color: #666; text-decoration: underline; */
}

a:focus, a:hover, a:active { 
  /*color: #600; text-decoration: none; */
}

/*----------------------------------------------------------------------------- 
02=UTILITIES
-----------------------------------------------------------------------------*/

.right-align {
  float: right;
}

.left-align {
  float: left;
}

.clear {
  clear: both;
}

.inline {
  display: inline;
}

.block {
  display: block;
}

#current-date { 
  /* Manipulated with Javascript */
}

/*----------------------------------------------------------------------------- 
03=HEADER
-----------------------------------------------------------------------------*/

header {  

  /* Positioning */
  width: 100%;

  /* Styling */  
  border-top: 1em solid #353535;
  background: #5A5A5A;
}

header #title {
  float: left;  
  width: 70%;
}

#header-nav {
  background: #353535;
  float: right;
  font-size: 1.1rem;  
  padding: .6rem 1rem .6rem 1rem;
  border-bottom-left-radius: 10px;
  text-align: center;  
}

header #search {
  float: right;  
  width: 30%;
  padding-top: 1rem;
  padding-right: 2rem;  
  text-align: right;
  display: inline;
}

header .u-u-math{
  padding-left: .5rem;
  padding-bottom: 1rem;  
}

/*Needed to adjust mobile to make the U logo and title fit*/

/* Tablet */
@media (max-width: 768px) {
  header #title img.u-u-logo {
  width: 10%;
  max-width: 10%;
  }

  header #title img.u-u-math {
  width: 30%;
  max-width: 30%;
  }

}

/* Mobile */
@media (max-width: 480px) {
  header #title img.u-u-logo {
  width: 10%;
  max-width: 10%;
  }

  header #title img.u-u-math {
  width: 30%;
  max-width: 30%;
  }
  
}

#search form label input {
  margin: .5rem;
}

#search form input {
  margin: 0 .5rem;
}

#search form input.s-box {
  max-width: 40%;
  width: 40%;
  height: 1.8rem;  
}

#search form input.s-btn {
  max-width: 14%;
  width: 14%;
}

#header-nav ul li {
  display: inline;
}

#header-nav span {
  color: #DAC092; 
}

#header-nav a {
  text-decoration: none;
  color: #FFFFFF;
}

/*----------------------------------------------------------------------------- 
04=NAV
-----------------------------------------------------------------------------*/

nav {   
  background: #990000;
  border-top: .5em solid #CC0000;
  text-align: center;
  color: #FFFFFF; 
  font-weight: bold;
  padding-top: .3rem;
  padding-bottom: .3rem;

}

nav ul li {
  display: inline;    
  letter-spacing: 1.5px;
}

nav ul span{
  padding: 0 .8rem;
}

nav a {
  color: #FFFFFF;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.2rem;
}

nav a:hover {
  background-color: #CC0000;
}

/*----------------------------------------------------------------------------- 
05=MAIN
-----------------------------------------------------------------------------*/

#main {  
  float: left;  
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  /* Note: widths of #left-col, #right-col, and #content should sum to 100% */
}

/*----------------------------------------------------------------------------- 
07=LEFT COLUMN
-----------------------------------------------------------------------------*/

#main #left-col {

  /* Column positioning */  
  float: left;
  width: 20%;
  max-width: 20%;
  /*push content left*/
  position: relative;
  left: calc(80% + .8rem);

  /* Column styling */
  margin-top: 2rem;    
  
}

#container-left {
  float: left;
  width: 100%;
  /*push background right*/
  position: relative;
  right: 60%;

  /* Column styling */
  background: #666666;  
  border-right: .8rem solid #BB8D49;  
}

#left-col ul li {
  padding: .3rem 0;
  margin: .3rem 5rem .3rem 3rem;
  border-bottom: 2px solid #888888;
}

#left-col a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 1.4rem;    
  display: block;
}

#left-col a:hover {
  background-color: #444444;  
}

/* Tablet */
@media (max-width: 768px) {
  #left-col ul li { 
    margin: .3rem 4rem .3rem 2rem;
  }
}

/* Mobile */
@media (max-width: 480px) {
  #left-col ul li { 
    margin: .3rem 3rem .3rem 1rem;
  }
}

/*----------------------------------------------------------------------------- 
08=RIGHT COLUMN
-----------------------------------------------------------------------------*/

#main #right-col {  
  
  /* Column positioning */  
  float: left;
  width: 20%; 
  max-width: 20%;
  /*push content left*/
  position: relative;
  left: calc(80% + 1.4rem);
  
  /* Column styling */  
  padding: 2rem;  
  font-size: 1.4rem;  

}

#container-right {
  float: left;
  width: 100%; 
  overflow: hidden;
  position: relative;

  /* Column background */
  background: #DAC092; 
}

#right-col h4 {
  margin: .5rem 0;
  color: #444444;
}

#right-col p {
  margin: 1rem 0;
  max-width: 100%;
}

#right-col a {
  color: #990000;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
}

#right-col a:hover {
  color: #FFFFFF;
}

/*----------------------------------------------------------------------------- 
09=CONTENT
-----------------------------------------------------------------------------*/

#main #content {  
  
  /* Column positioning */  
  float: left;
  width: 60%; 
  max-width: 60%;
  /*push content left*/
  position: relative;
  left: calc(80% + .8rem);

  /* Column styling */
  /*text-align: center;*/
  font-size: 1.6rem;  
  /*height: 654px;*/
}

#container-content {
  float: left;
  width: 100%; 
  /*push background right*/
  position: relative;
  right: 20%;

  /* Column background */
  background: #FFFFFF;    
}

#content a {
  color: #666666;
}

#content a:hover {
  color: #660000; 
}

/*----------------------------------------------------------------------------- 
10=FOOTER
-----------------------------------------------------------------------------*/

footer {
  background: #333333;
  color: #FFFFFF;
  height: 8rem;
  width: 100%;
  float: left;
  padding: 1rem 2rem;
  text-align: center;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: bold;
}

footer ul li {
  display: inline;  
}

footer a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: normal;
}

footer a:hover {
  color: #8F5917;
  font-weight: normal;
}