@import "fonts/fontface.css";
/* RESPONSIVE CSS /////////////////////////////////////////////////////////// */

html{
	height:auto;
	width: 100%;
	margin: 0;
	padding: 0;
}

body{
	/*margin-top:10px;*/
    font-family: 'ArimoRegular';
    height:auto;
	width: 100%;
	margin: 0;
	padding: 0;
}

.color_orange
{
	color:#ee6b26;
}

.color_grey {
	color:#333333;
}

.color_black{
	color:#000000;
}

.color_white{
	color:#ffffff;
}

.wrapper {
   width: 100%;
   max-width: 1126px;
   margin: 0 auto -20px;
}

/* ------------------ header ------------------- */
#header_top
{
   width: 100%;
}

#header
{
   	position: fixed;
}

#header_bottom
{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
}

/* ------------------ footer ------------------- */
#footer_top
{
   width: 100%;
}

#footer
{
   width: 100%;
   margin-left:0 0 0 0;
   float: left;
}

#footer_bottom
{
   width: 100%;
   float: left;
}

/* ------------------ navigation ------------------- */
#botnav
{
	width: 100%;
	background-color: #ee6b26;
	height: 5px;
	background-repeat: repeat;
	float: left;
}

#nav
{
	width: 100%;
	background-color: #ee6b26;
	height: 5px;
	background-repeat: repeat;
	float: left;
}

#navbotty
{
	width: 100%;
	background-color: #ee6b26;
	height: 5px;
	background-repeat: repeat;

    text-align: center;
}

/* ------------------ content ------------------- */



#searchBox
{
	width:90%;
}

#PredictRep
{
	font-size:270%;
	/*the rest is in tools.php*/
}

#PredictSuperRep
{
	font-size:270%;
	/*the rest is in tools.php*/
}

#bannerBox
{
	max-width:750px;
	width:99%;
	height:auto;
}

#bannerBoxSmall
{
	max-width:750px;
	width:99%;
	height:auto;
}

#ContentBox
{
	max-width:750px;
	width:100%;
	height:auto;
}


#LogoBox
{
	max-width:300px;
	width:99%;
	height:auto;
}

#topTable
{
	height: 15.1vh;
}

#smalltopTable
{
	height: -7.1vh;
}

#toppyTable
{
	height: 7.1vh;
}

#testTable
{
	width:100%;
	height:auto;
	max-width:750px;
	opacity:0.9;
}

#indexTable
{
	width:100%;
	height:auto;
	max-width:750px;
}

#madtable
{
	width:100%;
	color:  #fff;
	max-width: 1126px;
}

#midTable
{
	height: 25.1vh;
}

/* BANNER */
#banner
{
	width: 750px;
	margin: 0 0 0 0;
	padding: 0;
	height: 200px;
	background: #000 url(images/banner2.jpg) no-repeat;
	/* background-size: 375px 100px; */
	color: #000;
}

#banner h1
{
	margin: 0;
	height: 50px;
	font: 200% "Trebuchet MS", verdana, arial, sans-serif;
	text-align: right;
	letter-spacing: 3px;
	color:  #fff;
	font-weight: bold;
	position: relative;
	top: 110px;
	right: 240px;
}

h1
{
	font-size:35px;
	line-height:4px;
	opacity:1.0;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
}

h2
{
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom: 10px;
	margin-top: 1px;
	background-color: #333;
	text-decoration: none;

	/*width:110%;*/
	color: #f2f2f2;
    text-align: left;

    transition: 0.3s;
    font-size: 14px;

    padding:10px;
    border:1px solid #303030;
}

h2:hover
{
	background-color: #111;
}

h3
{
	font-size: 12.1vw;
	text-decoration:none;
	text-shadow:3px 3px 5px #000000;
	text-align:center;
	font-family: 'ArizoniaRegular';
	letter-spacing:0.5vw;
	margin: 0;
	padding: 0;
	line-height:7.1vw;

	font-weight:normal;
}

h6
{
	text-shadow:3px 3px 5px #000000;
	text-align:center;
	font-size:2.1vw;
	letter-spacing:0.8vw;
	font-family:Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}


