/*   
Description: WOW! mySite is a website optimised for mobile devices.
Author: WOW! Mobile Solutions
Author URI: http://www.wowmysite.co.uk
License: GNU General Public License
License URI: license.txt
*/

/* --- Imports ---  */
@import url("base.css");

/*
CSS Styling Sections
--------------------
1. General Styles
2. Page Specific Styles
3. Navigation
4. Resources
5. Miscellaneous
6. High Definition Display
*/

/* --- 1. General Styles --- */

/* --- Definitions --- */
html {overflow-y: scroll; -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */ }
body, html {height:100%;}
body {
	font-family: sans-serif; 
	font:13px/17px; 
	background-color:#032b3f;
	color:#333;
	text-shadow: 0px 1px 0 #ffffff;
}

/* -- Add your Google Web font here before important to override above -- */
body, 
input, 
input[type="text"],
textarea { !important; }

/* --- Global Classes --- */
 
.clear {clear:both; }
.hide {display: none;}
.show {display:block;}
.inline {display:inline;}
.float-left {float:left; }
.float-right {float:right; }
.center {text-align:center;}
.shadow {text-shadow: 0px -1px 0 #333333;}
 
.no-padding {
	padding:0 !important;
}

.no-margin {
	margin:0 !important;
}

.noindent { margin-left:0; padding-left:0; }
.nobullet { list-style:none; list-style-image:none; }

/* --- Headings --- */

h1 {margin: 0 0 2px; font-size:22px; line-height:26px; font-weight:bold; color:#116285; }
h2 {margin: 0 0 5px; font-size:18px; line-height:24px; font-weight:bold; color:#116285; }
h3 {margin: 0 0 5px; font-size:16px; line-height:20px; font-weight:bold; color:#116285; }
h4 {margin: 0 0 5px; font-size:14px; line-height:14px; font-weight:bold; color:#116285; }
h5 {margin: 0 0 5px; font-size:12px; line-height:12px; font-weight:bold; color:#116285; }
h6 {margin: 0 0 5px; font-size:10px; line-height:10px; font-weight:bold; color:#116285; }

/* --- Paragraphs --- */

p{margin: 0 0 12px; font-size: 13px; line-height:20px;}
p:last-child {margin:0;}
p.date{margin:0;}
p.date-single{ margin:0 0 5px;}
p.success{margin:0 0 12px 12px; font-weight:bold; font-size: 15px;}

/* --- Links --- */

a {color: #333;}
a:visited {color: #333;}

/* --- Font emphasis --- */

strong {font-weight: bold;}
em {font-style: italic;}

/* --- Ordered/Unordered Lists ---  */
.content ul, .content ol{
	font-size:13px; 
	line-height:20px;
	margin-bottom:15px;	
	padding:0 20px;
}

.content ul {
	list-style-type:disc;
}

.content ol{
	list-style-type:decimal;
}

/* --- Layout --- */

/* Header */

#banner {
	clear:both;
	position:relative;
	text-align:center;
	height:58px;
	background-color:#fff;
	background-size:auto 58px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-image:url('../images/logo.png');
}

#banner a {
	display:block;
	height:58px;
}

/* --- Logo top --- */
#logo-top {
	margin-left:5px;
	width:60%;
	display:block; 
	height:44px;
	line-height:44px;
	background-size:auto 44px;
	background-position:0 50%;
	background-repeat:no-repeat;
}

#logo-top{
	background-image:url('../images/logo-top.png');
}
/* Footer */

#footer {
	text-align:center; 
	height:125px; 
	color:#182021;
	background-color:#9273a3 ;
	padding-top:1px;
	clear:both;
}

ul.bottom-nav li {
	float: left;
	display: block;
	padding: 0;
	width: 33%;
	height: 28px;
	list-style: none;
}

ul.bottom-nav li a {
	display: block;
	margin: 0 1px 0 0;
	width: auto;
	height: 28px;
	color: #ffffff;
	background-image:url('../images/btn-bg-footer.png');
	background-repeat:repeat-x;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	line-height: 28px;
	overflow: hidden;
	text-decoration:none;
}

ul.bottom-nav a.first-child {
	width: 33%;
}

ul.bottom-nav li.mid {
	width: 34%;
}

ul.bottom-nav a.last-child {
	margin-right: 0;
	width: 33%;
}

#footer p {
	color:#fff;
	font-size:11px;
	margin-top:5px;
}

#footer ul {
	margin:0;
	padding:0;
}

/* --- Featured image --- */
#featured-image {
	 text-align: center;
}

#featured-image img {
	width:100%;
	vertical-align: bottom;
	border:none;
}

