/*
Theme Name: JackBrain
*/

/* =Reset
--------------------------------------------- */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
p,
blockquote,
table,
th,
td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset,
img,
abbr {
    border: 0;
}
caption,
th {
    text-align: left;
}
q:before,
q:after {
    content: '';
}
a {
    text-decoration: none;
}


/* =Globals
----------------------------------------------------- */

body {
    background: #1b1b1b url('images/bg-texture.svg');
    font: 62.5%/175% Verdana, Arial, Helvetica, Tahoma, sans-serif;
    color: #DDD;
}
a {
    color: #6dcff6;
}
#content {
    margin: 0 auto;
    overflow: hidden;
    width: 780px;
    min-height: 100px;
    font-family: 'Jura',cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2em;
}
abbr,
acronym {
    border-bottom: 1px dotted blue;
    cursor: help;
}
code,
pre {
    font-family: "Courier new", Courier, monospace;
}
#header {
    background: url('images/dgt-grad.png') bottom left repeat-x;
    border-bottom: 1px solid #242424;
    height: 100px;
    /* padding: 73px 0 10px; */
}
#blog-description {
    color: #999;
}
#innerheader {
    margin: 0 auto;
    width: 780px;
}
#header h1 {
    font-family: Helvetica, Arial, "Lucida Grande", "Lucida Sans", Verdana, sans-serif;
    font-size: 24px;
    font-weight: normal;
    margin: 1px 0;
}
#header h1 a {
    color: #fff;
}
#branding {
    margin: 0 auto -45px;
    width: 780px;
}
#header-image img {
    margin: 10px 0 3px;
}
#footer {
    background: #111;
    border-bottom: 1px solid #242424;
    clear: both;
    padding: 15px 0;
    text-align: center;
}
h2.page-title {
    border-bottom: 1px solid #333;
    margin-bottom: 15px;
    padding-bottom: 5px;
}


/* =Post content
-------------------------------------------------- */

.post,
#content .page {
    font-size: 1.3em;
    line-height: 1.7;
    margin-bottom: 25px;
}
.post,
.page {
    overflow: auto;
    width: 100%;
}
h2.entry-title {
    color: #6dcff6;
    font-family: 'Jura',cursive;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.04em;
    line-height: normal;
    margin-bottom: 10px;
    overflow: hidden;
    width: 250px;
    word-wrap: break-word;
}
.sticky {
    background: #111;
    padding: 10px 0;
}
.sticky h2.entry-title a {
    font-weight: bold;
}
.entry-content {
    float: right;
    overflow: hidden;
    width: 510px;
}
.sticky .entry-content {
    padding-right: 10px;
    width: 500px;
}
.entry-meta {
    float: left;
    font-family: "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
    font-size: 11px;
    width: 250px;
}
.sticky .entry-meta {
    padding-left: 15px;
    width: 235px;
}
.entry-meta ul {
    border-top: 1px solid #222;
    list-style: none;
}
.entry-meta li {
    border-bottom: 1px solid #222;
    line-height: normal;
    padding: 5px 2px;
}
blockquote,
.archive-meta {
    background: #111;
    border: 1px dotted #333;
    color: #999;
    margin-bottom: 1.5em;
}
blockquote p,
.quote-caption {
    font-size: 0.9em;
    padding: 1em 1em 0;
}
.quote-caption {
    font-size: 0.9em;
    font-style: italic;
    padding: 0 1em;
}
.page-link {
    font-weight: bold;
}
.entry-content p {
    margin: 0 0 1em;
}
.entry-content ul li {
    list-style: square;
}
.entry-content ul li ul {
    margin-bottom: 0.3em;
}
.entry-content ul li ul li {
    list-style: circle;
}
.entry-content ul#linkcats,
.entry-content ul#linkcats li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.entry-content ul#linkcats li ul li {
    list-style: square;
}
.entry-content img.center {
    display: block;
    margin: 0.4em auto;
}
.entry-content img.alignright {
    margin: 0.4em 0 0.4em 1.1em;
}
.entry-content img.alignleft {
    margin: 0.4em 1.1em 0.4em 0;
}
body.single .entry-meta {
    font-size: 0.9em;
}
body.single .navigation {
    padding: 0 0 3em 0;
}
.archive-meta {
    margin: 1em 0 3em 0;
}
.edit-link {
    clear: both;
}


/* =Navigation
------------------------------------------------ */

