/** Style sheet by Katelyn Le Breton - Kat Digital
 * email: hello@katdigital.com.au
 * */

/** COLORS
 * Dark Green: #006666
 * Light green: #BFCFCC
 * */

/** GLOBAL TYPE AND LINKS **/
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
}

h1, h2, h3 {
	color: #006666;
	text-align: left;
}

h1 {
	font-size: 3em;
	margin-bottom: 0px;
}

/** h1 heading formating **/
.heading {
	padding: 40px 5% 30px 5%;
	background-color: #ffffff;
}

.heading .divider2 {
	width: 100% !important;
	display: inline-block;
}

h2 {
	font-size: 2em;
	margin-bottom: 2px;
}

h3, h4 {
	font-size: 1.5em;
}

p {
	line-height: 1.5;
}

a:link, a:visited {
	color: #4E5869;
	text-decoration: underline;
}

a:hover, a:active, a:focus { 
	text-decoration: none;
}

.position {
	color: black;
	font-style: italic;
	font-size: 20px;
	margin-bottom: 0px;
}

.source {
	font-size: 11px;
	background-color: #fff;
	color: #000 !important;
}

.source a {
	color: #000 !important;
}

.special {
	background-color: #006666;
	color: #fff;
	line-height: 1.35;
	padding-bottom: 5px;
}

.sponsor-link {
	color: #fff !important;
	background: #000;
	padding: 5px 10px;
	border-radius: 8px;
}

/** image link formating **/
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: thin;
	border-color: #699;
}

img.shadow {
	background: url(shadow-1000x1000.gif) no-repeat right bottom;
	padding: 5px 10px 10px 5px;
}


/** page setup **/
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	line-height: 1;
	background: #fff;
	padding: 0;
	margin: 0;
	width: 100%;
}

.header {
	background: #ffffff;
	width: 100% !important;
	display: inline-block;
}
.cta {
	width: 100%;
}

.logo, .cta-block {
    width: 100%;
    text-align: center;
    padding: 10px 0px 0px 0px;
}
.logo img {
    width: 100%;
    height: auto;
}

.cta-block {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 10px 0px 20px 0px;
    font-size: 18px;
    line-height: 1.5;
}

.cta-block a {
	text-decoration: none;
}

.cta-block img {
	width: 1.5em;
	height: auto;
	margin-bottom: -2px;
}

/** Navbar background **/
.divider {
	width: 100%;
	background-color: #006666;  
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2em;
	color: #ffffff;
	line-height: 1.3;
}

.topnav {
	padding: 10px 5% 10px 5% !important;
}

.topnav li {
	list-style: none;
	display: inline-block;
	padding-left: 50px;
	text-decoration: none;
}

.topnav li:first-child {
	list-style: none;
	display: inline-block;
	padding-left: 20px;
}

.topnav a {
	color: #ffffff !important;
	text-decoration: none;
}

.topnav a:hover {
	border-bottom: 4px solid #BFCFCC;
	padding-bottom: 10px;
	color: #BFCFCC !important;
}

.topnav .active {
	color: #fff !important;
	border-bottom: 4px solid #BFCFCC;
	padding-bottom: 10px;
}


/** LINE DIVIDER - mostly for use under H1 **/
    .divider2 {	
        background: #BFCFCC;
        height: 4px;
        margin: 5px 0px 5px -20px;
        text-align: left;
    }

/** all CONTENT below Nav Bar **/
.content-container {
    width: 100%;
    margin: auto;
    background-color: #ffffff;
    padding-bottom: 50px;
}

.sponsor {
    width: 100%;
    margin: auto;
    background-image: url('images/Gold-Coast-beach-Surf-Lifesaving-Flags.jpg');
	background-size: cover;
	background-position: center;
    padding-bottom: 50px;
}

.content {
    padding: 30px 5%;
    text-align:justify;
	vertical-align: top;
	width: 90%;
}

/** style content **/
.content ul, .content ol { 
	padding: 0 15px 15px 40px; 
}

ul.items li{
	list-style-type:none;
	font-size: inherit;
	line-height:2.2;
}

ul.items li a {
	color: #000;
}

ul.items li:before {
	content: '» ';
}

ul.points li{
	font-size: inherit;
	line-height:2.2;
}

