/* 
-------------------------------------------------
CSS Tutorial Notes
-------------------------------------------------
Why use CSS?
CSS is a style sheet programming language that allows you to attach style (color, fonts and layout) to
structural documents (HTML, XHTML). Authoring, viewing and maintaining Web sites is simplified by 
separating the style from the content
---------------------------------------------------------------------------------------------------------
#- is an id selector.  For example, inside one of the Aspx files you will see this code <div id="centercolumn">.
The "centercolumn" is referring to the #centercolumn code below.
The CSS syntax has three parts: a selector, a property, and a value:
selector {property: value}
---------------------------------------------------------------------------------------------------------
With the class selector you can define different styles for the same type of HTML element.
Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph,
and one center-aligned paragraph. Here is how you can do it with styles:
  p.right {text-align: right}
  p.center {text-align: center}
You have to use the class attribute in your HTML document:
  <p class="right">
  This paragraph will be right-aligned.
  </p>

  <p class="center">
  This paragraph will be center-aligned.
  </p>

Note: To apply more than one class per given element, the syntax is:
  <p class="center bold">
  This is a paragraph.
  </p>
---------------------------------------------------------------------------------------------------------
Example code from the aspx pages to call CSS code:
  <div id="wrapper">
  <div id="MainNav">
  <div id="header">

*Important
Use "px" after a value.  I.e. margin:100px;  
---------------------------------------------------------------------------------------------------------
The difference between classes and IDs. 
---------------------------------------------------------------------------------------------------------
Classes can appear several times within a single XHTML (or HTML) document. There can only be one instance
of an ID in each page. 
Sets element margins, padding, and border to 0 to even out browser differences when adding desired values later. 
html, body, div, p, h1, h1, h3, h4, h5, h6, blockquote, ol, ul, li, dl, dt, dd, td, form, fieldset, a, img, 
button {margin: 0; padding: 0; border: 0;}
---------------------------------------------------------------------------------------------------------
HTML reference
---------------------------------------------------------------------------------------------------------
<table> - table tag
<tr> - rows
<th> - headings
<td> - table data .. divides table into cells ... can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<p> - paragraph
<br/> - line breaks
Comments in HTML <!-- This is a comment -->  
<b> - bold
<a> - HTML uses the <a> (anchor) tag to create a link to another document.
      An anchor can point to any resource on the Web: an HTML page, an image,
      a sound file, a movie, etc.
<HR>  horizontal rule -> creates a line  <HR WIDTH="50%" SIZE="3" NOSHADE>
---------------------------------------------------------------------------------------------------------
Colors
---------------------------------------------------------------------------------------------------------
#DCDCDC - light Grey
#C9C9C9 - Grey
Red - light Blue
#3E68A4 - dark blue
---------------------------------------------------------------------------------------------------------


/*************************************************************************************
/* MASTER PAGE 
/*************************************************************************************/
html{}
html, body, div, p, form, MainNav {margin: 0px; padding: 0px; border: 0px;}

/*************************************************************************************
/* HEADER 
/*************************************************************************************/
#Header{width:990px; text-align:left; padding-left:0px; padding-bottom:0px; }
#Header1{text-align:left; padding-right:1px; font-family:Arial; text-align:center; font-size:12px; color:White;}
/*************************************************************************************/
/* FOOTER
/*************************************************************************************/
#Footer{clear:both; border-style:solid; border-width:0px; padding-left:18px; padding-right:18px;
                    font-size:11px; text-align:left; font-weight:bold;color:Gray;}

/*************************************************************************************/
/* STATIC MENU
/*************************************************************************************/
#MainNav {text-align:left; padding-bottom:1px; padding-left:1px; border:solid 1px Red;}
#MainNav .StaticItems{font-family:Arial; font-size:12px; border:solid 1px Gray; font-weight:bold;
                        background-color:Black; color:White; width:124px; height:22px; padding-left:2px;
                        text-align:left;}
#MainNav .StaticSelected{font-family:Arial; font-size:12px; border:solid 1px Red; font-weight:bold;
                        background-color:Gray; color:Black;}
