/* MAIN STYLES */

html {
    overflow-x:hidden;
    border: none;
}

body {
    margin:1px;
    color:#666;
    font-family: Tahoma, Arial, Helvetica, Tahoma, serif;
    font-size:12px;
    overflow-x:hidden;
}

h5 {
    margin:0;
    padding:0;
}

a {
    font-family: Tahoma, Arial, Helvetica, serif;
    font-size:12px;
    color: #058cb6;
    text-decoration:none;
}

a:hover {
    text-decoration:underline;
}

a.navigation img {
    margin-bottom:-5px;
    padding-right:5px;
    border:none;
}

p {
    margin: 20px 0;
}

ul {
    padding-bottom:30px;
}

h3 {
    color:#000;
    font-family: Tahoma, Arial, Helvetica, serif;
    font-size:21px;
    font-weight:normal;
    padding-bottom:37px;
    margin-top:35px;
}

h4 {
	display:inline-block;
	width:100%;
    color:#B5B5B5;
    font-family: Arial, Helvetica, Tahoma, serif;
    font-size:20px;
    font-weight:normal;
    padding-bottom:20px;
}

h5 {
    color:#666;
    font-family: Tahoma, Arial, Helvetica, Tahoma, serif;
    font-size:13px;
    padding:4px 0 10px 0;
    font-weight:bold;
}

.column {
    float:left;
    width:24%;
}



/* HEADER */

.header {
    width:100%;
    height: 100px;
    background:url("../img/head_bg.png");
}

a.logo {
    display:block;
    margin-left:48px;
    height:100px;
    width:100px;
    background-image:url("../img/logo.png");
    float:left;
    outline:none;
}

.tittle-dhtmlx {
    padding: 29px 0 0 121px;
    font-family:arial, serif;
    font-size:16px;
    color:white;
    float:left;
    cursor:default;
}

/* Search */

.search-field {
    position:absolute;
    float:right;
    right:67px;
    top:30px;
    min-width: 430px;
}

.search-field input {
    float:left;
    width:351px;
    height:18px;
    background: white url("../img/search-field.png");
    border: none;
}

.search-field input:hover {
    background-position:0 -20px;
}

input.button {
    cursor:pointer;
    margin-left:7px;
    float:left;
    width:70px;
    height:20px;
    background: white url("../img/search-button.png");
    border: 0;
}

input.button:hover {
    background-position:0 -20px;
}



/* BUTTONS */

.buttons {
    position:absolute;
    width: 154px;
    height: 24px;
    left: 55px;
    top:80px;
}

.buttons a.doc {
    display:block;
    height:24px;
    width:93px;
    background-image:url("../img/doc-button.png");
    float:left;
    outline:none;
}

.buttons a.doc_inact {
    display:block;
    height:24px;
    width:92px;
    background-image:url("../img/doc-button_inact.png");
    float:left;
    outline:none;
}

.buttons a.doc_inact:hover {
    background-position:0 -24px;
}

.buttons a.sample {
    display:block;
    height:24px;
    width:62px;
    background-image:url("../img/samples-but.png");
    float:left;
    outline:none;
}

.buttons a.sample_inact {
    display:block;
    height:24px;
    width:55px;
    background-image:url("../img/samples-but_inact.png");
    float:left;
    outline:none;
}

.buttons a.sample_inact:hover {
    background-position:0 -24px;
}


/* CONTENT */

.content {
    margin: 30px 63px 0 63px;
}

.content li {
    list-style:none;
    height:22px;
}

li img {
    margin-bottom:-5px;
    padding-right: 7px;
}

.line {
    margin: 0;
	padding: 1px;
    background: url("../img/border-dotted.gif") repeat-x top;
}


/* NAVIGATION */

.navigation-div {
    display:block;
    height:35px;
    width:100%;
	margin-bottom:20px;
}

a.navigation {
    outline:none;
    float:left;
    display:block;
    height:25px;
    padding: 2px 10px 0 5px;
    border: solid 1px #cccccc;
}

a.navigation:hover {
    background-color: #eaeff4;
    border-color: #6699CC;
    text-decoration:none;
    outline:none;
}

a.navigation img {
    margin-bottom:-5px;
    padding-right:5px;
    border:none;
}

.arrow {
    float:left;
    height:23px;
    background:url("../img/arrow.gif");
    margin: 3px 3px;
    width:8px;
}

a.view-source {
    border: dashed 1px #cccccc;
}


/* LOGOS */

.big_logo {
    display:block;
    width:200px;
    height:54px;
    overflow:hidden;
    line-height:1000px;
    margin: 40px 0 20px 0;
}

