/******************************************************************************
* Title: general.css
* Author: Hunter Schoonver ~ Web Designer ~ hunter@skoonie.com
* 
* 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 -- load fonts that are necessary for the website */

/* //DEBUG HSS// Rewrite all file paths using root-relative */
@font-face {
    font-family: 'RobotSlab-Light';
    src: url('/sitewide/fonts/RobotoSlab-Light-webfont.eot');
    src: url('/sitewide/fonts/RobotoSlab-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/sitewide/fonts/RobotoSlab-Light-webfont.woff') format('woff'),
         url('/sitewide/fonts/RobotoSlab-Light-webfont.ttf') format('truetype'),
         url('/sitewide/fonts/RobotoSlab-Light-webfont.svg#roboto_slablight') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* GENERAL -- styling and classes applied to elements in multiple sections */

body, html {
	width: 100%;
	background-color: #F1F1F1;
	box-sizing: border-box;
	color: #F1F1F1;
	font-family: 'RobotSlab-Light', Arial;
	font-size: 25px;
	margin: 0;
	padding: 0;
    text-align: center;
}

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

a { 
	color: #008fb3; 
	text-decoration: none; 
}
a:link { 
	color: #008fb3; 
	text-decoration: none;
}
a:hover {
	color: #00ccff; 
    text-decoration: none;
}
a img {
	padding: 0px;
	border: 0px;
}
a:hover img {
	padding: 0px;
	border: 0px;
}

div {
    box-sizing: border-box;
}

h1 {
    color: #000;
    font-size: 30px;
    font-weight: normal;
    margin: 50px 0 10px 0;
}

.titleInset {
    background-color: #F1F1F1;
    color: rgba(140, 140, 140, .2);
    font-family: 'RobotSlab-Light';
    font-size: 80px;
    text-shadow: 0px 1px 3px #F1F1F1, 0 0 0 #000;
}

.titleInset span {
   display: inline-block;
}

.shrink {
   -moz-transform:scale(.6,1);
    text-align: left;
    margin-left: -98px;
}

.shrink2 {
   -moz-transform:scale(.6,1);
    text-align: left;
    margin-left: -80px;
}

.titleInset .bigLetter {
    color: rgba(140, 140, 140, 0.3);
    display: inline-block;
    font-size: 160px;
    font-weight: bold;
    text-shadow: 0px 2px 4px #F1F1F1, 0 0 0 #000;
}

/* end of GENERAL */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* HEADER SECTION -- styling for the Header Section */

#headerSection {
	width: 100%;
    color: #b3b3b3;
    display: inline-block;
	overflow: hidden;
	padding: 15px;
	text-align: center;
}

#headerSection img {
    width: 100%;
    max-width: 588px;
}

#menu {
    width: 100%;
    color: #8080ff; 
    display: inline-block;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

#menu li {
	border-bottom: 0;
	box-sizing: border-box;
	display: inline-block;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
    margin: 0 20px 0 20px;
	text-align: center;
}

#menu li a {
	color: #8c8c8c;
    display: block;
	padding: 10px;
    text-align: center;
    text-decoration: none;
	transition: background-color, border-color 0.35s ease;
	
}
#menu li a:hover {
	color: #000;
}

/* Styling for when narrower than 450px */
@media (max-width: 450px) {
    
    #menu li {
        margin: 0 2% !important;
    }
    
    #menu li a {
        color: #a6a6a6;
        padding: 10px 5px;
    }
    
}

/* Styling for when narrower than 500px */
@media (max-width: 500px) {
    
    #menu li {
        font-size: 18px;
        margin: 0 10px 0 10px;
    }
    
}

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


/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */
/* CONTENT SECTION -- styling for the Content Section */

#contentSection {
	width: 100%;
    max-width: 900px;
	background-color: none;
    display: inline-block;
	margin: 0 auto;
	overflow: hidden;
	padding: 40px 10px 10px 10px;
	text-align: center;
}

.articleBubble {
    width: 100%;
    border-bottom: 1px #8c8c8c solid;
    border-top: 1px #8c8c8c solid;
    display: table;
    margin: 0 0 80px 0;
    padding: 15px;
    text-align: left;
}
.articleBubble:hover {
    border-bottom: 1px #000 solid;
    border-top: 1px #000 solid;
}

.dark {
    font-weight: bold;
}

.pageAuthor {
    border-right: 1px #a6a6a6 solid;
    display: inline-block;
    padding: 0 5px;
}

.pageAuthorDate {
    width: 100%;
    color: #a6a6a6;
    display: inline-block;
    font-size: 20px;
    margin: 10px 0 0 0;
    text-align: right;
}

.pageDate {
    display: inline-block;
    padding: 0 5px;
}

.pageImage {
    width: 100%;
    height: 400px;
    display: inline-block;
    padding: 60px 0 10px 0;
    text-align: center;
}
.pageImage div {
    width: 100%;
    max-width: 450px;
    height: 100%;
    background-position: center top;
    border-radius: 3px;
	background-repeat: no-repeat; 
    display: inline-block;
}

.pageSubTitle {
    color: #8c8c8c;
    display: inline-block;
    font-size: 30px;
}

.pageTitle a {
    color: #000;
    font-size: 50px;
}
.pageTitle a:hover {
    color: #000;
    text-decoration: none;
}

.story {
    margin: 0 0 0 20px;
}

.words {
    width: 100%;
    color: #333333;
    display: inline-block;
    font-family: Arial;
    font-size: 19px;
    line-height: 32px;
    margin: 0;
    padding: 20px 0 0 0;
    text-align: center;
}

.wordsContainer {
    width: 100%;
    max-width: 725px;
    display: inline-block;
    text-align: left;
}

.words iframe {
    width: 100%;
    max-width: 450px;
    height: 300px;
}

/* Styling for when narrower than 630px */
@media (max-width: 630px) {
    
    h1 {
        font-size: 25px;
    }
    
    .articleBubble {
        padding: 15px 5px;
    }
    
    .pageTitle a {
        font-size: 40px;
    }
    
    .words {
        font-size: 18px;
        line-height: 30px;
    }
    
}

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