/*
	Author: Jonathan Lum
	Date Modified: 5/29/2017
	File Name: reviews.css
	
	Brief Description: This is the stylesheet for the Reviews page of the JonEl Media website.
*/

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

    body, html {
        height: 100%;
        background-color: #3b3b3b;
    }
    
    #reviews .row { margin: 0; }
    #reviews .col-xs-12 { padding: 0; }

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

	#reviews {
		margin: 0 auto;
		border: none;
//border: 1px solid green;
		padding: 0;
	}
	#reviews .header {
        margin: 0 auto;
//border: 1px solid green;
		border: none;
		padding: 0;
        background-color: #1d1e20;
        overflow: hidden;
	}
    #reviews .header h1 {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: 2% 5% 2% 3%;
        color: #FFF;
        font-size: 2em;
    }
	#reviews-list {
		margin: 0;
		border: none;
//border: 1px solid orange;
		padding: 0;
	}
    #reviews-list .review-container {
        margin: 0 auto;
//border: 1px solid green;
        border-top: 1px solid grey;
        padding: 0;
        clear: both;
        overflow: hidden;
    }
    #reviews-list .review {
        margin: 0;
        border: none;
        padding: 0;
    }
    #reviews-list .cover-image-container {
        margin: 0;
//border: 1px solid red;
        padding: 0;
        background-color: #000;
        min-height: 150px;
        overflow: hidden;
    }
    #reviews-list .cover-image {
        margin: 0 auto;
//border: 1px solid green;
        padding:0;
        width: 100px;
        display: block;
    }
    #reviews-list .review-info {
        margin: 0;
//border: 1px solid red;
        border-left: 1px solid grey;
        border-right: 1px solid grey;
        padding: 1% 4% 0 4%;
        background-color: #1d1e20;
        min-height: 150px;
        position: relative;
    }
    .review-info h3 {
        margin: 0;
//border: 1px solid blue;
        border: none;
        padding: 0;
        color: #FFF;
        font-size: 1.4em;
    }
    .review-info p {
        margin: 0;
        border: none;
        padding: 1% 2% 1% 2%;
        color: #FFF;
        font-size: 1em;
    }
    .review-info .review-date {
        margin: 0;
        border: none;
        padding: 0;
        font-size: .9em;
        color: grey;
        position: absolute;
        bottom: 1%;
        right: 4%;
    }
    .review-info .system {
        margin: 0;
        border: none;
        padding: 0;
        font-size: .9em;
        color: orange;
    }
    .review-info .genre {
        margin: 0;
        border: none;
        padding: 0;
        font-size: .9em;
        color: darkgrey;
    }
    .review-info .read-watch {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 0;
        color: #FFF;
        position: absolute;
        bottom: 1%;
    }
    .review-info a:hover {
        text-decoration: none;
        color: #00ceff;
    }
    #reviews-list .rating-container {
        margin: 0;
//border: 1px solid red;
        padding: 0;
        color: #FFF;
        background-color: #1d1e20;
min-height: 150px;
    }
    .score_text {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 1% 0 1% 0;
        text-indent: 0;
        font-size: 1.2em;
        text-align: center;
    }
    svg.rating {
        margin: 0 auto;
//border: 1px solid blue;
        border: none;
        width: 90px;
        height: 90px;
        display: block;
    }
    .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: #000;
        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;        
    }
    a.disabled {
        pointer-events: none;
        cursor: default;
        color: grey;
    }
	
}
/* End CSS for Desktop */


/* CSS for Mobile 767px and < width */
@media all and (max-width: 767px ) {
	
	#reviews {
		margin: 0 auto;
		border: none;
//border: 1px solid green;
		padding: 0;
	}
	#reviews .header {
        margin: 0 auto;
//border: 1px solid green;
		border: none;
		padding: 0;
        background-color: #1d1e20;
        overflow: hidden;
	}
    #reviews .header h1 {
        margin: 0;
//border: 1px solid red;
        border: none;
        padding: 2% 5% 2% 3%;
        color: #FFF;
        font-size: 2em;
    }
	#reviews-list {
		margin: 0;
		border: none;
//border: 1px solid orange;
		padding: 0;
	}
    #reviews-list .review-container {
        margin: 0 auto;
//border: 1px solid green;
        border-top: 1px solid grey;
        padding: 0;
        clear: both;
        overflow: hidden;
    }
    #reviews-list .review {
        margin: 0;
        border: none;
        padding: 0;
    }
    #reviews-list .cover-image-container {
        margin: 0;
//border: 1px solid red;
        border-left: 1px solid grey;
        padding: 0;
        background-color: #000;
        min-height: 150px;
        overflow: hidden;
    }
    #reviews-list .cover-image {
        margin: 0 auto;
//border: 1px solid green;
        padding:0;
        width: 100px;
        display: block;
    }
    #reviews-list .review-info {
        margin: 0;
//border: 1px solid red;
        border-left: 1px solid grey;
        border-right: 1px solid grey;
        padding: 1% 4% 8% 4%;
        background-color: #1d1e20;
        min-height: 150px;
        position: relative;
    }
    .review-info h3 {
        margin: 0;
//border: 1px solid blue;
        border: none;
        padding: 4% 0 0 0;
        color: #FFF;
        font-size: 1.4em;
    }
    .review-info p {
        margin: 0;
        border: none;
        padding: 1% 4% 1% 4%;
        color: #FFF;
        font-size: 1em;
    }
    .review-info .review-date {
        margin: 0;
        border: none;
        padding: 0;
        font-size: .9em;
        color: grey;
        position: absolute;
        bottom: 6%;
        right: 4%;
    }
    .review-info .system {
        margin: 0;
        border: none;
        padding: 0;
        font-size: .9em;
        color: orange;
    }
    .review-info .genre {
        margin: 0;
        border: none;
        padding: 0;
        font-size: .9em;
        color: darkgrey;
    }
    .review-info .read-watch {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 0;
        color: #FFF;
        position: absolute;
        bottom: 6%;
    }
    .review-info a:hover {
        text-decoration: none;
        color: #00ceff;
    }
    #reviews-list .rating-container {
        margin: 0;
//border: 1px solid red;
        border-right: 1px solid grey;
        padding: 0;
        color: #FFF;
        background-color: #000;
min-height: 150px;
    }
    .score_text {
        margin: 0;
//border: 1px solid green;
        border: none;
        padding: 1% 0 1% 0;
        text-indent: 0;
        font-size: 1.2em;
        text-align: center;
    }
    svg.rating {
        margin: 0 auto;
//border: 1px solid blue;
        border: none;
        width: 90px;
        height: 90px;
        display: block;
    }
    .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: #000;
        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;        
    }
    a.disabled {
        pointer-events: none;
        cursor: default;
        color: grey;
    }
	
}
/* End CSS for Mobile */