@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import "http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic";

* {margin:0px; padding:0px;}
html {height:100%; font-size:100%;}
body {font:normal 16px "Droid sans","Trebuchet MS"; color:#555; background:#e8ebec; line-height:30px; letter-spacing: 0; -moz-osx-font-smoothing: grayscale; -ms-word-wrap: break-word; word-wrap: break-word;}
a {text-decoration:none;color:#277299;}
a:hover { text-decoration:underline}
ul li {list-style:none; }
img {border:none; max-width: 100%; }
.clear {clear:both;}

/** Body **/
#main {max-width:1180px; margin:0 auto; width:100%; }

.the-box { width:90%; margin:auto; padding:5%; border:1px solid #d3d3d3; background:#fff;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	margin-bottom:25px;
	-moz-box-shadow: 0 0 3px #ccc;
	-webkit-box-shadow: 0 0 3px#ccc;
	box-shadow: 0 0 3px #ccc;
	}

/** Content **/

h1,h2,h3,h4,h5,h6 { line-height:normal; }

#content {width:90%; padding:5%; }
#content h1 {font-family: "droid serif", georgia, "Trebuchet MS"; font-size:28px; font-weight:normal; color:#277299; padding:10px 0px 8px 0px;}
#content h2 {font-family: "droid serif", georgia, "Trebuchet MS"; font-size:24px; font-weight:normal; color:#277299; padding:8px 0px 8px 0px; margin:0px 0px 10px 0px;}
#content h3 {font-family: "droid serif", georgia, "Trebuchet MS"; font-size:15px; font-weight:normal; color:#000000; border-bottom:1px dashed #ccc; border-top:1px dashed #ccc;  padding:10px 0 10px 10px; margin-bottom:10px; background:#f5f5f5;}
#content h4 {font-family: "droid serif", georgia, "Trebuchet MS"; font-size:18px; font-weight:normal; color:#000000;}
#content h5 {font-family: "droid serif", georgia, "Trebuchet MS"; font-size:16px; font-weight:normal; color:#000000;}
#content h6 {font-family: "droid serif", georgia, "Trebuchet MS"; font-size:14px; font-weight:normal; color:#000000; background:none}

#content ul {margin:15px 0px 15px 0px;}
#content ul li {background:url(../images/content-list-style.jpg) no-repeat left 4px; line-height:30px; margin:0px 0px 4px 0px; padding:0px 0px 0px 18px;}
#content ul ul{margin:0px 0px 0px 0px; background:none}
#content ul ul li {background:none; margin:0px 0px 4px 0px; margin:0px 0px 0px 18px; list-style:disc; padding-left:0px;}

#content ol {margin:10px 0px 15px 10px;}
#content ol li {line-height:30px; margin:0px 0px 4px 20px;}

#content p {line-height:30px; padding:0px 0px 10px 0px;}
.content_image_left {float:left; margin:0px 10px 10px 0px;}
.content_image_right {float:right; margin:0px 0px 10px 10px;}
.highlighter { background-color:#FFFF00}
pre {white-space:pre; background-color:#f1f1f1; border:1px dotted #cccccc; padding:10px; margin:10px 0px 10px 0px; font-size: 14px; word-wrap:break-word;}
.center {text-align:center;}
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;border:none; padding:0px; margin:0px;}
#topBtn{position:relative; float:right; margin-right:50px; z-index: 999; }
.imageleft { float:left; margin:10px 20px 10px 0px; position:relative; border:1px dotted #CCCCCC; padding:3px; background-color:#f9f9f9; vertical-align:top}
.imageleft2 { float:left; margin:10px 3px 0px 0px; position:relative; border:1px dotted #CCCCCC; padding:3px; background-color:#f9f9f9; vertical-align:top}
.imageright { float:right; margin:10px 0px 10px 20px; position:relative; border:1px dotted #CCCCCC; padding:3px; background-color:#f9f9f9;}
.imageright2 { float:right; margin:10px 0px 10px 20px; position:relative;}
.border { border:1px dotted #CCCCCC; padding:3px; background-color:#f9f9f9;}
code { background-color: #eee; padding: 5px; color:#4d4d4d;margin: 10px 0; border: 1px dotted #979797; display: inline-block; text-shadow: 0px 1px 0px #fff; }

.hw-table { width:100%; border:1px solid #DDDBDB; margin-bottom:30px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; }
#content .hw-table ul { margin:0; padding:0; }
#content .hw-table ul li { float:left; display:block; border-bottom:1px solid #DDDBDB; border-top:1px solid #fff; height:30px; width:100%; padding:0; margin:0; background:none; line-height:30px; clear:both;}

#content .hw-table ul li.tbl-heading { height:40px; line-height:40px; 	display:block; font-size:15px; color:#181818; margin:0; border-bottom:1px solid #d6d6d6; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#e2e2e2'); background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#e2e2e2)); background: -moz-linear-gradient(top,  #ededed,  #e2e2e2);}

#content .hw-table ul li.tbl-heading span.height, #content .hw-table ul li.tbl-heading span.width,#content .hw-table ul li.tbl-heading span.img-title { height:40px; line-height:40px; }

#content .hw-table ul li:last-child { border-bottom:none;  }
#content .hw-table ul li .height { width:15%; float:left; line-height:30px; text-align:center;}
#content .hw-table ul li .width  {  width:15%; line-height:30px; height:30px;float:left; text-align:center;border-left:1px solid #DDDBDB;border-right:1px solid #DDDBDB; }
#content .hw-table ul li span.img-title  {  width:67%; line-height:30px; height:30px;float:left;  margin-left:22px; }
#content .hw-table ul li a  { text-decoration:none; float:left; line-height:30px; height:30px; }
#content .hw-table ul li:hover { background:#f5f5f5; }


#content .hw-table.customizertbl ul li { height:auto; }
#content .hw-table.customizertbl ul li a { float:none; font-weight: bold;  }
#content .hw-table ul li span.customizer-title  {  width:20%;float:left;  padding-left:1%; font-weight: bold; }
#content .hw-table ul li.tbl-heading span.customizer-title {  line-height:40px; height:auto }
#content .hw-table ul li .customizer-desc  {  width:75%; line-height:30px; height:auto;  text-align:left;border-left:1px solid #DDDBDB; padding: 1%; display: inline-block; overflow: hidden; }

.smalltitle { font-size: 16px; font-weight: bold; color:#222; margin-top: 20px; }

