/*
Theme Name: Lo Quay Theme
Author: MediaOnMars
Author URI: http://mediaonmars.com.au/
Version: 1.0
License: GNU General Public License
*/

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, ol, ul, li, h1, h2, h3, h4, h5, h6, p, form {
	border: none;
	margin: 0;
	padding: 0;
}
* {outline: 0;}
table {
	border-collapse: separate;
	border-spacing: 0;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
img {
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}
a img {
	border: none;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol li, ul li {
	list-style-position: outside;
}
input, textarea {-webkit-appearance: none;}

/* =Global
----------------------------------------------- */

body {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 14px;
	color: #837652;
	background: url(images/header_bg.jpg) repeat left top;
}

h2 {
	font-size: 46px;
	font-family: 'Loved by the King', cursive;
	letter-spacing: 2px;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 46px;
	margin-bottom: 20px;
}

h3 {
	font-size: 29px;
	font-family: 'Loved by the King', cursive;
	font-weight: normal;
	text-transform: uppercase;
	color: #007EC5;
	letter-spacing: 2px;
	line-height: 29px;
}

h4, h5 {
	font-size: 23px;
	font-family: 'Loved by the King', cursive;
	font-weight: normal;
	text-transform: uppercase;
	color: #007EC5;
	letter-spacing: 2px;
	line-height: 23px;
}
h5 {color: #837652;}

h6 {
	font-size: 15px;
	font-weight: bold;
}

table td, table th {vertical-align: top;}
table h2 {margin-top: 20px;}
table h3, table h4, table h5 {margin-top: 10px;}

a {
	color: #007ec5;
	text-decoration: none;
}
a:focus,
a:active,
a:hover {
	color: #64c3ce;
}

.clear {
	clear: both;
	font-size: 1px;
}

/* =Structure
----------------------------------------------- */

.wrapper {
	padding: 0 20px;
	width: 1000px;
	margin: 0 auto;
}

/* Block Alignment */

.alignleft {float: left;}
.alignright {float: right;}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Text Alignment */

.textleft {text-align: left;}
.textright {text-align: right;}
.textcenter {text-align: center;}
.textjustify {text-align: justify;}

/* =Header
----------------------------------------------- */

#branding {
	padding: 14px 0 20px 0;
	background: url(images/header_bg.jpg) repeat;
}

#branding #site-title {float: left;}
#branding #site-title a {text-decoration: none;}

.header_right {padding-top: 16px;}

.widgets_wrapper {
	float: right;
	white-space: nowrap;
	background: url(images/top_widgets_bg.jpg) repeat-x left top;
	font-family: 'Loved by the King', cursive;
	font-size: 24px;
	color: #8a7550;
	padding: 3px 2px 0 2px;
	line-height: 47px;
	height: 47px;
}

.widgets_wrapper p {
	display: inline;
	margin: 0 12px;
}

#branding .socials {
	text-align: right;
	float: right;
	white-space: nowrap;
	padding-top: 10px;
}

#branding .socials li {
	display: inline;
	margin-right: 8px;
}

#branding .socials li a {
	overflow: hidden;
	height: 0;
	padding-top: 30px;
	display: inline-block;
	width: 30px;
}

#branding .socials li a:hover {background-position: left bottom !important;}

#branding .socials li.icon_facebook a {background: url(images/icon_facebook.png) no-repeat left top;}
#branding .socials li.icon_instagram a {background: url(images/icon_instagram.png) no-repeat left top;}

/* =Menu
-------------------------------------------------------------- */

#topmenu, #mainmenu {
	float: right;
	white-space: nowrap;
	text-align: right;
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
}

#topmenu {margin-top: 29px;}
#mainmenu {margin-top: 10px;}

#topmenu li, #mainmenu li {
	list-style-type: none;
	display: inline
}

#topmenu li {margin-left: 18px;}
#mainmenu li {
	margin-left: 28px;
	font-size: 28px;
}

#topmenu a {color: #64c3ce;}
#topmenu li.current_page_item > a, #topmenu a:hover, #mainmenu li.current-menu-item > a {color: #897550;}

#mainmenu a {color: #007ec5;}
#mainmenu a:hover {color: #64c3ce;}

/* =Content
----------------------------------------------- */

#main {
	background: url(images/main_bg.jpg) repeat left top;
}

#main_inner {
	background: url(images/main_line.jpg) repeat-x left bottom;
	padding-bottom: 40px;
}

body.home #main_inner {padding-bottom: 22px;}

#primary {
	background: url(images/main_line.jpg) repeat-x 0 0;
	padding-top: 40px;
}

.slider {
	padding-top: 20px;
	background: url(images/main_line.jpg) repeat-x 0 -2px;
}

