﻿
/* **********************************************************************
   Basic HTML styles
   ********************************************************************** */
html    { font-size: 1em;   }
body    { margin: 0; padding: 0; font-family: Palatino, Garamond, Georgia, Serif; font-weight: normal; background-color: #CCCCCC; color: #656565; word-wrap: break-word; }

img {   border: 0; }
/*p   {  line-height: 1.4em;   }*/

h1 { color: #996600; font-family: Georgia, Garamond, Palatino, Serif; /*font-size: 2em;*/ font-weight: normal; }
h2 { color: #993300; font-family: Helvetica, Arial, Sans-Serif; /*font-size: 1.25em;*/ font-weight: bold; /*line-height: 140%;*/ margin-bottom: 0; }
h3 { color: #82592F; font-family: Georgia, Garamond, Palatino, Serif; /*font-size: 1.25em;*/ font-weight: normal; font-style: italic; /*line-height: 140%;*/ margin-bottom: 0; }

h2 + p, h3 + p, h2 + h3, h2 + div, h3 + div, h2 + ul, h3 + ul { margin-top: 0; }

table, tr   { border: 0;  margin: 0; padding: 0; } 	
td          { vertical-align: top; margin: 0; padding: 0; }
/* **********************************************************************
   End Basic HTML styles
   ********************************************************************** */


/* **********************************************************************
   Main Frame
   ********************************************************************** */
#mainFrame  {  background-color: #FFFFFF; border: 1px solid #3F5C57; width: 100%; min-width: 60em; max-width: 60em; margin-left: auto; margin-right: auto; margin-top: 0em; margin-bottom: 1em;  }


/* **********************************************************************
   TABS / Super Header Area
   ********************************************************************** */
#superHeader { position: relative; width: 100%; min-width: 18em; max-width: 60.125em; padding: 0em; margin-left: auto; margin-right: auto; margin-top: 0.25em; margin-bottom: 0em; background-image: url('../images/TAG_Tab.jpg'); background-repeat: no-repeat; height: 3.3125em;  overflow: hidden;  }
#superHeader > div { position: absolute; padding: 0em; margin: 0em; }
#superHeader > div > a { display: block; width: 100%; height: 100%; }
#supheadISA { top: 0em; left: 0em;  width: 5.5em; height: 3.3125em;  }
#supheadTAG { top: 0em; left: 5.75em;  width: 5.5em; height: 3.3125em; }
#supheadITCC { top: 0em; left: 11.5em;  width: 5.5em; height: 3.3125em; }

/* **********************************************************************
   Header Area
   ********************************************************************** */
#tagHeader  { padding: 0em; margin: 0em; background-color: #3F5C57; }

#HeaderMain { position: relative; overflow: hidden; width: 100%; margin: 0em; padding: 0em; background-color: #3F5C57; }
#headerBackground { position: relative; }
#headerBackground img { width: 100%;  }
#Homelinkpad { display: block; position: absolute; top: 0em; left: 0em; padding: 0em; width: 33%; height: 100%; z-index: 5;  }
#Homelinkpad { background-image: url('~/images/tagBanner.jpg');  } /* *****  ***** */
#Homelinkpad img   { width: 100%; }

#headerNarrowSep { display: none; position: absolute; width: 100%; height: 0.25em; border-top: 0.125em solid #3F5C57; background-color: #FFFFFF; }
#search     { position: absolute; top: 1.1875em; right: 1.5625em; border: 0.0625em solid #013401; height: 1.3125em; vertical-align: top; background-color: White; }
#search > div > div { position: relative; height: 100%;   }
#search input[type=image] { background-color: #3F5C57; color: #FFFFFF; height: 100%; }
.searchBox  { border: 0em; height: 1.1875em; vertical-align: top; }

#socialMediaLinks           { position: absolute; bottom: 0.25em; right: 1em; height: 1em; }
#socialMediaLinks > img     { position: relative; left: 0em; bottom: 0em; }
#socialMediaLinks a img     { position: relative; left: 0.3125em; bottom: 0.1875em; }


        #socialMediaLinks2 { float: right; }

#siteMenuToggle { float: right;  background-color: #3F5C57; color: #FFFFFF; display: none; padding: 0.4375rem 0.8rem 0.4rem 0.5rem; line-height: 1.5em; border-radius: 0.5em; }
#siteMenuToggle:hover   { background-color: #4F726B;  }
#siteMenuToggle > a      { padding: 0em; margin: 0em; line-height: 1.5em; font-family: Helvetica, Arial, Sans-Serif; font-size: 0.75em; }
#siteMenuToggle img      { height: 1.5rem; padding: 0em; margin-bottom: -0.25em; }
#siteMenuToggle > a:link        { color: #009900; }
#siteMenuToggle > a:visited     { color: #009900; }
#siteMenuToggle > a:hover       { color: #009900; }
#siteMenuToggle > a:active      { color: #009900; }

#subMenu { background-color: #99B2B2; float: left; width: 27%; }
#subMenuToggle { float: right;  background-color: #669900; color: #FFFFFF; display: none; padding: 0.4375rem 0.8rem 0.2rem 0.5rem; line-height: 1.5rem; border-radius: 0.5rem; }
#subMenuToggle:hover   { background-color: #77B200;  }
#subMenuToggle a      { padding: 0em; line-height: 1.5rem; font-family: Helvetica, Arial, Sans-Serif; font-size: 0.75rem; }
#subMenuToggle img      { height: 1.5rem; margin-bottom: -0.25em; }
#subMenuToggle a:link      { color: #FFF; text-decoration: none; }
#subMenuToggle a:visited   { color: #FFF; text-decoration: none; }
#subMenuToggle a:hover     { color: #FFF; text-decoration: none; }
#subMenuToggle a:active    { color: #FFF; text-decoration: none; }

#siteMenu { background-color: #3F5C57; color: #FFF; font-family: Georgia, Garamond, Palatino, Serif;  font-weight: normal;  /*overflow: hidden;*/  }
#siteMenu li > a { display: block; padding: 0.5em 1em; width: 100%;  }
#siteMenu a:link      { color: #FFF; text-decoration: none; }
#siteMenu a:visited   { color: #FFF; text-decoration: none; }
#siteMenu a:hover     { color: #FFF; text-decoration: underline; }
#siteMenu a:active    { color: #FFF; text-decoration: none; }
#siteMenu ul { margin: 0em; padding: 0em; list-style-type: none; overflow: hidden; font-size: 0.9375em;   }
#siteMenu > ul > li {  float: left; }
#siteMenu > ul > li > ul { display: none; background-color: #3F5C57; z-index: 5; }

#headerSubLine { height: 0.25em; background-color: #FFFFFF; border-bottom: 0.125em solid #3F5C57; }

/* **********************************************************************
   End Header Area
   ********************************************************************** */
   
   
/* **********************************************************************
   Footer Area
   ********************************************************************** */      
#TAGFooter              { color: #E8EBEB; font-family: Georgia, Garamond, Palatino, Serif; font-size: 0.8em; clear: both; }
#TAGFooter a:link       { text-decoration: none; color: White; }
#TAGFooter a:visited    { text-decoration: none; color: White; }
#TAGFooter a:hover      { text-decoration: none; color: White; }
#TAGFooter a:active     { text-decoration: none; color: White; }
#TAGFooterBar           { background-color: #3F5C57; text-align: center; padding: 2em; margin-bottom: 0.5em; overflow: hidden; }
#TAGFooterBar > div     { text-align: center; font-style: italic; margin: 0em 0em 1.25em 0em; }

#isaFooterImage         { display: inline-block; width: 8%; min-width: 5em; padding: 0em 0.75em; margin-bottom: 0em;  }
#isaFooterImage img     { width: 100%;  }
#isaFooterContact       { display: inline-block; padding: 0em 0.75em; margin-bottom: 0em; }
/* **********************************************************************
   End Footer Area
   ********************************************************************** */
   
   
#mainSplit      { border: 0; padding: 0; margin: 0; border-collapse: collapse; }
#mainSplit > tbody > tr > td   { border: 0; }
   
/* **********************************************************************
   Left Side Nav Area (see also: tagSideMenu.css)
   ********************************************************************** */
.leftSideNav            { background-color: #99B2B2; color: #FFFFFF; width: 26.041%; }

/* **********************************************************************
   End Left Side Nav Area
   ********************************************************************** */


/* **********************************************************************
   Secondary Content Area
   ********************************************************************** */
.crumbNav             { color: #534741; font-size: 0.7em; font-family: Helvetica, Arial, Sans-Serif; }
.crumbNav a:link      { color: #82592F !important; }
.crumbNav a:visited   { color: #82592F !important; }
.crumbNav a:hover     { color: #82592F !important; }
.crumbNav a:active    { color: #82592F !important; }


#secondaryContent { padding: 0; font-size: 1em; line-height: 1.4em; float: right; width: 72%;  }
#secondaryContent > div  { padding: 0.5em 1em;}
#secondaryContent a:link      { color: #3F5C57; }
#secondaryContent a:visited   { color: #669900; }
#secondaryContent a:hover     { color: #3F5C57; }
#secondaryContent a:active    { color: #3F5C57; }

/* **********************************************************************
   End Secondary Content Area
   ********************************************************************** */



/* **********************************************************************
   Other
   ********************************************************************** */	
.error      { color: Red; font-weight: bold; }
.success    { color: Green; }
.noBullet   { list-style-type: none; }	
.note  
    {
    display: inline-block; text-align: left; background-color:  #FFFFAA; border: 1px solid Orange; padding: 0.625em; margin: 0.3125em;           
	-moz-border-radius: 0.1875em; -webkit-border-radius: 0.1875em; border-radius: 0.1875em;     
	-moz-box-shadow: 0.125em 0.125em 0.125em #666; -webkit-box-shadow: 0.125em 0.125em 0.125em #666; box-shadow: 0.125em 0.125em 0.125em #666;
    }
.validationSummary
    {
    display: inline-block; color: Red; font-weight: bold; background-color:  #FFFFAA; border: 1px solid Orange; padding: 0.3125em; margin: 0.3125em;            
	-moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; border-radius: 0.25em;     
	-moz-box-shadow: 0.1875em 0.1875em 0.1875em #666; -webkit-box-shadow: 0.1875em 0.1875em 0.1875em #666; box-shadow: 0.1875em 0.1875em 0.1875em #666;
    }
.validationSummary ul    {  list-style-type:none;    padding: 0em 1em;	   }

.PDFlink    { background: url("../images/pdficon_small.png") right center no-repeat; padding-right: 1.125em; }

/* **********************************************************************
   End Other
   ********************************************************************** */


/* ****************************** */
/* ****** Media Queries ********* */
/* ****************************** */

/* Since older browsers can't handle media queries, these are applied to any browser that can handle media queries. These are the basic styles that make the site responsive.
    - Min-width value removed from frame. 
    - Site Menu is in responsive mode
    - Side Menu is in responsive mode
    - search box and social media are below header. */
@media only screen and (min-width:0em) 
{
    #mainFrame          { min-width: 10em; }
    #superHeader        { min-width: 10em; }
    #secondaryContent    { float: none; width: 100%;  }
    h1  { font-size: 1.6em; line-height: 2.0em; }
    h2  { font-size: 1.2em; line-height: 1.15384615em; }
    h3  { font-size: 1.0em; line-height: 1.11111111em; }

    #headerBackground img { width: 28em;  }
    #Homelinkpad   { width: 9.5em; background-image: none; }

    #siteMenu   { height: auto; overflow: hidden; line-height: 1.5em; }
    #siteMenu > ul   { display: none; margin: 0.625em;  }
    #siteMenu > ul > li { float: none; }
    #siteMenu > ul > li > ul { position: relative; top: 0;  padding: 0.5em 0.5em 0.5em 1.5em; }
    #siteMenuToggle { display: block; }

    #subMenu { float: none; width: 100%; font-size: 1.25em; }
    /* Some .ISATreeMenu code in tagSideMenu.css*/
    #subMenuToggle { display: block; }
    
    #headerNarrowSep { position: relative; display: block;  }
            
    #search     { position: relative; top: 0em; right: 0em;  height: 1.3125em; border: 0em; vertical-align:top; background-color: #3F5C57; max-width: 100%; margin: 0.5em; text-align: right; }
    #search > div { display: inline-block; padding: 0em; margin: 0em; height: 1.3125em; border: 1px solid #013401; background-color: #FFFFFF; }
    .searchBox  { border: 0em; height: 1.1875em; vertical-align:top; width: 9em; }

    #socialMediaLinks           { position: absolute; top: 3.5em; right: 0.75em; height: 1em; margin: 0em; text-align: right; }
    #socialMediaLinks > img     { position: relative; left: 0em; bottom: 0em; }
    #socialMediaLinks a img     { position: relative; left: 0.125em; bottom: 0.25em; }
    
    /*#Homelinkpad   { height: 40%; }*/
}

/* very small.  Most phones will be around this size.
    - search box and social media are in header. */
@media only screen and (min-width:25em) /* 400px - 25em */
{
    #mainFrame          { min-width: 25em;  }
    #superHeader        { min-width: 25em; }
    #secondaryContent { float: none; width: 100%; }

    #subMenu { float: none; width: 100%; font-size: 1.25em; }
    /* Some .ISATreeMenu code in tagSideMenu.css*/
    
    #headerBackground img { width: 40em;  }  
    #headerNarrowSep { position: absolute; display: none;  }

    #search     { position: absolute; top: 1.1875em; right: 1.5625em; height: 1.3125em; border: 0.0625em solid #013401; vertical-align: top; background-color: #FFFFFF; width: auto; margin: 0; text-align: left; }
    #search > div { display: block; padding: 0em; margin: 0em; height: 1.3125em; border: 0; }
    .searchBox  { border: 0em; height: 1.1875em; vertical-align: top; width: 7em; }

    #socialMediaLinks           { position: absolute; top: auto;  bottom: 0.5em; right: 1.75em; height: 1em; margin: 0em 0em 0em 0em;  text-align: left; }
    #socialMediaLinks > img     { position: relative; left: 0em; bottom: 0em; }
    #socialMediaLinks a img     { position: relative; left: 0.3125em; bottom: 0.1875em; }

    #Homelinkpad   { height: 100%; width: 13em;  }
}


/* Small. Some phone in landscape mode and most tablets.
    - Side Menu is in normal mode.
    - */
@media only screen and (min-width:37.5em) /* 600px - 37.5em */
{
    #mainFrame          { min-width: 37.5em;  }
    #superHeader        { min-width: 37.5em; }
    #secondaryContent { float: right; width: 72%; }
    
    #headerBackground img { width: 100%; }
    #subMenu { float: left; width: 27%; font-size: 1em;}
    /* Some .ISATreeMenu code in tagSideMenu.css*/
    #subMenuToggle { display: none; }

    .searchBox  { width: 9em; }
    #Homelinkpad   {width: 33%;  }
}

@media only screen and (min-width:50em) /* 800px - 50em */
{

}


/* Standard desktop site size
    - Site Menu is in normal mode.
    -
    - */
@media only screen and (min-width:60em) /* 960px - 60em*/
{
    #mainFrame          { min-width: 60em;  }
    #superHeader        { min-width: 60em; }
    #siteMenu               { height: 2em; overflow: no-display; position: relative; line-height: inherit; }
    #siteMenu > ul              { display: block; margin:0em; margin-left: 5%; }
    #siteMenu > ul > li         { float: left; }
    #siteMenu > ul > li > ul    { position: absolute; top: 2em;  padding: 0.5em; border-radius: 0 0 0.5em 0.5em; }
    #siteMenuToggle             { display: none; }
}

@media only screen and (min-width:120em) /* 1920px - 120em */
{

}

/* ****************************** */
/* **** END Media Queries ******* */
/* ****************************** */