html, body {
    margin: 0;
    padding: 0;
    font-family: Helvetica Neue, Verdana, Helvetica, Arial;
    font-size: 14px;
    color: #333;
}

body {
    overflow: auto;
    height: 100%;
    background: #6788AD;
	line-height : 18px;
    background: -moz-linear-gradient(top, #496687 0%, #6889AE 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #496687), color-stop(100%, #6889AE) );
 	filter: progid :   DXImageTransform.Microsoft.gradient ( startColorstr = '#496687', endColorstr = '#6889AE',GradientType =       0 );
}

li{
	margin-bottom:3px;
}

#content-wrap{
	width : 70%;
	margin : 0 auto;
	background-color : white;
	box-shadow :  0 0 20px #122F4B;
}

#download{
	float : right;
	width : 200px;
	text-align : center;
	margin-right : 10px;
}

h1{
	padding : 1%;
	background-color : #122F4B;
	color: white;
	font-family: Georgia, "Times New Roman", Times;
	font-weight : normal;
	text-align : center;
	padding : 20px 0;
	margin : 0;
}

#content{
	padding : 2%;
}

pre{
	border: SOLID 1px black;
	display : block;
	margin : 10px 0;
	padding : 10px;
	font-family : consolas, monaco, courier;
	font-size : 12px;
}

#log{
	font-family : consolas, monaco, courier;
	font-size : 12px;
	border : SOLID 1px black;
	margin : 10px 0;
	padding : 10px;
}

button{
	display : block;
}

h3{
}

.left{
	float : left;
	width : 48%;
}

.right{
	border-left : 1px dotted #CCC;
	padding : 1%;
	float : right;
	width : 48%;
}

.clear{
	clear:both;
}


/* punch
*******************************************************************************/
.punch {
  display:block;
  text-decoration : none;
  background: #4162a8;
  border-top: 1px solid #38538c;
  border-right: 1px solid #1f2d4d;
  border-bottom: 1px solid #151e33;
  border-left: 1px solid #1f2d4d;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
  -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
  box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
  color: #fff;
  font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
  line-height: 1;
  margin-bottom: 10px;
  padding: 10px 0 12px 0;
  text-align: center;
  text-shadow: 0px -1px 1px #1e2d4d;
  -webkit-background-clip: padding-box; }
  .punch:hover {
    -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    cursor: pointer; }
  .punch:active {
    -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
}