/*
	Theme Name: jpc-style-2017
	Date: January 2017
	Description: Christian Vasile Original 
	Version: 1.0
	Modified: 2017	
*/
/* ========= Headings ======== */

h2 {
	font-size: 22px;
}
h3 {
	font-size: 20px;
}
h4 {
	font-size: 18px;
}
h5 {
	font-size: 16px;
}
h6 {
	font-size: 12px;
}
p {
	font-size: 12px;
	line-height: 12px;
	color: #CCCCCC;
	margin: 0px;
	padding: 0px;
}

p.linkHead {
	font-size: 14px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	line-height: 18px;
	color: #CCCCCC;
	margin: 0px;
	padding: 5px 0px 5px 20px;
}

p.linkLink {
	font-size: 12px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	line-height: 14px;
	margin: 0px;
	padding: 0px;
}

.greenGIANT {
	color: #00FF00;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	margin: 2px;
}

p.green {
	font-size: 12px;
	line-height: 14px;
	color: #00FF00;
	text-align: center;
	margin: 0px;
	padding: 0px;
}

p.greenTide {
	font-size: 12px;
	line-height: 14px;
	color: #00FF00;
	text-align: left;
	margin: 0px;
	padding: 0px 0px 0px 20px;
}

p.yellowTide {
	font-size: 12px;
	line-height: 14px;
	color: #FFFF00;
	text-align: left;
	margin: 0px;
	padding: 0px 0px 0px 10px;
}

p.blackMSG {
	font-size: 12px;
	line-height: 14px;
	color: #000000;
	text-align: center;
	margin: 0px;
	padding: 2px 0px 2px 0px;
}
p.greenTitle {
	font-size: 14px;
	color: #00FF00;
	text-align: center;
	margin: 0px;
	padding: 3px;
}

p.greenContent {
	font-size: 12px;
	line-height: 16px;
	color: #00FF00;
	margin: 10px
}

p.copyRight {
	font-size: 12px;
	line-height: 14px;
	color: #999999;
	padding-left: 20px;
}

.small {
	font-size: 10px;
	color: #999999;
	margin: 20px;
	padding-top: 2px;
	padding-bottom: 3px;
}

.verysml {
	font-size: 6px;
	margin: 0px;
	padding: 0px;
}

.invis {
	font-size: 4px;
	line-height: 4px;
	padding: 0px;
	color: #010101;
}

h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 18px;
	margin-bottom: 3px;
}
.centerText {
	text-align: center;
	padding: 5px;
	color: #00FF00;
}
.grayLine {
	color: #CCCCCC;
	padding-left: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}
.topSideLine {
	color: #CCCCCC;
	text-align: left;
	margin-top: 5px;
	margin-bottom: 5px;
}
.grayRssLine {
	color: #CCCCCC;
	padding-left: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}
.yelLine {
	color: #FFFF00;
	padding-left: 10px;
	margin-top: 5px;
}
.linkLine {
	color: #FFFF00;
	padding-left: 20px;
}
/* ======= Anchor style ====== */
a {
	outline: none;
	text-decoration: none;
	background-color: transparent;
}
a img {
	outline: none;
}
img {
	border: 0;
	border-radius: 10px;
}
a:link, a:visited {
	color: #FE0001;
	text-decoration: none;
}
a:hover, a:active {
	background-color: #FE0001;
	color: #FFFFFF;
	text-decoration: none;
}

/* Horizontal Rule Line */

hr {
	width: 100%;
	height: 0.5px;
	color: #CCCCCC;
	margin-bottom: 15px;
}

/* ======================== ROUND TABLE CORNERS AREA ============================ */

