/******************************************************************************
* Title: general.css
* Author: Hunter Schoonover
* 
* Purpose:
* 
* This cascading style sheet provides a general look and feel for the entire 
* website, which is why it is in the "sitewide" folder. To provide a consistent
* style across the site, this css file should be included in all pages.
*
* Example usage (using root-relative path):
* 		<link rel="stylesheet" href="/sitewide/general.css">
*
*/

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* FONTS */

@font-face {
	font-family: 'ElegantIcons';
	src:url('fonts/ElegantIcons.eot');
	src:url('fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
		url('fonts/ElegantIcons.woff') format('woff'),
		url('fonts/ElegantIcons.ttf') format('truetype'),
		url('fonts/ElegantIcons.svg#ElegantIcons') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'SegoeScript';
    src: url('/sitewide/fonts/SegoeScript.eot');
    src: url('/sitewide/fonts/SegoeScript.eot') format('embedded-opentype'),
         url('/sitewide/fonts/SegoeScript.woff') format('woff'),
         url('/sitewide/fonts/SegoeScript.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

/* end of FONTS */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* BASIC -- styling that applies to basic elements that affect all sections */

body, html {
	width: 100%;
	height: 100%;
	color: #fff;
	font-family: "Open Sans", sans-serif; 
	font-size: 0;
	margin: 0;
	padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

a {
    color: rgb(0, 0, 238);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

a:link {
    color: rgb(0, 0, 238);
}

#container {
    width: 100%;
    min-height: 100%;
}

/* end of BASIC */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* HEADER SECTION -- Styling for the header section */

#header {
    width: 100%;
    height: 45px;
    background-color: rgba(0, 0, 0, 1);
    display: inline-block;
    padding: 0 20px 0 20px;
}

.searchBar {
    height: 100%; 
    color: #fff; 
    float: right; 
    font-size: 20px; 
    padding: 8px 0;
}

.searchBar a {
    color: #fff;
}
.searchBar a:hover {
    color: #fff;
    text-decoration: none;
}

.searchBarTextInput {
    width: 300px;
    height: 100%; 
    background: none;
    border: 0;
    border-bottom: 1px #fff solid;
    color: #fff;
    display: inline-block;
    font-size: 20px;
}

.websiteTitle {
    width: 100%;
    height: 100%;
    max-width: 335px;
    float: left;
}
.websiteTitle div {
    width: 100%;
    height: 100%;
    display: table;
}
.websiteTitle div div {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}
.websiteTitle img {
    width: 100%;
}

.icon_search {
    height: 100%; 
    cursor: pointer;
    font-family: 'ElegantIcons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
    padding: 0 5px;
	text-transform: none;
    vertical-align: middle;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon_search:before {
	content: "\55";
}

/* Styling for when narrower than 800px */
@media (max-width: 800px) {
    
    .searchBar {
        font-size: 18px;
        padding: 4px 0 0 0;
    }
    
    .searchBarTextInput {
        width: 200px;
    }
    
}

/* end of HEADER SECTION */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* NAVIGATION SECTION -- Styling for the navigation section */

#navContainer {
    width: 100%;
    height: 300px;
    background-color: transparent;
    background: none;
    border-top: 1px #000 solid;
    border-bottom: 1px #000 solid;
    color: #fff;
    display: table;
    font-size: 30px;
}

#navContainer #backgroundOverlay {
    width: 100%;
    height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#navContainer #squaresContainer {
    display: inline-block;
}

#squareOneCont {
    display: inline-block; 
    padding: 50px 0 0 0; 
    vertical-align: top;
}

#squareTwoCont {
    display: inline-block; 
    padding: 0; 
    vertical-align: top;
}

#squareThreeCont {
    display: inline-block; 
    padding: 20px 0 0 0; 
    vertical-align: top;
}

#squareFourCont {
    display: inline-block; 
    padding: 0; 
    vertical-align: top;
}

#squareFiveCont {
    display: inline-block; 
    padding: 40px 0 0 0; 
    vertical-align: top;
}

#navContainer .square {
    width: 220px;
    height: 160px;
    border: 1px #fff solid;
    cursor: pointer;
    display: inline-block;
    font-size: 30px;
    text-align: center;
    transition: all 250ms linear;
    vertical-align: center;
}
#navContainer .square:hover {
    background-color: rgba(0, 0, 0, 0.3); 
    transition: all 250ms linear;
}

#navContainer .square a {
    width: 100%;
    height: 100%;
    color: #fff;
    display: table;
    text-decoration: none;
}
#navContainer .square a:hover {
    color: #fff;
    text-decoration: none;
}

#navContainer .square a span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

/* Styling for when narrower than 550px */
@media (max-width: 550px) {
    
    #navContainer {
        height: 325px;
    }
    
    #navContainer .square {
        font-size: 23px;
    }
    
    #squareOneCont {
        width: 100%;
        padding: 0 0 0 10%;
        text-align: left;
    }
    
    #squareTwoCont {
        width: 100%;
        padding: 0 0 0 25%;
        text-align: left;
    }
    
    #squareThreeCont {
        width: 100%;
        padding: 0 0 0 10%;
        text-align: left;
    }
    
    #squareFourCont {
        width: 100%;
        padding: 0 0 0 25%;
        text-align: left;
    }
    
    #squareFiveCont {
        width: 100%;
        padding: 0 0 0 10%;
        text-align: left;
    }
    
}

/* Styling for when wider than 550px and narrower than 650px */
@media (min-width: 550px) and (max-width: 650px) {
    
    #navContainer .square {
        font-size: 19px !important;
    }
    
}

/* Styling for when wider than 550px and narrower than 800px */
@media (min-width: 550px) and (max-width: 800px) {
    
    #navContainer .square {
        font-size: 23px;
    }
    
    #squareOneCont {
        padding: 30px 0 0 0; 
    }
    
    #squareThreeCont {
        padding: 30px 0 0 0; 
    }

    #squareFiveCont {
        padding: 30px 0 0 0; 
    }
    
}

/* Styling for when narrower than 800px */
@media (max-width: 800px) {
    
    #navContainer #backgroundOverlay {
        vertical-align: bottom;
    }
    
    #navContainer .square {
        width: auto;
        height: auto;
        border: 0;
        padding: 10px 0 0 0;
    }
    
}

/* Styling for when wider than 800px narrower than 1200px */
@media (min-width: 801px) and (max-width: 1200px) {
    
    #navContainer .square {
        width: 150px;
        height: 130px;
        font-size: 23px;
    }
    
}

/* end of NAVIGATION SECTION */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* CONTENT SECTION -- Styling for the content section */

.content {
    min-height: 100%;
    background-color: #fff;
    background-image: url('ns-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 30px;
    text-align: center;
}

.words {
    width: 100%;
    max-width: 900px;
    color: #000;
    display: inline-block;
    font-size: 20px;
    line-height: 35px;
    text-align: left;
}

.wordsImage {
    width: 100%; 
    padding: 30px 0 20px 0; 
    text-align: center;
}

.wordsImage img {
    width: 400px;
    max-width: 100%;
}

/* Styling for when narrower than 650px */
@media (max-width: 650px) {
    
    .words {
        font-size: 18px;
    }
    
}

/* end of CONTENT SECTION */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* FOOTER SECTION -- Styling for the footer section */

#footerSection {
	width: 100%;
	height: 40px;
	background-color: #000;
	color: rgb(77, 77, 77);
	display: inline-block;
	font-size: 14px;
	margin: 0;
	padding: 10px;
	text-align: center;
}

/* end of FOOTER SECTION */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */