/* Copyright (C) www.getaforecast.com, All Rights Reserved. */

/* Global */
/* =================================================================================================================== */
body {
	margin:0;
	padding:0;
	margin-left: 15px;
	font-family: Verdana, sans-serif;
	font-size: 100%;
	line-height: 1.5em;
	color: #444;
	background-color: #d9d9d9;
}

p {font-size: 70%; line-height: 1.25em; margin:0 0 1em 0;}

.smaller {font-size: 80%;}
#smaller {font-size: 80%;}
.bigger {font-size: 120%;}
.warning {color: red;}
.wavechartpic {float:right; margin-bottom:50px;}
.wide_line_spacing {line-height: 1.75em;}
.strikeout {text-decoration: line-through;}
.google_adsense_keywords {color:#CCCCCC; font-size: 60%; position: relative; bottom: -0px; right: 0px;}

img {border-style: none;}

/* Google Testing */

#googletweakbigger {font-size: 110%;}

.mimic-google {
	font-size: 63%;
	line-height: 1.25em;
	margin:0 0 1em 0;
	position: relative;
	left: 17px;
	top: 10px;
}
.mimic-google-header {
	font-size: 70%;
	line-height: 1.25em;
	font-weight: bold;
	margin:0 0 1em 0;
	position: relative;
	left: 17px;
	top: 10px;
	text-decoration: underline;
}

h1,h2 {font-family: georgia, serif; line-height: 1.3em; color: #222; font-weight: normal; padding:0; margin:.5em 0 .4em 0;}
h1 {font-size:180%; letter-spacing:-0.25px;}
h2 {font-size:140%;}
h3 {font-family: Verdana, sans-serif; font-size:70%; color: #444; font-weight: bold; margin:.5em 0 .5em 0; padding: 0; border-top: 1px dotted #999; border-bottom: 1px dotted #999;}
h4 {font-family: Verdana, sans-serif; font-size:80%; font-weight: bold;}

/* H1 subhead looks better with non-shrunk letter-spacing */
.h1subhead {font-size: 36%; color:#444; letter-spacing:0; font-family: Verdana, sans-serif; line-height: 1em;}
/* H1 move up into Google ad */
.h1_upto_googlead{margin-top:-10px;}


a:link {
	text-decoration: underline;
	color: #2f58a4;
	font-weight: bold;
}
a:active {
	text-decoration: underline;
	color: #2f58a4;
	font-weight: bold;
}
a:visited {
	text-decoration: underline;
	color: #2f58a4;
	font-weight: bold;
}
a:hover {
	text-decoration: underline;
	color: #2f58a4;
	font-weight: bold;
}

/* Heading links are not bold */
h1 a:link, h1 a:active, h1 a:visited, h1 a:hover {font-weight: normal;}
h2 a:link, h2 a:active, h2 a:visited, h2 a:hover {font-weight: normal;}

/* display block prevents IE adding unwanted vertical space */
.fix_IE_gap {display: block;}
/* UKMO sea temp */
.seatemp-ukmo {border: 1px solid #222;}

#pullquote{
	width: 250px;
	float: right;
	margin-left: 30px;
}

#pullquote_400px{
	width: 400px;
	float: right;
	margin-left: 50px;
}

#pullquote_200px{
	width: 200px;
	float: right;
	margin-left: 20px;
}

#pullquote_narrow{
	width: 150px;
	float: right;
	margin-left: 20px;
}

.icon_float_left {
	float:left;
	margin-right:4px;
}

#pullquote ul, #pullquote li {list-style-type: circle;}

/* Navpics: avoid underline appearing below blank char of link text */
#headerbox2 a:hover {text-decoration: none;}

/* Index page */
#backdrop_index {
	/* was url(/images/surfing/general/sagres6.jpg) on 800px page */ 
	background-image: url(/images/photos/sagres42528faded.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
}
/* was 360px */
#backdrop_index_text {width: 520px;}

/* Surf page and CLICKBANK Total Surfing Fitness page. Container is relative so links position relative to eurosurfmap.jpg */
#container {position: relative; color: #fff;}
/* Surf page and CLICKBANK Total Surfing Fitness page links white */
#container a:link, #container a:active, #container a:visited, #container a:hover {color: #FFF;}
/* Surf and CLICKBANK Total Surfing Fitness page text wider line height for readability (as it's bold and underlined) */
#container p {line-height:1.4em;}

/* Wrapper (was 810px, 826px+40=866, 1020+20=1040 */
#wrapper {
	width: 1000px;
	/* centered on the page */
	margin-left: auto ;
  	margin-right: auto ;
	background-color: #fff;
	padding: 0 20px;
}

