/*@charset "UTF-8";*/

/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video {
	margin: 0;
	padding: 0;
	border: 0;
}
a {
	text-decoration: none;
}

body {
	background: #121212;
	text-align: center;
	font: 100% Arial, Helvetica, sans-serif;
	background-image:url(/../../../images/V2_0/Home/background.png);
	background-repeat:repeat-x;
	
}

ul, ul.menu {
	list-style: none;
}

/*This hack is necessary to remedy the issue with the swfobject library causing a half-second white flash on any page where it is used*/
object[type="application/x-shockwave-flash"] {
    visibility: hidden;
}

#page-wrap {
	max-width: 960px;
	margin: 0 auto;
    width:100%;
}

/*top login bar*/
#top-bar {
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:right;
	color:#FFF;
	margin-right:25px;
	max-width:960px;
	height: 43px;
	float:right;
	padding:0px;
    padding-top:4px;
}

.LoginText {
	margin-top: 8px;
	width: 75px;
	height:20px;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#333;
	border-style:none;
}

#top-bar h1 {
	font-size:12px;
	font-weight: normal;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	display:inline;
}

#top-bar h1 span2{
}

/*  Footer
*****************************/
#pgft { /* page footer */
    margin-bottom:10px;
    padding-top:5px;
	overflow:hidden;
	max-width:960px;
    min-width: 240px;
	/*border-top:1px dotted #808080;*/
	text-align:center;
	font-size:11px;
	margin-left: auto; /* centers the footer */
    margin-right: auto; /* centers the footer */
}
#pgft a{ /* page footer links*/
    color: #FFFFFF;   
    text-decoration:none;
}
#pgft li a:hover
{
    text-decoration: underline;
}
#pgftl {
    color: #FFFFFF;
    float: left;
    font-size: 10px;
    width: 15%;
}
#pgftcr 
{

    color: #FFFFFF;
    float: left;
    font-size: 10px;
    margin-top: 0px !important;
    width: 70%;
}
#pgftCopyCondensed
{
    display: none;
}
#pgftcr ul
{
    margin: 0px;
    padding: 0px;
}
#pgftcr li
{
    margin: 0px;
    padding: 0px 5px;
    display: inline;
    border-left: 1px dotted #FFF;
    border-right: 1px dotted #FFF;
    margin-left: 2px;
    margin-right: 2px;
}
#pgftcr li:first-child
{
    border-left: none;
    margin-left: 0px;
}
#pgftcr li:last-child
{
    border-right: none;
    margin-right: 0px;
}
#pgftr {
    float: right;
    width: 15%;
    /*margin-top: 34px;*/
}
/***************************/
.toShowWhenSmall
{
    display:none;
}

.spanBold {
	font-weight: bold;
}

.lger{
    color: #FF0000;
    float:left;
    font-size: 14px;
    font-weight: bold;
    margin-right:5px;
    margin-top:11px;
}

.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-weight:bold;
	font: 10px/100% Arial, Helvetica, sans-serif;
	padding: 3px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}
.red {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
	background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
	background: #b61318;
	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
	background: -moz-linear-gradient(top,  #c9151b,  #a11115);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
	color: #de898c;
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
	background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}

/*main art area*/

.mainartback {
	display: inline-block;
	background-image:url(/../../../Images/V2_0/Home/main2.png?v2);	
	background-repeat:no-repeat;
	width: 940px;
	height: 415px;
	text-align:left;
    margin-top:-4px;
}

/*logo and navigation area*/
.logo {
	position:absolute;
	display:block;
	width:168px;
	height:54px;
	padding-top:30px;
	margin-left:30px;

}

#main-nav {
	display:block;
	width: 700px;
	height: 49px;
	float: right;
	padding-top:20px;
	
}
#main-nav ul {
	float: left;
}
#main-nav ul li {
	float: left;
}
#main-nav ul li a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:normal;
	color: #CCC;
	padding: 0 18px;
	border-right: 1px solid #ccc;
	text-decoration: none;
	text-align:right;
}
#main-nav ul li a.last{
	border: none;
}
#main-nav ul li a:hover {
	color: #C7262D;
}

.express {
	position:relative;
	display:block;
	width:93px;
	height:91px;
	float:right;
	top:60px;
	left:650px;

}

/*colums area*/
.columns {
	position:relative;
	height: 160px;
	font-size:12px;
	font-weight:normal;
	line-height: 20px;
	color:#666;
	text-align:left;
	top:-35px;

}