.tip {
	font-size: 12px;
	list-style: none;
}

/** structures continued **/

.body-container {
	padding: 40px 0 0 0;
}

.sideright {
	padding: 20px 5% 0px 5%;
	width: 95%;
	background:#fff;
}

.sponsor-sideright {
	padding: 20px 5% 0px 5%;
	width: 95%;
}


/** Full width section **/
.full-width {
    width: 100%;
    text-align: justify;
    background-color: #fff !important;
    display: table;
    margin: 0px;
	padding-bottom: 5%;
}

.faq-container, .body-container  {
    padding: 40px 5% 0px 5%;
}

.body-container .points li {
	margin-left: 5%;
}

.mid-container {
    padding: 0px 5% 40px 5%;
}

/** BOTTOM - LOGOS **/
.bottom_banner .divider2 {
	width: 100%;
	margin: 0px;
}

.bottom-logos {
    width: 100%;
    border: 0px;
    background-color: #fff;
}

.bottom-logos td {
    text-align: center;
}

.logos-banner {
	padding: 10px 0;
}

/** FOOTER **/
/** footer contact details container **/
.footer-contact {
    width: 100%;
    font-size: 20px;
    background-color: #fff;
    text-align: center;
	margin-top: 40px;
}

/** business hours table **/
.footer-hours {
	border: 0px;
	width: 100%;
	margin-bottom: 40px;
    border-collapse: collapse;
}

.footer-hours th h3 {
	text-align: center;
	font-size: 2.5em;
}
.footer-hours td {
	font-size: 2em;
	text-align: left;
}

.footer-hours td {
  border-bottom: 1px solid #BFCFCC !important;
  padding-top: 5px;
}

.footer-hours td:first-child {
  text-align: right;
	padding-right: 2% !important;
}

/** contact details table **/
.contact-table {
    width: 100%;
    font-size: 2.6em;
}

.contact-table td {
	text-align: left;
	padding-top: 2px;
	color: #006666;
	line-height: 1.5;
	padding-bottom: 10px;
}

.contact-table a {
	color: #006666;
}

.contact-table td:first-child {
	text-align: right;
	width: 20%;
	padding-right: 2% !important;
}
.contact-table img {
    width: 1em;
    height: auto;
}

/** COPYRIGHT BAR **/
.copyright-contain {
	text-align: center;
	background: #BFCFCC;
    font-size: 1.6em;
    width: 100%;
}

.copyright {
    padding: 15px 5% 10px 5%;
}

.copyright a {
	color: black;
	text-decoration: none;
}


/** SERVICES PAGE **/
.pageTop a {
	font-size: 12px;
	color: #000 !important;
	text-align: left;
}

.faq-container h2 {
    margin-top: 20px;
    text-align: center;
}

.serv-img {
    width: 100%;
    text-align: center;
}

.thumb-img { 
	width: 80%;
	height: auto;
    margin: 20px 0;
}


/** FAQ PAGE **/
.pageBack {
	font-size: 14px;
	color: #000; 
}

.fltlft {
	border-spacing: 0px;
}

.fltlft .textAppear {
	text-align: justify;
	font-size: 2em;
}

.fltlft td {
	font-size: 2em;
}

.fltlft td:first-child img {
	width: 90%;
	height: auto;
	margin: 5% 5% 5% 0px;
	border: 2px solid #006666;
}

.fltlft td:nth-child(2) img {
	width: 90%;
	height: auto;
	margin: 5% 0px 5% 5%;
	border: 2px solid #006666;
}

/** contact page **/
.map-container {
	width: 100%;
	margin: 0px 0px 30px 0px;
}

.half-col {
	width: 100% !important;
}

.contact-details, .hours, .address {
	width: 90%;
	font-size: 2.5em;
	margin-bottom: 30px;
}

.contact-details th, .hours th, .address th {
	text-align: left;
}

.hours td {
	vertical-align: bottom;
	border-bottom: 1px solid #BFCFCC !important;
}

/** 404 Error Page **/
.error-bg {
	background-image: url('images/dentures-glasses.jpg');
	background-size: cover;
	background-position: bottom;
	padding: 40px 0 50px 0;
	min-height: 300px;
}
.error-heading h1 span, .error-heading h2 span {
	color: #006666;
	background: #fff;
	padding: 5px 10px;
}
.return-btn {
	text-align: center;
	margin-top: 30px;
}
.return-btn a {
	background-color: #fff;
	padding: 5px 10px;
	border-radius: 8px;
	color: #006666;
}

