/* RESET CSS */

/* First blob here is derived from YUI's "reset" CSS file v 2.5.0 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*to enable resizing for IE*/
input,textarea,select{*font-size:100%;}
/*because legend doesn't inherit in IE */
legend{color:#000;}

/* Global modifications to "reset" to make it more typical */
h1,h2,h3,h4,h5,h6 { font-weight:bold; }
p { margin:1em 0; }
input,select { font-size: 90% }
strong { font-weight: bold; }
em { font-style: italic; }
blockquote { margin: 0 1em 0 1em; }
ul,ol { margin: 1em 1em 1em 1.5em; }
ul li { list-style-type: disc; }
ol li { list-style-type: decimal; }





/* STRUCTURAL ELEMENTS */


html
{
  background: #091D08;
  font: medium Verdana, Arial, Helvetica, sans-serif;
}

#wrapper
{
  position: relative;
  width: 1000px;
  margin: 8px auto;
  border: 1px solid white;
  background: white url(images/bgMain.gif);
}





/* GENERAL FORMAT */


h1, h2, h3, h4
{
  font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
  color: #5E1B54;
}

h2 { font-size: 2.0em; }
h3 { font-size: 1.5em; }

h3, h4
{
  margin-top: 1em;
}

a:link, a:visited { color: #5E1B54; }
a:hover, a:active { color: #A566AA; }

.error { color: red; }
.new { color: orange; }
.noticeme { color: #006efb; }
.small { font-size: small; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.clearLeft { clear: left; }
.clearRight { clear: right; }
.offscreen { position: absolute; left: -1280px;}
.center { text-align: center; }

.callout
{
  padding: 10px;
  border: 3px solid #A15CB0;
  background: white;
  color: black;
  font-size: 0.75em;
}

.callout form
{
  margin: 20px 0;
  font-size: medium;
}

div.adspace
{
  margin: 10px 0;
}





/* HEADER */

#site_header
{
  background: #36b236 url(images/headerBkgd.gif) repeat 4px 0;
}

#site_header ul
{
  clear: both;
  margin: 0;
  padding: 0 20px;
  height: 21px;
  background: #d36ee7 url(images/bgMenu.gif);
}

#site_header li
{
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 0.75em;
  font-weight: bold;
  color: #A566AA;
}

#site_header a { text-decoration: none; }
#site_header a:link, #site_header a:visited { color: #5E1B54; }
#site_header a:hover, #site_header a:active { color: #A566AA; }

#banner_ad
{
  padding: 12px;
  text-align: center;
  background: #d36ee7 url(images/bgAdvert.gif);
}


#loginBtn a
{
  display: block;
  position: absolute;
  top: 3px;
  right: 8px;
  width: 316px;
  height: 63px;
  background: transparent url(images/header_register_blank.png);
}

#loginBtn a:link, #loginBtn a:visited { background: transparent url(images/header_register.png); }
#loginBtn a:hover, #loginBtn a:active { background: transparent url(images/header_register_hover.png); }


#loginBox, #loggedInBox
{
  position: absolute;
  top: 3px;
  right: 8px;
  width: 316px;
  height: 63px;
  background: transparent url(images/header_register_blank.png);
  color: white;
}

#loginBox
{
  font-size: small;
  text-align: center;
}

#loginBox #username,
#loginBox #password
{
  margin-top: 13px;
  width: 115px;
}

#loginBox p
{
  margin: 0;
  margin-top: 5px;
  padding: 0;
  font-weight: bold;
}

#loginBox p.error { color: #c00000; } /* Red is horrid against the green. */

#loginBox a:link, #loginBox a:visited { color: white; }
#loginBox a:hover, #loginBox a:active { color: #A566AA; }


#loggedInBox p
{
  margin: 7px;
  padding: 3px 0 0 0;
  font-size: small;
  text-align: center;
}

#loggedInBox a { font-weight: bold; }
#loggedInBox a:link, #loggedInBox a:visited { color: white; }
#loggedInBox a:hover, #loggedInBox a:active { color: #A566AA; }








/* CONTENT */

#content
{
  float: left;
  width: 630px;
  padding: 15px;
}

#content_full
{
  padding: 25px;
}

div.indexPageColumn
{
  float: left;
  width: 300px;
  margin: 10px 15px 10px 0;
}





/* REGISTRATION & ACCOUNT */

#accountForm table
{
  margin: 10px 0;
  width: 100%;
}

#accountForm table td
{
  padding: 2px 5px 2px 0;
}

#accountForm table td.input input
{
  width: 200px;
}

#accountForm table td.label
{
  width: 120px;
}





/* GAMES */

div.gamePageColumn
{
  float: left;
  width: 300px;
  margin-right: 15px;
}

table.gameBox
{
  margin: 10px 0;
  width: 300px;
  background: white;
  font-size: 0.75em;
}

table.gameBox td.icon
{
  padding: 0 10px;
  background: white url(images/gameBox.jpg) left;
}

table.gameBox td.icon img
{
  width: 70px;
  height: 59px;
}

table.gameBox td.text
{
  padding-right: 10px;
  background: white url(images/gameBox.jpg) right;
  height: 90px;
  vertical-align: middle;
}

table.gameBox td.text h3,
table.gameBox td.text p
{
  margin: 0;
}

/* gameView replaces content on the view-a-single-game page because we need to squeeze the margins. */

#gameView
{
  float: left;
  width: 680px;
  padding: 10px 5px;
}

/* Similarly, the view-a-single-game page wraps the sidebar in a non-semantic div so we can set those margins too. */

#gameViewSidebar #sidebar
{
  float: right;
  width: 300px;
  padding: 10px 5px;
}

table.gameBottom
{
  width: 100%;
}

table.gameBottom td
{
  width: 100%;
  padding: 20px;
  align: center;
  valign: center;
}





/* IPHONE PAGE */

table.iphone
{
  background: #e0e3e7;
  border: 1px solid #9ca4af;
  width: 100%;
}

table.iphone th
{
  background: #9ca4af;
  padding: 5px;
}

table.iphone table.gamespot
{
  width: 139px;
  height: 197px;
  border: 0;
  background: url(images/bgGameSpot.gif) top left no-repeat;
  margin: 10px;
  text-align: center;
}

table.iphone table.gamespot
{
  width: 139px;
  height: 197px;
  border: 0;
  background: url(images/bgGameSpot.gif) top left no-repeat;
  margin: 10px;
  text-align: center;
}

table.iphone table.gamespot tr.top td { padding-top: 10px; }
table.iphone table.gamespot tr.bottom td { padding-bottom: 10px; }

a.iphoneInfo
{
  display: block;
  width: 91px;
  height: 52px;
  margin: 0 auto;
}
a.iphoneInfo:link, a.iphoneInfo:visited { background: url(images/ipButtonInfo.gif) top left no-repeat; }
a.iphoneInfo:hover, a.iphoneInfo:active { background: url(images/ipButtonInfoOver.gif) top left no-repeat; }

.iphone-title 
{ 
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: 8pt; 
  font-weight: bold; 
  color: #000000; 
  text-decoration: none; 
}
.iphone-title-soon { color: #E0E3E7; }





/* IPHONE DREAMS PAGE */

table.iphoneDreams
{
  background: white;
  border: 3px solid #9ca4af;
  width: 100%;
}

table.iphoneDreams th
{
  background: #9ca4af;
  padding: 10px;
}

table.iphoneDreams td.text
{
  vertical-align: top;
  padding: 10px 0;
}

table.iphoneDreams h3
{
  color: rgb(95, 95, 95);
  text-align: center;
  margin: 0;
}

a.buttonDreams
{ 
  display: block;
  float: left;
  width: 147px;
  height: 206px;
  margin: 12px;
}

a.buyDreams:link, a.buyDreams:visited { background: url(images/butBuyDreams.gif) top left no-repeat; }
a.buyDreams:hover, a.buyDreams:active { background: url(images/butBuyDreamsOver.gif) top left no-repeat; }

a.freeDreams:link, a.buyDreams:visited { background: url(images/butFreeDreams.gif) top left no-repeat; }
a.freeDreams:hover, a.buyDreams:active { background: url(images/butFreeDreamsOver.gif) top left no-repeat; }

table.iphoneDreams p.quote
{
  text-align: center;
  font-size: small;
  font-weight: bold;
}







/* DOWNLOAD DREAMS PAGE */

table.download
{
  background: white;
  width: 100%;
  border: 3px solid #A15CB0;
}

table.download th
{
  background: #A15CB0;
  color: white;
  padding: 5px;
  font-size: 135%;
  font-weight: bold;
  padding: 0 10px 5px 10px;
}

table.download td
{
  vertical-align: top;
  padding: 20px;
}

table.download td.firstCol,
table.download td.thirdCol
{
  width: 160px;
}

table.download p.spacer
{
  margin: 5px 0;
}

table.download p.strip
{
  margin: 5px 0;
  background: rgb(40, 140, 44);
  color: white;
  font-size: 80%;
  font-weight: bold;
}

table.download p.reqs
{
  font-size: 70%;
  margin: 5px 0;
}

table.download td li
{
  color: rgb(153, 7, 129);
}

table.download td li.listCirc
{
  list-style-image: url(images/bulCirc.gif);
}

table.download td li.listTri
{
  list-style-image: url(images/bulTri.gif);
}







/* SIDEBAR */

#sidebar
{
  float: right;
  width: 300px;
  padding: 15px;
}

#sidebar_ad
{
  margin: 10px 0;
}

#sidebar ul
{
  margin: 4px 0 10px 0;
  padding: 0;
}

#sidebar li
{
  list-style-type: none;
  font-size: 0.85em;
  font-weight: bold;
  color: white;
}

#sidebar li img
{
  float: left;
  margin: 1px 0;
}

#sidebar li a
{
  display: block;
  float: left;
  width: 242px;
  height: 20px;
  padding: 10px 0;
  margin: 1px 0;
  background: #32ac32 url(images/mgg_mid.gif);
  text-decoration: none;
}

#sidebar li a:link, #sidebar a:visited { color: white; }
#sidebar li a:hover, #sidebar a:active { color: #ECB0FF; }





/* FOOTER */

#footer
{
  margin-top: 10px;
  font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
  font-size: x-small;
  color: #A15CB0;
  text-align: center;
  clear: both;
}

#footer a { text-decoration: none; }
#footer a:link, #footer a:visited { color: #A15CB0; }
#footer a:hover, #footer a:active { color: #A15CB0; }