/* color around main table */

body {
max-width: 1050px;
background-color:#ffffff; 
font-family: Verdana, Arial, sans-serif;
font-size: 93%;
color: #000;
margin:auto;
padding:0;
text-align:center;
}


/* 3 classes of horizontal rule, as well as the default version . The 3 classes are solid, dotted, and dashed.
 Add class="dashed" to your hr tag on an HTML page, to get the dashed version of the hr. Change the colors to suit. */

.solid {	
   border-top: 1px solid #cccccc;
   border-bottom: hidden;
   border-left: hidden; 
   border-right: hidden;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	
	
}

.dashed {
  border-bottom:1px dashed #cccccc;
   border-top:hidden;
   border-left:hidden;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	
	
}

.dotted {
	border-bottom:1px dotted #cccccc;
   border-top:hidden;
   border-left:hidden;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}


/* Bullets custom class.  Upload a custom graphic to your 
graphics library in the usual way. No speech marks around the URL*/
 
ul {
list-style-type: none;
padding-left: 0;
margin-left: 10px;
}
 
li.custom {
background: url(http://www.casualgamestime.com/images/button.gif) left center no-repeat; 

padding-left: 20px;
margin-bottom: 10px;

 }
 
 li.customtop {
background: url(http://www.casualgamestime.com/images/button.gif) left top no-repeat; 

padding-left: 20px;
margin-bottom: 10px;

 }
 
/* this area below is for your  Link-text and headings. You can change the font type and size, the color of each of them
as well as the a:hover, which is the text for a link, once the pointer passes over it*/

a { font-family: Verdana, Arial, sans-serif; 
font-size: 100%; color: #3300cc; text-decoration: underline;
}

a:hover { font-family: Verdana, Arial, sans-serif;
 font-size: 100%; 
 background-color: #ffffcc;
 color: #3300cc;
 }


h1 { font-family: Verdana, Arial, sans-serif; font-size: 150%;  color: #000000}
h2 { font-family: Verdana, Arial, sans-serif; font-size: 116%;  color: #000}
h3 { font-family: Verdana, Arial, sans-serif; font-size: 108%;  color: #000}



/* 
Notice the width:expression part? That's for internet explorer, which doesnt understand max-width commands.
So this works WITH the max-width at the top of this page. If you change that to say 1050px, change both occurences here
to 1050px as well. Otherwise Those using IE wont get the width constraint....their page would expand indefinitely!
Firefox will ignore this part, and IE will ignore the max-width part....you need both of them.

BUT DONT TOUCH THIS PART BELOW UNLESS YOU HAVE READ THE PDF THAT EXPLAINS HOW, AND YOU ARE SURE YOU UNDERSTAND IT!!*/

.main-table {
width:expression(document.body.clientWidth > 1052? "1050px": "auto" );
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}


/*as we are using a table based layout, all your text is within a table. So this is the area to change the
size, color and font family .*/
table {
font-family: Verdana, Arial, sans-serif;
font-size: 85%;
color: #000;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
}

/* if you change the fonts and sizes, etc above, make this the same, but leave the weight as bold
Its just here to give you the option of a bold type font, without the extra size.*/

.note {
font-family: Verdana, Arial, sans-serif;
background-color:#fff; 
font-size: 85%;
color: #000000;
font-weight: bold;
font-style: italic;
} 


/* Background colors for your table cells. */


td.headerbg {
background-color:#fff;
}

td.spacerbg {
background-color:#fff; 
}

td.contentbg {
background-color:#fff; 
}

td.rightbg {
font-family: Verdana, Arial, sans-serif;
font-size: 93%;
color: #000;
background-color:#fff; 
}

td.leftbg {
font-size: 86%;
margin-left: 10px;
background-color:#fff; 
}

td.footerbg {
font-size: 93%;
background-color:#fff; 
}

/* This is heading background color for H1, H2, and H3 tags*/
.hbg{
background-color:#cccccc; 
color:#000000;
width: auto;
z-axis: 1;
}

/* header yellow*/
.hbgyellow{
background-color:#ffffcc; 
color:#000000;
width: auto;
z-axis: 1;
}

/* header pink*/
.hbgpink{
background-color:#ff99ff; 
color:#000000;
width: auto;
z-axis: 1;
}

/* header blue*/
.hbgblue{
background-color:#99ccff; 
color:#000000;
width: auto;
z-axis: 1;
}

/* header green*/
.hbggreen{
background-color:#3cb371; 
color:#000000;
width: auto;
z-axis: 1;
}

/* header orange*/
.hbgorange{
background-color:#ff9933; 
color:#000000;
width: auto;
z-axis: 1;
}

/* Navbar header pink bg white text*/
.navpink{
background-color:#ff99ff; 
color:#ffffff;
width: auto;
z-axis: 1;
}

/* Navbar header medblue bg white text*/
.navmedblue{
background-color:#99ccff; 
color:#ffffff;
width: auto;
z-axis: 1;
}

/* Navbar header green bg white text*/
.navgreen{
background-color:#3cb371; 
color:#ffffff;
width: auto;
z-axis: 1;
}

/* Navbar header orange bg white text*/
.navorange{
background-color:#ff9933; 
color:#ffffff;
width: auto;
z-axis: 1;
}


/*  link styling for anchor links. Don't modify */
a.jumplink{
text-decoration: none;
font-size: 100%; 
background-color: transparent;
color: #000;
}

a:hover.jumplink  {
text-decoration: none;
font-size: 100%; 
background-color: transparent;
color: #000;
}