/*
Theme Name: Skeleton Theme
Author: Joshua Esmero 
Author URI: clixpert.com.au
Description: This theme will be used as the basis for the development of new themes.
Version: 1.0
*/

@import url(css/reset.css);

/* GENERAL */
/* Fonts */
@font-face {    font-family: 'Open Sans';    src: url( '../fonts/OpenSans-Light.ttf' ) format( 'truetype' );	font-weight: 300;	font-style: normal;}@font-face {    font-family: 'Open Sans';    src: url( '../fonts/OpenSans-Regular.ttf' ) format( 'truetype' );	font-weight: 400;	font-style: normal;}@font-face {    font-family: 'Open Sans';    src: url( '../fonts/OpenSans-Semibold.ttf' ) format( 'truetype' );	font-weight: 600;	font-style: normal;}@font-face {    font-family: 'Open Sans';    src: url( '../fonts/OpenSans-Bold.ttf' ) format( 'truetype' );	font-weight: 700;	font-style: normal;}@font-face {    font-family: 'Open Sans';    src: url( '../fonts/OpenSans-ExtraBold.ttf' ) format( 'truetype' );	font-weight: 800;	font-style: normal;}@font-face {    font-family: 'Oswald';    src: url( '../fonts/Oswald-Regular.ttf' ) format( 'truetype' );	font-weight: 400;	font-style: normal;}@font-face {    font-family: 'Oswald';    src: url( '../fonts/Oswald-Light.ttf' ) format( 'truetype' );	font-weight: 300;	font-style: normal;}@font-face {    font-family: 'Oswald';    src: url( '../fonts/Oswald-Bold.ttf' ) format( 'truetype' );	font-weight: 700;	font-style: normal;}
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
body {
	font-family: 'Open Sans', sans-serif;
}
/* Layout */
.centre-wrap {
	max-width:1260px;
	margin:0 auto;
	padding:0 10px;
}

.clear-after:after {
	clear:both;
	content:"";
	display:block;
}
/* Display */
.hide {
	display:none !important;
}
.show {
	display:block !important;
}
/* Links */
a {
	text-decoration:none;
	color:#000;
}
a:hover {
	color:#000;
}

/* ==================== */

/* HEADER */
#header-wrap {
	padding:10px 0;
}
/* Title */
#header-title {
	display:block;
	float:left;
}
#header-title > img {
	display:block;
	float:left;
}
#header-title > span {
	display:block;
	float:left;
	font-size:2.5rem;
	line-height:3rem;
	margin:0 0 0 8px;
	font-weight:700;
	font-family: 'Oswald', sans-serif;
	text-transform:uppercase;
	color:#083371;
}
/* Phone */
#header-phone {
	float:right;
	margin:0 0 0 32px;
}
#header-phone > a {
	display:block;
	font-size:2.5rem;
	line-height:3rem;
	padding:0 0 0 56px;
	background-image:url( 'images/interface/icon-phone.png' );
	background-repeat:no-repeat;
	font-family: 'Oswald', sans-serif;
}
/* Form */
#header-form {
	float:right;
	margin:0 0 0 32px;
}

@media only screen and (max-width:800px) {
	
	/* Title */
	#header-title > span {
		font-size:1.5rem;
	}
	/* Phone */
	#header-phone > a {
		font-size:1.5rem;
	}
	
}

@media only screen and (max-width:480px) {
	
	/* Title */
	#header-title {
		float:none;
		text-align:center;
	}
	#header-title > img {
		display:inline-block;
		vertical-align:top;
		float:none;
	}
	#header-title > span {
		display:inline-block;
		vertical-align:top;
		float:none;
	}
	/* Phone */
	#header-phone {
		float:none;
		margin:20px 0 0;
		text-align:center;
	}
	#header-phone > a {
		display:inline-block;
		vertical-align:top;
	}
	/* Form */
	#header-form {
		float:none;
		margin:20px 0 0;
	}
	
}

/* ==================== */

