/*
=========================================================================================
==========>>> Globals <<<================================================================
=========================================================================================

These affect all elements on all pages.  These are the default styles for most elements.
*/

body { 
  padding: 0;
  margin: 0;
  font: normal normal normal 62.5%/100% Tahoma, Helvetica, Verdana, sans-serif;
  color: #666666;
  }

#icxbacklink {
  display: block;
  padding: 0;
  margin: 10px 0 0 25px;
  }

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }

a:link, a:visited {
  color: #084A8E;
  text-decoration: underline;
  }
  
a:hover, a:active {
  color: #000;
  text-decoration: none;
  }
  
img { border: 0; }

h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0 0 10px 0; line-height: 1em; }

h1 { font-size: 1.6em; } 
h2 { font-size: 1.4em; } 
h3 { font-size: 1.2em; } 
h4 { font-size: 1em; } 
h5 { font-size: 1em; }
h6 { font-size: 1em; }

address, p, pre, dl, ol, ul { padding: 0; margin:  0 0 1.5em 0; line-height: 1.6em; }

ol, ul { margin:  0 0 1.5em 20px; }

dl { margin: 0; }

/*
=========================================================================================
==========>>> Predefined Styles & Elements <<<===========================================
=========================================================================================

These styles control the presentation of certain elements in the content areas.  Some are
just predefined boxes that are more visually stimulating than others.
*/

div.content dt { 
  margin: 0; 
  font-weight: bold;
  background: url(../images/predefined/greyarrow.gif) no-repeat center left transparent;
  padding: 0 0 0 15px; 
  }
  
    div.content dd { padding: 0 0 0 25px; margin: 0 0 1.5em 0; }
 
div.content h2 { font-size: 1.3em; font-weight: bold; }

div.content ul.arrow { list-style-image: url(../images/predefined/bullet.gif); }

/* Green Box and Blue Box Styles */

div.content div.greenBox, div.content div.blueBox {
  color: #FFF;
  padding: 0;
  margin: 0 0 1.5em 0;
  }
  
    div.content div.greenBox h3, div.content div.blueBox h3 {
      padding: 5px 12px;
      margin: 0;
      text-transform: uppercase;
      font-size: 1.1em;
      font-weight: bold;
      }
    
    div.content div.greenBox p, div.content div.blueBox p { padding: 5px 12px; margin: 0; }

    div.content div.greenBox a, div.content div.blueBox a {
      background: url(../images/predefined/whitearrow.gif) no-repeat center right transparent;
      padding: 0 18px 0 0;
      margin: 0;
      color: #FFF;
      font-weight: bold;
      }

div.content div.greenBox { background: url(../images/predefined/greenBox-bg.gif) repeat-x bottom left #6BA90E; }
div.content div.greenBox h3 { background-color: #9FC821; border-top: 12px solid #6BA90E; }
div.content div.blueBox { background: url(../images/predefined/blueBox-bg.gif) repeat-x bottom left #456363; }
div.content div.blueBox h3 { background-color: #5F7D7D; border-top: 12px solid #456363; }
  
/* Related Links Box */  
      
#right div.related {
  background: url(../images/predefined/rightcolumnbottom.jpg) no-repeat bottom right transparent;
  padding: 0;
  margin: 0 0 1.5em 0;
  }
    
    #right div.related h4 {
      background: url(../images/predefined/rightcolumntop.jpg) no-repeat top right transparent;
      color: #084A8E;
      padding: 5px 10px 0 10px;
      margin: 0;
      font-size: .9em;
      text-transform: uppercase;
      letter-spacing: 2px;
      }
      
    #right div.related ul {
      background: url(../images/predefined/relatedultop.gif) no-repeat top right transparent;
      padding: 5px 0 10px 20px;
      list-style-image: none;
      list-style-type: none;
      margin: 5px 0 0 0;
      }

/* Left Column, Sub-Navigation List */

#left ul.leftLinks, #small ul.leftLinks {
  padding: 0;
  margin: 0 0 1.5em 0;
  list-style: none;
  }

    #left ul.leftLinks li, #small ul.leftLinks li { display: block; padding: 5px 0 0 8px; }

    #left ul.leftLinks #current, #small ul.leftLinks #current {
      background: url(../images/predefined/leftlinksarrow.gif) no-repeat 0% 70% transparent;
      font-weight: bold;
      }
  
    #left ul.leftLinks li a:link, #left ul.leftLinks li a:visited, 
    #left ul.leftLinks li a:hover, #left ul.leftLinks li a:active,
    #small ul.leftLinks li a:link, #small ul.leftLinks li a:visited, 
    #small ul.leftLinks li a:hover, #small ul.leftLinks li a:active
      {
      display: block;
      padding: 5px 0 0 6px;
      border-bottom: 1px solid #BFBFBF;
      margin: 0;
      text-decoration: none;
      }
      
        #left ul.leftLinks #current a, #small ul.leftLinks #current a { padding: 5px 0 0 1px; }

