/*
 * Desert Fox Clan web site layout styles
 */

 * {
	box-sizing: border-box;
}
div.outercontainer
{
	overflow:auto;
}
 
div.innercontainer
{
	position: absolute;
	left: 0px;
	width: 100%;
}

div.bannerbar
{
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #EF8A00;
	margin: 0px;
	background-repeat: repeat-x;
	background-position: top left;
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	overflow: hidden;
	width: 100%;
	height:100px;
}

div.bannerbarsmall
{
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: #EF8A00;
	margin: 0px;
	background-repeat: repeat-x;
	background-position: top left;
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	overflow: hidden;
	width: 100%;
	height: 50px;
	z-index: 98;
}

div.bannerestablished
{
	z-index: 99;
	position: absolute;
	top: 70px;
	right: 10px;
}

div.bannerbarold
{
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: black;
	margin: 0px;
	background-image: url('/images/dfclogoheaderex.jpg');
	background-repeat: repeat-x;
	background-position: top left;
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	overflow: hidden;
	width: 100%;
	height:100px;
}

div.bannerbaroldsmall
{
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: black;
	margin: 0px;
	background-image: url('/images/dfclogoheaderexsmall.jpg');
	background-repeat: repeat-x;
	background-position: top left;
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	overflow: hidden;
	width: 100%;
	height: 50px;
	z-index: 98;
}

div.menucol
{
	background-color: black;
	margin-left: 0px;
	width: 130px;
	display: block;
	float: left;
	padding-top: 15px;
}

div.maincol
{
	overflow: hidden;
	background-color: black;
	margin-left: 0px;
	padding-right:5px;
}

div.rightcol
{
	background-color: black;
	margin-left: 10px;
	margin-right: 10px;
	width: 300px;
	display: block;
	float: right;
}

div.contentpanel
{
	background-color: black;
	margin: 0px;
	width: 100%;
}

div.footer
{
	font-size: 11px;
	text-align: center;
}

div.textbox
{
	text-align: left;
	background-color: #0A0A0A;
	border: 1px solid #A0A0A0;
	padding: 0px;
}
div.textbox .title, div.textboxtitle
{
    font-size: 14px;
    font-weight: bold;
    color: #FFFFEE;
	background-color: #202020;
	text-align: center;
	height: 25px;
	padding-top: 5px;
}
div.contentbox
{
	text-align: left;
	background-color: #0A0A0A;
	border: 1px solid #A0A0A0;
	padding: 5px;
}

div.panelheader
{
	text-align: center;
	width: 100%;
}

div.panelbodycenter
{
	width: 100%;
	text-align: center;
}

div.panelbody
{
	width: 100%;
}


div.searchmenu
{
	font-size: 11px;
	text-align: center;
	width: 100px;
	border: 0px;
	padding: 0px;
}

div.searchmenu input
{
	font-size : 11px;
	color : #F0F0F0;
	background-color : #303030;
	border : 1px solid #A0A0A0;
}


div.searchmenu input.button
{
	border : 1px solid #808080;
	background-color : #000000;
	color: #FFFFDD;
	font-size : 11px;
	font-weight : bold;
	padding : 0px;
	margin : 1px;
	cursor: pointer;
}

div.centeredtable 
{
    text-align: center;
}
div.centeredtable table 
{
    margin: 0 auto; 
    text-align: left;
}

div.centereddiv
{
    text-align: center;
}
div.centereddiv div 
{
    margin: 0 auto; 
    text-align: left;
}

.modalContainer,
#modalDiv
{
  display:none;
  position:absolute;
  border : 1px solid #808080;
  border-radius:5px;
  padding:8px;
  background-color: black;
  color:#FFFFDD;
  width: 100%;
  height: 100%;
}

.socialSharePopup
{
	position:fixed; 
	top: calc(50% - 50px);
	left: calc(50% - 150px);
}

div.tdreplace
{
	display:block;
	float:left;
}

