@import url(//fonts.googleapis.com/css?family=Rock+Salt|Oranienbaum|Lato|Arimo);
/*@import '/dist/jquery.fancybox.css';*/

@font-face
{
font-family: "DS-DIGITAL";
src: url(DS-DIGII.TTF);
}

body {
	font-family:  "Lato", Calibri, Arial, Helvetica, sans-serif, Sans;
	height: 100%; 
	background-color:#8F8F8F;
	margin:0;
	padding:0;

}


img {
	border: 0px;
}
h1 {
        font-family: 'Rock Salt';	
        font-size: 22px;
		text-shadow: #000 2px 2px;
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
        letter-spacing: 1px;
		font-weight: normal;
		line-height: 30px;
}

h2 {
	font-size: 16px;
}
td { vertical-align:top;
 } 
th { 	
	background-color: #5b828c;
	text-align: left;
} 
table { font-size: inherit ;
	border-collapse:collapse;
} 
input, textarea, select {
    box-shadow:0 0 15px rgba(0, 0, 0, 0.3) inset;
	font-family: arial, verdana, ms sans serif;
	font-size: 8pt;
	font-weight: normal;
	border-radius: 10px;
	padding: 5px;
	background-color: #eee;
	border: 3px solid #5b828c;
}
iframe {
	max-width: 100%; 
}














.hide{ 
	display:none; 
} 
#title{
	font-family: 'Rock Salt';	
	font-size: 36px;
	transform:rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE  */
/*	-webkit-transform:rotate(90deg);  Safari and Chrome */
	height	: 100px;
	position: fixed;
	margin-left: 250px;
	overflow: hidden;
	left: 50%;
	top: 420px;
	width	: 570px;
	color: #fff;
	padding: 10px;
	display:block;
	text-shadow: #000 2px -2px;
	z-index: 2600;
	opacity: 1;
}

.numerals {
	transform:rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE  */
/*	-webkit-transform:rotate(270deg);  Safari and Chrome */
	font-family: Oranienbaum, Times New Roman, Times, serif;
	font-size: 50px; 
	height	: 100px;
	position: fixed;
	margin-left: -870px;
	overflow: hidden;
	left: 50%;
	top: 420px;
	width	: 570px;
	color: #fff;
	padding:  10px; 
	text-shadow: #000 2px -2px;
	z-index: 2600;
	opacity: 1;
	letter-spacing: 15px;

}
#container {
	max-width: 990px;
	margin: 120px auto 0 auto;
	color:white;
	z-index: 1999;
    position: relative;
}



#lowercontainer {

	max-width: 990px;
	margin: auto;
	background-image: url('images/black.png'); 
	color: white;
	min-height:550px;
	border-radius: 0px 0px 10px 10px;
    box-shadow:0 0 200px rgba(0, 0, 0, 1) inset;
	z-index: 1999;
    position: relative;
}
#lowercontainer a{
	color:#fff;
} 

.email  {
	font-size: 15px;
	text-align: center;
	color: #fff;
	width: 100%;
	min-height: 60px;
	background-color:  #722;
	z-index: 2400;
	line-height: 60px;
	position: absolute;
	top: 60px;
	left: 0px;


}
.email span {
	white-space: nowrap;
}

.email a {
	color: #fff;
	text-decoration: none;
}
.email a:hover{
	color: #000;
} 
#nav {
	font-family:Arial, Helvetica, Verdana, sans; 
	margin-right: auto;
	margin-left: auto;
	margin-top: -4px;
	font-size: 15px;
	padding: 0px 10px 0px 10px;
	height:37px;

}

a.button {
    background:  transparent url('images/button_1x2.png') no-repeat scroll top right;
    color: #C8C1AF;
    display: block;
    float: right;
    font: normal 15px  arial, sans-serif;
    height: 37px;
    margin-right: -6px;
    padding-right: 10px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('images/button_1x1.png') no-repeat;
    display: block;
    line-height: 30px;
    padding: 5px 7px 5px 17px;
} 




a.button:hover {
    background:  transparent url('images/button2_1x2.png') no-repeat scroll top right;



}

a.button:hover span {
    background: transparent url('images/button2_1x1.png') no-repeat;
	color: #FFFFFF

}





