/************************************************************************/
	/*                                                                      */
	/* Copyright 2010 by Stan Reckard     (www.artbylogic.com)              */
	/*                                                                      */
	/* This file and its contents are copyrighted by Stan Reckard.  All     */
	/* rights reserved. No content, programming code or images may be sold, */
	/* published or distributed without express permission from the author. */
	/* Do not remove copyright notices.  By violating these terms you may   */
	/* be held liable for any resulting loss or damage.                     */
	/*                                                                      */
	/* No support, guarantee or warranty is offered or implied. By using    */
	/* any of this code you assume full risk and responsibility for that    */
	/* use.  Written permission must be obtained before any use.            */
	/*                                                                      */
	/************************************************************************/

#soln { width:120px }
#po, #col { width:30px; }
#solvedit { font-size:20pt; font-weight:bold; color:red }
#guessPanelWrapper { overflow:auto; width:665px; margin-bottom:10px;}
#guessPanel {  margin:5px; padding:5px; overflow:auto; width:470px; border:1px solid gray; float:left;}
#solutionPanel {  margin:5px; overflow:auto; width:470px; }

#btnSpacer { margin-top:5px;}
#clearGuessWrapper { margin-top:5px;}

#instructions { margin-left:15px; }
/* #guessHistPanel { overflow:auto; border:1px solid gray; padding:4px; max-width:<?php echo $guessW; ?>px; margin-top:4px;} */
#guessHistPanel { overflow:auto; border:2px solid gray; padding:4px; margin-top:4px;}
table.guessRowHdr { border: 1px solid gray; width:100%; max-height:60px; margin:0; padding:0; margin-bottom:5px; background-color:#bbb;}
table.guessRow { border: 1px solid gray; width:100%; max-height:60px; margin:0; padding:0; margin-bottom:10px;}
.guessHistItemCol {  width:470px; height:100%; margin:0; padding:0;}
.guessHistItem { width:470px; height:100%; margin:0; padding:0;}
.pegsPanel { overflow:auto; margin:0; height:100%;}
/* .pegsPanelCol, .guessHistItemCol { border:1px solid gray; } */
/* .pegsPanel { overflow:auto; border:1px solid gray;  margin:0; max-width:<?php echo $pegsW; ?>px; margin-top:2px; margin-left:8px !important;} */
#mastermindForm { border:1px solid blue;}
#dupeColors { margin-left:6px; }
#newGame {margin-left:14px; }

html { background-color:black;}
body {
	margin:0px; padding:0px;
	text-align:center;  /* centering for IE */
	background-color:black;
}
/* center horizontally */
#mastermindForm {
	width:650px;
	margin:5px auto;
	text-align:left;
	padding:15px;
	border:1px dashed #333;
	background-color:#eee;
	font-size:13pt;
}	
#main {
	width:680px;
	margin:5px auto;
	text-align:left;
	padding:15px;
	margin-top:40px;
	border: 2px solid gray;
	background-color:#eee;
	z-index:200;
}	
h1 { text-align:center; }


#slot0, #slot1, #slot2, #slot3, #slot4 { float:left; width:40px; height:30px; border:1px solid black; margin:2px; z-index:100; }
#slot5, #slot6, #slot7, #slot8, #slot9 { float:left; width:40px; height:30px; border:1px solid black; margin:2px; z-index:100; }
#slot10, #slot11, #slot12, #slot13, #slot14 { float:left; width:40px; height:30px; border:1px solid black; margin:2px; z-index:100; }
#slot15, #slot16, #slot17, #slot18, #slot19 { float:left; width:40px; height:30px; border:1px solid black; margin:2px; z-index:100; }

#soln0, #soln1, #soln2, #soln3, #soln4 { float:left; width:40px; height:30px; border:1px solid black; margin:2px; z-index:100; }
#soln5, #soln6, #soln7, #soln8, #soln9 { float:left; width:40px; height:30px; border:1px solid black; margin:2px; z-index:100; }
#soln10, #soln11, #soln12, #soln13, #soln14 { float:left; width:40px; height:30px; border:1px solid black; margin:2px; z-index:100; }
#soln15, #soln16, #soln17, #soln18, #soln19 { float:left; width:40px; height:30px; border:1px solid black; margin:2px; z-index:100; }


.pegBlack { float:left; width:10px; height:10px; border:1px solid black; margin:2px; margin-left:4px; margin-right:0; z-index:100; background-color:black; }
.pegWhite { float:left; width:10px; height:10px; border:1px solid black; margin:2px; margin-left:4px; margin-right:0; z-index:100; background-color:white; }

/* use overflow:auto on parent of float elements so that the parent container will expand to contain its children */
#colorPanel { width:470px; max-width:480px; border:1px solid black;  z-index:105; margin:5px; padding:5px;  overflow:auto; }
#color0, #color1, #color2, #color3, #color4, #color5 { float:left; width:40px; height:30px;  margin:2px; border:1px solid black; cursor:default;}
#color6, #color7, #color8, #color9, #color10, #color11 { float:left; width:40px; height:30px;  margin:2px; border:1px solid black; cursor:default;}
#color12, #color13, #color14, #color15, #color16, #color17 { float:left; width:40px; height:30px;  margin:2px; border:1px solid black; cursor:default;}
#color18, #color19 { float:left; width:40px; height:30px;  margin:2px; border:1px solid black; cursor:default;}          
	
.noColor { background-image:url(grid3.jpg);}

.color_0 { background-color:red; }                   
.color_1 { background-color:orange; }                   
.color_2 { background-color:yellow; }                   
.color_3 { background-color:green; }                   
.color_4 { background-color:blue; }                   
.color_5 { background-color:purple;  }                   
.color_6 { background-color:sienna; } /* brown */                   
.color_7 { background-color:black;  }   
.color_8 { background-color:white; }                   
.color_9 { background-color:gray; }                   
.color_10 { background-color:teal; }                   
.color_11 { background-color:skyblue; }                   
.color_12 { background-color:hotpink; }                   
.color_13 { background-color:darkSalmon; }                   
.color_14 { background-color:lightGreen; }                   
.color_15 { background-color:palevioletred; }                   
.color_16 { background-color:rosyBrown; }                   
.color_17 { background-color:sandyBrown; }                   
.color_18 { background-color:tan; }                   
.color_19 { background-color:springGreen; }                   

/* Navigation bar */
.navBarTable{background-image:url(/images/y_back.jpg);height:20px;max-height:20px;overflow-y:hidden;vertical-align:middle}
a.navBar,a.navBar:link,a.navBar:visited{color:#000;font-family:arial,verdana,courier,helvetica,sans-serif;font-size:9pt;text-decoration:none;overflow:hidden;height:20px;max-height:20px}
a.navBar:hover,a.navBar:active{color:#fff;font-family:arial,verdana,courier,helvetica,sans-serif;font-size:9pt;text-decoration:none;overflow:hidden;height:20px;max-height:20px}
TABLE{TABLE-LAYOUT:fixed;border-collapse:collapse}
TD{font-family:Tahoma,Arial,Helvetica;font-size:12px}
TD{white-space:nowrap}
.td1{width:20%;text-align:left}
.td2{width:10%;text-align:left}
.td3{width:10%;text-align:center}
.maxH{max-height:20px;overflow:hidden;width:100%}

#Logo {position:absolute;left:10px;top:30px; z-index:20;}
#Logo img { z-index:20;}
A.noBorderB,A.noBorderB:link,A.noBorderB:visited,A.noBorderB:hover,A.noBorderB:active{text-decoration:none;color:transparent}	


#modalDlgContainer1 {
	z-index:300;
	/* background-color:white; */
}