body {
background:url('/images/body-bg.jpg') top center no-repeat #EEE;
margin:0;
padding:0;
font:1em Verdana;
}

img{border:0}

#page {
max-width:960px;
margin:0 auto;
background:#FFF;
padding:5px;
font:0.8em Verdana;
overflow:auto;
}

#page_shadow{
background:url('/images/site/page_shadow.png') repeat-y center;
}

#footer  {
text-align:center;
font-size:0.8em;
background:url('/images/site/page_shadow_foot.png') no-repeat center bottom;
padding:0 0 2em 0;
margin:0;
}

#footer p {
margin:0;
padding:5px;
}

#footer img {vertical-align:text-bottom}

#header {
max-width:970px;
margin:0 auto;
height:86px;
background:url('/images/site/header_battlegrounds.jpg') top left no-repeat;
}

#logo {
text-align:center;
height:86px;
width:155px;
background:url('/images/site/logo_header.png') 5px center no-repeat;
margin:0 0 0 10px;
}

#logo a {
display:block;
height:86px;
}



#logo span {
display:none
}



@media screen and (min-width: 480px) {

#header ul {
list-style-type:none;
float:left;
margin:0;
padding:0;
}

#header ul a {
display:block;
padding:0.2em 1em;
font-size:1em;
font-weight:bold;
line-height:2em;
color:#FFF;
text-decoration:none;
}

#header>#nav_b>ul>li.sub>a {
padding:0.2em 1.5em 0.2em 1em;
}

#header ul li {
position:relative;
float:left;
margin:0;
padding:0;
}
#header ul ul a {color:#FFF}
#header ul li:hover>a {background:#FFF;color:#000}
#header ul a:hover {background:#FFF;color:#000}
#header ul ul ul li:first-child {
background:url('/images/site/hex_c_t.png') top no-repeat;
padding-top:43px;
margin-top:-43px;
}

#header ul ul li:last-child {
background:url('/images/site/hex_c_b.png') bottom no-repeat;
padding-bottom:52px;
margin-bottom:-52px;
}
#header ul ul {
background:#eee;
display:none;
position:absolute;
top:100%;
left:0;
padding:0;
z-index:1;
background:url('/images/site/hex_c_m.png') top no-repeat #f26047;
background: -webkit-linear-gradient(#ce2e4c, #f26047);
background: -o-linear-gradient(#ce2e4c, #f26047);
background: -moz-linear-gradient(#ce2e4c, #f26047);
background: linear-gradient(#ce2e4c, #f26047);
}

#header ul ul li {
float:none;
width:250px;
}

#header ul ul a {
line-height:120%;
padding:10px 15px;
}

#header ul ul ul {
top:0;
left:100%;
z-index:10;
}

//#header ul li:hover > ul {display:block}

//#header li.open > ul {display:block}
#nav li.sub {background:url('/images/site/nav_arrow.png') right 8px center no-repeat}

#nav li.sub:hover>a {
background-image:url('/images/site/nav_arrow_a.png');
background-position:right 8px center;
background-repeat:no-repeat;
}

#nav>li.sub {background:url('/images/site/nav_d_arrow.png') right 8px center no-repeat}
#nav>li.sub:hover>a {background-image:url('/images/site/nav_d_arrow_a.png')}

#nav {
background:#ce2e4c;
width:100%;
}
#header #social {
float:right;
background:none;
}


#social span {display:none}



#social a {
height:40px;
width:22px;
background:top center no-repeat;
opacity:0.5;
}

#social a:hover {opacity:1}

#header #social li a {background:top center no-repeat}
#header #social .youtube {background-image:url('/images/site/social_youtube.png')}
#header #social .facebook {background-image:url('/images/site/social_facebook.png')}
#header #social .twitter {background-image:url('/images/site/social_twitter.png')}
#header #social .rss {background-image:url('/images/site/social_rss.png')}
}


#page {
margin-top:32px;
clear:both;
}

table.collectible {
max-width:960px;
}

table.collectible img {
width:100%;
}




#light {
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.5);
width:100%;
height:100%;
font:0.8em Verdana;
display:none;
}



#light .wrap {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background:#FFF;
/*max-height:800px;
max-width:1280px;*/
padding:5px;
}

#light img {
background:#FFF;
/*max-height:720px;
max-width:1280px;*/
}

#light div.t {
font-weight:bold;
}

