﻿/* Sets element margins, padding, and border to 0 to even out browser differences when adding desired values later. */
html, body, div, p, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, li, dl, dt, dd, td, form, fieldset, a, img, address
{
    margin: 0;
    padding: 0;
    border: 0;
}

/* --- "Jello Mold" page construction technique see http://www.positioniseverything.net/articles/jello-expo.html --- */
/* Here's what to set: 
    - minimum width set by expander.min-width
    - maximum width set by expander.min-width + size.max-width
    - body.padding is expander.min-width/2 plus some buffer (2px say)
    - expander.margin is -expander.min-width/2
    - for full fluidity comment out sizer.width and sizer.max-width
*/
body
{
    padding: 0 402px; /* this is the squeeze on the size, equal to expander margin plus 2px */
    text-align: center;
}
#sizer
{
    margin: 0 auto;
    width: 100%; /* the measure of how fluid things are */
    max-width: 200px; /* how much things can expand by, above expander min-width */
    padding: 10px 0;
    text-align: left;
}
#expander
{
    position: relative;
    min-width: 800px; /* Critical Safari fix! */
    margin: 0 -400px; /* how much expander straddles the sizer */
    background-color: Transparent;
}

/* Holly hack for IE \*/
* html #expander
{
    height: 0;
}
/* */

#wrapper
{
    width: 100%; /* helps IE get the child percentages right. */
}

/* http://positioniseverything.net/easyclearing */
.clearfix:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix
{
    display: inline-table;
}

/* Hides from IE-mac \*/
* html .clearfix
{
    height: 1%;
}
.clearfix
{
    display: block;
}
/* End hide from IE-mac */

/* --- layout div definitions --- */
#contentarea
{
}

#headerbar
{
    height: 20px;
    padding: 5px;
    margin: 5px 5px 0px 5px;
}

#leftcolumn
{
    float: left;
    width: 152px;
    margin-right: -3px; /* IE 3px display bug fix (in conjunction with the rule following below)*/
}

html > body #leftcolumn
{
    margin-right: 0;
}

#rightcolumn
{
    float: right;
    width: 152px;
    margin-left: -3px; /* IE 3px display bug fix (in conjunction with the rule following below)*/
}

html > body #rightcolumn
{
    margin-left: 0;
}

.sidecolumnbox
{
    width: 132px;
    padding: 5px;
    margin: 5px;
}

.logosidecolumnbox
{
    width: 142px;
    margin: 5px;
}

#centercolumn
{
    height: 1%;
    margin: 0;
}
html > body #centercolumn
{
    height: auto;
    margin: 5px 152px 5px 152px; /* includes right column */
}

#centercolumn2
{
    height: 1%;
    margin: 0;
}
html > body #centercolumn2
{
    height: auto;
    margin: 5px 5px 5px 152px; /* no right column */
}

.BannerImage
{
    background-repeat: no-repeat;
    background-position: 100% 0px;
    text-align: left;
}

.BannerAbout
{
    padding: 1em;
    font-size: 70%;
}

.companyname
{
    padding: 1em 1em 1em 1em;
}

#centercolumnbody
{
    padding: 1em 1em 1em 1em;
}

#centercolumn2body
{
    padding: 1em 1em 1em 1em;
}

#footerbar
{
    padding: 5px;
    margin: 5px;
    clear: both;
}

/* --- Typographics styles adapted from http://www.thenoodleincident.com/tutorials/typography/ --- */
h1
{
    margin: 0;
    font-size: 1.8em;
    font-weight: normal;
}

h2
{
    margin: 1.0em 0em 0.5em 0em;
    font-size: 1.6em;
    font-weight: normal;
}

h3
{
    margin: 1.0em 0em 0.5em 0em;
    font-size: 1.4em;
    font-weight: normal;
}

.h3NoTopMargin
{
    margin: 0em 0em 0.5em 0em;
    font-size: 1.4em;
    font-weight: normal;
}

h4
{
    margin: 1.0em 0em 0.5em 0em;
    font-size: 1.2em;
    font-weight: bold;
}

h5
{
    margin: 1.0em 0em 0.5em 0em;
    font-size: 1.0em;
    font-weight: bold;
}

h6
{
    margin: 1.0em 0em 0.5em 0em;
    font-size: 0.8em;
    font-weight: bold;
}

p
{
    margin: 1em 0em;
    line-height: 1.4em;
    font-size: 1.0em;
}

