﻿/*CSS RESET*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-weight: normal;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

body {
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #102a42;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #ffffff;
}

.clear {
clear: both;
}


hr{
padding: 0px;
border: solid #ffffff 1px;
border-bottom: dotted #808080 1px;
margin: 20px 0px 20px 0px;
}

p{
line-height: 18px;
margin: 0px 0px 10px 0px;
}

.emphasis{
font-size: 16px;
line-height: 20px;
}
#mainContent.span {
font-size: 16px;
font-weight; bold;
}

.question{
font-size: 18px;
background-color: #e8eef6;
padding: 5px;
border-top: solid #c0d5f1 1px;
}

.underline{
text-decoration: underline;
}

.ticks{
line-height: 25px;
font-style: italic;
}

.ticks li{
padding-left: 30px;
background: url(images/swimmingtick.png) no-repeat;
}

.img-left{
float: left;
margin-right: 10px;
}

.img-right{
float: right;
margin-left: 10px;
}

h1{
font-size: 30px;
text-align: left;
margin: 0px 0px 10px 0px;
color: #102a42;
text-shadow: 0px 0px 1px #ffffff;
}

h2{
font-size: 20px;
text-align: left;
margin: 0px 0px 10px 0px;
color: #102a42;
}

h3, h4, h5, h6{
font-size: 20px;
color: #102a42;
margin: 0px 0px 10px 0px;
}

a:link, a:visited, a:hover, a:active{
text-decoration: none;
color: inherit;
line-height: 18px;
}

a:link.underline, a:visited.underline{
text-decoration: underline;
color: #014898;
}

#container {
width: 1000px;
margin: 0 auto;
text-align: left;
padding: 0px 50px 0px 50px;
}

/*----------------------------------HEADER-------------------------------------------*/

.logo {
padding: 0px 0px 0px 0px;
margin: 0px;
}

#main-content, .full-width-text{
text-align: justify;
float: left;
}

.second-row{
width: 600px;
}

#content {
width: 790px;
float: left;
}

#header .logo p {
color: #102a42;
font-style: italic;
text-shadow: 1px 1px 0px #2f6ea8;
color: #e8eef6;
display: none;
}

#header {
background-color: #0970CF;
background-image: url(images/bg.png);
width: 100%;
margin-bottom: 20px;
border-bottom: solid #014898 3px;
text-align: left;
}

#header-container{
width: 1000px;
margin: auto;
padding: 10px 50px 0px 50px;
}

#header li {
display: inline;
text-transform: capitalize;
color: #FFFFFF;
font-size: 18px;
}

#header ul {
padding: 10px 0px 9px 0px;
text-align: left;
}

#header li a:link, #header li a:visited  {
display: inline;
text-decoration:none;
color: #ffffff;
padding: 11px 11px 12px 11px;
margin: 0px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}

#header li a:hover, #header li a:active  {
background: #ffffff url(images/tabbg.png) repeat-x;
color: #014898;
box-shadow: -3px -3px 3px #014898;
}

#header li a:link.current, #header li a:visited.current, #header li a:hover.current, #header li a:active.current  {
background: #ffffff url(images/tabbg.png) repeat-x;
color: #014898;
box-shadow: -3px -3px 3px #014898;
}

#get-listed{
width: 90px;
height: 50px;
overflow: hidden;
float: right;
margin-top: -60px;
padding-top: 10px;
transition: all linear 0.1s;
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
}

#get-listed:hover{
padding-top: 5px;
height: 55px;
}

/*-------------------------------------ADVERTS---------------------------------------*/

.ad_image {
width: 190px;
float: right;
overflow: hidden;
}

.ad_image img{
margin-top: 10px;
}


/*--------------------------------------THREE HOMEPAGE BOXES------------------------------------------*/

#directory-boxes{
margin: 0px 0px 15px 0px;
}

.directory-boxes{
width: 320px;
margin: 0px 20px 0px 0px;
float: left;
text-align: left;
}

#jobs.directory-boxes{
margin: 0px 0px 0px 0px;
}

.large-font a:link, .large-font a:visited{
display: block;
padding: 10px;
background: url(images/gradbg.png) repeat-x;
color: #ffffff;
text-shadow: 0px 0px 4px #102a42;
text-decoration: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-align: center;
font-size: 20px;
margin-top: 10px;
}

.large-font a:hover, .large-font a:active{
background: url(images/gradbg.png) repeat-x 0px -38px;
}

.green a:link, .green a:visited{
background: url(images/gradbggreen.png) repeat-x;
}

