@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'RobotoMedium';
    src: url('Roboto-Medium-webfont.eot');
    src: url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Medium-webfont.woff') format('woff'),
         url('Roboto-Medium-webfont.ttf') format('truetype'),
         url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'RobotoCondensed';
    src: url('Roboto-Condensed-webfont.eot');
    src: url('Roboto-Condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Condensed-webfont.woff') format('woff'),
         url('Roboto-Condensed-webfont.ttf') format('truetype'),
         url('Roboto-Condensed-webfont.svg#RobotoCondensed') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'RobotoRegular';
    src: url('Roboto-Regular-webfont.eot');
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Regular-webfont.woff') format('woff'),
         url('Roboto-Regular-webfont.ttf') format('truetype'),
         url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'RobotoThin';
    src: url('Roboto-Thin-webfont.eot');
    src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Thin-webfont.woff') format('woff'),
         url('Roboto-Thin-webfont.ttf') format('truetype'),
         url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'RobotoThin';
    src: url('Roboto-Thin-webfont.eot');
    src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Thin-webfont.woff') format('woff'),
         url('Roboto-Thin-webfont.ttf') format('truetype'),
         url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'RobotoLight';
    src: url('Roboto-Light-webfont.eot');
    src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Light-webfont.woff') format('woff'),
         url('Roboto-Light-webfont.ttf') format('truetype'),
         url('Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'RobotoBold';
    src: url('Roboto-Bold-webfont.eot');
    src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Bold-webfont.woff') format('woff'),
         url('Roboto-Bold-webfont.ttf') format('truetype'),
         url('Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: normal;
    font-style: normal;

}
body {

	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #000000;
	
	background-color: #F9F9F9;
	
	margin: 0;
	
	min-width: 800px;
}
header {

	font-family: Arial, Helvetica, sans-serif;

	width: 100%;

	background-color: #333;

	font-family: 'RobotoLight', sans-serif;

	color: #FFF;
}

.headerLeft {

	padding: 20px 100px;

	width: 400px;

}
.headerRight {

	position: absolute;

	top: 15px;
	right: 10px;

}

h1 {

	padding: 0;
	margin: 0;

	font-family: 'RobotoThin', sans-serif;

	font-size: x-large;

}

h2 {

	float: left;

	padding: 0;
	margin: 10px 0;

	font-family: 'RobotoLight', sans-serif;

	color: #333;

	clear: left;

	width: 100%;

}
ul {

	padding-left: 20px;

}
.container {

	width: 100%;
	overflow: hidden;

}

.news {

	float: left;

	margin: 10px 20px 0 100px;
	
	width: 350px;


}

.newsList {

	margin: 10px 5px;

	padding: 0;

	width: 100%;
	overflow: hidden;

	list-style-type: none;

}

.newsList li {

	display: inline-block;

	width: 280px;

	margin: 10px 5px 5px 5px;

	box-shadow: 0px 0px 6px #999;

	border-radius: 5px;

	padding: 15px;

	cursor: pointer;
	background-color: #FFF;

}

.newItem {

	font-family: 'RobotoLight', sans-serif;

	font-size: medium;
	font-weight: bold;

	margin-bottom: 10px;

	color: #000;
}

.newTitle {

	font-family: 'RobotoLight', sans-serif;

	font-size: x-large;
	color: #000;
	
}

.newBody {

	font-family: 'RobotoRegular', sans-serif;

	font-size: medium;
	font-weight: normal;

	display: none;
	color: #000;
}

.newDate {

	font-family: 'RobotoLight', sans-serif;
	
	margin-top: 10px;
	color: #000;

}

.news button {

	font-family: 'RobotoLight', sans-serif;

	font-size: medium;
	font-weight: bold;

	background-color: #FFF;
	border-radius: 5px;

	padding: 10px;

	cursor: pointer;

	border: none;
	box-shadow: 0px 0px 6px #999;

	margin: 10px;

}
.news button:disabled {

	display: none;

}

/*Apps*/

.apps {

	margin-right: 20px;
	margin-top: 8px;

	width: auto;
	overflow: hidden;

}

.apps img {

	height: 210px;
	width: 330px;

	box-shadow: 0px 0px 6px #999;

	cursor: pointer;

	border-radius: 5px;
}

.appsList {

	float: left;

	margin: 5px 10px 5px 0px;
	padding: 0;

	width: 342px;
	height: 222px;

	overflow: hidden;

	list-style-type: none;

}

.appsList li {

	display: inline-block;

	padding: 6px;

}

/*Detail*/
.detailContainer {

	display: none;

	position: absolute;

	width: 100%;
	height: 100%;

	left: 0;
	top: 65px;

	background-color: rgba(0,0,0,0.8);

	cursor: pointer;

}

.detail {
	margin: 15px 100px;

	overflow: hidden;

	padding: 5px;

	cursor: default;
}


.detailHeader {
	float: left;

	border-radius: 10px;

	background-color: #FFF;	
}

.detailBody {

	font-family: 'RobotoRegular', sans-serif;

	font-size: medium;
	font-weight: normal;

	float: left;

	width: 305px;
	height: 250px;

	padding: 15px;

}

.detailImage {

	float: left;
	clear: left;
	width: 100%;

	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;

}

@media (min-width:1025px) {
	.detail {
		width: 975px;
		margin: 15px 0;
		margin-left: auto;
		margin-right: auto;
		height: 400px;
	}

	.detailImage {
		clear: none;
		width: 640px;
	}

	.detailPlatforms {
		bottom: 143px;
	}
}


.detailTitle {

	font-family: 'RobotoLight', sans-serif;

	font-size: x-large;

	margin-bottom: 15px;

}


.detailAvailable {

	font-family: 'RobotoLight', sans-serif;

	font-size: medium;
	font-weight: bold;

	margin-bottom: 10px;
	margin-left: 8px;

	color: #000;
}

.detailPlatforms {

	position: relative;

	left: 6px;

	font-family: 'RobotoLight', sans-serif;

	font-size: medium;
	font-weight: bold;

	margin: 20px 0;
	
    min-width: 120px;
	overflow: hidden;


}

.detailIcon {

	float: left;

	background-color: rgba(255,255,255,0.7);

	width: 90px;
	height: 90px;

	padding: 13px 8px;


}

.detailIcon img {

	width: 90px;
	height: 90px;

	border-radius: 10px;

}

/*Links*/

a {

	color: #000;

}

a:hover {

	color: #666;

}

a img {

	border: none;

}
header a {

	color: #FFF;

	text-decoration: none;

}

header a:hover {

	color: #CCC;

	text-decoration: none;

}
header a img {

	opacity: 1;

	text-decoration: none;

}
header a:hover img {

	opacity: 0.7;

	text-decoration: none;

}