/*========================================================*/
/* Standard Elements */
/*========================================================*/

body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font: 12px/20px sans-serif;
	color: #666666;
	background: #9BE5E9;
	text-align: center;
}

h1 {
	margin: 0;
	padding: 0;
	font: bold 30px/40px Arial,sans-serif;
	color: #000000;
	text-align: center;
}

h2 {
	margin: 0;
	padding: 0;
	font: 12px/20px Arial,sans-serif;
	color: #666666;
	text-align: center;
}

h3 {
	margin: 0 0 10px 0;
	padding: 0;
	font: 16px/30px Arial,sans-serif;
	color: #000000;
	text-align: left;
	text-indent: 20px;
	width: 740px;
	height: 30px;
	background: url(img/frame.gif) no-repeat scroll 0px -30px;
}
h3 span {
	margin: 0;
	padding: 0;
	font: 12px/20px Arial,sans-serif;
	color: #333333;
}

h4 {
	margin: 0;
	padding: 5px;
	font: 14px/20px Arial,sans-serif;
	color: #333333;
	border-left: 5px solid #999999;
	text-align: left;
}
h4 span {
	margin: 0;
	padding: 0;
	font: 12px/20px Arial,sans-serif;
	color: #333333;
}

p {
	margin: 0;
	padding: 0 10px 20px 10px;
}

ul {
	margin: 0 0 0 30px;
	padding: 0 0 30px 0;
	text-align: left;
}
ul ul {
	padding: 0 0 10px 0;
}
dl {
	margin: 0 0 0 30px;
	padding: 0 0 30px 0;
	text-align: left;
}
dt {
	font-weight: bold;
}

form {
	margin: 0;
	padding: 0;
}

img {
	border: 0;
}

table {

}

th {
	margin: 0;
	padding: 0;
	width: 100px;
	background-color: #CCCCCC;
	color: #000000;
	font: bold 12px/20px Arial,sans-serif;
	text-align: center;
}

td {
	background-color: #EEEEEE;
	color: #000000;
	font: 12px/20px Arial,sans-serif;
}

strong {
	color: #333333;
	font-weight: bold;
	font-style: normal;
}

address {
	font: 12px/20px Arial,sans-serif;
}

/*========================================================*/
/* Layout */
/*========================================================*/

#wrapper {
	margin: 30px auto 30px auto;
	padding: 0;
	width: 800px;
	background-color: #FFFFFF;
	text-align: left;
}
#wrapper-header {
	margin: 0;
	padding: 0;
	width: 800px;
	height: 30px;
	background: url(img/frame.gif) no-repeat scroll 0px 0px;
}
#wrapper-footer {
	margin: 0;
	padding: 0;
	width: 800px;
	height: 30px;
	background: url(img/frame.gif) no-repeat scroll 0px -60px;
}

#header {
	margin: 0 0 30px 0;
	padding: 0;
	text-align: center;
}

.introduction {
	margin: 0 30px 30px 30px;
	padding: 0;
	text-align: left;
}

#result {
	margin: 0 30px 30px 30px;
	padding: 0;
	text-align: center;
}

#setting {
	margin: 0 30px 30px 30px;
	padding: 0;
}

#footer {
	margin: 0 30px 0 30px;
	padding: 10px 0 10px 0;
	text-align: center;
	border-top: 3px double #CCCCCC;
}

/*========================================================*/
/* classes */
/*========================================================*/

#sample-badge-box {
	float: right;
	margin:0 0 30px 60px;
	padding: 10px 30px 10px 30px;
	border:1px solid #CCCCCC;
	background:#EEEEEE;
}

.clr {
	clear:both;
}

.error-text {
	color: #FF0000;
}

.codesnipet {
	margin: 0;
	padding: 0;
	width: 200px;
	font: 12px/20px Arial,sans-serif;
}

#id {
	margin: 0;
	padding: 0;
	width: 150px;
	font: 26px/30px Arial,sans-serif;
	vertical-align: middle;
}

#make {
	margin: 0;
	padding: 0;
	text-align: center;
	font: 26px/30px Arial,sans-serif;
	vertical-align: middle;
}

#bg,#tx,#bd {
	margin: 0;
	padding: 0;
	font: 12px/20px Arial,sans-serif;
}

#color-preview {
	float: right;
	margin: 0;
	padding: 0;
	width: 468px;
	height: 80px;
	font: 16px/80px Arial,sans-serif;
	text-align: center;
}