.columns h1{
	font-size:18px;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:normal;
	letter-spacing:-.5px;
	color:#666;
	text-shadow:#333;
	padding-bottom: 10px;
}

.rules
{
    display: inline-block;    
	height:130px;
    padding: 10px;
    text-align:left;
	vertical-align:top;
	width: 29%;
	*display: inline;
    zoom: 1;
}

.rules.one {    
	border-right:1px dotted #999;
	padding-right: 20px;	
	/*width:33%;*/
}
.rules.two {
	border-right:1px dotted #999;
	padding-right: 20px;
	padding-left: 20px;
	/*width:34%;*/
}
.rules.three {
	padding-left: 20px;
	/*width:33%;*/
}


/*footer*/

#footer {
	width:960px;
	height: 60px;
}

#footer-nav ul {
	float: left;
}
#footer-nav ul li {
	float: left;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 10px;
}

#footer-nav p, a {
	text-transform:uppercase;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#FFF;
	line-height: 15px;

}
#footer-nav p a:hover {
	color: #C7262D;
}

#footer-nav p span {
	font-size:10px;
	line-height:30px;
}

.links {
	float:right;
	right: 20px;
	margin-top: -25px;
}
.social{
	float:left;
	left: 20px;
	margin-top: -45px;
	text-transform:uppercase;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#FFF;
	line-height: 15px;

}

/* Media Queries */
/*---------------------
 * Global - These are dependent on properties in the old new_style_v2.css
 * new_style_v2.css must be included BEFORE these queries
 */
