/***************** meyerweb.com reset v1.0 | 20080212 *****************/

.print-only { display: none; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  /*font-size: 100%;*/
  /*vertical-align: baseline;*/
  background: transparent;
}

ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

img { border: 0; }


/************************* global stuff ***************************/

div.left { float: left; }
div.right { float: right; }
div.clear { clear: both; }
div.no-text { font-size: 1px; }
div.border { border: 1px solid #000; }
div.border-red { border: 1px solid red; }
div.border-blue { border: 1px solid blue; }
div.border-green { border: 1px solid green; }

.container {
    overflow: hidden; /* Clearfix! */
    zoom: 1;  /* Triggering "hasLayout" in IE */
    display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */
}

img.image-left { float: left; margin-right: 15px; }

img.image-right { float: right; margin-left: 15px; }

.replace
{
    position: relative;
    display: block;
    overflow: hidden;
}

.replace span
{
  padding: 0;
  margin: 0;
  display:block;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

h1#main-title
{
    width: 268px;
    height: 100px;
    font-size: 15px;
    position: relative;
    text-indent: -9999px;
}

h1#main-title span
{
    background: url("../images/cba-electrical-logo.png?v=1") no-repeat;
    
}


a, a:active, a:link, a:visited { color:#fff; text-decoration: none; }
a:hover { color:#fff; text-decoration: underline; }

a.dark, a.dark:active, a.dark:link, a.dark:visited { color:#053465; text-decoration: none; }
a.dark:hover { color:#1663b3; text-decoration: none; }

.dark-bg a { color: #fff; }
.dark-bg a:hover { color: #ddd; }

hr { border: 0; height: 1px; background: #bbb; color: #bbb; }


.img-rollover:hover img
{
  opacity: .90;
  filter:alpha(opacity=90);
}


.link-rollover:hover span
{
  opacity: .90;
  filter:alpha(opacity=90);
} 

a#much-link {
    background: url("../images/much-logo-small.png") right center no-repeat;
    display: block;
    float: right;
    padding: 10px 39px 12px 0;
}


/*********************************** main layout elements **********************/
html, body {
    height: 100%;
}

body {
  font-size: 13px;
  font-family: segoe ui, tahoma, arial, helvetica, sans serif;
  color: #fff;
  padding: 0px 0 0 0;
  margin: 0;
  background-color: #aaa;
}

#main-outer {
    position: relative;
    min-height: 100%;
}

#main-inner {
    width: 100%;
  min-width: 1080px;
  max-width: 1900px;
    font-size: 100%;
  /*border: 1px solid red;*/
}

div#left {
    position: absolute;
    top: 45px;
    left: 38px;
    width: 268px;
    
  font-family: 'HelveticaNeueETW01-45Lt', segoe ui, tahoma, arial, helvetica, sans serif;
  letter-spacing: -0.06em;
}

#contact {
    padding-left: 15px;
    font-size: 18px;
}

#contact div{
    position: relative;
}

#contact div.phone {
    padding-left: 27px;
    padding-bottom: 8px;
}

#contact div.email {
    padding-left: 27px;
}

#contact .phone i {
    font-size: 29px;
    position:absolute;
    top: 0px;
    left: 5px;
    line-height: 22px;
}

#contact .email i {
    position:absolute;
    top: 0px;
    left: 1px;
    line-height: 22px;
}

#contact div.postal {
    padding: 13px 0 0 0;
    font-size: 80%;
}

#footer {
    position: absolute;
    bottom: 45px;
    left: 53px;
}

/*********************************** nav **********************/

#nav {
    padding: 25px 0 35px 0;
    font-size: 18px;
}

#nav li {
    padding-left: 15px;
    position: relative;
}

#nav li i {
    position: absolute;
    top: 16px;
    left: 0px;
    font-size: 80%;
}

#nav li a {
    border-bottom: 1px solid #ddd;
    display: block;
    padding: 11px 0 11px 0;
}

#nav li:first-child a {
    border-top: 1px solid #ddd;
}



/*********************************** content **********************/

#content-right {
    background: url("../images/content-bg.png");
  padding: 40px 50px 50px 50px;
  width: 60%;
  float: right;
  margin: 45px 38px 0 0;
  color: #032e48;
  margin-bottom: 130px;
}

