﻿/*
------------------------------------------------
 Master StyleSheet
 Developed by Monty Milne - www.DigitalCanalDesign.com
------------------------------------------------
*/


/* Stylesheet Menu Key

    @Global Resets
    @Accessibility Styles
	@Global Assets
	@Global Styles
		@Nav Menu Collapse Styles
	@Responsive Design Styles
	
*/	
	
	
/* ---------- @Global Resets ---------- */

html,
body,
h1,
h2,
h3,
ul,
li,
ol,
figure {
    margin: 0;
    padding: 0;
}

ol,
ul {
    list-style: none;
}

table {
    width: 100%;
}

img,
embed,
object,
video {
  max-width: 100%;
}

@viewport,
@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

/* ---------- End Global Resets ---------- */	


/* ---------- @Accessibility Styles ---------- */

/* Allow OUTLINE to be seen for accessibility when users TAB */

header a:focus img,
a:focus {
	outline: 1px dotted #333;
}

/* Screenreader Only */

.screenreader,
a.screenreader:link, 
a.screenreader:visited, 
a.screenreader:hover {
	color: #000;
	border: none; 
	padding: 0.5em; 
	font-weight: bold; 
	position: absolute;
	top: 0px;
	left: -9999px;
	overflow: hidden;
	width: 0;
	height: 0;
	font-size: 1em;
	z-index: 1000;
	text-decoration: underline 
}

a.screenreader:active,
a.screenreader:focus { 
	border: #000 1px dashed; 
	position: absolute;
	top: 0px;
	left: 0px;
	overflow: visible;
	width: auto;
	height: auto;
	margin: auto;
}

::selection {
	background: #000;
	color: #fff;
}

::-moz-selection {
	background: #000;
	color: #fff;
}

/* ---------- End Accessibility Styles ---------- */


/* ---------- @Global Assets ---------- */

img {
	border: 0;
}

.clear-all {
	clear: both;
}

.overflow-clear {
	overflow: auto;
}

q {
	font-style: italic;
}

hr {
    background-color: #000;
    border-width: 0;
    color: #000;
    height: 1px;
    line-height: 0;
    margin-bottom: 15px;
}

legend {
	border-bottom: 1px solid #000;
	color: #000;
	margin: 0;
	padding: 0;
}

label {
	float: left;
	width: 10%;
}

.last-label {
	float: none;
	width: 75%;
}

.first-label {
	margin-bottom: 1%;
	width: 100%;
}

input[type="text"],
select,
textarea {
	border: 1px solid #000;
	width: 50%;
}

select {
	width: 52%;
}

textarea {
	width: 61%;
}

input[type="text"]:focus,
input[type="text"]:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover{
	border: 1px dashed #666;
}

.submit-button {
	background-color: #000;
	border: 1px solid #000;	
	color: #fff;	
	font-weight: bold;	
	padding: .5% 1%;
}

.submit-button:hover {
	background-color: #fff;
	color: #000;
	cursor: pointer;
}

/* ---------- End Global Assets ---------- */


/* ---------- @Global Styles ---------- */

html {
    overflow-y: scroll;
}

body {
    color: #000;
    background-color: #f3f3f3;
    margin: 1% 0;
    font: normal 100.01%/1.5 arial, helvetica, sans-serif;
}

.container {
	margin: 0 auto;
	padding: 1%;
	max-width: 1100px;
	background-color: #fff;
}

a:link,
a:active,
a:visited {
	color: #fff;
	text-decoration: underline;
}

a:focus,
a:hover {
	color: #000;
	background-color: #fff;
	text-decoration: underline;
}

header {
	margin: 1% 0;
}

.site-map-header,
.skype-info {
	text-align: center;	
}

header h1 {
	display: inline;
}

h1,
.sitemap-pages h1 {
	font-family: transat-textmedium, arial, helvetica, sans-serif;
	text-align: center;
	font-size: 195%;
}

h1 {
	text-align: left;
	margin-bottom: 2%;
}

h2 {
	font-family: transat-textmedium, arial, helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 1.2em;
	margin-bottom: 2%;
}

h3  a {
	font-family: transat-textmedium, arial, helvetica, sans-serif;
}

p {
	padding-bottom: 2%;
}

.faq {
	font-weight: bold;
}

.faq-answer {
	font-style: italic;
	font-weight: normal;
}

.content-area {
	padding: 3%;
	border-top: 1px solid #000;
}

.page-photo {
	border: 1px solid #000;
	float: left;
	margin: 0 4% 2% 0;
	display: block;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0 0 2% 0;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
}

.main-nav {
	overflow: auto;
	padding: 1% 0;
}

.main-nav li {
	display: block;
	font-family: transat-textmedium, arial, helvetica, sans-serif;
	margin-right: 2%;
}

.main-nav a {
	background-color: #000;
	color: #fff;
	padding: 1% 2%;	
	font-weight: bold;
	text-decoration: none;
}

.main-nav li a:focus,
.main-nav li a:hover {
	color: #000;
	background-color: #fff;
	border: 1px dashed #000;
}

.main-nav li a,
.main-nav li a:hover {
	border: 1px solid #000;
    float: left;
    margin-bottom: 2%;
    margin-right: 1%;
}

.homepage-tabs {
	margin-bottom: 2%;
}

.homepage-tabs div {
	background-color: #000;
	text-align: center;
}

.homepage-tabs div a {
	border: 1px solid #fff;
	color: #fff;
	display: block;
	font-family: transat-textmedium,arial,helvetica,sans-serif;
	font-weight: bold;
	padding: 2% 0;
	text-decoration: none;
}

.homepage-tabs > div > a:focus,
.homepage-tabs > div > a:hover {
	border: 1px solid #000;
	color: #000;
	background-color: #fff;
}