#main {
	 padding: 10px 5vw 50px 5vw;
	font-size:16px;
	line-height:160%; 
}
#main a, #mainleft a:link, #mainleft a:visited, #galleryleft a {
	color: #fff;
}
#main a:hover, #mainleft a:hover, #galleryleft a:hover {
	color: #5b828c;
	text-decoration:none;

}

#mainleft {
	padding: 10px 50px 50px 50px;
	max-width: 650px; 
	font-size:16px;
	line-height:160%; 
}






#rightlinks {
	float: right;
	width: 200px;
	line-height: 130%;
	padding-right:30px;
	padding-top: 20px;
    position: sticky;
    top: 0px;
	z-index: 90;
    display: block;
    position: -webkit-sticky;
	position: -ms-sticky;

}


#galleryleft {
	padding: 10px 50px ; 
}


#gallerylinks {
	float: right;
	width: 260px;
	line-height: 100%;
	padding-right:20px;
	padding-top: 10px;
}





li.links {
	list-style-type: none;
	text-align: right;
	margin-bottom: 0px;
	margin-left: -5px;
	font-size: 13px;
}
li.links a:link , li.links a:visited  {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 3px;
	padding-right: 10px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #444;

}
li.links a:hover  {

	color: #ffffff !important;
	background-color: #5b828c;



}

#small { 
	font-size: 13px; 
}

.small { 
	font-size: 10px; 
}
.winner { 
	font-weight: bold; 
	color: #79d4ea !important;
} 







#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 1000; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }





 input#time  {

font-family: arial, verdana, ms sans serif;
font-size: 7pt;
font-weight: normal;
padding: 0px; 
width: 15px;}







.creamone, .creamone td {background: #1f2a3f;	padding: 8px 1vw; color: #fff; }
.creamtwo, .creamtwo td {background: #1a2130;	padding: 8px 1vw; color: #fff; }

.resultone, .summary_data {background: #1f2a3f;	padding:4px 2px ; margin-bottom: 5px; border-right: 1px solid #000;  color: #fff; }
.resulttwo {background: #1a2130;	padding:4px 2px ; margin-bottom: 5px; border-right: 1px solid #000;  color: #fff;}

.newsone {
	padding: 18px 50px;
	min-height: 350px; 
	background-color:#1f2a3f; 
	color: white;
	border-radius: 10px;
    box-shadow:0 0 200px rgba(0, 0, 0, 0.5) inset;
}

#resultdarker, .summary_header_label, .summary_header {background: #5b828c; 
	color: white; 
	font-weight: bold;
	padding:5px 2px;
	border-right: 1px solid #000; }


#resultdarkerhelm {background: #5b828c; 
	color: white; 
	font-weight: bold;
	padding: 8px 25px;
	border-right: 1px solid #000; }

#resultdarker a:visited, #resultdarker a:link   { 
	color: #ffffff; 
} 

.resultone a, .resulttwo a  { 
	color: #ffffff; 
	display: block; 
} 


#resultdarker a:hover  { 
	color: #000; 
} 

#bitofpadding { padding-right: 10px ; padding-left: 10px; } 


.creamone a, .creamtwo a,  {
 	text-decoration:none; 
	border-bottom: 
	1px dashed maroon;
	color: #ffffff;
}


.creamone a:hover, .creamtwo a:hover {
 	text-decoration:none; 
	border-bottom: 
	1px solid #1F1F5F;
}

div.darker {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 0;
}



.darker {background: #5b828c; 
	font-weight: bold;
	padding:12px;
	color: #ffffff;
}



#rightpix {
	float:right; 
	min-width:155px; 
	padding:10px 0px 10px 10px;
	font-size: 12px;
	text-align:center;
}




#bottompix {
	font-size: 12px;
}

.tablediv {
float:left; 
padding: 20px;
width: 175px;
}

#gal{
	width: 700px;
} 
#gal div, #galfront div {
	text-align:center;
	font-size:11px; 
	line-height:13px; 
	vertical-align:middle;
	width: 90px;
	height: 90px;
	overflow: hidden;
	margin: 13px; 
	display: inline-block;
	border-radius: 10px;
	background-position: center center;
	background-repeat: no-repeat;
	

}
#gal div img, #galfront div img   {
	height: 100px;
	border: 0px;
	width: 100px;
} 
#rightpix img {
	border-radius: 5px;
}