@media only screen and (max-width:  850px)
{
   body
    {
        background: #333333;
    }
    #page-wrap
	{
	    background-color: #333333;
        background-image:url(/../../../images/V2_0/Home/background_middle.png);
        background-repeat:repeat-x;
        background-position-y: 60.5%;
	    font-size: 12px;
	    width: 800px;
	}
	
	#top-bar
	{
	    background: url(/../../../images/V2_0/Home/background_top.png);
	    margin: auto;
	    padding-right:5px;
	    width: 795px;
	}
	.mainartback
	{
	    background-size:800px !important;
	    height:350px;
	    position:relative;
	    width:100%;	 
	    z-index:1;   	    
	}
	#main-nav
	{
	    width: 420px;
	}
	#main-nav ul li
	{
	    padding-bottom:.8em;
	}
	.express
	{
	    float:none;
	    left:700px;
	}
	.columns
	{
	    background-color: #ebebeb;
	    height: auto;
	    margin-top:8px;
	    padding-top:25px;
	}
	.rules
	{
	    height:150px;
	    width:28%;
	}
	#bdft
	{
	    margin-top:-30px;
	}
	#bdft 
	{
	    width: 800px;
	}
	
	
}
/* iPad in portait mode */
@media only screen and (max-width: 800px)
{
    #page-wrap
	{
	    width: 768px;
	}
	
	#top-bar
	{
	    background: url(/../../../images/V2_0/Home/background_top.png);
	    margin: auto;
	    padding-right:5px;
	    width: 763px;
	}
	.logo
	{
	    padding-top: 7px;
	    margin-left: 10px;
	}
	.mainartback
	{
	    background-size:768px !important;  
	    height: 330px; 
	}
	#main-nav
	{
	    width: 430px;
	}
	#main-nav ul li
	{
	    padding-bottom:.8em;
	}
	.express
	{
	    left:660px;
	    top: 45px;
	}
	#bdft 
	{
	    width: 768px;
	}
	
	
}
@media only screen and (max-width: 767px)
{
    #page-wrap
	{
	    width: 630px;
	}
	#top-bar
	{
	    width: 625px;
	}
	.mainartback
	{
	    background:none !important;
	    height: 130px;
	}
	.express
	{
	    display:none;
	}
	.rules
	{
	    height:200px;
	    width:26%;
	}	
	.rules img
	{
	    padding-left:40px;
	}
	#bdft
	{
	    margin-left:auto;
	    margin-right:auto;
	    width:630px;
	}
}
@media only screen and (max-width: 630px)
{
    #page-wrap, #bdft
	{
	    width: 570px;
	}
	#top-bar
	{
	    width: 565px;
	}
	#top-bar h1
	{
	    font-size:11px;
	}
	.logo
	{
	    margin-left:10px;
	}
	#main-nav
	{
	    width:360px;
	}
	.rules
	{
	    height: 210px;
	}
	.rules img
	{
	    padding-left:25px;
	}
}
@media only screen and (max-width: 570px)
{
    #page-wrap, #bdft
	{
	    width: 500px;
	}
	#top-bar
	{
	    width: 495px;
	}
	#top-bar h1
	{
	    font-size: .7em;
	}
	.logo
	{
	    margin-left:10px;
	    padding-top:20px;
	}
	#main-nav
	{
	    width: 320px;
	}
	#main-nav ul li
	{
	    padding-bottom:.5em;
	}
	#main-nav ul li a
	{
	    font-size: .8em;
	    padding-right: 15px;
	}
	.rules
	{
	    height: 240px;
	    width: 26%;
	}
	.rules img
	{
	    padding-left:0;
	}
    #footer-nav
    {
        margin-left: 40px;
    }
}
@media only screen and (max-width: 500px)
{/* At this point the content should start stacking vertically */
    #page-wrap, #bdft
	{
	    width: 450px;
	}
	#top-bar
	{
	    width: 445px;
	}
	#top-bar h1
	{
	    float:left;
	    font-size:1em;
	    padding-right: 10px;
	    padding-top: 15px;
	}
	#main-nav
	{
	    width: 255px;
	}
	.columns
	{
	    padding:10px;
	}
	.rules
	{
	    height: auto;
	    width: 100%;
	}
	.rules.one
	{
	    border-right: none;
	    border-bottom: 1px dotted #999;
	    padding: 10px 0px 10px 0px;
	}
	.rules.two
	{
	    border-right:none;
	    border-bottom: 1px dotted #999;
	    padding: 10px 0px 10px 0px;
	}
	.rules.three
	{
	    padding: 10px 0px 10px 0px; 
	}
    #footer-nav
    {
        margin-left: 0px;
    }
    .toHideOnSmall
    {
        display: none;
    }
    .toShowWhenSmall
    {
        display: block;
    }
}
@media only screen and (max-width: 450px)
{
    #page-wrap, #bdft
	{
	    width: 400px;
	}
	#top-bar
	{
	    width: 395px;
	}
	.mainartback
	{
	    height: 150px;
	}
	#main-nav
	{
	    /*font-size: 10px;*/
	    padding: 0;
	    width: 220px;
	}
	#main-nav ul
	{
	    float:none;
	}
	#main-nav ul li
	{
	    float:none;
	    height:auto;
	    padding:0;	
	    text-align:right;    
	}
	#main-nav ul li a
	{
	    border: none;
	    font-weight:bold;
	}
    #footer a
    {
        padding: 0px;
    }
}
@media only screen and (max-width: 400px)
{
    #page-wrap, #bdft
	{
	    width: 340px;
	}
	#top-bar
	{
	    width: 335px;
	}
    #footer social img
    {
        width: 20px;
        height: 20px;
    }
    #footer img
    {
        padding-top: 10px;
        width: 70px;
        height: 30px;
    }
}
@media only screen and (max-width: 340px)
{
    #page-wrap, #bdft
	{
	    width: 300px;
	}
	#top-bar
	{
	    padding-right:20px;
	    width: 280px;
	}
	#top-bar h1
	{
	    font-size:.9em;
	}
    #footer social
    {
        width: 70px;
    }
    .toHideOnReallySmall
    {
        display: none;
    }
}
@media only screen and (max-width: 300px)
{
    #page-wrap, #bdft
	{
	    width: 290px;
	}
	#top-bar
	{
	    width: 270px;
	}
	#top-bar h1
	{
	    padding-right:0;
	}
    #footer p
    {
        width: 110px;
        line-height: 1;
        margin-left: 10px;
    }
    #pgftr img
    {
        padding-top: 15px;
        width: 50px;
        height: 20px;
    }
}
@media only screen and (max-width: 290px)
{
    #page-wrap, #bdft
	{
	    width: 260px;
	}
	#bdft, #pgft
	{
	    width:260px !important;
	}
	#top-bar
	{
	    padding-right:0;
	    width: 100%;
	}
	.mainartback
	{
	    width: 260px;
	}
	#footer
	{
	    width: 260px;
	}
    .logo
    {
        width: 110px;
        height: 40px;
    }
    .logo img
    {
        width: 100%;
        height: 100%;
    }
    #footer p
    {
        margin-left: 0px;
    }
}
@media only screen and (max-width: 260px)
{
    #footer p
    {
        width: 90px;
    }
}