/* ------ fonts ----- */



p, h1, h2, h3, h4, a, li, dt, dd, label, input, textarea {
color:white;
font-weight:normal;
font-family:"Lucida Grande", Helvetica, Arial, sans-serif;
text-shadow: 0 0 0 #000; /* thin text for safari */
}

body {
/*opacity: .9999; /* thin text for FF mac */
}

p, a, h2, h3, dt, dd, label, input, textarea {
font-size:13px;
line-height:20px;
margin-bottom:20px;
}

h2 {
font-size:15px;
}
h3, dt {
font-weight:bold;
}

a {
color:#CCFF00;
}

a:focus, a:active {
  outline: none; /* this is for FF (to avoid those annoying dotted lines) */
}

div.clear {
clear:both;
}



/* ----- basic layout ----- */

html {
background:url("../_images/bodyBg.jpg") center top #333;
}

div#container {
width:860px;
margin:0 auto;
padding:20px;
position:relative;
}


/* ----- header ----- */

#header {
border-bottom: 6px solid #00D9FF;
}

#header h1 {
text-indent:-999em;
display:block;
background:url("../_images/gameChalkLogo.gif");
height:65px;
width:264px;
}

#header h2 {
margin:50px 0 14px 0;
}

#header a.contact {
position:absolute;
top:20px;
right:110px;
text-decoration:none;
background:url("../_images/contactIcon.gif") top left no-repeat;
padding:2px 0 3px 27px;
}
#header a.about {
position:absolute;
top:20px;
right:20px;
text-decoration:none;
background:url("../_images/aboutIcon.gif") top left no-repeat;
padding:2px 0 3px 29px;
}

/* main nav */

#header ul li a {
float:left;
width:200px;
margin:0 20px 12px 0;
padding:10px 0;
border:1px solid white;
border-width:1px 0;
font-size:15px;
font-weight:bold;
color:white;
text-decoration:none;
background:url("../_images/navHoverBlue.png") 0 -10px repeat-x; /* override this for IE6- */
display:block;
}

#header ul li a:hover {
border-color:#00D9FF;
color:#00D9FF;
background-repeat:repeat;
color:#333;
/* these settings below do transparency hover effect
background:#00D9FF;
border-color:#00D9FF;
color:#333;
opacity: .4;
*/
}

body#games li a.games, body#games li a.games:hover, body#help li a.help, body#help li a.help:hover {
background:#00D9FF;
border-color:#00D9FF;
color:#333;
cursor:default;
opacity: 1;
}



/* ----- games list ----- */

ul#gamesList {
margin-top:14px;
float:left;
}

ul#gamesList li a, ul#gamesList li.moreSoon {
width:200px;
display:block;
margin:0 0 -1px 0;
padding:10px 0;
border:1px solid white;
border-width:1px 0;
font-size:15px;
font-weight:bold;
color:white;
text-decoration:none;
background:url("../_images/navHoverGreen.png") 0 -10px no-repeat; /* override this for IE6- */
}

ul#gamesList li a.selected, ul#gamesList li a.selected:hover {
background-color:#CCFF00;
border-color:#CCFF00;
color:#333;
z-index:1000;/* pull borders above neighbour's ones */
position:relative;
opacity: 1;
cursor:default;
}

ul#gamesList li a:hover {
border-color:#CCFF00;
color:#CCFF00;
z-index:1000;
position:relative;
color:#333;
background-repeat:repeat;
}


/* ----- gameInfo (games page) ----- */

body#games div#allGames {
margin:14px 0 0 20px;
float:left;
width:420px;
}

body#games div.gameInfo {
margin-bottom:14px;
clear:both;
}

body#games div.gameInfo img {
float:left;
width:189px;
border:6px solid white;
}

body#games div.gameInfo p, body#games div.gameInfo h2  {
width:200px;
margin-left:220px;
}