.cleargal {
	clear: both;
	height: 50px;
} 

#galfront {
	min-height: 120px;
	background: #1a2130;
	padding: 10px 0 10px 50px;
}


.above{
	z-index: 200;
	position: relative;
} 


.resultstable { 
	width:112%; 
	margin:0px -20px;

} 
.raceresults {
	font-size: 13px; 
}

.resultstableadm { 
	width:120%; 
	margin:0px -80px;
	font-size:13px; 
} 

#base{
	background-image: url('/images/black.png');
    box-shadow:0 0 100px rgba(0, 0, 0, 0.6) inset;
	min-height: 250px;
	z-index: 3000;
	position: relative;
	padding: 20px 0;
	max-width: 990px;
	border-radius:10px 10px 0px 0px ;
	margin: 20px auto 0 auto;
}

#me {
	color: #ddd;
	max-width:900px;
	text-align:right;
	padding:12px;
	font-size:15px;
	margin:auto;
	clear:both;
	z-index: 2000;
	position: relative;

}

#me a { 
	color: #ddd;
	text-decoration: none;	
}
#me a:hover{
	text-decoration: underline;
} 

#disc,  #disc s span,  #disc span s{ 
	color: #888 !important; 
}
.helmtable {
	width: 100%; 
} 
.helmtable td {
	padding: 3px 20px; 
}
#seriesstable td {
	padding: 5px ; 
}

/*  s {
      color: #00D4FF;
 
  }
*/
  s span {
  color: #999;

  }
sup {
	font-size: 8px;
} 


#accomm {
	width: 100%;
	line-height: 15px;
	font-size: 13px; 
}
#accomm a {
	border-bottom: 0px solid #000; 
}
#fb{
	width: 500px;
	margin-left: 100px;
}
#twit { 
	text-align: right;
	padding: 20px ; 
} 

#black {
	background-color: #000000;
	height: 60px;

	position: fixed;
	z-index: 2500;
	width: 100%;
	top: 0px;
	left: 0px;

} 




#map {
	color: #000;
}

.calendar { 
	float:right;
	margin	: -5px 0 5px 10px;
	width: 55px;
	font-family: "Lato", Calibri, Arial, Helvetica;
	text-align:center;

	
}
.caltop {
	height: 12px;
	line-height: 12px;
	padding: 4px;
	font-size: 10px;
	color: #96CC33;
	background-color: #3D3030;
	text-transform: uppercase; 
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid black;
	border-radius: 5px 5px 0 0;
}
.calnumber {
	height: 24px;
	padding: 5px;
	font-size: 22px;
	line-height: 22px; 
	color: #000;
	background-color: #fff;
	border-radius: 0 0 5px 5px;
	border-bottom: 2px solid  #222;
	border-right: 1px solid  #222;

}
#lines td {
	border-bottom: 1px solid #888;
} 

.cuppic {
	float: right;
	height: 150px;
	width: 150px;
	}
.cuppic img {
	border-radius: 10px;
	height: 130px;
}
.cup {
	clear: right;
} 

#weather {
	width: 150px;
	height: 400px;
	position: absolute;
	top: 160px;
	left: 50%;
	margin-left: 260px;
/*	opacity:0.7;
	filter:alpha(opacity=70); */
	z-index: 2001;
}


#nexttides {
	width: 122px;
	min-height: 40px;
	position: absolute;
	top: 350px;
	left: 50%;
	margin-left: 280px;
/*	opacity:0.7;
	filter:alpha(opacity=70); */
	z-index: 2002;
	font-family:  "Lato", Calibri, Arial, Helvetica, sans-serif, Sans;
	color: #fff;
	font-size: 14px;
	text-shadow: 1px -1px #000;
	border-radius: 15px;
	background-color: rgba(0,0,0,0.4); 
	padding: 10px 20px;
	text-align: center;
}
#nexttides a{
	color: #fff;
	text-decoration: none;
} 
#nexttides a:hover{
	color: #772222;
}
.clock {
	font-family: "DS-DIGITAL";
	font-size: 30px;
} 

