/******************
    - General -
******************/
html body {
	width:100%; 
	height:100%; 
	padding:0px; 
	margin:0px; 
	overflow:hidden; 
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 
	font-size:14px; 
	color:#666; 
	background-color:#000000;
}

.screenshot, 
.screenshot body {
	overflow:visible;
}

iframe {
	border:0;	
}

iframe[name="google_conversion_frame"] {
	display:none;	
}

/*********************
    - Header bar -
*********************/
#header-bar {
	clear:both;
	height:80px;
	border-bottom:1px solid #3f3f3f;
	background-color:#232323;
	z-index:100;
	vertical-align:middle;
}

#header-bar * {
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
			box-sizing:border-box;
}

#header-bar *:focus {
	outline:0;
}

#header-bar a {
	-webkit-transition:all .3s;
	   -moz-transition:all .3s;
			transition:all .3s;
}

#header-bar a:hover {
	text-decoration:none !important; 
	color:#fff !important;
}

/* Logo */
#header-bar a.preview-logo {
	position:relative; 
	display:inline-block;
	width:206px;
	height:100%;
	margin:0 0 0 15px;
	vertical-align:middle;
}

#header-bar a.preview-logo > img {
	margin:23px 0;
}

/* Title */
#header-bar .title-container {
	display:inline-block;
	height:55px;
	margin-left:13px;
	padding:11px 0px 0px 24px; 
	background:url(https://images.codegrape.com/bg/split.png) no-repeat top left;
	vertical-align:middle;
}

#header-bar .title-container h1 {
	margin:0 0 3px 0; 
	padding:0; 
	font-weight:bold;
	font-size:20px;
	line-height:20px;
}

#header-bar .title-container h1 a {
	text-decoration:none; 
	color:#63ac0c;
}

#header-bar .title-container h2 {
	margin:0; 
	padding:0; 
	font-weight:normal;
	font-size:14px;
	line-height:14px;
}

#header-bar .title-container h2 span {
	font-weight:normal;
}

#header-bar .title-container h2 a {
	text-decoration:none; 
	color:#999;
}

/* Meta data */
#header-bar div.meta-data {
	padding:23px 15px;
	float:right;
}

.screenshot #header-bar div.meta-data {
	padding-right:15px;
}

#header-bar div.meta-data a {
	margin-left:15px; 
	text-decoration:none; 
	color:#b0b0b0; 
	float:right;
}

#header-bar div.meta-data a.close {
	border-left:1px solid #3f3f3f;
	padding-left:15px;
	line-height:34px;
}

#header-bar div.meta-data a.close > i {
	display:inline-block;
	margin-right:5px;
	color:#fff;
}

/* Buy now button */
a.buttons {
	color:#fff !important;
	cursor:pointer;
	display:inline-block;
	font:13px/18px "Helvetica Neue", Helvetica, Arial, Sans-Serif;
	font-weight:bold;
	border:none;	
	margin:0;
	padding:8px 15px;
	text-align:center;
	background-color:#7cb63a;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;	
			box-sizing:border-box;
	-webkit-border-radius:3px;
	   -moz-border-radius:3px;
			border-radius:3px;
	-webkit-box-shadow:0px -1px 0px rgba(0,0,0,.08) inset;
	   -moz-box-shadow:0px -1px 0px rgba(0,0,0,.08) inset;
			box-shadow:0px -1px 0px rgba(0,0,0,.08) inset;
	-webkit-transition:all .3s;
	   -moz-transition:all .3s;
			transition:all .3s;
}

a.buttons:hover {
	background-color:#528c00;
	text-decoration:none;
}

a.buttons:active {
	cursor:default;
	background-color:#72a736;
}

/* Button icon */
.btn-icon > i {
	font-size:14px;
	line-height:14px;
	margin-right:4px;
}

/************************
    - Preview frame -
************************/
#preview-frame {
	width:100%; 
	background-color:#fff;
}

/*********************
    - Screenshot -
*********************/
.thumbnails {
	clear:both;
	margin-top:20px;
	padding:0 15px;
}

.thumbnails img {
	transition:all 0.3s linear;
	cursor:pointer;
	margin-right:10px;
	border:1px solid #333;
	max-width:100%;
	opacity:0.8;
}

.thumbnails img:hover, 
.thumbnails img.active {
	border:1px solid #666;
	opacity:1;
}

.fullsize {
	clear:both;
	margin:20px 0;
	padding:0 15px;
}

.fullsize img {
	border:1px solid #333;
	max-width:100%;
}

.description {
	clear:both;
	margin-top:20px;
	padding:0 15px;
	color:#fff;
	font-size:24px;
	line-height:24px;
	font-weight:normal;
}

/****************************
    - Responsive styles -
****************************/
@media (max-width:1100px) {		/* 748px */
	#header-bar .title-container,
	#header-bar div.meta-data a.close > span,
	.btn-icon > i {
		display:none;
	}
}

@media (max-width:479px) {
	#header-bar a.preview-logo {
		width:180px;	
	}
	
	#header-bar a.preview-logo > img {
		width:180px;
		height:30px;
		margin:25px 0;
	}
	
	#header-bar div.meta-data a.close {
		border:0;
		padding:0;
	}
}