/*
 Theme Name:   Piron Games Arcade - Red vs Black
 Theme URI:    http://www.pirongames.com
 Description:  Personalized MyArcadeTheme in 2 tones (red/black) for Piron Games Arcade
 Author:       Stefan "Karg" Dicu
 Author URI:   http://www.pirongames.com
 Template:     myarcadetheme
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         arcade,piron
 Text Domain:  redvsblack
*/

/* 
   Light tone (red): #e84747
   Dark tone (black): #333333
   Special tone (teal): #4ec5c1
   
   
   Alternative scheme: https://coolors.co/931621-f85a3e-3c1518-0d0106-f74831 
*/

/*=====<[1.0] - Reset CSS>=====*/
/* bugfix: em should be in italics not bold */
em { font-weight:normal; }

/*=====<[3.1] - Typography>=====*/
/* originally 15px, but leaves too much unnecessary white space - set to 0 if it still makes issues*/
/*h1,h2,h3,h4,h5,h6,ul,ol,blockquote,table,dl,dt,pre{margin-top:15px;}*/

/*=====<[3.2] - Forms>=====*/
/* fixes content column too close to the top in "mobile" mode */
/* reverted to padding-top: 0px as in some pages it looks wrong; figure out a better way to approach this */
.cols-n9 {padding: 0px 10px; position:relative}

/* bugfix: submit/post comment button touches comment box */
label[class*="fa-comment"] { margin-bottom: 10px; }

/*=====<[5.0] - Fonts>=====*/

