body
{
    font-family: Arial, Cambria, Georgia, "Times New Roman";
    margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
	background-color: White;
	min-width: 600px;
	font-size: 90%;
}

.divcentre
{
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

h1, h2, h3, h4
{
	margin: .8em 0 .2em 0;
	padding: 0;
	float: left;
}


.progressMessagediv {

    position:absolute;
    top:100px;
    right: 100px;

   
  
    height: 50px;
    width: 170px;
}

.proggressLable {
    color: red
}

h4
{
	font-size: 10pt;
}



p
{
	margin: .4em 0 .8em 0;
	padding: 0;
}



/* Header section */

#header
{
	clear: both;
	float: left;
	width: 100%;
	max-height: 65px;
	background-color: #f4f4f4;
	border-bottom: 1px solid Black;
}


#header p, #header h1, #header h2
{
	padding: .4em 15px 0 15px;
	margin: 0;
}



/* Columns section */
.colmask
{
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	overflow: hidden;
}



.colright, .colmid, .colleft
{
	float: left;
	width: 100%;
	position: relative;
}


.col1, .col2, .col3
{
	float: left;
	position: relative;
	/*padding: 0 0 1em 0;*/
	/*overflow: hidden;*/
    overflow:visible;
}


/* 2 Column (left menu) settings */

.leftmenu
{
	background-color: White;		/* right (Panels) column */
}


.leftmenu .colleft
{
	right: 85%;			        /* right column width */
	background-color: #f4f4f4;	/* left (Menu) column */
}


.leftmenu .col1
{
	width: 80%;			/* right column content width */
	left: 102%;			/* 100% plus left column left padding */
	background-color: White;
}


.leftmenu .col2
{
	width: 10%;			/* left column content width - column width less left and right padding */
	left: 6%;			/* right column left plus right padding plus left column left padding */
    /*width:110px;
    left:70px;*/
}



/* Footer */

#footer
{
	clear: both;
	float: left;
	width: 100%;
	border-top: 1px solid #000;
}


#footer p
{
	padding: 10px;
	margin: 0;
}



/* Specific */

#ChartPanel,
#MimicPanel,
#StatsPanel,
#ImagesPanel,
#WeatherPanel,
#MapPanel
{
    /*width: 31%;
    min-width: 300px;
    max-width: 375px;*/
    width: 310px;
    height: 230px;
    border: 1px solid Black;
    margin: 9px;
    background-color: #ebebeb;
    float: left;
    overflow: hidden;
    position: relative;
}


#NetWeatherImage
{
    width: 102%;
    height: 92%;
    position: absolute;
    float: left;
    display: block;
    top: 22px;
    margin-left: -1%;
}


#NetweatherTitleBlanker
{
    width: 101%;
    height: 25px;
    float: left;
    display: block;
    position: absolute;
    top: 22px;
    border-top: 1px solid black;
    background-color: White;
    z-index: 100;  /* to make sure the blanker is on top */
}


/* Google Map (inside MapPanel) */
#map_canvas
{
    width: 99.5%;
    height: 88%;
    float: left;
    display: block;
}


#MimicImage
{
    width: 60%;
    height: 88.5%;  /*UpdatePanel height less PanelTitle height and borders*/
    width: auto;
    margin-left: 23%;
}


/*
#ImagesPanel
{
    overflow: scroll;
}
*/

#InnerImagePanel
{
    width: 100%;
    height: 97%;
    float: left;
    overflow: scroll;
}


#NormalDiv
{
    float: left;
    width: 45%;
    height: auto;
    text-align: center;
    margin-left: 2%;
    margin-top: 2%;
}



#LatestDiv
{
    float: right;
    width: 45%;
    height: auto;
    text-align: center;
    margin-right: 5%;
    margin-top: 2%;
}



#NormalViewImage,
#LatestViewImage
{
    width: 90%;
    height: auto;
    margin: 2%;
    border: 1px solid Black;
}


#NormalViewBigImage,
#LatestViewBigImage
{
    float: left;
    width: 100%;
    height: auto;
  
}



#ScrollingStatsPanel
{
    width: 100%;
    height: 100%;
    background-color: #ebebeb;
    float: left;
    overflow: auto;
}



#lblTitle1
{
    font-size: 200%;
    font-weight: bold;
    color: Navy;
    padding: .4em 15px 0 15px;
	margin: 0;
	float: right;
}


.PanelTitle
{
    font-size: small;
    font-weight: bold;
    color: Blue;
    text-align: center;
    width: 100%;
    height: 20px;
    padding-top: 2px;
    background-color: Silver;
    border-bottom: 1px Solid Black;
    float: left;
}


.label
{
    font-size: 0.75em;
    color: Blue;
}


#PreviousImageButton,
#PreviousGraphButton
{
    border: 0;
    float: left;
    margin-left: 10%;
    /*width: 40px;*/
    /*height: auto;*/
}


#NextImageButton,
#NextGraphButton
{
    border: 0;
    float: right;
    margin-right: 10%;
    /*width: 40px;*/
    /*height: auto;*/
}


#HelpButton
{
    float: right;
    width: 24px;
    height: auto;
    padding-right: 80px;
    padding-top: 20px;
}


#ChartViewer
{
    width: 100%;
    height: 78%;
    /*margin-bottom: 2%;*/
    border-bottom: 1px solid Green;
}


#ShowHidePanel
{
    width: 160px;
    background-color: Transparent;
    border-spacing: 25px;
}


#StatsGrid
{
    width: 100%;
    border-spacing: 15%;
}


.StatsTitleCell
{
    color: Black;
    /*width: 40%;*/
    text-align: right;
    /*font-size: 0.7em;*/
    font-size: 0.9em;
}


.StatsValueCell
{
    color: Blue;
    /*width: 60%;*/
    text-align: left;
    /*font-size: 0.7em;*/
    font-size: 0.9em;
    padding-left: 15px;
}



#NoImageLabel
{
    float: left;
    margin: 10%;
    font-weight: bold;
    color: Blue;
    font-size: 2.0em;
}


#ShowHideLabel
{
    float: left;
    margin: 0%;
    margin-top: 10%;
    font-weight: bold;
    color: Black;
    font-size: 1.0em;
}

.ShowHideCheckBox
{
    float: left;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}


#ChartNavigation
{
    width: 100%;
    height: 12%;
    text-align: center;
}


#ParameterNavigationLabel
{
    color: Green;
    font-size: 0.70em;
    font-weight: bold;
}


#FloodViewLogo
{
    float: left;
    height: 65px;
    width: auto;
}


#IsodaqLogo
{
    float: right;
    position: relative;
    right: 60px;
    height: auto;
    width: auto;
}


#IsodaqLogoOnHelp
{
    height: auto;
    width: auto;
    padding-left: 30px;
}


#ClientLogo
{
    height: auto;
    width: 100%;
    /*padding-left: 30px;*/
}


#ClientLogoOnHelp
{
    height: 60px;
    width: auto;
    padding-left: 30px;
}


#StationLabel
{
    position: relative;
    top: 30px;
    font-size: 1.8em;
    font-weight: bold;
    margin-right: 25px;
    padding-left: 200px;
    color: #2378FF;
}


#login
{
    padding-top: 100px;
    padding-left: 30px;
}

#AccountTextBox
{
    width: 300px;
    height: 20px;
    background-color: Silver;
    border: 1px solid Black;
    color: Navy;
    font-weight: bold;
    font-size: 11pt;
}


#LoginButton
{
    margin-left: 20px;
    width: 100px;
    height: 50px;
    font-size: large;
}


#loginError
{
    padding-top: 30px;
    padding-left: 30px;
}


#LoginErrorLabel
{
    font-size: 13pt;
    font-weight: bold;
    color: Red;
}


#GraphPeriodTextBox
{
    width: 30px;
    background-color: Transparent;
    color: Blue;
    border-style: none;
}


#SpacerPanel
{
    height: 250px;
    width: 200px;
    background-color: Red; /* so we can see where it is if we make it visible */
    visibility: hidden;
}


#BrowserInfoButton
{
    width: 32px;
    height: auto;
}


.HelpParagraph
{
    width: 60%;
}



#FloodViewPageImage
{
    width: 100%;
    height: auto;
}