#MainNav .StaticHover{font-family:Arial; font-size:12px; border:solid 1px Red; font-weight:bold;
                        background-color:Gray; color:Black;}

/*************************************************************************************
/* DYNAMIC MENU (sub menu)
/*************************************************************************************/
#MainNav .DynamicItems{font-family:Arial; font-size:11px; border:solid 1px Black; font-weight:bold;
                        background-color:White; height:20px; color:Black; padding-left:2px;
                        text-align:left;}
#MainNav .DynamicHover{font-family:Arial; font-size:11px; border:solid 1px Black; font-weight:bold;
                        background-color:Red; color:Black;}
#MainNav .DynamicSelected{font-family:Arial; font-size:11px; border:solid 1px Black; font-weight:bold;
                        background-color:Red; color:Black;}

/*************************************************************************************
/* SITEMAP 
/*************************************************************************************/
#SiteMap{padding-left:25px; padding-bottom:2px;}

/*************************************************************************************/
/* HYPERLINKS
/*************************************************************************************/
a:link {COLOR:Red;}
a:visited {COLOR:Red;}
a:hover {COLOR:Silver}
a:active {COLOR:Red;}

.HeaderURL {}
a.HeaderURL:link {COLOR:White}
a.HeaderURL:visited {COLOR:White}
a.HeaderURL:hover {COLOR:Red}
a.HeaderURL:active {COLOR:White}

/*************************************************************************************/
/* CENTER DIVISION OF PAGE
/* The wrapper keeps the menu and header from "jumping" when window is not maximized

background-image:url(Images/body_bg.jpg);
/*************************************************************************************/
body{background-color:Black; background-repeat: repeat-x; text-align:center; padding-left:5px; 
                    padding-right:5px; font-family:arial; font-size:12px; font-weight:normal;}
#wrapper{width:996px; text-align:left;background-color:Black;}
#copy { }
#copy .Container {font-family:Arial; font-size:12px; color:red;  background-color:Black; 
                    height: 485px; border:1px solid Red; padding:7px 7px 7px 7px; overflow:hidden;} 
#copy .Container_White {font-family:Arial; font-size:12px; color:red;  background-color:White; 
                    height: 485px; border:1px solid Red; padding:7px 7px 7px 7px; overflow:hidden;} 
#copy .Container_Stretch {font-family:Arial; font-size:12px; color:red; background-color:Black; 
                    height:100%; border:1px solid Red; padding:7 7px 7px 7px; overflow:auto;}                                                         #copy .Container_Stretch_Gray {font-family:Arial; font-size:12px; color:red; background-color:Gray; 
                    height:100%; border:1px solid Red; padding:7 7px 7px 7px; overflow:auto;}                                                         #copy .Container_Stretch_White {font-family:Arial; font-size:12px; color:red; background-color:White; 
                    height:100%; border:1px solid Red; padding:7 7px 7px 7px; overflow:auto;}                                                             
#copy .Invisible20{width:193px; border:none; position: relative; float:left; } 
#copy .Invisible23{width:250px; border:none; position: relative; float:left; } 
#copy .Invisible25{width:270px; border:none; position: relative; float:left; } 
#copy .Invisible33{width:390px; border:none; position: relative; float:left; } 
#copy .Invisible45{width:460px; border:none; position: relative; float:left; } 
#copy .Invisible33{width:390px; border:none; position: relative; float:left; } 
#copy .Invisible{border:none; position: relative; float:left; } 
#copy .InvisiblePadded33{width:290px; border:none; position: relative; float:left;  
                         padding:5px 15px 5px 15px; } 
#copy .InvisibleLeftIndent{padding: 0px 40px 0px 40px; border:none; float:left;} 
     
#copy .Left20{font-family:Arial; font-size:12px; color:Red; background-color:Black; height: 472px; 
                    width:190px; border:double 3px Red; margin-right:7px; position:relative; 
                    float:left; padding:3px 3px 3px 3px;}
                    