/* --- Content holder --- */
.content {
	padding:10px;
	background-color:#ffffff;
}

/* --- Page title bar --- */
.strip {
	position:relative;
	background-image: url('../images/bar-bg.png');
	background-color: #9273a3;
	background-repeat: repeat-x;
	font-weight:bold;
	height:40px;
	line-height:40px; 
	font-size:18px;
	color:#fff;
}

/* --- 2. Page Specific Styles --- */

/* --- Social media icons - social.php --- */
ul#social-index {
	clear:both;
	margin:0 auto !important; 
	display:block; 
	width:76px;
}

ul#social-index li{
	float:left;
}

a.btn-facebook {
	display:block;
	width:33px;
	height:33px;
	background-image: url('../images/weixin.png');
	background-position: 0 0;
	background-repeat: no-repeat;
}

a.btn-twitter {
	display:block;
	width:33px;
	height:33px;
	background-image: url('../images/weibo.png');
	background-position: 0 0; 
	background-repeat: no-repeat;
}

/* --- Contact --- */

span.phone {
	background-image: url('../images/btn-telephone.png');
	background-position: 0 0; 
	background-repeat: no-repeat;
	display:block;
	width:80px;
	height:20px;
	margin:0 auto;
	padding-left:20px;
	padding-top:3px;
}

span.email {
	/* --- background-image: url('../images/weixi.png'); --- */
	background-position: 8px 0; 
	background-repeat: no-repeat;
	padding-left:14px;
	margin:0 auto;
	width:95px;
	height:17px;
	display:block;
}

.email-adjust {
	padding-top:12px;
	height:30px !important;
}

span.google-map {
	background-image: url('../images/btn-google-map.png');
	background-position:0 0; 
	background-repeat: no-repeat;
	margin-left:13px; 
	padding-left:12px; 
	padding-top:5px; 
	display:block;	 
	font-size:16px;
	height:20px;
}

#contact-info {
	margin:10px;
	margin-top:0;
}

#contact-info a.contact-detail, #contact-info p {
	display:block;
	height:100%;
	margin-left:90px;
	margin-top:3px;
	font-size:14px;
	text-decoration:none;
}

#contact-info div {
	padding:15px 0;
	border-bottom: 1px solid #aeaeae;
	clear:both;
	font-size:16px;
}

#contact-info div h3 {
	float:left;
}

#call-to-action {
	clear: both;
	height: 64px;
	background-color:#032231;
}

.btn-container {
	height:60px;
	width:50%;
	float:left;
	text-align:center;
}

a.quick-contact-button {
	height:35px;
	text-align:center;
	margin:10px 6px 20px;
	display:block;
	border-radius: 15px; 
	-moz-border-radius: 15px; 
	-webkit-border-radius: 15px;
	color:#fff;
	font-weight:bold;
	font-size:20px;
	text-decoration:none;
	background-image: url('../images/menu-gradient.png');
	background-color: #0d6083;
	background-repeat: repeat-x;
}

/* --- Contact form --- */

input[type=text], textarea {
	height: 38px;
	margin: 0 0 10px 0;
	padding: 0 2%;
	background: #fff;
	display:block;
	border-radius: 15px; 
	-moz-border-radius: 15px; 
	-webkit-border-radius: 15px;
	font-size: 14px;
	color: #333; 
	border: 1px solid #aeaeae;
	width:95%;
	font-family: Helvetica, Arial, sans-serif; 
}

#commentsText {
	min-height:150px;
	padding: 2% 2%;
}

input[type=submit] {
	width:100%;
	height: 42px;
	line-height: 38px;
	margin: 0 0 10px 0;   
	border: none;
	font-weight:bold;
	cursor: pointer;
	color:#fff;
	background-image:url('../images/menu-gradient.png');
	background-color: #0d6083;
	background-repeat: repeat-x;
	font-size: 16px;
	border-radius: 15px; 
	-moz-border-radius: 15px; 
	-webkit-border-radius: 15px;
	font-family: Helvetica, Arial, sans-serif; 
}

ul.contactform{
	list-style-type:none;	
	padding: 0 2% 0 2%;
}