h4
{
	width:300px;
	height:210px;
	font-family:Arial, Helvetica, sans-serif;

	background-color: #333; /*#F0F0E0;*/
	color: white; /*#303030;*/
	opacity: 0.9;

	text-decoration: none;
	float: left;
	display: inline-block;
    text-align: justify;
	margin: 4px;

	font-weight: normal;
	padding: 6px;
    transition: 0.3s;
    font-size: 17px;
    border:1px solid #303030;

    border-top-left-radius:6px;
    -moz-border-top-left-radius:6px;
    -webkit-border-top-left-radius:6px;
    -o-border-top-left-radius:6px;
    border-top-right-radius:6px;
    -moz-border-top-right-radius:6px;
    -webkit-border-top-right-radius:6px;
    -o-border-top-right-radius:6px;
    border-bottom-left-radius:6px;
    -moz-border-bottom-left-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -o-border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    -moz-border-bottom-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -o-border-bottom-right-radius:6px;
}

h4 a        {  color: white;  }
h4 a:hover  {  color:white;     }




h5
{
	font-family:Arial, Helvetica, sans-serif;
	margin: 1px;
	background-color: #333;
	text-decoration: none;

	color: #f2f2f2;
    text-align: left;

    transition: 0.3s;
    font-size: 17px;

    padding:4px;
    border:1px solid #303030;

    border-top-left-radius:6px;
    -moz-border-top-left-radius:6px;
    -webkit-border-top-left-radius:6px;
    -o-border-top-left-radius:6px;
    border-top-right-radius:6px;
    -moz-border-top-right-radius:6px;
    -webkit-border-top-right-radius:6px;
    -o-border-top-right-radius:6px;
    border-bottom-left-radius:6px;
    -moz-border-bottom-left-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -o-border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    -moz-border-bottom-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -o-border-bottom-right-radius:6px;
}

p
{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	line-height:18px;
	text-align:justify;
}

a
{
	text-decoration: none;
	color: white;
	font-weight: normal;
}

a:hover
{
	color:white;
	text-decoration: none;
}

#content .wrap-content
{
	/*background: #ffffff;*/
}

.box1
{
	margin:5px 7px;
	padding:10px;
}

.box1 h2
{
	text-align:center;
}

.box2
{
/*	margin:0px 7px;*/
/*	padding:10px;*/
	text-align:left;
}
.box3
{
	margin:5px 7px;
	padding:10px;
	text-align:left;
}

div.line
{
	border-top-width:1px;
	border-top-style:dotted;
	border-top-color:#D7D7D7;
}



/* -------------------- column and row ------------------- */
.wraptext
{
	/*margin:5px;*/
}

.text .co1umn1, .text .co1umn2
{
	float:left;
	/*display: inline-block;*/
}

.text .wraptext
{
	/*margin: 16px;*/
}

/* ------------------ footer -------------------- */
/*footer*/
/*{*/
   /* background-image: url(images/top_yellow_bg.jpg);*/
	/*background-repeat: repeat-x; */

/*}*/

/*.wrap-footer
{
	/* background-image: url(images/top_yellow_bg.jpg);*/
	/*background-repeat: repeat-x;*/
/*}*/

.ftr
{
	background:#FFBF00;
	font-family:Arial, Helvetica, sans-serif;
	padding:10px 0px;
	/*color:#ffffff;*/

}

.ftr p
{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	line-height:30px;
}

.ftr a
{
	text-decoration:underline;
	color:#DA251D;
}

newfooter
{
    /* display: inline-block; */
  	/*  position: relative;*/
    margin-bottom: 10px;
    left: 0;
    right: 0;
    /*height: 150px;*/
}


