* {
	cursor:default;
	margin:0;
	padding:0}

html,body {
	overflow-y:auto}

body {
	background:#FFF;
	font-family:Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
	font-size:13px;
	background-color:#39424b;
	background-image:url(../img/bg.png);
	background-repeat:repeat-x;
	text-align:center}

a {
	text-decoration:none;
	cursor:pointer;
	border-bottom:1px dotted #888;
	font-style:italic;
	color:#222}

ul {
	margin-left:20px;
	margin-top:10px}

li {
	list-style:circle}

.abs {
	position:absolute;
	top:auto;
	left:auto;
	right:auto;
	bottom:auto}

.align_center {
	text-align:center}

.align_right {
	text-align:right}

.float_left {
	float:left}

img {
	-ms-interpolation-mode:bicubic}

.center {
	text-align:left;
	margin-left:auto;
	margin-right:auto;
	width:910px;
	height:100%}

.top {
	height:251px;
	width:910px;
	background-image:url(../img/top.png)}

.content {
	width:910px;
	top:251px;
	bottom:0;
	background-color:#0f1417}

.section {
	width:100%;
	background-image:url(../img/inner.png)}

#main {
	margin-left:275px;
	margin-right:60px;
	text-align:justify;
	padding-bottom:60px;
	color:#222}

#buttons {
	position:absolute;
	top:30px;
	right:38px;
	color:#FFF;
	width:470px}

.button {
	line-height:30px;
	text-align:center;
	display:inline-block;
	height:30px;
	cursor:pointer}

.button:hover {
	text-shadow:#000 2px 2px 2px}

#b1 {
	width:88px}

#b2 {
	width:106px}

#b3 {
	width:72px}

#b4 {
	width:90px}

#b5 {
	width:86px}

#lang {
	color:#FFF;
	text-shadow:#17191a 2px 2px 2px;
	width:240px;
	height:30px;
	position:absolute;
	top:109px;
	right:45px;
	text-indent:6px;
	line-height:30px}

#drop {
	display:none;
	width:293px;
	height:126px;
	background-image:url(../img/drop.png);
	top:10px;
	left:-27px;
	position:absolute;
	padding-top:30px}

.dropItem {
	display:block;
	width:234px;
	text-indent:10px;
	height:30px;
	margin-left:27px}

.dropItem:hover {
	background-image:url(../img/transBlack.png);
	cursor:pointer}

#title {
	color:#222;
	font-family:Arial, Helvetica, sans-serif;
	font-size:25px;
	position:absolute;
	top:210px;
	left:270px}

i {
	font-weight:bold}

h2 {
	color:#0f67a1;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	padding-top:20px;
	padding-bottom:10px}

h3 {
	display:inline-block}

h4 {
	color:#555;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:normal;
	font-style:italic;
	display:inline-block;
	text-indent:8px}

#quicklinks {
	left:52px;
	top:-52px;
	color:#FFF;
	font-size:14px}

.side {
	height:161px;
	width:196px;
	background-image:url(../img/side.png);
	position:absolute;
	left:40px;
	top:0}

.side .bound {
	position:absolute;
	top:-24px}

.side a {
	display:block;
	margin-left:19px;
	width:110px;
	font-style:normal;
	font-family:'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
	font-size:12px;
	line-height:1.4;
	color:#0F67A1;
	text-decoration:none;
	border-bottom:1px solid #EEE;
	padding:.2em 10px}

#bottom {
	width:100%;
	height:39px;
	background-image:url(../img/bottom.png)}

.code {
	border:1px solid #aaa;
	border-radius:5px;
	display:block;
	background-color:#eee;
	padding:15px;
	overflow:hidden;
	}
	
