/*
Theme Name: Emma The Online Comic
Author: Richie Kastl 
Author URI: http://kastlworks.com
Description: The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: twentytwelve

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*
Colors: 
    Light Gray: #484848;
*/


/********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
                                                                                                        Global
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************/

body {
    background: url("img/BGcityBW.jpg") no-repeat fixed #000; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Arial', 'sans-serif';
    font-size: 100%;
}

p, h1 {
    color: #eee;
}

hr {
    border-color: #555;
}

.backbackground {
    height: 100%;
    width: 100%
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.byebye {
    display: none;
}

video {
    width: 100% !important;
    height: auto !important;
}

.emmabgvid {
    position: absolute;
    z-index: -1;
    top: 135px;
    left: 0;
    height: 100%;
    width: 100%;
    background-size:cover;
}

@media(max-width: 1130px) {
    .emmabgvid {
        top:170px;
    }
}

.main {
    position:static;
}

.blur {
    -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px);
}

.blur #menu-emma {
        -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px);
}
/********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
                                                                                                    Pages
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************/

.news h3 a {
    color: #fff;
}

.index .issue-covers {
    max-width: 600px;
}

@media(max-width: 800px) {
    .index .alignleft {
        float:none;
    }
    .index .issue-covers {
        text-align: center;
        margin-top:40px;
    }
}

/********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
                                                                                                      Navigation
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************/

nav {
    height:150px;
    background:#262626;
    margin-top: -15px; /* weird spacing glitch */
}

#menu-emma{
    position: relative;
    top:30%;
}

.mobileNav {
    display: none;
    position: absolute;
    top:50px;
    right:10px;
    margin-top: -25px;
    margin-right: 15px;
}

.mobileNav a {
    text-decoration: none;
    color: #fff;
    font-size: 2em;
}
.facebook, .pat {
    margin-top:20px;
    margin-right:2%;
}
@media(max-width:1298px) {
    .facebook, .pat {
        display: none;
    }
}
.twitch {
    float:right;
    background: #7156a5;
    height:150px;
    padding: 0 10px;
    color:#fff;
    text-align: center;
}

.twitch .content {
    position: relative;
    top: 50%;
    margin-top: -30px;
}
@media(max-width:1221px) {
 .twitch {
    width: 100%;
    height: 50px;
 }   
 .twitch br {
    display: none;
 }

 .twitch p {
    display: inline;
    position: relative;
    top:15px;
    margin-left: 10px;
 }
}

.logo {
    background: url("img/logo.png");
    height: 142px;
    width: 250px;
    float:left;
}

.menu {
    margin: 10px 0 0 0;
    position: relative;
}

.menu li {
    padding-left: 5px;
    margin: 15px 10px;
    list-style-type:  none;
    float:left;
}

.menu li a{
    text-decoration: none;
    color: #fff;
    font-size: 2em;
}

.menu li a:hover, .issueTitle a:hover {
    color: #5957a0;   
    transition: 0.3s ease-in-out;    
}

.sub-menu {
    display: none;
}

ul.sub-menu {
    position: absolute;
    margin-left: 0px;
    opacity: 0;
    height: 0;
    left:300px;
    -webkit-transition: opacity 0.3s ease-in;
    -moz-transition: opacity 0.3s ease-in;
    -o-transition: opacity 0.3s ease-in;
    transition: opacity 0.3s ease-in;
    display: block;
}

ul.sub-menu li{
    margin:15px;
    padding:0 10px 0 0;
    font-size: 0.8em;
}

.menu li:hover > ul.sub-menu {
    opacity: 1;
    height: auto;
}

@media (max-width: 932px) {
    .menu li:hover > ul.sub-menu {
    opacity: 0;
    display: none;
}
}

/********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
                                                                                                        Issues
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************/
.issueTitle {
    font-size: 2em;
    height: 100px;
    color: white;
    position: relative;
}

.issueTitle a {
    color: #fff;
    margin-top: 10px;    
}

.issueTitle a:hover {
    text-decoration: none;
}

.issueTitle p {
    text-align: center;
    padding-top: 40px; 
}

.issues {
    padding: 30px; 
}

.issues img {
    margin-bottom: 25px;
}

.social {
    text-align: center;
}

.social h3 {
    color:#fff;
}
/********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
                                                                                                    Pages
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************/

.page-content {
    padding: 20px; 
}

.page-content img {
    margin: 15px;
}

/********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
                                                                                                    Comments
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************/

li.comment {
    list-style-type:  none;
    color: #eee;
}

/********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
                                                                                                    Media Queries
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************
*********************************************************************************************************************************************************/
@media(max-width: 932px) {
    #menu-emma {
        position: absolute;
        top: 0;
        left: -500px;
        z-index: 1000;
        background: #000;
        margin-top: 0;
    }

    .menu li{
        float: none;
        border-bottom: 3px solid #333;
        padding-bottom: 5px;
    }

    .menu li:last-child {
        border-bottom: none;
    }

    .mobileNav {
        display: block;
    }
}

@media (max-width: 768px) {
    body {
        padding:0;
    }
}