#globalnav {
    margin: -1px auto 1px auto;
    text-align: right;
    width: 780px;
}
#globalnav #menu {
    float: right;
    list-style: none;
}
#globalnav #menu li {
    float: left;
    font-family: 'Chango',cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
}
#globalnav #menu li a {
    background: #0a0a0a;
    border-bottom: 1px solid #242424;
    border-top: 1px solid #0a0a0a;
    color: #ccc;
    display: block;
    padding: 9px 15px 10px;
}
#globalnav #menu li a:hover,
#globalnav #menu li .current_page_item,
#globalnav #menu li .current-menu-item,
#globalnav #menu li .current-menu-ancestor {
    background: #111;
    border-top: 1px solid #1c1c1c;
}
#globalnav #menu li.current_page_item a {
    color: #6DCFF6;
}
#container {
    margin-top: 0;
    padding-top: 55px;
}
#globalnav li {
    position: relative;
}
#globalnav #menu ul {
    background: #111;
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
    box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
    display: none;
    float: left;
    list-style-type: none;
    margin: 0;
    position: absolute;
    top: 38px;
    right: 0;
    text-align: left;
    width: 150px;
    z-index: 99999;
}
#globalnav #menu ul li {
    margin: 0;
    min-width: 85px;
}
#globalnav #menu ul a {
    background: #111;
    margin: 0;
    width: 120px;
}
#globalnav #menu ul ul li:first-child a {
    border-top: 1px solid #242424;
}
#globalnav #menu ul a:hover {
    border-top: 1px solid #0a0a0a;
}
#globalnav #menu li:hover > ul {
    display: block;
}
#globalnav #menu ul li:hover > a {
    background: #222;
}
#globalnav #menu ul ul {
    left: -100%;
    top: 0;
}


/* =Comments
-------------------------------------------- */

.comments {
    clear: both;
}
.comments h3 {
    border-bottom: 1px solid #333;
    font-size: 14px;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
.comments ol {
    list-style: none;
}
.comments ol li,
#commentform {
    position: relative;
}
.comments ol li ul li {
    list-style: none;
}
.comments .comment-content,
.form-two {
    margin-left: 270px;
    min-height: 130px;
}
.comments .trackback-content {
    margin-left: 270px;
    min-height: 50px;
}
.comments .comment-content p {
    margin-bottom: 1.0em;
}
.comments .comment-meta,
.form-one {
    float: left;
    font-family: "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
    font-size: 10px;
    width: 250px;
}
.comments .comment-author {
    font-size: 14px;
    font-weight: bold;
}
.comments .comment-meta li {
    border-bottom: 1px solid #222;
    line-height: normal;
    padding: 5px 2px;
}


/* =Comments
--------------------------------------------------- */

form#commentform,
form#commentform p {
    padding: 0;
}
form#commentform .required {
    color: red;
}
#respond p {
    line-height: 18px;
    margin-bottom: 10px;
}
#respond input[type="text"],
#respond textarea {
    font-family: "Courier new", Courier, monospace;
    font-size: 12px;
}
#respond input[type="text"] {
    float: left;
    margin-right: 6px;
}
#respond textarea {
    height: 13em;
    margin: 0 0 0.5em 0;
    overflow: auto;
    width: 66%;
}
#respond label {
    clear: right;
    font-size: 11px;
}
#respond .comment-form-comment label,
#respond .form-allowed-tags {
    display: none;
}
.commentlist .children {
    margin-left: 3em;
}


/* =Sidebar
------------------------------------------------ */

.sidebar div,
.sidebar h3,
.sidebar h4,
.sidebar ul,
.sidebar li {
    margin: 0;
    padding: 0;
}
.sidebar li {
    list-style: none;
}
.sidebar li form {
    margin: 0.2em 0 0 0;
    padding: 0;
}
.sidebar h3 {
    font-size: 1.2em;
}
.sidebar h4 {
    font-size: 1.0em;
}
.sidebar ul ul {
    margin: 0 0 0 1.0em;
}
.sidebar ul ul ul {
    margin: 0 0 0 0.5em;
}
.sidebar ul ul li {
    list-style: disc;
    margin: 0;
}
.sidebar ul ul ul li {
    list-style: circle;
}
.sidebar ul#bookmarks {
    margin: 0 0 0.5em 0.5em;
}
.sidebar ul#bookmarks li {
    list-style: none;
}
.sidebar ul#bookmarks ul {
    margin: 0 0 .5em 1.0em;
}
.sidebar ul#bookmarks ul li {
    list-style: disc;
}
.sidebar input#s {
    width: 7em;
}
#sidebar {
    background: #111 url('images/footer-bkg.png') top center repeat-x;
    clear: both;
    margin-top: 15px;
}
#innerbar {
    background: url('images/footer-lines-bkg.png') top center repeat-x;
    margin: 0 auto;
    padding: 60px 0 0;
    width: 780px;
}
.sidebar {
    background: #1b1b1b;
    border-top: 1px solid #393939;
    float: left;
    overflow: hidden;
    padding: 10px;
    width: 365px;
}
.sidebar h3 {
    border-bottom: 1px solid #555;
    display: inline;
}
#primary {
    margin-right: 10px;
}
.sidebar ul li {
    margin-bottom: 10px;
}
.sidebar ul li ul {
    padding-top: 3px;
    padding-left: 10px;
}


