/* 	CLEAR FLOATS
------------------------------------------------ */

.clear-floats {
	clear: both;
}

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

/* 	INTRO MESSAGE
------------------------------------------------ */

.intro {
	text-align: justify;
	font-size: 18px;
	line-height: 1.8333em;
	text-transform: none;
	letter-spacing: 1px;
	color: #999;
	margin: 0px 0 30px 0;
	padding: 20px 0;
	padding-top: 0px;
	padding-bottom: 0px;
}

/* 	BLOCKQUOTE
------------------------------------------------ */

blockquote {
	position: relative;
	margin: 30px 0px;
	padding-left: 20px;
	padding-top: 10px;
	padding-right: 0px !important;
	padding-bottom: 10px;
	margin-left: 0px;
	padding: 10px;
	color: #999;
	font-size: 18px;
	text-align: left;
	font-style: normal;
	border-left: 4px solid #EEE;
}

blockquote p:last-child {
	margin: 0;
}

blockquote p {
	padding-left: 40px;
	margin-bottom: 0px !important;
}


/* 	CODE
------------------------------------------------ */

code {
	position: relative;
	margin: 30px 0px;
	font-family: 'Open Sans', sans serif;
	padding-left: 40px;
	padding: 30px 30px 30px 70px;
	display: block;
	word-wrap: break-word;
	font-style: normal;
	background: #F7F7F7 url(/wp-content/plugins/PlayneShortcodes/includes/css/images/icons/code.png) no-repeat 20px 35px;
}

code p {
	padding-left: 0px !important;
	margin-bottom: 0px !important;
}

/* 	DROPCAP
------------------------------------------------ */

.dropcap {
	background: none;
	display: inline-block;
	float: left;
	text-transform: uppercase;
	font-size: 50px;
	font-weight: 200;
	height: 50px;
	line-height: 50px;
	margin: 0px;
	text-align: left;
	width: 40px;
	padding: 5px;
	padding-left: 0px;
	padding-top: 0px;
	margin-left: 0px;
}

/* 	SKILLBARS
------------------------------------------------ */

.skillbar {
	position: relative;
	display: block;
	margin-bottom: 15px;
	width: 100%;
	background: #eee;
	height: 35px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-webkit-transition: 0.4s linear;
	-moz-transition: 0.4s linear;
	-ms-transition: 0.4s linear;
	-o-transition: 0.4s linear;
	transition: 0.4s linear;
	-webkit-transition-property: width, background-color;
	-moz-transition-property: width, background-color;
	-ms-transition-property: width, background-color;
	-o-transition-property: width, background-color;
	transition-property: width, background-color;
}

