/*
	Author: Jonathan Lum
	Date Modified: 5/29/2017
	File Name: review_article.css
	
	Brief Description: This is the stylesheet for the articles in the review section of the JonEl Media site.
*/

/* CSS for all displays

/* temporary fix for page-content */
#page-content { width: auto; height: 100%; }
footer{ background-color: #3b3b3b; }

    body, html {
        height: 100%;
        background-color: #3b3b3b;
    }  

/* CSS for Desktop 768px and > width */
@media all and (min-width: 768px) {

    .parallax {
        margin: 0 auto;
//border: 1px solid red;
        padding: 0;
        height: 100%;
        width: 100%;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

	.article {
		margin: 0;
//border: 1px solid green;
		padding: 0;
        background-color: #3b3b3b;
        height: 100%;
	}
    
/* header */
    .header-row {
        height: 100%;
    }
    .header-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
 	.article header {
        margin: 0 auto;
        border-top: 2px solid orange;
        padding: 0;
        width: 100%;
        height: 75%;
        text-align: center;
        background-color: #000;
    }
     .article .header-img {
        background-color: #000;
        height: 75%;
    }
    .article .header-img img { height: 100%; }
	.article header h1 {
		margin: 0;
        border: 3px solid #1d1e20;
        padding: 1% 5% 1% 5%;
        background-color: #FFF;
        display: inline-block;
        font-size: 2em;
        font-weight: bolder;
	}
    .article header .review { color: orange; }   
    .article header table {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 0;
        background-color: #1d1e20;
        width: 100%;
        font-size: 1em;
    }   
    .article header table td {
        margin: 0;
        border: none;
        padding: 1% 0 0 0;
    }
    .article label { color: #FFF; }
    .article .mid-slash { color: grey; }
    .article .game-info { color: orange; }
    .intro-transition {
        margin: 0 auto;
//border: 1px solid red;
        padding: 0;
        height: 25%;
        width: 100%;
        background-color: #FFF;
    }

/* intro */    
    .intro-row-p1 { height: 50%; }
    .intro-col-p1 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .intro-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .intro-row-p2 { height: 100%; }
    .intro-col-p2 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }

/* graphics */
    .graphics-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .graphics-row-p1 { height: 100%; }
    .graphics-col-p1 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    
/* sound */
    .sound-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .sound-row-p1 { height: 100%; }
    .sound-col-p1 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }

/* controls */
    .controls-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .controls-row-p1 { height: 100%; }
    .controls-col-p1 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    
/* gameplay */
    .gameplay-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .gameplay-row-p1 { height: 100%; }
    .gameplay-col-p1 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;        
    }
    
/* tilt */
    .tilt-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;        
    }
    
/* difficulty */
    .difficulty-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    
/* pacing */
    .pacing-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    
/* replay */
    .replay-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    
/* conclusion */
    .conclusion-row-p1 { height: 50%; }
    .conclusion-col-p1 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .conclusion-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .conclusion-row-p2 { height: 50%; }
    .conclusion-col-p2 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;       
    }
    .conclusion-row-p3 { height: 50%; }
    .conclusion-col-p3 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    
    .intro, .graphics, .sound, .controls, .gameplay, .reviewer_tilt, .difficulty, .pacing, .replay_value, .conclusion {
        margin: 0 auto;
//border: 1px solid red;
        padding: 0;
        width: 100%;
    }
	.intro h2, .graphics h2, .sound h2, .controls h2, .gameplay h2, .reviewer_tilt h2, .difficulty h2, .pacing h2, .replay_value h2, .conclusion h2 {
		margin: 0;
//border: 1px solid red;
		padding: 1% 0 1% 0;
		text-align: center;
		font-size: 1.6em;
        font-weight: bold;
        color: #FFF;
        background-color: #1d1e20;
	}
	.intro-content, .graphics-content, .sound-content, .controls-content, .gameplay-content, .reviewer_tilt-content, .difficulty-content, .pacing-content, .replay_value-content, .conclusion-content {
		margin: 0;
		border: none;
		padding: 2% 15% 3% 15%;
		text-indent: 30px;
        font-size: 1.2em;
        background-color: #FFF;
        color: #1d1e20;
	}