.ParagraphNoTopMargin
{
    margin: 0em 0em 1em 0em;
    line-height: 1.4em;
    font-size: 1.0em;
}

.txtBoxLabel
{
    margin: 1em 0 0 0;
    line-height: 1.4em;
    font-size: 1em;
}

/* --- Background and Font definitions --- */
/* Base font and colour options */
body
{
    /* background-color: #8cb9d6; */
    font-family: Tahoma, Verdana, Helvetica, Helvetica-Narrow, sans-serif;
    font-size: 80%;
    color: White;
    background-image: url(Images/bg_tile.jpg);
    background-repeat: repeat-x;
    background-color: #FFFFFF;
}

h1, h2, h3, h4, h5, h6
{
    color: White;
}

a
{
    text-decoration: none;
    color: White;
}

a:hover
{
    text-decoration: underline;
}

/* Content area is everything inside the jello, including headerbar, footerbar, columns, centercolumn. */
#contentarea
{
    /* background-color: #1B3D6B; */
    color: White;
}

#headerbar
{
    background-color: #1B3D6B;
}

#leftcolumn
{
    /* background-color: #1B3D6B; */
    font-size: 0.8em;
}

#rightcolumn
{
    /* background-color: #1B3D6B; */
    font-size: 0.8em;
}

.sidecolumnbox
{
    background-color: #FFFFFF;
    color: #333333;
    border-right: #1B3D6B 1px solid;
    border-top: #1B3D6B 1px solid;
    border-left: #1B3D6B 1px solid;
    border-bottom: #1B3D6B 1px solid;
}

.sidecolumnbox h1, h2, h3, h4, h5, h6
{
    color: #E6673A;
}

.sidecolumnbox a
{
    text-decoration: none;
    color: #CC3300;
}

.sidecolumnbox a:hover
{
    text-decoration: underline;
}

.logosidecolumnbox
{
    background-color: #FFFFFF;
    color: #333333;
    border-right: #1B3D6B 1px solid;
    border-top: #1B3D6B 1px solid;
    border-left: #1B3D6B 1px solid;
    border-bottom: #1B3D6B 1px solid;
}

.logosidecolumnbox h1, h2, h3, h4, h5, h6
{
    color: #E6673A;
}

.logosidecolumnbox a
{
    text-decoration: none;
    color: #CC3300;
}

.logosidecolumnbox a:hover
{
    text-decoration: underline;
}

#centercolumn
{
    background-color: #FFFFFF;
    color: #333333;
    border-right: #1B3D6B 1px solid;
    border-top: #1B3D6B 1px solid;
    border-left: #1B3D6B 1px solid;
    border-bottom: #1B3D6B 1px solid;
}

#centercolumn h1, h2, h3, h4, h5, h6
{
    color: #E6673A;
}

#centercolumn a
{
    text-decoration: none;
    color: #CC3300;
}

#centercolumn a:hover
{
    text-decoration: underline;
}

#centercolumn2
{
    background-color: #FFFFFF;
    color: #333333;
    border-right: #1B3D6B 1px solid;
    border-top: #1B3D6B 1px solid;
    border-left: #1B3D6B 1px solid;
    border-bottom: #1B3D6B 1px solid;
}

#centercolumn2 h1, h2, h3, h4, h5, h6
{
    color: #E6673A;
}

#centercolumn2 a
{
    text-decoration: none;
    color: #CC3300;
}

#centercolumn2 a:hover
{
    text-decoration: underline;
}

#footerbar
{
    background-color: #1B3D6B;
}

.txtBox
{
    border: 1px solid #1B3D6B;
    font-size: 1em;
    background-color: #F4F7FA;
    margin: 0 0 1em 0;
}

.txtBoxInTable
{
    border: 1px solid #1B3D6B;
    font-size: 1em;
    background-color: #F4F7FA;
    margin: 0 0 0 0;
}

.txtBox:focus
{
    background-color: #FFFFFF;
}

.txtBoxInTable:focus
{
    background-color: #FFFFFF;
}

.DropDownInTable
{
    border: 1px solid #1B3D6B;
    font-size: 1em;
    background-color: #F4F7FA;
    margin: 0 0 0 0;
}

.button
{
    border: 1px solid #1B3D6B;
    color: #FFFFFF;
    background-color: #CC3300;
    font-size: smaller;
}

fieldset
{
    margin-bottom: 1em;
    padding: 1em;
    border-right: #e6673a 1px solid;
    border-top: #e6673a 1px solid;
    border-left: #e6673a 1px solid;
    border-bottom: #e6673a 1px solid;
}

