﻿body, html {
    clear: both;
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin: 0;
    padding:0;
    color: black; /*darkblue;*/ /*#000;*/
    background: #FFF;
}
h1 {
	font-family: Arial, sans-serif;
	font-size: 17px;
	color: #1b1a79;
	font-weight: bold;
}
h2 {
	font-family: Arial, Sans-Serif;
	font-size: 15px;
	color: #1b1a79;
	font-weight: bold;
	border-bottom: #C1D82F thin solid; /*Pantone (green) accent color*/
	padding-bottom: 5px;
}
h3 {
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: #1b1a79;
}

h4 {
    color: #1b1a79;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
#wrapper {
    position: relative;
    width: 1000px;
    height: 120px; /*100px*/
    margin-left: 0px;
    padding-left: 5px;
    background: #FFF;
}

a:hover {
    color:#D4891C;
}

a:link,
a:visited,
 a:active
   {
        /*color:#0000CD; /*#4169E1; #000080;*/
        text-decoration: none;
    }

#sidebar a:link,
#sidebar a:visited,
#sidebar a:active
   {
        color:#000080; /*#000080;*/
        text-decoration: none;
    }

#BpaTitle {
position: absolute;
top: 3px;
height: 30px;
width: 960px;
background: url(../img/header-bpa-title.gif) no-repeat center;
/* no-repeat center;*/
}

#BpaLogoFill {
    position: absolute;
    top: 38px;
    height: 100px;
    width: 960px;
    background-image: url('../img/header-background-tile.gif');
    background-repeat: repeat-x;
    display: block;
}

#BpaLogo {
    position: absolute;
    top: 38px;
    height: 100px;
    width: 960px;
    text-align: center;
    outline: 0;
    /*background: url(../img/header-logo-web-address-transmission.gif) no-repeat center;*/
}


#PathGrid, #PathMonthlyTable, #PathChartsView {
    min-height:900px; /*825*/
}
#PathGrid {
    padding-left: 25px;
    padding-top: 10px;
}
#PathMonthlyTable
{
    width: 100%;
    padding-left: 15px;
}

#MetTitle
{
    width: 100%;
    padding-left: 15px;
    text-align:center;
}

 #ImageForm
 {
     padding: 20px;
     min-width: 768px;
     min-height: 576px;
     margin: auto;
 }

#ChartImage
{
    width: 90%;
    height: auto;
}
    
 #PathChartsView
 {
     padding-right: 20px;
     width: 50%;
 }

#BpaLogoLinks {
    position: absolute;
    top: 86px;
    height: 25px;
    width: 960px;
}
    #BpaLogoLinks td {
        padding: 30px;
    }
 #BpaLogoLinks a:link,
 #BpaLogoLinks a:visited,
 #BpaLogoLinks a:active
   {
        color: #FFFFFF;
        text-decoration: none;
    }
    #BpaLogoLinks a:hover {
        color:#D4891C ;
        text-decoration: none;
    }

#main {
    clear: both;
    position: absolute;
    min-height: 470px;
    width: 960px;
    top: 180px; 
    padding-bottom: 135px;
}

#OPILinks {
    color: #000080;
}
    #OPILinks a:hover {
        color:#D4891C
    }

#SearchBlock
{
    color: white;
    position: absolute;
    top: 49px; /*28px*/
    left: 770px;
    text-align: center;
    word-spacing: 20px;
}

    #SearchBlock a:visited,
    #SearchBlock a:link {
        color: white;
    }

    #SearchBlock table {
width: 200px;
    }

    #SearchBlock td {
        padding-left: 2px;
        padding-right: 2px;
    }
#sidebar {
    float: left;
    margin-left: 50px;
    /*top: 170px;
    left: 50px;*/
    width: 190px;
}

    #sidebar a:hover {
        color:#D4891C;
    }

#sidebar-fixed {
    position: fixed;
    float: left;
    margin-left: 50px;
    /*top: 170px;
    left: 50px;*/
    width: 190px;
}

#sidebar2 {
    position: absolute;
    clear: both;
    float: left;
    top: 450px;
    left: 50px;
    width: 200px;
}
#PageContent {
    float: right;
    width: 640px;
    padding-right: 20px;
    margin-left: auto;

}

#footer {
    clear: both;
    position: absolute;
    bottom: 0px;
    /*vertical-align: bottom;*/
    width: 960px;
    font-family: Arial,Helvetica,sans-serif; 

    left: 5px;
    margin-bottom: 0px;
}
#footer-green-bar {
    /*clear: both;*/
    position: absolute;
    background-image: url(../img/footer-green-bar-2px.gif);
    background-repeat: repeat-x;
    top: 5px;
    height: 4px;
    width: 960px;
}
#sidebar2 li 
{
        margin-top: 1px;
        margin-bottom: 4px;
        }
        
.ReportErrors {
    position: absolute;
    top: 20px;
    font-size: 12px;
}

.warning {
    font-size: 14px;
}


a img {
border: none;
}

a {
    text-decoration: none;
}

.triangleList ul {
    list-style: outside url(/img/triangle5x11.gif);
}

div#triangleList {
  list-style: outside url(/img/triangle5x11.gif);
}

#OpiMainPage {
    font-size: 125%;
    padding-left: 50px;
    
}

    #OpiMainPage li{
        line-height: 25px;
    }
#ExtraLineSpacing li {
    padding-bottom: 15px;
}

#FAQPage
{
    font-size: 115%;
    padding-left: 30px;
    padding-top: 30px;
    color: blue;
}

#FAQPage li{
    list-style: outside url(../img/triangle5x11.gif);
    margin-bottom: 25px;
}


