/*
	Author: Jonathan Lum
	Date Modified: 7/11/2017
	File Name: index.css
	
	Brief Description: This is the stylesheet specifically for the index.html page
*/

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

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

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

/* carousel style */    
    #myCarousel {
        color: #FFF;
        background-color: #000;
    }
    #myCarousel .slide {
//border: 1px solid green;
        background-color: #000;
        position: relative;
        overflow: hidden;
    }
    #myCarousel .slide .image img {
//border: 1px solid red;
        width: 70%;
        float: left;
    }
    #myCarousel .slide .text {
//border: 1px solid yellow;
        width: 30%;
        float: left;
    }
    #myCarousel .slide .text h3 {
        margin: 0;
        border: none;
        padding: 10% 2% 10% 2%;
        text-align: center;
    }
    #myCarousel .slide .text p {
        margin: 0;
        border: none;
        padding: 0 10% 0 10%;
        text-align: center;
    }
    #myCarousel .slide .full {
        width: 100%;
    }
    #myCarousel .slide .full img {
        width: 100%;
    }

/* content pane style */
	#content-panes {
        margin: 0 auto;
        margin-top: .5%;
//border: 1px solid green;
        padding: 0;
	}
    
    .left { margin-right: 1%; }
    .middle { 
        margin-right: 1%;
        margin-left: 1%;
    }
    .right { margin-left: 1%; }
    
    .pane {
        margin-top: 2%;
//border: 1px solid blue;
        padding-bottom: 30px;
        background-color: #F2F2F3;
        min-height: 450px;
    }
    .pane a {
		color: orange;
		text-decoration: none;
    }
    .pane a:hover {
		color: #00ceff;
		text-decoration: none;       
    }
    .pane h2 {
		margin: 0;
//border: 1px solid blue;
        border-bottom: 1px solid orange;
        padding: 1% 4% 1% 4%;
        background-color: #1d1e20;
        font-size: 1.4em;        
    }
    .pane h3 {
		margin: 0;
//border: 1px solid red;
		padding: 1% 5% 1% 5%;
        color: #FFF;
        background-color: grey;
        font-size: 1.1em;     
    }
    .pane ul {
        margin:  1% 1% 1% 1%;
//border: 1px solid red;
        padding: 0;        
    }
    .pane li {
        margin: 1px 0 1px 0;
//border: 1px solid green;
        padding: 0;
        list-style-type: none; 
        background-color: #FFF;     
    }
    .pane li a {
//border: 1px solid blue;
        color: #4d4d4d;
        text-decoration: none;
		display: inline;
    }
    .pane li a:hover {
        color: #00ceff;
        text-decoration: none;        
    }
    .pane .game-name {
        font-weight: bold;
    }
    .pane .date {
        font-family: courier;
		font-weight: bold;
        color: darkBlue;        
    }
    .pane .cover-image {
        background-color: #000;
        width: 45px;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        overflow: hidden;
    }
    .pane img {
        height: 30px;
    }

/* Playstation Plus Minus pane */    
    .pane table {
        margin: 1% 1% 1% 1%;
        border: 1px solid red;
        width: 98%;
        background-color: #FFF;
    }
    .pane tr {}
    .pane th { border: 1px solid #F2F2F3; }
    .pane th.month { padding: 0 0 0 3%; }
    .pane th.year { text-align: center; }
    .pane th.all { text-align: center; }
    .pane th.ps4 { text-align: center; }
    .pane th.ps3 { text-align: center; }
    .pane th.vita { text-align: center; }
    .pane td { border: 1px solid #F2F2F3; }
    .pane td.month { padding: 0 0 0 3%; }
    .pane a.month-name { font-weight: bold; }
    .pane td.year { 
        text-align: center;
        font-family: courier;
        color: darkBlue;
    }
    .pane td.all {
        text-align: center;
        font-family: courier;
        color: darkBlue;
    }
    .pane td.ps4 {
        text-align: center;
        font-family: courier;
        color: darkBlue;
    }
    .pane td.ps3 {
        text-align: center;
        font-family: courier;
        color: darkBlue;
    }
    .pane td.vita {
        text-align: center;
        font-family: courier;
        color: darkBlue;
    }

/* Reviews pane */
    .pane .read-link {
        color: orange;
    }
    
/* Free Play pane */
    #free_play li {
        overflow: hidden;
    }
    #free_play .cover-image {
//border: 1px solid purple;
        padding: 2% 0 2% 0;
        overflow: hidden;
        float: left;
        height: 100%;
    }
    .pane .video-name {
//border: 1px solid green;
        padding: 1% 1% 1% 1%;
        font-size: .9em;
        overflow: hidden;
    }
    
/* Schedule */
    #schedule li {
        padding: 0 2% 0 2%;
    }
    .show-name {
        font-weight: bold;
    }
    .show-name.playthroughs {
        color: green;
    }
    .show-name.free_play {
        colors: purple;
    }


    .pane .visit-page-container {
//border: 1px solid red;
        border: none;
        padding: 0;
        width: 99%;
        position: absolute;
        bottom: 0;
        right: 1%;
    }
    .pane.left .visit-page-container {
        width: 99%;
        right: 1%;
    }
    .pane.middle .visit-page-container {
        width: 98%;
        right: 1%;
    }
    .pane.right .visit-page-container {
        width: 99%;
        right: 0;
    }
    .pane .visit-page-link {
        text-align: right;
    }
    .pane .visit-page-container a:hover .visit-page-link {
        color: orange;
    }
    .pane .visit-arrow {
        color: orange;
    }
    .pane .visit-page-container a:hover .visit-arrow {
        color: #00ceff;
    }
	
}
/* End CSS for Desktop */