body#games div.gameInfo h2 {
font-size:30px;
font-weight:bold;
font-family:Helvetica;
line-height:30px;
margin-bottom:10px;
margin-top:-0px; /* pull text up in line with image */
}
body#games div.gameInfo h2 span {
font-size:20px;
line-height:20px;
font-weight:normal;
display:block;
}


/* ----- simulator ----- */

div#simulator {
position:absolute;
right:10px;
background:url("../_images/simulatorBg.png");
background:url("../_images/simulatorBg.gif");
width:222px;
height:383px;
}

div#simulator h2 {
display:none;
}

div#simulator p#phoneScreen {
margin:113px 36px 0 31px;
color:#333;
font:13px "Lucida Grande", "Lucida Console";
height:95px;
}

div#simulator textarea#command {
margin:25px 0 0 22px;
width:175px;
height:50px;
padding:1px;
border:1px solid #777;
color:#000000;
}

div#simulator textarea#gameText {
margin:0px 0 0 0px;
width:156px;
height:90px;
padding:1px;
border:0px solid #777;
color:black;
background-color: transparent;
font-weight:bold;
font-family:"Lucida Grande", Helvetica, Arial, sans-serif;
}

div#simulator input#sendButton {
margin:10px 0 0 81px;
}

/* ----- gameInfo (help page) ----- */

body#help div#allGames {
margin:14px 0 0 20px;
float:left;
width:640px;
}

body#help dl {
border-bottom:1px solid #fff;
margin-top:1px;
}

body#help dt {
padding:10px 0 10px 0;
margin:0;
clear:both;
border:1px solid #fff;
border-width:1px 0 0 0;
color:#CCFF00;
}
body#help dd {
margin:0 0 12px 0;
}

body#help div.gameInfo img {
float:left;
width:189px;
border:6px solid white;
}

body#help div.gameInfo dl, body#help div.gameInfo h2  {
width:420px;
float:right;
}

body#help div.gameInfo h2 {
font-size:15px;
font-weight:bold;
font-family:Helvetica;
margin-bottom:10px;
margin-top:10px; /* pull text up in line with image */
}


/* ----- about/contact page ------ */

div#about, div#contact {
margin:14px 0 0 0px;
width:420px;
padding-left:220px;
background:url("../_images/aboutIconLarge.gif") no-repeat 161px 0;;
}
div#contact {
background:url("../_images/contactIconLarge.gif") no-repeat 142px 0;;
}

div#about h2, div#contact h2 {
margin:0 0px 14px 0;
padding:10px 0;
border:1px solid #00D9FF;
border-width:1px 0;
font-size:15px;
font-weight:bold;
background:#00D9FF;
color:#333;
}
div#about h2 {
margin:0 0px 7px 0;
}

div#about h3 {
padding:10px 0 10px 0;
margin:-5px 0 0 0;
clear:both;
border:1px solid #fff;
border-width:1px 0 0 0;
}
div#about h3.first {
border:none;
}

/* ----- contact form ----- */

div#contact label {
clear:both;
}

div#contact input, div#contact textarea {
border:1px solid #fff;
width:418px;
margin-bottom:11px;
height:20px;
background:#444;
}

div#contact input:focus, div#contact textarea:focus {
background:#383838;
border-color:#CCFF00;
}

div#contact textarea {
height:180px;
}

div#contact img {
margin:12px 0 5px 0px;
}
div#contact p {
margin:10px 0 5px 0px;
}
div#contact input.send {
width:auto;
border:none;
height:auto;
margin-top:6px;
}

/* ----- contact form feedback ----- */

div.formFeedback {
margin:0 0 11px 0;
}
div.formFeedback h3 {
margin:0 0 1px 0!important;
background:#CCFF00;
color:#333;
padding:10px 0;
}
div.formFeedback p {
color:#CCFF00;
border-bottom:1px solid #CCFF00;
padding:10px 0;
margin:0!important;
}

div.formFeedback.error h3 {
background:#FF4A4A;
}
div.formFeedback.error p {
color:#FF4A4A;
border-bottom:1px solid #FF4A4A;
}