/* rating */ 
    .score_text {
        margin: 0;
//border: 1px solid green;
        padding: 5px 0 5px 0;
        text-indent: 0;
        font-size: 1.2em;
    }
    svg.rating {
        margin: 0 auto;
//border: 1px solid blue;
        width: 90px;
        height: 90px;
        //display: block;
    }
    .rating-container {
        margin: 0;
        border: none;
        border-top: 5px dashed #FFF;
        border-bottom: 3px solid black;
        padding: 0;
        background-color: #1d1e20;
        color: #FFF;
        text-align: center;
    }

    .one {
        fill: #000;
        stroke: #000;
        stroke-width: 3;
        opacity: 1;
    }
    .one-text {
        fill: #FFF;
        font-size: 30px;
    }
    .two {
        fill: darkred;
        stroke: #000;
        stroke-width: 3;
        opacity: 1;
    }
    .two-text {
        fill: #000;
        font-size: 30px;
    }
    .three {
        fill: red;
        stroke: darkred;
        stroke-width: 3;
        opacity: 1;
    }
    .three-text {
        fill: #000;
        font-size: 30px;
    }
    .four {
        fill: orangered;
        stroke: darkred;
        stroke-width: 3;
        opacity: 1;
    }
    .four-text {
        fill: #000;
        font-size: 30px;
    }
    .five {
        fill: yellow;
        stroke: khaki;
        stroke-width: 3;
        opacity: 1;
    }
    .five-text {
        fill: orange;
        font-size: 30px;
    }
    .six {
        fill: yellowgreen;
        stroke: olivedrab;
        stroke-width: 3;
        opacity: 1;
    }
    .six-text {
        fill: green;
        font-size: 30px;
    }
    .seven {
        fill: lime;
        stroke: limegreen;
        stroke-width: 3;
        opacity: 1;
    }
    .seven-text {
        fill: darkgreen;
        font-size: 30px;
    }
    .eight {
        fill: green;
        stroke: darkgreen;
        stroke-width: 3;
        opacity: 1;        
    }
    .eight-text {
        fill: lime;
        font-size: 30px;
    }
    .nine {
        fill: darkgreen;
        stroke: green;
        stroke-width: 3;
        opacity: 1;
    }
    .nine-text {
        fill: lime;
        font-size: 30px;
    }
    .ten {
        fill: gold;
        stroke: darkkhaki;
        stroke-width: 3;
        opacity: 1;
    }
    .ten-text {
        fill: #FFF;
        font-size: 30px;
    }
    .tilt {
        width: 70px;
        height: 70px;
        fill: grey;
        stroke: darkgrey;
        stroke-width: 3;
        opacity: 1;         
    }
    .tilt-icon {
        fill: #FFF;
        font-size: 30px;
    }
    .tilt-text {
        fill: #FFF;
        font-size: 15px;
    }
    .other {
        width: 70px;
        height: 70px;
        fill: grey;
        stroke: darkgrey;
        stroke-width: 3;
        opacity: 1;        
    }
    .other-text {
        fill: #FFF;
        font-size: 15px;        
    }

/* Back to top link */    
    .top-link {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        text-align: center;
        font-size: 30px;
        display: block;
        width: 20%;
    }
    .top-link:hover {
        text-decoration: none;        
    }
}
/* End CSS for Desktop */





/* CSS for Mobile 767px and < width */
@media all and (max-width: 767px ) {
	
    .parallax {
        margin: 0 auto;
//border: 1px solid red;
        padding: 0;
        height: 100%;
        width: 100%;
        background-attachment: scroll;
        //background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% ;
        background-color: #000;
    }
    
	.article {
		margin: 0;
//border: 1px solid green;
		padding: 0;
        background-color: #3b3b3b;
        height: 100%;
	}

/* header */
    .header-row {
        height: 75%;
    }
    .article .header-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
 	.article header {
        margin: 0 auto;
        border-top: 2px solid orange;
        padding: 0;
        width: 100%;
        height: 75%;
        text-align: center;
        background-color: #000;
    }
     .article .header-img {
        background-color: #000;
        height: 75%;
    }
    .article .header-img img { height: 100%; }
	.article header h1 {
		margin: 0;
        border: 3px solid #1d1e20;
        padding: 1% 5% 1% 5%;
        background-color: #FFF;
        display: inline-block;
        font-size: 2em;
        font-weight: bolder;
	}
    .article header .review { color: orange; }   
    .article header table {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 0;
        background-color: #1d1e20;
        width: 100%;
        font-size: 1em;
    }   
    .article header table td {
        margin: 0;
        border: none;
        padding: 1% 0 0 0;
    }
    .article label { color: #FFF; }
    .article .mid-slash { color: grey; }
    .article .game-info { color: orange; }
    .intro-transition {
        margin: 0 auto;
//border: 1px solid red;
        padding: 0;
        height: 0%;
        width: 100%;
        background-color: #FFF;
    }

/* intro */    
    .intro-row-p1 { height: 50%;
display: none;    }
    .intro-col-p1 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
        display: none;
    }
    .article .intro-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;        
    }
    .intro-row-p2 { height: 50%; }
    .article .intro-col-p2 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;         
    }

/* graphics */
    .article .graphics-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .graphics-row-p1 { height: 50%; }
    .article .graphics-col-p1 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }    

/* sound */
    .article .sound-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .sound-row-p1 { height: 50%; }
    .article .sound-col-p1 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    
/* controls */
    .article .controls-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .controls-row-p1 { height: 50%; }
    .article .controls-col-p1 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    
/* gameplay */
    .article .gameplay-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .gameplay-row-p1 { height: 50%; }
    .article .gameplay-col-p1 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;        
    }
    
/* tilt */
    .article .tilt-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;        
    }
    
/* difficulty */
    .article .difficulty-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    
/* pacing */
    .article .pacing-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    
/* replay */
    .article .replay-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    
