/* General colors  */
body { color: #857363; 
background-color: #fff;}

/* Guess transparent is a color, too */
#login button { background-color: transparent; }
#mainmenu a img, #header-sitelogo a:visited:hover, #header-sitelogo a:hover
{
border-top-color: transparent;
}
h1 a { color: transparent ! important; }

.action h3 .savings, #action-modal-wrapper .savings 
{
background-color: transparent ! important;
}

/* Brand color, used on all ODI levels */
.block, .block-header, .sub-block-header { border-color: #0cc6de; }
.digit, #information-equal-to ul li, .form-text, .form-text-alternative, ul.pdf a, ul.images a, #main-info-makers li, #activities-join, #join,
#content-browser .action, .groups-table-header
{
border-bottom-color: #0cc6de; 
}

.block { border-top-color: #0cc6de; }

h3 { color: #0cc6de; }
#login-ok { color: #0cc6de ! important; }
/* The link variation */
.measure, .digit, a.more, a, .empty a { color: #0aafc4; } 

 /* Gray colors, used on all levels, from light to dark*/
#activities-backpack-description p , #backpack-description p
{
color: rgb(127,127,127);
}

.friends .backpack,
#addfriend .backpack, #removefriend .backpack
 { background-color: rgb(245,245,245);  }

#site-information, #site-information-wrapper
{
border-top-color: #acacac;
background-color: rgb(241,241,241);
}
#planner
{
background-color: rgb(241,241,241);
}

thead, #planner h3  { background-color: rgb(235,235,235); }

#planner h3 { border-bottom-color: rgb(233,233,233) ! important; }
.dynamicedit .form-text input, .dynamicedit .form-textarea textarea { border-color: rgb(230,230,230) ! important; }
.action .illustration img { border-color: rgb(229,229,229);}
 
#content-compare-legend-eu { border-top-color: rgb(222,222,222);}
#content-compare-legend-eu .backpack  { background-color: rgb(222,222,222); }
 
#main-friendrequest .block-content, #main-friendrequest .request,
#main-feedback-captcha {
 border-color: rgb(213,213,213); }
 
.note, .date, .legend, .measure span
#form-embed-code, #information-equal-to span,
#site-information-copyright, #main-info-makers .backpack,
.portlet h3, input, textarea, .fact, .action-impact p,
#content-browser .category .count, #action-modal-action th p,
#feed h4, #activities-join li, #join li, .leaderboard li, .position, #group-leaderboard-count, #group-leaderboard-count-footer,
.pagination, #group-leaderboard-timeframe-title { color: rgb(172,172,172);}

#main-summary, .feed-item p { color: rgb(145,145,145); }

/* White */
#login form button, #logout a { border-color: #fff; }
#login form, #planner .block-content { border-top-color: #fff ! important; }

#login .form-text, #mainmenu a:visited:hover img, #mainmenu a:hover img, #mainmenu .selected img,
#personalmenu li a { border-bottom-color: #fff ! important; }

.form-text-alternative input, .form-text input, .TB_modal,
#information-equal-to ul.inactive li a:hover, #information-equal-to ul.inactive li a:visited:hover, .jqmWindow div,
.jqmObject div, .action .illustration img, .dynamicedit .form-text input, .dynamicedit .form-textarea textarea { background-color: #fff; }

.leaderboard .savings span { color: #fff; }

button, .button, #login h3,
#TB_closeWindow,
#TB_closeWindow a, #TB_closeWindow a:hover,
#TB_closeWindow a:visited,
.jqmWindow h3, .jqmObject h3,
#content-compare-legend-you .backpack,
#content-compare-legend-friend .backpack,
#login a, #login a:visited,
#header a, .notice, 
#login button:active span, button.cancel:active span,
#logout a, #activities-savings button span, #savings button span,
button.revisit:active span,
button.compare:active span,
button.close:active span, button.takeaction:active span, button.creategroup:active span,
button.confirm:active span, button.post:active span,
button.join:active span,  button.leave:active span, button.edit:active span,
button.disabled span, button.disabled:active span, button.markdone:active span,
#action-modal-wrapper button.ok span { color: #fff ! important; }

/* Angry red and other form errors, orange/light yellow currently */
#content .form-error, #content .alert { background-color: #fff5ea; }
#content .form-error, #content .alert { border-color: #ffa02f; }


/* Light blue*/
.digit, textarea, #information-equal-to ul li a:hover, #information-equal-to ul li a:visited:hover, .form-text input, .form-text-alternative input,
#main-heading-message, #content-globalmessage, .dynamicedit-dynamic .form-text input, .dynamicedit-dynamic .form-textarea textarea
{ background-color: #e6f9fd;}

/* Lightest blue */
.confirmed, .failed { background-color: #dff0f2 ! important;}

/* Light green-yellow background */
#information-equal-to ul li a.selected, #information-equal-to ul li a.selected:hover, #information-equal-to ul li a.selected:visited:hover
{background-color: #f4fbe5; }

/* Brown */
h4, #information-equal-to ul a,
.pdf li a, .pdf li a:visited, .pdf li a:visited:hover,
.pdf li a:hover,
.images li a, .images li a:visited, .images li a:visited:hover,
.images li a:hover, #main-frontpage-see h3, #main-info h3,
input:focus, #content .form-error, .alert, #browser-menu a,
.action h3, .action h3 a, .action h3 a:visited,
.actionplanner a, .actionplanner a:visited, .action-impact-impact p,
#main-heading a, #main-heading a:visited,
#main-heading a:hover, #activities-join h3, #join h3,  #main-backpack-own-bubble h3,
.category h4 a, #group-profile  h3, .feed-post p, #main #group-members h3, #group-members h3 a,
#group-members h3 a:visited, #main .leaderboard a,#main .leaderboard a:visited, #content-group .feed-title
 { color: #857363 }
.dropdown-selected a, .dropdown-option a { color: #857363 ! important; }
 
 /* Very light brown */
 #main-info h3, #main-info h4 span{ border-bottom-color: #cec7c1 }
   
/* 1. Sky Blue 
Level color: #90d7e7
Level color light: #e9f7fa (20%)
Link color: ?????????
*/

#odi-level-1 .form-text input,
#odi-level-1 #main-removeaccount .form-text input
{
border-top-color: #90d7e7;
}

.friends .level-1 { background-color: #e9f7fa; }

#odi-level-1 #TB_window, #odi-level-1 #header
{
background-color: #90d7e7;
}

#odi-level-1 #mainmenu a, 
#odi-level-1 #mainmenu a:visited,
#odi-level-1 button:active span,
.friends .level-1, .leaderboard-small p.level-1 span { color: #90d7e7; }

#odi-level-1 button, 
#odi-level-1 .button,
#odi-level-1 textarea { border-color: #90d7e7; }

/* 2. Azure a.k.a Blue a.k.a The Brand Color 
 Level color: #0cc6de
 Level color light: #cef4f8; (20%)
 Link color: #0aafc4
 */

.form-text input,
.form-text-alternative input,
#main-removeaccount .form-text input,
#main-removeaccount .form-text-alternative input,
#content-compare-legend-friend
{
border-top-color: #0cc6de;
}
#content-compare-legend-friend
{
border-bottom-color: #0cc6de;
}

#odi-level-2  #TB_window, #content-compare-legend-friend .backpack
{
background-color: #0cc6de;
}
#header p, #header label, #login p { color: #cef4f8; }
.friends .level-2 { background-color: #cef4f8; }

	/* Links und rechts */
	a, a:visited, #planner .register a, #planner .register a:visited, #planner .register a:hover, #planner .empty a { color: #0aafc4; }
	
#content-compare-legend-you { border-top-color: #0aafc4; }
#content-compare-legend-you { border-bottom-color: #0aafc4; }
#content-compare-legend-you .backpack { background-color: #0aafc4; }

#odi-level-2 #mainmenu a, 
#odi-level-2 #mainmenu a:visited,
#odi-level-2 #login button,
#odi-level-2 button:active span,
.notice a, .notice a:visited, .notice a:hover,
.friends .level-2,
button.cancel span,
button.reject span,
button.revisit span,
button.compare span,
button.close span,
button.confirm span,
button.join span, 
button.leave span,
button.edit span,
#action-modal-wrapper button.ok:active span,
button.markdone span, .leaderboard-outside p.level-2 span, .leaderboard-small p.level-2 span { color: #0cc6de; }

.tabs .active a { color: #0cc6de ! important; }

#odi-level-2 button, 
#odi-level-2 .button,
#odi-level-2 textarea { border-color: #0cc6de; }

/* 3. Kelly Green 
Level color: #7cb600
Level color light: #e4f1cc (20%)
Link color: #699e00
*/

#odi-level-3 .form-text input,
#odi-level-3 #main-removeaccount .form-text input
{
border-top-color: #7cb600;
}

#odi-level-3 #TB_window
{
background-color: #7cb600;
}

.friends .level-3 { background-color: #e4f1cc; }

#odi-level-3 a, #odi-level-3 a:visited{ color: #699e00; }

#odi-level-3 #mainmenu a, 
#odi-level-3 #mainmenu a:visited,
#odi-level-3 #login button,
#odi-level-3 button:active span,
.friends .level-3,
#main-frontpage-measure h3,
#planner h3.planner-title, #planner h5, .action h3 .savings,
#action-modal-wrapper .savings, .leaderboard-small p.level-3 span  { color: #7cb600; }

#odi-level-3 button, 
#odi-level-3 .button,
#odi-level-3 textarea,
.action h3 .savings,
#action-modal-wrapper .savings { border-color: #7cb600; }

/* Pleasant green and other form successes, green/light lime curently */
#content .form-success { background-color: #f1f8e5; }
#content .form-success { border-color: #7ab800; }
/* Confirmed Green */
.limit, .fact span { color: #7ab800; }


/* 4. Gold Standard 
Level color: #a79e70
Level color light: #edece2 (20%)
Link color: #8c855e;
*/

#odi-level-4 .form-text input,
#odi-level-4 #main-removeaccount .form-text input
{
border-top-color: #a79e70;
}

#odi-level-4 #TB_window, #odi-level-4 #header
{
background-color: #a79e70;
}

#odi-level-4 a, #odi-level-4 a:visited { color: #8c855e; }

.friends .level-4 { background-color: #edece2; }

#odi-level-4 #mainmenu a, 
#odi-level-4 #mainmenu a:visited ,
#odi-level-4 #login button,
#odi-level-4 button:active span,
.friends .level-4, .leaderboard-small p.level-4 span{ color: #a79e70; }

#odi-level-4 button, 
#odi-level-4 .button,
#odi-level-4 textarea { border-color: #a79e70; }

/* 5. Violet 
Level color: #c48bda
Level color light: #f3e8f8 (20%)
Link color: ???????
*/

#odi-level-5 .form-text input,
#odi-level-5 #main-removeaccount .form-text input
{
border-top-color: #c48bda;
}

#odi-level-5 #TB_window, #odi-level-5 #header
{
background-color: #c48bda;
}

.friends .level-5 { background-color: #f3e8f8 }

#odi-level-5 #mainmenu a, 
#odi-level-5 #mainmenu a:visited,
#odi-level-5 #login button,
#odi-level-5 button:active span,
.friends .level-5, .leaderboard-small p.level-5 span { color: #c48bda; }

#odi-level-5 button, 
#odi-level-5 .button,
#odi-level-5 textarea { border-color: #c48bda; }

/* 6. Blueberry 
Level color: #5e9cae
Level color light:  #e7f5f8 (20%)
Link color: ????????
*/

#odi-level-6 .form-text input,
#odi-level-6 #main-removeaccount .form-text input
{
border-top-color: #5e9cae;
}
 
#odi-level-6 #TB_window, #odi-level-6 #header
{
background-color: #5e9cae;
}

.friends .level-6 { background-color: #deeaee; }

#odi-level-6 #mainmenu a, 
#odi-level-6 #mainmenu a:visited,
#odi-level-6 #login button,
#odi-level-6 button:active span,
.friends .level-6, .leaderboard-small p.level-6 span{ color: #5e9cae; }

#odi-level-6 button, 
#odi-level-6 .button,
#odi-level-6 textarea{ border-color: #5e9cae; }

/* 7. Graphite 
Level color: #8a8a8a
Level color light: #e8e8e8 (20%)
Link color:  ???
*/

#odi-level-7 .form-text input,
#odi-level-7 #main-removeaccount .form-text input
{
border-top-color: #8a8a8a;
}

#odi-level-7 #TB_window, #odi-level-7 #header
{
background-color: #8a8a8a;
}

.friends .level-7 { background-color: #e8e8e8 }

#odi-level-7 #mainmenu a, 
#odi-level-7 #mainmenu a:visited,
#odi-level-7 #login button,
#odi-level-7 button:active span, 
.friends .level-7, .leaderboard-small p.level-7 span,
.tabs .tab a { color: #8a8a8a; }

#odi-level-7 button, 
#odi-level-7 .button,
#odi-level-7 textarea { border-color: #8a8a8a; }

/*Input color: #8c855e*/
textarea:focus, input:focus { color:#8c855e; }

/* Action browser menu, level colors 10% 
1. #90d7e7 -> #f4fbfd
2. #0cc6de -> #e6f9fc
3. #7cb600 -> #f1f8e5
4. #a79e70 -> #f6f5f0
5. #c48bda -> #f9f3fb
6. #5e9cae -> #eff5f7
7. #8a8a8a -> #f3f3f3
*/

#browser-menu-housing { background-color: #f4fbfd; }

#browser-menu-energy, #content-browser .action-featured,
#main-title #main-heading { background-color: #e6f9fc; }

#browser-menu-mobility { background-color: #f1f8e5; }
#browser-menu-food { background-color: #f6f5f0; }
#browser-menu-goods { background-color: #f9f3fb; }
#browser-menu-leisure { background-color: #eff5f7; }
#browser-menu-waste { background-color: #f3f3f3; }


/* Action browser menu, level colors 30% 
1. #90d7e7 -> #ddf3f8
2. #0cc6de -> #b6eef5
3. #7cb600 -> #d7eab2
4. #a79e70 -> #e4e2d4
5. #c48bda -> #eddcf4
6. #5e9cae -> #cee1e7
7. #8a8a8a -> #dcdcdc
*/

#browser-menu-housing.selected, .action-impact-impact, .dropdown-option a:hover { background-color: #ddf3f8; }
#browser-menu-energy.selected { background-color: #b6eef5; }

#browser-menu-mobility.selected { background-color: #d7eab2; }
#content-browser #main { border-left-color: #d7eab2; }

#browser-menu-food.selected { background-color: #e4e2d4; }
#browser-menu-goods.selected { background-color: #eddcf4; }
#browser-menu-leisure.selected { background-color: #cee1e7; }
#browser-menu-waste.selected { background-color: #dcdcdc; }

/* 50% 
2. #0cc6de -> #85e2ee
*/

#content-browser #sidebar button.disabled-inverted span, button.disabled-inverted:active span { color: #85e2ee ! important; }


/* Test */
button.heavy, .button.heavy { background: #0cc6de; color: #ffffff; }
.dotline, .sub-dotline, a.more, ul.big li { background-image: url('blue/ui-pics.gif'); }
.highlite .dotline, .highlite .sub-dotline { background-image: url('images/ui-pics-highlite.gif'); }