#pushthe {
	width: 468px;
	height: 120px;
	position: absolute;
	top: 190px;
	left: 50%;
	margin-left: -430px;
	z-index: 2001;

}
#pushthe img {
	border-radius: 10px;
    box-shadow:0 0 15px rgba(0, 0, 0, 0.8);
} 
#inline1 {
	width:95%;
	display: none; 
	height: 95%;
	border:0;

}
#follow {
	position: absolute;
	top: 10px;
	left: 10px;
} 
#follow a{
	color: #fff;
}
.linedtable {
	width: 100%;
}
.linedtable td {
	vertical-align: top;
	padding: 3px 20px 10px 3px;
	border-bottom: 1px solid #666;
}
.linedtable th {
	padding: 3px 20px 10px 3px;
}
.oops {
	font-size: 250px;
	float: right;
	line-hight: 300px;
	color:#fff;
	margin: 20px;
}
.tide {
	width: 100%;
}
.tide td {
	border-bottom: 1px solid #000;
}
.tide #top td{
		background: #5b828c; 
		padding: 8px 25px; 
		color: #fff;
		font-weight: bold; 
} 

#address {
	max-width: 350px;
	float: left;
	text-align: left;
}
#pitch {
	float: left;
	width: 300px;
	margin-top: -20px; 
	text-align: center;
}
#pitch img {
	width: 150px;
}


/* backgrounds and headers */

#bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
}
#heading { 
    z-index: 1000;
    max-width: 990px;
    height: 300px;
	border-radius: 20px 20px 0 0;
    box-shadow:0 0 100px rgba(0, 0, 0, 0.8) inset;
	background-size: cover;
	background-position: center center;
	position: relative;
	margin-top: 175px; 
}


.header1 {
	background-image: url('/images/mark.jpg'); 
}
.header2 {
	background-image: url('/images/jefferies.jpg'); 
}  
.header3 {
	background-image: url('/images/sandown-regatta.jpg'); 
} 
.header4 {
	background-image: url('/images/picos2.jpg'); 
} 
.header5 {
	background-image: url('/images/tom.jpg'); 
} 
.header6 {
	background-image: url('/images/ventnor.jpg'); 
} 
.header7 {
	background-image: url('/images/paul.jpg'); 
} 
.header8 {
	background-image: url('/images/liamsean.jpg'); 
}
.header9 {
	background-image: url('/images/dreadnought.jpg'); 
}
.bodybg1 { 
    background-image: url('/images/mark-bw.jpg') 
}
.bodybg2 { 
    background-image: url('/images/jefferies-bw.jpg') 
}
.bodybg3 { 
    background-image: url('/images/sandown-regatta-bw.jpg') 
}
.bodybg4 { 
    background-image: url('/images/picos2-blur.jpg') 
}
.bodybg5 { 
    background-image: url('/images/tom-blur.jpg') 
}
.bodybg6 { 
    background-image: url('/images/ventnor-bb.jpg') 
}
.bodybg7 { 
    background-image: url('/images/paul-blur.jpg') 
}
.bodybg8 { 
    background-image: url('/images/liamsean-bw.jpg') 
}
.bodybg9 { 
    background-image: url('/images/dreadnought-bw.jpg') 
}
.fixtures {
	width: 100%;
	font-size: 15px;
    border-collapse: separate;
    border-spacing: 0;
	opacity: 0.85; 
}
.fixtures td {
	padding: 7px 4px;

}
.duties {
	font-size: 12px;
}
.duties td {
	padding: 7px 1px;

}


/*
.fixtures tr:nth-child(odd) {
	opacity: 0.9; 
}
*/
.fixtures .twoup , .fixtures .twoup td{
	background-color: #b55f94;	
} 
.fixtures .sport, .fixtures .sport td {
	background-color: #911f12;	
} 
.fixtures .sprint15, .fixtures .sprint15 td{
	background-color: #51935d;	
} 
.fixtures .all, .fixtures .all td{
	background-color: #919351;	
} 
.fixtures .slow, .fixtures .slow td {
	background-color: #5fafb5;	
} 
.fixtures .other, .fixtures .other td {
	background-color: #5f5f5f;	
} 
.fixtures #newday > td{
	border-top: 5px solid #000;
}

