/*
Theme Name: Hillarys Boat Harbour
Author: MediaOnMars
Author URI: https://www.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; border-radius: 0;}

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

body {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	color: #31383b;
	background: url(images/bg.jpg) repeat left top;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto Slab', serif;
	font-weight: normal;
}

h2 {
	font-size: 30px;
	color: #0ca3c9;
	background: url(images/h2_bg.jpg) no-repeat left bottom;
	padding-bottom: 15px;
	margin-bottom: 14px;
}
h2 a {color: #0ca3c9;}
h2 a:hover {color: #166e8d;}

h3 {
	font-size: 18px;
	margin-bottom: 8px;
}

a {
	color: #166e8d;
	text-decoration: none;
}
a:focus,
a:active,
a:hover {
	color: #0ca3c9;
	text-decoration: none;
}

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

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

.wrapper {
	max-width: 1160px;
	min-width: 320px;
	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 {
	height: 154px;
	background: #fff;
	margin-bottom: 10px;
	padding: 16px 20px 0 55px;
}

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

.header_right {
	float: right;
	width: 700px;
	text-align: right;
	padding-top: 3px;
}

.header_right .widget {
	margin-bottom: 26px;
	color: #166e8d;
	font-size: 16px;
	font-family: 'Oswald', sans-serif;
}

.header_right_inner {margin-bottom: 22px;}

.searchform {
	float: right;
	width: 250px;
	margin-left: 20px;
}

.searchform input.field {
	float: left;
	width: 200px;
	height: 14px;
	padding: 8px 10px;
	background: #efefef;
	color: #166e8d;
	font-size: 14px;
	font-family: 'Roboto Slab', serif;
	border: none;
}

.searchform input.submit {
	float: left;
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	text-transform: uppercase;
	text-indent: -9999px;
	background: url(images/icon_search.jpg) no-repeat left top;
	cursor: pointer;
	border: none;
}

.socials {
	white-space: nowrap;
	float: right;
}

.socials li {display: inline;}

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

.socials li.icon_gplus a {background: url(images/icon_google.jpg) no-repeat left top;}
.socials li.icon_fb a {background: url(images/icon_fb.jpg) no-repeat left top;}
.socials li.icon_twitter a {background: url(images/icon_twitter.jpg) no-repeat left top;}

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

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

#topmenu li {
	display: inline;
	margin-left: 30px;
	font-size: 18px;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
}

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

.show_nav {display: none;}

#mainmenu {
	font-size: 27px;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	padding: 23px 25px 25px;
	background: #0ca3c9;
	margin-bottom: 10px;
}

#mainmenu li {
	display: inline;
	margin: 0 19px;
}

#mainmenu a {color: #fff;}
#mainmenu li.current-menu-item > a, #mainmenu a:hover {color: #0d4d64;}

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

#content p, #content ol, #content ul {margin-bottom: 14px;}

#content ol, #content ul {margin-left: 20px;}

#content p.read_more {
	font-family: 'Roboto Slab', serif;
	text-align: right;
	margin-top: 4px;
	margin-bottom: 20px;
}

#content p.read_more a {
	display: inline-block;
	white-space: nowrap;
	border: 1px solid #e3e3e3;
	padding: 8px 12px;
	color: #c09a51;
	font-size: 14px;
}
#content p.read_more a:hover {color: #0ca3c9;}

.columns {
	background: url(images/columns_bg.png) repeat-y left top;
}

.col {
	float: left;
	width: 320px;
	margin-right: 10px;
	padding: 25px 30px;
}
.col.last {margin-right: 0;}

.listing .date, .col .date {
	color: #0ca3c9;
	font-family: 'Roboto Slab', serif;
	margin-bottom: 5px;
}

.listing .date span, .col .date span {
	color: #ccc;
	font-size: 12px;
	text-transform: uppercase;
	margin-right: 5px;
}

#primary {background: #fff;}
body.home #primary {background: none;}

body.page #content {
	float: left;
	width: 749px;
}

body.page.home #content {
	float: none;
	width: auto;
}

body.page #content.larger {width: 100%;}

.featured {float: right;}

.col .featured {margin: 0 0 15px 15px;}

.inner {
	padding: 20px;
}

#content table {
	margin-bottom: 14px;
	width: 100%;
}

#content table a {word-break: break-all;}

#content table thead td {
	font-size: 18px;
	color: #0ca3c9;
	font-family: 'Roboto Slab', serif;
	padding: 0 20px 7px 20px;
	vertical-align: top;
}

#content table thead td:first-child {padding-left: 0;}

#content table tbody td {
	padding: 7px 20px;
	background: #fcfcfc;
	border-bottom: 2px solid #fff;
}

#content table tbody tr.even td {background: #efefef;}

.wpcf7 input.wpcf7-text, .wpcf7 input.wpcf7-captchar, .wpcf7 textarea {
	background: #efefef;
	border: 1px solid #fff;
	padding: 8px 8px;
	font-size: 14px;
	height: 14px;
}

.wpcf7 textarea {height: 200px;}

.wpcf7 input.wpcf7-submit {
	background: #0CA3C9;
	color: #fff;
	border: none;
	font-family: 'Roboto Slab',serif;
	font-size: 16px;
	padding: 8px 20px;
	cursor: pointer;
}

.page-template-archive-events #content {
	width: 100%!important;
}

.events img {
	display: none!important;
}


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

#footer {
	clear: both;
	padding: 18px 0;
	border-bottom: 3px solid #c09a51;
	margin-bottom: 10px;
	color: #166e8d;
	font-size: 12px;
}

.footer_left {
	float: left;
	white-space: nowrap;
}

.footer_right {
	float: right;
	white-space: nowrap;
}

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

/* Phones */
@media screen and (max-width: 660px) {

	#branding {
		height: auto;
		padding: 10px 20px 1px 20px;
	}

	#branding #site-title {
		text-align: center;
		float: none;
	}

	.header_right {
		float: none;
		width: auto;
		text-align: center;
		padding-top: 3px;
	}

	.header_right .widget {
		padding: 10px;
		margin-bottom: 10px;
	}

	#topmenu, #mainmenu {display: none;}
	#mainmenu {clear: both;}

	.searchform {
		margin: 0 0 20px 0;
		height: 30px;
		float: none;
		width: auto;
		clear: both;
	}

	.searchform input.field {width: 230px;	}

	.socials {float: left;}
	.socials li a {margin: 0 10px 0 0;}

	.columns {background: none;}

	.col {
		float: none;
		margin-right: 0;
		margin-bottom: 10px;
		width: auto;
		background: #fff;
	}

	body.page #content {
		float: none;
		width: auto;
	}

	#content table {max-width: 280px !important;}

	.wpcf7 input.wpcf7-text, .wpcf7 input.wpcf7-captchar, .wpcf7 textarea {width: 260px;}
	.wpcf7 input.wpcf7-captchar {width: 184px;}

	#footer {padding: 10px 10px 18px 10px;}

	.footer_left, .footer_right {
		float: none;
		width: auto;
		white-space: normal;
	}

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

	.show_nav {
		display: block;
		position: relative;
		float: right;
		text-indent: -9999px;
		height: 30px;
		width: 33px;
		background: url(images/mobile_nav_button.png) no-repeat right top;
	}

	#mainmenu {
		clear: both;
		display: none;
		z-index: 999;
		padding: 0;
		text-align: left;
	}

	#menu-main-menu {border-bottom: 1px solid #fff;}

	#mainmenu ul {
		list-style-type: none;
		position: static !important;
		font-size: 14px;
	}

	#mainmenu ul ul {
		padding-top: 0;
		width: auto !important;
	}

	#mainmenu li {
		display: block !important;
		float: none;
		position: relative;
		margin: 0 !important;
	}

	#mainmenu a {
		display: block;
		padding: 6px 20px;
		color: #fff;
		height: auto;
		line-height: auto;
		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: #5fafb2 !important;
		color: #fff;
	}
	#mainmenu ul#menu-main-menu ul.sub-menu li.current-menu-item > a {
		background-color: #5fafb2 !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: 40px !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;
	}

}