@import "lib/jeet/index";
@import "lib/rupture/index";
@import "_preboot";

.cce .cce-section {
	margin-bottom: 1.6em
	overflow: auto
}

/* ===================================================================
/*	Content related
/* =================================================================== */

/* Accordion toggles */

.cce .cce-toggle { 
	&-title {
		display: block;
		border: 1px solid #dddddd;
		padding: 12px 15px;
		outline: 0;
		cursor: pointer;
		&:before {
			color: #ccc;
			margin-right: 12px;
			iconize("\f0fe");
		}
		&.ui-state-active {
			&:before {
				content: "\f146";
			}
		}
	}
	&-content {
		padding: 20px;
		border: 1px solid #dddddd;
		border-top: none;
		background: #fcfcfc;
	}
}


/* Buttons */

.cce .cce-button {
	
	// base
	color: #ffffff;
	background: #333333;
	border: none;
	display: inline-block;
	margin-left: 3px;
	margin-right: 3px;
	transition: all 0.2s linear;
	font-size: 14px;
	&:hover, &:focus {
		color: #ffffff;
		outline: none;
	}
	
	// sizes
	&--small {
		padding: 5px 10px;
		font-size: 80%;
		line-height: 1.5;
	}
	&--medium {
		padding: 8px 15px;
		line-height: 1.5;
	}
	&--large {
		padding: 12px 20px;
		font-size: 120%;
		line-height: 1.5;
	}
	
	// shapes
	&--rounded {
		border-radius: 3px;
	}
	&--oval {
		border-radius: 99px;
	}
	
	// colors
	for $color, $colorhex in button_map {
		&--{$color} { 
			background: $colorhex;
			if ( 'white' == $color ) {
				color: #333333
			}
			&:hover, &:focus {
				background: darken($colorhex, 15%)
				if ( 'white' == $color ) {
					background: darken($colorhex, 5%)
					color: #333333
				}
			}
		}
	}
	
	// icon
	&--icon-before {
		.fa {
			margin-right: 8px;
		}
	}
	&--icon-after {
		.fa {
			margin-left: 8px;
		}
	}
	
	
	// alignment
	&--left{
		float: left;
		margin-left: 0;
	}
	&--right{
		float: right;
		margin-right: 0;
	}
}


/* Icon box */
.cce .cce-iconbox {
	float: left;
	
	// position
	&--top {
		text-align: center;
		h5 {
			margin-top: 2rem!important;
			margin-bottom: 1.4rem;
		}
	}
	&--left {
		.fa {
			vertical-align: top;
			display: table-cell;
			margin-right: 1.5rem;
			float: left;
		}
		.cce-iconbox--content {
			vertical-align: top;
			display: table-cell;
			width: 10000px;
		}
		h5 {
			margin-top: 0;
			margin-bottom: 1.4rem;
		}
	}	
}


/* Notifications */

.cce .cce-notification {
	padding: 15px 20px;
	position: relative; 
	border-radius: 3px;
	
	// type
	for $color, $colorhex in notification_map {
		&--{$color} { 
			background: $colorhex['bg'];
			color: $colorhex['c']
		}
	}
	
	// icon
	.fa {
		margin-right: 0.5rem;
	}
	
	// dismissible
	&--dismiss-yes {
		.dismiss-notification {
			background: none;
		    border: none;
		    font-size: 23px;
		    position: absolute;
		    right: 5px;
		    width: 36px;
		    height: 36px;
		    top: 7px;
		    padding: 0px;
		    color: #000000;
		    opacity: 0.2;
		    transition: opacity 0.2s linear;
		    outline: none;
		    &:hover {
			    opacity: 0.5;
		    }
		}
	}
}


/* Tabbed content */