/* PHONE FORM */
#phone-form {
	position:relative;
	width:200px;
	padding:8px 0;
}
#phone-form span,
#phone-form input {
	display:block;
	font-size:1rem;
}
/* Title */
#phone-form > header {
	padding:4px 8px;
	background-color:#79D600;
	text-align:center;
	cursor:pointer;
	color:#FFF;
	border-style:solid;
	border-color:#79D600;
	border-bottom-color:#63B000;
	border-width:1px;
	border-top-color:#89F200;
	border-radius:10px;
}
#phone-form > header:hover {
	background-color:#63B000;
	border-color:#63B000;
	border-top-color:#4E8A00;
	border-bottom-color:#79D600;
}
#phone-form > header > span {
	display:inline-block;
	font-size:1rem;
	line-height:1.5rem;
	padding:0 0 0 32px;
	background:url( 'images/interface/icon-phone-quote.png' ) no-repeat;
	font-family: 'Oswald', sans-serif;
	text-transform:uppercase;
	letter-spacing:2px;
	color:#000;
}
/* Wrap */
#phone-form > div {
	display:none;
	position:absolute;
	z-index:700;
	padding:12px 16px;
	background-color:#0B4292;
	border-radius:10px;
	margin:8px 0 0;
}
/*Fields */
#phone-form .form-element {
	margin:0 0 8px;
}
#phone-form .form-element input {
	width:96%;
	padding:3px 2%;
	margin:0;
	border:none;
	border-radius:5px;
}
/* Fields Error */
#phone-form .form-element > span > span {
	padding:4px 0 8px;
}
/* Captcha */
#phone-form .form-captcha {
	margin:0 0 8px;
}
#phone-form .form-captcha > img {
	display:block;
	float:left;
	height:24px;
	border-radius:5px;
}
#phone-form .form-captcha > span {
	float:right;
	width:calc(100% - 88px);
}
#phone-form .form-captcha > span > input {
	border:none;
	margin:0;
	width:96%;
	padding:3px 2%;
	border-radius:5px;
}
/* Captcha Error */
#phone-form .form-captcha > span > span {
	width:96%;
	padding:4px 2% 8px;
}
/* Submit */
#phone-form .form-submit > input {
	float:right;
	border:none;
	border-radius:5px;
	margin:0;
	padding:8px 16px;
	line-height:1rem;
	background-color:#79D600;
	font-family: 'Oswald', sans-serif;
	color:#FFF;
	text-transform:uppercase;
	letter-spacing:1px;
}
#phone-form .form-submit > input:hover {
	background-color:#63B000;
}
#phone-form .form-submit > img {
	display:none;
}
/* Validation Message */
#phone-form form > .wpcf7-validation-errors {
	border:none;
	margin:16px 0 0;
	padding:0;
}

@media only screen and (max-width:480px) {
	
	#phone-form {
		margin:0 auto;
		padding:0;
	}
	/* Title */
	#phone-form > header {
		padding:12px 8px;
	}
	/* Submit */
	#phone-form .form-submit > input {
		padding:16px 12px;
	}
	
}

/* ==================== */

/* HEADER NAV */
#header-nav-wrap {
	background-color:#083371;
}
/* Button */
#header-menu-button {
	display:none;
}
/* Level 1 */
#header-menu {
	position:relative;
	font-family: 'Oswald', sans-serif;
	letter-spacing:1px;
}
#header-menu > li {
	display:block;
	float:left;
	margin:0 5px;
}
#header-menu > li > a {
	display:block;
	padding:8px 5px;
	color:#FFF;
}
#header-menu > li:hover > a {
	background-color:#1457B9;
}
#header-menu > .current-menu-item > a {
	color:#FFE85E;
}
#header-menu > .menu-item-has-children > a {
	padding:8px 5px 6px;
	border-bottom-style:solid;
	border-bottom-width:2px;
	border-bottom-color:#346EC3;
}
/* Level 2 */
#header-menu > .menu-item-has-children > ul {
	position:absolute;
	z-index:520;
	display:none;
}
#header-menu > .menu-item-has-children:hover > ul {
	display:block;
}
#header-menu .sub-menu > li > a {
	display:block;
	padding:8px 10px;
	background-color:#1457B9;
	font-weight:300;
	color:#FFF;
}
#header-menu .sub-menu > li:hover > a {
	background-color:#5487D1;
}
#header-menu .sub-menu > .current-menu-item > a {
	color:#FFE85E;
}