#copy .Left33{font-family:Arial; font-size:12px; color:Red; background-color:Black; height: 472px; 
                    width:285px; border:double 3px Red; margin-right:7px; position:relative; 
                    float:left; padding:3px 3px 3px 3px;}
#copy .Left45{font-family:Arial; font-size:12px; color:Red; background-color:Black; height: 472px; 
                    width:400px; border:double 3px Red;  margin-right:7px; position: relative; 
                    float: left; padding:3px 3px 3px 3px; }
#copy .Left50{font-family:Arial; font-size:12px; color:Red; background-color:Black; height: 472px; 
                    width:474px; border:double 3px Red;  margin-right:7px; position: relative; 
                    float: left; padding:3px 3px 3px 3px;}    
#copy .Left100{font-family:Arial; font-size:12px; color:Red; background-color:Black; height: 472px; 
                    width:968px; border:double 3px Red;  position: relative; 
                    float: left; padding:3px 3px 3px 3px;}    
#copy .Right50{font-family:Arial; font-size:12px; color:Red; background-color:Black; height: 472px; 
                    width:474px; border:double 3px Red; position: relative; 
                    float: left; padding:3px 3px 3px 3px;} 
#copy .Right66{font-family:Arial; font-size:12px; color:Red; background-color:Black; height: 472px; 
                    width:663px; border:double 3px Red; position: relative; 
                    float: left; padding:3px 3px 3px 3px;} 
#copy .Right80{font-family:Arial; font-size:12px; color:Red; background-color:Black; height: 472px; 
                    width:758px; border:double 3px Red; position: relative; 
                    float: left; padding:3px 3px 3px 3px;}    
#copy .RightTopSection{font-family:Arial; font-size:12px; color:Red; background-color:Black; height:268px; 
                    width:245px; border:double 3px Red; margin-bottom:7px; position:relative; 
                    float: left; padding:3px 3px 3px 3px;}
#copy .RightBottomSection{font-family:Arial; font-size:12px; color:Red; background-color:Black; height:185px; 
                    width:245px; border:double 3px Red;  position: relative; 
                    float:left; padding:3px 3px 3px 3px;}
  
/*************************************************************************************/
/* MISC
/*************************************************************************************/                       
h1 {font-family:Arial; font-size:15px; font-weight: bold; color:Black; background-color:Gray; 
                    margin: -3px -3px 0px -3px; padding: 0px 0px 0px 9px; overflow:auto; text-align:left;}
p {margin: 0.4em 0em 0.2em 0em; font-size: 1.0em; line-height: 1.3em; font-weight:bold; }
ul {margin: 5px 0px 0px 0px; font-size:11px; list-style-type:disc;}
pre {font-family: monospace; font-size: 1.0em;}
strong, b {font-weight: bold;}
a {text-align:center; color:Black;}
                      
/*************************************************************************************/
/* GRIDVIEW CSS CLASS 1
/*************************************************************************************/
.HeaderStyle_1{text-align:left; background-color:Black; border-width:25px; }
.HeaderStyle_1 th{padding: 2px; text-decoration: underline; color:Gray; font-weight:bold;}
.HeaderStyle_1 a{ text-align:center; text-decoration:none; color:Gray; display:block;}
.RowStyle_1 td{padding: 3px; text-align:left; background-color:Black; font-weight: bold; 
               border:solid 1px black;} 
.RowStyle_1a td{padding: 3px; text-align:center; background-color:Black; font-weight: bold;
               border:solid 1px black;}                
.SelectedRowStyle_1 td{padding: 3px; text-align:left;background-color:Black; font-weight: bold; 
                     border-top:dotted 2px gray; border-bottom:dotted 2px gray;
                     border-left:solid 1px black; border-right:solid 1px black;}
.PagerStyle_1 {text-align:left; background-color:black; color:Red; font-weight:bold;  
               border:solid 1px black;}
.PagerStyle_1 a{color:Red;}
.PagerStyle_1 table{margin-left:3px;}
.PagerStyle_1 table td{padding:3px;}
.PagerStyle_1 span{padding:3px;}  