.green a:hover, .green a:active{
background: url(images/gradbggreen.png) repeat-x 0px -38px;
}

.red a:link, .red a:visited{
background: url(images/gradbgred.png) repeat-x;
}

.red a:hover, .red a:active{
background: url(images/gradbgred.png) repeat-x 0px -38px;
}


/*-----------------------------------Flash Maps---------------------------------*/

#map-container{
float: left;
margin: 10px 10px 0px 0px;
}

.mapcontent{
border: solid #c0d5f1 1px;
}

/*-----------------------------------News Feed---------------------------------*/

#article-container{
width: 280px;
height: 574px;
overflow: hidden;
float: left;
margin: 10px 20px 20px 0px;
clear: both;
}

#articles{
font-size: 12px;
}

#articles a{
font-size: 12px;
color: #014898;
}

.rssHeader{
display: none;
}

#articles h4{
margin: 0px;
line-height: 10px;
}

.pubDate{
color: #535353;
font-size: 10px;
padding: 5px 0px 5px 0px;
}

.feedContent{
font-style: italic;
}

li.rssRow{
border-bottom: dotted #808080 1px;
margin-bottom: 10px;
}

/*------------------------------------------FOOTER------------------------------------*/

#footer {
background: #e2e2e2 url(images/footerbg.png);
color: #525151;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
border-top: solid #898989 3px;
text-align: left;
margin-top: 20px;
}

#footer h1, #footer h2, #footer h3{
font-size: 20px;
margin: 0px 0px 10px 0px;
color: #525151;
text-shadow: 0px 0px 0px #000;
padding-bottom: 5px;
border-bottom: solid #525151 1px;
}

ul.footer{
width: 1000px;
margin: auto;
}

.footer li{
float: left;
width: 310px;
margin: 10px 35px 10px 0px;
}
.tweet,
.query {
	font-family: Arial, Helvetica, sans-serif;

}

	.tweet_list {
		-webkit-border-radius: 0.5em;
		-moz-border-radius: 0.5em;
		border-radius: 0.5em;
		list-style: none;
		margin: 0;
		padding: 0;
		
		
	}
	
		.tweet_list .awesome,
		.tweet_list .epic {
			text-transform: uppercase;
		}
		
		.tweet_list li {
			overflow-y: auto;
			overflow-x: hidden;
			padding: 0.5em;
			list-style-type: none;
		}
		
			.tweet_list li a {
				color: #0C717A;
			}
		
		.tweet_list .tweet_even {
			background-color: #91E5E7;
		}
		
		.tweet_list .tweet_avatar {
			padding-right: .5em; float: left;
		}
		
			.tweet_list .tweet_avatar img {
				vertical-align: middle;
				}
				.tweet_text{
				font-size:16px;
				}
				.tweet_time{
				font-size:16px;
				}
			
ul.bottom-nav{
margin-top: 10px;
}

.bottom-nav li{
height: 20px;
margin: 0px;
}

li.last{
margin: 10px 0px 10px 0px;
}

#footer a:link, #footer a:visited, #footer a:hover, #footer a:active{
color: #435E94;
text-decoration: underline;
text-transform: lowercase;
}

#social-plugins{
width: 200px;
}

input.mailing-list{
width: 207px;
margin: 0px 0px 10px 0px;
padding: 3px;
}

input.mailing-submit{
width: 90px;
margin: 0px 0px 10px 0px;
padding: 3px;
}

/*--------------------------------DIRECTORY PAGE------------------------------------*/

.directory{
cursor: pointer;
}

#left-box{
width: 480px;
float: left;
}

#right-box{
width: 480px;
padding-left: 20px;
border-left: dotted #dedede 1px;
float: right;
}

.rightContent ul{
list-style-type: disc;
margin-left: 20px;
text-align: left;
padding: 10px;
}

.rightContent li{
padding: 5px;
}

.rightContent img{
margin: 10px;
}

.icons li{
padding: 20px 10px 4px 90px;
border-bottom: dotted #dedede 1px;
margin-bottom: 10px;
cursor: pointer;
}

li.swimmingcourse{
background: url(images/swimmingqualification.png) no-repeat;
}

li.swimmingjob{
background: url(images/swimmingvacancy.png) no-repeat;
}

li.school-icon{
background: url(images/swimmingschool.png) no-repeat 0px 13px;
}

/*----------------------------------Directory Pages Styling-------------------------*/

.directory-panels{
margin-bottom: 20px;
padding: 10px;
background-color: #e8eef6;
border: solid #c0d5f1 1px;
box-shadow: inset 1px 1px 0px #fff;
cursor: pointer;
}