/* Text box with a large (75x75) thumbnail floated to the right,
   a border across the top, and a heading and a paragraph. */

div.bigRightThumb {
  padding: 5px 0 0 0;
  border-top: 1px solid #C8C8C8;
  margin: 0 0 1.5em 0;
  }
  
    div.bigRightThumb img {
      float: right;
      width: 75px;
      padding: 1px;
      border: 1px solid #9A9A9A;
      margin: 0;
      }
      
    div.bigRightThumb p { padding: 0; margin: 0 90px 1.5em 0; }

/* Text box with a small (50x50) thumbnail floated left, and
   a heading and a paragraph. */

div.littleLeftThumb { padding: 0; margin: 0 0 1.5em 0; }
  
    div.littleLeftThumb img {
      float: left;
      width: 50px;
      padding: 1px;
      border: 1px solid #9A9A9A;
      margin: 0;
      }
      
    div.littleLeftThumb p, div.littleLeftThumb h4 { padding: 0; margin: 0 0 .5em 60px; }
      
    div.littleLeftThumb a {
      background: url(../images/predefined/greyarrow.gif) no-repeat center right transparent;    
      padding: 0 15px 0 0;
      font-weight: bold;
      }
/*
=========================================================================================
==========>>> Page Wrapper <<<===========================================================
=========================================================================================
*/
#page { text-align: left; }
/*
=========================================================================================
==========>>> Masthead (Logo & Global Navigation) <<<====================================
=========================================================================================
*/
#masthead #logo { width: 314px; height: 110px; }

#masthead #navBoth { display: none; }
      
#masthead #navBigOnly { display: none; }
/*
=========================================================================================
==========>>> Branding & Heading Blocks <<<==============================================
=========================================================================================
*/
#branding { display: none; }

#header { border-top: 4px solid #B2B2B2; margin: 0; }
/*
=========================================================================================
==========>>> Content Areas & Columns Styles <<<=========================================
=========================================================================================
*/

#single, #double, #triple, #unique { 
  width: 753px;
  padding: 0;
  margin: 0;
  font-size: 1.1em;
  }

#double { background: url(../images/content-bgs/2col.gif) repeat-y top left #FFF; }
#triple { background: url(../images/content-bgs/3col.gif) repeat-y top left #FFF; }
#unique { background: url(../images/content-bgs/3col-homepage.gif) repeat-y top left #FFF; }

    #small, #main, #left, #center, #right, #column1, #column2, #column3 {
      float: left;
      padding: 0;
      margin: 0;            
      }
  
    #small { width: 220px; }
    #main { width: 533px; }
    #left { width: 165px; }
    #center { width: 388px; }
    #right { width: 200px; }            
    #column1 { width: 323px; }
    #column2 { width: 215px; }
    #column3 { width: 215px; }

        div.content { background: transparent; padding: 20px 25px 10px 25px; }
        #left div.content { padding: 20px 20px 10px 10px; }
        #right div.content { padding: 20px 25px 10px 10px; }
/*
=========================================================================================
==========>>> Footer <<<=================================================================
=========================================================================================
*/
#footer {
  padding: 10px 20px;
  background-color: #DADADA;
  color: #999999;
  }

    #footer ul { 
      list-style-type: none;
      padding: 0;
      margin: 0 0 10px 0;
      }
      
    #footer ul li { display: inline; }
    #footer ul li a:link, #footer ul li a:visited { color: #999; text-decoration: none; }
    #footer ul li a:hover, #footer ul li a:active { color: #666; text-decoration: none; }
    #footer p { padding: 0; margin: 0; }