#content {
	float: left;
	width: 660px;
	font-size: 15px;
	padding-top: 8px;
}

#content.full_width {
	float: none;
	width: auto;
}

body.home #content {
	text-align: center;
	color: #897550;
	padding-bottom: 10px;
	float: none;
	width: auto;
	font-size: 20px;
	padding-top: 0;
}

body.home #content h2 {
	margin-bottom: 5px;
	font-size: 40px;
	line-height: 40px;
}

.featured {
	float: right;
	background: #fff;
	padding: 10px;
	width: 300px;
}

#content ul, #content ol {margin-left: 24px;}
#content p, #content ul, #content ol {margin-bottom: 18px;}
body.home #content p {margin-bottom: 0;}

.homepage_boxes {
	padding: 28px 0 24px 0;
	background: #fff;
}

.homepage_boxes .home_box {
	float: left;
	width: 320px;
	margin-right: 20px;
	text-align: center;
}
.homepage_boxes .home_box.box3 {margin-right: 0;}

.home_box h4 {
	height: 55px;
	line-height: 55px;
	background: url(images/box2_title_bg.png) no-repeat center top;
	font-size: 21px;
	color: #897550;
	font-family: 'Loved by the King', cursive;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.home_box a {color: #897550;}

.bottom {background: url(images/bottom_bg.jpg) repeat;}
.bottom_wrapper {background: url(images/bottom_image_bg.jpg) no-repeat center top;}

.bottom_inner {
	background: url(images/bottom_line.png) repeat-x 0 8px;
}

.widgets_bottom {
	padding: 170px 0 0 595px;
	min-height: 220px;
	text-align: center;
	font-size: 16px;
}

.widgets_bottom .widget {color: #0076a2;}
.widgets_bottom .widget p {margin-bottom: 10px;}

.widgets_bottom .widget:first-child {
	padding-bottom: 35px;
	font-size: 24px;
	line-height: 28px;
	margin-bottom: 10px;
	font-family: 'Loved by the King', cursive;
	background: url(images/wave.png) no-repeat center bottom;
}

.widgets_bottom .widget:first-child p {margin-bottom: 0;}

.button {margin-bottom: 10px;}

.button a {
	width: 320px;
	height: 50px;
	padding-top: 30px;
	background: url(images/button_bg.png) no-repeat left top;
	font-size: 23px;
	line-height: 23px;
	font-family: 'Loved by the King', cursive;
	text-transform: uppercase;
	letter-spacing: 1px;
	word-spacing: -6px;
	text-align: center;
	color: #837652;
	display: inline-block;
}

.button a:hover {color: #027bc3;}

/* =Footer
----------------------------------------------- */

#footer {
	color: #5db8c6;
	font-size: 14px;
	padding: 12px 0;
}

#footer a {color: #5db8c6;}
#footer a:hover {color: #897550;}

.footer_left {float: left;}
.footer_right {float: right;}

/* Tablets */
@media screen and (min-width: 661px) and (max-width: 1020px) {
	body {
		width: 1040px;
		min-height: 1260px;
	}
}

/* Phones */
@media screen and (max-width: 660px) {
	
	.wrapper {
		width: 320px;
		padding: 0;
	}
	
	h2 {
		font-size: 30px;
		line-height: 30px;
	}
	
	h3 {
		font-size: 23px;
		line-height: 23px;
	}
	
	iframe {max-width: 100% !important;}
	
	#branding #site-title {
		float: none;
		text-align: center;
		padding: 15px 5px 0 10px;
	}

	.header_right {padding-top: 0;}

	.widgets_wrapper {
		float: none;
		font-size: 17px;
		text-align: center;
	}

	.widgets_wrapper p {margin: 0 8px;}

	#branding .socials {
		text-align: left;
		float: left;
		padding: 10px 0 0 25px;
	}

	#branding .socials li {
		display: inline;
		margin-right: 8px;
	}

	#branding .socials li a {
		padding-top: 40px;
		width: 40px;
	}
	
	#branding .socials li.icon_facebook a {background: url(images/icon_facebook_mobile.png) no-repeat left top;}
	#branding .socials li.icon_instagram a {background: url(images/icon_instagram_mobile.png) no-repeat left top;}
	
	#topmenu {display: none;}
	
	#primary {
		clear: both;
		padding-top: 30px;
	}
	
	body.home #content {font-size: 16px;}
	
	body.home #content h2 {
		font-size: 30px;
		line-height: 30px;
		padding: 0 20px 25px 20px;
		background: url(images/main_line.jpg) repeat-x left bottom;
	}
	
	body.home #content p {padding: 0 20px;}
	
	.featured {
		float: none;
		padding: 10px;
		margin: 0 10px 20px 10px;
		width: auto;
	}
	
	#content {
		float: none;
		width: auto;
		margin: 0 10px;
	}
	
	.button a {
		width: 300px;
		height: 47px;
		padding-top: 30px;
		background-size: 100%;
		line-height: 23px;
		font-family: 'Loved by the King', cursive;
		text-transform: uppercase;
		letter-spacing: 1px;
		text-align: center;
		color: #837652;
		display: inline-block;
	}
	
	table {width: 100%;}
	
	table td .button a {
		width: 130px;
		height: 57px;
		padding: 20px 10px 0 10px;
		font-size: 17px;
		line-height: 23px;
		background-size: auto;
	}
	
	.homepage_boxes {padding: 10px 0 0 0;}
	
	.homepage_boxes .home_box {
		float: none;
		margin: 0;
		width: 300px;
		padding: 0 10px 10px 10px;
	}
	
	.home_box h4 {background-size: 100%;}
		
	.bottom_wrapper {
		background: url(images/bottom_line.png) repeat-x center 8px;
		padding-bottom: 10px;
	}
	
	.bottom_inner {
		background: url(images/bottom_line.png) repeat-x center 100%;
		padding-bottom: 15px;
	}
	
	.widgets_bottom {
		font-size: 16px;
		min-height: 1px;
		padding: 30px 10px 400px 10px;
		background: url(images/bottom_image_bg.jpg) no-repeat -155px 100%;
	}
	
	.widgets_bottom_inner {
		padding-top: 100px;
		background: url(images/bottom_widget_mobile.png) no-repeat center top;
		background-size: 100%;
	}
	
	.widgets_bottom .widget:first-child {
		background-size: 100%;
		font-size: 18px;
		line-height: 18px;
		letter-spacing: normal;
		padding-bottom: 28px;
	}
	
	#footer {
		text-align: center;
		line-height: 21px;
	}
	
	.footer_left, .footer_right {
		float: none;
		padding: 0 20px;
	}
	
	/* =Menu
	-------------------------------------------------------------- */
	
	a.show_nav {
		float: right;
		display: block;
		text-indent: -9999px;
		width: 40px;
		height: 40px;
		margin: 10px 30px 0 0;
		background: url(images/mobile_nav_button.jpg) no-repeat right top;
	}
	
	#mainmenu {
		clear: both;
		display: none;
		z-index: 999;
		text-align: left;
		margin: 20px 0 0 0 !important;
		float: none;
		white-space: normal;
		background: #64c4cf !important;
	}

	#mainmenu ul {
		list-style-type: none;
		position: static !important;
		font-size: 14px;
	}
	
	#mainmenu ul.sub-menu {background: #8cc1cd;}
	
	#mainmenu ul ul {
		padding-top: 0;
		width: auto;
	}

	#mainmenu li {
		display: block !important;
		float: none !important;
		position: relative;
		margin: 0 !important;
		font-size: 1em;
	}

	#mainmenu a {
		display: block;
		padding: 8px 10px;
		color: #fff;
		height: auto !important;
		line-height: auto !important;
		text-decoration: none;
		border-top: 1px solid #fff;
		border-right: none !important;
	}

	#mainmenu ul#menu-main-menu > li.has_sub > a {
		background: url(images/mobile_nav_arrow.png) no-repeat 290px;
	}

	#mainmenu a img {display: none;}

	#mainmenu li:hover > a, #mainmenu ul#menu-main-menu > li.current-menu-ancestor > a, #mainmenu ul#menu-main-menu > li.current-menu-item > a, #mainmenu ul#menu-main-menu > li.current-page-parent > a {
		background-color: #106099 !important;
		color: #dfae27;
	}
	#mainmenu ul#menu-main-menu ul.sub-menu li.current-menu-item > a {
		background-color: #652985 !important;
	}

	/* if Submenu -------------------------------------------------- */
	#mainmenu ul#menu-main-menu > li > ul.sub-menu {
		display: none;
	}

	#mainmenu ul#menu-main-menu > li:hover > ul.sub-menu {display: block;}

	#mainmenu ul#menu-main-menu > li.has_sub:hover > a {
		background: url(images/mobile_nav_arrow2.png) no-repeat 290px;
	}

	#mainmenu ul ul li {
		display: block;
	}

	#mainmenu ul ul a {
		color: #fff;
		font-size: 0.8em;
		padding-left: 30px !important;
	}
	
	#mainmenu ul#menu-main-menu > li.has_sub > ul.sub-menu > li.has_sub > a {
		background: url(images/mobile_nav_arrow3.png) no-repeat 290px;
	}

	#mainmenu ul ul ul a {
		padding-left: 50px !important;
	}
}