#light div.prev, #light div.next {
background:none;
width:50px;
position:relative;
cursor:pointer;
text-align:center;
float:left;
display:block;
}

#light div.prev:hover, #light div.next:hover {background:rgba(0,0,0,0.4)}

#light div.next {float:right}

#light div.prev:hover::after, #light div.next:hover::after {
content:">";
font-size:3em;
font-weight:bold;
text-align:right;
color:#FFF;
}

#light div.prev:hover::after {content:"<"}

#light .n {
background:#fff;
padding:5px;
margin:-5px;
}

#light a.x {
color:#000;
text-decoration:none;
font-weight:bold;
font-size:2em;
float:right;
padding:0 5px;
}

#light a.x:hover {
background:#000;
color:#FFF;
cursor:pointer;
}

#light .load {
background:url('/images/loading.gif') center no-repeat;
height:100%;
width:100%;
}







div.news table {
border:1px solid #000;
width:75%;
margin:10px auto;
text-align:center;
border-spacing:0;
border-collapse:collapse;
}

div.news table td {
border:1px solid #000;
}

div.news table img {
height:300px;
vertical-align:text-bottom;
}

div.news colgroup.first {
width:50%;
}

div.news img, div.news iframe {max-width:100%}






h2 {
margin:0;
padding:10px;
}

div.news table.screen{
max-width:100%;
width:inherit;
}
div.news table.screen img {
width:100%;
height:inherit;
max-height:200px;
}
/*need to fix this for all tables somehow. max width don't work like you'd think it would*/


h2.news {
border:2px solid #DDD;
border-bottom:0;
margin-top:10px;
padding:0;
}

h2.news a {
text-decoration:none;
background:#DDD;
display:block;
padding:8px;
color:#ce2e4c;
}

h2.news a:hover {
background:#EEE;
color:#f26047;
}

div.news_head {
border:2px solid #DDD;
border-width:0 2px;
background:#EEE;
margin:0;
padding:5px 5px;
}

div.news_head span.time {margin-right:20px}

div.news_head span.time::before {content: "Posted: "}
div.news_head span.author::before {content: "By: "}

div.news {
border:2px solid #DDD;
border-width:0 2px 2px;
padding:5px;
}

div.news p {
margin:0;
padding:5px;
}
#news_reel{
width:75%;
box-sizing: border-box;
padding-right:5px;
}
#news {
background:#ce2e4c;
color:#fff;
}


button.news-load {
background:#ce2e4c;
color:#FFF;
margin:10px auto;
display:block;
border:0;
padding:5px 10px;
cursor:pointer;
}

button.news-load:hover {
background:#FFF;
color:#ce2e4c;
}



#bread {
background:#DDD;
border:2px solid #000;
border-width:0 0 2px;
margin:-5px -5px 5px;
padding:5px;
}

#bread a {
color:#ce2e4c;
text-decoration:none
}

#bread a:hover {
text-decoration:underline;
color:#f26047;
}

.bread2 {
margin:0 -5px 0;
padding:5px;
border-bottom:1px solid #000;
background:#F0f0f0;
}

table.e {width:100%}
table.e th {width:100px}
table.e input {width:100%}
table.e textarea {width:100%;height:450px}
table.e textarea.c {height:50px}


div.quote {
width:85%;
margin:10px auto;
padding:5px;
}

div.quote span.quote {
font-weight:bold;
}

a {
color:#ce2e4c;
text-decoration:none;
}
 a:hover {
text-decoration:underline;
}

div.quote blockquote {
margin:5px;
padding:5px;
background:#DDD;
}







@media screen and (max-width: 480px) {
    #page {
       // background-color: lightgreen;
    }
}

@media screen and (max-width: 480px) {
	#social, #nav_b {
		display:none
	}
	#logo {
		width:100%;
		background-position:center center;
		margin-left:0;
	}
	#page {
		margin-top:0;
	}
	#mobile_menu {
		height:40px;
		width:40px;
		background:url('/images/site/mobile_menu.png') top left no-repeat;
		opacity:.75;
		z-index:20;
		position:fixed;
		right:0;
	}
	#mobile_menu:hover {opacity:1}
}

@media screen and (max-width: 970px) {
	#footer {
		background:#FFF;
		height:inherit;
		padding:10px;
	}
}



div.collectibles div {
width:33.333333%;
float:left;
height:inherit;
}

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

div.collectibles.two div {width:50%}
div.collectibles.four div {width:25%}

