BODY { margin:0px; background:wheat; height:100%} /* This allows me to set enclosed elements to 100% height. */
#content {padding:0px 30px; font:75%/165% Verdana} /* Legacy; remove once I update all pages to remove it */

/*------- RESPONSIVE --------*/

   /* Defaults */
#debug:before {}
#page {height:100%;background-color:white; max-width:1200px; margin:auto; margin-top:10px; padding:15px; border:1px solid silver; border-radius:9px; box-shadow:8px 8px 10px gray; overflow:auto; } /* overflow:auto expands the height of #page to include the floated content */
H1,H2,H3,body { margin:0px 0px 8px 0px; line-height:120% }
h3 {margin-left:-15px}
#tagline {margin:-16px 0px 0px 130px; font:11px Tahoma}
#mbj {display:none}
#iPhoneMenu {display:none}
#artFoot {box-sizing:border-box; float:left}
article {font:75%/175% Verdana}
article p {margin-left:30px}
article::after {content:"—all articles on VegasClick are by Michael Bluejay"; font-style:italic; display:block; text-align:right;}
#lefty {display:none; float:left; left: 0px; width:200px; height:100%; font:13px/170% Arial}
#righty {display:none}
#big,#iPadWide,#iPadTall,#iPhoneWide,#iPhoneTall {display:none;background:yellow; text-align:center; width:100%; font-weight:bold; color:navy}
#inlinead {display:none}
.iPhoneOnly {display:none; background:yellow; padding:10px} /* For a la carte items on various pages when I need it; will show below in iPhone section with display:block */
img {max-width:95%}
.floatOrNot {float:right; margin:2px 0px 10px 12px}

  /* big screens */
  @media screen and (min-width:1025px) {
	#debug:before {}
	#big {display:block}
	#logo {float:left}
	#mbj {display:block; margin:0px; position:relative; left:90px; top:16px; font:92% Arial; font-style:italic; color:gray}
	#menudiv {float:right}

	#lefty  {display:block}
	#righty {display:block; float:right; width:200px; padding-top:15px; text-align:center}
	article {padding:0px 40px}
	article p, article ol, article ul {margin-left:20px; line-height:185%}
	#artFoot {float:left; width:calc(100% - 400px)}
	#col1 {width:calc(50% - 20px); float:left; padding:20px 15px 0px 0px; }
	#col2 {width:50%; float:right}
	.iPhoneOnly {display:none}
	.talliPhoneOnly {display:none}
	}

  /* 1025-1164; runs IN ADDITION to above; if kind of big but not max big */	
  @media screen and (min-width:1025px) and (max-width:1164px) {
	#logo {float:left; width:230px} /* width:200px kludge necessary otherwise the logo div is too wide for some reason */
	#logopic {width:70%} /* Necessary to get the menu to fit */
	#tagline {margin:0px 0px 0px 10px;}
	#thirdPracticeIcon {display:none} /* Otherwise the Practice div is so wide it screws up the whole page */
	.iPhoneOnly {display:none}
	.talliPhoneOnly {display:none}
	}

  /* iPad wide */	
  @media screen and (min-width:769px) and (max-width:1024px) {
	#debug:before {content: "iPad wide"}
	#iPadWide {display:block}
	#logo {float:left; width:230px} /* width:200px kludge necessary otherwise the logo div is too wide for some reason */
	  #logopic {width:100%}
	  #tagline {margin:0px 0px 0px 20px;}
	#menudiv {float:right}
	#lefty {display:block}
	#artFoot {padding-top:15px; width:calc(100% - 200px)}
	.iPhoneOnly {display:none}
	.talliPhoneOnly {display:none}
	}

  /* 768-954; runs IN ADDITION to above */	
  @media screen and (min-width:769px) and (max-width:954px) {
	#thirdPracticeIcon {display:none} /* Otherwise the Practice div is so wide it screws up the whole page */
	}

  /* iPAD tall */	
  @media screen and (min-width:481px) and (max-width:768px) {
	#debug:before {content: "iPad tall"}
	#iPadTall {display:block}
	#logo {float:left}
	#menudiv {float:right}
	#fourthPracticeIcon {display:none} /* Otherwise the Practice div is so wide it screws up the whole page */
	#inlinead {display:block; width:200px; float:right; text-align:center}
	#artFoot {margin-top:25px}
	.talliPhoneOnly {display:none}
	.floatOrNot {float:none; margin:10px 0px}
	}

  /* iPhone wide */	
  @media screen and (min-width:376px) and (max-width:480px) {
	#debug:before {content: "iPhone wide"}
	article {font-size:100%}
	#iPhoneWide {display:block}
	#iPhoneMenu {display:block}
	#menu {display:none}
	#thirdPracticeIcon {display:none} /* Otherwise the Practice div is so wide it screws up the whole page */
	#fourthPracticeIcon {display:none} /* Otherwise the Practice div is so wide it screws up the whole page */
	.iPhoneOnly {display:block} /* ditto */
	.talliPhoneOnly {display:none}
	.imagesToSquish {max-width:470px}
	.floatOrNot {float:none; margin:10px 0px}
	}

  /* Small phones, tall */	
  @media screen and (min-width:0px) and (max-width:375px) {
	#debug:before {content: "Small phones, tall"}
	h3 {margin-left:-5px}
	article {font-size:100%}
	article ul, article ol {margin-left:-1em; padding-left:-1em}
	#iPhoneMenu {display:block}
	#iPhoneTall {display:block}
	#logopic {width:90%}
	#tagline {margin:0px 0px 0px 30px;}
	#menu {display:none}
	#page {padding:5px}
	#secondPracticeIcon {display:none} /* Otherwise the Practice div is so wide it screws up the whole page */
	#thirdPracticeIcon {display:none} /* Otherwise the Practice div is so wide it screws up the whole page */
	#fourthPracticeIcon {display:none} /* Otherwise the Practice div is so wide it screws up the whole page */
	.noiPhone {display:none} /* a la carte definition for use in various places when I need it */
	.iPhoneOnly {display:block} /* ditto */
	.talliPhoneOnly {display:block}
	.imagesToSquish {max-width:310px}
	.floatOrNot {float:none; margin:10px 0px}
	}