/*----------	Tablet size    ---------*/
@media only screen and (max-width: 768px)
{
	/* ADDED BYMSF */
	#topMenu	{ width:100%; }
	#searchBox	{ width:100%; }

	.fixed
	{
		width:99%;
		height:auto;
		position: fixed;
		left:0.75vw;
		top: 0px;
		z-index: 1;
	}

	#indexTable
	{
		width:100%;
		position:fixed;
		z-index: 1;
	}

	#testTable
	{
		width:100%;
		opacity:1.0;
	}

	#toppyTable
	{
		height:70px;
		width:100%;
		z-index: 1;
	}

	#LogoBox
	{
		display:none;
	}

	#bannerBox
	{
		display:none;
	}

	#blurb
	{
		display:none;
	}

	#bigHead
	{
		width:100%;
		height: auto;
		z-index:2;
		position:fixed;
	}

	#mediaspace
	{
		height:45vh;
	}

	#PredictRep
	{
		font-size:150%;
		/*the rest is in tools.php*/
	}

	#PredictSuperRep
	{
		font-size:150%;
		/*the rest is in tools.php*/
	}

	h4
	{
		width:94%;
		height: auto;
	}

	h6
	{
		width:94%;
		height: auto;
	}

	h5
	{
		width:95%;
	}

	#navbotty
 	{
 		width: 100%;
		margin-left:0 0 0 0;
		height: 5px;
 	}

	html
	{
		margin: 0;
		padding: 0;
		width: 100%;
	}

	body
	{
		margin: 0;
		padding: 0;
		width: 100%;
	}

	.text .co1umn1, .text .co1umn2
	{
		margin: 0;
		padding: 0;
		width: 100%;
	}

	#nav
	{
		width: 100%;
		margin-left:0 0 0 0;
		background-color: #FFBF00;
		height: 5px;
	}

	#header
	{
	   width: 100%;
	   margin-left:0 0 0 0;
	   display:block;
	}

	#nav
	{
		width: 100%;
		/* background:red; #FFBF00; */
		position: relative;
		/* border-bottom: 1px solid blue #FFBF00 */;
	}

	#nav ul
	{
		float:left;
		list-style:none;
		width:100%;
		display: block;
		position:relative;
	}

	#nav ul li a
	{
		text-decoration: none;
		font-size: 12px;
		line-height: 10px;
		color: #000000;
		display: block;
		margin:0;
		padding:5px;
		list-style:none;
		z-index: 1;
		position:relative;
		text-transform: uppercase;
		font-family: Arial, Helvetica, sans-serif;
		clear: left;
	}

	#header_bottom
	{
		width: 100%;
	}

	#content .wrap-content
	{
		/* background: #ffffff; */
		display: block;
		width: 100%;

		margin: 0;
		padding: 0;
	}

	.text .wraptext
	{
		/*margin: 16px;*/

		margin: 0;
		padding: 0;
	}

	.box1 .box2 .box3
	{
		/*margin:0px 7px;
		padding:5px;*/

		margin: 0;
		padding: 0;
	}
}

/*----------	Iphone size    ---------*/
@media only screen and (max-width: 320px)
{
	/* ADDED BYMSF */
	#topMenu 	{ width:100%; }
	#searchBox 	{ width:100%; }
 	#testTable 	{ width:100%; }

 	.fixed
	{
		width:99%;
		height:auto;
		position: fixed;
		left:0.75vw;
		top: 0px;
		z-index: 1;
	}

  	#navbotty
 	{
 		width: 100%;
		margin-left:0 0 0 0;
		height: 5px;
 	}

	body
	{
		/*margin-top:1px;*/
		width: 100%;
	}

	#header
	{
		width: 100%;
		margin-left:0 0 0 0;
	}

	#nav
	{
		width: 100%;
		margin-left:0 0 0 0;
		background-color: #FFBF00;
		height: 5px;
	}

	#nav .wrap-nav
	{
		background:#FFBF00;
		background-repeat: repeat-x;
		display: block;
		height: auto;
	}

	#nav ul
	{
		float:left;
		list-style:none;
		height: auto;
		width:100%;
		display: block;
		position:relative;
	}

	#nav ul li a
	{
		text-decoration: none;
		font-size: 12px;
		line-height: 10px;
		color: #000000;
		display: block;
		margin:0;
		padding:5px;
		list-style:none;
		z-index: 3;
		position:inherit;
		text-transform: uppercase;
		font-family: Arial, Helvetica, sans-serif;
		clear: left;
	}

	.text .wraptext
	{
		margin: 5px;
	}

	.box1 .box2 .box3
	{
		margin:0px 7px;
		padding:5px;
		display:block;
	}

	/*
	h3
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 100%;
	}
	*/

}
/* END RESPONSIVE CSS /////////////////////////////////////////////////////////// */


/* TOPNAV ////////////////////////////////////////////////////////////////////*/
/* Remove margins and padding from the list, and add a black background color */
ul.topnav
{
    list-style-type: none;
   	margin: 0;
    padding: 0;
   	overflow: hidden;
    background-color:#333;
    font-family: Arial, Helvetica, sans-serif;
}