pre{
	display:block;
}
.overflowContainer{
    width:100%;
    position:relative;
    overflow-x: scroll;
}
.whiteGradient{
    position:relative;
    width: 100%;
}
.whiteGradient:after{
    display:block;
    content:"";
    width:50px;
    height:100%;
    position:absolute;
    top:0px;
    right:0px;
    z-index:5;
    pointer-events: none;
    background: -moz-linear-gradient(left,  rgba(250,250,250,0) 0%, rgba(250,250,250,1) 93%, rgba(250,250,250,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(250,250,250,0) 0%,rgba(250,250,250,1) 93%,rgba(250,250,250,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(250,250,250,0) 0%,rgba(250,250,250,1) 93%,rgba(250,250,250,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fafafa', endColorstr='#fafafa',GradientType=1 ); /* IE6-9 */



}

.sampleOptions {
	border:1px solid #ccc;
	border-radius:2px;
	background-color:#EFEFEF;
	box-shadow:2px 2px 2px #AAA;
	padding:3px}

.sampleOptions a {
	border:none;
	text-decoration:none;
	text-indent:21px;
	background-repeat:no-repeat;
	display:inline-block;
	margin-right:7px;
	margin-left:5px;
	font-style:normal}

.sampleOptions .view {
	background-image:url(../img/zoom.png)}

.sampleOptions .get {
	background-image:url(../img/down.png)}

#dragSample1Container {
	position:relative;
	width:100%;
	height:1px}

#dragSample1 {
	width:124px;
	height:61px;
	background-image:url(../img/drag2.png);
	right:25px;
	top:-50px}

#dragSample1.spanish {
	background-image:url(../img/drag2Spanish.png)}

th {
	background-image:url(../img/th.png);
	height:30px;
	background-repeat:no-repeat;
	color:#FFF;
	text-shadow:#012b4d 2px 2px 2px;
	text-align:center}

td {
	text-indent:5px;
	color:#444;
	border-bottom:1px solid #bbb;
	border-left:1px solid #bbb}

td.left {
	border-left:1px solid #2e638e}

td.right {
	border-right:1px solid #2e638e}

td.bottom {
	border-bottom:1px solid #2e638e}

.grip {
	width:20px;
	height:30px;
	margin-top:-3px;
	background-image:url(../img/grip.png);
	margin-left:-5px;
	position:relative;
	z-index:88;
	cursor:e-resize}

.grip:hover {
	background-position-x:-20px}

.dragging .grip {
	background-position-x:-40px}

.grip2{
	width:20px;
	height:15px;
	margin-top:-3px;
	background-image:url('../img/grip2.png');
	margin-left:-5px;
	position:relative;
	z-index:88;
	cursor:e-resize;
    background-repeat: no-repeat;
}

.grip2:hover{
	background-position-x:-20px;
}

.dragging .grip2{
	background-position-x:-40px;
}
.JCLRLastGrip .grip2{
    background-position-y:-18px;
    left:-2px;
}	
	
.sampleText {
	position:relative;
	width:100%}

.dotted {
	background-image:url(../img/dotted.png);
	background-repeat:repeat-y}

label {
	color:#0361ae}

label.check {
	margin-left:6px}

	
	
	
	
#sample4{
	border:1px solid #444;
	box-shadow: 2px 2px 2px #aaa;
}
#sample4 td{
	height:33px;
	border:none;
}


/* vegetables */
#veg{
	background-color:#ACE1A0;
	border-right: 1px solid #2D6021 !important;
}
#veg:before{
	content:" ";
	display: block;
	background-image:url(../img/food.png);
	background-repeat:no-repeat;
	background-position:2px 2px;
	width:27px;
	height:40px;
}

/* bread */
#bread{
	background-color:#FFF798;
	border-right: 1px solid #827807 !important;
}
#bread:before{
	content:" ";
	display: block;
	background-image:url(../img/food.png);
	background-repeat:no-repeat;
	background-position:-25px 2px;
	width:36px;
	height:40px;
	margin-left:2px;
}


/* meat */
#meat{
	background-color: #FFAF6E;
	border-right: 1px solid #AB5D1D !important;
}
#meat:before{
	content:" ";
	display: block;
	background-image:url(../img/food.png);
	background-repeat:no-repeat;
	background-position:-61px 2px;
	width:36px;
	height:40px;
	margin-left:2px;
}

/* milk */
#milk{
	background-color: #ACCEFD;
	border-right: 1px solid #1A4C91 !important;
}
#milk:before{
	content:" ";
	display: block;
	background-image:url(../img/food.png);
	background-repeat:no-repeat;
	background-position:-97px 2px;
	width:37px;
	height:40px;
	margin-left:2px;
}

/* sweets */
#sweets{
	background-color: #E1D2F2;
}
#sweets:before{
	content:" ";
	display: block;
	background-image:url(../img/food.png);
	background-repeat:no-repeat;
	background-position:-134px 2px;
	width:30px;
	height:40px;
	margin-left:2px;
}

/* column anchors */
.foodGrip{
	width:11px;
	height:5px;
	background-image:url(../img/food.png);
	background-position: bottom right;
	cursor:e-resize;
}	
	
	
	