.fixtures th {
	padding: 15px 100px;
	font-size: 16px;
	background-color: #000;
	font-family: "Rock Salt";
	opacity: 0.6;
}
.fixtures .gap td{
	height: 25px;
}
.fixtures .nogap td{
	height: 0;
	padding: 0 !important;
}
.flex {
  flex-flow: row wrap; 
  display: flex;
  justify-content: center;
}

.wb {
	min-height: 125px;
	padding: 15px;
	float: left;
	border-radius: 20px;
	background-color: rgba(91, 130, 140, 0.8);
	text-align: center;
	font-size: 14px;
	margin: 0 9px 9px 0;
 	flex: 1 1 130px;
}
.wb .number {
	font-family: "Rock Salt";
	font-size: 36px;
	line-height: 65px; 
}
.wb .norm{
	height: 40px;
}
.wb sup {
	font-size: 20px;
	margin: 0;
	line-height: 30px; 
}
.clearlft{
	clear: left;
} 
.faded {
	opacity: 0.7;
}



/* bar graph * /


.faux_link{
	text-decoration:underline;
	color:#0000FF;
	cursor:pointer;
	}
.toc {
    margin: 1em 0 2em 0;
    }   
.toc li{
    list-style: circle;
    padding: 0 0 .3em 1em;
    }   

	
/* --------- CODE EXAMPLES --------------*/

.bar ul.TGraph {
	border-bottom: 3px solid #333; 
	position: relative; 
	height: 200px;
	margin: 1em 0; 
	padding: 0;
	background: url(images/horizontal_line.png) bottom left;
	font: 11px Helvetica, Geneva, sans-serif;
	}
.bar .TGraph li {
	position: absolute; 
	background: #666 url(images/bar_highlight.png) repeat-y top right;
	bottom: 0; 
	margin: 0; 
	padding: 0 0 0 0;
	text-align: center; 
	list-style: none;
	width: 39px; 
	border: 1px solid #555; 
	border-bottom: none; 
	color: #FFF;
	}
.TGraph li p{
	font: 11px Helvetica, Geneva, sans-serif;
	}
