/* GENERAL STYLES */

.o-style-guide {
	background: #fafafa;

	.u-wrapper100 {
		margin-top: $base-space * 4;margin-bottom: $base-space * 4;
	}

	.gist {margin: 0 0 $base-space * 2 0;}

}

/* MENU */ 

.o-style-guide__menu {
	
	ul {background:$white;margin: 0;padding: 0;border:1px solid darken($lightgray,10%)}

	li {list-style-type: none;border-top:1px solid darken($lightgray,10%)}

	h4,li a {padding:$base-space * 0.5 $base-space;display:block}
}

/* GRIDS */


.o-style-guide__grids-guide {
	.col-row-test {
		padding: $base-space 0;

		.u-col1,.u-col2,.u-col3,.u-col4,.u-col5,.u-col6,.u-col7,.u-col8,.u-col9,.u-col10,.u-col11,.u-col12 {
			background:$darkblue;
			color: $white;
			border-bottom:1px solid $lightgray;
			border-right:1px solid $lightgray;
			text-align: center;
			padding: $base-space * 0.5 0;
		}
	}

	.grid-row-test {
		padding: $base-space 0 ;

			span {
				background:$darkblue;
				color: $white;
				text-align: center;
				margin-bottom: $base-space * 0.5;
				padding: $base-space 0;
				display: block;
			}		
	}

	.col-row-nest {
		.nest-col {
		padding: $base-space;background:darken($lightgray,10%);margin-top:$base-space;margin-bottom: $base-space
		}

		.grid-row-test {padding: 0}
	}
}


/* COLOR */

.o-style-guide {

	.color-test {padding:4rem 0;color:$white;font-weight: bold;text-align: center;}

	.black {background:$black}
	.white {background:$white}
	.orange {background:$orange}
	.darkorange {background:$darkorange} 
	.lightgray {background:darken($lightgray,5%);}
	.blue {background:$blue}
	.darkblue {background:$darkblue}
	.green {background:$green;}
	.darkgreen {background:$darkgreen}

	.primary-color-guide {padding: 8rem 0}
}


/* BOLETIA CARDS */

.o-style-guide {

	> ul {margin: 0;padding: 0}

	> ul li {list-style-type: none}	
} 




/* STYLE GUIDE ELEMENTS */



.o-style-guide__header,
.o-style-guide__subheader,
.o-style-guide__example {

	> p {font-size: 1.8rem; margin: 1.8rem 0;}
	>	p:last-child {margin-bottom: 0;}
	> ul { font-size: 1.8rem;}
}


.o-style-guide__subheader {
	margin-top: $base-space * 2;
}
.o-style-guide__subtitle {
	margin-bottom: $base-space * 0.25;
}

.o-style-guide__label {
	margin-bottom: $base-space * 0.5;
	text-transform: uppercase;
}

.o-style-guide__example {
	padding: $base-space * 2 0;
	border-bottom: 1px solid $gray;
}

.o-style-guide__result {
	background: $white;
	padding: $base-space;
	border: 1px solid darken($lightgray,5%);
	@include border-radius(3px);
}


.o-style-guide__result--big {
	height: 30rem;
}

.o-style-guide__square {
	width: 10rem;
	height: 10rem;
	background: $blue;
	position: relative;

	span {
		position: absolute;
	  top: 50%;
	  left: 50%;
	  width: 100%;
	  -webkit-transform: translate(-50%,-50%);
	  -moz-transform: translate(-50%,-50%);
	  -ms-transform: translate(-50%,-50%);
	  -o-transform: translate(-50%,-50%);
	  transform: translate(-50%,-50%);
	  display: block;
	  text-align: center;
	  color: $white;
	}
}


.o-style-guide__rectangle {
	width: 16rem;
	height: 10rem;
	background: $blue;
	position: relative;
	display: inline-block;

	span {
		position: absolute;
	  top: 50%;
	  left: 50%;
	  width: 100%;
	  -webkit-transform: translate(-50%,-50%);
	  -moz-transform: translate(-50%,-50%);
	  -ms-transform: translate(-50%,-50%);
	  -o-transform: translate(-50%,-50%);
	  transform: translate(-50%,-50%);
	  display: block;
	  text-align: center;
	  color: $white;
	}


}

.o-style-guide__rectangle--big {
	width: 20rem;
	height: 14rem;
}

.o-style-guide__icon-list {

	li {margin-bottom: $base-space * 0.5;}

}



.o-style-guide__button-result {
	padding-top: $base-space;
	padding-bottom: $base-space;
	margin-bottom: $base-space * 2;
	background: $white;
	border: 1px solid darken($lightgray,5%);
}



.o-style-guide__card-example {
	margin-top: $base-space;
}