body {
	margin:0px; padding:0px; background-color:#999;
	font-family:verdana; color:#333;
}
#logoCanvas {
	position:relative;
	background-color:#222;
	display:block;
	min-width:300px;
	max-width:700px;
	width:100%;
	margin:0px auto;
	border-left: dashed #333 thin;
	border-right: dashed #333 thin;
}
#logo {background-color:#222;}
#getZim {
	padding:0px; margin:12px 0px; border:thin dotted #e472c4;
	padding:10px;
	width:110px;
	display:inline-block;
	color:#e472c4;
	border:thin #e472c4 solid;
	text-align:center;
	text-transform: uppercase;
	margin-top:10px;
	margin-bottom:3px;
}
#getZim:hover {
	background-color:#222;
}
#cdnBox {
	display:none;
	z-index:2; position:fixed; padding:30px 2px; font-size:14px;
	margin:0px 5%;
	border:3px solid #ccc; text-align:center; width:90%; background-color:#333; color:#333;
	-webkit-box-shadow: 6px 6px 6px rgba(0,0,0,0.17);
	-moz-box-shadow: 6px 6px 6px rgba(0,0,0,0.17);
	box-shadow: 6px 6px 6px rgba(0,0,0,0.17); overflow:hidden;
}
#cdnBox div {
	border:thin solid #333;
	background-color: #ccc; color:#333; padding:14px 10px;
	display:inline-block; margin-bottom:14px;
}
#cdnBox button {
	border:thin solid #333;
	color:#333; padding:10px;
	display:inline-block; margin:0px 14px;
	background-color:#e472c4;
	width:100px; cursor:pointer;
	font-size:14px;
}
#cdnBox button:hover {
	background-color: #acd241;
}
article {
	padding:20px;
	/*-moz-border-radius: 16px;
	border-radius: 16px;*/
	background-color:#333;
	color:#aaa;
	-webkit-box-shadow: 6px 6px 6px rgba(0,0,0,0.17);
	-moz-box-shadow: 6px 6px 6px rgba(0,0,0,0.17);
	box-shadow: 6px 6px 6px rgba(0,0,0,0.17);
	position:relative;
}
h2 {
	font-size:20px;
	font-weight:normal;
	text-transform: uppercase;
	text-align:center;
}
h2 span {
	display:inline-block;
	width:110px;
	background-color:#bbb;
	padding:6px 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	cursor:default;
}
section {
	padding:10px 0px;
	border-bottom:dashed thin #999;
	font-size:14px;
}
img {border:0px; outline:none;}
a {outline:none; text-decoration: none;}