/* ------------------- Classes --------------------------------*/

/*#region Classes*/

.MetDataTable
{
    float: left;
    width: 45%;
    font-size:medium;
}

.MetMap
{
    float: right;
    width: 55%;
    text-align: center;
}

.FAQAnswer
{
    color: darkblue;
    margin-top: 6px;
    padding-left: 25px;
    padding-right: 75px;
}

.Plot {
    width: 100%;
    height: auto;    
}

.CenterText {
    text-align: center;
}


.UnderlineLink {
    text-decoration: underline;
}

.ChartClass {
    width: 650px;
}
.BrownFill {
    background-color: brown;
}

.BlackFont {
    color: black;
}

.BlueFont {
    color: blue;
}
.GreenFill {
    background-color: green;
}
.HotPinkFill {
    background-color: hotpink;
    
}

.LightGrayFill {
    background-color: lightgray;
}

.OrangeRedFill {
    background-color: orangered;
}

.RedFill {
    background-color: red;
}
.YellowFill {
    background-color: yellow;
}

/*#endregion*/

.ExtraHeight {
line-height: 25px;
}

li.header {
    font-size: 105%;
    font-weight: bold;
    padding-bottom: 5px;
}

.wind table{
    width: 100%;
}
.wind td {
    font-weight: bold;
    color: black;
}
/* Border Outline for Table (used on outages/default.aspx) */

td.BorderLeft,
th.BorderLeft {
border-left: thin solid silver;
}
td.BorderRight,
th.BorderRight {
    border-right: thin solid silver;
}

td.BorderTopLeftRight,
th.BorderTopLeftRight {
    border-top: thin solid silver;
    border-left: thin solid silver;
    border-right: thin solid silver;
}

td.BorderBottomLeftRight,
th.BorderBottomLeftRight {
    padding-left: 10px;
    border-bottom: thin solid silver;
    border-left: thin solid silver;
    border-right: thin solid silver;
}

td.BorderTopLeft,
th.BorderTopLeft {
    border-top: thin solid silver;
    border-left: thin solid silver;
}

td.BorderTopRight,
th.BorderTopRight {
    border-top: thin solid silver;
    border-right: thin solid silver;
}


.SidebarTable td {
    padding: 7px;
    border-bottom: solid thin;
    /*height: 100%;
    width: 100%;*/
}

 div.sidebar td:hover {
        background-color: yellow;
    }

div.triangleList {
    list-style: outside url(/img/triangle5x11.gif);
}
div.twocol {
	float: left;
	width: 47%;
	margin-left: 2px;
	margin-right: 2px;
}
div.threecol {
	float: left;
	width: 32%;
	margin-left: 2px;
	margin-right: 2px;
}
div.clear{
	clear: both;
}

/* Table Styling */
#PathMonthlyTable table,
#StaticPathTables table,
.MetDataTable table
{
    width: 90%;
    border: 3px solid;
    border-color: #C0C0C0;
    border-collapse: collapse;
}

#PathMonthlyTable td,
#StaticPathTables td,
.MetDataTable td
{
  text-align: center;
  padding: 3px;
  padding-bottom: 5px;
  color: #A9A9A9;
  border-color: #C0C0C0;
  border-collapse: collapse;
  border-top: thin solid;
  font-size: smaller;
}

.MetDataTable td
{
    color: black;
    border-color: #C0C0C0;
}

.MetDataTable table
{
    border-color: #C0C0C0;
}
.MetDataTable td:first-child
{
    text-align: left;
}

.MetDataTable tr:first-child
{
    background-color: #004E98; /*blue;*/
}

.MetDataTable th
{
    padding-left: 2px;
    padding-right: 2px;
    color: white;
    text-align: left;
}
#StaticPathTables td
{
    text-align: left;
    font-size: small;
    border: thin solid;
    }

#StaticPathTables td:first-child
{
    width: 275px;
}


#PathMonthlyTable td:first-child
{
    color: white;
    background-color: #004E98;
    border-color: #C0C0C0;
    padding-right: 15px;
    font-size: larger;
    text-align: center;
    width: 40px;    
 } 
 
 
 #PathMonthlyTable th,
 #StaticPathTables th
 {
  font-family: Ariel;
  text-align: center;
  color: white;
  background-color: #004E98;
  height: 35px;
  font: large italic bold auto Arial, sans-serif;
  border: 3px solid #C0C0C0;
  border-collapse: collapse;
  border-left-width: 0px;
  margin: auto;
} 

#PathMonthlyTable th:first-child,
#StaticPathTables th:first-child
 {
  font-family: Ariel;
  color: white;
  background-color: #004E98;
  border-color: #C0C0C0;
  border-bottom: 3px solid #C0C0C0;
  border-collapse: collapse;
  border-width: 3px;
  border-right-width: 0px;

}




 /* ----------[ IDs for Static Path.html and Monthly.aspx file ]----------------- */
 
 #StaticPathTables
{
    padding-left: 40px;
    color: #004E98;
}

 #LeftColumn
 {
    clear: both;
    height: 100%;
    width: 400px;
    padding-top: 30px;
    padding-right: 5px;
    float: left; 
     }
     
  #RightColumn
 {
    height: 100%;
    width: 400px;
    padding-top: 30px;
    padding-right: 5px;
    float: left; 
     }
     
 #StaticFooter
 {
     clear: both;
     font-size: smaller;
     padding-top: 30px;
     color: #004E98;
 }

#StaticMonthly
{
    width:630px;
    padding-top: 30px;
    padding-left: 30px;
}
