body		{ font: 15px arial; background: #000; color:#cccccc }
body { background: url(images/fifa23.jpg) center center fixed no-repeat #000000; background-size:100% 100%;}

@media only screen and (max-width: 800px), only screen and (max-device-width: 800px){
    body { background: url(images/fifa23.jpg) center center fixed no-repeat #000000; background-size:contain; }
}


* html body {
background: #000;
}

p		{ font: 15px arial; line-height: 20px; padding: 0 8px 8px 0; margin: 0; border: 0; color: #aeaeae; }
li		{ font: 15px arial; line-height: 20px; padding: 0; color: #aeaeae; margin: 0 0 3px 0;}
h3		{ font: 15px arial; font-weight: bold; color: #e6d7d7;}

a  {
    color: #fff;
    text-decoration: none;
}

a:link, a:visited {
    color: #fff;
    text-decoration: none;
}

a:hover {
    color: #b5c73a;
}

.pingbacks {
background:#000 ;
}

.single .post .entry-photo img, .single-post .entry-photo img {
border: none;
}

img.aligncenter {
border: 0;
text-align: center;
background: none;
padding: 0px 2px 0px 2px;
}


img.alignright, img.alignleft {
border: 0;
text-align: center;
background: none;
padding: 8px 4px 10px 0px;
margin: 0;
}


input[type=text], input[type=password], textarea { background: url(images/form.jpg) repeat-x top #FFF; border: 1px solid #999; padding: 5px 3px; }

#commentform input[type="text"] {
display:block;
border: 1px solid #999;
}

input[type=submit]  { font-family: 'Lucida Grande', Arial, Helvetica, sans-serif; background: url(images/feed-title-white.jpg) repeat-x; border: 1px solid #999; padding: 5px 10px; font-size: 14px; color: #000; font-weight: 700; }

input[type=submit]:hover  { background: #313428; color: #FFF; }



/*structure   --------------  */

#wrapper {z-index: 1;}
#content 	{ font: 14px; background: none; z-index: 1;}
#content .section	{ font: 14px; background:url(images/blacktrans.png); }
/*#content .section	{ font: 14px; background:#000; }*/
#main		{ font: 14px; background:url(images/blacktrans.png); border: 1px solid #000; padding: 10px; }
/*#container	{ font: 14px; background: none; }*/
#container	{ font: 14px; background-color: transparent; }
/*.single-post { background:url(images/blacktrans.png); border: 1px solid #000; }*/

/*main content area   11111111 */
#container .single-post	{  background:#000; border: 1px solid #000; }

.single .post .entry-title, .single-post .entry-title {
    color: #000;
    font-size: 0.1px;
    line-height: 0.3em;
    margin: 0 0 10px 5px;
}

.posts-default .entry-title {
    font-size: 14px;
    font-weight: 700;
    background:url(images/blacktrans.png);
}

/* Tapestries */

.posts-default li {
    height: 200px;
/*    width: 218px;*/
    border: 1px solid #46668f;
    margin: 2px;
        margin-top: 2px;
        margin-right: 4px;
        margin-bottom: 4px;
        margin-left: 2px;
    padding: 2px;
    text-align: center;
    background: url(//fifaaddiction.com/wp-content/themes/arras/images/blacktrans.png);
}


.posts-quick li {
    margin: 0 0 10px 0;
    padding: 0 10px 0 0;
    border: 0;
background: #000;
text-align:left;
}

.posts-quick .entry-thumbnails {
    background: none repeat scroll 0 0 #000000;
    border: 1px solid #000000;
}

.posts-default .entry-thumbnails-link {
    background: none repeat scroll 0 0 #000000;
    border: 1px solid #000000;
}

.posts-default .entry-summary, .posts-quick .entry-summary {
color: #000;
background:url(images/blacktrans.png);
}

.home-title {
    color: #adca22;
    margin: 0 10px 10px 0;
}


.posts-line li {
    border-bottom: 1px solid #333333;
}

.posts-line {
    background-color: transparent;
    border: 1px solid #CCC;
}
.posts-line .entry-cat {
    font-size: 12px;
    color: #848485;
}
/* remove comment number by hiding as black */
.posts-default .entry-meta, .posts-quick .entry-meta {
    color: #060606;
    background: #000;
    height: 25px;
    font-weight: 700;
    opacity: .7;
}

/* sidebar */

.sidebar	{  font: 14px; color: #999; } /* right column text */
.widgettitle    {  font: 14px; color: #adca22; font-weight: 100; background: #000; border-bottom:1px solid #333333;}
.widgettitle a  {  font: 14px; color: #4CAFF5; font-weight: 100;}
.widgettitle a:hover  {  font: 14px; color: #70bee6; }
/*main widget area   22222222 */
.widgetcontainer  {  font: 14px; background: #000; border: 1px solid #000;}
.widgetcontainer #element {width:280px;}
.widgetcontainer a {  font: 14px; font-weight: 100;}

/* featured slideshow */


#featured-slideshow	{ border: 5px solid #000; }
.entry-summary		{ color: #fff; }
/* .featured-entry .entry-title { font: 15px; background:url(images/blacktrans.png); color: #333333; } */
.featured-entry .entry-title { font: 14px; background: #000; color: #e0e0e0; }
.featured-entry .entry-summary { font: 14px; background: #000; color: #e0e0e0; }
/* .featured-entry .entry-summary { font: 14px; background:url(images/blacktrans.png); color: #e0e0e0; } */
.entry-summary p { font-size: 8px; }
/* in blog section the repeat of text is annoying, 8px makes it smaller   */


.featured-entry {
    color: #a7a7a7;
    height: 0;
}

.posts-default img, .posts-default .entry-thumbnails-link {
    width: 200px;
    height: 110px;
}

.posts-quick .entry-thumbnails img {
    width: 250px;
    height: 115px;
}

/* single post */
.page .entry-content { padding: 0 0 2px 0; }


.posts-quick .quick-read-more {
    margin: 10px 0 5px;
    border-color: #333333;
    border-style: solid;
    border-width: 0 0 1px 0;
}

/* below is the number of comments on blog page near bottom hide it with 1px */
.posts-line .entry-comments {
    font-size: 1px;
    color: #848485;
}

/* hide the word comments in blogs further posts hide it with 1px */
.posts-quick .entry-info span {
	font-size: 1px;
    padding: 0 4px;
}

/* comments */
#commentlist li { background:none; }
#commentlist 	  { border: 1px solid #000; border-top:none; background: none;}
#commentlist .comment-node     { border: 1px solid #000; background:#000033;}
#commentlist .children .comment-node { border: 1px solid #000; background:#1f1f1f;}


.comment-content  { font: 14px; background:url(images/blacktrans.png); color: #C6C7B9;}

.comments-navigation { border: 1px solid #000; border-top:none; background: #000; }

#commentlist .comment-content {
    font-size: 14px;
}

#commentform    { font: 14px; background:#000; color: #CCCACA; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; }
#reply-title    { font: 14px; color: #fff; background: #000; border-top:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; border-bottom: 1px solid #000; }

#commentform textarea { font: 14px; color: #CCCACA; border: 1px solid #999; background:#1f1f1f;}
#commentform input { font: 14px; color: #CCCACA; border: 1px solid #999;background:#1f1f1f;}

.form-allowed-tags { display: none; }

.nocomments	{ font: 14px; background: #000; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; }
.module-title   { font: 14px; color: #fff; background: #000; border-top:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; border-bottom: 1px solid #000; }

.tags a:link, .tags a:visited {
    display: inline-block;
    font-weight: 100;
    line-height: 1.3em;
    padding: 0 5px 3px;
    text-decoration: none;
    color: #ccc;
}

/* header */


#header	{ 
background: #000; 
border-bottom: 2px solid #fc283e; 
margin-left: 0; 
margin-right: auto; 
padding: 0;
z-index: 2;
}

.blog-name a:link, .blog-name a:visited {
color:#000;
font:1px;
text-decoration:none;
}

.blog-name   { color: #000; z-index: 1; text-decoration: none; border: 0; }
.blog-name a { 
width: 360px;
border: 0; 
text-decoration: none; 
}
.blog-description { display: none; text-decoration: none; font: 1px; }

.logo {
max-width: 360px;	
padding: 5px 0 0 0;
margin: 0px;	
padding: 0px;	
border: 0px;
float:left;
}


/* main navigation */

#menu {
	width: 100%;
	border: 0px;
	height: 40px;
	padding: 0px;
	margin: 0 0 0 0;
	overflow: visible;
	float: left;
	z-index: 2;
position: relative;

}

#access {
	background: #7e8b25;
	display: block;
	text-align: left;
	margin: 0px;
	padding: 0px;
	border: 0px;
	width: 100%;

}
#access .menu-header,
div.menu {
	font-size: 16px;

}
#access .menu-header ul,
div.menu ul {
list-style: none;
text-align: left;
margin: 0px;	
padding: 0px;	
border: 0px;
float: left;

	
}
#access .menu-header li,
div.menu li {
	float: left;
	position:relative;
	color:#7e8b25;
	font-size: 15px;
	list-style:none;
	font-family: arial;
	padding: 2px;
	

}
#access a {
	color: #E0E0E0;
	display: block;
	text-decoration: none;
	border:none;
	line-height:35px;
	padding: 0 5px 0 0;
	margin: 0;

}
#access ul ul {
	display: none;
	/* background:url(images/red06percent.png); */
	background: #000;
	width: 260px;
	position: absolute;
	margin: 0 0 0 2px;
	padding: 0 0 0 0;
	border-color:#000 #000 #7e8b25 #7e8b25;
	border-style:solid;
	border-width:1px;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;

}

#access ul ul a {
background: #000;
	line-height: 35px;
	margin: 1px 0 0 1px;
	padding: 0 0 0 1px;
	width: 250px;

}

#access ul ul li {
	width: 250px;
	background: #000;
	margin: 0 0 1px 1px;
	padding: 0;
	font-size: 15px;
color: #525252;

}
#access ul ul ul {
	left: 100%;
	top: 0;
color: #666666;
border-color:#000 #7e8b25 #7e8b25 #000;
	border-style:solid;
	border-width:1px;
}

#access li:hover > a,
#access ul ul :hover > a {
	background: url(images/topnav_hover.gif) no-repeat left top;
	color:#6c2ae7;
border-color:#000 #000 #292B2B #000;
	border-style:solid;
	border-width:1px;
}
#access ul li:hover > ul {
	display: block;
	
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #fff;
}

.quick-nav{ padding-top: 5px; }

.quick-nav a:link, .quick-nav a:visited {
    clear: left;
    display: block;
    float: left;
    height: 20px;
    text-indent: -9000px;
    width: 20px;
    opacity: 1;
}


/* Header Social icons */

.quick-nav li			{ padding: 2px 0 0 5px; }
.quick-nav a:link, .quick-nav a:visited	{ text-indent: -9000px; width: 40px; height: 40px; float: right; opacity: 0.8; }
.quick-nav a:hover  { opacity: 1; }

.quick-nav #twitter	{ background: url(https://fifaaddiction.com/wp-content/uploads/2013/10/twitter40.jpg) no-repeat; padding: 0; margin: 0 3px 0 0;}

.quick-nav #youtube	{ background: url(https://fifaaddiction.com/wp-content/uploads/2013/10/youtube40.jpg) no-repeat; padding: 0; margin: 0 3px 0 0;}

.quick-nav #facebook	{ background: url(https://fifaaddiction.com/wp-content/uploads/2013/10/facebook40.jpg) no-repeat; padding: 0; margin: 0 3px 0 0;}

.quick-nav #instagram	{ background: url(https://fifaaddiction.com/wp-content/uploads/2021/07/fifa-instagram-40.jpg) no-repeat; padding: 0; margin: 0 3px 0 0;}

.quick-nav #tiktok	{ background: url(https://fifaaddiction.com/wp-content/uploads/2021/07/fifa-tiktok-40.jpg) no-repeat; padding: 0; margin: 0 3px 0 0;}

/* https://fifaaddiction.com/wp-content/uploads/2021/07/Tiktok-fifa.jpg */

/* (//fifaaddiction.com/wp-content/themes/arras/images/twitter60.jpg) */

/* .quick-nav #rss		{ display: none;} */


/* footer */

#footerinner {
height: 130px;
background: #000;
border: 1px solid #000;
align: center;
margin: 12px 10px 0 10px;
padding: 5px 0 0 0;
}

#footer		{ 
height: 150px; 
background: url(images/blacktrans2.png);
border: 1px solid #000;
border: 1px solid #000; 
color: #333333;
}

#footer p { color:#999339; margin: 20px}

.footer-sidebar-container {
    border-bottom: 1px solid #1f1f1f;
    margin: 10px 15px 5px 15px;
}

#footer .footer-sidebar-container ul {
	display: block;
	text-decoration: none;
	border:none;
	line-height:35px;
	padding: 0px 18px 0px 0;
	margin: 0;
}

#footer .footer-sidebar-container li {
	display: block;
	float: left;
	font-size: 16px;
	list-style:none;
	font-family: arial;
	padding: 0 15px 2px 4px;
	border: 0px;
	margin: 0 5px 0 5px;
}

#footer .footer-sidebar-container li:hover {
	background: url(images/topnav_hover.png) no-repeat left top;
	color: #6152f8;
}

#footer .widgetcontainer a {
    font-weight: 100;
    color: #A68B92;
}
#footer .widgetcontainer a:hover {
    font-weight: 100;
    color: #d71015;
}

/* search bar */

#search {
float:right;
}

.searchform {
    float:right;
    background: #000000;
    border: 1px solid #0B3B01;
    margin: 5px 0 0 0;
    padding: 5px 4px;
    width: 250px;
}

.search-results-content .searchform, .sidebar .searchform {
    background: none repeat scroll 0 0 #333333;
    border: 4px solid #333333;
    padding: 5px 4px;
    width: 250px;
}

.searchform .s {
    background: none repeat scroll 0 0 #000000;
    border: medium none;
    float: left;
    font-family: 'Lucida Grande',Arial,Helvetica,sans-serif;
    font-size: 15px;
    margin: 0;
    padding: 0;
    width: 234px;
    color: #44BB00;
}

.search-results-content {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: scroll 0 0;
    background:url(images/blacktrans.png);
    border-color: #333333;
    border-style: solid;
    border-width: 0 1px 1px;
    margin: 0 10px 10px 0;
    padding: 10px;
}

.search-results h2 {
    background: url(images/blacktrans.png);
    border: 1px solid #333333;
    color: #44BB00;
    font-size: 14px;
    font-weight: 700;
    margin: 0 10px 0 0;
    padding: 6px 10px;
}

#wp-calendar td {
    text-align: center;
    background:#000;
}
#wp-calendar caption {
    color:#cccccc;
}

.gallery img {
border: 1px solid #cccccc;
}
.gallery-icon img {
border: 1px solid #cccccc;
padding: 0;
}

.pagemenu {
font-size: 16px;
font-weight: 700;
margin: 1.5em 0 0 0;
}

.imagefloat {
display: block;
float:left;
margin:0px 2px 0px 2px;
}

.imagefloatright {
display: block;
float:right;
margin:-2px 2px 5px 2px;
}

.vinefloat {
height: auto;
width: 350px;
display: block;
float:left;
margin:3px 5px 3px 3px;
}



/* split page in two, change from ID to class so other pages posts behave */
/* eg change to .divsplit {padding:0; margin:0 0 0 50%; color:#fff; width:50%; min-height:100%; float:right;} */

/* editing them out first to see what breaks if you can find which use them?? */
/* #divsplit {padding:0; margin:0 0 0 50%; color:#fff; width:50%; min-height:100%; float:right;} */

/* #left_col {
	float:left;
	width:100%;
	margin-left:-100%;
        border-color: #5126a8;
        border-style: solid;
	border-width: 1px 1px 1px 1px; */

/* this was already edited out? text-align:right; */
/*
	background-color:#000000;
height:auto;
padding:0;
}

#left_col_inner {
	padding:5px;
	color:#fc4a56;
	margin:0;
	border:0;
}

#right_col {background-color:#000000; 
        border-color: #492b85;
        border-style: solid;
	border-width: 1px 1px 1px 0px;
height:auto;
text-align:left;
padding:0;
}

#right_col_inner {
	padding:5px;
	margin:0;
	border:0;
	color:#fff;
}
*/

	

#googletlayout {
float:left;
width:300px;
height:40px;
/* margin:10px 0 0 20px; */
margin:0;	
padding:10px 0 0 0;
font-size:12pt;
}