/* --- Find Out More --- */

.find-out-more { 
	height:44px;
	line-height:44px; 
	text-align:center; 
	padding-left:0;
	background-image: url('../images/bar-bg.png');
	background-color: #032b3f;
	background-repeat: repeat-x;
	font-weight:bold;
	font-size:18px;
	color:#fff;
}

/* --- Blog --- */

#comment {
	height:150px;
	padding: 2% 2%;
}

.fn, .says, .comment-awaiting-moderation {
	font-size:14px;
}

.comment-meta a {font-size:13px; font-style:italic;}

#submit{
	text-shadow: 0px -1px 0 #000000;
}

li.comment {
	line-height:18px;	
}

.avatar {
	margin-top:8px;
}

#cancel-comment-reply-link {
	margin-bottom:5px;
}

#cancel-comment-reply {
	margin-bottom:10px;
}

/* --- Gallery - gallery-template.php --- */

.galleryHead {
	text-align:center;
	margin-bottom:10px;	
	color:#e43f14;
}

#gallery {
	margin:0;
	list-style:none;
	padding:0;
}

.gallery {
	padding: 0 0 10px 0;
	overflow: auto;
}

.gallery li {
	float: left;
	padding: 0 1px 1px 0;
}

.gallery li img {
	display: block;
	border: 1px solid #dddddd;
	width: 72px;
	height: 72px;
}

/* --- Posts --- */

.post {
	width:100%; 
	border-bottom:1px solid #cccccc;  
	float:left; 
	clear:both; 
	background-image: url('../images/arrow-grey.png');
	background-position: 100% center;
	background-repeat: no-repeat;
}

.content .post:last-child{
	//border-bottom:none !important; 
}

.post a {
	display:block; 
	text-decoration:none; 
	margin:12px;
}

.post-container {
	 color:#333; 
	 display:block; 
	 margin-right:25px;
}

.post-container p {
	line-height:20px;	
}

.post-container h3 {
	 margin-bottom:0;	
}

.post-container h2 {
	 margin-bottom:0;	
	 color:#116285;
	 font-size:14px;
}

.post-thumb {
	float:left;
	margin-right:3%;
	width:94px;
	height:86px;
}

.post-thumb-s3 {
	float:left;
	margin-right:3%;
	width:65px;
	height:86px;
}

.post-single {
	width:100%; 
	clear:both;
}

.post-thumb-single {
	margin-bottom:10px;
	width:100%;
	vertical-align:bottom;
}

/* --- Video -- */

.videoduration {
	display: inline-block;
	position:absolute; 
	top:78px; 
	left:72px; 
	background-color:#000; 
	color:#fff !important; 
	font-size:10px; 
	line-height:10px;
	height:10px;
	padding:2px;
	font-weight:bold;
	border-radius: 3px; 
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px;
	vertical-align:top;
	cursor:pointer;
}

.video-bg {
	background-color:#000;
}

.video-container {
	 width:280px; 
	 margin:0 auto;	
	 height:158px;
}

/* --- Archives and Search */
.next-posts, .prev-posts{
	font-size:12px;
	line-height:12px;
	margin:0 0 12px;
}

.single-search-result {
	margin:0 0 12px;	
}

.meta { 
	font-size:13px; 
	line-height:22px;
}

label {
	line-height:24px;
	font-weight:bold;
	color:#116285;
	font-size:16px;
}

/* --- 3. Navigation --- */

/* --- Buttons --- */

a.btn-home {
	position:absolute;
	display:block;
	left:10px;
	top:5px;
	height:34px; 
	width:42px;
	background-image:url('../images/btn-home.png');
	background-repeat:no-repeat;
	background-position:0 0;
}

a#btn-menu{
	position:absolute;
	right:0;
	top:0;
	text-decoration:none;
	color:#FFF;
	display:block;
	height:44px;
	line-height:44px;
	font-weight:bold; 
	font-size:16px;
	width:104px;
	padding-top:1px;
	background-image:url('../images/btn-main-menu.png');
	background-repeat:no-repeat;
	background-position:0 0;	
}

a#btn-menu span {
	display:block;
	padding-left:34px;
}

a.btn-more {
	position:absolute; 
	right:12px; 
	top:4px; 
	display:block; 
	height:34px; 
	width:59px;
	line-height:34px;
	font-size:14px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	text-align:center;
	background-image:url('../images/bg-more.png');
	background-repeat:no-repeat;
	background-position:0 0;	
}