#content-right #right-column {
    /*background: url("../images/content-bg.png");*/
  padding: 20px 20px 10px 10px;
  /*border-left: 1px solid #aaa;*/
  float: right;
  width: 170px;
  font-size: 95%;
  margin-top: 50px;
}

#content-right #middle-column {
  float: right;
  width: 139px;
  padding: 70px 20px 0 0;
  font-size: 90%;
}

#content-right #middle-column img {
  margin-top: 10px;
}

#content-right .right-column-images {
  float: right;
  width: 245px;
}

#content-right .right-column-images img {
  width: 100%;
  margin-bottom: 10px;
}

#content-right .quotes, .quote-text {
  font-style: italic;
}

#content-right .quote-text {
  padding-bottom: 4px;
}


#content-right #left-column {
  float: left;
  overflow: hidden;
}



#content-right h1 {
  font-size: 390%;
  line-height: 100%;
  letter-spacing: -0.02em;
  font-family: 'HelveticaNeueW01-75Bold', segoe ui, tahoma, arial, helvetica, sans serif;
  padding-bottom: 20px;
}

.content-area li {
  margin-bottom:5px;
  line-height: 140%;
}

.content-area li.no-margin {
  margin-bottom:0px;
}

.content-area img
{
  /*margin-top: 5px;
  margin-bottom: 10px;*/
}

.content-area ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:disc;
    margin-bottom:11px;
    margin-left:26px;
    margin-top:0px;
    padding:0 0 8px;
}

.content-area ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
    margin-bottom: 0px;
    margin-top: 4px;
}

.content-area ul.dash li:before {
    display:inline-block;
    content:"-";
    width:1em;
    margin-left:-1em;
}

.content-area p {
  padding: 3px 0 14px 0;
}

.content-area li.no-bullett {
    list-style: none;
    font-size: 90% !important;
    font-style: italic;
}

.commercial-left { max-width: 50%; }

/*********************************** home **********************/


#home-right {
  text-align: right;
  padding: 45px 38px 0px 0;
}

#home-right div { float: right;  width: 60%; }

#home-right h1 {
  font-size: 440%;
  line-height: 100%;
  font-family: 'HelveticaNeueW01-75Bold', segoe ui, tahoma, arial, helvetica, sans serif;
  letter-spacing: -0.01em;
  /*width: 60%;
  float: right;*/
}

#home-right h1.small {
   font-size: 26px;
   line-height: 110%;
   padding: 30px 0px 30px 0px;
  font-family: 'HelveticaNeueW01-Thin', segoe ui, tahoma, arial, helvetica, sans serif;
  letter-spacing: 0;
}
#home-right ul.large {
   padding: 0px 0px 200px 0px;
}

#home-right ul.large li h2 {
   font-size: 26px;
   line-height: 110%;
  font-family: 'HelveticaNeueW01-Thin', segoe ui, tahoma, arial, helvetica, sans serif;
  letter-spacing: 0;
  padding-bottom: 10px;
}


/***************************media queries ***********************/


@media screen and (min-width: 1700px) {
  #main-inner {
    font-size: 130%;
  }
  .quote-text, #left-column p, #left-column li{
    font-size: 90%;
  }

  #content-right {
    width: 60%;
  }

    #content-right #right-column {
  font-size: 85%;
    }



}


@media screen and (min-width: 1100px) {
    

    #content-right .right-column-images {
      width: 245px;
    }
}


@media screen and (min-width: 1200px) {
    

    #content-right .right-column-images {
      width: 345px;
    }

    
}


@media screen and (min-width: 1400px) {
    

    #content-right .right-column-images {
      width: 445px;
    }

    #content-right #middle-column {
      padding: 70px 40px 0 0;
    }

    #content-right #right-column {
      padding: 20px 45px 10px 45px;
    }
}





@media screen and (max-width: 1200px) {

  #content-right {
    width: 55%;
  }

    #content-right #right-column {
      width: 130px;
    }

    

    #home-right h1 {
      font-size: 390%;
  line-height: 100%;
  /*width: 60%;*/
    }
    #home-right div {
  padding-right: 30px;
    }

    

}