div.collectibles div img {
width:99%;
max-width:530px;
display:block;
margin:0 auto;
vertical-align:text-bottom;
}

div.collectibles {
overflow:auto;
background:#EEE;
border:2px solid #DDD;
}

div.collectibles div p {
margin:0;
padding:5px 5px 10px 5px;
}

div.collectibles h3 {
margin:0;
padding:5px 15px;
font-size:1.4em;
}

div.collectibles div:nth-of-type(3n+1) {clear:left}

div.collectibles.two div:nth-of-type(2n) {clear:none}
div.collectibles.two div:nth-of-type(2n+1) {clear:left}

div.collectibles.four div:nth-of-type(3n+1) {clear:none}
div.collectibles.four div:nth-of-type(4n+1) {clear:left}

@media screen and (max-width: 480px) {
	div.collectibles div {
	width:50%;
	}
	
	div.collectibles div:nth-of-type(3n+1) {
	clear:none;
	}
	
	div.collectibles div:nth-of-type(odd) {
	clear:left;
	}

	div.collectibles.four div {width:50%}
	div.collectibles.four div:nth-of-type(3n+1) {clear:none}
	div.collectibles.four div:nth-of-type(4n+1) {clear:none}
	div.collectibles.four div:nth-of-type(2n+1) {clear:left}
}


@media screen and (max-width: 330px) {
	div.side {display:none}
	#news_reel {width:100%}

	div.collectibles div, div.collectibles.two div {
	width:100%;
	}

	div.collectibles.four div {width:100%}
	div.collectibles.four div:nth-of-type(3n+1) {clear:none}
	div.collectibles.four div:nth-of-type(4n+1) {clear:none}
	div.collectibles.four div:nth-of-type(2n+1) {clear:left}
}

div.collectibles ol.b {
clear:left;
}

div.collectibles div h4 {
margin:0;
padding:5px;
font-size:1.2em;
}

p.central {text-align:center}
p.central img {
max-width:100%;
vertical-align:text-bottom;
}









@media screen and (max-width: 480px) {
#nav_b {
background:rgba(0,0,0,.5);
height:100%;
width:100%;
border:2px solid  #000;
position:fixed;
top:0;
display:none;
z-index:20;
}
#nav_b.open {display:block}
#nav {
background:#ce2e4c;
background: -webkit-linear-gradient(#ce2e4c, #f26047);
background: -o-linear-gradient(#ce2e4c, #f26047);
background: -moz-linear-gradient(#ce2e4c, #f26047);
background: linear-gradient(#ce2e4c, #f26047);
position:fixed;
margin:0;
top:2.5%;
left:5%;
padding:0;
width:90%;
height:95%;
overflow:auto;
box-sizing: border-box;
}

#nav ul {
padding-left:20px;
display:none;
list-style-type:none;
}

#nav a {
display:block;
color:#FFF;
padding:0.2em 1em;
line-height:2em;
font-weight:bold;
}

#nav a:hover {
background-color:#FFF;
color:#000;
text-decoration:none;
}

#nav li.sub>a {
background-image:url('/images/site/nav_arrow.png');
background-position:right 8px center;
background-repeat:no-repeat;
}

#nav li.sub>a:hover {
background-image:url('/images/site/nav_arrow_a.png');
}

#nav li.sub.open>a {background-image:url('/images/site/nav_d_arrow.png')}
#nav li.sub.open>a:hover {background-image:url('/images/site/nav_d_arrow_a.png')}
}

#nav li.b {height:0}
#nav li.b a {display:none}



.side {
width:25%;
float:right;
clear:right;
margin:0 0 0 5px;
}

.side h3 {
margin:0;
padding:5px;
background:#ce2e4c;
color:#FFF;
}

.side h3 a {color:#FFF}

.side span.item img {
max-width:100%;
max-height:150px;
display:block;
margin:0 auto;
}

.side span.item {
display:block;
text-align:center;
}

.side div {
background:#FFF;
border:2px solid #CCC;
margin:5px 0;
}

.side span.caption {
display:block;
padding:5px;
font-size:1em;
font-weight:bold;
background:#CCC;
}

.side ul {
list-style-type:none;
margin:0;
padding:0;
}

.side ul li a {
display:block;
padding:5px 5px 5px 10px;
}

.side ul li a:hover {
background:#ce2e4c;
color:#FFF;
text-decoration:none;
}

.side ul li span {
display:block;
padding:5px 5px 5px 10px;
}