/*
Theme Name: SG4
*/

/* Import the necessary TK Bootstrap WP CSS additions */
@import url( includes/css/bootstrap-wp.css );

/* My Minimal WordPress Styling comes here */

/* This is a small security for too long strings titles */
body {
    word-wrap: break-word;
    /*background-color: #f6f6f6;*/
}

html,
body {
	height: 100%; /* Sticky footer requires html and body to have no padding or margin. */
}

b {
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', Georgia, Times, serif;
}

h1, h2, h3 {
    font-weight: 900;
}

h4, h5, h6 {
    font-weight: 400;
}

div.navbar div, .dropdown-menu li a {
    font-family: 'Lato', Georgia, Times, serif;
    font-weight: 400;
    text-transform: uppercase;
}

.dropdown-menu li a {
	font-size: 17px;
	text-align: left;
}

div.navbar div {
    font-size: 17px;
}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}

h4 {
	margin-top: 20px;
}

.sidebar h4 {
    text-transform: uppercase;
}

p, div, blockquote, div.site-info {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-weight: 300;
}

.page-title a {
	color: #333;
}

.cathode-jumbotron
{
	background-color: black;
	text-align: center;
}

.blinky-jumbotron
{
	background-color: black;
	margin-bottom: 0;
	text-align: center;
}

.blinky-button-jumbo {
	background-color: #e3e3e3;
}

.cathode-jumbotron h1 {
	color: #fff;
	font-size: 48px;
}

.cathode-jumbotron h3 {
	font-size: 24px;
	font-weight: 300;
	color: #999;
}

.blinky-jumbotron h1 {
	font-size: 48px;
	color: #fff;
}

.blinky-jumbotron h3 {
	color: #999;
	font-size: 31px;
	font-weight: 300;
}

.screenshot-jumbo {
	padding-top: 60px;
	padding-bottom: 30px;
}

.main-content p, .main-content ul {
	font-size: 20px;
}

.sidebar p, .sidebar ul {
	font-size: 17px;
}	

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

.navbar {
    margin-bottom: 0px;
}

.widget-title {
	color: #666;
}

aside ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

aside ul li {
	list-style: none;
	padding: 5px 0px 5px 0px;
	margin: 0px;
}

.sidebar-padder {
	margin-top: 40px;
}

body.home {
	background-color: rgb(55, 55, 55);
}

body.home .jumbotron {
   background-color: rgb(55, 55, 55);
   height: 100%;
   padding-bottom: 0px;
}

body.home .main-content {
   	height: 100%;
}

body.home .jumbotron .container {
   	height: 100%;
}

.center-y {
	vertical-align:middle;
}

/* Set the fixed height of the footer here */
.site-footer {
  height: 60px;
  /*background-color: #fff;*/
  background-color: #f8f8f8;
  border-top: 1px solid #E7E7E7;
}

.footer-spacer {
	margin-top: 10px;
}

.site-info {
	font-size: 16px;
	padding-top: 20px;
	color: #777;
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

.textaligncenter {
	text-align: center;
}


/* Images and wp-captions should always fit and be responsive */
img {
	display: inline-block;
	height: auto;
	max-width: 100%;
}
img[class*="wp-image-"] {
	margin-top: 10px;
	margin-bottom: 10px;
}
.wp-caption {
	border: 1px solid #ccc;
	margin-bottom: 10px;
	max-width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0 10px;
}
.wp-caption.aligncenter {
	margin-bottom: 10px;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
}
.wp-caption .wp-caption-text {
	text-align: center;
	margin-top: 10px;
}

/* WP Gallery */
.gallery {
	margin-bottom: 1.5em;
}
.gallery a img {
	border: none;
	height: auto;
	max-width: 90%;
}
.gallery dd {
	margin: 0;
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}

/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

/* Content */
.main-content-inner {
	padding-bottom: 1.5em;
}
.hentry {
	margin: 0 0 1.5em;
}

/* Clearing */
.clear {
	clear: both;
}

/* Here some needed widget styles 
 * Most widgets are adapted in the file bootstrap-wp.js - and REALLY easy to modify! ;) */
.widget { margin-bottom: 2em; }
.widget_nav_menu ul.sub-menu li, .widget_pages ul.children li { padding-left: 15px; }

/* Hiding the search widget's button in widgets. thats just too old-skool. :) but if you want it back, just delete the next line. 
 * Note: you can change the whole appearance of the search_form() function in our searchform.php */
.widget_search .search-form input[type="submit"] { display: none; }

/* Make sure select elements fit in widgets */
.widget select {
	max-width: 100%;
}

/* Nested comments? They are threaded and nested already, you just need to add your own styling to finalize!  
 * For example with some margin, like the line below ;) Delete, modify, change classes in HTML if you desire another style */
.comment .children {
	margin-left: 1.5em;
}

.question-heading {
	margin-top: 50px;
	font-weight: 300;
	border-bottom: 2px solid #666;
}

.question {
	font-size: 24px;
	font-weight: 900;
	margin-top: 50px;
	margin-bottom: 15px;
	color: #333;
	text-transform: none;
}

img.framed {
	/*margin-top: 30px;
	margin-bottom: 30px;*/
	width: 100%;
	border: 1px solid #aaa;
}

.jumbo-section {
	margin-top: 50px;
	margin-bottom: 50px;
}

.screenshot-row  img {
	margin-bottom: 30px;
}

.feature-row {
	text-align: left;
	margin-bottom: 30px;
}

.product-row h2 {
	font-weight: 900;
}

.feature-row h2 {
	text-align: center;
	font-weight: 400;
}

.product-row h3 {
	font-weight: 400;
}

.feature-row h3 {
	font-weight: 300;
	border-bottom: 1px solid #ccc;
}

.product-row, .product-row p, .product-row li {
	text-align: center;
	font-size: 20px;
}

.product-banner h2 {
	font-size: 40px;
	color: white;
}

.product-banner p {
	font-size: 28px;
	color: white;
}

.action-row, .action-row p, .action-row li {
	text-align: center;
	font-size: 20px;
}

.action-row h2 {
	font-size: 36px;
}

.action-div {
	margin-bottom: 30px;
}

.product-text {
	margin-top: 30px;
	margin-bottom: 25px;
}

.product-text h3 {
	margin-top: 0px;
	margin-bottom: 20px;
}

.product-row img.framed {
	margin-top: 30px;
	margin-bottom: 30px;
}

.product-list {
	font-size: 18px;
	list-style: none;
	padding: 0px 0px 0px 0px;
	margin: 0px;
}

.feature-text {
	font-size: 18px;
	text-align: center;
}

.product-list li {
	list-style: none;
	padding: 5px 0px 5px 0px;
	margin: 0px;
}

.store-badge {
	margin-top: 20px;
}

#pager-buttons {
	margin-top: 40px;
}

