/* CSS for Hypercharge Website */
/* Coded by: Travis J. Todd    */

/* Globals */
/*--------------------------------------*/

.clear { clear: both; }
.color { color: #84cae6; }
.left { float: left; }
.right { float: right; }

/* Typography */
/*--------------------------------------*/

body {
  font-size:  100%; /* ~16px */
  line-height: 1.25em; /* 16×1.125= 20px */
  font-family: Helvetica, Arial, Verdana, sans-serif;
}

body #header { color: #aaa; }
body p { padding: 0.5em 0; }
#content p { color: #414242; }
#copyright {
  font-size: 0.625em; /* 16x0.625em = 10px */
  color: #aaa; 
}

strong { font-weight: bold; }
  
  /* Links */
  
  a:link, a:visited { 
    text-decoration: none; 
    outline: none;
    color: #000;
  }
  a:hover, a:active { color: #84cae6; }
  
  #header #about a:link, 
  #header #about a:visited { color: #fff; }
  
  #header #about a:hover, 
  #header #about a:active { color: #84cae6; }
  
  #menu ul li a:link,
  #menu ul li a:visited {
    color: #FFF;
    font-size: 0.875em; /* 16x0.875= 14px */
  }
  
  #menu ul li a:hover,
  #menu ul li a:active,
  #menu ul li a.active:link,
  #menu ul li a.active:visited { color: #414242; }
  
  #footer ul li a:link,
  #footer ul li a:visited { color: #414242; }
  
  #footer ul li a:hover,
  #footer ul li a:active { color: #84cae6; }


  /* Headers */
  
  h2 {
    font-size: 2.125em; /* 16x2.125 = 34px */
    padding: 46px 0 24px 0;
  }

/* Layout */
/*--------------------------------------*/

html, body { background-color: #FFF; }

.container { width: 704px; }

  /* Header */

  #header { 
    background: #414242 url('../images/header-bg.png') repeat-x 0 0; 
    padding-left: 24px;
  }

  #header { border-bottom: 1px #4F4F4F solid; }

  #header #logo {
    float: left;
    padding: 17px 0 0 3px;
  }

  #header #logo a {
    display: block;
    width: 199px;
    height: 40px;
    background: url('../images/hypercharge-logo.png') no-repeat 0 0;
    text-indent: -9999px;
  }

  #header #about {
    float: right;
    width: 496px;
    padding: 22px 0;
  }
  
  /* Menu */
  
  #menu { 
    background: #414242 url('../images/header-bg.png') repeat-x 0 0;
    padding-left: 13px; 
  }
  
  #menu .container { padding-bottom: 8px; }
  
  #menu ul { padding-top: 8px; }
  
  #menu ul li { 
    float: left;
    padding: 4px 11px; 
    background: url("../images/menu-divider.png") no-repeat top right;
  }
  
  #menu ul li:last-child { background: none; }
  
  #menu ul li a:link,
  #menu ul li a:visited { padding: 6px 5px 4px; }
  
  #menu ul li a:hover,
  #menu ul li a:active,
  #menu ul li a.active:link,
  #menu ul li a.active:visited { 
    padding: 5px 4px 3px;
    border: 1px solid #9c9c9c;
    background: url('../images/button-bg.png') repeat-x 0 0;
  }
  
  /* Content */
  
  #content h2, 
  #content p {
    padding-left: 24px;
  }
  
  div.scroller { 
  	/* modify width and height of scrolling section if necessary	*/		
  	width: 510px; 
  	height: 241px;
  	overflow: hidden;
  	float: left;
	}
	
  div.scroller .container {
    width: 10000px;
  }
  
  div.feature {
    /* modify width and height of each section as needed (should match the size of the scroller window)	*/		
    width: 510px;
    height: 241px;
    overflow: hidden;
    float: left;	
  }
  
  div#banner {
    float: left;
    padding: 12px 0 0 12px;
  }
  
  /* Contact */
  #contact { padding-bottom: 24px; }
  
  
  /* Footer */
  
  #footer {
    clear: both;
    border-top: 1px #d8d8d8 solid;
    background: url('../images/footer-bg.png') no-repeat 0 0;
    padding-left: 13px;
  }
  
  #footer ul { padding: 16px 0; }
  #footer ul li { 
    float: left;
    padding: 0 11px;
    background: url('../images/footer-divider.png') no-repeat right 4px;
  }
  #footer ul li:last-child {
    background: none;
  }
  #footer #copyright { 
    clear: both;
    padding: 8px 11px 16px; 
  }