html, body{ height:100%; }

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    vertical-align:baseline;
}
h1{ font-size:2em; margin:0 0 50px 0; }
small{ font-size:0.9em; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display:block;
}
.clear_fit{
width:100%;
height:20px;
border:solid;
}
.clar{
	color:black;
	font-size:13px;
	font-wieght:bold;
	background:rgba(0,0,0,0.2);
	padding:5px;
	border-radius:4px;
	-moz-box-shadow: 0px -1px 2px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px -1px 2px rgba(0,0,0,0.4);
	box-shadow: 0px -1px 2px rgba(0,0,0,0.4);
	width:70%;
}
.line-separator{
height:1px;
background:#ffb300;
border-top:1px solid #ffb300;
border-radius:10px;
width:70%;
-moz-box-shadow: -1px 1px 2px #000000;
-webkit-box-shadow: -1px 1px 2px #000000;
box-shadow: -1px 1px 2px #000000;
margin-top:-2px;
margin-left:5px;
float:left;
}
.more_c{
color:black;
width:70%;
}
button{ cursor:pointer; }
p{ padding:5px 0; }

a{ text-decoration:none; }
.btn{ margin:5px; font-size:1.3em; font-weight:bold; border:2px solid rgba(0,0,0,0.2); display:inline-block; box-shadow:0 -30px 30px -15px #00329B inset, 0 1px 0 rgba(255,255,255,0.3) inset; background:#0088CC; background-repeat:repeat-x; color:#FFF; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); border-radius:7px; padding:10px 20px; -webkit-transition:0.15s; transition:0.15s; }
.btn:hover{ background:#0068BA; }
.btn:active{ box-shadow:0 0 0 0 rgba(0, 0, 0, 0.3), 0 -30px 30px -15px #00329B inset, 0 0 6px #00243F inset; }
.btn.github{ float:right; }

#wrap{ padding:50px; width:960px; background-color:#FFF; margin:20px auto; border:1px dashed #AAA; position:relative; }
.options{ position:absolute; top:-1px; right:-1px; background-color:#F1F1F1; padding:4px 0; border-left:1px dashed #AAA; border-bottom:1px dashed #AAA; }
	.options label{ cursor:pointer; margin:0 10px; }

input, textarea{ border:1px solid #D1D1D1; }
input, select{ font-size:inherit; margin:0; }
input:focus, textarea:focus{ border-color:#AAA; }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type=checkbox]{ border:none; bottom:-1px; cursor:pointer; margin:0 5px 0 0; position:relative; }
button[type=submit]{ font-size:1.1em; padding:5px 25px; }
#send{
background-color:#ffcf0f;
}
/* Tooltips helpers */
.item .tooltip{ float:left; top:2px; left:7px; position:relative; z-index:2; }
.item .tooltip:hover{ z-index:3; }
   .item .tooltip > span{ display:inline-block; width:16px; height:16px; line-height:16px; font-size:0.9em; font-weight:bold; text-align:center; color:#FFF; cursor:help; background-color:#00AEEF; position:relative; border-radius:10px; }
    .item .tooltip .content{ opacity:0; width:200px; background-color:#333; color:#FFF; font-size:0.9em; position:absolute; top:0; left:20px; padding:8px; border-radius:6px; pointer-events:none; transition:0.2s cubic-bezier(0.1, 0.1, 0.25, 2); -webkit-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); -moz-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); }
        .item .tooltip p{ padding:0; }
   .item .tooltip.down .content{ left:auto; right:0; top:30px; }
   .item .tooltip:hover .content{ opacity:1; left:36px; }
      .item .tooltip .content b{ height:0; width:0; border-color:#333 #333 transparent transparent; border-style:solid; border-width:9px 7px; position:absolute; left:-14px; top:8px; }
        .item .tooltip.down .content b{ left:auto; right:6px; top:-10px; border-width:5px; border-color:transparent #333 #333 transparent; }

/* alerts (when validation fails) */
.item .alert{ float:left; margin:0 0 0 20px; padding:3px 10px; position:relative; color:#FFF; border-radius:3px 4px 4px 3px; background-color:#CE5454; max-width:170px; white-space:pre; z-index:1; }
.item .alert::after{ content:''; display:block; height:0; width:0; border-color:transparent #CE5454 transparent transparent; border-style:solid; border-width:11px 7px; position:absolute; left:-13px; top:1px; }

@keyframes shake{
    25%{ transform:translateX(-6px); }
    75%{ transform:translateX(6px); }
}
@-webkit-keyframes shake{
    25%{ -webkit-transform:translateX(-6px); }
    75%{ -webkit-transform:translateX(6px); }
}

form fieldset{ clear:both; margin:0 0 10px 0; }
form .item{ padding:5px 0; position:relative; height:2em; }
form .item.items{ height:auto; }
	.item label{ float:left; }
		.item label span{ float:left; min-width:200px; width:auto; text-transform:capitalize; line-height:2em; }
	.item input, .item textarea{ float:left; padding:3px 4px; width:210px; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s; }
	.item input{  }
	.item input.short{ width:90px; }
	.item input:focus:not([type="checkbox"]), .item textarea:focus{ box-shadow:0 0 4px #00AEEF; border:1px solid #00AEEF; }
	.item textarea{  }
	.item select{ float:left; width:220px; padding:2px 0; margin:0; border:1px solid #CCC; text-transform:capitalize; }
		.item select option{ padding:1px; }

    .item > .extra{ float:left; font-size:0.9em; color:#999; line-height:2em; margin-left:13px; }
    
	.item.multi .input{ float:left; }
		.item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
		form .item.multi input:nth-last-child(-n+2){ margin:0; }
	.item.items input{ border-top:5px solid #E1E1E1; margin:0 0 0 160px; }
	
	.bad input[required=required], .bad input.optional, .bad select, .bad textarea{ border:1px solid #CE5454; box-shadow:0 0 4px -2px #CE5454; position:relative; left:0; -moz-animation:.3s 2 shake linear; -webkit-animation:0.3s 2 shake linear; }
    
/* mode2 - where the label's text is above the field and not next to it
--------------------------------------------------------------------------- */
.mode2 {font-size:65% !important;font-family:verdana;}
.mode2 .item{ float:left; clear:left; margin-bottom:30px; height:auto; padding:0; zoom:1; }
.mode2 .item.bad{ margin-bottom:8px; }
.mode2 .item::before, .mode2 .item::after{ content:''; display:table; }
.mode2 .item::after{ clear:both; }
	.mode2 .item label{  }
		.mode2 .item label span{ float:none; display:block; line-height:inherit; }
	.mode2 .item input, .item textarea{ width:250px; margin:0; }
	.mode2 .item textarea{ width:350px; margin:0; }
	.mode2 .item select{ width:260px; float:none; }
	.mode2 .item.multi label{ float:none; }
	.mode2 .item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
	.mode2 .item .tooltip{ left:auto; position:absolute; right:-22px; top:19px; }
	.mode2 .item .alert::after{ display:none; }
	.mode2 .item .alert{ float:none; clear:left; margin:0; padding:0 5px; border-radius:0 0 3px 3px; max-width:250px; height:22px; line-height:1.8em; }
    .mode2 .item > .extra{ position:absolute; right:0; }
    
    

/*---------- vertical tab nav */
#tabs_form{
	width:100%;
}
.show_form{
	width:65%;
	position:relative;
	float:left;
}
#nomi_nav{
	width:24%;
	position:relative;
	float:left;
	margin-top:20px;
}
#nomi_nav ul{
	display: block;
	float: left;
	margin: 0px;
	padding: 0px;
	list-style: none;
	overflow: hidden;
	width: 100%;
}
#nomi_nav li{
	margin-bottom: 1px;
	text-align: left;
	padding: 0px;
}
#nomi_nav li:last-child{
	margin-bottom: 0px;
}
#nomi_nav li a{
	display: block;
	font-size: 12pt;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	padding: 5%;
	background: #f58c2e;
}
#nomi_nav li a:hover{
	background: #fff;
	color: #000;
}
#nomi_nav li a.active{
	background: #fff;
	color: #000;
}

@import url(http://fonts.googleapis.com/css?family=Nunito:700|Carme); 
* {margin: 0; padding: 0; border: 0 none; position: relative;}
.screen_ {
    background:#fff;
    margin:40px auto;
    margin-left:-15px;
    overflow: hidden;
    position: relative;
    width: 690px;
    z-index: 5;
    border: 1px solid #CDCDCD;
    border-radius: 5px 5px 5px 5px;
    color:#000;
}
.bb_c{
	color:black !important;
}
.screen_ h1 {
    background: #F9F9F9;
    border-bottom: 1px solid #CDCDCD;
    font-family: nunito, sans serif;
    font-size: 1.2rem;
    color: #999;
    height: 48px;
    line-height: 3rem;
    margin-bottom: 5px;
    position: relative;
    text-align: center;
}
.screen_ p {
    color: #000;
}
.scrollshadow {
    font-family: monospace;
    margin-top: -0.3rem;
    max-height: 100px;
    overflow: auto;
    padding: 1rem 0;
    position: relative;
}

.screen_ ul {
    list-style-type:circle !important;
    position: static;
    margin-bottom: -1rem; /*colisi?n de estilos con codepen*/
}

.screen_ li {
    font-family: verdana, sans serif;
    font-size: 0.8rem;
    padding-left: 0.6rem;
    width:90%;
    padding-bottom:0.8rem;
}
.screen_ ul li:last-child {
    background: #fff;
    z-index: 10;
}
.screen_:before {
    border-radius: 60%/10px;
    box-shadow: 2px 0 10px 3px rgba(0, 0, 0, 0.8);
    content: "";
    height: 47px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    color:#000;
}
.screen_:after {
    border-radius: 60%/10px;
    box-shadow: -2px 0 10px 2px rgba(0, 0, 0, 0.6);
    content: "";
    height: 20px;
    left: 0;
    margin-left: 10%;
    position: absolute;
    bottom: -20px;
    width: 80%;
    color:#000;
}
.scrollshadow ul:before {
    background: #FFFFFF;
    content: "";
    display: block;
    height: 10px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0rem;
    width: 100%;
    z-index: 8;
}