/* #Base */

	#HOFtext .hoflist { display: block; }
	#SideNav .dhtmlMenu { display: block; }
	#MobileNav .navBar { display: none; }
	#footer .copyryt {margin-left: 0px; margin-right: 0px; }
    .container { position: relative; width: 100%; padding: 0; }
    .basicbox { border: none; max-width: 688px; }
    .keptleft { position: relative; width: 344px; float: left; clear: left; text-align: left;
                background-color: #111122; border:1px solid Grey; }
    .keptright { position: relative; width: 344px; float: left; clear: right; text-align: left;
                 background-color: #111122; border:1px solid Grey; }
    .rostersbox { border: none; max-width: 720px; margin-top: 12px; }
    .rostersleft { margin: 4px; position: relative; width: 344px; float: left; clear: left;
                   border: solid 1px #777777; background-color: #444444; z-index: 2; }
    .rostersright { margin: 4px; position: relative; width: 344px; float: left; clear: right;
                    border: solid 1px #777777; background-color: #444444; z-index: 2; }
    .rostersboth { margin: 4px; position: relative; width: 344px; float: left; clear: both;
                    border: solid 1px #777777; background-color: #444444; z-index: 3; }
    .report { font-size: 1em; text-align: right; }
    .contentbox { border: none; max-width: 720px; }
    .vsbox { border: 2px; max-width: 720px; margin-top: 12px; background: #333333; text-align: center; }
    .solobox { border: 2px; max-width: 360px; margin-top: 12px; background: #333333; text-align: center; }
    .split { width: 480px; text-align: center; }
    
/* #Tablet (Note: Design for a width of 768px) */

    @media only screen and (min-width: 768px) and (max-width: 959px) 
    {
		#HOFtext .hoflist { display: block; }
		#SideNav .dhtmlMenu { display: block; }
		#MobileNav .navBar { display: none; }
		#footer .copyryt { margin-left: 0px; margin-right: 0px; }
        .basicbox { max-width: 540px; }
        .keptleft { width: 270px; }
        .keptright { width: 270px; }
        .rostersbox { max-width: 720px; }
        .vsbox { max-width: 720px; }
        .contentbox { max-width: 480px; }
        .split {display: none; width: 270px; }
    }
    
/* #Mobile (Landscape) (Note: Design for a width of 480px) */

    @media only screen and (min-width: 480px) and (max-width: 767px) 
    {
		#HOFtext .hoflist { display: none; }
		#SideNav .dhtmlMenu { display: none; }
		#MobileNav .navBar { display: block; margin: auto!important; }
		#footer .copyryt {margin-left: 128px; margin-right: 128px; }
        .basicbox { max-width: 480px; }
        .rostersbox { max-width: 360px; }
        .vsbox { max-width: 360px; }
        .contentbox { max-width: 440px; }
        .report { font-size: 0.8em; }
        .split {display: block; width: 270px; }
    }

/*  #Mobile (Portrait) (Note: Design for a width of 320px) */

    @media only screen and (max-width: 479px) 
    {
		#HOFtext .hoflist { display: none; }
		#SideNav .dhtmlMenu { display: none; }
		#MobileNav .navBar { display: block; margin: auto!important; }
		#footer .copyryt {margin-left: 128px; margin-right: 128px; }
        .basicbox { max-width: 344px; }
        .rostersbox { max-width: 360px; }
        .vsbox { max-width: 360px; }
        .contentbox { max-width: 360px; }
        .report { font-size: 0.7em; }
        .split {display: block; width: 270px; }
    }