/* Header */
#headerbox1 {margin:0;}
.toprow_intro, .toprow_date, .toprow_search {font-size: 70%; margin-top:10px; margin-bottom:10px;}
.toprow_intro {}
.toprow_date {float: right; text-align: right;}
.toprow_search {float: right; text-align: right;}

/* Preload images */
div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

/* Navigation */
/* =================================================================================================================== */
.navpic_logo {float:left;}
.navpic_surf, .navpic_webcams, .navpic_weather_charts, .navpic_members {
	width: 93px;
	height: 93px;
	display: block;
	float:right;
	margin-left:10px;
	font-size: 10px;
	text-decoration: none;
	background-repeat:no-repeat;
}

/* Nav pics */
.navpic_surf {background-image:   url("../images/nav/nav_surf_forecasts.jpg");}
.navpic_surf:hover {background-image:   url("../images/nav/nav_surf_forecasts_on.jpg");}
.navpic_webcams {background-image:   url("../images/nav/nav_webcams.jpg");}
.navpic_webcams:hover {background-image:   url("../images/nav/nav_webcams_on.jpg");}
.navpic_weather_charts {background-image:   url("../images/nav/nav_weather_charts.jpg");}
.navpic_weather_charts:hover {background-image:   url("../images/nav/nav_weather_charts_on.jpg");}
.navpic_members {background-image:   url("../images/nav/nav_members.jpg");}
.navpic_members:hover {background-image:   url("../images/nav/nav_members_on.jpg");}

/* Nav bar */
#navbar {
	width: 100%;
	height: 32px;
	background-image: url(../images/nav/navbar_off.gif);
	/* margin-bottom: 25px before Google Ads added, 11px before Google Search Links added, 9px with G links, 0px with G links blended gb2 white text on black */
	margin-bottom: 0px;
	background-color: #333333;
}
#navbar a {color: #CC6633; text-decoration: none;}
#navbar a:hover {text-decoration: underline;}
#navbar_message {
	float: right;
	/* was font:70%/1 Arial,Helvetica,sans-serif; before google adwords */
	font-size: 70%;
	line-height: 1em;
	/* was white */
	color: #CC6633;
	/* was 11px 8px */
	padding: 11px 15px;
}

#google_search_box {
	float: right;
	line-height: 1em;
	padding: 0px 0px 0px 0px;
}

/* 
#navigation {
   list-style: none;
   margin: 0; padding: 0;
   font:60%/1 Arial,Helvetica,sans-serif;
}
*/
/* to mimic google */
#navigation {
	list-style: none;
	margin: 0; padding: 0;
	font-size: 70%;
	line-height: 1em;
/*  google would be line-height: 1.25em; */
/*  google would be font-weight: bold; */
}

#navigation li {
   float: left;
   list-style: none;
   padding-left: 10px;
}
#navigation li a {
   display: block;
   text-align: center;
   color: white;
	/*      ver  hor      ver padding needed so 2col background shows properly */
   padding: 11px 6px;
   text-decoration: none;
}

/* REMOVED FOR NEW WHITE-ON-BLACK GOOGLE LINK UNIT ================================================== */
#navigation li a:hover {
	/*          #EF008C is logo-magenta to appear while mouseover graphic loads ============ */
	background: #EF008C;
	background-image:   url("../images/nav/navbar_on.gif");
	background-repeat:repeat-x;
	text-decoration: none;
}

/* ADDED FOR NEW WHITE-ON-BLACK GOOGLE LINK UNIT ================================================== 
#navigation li a {
   text-decoration: underline; font-weight: normal; padding: 11px 20px 11px 6px;
}
*/ 