table.roundCorners {
	width: 99%;
	margin: 3px auto 0px auto;
	padding: 0px;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
}
/* ========================= RADIUS FOR CENTERED TABLES ====================================*/
.topRound {
	border: 1px solid #CCCCCC;
	border: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.midRound {
	border: 1px solid #CCCCCC;
	border-left: none;
	border-right: none;
	border-bottom: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.botRound {
	border: 1px solid #CCCCCC;
	border-left: none;
	border-right: none;
	border-bottom: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}

/* ========================= RADIUS FOR LEFT ALIGNED TAB TABLES ====================================*/
.topTabRound {
	border: 1px solid #CCCCCC;
	border: none;
	padding: 0px 0px 0px 3px;
	margin: 0px;
	text-align: left;
}
.midTabRound {
	border: 1px solid #CCCCCC;
	border-left: none;
	border-right: none;
	border-bottom: none;
	padding: 0px 0px 0px 3px;
	margin: 0px;
	text-align: left;
}
.botTabRound {
	border: 1px solid #CCCCCC;
	border-left: none;
	border-right: none;
	border-bottom: none;
	padding: 0px 0px 0px 3px;
	margin: 0px;
	text-align: left;
}

/* =========== THIS IS FOR STORM TD'S DIVIDED EXTRA LINK STORM TABLE MIDDLE YELLOW LINE ETC =============*/

.topStormRound {
	border: 1px solid #FFFF00;
	border: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.midStormRound {
	border: 1px solid #FFFF00;
	border-left: none;
	border-right: none;
	border-bottom: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.botStormRound {
	border: 1px solid #FFFF00;
	border-left: none;
	border-right: none;
	border-bottom: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}

/* ===================== THIS DOES TIME CONV TABLE RADIUS =========================*/

table.roundTDcorner {
	width: 99%;
	margin: 0px auto 0px auto;
	padding: 0px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	text-align: center;
}
.topLeft {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-left: none;
	border-bottom: none;
	padding: 0px;
	margin: 0px;
}
.top1 {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-left: none;
	border-bottom: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.top2 {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-left: none;
	border-bottom: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.top3 {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-left: none;
	border-bottom: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.topRight {
	border: 1px solid #CCCCCC;
	border: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.midLeft {
	border: 1px solid #CCCCCC;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.mid1 {
	border: 1px solid #CCCCCC;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.mid2 {
	border: 1px solid #CCCCCC;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.mid3 {
	border: 1px solid #CCCCCC;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.midRight {
	border: 1px solid #CCCCCC;
	border-right: none;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.botLeft {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-bottom: none;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.bot1 {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-bottom: none;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.bot2 {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-bottom: none;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.bot3 {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-bottom: none;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.botRight {
	border: 1px solid #CCCCCC;
	border: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}

/* ======= Body style ======== */

body {
	background-image: url('../images/sand-texture.jpg');
	background-attachment: fixed;
	color: #00FF00;
	font-family: Verdana, Geneva, sans-serif;
	padding: 0;
}
.body {
	clear: both;
	margin: 0 auto;
	width: 1200px;
	height: auto;
}

/* =============================== TOP CASSIDY AD DIV ================================ */

div.topAd {
	float: none;
	width: 1200px;
	height: auto;
	overflow: hidden !important;
	margin: 5px auto 10px auto;
}

.cassidyTopAd {
	width: 1200px;
	height: 180px;
	padding: 0px;
}

.cassidyImg {
	border: 2px #000000 solid;
}

.cassidyTopAd a:hover, a:active {
	background-color: transparent;
	text-decoration: none;
}

/* ============================= UPPER NAV MENU DIV =============================== */

.upperMenu {
	width: 1200px;
	height: 30px;
	background: #000000;
	font-size: 14px;
	line-height: 16px;
	margin: 0 auto;
/* ====	border-bottom: 1px solid #CCCCCC; ======= */
	border-radius: 8px 8px 0px 0px;
}
.upperMenu ul {
	list-style: none;
	margin: 0 auto;
}
.upperMenu ul li {
	float: left;
	display: inline;
}
.upperMenu a:link, .lowerMenu a:visited {
	color: #FE0001;
	display: inline-block;
	height: 20px;
	padding: 6px 25px 4px 25px;
	text-decoration: none;
}
.upperMenu a:hover, .lowerMenu a:active, .lowerMenu .active a:link, .lowerMenu .active a:visited {
	background: #FE0001;
	color: #FFFFFF;
	text-shadow: none !important;
}
.upperMenu li a {
	border-radius: 5px;
}
.upperMenu img {
	width: auto;
	height: auto;
	margin: 1% 1%;
}

/* =========================== WX PIRATE & BANNER AD DIV ========================= */

.jpcBanner {
	width: 1200px;
	height: 131px;
	background: #000000;
	margin: 0px auto;
	border-radius: 0px;
}

.jpcInfo {
	width: 430px;
	height: 130px;
	float: left;
	padding: 0px 8px 0px 12px;
}

.jpcWXlogo {
	border: 1px #CCCCCC solid;
}

.jpcInfo a:hover, a:active {
	background-color: transparent;
	color: #FFFFFF;
	text-decoration: none;
}

.bannerInfo {
	width: 730px;
	height: 130px;
	float: right;
	padding: 0px 12px 0px 8px;
}

.bannerInfo a:hover, a:active {
	background-color: transparent;
	color: #FFFFFF;
	text-decoration: none;
}

/* =============================== LOWER NAV MENU DIV ================================ */

.lowerMenu {
	width: 100%;
	height: 30px;
	background: #000000;
	font-size: 14px;
	line-height: 16px;
/* === USE BOTTOM MARGIN TO SPACE LOWER MENU WITH NO MARQUEE 10px === */
	margin: 0px auto 10px auto;
	border-radius: 0px 0px 8px 8px;
}
.lowerMenu ul {
	list-style: none;
	margin: 0 auto;
}
.lowerMenu ul li {
	float: left;
	display: inline;
}
.lowerMenu a:link, .mainMenu a:visited {
	color: #FE0001;
	display: inline-block;
	height: 20px;
	padding: 6px 25px 4px 25px;
	text-decoration: none;
}
.lowerMenu a:hover, .mainMenu a:active, .mainMenu .active a:link, .mainMenu .active a:visited {
	background: #FE0001;
	color: #FFFFFF;
	text-shadow: none !important;
}
.lowerMenu li a {
	border-radius: 5px;
}
.lowerMenu img {
	width: auto;
	height: auto;
	margin: 1% 1%;
}


/* ========================================== STORMS MENU CSS ======================================== */

div.storms {
	float: none;
	width: 1200px;
	height: auto;
	overflow: hidden !important;
	margin: 0px auto;
	background-color: #FE0001;
	border-radius: 8px;
}

table.stormTable {
	width: 98%;
	background-color: #000000;
	padding: 0px;
	margin: 10px auto;
	text-align: center;
	border-radius: 8px;
	border: 1px solid #FFFF00;
}

table.stormLnkTable {

	text-align: center;
	border-radius: 8px;
	border: 1px solid #FFFF00;
	padding: 0px;
	margin: 0px auto;
}

.neonyellow {
	margin: 5px;
	color: #FFFF00;
}

.neon14yell {
	font-size: 14px;
	margin: 0px;
	padding: 0px;
	color: #FFFF00;
}

/* ========================================== STORMS MARQUEE TEXT ======================================== */

.marquee {
 height: 30px;	
 overflow: hidden;
 position: relative;
 background: #000000;
 border: 4px solid #FE0001;
}

.marquee p {
 position: absolute;
 width: 100%;
 height: 100%;
 color: #FFFF00;
 padding-top: 5px;
 margin: 0px;
 line-height: 20px;
 text-align: center;
 transform:translateX(100%);
 animation: scroll-left 30s linear infinite;
}

@keyframes scroll-left {
 0%   { 
 transform: translateX(100%); 		
 }
 100% { 
 transform: translateX(-100%); 
 }
}

.marquee p:hover {
 animation-play-state: paused;
}

/* ===================== LEFT & RIGHT SIDEBAR CONTENT AREA ====================== */

.mainContent {
	float: none;
	overflow: hidden !important;
	border-radius: 8px;
	width: 1200px;
	height: auto;
}
/* =========================== LEFT MAIN CONTENT AREA =========================== */
.leftContentDiv {
	width: 750px;
	float: left;
	border-radius: 8px;
}

/* ============================ START LEFT CONTENT ARTICLE=======================*/

.contentArticle {
	background-color: #000000;
	border-radius: 8px;
	padding: 10px;
	width: 730px;
	margin-bottom: 12px;	/* SAND SPACE BETWEEN ARTICLES */
}

/* --------------------------------  START OF SAT TAB CONTENT STYLE ------------------------------------------------*/

div.tabSatMain {
	width: 725px;
	margin: 5px auto 8px auto; /* space between bot-tab-border and sand divider */
}
div.tabSatContents {
	text-align: center; /* Centers Image in DIV */
	border: 1px solid #CCCCCC;
	padding: 10px;
	background-color: #000000;
	border-radius: 8px;
	height: auto; /*  Height of Tab Content Box was 480, tried 630, now AUTO 2/16/15 */
}
.table.imgHoldHover {
	width: 100%;
}
.table.imgHoldHover td {
	margin: 0px auto 0px auto;
	text-align: center;
}

table.imgHoldHover td a:hover, a:active {
	background-color: transparent;
	color: #FFFFFF; 
	text-decoration: none;
}

table.roundCorners td a:hover, a:active {
	background-color: #FE0001;
	color: #FFFFFF;
	text-decoration: none;
}

p.tabSAT {
	font-size: 12px;
	margin: 5px 0px 5px 0px;
	line-height: 13px;
	color: #00FF00;
}
.auto-style2 {
	border-radius: 5px;
	border-width: 0px;
	margin: 0px;
	padding: 0px;
}

/* Tab Content - THIS WORKS FOR ALL TAB CONTENT ON PAGE ----------------- */

ul.tabs {
	padding: 7px 0;
	font-size: 0;
	margin: 0;
	list-style-type: none;
	text-align: center; /*set to left, center, or right to align the tabs as desired*/
}
ul.tabs li {
	display: inline;
	margin: 0px 5px 0px 0px; /*distance between tabs*/
}
ul.tabs li a {
	font: normal 12px Verdana;
	text-decoration: none;
	position: relative;
	padding: 7px 16px;
	background: #000000;
	border: 1px solid #CCCCCC;
	border-bottom-color: #CCCCCC;
	color: #FE0001;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}
ul.tabs li a:visited {
	color: #000000;
}
ul.tabs li a:hover {
	border: 1px solid #CCCCCC;
	color: #FFFFFF;
	background: #FE0001;
}

ul.tabs li.selected a, ul.tabs li.selected a:hover {
	position: relative;
	top: 0px;
	color: #FFFFFF; 
	background: #FE0001;
	border: 1px solid #FF0000;
	border-bottom-color: #FF0000;
}
ul.tabs li.selected a:hover {
	text-decoration: none;
}
.tabGrayLine {
	color: #CCCCCC;
	text-align: left;
	margin-top: 5px;
	margin-left: 10px;
	margin-bottom: 5px;
}
p.tabPostHeader {
	color: #999999;
	text-align: left;
	margin-top: 8px;
	margin-left: 25px;
	margin-bottom: 10px;
}
p.tabPostHeader a:hover, a:active {
	background-color: #FE0001;
	color: #FFFFFF;
}

/* =========================== START STORMSURF MODEL ARTICLE ============================= */

div.tabSSmodelMain {
	width: 730px;
	margin: 5px auto 8px auto;
}

div.tabSSmodContents {
	text-align: center; /* Centers Image in DIV */
	border: 1px solid #CCCCCC;
	padding: 10px;
	border-radius: 8px;
	background-color: #000000;
	height: 630px; /*  Height of Tab Content Box */
}

/* ========================= START WINDGURU WINDALERT ARTICLE ============================ */

div.tabModelMain {
	width: 730px;
	margin: 5px auto 8px auto;
}

div.tabModContents {
	text-align: center; /* Centers Image in DIV */
	border: 1px solid #CCCCCC;
	padding: 10px;
	background-color: #000000;
	border-radius: 8px;
	height: auto; /*  425px changed to AUTO, Height of Tab Content Box */
}
div.tabModContents a:hover, a:active {
	text-decoration: none;
	background-color: transparent;
	color: #FFFFFF; 
}
.windAlertModel {
	width: 100%;
	height: auto;
	margin: 10px auto 5px auto;
}
.windGuruTable {
	width: 99%;
	height: auto;
	margin: 5px auto 0px auto;
}
.windGuruTable td {
	text-align: center;
	padding-left: 10px;
	margin: 0px auto 0px auto; 
}

.windAlertCmod {
	border: none;
}

.windAlertCmod a:hover, a:active {
	background-color: transparent;
	color: #FFFFFF;
	text-decoration: none;
}

/* ======================== TIDE TAB ARTICLE START ========================== */

div.tabTideMain {
	width: 730px;
	margin: 5px auto 8px auto;
}

div.tabTideContents {
	text-align: center; /* Centers Image in DIV */
	border: 1px solid #CCCCCC;
	padding: 10px;
	background-color: #000000;
	border-radius: 8px;
	height: auto; /*  Height of Tab Content Box */
}
div.tabTideContents a:hover, a:active {
	background-color: #FE0001;
	color: #FFFFFF;
	text-decoration: none;
}
table.apraPago td a:hover, a:active {
	text-decoration: none;
	background-color: transparent;
	color: #FFFFFF;
}

table.freetideTable {
	width: 490px;
	margin: 0px auto 0px auto;
}

td.freetidesTD {
	background-color: #FFFFFF;
	margin: 0px auto 0px auto;
	padding: 10px;
	text-align: center;
	border-radius: 8px;
	text-decoration: none;
}

/* ================================== CLIMATE PREDICTION SST SEISMIC TAB CONTENT ================================ */

.tabQuakeMain {
	width: 730px;
	margin: 5px auto 8px auto;
}

.tabSstContents {
	text-align: center; /* Centers Image in DIV */
	border: 1px solid #CCCCCC;
	padding: 10px;
	background-color: #000000;
	border-radius: 8px;
	height: auto; /*  Height of Tab Content Box */
}

.climateTable td a:hover, a:active {
	text-decoration: none;
	background-color: transparent;
}

table.sstLinkCorners {
	width: 700px;
	text-align: center;
	padding: 0px;
	margin: 0px;
	border: 1px solid #999999;
	border-radius: 5px;
}

.sstTable {
	width: 700px;
	text-align: center;
}

.sstTable td a:hover, a:active {
	text-decoration: none;
	background-color: transparent;
}

.seismicTable td a:hover, a:active {
	text-decoration: none;
	background-color: transparent;
}

/* ============================ LINK CONTAINER ====================================================== */

/* ===== MAIN CONTAINER ===== */

.linkContainer {
	width: 100%;
	margin: 0px;
}

/* ===== ALL LINK CONTAINERS ===== */

table.linkGroup {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}
.linkGroup.lnkImg {
	width: 75px;
}

.linkGroup.lnkLink {
	width: 635px;
}

table.linkCorners {
	width: 635px;
	text-align: left;
	padding: 0px;
	margin: 0px;
	border: 1px solid #999999;
	border-radius: 5px;
}

/* =====  THIS IS FOR TABLE LINKS IN TABS ===== */

table.linkTabCorners {
	width: 99%;
	text-align: left;
	padding: 0px;
	margin: 0px;
	border: 1px solid #999999;
	border-radius: 5px;
}

table.linkCorners td {
	text-align: left;
	padding-left: 3px;
}


/* ===== AFRAME CONTAINER ===== */

div.aframeContainer {
	width: 100%;
	text-align: center;
}

/* ===== MENU CONTAINER ===== */

div.menuContainer {
	width: 100%;
	text-align: center;
}

table.menuTable {
	width: 99%;
	margin: 3px auto 0px auto;
	padding: 0px;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
}
table.menuTable td a:hover, a:active {
	background-color: transparent;
	text-decoration: none;
}


/* ============================ NO CONTENT YET ============================== */

.headContent {
	width: 100%;
	float: left;
	border-radius: 8px;
}
.postHeader {
	color: #999999;
	margin-left: 20px;
}
.postSideHeader {
	color: #999999;
	margin-left: 10px;
}
/* ===============================  RIGHT SIDE COLUMN  =============================== */

div.rightSideCol {
	width: 415px;
	padding: 0px;
	margin: 0px;
	float: right !important;	
}


/* -------------------------- PTZ IMAGE CONTAINER --------------------------- */

.ptzAsideContainer {
	width: 415px;
	border-radius: 8px;
	background-color: #000000;
	padding: 10px;
	float: right;
	margin-bottom: 12px;
}
.ptzTable {
	width: 400px;
	text-align: center;
	margin: 10px auto 3px auto;
}
.ptzTable td {
	text-align: center;
}
.ptzPicCenter {
	text-align: center;
	border-radius: 5px;
	margin: 0px;
}
.ptzPicCenter a:hover, a:active {
	background-color: transparent;
	color: #FFFFFF;
	text-decoration: none;
}
.ptzLnkTable {
	width: 400px;
	margin: 3px auto 0px auto;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
}
.ptzLnkTable td {
	text-align: center;
}

/* -------------------------- PIC IMAGE CONTAINER --------------------------- */

.picAsideContainer {
	width: 415px;
	border-radius: 8px;
	background-color: #000000;
	padding: 10px;
	float: right;
	margin-bottom: 12px;
}
.picTable {
	width: 400px;
	text-align: center;
	margin: 10px auto 3px auto;
}
.picTable td {
	text-align: center;
}
.picPicCenter {
	text-align: center;
	border-radius: 5px;
	margin: 0px;
}
.picPicCenter a:hover, a:active {
	background-color: transparent;
	color: #FFFFFF;
	text-decoration: none;
}

/* ---------------------- RAPID FIRE OBJECT CONTAINER ----------------------- */

.rapidAsideContainer {
	width: 415px;
	border-radius: 8px;
	background-color: #000000;
	padding: 10px;
	float: right;
	margin-bottom: 12px;
}
.rapidAsideTable {
	width: 400px;
	text-align: center;
	margin: 10px auto 3px auto;
}
.rapidAsideTD {
	border-radius: 8px;
	background-color: #FFFFFF;
}

.rapidLnkTable {
	width: 400px;
	text-align: center;
	margin: 3px auto 0px auto;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
}

/* ------------------------ RAPID RSS JS CONTAINER -------------------------- */

.topRssSidebar {
	width: 415px;
	border-radius: 8px;
	background-color: #000000;
	padding: 10px;
	float: right;
	margin-bottom: 12px;
}
.topRssSidebar p {
	padding-left: 10px;
	padding-right: 10px;
}
.rssTable {
	width: 100%;
	padding: 8px 0px 0px 0px;
	margin: 0px;
}

/* ------------------------- TABBED RADAR LOOPS -----------------------------*/

.tabRadarSidebar {
	width: 415px;
	border-radius: 8px;
	background-color: #000000;
	padding: 10px;
	float: right;
	margin-bottom: 12px;
}

/* ------------------------- START TABBED JMA CHARTS ------------------------------*/

.tabJMA-sidebar {
	width: 415px;
	border-radius: 8px;
	background-color: #000000;
	padding: 10px;
	float: right;
	margin-bottom: 12px;
}
p.tabJMA {
	font-size: 12px;
	margin: 5px 0px 5px 0px;
	line-height: 13px;
	color: #00FF00;
}

div.vwsMain {
	width: 415px;
}

div.tabMain {
	width: 415px;
	margin-top: 10px;
	text-align: center;
}
.auto-style1 {
	border-radius: 5px;
	border-width: 0px;
}

/* ------------------------ START TABBED BUOY DIRECTION ----------------------------- */

.tabBuoy-sidebar {
	width: 415px;
	border-radius: 8px;
	background-color: #000000;
	padding: 15px 10px 10px 10px;
	float: right;
	margin-bottom: 12px;
}

table.buoyTable {
	width: 99%;
	text-align: center;
}

table.vwsTable {
	width: 99%;
	margin-top: 10px;
	text-align: center;
}

table.buoyTable td a:hover, a:active {
	background-color: #000000;
	color: #FFFFFF;
	text-decoration: none;
}

/* ----------------------------  Tab Content  ------------------------------- */

div.tabcontents {
	text-align: center; /* Centers Image in DIV */
	border: 1px solid #CCCCCC;
	padding: 10px;
	background-color: #000000;
	border-radius: 8px 8px 8px 8px;
}
div.tabcontents a:hover, a:active {
	text-decoration: none;
	background-color: transparent;
	color: #FFFFFF; 
}

/* -------------------------- OFF SITE SIDEBAR ----------------------------- */

.offSiteSidebar {
	width: 415px;
	border-radius: 8px;
	background-color: #000000;
	padding: 10px;
	float: right !important;
	margin-bottom: 12px;
}
.offSiteSidebar p {
	text-align: center;
}
.offSiteTable {
	width: auto;
	text-align: center;
	margin: 10px auto 3px auto;
}
.whiteBg {
	background-color: #FFFFFF;
	padding: 8px;
	border-radius: 8px;
}
.whiteBg a:hover, a:active {
	background-color: transparent;
	text-decoration: none;
}

/* --------------------- CLOCKS & TIME CONVERSION TABLE --------------------- */

/* --------------------- DATE & TIME CLOCKS OBJECT CONTAINER ----------------------- */
.topTimeSidebar {
	width: 415px;
	border-radius: 8px;
	background-color: #000000;
	padding: 10px;
	float: right !important;
	margin-bottom: 12px;
}
.topTimeSidebar p {
	padding-left: 10px;
	padding-right: 10px;
}
.dateTimeDiv {
	width: 100%;
}
.greenTime {
	color: #00FF00;
	padding-left: 12px;
	margin-top: 3px;
}
.tdCenter {
	text-align: center;
}
.timeTable {
	width: 99%;
	text-align: left;
}
.timeBorder {
	width: 370px;
	height: 30px;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	padding-left: 10px;
}
/* ------------- DATE & TIME CONVERSION TABLE CONTAINER ------------------- */
table.timeConvTable {
	width: 99%;
	margin: 10px auto 0px auto;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	text-align: center;
}
.timeConvTitle {
	color: #CCCCCC;
	font-size: 13px;
	text-align: left;
	margin: 0px;
	padding: 0px;
}
.timeConvYel {
	color: #FFFF00;
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}
.timeConvGrn {
	color: #00FF00;
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}
.timeConvSmlGrn {
	color: #00FF00;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 0px;
	font-size: 11px;
}
.topLeft {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-left: none;
	border-bottom: none;
	padding: 0px;
	margin: 0px;
}
.top1 {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-left: none;
	border-bottom: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.top2 {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-left: none;
	border-bottom: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.top3 {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-left: none;
	border-bottom: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.topRight {
	border: 1px solid #CCCCCC;
	border: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.midLeft {
	border: 1px solid #CCCCCC;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.mid1 {
	border: 1px solid #CCCCCC;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.mid2 {
	border: 1px solid #CCCCCC;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.mid3 {
	border: 1px solid #CCCCCC;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.midRight {
	border: 1px solid #CCCCCC;
	border-right: none;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.botLeft {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-bottom: none;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.bot1 {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-bottom: none;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.bot2 {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-bottom: none;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.bot3 {
	border: 1px solid #CCCCCC;
	border-top: none;
	border-bottom: none;
	border-left: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}
.botRight {
	border: 1px solid #CCCCCC;
	border: none;
	padding: 0px;
	margin: 0px;
	text-align: center;
}

/* -------------------- LINK TRADERS SIDEBAR STARTS HERE -------------------- */

.lnkTrade-sidebar {
	width: 415px;
	border-radius: 8px;
	background-color: #000000;
	padding: 10px;
	float: right !important;
	margin-bottom: 12px;
}
.lnkTrade-sidebar p {
	padding-left: 10px;
	padding-right: 10px;
}
table.linkTrader {
	width: auto;
	padding: 5px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	text-align: center;
	margin: 10px auto 10px auto;
}

.lnkTableTD a:hover, a:active {
	text-decoration: none;
	background-color: transparent;
}

/* -------------------- PIRATE LOGO BLOCK STARTS HERE -------------------- */

.pirateLOGO-sidebar {
	width: 415px;
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 12px;
	float: right !important;
}

/* -------------------------- WX SITE STATISTICS -----------------------------*/

.statsSidebar {
	width: 415px;
	border-radius: 8px;
	background-color: #000000;
	padding: 10px;
	float: right !important;
	margin-bottom: 12px;
}
.sidebarHr {
	width: 98%;
	height: 0.5px;
	color: #CCCCCC;
	margin-bottom: 10px;
}
.revolverMapTable {
	width: 360px;
	margin: 5px auto 5px auto;
}
.revolverMapTable td {
	width: 360px;
	height: 360px;
	text-align: center;
}
/* ----------------------------- FEEDJIT SIDEBAR --------------------------------*/
.feedJitTable {
	width: auto;
	height: auto;
	text-align: center;
	margin: 5px auto 5px auto;
}
.feedJitTable td {
	width: auto;
	height: auto;
	text-align: center;
/*	border: 1px solid #CCCCCC;
	border-radius: 10px; */
}
/* ------------------------ AMUNG US & SITEMETER SIDEBAR ------------------------- */
.amungUsTable {
	width: 70%;
	height: auto;
	border: none;
	border-radius: 8px;
	margin: 5px auto 5px auto;
}
.amungUsTable td {
	width: 50%;
	height: auto;
	margin: 0px auto 0px auto;
	text-align: center;
}

/* ========================================== DISCLAIMER FOOTER SETUP ============================ */

table.htmlCss {
	width: 99%;
	margin: 5px auto;
	padding: 10px;
	text-align: center;
}

table.htmlCss td a:hover, a:active {
	background-color: transparent;
	text-decoration: none;
}


/* ========================================== DISCLAIMER FOOTER SETUP ============================ */

.disclaimer {
	text-align: justify;
	text-justify: auto;
	padding: 10px;
}

/* ================================================ Footer ========================================= */

.mainFooter {
	width: 1200px;
	height: auto;
	margin: 0px auto;
	background-color: #000000;
	border-radius: 8px;
}

/* =============== THE END ================== */

/* -------------------------- Menu popup1 CSS START -----------------------------*/
.menuscontainer
{
    width: 730px;
    margin-bottom: 12px;

}
div .aframemenufront
{
    width:50%;
    float:left;
}
div .aframemenufront img
{
    width:100%;
    max-width:350px;
}

.modal {
  display:none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.9); 
}
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 50% !important;
}
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}
/* -------------------------- Animation -----------------------------*/
.modal-content {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}
/* -------------------------- Close button -----------------------------*/
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* -------------------------- Menu popup1 CSS END -----------------------------*/

/* -------------------------- Menu popup2 CSS START -----------------------------*/


.modal2 {
  display:none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.9); 
}
.modal-content2 {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 50% !important;
}
#myImg2 {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg2:hover {opacity: 0.7;}
/* -------------------------- Animation -----------------------------*/
.modal-content2 {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}
/* -------------------------- Close button -----------------------------*/
.close2 {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close2:hover,
.close2:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* -------------------------- Menu popup2 CSS END -----------------------------*/