@charset "UTF-8";

/*
 * CALCULATOR
 */

.vehicle, .result {
	margin: 0 auto 10px auto;
	padding: 10px;
	width: 300px;
}
.vehicle { border: 1px solid #c4c5c7; }
.result { border: 2px solid #c4c5c7; }

.vehicle label, .result label {
	vertical-align: top;
}

.vehicle .amounts, .result .amounts {
	text-align: right;
}

.vehicle b.blue, .result b.blue { color: #006f87; }
.vehicle b.green, .result b.green { color: #008700; }

/*
 * MESSAGES
 */

.messages .td-a { width: 85px; }
.messages .td-b { width: 100px; }
.messages .td-c { width: 310px; }
.messages .td-d { width: 80px; }
.messages .td-bc { width: 420px; }

/*
 * RANKING
 */

/* COMMON */

div#ranking a {
	color: #7b7c7e;
}

div#ranking li.even,
div#ranking li.odd {
	margin: 2px 0;
}

div#ranking li:hover,
div#ranking li.even:hover,
div#ranking li.odd:hover {
    background-color: #d2ebef;
    cursor: pointer;
}

div#ranking li.even > *,
div#ranking li.odd > * {
    display: inline-block;
}
div#ranking li.even {
    background-color: #e2e3e4;
}
div#ranking li.odd {
    background-color: #ebecec;
}
	
div#ranking li span.rank,
div#ranking li .name,
div#ranking li div.trees,
div#ranking li div.co2 {
	font-size: 12px;
}

div#ranking li span.rank {
	padding: 0 5px;
	width: 30px;
}

div#ranking li span.name {
	width: 180px;
}

div#ranking div.trees,
div#ranking div.co2 {
    padding: 1px 10px;
    height: 18px;
    color: #fff;
}

div#ranking div.trees {
    background-color: #006f85;
}

div#ranking div.co2 {
    margin-top: 2px;
    background-color: #add4dd;
}

/* TOP */

div#ranking li.top {
	margin: 2px 0;
	padding: 4px;
}
div#ranking li.top > * {
	display: inline-block;
	vertical-align: top;
}

div#ranking li.top span.rank,
div#ranking li.top img {
	border: 1px solid #c4c5c7;
	padding: 2px;
}

div#ranking li.top span.rank {
	margin-right: 5px;
	width: auto;
	text-align: center;
	font-weight: bold;
}

div#ranking li.top img {
	margin-right: 16px;
	width: 54px;
	height: 54px;
}

div#ranking li.top div.name {
	padding: 1px 0;
}

/*
 * SPECIAL ELEMENTS
 */

#captcha {
    width: 200px;
    height: 50px;
}

#header-teaser {
	position: absolute;
	top: 125px;
	left: 825px;
	width: 150px;
	text-align: center;
	cursor: pointer;
}
#header-teaser a { color: #000; }

#header-facebook {
	position: absolute;
	/*top: 20px;
	left: 875px;*/
	top: 155px;
	left: 875px;
	width: 120px;
	height: 20px;
	overflow: hidden;
}