/*
Theme Name: Gentle Bytes
Theme URI: http://gentlebytes.com
Description: Gentle Bytes theme, based on HighLight.
Author: thomas
Author URI: http://gentlebytes.com
Template: highlight_v1.2.3
*/

@import url("../highlight_v1.2.3/style.css");

/* -------------------------- */
/* @group OVERRIDEN - CONTENT */
/* -------------------------- */

/* As we're using thumbnail slider for static images (so that we don't have to use page thumbnail - it requires uploading an image to WP folders, whereas sliders can get it from anywhere), we simply hide it... */
#slider-navigation-container {
	display: none;
}

/* Have main title formatted differently on intro ids */
#intro h1 {
	text-align: center;
	font-style: italic;
	font-size: 20px;
	text-shadow: 1px 1px 0px #fff;
	margin-top: 15px;
}

/* Make footer lists a bit more compact vertically, especially useful for longer titled blog posts. */
#footer ul li a {
	line-height: 1.3em;
}

/* Have larger recent post titles and infos that spread multiple lines vertically more compact. */
.pexeto_blog_posts h6 {
	line-height: 0.9em;
}  
.pexeto_blog_posts .sidebar-post-info {
	line-height: 1.1em;
}

/* Original code is surrounded by dashed border which doesn't look nice on our techical blog. */
code {
	font-family: Menlo, Monaco, "Courier New", Courier, mono;
	font-size: 12px;
	line-height: 1em;
	border: none;
	padding-left: 0;
	padding-right: 0.3em;
}

/* Preformatted blocks use dashed border and scroll any overflow. */
pre {
	background-color: #f7f7f7;
	border: 1px dashed #d3d3d3;
	border-left: none;
	border-right: none;
	font: normal 13px;
	padding:2px 7px;
	overflow: auto;
}

/* @end */

/* ------------------------------ */
/* @group CUSTOM STYLES - GENERIC */
/* ------------------------------ */

/* Generic check image mark */
.checkmark {
	background: transparent url(../highlight_v1.2.3/images/check.png) no-repeat 0;
	width: 15px;
	height: 11px;
}

/* Small print font for not-so-important stuff, for example thanks for Startupizer icon etc. */
.smallprint {
	font-size: 13px;
	line-height: 15px;
}

/* Vertically centers an element (note that it only works on elements that support vertical alignment, such as table cells) - counterpart to aligncenter. */
.alignmiddle {
	vertical-align: middle;
}

/* Used for hiding certain parts, for example version history for not yet published items. Just a convenience style that allows us publishing new content but make it hidden from users until it's available to them. */
.hidden {
	display: none;
}

/* @end */

/* --------------------------- */
/* @group CUSTOM STYLES - MISC */
/* --------------------------- */

/* Used for info_box, tip_box and other boxes as additional formatter to make the box vertical more compact. For example for steps at a glance boxes. You can still use whatever visual style you prefer for the case, just add intro-box style to it to have it formatted! */
.intro_box {
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 0px;
	line-height: 1.4em;
}

/* @end */

/* ------------------------------ */
/* @group CUSTOM STYLES - BUTTONS */
/* ------------------------------ */

/* The large green button */
a.button-green.large {
	background: transparent url(images/buttons_green_large_a.png) no-repeat scroll top right;
	height: 70px;
}
a.button-green.large span {
	background: transparent url(images/buttons_green_large_span.png) no-repeat top left;
	font-family: Verdana, Geneva, sans-serif;
	text-transform: none;
	height: 56px;
}
a.button-green.large:hover {
	background-position: bottom right;
	cursor: pointer;
}
a.button-green.large:hover span {
	background-position: bottom left;
	cursor: pointer;
}

/* The large blue button */
a.button-blue.large {
	background: transparent url(images/buttons_blue_large_a.png) no-repeat scroll top right;
	height: 70px;
}
a.button-blue.large span {
	background: transparent url(images/buttons_blue_large_span.png) no-repeat top left;
	font-family: Verdana, Geneva, sans-serif;
	text-transform: none;
	height: 56px;
}
a.button-blue.large:hover {
	background-position: bottom right;
	cursor: pointer;
}
a.button-blue.large:hover span {
	background-position: bottom left;
	cursor: pointer;
}

/* General two line button styles */
.button-logo-container {
	float: left;
}
.button-buy-logo {
	background: transparent url(images/mac-app-store-logo.png);
	width: 65px;
	height: 67px;
	margin-top: -6px;
	margin-left: 30px;
}
.button-texts-container {
	text-align: left;
	margin-left: 20px;
	margin-right: 30px;
	float: left;
}
.button-top-line {
	font-size: 14px;
	letter-spacing: 1px;
	word-spacing: 1px;
	padding-bottom: 2px;
}
.button-bottom-line {
	font-size: 28px;
	letter-spacing: 1px;
}

/* @end */

/* ------------------------------- */
/* @group CUSTOM STYLES - PRODUCTS */
/* ------------------------------- */

/* Makes sure product feature blocks have some vertical gaps and nice larger fonts */
.product-feature-container {
	margin-top: 30px;
	margin-bottom: 10px;
}
.product-main-feature {
	min-height: 250px;
}
.product-feature-container h2 {
	font-size: 24px;
}
.product-feature-container p {
	font-size: 14px;
}

/* Feature comparison table formatting, mostly used to get same column widths for different tables */
div.feature-comparison-container {
	margin-left: 180px;
}
.feature-comparison-container .col1 {
	width: 400px;
}
.feature-comparison-container .col2,
.feature-comparison-container .col3 {
	width: 60px;
}

/* Makes product buttons vertically more spaced */
.product-get-container {
	margin-top: 50px;
}

/* This is used for vertical positioning of text when used between large buy buttons */
.product-get-container .alignmiddle {
	position: relative;
	bottom: 25px;
}

/* This is used for release dates line on version history for products. */
.product-version-container .smallprint p {
	color: #a9a9a9;
	font-size: 12px;
	padding-left: 1px;
	margin-top: -8px;
	margin-bottom: 20px;
	font-style: italic;
}


/* @end */

/* ------------------------------------ */
/* @group CUSTOM STYLES - DOCUMENTATION */
/* ------------------------------------ */

/* This makes documentation sections stand out more */
.doc-container p {
	margin-bottom: 0;
}
.doc-section {
	margin-left: 40px;
}
.doc-subsection h3 {
	font-size: 18px;
}
.doc-subsection p {
	margin-bottom: 12px;
}
ul.doc-subsection {
	list-style: none;
	margin-left: 0px;
}
ul.doc-subsection li {
	margin-bottom: 30px;
}
ul.doc-subsection li li {
	margin-bottom: 3px;
}

/* @end */