@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Raleway:400');

BODY {
background:#fff ; 
height:100%;
margin-top:0px;
margin-bottom:0px;
font-size:15px;
-webkit-text-size-adjust: 100%;
margin-left:0px;
margin-right:0px;
text-align:center;
padding:0px;
font-family:"open sans",verdana,arial,helvetica,arial,sans-serif;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html {overflow-y: scroll;} 

.widemain{
width:990px;
margin-right:auto;
margin-left:auto;
background:white;
}
.widefooter{
width:990px;
margin-right:auto;
margin-left:auto;
background:white;
}
.halfbox{
width:450px;
float:left;
}

TD.topbarmessage{
padding:3px;
margin-left:11px;
background:#006699;
color:#FFFFFF
}

P.clear{
clear:both;
}

.box1{
background:#FFFFCC
}

P{
color:#333;
font-family: "Open sans", Arial, Verdana, Helvetica, sans-serif;
font-weight:normal;
margin: 0px;
letter-spacing:0.5px;
font-size:13px;
margin:0px;
line-height:2;
text-align:left;
margin-left:12px;
}

EM{
color:#660000;
font-style:normal
}

H2{
font-size:24px;
margin-top:21px;
}

H1{
font-size:26px;
text-align:center;
background-color:#009900;
color:#FFFFFF;
font-weight:normal;
padding:7px;
}

a:visited{
background-color:transparent;
color:#669b66;
font-weight:bold
}

a:link{
background-color:transparent;
color:#669b66;
font-weight:bold
}

a:hover{
background-color:transparent;
color:#000;
text-decoration:none;
font-weight:bold
}

a:active{
background-color:transparent;
color:#669b66;
text-decoration:none;
font-weight:bold
}


HR{
color:#4E409D;
height:1px;
width:80%;
background:#FFFFFF;
text-align:center
}



.button {
	background-color:#f1d600;
	text-indent:0;
	display:inline-block;
	color:#000;
	font-family:"Open sans",Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	padding:7px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ded17c; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border:1px solid black;
margin-bottom:21px;
}
.button:hover {
	background-color:#fff;
         cursor: pointer;
}
.button:active {
	position:relative;
	top:1px;
}


.select { 
    border: 1px solid #c4c4c4; 
    width: 300px; 
    font-size: 13px; 
    padding: 4px 4px 4px 4px; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    box-shadow: 0px 0px 8px #d9d9d9; 
    -moz-box-shadow: 0px 0px 8px #d9d9d9; 
    -webkit-box-shadow: 0px 0px 8px #d9d9d9; 
} 
 
.select:focus { 
    outline: none; 
    border: 1px solid #7bc1f7; 
    box-shadow: 0px 0px 8px #7bc1f7; 
    -moz-box-shadow: 0px 0px 8px #7bc1f7; 
    -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
} 

.smallinputbox{
width:55px
}

IMG.padding{
border: 3px #FFFFFF solid;
}

@media only screen and (max-width : 799px) {

IMG.padding{
border: 3px #FFFFFF solid;
width:100%;
}
.button{
-webkit-border-radius:2px;
-webkit-appearance:none;
    box-shadow: 0px 0px 8px #f1d60d; 
    -moz-box-shadow: 0px 0px 8px #f1d60d; 
    -webkit-box-shadow: 0px 0px 8px #f1d60d; 
}
.widemain{
width:90%;
margin-right:auto;
margin-left:auto;
background:white;
}
.halfbox{
width:90%;
float:none;
}

}

H1{
  font-size:26px;
  text-align:center;
  background-color:#009900;
  color:#FFFFFF;
  font-weight:normal;
  padding:9px 0 7px;
  /* 1990s-style "button bar" effect */
  border-top:2px solid #ccffcc;    /* light edge */
  border-bottom:2px solid #004d00; /* dark edge */
  /* subtle lift to the text */
  text-shadow:1px 1px 0 #005500;
  letter-spacing:1px;              /* just a touch more "title" feel */
}

@media only screen and (max-width : 799px) {
  H1{
    font-size:22px;
    padding:8px 0 6px;
  }
}



.game-bar{
  background:#FFFFCC;
  border-top:1px solid #CCCC99;
  border-bottom:1px solid #CCCC99;
  margin:10px 0 20px;
  padding:8px 10px;
  text-align:left;
}

.game-bar-left{
  float:left;
  width:90px;
  text-align:center;
  font-size:12px;
}

.game-dice{
  border:3px #FFFFFF solid;
}

.game-bar-right{
  margin-left:100px; /* makes room for the dice block */
}

.game-intro{
  margin-left:0;
  margin-bottom:4px;
  font-size:12px;
  color:#555555;
}

.game-links{
  margin-left:0;
  line-height:1.8;
}

/* on small screens, stack nicely */
@media only screen and (max-width : 799px) {

  .game-bar{
    text-align:left;
  }

  .game-bar-left{
    float:right;          /* dice to the right */
    width:70px;           /* small, fixed width */
    margin:0 0 4px 8px;   /* small gap from text */
    text-align:center;
  }

  .game-dice{
    width:48px;           /* slightly smaller dice on mobiles */
    height:auto;
  }

  .game-bar-right{
    margin-left:0;        /* full width minus the floated dice */
  }

  .game-links{
    line-height:1.6;
  }
}

.footer-meta{
  margin:3px 0;
  line-height:1.6;
  font-size:11px;
  color:#666666;
}

.footer-counter{
  display:inline-block;
  padding:2px 6px;
  margin:0 2px;
  font-family:"Courier New", Courier, monospace;
  font-size:11px;
  background:#FFFFFF;
  border:1px inset #999999; /* fake counter box */
}

.footer-book{
  float:right;
  width:130px;
  text-align:center;
  font-size:11px;
  margin:0 0 4px 10px;
  padding:4px;
  background:#FFFFFF;
  border:1px solid #CCCC99;
}

.footer-book-img{
  display:block;
  margin:0 auto 4px;
  border:2px solid #FFFFFF;
}

.footer-book-text{
  display:inline-block;
  margin-top:2px;
}

/* mobile adjustments */
@media only screen and (max-width : 799px) {
  .widefooter{
    width:90%;
    font-size:11px;
    padding:8px 6px 10px;
  }
  .footer-rule{
    width:95%;
  }
  .footer-book{
    float:none;
    margin:0 auto 8px;
    width:auto;
  }
  .footer-book-img{
    max-width:120px;
    height:auto;
  }
}