.bar .TGraph li:hover {font-weight:bold;}
.bar .TGraph li.p1{ background-color:#666666 }
.bar .TGraph li.p2{ background-color:#888888 }
.bar .TGraph li.p3{ background-color:#AAAAAA }


.depthBar ul.TGraph {
	border-bottom: 3px solid #333; 
	position: relative; 
	height: 200px;
	margin: 1em 0; 
	padding: 0;
	background: url(images/horizontal_line.png) bottom left;
	font: 11px Helvetica, Geneva, sans-serif;
	}
.depthBar .TGraph li {
	position: absolute; 
	bottom: 0; 
	margin: 0 -1px 0 -1px; 
	padding: 0;
	list-style: none;
	width: 41px; 
	border-bottom: none; 
	color: #FFF;
	}
.depthBar .TGraph li p {
	position:relative;
	top: 10px;
	left:10px;
	}
.depthBar .TGraph li.p1{background:  url(images/3dbar1.png) no-repeat top center; }
.depthBar .TGraph li.p2{background:  url(images/3dbar2.png) no-repeat top center; }
.depthBar .TGraph li.p3{background:  url(images/3dbar3.png) no-repeat top center; }

.line .TGraph {
	border-bottom: 3px solid #333; 
	position: relative; 
	height: 200px;
	margin: 1em 0; 
	padding: 0;
	background: url(images/horizontal_line_2.png) bottom left;
	font: 11px Helvetica, Geneva, sans-serif;
	}
.line .TGraph li {
	position: absolute; 
	bottom: 0; 
	margin: 0; 
	padding: 0;
	text-align: center; 
	list-style: none;
	width: 40px; 
	border-top: 3px solid #555; 
	border-bottom: none; 
	color: #000;
	}

.line li.p1{ 
	background: url(images/blue_shadow.png) repeat-x top right;
	border-color: #4E536B; 
	}
.line li.p2{ 
	background: url(images/red_shadow.png) repeat-x top right; 
	border-color: #355B31;
	}
.line li.p3{ 
	background: url(images/yellow_shadow.png) repeat-x top right; 
	border-color: #88262B;
	}



.dots .TGraph {
	border-bottom: 3px solid #333; 
	position: relative; 
	height: 200px;
	margin: 1em 0; 
	padding: 0;
	background: url(images/horizontal_line_2.png) bottom left;
	font: 9px Helvetica, Geneva, sans-serif;
	}
.dots .TGraph li {
	position: absolute; 
	bottom: 0; 
	margin: 0; 
	padding: 15px 0 0 0;
	text-align: center; 
	list-style: none;
	width: 39px; 
	border-bottom: none; 
	color: #000;
	}
.dots li.p1 { background: url(images/nav_step_1.png) no-repeat top center;}
.dots li.p2 { background: url(images/nav_step_4.png) no-repeat top center; }
.dots li.p3 { background: url(images/nav_step_6.png) no-repeat top center; }

	


/* odometer */

.odo {
	float: right;
	margin: 30px 0px 0px 30px;
	width: 200px;
	height: 200px;
	background-color: rgba(26, 33, 48, 0.4);
	color: #fff;
	font-size: 24px;
	text-align: center;
	font-family: "Rock Salt";
	line-height: 50px;
	border-radius: 30px;
	padding: 20px;
	border: 1px solid #000;
	

}


.odometer {
    font-size: 60px;
	line-height: 60px;
	display: block;

}



.odometer.odometer-auto-theme, .odometer.odometer-theme-car {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  position: relative;
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-car {
  *display: inline;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
  *display: inline;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-car .odometer-digit .odometer-digit-spacer {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-car .odometer-digit .odometer-digit-spacer {
  *display: inline;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
  text-align: left;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon {
  display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon-inner {
  display: block;
  -webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-car .odometer-digit .odometer-value {
  display: block;
  -webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-car .odometer-digit .odometer-value.odometer-last-value {
  position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up .odometer-ribbon-inner {
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  -ms-transition: -ms-transform 2s;
  -o-transition: -o-transform 2s;
  transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down .odometer-ribbon-inner {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  -ms-transition: -ms-transform 2s;
  -o-transition: -o-transform 2s;
  transition: transform 2s;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.odometer.odometer-auto-theme, .odometer.odometer-theme-car {
  -moz-border-radius: 0.34em;
  -webkit-border-radius: 0.34em;
  -o-border-radius: 0.34em;
  -ms-border-radius: 0.34em;
  -khtml-border-radius: 0.34em;
  border-radius: 0.34em;
  font-family: "Arimo", monospace;
  padding: 0.15em;
  background: black;
  color: #eee0d3;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
  -moz-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);
  -o-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eee0d3), color-stop(40%, #eee0d3), color-stop(60%, #bbaa9a), color-stop(80%, #eee0d3), color-stop(100%, #eee0d3));
  background-image: -webkit-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);
  background-image: -moz-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);
  background-image: -o-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);
  background-image: -ms-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);
  background-image: linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);
  background-color: #eee0d3;
  color: black;
  padding: 0 0.15em;
}
.odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-car .odometer-digit:first-child {
  -moz-border-radius: 0.2em 0 0 0.2em;
  -webkit-border-radius: 0.2em 0 0 0.2em;
  -o-border-radius: 0.2em 0 0 0.2em;
  -ms-border-radius: 0.2em 0 0 0.2em;
  -khtml-border-radius: 0.2em 0 0 0.2em;
  border-radius: 0.2em 0 0 0.2em;
}


.odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-car .odometer-digit:last-child {
  -moz-border-radius: 0 0.2em 0.2em 0;
  -webkit-border-radius: 0 0.2em 0.2em 0;
  -o-border-radius: 0 0.2em 0.2em 0;
  -ms-border-radius: 0 0.2em 0.2em 0;
  -khtml-border-radius: 0 0.2em 0.2em 0;
  border-radius: 0 0.2em 0.2em 0;

}


.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
  left: 0.15em;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
  -webkit-transition-timing-function: linear;
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
}


.nsew  {
	position: relative;
	height: 400px;
	width: 732px;
/*	background-size: 100% 100%;
	background-image: url('/pChart/examples/wind-direction.php'); 
	background-position: center center; */
	max-width: 100%; 
} 
.nsew div{
	position: absolute;
	width: 100%;
	height: 100%; 
	top: 0;
	left: 0;
	background-size: 100% 100%;
	background-image: url('/images/nsew.png'); 
	background-position: center center; 
	max-width: 100%; 
}
#chart3{
	margin-top: 5px; 
}



/* drop down menu */

.nav {
	margin: auto;
	width: 990px;
	z-index: 2500;
	position: relative;
}
.navigation{
	height: 60px;
	background-color:#333;
	text-align: center;
	z-index: 2500;
	position: absolute;
	top: 0;
	width: 100%;
}
.clearfix::after
{
	content: '';
	display: table;
	clear: both;
}

#midnav, #midnav #nav2 > ul, #midnav #nav2 > ul > li > a { 
	background-color: #eee;
	color: #000;
}
#midnav #nav2 > ul > li > a hover{
	background-color: #000;
	color: #fff;
} 
#nav
		{
			width: 60em; /* 1000 
			font-family: 'Lato', sans-serif;*/
			font-weight: 400;
			width: 100%;
			position: relative;
			margin: -15px 0 0 0;
			z-index: 1000;
		}

#nav > a
			{
				display: none;
			}

#nav li
			{
				position: relative;
				list-style: none; 
			}
#nav li a
				{
					color: #fff;
					display: block;
					text-decoration: none; 
				}
#nav li a:active
				{
					background-color: #666 !important;
				}

#nav span:after
			{
				width: 0;
				height: 0;
				border: 0.313em solid transparent; /* 5 */
				border-bottom: none;
				border-top-color: #fff;
				content: '';
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
			}

/* first level */

#nav > ul
			{
				height: 42px;
				background-color: #333;
			}
#nav > ul > li
				{
				/*	width: 25%; 
					height: 100%;*/
					float: left;
				}
#nav > ul > li > a
					{
					/*	height: 100%;*/
						font-size: 12px; 
						line-height: 60px; 
						text-align: center;
						padding: 23px 11px 23px 11px;
						font: normal 12px Arial, Helvetica, sans-serif;
						text-transform: uppercase;

					}
#nav > ul > li:not( :last-child ) > a
						{
							border-right: 1px solid #111;
						}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
						{
							background-color: #772222;
						}


/* second level */

#nav li ul
				{
					background-color: rgba(30,30,30, 0.8);
					display: none;
					position: absolute;
					top: 100%;
					width: 200px;
					text-align: left;

				}
#nav li:hover ul
					{
						display: block;
						left: 0;
						right: 0;
					}
#nav li:not( :first-child ):hover ul
						{
							left: -1px;
						}
#nav li ul a
						{
							font-size: 0.9em; /* 20 */
							border-top: 1px solid #000;
							padding: 0.75em; /* 15 (20) */
							margin-left: -40px;

						}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
							{
								background-color: #666;
							}

.wgfcst {
	width: 626px;
	background-color: black;
	padding: 15px;
	margin-bottom: 10px;
}

.flexpics, .flexpics2 { 
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
  justify-content: center;
}
.flexpics a{
	color: #fff;
	text-decoration: none; 
}
.flexpics a:hover{
	color: #eee;
	text-decoration: underline; 
}

.flexpics > div { 
 flex: 1 1 auto;
  width: 200px; 
  max-width: 800px;
  position:relative;
	background-position: center center; 
	background-size: cover; 
	margin: 5px; 
  
}
.flexpics > div img { 
  width: 100%; 
  height: 100%; 
}
.flexpics > div > div{
	position: absolute;
	background-color: rgba(18,100,155,0.6);
	width: 100%;
	top: 0;
	left: 0;
	height: 0;
	transition: 0.5s;
	opacity: 0.5;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	-moz-backdrop-filter: blur(7px);
}

.flexpics > div:hover > div {
	height: 100%;
	opacity: 1;
}
.flexpics > div > div > div {
	color: #fff;
	font-size: 20px;
	padding: 5vw 3vw;
	text-align: center;
	opacity: 0;
	transition: 0.5s;
	
}
.flexpics > div:hover > div > div {
	opacity: 1;
}


.objectfit > div  {
	background-size: contain ;
	background-repeat: no-repeat; 
	height: 300px; 
}
.pictures{
	display: flex;
 	flex-flow: row wrap;
    justify-content: center;
	margin	: 4px;
}
.pictures div {
	flex: 1 1 auto;
	width: 200px;
	height	: 200px;
	max-width: 450px;
	position: relative;
	margin	: 4px;
}

.pictures div img{
object-fit: cover ;
	width: 100%;
	height:  100%;

}
.alttable tr:nth-child(2n+1) {
	background-color: #1F2A3F !important;
}
.alttable tr:nth-child(2n) {
	background-color: #1A2130 !important;
}
.alttable {
	width: 100%; 
}







/* //////////////////////////////// SMALL SCREENS /////////////////////////*/

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


.numerals, #title{
	display: none;
}
#rightlinks, div.darker{
	position: static !important;
}
}


