.bg { background: url('../img/bg_grad.png') repeat-x top; margin: 0 -8px;}
.canvas {width: 1000px; margin: 0 auto;}

/* header area */
.header {height: 100px; margin: -10px 0 80px;}
.header #title {display: inline; float: right; background: url('../img/logo.png') no-repeat right bottom; margin: 20px 30px 0 0; height: 65px; width: 500px;}

/* middle area */
.middle {height: 500px; margin: 30px auto}
.middle #navigation {background-color: #eee; border: 2px solid #bbb; width: 250px; margin-left: 30px; padding: 10px; float: left; -moz-border-radius: 10px; -webkit-border-radius: 10px}
.middle #main {background-color: #eee; border: 2px solid #bbb; margin-left: 30px; padding: 10px; float: left; width: 600px; font-family: "Calibri"}

/* footer */
.footer {height: 100px;}

/* tabs */
.tab_panel .tabs {background-image: url('../img/tab_grad.png'); color: #4a4a4a; font-family: sans-serif; font-size: 11pt; font-weight: bold; cursor: pointer; display: inline; float: left; padding: 10px; margin: 5px 5px -20px;}
.tab_panel .tab_active {background-image: url('../img/tab_grad_act.png') !important;}
.rem_tab {position: relative; top: -3px; left: 3px;}

/* categories */
.cat {overflow: auto; max-height: 450px; padding: 5px;}
.subcat {background-color: #E0EEFB; padding: 5px 1px; margin: -5px 7px 0 15px; display: none;}
.sub2cat {background-color: #EFF5FB; padding: 5px 1px; margin: -5px 7px 0 15px; display: none;}
.recipes {background-color: #E0EEFB; padding: 5px 1px; margin: -5px 7px 0 15px; display: none;}

/* headers */
#main h1 {font-size: 16pt; font-family: Verdana;}
#categories h2, h3, h4, h5 {display: block; font-family: sans-serif; cursor: pointer;}
#categories h2, h3, h4 {margin: 5px; background-color:#FBFE97; padding: 4px 6px; -moz-border-radius-topleft: 12px}
#categories h5 {margin: 5px; background-color:#FDFFCF; padding: 4px 6px; font-size: 10pt; font-weight: 100;}
.cat h2 {font-size: 11pt; font-weight: bold; }
.cat h3, h4 {font-size: 10pt; font-weight: bold; }
.header_active {background-color: #FEDC51 !important;}
.plus {background: url('../img/pluss.png') no-repeat; float: left; width: 20px}
.minus {background: url('../img/minus.png') no-repeat;} 

/* tables */
.ingreds {border-collapse: collapse;}
.tbl_ingreds th {background-color: #F2C64A;}
.tbl_ingreds td {background-color: #FDFFCF}
#main td, li {font-size: 12pt;}  
#main li {padding: 3px;}
#main table {border-collapse: collapse; width: 100%}
.tab_active {background-image: url('../img/tab_grad_act.png') !important;}
.drop_over {background-color: #81F781;}
table.list {width: 100%}
table.list td {padding: 5px; border: solid 1px #bbb;}
table.list img {width: 20px; cursor: pointer;}

/* dialogs and information blocks */
#login_status {position: fixed; top: 0px; right: 0px; z-index: 9; padding: 5px; font-size: 18px;}
#ajaxload {display: none; position: fixed; top: 0px; left: 0px; z-index: 10; padding: 5px;}
#info {background-color: #F42C2C; position: fixed; z-index: 12; left: 10px; top: 0px; display: none; width: 250px; padding: 7px; color:#FFFFFF; font-weight: bold; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px;}
#register_dialog {background-color: #C0CEFF; padding: 15px; position: fixed; top:0px; right: 10px; display: none; z-index: 12; width: 180px}
#recaptcha_area {position: absolute; left: -320px; top: 70px;}
#login_dialog {background-color: #C0CEFF; padding: 15px; position: fixed; top:0px; right: 10px; display: none; z-index: 12; width: 180px}
#reset_dialog {background-color: #C0CEFF; padding: 15px; position: fixed; top:0px; right: 10px; display: none; z-index: 12; width: 180px}
.dialogs {background-color: #C0CEFF; padding: 15px; position: fixed; -moz-border-radius: 11px; border: solid 1px #2E2EFE; display: none; z-index: 12; width: 200px; font-family: sans-serif; font-size: 12pt}

/* feedback dialog */
#dlg_feedback {left:-203px;position: fixed; top: 100px; width: 198px; z-index: 2;}
#feedback_form {background-color: #ddd; width: 180px; padding: 10px;-moz-border-radius-bottomright: 10px; z-index: 4; border: 2px solid #bbb}
#feedback_form input, #feedback_form textarea {width: 170px; padding: 3px;}
#feedback_caption {height:100px ;width: 10px; position: absolute; left: 203px; top: 0px; background-color: red; padding: 7px; line-height: 12px; font-size: 10pt;cursor: pointer;}
/* search dialog */
#dlg_search {left:-203px;position: fixed; top: 220px; width: 198px; height: 250px; z-index: 1; }
#search_form {background-color: #ddd; width: 180px; padding: 10px;-moz-border-radius-bottomright: 10px;  border: 2px solid #bbb}
#search_results {height: 200px; overflow: auto;}
#search_form input {width: 110px; padding: 4px;}
#search_caption {height:80px ;width: 10px; position: absolute; left: 203px; top: 0px; background-color: blue; padding: 7px; line-height: 12px; font-size: 10pt;cursor: pointer;}

/* forms, inputs and buttons */  
input {padding: 4px; font-size: 11pt}
.inpdata {background-color: #C0CEFF;}
.inpactive {background-color: #FFFFFF; outline: #F4FA58 solid 2px}

/* buttons */
.button {margin: 5px; background-color: #f5f5f5; border: 1px solid #dedede; font-family: "Lucida Grande", Verdana; font-size: 80%; text-decoration: none; font-weight: bold; color:#565656; cursor: pointer; padding:5px 10px 6px 7px; font-variant: small-caps;}
.button:hover  {background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699;}
#but_addingr  {cursor: pointer; margin: 5px;}
#but_addrecipe {cursor: pointer; margin: 5px; float: right}
#but_show_addrecipe {margin: 0 10px;}
#but_show_addcat {margin: 0 10px;}

/* */
.funcs {float: right;}
.funcs img {margin: 5px; cursor: pointer;}