/*------- BG IMG --------*/

body {margin:0px; background-position:center center; height:100%} /* So I can set enclosed elements to 100%. */

@media screen and (min-width:1201px) and (max-height:1079px) {
	body {background-image: url('/img/bg1920.jpg'); background-size:cover; background-attachment:fixed}
}
	
@media screen and (min-width:2176px), (min-width:1201px) and (min-height:1080px) {
	body {background-image: url('/img/bg2560.jpg'); background-size:cover; background-attachment:fixed}
}


/*------- LOGO / HEADER --------*/

#logo {display:none; margin-top:15px;}
#sahara2 {display:block; margin-top:35px; font-size:90%; padding:3px 5px}

@media screen and (min-width:481px) {
	#logo {display:table}
	#logo a {text-decoration:none}
	#sahara {margin-left:5px; font:18px Arial,Helvetica}
	#sahara2 {display:none}
}


/*----------------------*/
/*------- MENUS --------*/
/*----------------------*/
/* SEE NOTES in SB > Content > EV! */

/* COMMON TO MOBILE AND DESKTOP */

	#menus ul, #menus li, ul.submenu {list-style:none}
	#menus a, .submenu a {text-decoration:none; width:100%} /* 100% allows clicks on whitespace to fire */

	.submenu {display:none}
	#menus sub a {display:block}
	#menus sub .section, .submenu .section {background:black; color:mintcream; font-weight:bold; margin-top:6px; padding:3px;}


/* MOBILE */

	#menus {display:none; width:100%; margin:28px 0px 0px 0px; padding-left:0px}
	#menus li {padding-left:5px; background:Dodgerblue; color:lavender; font:bold 24px/200% Arial; border:1px solid silver}
		/* Note, this will include the submenu, since the submenu is *inside* the #menus' <li>. */
	#slotsMenu {font-size:23px}

	#menus sub li {background:ghostwhite; font:bold 20px/100% Arial; border-bottom:1px solid gainsboro; border:none; margin:0px; padding:7px 0px 13px 12px}
		/* The submenu will be inserted into <div id=menus><li>...</li>, so I need to use the #menus ID for specificity here.
			This rule won't work for the desktop, b/c the desktop submenu is not a child of #menus. */

	arrow {padding-right:5px}
	span+arrow {float:right}
	.rightArrow::after {content:'+'} /* Class name changed dynamically to "rightArrow" on mouseclick */
	.downArrow::after {content:'–'}


/* DESKTOP */

@media screen and (min-width:481px) {
	#hamburgerMenuLine {display:none}
	#menus {display:block; cursor:pointer; margin-top:0px}
	#menus li {display:inline-block; color:RoyalBlue; font:bold 16px 'Arial Narrow','Abadi MT Condensed Light'; padding: 6px; border:none; background:none}
	#menus li:hover {background:royalblue; color:whitesmoke; border-radius:6px}
	#slotsMenu {font-size:inherit; font-family:inherit}

	.submenu { display:none; background:ghostwhite; position:absolute; z-index:1000; margin:3px; padding:5px; border-right:4px solid gray; border-bottom:2px solid black; border-left: 2px solid silver; border-top:1px solid silver;}
	.submenu li {font:14px/200% Arial,Helvetica}
	.submenu a {display:inline-block; padding:5px}
	.submenu a:hover {background-color:lightskyblue}

	span+arrow::after {content:''} /* Erase arrow set by mobile CSS */
	.rightArrow::after {content:''}
}