/* =common elements
----------------------------------------------------- */

.alignleft,
.nav-previous,
#archives-by-category {
    float: left;
}
.alignright,
.nav-next,
#archives-by-month {
    float: right;
}
.clearer {
    clear: both;
}
body.home .nav-next,
body.home .nav-previous,
body.archive .nav-next,
body.archive .nav-previous,
#archives-by-category,
#archives-by-month {
    width: 48%;
}
body.home .nav-next,
body.archive .nav-next {
    text-align: left;
}
body.home .nav-previous,
body.archive .nav-previous {
    text-align: right;
}
.home-link {
    display: none;
}
.entry-date a {
    color: #fff;
}
.entry-date a:hover,
.entry-date a:active {
    color: #6dcff6;
}


/* =Default WP styles
------------------------------------ */

p.access {
    display: none;
}
.entry-content li {
    margin-left: 2.2em;
}
.comment-avatar {
    display: inline;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption {
    background-color: #f3f3f3;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #ddd;
    margin: 10px;
    padding-top: 4px;
    text-align: center;
    max-width: 490px;
}
.wp-caption.aligncenter {
    margin-left: auto;
    margin-right: auto;
}
.wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
}
.wp-caption p.wp-caption-text {
    color: #000;
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}
.gallery-caption,
.bypostauthor {
}
.page-link {
    clear: both;
}
.hentry img.size-auto,
.hentry img.size-full,
.hentry img.size-large,
.hentry img.size-medium,
.hentry .attachment img,
.post-format-content img {
    max-width: 100%;
    height: auto;
}
#ie8 .hentry img.size-auto,
#ie8 .hentry img.size-full,
#ie8 .hentry img.size-large,
#ie8 .hentry img.size-medium,
#ie8 .hentry .attachment img,
#ie8 .post-format-content img {
    width: auto; /* IE8 */
}


/* =Clear fixes
------------------------------------------------------------- */

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-mac */
/* code stuff */
pre.prettyprint {
    font-family: "Courier new", Courier, monospace;
    background-color:#E8E8E8;
    color: #1b1b1b;
    display: block;
    width: auto;
    overflow: auto;
    max-height: 400px;
    word-wrap: normal;
    padding: 10px;
    border-radius: 4px;
}
code {
    font-family: "Courier new", Courier, monospace;
    background-color:#E8E8E8;
    color: #1b1b1b;
    display: block;
    width: auto;
    overflow: auto;
    max-height: 400px;
    white-space: nowrap;
    padding: 10px;
    border-radius: 4px;
}