.skillbar-title {
	position: absolute;
	top: 0;
	left: 0;
	font-weight: bold;
	font-size: 13px;
	color: #fff;
	background: #6adcfa;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.skillbar-title span {
	display: block;
	background: none;
	padding: 0 20px;
	height: 35px;
	line-height: 35px;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.skillbar-bar {
	height: 35px;
	width: 0px;
	background: #6adcfa;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.skill-bar-percent {
	position: absolute;
	right: 10px;
	top: 0;
	font-size: 11px;
	height: 35px;
	line-height: 35px;
	color: #444;
	color: rgba(0, 0, 0, 0.4);
}



/* 	COLUMNS
------------------------------------------------ */

.one-half {
	width: 48%;
}

.one-third {
	width: 30.66%;
}

.two-third {
	width: 65.33%;
}

.one-fourth {
	width: 22%;
}

.three-fourth {
	width: 74%;
}

.one-fifth {
	width: 16.8%;
}

.two-fifth {
	width: 37.6%;
}

.three-fifth {
	width: 58.4%;
}

.four-fifth {
	width: 67.2%;
}

.one-sixth {
	width: 13.33%;
}

.five-sixth {
	width: 82.67%;
}

.one-half,
.one-third,
.two-third,
.three-fourth,
.one-fourth,
.one-fifth,
.two-fifth,
.three-fifth,
.four-fifth,
.one-sixth,
.five-sixth {
	position: relative;
	display: block;
	margin-right: 4%;
	margin-bottom: 30px;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

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

/* 	BUTTONS
--------------------------------------------- */

.button {
	padding: 10px 14px;
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 0px;
	font-family: Arial, sans-serif;
	font-weight: normal;
	font-size: 12px;
	border: 0px;
	line-height: 20px;
	text-transform: none;
	cursor: pointer;
	width: auto;
	color: #fff;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.button.yellow {
	background-color: #fdebae;
	color: #E2BF4B;
}

.button.yellow:hover {
	color: #fdebae;
	background: #E2BF4B;
}

.button.blue {
	background-color: #c2ddf9;
	color: #4783b7;
}

.button.blue:hover {
	color: #c2ddf9;
	background: #4783b7;
}

.button.red {
	background-color: #ffcccc;
	color: #D03C25;
}

.button.red:hover {
	color: #ffcccc;
	background: #D03C25;
}

.button.green {
	background-color: #d1f7b6;
	color: #5e9537;
}

.button.green:hover {
	color: #d1f7b6;
	background: #5e9537;
}

.button.large {
	padding: 14px 18px;
	font-size: 14px;
}

.button.small {
	padding: 4px 7px;
	font-size: 10px;
}


/* 	HIGHLIGHTS
------------------------------------------------ */

.highlight-yellow,
.highlight-yellow a {
	background-color: #FFF7A8;
	color: #695D43;
	padding-left: 3px;
	padding-right: 3px;
}

.highlight-blue,
.highlight-blue a {
	color: #2d98bd;
	background: #d6eff8;
	padding-left: 3px;
	padding-right: 3px;
}

.highlight-green,
.highlight-green a {
	color: #509640;
	background: #ecffe7;
	padding-left: 3px;
	padding-right: 3px;
}

.highlight-red,
.highlight-red a {
	color: #ca3436;
	background: #ffe4e5;
	padding-left: 3px;
	padding-right: 3px;
}

/* 	MESSAGE BOXES
------------------------------------------------ */

.message_box-gray {
	margin-top: 30px;
	margin-bottom: 30px;
	background-color: #F8F8F8;
	padding: 30px;
	border: 1px dashed #DFDFDF;
}

.message_box-red {
	color: #ca3436;
	border: 1px dashed #ff9e9f;
	background: #ffe4e5;
	padding: 30px;
	margin-top: 30px;
	margin-bottom: 30px;
}

.message_box-blue {
	color: #2d98bd;
	border: 1px dashed #83c7df;
	background: #d6eff8;
	padding: 30px;
	margin-top: 30px;
	margin-bottom: 30px;
}

.message_box-yellow {
	background-color: #FFF7A8;
	color: #695D43;
	border: 1px dashed #fcd14b;
	padding: 30px;
	margin-top: 30px;
	margin-bottom: 30px;
}

.message_box-green {
	color: #509640;
	border: 1px dashed #99dd8a;
	background: #ecffe7;
	padding: 30px;
	margin-top: 30px;
	margin-bottom: 30px;
}

/* 	DIVIDER LINE
------------------------------------------------ */

.divider {
	content: "";
	width: 100%;
	height: 1px;
	margin: 40px 0;
	border-bottom: 1px solid #F2F2F2;
	left: 0;
}

/* 	SOCIALS
------------------------------------------------ */

.social-icon img {
	filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id… 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscalerayscale");
	filter: gray;
	-webkit-filter: grayscale(100%);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
	width: 25px;
	height: 25px;
}

.social-icon img:hover {
	filter: none;
	-webkit-filter: none;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
}

/* 	TABS
------------------------------------------------ */

.tabs ul.ui-tabs-nav {
	display: block;
	margin: 0;
	padding: 0;
	border-bottom: solid 1px #e3e3e3;
	border-left: solid 1px #e3e3e3;
	margin-left: 1px;
}

.tabs ul {
	margin: 0 !important;
}


.tabs ul.ui-tabs-nav ul {
	margin: 0 !important;
}


.tabs ul.ui-tabs-nav li {
	display: block;
	width: auto;
	height: 40px;
	padding: 0 !important;
	float: left !important;
	margin: 0 !important;
	outline: none;
}

.tabs ul.ui-tabs-nav li a {
	display: block;
	text-decoration: none;
	width: auto;
	height: 39px;
	padding: 0px 20px;
	line-height: 40px;
	border: solid 1px #e3e3e3;
	border-width: 1px 1px 0 0;
	margin: 0;
	background-color: #f5f5f5;
	font-size: 1em;
	color: #999;
	outline: none;
}

.tabs ul.ui-tabs-nav li a:hover {
	color: #666;
	background: #eee;
}

.tabs ul.ui-tabs-nav .ui-state-active a {
	background: #fff;
	height: 40px;
	position: relative;
	padding-top: 0px;
	margin: 0 0 0 0px;
	color: #404040 !important;
	-moz-border-radius-topleft: 2px;
	-webkit-border-top-left-radius: 2px;
	border-top-left-radius: 2px;
	-moz-border-radius-topright: 2px;
	-webkit-border-top-right-radius: 2px;
	border-top-right-radius: 2px;
}

.tabs ul.ui-tabs-nav .ui-state-active a:hover {
	background: #fff;
}

.tabs ul.ui-tabs-nav li:first-child .ui-state-active a {
	margin-left: 0;
}


.tabs .tab-content {
	background: #fff;
	padding: 20px;
	border-left: solid 1px #e3e3e3;
	border-right: solid 1px #e3e3e3;
	border-bottom: solid 1px #e3e3e3;
}

.tabs ul.tabs:after {
	clear: both;
}

.tabs ul.tabs {
	zoom: 1;
}

.tabs .ui-tabs-hide {
	display: none;
}


.tabs:after {
	clear: both;
}

.tabs {
	zoom: 1;
	margin-bottom: 30px;
}

.tabs .ui-tabs-hide {
	display: none;
}


/* 	TOGGLE
------------------------------------------------ */

.toggle {
	margin-bottom: 30px;
}

.toggle .toggle-trigger {
	display: block;
	color: #666;
	display: block;
	padding: 15px 15px 15px 37px;
	border: 1px solid #e3e3e3;
	background: #FFF url("/wp-content/plugins/PlayneShortcodes/includes/images/plus.png") no-repeat 15px center;
	outline: 0;
	text-transform: none;
	letter-spacing: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 1.5em;
	margin: 0;
	margin-top: 10px;
	cursor: pointer;
}

.toggle .toggle-trigger:hover {
	background-color: #EEE;
	text-decoration: none;
}

.toggle .toggle-trigger.active,
.toggle .toggle-trigger.active:hover {
	color: #404040;
	background-color: #EEE;
	background-image: url("/wp-content/plugins/PlayneShortcodes/includes/images/minus.png");
	text-decoration: none;
}

.toggle .toggle-container {
	display: none;
	overflow: hidden;
	padding: 15px;
	border: 1px solid #e3e3e3;
	border-top: 0px;
}


/* 	RESPONSIVENESS
------------------------------------------------ */

@media only screen and (max-width: 768px) {

	.one-half,
	.one-third,
	.two-third,
	.three-fourth,
	.one-fourth,
	.one-fifth,
	.two-fifth,
	.three-fifth,
	.four-fifth,
	.one-sixth,
	.five-sixth {
		width: 100%;
	}
}