/* conclusion */
    .conclusion-row-p1 { height: 50%; }
    .article .conclusion-col-p1 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .article .conclusion-col {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .conclusion-row-p2 { 
        height: 50%;
        display: none;
    }
    .article .conclusion-col-p2 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;       
    }
    .conclusion-row-p3 { 
        height: 50%;
        display: none;
    }
    .article .conclusion-col-p3 {
        margin: 0 auto;
//border: 1px solid green;
        padding: 0;
        height: 100%;
    }
    .conclusion-col .parallax {
        background-image: none !important;
    }
    
    .intro, .graphics, .sound, .controls, .gameplay, .reviewer_tilt, .difficulty, .pacing, .replay_value, .conclusion {
        margin: 0 auto;
//border: 1px solid red;
        padding: 0;
        width: 100%;
    }
	.intro h2, .graphics h2, .sound h2, .controls h2, .gameplay h2, .reviewer_tilt h2, .difficulty h2, .pacing h2, .replay_value h2, .conclusion h2 {
		margin: 0;
//border: 1px solid red;
		padding: 1% 0 1% 0;
		text-align: center;
		font-size: 1.3em;
        font-weight: bold;
        color: #FFF;
        background-color: #1d1e20;
	}
	.intro-content, .graphics-content, .sound-content, .controls-content, .gameplay-content, .reviewer_tilt-content, .difficulty-content, .pacing-content, .replay_value-content, .conclusion-content {
		margin: 0;
		border: none;
		padding: 3% 5% 3% 5%;
		text-indent: 30px;
        font-size: .9em;
        background-color: #FFF;
        color: #1d1e20;
	}
    
/* rating */ 
    .score_text {
        margin: 0;
//border: 1px solid green;
        padding: 1% 0 1% 0;
        text-indent: 0;
        font-size: .9em;
    }
    svg.rating {
        margin: 0 auto;
//border: 1px solid blue;
        width: 90px;
        height: 90px;
    }
    .rating-container {
        margin: 0;
        border: none;
        border-top: 5px dashed #FFF;
        border-bottom: 3px solid black;
        padding: 0;
        background-color: #1d1e20;
        color: #FFF;
        text-align: center;
    }

    .one {
        fill: #000;
        stroke: #000;
        stroke-width: 3;
        opacity: 1;
    }
    .one-text {
        fill: #FFF;
        font-size: 30px;
    }
    .two {
        fill: darkred;
        stroke: #000;
        stroke-width: 3;
        opacity: 1;
    }
    .two-text {
        fill: #000;
        font-size: 30px;
    }
    .three {
        fill: red;
        stroke: darkred;
        stroke-width: 3;
        opacity: 1;
    }
    .three-text {
        fill: #000;
        font-size: 30px;
    }
    .four {
        fill: orangered;
        stroke: darkred;
        stroke-width: 3;
        opacity: 1;
    }
    .four-text {
        fill: #000;
        font-size: 30px;
    }
    .five {
        fill: yellow;
        stroke: khaki;
        stroke-width: 3;
        opacity: 1;
    }
    .five-text {
        fill: orange;
        font-size: 30px;
    }
    .six {
        fill: yellowgreen;
        stroke: olivedrab;
        stroke-width: 3;
        opacity: 1;
    }
    .six-text {
        fill: green;
        font-size: 30px;
    }
    .seven {
        fill: lime;
        stroke: limegreen;
        stroke-width: 3;
        opacity: 1;
    }
    .seven-text {
        fill: darkgreen;
        font-size: 30px;
    }
    .eight {
        fill: green;
        stroke: darkgreen;
        stroke-width: 3;
        opacity: 1;        
    }
    .eight-text {
        fill: lime;
        font-size: 30px;
    }
    .nine {
        fill: darkgreen;
        stroke: green;
        stroke-width: 3;
        opacity: 1;
    }
    .nine-text {
        fill: lime;
        font-size: 30px;
    }
    .ten {
        fill: gold;
        stroke: darkkhaki;
        stroke-width: 3;
        opacity: 1;
    }
    .ten-text {
        fill: #FFF;
        font-size: 30px;
    }
    .tilt {
        width: 70px;
        height: 70px;
        fill: grey;
        stroke: darkgrey;
        stroke-width: 3;
        opacity: 1;         
    }
    .tilt-icon {
        fill: #FFF;
        font-size: 30px;
    }
    .tilt-text {
        fill: #FFF;
        font-size: 15px;
    }
    .other {
        width: 70px;
        height: 70px;
        fill: grey;
        stroke: darkgrey;
        stroke-width: 3;
        opacity: 1;        
    }
    .other-text {
        fill: #FFF;
        font-size: 15px;        
    }
    
/* Back to top link */    
    .top-link {
        margin: 0 auto;
//border: 1px solid green;
        padding: 5% 0 5% 0;
        text-align: center;
        font-size: 1.5em;
        display: block;
        width: 20%;
    }
    .top-link:hover {
        text-decoration: none;        
    }
	
}
/* End CSS for Mobile */