.cce .cce-tabs {
	.cce-nav {
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
		z-index: 10;
		li {
			margin: 0 2px 0 0;
			border: 1px solid #dddddd;
			a {
				padding: 10px 15px;
				display: block;
				text-decoration: none;
				box-shadow: none;
				outline: none;
			}
			
			&.ui-state-active {
				background: #f7f7f7;
			}
		}
	}
	.cce-tab {
		background: #f7f7f7;
		position: relative;
		padding: 20px;
		border: 1px solid #dddddd;
		z-index: 0;
		
	}
	
	&--top {
		.cce-nav {
			li {
				float: left;
				border-bottom: none;
			}
		}
		.cce-tab {
			display: block;
			float: left;
			top: -1px;
		}	
	}
	
	&--left {
		.cce-nav {
			float: left;
			li {
				margin: 0 0 2px 0;
				border-right: none;
			}
		}
		.cce-tab {
			display: table-cell;
			left: -1px;
		}
		.cce-tab[aria-hidden="false"] {
			display: table-cell!important;
		}
	}
	
}

/* Testimonial / quote content */

.cce .cce-testimonial {
	
	blockquote {
		margin-top: 1em
		margin-bottom: 0
	}
}


/* ===================================================================
/*	Layout columns
/* =================================================================== */

@media (min-width: 710px) {
	.cce-one-half {
		width: 48%;
	}

	.cce-one-third {
		width: 30.66%;
	}

	.cce-two-third {
		width: 65.33%;
	}

	.cce-one-fourth {
		width: 22%;
	}

	.cce-three-fourth {
		width: 74%;
	}

	.cce-one-half,
	.cce-one-third,
	.cce-two-third,
	.cce-three-fourth,
	.cce-one-fourth {
		position: relative;
		margin-right: 4%;
		float: left;
	}

	.cce-column-last {
		margin-right: 0 !important;
		clear: right;
	}
}


/* ===================================================================
/*	Typography related
/* =================================================================== */

/* Dropcap */

.cce .cce-dropcap {
	display: block;
	float: left;
	margin-right: 30px;
	margin-bottom: 30px;
	text-align: center;
	line-height: 1;
	&--square {
		border-radius: 3px
	}
	&--round {
		border-radius: 50%
	}
}


/* Labels */

.cce .cce-label {
	margin-bottom: inherit;
	padding: 2px 4px 1px;
	color: #fff;
	
	// colors
	for $color, $colorhex in button_map {
		&--{$color} { 
			background: $colorhex;
			&:hover {
				background: darken($colorhex, 15%);
			}
		}
	}
	
	// shape
	&--rounded {
		border-radius: 3px;
	}
	&--oval {
		border-radius: 99px;
	}
}


/* ===================================================================
/*	Misc. Elements
/* =================================================================== */

/* Image shortcode */

.cce .cce-image {
	display: inline-block;

	&--left {
		float: left;
		margin: 0 1.5em 1em 0;
	}

	&--center {
		display: block;
		margin: 1.5em 0;
		text-align: center;
	}

	&--right {
		float: right;
		margin: 0 0 1.5em 1.5em;
	}

	&--grayscale { filter: grayscale(100%) }
	&--sepia { filter: sepia(100%) }
 	&--blur { filter: blur(4px) }
 	&--hue-rotate { filter: hue-rotate(50deg) }
 	&--contrast { filter: contrast(15%) }
 	&--brightness { filter: brightness(2) }
 	&--invert { filter: invert(100%) }
}

/* Video shortcode */
.cce .cce-video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;

	iframe,
	object,
	embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/* Horizontal divider */

.cce .cce-divider {
	background: none;
	margin-top: 30px; 
	margin-bottom: 30px; 
	width:100%; 
	clear:both;
	
	// length
	&--short { 
		width:40%; 
		position: relative; 
		left: 30%;
	}
	
	// type
	&--single {
		border-bottom: 1px solid #cccccc;
		height: 1px;
	}
	&--single-dashed {
		border-bottom: 1px dashed #cccccc;
		height: 1px;
	}
	&--single-dotted {
		border-bottom: 1px dotted #cccccc;
		height: 1px;
	}
	&--double {
		border-top: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
		height: 3px;
	}
	&--double-dashed {
		border-top: 1px dashed #cccccc;
		border-bottom: 1px dashed #cccccc;
		height: 3px;
	}
	&--double-dotted {
		border-top: 1px dotted #cccccc;
		border-bottom: 1px dotted #cccccc;
		height: 3px;
	}
}