body {
font-family: Verdana;
font-size: 10pt;  
margin: 0px auto;
padding: 0px;
background-color: #fff;
text-align:center;
width:640px;
}	

#header {
margin-top: 10px;
font-size: 20pt;
}

#subHeader {
margin-top: 5px;
margin-bottom: 10px;
color: grey;
font-size: 9pt;
}

#totals {
margin: 0px;
margin-top:10px;
}

#diagrams {
float: left;
width: 200px;
}

#joseki {
float: right;
width: 430px;
margin-top:10px;
}

#diagram1Div {
position:relative;
margin-top:10px;
width: 200px;
height:150px; 
}

#diagram1 {
position:absolute;
left:0px;
top:0px;
z-index=1;
}

#stones1 {
position:absolute;
left:0px;
top:0px;
z-index=2;
}

#diagram2Div {
position:relative;
margin-top:10px;
width: 200px;
height:150px; 
}

#diagram2 {
position:absolute;
left:0px;
top:0px;
z-index=1;
}

#stones2 {
position:absolute;
left:0px;
top:0px;
z-index=2;
}

#diagram3Div {
position:relative;
margin-top:10px;
width: 200px;
height:150px; 
}

#diagram3 {
position:absolute;
left:0px;
top:0px;
z-index=1;
}

#stones3 {
position:absolute;
left:0px;
top:0px;
z-index=2;
}

#diagram4Div {
position:relative;
margin-top:10px;
width: 200px;
height:150px; 
}

#diagram4 {
position:absolute;
left:0px;
top:0px;
z-index=1;
}

#stones4 {
position:absolute;
left:0px;
top:0px;
z-index=2;
}

#boardDiv {
position:relative;
margin-top:10px;
width: 430px;
height:430px; 
/*overflow: scroll;*/
}

#board {
position:absolute;
left:0px;
top:0px;
z-index=1;
}

#stones {
position:absolute;
left:0px;
top:0px;
z-index=2;
}

.buttons {
margin-top: 5px;
width: 100%;
}

.blue {
color: blue;
}

#userNarrativeDiv {
clear:left;
float: left;
padding:5px; 
margin-left:0px;
color:#0000c0;
width:430px;
text-align:left;
}

#controlsDiv {
margin-top: 10px;
clear:left;
float:left;
}

#about {
color:gray;
text-align:left;
}

#copyright {
border-top: 1px solid blue;
margin-top:5px;
margin-bottom:10px;
width:100%;
text-align:right;
color:gray;
}

a {
text-decoration: none;
font-weight:bold;
color:orange;
}

a:hover {
color:blue;
}

.smallButton {
background: #36aaf7;
background-image: -webkit-linear-gradient(top, #86aaf7, #0096fa);
background-image: -moz-linear-gradient(top, #86aaf7, #0096fa);
background-image: -ms-linear-gradient(top, #86aaf7, #0096fa);
background-image: -o-linear-gradient(top, #86aaf7, #0096fa);
background-image: linear-gradient(bottom, #86aaf7, #0096fa);
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 10px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: Verdana;
color: #ffffff;
font-size: 10pt;
padding: 2px 11px 2px 11px;
text-decoration: none;
cursor:pointer;
}

.smallButton:hover {
background: #88cef7;
background-image: -webkit-linear-gradient(top, #FFB858, #FFB858);
background-image: -moz-linear-gradient(top, #FFB858, #FFB858);
background-image: -ms-linear-gradient(top, #FFB858, #FFB858);
background-image: -o-linear-gradient(top, #FFB858, #FFB858);
background-image: linear-gradient(to bottom, #FFB858, #FFB858);
text-decoration: none;
}