/*
      Final Project

      Author: Ryan Brownell, W0274281
      Date: December 12, 2015
      Filename: style.css

*/

/* Import "Muli" Font from Google Fonts */

@import url(https://fonts.googleapis.com/css?family=Muli:400,300);
/* Import "Open Sans" from Google fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic,400italic);

/* Set all the things to use open sans */

* {
	font-family: "Open Sans", Arial, Helvetica, Sans-Serif;
}

/* Headers Style */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Muli', Arial, Helvetica, Sans-Serif;
	font-weight: 300;
}

header h1 {
	margin:25px auto 25px auto;
	text-align: center;
	color: #FFF;
	font-size: 4.25em;
	letter-spacing:10px;
	font-weight: 300;
}

/* Navigation Style */
nav{
	text-align:center;
	font-family: 'Muli', Arial, Helvetica, Sans-Serif;
}

nav ul{
	
}

nav ul li{
	list-style: none;
	display: inline-block;
	width: 7.5%;
	margin: 10px;
	padding: 5px;
	background-color: #E1E1E1;
	background-color: rgba(175, 175, 175, 0.15);
	border-right: solid 1px #000;
	border-bottom: solid 1px #000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

nav ul li a{
	text-decoration: none;
	display: block;
	width: 100%;
	height:100%;
}

nav ul li a:link{
	color: #FFF;
}
nav ul li a:visited{
	color: #FFF;
}
nav ul li a:hover{
	color: #FFF;
}
nav ul li a:active{
	color: #FFF;
}

/* Article Style */

article {
	background-color: #F0F0F0;
	background-color: rgba(240, 240, 240, 0.60);
	border-right: solid 1px #000;
	border-bottom: solid 1px #000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

article h1 {
	font-size: 2em;
}

article dt {
	font-family: 'Muli', Arial, Helvetica, Sans-Serif;
	font-weight: 300;
	font-size: 1.5em;
}

article img.contacticon {
	margin: 10px 20px 0 0;
	width: 50px;
	height: 50px;
	float: left;
}

article img.contacticon:first-of-type {
	margin-top: 0;
}

/* Footer Style */
footer {
	color: #FFF;
	text-align: right;
}

/* Text Selection Highlight Colors */
/* Color Reference
blue : #00007D;
red : #A10000;
green : #007500;
violet : #5400A3;
orange : #C95000;
white : #FFF;
*/

html.fade-in-white ::-moz-selection { /* Code for Firefox */
    color: #000;
    background: #FFF;
}

html.fade-in-white ::selection {
    color: #000; 
    background: #FFF;
}

html.fade-in-blue ::-moz-selection { /* Code for Firefox */
    color: #000;
    background: #00007D;
}

html.fade-in-blue ::selection {
    color: #000; 
    background: #00007D;
}

html.fade-in-violet ::-moz-selection { /* Code for Firefox */
    color: #000;
    background: #5400A3;
}

html.fade-in-violet ::selection {
    color: #000; 
    background: #5400A3;
}

html.fade-in-red ::-moz-selection { /* Code for Firefox */
    color: #000;
    background: #A10000;
}

html.fade-in-red ::selection {
    color: #000; 
    background: #A10000;
}

html.fade-in-green ::-moz-selection { /* Code for Firefox */
    color: #000;
    background: #007500;
}

html.fade-in-green ::selection {
    color: #000; 
    background: #007500;
}

html.fade-in-orange ::-moz-selection { /* Code for Firefox */
    color: #000;
    background: #C95000;
}

html.fade-in-orange ::selection {
    color: #000; 
    background: #C95000;
}

/* Article Hyperlink Colors */

html.fade-in-blue article a:link {
	color: #00007D;
}

html.fade-in-violet article a:link {
	color: #5400A3;
}

html.fade-in-red article a:link {
	color: #A10000;
}

html.fade-in-green article a:link {
	color: #007500;
}

html.fade-in-orange article a:link {
	color: #C95000;
}

html.fade-in-blue article a:hover {
	color: #000;
}

html.fade-in-violet article a:hover {
	color: #000;
}

html.fade-in-red article a:hover {
	color: #000;
}

html.fade-in-green article a:hover {
	color: #000;
}

html.fade-in-orange article a:hover {
	color: #000;
}