table.datagrid { 
width: 620px;
font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
border-collapse:collapse; 
margin-bottom:10px; 
border:solid 1px #000; 
padding:5px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td { 
border: solid 1px #000;
padding:3px;
}

/* Also remarked out in default.css
td, tbody td {
background: #2a1e4d;
}
*/
tbody tr:hover{background:rgba(102, 40, 81)} /* hover colour classy light purple*/
tr:nth-child(even) {background-color: #090d12;}  /* to colour even table rows */
tr:nth-child(odd) {background-color: #1d2329;}  /* to colour odd table rows */

th {
    color: #ccc;
    border: solid 1px #000;
    text-align: left;
    background-color: #061067;
}


.red {
background-color:#990000;
color:#fff;
border-bottom:solid 2px #000000;
text-align:center;
}
.blue {
background-color:#3098F2;
color:#fff;
border-bottom:solid 2px #000000;
text-align:center;
}
.lightblue {
background-color:#34acad;
color:#fff;
border-bottom:solid 2px #000000;
text-align:center;
}
.yellow {
background-color:#F7E80F;
color:#000;
border-bottom:solid 2px #000000;
text-align:center;
}

.grey {
background-color:#666;
color:#fff;
border-bottom:solid 2px #000000;
text-align:center;
}
.gold {
background-color:#FFCC33;
color:#000;
text-align:center;
}
.silver {
background-color:#CCCCCC;
color:#000;
text-align:center;
}
.bronze {
background-color:#A66E26;
color:#000;
text-align:center;
}
.aligncentre {
text-align:center;
}

.fullwidth #content {
margin: 0 auto;
width: 900px;
}


.textimageright {
padding: 10px 20px 0 0; 
margin: 0; 
border: 0;
}

.tabf8tal 
{ margin-left: 40px; }

.newimg {
  float: right;
  margin: 0 0 1em 1em;
}

.text {
margin:0px 0px 0px 8px;
padding: 0 0 0 8px;
overflow:hidden;
}

.attachment img {
  width: 100%; /* scale to width of container, or whatever you want */
}

blockquote.twitter-tweet {
color: #1b95e0;
}

blockquote.twitter-tweet p {
color: #1b95e0;
}

blockquote.twitter-tweet a[href^="https://twitter.com"] {
  font-weight: normal;
  color: #EDA113;
  font-size: 12px;
}
.twitter-timeline {
  color: #1b95e0;
}
a.twitter-timeline {
  color: #1b95e0;
}
a.twitter-timeline:hover,
a.twitter-timeline:focus {
color: #EDA113;
}

.customisable:hover, .customisable:focus, .customisable:active, .customisable-highlight:hover, .customisable-highlight:focus, a:hover .customisable-highlight, a:focus .customisable-highlight {
    color: #1b95e0;
}

.customisable, .customisable:link, .customisable:visited {
color: #EDA113;;
}

.video {
    display:table;
    table-layout:fixed;
    min-width:625px;         /* some minimum width is a good idea. */
    border-spacing:0px 0;   /* note that spacing is also applied to right and left ends */
    background-color:#192333;
    margin:0 auto;
}
.video div {
    display:table-cell;
    width:33%;
    vertical-align:centre;
    border:2px;
    background-color:#162947;
    padding:0px;
}

/* Feature gradient background */
.feature {
    padding: 1rem 1rem;
    border: 1px solid #100e17;
    border-radius: 8px;
    position: relative;
	background-color: black; /* For browsers that do not support gradients red middle*/
background: -webkit-linear-gradient(to bottom right, #141414 0%, #420707 50%, #141414 94%);
background: -moz-linear-gradient(to bottom right, #141414 0%, #420707 50%, #141414 94%);
background: linear-gradient(to bottom right, #141414 0%, #420707 50%, #141414 94%);
}
.feature2 {
    padding: 1rem 1rem;
    border: 1px solid #100e17;
    border-radius: 8px;
    position: relative;
	background-color: black; /* For browsers that do not support gradients blue middle*/
background: -webkit-linear-gradient(to bottom right, #141414 0%, #0e386e 50%, #141414 94%);
background: -moz-linear-gradient(to bottom right, #141414 0%, #0e386e 50%, #141414 94%);
background: linear-gradient(to bottom right, #141414 0%, #0e386e 50%, #141414 94%);
}
.feature3 {
    padding: 1rem 1rem;
    border: 1px solid #100e17;
    border-radius: 8px;
    position: relative;
	background-color: black; /* For browsers that do not support gradients green middle*/
background: -webkit-linear-gradient(to bottom right, #141414 0%, #0e386e 50%, #141414 94%);
background: -moz-linear-gradient(to bottom right, #141414 0%, #0e386e 50%, #141414 94%);
background: linear-gradient(to bottom right, #141414 0%, #0e386e 50%, #141414 94%);
}
.feature22 {
    padding: 1rem 1rem;
    border: 1px solid #100e17;
    border-radius: 8px;
    position: relative;
	background-color: black; /* For browsers that do not support gradients red */
	background: -webkit-linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #9b0c0c 100%);
background: -moz-linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #9b0c0c 100%);
background: linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #9b0c0c 100%);
	overflow: hidden; /* auto or hidden for a stricter fit of images/anything fitting within rather than showing half outside etc*/
}
.feature23 {
    padding: 1rem 1rem;
    border: 1px solid #100e17;
    border-radius: 8px;
    position: relative;
	background-color: black; /* For browsers that do not support gradients silver */
	background: -webkit-linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #8c8c8c 100%);
background: -moz-linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #8c8c8c 100%);
background: linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #8c8c8c 100%);
	overflow: hidden; /* auto or hidden for a stricter fit of images/anything fitting within rather than showing half outside etc*/
}
.feature24 {
    padding: 1rem 1rem;
    border: 1px solid #100e17;
    border-radius: 8px;
    position: relative;
	background-color: black; /* For browsers that do not support gradients blue */
	background: -webkit-linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #12488f 100%);
background: -moz-linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #12488f 100%);
background: linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #12488f 100%);
}
.feature25 {
    padding: 1rem 1rem;
    border: 1px solid #100e17;
    border-radius: 8px;
    position: relative;
	background-color: black; /* For browsers that do not support gradients orange */
	background: -webkit-linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #e99b26  100%);
background: -moz-linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #e99b26  100%);
background: linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #e99b26  100%);
}
.feature26 {
    padding: 1rem 1rem;
    border: 1px solid #100e17;
    border-radius: 8px;
    position: relative;
	background-color: black; /* For browsers that do not support gradients green */
	background: -webkit-linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #e99b26  100%);
background: -moz-linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #e99b26  100%);
background: linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #1e7b21  100%);
}

.headingrightfeature {
    padding: 1rem 2rem;
    border: 1px solid #100e17;
    border-radius: 4px;
    position: relative;
	background: -webkit-linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #8c8c8c 100%);
background: -moz-linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #8c8c8c 100%);
background: linear-gradient(to bottom right, #4a4444 0%, #161616 84%, #8c8c8c 100%);
	float: right;
}

/* New flex layout Sep 2025 for 1 column layout keeps image and text aligned but no wrap around image*/
.featuref1 {
  max-width: 1000px;
  display: flex;
  align-items: flex-start; /* aligns tops of content */
  gap: 20px; /* space between image and text */
  margin: 0 auto;
  flex-wrap: wrap; /* allows content to stack on mobile */
  border-radius: 18px;
      box-shadow: 0 2px 24px #0001;
      padding: 24px;
position: relative;
	background-color: black; /* For browsers that do not support gradients silver */
  background: var(--gradient, linear-gradient(to bottom right, #4a4444 0%, #161616 85%, #8c8c8c 100%)); /* variable to allow the bg glows below */
}	
/* Helper classes for glow options */
/* Subtle colored glows with light grey top left */
.bg-red-glow {
  --gradient: linear-gradient(
    to bottom right,
    #4a4444 0%,
    #161616 85%,
    rgba(211, 47, 47, 0.45) 95% /* semi-transparent for subtle glow */
  );
}
.bg-blue-glow {
  --gradient: linear-gradient(
    to bottom right,
    #4a4444 0%,
    #161616 85%,
    rgba(33, 150, 243, 0.45) 95%
  );
}
.bg-orange-glow {
  --gradient: linear-gradient(
    to bottom right,
    #4a4444 0%,
    #161616 85%,
    rgba(255, 152, 0, 0.45) 95%
  );
}
.bg-green-glow {
  --gradient: linear-gradient(
    to bottom right,
    #4a4444 0%,
    #161616 85%,
    rgba(56, 142, 60, 0.45) 98%
  );
}

.featuref1 img {
      min-width: 400px;
      height: auto; /* changes aspect on mobile if needed */
      max-width: 100%;
      border-radius: 10px;
      box-shadow: 0 2px 12px #0002;
      margin-top: 8px;
    }

.featuref1 h1, .featuref1 p {
  margin-top: 0;
}
.featuref1-text {
  flex: 1 1 0;
  min-width: 220px; /* tweak for responsiveness */
}

/* Four image container (use 33% for three, and 50% for two, etc) */
.columnimages4 {
  float: left;
  width: 25%;
  padding: 5px 0px 5px 0px;
}
/* Three image container */
.columnimages3 {
  float: left;
  width: 29%;
  padding: 5px 10px 5px 0px;
}
/* Two image container */
.columnimages2 {
  float: left;
  width: 47%;
  padding: 0px 0px 0px 0px;
}

/* Clear floats after image containers */
.rowimages::after {
  content: "";
  clear: both;
  display: table;
}

#container2 {
	clear:left;
	float:left;
	width:100%;
	overflow:hidden;
	background:#282828; /*column 2 background colour */
/* background-image: url(images/fifa-18-defending-transp.png); */
/* background-size: 300px 500px; */
background-position: right bottom;
background-repeat: no-repeat;
}

#defcontainer2 {
	clear:left;
	float:left;
	width:100%;
	overflow:hidden;
	background:#282828; /*column 2 background colour */
background-image: url(images/fifa-18-defending-transp.png);
/* background-size: 300px 500px; */
background-position: right bottom;
background-repeat: no-repeat;
}
#attcontainer2 {
	clear:left;
	float:left;
	width:100%;
	overflow:hidden;
	background:#282828; /*column 2 background colour */
/* background-image: url(images/fifa-18-defending-transp.png); */
/* background-size: 300px 500px; */
background-position: right bottom;
background-repeat: no-repeat;
}
#container1 {
	float:left;
	width:100%;
	position:relative;
	right:50%;
	background:#383838; /* column 1 background colour */
color:#C0C0C0;
}
#colu1 {
	float:left;
	width:46%;
	position:relative;
	left:52%;
	overflow:hidden;
}
#colu2 {
	float:left;
	width:46%;
	position:relative;
	left:56%;
	overflow:hidden;
color: #9d9d9d;
}
/* --> */
#rcorners1 {
    border-radius: 20px;
    background: #000;
    padding: 10px;
    width: auto;
    height: auto;
}
#rcorners2 {
    border-radius: 20px;
    border: 2px solid #791164;
    padding: 10px 10px 5px 10px;
    width: auto;
    height: auto;
}
#rcorners3 {
    border-radius: 20px;
    border: 2px solid #1d9e32;
    padding: 10px 10px 5px 10px;
    width: auto;
    height: auto;
}
#rcorners22 {
    border-radius: 20px;
    border: 2px solid #c1a71a;
    padding: 10px 10px 5px;
    width: auto;
    height: auto;
}
.twitter-moment {
  max-width: 100%;
  max-height: 1000px;
}
.fa {
  font-size: 25px;
  color: #FFFFFF;
}
.panel-title {
 font-size: 25px; 
 color: #FFFFFF;
 font-family: 'Open Sans', sans-serif;
}
.panel-heading {
 background-color: #1da1f2 !important;
 color: #1da1f2 !important;
}
.panel {
 margin-top: 25px;
}

#futw-div
{
    width    : 1120px;
    height   : 1600px;
    overflow : hidden;
    position : relative;
}
 
#futw-iframe
{
    position : absolute;
    top      : -800px;
    left     : -100px;
    width    : 1200px;
    height   : 1700px;
}

.yotu-videos .yotu-video h3{
 color: #C0C0C0 !important;
}

/* Sep 2025 */
.custom-twitter-btn {
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      font-weight: bold;
      padding: 2px 10px;
      background-color: #3d0513; /* dark red */
      color: #fff;
      border-radius: 8px;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      transition: all 0.3s ease;
}

.custom-twitter-btn:hover {
      background-color: #0d8ddb; /* blue */
      transform: scale(1.05);
      box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.custom-twitter-btn svg {
      fill: #fff;
      margin-right: 8px;
}

/* Wonderkids Page Styles — Scoped */
.wonderkids-page{
  color:#dcdfe1;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  padding:0;
}
.wonderkids-page a{color:#60c8ff;text-decoration:none}
.wonderkids-page header{
  padding:2rem;
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);
  border-bottom:1px solid #2a2a2d;
}
.wonderkids-page header h1{
  margin:0;
  font-size:1.6rem;
  letter-spacing:0.2px;
}
.wonderkids-page header p{
  margin:0.35rem 0 0;
  color:#9aa0a6;
  font-size:0.95rem;
}
.wonderkids-page .container{
  max-width:1100px;
  margin:1.25rem auto;
  padding:1rem;
}

/* Featured players */
.wonderkids-page .feature-section{
  background:#1b1b1d;
  border-radius:10px;
  padding:1rem;
  border:1px solid #2a2a2d;
  box-shadow:0 6px 18px rgba(0,0,0,0.45);
}
.wonderkids-page .feature-grid{
  display:grid;
  grid-template-columns:repeat(1,1fr);
  gap:1rem;
}
@media(min-width:880px){
  .wonderkids-page .feature-grid{grid-template-columns:repeat(2,1fr);}
}
.wonderkids-page .feature-player{
  padding:0.9rem;
  border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  border:2px solid rgb(28, 20, 20);
}
.wonderkids-page .player-header{display:flex;align-items:center;gap:0.9rem;}
.wonderkids-page .player-img{
  width:84px;height:84px;border-radius:8px;background:#2b2b2d;
  display:inline-block;flex-shrink:0;border:1px dashed rgba(255,255,255,0.03);
  object-fit:cover;
}
.wonderkids-page .player-title{display:flex;flex-direction:column;}
.wonderkids-page .player-title h3{margin:0;font-size:1.05rem;}
.wonderkids-page .player-meta{margin-top:6px;color:#eb97ca;font-size:0.88rem;}
.wonderkids-page .player-stats{margin-top:0.7rem;color:#dcdfe1;font-size:0.95rem;}
.wonderkids-page .playstyle{margin-top:0.6rem;color:#9aa0a6;line-height:1.4;font-size:0.85rem;}

/* Table */
.wonderkids-page .table-wrap{
  margin-top:1.4rem;
  overflow:auto;
  border-radius:8px;
  border:1px solid #2a2a2d;
  background:#1b1b1d;
}
.wonderkids-page table{
  width:100%;
  border-collapse:collapse;
  min-width:900px;
}
.wonderkids-page th,
.wonderkids-page td{
  padding:0.85rem 0.9rem;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,0.03);
  vertical-align:middle;
  font-size: 14px;
}
.wonderkids-page thead th{
  position:sticky;
  top:0;
  background:linear-gradient(180deg,#171719,#1a1a1c);
  color:#dcdfe1;
  z-index:2;
  font-size:0.92rem;
}
.wonderkids-page tbody tr:hover{
  background:rgba(255,60,60,0.08); /* subtle red hover */
}
.wonderkids-page .stat-pill{
  display:inline-block;
  padding:0.22rem 0.5rem;
  border-radius:999px;
  background:rgba(255,255,255,0.02);
  border: 1px solid rgb(32, 29, 29);
  font-size:0.95rem;
  color:#9aa0a6;
}
.wonderkids-page footer{
  margin-top:1.6rem;
  color:#9aa0a6;
  font-size:0.88rem;
  text-align:center;
}
@media(max-width:520px){
  .wonderkids-page header h1{font-size:1.2rem;}
  .wonderkids-page .player-img{width:64px;height:64px;}
}