@media only screen and ( max-width: 1023px ) {
body{
	overflow-x: hidden;
}

input, textarea, select{
	max-width: 90vw;
}
 img{
	max-width: 100%;
}
#weather, #nexttides, .odo, .calendar {
	display: none;
}
.resultstable {
    width: 100%;
    max-width: 100%;
	margin: 0;

}
.creamone, .creatwo{
	clear: right;
}
#heading { 
    position: relative !important;
    max-width: 100vw;
	top: auto;
	left: auto;
	margin: 0;
    width: 100vw;
    height: 300px;
	border-radius: 20px 20px 0 0;
    box-shadow:0 0 100px rgba(0, 0, 0, 0.8) inset;
	background-size: cover;
}
#lowercontainer {
    margin-top: 0;
}
#bg {
	background: transparent !important;
	background-color: #333 !important;
}
.email {
	line-height: 30px;
}
.email span {
    white-space: normal;
}
#mainleft {
	padding: 10px 3vw 50px 3vw;
	max-width: calc( 100% - 6vw ); 
	clear: right;
}	
.nav {
	margin: 0;
	width: auto;
}
.navigation{
	height: auto;
	background: none;
}

		
		
		
#nav
			{
				position: relative;
				top: auto;
				left: auto;
				margin: 0 0 0 0;

			}