@media only screen and (max-width:800px) {
	
	#header-nav-wrap .responsive-menu-wrap {
		position:relative;
	}
	/* Button */
	#header-menu-button {
		display:block;
		width:48px;
		height:48px;
		background: url( 'images/interface/icon-menu-button.png' ) no-repeat;
		cursor:pointer;
	}
	/* Level 1 */
	#header-menu {
		position:absolute;
		z-index:500;
		display:none;
		width:100%;
	}
	#header-menu > li {
		float:none;
		border-top-style:solid;
		border-top-width:1px;
		border-top-color:#0B4292;
		margin:0;
	}
	#header-menu > li > a {
		padding:16px 10px;
		background-color:#083371;
	}
	#header-menu > .menu-item-has-children > a {
		padding:16px 10px;
		border-bottom-style:none;
	}
	/* Level 2 */
	#header-menu > .menu-item-has-children {
		position:relative;
	}
	#header-menu > .menu-item-has-children > .sub-menu-button {
		position:absolute;
		z-index:510;
		right:0;
		width:48px;
		height:48px;
		background: url( 'images/interface/icon-menu-arrow.png' ) no-repeat;
	}
	#header-menu > .menu-item-has-children > ul {
		position:absolute;
		width:75%;
		right:0;
	}
	#header-menu > .menu-item-has-children:hover > ul {
		display:none;
	}
	#header-menu .sub-menu > li > a {
		padding:16px 10px;
		border-top-style:solid;
		border-top-width:1px;
		border-top-color:#346EC3;
	}
	
}

/* ==================== */

/* BANNER */
#banner-wrap {
	background: url( 'images/melbourne-emergency-plumber-banner.png' ) no-repeat center top;
}
#banner-wrap > .centre-wrap {	
	height:340px;	
	padding-top: 10px;	
	padding-bottom: 10px;
}
/* Form */
#banner-form {
	float:right;
	width:100%;
	max-width:300px;
	margin:20px 0 0;
}
/* Title */
#banner-title {
	float:left;
	font-size:2.5rem;
	width:calc( 100% - 320px );
	margin:32px 0;
	font-weight:700;
	font-family: 'Oswald', sans-serif;
	letter-spacing:1px;		
	color: #FFAA00;
	text-shadow: 
		0 1px 3px rgba(0, 0, 0, 0.8),
		1px 0 3px rgba(0, 0, 0, 0.8),
		0 -1px 3px rgba(0, 0, 0, 0.8),
		-1px 0 3px rgba(0, 0, 0, 0.8);
	
}
/* Point */
#banner-points {
	float:left;
	clear:left;
	width:100%;
	max-width:400px;
}
#banner-points > ul > li {
	font-size:1.3rem;
	margin:0 0 10px;
	list-style-type:none;
	padding:0 0 0 32px;
	background:url( 'images/interface/list-bullet.png' ) no-repeat;
	text-shadow: 
		0 1px 3px rgba(255, 255, 255, 0.8),
		1px 0 3px rgba(255, 255, 255, 0.8),
		0 -1px 3px rgba(255, 255, 255, 0.8),
		-1px 0 3px rgba(255, 255, 255, 0.8);
}

@media only screen and (max-width:800px) {
	#banner-wrap > .centre-wrap {		background-color: rgba(255, 255, 255, 0.5);	}
	/* Form */
	#banner-form {
		float:none;
		margin:0 auto;
	}
	/* Title */
	#banner-title {
		float:none;
		font-size:2rem;
		width:100%;
		margin:16px 0;
	}
	/* Point */
	#banner-points {
		float:none;
		clear:none;
		max-width:none;
		width:100%;
	}
	#banner-points > ul > li {
		font-size:1.25rem;
		background-size:20px;
	}
	
}