.iframecontainer
{
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    width: 100%;
}
.iframecontainer iframe
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div.flexcontainer
{
	display: -webkit-flex; /* Safari */
	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
	display: flex;  
	flex-wrap: wrap;
}

/* Flowing wrapping columns within a container row [start] */
div.responsiveColumnsRow {
	content: "";
	display: table;
	clear: both;
}
div.responsiveColumns2Col {
	float: left;
	width: 50%;
	padding: 10px;
}
div.responsiveColumns3Col {
	float: left;
	width: 33%;
	padding: 10px;
}
/* Flowing wrapping columns within a container row start [end] */

/* Burger Menu Start */
div.mobile-nav
{
	cursor: pointer;
}
div.mobile-nav div
{
	position: fixed;
	right: 8px;
	top: 12px;
	z-index: 99;
}
.menu-btn div
{
	position: absolute;
	left: 100%;
	top: 64%;
	padding-right: 8px;
	margin-top: -0.50em;
	line-height: 1.2;
	font-size: 18px;
	font-weight: 200;
	vertical-align: middle;
	z-index: 99;
}
/*#menu-btn:hover #responsive-menu
{
	transition: 0.5s;
    margin-left: -8;
}*/
div.menu-btn span
{
	display: block;
	width: 19px;
	height: 3px;
	margin: 4px 0;
	background: rgb(100,60,0);
	z-index: 99;
}
div.responsive-menu
{
	position: absolute;
	width: 140px;
	margin-right: -5px;  /* Leave a 3px gap */
	margin-top: -9px;    /* Leave a 3px gap */
	padding-left:15px;
	padding-top:5px;
	background: rgba(0, 0, 0, 0.95);
	border : 0;
    border-radius:3px;
    border : 1px solid #808080;
	display: none;
	/*height: 300px;
	overflow-y: scroll;*/
}
div.responsive-menu a
{
	font-size: 15px;
	padding-top: 3px;
	padding-bottom: 3px;
}
div.responsive-menu-header
{
	width: 43px;
	text-align: right;
	margin-top: -3px;
	margin-left: 100px;
	z-index: 99;
}
.expand
{
	display: block !important; 
}
/* Burger Menu End */


/* Hide right column first */
@media screen and (max-width: 1050px)
{
	div.rightcol
	{
		display: none;
	}
}

/* Then hide left nav */
@media screen and (max-width: 760px)
{
	div.menucol
	{
		display:none;
		width:0px;
	}
	div.maincol
	{
		padding-left: 5px;
	}
	div.bannerbar,
	div.bannerbarold
	{
		display: none;
	}
	div.bannerbarsmall,
	div.bannerbaroldsmall
	{
		display: block;
	}
	div.innercontainer
	{
		top: 50px;
	}
	.nomobile
	{
		display:none;
        width:0;
        height:0;
        opacity:0;
        visibility: collapse;
	}
	div.matchreportscores
	{
		width: 100%;
		min-width: 300px;
	}
	div.responsiveColumns2Col {
		width: 100%;
	}
	div.responsiveColumns3Col {
		width: 100%;
	}
	img.loading-spinner
	{
		width: 40px;
		height: 40px;
		border: 0;
	}
}

/* Full size screen, so hide all mobile-only stuff */
@media screen and (min-width: 761px)
{
	.mobile-nav
	{
		display: none;
	}
	div.bannerbar,
	div.bannerbarold
	{
		display: block;
	}
	div.bannerbarsmall,
	div.bannerbaroldsmall
	{
		display: none;
	}
	div.innercontainer
	{
		top: 100px;
	}
	div.matchreportscoresbox
	{
		display: flex;
	}
	.mobileonly
	{
		display:none;
        width:0;
        height:0;
        opacity:0;
        visibility: collapse;
	}
}

/* Increase input field sizes */
@media screen and (max-width: 500px)
{
	input, textarea, select
	{
		font-size : 17px;
	}
	input.button
	{
		font-size : 17px;
	}
}