/*------- MY ELEMENTS --------*/
#subtitle {font:24px Georgia; font-style:italic; letter-spacing:0; margin:12px 0px; color:peru; background:none; text-align:center}
#update {color:gray; text-align:right; font-style:italic}
#update::after {font-size:80%; content:"all articles on Easy Vegas are by Michael Bluejay";display:block}
#note {border:1px solid silver; border-radius:9px; padding:5px; background:lightyellow; text-align:center}
.share img {height:20px; width:20px; vertical-align:middle}
.caption { text-align:right; margin:0px; font-weight:normal; color:gray; font-style:italic; font-size:85%; line-height:150%}
.caption a {color:#586da6}
cite {font-size:85%; color:gray; font-style:normal}
cite a:link {color:cornflowerblue}
.problemWarning {margin:0px; padding-left:1em}
.problemWarning li {font-size:13px; line-height:130%; margin-top:8px}

/*------- THUMBSHOTS (right sidebar, bottom of slots pages) --------*/
thumbshot {height:155px; margin-bottom:24px}
thumbshot img {width:180px; height:135px; margin:10px; border:0; border-radius:6px}
div.linebreak {display:block}

article .playSlots img {width:260px; height:195px; margin:20px} /* Can make this an ID instead of a class */
article .playSlots .linebreak {display:inline}
article .playSlots .thumbshotProblem {display:none}

/*------- LINKS --------*/
a:hover {background:lightskyblue}
.nohover a:hover {background:none} /* Must go in the parent, not the <a> */

/*------- FORMATTING --------*/
table {font:12px/170% Verdana}
small, .sm {font-size:80%}
.ctr  {text-align:center}


/*------- DATA TABLE --------*/
.dataTable {
	/* display:inline-block; is nec. for rounded corners in FF, but it prevents me from centering w/CSS, so f**k FF */
	margin:auto;
	border-collapse:collapse;
	border-radius:12px 12px 0px 0px;
	overflow:hidden;
	font:12px Arial;
}

	/* TITLE.  It breaks if I use <thead>, b/c then the first <tr> after *both* the <thead> & <tbody> will be styled. */

.dataTable tr:first-child td {text-align:center; background:black; color:orange; font-weight:bold; font-size:16px}


	/* COLUMN HEADERS.  This way I don't have to manually change the tags from <td> to <th>. If the table doesn't have a header row, add a dummy blank row and then hide it. */

.dataTable tr:nth-child(2) td {background:gainsboro; font-weight:bold; font-size:12px; padding:4px}


	/* MOST TD's */
.dataTable td {border:1px solid silver; padding:3px; text-align:center}

	/* FIRST COLUMN */

.dataTable td:first-child {text-align:left}



/*------- BOTTOM FIXED AD FOR MOBILE --------*/
#bottomAd {font:12.5px Arial; text-align:center; padding:3px; width:100%; position:fixed; bottom:0; background:lightskyblue}
@media screen and (min-width:415px) {
	#bottomAd {display:none}
}



/*------- COMMON TO MOBILE + DESKTOP --------*/

article {font:15px/200% Verdana}
H1,H2,H3 { line-height:130% }
h1 {margin-bottom:0px; font:normal normal 36px Georgia; color:saddlebrown; text-align:center}
h2 {padding:3px 0px 3px 10px; font:bold 18px/120% Tahoma,AvenirNextCondensed-Regular,Roboto Condensed; color:darkslategray; 
	background:palegoldenrod; border-radius:8px; letter-spacing:0.02em}
h3 {margin:0px 0px -5px -5px; padding:5px 0px 0px 10px; font:18px/120% Arial; color:dodgerblue; font-weight:bold; border-top:1px dotted slategray}
h2 + h3 {border-top:none}

	/*------- PRACTICE GAMES FOOTER --------*/
	#practice td {text-align:center; min-width:165px; height:157px}
	#practice img {border:0; border-radius:12px; border:6px solid transparent}
	#practice img:hover {width:160px; height:126px; border:2px solid blue} /* Original: 150x118 */
	#practice h2 {background:none; margin:0px}
	#practice a:link {text-decoration:none}
	#practice a:hover {background:none}


/*------- MOBILE ONLY (default 0-375px)--------*/

#page {padding:5px; background-color:white}
#lefty, #righty {display:none}
article p {margin-left:0px}
.il {border-radius:9px; padding-left:0px; display:block; margin:auto}  /* illustrative graphic */

img {max-width:100%}

#thirdPracticeIcon {display:none}
#fourthPracticeIcon {display:none}

.floatOrNot {border-radius:12px; display:block; margin:auto; margin-bottom:8px}
.floatOrNot img {border-radius:12px} /* A container div could be what's floated */
li .floatOrNot {margin-left:-10px; padding-left:-10px}


/* COMMON TO 481px+ (DESKTOP MENUS KICK IN) */

  @media screen and (min-width:481px) {
	/*------- GENERAL --------*/
	#page {margin-top:10px; padding:15px; border:1px solid silver; border-radius:9px; overflow:auto; } /* overflow:auto expands the height of #page to include the floated content */
		/* removed: box-shadow:8px 8px 10px gray; */
	#mbj {margin:0px; font:14px Arial; font-style:italic}
	article p {margin-left:30px}
	.il {float:right; margin:0px 0px 10px 10px}
	.floatOrNot, li .floatOrNot {float:right; margin-left:10px} /* Need the 2nd def. for specificity */


	/*------- BANNERS --------*/
	#ban { border:1px solid silver; border-radius:9px; padding:3px; font:13px/180% Arial}
	#ban ol {margin-left:0.75em; padding-left:0.75em; line-height:160%}
	/* CAN'T DO A :HOVER FOR BG COLOR, BECAUSE IT'S NOT SPECIFIC ENOUGH, SINCE I'M SETTING THE BG DIRECTLY. Could set the *class* randomly so hover would work, but then I'd need to add cursor:pointer + onclick for the whole banner. */
	#ban h4 {text-align:center; font:bold 16px/150% Tahoma; margin:5px}
	#ban P {margin-left:3px;}
	#ban UL { margin-left:8px; padding-left:8px}
	#ban img {border-radius:6px}
  }


/* COMMON TO >769px */
	@media screen and (min-width:769px) {
		#lefty {display:block; float:left; left: 0px; width:200px; height:100%; font:13px/170% Arial}
		#artFoot {box-sizing:border-box; float:left}
		article {padding:0px 40px}
		article p, article ol, article ul {margin-left:20px; line-height:185%}
		#thirdPracticeIcon {display:table-cell}
		#fourthPracticeIcon {display:table-cell}
	}

/* 769-1024, Big tablets */
  @media screen and (min-width:769px) and (max-width:1024px) {
	#artFoot {width:calc(100% - 200px)}
  }

/* 1025+ */
  @media screen and (min-width:1025px) {
	#page {margin:auto; max-width:1200px}
	#righty {display:block; float:right; width:200px; padding-top:15px; text-align:center}
	#artFoot {float:left; width:calc(100% - 400px)}
	#col1 {width:calc(50% - 20px); float:left; padding:20px 15px 0px 0px; }
	#col2 {width:50%; float:right}
  }