@media only screen and (max-width:480px) {
	
	/* Form */
	#banner-form {
		max-width:none;
	}
	/* Title */
	#banner-title {
		font-size:1.5rem;
		text-align:center;
	}
	#banner-points > ul > li {
		font-size:1rem;
		line-height:1.25rem;
		background-size:20px;
	}
	
}


/* ==================== */

/* MAIN FORM */
#main-form {
	width:100%;
	overflow:hidden;
	border-radius:10px;
}
#main-form span,
#main-form input {
	display:block;
	font-size:1rem;
}
/* Title */
#main-form > header {
	padding:8px 10px;
	text-align:center;
	background-color:#1457B9;
}
#main-form > header > span {
	display:inline-block;
	font-size:1.75rem;
	line-height:2rem;
	padding:0 0 0 40px;
	background-image:url( 'images/interface/icon-form-title.png' );
	background-repeat:no-repeat;
	color:#FFF;
	font-family: 'Oswald', sans-serif;
	text-transform:uppercase;
	letter-spacing:1px;
}
/* Form */
#main-form > div {
	padding:10px 15px;
	background-color:#083371;
}
/*Fields */
#main-form .form-element {
    margin: 0 0 10px;
}
#main-form .form-element > span > input {
	width:96%;
	padding:3px 2%;
	border: none;
    margin: 0;
}
#main-form .form-element > span > textarea {
	max-width: 96%;
	height: 3rem;
	padding: 2px 2%;
	border: none;
    margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
}
/* Captcha */
#main-form .form-captcha {
	margin: 0 0 10px;
}
#main-form .form-captcha > img {
	display:block;
	float:left;
	height:24px;
}
#main-form .form-captcha > span {
	float:right;
	width:calc(100% - 88px);
}
#main-form .form-captcha > span > input {
	border:none;
	margin:0;
	width:96%;
	padding:3px 2%;
}
/* Captcha Error */
#main-form .form-captcha > span > span {
	width:96%;
	padding:4px 2% 8px;
}
/* Submit */
#main-form .form-submit > input {
	float:right;
	border:none;
	margin:0;
	font-size:1.25rem;
	line-height:1.5rem;
	padding:4px 40px 4px 8px;
	background-color:#79D600;
	background-image:url( 'images/interface/icon-form-submit.png' );		background-size: 24px;	
	background-repeat:no-repeat;
	background-position:right 8px top 4px;
	border-radius:5px;
	font-family: 'Oswald', sans-serif;
	color:#000;
	text-transform:uppercase;
	letter-spacing:1px;
}
#main-form .form-submit > input:hover {
	background-color:#63B000;
}
#main-form .form-submit > img {
	display:none;
}
/* Validation Message */
#main-form form > .wpcf7-validation-errors {
	border:none;
	margin:16px 0 0;
	padding:0;
}

@media only screen and (max-width:800px) {
	
	/* MAIN FORM */
	.collapsible-form {
		position:relative;
		overflow:visible !important;
		border-radius:0;
	}
	/* Title */
	.collapsible-form > header {
		cursor:pointer;
		border-radius:10px;
	}
	.collapsible-form > header:hover {
		background-color:#0B4292 !important;
	}
	/* Form */
	.collapsible-form > div {
		display: none;
		position:absolute;
		width:calc( 100% - 30px );
		z-index:600;
		border-radius:10px;
		margin:8px 0 0 !important;
	}

}

@media only screen and (max-width:480px) {
	
	/* Submit */
	#main-form .form-submit > input {
		padding:12px 40px 12px 8px;
		background-position:right 8px top 12px;
	}
	
}

/* ==================== */