.pager li {
	font-size: 16px;
}

.action-buttons {
	text-align: center;
	max-width: 230px;
	margin: 0 auto;
	padding-bottom: 20px;
}

.btn {
	text-align: left;
}
.btn .glyphicon {
	margin-left: 22px;
	margin-right: 15px;
	font-size:  21px;
}

.btn-label {
	font-weight: 400;
	font-size:  21px;
	text-align: left;
}

.facebook-wrapper {
	height: 80px;
	margin-top: 20px;
}

.facebook-wrapper iframe {
	overflow: visible !important;
    /*width: auto !important;*/
    max-width: none;
}

#fancybox-wrap, #fancybox-wrap * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.posted-on {
	color: #888;
}

.centering-video-wrapper {
	text-align: center;
	margin-left: 0 auto;
	margin-right: 0 auto;
	margin-top: 40px;
	margin-bottom: 10px;
}

/* Center the navbar items */

@media (min-width: 768px) {
    .navbar-nav {
        float:none;
        margin: 0 auto;
        display: table;
        table-layout: fixed;
    }
}

/* Orange-Yellow
.gradient-1 {
	
	padding-top: 10px;
	padding-bottom: 10px;
	background: rgba(255,175,75,1);
	background: -moz-linear-gradient(left, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,175,75,1)), color-stop(100%, rgba(255,146,10,1)));
	background: -webkit-linear-gradient(left, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
	background: -o-linear-gradient(left, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
	background: -ms-linear-gradient(left, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
	background: linear-gradient(to right, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a', GradientType=1 );
}
*/

/* Flat Black */
.gradient-2 {
	background-color: #000;
}

/* Blue-Teal */
.gradient-9 {
	background: rgba(55,137,196,1);
	background: -moz-linear-gradient(top, rgba(55,137,196,1) 0%, rgba(105,179,179,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(55,137,196,1)), color-stop(100%, rgba(105,179,179,1)));
	background: -webkit-linear-gradient(top, rgba(55,137,196,1) 0%, rgba(105,179,179,1) 100%);
	background: -o-linear-gradient(top, rgba(55,137,196,1) 0%, rgba(105,179,179,1) 100%);
	background: -ms-linear-gradient(top, rgba(55,137,196,1) 0%, rgba(105,179,179,1) 100%);
	background: linear-gradient(to bottom, rgba(55,137,196,1) 0%, rgba(105,179,179,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3789c4', endColorstr='#69b3b3', GradientType=0 );
}

.macbookpro-wrapper {
	text-align: center;
	position: relative;
	margin-top: 50px;
	margin-bottom: 30px;
}

.macbookpro-innerwrapper {
	position: absolute;
	background-color: black;
	
	/*
	top: 6.0%;
	left: 12.3%;
	width: 76%;
	height: 78%;
	*/
	
	/* macbookpro full image is 1140x689, aspect is 1.65457 */
	/* macbookpro screen area is ???x???, aspect is ??? */
	/* video is 1024x640, aspect is 1.6 */
	
	top: 6.0%;
	left: 12.5%;
	width: 75.5%;
	height: 78%;
}

.macbookair-wrapper {
	text-align: center;
	position: relative;
	margin-top: 50px;
	margin-bottom: 30px;
}

.macbookair-innerwrapper {
	position: absolute;
	background-color: black;
	
	/*
	top: 7.0%;
	left: 12.3%;
	width: 76%;
	height: 78%;
	*/
	
	top: 7.0%;
	left: 12.3%;
	width: 75.4%;
	height: 78%;
}

.sticker-wrapper {
	text-align: left;
	position: relative;
	width: 0px;
	height: 0px;
}

.sticker {
	background: url(/images/Sticker.png);
	background-size: cover;
	width: 106px;
	height: 106px;
	position: absolute;
	top: -60px;
}

@media only screen and (min--moz-device-pixel-ratio: 2),
	   only screen and (-webkit-min-device-pixel-ratio: 2),
	   only screen and (min-device-pixel-ratio: 2)
{
	.sticker
	{
		background: url(/images/Sticker_2x.png);
		background-size: cover;
	}
}

@media (min-width: 768px)
{
	.vcenter-row-sm {
		display:table;
	}
	.vcenter-sm {
		display:table-cell;
		vertical-align:middle;
		float:none;
	}
}


@media (min-width: 992px)
{
	.vcenter-row {
		display:table;
	}
	.vcenter {
		display:table-cell;
		vertical-align:middle;
		float:none;
	}
}