/**
 * Styles for Panache Pizazz Plugin
 *
 * @package		Panache Pizazz WordPress Plugin
 * @copyright	Copyright (c) 2015, Kevin Archibald
 * @license		http://www.gnu.org/licenses/quick-guide-gplv3.html  GNU Public License
 * @author		Kevin Archibald <www.kevinsspace.ca/contact/>
 */
/* -------------- clear floats -------------------- */
.pp-clear {clear: both;}

/* ---------------columns --------------------------- */
 
 .pp-one-fourth {
 	width: 22%;
 	margin: 1em 2% 0.5em 1%;
 	float: left;
 }
 
 .pp-one-third {
 	width: 30.33%;
 	margin: 1em 2% 0.5em 1%;
 	float: left;
 }
 
 .pp-two-third {
 	width: 63.66%;
 	margin: 1em 2% 0.5em 1%;
 	float: left;
 }
 
 .pp-one-half {
 	width: 47%;
 	margin: 1em 2% 0.5em 1%;
 	float: left;
 }
 
 .pp-three-fourth {
 	width: 72%;
 	margin: 1em 2% 0.5em 1%;
 	float: left;
}

/* -------------- Quotes ------------------ */
.pp-fa-quote-left {
	clear: both;
	width: 200px;
	float: left;
	margin: 10px 0 10px 0;
	padding: 0 20px 0 0;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.2em;
	font-style: italic;
}

.pp-fa-quote-right {
	clear: both;
	width: 200px;
	float: right;
	margin: 10px 0 10px 0;
	padding: 0 0 0 20px;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.2em;
	font-style: italic;
}

.pp-fa-quote-fullwidth {
	clear: both;
	width: 100%;
	float: left;
	margin: 10px 0 10px 0;
	padding: 0;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.2em;
	font-style: italic;
}

/* --------------------dropcaps ------------------- */
 
 .pp-dropcaps {
 	display: block;
    float: left;
    font-size: 2.6em;
    line-height: 1em;
    margin: 0px 10px 0px 0px;
 }

/* -------------------------- lists --------------------------- */

.pp-fa-ul {
	margin: 0 0 0 1.25em;
	padding: 0;
}

.pp-fa-ul li {
	font-size: 1em;
	list-style: none;
	font-style: normal;
	margin: 0 0 0 0.5em;
}

.pp-fa-li {
	font-family: FontAwesome;
	margin: 0 0.5em 0 -1.5em;
	font-size: 0.875em;
	font-style: normal;
	text-shadow: 1px 1px 2px #898989;
}

.pp-fa-ul li ul li i.pp-fa-li {
	margin: 0 0.5em 0 -1.0em;
}

/* ---------------------messagebox ----------------------------- */

.pp-messagebox-mbnoshade {}

.pp-messagebox-mbdark {
	background-image: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.4) );
}

.pp-messagebox-mblight {
	background-image: linear-gradient( rgba(255,255,255,0.6), rgba(255,255,255,0) );
}

.pp-messagebox {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	clear: both;
	padding: 15px;
}

.pp-mb-left{ float:left; margin: 10px 5px 10px 5px; }
.pp-mb-right{ float: right; margin: 10px 5px 10px 5px; }
.pp-mb-center{ float:left; width: 70%; margin: 10px auto 10px auto; text-align: center; }

/* ----------------- end messagebox --------------------- */

/* ---------------------------- CSS3 Button ----------------------------------- */

.pp-3d-button-left{float: left; clear: both; margin: 10px 5px 10px 5px;}

.pp-3d-button-right{float: right; clear: both; margin: 10px 5px 10px 5px;}

.pp-3d-button-center{float: left; width: 70%; text-align: center; clear: both; margin: 10px 5px 10px 10%;}

.pp-3d-button {
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-decoration:none;
   border-radius: 2px;
   box-shadow: 2px 5px 5px 0 rgba(72,72,72,0.8);
}

a.pp-3d-button {text-decoration:none!important;}

.pp-css-button-small {
	padding: 2px 5px 2px 5px;
	font-size: 0.875em !important;
}
 
.pp-css-button-medium {
	padding: 10px;
	font-size: 1.5em !important;
}

.pp-css-button-large {
	padding: 15px;
	font-size: 2em !important;
}
   
a.pp-3d-button:hover {
	font-weight:normal !important;
	text-decoration: none;
	box-shadow: 1px 2px 2px 0 rgba(72,72,72,0.5);
	opacity: 1.0!important;
} 

/* ------------------ Special Text Shortcode ----------------- */

.pp-st-small {font-size: 0.75em;}

.pp-st-normal {font-size: 1em;}

.pp-st-medium {font-size: 1.5em;}

.pp-st-large {font-size: 2em;}

.pp-st-white {color: white;}

.pp-st-black {color: black;}

.pp-st-red {color: red;}

.pp-st-yellow {color: yellow;}

.pp-st-green {color: green;}

.pp-st-blue {color: blue;}

.pp-st-gray {color: gray;}

/* ------------ end Special Text Styles -------------------- */

