body {
	font-family: 'Open Sans', sans-serif;
}

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

.subheader h1 {
	background-color: #eee;
	border-radius: 15px;
	margin: 3px auto;
	width: 50%;

}

#wrapper {
	margin-top: 10px;
}

/* Start - Sidebar */
div#sidebar	{
	float: left;
	width: 210px;
	margin: 0 15px 15px 0;
	padding: 0 0 0 7px;
	color: rgb(125, 82, 125);
	background-color: #FFF;
	font-size: 1em;
	line-height: .95em;
	font-weight: 900;
	border: 3px solid rgb(1,97,143);
	border-radius: 15px;
	}

	/* Holly Hack used to make the outside borders not disappear in IE */
	/* Hides from IE5-mac \*/
	* html div#sidebar {height: 1%;}
	/* End hide from IE5-mac */

div#sidebar ul li a, div#sidebar ul li span.list_heading_span	{
	padding: 0px 7px 5px 0px;
	}
div#sidebar ul	{
	padding: 0px;
	margin-left: 10px;
	padding-bottom: 5px;
	}
div#sidebar ul.list_level_1	{
	padding: 0px;
	margin-left: 20px;
	padding-bottom: 10px;
	list-style-image: url("/tc_realtime/static/images/noaa_logo_small.gif");
	}
div#sidebar ul.list_level_1 li	{
	margin-top: 15px;
	}
div#sidebar ul.list_level_1 li ul	{
	list-style-image: none;
	list-style-type: disc;
	}

/* Calendar Link */
div#sidebar ul li ul li #calendar_link {
	color: rgb(255, 0, 0);
	text-decoration: none;
	}
/* NOAA Links */
div#sidebar ul.list_level_1 li ul li ul li a:link,
div#sidebar ul.list_level_1 li ul li ul li a:visited,
div#sidebar ul.list_level_1 li ul li ul li a:hover,
div#sidebar ul.list_level_1 li ul li ul li a:active,  {
	color: rgb(50, 50, 255);
	text-decoration: none;
	}

div#sidebar a:link	{
	color: rgb(175, 100, 175);
	text-decoration: none;
	}
div#sidebar a:visited	{
	color: rgb(125, 82, 125);
	text-decoration: none;
	}
div#sidebar a:hover	{
	color: rgb(200, 50, 150);
	text-decoration: underline;
	}
div#sidebar a:active	{
	color: rgb(125, 82, 125);
	text-decoration: none;
	}
/* End - Sidebar */


div#content	{
	color: #000;
	background-color: #FFF;
	padding-left: 270px;
	}
h2	{
	text-align: center;
	margin: 3px 0;
	}
ul	{
	list-style: none;
	}


/*
div#content ul	{
	margin-left: 310px;
	}
div#content ul li ul	{
	margin-left: 20px;
	}
*/	


div#content div.basin_storms	{
	border: 2px solid #01618f;
	border-radius: 15px;
	float: left;
	margin: 10px;
	min-height: 350px;
	padding: 10px;
	width: 330px;
	}

div#content div.basin_storms img	{
	width: 250px;
	padding: 0px;
	margin: 0px;
	}

div#content div.basin_storms h3	{
	text-align: center;
	}

div#content div.basin_storms_archive	{
	width: 400px;
	}

div#content p	{
	margin-bottom: 10px;
	}
h3	{
	text-decoration: underline;
	font-size:  1.2em;
	}
h4	{
	text-align: left;
	}
h5	{
	text-align: left;
	}

div#content h3.wind-extra-padding {
	padding-top: 80px;
}

div#content div.text_product_wrapper	{
	float: left;
	padding-right: 15px;
}
div#content div.product_wrapper	{
	float: left;
	width: 258px;
/* changed 2014032519652
	height: 500px;
*/	height: 375px;
	border: 1px solid black;
	margin: 2px;
	padding: 2px;
	border-radius: 15px;
	}
div#content div.product_wrapper.amsuplot,
div#content div.product_wrapper.amsuaavg	{
	height: 500px;
	}
/* 2011908121625: Keeping height of producs from getting too tall. */
div#content div.product_wrapper.ripaprob img	{
	height: 276px;
	}
/*
Set all WSP Products to default

div#content div.product_wrapper.conwsp34,
div#content div.product_wrapper.splwsp34,
div#content div.product_wrapper.nerwsp34,
div#content div.product_wrapper.rbcwsp34,
div#content div.product_wrapper.conwsp50,
div#content div.product_wrapper.splwsp50,
div#content div.product_wrapper.nerwsp50,
div#content div.product_wrapper.rbcwsp50,
div#content div.product_wrapper.conwsp64,
div#content div.product_wrapper.splwsp64,
div#content div.product_wrapper.nerwsp64,
div#content div.product_wrapper.rbcwsp64 {
	height: 420px;
}
*/
div#content div.product_wrapper h4	{
	text-align: center;
	padding: 1px 1px 1px 1px;
	margin: 1px 1px 1px 1px;
	}
div#content div.product_wrapper img	{
	width: 250px;
	padding: 2px;
	margin: 2px;
	}
div#content div.product_wrapper p.caption	{
	text-align: center;
	padding-left: 2px;
	padding-right: 2px;
	margin: 0px;
	font-size: .7em;
	}

table {
	padding: 0;
	margin: 0;
	border-top: 1px solid black;
	border-left: 1px solid black;
}
td, th {
	padding: 2px;
	margin: 0;
	text-align: center;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
}
tr {
	margin: 0;
	padding: 0;
}

/* Set up tabs for storm pages. */
.tab-wrapper {
	width: 100%;
}

/* From: https://www.w3schools.com/howto/howto_js_tabs.asp */
/* Style the tab */
.tab {
	/*background-color: #eee;*/
	display: table;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

/* Style the buttons that are used to open the tab content */
.tab a.tablinks {
	background-color: inherit;
	border: none;
	color: black;
	cursor: pointer;
	float: left;
	outline: none;
	padding: 14px 16px;
	text-align: center;
	text-decoration: none;
	transition: 0.3s;
	width: 140px;
}

/* Change background color of buttons on hover */
.tab a:visited {
	background-color: #eee;
}

/* Create an active/current tablink class */
.tab a.active {
	background-color: #ccc;
}

/* Change background color of buttons on hover */
.tab a:hover {
	background-color: #ddd;
}

.tab a.active-tab {
	background-color: #00a;
	color: white;
	pointer-events: none;
	text-weight: bold;
}

/* Style the tab content */
.tabcontent {
	border: 1px solid #ccc;
	border-top: none;
	display: none;
	padding: 6px 12px;
}

.inactive_basins p {
	border: 1px solid rgba(1, 82, 125, 0.3);
	border-radius: 40px;
	font-style: italic;
	margin: 5px auto 0 auto!important;
	padding: 5px;
	text-align: center;
}

.storm_main_wrapper {
	float: left;
}

.product_grouping {
	float: left;
}

@media all and (min-width: 1600px) {
	.product_grouping_wind {
		margin-right: 100px;
	}
}


.main_product_grouping {
	border-left: 1px dotted gray;
	padding-left: 10px; 
	width: calc(100% - 400px);
}