/* INDEX/HOME PAGE */
/* -------------------------------------------------------------- */
.tool-index {
	box-sizing: border-box;
	width: 94%;
	margin: 0 auto 0 auto;
	padding: 0;
}

.tool-index:after {
	content: "";
	display: table;
	clear: both;
}

a.tool-index-item:link,
a.tool-index-item:visited,
a.tool-index-item:hover,
a.tool-index-item:active {
	display: block;
	box-sizing: border-box;
	float: left;
	padding: 0 5px;
	margin: 0 0 10px 0;
	text-decoration: none;
	background-color: #fff;
}

.tool-index-item {
	width: 100%;
	height: auto;
}

.tool-index-item-title,
.tool-index-item-description,
.tool-index-item-tags {
	background-color: #f1f1f1;
	border-left: 10px solid #555;
}

.tool-index-item-title {
	box-sizing: border-box;
	display: block;
	margin: 0;
	padding: 15px 15px 7px 15px;
	width: 100%;
	color: #777;
	font-size: 100%;
	line-height: 130%;
	font-weight: bold;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 0 10px 0 0;
}

.tool-index-item-description {
	display: block;
	margin: 0;
	padding: 0 15px 15px 15px;
	height: 50px;
	color: #777;
	font-size: 80%;
	line-height: 150%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tool-index-item-tags {
	display: block;
	margin: 0;
	padding: 5px 15px;
	height: 20px;
	color: #999;
	font-size: 70%;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 0 0 10px 0;
}

a.tool-index-item:hover .tool-index-item-title,
a.tool-index-item:active .tool-index-item-title,
a.tool-index-item:hover .tool-index-item-description,
a.tool-index-item:active .tool-index-item-description,
a.tool-index-item:hover .tool-index-item-tags,
a.tool-index-item:active .tool-index-item-tags {
	background-color: #f9f9f9;
}

.tool-index a:nth-child(5n+1) .tool-index-item-title,
.tool-index a:nth-child(5n+1) .tool-index-item-description {
	border-color: #64b5f6 ;
}

.tool-index a:nth-child(5n+2) .tool-index-item-title,
.tool-index a:nth-child(5n+2) .tool-index-item-description {
	border-color: #ef5350;
}

.tool-index a:nth-child(5n+3) .tool-index-item-title,
.tool-index a:nth-child(5n+3) .tool-index-item-description {
	border-color: #ffb300;
}

.tool-index a:nth-child(5n+4) .tool-index-item-title,
.tool-index a:nth-child(5n+4) .tool-index-item-description {
	border-color: #7cb342;
}

.tool-index a:nth-child(5n+5) .tool-index-item-title,
.tool-index a:nth-child(5n+5) .tool-index-item-description {
	border-color: #607d8b;
}

@media only screen and (min-width: 700px) {
	.tool-index-item {
		width: 50%;
	}
}

@media only screen and (min-width: 1000px) {
	.tool-index-item {
		width: 33.3333333333%;
	}
}

@media only screen and (min-width: 1500px) {
	.tool-index-item {
		width: 25%;
	}
}

@media only screen and (min-width: 2000px) {
	.tool-index-item {
		width: 20%;
	}
}

@media only screen and (min-width: 2500px) {
	.tool-index-item {
		width: 16.6666666667%;
	}
}

@media only screen and (min-width: 2800px) {
	.tool-index-item {
		width: 11.1111111111%;
	}
}

@media only screen and (min-width: 3100px) {
	.tool-index-item {
		width: 10%;
	}
}


/* SEARCH */
/* -------------------------------------------------------------- */
.search-box {
	display: flex;
	box-sizing: border-box;
	width: 92%;
	margin: 0 auto 20px auto;
	background-color: #555;
	border: 10px solid #555;
	border-radius: 5px;
}

.search-box label {
	flex-basis: 120px;
	box-sizing: border-box;
	padding: 0 10px 0 0;
	line-height: 40px;
	color: #fff;
	font-size: 100%;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
}

.search-box input[type=text] {
	flex-grow: 1;
	box-sizing: border-box;
	border: none;
	margin: 0;
}

@media only screen and (min-width: 700px) {
	.search-box {
		width: 600px;
	}
}


/* TOP NAVIGATION */
/* -------------------------------------------------------------- */
.top-navigation-box {
	text-align: center;
	margin: 0 auto 40px auto;
}

.top-navigation-box a:link,
.top-navigation-box a:visited,
.top-navigation-box a:hover,
.top-navigation-box a:active {
	display: inline-block;
	padding: 7px 10px;
	margin: 0 0;
	color: #0092ff;
	font-size: 85%;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3px;
}

.top-navigation-box a:hover,
.top-navigation-box a:active,
.top-navigation-box a:focus {
	color: #fff;
	background-color: #0092ff;
}

.top-navigation-box-separator {
	display: inline-block;
	width: 1px;
	font-size: 85%;
	background-color: #ccc;
}