a.btn-shortcode {
	line-height:44px;
	height:44px;
	margin:0 0 15px;
}

a.google-btn {
	 width:150px;
	 margin:3px 0 0 90px;
}

/* --- Menu dropdown --- */

.top-nav {
	 height:44px;
	 background-color:#9273a3;
	 position:relative;
	 background-image:url('../images/menu-gradient.png');	
}

/* --- Pagination --- */

.pagination {
 	margin:	15px auto 15px auto;
	width: 300px;
	height: 25px;
	padding:0 !important;
}

.pagination li {
	float: left;
	display: block;
	padding: 0;
	width: 45%;
	height: 25px;
	line-height:25px;
	list-style: none;	
	text-align:center;
}

.pagination li.mid-page {
	width: 10%;
}

.pagination li.prev-page a {
	float: left;
	display: block;
	width: 148px;
	height: 25px;	
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	overflow:hidden;
	color:#fff;
	text-decoration:none;
	background-color:#0d6083;
	background-image:url('../images/button-pagination.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}

.pagination li.next-page a {
	float: right;
	display: block;
	width: 148px;
	height: 25px;	
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	overflow:hidden;
	color:#fff;
	text-decoration:none;
	background-color:#0d6083;
	background-image:url('../images/button-pagination.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}

.page_navigation {
	margin: 15px auto 15px auto;
	width: 306px;
	height: 25px;
	padding: 0 !important;	
	text-shadow: 0px -1px 0 #333;
}

a.next_link, a.previous_link {
	float: left;
	display: block;
	width: 148px;
	height: 25px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
	color:white;
	text-decoration: none;
	background-color: #0D6083;
	background-image: url('../images/button-pagination.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	line-height:25px;
	
}

a.next_link {
	margin-left:4px;	
}
	

#menu-main-nav{
	list-style:none; 
	min-height:44px;
	text-shadow: 0px -1px 0 #000000;
	display:none;
}

#menu-main-nav li{
	position:relative;
}

#menu-main-nav li div{
	position:absolute;
	top:0;
	height:44px;
	width:44px;
}

#menu-main-nav a{ 
	color: #fff; 
	font-size:16px; 
	font-weight:bold;
	height:44px;
	line-height:44px; 
	display: block;
	padding-left:12px;
	text-decoration: none;
	background-image: url('../images/arrow-white.png');
	background-position: 100% center;
	background-repeat: no-repeat;
}

#menu-main-nav li {
	background-color: #9273a3;
	background-image: url('../images/btn-bg.png'); 
	background-repeat: repeat-x;
}

/* --- Content navigation --- */

#sub-nav li {
	height:44px;
	background-color:#025172;
	background-image:url('../images/btn-bg.png');
	background-repeat: repeat-x;
}

#sub-nav a {
	display:block;
	height:44px; 
	text-decoration: none; 
	line-height:44px;
	background-image: url('../images/arrow-white.png');
	background-position: 100% center;
	background-repeat: no-repeat;
}

#sub-nav .sub-nav-title {
	height:44px;
	padding-left: 12px;
	color: #fff;
	font-size: 17px; 
	font-weight:bold;
}

/* ------ 4. Resources --------- */

/* Lists */

ul.unorderedlist {
	list-style-type:disc;
	margin:0 0 15px;	
	padding:0 20px;
}

ul.unorderedlist li {
	font-size:13px;
}

ol.orderedlist {
	list-style:decimal;
	margin:0 0 15px;	
	padding:0 20px;
}

ol.orderedlist li {
	font-size:13px;
}

/* Tabs */

.multiContentTab {
	padding:13px 4px 4px 4px;
}

.multiContentTab .contents {
	border:1px solid #000000; 
	margin-top:20px;
	padding:10px;
	background-color:#fff;
	-webkit-border-radius: 5px;
	-webkit-border-top-left-radius: 0;
	-moz-border-radius: 5px;
	-moz-border-radius-topleft: 0;
	border-radius: 5px;
	border-top-left-radius: 0;
	line-height: 22px;
	font-size: 13px;
	border:0;
}

.multiContentTab .titles li {
	border:1px solid #000000; 
	display:inline; 
	padding:10px; 
	text-decoration:none; 
	cursor:pointer;
	background-color:#ccc;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border:0;
	font-size:16px;
}

