html, body {
	width: 100%;
	padding: 0;
	margin: 0;
}

.box {
	border: 1px dotted gray;
	-moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
	padding: 10px;
	margin: auto;
	width: 300px;
}
	
.item {
	border: 1px dotted #eeeeee;
	-moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
	padding: 3px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 220px;
	background-color: #EEEEEE;
	}

.item_expandable {
	border: 1px dotted #eeeeee;
	-moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
	padding: 3px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 220px;
	background-color: #EEEEEE;
	}

hr {
  border: 0.5px dashed gray;
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.keywords {
  margin-top: 10px;
  margin-left: 80px;
  margin-right: 80px;
  font-size: 90%;
  color: #AAAAAA;
  }

.code {
  background-color: #CCCCCC;
  border: 1px dashed black;
  padding: 20px;
  }


.label {
	width: 300px;
	}
.field {
	float: right;
	}

.container {
	}

#basic {
	}
	
#bar {
	}
#pie {
	}
	
#live {
	}

#line_preview1 {
  /*opacity: 0.9;*/
  width: 600px;
  height: 300px;
  float: left;
  }

#line_preview2 {
  /*opacity: 0.9;*/
  width: 600px;
  height: 300px;
  float: left;
  }

#bar_preview1 {
  /*opacity: 0.9;*/
  width: 600px;
  height: 300px;
  float: left;
  }

#bar_preview2 {
  /*opacity: 0.9;*/
  width: 600px;
  height: 300px;
  float: left;
  }

#pie_preview1 {
  /*opacity: 0.9;*/
  width: 600px;
  height: 300px;
  float: left;
  }

#pie_preview2 {
  /*opacity: 0.9;*/
  width: 600px;
  height: 300px;
  float: left;
  }

#live_preview1 {
  /*opacity: 0.9;*/
  width: 600px;
  height: 300px;
  float: left;
  }

#live_preview2 {
  /*opacity: 0.9;*/
  width: 600px;
  height: 300px;
  float: left;
  }











#line_preview {
  /*opacity: 0.9;*/
  width: 300px;
  height: 200px;
  float: left;
  }

#bar_preview {
  /*opacity: 0.9;*/
  width: 300px;
  height: 200px;
  float: left;
  }
#pie_preview {
  /*opacity: 0.9;*/
  width: 300px;
  height: 200px;
  float: left;
  }

#live_preview {
  /*opacity: 0.9;*/
  width: 300px;
  height: 200px;
  float: left;
}
	
	
input {
	//background-color: #eeeeee;
	-moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
	}
	
body {
 font-family:"trebuchet ms",sans-serif;
 font-size:90%;
 background-image: url(../img/formbg.png);
 }
form {
 opacity: 0.8;
 width: 600px;
 background-color: white;
 padding:5px;
 border: 1px dotted gray;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 }
fieldset {
 padding:0 20px 20px 20px;
 margin-bottom:10px;
 border:1px solid #DF3F3F;
 }
legend {
 color:#DF3F3F;
 font-weight:bold
 }
label {
 font-weight:bold;
 color: #666666;
 margin-top:1px;
 display:block;
 }
label.inline {
 display:inline;
 margin-right:50px;
 }
input, textarea, select, option {
 }
input, textarea, select {
 padding:3px;
 border:1px solid #EEEEEE;
 border-radius:5px;
 width:200px;
 box-shadow:1px 1px 2px #C0C0C0 inset;
 }
textarea {
	resize: vertical;
	}
select {
 margin-top:10px;
 }
input[type=radio] {
 background-color:transparent;
 border:none;
 width:10px;
 }
input[type=submit], input[type=reset] {
 width:250px;
 cursor:pointer;
 }

 h2 {
  font-size: 130%;
  text-align: center;
	color : #555555;
  width: 140px;
	border: 1px solid #dddddd;
	background-color: #eeeeee;
	-moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding : 5px;
  }

.description {
  margin-top: 20px;
  font-size: 100%;
	color : #222222;
  margin-left: 200px;
  margin-right: 200px;
  margin-bottom: 30px;
	border: 1px solid #dddddd;
	background-color: #eeeeee;
	-moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding : 15px;
  padding-left: 20px;
  }
.blocktext {
  margin-top: 20px;
  font-size: 100%;
	color : #222222;
  margin-left: 200px;
  margin-right: 200px;
  margin-bottom: 30px;
	border: 1px solid #dddddd;
	background-color: #eeeeee;
	-moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding : 15px;
  padding-left: 20px;
  width: 800px;
  }



.optional-help {
  font-size: 90%;
  width: 300px;
  margin-left: 10px;
  margin-right: 0px;
  margin-bottom: 10px;
	border: 1px solid #dddddd;
	background-color: #eeeeee;
	-moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding : 10px;
  padding-left: 20px;
  
  }

.optional-help {
  font-size: 90%;
  width: 300px;
  margin-left: 10px;
  margin-right: 0px;
  margin-bottom: 10px;
	border: 1px solid #dddddd;
	background-color: #eeeeee;
	-moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding : 10px;
  padding-left: 20px;
  
  }

.required-help {
  font-size: 100%;
	color : #222222;
  margin-bottom: 10px;
	border: 1px solid #dddddd;
	background-color: #eebbaa;
	-moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding : 15px;
  padding-left: 20px;
  margin-left: 10px;
  }

.label {
 font-weight:bold;
 color: #666666;
 margin-top:1px;
 display:inline;
}








.red {
  color: white;
  background-color: #D11919;
}

.blue {
  color: white;
  background-color: teal;
}

.green {
  color: white;
  background-color: green;
}

.more {
  color : white;
  background-color: gray;
}


h4 {
	text-align: center;
	color : #81BEF7;
	border: 1px solid #dddddd;
	background-color: #eeeeee;
	-moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 30px;
	}
 
 h3 {
  color: #81BEF7;
	}

 h1 {
	text-align: center;
	color : #555555;
	border: 1px solid #dddddd;
	padding: 5px;
	background-color: #eeeeee;
	-moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
	}

table {
  margin: 0 auto;
  width: 900px;
  }
	
	
#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid gray;
    border-bottom: 50px solid transparent;
}	

a {
  color: teal;
  text-decoration: none;
  font-weight: bold;
  }
a:hover {
  color: teal;
  text-decoration: underline;
  font-weight: bold;

}