.new  {
	font-style: italic;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

/* Google Ads */
/* =================================================================================================================== */
#ad-left {float:left; margin-right:10px;}
/* Google Ads #google160x600tweak {font-size:105%;} */
/*                                             was padding: 5px 0px 10px 30px  border-top FOR gb2 WHITE-ON-BLACK GOOGLE LINK UNIT */
#box-google-link-unit-gb2 {background-color: #000; padding: 5px 0px 10px 25px; border-top: 3px solid #c63;}
#box-google-link-unit-gb1 {padding: 5px 0px 0px 10px;}

/* Affiliated products */
/* =================================================================================================================== */
#box_affiliates {float:right; width:300px;}
/* Webgains needs tight line height to avoid looking stretched */
#webgains {line-height: 1em;}
.urban-surfer-product {color: #78C713; color: #222;}

/* Discount codes */
/* =================================================================================================================== */
.discount-code, .discount-code a:link, .discount-code a:active, .discount-code a:visited, .discount-code a:hover {font-family: georgia, serif; line-height: 1.2em; font-size:100%; color: #2F58A4; font-weight: normal; padding:0; margin:.5em 0 .4em 0;}

/* Forecasts */
/* =================================================================================================================== */
/* #EEC591 = burlywood2 (web safe) */	
/* #EE9A49 = tan2 (web safe) */	
/* #C35817 = sienna3 (web safe) */

/* width = 100px - 2px border so total is 800px wide */	
/* width = IE needs this to be 78 rather than 80px */	
/* margin-bottom puts space above tide notes */	
/* width was 98px but 108px avoids any scrollbars in FF default text size */	
#column {float:left; width:90px; margin-bottom:3px;}

#box_day_title {background: #FFCB8C; height:44px; padding-top:20px; padding-bottom:0px; border-right:1px solid #FFD39B; overflow:auto; word-wrap: break-word;}
#box_day {background: #FFCB8C; height:49px; padding-top:15px; padding-bottom:0px; border-right:1px solid #FFD39B; overflow:auto; word-wrap: break-word;}

#box_surf_title {height:54px; padding-top:30px; padding-bottom:0px; border-right:1px solid #EEC591; border-bottom:1px solid #EEC591; overflow:auto;  word-wrap: break-word;}
#box_surf {height:59px; padding-top:25px; padding-bottom:0px; border-right:1px solid #EEC591; border-bottom:1px solid #EEC591; overflow:auto;  word-wrap: break-word;}

#box_wind, #box_wind_title {height:75px; padding:5px 0px; border-right:1px solid #EEC591; border-bottom:1px solid #EEC591; overflow:auto;  word-wrap: break-word;}
#box_wind_title {padding-top:10px; padding-bottom:0px; border-bottom:1px solid #EEC591;}
/* IE bug doesn't add horiz scrollbar for loooong words.
   This is fixed by using "word-wrap: break-word" which is IE-specific and line-breaks long words. This also
   has a bug (!) where if you increase then decrease font size, center align becomes left align. Refresh F5 corrects this.
*/	
/*                      height was 170px, was 145px */	
#box_recc, #box_recc_title {height:150px; padding-top:10px; padding-bottom:0px; border-right:1px solid #EEC591; border-bottom:1px solid #EEC591; overflow:auto; word-wrap: break-word;}
#box_recc_title {height:153px; border-bottom:1px solid #EEC591; padding-top:7px;}
#box_tide, #box_tide_title {height:55px; padding-top:5px; padding-bottom:0px; border-bottom:1px solid #EEC591; border-right:1px solid #EEC591; overflow:auto; word-wrap: break-word;}

/* All titles have background color */	
#box_surf_title, #box_wind_title, #box_recc_title, #box_tide_title {background: #FFD39B;}

/*                burlywood1 */	
.off {background: #FFD39B;}
/*                burlywood2 #EEC591 looked good on laptop but nasty on Jon's plasma
				  SandyBrown #F4A460 is ok on both screens but wind arrows look poor
				  #8CBFFF in the complement of #FFD39B but is a bright blue
				  #FFCB8C is good on both screens
				  */	
.on {background: #FFCB8C;}

/* ////////////////// NOT WORKING ??? //////////////////////////// */
.on_weekend {background: #EE9A49;}

.day_title {font:110%/1 Arial,Helvetica,sans-serif; letter-spacing: .03em; margin: 0; text-align:left; padding-left: 10px;}
.day {font:150%/1 Arial,Helvetica,sans-serif; letter-spacing: .03em; margin: 0; text-align:center;}
.daydate {font:45%/1.4 Arial,Helvetica,sans-serif; letter-spacing: 0; margin: 0; text-align:center;}
.surf_title {font:110%/1 Arial,Helvetica,sans-serif; letter-spacing: .03em; margin: 0; text-align:left; padding-left: 10px;}

.surf {font:150%/1 Arial,Helvetica,sans-serif; letter-spacing: .03em; margin: 0; text-align:center;}
.surftext {font:45%/1.2 Arial,Helvetica,sans-serif; letter-spacing: 0; margin: 0; text-align:center;}

.wind_title {font:110%/1 Arial,Helvetica,sans-serif; margin: 0; text-align:left; padding-left: 10px; padding-top:20px;}
.wind {font:150%/1 Arial,Helvetica,sans-serif; margin: 0; text-align:center;}

.windtext {font:45%/1.2 Arial,Helvetica,sans-serif; letter-spacing: 0; margin: 0; text-align:center;}
.recc_title {font:110%/1.3 Arial,Helvetica,sans-serif; margin: 0; text-align:left; padding-left: 10px; padding-top:0px; padding-right: 10px;}

/* box_recc is 130px high, .rec is 120px high, leaving a margin of 10px between reccs and tides when scrollbar needed*/	
/* We want recc text same size as daydate, surftext and windtext: 150 x .45 = .67 */	
/* .recc was .recc {font:78%/1.5 Arial,Helvetica,sans-serif; */
.recc {height:120px; padding-left: 4px; padding-right: 1px; margin: 0;}
.tide_title {font:110%/1.5 Arial,Helvetica,sans-serif; margin: 0; text-align:left; padding-left: 10px;}
.tide {font:110%/1.5 Arial,Helvetica,sans-serif; margin: 0; text-align:center;}

#text_below_forecast {width: 540px;}

/* Forecast Table & Webcam */
/* =================================================================================================================== */
#nowcast_table {float:left; width:180px; background-color:white;}
/* Nowcast headings on index page (eg. The North East) are same as h2, with fixed height */
#index_nowcast_heading {height:50px; font-family: georgia, serif; font-size:140%; line-height: 1.1em; color: #222; font-weight: normal; padding:0; margin:.5em 0 .4em 0;}

/* 108 x 6 = 648 */
#forecast_table {}

#box_nowcast_title, #box_webcam_title {
	text-align: center;
	font-family: georgia, serif;
	color: #222;
	background-color: #FFCB8C;
	margin-bottom:5px;
	border-top:1px solid #ee9a49;
	border-bottom:1px solid #ee9a49;
	font-size:110%;
}

#box_nowcast_title {width:180px;}
#box_webcam_title {width:500px;}

/* line-height works for FF but not IE. margin-top and padding-top don't work in FF or IE */
.webcam_subtitle {font-size:63%; line-height: 1.5;}

.webcam_wrapper_table {width:500px; position: relative; bottom: 0px; left: 10px;}

#box_webcam {
	/* negative bottom margin to reduce unwanted gap between 2 webcam divs (50px perfect when 2 cams but produces squashed picturetext_below_pic) */
	margin: 0px 0px -30px 0px;
}

#box_webcam_wp {
	/* no negative bottom margin as this causes video to touch lower heading */
	margin: 0px 0px 20px 0px;
}

#box_webcam_nwi {
	/* float:right;  */
	/* no negative bottom margin as this overlaps nwi webcam divs */
	margin: 0px 0px 0px 0px;
}

.webcam {border: 2px none #D3D3D3;}

/* Picture text                                                       moved up 30px so text is over the webcam */
/* OLD >>>
.picturetext {font-size: 70%; color: white; position: relative; bottom: 55px; right: -20px;}
.picturetext_higher {font-size: 70%; color: white; position: relative; bottom: 68px; right: -20px;}
.picturetext_higher2 {font-size: 70%; color: white; position: relative; bottom: 78px; right: -20px;}
.picturetext_black {font-size: 70%; color: black; position: relative; bottom: 55px; right: -20px;}
.picturetext_below_pic {font-size: 70%; color: black; padding-bottom:20px;}
.picturetext_IE_message {font-size: 70%; color: black; margin: -500px 0px 30px 30px;}
 */

/* NEW >>>     */
.picturetext {color: white; position: relative; bottom: 55px; right: -20px;}
.picturetext_higher {color: white; position: relative; bottom: 68px; right: -20px;}
.picturetext_higher2 {color: white; position: relative; bottom: 78px; right: -20px;}
.picturetext_black {position: relative; bottom: 55px; right: -20px; padding-top:12px;}
.picturetext_below_pic {padding-top:12px;}
/* .picturetext_IE_message {margin: -500px 0px 30px 30px;} */
.picturetext_IE_message {margin: -275px 30px 230px 40px;}
 
.picturetext a:link, .picturetext a:active, .picturetext a:visited, .picturetext a:hover {color: white;}
.picturetext_higher a:link, .picturetext_higher a:active, .picturetext_higher a:visited, .picturetext_higher a:hover {color: white;}
.picturetext_higher2 a:link, .picturetext_higher2 a:active, .picturetext_higher2 a:visited, .picturetext_higher2 a:hover {color: white;}

/* We want these links to be the same as default links
.picturetext_black a:link, .picturetext_black a:active, .picturetext_black a:visited, .picturetext_black a:hover {color: black;}
.picturetext_below_pic a:link, .picturetext_below_pic a:active, .picturetext_below_pic a:visited, .picturetext_below_pic a:hover {color: black;}
 */

/* How to get 5 day forecasts NEW */
/* =================================================================================================================== */
.getaforecast_heading {font-family: Verdana, sans-serif; font-size:70%; color: #444; font-weight: bold; margin:.5em 0 .5em 0; padding: 0; border-top: 1px dotted #999; border-bottom: 1px dotted #999;}
.tel_number, .fax_number {font:110%/1 Arial,Helvetica,sans-serif; color: #000; margin-top:0; margin-bottom:.2em;}

/* How to get 5 day forecasts OLD */
/* =================================================================================================================== */
/* EEC591 = burlywood2 (web safe) */	
/* #EE9A49 = tan2 (web safe) */	
/* #FEF0C9 = carmel tan (very pale neutral) */	
#box_5day {
	background: #EEC591;
	/* was 170 */	
	width:192px;
	height:250px;
	overflow:auto;
	border:1px solid #EE9A49;	
	float:left;
	margin-right:12px;
}

#box_5day_title {
	background: #EE9A49;
	text-align:center;
	padding-top:5px;
	padding-bottom:10px;
	font-family: georgia, serif;
	font-size:150%;
	color: #222;
	margin: 0;
	padding: 0;
	padding-top:8px;
	padding-bottom:10px;
}

#box_5day_content {
	padding-left: 10px;
	padding-right: 5px;
}

/* Weather Charts */
/* =================================================================================================================== */
.icon {float: left; margin-right:10px; margin-bottom:10px; border:1px solid black}
.float_left {float: left; margin-right:10px; margin-bottom:5px;}
.float_right {float: right; margin-left:5px; margin-bottom:5px;}
.float_right_biggap {float: right; margin-left:20px; margin-bottom:10px;}


/* Example code (Add this surf forecast to your webpage */
/* =================================================================================================================== */
.example-code {background-color:#fff4c8;border:1px dashed #EE9A49;}
/* Left col = 690px -2px border = 688px */
textarea.example-code {height: 30px; width:688px; font-size:11px; margin-bottom:10px;}

/* Footer */
/* =================================================================================================================== */
#footerimage {
	margin-top:5px;
	background-image: url("../images/footer/footer.jpg");
	background-repeat: no-repeat;
	background-position: top right;
	height:30px;
	margin-bottom:4px;
}

#footer {
/*  reduce space between footer image and footer text */
	margin-top:-5px;
	padding-bottom:30px;
}

.footer_left, .footer_right {margin-top:10px; margin-bottom:5px;}
.footer_left {float: left;}
.footer_right {float:right; text-align: right;}