.homepage-tabs > div > a:focus {
	border: 1px dashed #000;
}

.content-area a {
    border-color: #FFFFFF #FFFFFF #000000;
    border-style: solid;
    border-width: 1px;
    color: #000000;
	text-decoration: none;
}

footer {
	color: #fff;
	text-align: center;
	font-size: 90%;
	background-color: #000;
	padding: 2% 0;
}

footer p:nth-child(2) {
	margin-bottom: 0;
}

footer small {
	display: inline-block;
	font-size: 100.01%;
	margin-bottom: 1%;
	padding-bottom: 1%;
}

.sitemap-pages {
	text-align: center;
}

.sitemap-pages-item {
	margin-bottom: 2%;
}

.sitemap-pages-item a {
	color: #000;
}

.content-area a:hover,
.content-area a:focus,
.sitemap-pages-item a:hover,
.sitemap-pages-item a:focus {
	color: #fff;
	background-color: #000;
	border: 1px dashed #fff;
}

.form-error-one {
	background-color: #f00;
	color: #fff;
	font-weight: bold;
	display: block;
	width: 96%;
	padding: 1%;
}


.form-thank-you-message {
	margin-bottom: 15px; 
	padding: 15px; 
	border: 1px solid #1a2857; 
	background-color: #efefef;
	-moz-border-radius: 5px;
	border-radius: 5px;

}

.text-error {
	display: block;
}

.social-media {
	margin-top: 5%;
}

.social-media > li {
	display: inline-block;
	margin: 0 3%;
}

/* ---------- End Global Styles ---------- */


/* ---------- @Nav Menu Collapse Styles ---------- */

.anchor-link { 
	display: none; 
}

/* ---------- End Nav Menu Collapse Styles ---------- */

ul.cus-sitelinksthree {
    margin: 0 auto;
}
.cus-sitelinksthree li {
    display: inline-block;
    padding: 10px 15px;
    margin: 20px 0;
}

/* ---------- @Responsive Design Styles ---------- */



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

	.social-media img{
		height: auto;
		width: 20px;
	}

}


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

	.social-media img{
		height: auto;
		width: 10px;
	}

}


@media only screen and (min-width: 361px) and (max-width: 480px) {

	.social-media img{
		height: auto;
		width: 15px;
	}

	body {
		font-size: 95%;
	}
	
	a.screenreader:focus {
		display: none;
	}	

	h3 > a {
		font-family: arial, helvetica, sans-serif;
	}

	.homepage-tabs div {
		margin-bottom: 1%;
	}
	
	.homepage-tabs > div > a {
		font-family: arial,helvetica,sans-serif !important;
		font-size: 1.3em;
		padding: 3% 0;
	}

	nav > ul { 
		display: none;
	}

	.main-nav li {
		font-family: arial, helvetica, sans-serif;
	}
	
	.main-nav > li > a, 
	.main-nav > li > a:hover {
		float: none;
		margin-bottom: 0;
	}
	
	.anchor-link, 
	#mobile-nav { 
		display: block; 
	}
	
	.anchor-link {
		background: #000;
		border: 0;
		color: #fff;
		font-family: arial, helvetica, sans-serif;
		font-weight: bold;
		height: 50px;
		width: 50px;
	}

	ul.open { 
	    box-shadow: 2px 2px 3px #444;
	    display: block;
	    list-style: none outside none;
	    margin: 0;
		overflow: hidden;
	    padding: 0;
	    position: absolute;
	    right: 0;
	    top: 50px;
		width: 100%;
	    z-index: 500;
	}
	
	ul.open li { 
		display: block; 
		font-size: 1.3em;
		list-style: none; 
		text-align: center;
	    width: 100%;
	}
	
	ul.open li a { 
		display: block; 
		padding: 20px 10px; 
		border-bottom: 1px solid #ccc; 
		text-decoration: none;
	}
	
	ul.open li a:focus,
	ul.open li a:hover { 
		background-color: #fff; 
		color: #000; 
	}

	h1,
	.sitemap-pages h1 	{
		font-family: arial, helvetica, sans-serif;
		font-size: 1.4em;
		line-height: 1.2;
		margin-bottom: 2%;
	}
	
	h2 {
		font-family: arial, helvetica, sans-serif;
		font-size: 1em;
		line-height: 1.2;
		margin-bottom: 5%;
	}

	.page-photo {
		height: auto;
		width: 40%;
	}

	label {
		width: 25%;
	}
	
	footer {
		font-size: 85%;
	}
	
}





@media only screen and (min-width: 481px) and (max-width: 690px) {
	
	body {
		font-size: 100%;
		margin: 0;
	}

	h3  > a {
		font-family: arial, helvetica, sans-serif;
	}
	
	.homepage-tabs > div > a {
		font-family: arial, helvetica, sans-serif;
		font-size: 1.4em;
		padding: 2% 0;
	}
	
	.main-nav li {
		font-family: arial, helvetica, sans-serif;
	}

	.main-nav a {
		float: left;
		margin-right: 1%;
		padding: 3%;
	}
	
	.main-nav li:last-child {
		margin-right: 0;
	}

	h1,
	.sitemap-pages h1 {
		font-size: 1.8em;
		font-family: arial, helvetica, sans-serif;
		line-height: 1.2;
		margin-bottom: 2%;
	}
	
	h2 {
		font-size: 1.2em;
		font-family: arial, helvetica, sans-serif;
		line-height: 1.2;
		margin-bottom: 3%;
	}
	
	.page-photo {
		height: auto;
		width: 40%;
	}
	
	label {
		width: 15%;
	}
	
}


/* ---------- End Responsive Design Styles ---------- */