/*
	Author: Jonathan Lum
	Date Modified: 9/1/2017
	File Name: playstation_plus_article.css
	
	Brief Description: This is the stylesheet for the Playstation Plus Minus articles on the JonEl Media website.
*/

/* temporary fix for page-content */
#page-content { width: auto; height: 100%; }

    body, html {
        height: 100%;
        background-color: #3b3b3b;
    }
    
    #page-content .col-xs-12 {
        padding-right: 0;
        padding-left: 0;
    }

/* CSS for Desktop 768px and > width */
@media all and ( min-width: 768px ) {
	    
	.article {
		margin: 0;
//border: 1px solid green;
        border: none;
		padding: 0;
	}
    .article header img {
        width: 100%;
    }
	.article header h1 {
		margin: 0;
//border: 1px solid purple;
        border-top: 1px solid #ffc72d;
		padding: .5% 0 .5% 5%;
        color: #FFF;
        background-color: #0148a0;
        font-size: 1.6em;
	}
    .yellow { color: #ffc72d; }
    
    .games-list {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 0 0 2% 0;
        background-color: #FFF;
    }
    .games-list h2 {
        margin: 0 0 2% 0;
//border: 1px solid red;
        border: none;
        padding: .5% 0 .5% 0;
        text-align: center;
        font-size: 1.6em;
        background-color: #0079d3;
        color: #FFF;        
    }
    .games-list h3 {
        margin: 0;
        border: none;
        padding: .5% 0 .5% 0;
        text-align: center;
        font-size: 1.2em;
        font-weight: bold;
    }
    .games-list ul {
        margin: 0;
//border: 1px solid green;
        padding: 0;
    }
    .games-list li {
//border: 1px solid red;
        list-style-type: none;
        text-align: center;
    }
    
    .first-impression {}
    .first-impression h2 {
        margin: 0;
        border: none;
        padding: .5% 0 .5% 0;
        text-align: center;
        font-size: 1.6em;
        background-color: #0079d3;
        color: #FFF;
    }    
     .first-impression p {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 2% 15% 2% 15%;
        background-color: #FFF;
        text-indent: 3%;
    }
    .fun-ranking {
        margin: 0;
//border: 1px solid purple;
        border: none;
        padding: 0 0 2% 0;
        background-color: #FFF;
        overflow: hidden;
        clear: both;
    }
    .fun-rank1, .fun-rank2, .fun-rank3, .fun-rank4, .fun-rank5, .fun-rank6 {
        margin: 2% 0 0 0;
//border: 1px solid purple;
        border: none;
        padding: 0 15% 0 15%;
        overflow: hidden;
        clear: both;
    }
    .fun-ranking h2 {
        margin: 0 0 0 0;
        border: none;
        padding: .5% 0 .5% 0;
        text-align: center;
        font-size: 1.6em;
        background-color: #0079d3;
        color: #FFF;
    }
    .fun-ranking h3 {
        margin: 0;
//border: 1px solid green;
        border: none;
        border-top: 2px solid #333;
        padding: 1% 0 1% 0;
        font-size: 1.4em;
    }
    .fun-ranking .game-cover {
        margin: 1% 2% 1% 0;
        border: none;
        padding: 0;
        height: 100px;
        float: left;
    }
    
    .value {
        margin: 0;
//border: 1px solid purple;
        border:none;
        padding: 0;
        background-color: #FFF;        
    }
    .value h2 {
        margin: 0 0 2% 0;
        border: none;
        padding: .5% 0 .5% 0;
        text-align: center;
        font-size: 1.6em;
        background-color: #0079d3;
        color: #FFF;        
    }
    .value h3 {
        margin: 0;
//border: 1px solid green;
        border: none;       
        padding: 1% 0 1% 0;
        font-size: 1.4em;
        width: 50%;
        float: left;
    }
    .value h4 {
        margin: 0;
//border: 1px solid green;
        //border: none;
        padding: 1% 0 1% 0;
        font-size: 1.2em;
        width: 50%;
        float: right;
        text-align: right;
    }
    .value p {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 1% 0 1% 0;
        background-color: #FFF;
        text-indent: 3%;
        clear: both;
    }
    .value .rating {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: 1% 0 1% 0;
        color: #022a7f;
        text-align: center;
        font-weight: bold;
        width: 100%
    }
    .value .all-value, .value .ps4-value, .value .ps3-value, .value .psvita-value {
        margin: 0 15% 0 15%;
//border: 1px solid green;
        border: none;
        border-top: 2px solid #333; 
        padding: 0 0 2% 0;
        overflow: hidden;
    }

}
/* End CSS for Desktop */


/* CSS for Mobile 767px and < width */
@media all and ( max-width: 767px ) {
	
	.article {
		margin: 0;
//border: 1px solid green;
        border: none;
		padding: 0;
	}
    .article header img {
        width: 100%;
    }
	.article header h1 {
		margin: 0;
//border: 1px solid purple;
        border-top: 1px solid #ffc72d;
		padding: .5% 0 .5% 5%;
        color: #FFF;
        background-color: #0148a0;
        font-size: 1.2em;
	}
    .yellow { color: #ffc72d; }
    
    .games-list {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 0 0 2% 0;
        background-color: #FFF;
    }
    .games-list h2 {
        margin: 0 0 2% 0;
//border: 1px solid red;
        border: none;
        padding: .5% 0 .5% 0;
        text-align: center;
        font-size: 1.1em;
        background-color: #0079d3;
        color: #FFF;        
    }
    .games-list h3 {
        margin: 0;
        border: none;
        padding: .5% 0 .5% 0;
        text-align: center;
        font-size: 1em;
        font-weight: bold;
    }
    .games-list ul {
        margin: 0;
//border: 1px solid green;
        padding: 0;
    }
    .games-list li {
//border: 1px solid red;
        list-style-type: none;
        text-align: center;
        font-size: .9em;
    }
    
    .first-impression {}
    .first-impression h2 {
        margin: 0;
        border: none;
        padding: .5% 0 .5% 0;
        text-align: center;
        font-size: 1.1em;
        background-color: #0079d3;
        color: #FFF;
    }    
     .first-impression p {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 2% 7% 2% 7%;
        background-color: #FFF;
        text-indent: 3%;
        font-size: .9em;
    }
    .fun-ranking {
        margin: 0;
//border: 1px solid purple;
        border: none;
        padding: 0 0 2% 0;
        background-color: #FFF;
        overflow: hidden;
        font-size: .9em;
    }
    .fun-rank1, .fun-rank2, .fun-rank3, .fun-rank4, .fun-rank5, .fun-rank6 {
        margin: 2% 0 0 0;
//border: 1px solid purple;
        border: none;
        padding: 0 7% 0 7%;
    }
    .fun-ranking h2 {
        margin: 0 0 0 0;
        border: none;
        padding: .5% 0 .5% 0;
        text-align: center;
        font-size: 1.2em;
        background-color: #0079d3;
        color: #FFF;
    }
    .fun-ranking h3 {
        margin: 0;
//border: 1px solid green;
        border: none;
        border-top: 2px solid #333;
        padding: 2% 0 2% 0;
        font-size: 1.1em;
        font-weight: bold;
    }
    .fun-ranking .game-cover {
        margin: 1% 2% 1% 0;
        border: none;
        padding: 0;
        height: 100px;
        float: left;
    }
    
    .value {
        margin: 0;
//border: 1px solid purple;
        border:none;
        padding: 0;
        background-color: #FFF;        
    }
    .value h2 {
        margin: 0 0 2% 0;
        border: none;
        padding: .5% 0 .5% 0;
        text-align: center;
        font-size: 1.1em;
        background-color: #0079d3;
        color: #FFF;        
    }
    .value h3 {
        margin: 0;
//border: 1px solid green;
        border: none;       
        padding: 1% 0 1% 0;
        font-size: 1em;
        font-weight: bold;
        width: 50%;
        float: left;
    }
    .value h4 {
        margin: 0;
//border: 1px solid green;
        //border: none;
        padding: 1% 0 1% 0;
        font-size: .9em;
        font-weight: bold;
        width: 50%;
        float: right;
        text-align: right;
    }
    .value p {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 1% 0 1% 0;
        background-color: #FFF;
        text-indent: 3%;
        font-size: .9em;
        clear: both;
    }
    .value .rating {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: 2% 0 2% 0;
        color: #022a7f;
        text-align: center;
        font-size: 1.1em;
        font-weight: bold;
        width: 100%
    }
    .value .all-value, .value .ps4-value, .value .ps3-value, .value .psvita-value {
        margin: 0 15% 0 15%;
//border: 1px solid green;
        border: none;
        border-top: 2px solid #333; 
        padding: 0 0 2% 0;
        overflow: hidden;
    }
	
}
/* End CSS for Mobile */