.directory-panels h2, .directory-panels h3, .directory-panels h4{
font-size: 25px;
text-shadow: 0px 0px 0px #000;
}

.bgred{
background-color: #fcd1cb;
border: solid #f0a398 1px;
}

.bggreen{
background-color: #d6f3c8;
border: solid #a6d092 1px;
}

#sidebar_w {
background: url(images/objectbg.png);
padding: 10px;
margin: 0px 0px 20px 0px;
border: solid #dedede 1px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: inset 1px 1px 0px #ffffff;
-webkit-box-shadow: inset 1px 1px 0px #ffffff;
-moz-box-shadow: inset 1px 1px 0px #ffffff;
}

#sidebar {
width: 200px;
float: right;
}

.get-listed{
text-align: center;
background: url(images/gradbggreen.png) repeat-x;
margin: 10px 0px 0px 0px;
padding: 5px;
color: #ffffff;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
font-size: 16px;
}

.get-listed a{
color: white;
}

.get-listed:hover{
background: url(images/gradbggreen.png) repeat-x 0px -38px;
}

.breadcrumbs{
margin: 0px 0px 20px 0px;
color: #014898;
}

.breadcrumbs a{
color: #808080;
text-decoration: underline;
}

.breadcrumbs li{  /*styling for breadcrumb links at top of directory pages*/
display: inline;
padding-right: 20px;
}

#areas{
margin: 10px 20px 0px 0px;
width: 265px;
float: left;
}

#areas h2 a:link, #areas h2 a:visited {
display: block;
padding: 10px 0px 10px 25px;
background: url(images/gradbg.png) repeat-x;
color: #ffffff;
text-shadow: 0px 0px 4px #102a42;
text-decoration: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

#areas h2 a:hover, #areas h2 a:active {
background: url(images/gradbg.png) repeat-x 0px -38px;
}

#areas.jobs h2 a:link, #areas.jobs h2 a:visited {
background: #014898 url(images/pointer.png) no-repeat;
color: #ffffff;
text-shadow: 0px 0px 4px #014898;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
padding: 10px 0px 10px 40px;
border: solid #102a42 1px;
box-shadow: inset 1px 1px 0px #3c80cc;
-webkit-box-shadow: inset 1px 1px 0px #3c80cc;
-moz-box-shadow: inset 1px 1px 0px #3c80cc;
}

#areas.jobs h2 a:hover, #areas.jobs h2 a:active {
text-decoration: underline;
}

#areas.jobs{
width: 505px;
margin: 10px 15px 0px 0px;
}

h2.school-town-header{
background: #014898 url(images/pointer.png) no-repeat 0px -76px;
padding: 10px 10px 10px 40px;
color: white;
text-shadow: 0px 0px 4px #014898;
border: solid #102a42 1px;
box-shadow: inset 1px 1px 0px #3c80cc;
-webkit-box-shadow: inset 1px 1px 0px #3c80cc;
-moz-box-shadow: inset 1px 1px 0px #3c80cc;
}

div.school-town{
padding: 9px;
margin-bottom: 10px;
border-bottom: dotted #014898 1px;
cursor: pointer;
}

div.school-town:hover{
background: #e8eef6;
}

.school-town-img img{
height: 20px;
margin-left: 10px;
}

h3.school-town{
color: #014898;
padding: 0px;
text-decoration: underline;
}

.school-town p{
margin: 0px;
font-style: italic;
}

.school-town span{
font-weight: bold;
font-style: normal;
}

#areas ul{
margin-bottom: 20px;
}

/*----------------------------------FAQ CONTACT ADVERTISING SITEMAP---------------------*/

.faq li{
padding-bottom: 10px;
}

.sitemap ul{
margin-left: 40px;
}

ul.parent{
margin-left: 0px;
font-size: 20px;
}

ul.child{
font-size: 16px;
}

ul.second-child{
font-size: 12px;
}

.sitemap li{
padding: 5px 0px 5px 0px;
}

/*----------------------------------sumission forms---------------------*/

.paymentbox {
border: 1px solid #102a42;
padding: 5px;
background-color: #FFCC66;
}

table.submit-form{
width: 100%;
}

.green-box{
background-color: #d6f3c8;
border: solid #a6d092 1px;
box-shadow: inset 1px 1px 0px #fff;
-webkit-box-shadow: inset 1px 1px 0px #fff;
-moz-box-shadow: inset 1px 1px 0px #fff;
padding: 0px 0px 0px 10px;
margin: 0px 0px 10px 0px;
}