/* DISPLAY ROW */
#display-row {
	max-width:1000px;
	margin:0 auto;
	padding:48px 0;
}
#display-row > a {
	display:block;
	float:left;
	width:30%;
	margin:0 5% 0 0;
	text-align:right;
}
#display-row > a:last-child {
	margin:0;
}
#display-row > a > img {
	width:100%;
	border-radius:10px;
}#display-row > a > b {	display: block;	margin: 16px 0 0;	text-align: center;	font-family: 'Oswald', sans-serif;	font-size: 1.5rem;	letter-spacing: 1px;	color: #083371;}
#display-row > a > span {
	display:inline-block;
	background-color:#79D600;
	padding:10px 20px;
	margin:20px 83px 0;
	border-radius:5px;
	font-family: 'Oswald', sans-serif;
	text-transform:uppercase;
	color:#FFF;
	letter-spacing:1px;
	border-style:solid;
	border-color:#79D600;
	border-bottom-color:#63B000;
	border-width:1px;
	border-top-color:#89F200;
}
#display-row > a > span:hover {
	background-color:#63B000;
	border-color:#63B000;
	border-top-color:#4E8A00;
	border-bottom-color:#79D600;
}

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

	#display-row > a {
		width:40%;
		margin:0 5% 50px;
	}
	#display-row > a:last-child {
		float:none;
		margin:0 auto;
	}
	
}

@media only screen and (max-width:480px) {
	
	#display-row > a {
		float:none;
		width:70%;
		margin:0 auto 50px;
	}
	#display-row > a:last-child {
		margin:0 auto;
	}
	
}

/* ==================== */

/* BODY ELEMENTS */
/* Headings */
.body-element h2,
.body-element h3  {
	font-family: 'Oswald', sans-serif;
}
.body-element h2 {
	font-size:2rem;
	margin:40px 0 20px;
	color:#0B4292;
}
.body-element h3 {
	font-size:1.5rem;
	margin:30px 0 10px;
	font-weight:400;
	color:#1457B9
}
/* Paragraphs */
.body-element p {
	margin:0 0 20px;
	line-height:1.5rem;
}
/* Links */
.body-element a {
	color:#2996CC;
}
.body-element a:hover {
	color:#88CC00;
}
/* Lists */
.body-element ul,
.body-element ol {
	margin:0 0 20px;
}
.body-element ul:last-child,
.body-element ol:last-child {
	margin:0;
}
.body-element ul > li > ul,
.body-element ol > li > ol {
	margin:5px 0 !important;
}
.body-element ul > li,
.body-element ol > li {
	line-height:1.5rem;
	margin:0 0 10px;
}

.body-element ul > li {
	padding:0 0 0 32px;
	background:url('images/interface/list-bullet.png') no-repeat;
	list-style-type:none;
}
.body-element ol > li {
	margin:0 0 0 32px;
}
.body-element .two-column {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
.body-element .three-column {
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
/* Table */
.body-element table {
	margin:0 0 20px;
}
.body-element table th,
.body-element table td {
	line-height:1.4rem;
	padding:0 20px 0 0;
}
.body-element .table-head-left th {
	text-align:left;
}
/* Images */
.img-fullwidth {
	width:100%;
	display:block;
}
.img-inline-half {	
	width:50%;
	margin:0 20px 10px 0;
}
.img-inline-block-container {
	text-align:center;
	padding:20px 0;
}
.img-inline-block-container > img {
	display:inline-block;
}

@media only screen and (max-width:800px) {
	
	/* Lists */
	.body-element .three-column {
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
	}
	
}

@media only screen and (max-width:480px) {
	
	/* Lists */
	.body-element .two-column {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
	}
	.body-element .three-column {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
	}
	/* Images */
	.img-inline-half {
		width:100%;
		margin:0;
	}
	
}

/* ==================== */

/* HOME BODY */
#home-body-wrap {
	margin:64px 0;
}
/* Title */
#home-body-wrap h1 {
	font-size:3rem;
	margin:0 0 32px;
	text-align:center;
	font-family: 'Oswald', sans-serif;
	color:#083371;
}

/* ==================== */

