/*----------------------------------------------------
Created by Hardeep Asrani
Don't remove credits and you're free to use this
Blog - hardeepasrani.blogspot.com
Download This At - css-box.blogspot.com
----------------------------------------------------*/

/*
.tileclickable:hover {
  background-color:#FF9933;
  text-decoration:none;
  color:#FFFFFF;
}
*/

.tiletitle { font-family: Geneva, Arial, Helvetica, san-serif; font-size: 16px; font-style: italic; font-weight: bold; color: #003366 }

.tileclickable {
  cursor:pointer;
  display:block;
  margin-top:5px;
  width:100%;
  height:100%;
  border-radius:5px;
  border-width:1px;
}

.tileclickable_grey {
  cursor:pointer;
  display:block;
  margin-top:5px;
  width:100%;
  height:100%;
  border-radius:5px;
  border-width:1px;
}

.tileclickable:link {
 text-decoration: none; 
  color: white; 
}

.tileclickable_grey:link {
 text-decoration: none;
 color: grey;
}

span.start {
	color:white;
	font-size:2em;

}

.credits {
	color:white;
	text-align:right;
	text-decoration:none;
	font-weight: bold;
}


.metro-surface{
	padding: 40px 0px 0px 0px;
}


.metro-tile {
	background-color: #D8512B;
	border-color: #DC6241;
	vertical-align:top;
	padding: 5px;
	color: #FFF;
	font-family: sans-serif;
	font-size: 12px;
	border-width: 3px;
	border-style: solid;
	cursor: default;
	-webkit-transition: 0.1s all;
	-moz-transition: 0.1s all;
	-ms-transition: 0.1s all;
	transition: 0.1s all;
	  border-radius:5px;
}



.metro-tile-small {
	width: 104px;
	height: 104px;
}


.metro-tile-fo {
/*	background: url(https://cssbox.googlecode.com/svn/demo/Windows8MetroTiles/img/Blogger.png);  */
	background-color: #95bcf9;
	border-color: #95bcf9;
}


.metro-tile-fopserver{
	background-color: #c4d4ed;
	border-color: #c4d4ed;
	color:grey;
}

.metro-tile-fopsaas{
	background-color: #748fbc;
	border-color: #748fbc;
}

.metro-tile-barcodes{
	background-color: #c6c07b;
	border-color: #c6c07b;
}

.metro-tile-sms{
	background-color: #edf3fc;
	border-color: #edf3fc;
	color:grey;
}

.metro-tile-ocr{
	background-color: #edf3fc;
	border-color: #edf3fc;
	color:grey;
}
.metro-tile-textprinter{
	background-color: #c6c07b;
	border-color: #c6c07b;
}

.metro-tile-chart {
	background-color: #748fbc;
	border-color: #748fbc;
}

.metro-tile-vision{
	background-color: #8e8e8b;
	border-color: #8e8e8b;
}
.metro-tile-webby{
	background-color: #c4d4ed;
	border-color: #c4d4ed;
	color:grey;
}
.metro-tile-signature{
	background-color: #8e8e8b;
	border-color: #8e8e8b;
}
.metro-tile-fax{
	background-color: #95bcf9;
	border-color: #95bcf9;
}



.metro-tile:hover {
	-webkit-transform: scale(1.10) perspective(400px) rotateY(0deg) rotateX(0deg);
	-moz-transform: scale(1.10) perspective(400px) rotateY(0deg) rotateX(0deg);
	-ms-transform: scale(1.10) perspective(400px) rotateY(0deg) rotateX(0deg);
	transform: scale(1.10) perspective(400px) rotateY(0deg) rotateX(0deg);
	border-width: 3px;
	border-style:solid; 
	z-index:10;
}