.green-box p{
margin-bottom: 0px;
}

td.submit-info{
width: 150px;
padding: 10px 0px 10px 0px;
font-size: 16px;
vertical-align: middle;
color: #014898;
}

.submit-info p{
font-style: italic;
}

td.guide-info{
font-size: 14px;
vertical-align: middle;
font-style: italic;
padding-left: 20px;
color: #505050;
}

td.submit-header{
background-color: #e8eef6;
padding: 10px 10px 0px 10px;
border-top: solid #c0d5f1 1px;
}

input{
width: 300px;
}

input.small{
width: 120px;
}

input.medium{
width: 200px;
}

input.time{
width: 60px;
}

input.submitbtn{
width: 100px;
}

input.submit{
width: 100px;
}

input.check{
width: 15px;
}

textarea{
width: 300px;
height: 150px;
font-family: arial;
}

select, input, textarea{
font-size: 16px;
padding: 5px;
margin: 10px 0px 10px 0px;
color: #102a42;
}

img.security{
vertical-align: middle;
margin-right: 10px;
}

#payment{
text-align: center;
padding: 20px;
border: solid #dedede 1px;
font-size: 16px;
margin-bottom: 40px;
height: 550px;
}

p.success{
font-size: 30px;
line-height: 50px;
}

p.price{
font-size: 20px;
line-height: 30px;
}

input.payment{
width: 220px;
}

p.error{
color: red;
padding: 10px 0px 10px 0px;
font-size: 16px;
}

#map{
margin-top: 10px;
}

/*---------------------------------------user content styling------------------------------------*/

.map {
float: right;
}

#user-header{
margin-bottom: 20px;
}

.inside, .outside{
display: none;
}

#user-content{
width: 680px;
float: left;
clear: both;
margin-bottom: 10px;
font-size: 16px;
}

#user-content.course-job{
width: 768px;
padding: 10px;
background: #e8eef6;
border: solid #c0d5f1 1px;
box-shadow: inset 1px 1px 0px #fff;
-webkit-box-shadow: inset 1px 1px 0px #fff;
-moz-box-shadow: inset 1px 1px 0px #fff;
margin-top: 10px;
}

#user-content h1{
background: none;
color: #102a42;
text-shadow: 0px 0px 4px #ffffff;
padding: 0px;
margin: 0px 0px 20px 0px;
}

#user-content h2, #user-content h3{
margin: 20px 0px 10px 0px;
}

#user-right h4, #user-right h5{
font-size: 20px;
color: #102a42;
margin: 20px 0px 10px 0px;
}

#user-right h5{
font-size: 20px;
color: #102a42;
margin: 20px 0px 10px 0px;
padding-bottom: 10px;
border-bottom: solid #102a42 1px;
}

p.info{
padding-bottom: 20px;
border-bottom: solid #102a42 1px;
}

.opening-times{
margin-top: 15px;
border-top: solid #102a42 1px;
}

#user-content h1 img, .school-town img{
vertical-align: middle;
padding-left: 10px;
height: 45px;
float: right;
}

#user-office p{
background-color: #e8eef6;
border: solid #c0d5f1 1px;
padding: 5px;
}

.strong{
font-size: 18px;
}

table.times{
border: solid #808080 1px;
border-collapse: collapse;
}

.times th{
background-color: #c0d5f1;
width: 90px;
padding: 5px;
text-align: center;
font-weight: bold;
vertical-align: middle;
border: solid #808080 1px;
}

.times td{
background-color: #ffffff;
text-align: center;
height: 40px;
vertical-align: middle;
border: solid #808080 1px;
}

td.spacer{
height: 20px;
border: solid #808080 1px;
font-style: italic;
color: #808080;
}

p.user-info{
width: 40%;
float: left;
padding-top: 10px;
}

#provider{
width: 410px;
float: left;
}

ul.contact-info{
width: 340px;
float: right;
border: dotted #014898 1px;
padding: 5px;
background: #ffffff;
}

.contact-info li{
padding: 5px;
}

.contact-info a{
line-height: 16px;
}

li.name{
font-weight: bold;
padding: 5px 5px 15px 35px;
}

li.tel{
background: url(images/phone.png) no-repeat 5px 3px;
padding: 5px 5px 15px 35px;
}

li.email{
background: url(images/email.png) no-repeat 5px 3px;
padding: 5px 5px 15px 35px;
}

 li.www{
background: url(images/www.png) no-repeat 5px 3px;
padding: 5px 5px 5px 35px;
}

#user-right{
width: 300px;
float: right;
margin:0px 0px 20px 0px;
}