#sample5 {
	border:none;
	height:37px;
	position:relative;
	background-image:url(../img/rangeBar.png);
	background-position:10px 10px;
	background-repeat:no-repeat;
	
}


 #sample5 td {
	border:none}

.rangeGrip {
	width:10px;
	height:19px;
	cursor:e-resize;
	background-image:url(../img/slider.png);
	z-index:8}

.rangeDrag .rangeGrip,.rangeGrip:hover {
	background-position:right}

#sample5Text {
	color:#034a92;
	float:right}

	
	
	
	
	

#sample6{
	border:none;
	height:15px;
	background-image: url('../img/range.png');	
}

#selection{
	background-image: url('../img/range.png');
	background-position: 0px -15px;
	padding:0px;
	margin:0px;
	vertical-align:text-top;
}

#selection span{
	width:100%;
	height:15px;
	position:relative;
	display:block;
	content:"";
}

#selection span:after{
	background-image: url('../img/range.png');
	background-position: 0px -30px;
	position:absolute;
	left:0px;
	top:0px;
	display:block;
	content:"";
	height:15px;
	width:22px;
	display:block;
	content:"";
}

#selection span:before{
	background-image: url('../img/range.png');
	background-position: 0px -45px;
	position:absolute;
	right:0px;
	top:0px;
	display:block;
	content:"";
	height:15px;
	width:22px;
	display:block;
	content:"";
}


#sample6 td{
	border:none;
}

.sample6Grip{
	width:14px;
	height:21px;
	cursor:e-resize;
	background-image: url('../img/range.png');
	background-position: 0px -60px;
	position:absolute;
	left:-3px;
	top:-3px;
	z-index:8;
}


.sample6Dragging .sample6Grip, .sample6Grip:hover{
	background-position: -14px -60px;
}
#sample6Text {
	color:#034a92;
	float:right}
	
	
	
	
#postback{
	margin-bottom:8px;
	border:1px solid #666;
	background-color:#dadada;
	color:#222;
	padding:4px 10px;
	cursor:pointer;
}	
#postback:hover{
	background-color:#eee;
}
#dragit {
	float:right;
	width:185px;
	height:57px;
	background-image:url(../img/drag.png)}

#dragit.spanish {
	background-image:url(../img/dragSpanish.png)}

#dwnTitle {
	position:relative;
	height:50px;
	margin-top:15px;
	cursor:pointer}

#dwnImage {
	position:absolute;
	width:55px;
	height:57px;
	background-image:url(../img/download.png);
	cursor:pointer}

#download {
	position:absolute;
	text-decoration:underline;
	left:57px;
	cursor:pointer}

a.dwn {
	width:19px;
	height:20px;
	background-image:url(../img/dwn.png);
	outline:none;
	display:block;
	text-decoration:none;
	border:none;
	margin:3px 3px 3px 22px}

#unlockTitle {
	width:100%;
	position:absolute;
	height:36px;
	background-image:url(../img/unlock.png)}

#unlockTitle.spanish {
	background-image:url(../img/unlockSpanish.png)}

#unlockOverlay {
	display:none;
	z-index:100;
	position:fixed;
	width:100%;
	height:100%;
	background-image:url(../img/transBlack.png);
	text-align:center}

#outbox {
	border:1px solid #000;
	background-color:#444;
	height:130px;
	width:320px;
	margin-left:auto;
	margin-right:auto;
	margin-top:250px;
	box-shadow:5px 5px 10px #000;
	position:relative;
	text-align:left}

#cache {
	width:1px;
	height:1px;
	float:right;
	overflow:hidden}

#unlock-bottom {
	position:absolute;
	height:94px;
	width:100%;
	background-image:url(../img/lock-bottom.png);
	bottom:0}

#slide-to-unlock {
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	width:100%;
	height:94px;
	background-image:url(../img/slide-to-unlock.gif)}

#slide-to-unlock.spanish {
	background-image:url(../img/deslice.gif);
	background-repeat:no-repeat;
	background-position:100px 30px}

#unlock-slider-wrapper {
	padding-left:22px;
	padding-top:23px}

#unlock-slider {
	width:277px;
	height:50px;
	position:absolute}

#unlock-handle {
	position:absolute;
	z-index:10;
	height:50px;
	width:72px;
	top:0;
	left:0;
	background-image:url(../img/lock-slider.png)}

.ui-helper-hidden-accessible {
	position:absolute!important;
	clip:rect(1px,1px,1px,1px)}