/*=====<6.0] - Backgrounds>=====*/
body { background-color:#e5e5e5; }
/*bgc1*/.hdcn-1{ background-color:#fff; }
.hdcn-3 { background-color: #333333; }
.bdcn { background-color:#fff; }
.ftcn-1 { background-color:#333333; }

/*bgbtns*/[class*="botn"],a[class*="botn"],button,input[type="reset"],input[type="submit"],a.read-more{background-color:#333333}
/*:hover*/[class*="botn"]:hover,a[class*="botn"]:hover,button:hover,input[type="reset"]:hover,input[type="submit"]:hover,.lstgms .bx-controls-direction a,a.read-more:hover,.cmnt-cn>div .comment-reply-link:hover{background-color:#e84747}

/*bgc4*/[class*="gmcn-smal"] .gm-imag>a>span,.tagcloud a:hover,.gm-cate a:hover,[class*="gmcn-"] .gm-cate a,.mt-slct-cn .selecter-item:hover,.wp-pagenavi a:hover,.wp-pagenavi span.current,/*.progress,*/.game_opts>li:hover>a:before,.game_opts>li:hover>span>a:before{background-color:#e84747}

/* sidebar tag cloud */
.sdbr-cn .tagcloud a {background-color:#e84747; font-weight: 700; text-transform: uppercase; font-size: 0.75rem !important;}
.sdbr-cn .tagcloud a:hover {background-color:#333333; color:#fff; font-weight: 700;}

/* game play page overlay */
.game-cn {background-color:#333333;}

/* sticky button, send top */
.botn-gtop, a.botn-gtop {background-color:#333333}
.botn-gtop:hover, a.botn-gtop:hover {background-color:#e84747; color:#fff;}

/* hover over game thumbnail */
[class*="gmcn-"] .gm-cate a:hover, [class*="gmcn-larg"] figure.gm-imag>a>span{background-color:#333333}

.hdcn-1 .logo{text-align: center;margin-bottom: 15px;}

/* button in 404 page and possibly others */
button {background: #e84747}
button:hover {background: #333333}

/* various places where categories are displayed */
.gm-cate a {background-color:#333333}
.gm-cate a:hover {background-color:#e84747}

.about-mean {width: 50%; background-color:#eee; margin: auto;}

/*=====<7.0] - Colors>=====*/
a,.sdbr-cn [class*="gmcn-"] .gm-titl a,[class*="gmcn-larg"] div.gm-titl a{color:#333333;}

a:hover,.shar-cnt li:hover a,.menu-top>li:hover>span,.menu-top>li:hover>a,.hdcn-1 h1:before,.hdcn-1>div>div[class*="fa-"]:before,[class*="gmcn-"] .gm-titl a:hover,.gm-play:before,.rndgame:before,.news-cn li a,.news-cn .fa-flash:before,.news-cn .bx-controls-direction a:hover,div[class*="gmcn-smal-2"] .gm-imag>a>span,[class*="gmcn-smal-3"] figure.gm-imag>a>span,.mt-slct-cn .selecter-item.selected:before,.mt-slct-cn .selecter-selected:after,.widget_mabp_recent_games [class*="gmcn-"] .gm-titl a:hover,.sdbr-cn .most-popu .bx-controls-direction a,#hall_of_fame .plays:before,#hall_of_fame .highscores:before,#hall_of_fame .bx-controls-direction a,[class*="gmcn-larg"] div.gm-titl a:hover,[class*="gmcn-larg"] figure.gm-imag>a>span:before,[class^="post-"] header h1,[class^="post-"] header h2,.pst-shr:hover>a,.pst-shr:hover>a:before,.titl strong,span.required,.form-allowed-tags code,abbr,[class^="post-"] .lst-social>li:hover>a:before,[class^="post-"] header p>a:hover{color:#e84747;}

.botn:hover {color:#fff;}

/*Links*/.hdcn-1 h1,.hdcn-1>div>div[class*="fa-"],.selecter-item,.selecter-selected,[class^="post-"] .lst-social>li>a:before{color:#333333}

.selecter-selected {color:#4ec5c1}

/* game category widget/partial */
.titl .custom-cat {color:#fff;text-decoration: underline;}

/* hover over game thumbnail */
[class*="gmcn-"] .gm-cate a:hover {color:#fff;}

/* game landing page category  */
.gm-cate a:hover {color:#fff;}

/* fixes an issue with top menu fa icons having wrong color in game landing/play pages */
.menu-top [class^="fa-"]:before {color: #333333;}

/*=====<[8.0] - Header>=====*/
.boxed-cont {padding-top: 10px;padding-bottom:10px}

/* TODO figure out how to change the hover color */
.bx-prev,.bx-next {opacity: 1;}

.gm-play{font-size: 12px;padding-left: 5px;}
.gm-date{display: inline-block;height: 20px;line-height: 11px;padding-top: 4px;padding-bottom: 5px;vertical-align: top;margin-right: 0px;}

/* fixes an issue with the menu button touching the bottom edge in mobile mode */
.menu-botn{width: 100%;margin-top: 8px; margin-bottom: 8px;}

/*=====<[9.0] - Body>=====*/
.titl {font-weight: bold; font-size: 14px; line-height: 30px; margin-bottom: 20px;border-bottom: 0px; padding: 0.4em 0.8em; color: #fff; background: #333333; text-transform: uppercase; position: relative;}
[class^="post-"] header h1,[class*="post-"] header h2{font-size: 30px;line-height: 40px;padding: 5px 0;font-family: 'Francois One', sans-serif}

/* Testing rectangular thumbnails */
/*[class*="gmcn-smal"] .gm-imag,[class*="gmcn-smal"] .gm-imag img{width: 80px;height: 64px;}*/

/* fix page header separated by some pixels from page content bug*/
[class^="post-"] header{margin-bottom: 0px;}

/* ...but still need between the post header and post content...*/
.post-sngl header {margin-bottom: 10px;}

.gm-date {font-size: 12px; color: #999;}

.game-cn {padding-top: 10px; margin-top: 10px;}

.srch{position: relative;padding-right: 40px;max-width: 370px;margin:0 auto 30px;}
.srch button{width: 40px;height: 40px;line-height: 40px;text-align: center;padding: 0;position: absolute;right: 0;top: 0;font-size: 0;}

/* fixes wrong color set by post- fa- css rule */
.srch [class^="fa-"]:before {color: #fff;font-size: 14px;}

/* template-blog spacing between articles summary */
.post-list {margin: 0 0 40px; }

/*=====<[10.0] - Footer>=====*/
/*.ftcn-1 {box-shadow: 0px -4px 4px #000;}*/
[class*="gmcn-smal-2"]{padding: 0 0 0 70px;height: 60px;}

.ftblk a { color: #ddd; font-size: 14px; font-family: 'Open Sans', sans-serif;}
.ftblk a:hover { color: #e84747; transition: 0.2s;}
.ftblk .titl {margin: 0 0 0 0; padding: 0 0 0 0; background: none; /*text-shadow: 2px 2px 0 rgba(128,128,128,0.28);*/}
.ftblk .info {color: #ddd; font-size: 12px;}

/*=====<[11.0] - CSS - Widgets>=====*/
.sdbr-cn .most-popu .bx-controls-direction a{top: -50px;}

/* category more games */
a.botn-mrgm{padding:0 0 0 20px; font-size: 0; background-color:#333333; color: #fff;transition: 0.2s;float: right; margin-right: 5px; top: 10px;}
a.botn-mrgm:hover{font-size: 12px;padding:0 5px 0 25px;background-color:#e84747;color: #fff;transition: 0.2s;}
.botn-mrgm:before{font-size: 12px;background-color: #e84747;}

/* game landing page play button */
.botn-play {width: 200px;}
a.botn-play {background-color:#e84747; color: #fff;font-family: 'Francois One';font-size: 20px;}
a.botn-play:hover {background-color:#333333; color: #fff;}

/* blog read more button */
a.read-more{background-color:#e84747; color: #fff;font-family: 'Francois One'}
a.read-more:hover {background-color:#333333; color: #fff;}

@media screen and (min-width: 992px)
{
    .boxed-cont .hdcn-1 .logo{max-width: 200px;}
    .hdcn-1 .logo{float: left;text-align: center;max-width: 200px;margin-bottom: 0;}
    .hdcn-1 .logo+div{float: right;margin-bottom: 0;} 
    
    ul.menu-top{float: right;padding: 0px;transform: translate(0%, 50%);}
    
    .menu>ul>li{float: left; font-family: 'Francois One'}
    .menu>ul>li:hover>a{background-color:#e84747}    
    
    .titl .mt-slct-cn{float: right;margin-top: 0px;}    
}

@media screen and (min-width: 1200px)
{
    .boxed-cont .hdcn-1 .logo,.hdcn-1 .logo{max-width: none;}    
}

/* Customized Footer Links/Pages Text Widget - maybe create a custom widget for this? */
.ftblk .ftPageLink:before {
    color: #e84747;
    margin-right: 3px;
}

/* Footer Recent Blog Posts Widget */
.gmcn-smal-4 {padding: 0 0 0 0; height: 40px; background: none;}
.gmcn-smal-4:hover {background: none;}
.gmcn-smal-4 .blog-title {line-height: 16px;}
.gmcn-smal-4 .blog-title a { color: #ddd; font-size: 14px; font-weight: normal; }
.gmcn-smal-4 .blog-title a:hover { color: #e84747; }
.footer-post-container {width: 100%; display: flex; flex-direction: row; align-items: center;}
.footer-post-date-container {flex: none; width: 40px; height: 40px; background: none; float: left; margin-right: 10px; display: flex; align-items: center;justify-content: center;flex-direction: column; border: 2px #e84747 solid;}
.footer-post-date-day { color: #e84747; font-size: 18px; font-weight: 700;line-height: 20px;text-decoration: underline;}
.footer-post-date-month { color: #e84747; font-size: 12px; text-transform: uppercase;display: block;line-height: 13px;}

/* 404 customization */
.wrapper-404 {
    background-image: url(images/rabbit-samurai-1.png), url(images/rabbit-samurai-2.png);
    background-position: 10% 30%, right bottom;
    background-repeat: no-repeat, no-repeat;
}