.logo_grid{
	background:transparent url("../img/logo_grid.gif") no-repeat;
}
.logo_treegrid{
	background:transparent url("../img/logo_treegrid.gif") no-repeat;
}
.logo_tree{
	background:transparent url("../img/logo_tree.gif") no-repeat;
}
.logo_layout{
	background:transparent url("../img/logo_layout.gif") no-repeat;
}
.logo_menu{
	background:transparent url("../img/logo_menu.gif") no-repeat;
}
.logo_toolbar{
	background:transparent url("../img/logo_toolbar.gif") no-repeat;
}
.logo_windows{
	background:transparent url("../img/logo_windows.gif") no-repeat;
}
.logo_calendar{
	background:transparent url("../img/logo_calendar.gif") no-repeat;
}
.logo_slider{
	background:transparent url("../img/logo_slider.gif") no-repeat;
}
.logo_scheduler{
	background:transparent url("../img/logo_scheduler.gif") no-repeat;
}
.logo_colorpicker{
	background:transparent url("../img/logo_colorpicker.gif") no-repeat;
}
.logo_combo{
	background:transparent url("../img/logo_combo.gif") no-repeat;
}
.logo_tabbar{
	background:transparent url("../img/logo_tabbar.gif") no-repeat;
}
.logo_accordion{
	background:transparent url("../img/logo_accordion.gif") no-repeat;
}
.logo_folders{
	background:transparent url("../img/logo_folders.gif") no-repeat;
}
.logo_editor{
	background:transparent url("../img/logo_editor.gif") no-repeat;
}
.logo_ajax{
	background:transparent url("../img/logo_ajax.gif") no-repeat;
}
.logo_gantt{
	background:transparent url("../img/logo_gantt.gif") no-repeat;
}
.logo_chart{
	background:transparent url("../img/logo_chart.gif") no-repeat;
}
.logo_dataview{
	background:transparent url("../img/logo_dataview.gif") no-repeat;
}
.logo_form{
	background:transparent url("../img/logo_form.gif") no-repeat;
}

/* Topics */

.topics li {
    background:url("../icons/old.gif") no-repeat;
    padding-left: 25px;
    line-height:22px;
}

.samples li {
    background:url("../icons/file.gif") no-repeat;
}

ul.list {
    margin-left:40px;
}

.list li {
    list-style-image:url("../icons/bullet.gif");
}

.component-demo-placeholder {
    width:602px;
    height:252px;
    background:url("../img/grid-placeholder.gif");
}


/* FOOTER */

.footer {
    display:block;
    float:left;
    width:100%;
    height:64px;
    background: white url("../img/border-dotted-ccc.gif") repeat-x;
}

.footer-logo {
    float:left;
    width:55px;
    height:24px;
    background:url("../img/footer-logo.gif");
    margin: 20px 20px 20px 63px;
}

.copyright {
    float:left;
    margin-top:18px;
    font-size:11px;
}

/* CODE */

.source {
    width:100%;
    background:url("../img/source-bg.gif");
    border-top: dashed 3px #ccc;
    border-bottom: dotted 1px #ccc;
    margin-top:20px;
    clear:both;
}

.code {
    margin:20px 63px;
}

.teg {
    height:40px;
    color:#ccc;
    font-size:30px;
    font-family: Tahoma, Arial, Helvetica, Tahoma, serif;
    background:url("../img/source.gif") no-repeat 0 22px;
    padding: 10px 0 0 63px;
}

/*colorizer*/


.hl-default {
    color: Black;
}
.hl-code {
    color: Gray;
}
.hl-brackets {
    color: Olive;
}
.hl-comment {
    color: Orange;
}
.hl-quotes {
    color: Darkred;
}
.hl-string {
    color: Red;
}

.hl-identifier {
    color: Blue;
}

.hl-identifier a{
    	    font-family: "Courier New";
	    font-size: 11px;
	    color: Blue;
	    text-decoration: underline;
}

.hl-builtin {
    color: Teal;
}
.hl-reserved {
    color: Green;
}
.hl-inlinedoc {
    color: Blue;
}
.hl-var {
    color: Darkblue;
}
.hl-url {
    color: Blue;
}
.hl-special {
    color: Navy;
}
.hl-number {
    color: Maroon;
}
.hl-inlinetags {
    color: Blue;
}
.hl-main {
    background: transparent;
}
.hl-gutter {
    background-color: #999999;
    color: White
}
.hl-table {
    font-family: "Courier New";
    font-size: 12px;
    border: solid 1px lightgray;
}