legend
{
    font-size: 1.2em;
    color: #E6673A;
    background-color: #FFFFFF;
    font-weight: bold;
}

* html #maincontent legend
{
    padding: 0.5em;
}

.ImageFloatLeft
{
    padding: 5px;
    margin: 5px 5px 5px 0;
    display: inline;
    float: left;
}

.ImageFloatLeftNoPadding
{
    margin: 5px 5px 5px 0;
    display: inline;
    float: left;
}

.ImageInline
{
    padding: 5px;
    margin: 5px 0 5px 0;
    display: inline;
}

.ImageInlineNoPadding
{
    margin: 5px 0 5px 0;
    display: inline;
}

.ImageCentre
{
    padding: 5px;
	margin-left: auto;
	margin-right: auto;
    display: inline;
    text-align: center;
}

.ImageCentreNoPadding
{
	margin-left: auto;
	margin-right: auto;
    display: inline;
    text-align: center;
}

.ImageFloatRight
{
    padding: 5px;
    margin: 0 0 5px 5px;
    display: inline;
    float: right;
}

.ImageFloatRightNoPadding
{
    margin: 0 0 5px 5px;
    display: inline;
    float: right;
}

.HelperText
{
    font-size: 0.7em;
    color: blue;
    font-style: italic;
}

.NormalHelperText
{
    font-style: italic;
}

.NormalWarningText
{
    color: Red;
    font-style: italic;
}

.SubText
{
    font-style: italic;
}

.SmallerFont
{
    font-size: 70%;
}

.ControlPanelRight
{
    padding: 5px;
    margin: 0 0 5px 5px;
    display: inline;
    float: right;
    border-right: black 1px solid;
    border-top: black 1px solid;
    border-left: black 1px solid;
    border-bottom: black 1px solid;
    clear:right;
    font-size: 70%;
}

.CommentHeader
{
    font-weight:bold;
    padding-bottom: 0.5em;
}

.CommentEdited
{
    font-style:italic;    
    padding-bottom: 0.5em;
}

.CommentText
{
    padding-bottom: 0.5em;
}

.SummitRow
{
    padding: 2px 2px 1px 2px;
}

.SummitRowAKA
{
    padding: 1px 2px 2px 2px;
}

.RouteHeader
{
    font-weight:bold;
}

.Warning
{
    font-weight: bolder;
    font-size: large;
    color: red;
    font-style: italic;
}

.BlockQuote
{
    border-right: black 1px solid;
    padding-right: 1em;
    border-top: black 1px solid;
    padding-left: 1em;
    padding-bottom: 1em;
    margin: 1em;
    border-left: black 1px solid;
    padding-top: 1em;
    border-bottom: black 1px solid;
    font-style: italic;
}

.ClearBoth
{
    clear:both;
}

.GridViewCSS2 td
{
    padding: 0.2em 0.5em;
}

.BorderHilite
{
    border-right: red 1px solid;
    border-top: red 1px solid;
    border-left: red 1px solid;
    border-bottom: red 1px solid;
}

.footerbarclass
{
    padding: 5px;
    margin: 5px;
    clear: both;
    background-color: #1B3D6B;
    text-align: center;
    color: White;
    
}

.headerbarclass
{
    height: 20px;
    padding: 5px;
    margin: 5px 5px 0px 5px;
    background-color: #1B3D6B;
    color: White;
}

.leftcolumnclass
{
    float: left;
    width: 152px;
    margin-right: -3px; /* IE 3px display bug fix (in conjunction with the rule following below)*/
    /* background-color: #1B3D6B; */
    font-size: 0.8em;
}

html > body .leftcolumnclass
{
    margin-right: 0;
}

.jsTable
{
	background: white;
	border-collapse: collapse;
	text-align: right;
	border-color: #1B3D6B;
	border-style: solid;
	border-width: 1px;
	color: Black;
	margin: 0em;
}
.jsTable th
{
	font-weight: bold;
	padding: 3px;
	border-bottom: 2px solid #6678b1;
}
.jsTable td
{
	padding: 3px;
}
.jsTableOddRow
{
    background-color: #C6D5E5;
}

.accordionheader
{
    border: 1px solid #1B3D6B;
    color: White;
    background-color: #C6D5E5;
    font-size: 1em;
    padding: 3px;
}

img.VEPins 
{
    position:relative;
    top:3px;
    left:7px
}