/* ------------------------ divide shortcode--------------------------*/

.pp-divide {
	line-height: 0px;
	margin: 15px auto 15px auto;
}

/* ------------------------ toggle shortcode--------------------------*/
h4.pp-fa-trigger {
	clear: both;
	width: 100%;
	float: left;
	padding: 0;
}

h4.pp-fa-trigger:before {
	font-size: 1em;
	font-family: FontAwesome;
	margin: 0 10px 0 0;
	padding: 0;
	content: "\f067";
	opacity: 0.75;
}

h4.pp-fa-active:before {
	font-size: 1em;
	font-family: FontAwesome;
	margin: 0 10px 0 0;
	padding: 0;
	content: "\f068";
	opacity: 0.75;
}

.pp-fa-toggle-container {
	width: 100%;
	float: left;
	display: none;
	overflow: hidden;
	padding: 10px 0 10px 0;
}

/* ------------------------ tabs shortcode--------------------------*/

.pp-tab-box {
	display: block;
	width: calc(100% - 10px);
	clear: both;
	float: left;
	margin: 0;
	border: 1px solid #d3d3d3;
	padding: 3px;
}

.pp-tab-ul {
	width: calc(100% - 2px);
	float: left;
	margin: 0;
	padding: 0;
	border: 1px solid #d3d3d3;
	border-radius: 4px;
	background: linear-gradient(#EAEAEA,#CECECE);
}

.pp-tab-li.ui-state-default {
	list-style: none;
	float: left;
	margin: 4px 4px 1px 2px;
	padding: 5px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	background: linear-gradient(#f7f7f7,#ededed);
}

.pp-tab-li.ui-state-default:before{
	font-size: 1em;
	font-family: FontAwesome;
	margin: 0;
	padding: 0;
	content: "\f0d7";
	opacity: 0.75;
}

.pp-tab-li.ui-state-active {
	float: left;
	display: inline-block;
	margin: 4px 4px -3px 2px;
	padding: 5px 5px 8px 5px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	background: none;
	background-color: #ffffff;
}

.pp-tab-li.ui-state-default.ui-state-active:before{
	font-size: 1em;
	font-family: FontAwesome;
	margin: 0;
	padding: 0;
	content: "\f0d8";
	opacity: 0.75;
}

.pp-tab-li a {
	text-decoration: none;
	margin:0;
	padding:0;
	color: #555555;
}

.pp-tab-content {
	clear:both;
	float: left;
	width: calc(100% - 20px);
	margin: 0;
	padding: 10px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	background-color: #ffffff;
	color: #555555;
}

/* ------------------------ accordion shortcode--------------------------*/

.pp-accord-box {
	width: calc(100% - 22px);
	float: left;
	margin: 0;
	padding: 10px;
	border: 1px solid #d3d3d3;
}

.pp-accord-box h3.pp-accord-title {
	width: calc(100% - 22px);
	float: left;
	margin: 5px 0 0 0;
	padding: 10px;
	border-radius: 4px;
	line-height: 1em;
	font-size: 1em;
	border: 1px solid #d3d3d3;
    color: #555555;
    background: linear-gradient(#EAEAEA,#CECECE);
}

.pp-accord-box h3.pp-accord-title:before {
	font-size: 1em;
	font-family: FontAwesome;
	margin: 0 10px 0 0;
	padding: 0;
	content: "\f0d7";
	opacity: 0.75;
}

.pp-accord-box .pp-accord-content {
	width: calc(100% - 22px);
	float:left;
	margin: 0;
	padding: 10px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border: 1px solid #d3d3d3;
	color: #555555;
}

.pp-accord-box h3.ui-accordion-header-active {
	background: none;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-top: 1px solid #d3d3d3;
	border-left: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	border-bottom: none;
	background: linear-gradient(#f7f7f7,#ededed);
}

.pp-accord-box h3.ui-accordion-header-active:before {
	font-size: 1em;
	font-family: FontAwesome;
	margin: 0 10px 0 0;
	padding: 0;
	content: "\f0d8";
	opacity: 0.75;
}

.pp-accord-box h3:hover {
	cursor: pointer;
	opacity: 0.50;
}

/* =========================================================================
 * 	         Responsive Adjustments
 * ========================================================================= */

@media screen and (max-width: 900px) {
	
	.pp-one-fourth {
 		width: 47%;
 	}
 	
 	.pp-one-fourth:nth-child(3) {
 		clear:both;
 	}
 	
 	.pp-three-fourth {
 		width: 47%;
	}
	
}
@media screen and (max-width: 700px) {

}

@media screen and (max-width: 480px) {
	
	.pp-one-third {
		width: 47%;
	}
	
	.pp-two-third {
		width: 47%;
	}

	.pp-fa-quote-left,.pp-fa-quote-right {
		width: 100%;
		margin: 10px 0 10px 0;
		padding: 0;
	}

}

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

 .pp-one-fourth,.pp-one-third,.pp-one-half,.pp-two-third,.pp-three-fourth {
 	width: 90%;
 	margin: 1em 5% 0.5em 5%;
 }
 
}