/* Main CSS */

/* Colour palette */
header, footer {
    background: #160A47;
}
h1, h2, h3, h4, h5 ,h6 {
    color: #160A47;
}
.border-bottom, .divider, p.game_title {
    border-bottom: 1px solid #17A697 !important;
}
p, ol li, ul li, td {
    color: #160A47;
}
p.posted, p.uploaded, p.description {
    color: #17A697;
}
.btn {
    background-color: #160A47;
    border-color: #17A697;
}
table, td {
    border: 1px solid #17A697;
}
a {
    color: #17A697;
}
header nav a, footer a, .btn, .btn:focus, .btn a {
    color: #FFFFFF;
}
header nav a:hover, footer a:hover, .btn_active:hover {
    color: #17A697;
}
header a.logo {
    color: #17A697;
}
footer .copyrights {
    border-top: 1px solid #17A697;
}

/*  General CSS  */
body {
    background: #fff;
}
.body {
    padding: 30px 0 60px 0;
}
.wrapper, footer .copyrights {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

p {
    font-size: 18px;
    line-height:24px;
    margin:0;
}
ol li, ul li {
    font-size: 18px;
    line-height:24px;
}
img {
    max-width: 100%;
}
nav ul {
    list-style:none;
}
a {
    font-size: 18px;
    line-height:24px;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
header a:hover, footer a:hover, .btn a:hover {
    text-decoration: none;
}
a.read_more, a.see_all {
    display:block;
    width:300px;
}
a.read_more {
    margin-top:10px;
}
.btn a {
    font-size: 16px;
    letter-spacing: 1px;
}

.article, .timeline, .full_gallery, .top-padding {
    padding-top:30px;
}
.footnote {
    padding-top:15px;
    font-size:14px;
}

h1.header {
    padding-bottom:15px;
    margin:40px 0 10px 0;
}
h1.article_header {
    margin:40px 0 0 0;
    line-height:40px;
}
p.article_header, p.gallery_header, p.twitter_header {
    font-size: 26px;
    line-height:32px;
}
p.posted {
    font-size: 14px;
    padding: 5px 0;
}
p.border-bottom {
    padding-bottom:15px;
}
p.update {
    font-weight:bold;
    font-style:italic;
}

.float_left {
    float:left;
    width:47%;
}
.float_right {
    float:right;
    width:47%;
}
.clear {
    clear: both;
}
.nowrap {
    white-space:nowrap;
}

.bold {
    font-weight:bold;
}
.divider {
    margin-top:10px;
}
.min-height {
    min-height: 600px;
}
img.grey-border {
    padding:1px;
    border:1px solid #e1e8ed;
    border-radius:4px;
}
img.full {
    display: block;
    width: 1024px;
    height: auto;
}
img.article-image {
    display: block;
    width: 853px;
    height: auto;
}
img.article-image-half {
    display: inline;
    width: 45%;
    height: auto;
    margin-right:2%;
}

ol.article, ul.article {
    margin-left: 20px;
}
ul.long_bullets li {
    padding-bottom:15px;
}
ul.long_bullets li:last-child {
    padding-bottom:0;
}

div.about_main {
    text-align: justify;
}
div.about_img {
    float: right;
    padding: 30px 0 30px 40px;
}
div.about_img img {
    max-width: 300px;
}
div.about_img_mob {
    display:none;
}

div.ign_comment {
    border: 1px solid #333435;
    border-radius: 10px;
    padding: 10px;
    margin-top:30px;
}
div.ign_comment_user {
    padding-bottom:10px;
}
div.ign_comment_user a {
    color: #333435;
    font-size:16px;
    font-weight:bold;
    text-decoration:none;
}
div.ign_comment_user a:hover {
    text-decoration:underline;
}
div.ign_comment_body p {
    color: #333435;
    font-size:14px;
    line-height:16px;
    margin:0;
}
div.ign_comment_body p:last-child {
    margin-bottom:10px;
}

iframe.light_box {
    display:none;
    width:1100px;
    height:619px;
}
iframe.article_video {
    margin-top:30px;
    width:853px;
    height:480px;
}

.twitter-tweet {
    margin-top:30px !important;
    margin-bottom:0 !important;
}

div.split_tweets .twitter-tweet {
    width:47% !important;
    display:inline-block !important;
    vertical-align:top !important;
    margin-right:2% !important;
}
div.split_tweets .twitter-tweet .SandboxRoot {
    display:inline-block !important;
}

/* Tables */
table {
    border-collapse:collapse;
    border-spacing:0;
}
td {
    padding:10px;
}
td.th {
    font-weight:bold;
    text-align:left;
}
td.thc {
    font-weight:bold;
    text-align:center;
}
td.int {
    text-align:right;
}

/*Metacritic colours*/
td.mc {
    color:#FFFFFF;
}
.positive {
    background-color:#66CC33;
}
.mixed {
    background-color:#FFCC33;
}
.negative {
    background-color:#FF0000;
}

/*  Header Section  */
header {
    width: 100%;
    height: 100px;
}
header .logo {
    margin-top: 37px;
    float: left;
    text-decoration: none;
    color: #fff;
    font-size: 24px;
    letter-spacing: 1px;
}
header a.hamburger {
    text-decoration: none;
    display: none;
    float: right;
    margin-top: 38px;
    width: 24px;
    height: 19px;
    background: url('../img/hamburger_icon.png') no-repeat;
}
header a.hamburger.opened {
    width: 19px;
    background: url('../img/close_menu_icon.png') no-repeat;
}
header nav {
    opacity: 1;
    float: right;
}
header nav.mobile {
    display: none;
}
header nav ul {
    margin-top: 36px;
    list-style: none;
    overflow: hidden;
    float: left;
    margin-bottom: 0;
}
header nav ul li {
    float: left;
    margin-left: 50px;
}
header nav ul li a {
    font-size: 18px;
    letter-spacing: 1px;
}
/*Other Navs*/
nav.articles ul {
    margin-top: 25px;
    list-style: none;
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
}
nav.articles ul li {
    display: inline-block;
    font-size: 20px !important;
    margin-left: 50px;
}
nav.articles ul li:first-child {
    margin-left: 0;
}
nav.articles ul li a {
    font-size: 20px;
    letter-spacing: 1px;
}

/*  Hero Section  */
.hero {
    width: 100%;
}
.carousel-item {
    /*height for screen resolution 2560x1440*/
    height: 1100px;
}
.carousel-item:nth-child(1) {
    background: url('../img/carousel/c1_articles.jpg') no-repeat center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
.carousel-item:nth-child(2) {
    background: url('../img/carousel/c2_videos.jpg') no-repeat center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
.carousel-item:nth-child(3) {
    background: url('../img/carousel/c3_gallery.jpg') no-repeat center bottom;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
.carousel-caption .btn {
    margin-bottom:15px;
}

/*  Tiles Section  */
div.tile_list {
    overflow:hidden;
}
div.tile_list .desktop {
    display:block;
}
div.tile_list .mobile {
    display:none;
}

div.tile_row {
    overflow:hidden;
}

div.tile a:hover {
    text-decoration:none;
}

div.tile {
    display: block;
    width: 30.90909090909091%;
    height: auto;
    position: relative;
    float: left;
    margin: 3.636363636363636% 3.636363636363636% 0 0;
}

div.tile_list div.tile:nth-child(3n+0){
    margin-right: 0;
}

div.tile img {
    width: 100%;
    height: auto!important;
    vertical-align: top;
}

div.tile div.tile_details{
    /*width: 87.64705882352941%;*/
    padding: 2.941176470588235% 5.882352941176471% 4.117647058823529% 5.882352941176471%;
    border-bottom: 1px solid #D5E9EE;
    border-left: 1px solid #D5E9EE;
    border-right: 1px solid #D5E9EE;

    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}

div.tile:hover div.tile_details{
    border-bottom: 1px solid #17A697;
    border-left: 1px solid #17A697;
    border-right: 1px solid #17A697;
}

div.tile_details p {
    padding-top:10px;
}

p.game_title {
    font-size:20px;
    padding-bottom:10px;
}
p.uploaded, p.description {
    font-size:14px;
}

div.video_snippet {
    margin-top: 20px;
}

.btn-group {
    margin-top:30px;
}
.btn_disabled {
    color:#000000;
    background-color:#FFFFFF;
    border-color:#000000;
}
#videoButtons {
    display:none;
}

/*  Gallery Section  */
.row {
    padding:0;
}
.row figure {
    padding:0;
    margin-bottom:0;
}
/*gallery class only used on short*/
.gallery {
    padding-top:30px;
}
.gallery figure:nth-child(9) {
    display:none;
}
.gallery_link {
    display:block;
}
.gallery_link:hover {
    text-decoration:none;
}
.gallery_header {
    padding:20px;
    margin:0;
    border-top: 1px solid #D5E9EE;
    border-left: 1px solid #D5E9EE;
    border-right: 1px solid #D5E9EE;

    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}
.gallery_link:hover .gallery_header {
    border-top: 1px solid #17A697;
    border-left: 1px solid #17A697;
    border-right: 1px solid #17A697;
}
figure figcaption {
    display:none;
}

/*  Footer  */
footer {
    padding-top: 50px;
}

footer .footer {
    margin-top:10px;
    text-align:center;
    display:inline-block;
    vertical-align:top;
    width:70%;
}

footer .footer a {
    margin-right:50px;
    font-size: 16px;
}

footer .social-links {
    width:25%;
    text-align:center;
    display:inline-block;
}

footer .social-links a:nth-child(2) {
    margin-left:10px;
}

footer .copyrights {
    display: block;
    text-align: center;
    padding: 40px 0;
    margin-top: 30px;
    color: #fff;
    font-size: 14px;
}

footer .copyrights a.ph_link {
    font-weight: bold;
    text-decoration: none;
}