#home-container {
    margin-top: 0;
    padding-top: 55px;
    background: url('images/rubix.png') 90% 95% no-repeat;
}
#about-container {
    margin-top: 0;
    padding-top: 55px;
}
.home-content{
    overflow: hidden;
    width: 100%;
    text-align:right;
}
.about-content{
    overflow: hidden;
    width: 100%;
}
.home-quote{
    font-family: 'Courgette', times, Times New Roman, times-roman, georgia, serif;
    font-style: normal;
    font-weight: 400;
    font-size:36px;
    line-height: 38px;
    letter-spacing: -1px;
    color: #808080;
    text-transform: none;
    margin: 0;
    padding: 5px;
}
.text-shadow{
    text-shadow: 2px 2px 1px #000000;
    filter: dropshadow(color=#000000, offx=2, offy=2);
}
.home-quote-author{
    color:#A80000;
    padding: 5px;
}
#the-clock{
    width: 600px;
    height: 600px;
    margin: 0 auto;
}
#the-calendar {
    padding-top: 73px;
}
#notes-icons{
    text-align:right;
    padding-top: 15px;
}
#about-me-icon{
    height: 140px;
    width: 144px;
    margin: 0;
    float: right;
    background: url('images/aboutMe.svg') -4px top no-repeat;
}
.about-main-text{
   font-size: 1.2em;
   line-height: 1.7;
}
.contact-content{
    margin-top: 0;
    padding-top: 55px;
}
.contact-content{
    margin: 0 auto;
    width: 780px;
}
.contact-content p{
    font-family: "Jura",cursive;
    font-size: 1.5em;
    line-height: 1.7;
    font-style: normal;
    font-weight: 400;
}
.contact-content .wpcf7{
    width:540px;
    margin: 40px auto;
}
#notes-icons svg path{
    cursor: pointer;
}
/** Contact Form 7 Stuff **/
#contact{
    list-style:none;
    margin:0;
}
#contact li{
    height: 60px;
    margin:0 0 20px;
    position: relative;
    width: 540px;
}
#contact-write-icon{
    float: right;
    margin-right: -24px;
    margin-left: 12px;
}
#contact li .text{
	background: #F0EFEF;
	padding:15px 10px 10px 0;
	position:absolute;
	z-index:100;
	min-width:85px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	text-indent: 5px;
    color: #666;
}
#contact li .required{
	position:absolute;
	right:10px;
	top:10px;
	z-index:100;
        color: #666;
}
#contact li .wpcf7-form-control-wrap{
	position: absolute;
}
#contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{
	background:#fff;
	border:solid 5px #F0EFEF;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:15px 10px 25px;
	width: 509px;
	text-indent:95px;
	z-index:100;
	margin:0;
}
#contact li .wpcf7-form-control-wrap input:focus, #contact li .wpcf7-form-control-wrap textarea:focus{
	background:#F0EFEF
}
#contact li .wpcf7-form-control-wrap textarea{
	line-height: 28px;
    padding: 10px;
	height:200px;
}
#contact li#message{
	min-height:220px;
}
#contact li#submit input{
	color:#fff;
	text-decoration:none;
	margin:10px 30px 0 0;
	background:#09b2f3;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#69d2f9', endColorstr='#09b2f3');
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#69d2f9), to(#09b2f3));
	background: -moz-linear-gradient(top, #69d2f9, #09b2f3);
	border:none;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border-radius:3px;
	display:block;
	padding:10px 25px;
	text-align:center;
	text-shadow:0 1px 0 #09b2f3;
	text-transform:uppercase;
}
#contact li#submit input:hover{
	background:#69d2f9;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#09b2f3', endColorstr='#69d2f9');
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#09b2f3), to(#69d2f9));
	background: -moz-linear-gradient(top, #09b2f3, #69d2f9);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	-o-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	color:#06506c;
	text-shadow:0 1px 0 rgba(255,255,255,.25);
	text-transform:uppercase;
	cursor:pointer;
}
div.wpcf7-validation-errors {
    clear: left;
}

/** CUBE CSS **/
.cube {
	width:  100%;
	height: 100%;
}