a.arrowO {color:#f58e25; /*orange*/}
a.arrowG {color:#acd241; /*green*/}
a.arrowP {color:#e472c4; /*pink*/}
a.arrowB {color:#50c4b7; /*blue*/}
a.arrowN {color:#d1a170; /*brown*/}
a.arrowY {color:#ebcb35; /*yellow*/}

nav {display:block; height:0px; position:relative; text-align:right;}

.swap {
	width:24px; height:24px; display:inline-block; background-color:rgba(0,0,0,.2);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	cursor:pointer;
}
.swap:hover {
	background-color:#e472c4;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

.linkP {color:#e472c4;}
.linkP:hover {color:#acd241;}
.linkY {color:#ebcb35;}
.linkY:hover {color:#acd241;}
.linkG {color:#acd241;}
.linkG:hover {color:#ebcb35;}
.linkO {color:#f58e25;}
.linkO:hover {color:#acd241;}
.linkB {color:#50c4b7 !important;}
.linkB:hover {color:#e472c4 !important;}
.linkN {color:#d1a170;}
.linkN:hover {color:#50c4b7;}

.tile {
	padding:10px;
	width:30%;
	display:inline-block;
	color:#eee;
	border:thin #eee solid;
	text-align:center;
	text-transform: uppercase;
	margin-bottom:6px;
}
.tile:hover{
	background-color:#444;
	color:#ccc;
}

.barContent {
	display:none;
}
#learnTheoryBar, #learnCodeBar {
	margin:20px 0px 8px 0px;
}

.features {
	padding:10px 10px 20px 10px;
	font-size:16px;
	background-color:#222;
	-moz-border-radius: 14px;
	border-radius: 14px;
	color:#ddd;
	font-family:"Courier New", Courier, monospace;
}
.features li {
	margin-left:30px;
}
#featuresContent {
	list-style-image: url(tri/yes.png);
}
#applicationsContent {
	list-style-image: url(tri/yesP.png);
}

.fb {
	padding:10px 10px 20px 10px;
	background-color:#222;
	-moz-border-radius: 14px;
	border-radius: 14px;
	color:#ccc;
}

.subtitle {
	font-size:16px;
	text-transform:uppercase;
	padding:8px 0px;
}

.bar {
	padding:10px;
	background-color: #555;
	color:#ccc;
	text-transform:uppercase;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	cursor:pointer;
}
.bar:hover {
	background-color: #666;
}

.barArrow {
	float:right;
}

.thumbs div {
	width:90px; height:120px; text-align:center; display:inline-block; border:dotted thin #444; padding:9px; margin:6px 1px;
	font-size: 14px; background-color: #111;
}

.thumbs a {text-decoration:none; color:#ccc;}
.thumbs a:hover {color:#f58e25;}

.thumbs div img {
	margin-bottom:4px;
}

.rollon:hover {
	opacity: 1; filter: alpha(opacity=100);
}
.rollon, .learn, .bits img {
	opacity: 0.75; filter: alpha(opacity=75);
}

#dragExampleCanvas {
	position:relative;
	background-color: #50c4b7;
}

#dragExample {
	height:100px;
	margin:6px 6px 10px 0px;
}

.codeWrap {
	background-color: #222;
	border:thin #999 solid;
	padding:10px;
	padding-bottom:20px;
	margin-top:10px;
}
.scrollCover {
	position:relative;
	top:-32px;
	margin-bottom:-44px;
	background-color: #222;
	height:22px;
	opacity: 0.7; filter: alpha(opacity=70);
	pointer-events:none;
}

#part1, #part2, #part3 {
	display:block;
}

/**************************  COLUMNS *******************/

/* http://www.responsivegridsystem.com/  simplified by Dan Zen */
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px 10px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 20px 1.6%;
	width: 32.2%;
	position:relative;
	height:100%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}


/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
/*  based on 160px images in content cols */

@media only screen and (max-width: 640px) {
	.col { margin: 1% 0 20px 0%; width: 100%;}
    .hNav {display:none;}
    .vNav {display:block;}
    nav {left:-36px; top:24px;}
	#cdnBox {top:120px;}
}
@media only screen and (min-width: 641px) {
    .hNav {display:block;}
    .vNav {display:none;}
    nav {left:18px; top:24px;}
	#cdnBox {top:220px;}
}
@media only screen and (min-width: 700px) {
	#logo {height:234px;}
}


/**************************  CODE VIEW *******************/

/* desert scheme ported from vim to google prettify */
pre.prettyprint {
	margin:0px 2px 10px 2px;
	display:block;
	overflow:auto;
	border:none !important;
}

a.arrowO {color:#f58e25; /*orange*/}
a.arrowG {color:#acd241; /*green*/}
a.arrowP {color:#e472c4; /*pink*/}
a.arrowB {color:#50c4b7; /*blue*/}
a.arrowN {color:#d1a170; /*brown*/}
a.arrowY {color:#ebcb35; /*yellow*/}

pre .nocode { background-color: none; color: #000 }
pre .str { color: #e472c4 } /* string  - pink */
pre .kwd { color: #ebcb35; font-weight: bold } /* keyword yellow */
pre .com { color: #888 } /* comment - skyblue */
pre .typ { color: #acd241 } /* type    - lightgreen */
pre .lit { color: #FC9; } /* peach #cd5c5c }*/ /* literal - darkred */
pre .pun { color: #ccc }    /* punctuation */
pre .pln { color: #ccc }    /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
pre .atv { color: #ccc; }/* #ffa0a0 }*/ /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal         - lightgreen */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre.prettyprint { background-color: none }
  pre .str, code .str { color: #060 }
  pre .kwd, code .kwd { color: #006; font-weight: bold }
  pre .com, code .com { color: #600; font-style: italic }
  pre .typ, code .typ { color: #404; font-weight: bold }
  pre .lit, code .lit { color: #044 }
  pre .pun, code .pun { color: #440 }
  pre .pln, code .pln { color: #000 }
  pre .tag, code .tag { color: #006; font-weight: bold }
  pre .atn, code .atn { color: #404 }
  pre .atv, code .atv { color: #060 }
}