/** browser widths larger than 993px **/
@media screen and (min-width: 993px) {
	/** Typography **/
	h1 {
		font-size: 35px;
	}
	h2 {
		font-size: 30px;
	}
	h3 {
		font-size: 26px;
	}
	h4 {
		font-size: 24px;
	}
	h5 {
		font-size: 22px;
	}
	
    /** page setup **/
	body {
		width: 90%;
		margin: 0 5%;
		background: #BFCFCC;
	}
	
    /** header **/
    .logo {
        display: table-cell;
        padding: 10px 0px 10px 5%;
        width: 45%;
        float: left;
        text-align: left;
    }
    
    .logo img {
        width: 500px;
        height: auto;
    }
	
	.logo2 {
		width: 350px;
		height: auto;
	}
    
    .cta-block {
        display: table-cell;
        padding: 30px 5% 10px 0px;
        width: 45%;
        float: left;
        text-align: right;
        font-size: 24px;
    }
    
    .cta-block img {
        width: 26px;
        height: auto;
        margin-bottom: -2px;
    }
    .address-cta {
        font-size: 18px;
    }
    
    /** NAV BAR **/
    .divider {
        font-size: 18px;
		line-height: 1.5;
    }
    
    
    /** CONTENT STRUCTURES **/
	.content-container {
		display: table;
		width: 100%;
	}
	
	.sponsor {
		display: table;
		width: 100%;
	}
	
    .content {
        width: 60% !important;
		display: table-cell;
    }
    
    /** right content column **/
    .sideright {
        width: 40% !important;
        display: table-cell;
		padding: 0px 5% 0px 0px;
    }
	
	.sponsor-sideright {
		width: 40% !important;
		display: table-cell;
		padding: 0px 5% 0px 0px;
    }
		    
    .img-contain {
        padding: 30px 0px 10px 0px;
    }
    
    /** FOOTER **/
	.col1 {
		text-align: left;
	}
	.col2 {
		margin-top: 50px;
	}
	
    .footer-contact {
        background-color: #fff;
        display: table;
		width: 95%;
		padding: 20px 2.5% 10px 2.5%;
		margin-top: 0px;
    }
	
	.footer-hours th h3 {
		font-size: 20px;
		text-align: left;
	}
	.footer-hours tr td:first-child {
		width: 50%;
	}
	.footer-hours td {
		text-align: left !important;
	}
    
    .footer-hours td, .contact-table td {
        font-size: 18px;
		vertical-align: bottom;
    }
	
	.contact-table td:first-child {
		vertical-align: middle;
	}
    
    .contact-table {
        padding-left: 10px;
        width: 100%;
        margin-right: 0;
        right: 0;
    }
	
    .contact-table .icon {
        width: 30px;
		height: auto;
        text-align: right;
        padding-right: 5px;
    }
	
	.contact-table tr td:first-child{
		width: 35px;
	}
    
    .col1 .logo2 {
		margin-left: 0px !important;
	}
	
	.col1 {
        display: table-cell;
		width: 50%;
        float: left;
	}

	.col2 {
        display: table-cell;
		width: 50%;
        float: right;
		text-align: right;
	}
    
    /** copyright bar **/
    .copyright {
        font-size: 12px;
        display: inline-block;
        position: relative;
    }
    
    
    /** services page **/	
    .faq-container h2 {
        text-align: left;
    }
    .thumb-img { 
        float: right;
        margin: 0 0 10px 20px;
        width: 200px;
        height: auto;
    }
	
	/** FAQ PAGE **/
	.fltlft .textAppear {
		font-size: 18px;
	}
	
	/** CONTACT PAGE **/
	.half-col {
		width: 45% !important;
		padding: 20px 5% 30px 0px;
		display: table-cell;
	}
	
	.contact-details, .hours, .address {
		width: 100%;
		font-size: 20px;
		margin-bottom: 20px;
		border-spacing: 0px;
	}
			
	.address td:first-child {
		vertical-align: top;
	}
}