.ui-helper-reset {
	border:0;
	outline:0;
	line-height:1.3;
	text-decoration:none;
	font-size:100%;
	list-style:none;
	margin:0;
	padding:0}

.ui-helper-clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden}

* html .ui-helper-clearfix {
	height:1%}

.ui-helper-zfix {
	width:100%;
	height:100%;
	top:0;
	left:0;
	position:absolute;
	opacity:0;
	filter:Alpha(Opacity=0)}

.ui-icon {
	display:block;
	text-indent:-99999px;
	width:16px;
	height:16px;
	background-image:url(../img/resizer.png);
	background-position:bottom right;
	background-repeat:no-repeat}

.ui-resizable {
	position:relative}

.ui-resizable-handle {
	position:absolute;
	font-size:.1px;
	z-index:99999;
	display:block}

.ui-resizable-n {
	cursor:n-resize;
	height:7px;
	width:100%;
	top:-5px;
	left:0}

.ui-resizable-s {
	cursor:s-resize;
	height:7px;
	width:100%;
	bottom:-5px;
	left:0}

.ui-resizable-e {
	cursor:e-resize;
	width:7px;
	right:-5px;
	top:0;
	height:100%}

.ui-resizable-w {
	cursor:w-resize;
	width:7px;
	left:-5px;
	top:0;
	height:100%}

.ui-resizable-se {
	cursor:se-resize;
	width:12px;
	height:12px;
	right:1px;
	bottom:1px}

.ui-resizable-sw {
	cursor:sw-resize;
	width:9px;
	height:9px;
	left:-5px;
	bottom:-5px}

.ui-resizable-nw {
	cursor:nw-resize;
	width:9px;
	height:9px;
	left:-5px;
	top:-5px}

.ui-resizable-ne {
	cursor:ne-resize;
	width:9px;
	height:9px;
	right:-5px;
	top:-5px}

ol.linenums {
	margin-top:0;
	margin-bottom:0}

li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {
	list-style-type:none}

li.L1,li.L3,li.L5,li.L7,li.L9 {
	background:#eee}

.float_right,#sample2Txt {
	float:right}

#lang:hover #drop,.ui-helper-clearfix {
	display:block}

.side a:hover,.pln {
	color:#000}

.sampleCode,#links,.ui-helper-hidden,.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle {
	display:none}

@media screen {
	.com {
	color:#800}

.lit {
	color:#066}

.pun,.opn,.clo {
	color:#660}

.fun {
	color:red}

.str,.atv {
	color:#080}

.kwd,.tag {
	color:#008}

.typ,.atn,.dec,.var {
	color:#606}

}

@media print,projection {
	.com {
	color:#600;
	font-style:italic}

.typ {
	color:#404;
	font-weight:bold}

.lit {
	color:#044}

.pun,.opn,.clo {
	color:#440}

.atn {
	color:#404}

.str,.atv {
	color:#060}

.kwd,.tag {
	color:#006;
	font-weight:bold}

}


/* donaciones */ 
#donations{
	left: 43px;
	top: 183px;
	position: absolute;
}
#donations form *{
	cursor:pointer;
}


#features{
	clear:both;
}
.bluebtn {
  margin-top: 20px;
  float: right;
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  padding: 7px 15px 7px 15px;
  text-decoration: none;
  font-style:normal;
}

.bluebtn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
#fiddle{
  margin-left:5px;
 }
 
 .repo, .repo img{
   outline:none !important;
   border:none;
   cursor:pointer !important;
   display:inline-block;
   margin-bottom:20px;
 }
 .git{
	margin-left:8px;
 }
.bower{
    position:absolute;
    top: 41px;
    left: 121px;
}

.crosslinks a{
    color: #0f1417;
    text-decoration: none;
    border-bottom: none;
    font-size: 9px;
}



/* Ultimo update */

@-webkit-keyframes swing {
    10% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }
    30% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}
@keyframes swing {
    10% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }
    30% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}
.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation: swing 4s infinite; 
    animation: swing 4s infinite;
    animation-delay: 1s;
}

#donatePaypal{
    width:100px;
}

#backers{
    position: absolute;
    top: 280px;
}

#lovely{
    position: absolute;
    top: 295px;
}
.donators{

    position: absolute;
    top: 392px;
    margin-left:0px;
    padding-left:0px;
}
.donators a{
    color:#bfbfbf;
    font-family:Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
    font-style:normal;
    font-weight: normal;
}
.donators li{
    margin-bottom:8px;
}