@import url('reset.css');

/* ========================================================================== */            
/* === BASIC ================================================================ */
/* ========================================================================== */ 

body{
    background: #fff url(../../img/landing/bg.jpg) top center no-repeat;
    color: #333;
    font: normal normal 10px/10px Verdana, Arial, sans-serif; }
    
    p{
	font: normal normal 1.1em/1.4em Verdana, Arial, sans-serif;
	margin: 0 0 1em 0; }
        
    a{
        color: #ea7b00;
        text-decoration: none; }
        
/* ========================================================================== */            
/* === STRUCTURE ============================================================ */
/* ========================================================================== */

    #wrap{
        display: table;
        padding: 80px 0 0 0;        
        width: 100%; }
        
        #container{
            display: table;
            margin: 0 auto;
            position: relative;
            width: 996px; }
            
/* ========================================================================== */            
/* === HEADER =============================================================== */
/* ========================================================================== */              
            
            #header{
                float: left;
                height: 200px;
                width: 100%; }
		
		#header #logo{
		    display: block;
		    font-size: 0;
		    line-height: 0;
		    margin: 0 auto;
		    text-align: center;
		    text-indent: 0;
		    width: 300px; }
                
/* ========================================================================== */            
/* === DESCRIPTION ========================================================== */
/* ========================================================================== */

            #description{
                float: left;
                height: 120px;
                width: 100%; }
		
		#description .inner{ padding: 0 290px 0 290px }
		
		    #description .inner p{ text-align: center; }
		    
/* ========================================================================== */            
/* === LINKS ================================================================ */
/* ========================================================================== */

            #links{
		clear: both;
                height: 31px;
		margin: 0 auto;
		padding: 12px 0 90px 0;
                width: 38%; }
		
		#links .electricity-information, #links .natural-gas-information{
		    color: #fff;
		    font: normal bold 1.3em Verdana, Arial, sans-serif;
		    letter-spacing: -0.2px;
		    position: absolute; }
		    
		#links .electricity-information{ margin: 0 0 0 15px; }
		#links .natural-gas-information{ margin: 0 0 0 207px; }
		
		#links a:hover{ text-decoration: underline; }
		#links a:active{
		    color: #000;
		    text-decoration: none;
		    text-shadow: 0px 0px 10px #fff; }
                
/* ========================================================================== */            
/* === HEADLINE ============================================================= */
/* ========================================================================== */                 
                
            #headline{
		clear: both;
		margin: 0 auto;
		padding: 0 0 220px 0;
                width: 67%; }
		
		#headline h2{
		    background: url(../../img/landing/glacial-gives-you-the-power-to-choose.jpg);
		    display: block;
		    font-size: 0;
		    height: 30px;
		    line-height: 0;
		    margin: 0 auto;
		    text-indent: -9999px;
		    width: 655px; }
                
/* ========================================================================== */            
/* === FOOTER =============================================================== */
/* ========================================================================== */

        #wrap-footer{
	    clear: both;
	    margin: 0 auto;
	    padding: 0 0 50px 0;
            width: 50%; }
            
            #footer{
		color: #999;
		line-height: 1.3em;
                margin: 0 auto;
		text-align: center;
                width: 400px; }
		
	    #footer span{
		color: #333;
		font: normal normal 1.1em Verdana, Arial, sans-serif; }
		
	    #footer .facebook, #footer .twitter, #footer .linkedin, #footer .rss{
		display: inline-block;
		font-size: 0;
		height: 24px;
		line-height: 0;
		text-indent: -9999px;
		width: 24px; }
		
		#footer .facebook:hover, #footer .twitter:hover, #footer .linkedin:hover, #footer .rss:hover{ background-position: 0px -24px }
		#footer .facebook:active, #footer .twitter:active, #footer .linkedin:active, #footer .rss:active{ background-position: 0px -48px }
		
		#footer .facebook{ background: url(../../img/landing/facebook.png) }
		#footer .twitter{ background: url(../../img/landing/twitter.png) }
		#footer .linkedin{ background: url(../../img/landing/linkedin.png) }
		#footer .rss{ background: url(../../img/landing/rss.png) }