.componentstitle
{
	padding: 20px;
}
.componentstitle h1
{
	text-align: center;
	text-transform: uppercase;
	font-size: 3em;
}
.componentstitle h2
{
	text-align: center;
	font-size: 1.5em;
	color: #7f8285;
}

.components
{
	padding: 0 70px;
	padding-bottom: 30px;
}
.components > div
{
	display: inline-block;
	margin-right: -5px;
	margin-bottom: 10px;
	width: 33.333%;
	vertical-align: top;
}
.components .icon
{
	display: table-cell;
	margin-right: 10px;
	max-width: 50%;
	width: 100px;
	height: 100px;
}
.components .side
{
	display: table-cell;
	vertical-align: middle;
	max-width: 70%;
	padding-left: 10px;
	text-align: left;
}
.components .side > p
{
	border-left: 1px solid #ccc;
	padding-left: 10px;
}
.components .side span.header
{
	margin: 0;
	font-size: 1.5em;
	line-height: 1.2em;
	font-weight: 500;
	color: #000;
	margin-bottom: 10px;
}
.components .side span.header:after
{
	content: '\A';
	white-space: pre;
}
.components .side h3
{
	margin: 0;
	font-size: 1.4em;
}
.components .side a
{
	color: #525252;
	transition-duration: 0.7s;
}
.components .side a:hover
{
	color: #000000;
	font-weight: 450;
}

.components .side a::after
{
	content: " - ";
}
.components .side a:last-child::after
{
	content: "";
}
@media screen and (max-width:1000px)
{
	.components, .componentstitle
	{
		padding: 0;
	}
}
@media screen and (max-width:750px)
{
	.components > div
	{
		width: 50%;
	}
}
@media screen and (max-width:500px)
{
	.components > div
	{
		width: 100%;
		text-align: center;
	}
}
.icon#diagram
{
	background-image: url("../../images/new design/diagram.png");
	background-repeat: no-repeat;
}
.icon#chart
{
	background-image: url("../../images/new design/chart.png");
	background-repeat: no-repeat;
}
.icon#spreadsheet
{
	background-image: url("../../images/new design/spreadsheet.png");
	background-repeat: no-repeat;
}
.icon#grid
{
	background-image: url("../../images/new design/grid.png");
	background-repeat: no-repeat;
}
.icon#diagrams
{
	background-image: url("../../images/new design/diagrams.png");
	background-repeat: no-repeat;
}
.icon#ui
{
	background-image: url("../../images/new design/ui.png");
	background-repeat: no-repeat;
}
.icon#keyboard
{
	background-image: url("../../images/new design/keyboard.png");
	background-repeat: no-repeat;
}
.icon#map
{
	background-image: url("../../images/new design/map.png");
	background-repeat: no-repeat;
}
.icon#report
{
	background-image: url("../../images/new design/report.png");
	background-repeat: no-repeat;
}
.icon#schedule
{
	background-image: url("../../images/new design/schedule.png");
	background-repeat: no-repeat;
}
.icon#hyperDebug
{
	background-image: url("../../images/new design/hyperDebug.png");
	background-repeat: no-repeat;
}