@charset "utf-8";
/* CSS Document */

/*----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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl,dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;	padding: 0;	border: 0;	font-family: Tahoma, Arial;
}

/*--------General styles-----------*/

html { height:100%}
body {font-size:62.5%; color:#0E345C; width:100%; }

a, .tab {	color:#0071BC;	text-decoration:none;}
a:hover { text-decoration:underline}
.rounded {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.clear { clear:both;}
.dark { color:#033}
.blue {color:#0071BC}
.large { font-size:190%}

.group:before, .group:after {content:""; display:table;}
.group:after {clear:left;}
.group { zoom:1; /* For IE 6/7 (trigger hasLayout) */}

/*--------Layout-----------*/

/*#bg {position:fixed; top:0; left:0; width:100%; height:100%; }*/

#bg {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
		}
		
		@media screen and (max-width: 1024px){
			#bg {
				left: 50%;
				margin-left: -512px; }
		}


#container { position:relative; margin:0 auto; width:980px; z-index:1}
#header { position:relative; display:block }
#logo { position:relative; margin:20px 0px 140px 0px}
#lang { position:absolute; right:0px; width:71px; height:33px; top:-30px}
	#lang a.english { background:url(../gfx/icons/english.png); width:100%; height:100%; display:block} 
	#lang a.spanish { background:url(../gfx/icons/spanish.png); width:100%; height:100%; display:block} 
	
#main { position:relative; 
/* background:rgba(0, 0, 0, 0.4); 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#9900000)";
       		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);*/}

#cam { display:block; position: absolute; width:640px; height:600px; background:#fefefe; border:1px #CCC solid; left:20px; top:120px; z-index:100}
	#camAlert {position:absolute; width:100%;}
	#camAlert.Top { top:5px}
	#camAlert.Bottom { bottom:18px}
	#camAlert.sardiManMessage { height:121px; padding-left:59px; padding-top:11px; width:478px;overflow:hidden; background:url(../gfx/sardimanMessage.png); font-size:1.1em}

 iframe { border: 0; }

#meta-container { position:relative; margin-right:320px; padding-left:20px; padding-bottom:20px; padding-top:290px}
#meta-container.novid { position:relative; margin-right:320px; padding-left:20px; padding-bottom:20px; padding-top:20px}
#metadata { position:relative; margin: 200px 0 0;}
#right-side { position:relative; float:right; width:280px; margin-top:27px}

li{ list-style:none; float:left; font-size:1.2em}
p {font-size:1.2em; margin:10px 0px}

#meta-tabs { position:relative; margin:15px 0px 0px 0px; border-bottom:1px solid #fff; padding-bottom:27px}
#meta-tabs ul, { display:inline; }
#meta-tabs li { border:1px solid #999; border-bottom:0px; margin-left:10px;}
.tab { display:block; padding:6px 15px 6px 15px; line-height:1.2em; background-color:#ccc; cursor:pointer;

/* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #fff, #ccc); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #fff, #ccc); /* IE 10 */ background: -ms-linear-gradient(top, #fff, #ccc); /* Opera 11.10+ */ background: -o-linear-gradient(top, #fff, #ccc);
}
.active {background:#FFF}
#tab-content { clear:left; padding:10px; background:#fefefe; margin-bottom:20px}

	#actual li { width:33%; font-size:100%; background:url(../gfx/divider.jpg) no-repeat}
	#actual.content { height:200px}
	#actual li:first-child { background:none}
	#actual li div { padding:0px 15px 0px 15px}
	#actual p { clear:left; margin-bottom:5px}
		.reportWidget { float:right}
	#sea {}
		#swell-height {}
		#sea-data { float:right; text-align:center; margin-top:20px; margin-right:25px}
		#date{ font-size:1.3em}
		#time{ font-size:2.4em; font-style:italic; color:#666}
		#buoy h2 { padding:5px; border-bottom:#06C dotted 1px; border-top:#06C dotted 1px; margin:20px 0px 20px 0px; background:#069; color:#FFF }

.content { display:none}
.first { display:block}
#map_canvas { height:250px; width:619px}

#fbcomments{ position:relative; background:#fefefe; padding:15px; padding-left:40px; margin-top:15px}


		
#like {position:absolute; bottom:0px; background-color:#FFF; height:18px; padding-top:6px; padding-right:6px; width:634px; text-align:right; background-color:#ccc; cursor:pointer;

/* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#fff)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #ccc,#fff ); /* Firefox 3.6+ */ background: -moz-linear-gradient(top,#ccc , #fff); /* IE 10 */ background: -ms-linear-gradient(top,#ccc, #fff ); /* Opera 11.10+ */ background: -o-linear-gradient(top, #ccc, #fff);}

#credit { float:right}
#like #fblike { position:absolute; top:2px; left:2px}

.ad-250, .ad-here {width:250px; height:250px; background-color:#EEE; border:1px #CCC solid; margin-bottom:15px; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #fff, #ccc); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #fff, #ccc); /* IE 10 */ background: -ms-linear-gradient(top, #fff, #ccc); /* Opera 11.10+ */ background: -o-linear-gradient(top, #fff, #ccc); overflow:hidden}
.ad-here { width:230px; font-size:1.4em; height:30px; text-align:center; color:#F60; font-weight:bold; padding:10px}

.ad-left { width:640px; background-color:#CCC; height:80px; overflow:hidden}
.rotating-ad { width:250px; height:100px; overflow:hidden; background-color:#CCC; margin-bottom:15px   }

.rotating-ad p, .ad-250 p, .ad-left p  { margin:0px}

/*Auction */
.quip li { clear:left; width:100%}
.quip-fld label { width:150px; display:block; float:left}
.quip-fld { margin-bottom:10px}
#auction { position:relative; background:#fefefe; padding:15px; padding-left:20px; margin-top:10px }
#auction h1 { padding-bottom:15px;}
#auction .entry li { padding:5px 0px 5px 5px; list-style:square;}
#auction ul { margin-left:20px}
.quip-comment-text { float:right; margin-right:115px; padding-top:1em}
.quip-comment-meta { float:left; padding-top:1em}
.quip-latest-comment { width:100%}
.quip-latest-comment { border-top:2px dotted #CCC; margin-bottom:10px}
.post { border-top:2px dotted #CCC; padding-top:15px; margin-top:15px}
#auction .entry { background:#005289; padding:10px; color:#FFF}
#auction .entry a { color:#CCFE67; text-decoration:underline}
#bid { position:relative; background:#0071BC; padding:10px; color:#FFF;}
#random { background-color:#016701; color:#fff; padding:20px; margin-top:30px}
#surandom { position:relative; background:#0071BC; padding:10px; color:#FFF;}

.pub0 { background-color:#090}
#admin li:nth-child(n+6) {
    background-color:#efefef; color:#000
}

.quip-comment-text p:after { content:" por mes"}
.quip-comment-text p:before { content:"�"}
.bid, .email  { float:left;  }
.bid input { width:70px}
#auction form input, #auction form label, #auction form select  {  padding:10px; font-size:1.4em }
.bidTitle { padding:7px 0px 7px 0px; font-size:2.0em; color:#CCC}
.form-buttons { float:left; margin-left:10px}
.quip-comment-text p { padding-top:0px; }
#success { background-color:#F60; color:#333; left:40%; top:10%; font-size:2.0em; position:absolute}


/*Footer */

#footer { position:relative; background-color:#000;  background:rgba(0, 0, 0, 0.8); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#9900000)";
       		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);color:#FFF; width:100%; padding-top:55px; padding-bottom:20px; float:left; min-height:300px}
#footer h3 { color:#01859C}
#footer p { margin-bottom:10px;}
#footer a { color:#397E9D}
#footer .title {  border-bottom:1px #01859C dotted; padding-bottom:10px}
#footer td, #footer th { padding:5px; font-size:1.2em; vertical-align:top; }
#footer th { text-align:right; width:110px }
#footer li p {font-size:100%; width:100%}
#footer li{ list-style:decimal; margin-bottom:30px}
#footer-inner { position:relative; background:url(../gfx/logo-blue.png) no-repeat; padding-left:55px; width:700px; margin:0 auto; overflow:}
.overview, .details { float:left; padding:0px 20px 0px 20px}
.overview { width:200px; border-right:1px solid #01859C}
.details { width:400px; padding-right:0px; }
#ftFaq { display:none}
	#ftFaq ol { margin-left:60px}
	.ftab { cursor:pointer; color:#01859C; padding:5px 10px 5px 10px; border:1px solid #FFF; border-top:0px}
#footer-nav { position:absolute; right:0px; top:-50px; font-size:1.2em}

#actual #date, #actual #tides { margin:0px; padding:0px}
#tides { display:none; margin-bottom:3px}
#tides li { float:left; width:200px; padding:0px; background:none; margin:0px }
#tides li div { width:50px; padding:5px; float:left; font-size:1.2em;}
#tides li .left { border-top:1px solid #CCC; border-right:1px solid #CCC}
#tides li .right { border-top:1px solid #CCC;}