/* Float the list items side by side */
ul.topnav li
{
	float: left;
}

/* HORIZONTAL TOP BAR */
ul.topnav li a
{
	font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
}

/* Change background color of links on hover */
ul.topnav li a:hover
{
	background-color: #111;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon
{
	/* display: none; */
	float: right;
    display: inline-block;
}

/* BOTNAV ////////////////////////////////////////////////////////////////////*/
/* Remove margins and padding from the list, and add a black background color */
ul.botnav
{
    list-style-type: none;
    width:100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 1126px;
}

/* Float the list items side by side */
ul.botnav li
{
	float:left;
}

/* Style the links inside the list items */
ul.botnav li a
{
	font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
}

/* Change background color of links on hover */
ul.botnav li a:hover
{
	background-color: #111;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.botnav li.icon
{
	/* display: none; */
	/*float: right;*/
    /*display: inline-block;*/
}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px)
{
	/* ADDED BYMSF */
	#topMenu 	{ width:100%; }
	#searchBox 	{ width:100%; }

	.fixed
	{
		width:99%;
		height:auto;
		position: fixed;
		left:0.75vw;
		top: 0px;
		z-index: 1;
	}

	#nav
	{
		width:100%;
	}

	#testTable 	{ width:100%; }

	#navbotty
 	{
 		width: 100%;
		margin-left:0 0 0 0;
		height: 5px;
 	}

	ul.topnav li:not(:nth-child(-n+2))
	{
		display: none;
	}

	ul.topnav li.icon
	{
		float: right;
    	display: inline-block;
  	}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px)
{
	/* ADDED BYMSF */
	#topMenu 	{ width:100%; }
	#searchBox 	{ width:100%; }
	#nav 		{ width:100%; }
	#testTable 	{ width:100%; }

	#navbotty
 	{
 		width: 100%;
		margin-left:0 0 0 0;
		height: 5px;
 	}

	ul.topnav.responsive
	{
		position: relative;
	}

	ul.topnav.responsive li.icon
	{
		position: absolute;
		right: 0;
		top: 0;
	}

  	ul.topnav.responsive li
  	{
  		float: none;
  		display: inline;
  	}

	ul.topnav.responsive li a
	{
		display: block;
    	text-align: left;
	}
}
/* TOPNAV END ////////////////////////////////////////////////////////////////////*/

/* SILLY ANIMATIONS */

#roto
{

  /*border-radius: 50%;*/
  -webkit-transition:all 0.5s ease-out;
  -moz-transition:all 0.5s ease-out;
  -ms-transition:all 0.5s ease-out;
  -o-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}

#roto:hover
{
  -webkit-transform:rotate(6deg);
  -moz-transform:rotate(6deg);
  -ms-transform:rotate(6deg);
  -o-transform:rotate(6deg);
  transform:rotate(6deg);
}

#grow {
  -webkit-transition:all 0.5s ease-out;
  -moz-transition:all 0.5s ease-out;
  -ms-transition:all 0.5s ease-out;
  -o-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}

#grow:hover {
  -webkit-transform:scale(1.2);
  -moz-transform:scale(1.2);
  -ms-transform:scale(1.2);
  -o-transform:scale(1.2);
  transform:scale(1.2);
}

@-webkit-keyframes wobble {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes wobble {
  16.65% {
    -webkit-transform: translateY(8px);
    -ms-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    -ms-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    -ms-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

#wobble {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

/*
#wobble:hover {
  -webkit-animation-name: wobble;
  animation-name: wobble;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

#zoom-tilt {
  -webkit-transition:all 0.3s ease-out;
  -moz-transition:all 0.3s ease-out;
  -ms-transition:all 0.3s ease-out;
  -o-transition:all 0.3s ease-out;
  transition:all 0.3s ease-out;
}

#zoom-tilt:hover {
  -webkit-transform:rotate(15deg) scale(1.3);
  -moz-transform:rotate(15deg) scale(1.3);
  -ms-transform:rotate(15deg) scale(1.3);
  -o-transform:rotate(15deg) scale(1.3);
  transform:rotate(15deg) scale(1.3);
}
*/