/* INNER BODY */
#inner-body-wrap {
	margin:64px 0;
}
/* Form */
#inner-body-form {
	width:100%;
	max-width:300px;
	float:right;
}
/* Main */
#inner-body-main {
	width:calc( 100% - 332px );
	min-height:400px;
	float:left;
}
#inner-body-main h1 {
	font-size:3rem;
	margin:0 0 32px;
	font-family: 'Oswald', sans-serif;
	color:#083371;
}
#inner-body-main > header {
	margin:0 0 32px;
}
#inner-body-main > header > h1 {
	margin:0 0 8px;
}
#inner-body-main > header > span {
	display:block;
	color:#999;
}
/* Post */
#inner-body-main .post-wrap {
	padding:32px 0;
	border-top-style:solid;
	border-top-width:1px;
	border-top-color:#CCC;
}
#inner-body-main .post-wrap > header {
	margin:0 0 24px;
}
#inner-body-main .post-wrap > header > h2 {
	margin:0 0 8px;
}
#inner-body-main .post-wrap > header > span {
	display:block;
	font-size:0.9rem;
	color:#999;
}
#inner-body-main .post-wrap > a {
	display: inline-block;
	background-color: #88CC00;
	padding: 16px 24px;
	margin: 24px 0 0;
	border-radius: 5px;
	text-transform: uppercase;
	color: #FFF;
}
/* Side */
#inner-body-side {
	float:right;
	width:100%;
	max-width:300px;
	margin:16px 0 0;
}
.widget-wrap {
	padding:20px 0;
	border-top-style:solid;
	border-top-width:1px;
	border-top-color:#CCC;
}
.widget-wrap:first-child {
	border:none;
}

.widget-wrap > header {
	font-size:1.5rem;
	margin:0 0 10px;
}

@media only screen and (max-width:800px) {
	
	/* Form */
	#inner-body-form {
		float:none;
		margin:0 auto;
	}
	/* Main */
	#inner-body-main {
		width:100%;
		float:none;
		margin:48px 0 0;
	}
	/* Side */
	#inner-body-side {
		float:none;
		max-width:none;
	}
	
}

/* ==================== */

/* FOOTER NAV */
#footer-nav-wrap {
	background-color:#083371;
	padding:8px 0 0;
	font-family: 'Oswald', sans-serif;
	letter-spacing:1px;
}
/* Menu */
#footer-menu {
	float:left;
	padding:0 0 8px;
}
#footer-menu > li {
	display: block;
	float: left;
	margin:0 5px;
}
#footer-menu > li > a {
	display: block;
	padding: 8px 5px;
	color:#FFF;
}
#footer-menu > li:hover > a {
	background-color:#1457B9;
}
#footer-menu > .current-menu-item > a {
	color:#FFE85E;
}
/* Social */
#footer-social {
	float:right;
	padding:0 0 8px;
}
#footer-social > a {
	display:block;
	float:left;
	width:32px;
	height:32px;
	background-size:32px;
	margin:0 0 0 16px;
}
.icon-facebook {
	background:url( 'images/interface/icon-facebook.png' ) no-repeat;
}
.icon-twitter {
	background:url( 'images/interface/icon-twitter.png' ) no-repeat;
}
.icon-google-plus {
	background:url( 'images/interface/icon-googleplus.png' ) no-repeat;
}

@media only screen and (max-width:480px) {
	
	/* Menu */
	#footer-menu {
		float:none;
	}
	#footer-menu > li {
		float: none;
		margin:0;
		border-top-style:solid;
		border-top-width:1px;				border-color: #0B4292;
	}
	#footer-menu > li:last-child {
		border-bottom-style:solid;
		border-bottom-width:1px;
	}
	#footer-menu > li > a {
		padding: 16px 10px;
	}
	/* Social */
	#footer-social > a {
		width:48px;
		height:48px;
		background-size:48px;
	}
	
}

/* ==================== */

/* FOOTER END */
#footer-end {
	padding-bottom:8px;
	font-size:0.75rem;
	line-height:1rem;
}
/* Copyright */
#footer-end p {
	padding-top:8px;
	float:left;
	color:#808080;
}
/* Clixpert Link */
#footer-end a {
	padding-top:8px;
	display:block;
	float:right;
	color:#808080;
}
#footer-end a:hover {
	color:#000;
}

@media only screen and (max-width:480px) {
	
	/* Copyright */
	#footer-end p {
		text-align:center;
		float:none;
	}
	/* Clixpert Link */
	#footer-end a {
		text-align:center;
		float:none;
	}
}

/* ==================== */

/* MICRODATA */
#micro-data {
	display:none;
}