@font-face {

	font-family: "RubikExtended";
	src:
		url( "../media/RubikExtended.ttf"  ) format( "truetype" ),
		url( "../media/RubikExtended.otf"  ) format( "otf" );
	font-weight: normal;
	font-style: normal;
}
/* This next bit is just for labeling a Cube's face. */
.faceLabel {
    display: none;
    position: absolute;
    font-size: 60px;
    text-align: center;
    font-family: "RubikExtended";
    text-shadow: 0 0 24px rgba( 0, 0, 0, 0.3 );
    color: #FFF;
}
.cube .cubelet {
    width:  1em;
    height: 1em;
    position: absolute;
    box-sizing: border-box;
}
/* Direction-facing planes of limited size that act as containers for content. */
.cube /*.cubelet >*/ .face {
    position: absolute;
    width:  1em;
    height: 1em;
    background-color: #000;
    text-align: center;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -o-backface-visibility:      hidden;
    backface-visibility:         hidden;

    padding: 0.05em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
/*
	Extroverted faces have content such as a colored sticker, text, etc.
	They are constantly visible. Meanwhile introverted faces are not
	visible when the cube is an untwisted state. Some introverted walls
	are momentarily visible as the cube twists.
*/
.cube /*.cubelet >*/ .face.faceIntroverted { background-color: #000; }
/*
	Our Cubelet faces are naturally black to match the physical Rubik's Cube.
	Adding or removing the "transparent" class here keeps the position and
	rotation integrity of the face while supporting Group.showPlastics() and
	Group.hidePlastics().
*/
.cube /*.cubelet >*/ .face.faceTransparent { background-color: transparent; }
.purty .face { opacity: 0.5; }
.purty .face.faceFront { background-color: #FFF; }
.purty .face.faceUp    { background-color: #E87000; }
.purty .face.faceRight { background-color: #3D81F6; }
.purty .face.faceDown  { background-color: #DC422F; }
.purty .face.faceLeft  { background-color: #009D54; }
.purty .face.faceBack  { background-color: #F5B400; }
/*.purty .face.faceFront { background-color: #CCC; }
.purty .face.faceUp    { background-color: #C30; }
.purty .face.faceRight { background-color: #00A; }
.purty .face.faceDown  { background-color: #C00; }
.purty .face.faceLeft  { background-color: #070; }
.purty .face.faceBack  { background-color: #CB0; }*/
/*
	WIREFRAMES
	Oddly, we cannot use borders to make our wireframes
	because this will cause a visible oscillation as CSS
	struggles to decide what gets drawn on top.
	Instead we use specially crafted box-shadows.
*/
.cube /*.cubelet > */.face > .wireframe {
	/*box-sizing: border-box;*/
	display: none;
	position: absolute;
	width:  140px;
	height: 140px;
	background-color: rgba( 255, 255, 255, 0.05 );
}
/*
	STICKERS
	About what you'd expect. The default color here
	is full on bright purple (which does not exist
	on an actual Rubik's Cube) so that one can see
	quickly if something's gone wrong with stickers.
*/
.cube .sticker {
	/*position: absolute;*/
	width:  100%;
	height: 100%;
	background-color: #F0F;
	border-radius: 0.1em;
	text-align: center;
}
.cube .sticker.red 		{ background: #DC422F;	}
.cube .sticker.white 	{ background: #F3F3F3;	}
.cube .sticker.blue 	{ background: #3D81F6; 	}
.cube .sticker.green 	{ background: #009D54;	}
.cube .sticker.orange 	{ background: #E87000; 	}
.cube .sticker.yellow 	{ background: #F5B400; 	}

.cube .sticker.stickerLogo {
	background: #F3F3F3 url( "images/jbrown.png" );
	background-size: 100% 100%;
	background-repeat: none;
}
/*
	CUBELET IDs
	Each Cubelet has a unique ID number from 0 to 26.
	We display these mostly for debugging purposes
	as the end user probably doesn't care and/or would
	find this superfluous info confusing.
*/
.cube /*.cubelet >*/ .face > .id {

	display: none;
	position: absolute;
	z-index: 1000;
	width:  90%;
	height: 90%;
	font-size:   1em;
	line-height: 0.9em;
	text-align: center;
	color: #000;

}
.cube /*.cubelet >*/ .face > .id > .underline {

	border-bottom: 1px solid #000;
}
/*
	We want ID numbers displayed on introverted faces to be white,
	but why use #FEFEFE instead of #FFF?
	So we can export as PDF, open up in Adobe Illustrator, select "Same Fill Color"
	and it will exclude our #FFF text nodes!
*/
.cube /*.cubelet > */.face.faceIntroverted > .id {

	color: #FEFEFE;
}
.cube /*.cubelet >*/ .face.faceIntroverted > .id > .underline {

	border-bottom: 1px solid #FEFEFE;
}
/*
	TEXT
	Formerly referred to as "Hero Text", this is the one-character
	display for a Cubelet face.
*/
.cube /*.cubelet >*/ .face > .text {
	display: none;
	position: absolute;
	z-index: 2000;
	width:  100%;
	height: 100%;
	text-align: center;
	color: #FFF;
	font-family: "RubikExtended", sans-serif;
	font-size:   1em;
	line-height: 1em;
	/*-webkit-backface-visibility: hidden;
  	-moz-backface-visibility:    hidden;
  	-o-backface-visibility:      hidden;
  	backface-visibility:         hidden;*/
}
.pad {

	padding: 8px;
}
.graydient {
	/* http://www.colorzilla.com/gradient-editor/ */
	background: #000; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #444 0%, #000000 90%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#444), color-stop(90%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  #444 0%,#000000 90%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  #444 0%,#000000 90%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  #444 0%,#000000 90%); /* IE10+ */
	background: radial-gradient(ellipse at center,  #444 0%,#000000 90%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.heroicRed {
	background-color: #F00;
}
#the-cube{
	width:  440px;
	height: 440px;
    margin: 40px auto;
}
.cube div div{
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
}
.cube div:active,
.cube div div:active,
.cube div div div:active,
.cube div div div div:active,
.cube div div div div span:active{
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}