/*------- BANNERS --------*/
#ban { border:1px solid silver; border-radius:9px; padding:3px; font:13px/180% Arial} /* removed: cursor:pointer */
/* CAN'T DO A :HOVER FOR THE BACKGROUND COLOR, BECAUSE IT'S NOT SPECIFIC ENOUGH TO FIRE SINCE I'M SETTING THE DEFAULT BACKGROUND COLOR DIRECTLY. */
#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}


/*------- LINKS --------*/
a:hover {background:yellow; color:navy}
.nohover a:hover {background:none}
.nolink a {text-decoration:none; color:black}

/*------- GENERAL --------*/
h1 {font:36px Georgia; font-weight:normal; margin-top:24px; text-align:center; color:sienna}
h2 {color:green;}
h3 {color:darkgreen; background:#eee; padding:3px; padding-left:10px; border-radius:18px}

sm,small,.s9 {font-size:75%}
src {font-size:75%; color:silver}
.update {color:gray; text-align:right; font-style:italic}

table {font:12px/170% Verdana}

.fRight {float:right; margin-left:10px}
.left {text-align:left}
.ctr  {text-align:center}
.star,.nostar {border-radius:6px; color:white}
.star {background:orange}
.nostar {background:silver}


/*------- DATA TABLE --------*/
.dataTable {
	margin:auto;
	border-collapse:collapse;

	border-radius:12px 12px 0px 0px;
	overflow:hidden;
	/* display:inline-block; is necessary for rounded corners in Firefox, but it prevents me from centering w/CSS, so fuck Firefox */
	margin:auto;

	font:11px Arial;
}

  /* TITLE.  It breaks if I use a <thead>, because then the first <tr> after *both* the <thead> and the <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}