#nav > a
				{
					width: 3.125em; /* 50 */
					height: 3.125em; /* 50 */
					text-align: left;
					text-indent: -9999px;
					background-color: #000;
					position: relative;
					}
#nav > a:before,
#nav > a:after
					{
						position: absolute;
						border: 2px solid #fff;
						top: 35%;
						left: 25%;
						right: 25%;
						content: '';
					}
#nav > a:after
					{
						top: 60%;
					}

#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type
				{
					display: block;
				}


			/* first level */

#nav > ul
			{
				height: auto;
				display: none;
				position: absolute;
				left: 0;
				right: 0;

			}
#nav:target > ul
				{
					display: block;
				}
#nav > ul > li
				{
					width: 100%;
					float: none;
				}
#nav > ul > li > a
					{
						height: auto;
						text-align: left;
						padding:  1.2em;
					}
#nav li ul a {
	padding:  1.2em;
	font-size: 1em;
}
#nav > ul > li:not( :last-child ) > a
						{
							border-right: none;
							border-bottom: 0;
						}


/* second level */

#nav li ul
				{
					position: static;
					padding: 1.25em; /* 20 */
					padding-top: 0;
					background: none; 
					margin-left: 50px;
					width: auto; 
				}



.others{
	display: none; 
}

}



@media only screen and ( max-width: 640px ) {
#pitch{
	display: none;
}
#rightpix{
	float: none; 
	width: auto;
}
#rightpix img{
	display: inline-block;
}
.nsew {
	height: 100%;
	width: 100%;
} 

.pictures div {
	width: 100%;
	height	: auto;
	max-width: none;

}
td, th {
	padding: 1px; 
	font-size: 12px
	line-height: auto; 
}
.email, #heading{
	display: none; 
}
#container {
	margin: 60px auto 0 auto; 
}
}


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

td, th {
	display: block;


}
.fixtures #newday > td{
	border-top: 1px solid #000;
}

}