body { font-family: 'Segoe UI', 'Roboto', Arial, Helvetica, sans-serif; background-color: #EDEDED; background-image: url('../_img/bodybg.png'); background-repeat: repeat-y; border-top: 0;  }
.income { color: #1DD793; }
.cleaner {       clear:both;
    height:1px;
    margin: -1px 0 0 0; padding:0;
    border:none;
    visibility: hidden; }
#ajaxresponse { display: none; }
h2 { font-size: 160%; font-weight: bold; margin-bottom: 40px;  }
#ajaxloaddiv { width: 100%; text-align: center; margin-top: 200px; margin-bottom: 200px; }

#toppanel { display: none; height: 12px; background-color: #020202; color: white; padding: 10px; padding-top: 8px; padding-left: 40px; }
#toppanel h1 { font-size: 0.7em;  }
#toppanel #logout { position: absolute; right: 30px; top: 1px;  }
#toppanel #logout a { text-decoration: none; color: #bbb; font-size: 0.7em; }
#toppanel #logout a:hover { color: #FFBF00; }

#mainpanel { width: 200px; min-height: 1100px; background-color: #1DD793; color: white; padding: 10px; padding-left: 20px; float: left;  position: absolute; top 0;}
#mainpanel #accountname {  height: 80px; float: left; margin-top: 10px; }
#mainpanel #accountname h2 { font-size: 1.4em; margin-top: 7px; color:white; padding-left: 20px; font-weight: normal; }
#mainpanel #accountname h2 #changeaccount { font-size: 0.6em; position: relative; top: -1px; color: #CBF8E7; display: none; }
#mainpanel #accountname h2:focus #changeaccount { display: inline; }
#mainpanel #accountname h2:hover #changeaccount { display: inline; }
#mainpanel #mainmenu { width: 190px; height: 30px;  margin-top: 28px; }
#mainpanel #mainmenu ul { margin-top: 20px; }
#mainpanel #mainmenu ul li { width: 190px; height: 25px; float: left; text-align: left; padding-left: 20px; padding-top: 9px; font-size: 80%; margin-bottom: 10px; }
#mainpanel #mainmenu ul a { text-decoration: none; color: white; }
#mainpanel #mainmenu ul li:hover, #mainpanel #mainmenu ul li.active  { background-color: #58DBA1; }
#mainpanel #userbox { width: 190px; height: 64px; position: absolute; top: 900px;  font-size: 90%;}
#mainpanel #userbox a {color: #C7F3DF;}
#mainpanel #userbox img { width: 48px; float: left; margin-right: 8px; border-radius: 4px; }

#maincontent {  width: auto; padding-left: 10px;  padding-top: 15px; padding-right: 20px; padding-bottom: 40px; margin-bottom: 50px; margin-right: 20px;  margin-left: 250px; }
#maincontent h3 { text-align: center; font-weight: bold; font-size:14px; color: #020202;  margin-bottom: 20px; }
#maincontent #repcont .compare_option { font-size: 80%; margin-bottom: 30px;  }

#mainselectdate {  width: 980px; margin-left: auto; margin-right: auto; text-align: right; padding-top: 5px; padding-bottom: 5px; margin-top: 0;  margin-bottom: 10px;}
#mainselectdate a { color: #111; text-decoration: none; }
#mainselectdate a:hover { color: black; text-decoration: underline; }
#mainselectdate #select_maindate { display: none;}

#mainbox { border-radius: 5px; width: 980px; padding: 20px; padding-top: 17px; height: 161px; margin-bottom: 10px; background-repeat: no-repeat; margin-left: auto; margin-right: auto; background-color: white;}
#mainbox a { color: black; text-decoration: none;  border-bottom: 1px solid #eee;  }
#mainbox #ajaxwait { text-align: center; margin-top: 67px; }
#mainbox #mainbox1 { width: 49%;height: 130px; float: left; }
#mainbox #mainbox2 { width: 45%; margin-left: 52%; height: 130px; clear: right; padding-top: 8px; font-size: 90%; }
#mainbox #mainbox1 .table_inout { margin-left: 20px; margin-top: 10px; width: 410px; border-bottom: 1px solid grey; font-size: 0.88em; }
#mainbox #mainbox1 .table_inout .td1 { padding-left: 10px; width: 30%; padding-bottom: 10px; }
#mainbox #mainbox1 .table_inout .td2 { width: auto; padding-bottom: 15px;  padding-right: 5%; text-align: right;   }
#mainbox #mainbox1 .table_inout #balance { font-size: 2em;}
#mainbox #mainbox2 #balance_sparkline { margin-top: 40px; width: 400px; height: 50px; }

#maincategories { border-radius: 5px; width: 980px; padding: 20px; margin-top: 20px;  margin-bottom: 0px; min-height: 280px;  margin-left: auto; margin-right: auto; background-color: white; }
#maincategories #ajaxwait { margin-top: 100px; margin-bottom: 20px; text-align: center; }
#maincategories .onecategory { width: 310px; min-height: 200px; float: left; margin-right: 16px;} 
#maincategories .onecategory a { color: #020202; text-decoration: none; } 
#maincategories .onecategory a:hover { text-decoration: underline; } 
#maincategories .onecategory table { width: 300px; margin-right: 10px; }
#maincategories .onecategory table td { font-size: 0.7em; padding-top: 3px; padding-bottom: 4px; border-bottom: 1px dashed #eee; }
#maincategories .onecategory table .name { padding-left: 5px; width: 100px; }
table .bardiv { border: 1px solid #eee; height: 14px; padding: 2px; }
table .bardivin {  height: 12px; background-color: #1DD793; }
table .bardivinmax { border: 1px solid #bbb; height: 12px; background-color: #bbb; background-color: #9B0234; }
table .bardivinmaxinc { border: 1px solid #bbb; height: 12px; background-color: #bbb; background-color: #0C450D; }
#maincategories #categories_horiz { width: 100%;  height: 50px; padding-top: 10px; }
#maincategories #categories_horiz .onehoriz {  height: 20px;  border-right: 1px solid white; float: left; overflow: hidden; }
#maincategories #categories_horiz #categories_horizin { width: 94%; margin-left: 2%; margin-top: 10px; height: 20px;  }
#maincategories #categories_horiz #categories_horizin a { text-decoration: none; }

#maingauges { height: 190px; border-radius: 5px; width: 980px; padding: 20px; background-color: white; margin-top: 20px; margin-bottom: 20px; font-size: 0.6em;  margin-left: auto; margin-right: auto; }
#maingauges #ajaxwait { text-align: center; margin-top: 67px; }

#maintable { border-radius: 5px; width: 980px; padding: 20px; background-color: white; margin-top: 20px; margin-bottom: 20px; font-size: 0.6em;  margin-left: auto; margin-right: auto; }
#maintable #ajaxwait { margin-top: 60px; margin-bottom: 20px; text-align: center; }
#maintable #firstrow { font-weight: bold; color: grey;}
#maintable td { width: 30px; padding-bottom: 6px; padding-top: 6px; text-align: right; }
#maintable tr:hover { background-color: #fafafa; }
#maintable #lastrow { border-top: 1px solid grey; }
#maintable .category {  width: 100px; padding-left: 5px; text-align: left; font-size: 1.2em; }
#maintable a { color: #020202; text-decoration: none; } 
#maintable a:hover { text-decoration: underline; } 

#transactions_categories { margin-top: 20px; margin-left: 20px; clear: both; height: 60px; background-color: white; }

#transactions_categories .transactions_category a { font-size: 75%; float: left; padding: 5px; margin-right: 7px;  text-decoration: none; background-color: #eee;  border-radius: 4px;  color: #111; }
#transactions_categories .transactions_category a:hover { background-color: #FFFF99; color: black; }

#transactions_mainoptions { height: 100px; }
.transactions_content { background-color: white;} 
.transactions_content h2 { margin-left: 20px; margin-top: 10px;} 
.transactions_content p { padding-left: 20px; }

#transactions_rightoptions { position: absolute; right: 200px; top: 183px; height: 30px; width: 400px;  font-size: 90%; }
#transactions_rightoptions a { color: grey; }

#transactions_inputs { margin-top: 20px; margin-left: 20px;}
#transactions_inputs_link { clear: both; margin-top: 20px; margin-left: 20px; font-weight: bold; font-size: 80%;  }
#transactions_inputs_link a { color: grey; }
#transactions_inputs_link #minifulltext { width: 200px; padding: 2px; }

#transactions_list { margin-top: 20px; margin-bottom: 50px;}
#transactions_list .transactions_list_one_item { width: auto; padding: 10px; height: 30px; padding-left: 20px;  border-bottom: 1px solid #eee; margin-top: 0px; }
#transactions_list .transactions_list_one_item a { color: #111; text-decoration: none; }
#transactions_list .transactions_list_one_item .income { color: #1DD793; }
#transactions_list .transactions_list_one_item:hover { background-color: #fafafa; }
#transactions_list .transactions_list_one_item .transactions_list_one_item_name_description { width: 60%; float: left; }
#transactions_list .transactions_list_one_item .name { font-weight: bold; color: #020202; }
#transactions_list .transactions_list_one_item .description { color: grey; font-size: 70%; }
#transactions_list .transactions_list_one_item .transactions_list_one_item_category { margin-left: 62%; width: 30%; padding-top: 5px; font-size: 90%;   }
#transactions_list .transactions_list_one_item .transactions_list_one_item_category a { display: none; color: #666; }
#transactions_list .transactions_list_one_item .transactions_list_one_item_category select { display: none; }
#transactions_list .transactions_list_one_item:hover a { display: inline; color: #666; }
#transactions_list .transactions_list_one_item .transactions_list_one_item_number { margin-left: 82%; width: 15%; margin-top: -15px; text-align: right; }

#transactions_list #too_much_results_p { margin-left: 20px; padding: 5px; margin-bottom: 20px; font-size: 80%; background-color: #FFFF99; width: 500px;}

#transactions_summary_box { margin: 50px 30px 30px 15px;  padding: 10px; border: 1px solid #bbb; border-radius: 3px; font-size: 80%; height: 20px;}
#transactions_summary_box a { color: grey; }
#transactions_summary_box .transactions_summary_box_container { width: 30%; float: left; }

#loginpage { background-color: #ededed; background-image: none;}
#loginpage #cont1 { width: 920px; height: 600px;  margin-left: auto; margin-right: auto; margin-top: 80px; background-image: url('../_img/login_bg.png'); background-repeat: no-repeat; }
#loginpage #cont2 { padding-left: 18px; padding-top: 12px; }
#loginpage #cont2 #loginheading { margin: 0; height: 130px; width: 881px; background-color: #1DD793; color: white;  }
#loginpage #cont2 #loginheading h1 { font-size: 120%; padding-top: 50px; color: white; text-align: center;  }
#loginpage #contlogin { margin-top: 100px; width: 50%; margin-left: auto; margin-right: auto;  font-size: 90%; }
#loginpage #contlogin table { width: 100%;   }
#loginpage #contlogin table td { padding-bottom: 3px; }
#loginpage #contlogin table td.td1 { width: 100px;}

#loginpage #contlogin table .inputtext { border: 1px solid grey; border-radius: 2px; padding: 4px; width: 300px;}

.reports_content { background-color: white; padding-left: 20px; padding-top: 50px; }
.reports_content h2 { font-size: 160%; font-weight: bold; margin-bottom: 40px;  }

#select_year { margin-bottom: 20px; clear: both; height: 100px; overflow: auto ; }
#select_year .one_year { width: 50px; height: 35px; border: 1px solid #ccc; border-radius: 3px;  color: #888; float: left; padding: 5px; margin: 1px; }
#select_year .one_year:hover   {border: 1px solid #666; background-color: #F4F4F4; border-radius: 4px;  color: #666;  }
#select_year .one_year_act   { width: 50px; height: 35px; border: 1px solid #888; border-radius: 3px;  color: #888; float: left; padding: 5px; margin: 1px; border: 1px solid #666; background-color: #F4F4F4;   color: #666;  }


#select_month { margin-top: -65px; margin-bottom: 20px; clear: both; height: 100px; overflow: auto ; }
#select_month .one_month { font-size: 90%; line-height: 70%; width: 30px; height: 30px; border: 1px solid #ccc; border-radius: 2px;  color: #888; float: left; padding: 5px; margin: 2px; padding-top: 10px; }
#select_month .one_month:hover   {border: 1px solid #666; background-color: #F4F4F4; border-radius: 4px;  color: #666;  }
#select_month .one_month_act  { font-size: 90%; line-height: 70%; width: 30px; height: 30px; border: 1px solid #666; border-radius: 2px;  color: #888; float: left; padding: 5px; margin: 2px; padding-top: 10px; background-color: #F4F4F4; }
 

#repcont { padding: 20px; padding-top: 10px; }
#repcont .biginput { border: 1px solid grey; color: grey; padding: 3px; font-size: 0.8em; width: 70%; }
#repcont .margintop30 { margin-top: 30px; }
#repcont .arrow_icon { width: 12px; padding-left: 4px;  }
#rep_catbymonth { width: 95%; }
#rep_catbymonth a { text-decoration: none; color: black; }
#rep_catbymonth a:hover { text-decoration: underline; }
#rep_catbymonth td { font-size: 75%; padding: 3px; width: 6.6%; }
#rep_catbymonth tr:hover { background-color: #ddd;}

#rep_catbymonth .month { text-align: center; font-weight: bold;}
#rep_catbymonth .amount { text-align: right; }
#rep_catbymonth .lastrow td { border-top: 1px solid black; }
#rep_catbymonth .lastcolumn { border-left: 1px solid black; }

#settings_categories_table { width: 80%; font-size: 90%; }
#settings_categories_table tr:hover a.categorychangelink { display: inline; }
#settings_categories_table a.categorychangelink { color: grey; text-decoration: underline; display: none; }
#settings_categories_table a { color: black; text-decoration: none; }
#settings_categories_table th { font-weight: bold; color: #333; }
#settings_categories_table td { padding: 3px; }
#settings_categories_table tr:hover { background-color: #efefef ;}
#settings_categories_table .catkeyword {  float: left; font-size: 80%; padding: 5px; border: 1px solid grey; border-radius: 3px; margin-right: 5px; }
#settings_categories_table .catkeyword a { text-decoration: none; color: black; }
#settings_categories_table .catkeyword:hover { background-color: #FFFF99; }
#settings_categories_table .catnewkeyword { margin-top: -20px; display: none;}
#settings_categories_table .catnewkeyword .inputtext { width: 100px;  }
#settings_categories_table .categorychangeformdiv { display: none; }
#settings_categories_table .categorychangeformdiv .inputtext { width: 100px; }
#settings_categories_table .inputbudgettext { width: 100px; }
#settings_categories_table .inputbudgettextinputok { display: none; }

#newcategorylinkp { font-size: 90%; margin-top: 20px;  }
#newcategorylinkp a { color: #111; }
#newcategoryform { font-size: 90%; display: none; margin-top: 20px; }
#newcategoryform .biginput { width: 200px; }

#catbox { border-radius: 5px; width: 980px; padding: 20px; padding-top: 27px; height: 490px; margin-bottom: 10px; background-repeat: no-repeat; margin-left: auto; margin-right: auto; background-color: white;}
#catbox #kwsettingslink { position: absolute; margin-top: -70px; margin-left: 750px; font-size: 80%; color: grey; }
#catbox #kwsettingslink a { color: grey; }
#catbox #no_transactions { color: silver; margin-top: 100px; text-align: center; }
#catbox2 { width: 1020px; margin-top: 20px;  margin-left: auto; margin-right: auto; }
#catbox2a { border-radius: 5px;  width: 700px; padding: 20px; background-color: white; min-height: 300px; float: left; }
#catbox2a #categoryajaxdata #ajaxwait { margin-top: 100px; margin-bottom: 20px; text-align: center; }
#catbox2b { margin-left: 760px; border-radius: 5px; width: 220px;  padding: 20px; background-color: white; min-height: 300px;  }
#catbox2b p { font-size: 90%; }
#catbox2b .piebox { width: 160px; height: 160px; margin-left: 20px; margin-top: 10px; margin-bottom: 50px; }


#repcont #menulinks { margin-top: 20px; margin-left: 0px; clear: both; height: 60px; background-color: white; }

#repcont #menulinks .menulinks_item a { font-size: 75%; float: left; padding: 5px; margin-right: 7px;  text-decoration: none; background-color: #eee;  border-radius: 4px;  color: #111; }
#repcont #menulinks .menulinks_item a:hover { background-color: #FFFF99; color: black; }

#categoryminilist { font-size: 80%; width: 96%; }
#categoryminilist .date { width: 20%; }
#categoryminilist .amount { width: 20%; text-align: right; }

body#accounts_list { background-image: none; }
#accounts_list #accounts_list_cont a { color: black; }

#accounts_list h1 { text-align: center; margin-top: 70px; margin-bottom: 70px; font-size: 2em;  }
#accounts_list #accounts_list_cont { max-width: 1200px; margin-top: 30px; margin-left: auto; margin-right: auto;  }
#accounts_list #accounts_list_cont .one_account h2 { margin-bottom: 20px; }
#accounts_list #accounts_list_cont .one_account .balance { font-size: 90%; color: grey; }
#accounts_list #accounts_list_cont .one_account { width: 350px; padding: 15px; height: 100px; margin-right: 20px; margin-bottom: 20px; background-color: white; border-radius: 8px; float: left; }
#accounts_list #accounts_list_cont .one_account:hover { background-color: #f6f6f6; }

.big_table { width: 95%; }
.big_table th { font-weight: bold;  font-size: 80%;  padding-bottom: 10px; }
.big_table td { padding-bottom: 10px;}

@media only screen and (max-width: 1100px) {
    #mainpanel { width: 90px; }
}