/* CSS for Mobile 767px and < width */
@media all and (max-width: 767px ) {

/* carousel style */    
    #myCarousel {
        color: #FFF;
        background-color: #000;
    }
    #myCarousel .slide {
//border: 1px solid green;
        background-color: #000;
        position: relative;
        overflow: hidden;
    }
    #myCarousel .slide .image img {
//border: 1px solid red;
        width: 70%;
        float: left;
    }
    #myCarousel .slide .text {
//border: 1px solid yellow;
        width: 30%;
        float: left;
    }
    #myCarousel .slide .text h3 {
        margin: 0;
        border: none;
        padding: 10% 2% 10% 2%;
        text-align: center;
        font-size: .8em;
    }
    #myCarousel .slide .text p {
        margin: 0;
        border: none;
        padding: 0 10% 0 10%;
        text-align: center;
        display: none;
    }
    #myCarousel .slide .full {
        width: 100%;
    }
    #myCarousel .slide .full img {
        width: 100%;
    }
    
/* content pane style */
	#content-panes {
        margin: 0 auto;
        margin-top: .5%;
//border: 1px solid green;
        padding: 0;
	}
    
    .left, .middle, .right { 
        margin-right: 1%;
        margin-left: 1%;
    }
    
    .pane {
        margin-top: 2%;
//border: 1px solid blue;
        padding-bottom: 30px;
        background-color: #F2F2F3;
        min-height: 350px;
    }
    .pane a {
		color: orange;
		text-decoration: none;
    }
    .pane a:hover {
		color: #00ceff;
		text-decoration: none;       
    }
    .pane h2 {
		margin: 0;
//border: 1px solid blue;
        border-bottom: 1px solid orange;
        padding: 1% 4% 1% 4%;
        background-color: #1d1e20;
        font-size: 1.4em;        
    }
    .pane h3 {
		margin: 0;
//border: 1px solid red;
		padding: 1% 5% 1% 5%;
        color: #FFF;
        background-color: grey;
        font-size: .9em;     
    }
    .pane ul {
        margin:  1% 1% 1% 1%;
//border: 1px solid red;
        padding: 0;        
    }
    .pane li {
        margin: 1px 0 1px 0;
//border: 1px solid green;
        padding: 0;
        list-style-type: none; 
        background-color: #FFF; 
        font-size: .8em;
    }
    .pane li a {
//border: 1px solid blue;
        color: #4d4d4d;
        text-decoration: none;
		display: inline;
    }
    .pane li a:hover {
        color: #00ceff;
        text-decoration: none;        
    }
    .pane .game-name {
        font-weight: bold;
    }
    .pane .date {
        font-family: courier;
		font-weight: bold;
        color: darkBlue;        
    }
    .pane .cover-image {
        background-color: #000;
        width: 45px;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        overflow: hidden;
    }
    .pane img {
        height: 30px;
    }
    
/* Playstation Plus Minus pane */    
    .pane table {
        margin: 1% 1% 1% 1%;
        border: 1px solid red;
        width: 98%;
        background-color: #FFF;
    }
    .pane tr {}
    .pane th { border: 1px solid #F2F2F3; }
    .pane th.month { padding: 0 0 0 3%; }
    .pane th.year { text-align: center; }
    .pane th.all { text-align: center; }
    .pane th.ps4 { text-align: center; }
    .pane th.ps3 { text-align: center; }
    .pane th.vita { text-align: center; }
    .pane td { border: 1px solid #F2F2F3; }
    .pane td.month { 
        padding: 0 0 0 3%;
        font-size: .8em;
    }
    .pane a.month-name { font-weight: bold; }
    .pane td.year { 
        text-align: center;
        font-family: courier;
        color: darkBlue;
    }
    .pane td.all {
        text-align: center;
        font-family: courier;
        color: darkBlue;
    }
    .pane td.ps4 {
        text-align: center;
        font-family: courier;
        color: darkBlue;
    }
    .pane td.ps3 {
        text-align: center;
        font-family: courier;
        color: darkBlue;
    }
    .pane td.vita {
        text-align: center;
        font-family: courier;
        color: darkBlue;
    }

/* Reviews pane */
    .pane .read-link {
        color: orange;
    }
    
/* Free Play pane */
    #free_play li {
        overflow: hidden;
    }
    #free_play .cover-image {
//border: 1px solid purple;
        padding: 2% 0 2% 0;
        overflow: hidden;
        float: left;
        height: 100%;
    }
    .pane .video-name {
//border: 1px solid green;
        padding: 1% 1% 1% 1%;
        font-size: .9em;
        overflow: hidden;
    }
    
/* Schedule */
    #schedule li {
        padding: 0 2% 0 2%;
    }
    .show-name {
        font-weight: bold;
    }
    .show-name.playthroughs {
        color: green;
    }
    .show-name.free_play {
        colors: purple;
    }

    .pane .visit-page-container {
//border: 1px solid red;
        border: none;
        padding: 0;
        width: 99%;
        position: absolute;
        bottom: 0;
        right: 1%;
    }
    .pane.left .visit-page-container {
        width: 98%;
        right: 1%;
    }
    .pane.middle .visit-page-container {
        width: 98%;
        right: 1%;
    }
    .pane.right .visit-page-container {
        width: 98%;
        right: 1%;
    }
    .pane .visit-page-link {
        text-align: right;
    }
    .pane .visit-page-container a:hover .visit-page-link {
        color: orange;
    }
    .pane .visit-arrow {
        color: orange;
    }
    .pane .visit-page-container a:hover .visit-arrow {
        color: #00ceff;
    }
	
}
/* End CSS for Mobile */