.multiContentTab .titles li.current {
	font-weight:bold;
	background-color:#fff;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border:0;
	text-shadow:none;
}

.multiContentTab ul {
	list-style:none;
	padding-left:0;
	margin-bottom:10px;
}

.titles {
	line-height:42px;	
}

.multiContentTab .contents {
	margin-top:-2px;	
}

/* Accordion */
.accordion, .accordion .subContent  {
	border:1px solid #000000;
	padding:20px;
	border: 0;
	padding:3px;
	margin:0 0 15px;
}

.accordion .subTitle {
	text-decoration:underline;
	cursor:pointer;
	line-height:42px;
	background-color:#096B93;
	background-image:url('../images/bar-bg.png');
	background-position:0 -1px;
	padding:0 10px;
	text-decoration:none;
	color:#fff;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin:1px;
	font-weight:bold;
	text-shadow:none;
}

.accordion .subContent {
	background-color:#fff;	
	line-height: 22px;
	font-size: 13px;
	padding: 8px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin:1px;
}

/* --- 5. Miscellaneous --- */
.mt-0 {margin-top:0px !important;}
.mb-12 {margin-bottom:12px !important;}
.mb-5 {margin-bottom:5px !important;}
.ml-10 {margin-left:10px;}
.ml-3 {margin-left:3px;}
.pl-15 {padding-left:15px !important;}
.pl-12 {padding-left:12px !important;}
.pb-0 {padding-bottom:0;}
.ptb-5 {padding:5px 0;}
.pt-8 {padding-top:8px;}
.mr-5 {margin-right:5px;}
.p-relative {position:relative;}

/* --- 6. High Definition Display --- */

/* - CSS3 Media Query to target iPhone 4 and 
above Retina displays which have double screen resolution - */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5) {
		
		#banner {
			background-image:url('../images/logo@2x.png');
		}
		
		#logo-top{
			background-image:url('../images/logo-top@2x.png');
		}
		
		#menu-main-nav li {
			background-image: url('../images/btn-bg@2x.png'); 
			background-size: auto 44px;
		}
		
		#sub-nav li {
			background-image: url('../images/btn-bg@2x.png');
			background-size:  auto 44px;
		}
		
		.find-out-more { 
			background-image: url('../images/bar-bg@2x.png');
			background-size:  auto 43px;
		}
		
		.strip {
			background-image: url('../images/bar-bg@2x.png');
			background-size:  auto 43px;
		}

		.accordion .subTitle {
			background-image: url('../images/bar-bg@2x.png');
			background-size:  auto 43px;
		}
		
		ul.bottom-nav li a {
			background-image: url('../images/btn-bg-footer@2x.png');
			background-size:  auto 28px;
		}
		
		a.btn-home {
			background-image: url('../images/btn-home@2x.png');
			background-size: 42px auto;
		}
		
		a#btn-menu{ 
			background-image: url('../images/btn-main-menu@2x.png');
			background-size: 104px auto;
		}
		
		span.phone { 
			background-image: url('../images/btn-telephone@2x.png');
			background-size: 17px auto;
		}
		
		span.email { 
			/* -- background-image: url('../images/btn-email@2x.png'); --*/
			background-size: 25px auto;
		}
		
		span.google-map { 
			background-image: url('../images/btn-google-map@2x.png');
			background-size: 15px auto;
		}	
		
		a.btn-more { 
			background-image: url('../images/bg-more@2x.png'); 
			background-size: 59px auto;
		}
	    
		.post { 
			background-image: url('../images/arrow-grey@2x.png'); 
			background-size: 34px auto;
		}
		
		#menu-main-nav a {
			background-image: url('../images/arrow-white@2x.png');
			background-size: 34px auto;
		}
		
		#sub-nav a{
			background-image: url('../images/arrow-white@2x.png');
			background-size: 34px auto;
		}
		
		a.btn-facebook {
			background-image: url('../images/weixin.png');
			background-size: 33px auto;
		}
		
		a.btn-twitter {
			background-image: url('../images/weibo.png');
			background-size: 33px auto;
		}
		
		/* White */
		
		body.white-theme #sub-nav a {
			background-image: url('../images/arrow-grey@2x.png') !important;
			background-size:34px auto;
		}
		
		body.white-theme #menu-main-nav a {
			background-image: url('../images/arrow-grey@2x.png') !important;
			background-size:34px auto;
		}
}