body{
	border-top:1em solid #666666;
	margin: 0;
	font-family: 'Droid Sans', sans-serif, Arial, Helvetica;
	font-style: normal;
    background: #eeeeee; /* Old browsers */
	background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */
	background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */

}
.tool{
	border: 0.5em solid white;
	padding: 1em;	
	color: white;
	-moz-box-shadow: 0px 0px 15px #888;
	-webkit-box-shadow: 0px 0px 15px #888;
	box-shadow: 0px 0px 15px #888;
	margin-bottom: 1em;
}


@media (min-width: 401px) {
	.tool{
		min-height: 5em;
		max-height: 7em;
	}
	#contentwrapper{
		width: 25em;
		margin:auto;
		margin-top: 1em;
	}
}

@media (max-width: 400px) {
	.tool{
		min-height: 6em;
		max-height: 8em;
	}
	#contentwrapper{
		width: 20em;
		margin:auto;
		margin-top: 1em;
	}
}


#title{
	font-size: 2em;
	color: #ffffff;
	padding: 1em;
	text-shadow: 2px 2px 2px #666666;
}


#tool1{


	background: #a5c956; /* Old browsers */
	background: -moz-linear-gradient(top, #a5c956 0%, #cdeb8e 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5c956), color-stop(99%,#cdeb8e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #a5c956 0%,#cdeb8e 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #a5c956 0%,#cdeb8e 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #a5c956 0%,#cdeb8e 99%); /* IE10+ */
	background: linear-gradient(top, #a5c956 0%,#cdeb8e 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5c956', endColorstr='#cdeb8e',GradientType=0 ); /* IE6-9 */

}

#tool2{
	background: #ffab44; /* Old browsers */
	background: -moz-linear-gradient(top, #ffab44 0%, #ffd199 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffab44), color-stop(100%,#ffd199)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffab44 0%,#ffd199 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffab44 0%,#ffd199 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffab44 0%,#ffd199 100%); /* IE10+ */
	background: linear-gradient(top, #ffab44 0%,#ffd199 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffab44', endColorstr='#ffd199',GradientType=0 ); /* IE6-9 */

}

#tool3{
	background: #3ab9e0; /* Old browsers */
	background: -moz-linear-gradient(top, #3ab9e0 0%, #b7deed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3ab9e0), color-stop(100%,#b7deed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #3ab9e0 0%,#b7deed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #3ab9e0 0%,#b7deed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #3ab9e0 0%,#b7deed 100%); /* IE10+ */
	background: linear-gradient(top, #3ab9e0 0%,#b7deed 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ab9e0', endColorstr='#b7deed',GradientType=0 ); /* IE6-9 */
}

#tool4{
	background: #e03a3a; /* Old browsers */
	background: -moz-linear-gradient(top, #e03a3a 0%, #ff9e9e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e03a3a), color-stop(100%,#ff9e9e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e03a3a 0%,#ff9e9e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e03a3a 0%,#ff9e9e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #e03a3a 0%,#ff9e9e 100%); /* IE10+ */
	background: linear-gradient(top, #e03a3a 0%,#ff9e9e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e03a3a', endColorstr='#ff9e9e',GradientType=0 ); /* IE6-9 */
}

#tool5{
	background: #8a00ff; /* Old browsers */
	background: -moz-linear-gradient(top, #8a00ff 0%, #e7caff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a00ff), color-stop(100%,#e7caff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #8a00ff 0%,#e7caff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #8a00ff 0%,#e7caff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #8a00ff 0%,#e7caff 100%); /* IE10+ */
	background: linear-gradient(top, #8a00ff 0%,#e7caff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a00ff', endColorstr='#e7caff',GradientType=0 ); /* IE6-9 */
}

.toolname, a{
	color: white;;
	font-size: 2em;
	text-shadow: 0px 0px 12px #ccc;
}
.normal{
	font-size: 1em;
}
.offline{
	writing-mode:tb-rl;
	-webkit-transform:rotate(335deg);
	-moz-transform:rotate(335deg);
	-o-transform: rotate(335deg);
    background: none repeat scroll 0 0 red;
    bottom: 0;
    color: #EEEEEE;
    display: block;
    left: -3em;
    padding: 0.5em;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 2px #333333;
    top: -7em;
    white-space: nowrap;
    width: 12em;
}

.new{
	writing-mode:tb-rl;
	-webkit-transform:rotate(20deg);
	-moz-transform:rotate(20deg);
	-o-transform: rotate(20deg);
    background: none repeat scroll 0 0 #98D231;
    bottom: 0;
    color: #EEEEEE;
    display: block;
    left: 12em;
    padding: 0.5em;
    position: relative;
    text-align: center;
    border: 2px solid whitesmoke;
    border-radius: 10px;
    box-shadow:0px 0px 5px grey;
    top: -7em;
    white-space: nowrap;
    width: 12em;
}